From 6daa3549aef64d746fdd03030321d8681277b06d Mon Sep 17 00:00:00 2001
From: Andrei Fateev <fateeand@gmail.com>
Date: Fri, 17 Jul 2026 11:47:54 +0200
Subject: [PATCH 1/3] docs: add code examples for Menu, Notifications and
 Paginator

---
 .../pages/menu-page/menu-page.component.html  |  37 ++-
 .../pages/menu-page/menu-page.component.scss  |   9 -
 .../pages/menu-page/menu-page.component.ts    |  11 +-
 .../app/pages/menu-page/menu-page.examples.ts | 281 ++++++++++++++++++
 .../notification-page.component.html          | 155 ++++++----
 .../notification-page.component.scss          |  25 +-
 .../notification-page.component.ts            |  10 +-
 .../notification-page.examples.ts             | 190 ++++++++++++
 .../paginator-page.component.html             |   5 +-
 .../paginator-page.component.ts               |  10 +-
 .../paginator-page/paginator-page.examples.ts |   7 +
 11 files changed, 647 insertions(+), 93 deletions(-)
 create mode 100644 projects/composition/src/app/pages/menu-page/menu-page.examples.ts
 create mode 100644 projects/composition/src/app/pages/notification-page/notification-page.examples.ts
 create mode 100644 projects/composition/src/app/pages/paginator-page/paginator-page.examples.ts

diff --git a/projects/composition/src/app/pages/menu-page/menu-page.component.html b/projects/composition/src/app/pages/menu-page/menu-page.component.html
index 02877be5b..50f7846e1 100644
--- a/projects/composition/src/app/pages/menu-page/menu-page.component.html
+++ b/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>
diff --git a/projects/composition/src/app/pages/menu-page/menu-page.component.scss b/projects/composition/src/app/pages/menu-page/menu-page.component.scss
index 6c16cd938..86007e80d 100644
--- a/projects/composition/src/app/pages/menu-page/menu-page.component.scss
+++ b/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;
diff --git a/projects/composition/src/app/pages/menu-page/menu-page.component.ts b/projects/composition/src/app/pages/menu-page/menu-page.component.ts
index b084029ca..6f363ff94 100644
--- a/projects/composition/src/app/pages/menu-page/menu-page.component.ts
+++ b/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 { CodeExampleComponent } from '../../components/code-example/code-example.component';
 import ComponetnData 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',
