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

src/lib/components/divider/divider.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input } from '@angular/core';
+import { Divider } from 'primeng/divider';
+
+export type DividerLayout = 'horizontal' | 'vertical';
+export type DividerType = 'solid' | 'dashed' | 'dotted';
+export type DividerAlign = 'left' | 'center' | 'right' | 'top' | 'bottom';
+
+@Component({
+  selector: 'divider',
+  standalone: true,
+  imports: [Divider],
+  template: `
+    <p-divider
+      [layout]="layout"
+      [type]="type"
+      [align]="align"
+    >
+      <ng-content></ng-content>
+    </p-divider>
+  `,
+})
+export class DividerComponent {
+  @Input() layout: DividerLayout = 'horizontal';
+  @Input() type: DividerType = 'solid';
+  @Input() align: DividerAlign = 'center';
+}

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

@@ -0,0 +1,34 @@
+/**
+ * Кастомная CSS-стилизация для компонента p-divider.
+ * Публикует extend-токены как CSS-переменные и применяет глобальные стили.
+ * Подключается в map-tokens.ts: `import { dividerCss } from './components/divider'`
+ */
+export const dividerCss = ({ dt }: { dt: (token: string) => string }): string => `
+  /* ─── Divider extend: публикуем кастомные переменные в :root ─── */
+  :root {
+    --p-divider-extend-content-gap:  ${dt('divider.extend.content.gap')};
+    --p-divider-extend-icon-size:    ${dt('divider.extend.iconSize')};
+  }
+
+  /* ─── Контент разделителя ─── */
+  .p-divider-content {
+    display: flex;
+    align-items: center;
+    gap: var(--p-divider-extend-content-gap);
+    font-family: ${dt('fonts.fontFamily.heading')};
+    font-size: ${dt('fonts.fontSize.200')};
+    font-weight: ${dt('fonts.fontWeight.demibold')};
+  }
+
+  .p-divider-content .ti {
+    font-size: var(--p-divider-extend-icon-size);
+  }
+
+  /* ─── Вертикальное выравнивание ─── */
+  .p-divider.p-divider-vertical.p-divider-top .p-divider-content {
+    align-items: flex-start;
+  }
+  .p-divider.p-divider-vertical.p-divider-bottom .p-divider-content {
+    align-items: flex-end;
+  }
+`;

src/stories/components/divider/divider.stories.ts

@@ -0,0 +1,176 @@
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { DividerComponent } from '../../../lib/components/divider/divider.component';
+import { DividerWithContentComponent, WithContent as WithContentStory } from './examples/divider-with-content.component';
+import { DividerWithIconComponent, WithIcon as WithIconStory } from './examples/divider-with-icon.component';
+import { DividerAlignLeftComponent, AlignLeft as AlignLeftStory } from './examples/divider-align-left.component';
+
+const meta: Meta<DividerComponent> = {
+  title: 'Components/Panel/Divider',
+  component: DividerComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [
+        DividerComponent,
+        DividerWithContentComponent,
+        DividerWithIconComponent,
+        DividerAlignLeftComponent,
+      ],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: `Разделитель для визуального разделения контента. Поддерживает горизонтальную и вертикальную ориентацию, различные стили линии и выравнивание.
+
+\`\`\`typescript
+import { DividerModule } from 'primeng/divider';
+\`\`\``,
+      },
+    },
+    designTokens: { prefix: '--p-divider' },
+  },
+  argTypes: {
+    layout: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'Ориентация разделителя',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'horizontal' },
+        type: { summary: "'horizontal' | 'vertical'" },
+      },
+    },
+    type: {
+      control: 'select',
+      options: ['solid', 'dashed', 'dotted'],
+      description: 'Стиль линии разделителя',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'solid' },
+        type: { summary: "'solid' | 'dashed' | 'dotted'" },
+      },
+    },
+    align: {
+      control: 'select',
+      options: ['left', 'center', 'right', 'top', 'bottom'],
+      description: 'Выравнивание контента внутри разделителя',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'center' },
+        type: { summary: "'left' | 'center' | 'right' | 'top' | 'bottom'" },
+      },
+    },
+  },
+};
+
+const commonTemplate = `
+<divider
+  [layout]="layout"
+  [type]="type"
+  [align]="align"
+></divider>
+`;
+
+export default meta;
+type Story = StoryObj<DividerComponent>;
+
+// ── Default ───────────────────────────────────────────────────────────────────
+
+export const Default: Story = {
+  name: 'Default',
+  render: (args) => {
+    const parts: string[] = [];
+
+    if (args.layout && args.layout !== 'horizontal') parts.push(`layout="${args.layout}"`);
+    if (args.type && args.type !== 'solid') parts.push(`type="${args.type}"`);
+    if (args.align && args.align !== 'center') parts.push(`align="${args.align}"`);
+
+    const template = parts.length
+      ? `<divider\n  ${parts.join('\n  ')}\n></divider>`
+      : `<divider></divider>`;
+
+    return { props: args, template };
+  },
+  args: {
+    layout: 'horizontal',
+    type: 'solid',
+    align: 'center',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовый пример компонента. Используйте Controls для интерактивного изменения пропсов.',
+      },
+    },
+  },
+};
+
+// ── WithContent ───────────────────────────────────────────────────────────────
+
+export const WithContent: Story = WithContentStory;
+
+// ── WithIcon ──────────────────────────────────────────────────────────────────
+
+export const WithIcon: Story = WithIconStory;
+
+// ── Vertical ──────────────────────────────────────────────────────────────────
+
+export const Vertical: Story = {
+  render: (args) => ({ props: args, template: commonTemplate }),
+  args: {
+    layout: 'vertical',
+    type: 'solid',
+    align: 'center',
+  },
+  parameters: {
+    docs: {
+      description: { story: 'Вертикальный разделитель для разделения контента по горизонтали.' },
+      source: {
+        code: `<divider layout="vertical"></divider>`,
+      },
+    },
+  },
+};
+
+// ── Type ──────────────────────────────────────────────────────────────────────
+
+export const TypeDashed: Story = {
+  name: 'Dashed',
+  render: (args) => ({ props: args, template: commonTemplate }),
+  args: {
+    layout: 'horizontal',
+    type: 'dashed',
+    align: 'center',
+  },
+  parameters: {
+    docs: {
+      description: { story: 'Разделитель с пунктирной линией.' },
+      source: {
+        code: `<divider type="dashed"></divider>`,
+      },
+    },
+  },
+};
+
+export const TypeDotted: Story = {
+  name: 'Dotted',
+  render: (args) => ({ props: args, template: commonTemplate }),
+  args: {
+    layout: 'horizontal',
+    type: 'dotted',
+    align: 'center',
+  },
+  parameters: {
+    docs: {
+      description: { story: 'Разделитель с точечной линией.' },
+      source: {
+        code: `<divider type="dotted"></divider>`,
+      },
+    },
+  },
+};
+
+// ── Align ─────────────────────────────────────────────────────────────────────
+
+export const AlignLeft: Story = AlignLeftStory;

