docs: add code examples for Menu, Notifications, Paginator

playwright/fixtures/composition-components.ts

@@ -150,7 +150,10 @@ export const components: ComponentEntry[] = [
     group: 'Menu',
     setup: async (page) => {
       await page.waitForSelector('.example-content');
-      await page.locator('.example-content cps-button').first().click();
+      await page
+        .locator('.example-content cps-button:not(.code-example__copy)')
+        .first()
+        .click();
     }
   },
   {
@@ -160,7 +163,10 @@ export const components: ComponentEntry[] = [
     group: 'Menu',
     setup: async (page) => {
       await page.waitForSelector('.example-content');
-      await page.locator('.example-content cps-button').nth(2).click();
+      await page
+        .locator('.example-content cps-button:not(.code-example__copy)')
+        .nth(2)
+        .click();
     }
   },
   {
@@ -170,7 +176,7 @@ export const components: ComponentEntry[] = [
     setup: async (page) => {
       await page.waitForSelector('.example-content');
       const buttons = page
-        .locator('.example-content cps-button')
+        .locator('.example-content cps-button:not(.code-example__copy)')
         .filter({ hasNotText: /clear all/i });
       const count = await buttons.count();
       for (let i = 0; i < count; i++) {

projects/composition/src/app/pages/menu-page/menu-page.component.html

@@ -1,6 +1,9 @@
 <app-component-docs-viewer [componentData]="componentData">
   <!-- Example of component's usage -->
-  <div class="menu-group">
+  <app-code-example
+    label="Standard menu"
+    [htmlCode]="examples.standardMenu.html"
+    [tsCode]="examples.standardMenu.ts">
     <cps-menu
       #standardMenu
       [items]="items"
@@ -14,7 +17,12 @@
       [ariaExpanded]="isStandardMenuOpen"
       (clicked)="standardMenu.toggle($event)">
     </cps-button>
+  </app-code-example>
 
+  <app-code-example
+    label="Standard menu without header"
+    [htmlCode]="examples.standardMenuNoHeader.html"
+    [tsCode]="examples.standardMenuNoHeader.ts">
     <cps-menu
       #standardMenuNoHeader
       [items]="items"
@@ -28,7 +36,12 @@
       [ariaExpanded]="isStandardMenuNoHeaderOpen"
       (clicked)="standardMenuNoHeader.toggle($event)">
     </cps-button>
+  </app-code-example>
 
+  <app-code-example
+    label="Compressed menu"
+    [htmlCode]="examples.compressedMenu.html"
+    [tsCode]="examples.compressedMenu.ts">
     <cps-menu
       #compressedMenu
       [items]="items"
@@ -43,7 +56,12 @@
       [ariaExpanded]="isCompressedMenuOpen"
       (clicked)="compressedMenu.toggle($event)">
     </cps-button>
+  </app-code-example>
 
+  <app-code-example
+    label="Compressed menu without icons"
+    [htmlCode]="examples.compressedMenuNoIcons.html"
+    [tsCode]="examples.compressedMenuNoIcons.ts">
     <cps-menu
       #compressedMenuNoIcons
       [items]="itemsWithoutIcons"
@@ -58,7 +76,12 @@
       [ariaExpanded]="isCompressedMenuNoIconsOpen"
       (clicked)="compressedMenuNoIcons.toggle($event)">
     </cps-button>
+  </app-code-example>
 
+  <app-code-example
+    label="Menu with arbitrary content"
+    [htmlCode]="examples.arbitraryContentMenu.html"
+    [tsCode]="examples.arbitraryContentMenu.ts">
     <cps-menu
       #arbitraryMenu
       (menuShown)="isArbitraryMenuOpen = true"
@@ -89,7 +112,12 @@
       [ariaExpanded]="isArbitraryMenuOpen"
       (clicked)="arbitraryMenu.toggle($event)">
     </cps-button>
+  </app-code-example>
 
+  <app-code-example
+    label="Menu that opens on focus"
+    [htmlCode]="examples.openOnFocusMenu.html"
+    [tsCode]="examples.openOnFocusMenu.ts">
     <cps-menu
       #focusMenu
       [items]="items"
@@ -104,7 +132,12 @@
       (focusin)="focusMenu.show(null, $event.target)"
       (focusout)="onFocusMenuFocusOut($event, focusMenu)">
     </cps-button>
+  </app-code-example>
 
+  <app-code-example
+    label="Menu that opens on hover"
+    [htmlCode]="examples.openOnHoverMenu.html"
+    [tsCode]="examples.openOnHoverMenu.ts">
     <cps-menu
       #hoverMenu
       [items]="items"
@@ -122,5 +155,5 @@
       (focusin)="hoverMenu.show(null, $event.target)"
       (focusout)="onMenuLeave($event, hoverMenu)">
     </cps-button>
-  </div>
+  </app-code-example>
 </app-component-docs-viewer>

projects/composition/src/app/pages/menu-page/menu-page.component.scss

@@ -1,12 +1,3 @@
-.menu-group {
-  gap: 2rem;
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-  margin-bottom: 0.5rem;
-  display: flex;
-  flex-direction: column;
-}
-
 .my-menu-content {
   display: flex;
   flex-direction: column;

projects/composition/src/app/pages/menu-page/menu-page.component.ts

@@ -1,16 +1,23 @@
 import { Component } from '@angular/core';
 import { CpsButtonComponent, CpsMenuComponent, CpsMenuItem } from 'cps-ui-kit';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
-
-import ComponetnData from '../../api-data/cps-menu.json';
+import { CodeExampleComponent } from '../../components/code-example/code-example.component';
+import ComponentData from '../../api-data/cps-menu.json';
+import { menuExamples } from './menu-page.examples';
 @Component({
   selector: 'app-menu-page',
-  imports: [CpsMenuComponent, CpsButtonComponent, ComponentDocsViewerComponent],
+  imports: [
+    CpsMenuComponent,
+    CpsButtonComponent,
+    ComponentDocsViewerComponent,
+    CodeExampleComponent
+  ],
   templateUrl: './menu-page.component.html',
   styleUrls: ['./menu-page.component.scss'],
   host: { class: 'composition-page' }
 })
 export class MenuPageComponent {
+  readonly examples = menuExamples;
   items: CpsMenuItem[] = [
     {
       title: 'First item',
@@ -106,7 +113,7 @@ export class MenuPageComponent {
     }
   ];
 
-  componentData = ComponetnData;
+  componentData = ComponentData;
 
   isStandardMenuOpen = false;
   isStandardMenuNoHeaderOpen = false;