diff --git a/projects/composition/src/app/pages/menu-page/menu-page.examples.ts b/projects/composition/src/app/pages/menu-page/menu-page.examples.ts
new file mode 100644
index 000000000..55bbc394a
--- /dev/null
+++ b/projects/composition/src/app/pages/menu-page/menu-page.examples.ts
@@ -0,0 +1,281 @@
+const menuItemsTs = `
+items: CpsMenuItem[] = [
+  {
+    title: 'First item',
+    desc: 'First item description',
+    icon: 'remove',
+    action: (event: any) => {
+      this.doConsoleLog(event);
+    }
+  },
+  {
+    title: 'Second item',
+    desc: 'Second item is disabled',
+    icon: 'bell',
+    disabled: true,
+    action: (event: any) => {
+      this.doConsoleLog(event);
+    }
+  },
+  {
+    title: 'Third item',
+    icon: 'browse',
+    action: (event: any) => {
+      this.doConsoleLog(event);
+    }
+  },
+  {
+    title: 'Fourth item',
+    desc: 'Fourth item description',
+    action: (event: any) => {
+      this.doConsoleLog(event);
+    }
+  },
+  {
+    title: 'Fifth item',
+    action: (event: any) => {
+      this.doConsoleLog(event);
+    }
+  },
+  {
+    ariaLabel: 'Sixth item is loading',
+    loading: true
+  },
+  {
+    title: 'Go google',
+    url: 'https://google.com',
+    target: '_blank'
+  }
+];
+
+doConsoleLog(event: any) {
+  console.log(event.item.title + ' clicked');
+}`;
+
+const itemsWithoutIconsTs = `
+itemsWithoutIcons: CpsMenuItem[] = [
+  {
+    title: 'First item',
+    desc: 'First item description',
+    action: (event: any) => {
+      this.doConsoleLog(event);
+    }
+  },
+  {
+    title: 'Second item',
+    desc: 'Second item is disabled',
+    disabled: true,
+    action: (event: any) => {
+      this.doConsoleLog(event);
+    }
+  },
+  {
+    title: 'Third item',
+    action: (event: any) => {
+      this.doConsoleLog(event);
+    }
+  },
+  {
+    title: 'Fourth item',
+    desc: 'Fourth item description',
+    action: (event: any) => {
+      this.doConsoleLog(event);
+    }
+  },
+  {
+    title: 'Fifth item',
+    action: (event: any) => {
+      this.doConsoleLog(event);
+    }
+  },
+  {
+    ariaLabel: 'Sixth item is loading',
+    loading: true
+  },
+  {
+    title: 'Go google',
+    url: 'https://google.com',
+    target: '_blank'
+  }
+];
+
+doConsoleLog(event: any) {
+  console.log(event.item.title + ' clicked');
+}`;
+
+export const menuExamples: Record<string, { html: string; ts?: string }> = {
+  standardMenu: {
+    html: `
+<cps-menu
+  #standardMenu
+  [items]="items"
+  header="Menu header"
+  (menuShown)="isStandardMenuOpen = true"
+  (menuHidden)="isStandardMenuOpen = false">
+</cps-menu>
+<cps-button
+  label="Standard menu"
+  ariaHaspopup="menu"
+  [ariaExpanded]="isStandardMenuOpen"
+  (clicked)="standardMenu.toggle($event)">
+</cps-button>`,
+    ts: `
+${menuItemsTs.trim()}
+
+isStandardMenuOpen = false;`
+  },
+
+  standardMenuNoHeader: {
+    html: `
+<cps-menu
+  #standardMenuNoHeader
+  [items]="items"
+  ariaLabel="Menu with aria label"
+  (menuShown)="isStandardMenuNoHeaderOpen = true"
+  (menuHidden)="isStandardMenuNoHeaderOpen = false">
+</cps-menu>
+<cps-button
+  label="Standard menu without header"
+  ariaHaspopup="menu"
+  [ariaExpanded]="isStandardMenuNoHeaderOpen"
+  (clicked)="standardMenuNoHeader.toggle($event)">
+</cps-button>`,
+    ts: `
+${menuItemsTs.trim()}
+
+isStandardMenuNoHeaderOpen = false;`
+  },
+
+  compressedMenu: {
+    html: `
+<cps-menu
+  #compressedMenu
+  [items]="items"
+  [compressed]="true"
+  [withArrow]="false"
+  (menuShown)="isCompressedMenuOpen = true"
+  (menuHidden)="isCompressedMenuOpen = false">
+</cps-menu>
+<cps-button
+  label="Compressed menu"
+  ariaHaspopup="menu"
+  [ariaExpanded]="isCompressedMenuOpen"
+  (clicked)="compressedMenu.toggle($event)">
+</cps-button>`,
+    ts: `
+${menuItemsTs.trim()}
+
+isCompressedMenuOpen = false;`
+  },
+
+  compressedMenuNoIcons: {
+    html: `
+<cps-menu
+  #compressedMenuNoIcons
+  [items]="itemsWithoutIcons"
+  [compressed]="true"
+  [withArrow]="false"
+  (menuShown)="isCompressedMenuNoIconsOpen = true"
+  (menuHidden)="isCompressedMenuNoIconsOpen = false">
+</cps-menu>
+<cps-button
+  label="Compressed menu without icons"
+  ariaHaspopup="menu"
+  [ariaExpanded]="isCompressedMenuNoIconsOpen"
+  (clicked)="compressedMenuNoIcons.toggle($event)">
+</cps-button>`,
+    ts: `
+${itemsWithoutIconsTs.trim()}
+
+isCompressedMenuNoIconsOpen = false;`
+  },
+
+  arbitraryContentMenu: {
+    html: `
+<cps-menu
+  #arbitraryMenu
+  (menuShown)="isArbitraryMenuOpen = true"
+  (menuHidden)="isArbitraryMenuOpen = false">
+  <div>
+    <span>Provide your own content here</span>
+    <img
+      src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_960_720.jpg"
+      alt="kitten"
+      width="200" />
+    <a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">Google</a>
+    <a href="https://www.bing.com/" target="_blank" rel="noopener noreferrer">Bing</a>
+  </div>
+</cps-menu>
+<cps-button
+  label="Menu with arbitrary content"
+  ariaHaspopup="menu"
+  [ariaExpanded]="isArbitraryMenuOpen"
+  (clicked)="arbitraryMenu.toggle($event)">
+</cps-button>`,
+    ts: `
+isArbitraryMenuOpen = false;`
+  },
+
+  openOnFocusMenu: {
+    html: `
+<cps-menu
+  #focusMenu
+  [items]="items"
+  [focusOnShow]="false"
+  (menuShown)="isFocusMenuOpen = true"
+  (menuHidden)="isFocusMenuOpen = false">
+</cps-menu>
+<cps-button
+  label="Menu that opens on focus"
+  ariaHaspopup="menu"
+  [ariaExpanded]="isFocusMenuOpen"
+  (focusin)="focusMenu.show(null, $event.target)"
+  (focusout)="onFocusMenuFocusOut($event, focusMenu)">
+</cps-button>`,
+    ts: `
+${menuItemsTs.trim()}
+
+isFocusMenuOpen = false;
+
+onFocusMenuFocusOut(event: FocusEvent, menu: CpsMenuComponent) {
+  if (!menu.container?.contains(event.relatedTarget as Node)) {
+    menu.hide();
+  }
+}`
+  },
+
+  openOnHoverMenu: {
+    html: `
+<cps-menu
+  #hoverMenu
+  [items]="items"
+  [focusOnShow]="false"
+  (menuShown)="isHoverMenuOpen = true"
+  (menuHidden)="isHoverMenuOpen = false"
+  (containerMouseLeave)="onMenuLeave($event, hoverMenu)">
+</cps-menu>
+<cps-button
+  label="Menu that opens on hover"
+  ariaHaspopup="menu"
+  [ariaExpanded]="isHoverMenuOpen"
+  (mouseenter)="hoverMenu.show($event)"
+  (mouseleave)="onMenuLeave($event, hoverMenu)"
+  (focusin)="hoverMenu.show(null, $event.target)"
+  (focusout)="onMenuLeave($event, hoverMenu)">
+</cps-button>`,
+    ts: `
+${menuItemsTs.trim()}
+
+isHoverMenuOpen = false;
+
+onMenuLeave(event: MouseEvent | FocusEvent, menu: CpsMenuComponent) {
+  const rel = event.relatedTarget as Node;
+  if (
+    !menu.container?.contains(rel) &&
+    !(menu.target as HTMLElement)?.contains(rel)
+  ) {
+    menu.hide();
+  }
+}`
+  }
+};
diff --git a/projects/composition/src/app/pages/notification-page/notification-page.component.html b/projects/composition/src/app/pages/notification-page/notification-page.component.html
index 27df269db..d3aa739e8 100644
--- a/projects/composition/src/app/pages/notification-page/notification-page.component.html
+++ b/projects/composition/src/app/pages/notification-page/notification-page.component.html
@@ -1,65 +1,108 @@
 <app-service-docs-viewer [serviceData]="serviceData">
   <!-- Examples of service usage -->