src/stories/components/divider/examples/divider-align-left.component.ts

@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+import { DividerComponent } from '../../../../lib/components/divider/divider.component';
+
+const template = `
+<div class="bg-surface-ground">
+  <divider align="left">
+    <span>Отправитель</span>
+  </divider>
+</div>
+`;
+const styles = '';
+
+@Component({
+  selector: 'app-divider-align-left',
+  standalone: true,
+  imports: [DividerComponent],
+  template,
+  styles,
+})
+export class DividerAlignLeftComponent {}
+
+export const AlignLeft = {
+  render: () => ({
+    template: `<app-divider-align-left></app-divider-align-left>`,
+  }),
+  parameters: {
+    docs: {
+      description: { story: 'Контент разделителя выровнен по левому краю.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { DividerComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-divider-align-left',
+  standalone: true,
+  imports: [DividerComponent],
+  template: \`
+    <divider align="left">
+      <span>Отправитель</span>
+    </divider>
+  \`,
+})
+export class DividerAlignLeftComponent {}
+        `,
+      },
+    },
+  },
+};

src/stories/components/divider/examples/divider-with-content.component.ts

@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+import { DividerComponent } from '../../../../lib/components/divider/divider.component';
+
+const template = `
+<div class="bg-surface-ground">
+  <divider align="center">
+    <span>Москва → Новосибирск</span>
+  </divider>
+</div>
+`;
+const styles = '';
+
+@Component({
+  selector: 'app-divider-with-content',
+  standalone: true,
+  imports: [DividerComponent],
+  template,
+  styles,
+})
+export class DividerWithContentComponent {}
+
+export const WithContent = {
+  render: () => ({
+    template: `<app-divider-with-content></app-divider-with-content>`,
+  }),
+  parameters: {
+    docs: {
+      description: { story: 'Разделитель с текстовым контентом по центру.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { DividerComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-divider-with-content',
+  standalone: true,
+  imports: [DividerComponent],
+  template: \`
+    <divider align="center">
+      <span>Москва → Новосибирск</span>
+    </divider>
+  \`,
+})
+export class DividerWithContentComponent {}
+        `,
+      },
+    },
+  },
+};

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

@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+import { DividerComponent } from '../../../../lib/components/divider/divider.component';
+
+const template = `
+<div class="bg-surface-ground">
+  <divider align="center">
+    <i class="ti ti-map-pin"></i>
+  </divider>
+</div>
+`;
+const styles = '';
+
+@Component({
+  selector: 'app-divider-with-icon',
+  standalone: true,
+  imports: [DividerComponent],
+  template,
+  styles,
+})
+export class DividerWithIconComponent {}
+
+export const WithIcon = {
+  render: () => ({
+    template: `<app-divider-with-icon></app-divider-with-icon>`,
+  }),
+  parameters: {
+    docs: {
+      description: { story: 'Разделитель с иконкой.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { DividerComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-divider-with-icon',
+  standalone: true,
+  imports: [DividerComponent],
+  template: \`
+    <divider align="center">
+      <i class="ti ti-map-pin"></i>
+    </divider>
+  \`,
+})
+export class DividerWithIconComponent {}
+        `,
+      },
+    },
+  },
+};