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

src/lib/components/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { Breadcrumb } from 'primeng/breadcrumb';
+import { MenuItem } from 'primeng/api';
+
+@Component({
+  selector: 'breadcrumb',
+  standalone: true,
+  imports: [Breadcrumb],
+  template: `
+    <p-breadcrumb
+      [model]="model"
+      [home]="home"
+    ></p-breadcrumb>
+  `,
+})
+export class BreadcrumbComponent {
+  @Input() model: MenuItem[] = [];
+  @Input() home: MenuItem | undefined = undefined;
+}

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

@@ -0,0 +1,24 @@
+export const breadcrumbCss = ({ dt }: { dt: (token: string) => string }): string => `
+  .p-breadcrumb-item-link {
+    padding: ${dt('breadcrumb.extend.extItem.padding')};
+    font-size: ${dt('fonts.fontSize.200')};
+  }
+
+  .p-breadcrumb-item-link:hover {
+    background: ${dt('breadcrumb.extend.hoverBackground')};
+  }
+
+  .p-breadcrumb-item-icon {
+    font-size: ${dt('breadcrumb.extend.iconSize')};
+  }
+
+  .p-breadcrumb-item:last-child .p-breadcrumb-item-link {
+    opacity: ${dt('opacity.500')};
+    pointer-events: none;
+    cursor: default;
+  }
+
+  .p-breadcrumb-item:last-child .p-breadcrumb-item-link:hover {
+    background: ${dt('transparent')};
+  }
+`;

src/stories/components/breadcrumb/breadcrumb.data.ts

@@ -0,0 +1,15 @@
+import { MenuItem } from 'primeng/api';
+
+export const commonHome: MenuItem = { icon: 'ti ti-home', url: '#' };
+
+export const commonItems: MenuItem[] = [
+  { label: 'Электроника', icon: 'ti ti-device-laptop', url: '#' },
+  { label: 'Компьютеры', icon: 'ti ti-cpu', url: '#' },
+  { label: 'Ноутбуки' },
+];
+
+export const iconOnlyItems: MenuItem[] = [
+  { icon: 'ti ti-device-laptop', url: '#' },
+  { icon: 'ti ti-cpu', url: '#' },
+  { icon: 'ti ti-book' },
+];

src/stories/components/breadcrumb/breadcrumb.stories.ts

@@ -0,0 +1,75 @@
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { BreadcrumbComponent } from '../../../lib/components/breadcrumb/breadcrumb.component';
+import { BreadcrumbBasicComponent, Basic } from './examples/breadcrumb-basic.component';
+import { BreadcrumbIconsOnlyComponent, IconsOnly } from './examples/breadcrumb-icons-only.component';
+import { commonHome, commonItems } from './breadcrumb.data';
+
+type BreadcrumbArgs = BreadcrumbComponent;
+
+const meta: Meta<BreadcrumbArgs> = {
+  title: 'Components/Menu/Breadcrumb',
+  component: BreadcrumbComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [
+        BreadcrumbComponent,
+        BreadcrumbBasicComponent,
+        BreadcrumbIconsOnlyComponent,
+      ],
+    }),
+  ],
+  parameters: {
+    designTokens: { prefix: '--p-breadcrumb' },
+    docs: {
+      description: {
+        component: `Компонент навигации, показывающий путь к текущей странице.`,
+      },
+    },
+  },
+  argTypes: {
+    // ── Props ────────────────────────────────────────────────
+    model: {
+      control: 'object',
+      description: 'Массив элементов меню',
+      table: {
+        category: 'Props',
+        type: { summary: 'MenuItem[]' },
+      },
+    },
+    home: {
+      control: 'object',
+      description: 'Элемент для иконки «Домой»',
+      table: {
+        category: 'Props',
+        type: { summary: 'MenuItem' },
+      },
+    },
+  },
+  args: {
+    model: commonItems,
+    home: commonHome,
+  },
+};
+
+export default meta;
+type Story = StoryObj<BreadcrumbArgs>;
+
+// ── Default ──────────────────────────────────────────────────────────────────
+export const Default: Story = {
+  name: 'Default',
+  render: (args) => ({
+    props: args,
+    template: `<breadcrumb [model]="model" [home]="home"></breadcrumb>`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовый пример компонента.',
+      },
+    },
+  },
+};
+
+// ── Re-exports from example components ────────────────────────────────────
+export { Basic, IconsOnly };

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