-  <div class="notification-btns-group">
-    <div>
-      <div class="notification-btns-group-title">Basic notifications</div>
-      <div class="notification-btns-group">
-        <cps-button
-          label="Info notification"
-          icon="toast-info"
-          color="calm"
-          (clicked)="showInfoNotification()"></cps-button>
-        <cps-button
-          label="Error notification"
-          icon="toast-error"
-          color="calm"
-          (clicked)="showErrorNotification()"></cps-button>
-        <cps-button
-          label="Success notification"
-          icon="toast-success"
-          color="calm"
-          (clicked)="showSuccessNotification()"></cps-button>
-        <cps-button
-          label="Warning notification"
-          icon="toast-warning"
-          color="calm"
-          (clicked)="showWarningNotification()"></cps-button>
-      </div>
-    </div>
-    <div class="notification-btns-last-group">
-      <div class="notification-btns-group-title">Configured notifications</div>
-      <div class="notification-btns-group">
-        <cps-button
-          label="Bottom info notification with details"
-          icon="toast-info"
-          color="calm"
-          (clicked)="showInfoNotificationWithDetails()"></cps-button>
-        <cps-button
-          label="Right error notification with max 3 in a column"
-          icon="toast-error"
-          color="calm"
-          (clicked)="showErrorRightWithMax3Notification()"></cps-button>
-        <cps-button
-          label="Bottom-left persistent outlined success notification"
-          icon="toast-success"
-          color="calm"
-          (clicked)="
-            showOutlinedBottomLeftPersistentSuccessNotification()
-          "></cps-button>
-        <cps-button
-          label="Bottom-right outlined warning notification with 2-seconds timeout"
-          icon="toast-warning"
-          color="calm"
-          (clicked)="
-            showOutlinedBottomRight2sTimeoutWarningNotification()
-          "></cps-button>
-      </div>
-    </div>
+  <h2 class="section-title">Basic notifications</h2>
+  <app-code-example
+    label="Info notification"
+    [htmlCode]="examples.infoNotification.html"
+    [tsCode]="examples.infoNotification.ts">
+    <cps-button
+      label="Info notification"
+      icon="toast-info"
+      color="calm"
+      (clicked)="showInfoNotification()"></cps-button>
+  </app-code-example>
+
+  <app-code-example
+    label="Error notification"
+    [htmlCode]="examples.errorNotification.html"
+    [tsCode]="examples.errorNotification.ts">
+    <cps-button
+      label="Error notification"
+      icon="toast-error"
+      color="calm"
+      (clicked)="showErrorNotification()"></cps-button>
+  </app-code-example>
+
+  <app-code-example
+    label="Success notification"
+    [htmlCode]="examples.successNotification.html"
+    [tsCode]="examples.successNotification.ts">
+    <cps-button
+      label="Success notification"
+      icon="toast-success"
+      color="calm"
+      (clicked)="showSuccessNotification()"></cps-button>
+  </app-code-example>
+
+  <app-code-example
+    label="Warning notification"
+    [htmlCode]="examples.warningNotification.html"
+    [tsCode]="examples.warningNotification.ts">
+    <cps-button
+      label="Warning notification"
+      icon="toast-warning"
+      color="calm"
+      (clicked)="showWarningNotification()"></cps-button>
+  </app-code-example>
+
+  <h2 class="section-title">Configured notifications</h2>
+  <app-code-example
+    label="Bottom info notification with details"
+    [htmlCode]="examples.infoNotificationWithDetails.html"
+    [tsCode]="examples.infoNotificationWithDetails.ts">
+    <cps-button
+      label="Bottom info notification with details"
+      icon="toast-info"
+      color="calm"
+      (clicked)="showInfoNotificationWithDetails()"></cps-button>
+  </app-code-example>
+
+  <app-code-example
+    label="Right error notification with max 3 in a column"
+    [htmlCode]="examples.errorRightMax3Notification.html"
+    [tsCode]="examples.errorRightMax3Notification.ts">
+    <cps-button
+      label="Right error notification with max 3 in a column"
+      icon="toast-error"
+      color="calm"
+      (clicked)="showErrorRightWithMax3Notification()"></cps-button>
+  </app-code-example>
+
+  <app-code-example
+    label="Bottom-left persistent outlined success notification"
+    [htmlCode]="examples.bottomLeftPersistentOutlinedSuccessNotification.html"
+    [tsCode]="examples.bottomLeftPersistentOutlinedSuccessNotification.ts">
+    <cps-button
+      label="Bottom-left persistent outlined success notification"
+      icon="toast-success"
+      color="calm"
+      (clicked)="
+        showOutlinedBottomLeftPersistentSuccessNotification()
+      "></cps-button>
+  </app-code-example>
+
+  <app-code-example
+    label="Bottom-right outlined warning notification with 2-seconds timeout"
+    [htmlCode]="examples.bottomRightOutlinedWarningNotification.html"
+    [tsCode]="examples.bottomRightOutlinedWarningNotification.ts">
+    <cps-button
+      label="Bottom-right outlined warning notification with 2-seconds timeout"
+      icon="toast-warning"
+      color="calm"
+      (clicked)="
+        showOutlinedBottomRight2sTimeoutWarningNotification()
+      "></cps-button>
+  </app-code-example>
+
+  <app-code-example
+    label="Clear all notifications"
+    [htmlCode]="examples.clearAllNotifications.html"
+    [tsCode]="examples.clearAllNotifications.ts">
     <cps-button
       label="Clear all notifications"
       icon="remove"
       type="outlined"
       (clicked)="clearNotifications()">
     </cps-button>
