Skip to content

Commit bc43fa3

Browse files
andreytsygankovandreytsygankov
authored
Merge pull request #26 from cdek-it/panel.divider
divider: стилизация, сторисы, обёртки
2 parents 6e1cae9 + 699e092 commit bc43fa3

6 files changed

Lines changed: 386 additions & 0 deletions

File tree

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Component, Input } from '@angular/core';
2+
import { Divider } from 'primeng/divider';
3+
4+
export type DividerLayout = 'horizontal' | 'vertical';
5+
export type DividerType = 'solid' | 'dashed' | 'dotted';
6+
export type DividerAlign = 'left' | 'center' | 'right' | 'top' | 'bottom';
7+
8+
@Component({
9+
selector: 'divider',
10+
standalone: true,
11+
imports: [Divider],
12+
template: `
13+
<p-divider
14+
[layout]="layout"
15+
[type]="type"
16+
[align]="align"
17+
>
18+
<ng-content></ng-content>
19+
</p-divider>
20+
`,
21+
})
22+
export class DividerComponent {
23+
@Input() layout: DividerLayout = 'horizontal';
24+
@Input() type: DividerType = 'solid';
25+
@Input() align: DividerAlign = 'center';
26+
}

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/**
2+
* Кастомная CSS-стилизация для компонента p-divider.
3+
* Публикует extend-токены как CSS-переменные и применяет глобальные стили.
4+
* Подключается в map-tokens.ts: `import { dividerCss } from './components/divider'`
5+
*/
6+
export const dividerCss = ({ dt }: { dt: (token: string) => string }): string => `
7+
/* ─── Divider extend: публикуем кастомные переменные в :root ─── */
8+
:root {
9+
--p-divider-extend-content-gap: ${dt('divider.extend.content.gap')};
10+
--p-divider-extend-icon-size: ${dt('divider.extend.iconSize')};
11+
}
12+
13+
/* ─── Контент разделителя ─── */
14+
.p-divider-content {
15+
display: flex;
16+
align-items: center;
17+
gap: var(--p-divider-extend-content-gap);
18+
font-family: ${dt('fonts.fontFamily.heading')};
19+
font-size: ${dt('fonts.fontSize.200')};
20+
font-weight: ${dt('fonts.fontWeight.demibold')};
21+
}
22+
23+
.p-divider-content .ti {
24+
font-size: var(--p-divider-extend-icon-size);
25+
}
26+
27+
/* ─── Вертикальное выравнивание ─── */
28+
.p-divider.p-divider-vertical.p-divider-top .p-divider-content {
29+
align-items: flex-start;
30+
}
31+
.p-divider.p-divider-vertical.p-divider-bottom .p-divider-content {
32+
align-items: flex-end;
33+
}
34+
`;

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

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
2+
import { DividerComponent } from '../../../lib/components/divider/divider.component';
3+
import { DividerWithContentComponent, WithContent as WithContentStory } from './examples/divider-with-content.component';
4+
import { DividerWithIconComponent, WithIcon as WithIconStory } from './examples/divider-with-icon.component';
5+
import { DividerAlignLeftComponent, AlignLeft as AlignLeftStory } from './examples/divider-align-left.component';
6+
7+
const meta: Meta<DividerComponent> = {
8+
title: 'Components/Panel/Divider',
9+
component: DividerComponent,
10+
tags: ['autodocs'],
11+
decorators: [
12+
moduleMetadata({
13+
imports: [
14+
DividerComponent,
15+
DividerWithContentComponent,
16+
DividerWithIconComponent,
17+
DividerAlignLeftComponent,
18+
],
19+
}),
20+
],
21+
parameters: {
22+
docs: {
23+
description: {
24+
component: `Разделитель для визуального разделения контента. Поддерживает горизонтальную и вертикальную ориентацию, различные стили линии и выравнивание.
25+
26+
\`\`\`typescript
27+
import { DividerModule } from 'primeng/divider';
28+
\`\`\``,
29+
},
30+
},
31+
designTokens: { prefix: '--p-divider' },
32+
},
33+
argTypes: {
34+
layout: {
35+
control: 'select',
36+
options: ['horizontal', 'vertical'],
37+
description: 'Ориентация разделителя',
38+
table: {
39+
category: 'Props',
40+
defaultValue: { summary: 'horizontal' },
41+
type: { summary: "'horizontal' | 'vertical'" },
42+
},
43+
},
44+
type: {
45+
control: 'select',
46+
options: ['solid', 'dashed', 'dotted'],
47+
description: 'Стиль линии разделителя',
48+
table: {
49+
category: 'Props',
50+
defaultValue: { summary: 'solid' },
51+
type: { summary: "'solid' | 'dashed' | 'dotted'" },
52+
},
53+
},
54+
align: {
55+
control: 'select',
56+
options: ['left', 'center', 'right', 'top', 'bottom'],
57+
description: 'Выравнивание контента внутри разделителя',
58+
table: {
59+
category: 'Props',
60+
defaultValue: { summary: 'center' },
61+
type: { summary: "'left' | 'center' | 'right' | 'top' | 'bottom'" },
62+
},
63+
},
64+
},
65+
};
66+
67+
const commonTemplate = `
68+
<divider
69+
[layout]="layout"
70+
[type]="type"
71+
[align]="align"
72+
></divider>
73+
`;
74+
75+
export default meta;
76+
type Story = StoryObj<DividerComponent>;
77+
78+
// ── Default ───────────────────────────────────────────────────────────────────
79+
80+
export const Default: Story = {
81+
name: 'Default',
82+
render: (args) => {
83+
const parts: string[] = [];
84+
85+
if (args.layout && args.layout !== 'horizontal') parts.push(`layout="${args.layout}"`);
86+
if (args.type && args.type !== 'solid') parts.push(`type="${args.type}"`);
87+
if (args.align && args.align !== 'center') parts.push(`align="${args.align}"`);
88+
89+
const template = parts.length
90+
? `<divider\n ${parts.join('\n ')}\n></divider>`
91+
: `<divider></divider>`;
92+
93+
return { props: args, template };
94+
},
95+
args: {
96+
layout: 'horizontal',
97+
type: 'solid',
98+
align: 'center',
99+
},
100+
parameters: {
101+
docs: {
102+
description: {
103+
story: 'Базовый пример компонента. Используйте Controls для интерактивного изменения пропсов.',
104+
},
105+
},
106+
},
107+
};
108+
109+
// ── WithContent ───────────────────────────────────────────────────────────────
110+
111+
export const WithContent: Story = WithContentStory;
112+
113+
// ── WithIcon ──────────────────────────────────────────────────────────────────
114+
115+
export const WithIcon: Story = WithIconStory;
116+
117+
// ── Vertical ──────────────────────────────────────────────────────────────────
118+
119+
export const Vertical: Story = {
120+
render: (args) => ({ props: args, template: commonTemplate }),
121+
args: {
122+
layout: 'vertical',
123+
type: 'solid',
124+
align: 'center',
125+
},
126+
parameters: {
127+
docs: {
128+
description: { story: 'Вертикальный разделитель для разделения контента по горизонтали.' },
129+
source: {
130+
code: `<divider layout="vertical"></divider>`,
131+
},
132+
},
133+
},
134+
};
135+
136+
// ── Type ──────────────────────────────────────────────────────────────────────
137+
138+
export const TypeDashed: Story = {
139+
name: 'Dashed',
140+
render: (args) => ({ props: args, template: commonTemplate }),
141+
args: {
142+
layout: 'horizontal',
143+
type: 'dashed',
144+
align: 'center',
145+
},
146+
parameters: {
147+
docs: {
148+
description: { story: 'Разделитель с пунктирной линией.' },
149+
source: {
150+
code: `<divider type="dashed"></divider>`,
151+
},
152+
},
153+
},
154+
};
155+
156+
export const TypeDotted: Story = {
157+
name: 'Dotted',
158+
render: (args) => ({ props: args, template: commonTemplate }),
159+
args: {
160+
layout: 'horizontal',
161+
type: 'dotted',
162+
align: 'center',
163+
},
164+
parameters: {
165+
docs: {
166+
description: { story: 'Разделитель с точечной линией.' },
167+
source: {
168+
code: `<divider type="dotted"></divider>`,
169+
},
170+
},
171+
},
172+
};
173+
174+
// ── Align ─────────────────────────────────────────────────────────────────────
175+
176+
export const AlignLeft: Story = AlignLeftStory;

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { Component } from '@angular/core';
2+
import { DividerComponent } from '../../../../lib/components/divider/divider.component';
3+
4+
const template = `
5+
<div class="bg-surface-ground">
6+
<divider align="left">
7+
<span>Отправитель</span>
8+
</divider>
9+
</div>
10+
`;
11+
const styles = '';
12+
13+
@Component({
14+
selector: 'app-divider-align-left',
15+
standalone: true,
16+
imports: [DividerComponent],
17+
template,
18+
styles,
19+
})
20+
export class DividerAlignLeftComponent {}
21+
22+
export const AlignLeft = {
23+
render: () => ({
24+
template: `<app-divider-align-left></app-divider-align-left>`,
25+
}),
26+
parameters: {
27+
docs: {
28+
description: { story: 'Контент разделителя выровнен по левому краю.' },
29+
source: {
30+
language: 'ts',
31+
code: `
32+
import { Component } from '@angular/core';
33+
import { DividerComponent } from '@cdek-it/angular-ui-kit';
34+
35+
@Component({
36+
selector: 'app-divider-align-left',
37+
standalone: true,
38+
imports: [DividerComponent],
39+
template: \`
40+
<divider align="left">
41+
<span>Отправитель</span>
42+
</divider>
43+
\`,
44+
})
45+
export class DividerAlignLeftComponent {}
46+
`,
47+
},
48+
},
49+
},
50+
};

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { Component } from '@angular/core';
2+
import { DividerComponent } from '../../../../lib/components/divider/divider.component';
3+
4+
const template = `
5+
<div class="bg-surface-ground">
6+
<divider align="center">
7+
<span>Москва → Новосибирск</span>
8+
</divider>
9+
</div>
10+
`;
11+
const styles = '';
12+
13+
@Component({
14+
selector: 'app-divider-with-content',
15+
standalone: true,
16+
imports: [DividerComponent],
17+
template,
18+
styles,
19+
})
20+
export class DividerWithContentComponent {}
21+
22+
export const WithContent = {
23+
render: () => ({
24+
template: `<app-divider-with-content></app-divider-with-content>`,
25+
}),
26+
parameters: {
27+
docs: {
28+
description: { story: 'Разделитель с текстовым контентом по центру.' },
29+
source: {
30+
language: 'ts',
31+
code: `
32+
import { Component } from '@angular/core';
33+
import { DividerComponent } from '@cdek-it/angular-ui-kit';
34+
35+
@Component({
36+
selector: 'app-divider-with-content',
37+
standalone: true,
38+
imports: [DividerComponent],
39+
template: \`
40+
<divider align="center">
41+
<span>Москва → Новосибирск</span>
42+
</divider>
43+
\`,
44+
})
45+
export class DividerWithContentComponent {}
46+
`,
47+
},
48+
},
49+
},
50+
};

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { Component } from '@angular/core';
2+
import { DividerComponent } from '../../../../lib/components/divider/divider.component';
3+
4+
const template = `
5+
<div class="bg-surface-ground">
6+
<divider align="center">
7+
<i class="ti ti-map-pin"></i>
8+
</divider>
9+
</div>
10+
`;
11+
const styles = '';
12+
13+
@Component({
14+
selector: 'app-divider-with-icon',
15+
standalone: true,
16+
imports: [DividerComponent],
17+
template,
18+
styles,
19+
})
20+
export class DividerWithIconComponent {}
21+
22+
export const WithIcon = {
23+
render: () => ({
24+
template: `<app-divider-with-icon></app-divider-with-icon>`,
25+
}),
26+
parameters: {
27+
docs: {
28+
description: { story: 'Разделитель с иконкой.' },
29+
source: {
30+
language: 'ts',
31+
code: `
32+
import { Component } from '@angular/core';
33+
import { DividerComponent } from '@cdek-it/angular-ui-kit';
34+
35+
@Component({
36+
selector: 'app-divider-with-icon',
37+
standalone: true,
38+
imports: [DividerComponent],
39+
template: \`
40+
<divider align="center">
41+
<i class="ti ti-map-pin"></i>
42+
</divider>
43+
\`,
44+
})
45+
export class DividerWithIconComponent {}
46+
`,
47+
},
48+
},
49+
},
50+
};

0 commit comments

Comments
 (0)