@@ -0,0 +1,56 @@
+import { Component } from '@angular/core';
+import { StoryObj } from '@storybook/angular';
+import { BreadcrumbComponent } from '../../../../lib/components/breadcrumb/breadcrumb.component';
+import { commonHome, commonItems } from '../breadcrumb.data';
+
+const template = `
+<div class="bg-surface-ground">
+  <breadcrumb [model]="model" [home]="home"></breadcrumb>
+</div>
+`;
+
+@Component({
+  selector: 'app-breadcrumb-basic',
+  standalone: true,
+  imports: [BreadcrumbComponent],
+  template,
+})
+export class BreadcrumbBasicComponent {
+  home = commonHome;
+  model = commonItems;
+}
+
+export const Basic: StoryObj = {
+  render: () => ({
+    template: `<app-breadcrumb-basic></app-breadcrumb-basic>`,
+  }),
+  parameters: {
+    docs: {
+      description: { story: 'Хлебные крошки с текстом и иконками.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { BreadcrumbComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-breadcrumb-basic',
+  standalone: true,
+  imports: [BreadcrumbComponent],
+  template: \`
+    <breadcrumb [model]="model" [home]="home"></breadcrumb>
+  \`,
+})
+export class BreadcrumbBasicComponent {
+  home = { icon: 'ti ti-home', url: '#' };
+  model = [
+    { label: 'Электроника', icon: 'ti ti-device-laptop', url: '#' },
+    { label: 'Компьютеры', icon: 'ti ti-cpu', url: '#' },
+    { label: 'Ноутбуки' },
+  ];
+}
+        `,
+      },
+    },
+  },
+};

src/stories/components/breadcrumb/examples/breadcrumb-icons-only.component.ts

@@ -0,0 +1,56 @@
+import { Component } from '@angular/core';
+import { StoryObj } from '@storybook/angular';
+import { BreadcrumbComponent } from '../../../../lib/components/breadcrumb/breadcrumb.component';
+import { commonHome, iconOnlyItems } from '../breadcrumb.data';
+
+const template = `
+<div class="bg-surface-ground">
+  <breadcrumb [model]="model" [home]="home"></breadcrumb>
+</div>
+`;
+
+@Component({
+  selector: 'app-breadcrumb-icons-only',
+  standalone: true,
+  imports: [BreadcrumbComponent],
+  template,
+})
+export class BreadcrumbIconsOnlyComponent {
+  home = commonHome;
+  model = iconOnlyItems;
+}
+
+export const IconsOnly: StoryObj = {
+  render: () => ({
+    template: `<app-breadcrumb-icons-only></app-breadcrumb-icons-only>`,
+  }),
+  parameters: {
+    docs: {
+      description: { story: 'Хлебные крошки только с иконками, без текста.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { BreadcrumbComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-breadcrumb-icons-only',
+  standalone: true,
+  imports: [BreadcrumbComponent],
+  template: \`
+    <breadcrumb [model]="model" [home]="home"></breadcrumb>
+  \`,
+})
+export class BreadcrumbIconsOnlyComponent {
+  home = { icon: 'ti ti-home', url: '#' };
+  model = [
+    { icon: 'ti ti-device-laptop', url: '#' },
+    { icon: 'ti ti-cpu', url: '#' },
+    { icon: 'ti ti-book' },
+  ];
+}
+        `,
+      },
+    },
+  },
+};