-  </div>
+  </app-code-example>
 </app-service-docs-viewer>
diff --git a/projects/composition/src/app/pages/notification-page/notification-page.component.scss b/projects/composition/src/app/pages/notification-page/notification-page.component.scss
index 443b20a59..e9710b475 100644
--- a/projects/composition/src/app/pages/notification-page/notification-page.component.scss
+++ b/projects/composition/src/app/pages/notification-page/notification-page.component.scss
@@ -1,23 +1,10 @@
 :host {
-  .notification-btns-group {
-    gap: 1.875rem;
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
-    margin-bottom: 0.5rem;
-    display: flex;
-    flex-direction: column;
-
-    &-title {
-      font-size: 1.5rem;
-      color: var(--cps-color-depth);
-      border-bottom: 0.0625rem solid lightgrey;
-      margin-bottom: 0.75rem;
-      padding-bottom: 0.5rem;
-      font-weight: 600;
-    }
+  .section-title {
+    color: var(--cps-color-depth);
+    margin-top: 0;
   }
-  .notification-btns-last-group {
-    padding-bottom: 0.75rem;
-    border-bottom: 0.0625rem solid lightgrey;
+
+  .section-title:not(:first-child) {
+    margin-top: 3rem;
   }
 }
diff --git a/projects/composition/src/app/pages/notification-page/notification-page.component.ts b/projects/composition/src/app/pages/notification-page/notification-page.component.ts
index 46eeec9f6..8be79e67e 100644
--- a/projects/composition/src/app/pages/notification-page/notification-page.component.ts
+++ b/projects/composition/src/app/pages/notification-page/notification-page.component.ts
@@ -5,19 +5,25 @@ import {
   CpsNotificationPosition,
   CpsNotificationService
 } from 'cps-ui-kit';
-
 import ServiceData from '../../api-data/cps-notification.json';
 import { ServiceDocsViewerComponent } from '../../components/service-docs-viewer/service-docs-viewer.component';
+import { CodeExampleComponent } from '../../components/code-example/code-example.component';
+import { notificationExamples } from './notification-page.examples';
 
 @Component({
   selector: 'app-notification-page',
-  imports: [CpsButtonComponent, ServiceDocsViewerComponent],
+  imports: [
+    CpsButtonComponent,
+    ServiceDocsViewerComponent,
+    CodeExampleComponent
+  ],
   templateUrl: './notification-page.component.html',
   styleUrls: ['./notification-page.component.scss'],
   host: { class: 'composition-page' }
 })
 export class NotificationPageComponent {
   serviceData = ServiceData;
+  readonly examples = notificationExamples;
   // eslint-disable-next-line no-useless-constructor
   constructor(private _notifService: CpsNotificationService) {}
 
diff --git a/projects/composition/src/app/pages/notification-page/notification-page.examples.ts b/projects/composition/src/app/pages/notification-page/notification-page.examples.ts
new file mode 100644
index 000000000..8643efe73
--- /dev/null
+++ b/projects/composition/src/app/pages/notification-page/notification-page.examples.ts
@@ -0,0 +1,190 @@
+const notifServiceTs = `private readonly _notifService = inject(CpsNotificationService);`;
+
+export const notificationExamples: Record<
+  string,
+  { html: string; ts?: string }
+> = {
+  infoNotification: {
+    html: `
+<cps-button
+  label="Info notification"
+  icon="toast-info"
+  color="calm"
+  (clicked)="showInfoNotification()"></cps-button>`,
+    ts: `
+${notifServiceTs}
+
+counter = 0;
+
+showInfoNotification() {
+  this._notifService.info(\`Notification message \${this.counter}\`);
+  this.counter += 1;
+}`
+  },
+
+  errorNotification: {
+    html: `
+<cps-button
+  label="Error notification"
+  icon="toast-error"
+  color="calm"
+  (clicked)="showErrorNotification()"></cps-button>`,
+    ts: `
+${notifServiceTs}
+
+counter = 0;
+
+showErrorNotification() {
+  this._notifService.error(\`Notification message \${this.counter}\`);
+  this.counter += 1;
+}`
+  },
+
+  successNotification: {
+    html: `
+<cps-button
+  label="Success notification"
+  icon="toast-success"
+  color="calm"
+  (clicked)="showSuccessNotification()"></cps-button>`,
+    ts: `
+${notifServiceTs}
+
+counter = 0;
+
+showSuccessNotification() {
+  this._notifService.success(\`Notification message \${this.counter}\`);
+  this.counter += 1;
+}`
+  },
+
+  warningNotification: {
+    html: `
+<cps-button
+  label="Warning notification"
+  icon="toast-warning"
+  color="calm"
+  (clicked)="showWarningNotification()"></cps-button>`,
+    ts: `
+${notifServiceTs}
+
+counter = 0;
+
+showWarningNotification() {
+  this._notifService.warning(\`Notification message \${this.counter}\`);
+  this.counter += 1;
+}`
+  },
+
+  infoNotificationWithDetails: {
+    html: `
+<cps-button
+  label="Bottom info notification with details"
+  icon="toast-info"
+  color="calm"
+  (clicked)="showInfoNotificationWithDetails()"></cps-button>`,
+    ts: `
+${notifServiceTs}
+
+counter = 0;
+
+showInfoNotificationWithDetails() {
+  this._notifService.info(
+    \`Notification message \${this.counter}\`,
+    'Notification details',
+    { position: CpsNotificationPosition.BOTTOM }
+  );
+  this.counter += 1;
+}`
+  },
+
+  errorRightMax3Notification: {
+    html: `
+<cps-button
+  label="Right error notification with max 3 in a column"
+  icon="toast-error"
+  color="calm"
+  (clicked)="showErrorRightWithMax3Notification()"></cps-button>`,
+    ts: `
+${notifServiceTs}
+
+counter = 0;
+
+showErrorRightWithMax3Notification() {
+  this._notifService.error(
+    \`Notification message \${this.counter}\`,
+    'Http failure response for https://my-long-url/epic/fail: 404 Not Found Error',
+    {
+      position: CpsNotificationPosition.RIGHT,
+      maxWidth: '28rem',
+      maxAmount: 3
+    }
+  );
+  this.counter += 1;
+}`
+  },
+
+  bottomLeftPersistentOutlinedSuccessNotification: {
+    html: `
+<cps-button
+  label="Bottom-left persistent outlined success notification"
+  icon="toast-success"
+  color="calm"
+  (clicked)="showOutlinedBottomLeftPersistentSuccessNotification()"></cps-button>`,
+    ts: `
+${notifServiceTs}
+
+counter = 0;
+
+showOutlinedBottomLeftPersistentSuccessNotification() {
+  this._notifService.success(\`Notification message \${this.counter}\`, '', {
+    timeout: 0,
+    position: CpsNotificationPosition.BOTTOMLEFT,
+    appearance: CpsNotificationAppearance.OUTLINED
+  });
+  this.counter += 1;
+}`
+  },
+
+  bottomRightOutlinedWarningNotification: {
+    html: `
+<cps-button
+  label="Bottom-right outlined warning notification with 2-seconds timeout"
+  icon="toast-warning"
+  color="calm"
+  (clicked)="showOutlinedBottomRight2sTimeoutWarningNotification()"></cps-button>`,
+    ts: `
+${notifServiceTs}
+
+counter = 0;
+
+showOutlinedBottomRight2sTimeoutWarningNotification() {
+  this._notifService.warning(
+    \`Notification message \${this.counter}\`,
+    'Notifications details',
+    {
+      timeout: 2000,
+      position: CpsNotificationPosition.BOTTOMRIGHT,
+      appearance: CpsNotificationAppearance.OUTLINED
+    }
+  );
+  this.counter += 1;
+}`
+  },
+
+  clearAllNotifications: {
+    html: `
+<cps-button
+  label="Clear all notifications"
+  icon="remove"
+  type="outlined"
+  (clicked)="clearNotifications()">
+</cps-button>`,
+    ts: `
+${notifServiceTs}
+
+clearNotifications(): void {
+  this._notifService.clear();
+}`
+  }
+};
diff --git a/projects/composition/src/app/pages/paginator-page/paginator-page.component.html b/projects/composition/src/app/pages/paginator-page/paginator-page.component.html
index 9064e056c..9989bdaa8 100644
--- a/projects/composition/src/app/pages/paginator-page/paginator-page.component.html
+++ b/projects/composition/src/app/pages/paginator-page/paginator-page.component.html
@@ -1,4 +1,7 @@
 <app-component-docs-viewer [componentData]="componentData">
   <!-- Example of component's usage -->
-  <cps-paginator [first]="0" [rows]="10" [totalRecords]="120"> </cps-paginator>
+  <app-code-example label="Basic usage" [htmlCode]="examples.basicUsage.html">
+    <cps-paginator [first]="0" [rows]="10" [totalRecords]="120">
+    </cps-paginator>
+  </app-code-example>
 </app-component-docs-viewer>
diff --git a/projects/composition/src/app/pages/paginator-page/paginator-page.component.ts b/projects/composition/src/app/pages/paginator-page/paginator-page.component.ts
index 8b8b4cca4..d71c78978 100644
--- a/projects/composition/src/app/pages/paginator-page/paginator-page.component.ts
+++ b/projects/composition/src/app/pages/paginator-page/paginator-page.component.ts
@@ -1,16 +1,22 @@
 import { Component } from '@angular/core';
 import { CpsPaginatorComponent } from 'cps-ui-kit';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
-
+import { CodeExampleComponent } from '../../components/code-example/code-example.component';
 import ComponentData from '../../api-data/cps-paginator.json';
+import { paginatorExamples } from './paginator-page.examples';
 
 @Component({
   selector: 'app-paginator-page',
-  imports: [CpsPaginatorComponent, ComponentDocsViewerComponent],
+  imports: [
+    CpsPaginatorComponent,
+    ComponentDocsViewerComponent,
+    CodeExampleComponent
+  ],
   templateUrl: './paginator-page.component.html',
   styleUrls: ['./paginator-page.component.scss'],
   host: { class: 'composition-page' }
 })
 export class PaginatorPageComponent {
   componentData = ComponentData;
+  readonly examples = paginatorExamples;
 }
diff --git a/projects/composition/src/app/pages/paginator-page/paginator-page.examples.ts b/projects/composition/src/app/pages/paginator-page/paginator-page.examples.ts
new file mode 100644
index 000000000..4e1a72ea4
--- /dev/null
+++ b/projects/composition/src/app/pages/paginator-page/paginator-page.examples.ts
@@ -0,0 +1,7 @@
+export const paginatorExamples: Record<string, { html: string; ts?: string }> =
+  {
+    basicUsage: {
+      html: `
+<cps-paginator [first]="0" [rows]="10" [totalRecords]="120"></cps-paginator>`
+    }
+  };

From 82d213b058f5a92b82508b21ff50a130730d9cc4 Mon Sep 17 00:00:00 2001
From: Andrei Fateev <fateeand@gmail.com>
Date: Fri, 17 Jul 2026 12:15:39 +0200
Subject: [PATCH 2/3] address feedback

---
 .../src/app/pages/menu-page/menu-page.component.ts        | 4 ++--
 .../notification-page/notification-page.component.ts      | 8 ++++----
 .../pages/notification-page/notification-page.examples.ts | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/projects/composition/src/app/pages/menu-page/menu-page.component.ts b/projects/composition/src/app/pages/menu-page/menu-page.component.ts
index 6f363ff94..15fdea22d 100644
--- a/projects/composition/src/app/pages/menu-page/menu-page.component.ts
+++ b/projects/composition/src/app/pages/menu-page/menu-page.component.ts
@@ -2,7 +2,7 @@ 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 { CodeExampleComponent } from '../../components/code-example/code-example.component';
-import ComponetnData from '../../api-data/cps-menu.json';
+import ComponentData from '../../api-data/cps-menu.json';
 import { menuExamples } from './menu-page.examples';
 @Component({
   selector: 'app-menu-page',
@@ -113,7 +113,7 @@ export class MenuPageComponent {
     }
   ];
 
-  componentData = ComponetnData;
+  componentData = ComponentData;
 
   isStandardMenuOpen = false;
   isStandardMenuNoHeaderOpen = false;
diff --git a/projects/composition/src/app/pages/notification-page/notification-page.component.ts b/projects/composition/src/app/pages/notification-page/notification-page.component.ts
index 8be79e67e..ae6debe42 100644
--- a/projects/composition/src/app/pages/notification-page/notification-page.component.ts
+++ b/projects/composition/src/app/pages/notification-page/notification-page.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
   CpsButtonComponent,
   CpsNotificationAppearance,
@@ -22,10 +22,10 @@ import { notificationExamples } from './notification-page.examples';
   host: { class: 'composition-page' }
 })
 export class NotificationPageComponent {
+  private readonly _notifService = inject(CpsNotificationService);
+
   serviceData = ServiceData;
   readonly examples = notificationExamples;
-  // eslint-disable-next-line no-useless-constructor
-  constructor(private _notifService: CpsNotificationService) {}
 
   counter = 0;
   showSuccessNotification() {
@@ -69,7 +69,7 @@ export class NotificationPageComponent {
   showOutlinedBottomRight2sTimeoutWarningNotification() {
     this._notifService.warning(
       `Notification message ${this.counter}`,
-      'Notifications details',
+      'Notification details',
       {
         timeout: 2000,
         position: CpsNotificationPosition.BOTTOMRIGHT,
diff --git a/projects/composition/src/app/pages/notification-page/notification-page.examples.ts b/projects/composition/src/app/pages/notification-page/notification-page.examples.ts
index 8643efe73..cd412acaf 100644
--- a/projects/composition/src/app/pages/notification-page/notification-page.examples.ts
+++ b/projects/composition/src/app/pages/notification-page/notification-page.examples.ts
@@ -161,7 +161,7 @@ counter = 0;
 showOutlinedBottomRight2sTimeoutWarningNotification() {
   this._notifService.warning(
     \`Notification message \${this.counter}\`,
-    'Notifications details',
+    'Notification details',
     {
       timeout: 2000,
       position: CpsNotificationPosition.BOTTOMRIGHT,

From cd0b67f85ac8f1a50a1f40bb6301656f79f7d489 Mon Sep 17 00:00:00 2001
From: Andrei Fateev <fateeand@gmail.com>
Date: Fri, 17 Jul 2026 12:22:06 +0200
Subject: [PATCH 3/3] fix pw tests

---
 playwright/fixtures/composition-components.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/playwright/fixtures/composition-components.ts b/playwright/fixtures/composition-components.ts
index 15501f27b..750f3e4ba 100644
--- a/playwright/fixtures/composition-components.ts
+++ b/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++) {