menubar: стилизация, сторисы, обёртки

src/lib/components/menubar/menubar.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Menubar } from 'primeng/menubar';
+import { MenuItem } from 'primeng/api';
+
+@Component({
+  selector: 'menubar',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [Menubar],
+  template: `
+    <p-menubar [model]="model"></p-menubar>
+  `,
+})
+export class MenubarComponent {
+  @Input() model: MenuItem[] = [];
+}

src/prime-preset/map-tokens.ts

@@ -6,6 +6,8 @@ import tokens from './tokens/tokens.json';
 import { avatarCss } from './tokens/components/avatar';
 import { buttonCss } from './tokens/components/button';
 import { checkboxCss } from './tokens/components/checkbox';
+import { menubarCss } from './tokens/components/menubar';
+import { tagCss } from './tokens/components/tag';
 import { tooltipCss } from './tokens/components/tooltip';
 
 const presetTokens: Preset<AuraBaseDesignTokens> = {
@@ -25,6 +27,10 @@ const presetTokens: Preset<AuraBaseDesignTokens> = {
       ...(tokens.components.button as unknown as ComponentsDesignTokens['button']),
       css: buttonCss,
     },
+    menubar: {
+      ...(tokens.components.menubar as unknown as ComponentsDesignTokens['menubar']),
+      css: menubarCss,
+    },
     tag: {
       ...(tokens.components.tag as unknown as ComponentsDesignTokens['tag']),
       css: tagCss,

src/prime-preset/tokens/components/menubar.ts

@@ -0,0 +1,39 @@
+export const menubarCss = ({ dt }: { dt: (token: string) => string }): string => `
+  .p-menubar-submenu-icon,
+  .p-menubar-item-icon {
+    font-size: ${dt('menubar.extend.iconSize')};
+  }
+
+  .p-menubar-item-label {
+    font-family: ${dt('fonts.fontFamily.base')};
+    font-size: ${dt('fonts.fontSize.300')};
+    font-weight: ${dt('fonts.fontWeight.regular')};
+  }
+
+  .p-menubar-item-caption {
+    font-size: ${dt('fonts.fontSize.200')};
+    color: ${dt('menubar.extend.extItem.caption.color')};
+  }
+
+  .p-menubar .menubar-item-label {
+    display: flex;
+    flex-direction: column;
+    gap: ${dt('menubar.extend.extItem.caption.gap')};
+  }
+
+  .p-menubar .menubar-item-caption {
+    font-size: ${dt('fonts.fontSize.200')};
+    color: ${dt('menubar.extend.extItem.caption.color')};
+  }
+
+  .p-menubar-submenu-label {
+    padding: ${dt('menubar.extend.extSubmenuLabel.padding')};
+    font-weight: ${dt('menubar.extend.extSubmenuLabel.fontWeight')};
+    background: ${dt('menubar.extend.extSubmenuLabel.background')};
+    color: ${dt('menubar.extend.extSubmenuLabel.color')};
+  }
+
+  .p-menubar-mobile-button-icon {
+    font-size: ${dt('menubar.extend.iconSize')};
+  }
+`;

src/stories/components/menubar/examples/menubar-basic.component.ts

@@ -0,0 +1,82 @@
+import { Component } from '@angular/core';
+import { StoryObj } from '@storybook/angular';
+import { MenuItem } from 'primeng/api';
+import { MenubarComponent } from '../../../../lib/components/menubar/menubar.component';
+import { basicItems } from '../menubar.data';
+
+const template = `
+<div class="min-h-[300px]">
+  <menubar [model]="items"></menubar>
+</div>
+`;
+const styles = '';
+
+@Component({
+  selector: 'app-menubar-basic',
+  standalone: true,
+  imports: [MenubarComponent],
+  template,
+  styles,
+})
+export class MenubarBasicComponent {
+  items: MenuItem[] = basicItems;
+}
+
+export const Basic: StoryObj = {
+  render: () => ({
+    template: `<app-menubar-basic></app-menubar-basic>`,
+  }),
+  parameters: {
+    docs: {
+      description: { story: 'Горизонтальное меню с выпадающими подменю.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { MenubarComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-menubar-basic',
+  standalone: true,
+  imports: [MenubarComponent],
+  template: \`
+    <menubar [model]="items"></menubar>
+  \`,
+})
+export class MenubarBasicComponent {
+  items: MenuItem[] = [
+    { label: 'Features' },
+    {
+      label: 'Projects',
+      items: [
+        { label: 'Components' },
+        { label: 'Blocks' },
+        { label: 'UI Kit' },
+        {
+          label: 'Templates',
+          items: [{ label: 'Apollo' }, { label: 'Ultima' }],
+        },
+      ],
+    },
+    {
+      icon: 'ti ti-user',
+      label: 'Contact',
+      disabled: true,
+      items: [
+        { label: 'Components' },
+        { label: 'Blocks' },
+        { label: 'UI Kit' },
+        {
+          label: 'Templates',
+          items: [{ label: 'Apollo' }, { label: 'Ultima' }],
+        },
+      ],
+    },
+  ];
+}
+        `,
+      },
+    },
+  },
+};

src/stories/components/menubar/examples/menubar-custom.component.ts

@@ -0,0 +1,120 @@
+import { Component } from '@angular/core';
+import { StoryObj } from '@storybook/angular';
+import { Menubar } from 'primeng/menubar';
+import { Badge } from 'primeng/badge';
+import { NgIf } from '@angular/common';
+import { MenuItem, SharedModule } from 'primeng/api';
+
+const template = `
+<div class="min-h-[300px]">
+<p-menubar [model]="items">
+  <ng-template pTemplate="item" let-item let-hasSubmenu="hasSubmenu" let-root="root">
+    <a class="p-menubar-item-link flex items-center gap-2">
+      <span *ngIf="item.icon" [class]="'p-menubar-item-icon ' + item.icon"></span>
+      <div class="menubar-item-label">
+        <span class="p-menubar-item-label">{{ item.label }}</span>
+        <small *ngIf="item['description']" class="menubar-item-caption">{{ item['description'] }}</small>
+      </div>
+      <p-badge *ngIf="item['badge']" [value]="item['badge']"></p-badge>
+      <span *ngIf="hasSubmenu" [class]="root ? 'p-menubar-submenu-icon ti ti-chevron-down' : 'p-menubar-submenu-icon ti ti-chevron-right'"></span>
+    </a>
+  </ng-template>
+</p-menubar>
+</div>
+`;
+const styles = '';
+
+@Component({
+  selector: 'app-menubar-custom',
+  standalone: true,
+  imports: [Menubar, Badge, NgIf, SharedModule],
+  template,
+  styles,
+})
+export class MenubarCustomComponent {
+  items: MenuItem[] = [
+    {
+      label: 'Home',
+      icon: 'ti ti-home',
+      description: 'Перейти на главную',
+    },
+    {
+      label: 'Features',
+      icon: 'ti ti-star',
+      description: 'Explore features',
+      badge: 'New',
+      items: [
+        {
+          label: 'Core',
+          icon: 'ti ti-cpu',
+          description: 'Основные возможности',
+        },
+        {
+          label: 'UI Kit',
+          icon: 'ti ti-palette',
+          description: 'UI компоненты',
+        },
+      ],
+    },
+    {
+      label: 'Settings',
+      icon: 'ti ti-settings',
+      description: 'Настройки приложения',
+    },
+  ];
+}
+
+export const Custom: StoryObj = {
+  render: () => ({
+    template: `<app-menubar-custom></app-menubar-custom>`,
+  }),
+  parameters: {
+    docs: {
+      description: { story: 'Кастомный шаблон пункта меню с описанием и бейджем.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { Menubar } from 'primeng/menubar';
+import { Badge } from 'primeng/badge';
+import { NgIf } from '@angular/common';
+import { MenuItem, SharedModule } from 'primeng/api';
+
+@Component({
+  selector: 'app-menubar-custom',
+  standalone: true,
+  imports: [Menubar, Badge, NgIf, SharedModule],
+  template: \`
+    <p-menubar [model]="items">
+      <ng-template pTemplate="item" let-item let-hasSubmenu="hasSubmenu" let-root="root">
+        <a class="p-menubar-item-link flex items-center gap-2">
+          <span *ngIf="item.icon" [class]="'p-menubar-item-icon ' + item.icon"></span>
+          <div class="menubar-item-label">
+            <span class="p-menubar-item-label">{{ item.label }}</span>
+            <small *ngIf="item['description']" class="menubar-item-caption">{{ item['description'] }}</small>
+          </div>
+          <p-badge *ngIf="item['badge']" [value]="item['badge']"></p-badge>
+          <span *ngIf="hasSubmenu" [class]="root ? 'p-menubar-submenu-icon ti ti-chevron-down' : 'p-menubar-submenu-icon ti ti-chevron-right'"></span>
+        </a>
+      </ng-template>
+    </p-menubar>
+  \`,
+})
+export class MenubarCustomComponent {
+  items: MenuItem[] = [
+    { label: 'Home', icon: 'ti ti-home', description: 'Перейти на главную' },
+    {
+      label: 'Features', icon: 'ti ti-star', description: 'Explore features', badge: 'New',
+      items: [
+        { label: 'Core', icon: 'ti ti-cpu', description: 'Основные возможности' },
+        { label: 'UI Kit', icon: 'ti ti-palette', description: 'UI компоненты' },
+      ],
+    },
+    { label: 'Settings', icon: 'ti ti-settings', description: 'Настройки приложения' },
+  ];
+}
+        `,
+      },
+    },
+  },
+};

src/stories/components/menubar/examples/menubar-with-icon.component.ts

@@ -0,0 +1,115 @@
+import { Component } from '@angular/core';
+import { StoryObj } from '@storybook/angular';
+import { MenuItem } from 'primeng/api';
+import { MenubarComponent } from '../../../../lib/components/menubar/menubar.component';
+
+const template = `
+<div class="min-h-[300px]">
+  <menubar [model]="items"></menubar>
+</div>
+`;
+const styles = '';
+
+@Component({
+  selector: 'app-menubar-with-icon',
+  standalone: true,
+  imports: [MenubarComponent],
+  template,
+  styles,
+})
+export class MenubarWithIconComponent {
+  items: MenuItem[] = [
+    {
+      label: 'Home',
+      icon: 'ti ti-home',
+    },
+    {
+      label: 'Features',
+      icon: 'ti ti-star',
+      items: [
+        { label: 'Core', icon: 'ti ti-cpu' },
+        { label: 'Blocks', icon: 'ti ti-layout-grid' },
+        { label: 'UI Kit', icon: 'ti ti-palette' },
+        {
+          label: 'Templates',
+          icon: 'ti ti-template',
+          items: [
+            { label: 'Apollo', icon: 'ti ti-rocket' },
+            { label: 'Ultima', icon: 'ti ti-diamond' },
+          ],
+        },
+      ],
+    },
+    {
+      label: 'Projects',
+      icon: 'ti ti-folder',
+      items: [
+        { label: 'Active', icon: 'ti ti-circle-check' },
+        { label: 'Archived', icon: 'ti ti-archive' },
+      ],
+    },
+    {
+      label: 'Settings',
+      icon: 'ti ti-settings',
+    },
+  ];
+}
+
+export const WithIcon: StoryObj = {
+  render: () => ({
+    template: `<app-menubar-with-icon></app-menubar-with-icon>`,
+  }),
+  parameters: {
+    docs: {
+      description: { story: 'Menubar с иконками в пунктах меню и вложенных подменю.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { MenubarComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-menubar-with-icon',
+  standalone: true,
+  imports: [MenubarComponent],
+  template: \`
+    <menubar [model]="items"></menubar>
+  \`,
+})
+export class MenubarWithIconComponent {
+  items: MenuItem[] = [
+    { label: 'Home', icon: 'ti ti-home' },
+    {
+      label: 'Features',
+      icon: 'ti ti-star',
+      items: [
+        { label: 'Core', icon: 'ti ti-cpu' },
+        { label: 'Blocks', icon: 'ti ti-layout-grid' },
+        { label: 'UI Kit', icon: 'ti ti-palette' },
+        {
+          label: 'Templates',
+          icon: 'ti ti-template',
+          items: [
+            { label: 'Apollo', icon: 'ti ti-rocket' },
+            { label: 'Ultima', icon: 'ti ti-diamond' },
+          ],
+        },
+      ],
+    },
+    {
+      label: 'Projects',
+      icon: 'ti ti-folder',
+      items: [
+        { label: 'Active', icon: 'ti ti-circle-check' },
+        { label: 'Archived', icon: 'ti ti-archive' },
+      ],
+    },
+    { label: 'Settings', icon: 'ti ti-settings' },
+  ];
+}
+        `,
+      },
+    },
+  },
+};