From b88df7abf1fc718fa4ce657d9d2c073c19a90c56 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Tue, 7 Apr 2026 20:37:44 +0700 Subject: [PATCH 1/4] =?UTF-8?q?breadcrumb:=20=D1=81=D1=82=D0=B8=D0=BB?= =?UTF-8?q?=D0=B8=D0=B7=D0=B0=D1=86=D0=B8=D1=8F,=20=D1=81=D1=82=D0=BE?= =?UTF-8?q?=D1=80=D0=B8=D1=81=D1=8B,=20=D0=BE=D0=B1=D1=91=D1=80=D1=82?= =?UTF-8?q?=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../breadcrumb/breadcrumb.component.ts | 19 ++ src/prime-preset/map-tokens.ts | 5 + .../tokens/components/breadcrumb.ts | 24 +++ .../breadcrumb/breadcrumb.stories.ts | 166 ++++++++++++++++++ .../examples/breadcrumb-basic.component.ts | 59 +++++++ .../breadcrumb-icons-only.component.ts | 59 +++++++ 6 files changed, 332 insertions(+) create mode 100644 src/lib/components/breadcrumb/breadcrumb.component.ts create mode 100644 src/prime-preset/tokens/components/breadcrumb.ts create mode 100644 src/stories/components/breadcrumb/breadcrumb.stories.ts create mode 100644 src/stories/components/breadcrumb/examples/breadcrumb-basic.component.ts create mode 100644 src/stories/components/breadcrumb/examples/breadcrumb-icons-only.component.ts diff --git a/src/lib/components/breadcrumb/breadcrumb.component.ts b/src/lib/components/breadcrumb/breadcrumb.component.ts new file mode 100644 index 00000000..740583cf --- /dev/null +++ b/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: ` + + `, +}) +export class BreadcrumbComponent { + @Input() model: MenuItem[] = []; + @Input() home: MenuItem | undefined = undefined; +} diff --git a/src/prime-preset/map-tokens.ts b/src/prime-preset/map-tokens.ts index 39627587..c8e6598b 100644 --- a/src/prime-preset/map-tokens.ts +++ b/src/prime-preset/map-tokens.ts @@ -3,6 +3,7 @@ import type { ComponentsDesignTokens } from '@primeuix/themes/types'; import type { AuraBaseDesignTokens } from '@primeuix/themes/aura/base'; import tokens from './tokens/tokens.json'; +import { breadcrumbCss } from './tokens/components/breadcrumb'; import { buttonCss } from './tokens/components/button'; const presetTokens: Preset = { @@ -10,6 +11,10 @@ const presetTokens: Preset = { semantic: tokens.semantic as unknown as AuraBaseDesignTokens['semantic'], components: { ...(tokens.components as unknown as ComponentsDesignTokens), + breadcrumb: { + ...(tokens.components.breadcrumb as unknown as ComponentsDesignTokens['breadcrumb']), + css: breadcrumbCss, + }, button: { ...(tokens.components.button as unknown as ComponentsDesignTokens['button']), css: buttonCss, diff --git a/src/prime-preset/tokens/components/breadcrumb.ts b/src/prime-preset/tokens/components/breadcrumb.ts new file mode 100644 index 00000000..5c6fe006 --- /dev/null +++ b/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')}; + } +`; diff --git a/src/stories/components/breadcrumb/breadcrumb.stories.ts b/src/stories/components/breadcrumb/breadcrumb.stories.ts new file mode 100644 index 00000000..88aea3ec --- /dev/null +++ b/src/stories/components/breadcrumb/breadcrumb.stories.ts @@ -0,0 +1,166 @@ +import { Meta, StoryObj, moduleMetadata } from '@storybook/angular'; +import { BreadcrumbComponent } from '../../../lib/components/breadcrumb/breadcrumb.component'; +import { BreadcrumbBasicComponent } from './examples/breadcrumb-basic.component'; +import { BreadcrumbIconsOnlyComponent } from './examples/breadcrumb-icons-only.component'; + +type BreadcrumbArgs = BreadcrumbComponent; + +const commonItems = [ + { label: 'Электроника', icon: 'ti ti-device-laptop', url: '#' }, + { label: 'Компьютеры', icon: 'ti ti-cpu', url: '#' }, + { label: 'Ноутбуки' }, +]; +const commonHome = { icon: 'ti ti-home', url: '#' }; +const iconOnlyItems = [ + { icon: 'ti ti-device-laptop', url: '#' }, + { icon: 'ti ti-cpu', url: '#' }, + { icon: 'ti ti-book' }, +]; + +const meta: Meta = { + title: 'Prime/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; + +const commonTemplate = ` + +`; + +// ── Default ────────────────────────────────────────────────────────────────── +export const Default: Story = { + name: 'Default', + render: (args) => ({ + props: args, + template: ``, + }), + parameters: { + docs: { + description: { + story: 'Базовый пример компонента.', + }, + }, + }, +}; + +// ── Basic ───────────────────────────────────────────────────────────────────── +export const Basic: Story = { + render: (args) => ({ props: args, template: commonTemplate }), + args: { + model: commonItems, + home: commonHome, + }, + 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: \` + + \`, +}) +export class BreadcrumbBasicComponent { + home = { icon: 'ti ti-home', url: '#' }; + model = [ + { label: 'Электроника', icon: 'ti ti-device-laptop', url: '#' }, + { label: 'Компьютеры', icon: 'ti ti-cpu', url: '#' }, + { label: 'Ноутбуки' }, + ]; +} + `, + }, + }, + }, +}; + +// ── IconsOnly ───────────────────────────────────────────────────────────────── +export const IconsOnly: Story = { + render: (args) => ({ props: args, template: commonTemplate }), + args: { + model: iconOnlyItems, + home: commonHome, + }, + 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: \` + + \`, +}) +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' }, + ]; +} + `, + }, + }, + }, +}; diff --git a/src/stories/components/breadcrumb/examples/breadcrumb-basic.component.ts b/src/stories/components/breadcrumb/examples/breadcrumb-basic.component.ts new file mode 100644 index 00000000..2f71352d --- /dev/null +++ b/src/stories/components/breadcrumb/examples/breadcrumb-basic.component.ts @@ -0,0 +1,59 @@ +import { Component } from '@angular/core'; +import { StoryObj } from '@storybook/angular'; +import { BreadcrumbComponent } from '../../../../lib/components/breadcrumb/breadcrumb.component'; + +const template = ` +
+ +
+`; + +@Component({ + selector: 'app-breadcrumb-basic', + standalone: true, + imports: [BreadcrumbComponent], + template, +}) +export class BreadcrumbBasicComponent { + home = { icon: 'ti ti-home', url: '#' }; + model = [ + { label: 'Электроника', icon: 'ti ti-device-laptop', url: '#' }, + { label: 'Компьютеры', icon: 'ti ti-cpu', url: '#' }, + { label: 'Ноутбуки' }, + ]; +} + +export const Basic: StoryObj = { + render: () => ({ + template: ``, + }), + 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: \` + + \`, +}) +export class BreadcrumbBasicComponent { + home = { icon: 'ti ti-home', url: '#' }; + model = [ + { label: 'Электроника', icon: 'ti ti-device-laptop', url: '#' }, + { label: 'Компьютеры', icon: 'ti ti-cpu', url: '#' }, + { label: 'Ноутбуки' }, + ]; +} + `, + }, + }, + }, +}; diff --git a/src/stories/components/breadcrumb/examples/breadcrumb-icons-only.component.ts b/src/stories/components/breadcrumb/examples/breadcrumb-icons-only.component.ts new file mode 100644 index 00000000..8ad8c8eb --- /dev/null +++ b/src/stories/components/breadcrumb/examples/breadcrumb-icons-only.component.ts @@ -0,0 +1,59 @@ +import { Component } from '@angular/core'; +import { StoryObj } from '@storybook/angular'; +import { BreadcrumbComponent } from '../../../../lib/components/breadcrumb/breadcrumb.component'; + +const template = ` +
+ +
+`; + +@Component({ + selector: 'app-breadcrumb-icons-only', + standalone: true, + imports: [BreadcrumbComponent], + template, +}) +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' }, + ]; +} + +export const IconsOnly: StoryObj = { + render: () => ({ + template: ``, + }), + 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: \` + + \`, +}) +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' }, + ]; +} + `, + }, + }, + }, +}; From d13881097bf1185fc47d3537e4ad7d09494566b2 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Tue, 7 Apr 2026 21:07:29 +0700 Subject: [PATCH 2/4] =?UTF-8?q?=D1=80=D0=B5=D0=B4=D0=B0=D0=BA=D1=82=D0=B8?= =?UTF-8?q?=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20=D0=B3=D1=80=D1=83?= =?UTF-8?q?=D0=BF=D0=BF=D1=8B=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5?= =?UTF-8?q?=D0=BD=D1=82=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/components/breadcrumb/breadcrumb.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/components/breadcrumb/breadcrumb.stories.ts b/src/stories/components/breadcrumb/breadcrumb.stories.ts index 88aea3ec..5e9dff18 100644 --- a/src/stories/components/breadcrumb/breadcrumb.stories.ts +++ b/src/stories/components/breadcrumb/breadcrumb.stories.ts @@ -18,7 +18,7 @@ const iconOnlyItems = [ ]; const meta: Meta = { - title: 'Prime/Menu/Breadcrumb', + title: 'Components/Menu/Breadcrumb', component: BreadcrumbComponent, tags: ['autodocs'], decorators: [ From 80b1c3b4be7a5ad932df55e4f2a7864ee04425a8 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 13 Apr 2026 12:17:07 +0700 Subject: [PATCH 3/4] =?UTF-8?q?=D0=B5=D0=B4=D0=B8=D0=BD=D1=8B=D0=B9=20?= =?UTF-8?q?=D0=B8=D1=81=D1=82=D0=BE=D1=87=D0=BD=D0=B8=D0=BA=20=D0=B4=D0=B0?= =?UTF-8?q?=D0=BD=D0=BD=D1=8B=D1=85;=20=D1=83=D0=B1=D1=80=D0=B0=D0=BD?= =?UTF-8?q?=D1=8B=20=D0=BB=D0=BE=D0=BA=D0=B0=D0=BB=D1=8C=D0=BD=D1=8B=D0=B5?= =?UTF-8?q?=20=D0=BA=D0=BE=D0=BD=D1=81=D1=82=D0=B0=D0=BD=D1=82=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/breadcrumb/breadcrumb.data.ts | 15 +++++++ .../breadcrumb/breadcrumb.stories.ts | 13 +----- .../examples/breadcrumb-basic.component.ts | 45 ++----------------- .../breadcrumb-icons-only.component.ts | 45 ++----------------- 4 files changed, 22 insertions(+), 96 deletions(-) create mode 100644 src/stories/components/breadcrumb/breadcrumb.data.ts diff --git a/src/stories/components/breadcrumb/breadcrumb.data.ts b/src/stories/components/breadcrumb/breadcrumb.data.ts new file mode 100644 index 00000000..df815a46 --- /dev/null +++ b/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' }, +]; diff --git a/src/stories/components/breadcrumb/breadcrumb.stories.ts b/src/stories/components/breadcrumb/breadcrumb.stories.ts index 5e9dff18..22941351 100644 --- a/src/stories/components/breadcrumb/breadcrumb.stories.ts +++ b/src/stories/components/breadcrumb/breadcrumb.stories.ts @@ -2,21 +2,10 @@ import { Meta, StoryObj, moduleMetadata } from '@storybook/angular'; import { BreadcrumbComponent } from '../../../lib/components/breadcrumb/breadcrumb.component'; import { BreadcrumbBasicComponent } from './examples/breadcrumb-basic.component'; import { BreadcrumbIconsOnlyComponent } from './examples/breadcrumb-icons-only.component'; +import { commonHome, commonItems, iconOnlyItems } from './breadcrumb.data'; type BreadcrumbArgs = BreadcrumbComponent; -const commonItems = [ - { label: 'Электроника', icon: 'ti ti-device-laptop', url: '#' }, - { label: 'Компьютеры', icon: 'ti ti-cpu', url: '#' }, - { label: 'Ноутбуки' }, -]; -const commonHome = { icon: 'ti ti-home', url: '#' }; -const iconOnlyItems = [ - { icon: 'ti ti-device-laptop', url: '#' }, - { icon: 'ti ti-cpu', url: '#' }, - { icon: 'ti ti-book' }, -]; - const meta: Meta = { title: 'Components/Menu/Breadcrumb', component: BreadcrumbComponent, diff --git a/src/stories/components/breadcrumb/examples/breadcrumb-basic.component.ts b/src/stories/components/breadcrumb/examples/breadcrumb-basic.component.ts index 2f71352d..83cbb3b3 100644 --- a/src/stories/components/breadcrumb/examples/breadcrumb-basic.component.ts +++ b/src/stories/components/breadcrumb/examples/breadcrumb-basic.component.ts @@ -1,6 +1,6 @@ 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 = `
@@ -15,45 +15,6 @@ const template = ` template, }) export class BreadcrumbBasicComponent { - home = { icon: 'ti ti-home', url: '#' }; - model = [ - { label: 'Электроника', icon: 'ti ti-device-laptop', url: '#' }, - { label: 'Компьютеры', icon: 'ti ti-cpu', url: '#' }, - { label: 'Ноутбуки' }, - ]; + home = commonHome; + model = commonItems; } - -export const Basic: StoryObj = { - render: () => ({ - template: ``, - }), - 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: \` - - \`, -}) -export class BreadcrumbBasicComponent { - home = { icon: 'ti ti-home', url: '#' }; - model = [ - { label: 'Электроника', icon: 'ti ti-device-laptop', url: '#' }, - { label: 'Компьютеры', icon: 'ti ti-cpu', url: '#' }, - { label: 'Ноутбуки' }, - ]; -} - `, - }, - }, - }, -}; diff --git a/src/stories/components/breadcrumb/examples/breadcrumb-icons-only.component.ts b/src/stories/components/breadcrumb/examples/breadcrumb-icons-only.component.ts index 8ad8c8eb..1c930e2c 100644 --- a/src/stories/components/breadcrumb/examples/breadcrumb-icons-only.component.ts +++ b/src/stories/components/breadcrumb/examples/breadcrumb-icons-only.component.ts @@ -1,6 +1,6 @@ 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 = `
@@ -15,45 +15,6 @@ const template = ` template, }) 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' }, - ]; + home = commonHome; + model = iconOnlyItems; } - -export const IconsOnly: StoryObj = { - render: () => ({ - template: ``, - }), - 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: \` - - \`, -}) -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' }, - ]; -} - `, - }, - }, - }, -}; From c3f4baf118444a8d98ed1d4ffa7ba5283c295b2c Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Tue, 14 Apr 2026 23:39:41 +0700 Subject: [PATCH 4/4] =?UTF-8?q?=D1=83=D0=B1=D1=80=D0=B0=D0=BB=20inline-?= =?UTF-8?q?=D1=81=D1=82=D0=BE=D1=80=D0=B8=D1=81=D1=8B=20Basic=20=D0=B8=20I?= =?UTF-8?q?consOnly;=20=D1=80=D0=B5-=D1=8D=D0=BA=D1=81=D0=BF=D0=BE=D1=80?= =?UTF-8?q?=D1=82=D1=8B=20=D0=B8=D0=B7=20example-=D1=84=D0=B0=D0=B9=D0=BB?= =?UTF-8?q?=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../breadcrumb/breadcrumb.stories.ts | 90 ++----------------- .../examples/breadcrumb-basic.component.ts | 36 ++++++++ .../breadcrumb-icons-only.component.ts | 36 ++++++++ 3 files changed, 77 insertions(+), 85 deletions(-) diff --git a/src/stories/components/breadcrumb/breadcrumb.stories.ts b/src/stories/components/breadcrumb/breadcrumb.stories.ts index 22941351..1f090d38 100644 --- a/src/stories/components/breadcrumb/breadcrumb.stories.ts +++ b/src/stories/components/breadcrumb/breadcrumb.stories.ts @@ -1,8 +1,8 @@ import { Meta, StoryObj, moduleMetadata } from '@storybook/angular'; import { BreadcrumbComponent } from '../../../lib/components/breadcrumb/breadcrumb.component'; -import { BreadcrumbBasicComponent } from './examples/breadcrumb-basic.component'; -import { BreadcrumbIconsOnlyComponent } from './examples/breadcrumb-icons-only.component'; -import { commonHome, commonItems, iconOnlyItems } from './breadcrumb.data'; +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; @@ -55,13 +55,6 @@ const meta: Meta = { export default meta; type Story = StoryObj; -const commonTemplate = ` - -`; - // ── Default ────────────────────────────────────────────────────────────────── export const Default: Story = { name: 'Default', @@ -78,78 +71,5 @@ export const Default: Story = { }, }; -// ── Basic ───────────────────────────────────────────────────────────────────── -export const Basic: Story = { - render: (args) => ({ props: args, template: commonTemplate }), - args: { - model: commonItems, - home: commonHome, - }, - 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: \` - - \`, -}) -export class BreadcrumbBasicComponent { - home = { icon: 'ti ti-home', url: '#' }; - model = [ - { label: 'Электроника', icon: 'ti ti-device-laptop', url: '#' }, - { label: 'Компьютеры', icon: 'ti ti-cpu', url: '#' }, - { label: 'Ноутбуки' }, - ]; -} - `, - }, - }, - }, -}; - -// ── IconsOnly ───────────────────────────────────────────────────────────────── -export const IconsOnly: Story = { - render: (args) => ({ props: args, template: commonTemplate }), - args: { - model: iconOnlyItems, - home: commonHome, - }, - 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: \` - - \`, -}) -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' }, - ]; -} - `, - }, - }, - }, -}; +// ── Re-exports from example components ──────────────────────────────────── +export { Basic, IconsOnly }; diff --git a/src/stories/components/breadcrumb/examples/breadcrumb-basic.component.ts b/src/stories/components/breadcrumb/examples/breadcrumb-basic.component.ts index 83cbb3b3..066086f0 100644 --- a/src/stories/components/breadcrumb/examples/breadcrumb-basic.component.ts +++ b/src/stories/components/breadcrumb/examples/breadcrumb-basic.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { StoryObj } from '@storybook/angular'; import { BreadcrumbComponent } from '../../../../lib/components/breadcrumb/breadcrumb.component'; import { commonHome, commonItems } from '../breadcrumb.data'; @@ -18,3 +19,38 @@ export class BreadcrumbBasicComponent { home = commonHome; model = commonItems; } + +export const Basic: StoryObj = { + render: () => ({ + template: ``, + }), + 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: \` + + \`, +}) +export class BreadcrumbBasicComponent { + home = { icon: 'ti ti-home', url: '#' }; + model = [ + { label: 'Электроника', icon: 'ti ti-device-laptop', url: '#' }, + { label: 'Компьютеры', icon: 'ti ti-cpu', url: '#' }, + { label: 'Ноутбуки' }, + ]; +} + `, + }, + }, + }, +}; diff --git a/src/stories/components/breadcrumb/examples/breadcrumb-icons-only.component.ts b/src/stories/components/breadcrumb/examples/breadcrumb-icons-only.component.ts index 1c930e2c..2b97a6e2 100644 --- a/src/stories/components/breadcrumb/examples/breadcrumb-icons-only.component.ts +++ b/src/stories/components/breadcrumb/examples/breadcrumb-icons-only.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { StoryObj } from '@storybook/angular'; import { BreadcrumbComponent } from '../../../../lib/components/breadcrumb/breadcrumb.component'; import { commonHome, iconOnlyItems } from '../breadcrumb.data'; @@ -18,3 +19,38 @@ export class BreadcrumbIconsOnlyComponent { home = commonHome; model = iconOnlyItems; } + +export const IconsOnly: StoryObj = { + render: () => ({ + template: ``, + }), + 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: \` + + \`, +}) +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' }, + ]; +} + `, + }, + }, + }, +};