Skip to content

Commit 0f1f0c2

Browse files
qradle-yndxqradle-yndx
authored
chore(PriceCard): update storybook (#1275)
* chore(PriceCard): update storybook
1 parent 40403bb commit 0f1f0c2

10 files changed

+127
-172
lines changed

‎src/sub-blocks/PriceCard/__snapshots__/PriceCard.visual.test.tsx-snapshots/PriceCard-render-stories-Default-light-chromium-linux.png‎

-8.98 KB
Loading

‎src/sub-blocks/PriceCard/__snapshots__/PriceCard.visual.test.tsx-snapshots/PriceCard-render-stories-Default-light-webkit-linux.png‎

-12.3 KB
Loading

‎src/sub-blocks/PriceCard/__snapshots__/PriceCard.visual.test.tsx-snapshots/PriceCard-render-stories-Link-light-chromium-linux.png‎

26 KB
Loading

‎src/sub-blocks/PriceCard/__snapshots__/PriceCard.visual.test.tsx-snapshots/PriceCard-render-stories-Link-light-webkit-linux.png‎

65 KB
Loading

‎src/sub-blocks/PriceCard/__snapshots__/PriceCard.visual.test.tsx-snapshots/PriceCard-render-stories-Themed-light-chromium-linux.png‎

330 Bytes
Loading

‎src/sub-blocks/PriceCard/__snapshots__/PriceCard.visual.test.tsx-snapshots/PriceCard-render-stories-Themed-light-webkit-linux.png‎

58 Bytes
Loading

‎src/sub-blocks/PriceCard/__stories__/PriceCard.stories.tsx‎

Lines changed: 41 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import {Meta, StoryFn} from '@storybook/react';
22

3-
import {yfmTransform} from '../../../../.storybook/utils';
3+
import {blockListTransform, blockTransform} from '../../../../.storybook/utils';
44
import CardLayout from '../../../blocks/CardLayout/CardLayout';
55
import {BlockBase} from '../../../components';
66
import {ConstructorRow} from '../../../containers/PageConstructor/components/ConstructorRow';
77
import {Grid} from '../../../grid';
8-
import {PriceCardProps} from '../../../models';
8+
import {PriceCardModel, PriceCardProps} from '../../../models';
99
import PriceCard from '../PriceCard';
1010

1111
import data from './data.json';
@@ -20,55 +20,38 @@ export default {
2020
},
2121
} as Meta;
2222

23-
const transformList = (list: PriceCardProps['list']) =>
24-
list?.map((text) => yfmTransform(text)) || undefined;
25-
26-
const DefaultTemplate: StoryFn<PriceCardProps> = (args) => (
27-
<div style={{display: 'flex', flexWrap: 'wrap', flexDirection: 'row'}}>
28-
<div style={{display: 'inline-table', width: 400, margin: 20}}>
29-
<PriceCard
30-
{...args}
31-
buttons={data.buttons as PriceCardProps['buttons']}
32-
list={transformList(args.list)}
33-
/>
34-
</div>
35-
<div style={{display: 'inline-table', width: 400, margin: 20}}>
36-
<PriceCard
37-
{...args}
38-
links={data.links as PriceCardProps['links']}
39-
list={transformList(args.list)}
40-
/>
23+
const DefaultTemplate: StoryFn<PriceCardModel> = (args) => {
24+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
25+
const {type, ...priceCardProps} = blockTransform(args);
26+
return (
27+
<div style={{width: 400, margin: 20}}>
28+
<PriceCard {...(priceCardProps as PriceCardProps)} />
4129
</div>
42-
</div>
43-
);
30+
);
31+
};
4432

45-
const DifferentContentTemplate: StoryFn<PriceCardProps> = (args) => {
46-
const items = data.differentContent.content as PriceCardProps[];
33+
const DifferentContentTemplate: StoryFn<Record<number, PriceCardModel>> = (args) => {
34+
const items = blockListTransform(Object.values(args)) as PriceCardModel[];
4735
return (
4836
<div style={{display: 'flex', flexWrap: 'wrap', flexDirection: 'row'}}>
4937
{items.map((itemArgs, index) => (
5038
<div key={index} style={{display: 'inline-table', width: 400, margin: 20}}>
51-
<PriceCard {...args} {...itemArgs} list={transformList(itemArgs.list)} />
39+
<PriceCard {...itemArgs} />
5240
</div>
5341
))}
5442
</div>
5543
);
5644
};
5745

58-
const MultipleItemsTemplate: StoryFn<PriceCardProps> = (args) => {
59-
const items = data.themed.content as PriceCardProps[];
46+
const MultipleItemsTemplate: StoryFn<Record<number, PriceCardModel>> = (args) => {
47+
const items = blockListTransform(Object.values(args)) as PriceCardModel[];
6048
return (
6149
<Grid>
6250
<ConstructorRow>
6351
<BlockBase>
6452
<CardLayout animated={false}>
6553
{items.map((itemArgs, index) => (
66-
<PriceCard
67-
key={index}
68-
{...itemArgs}
69-
{...args}
70-
list={transformList(itemArgs.list)}
71-
/>
54+
<PriceCard key={index} {...itemArgs} />
7255
))}
7356
</CardLayout>
7457
</BlockBase>
@@ -78,11 +61,32 @@ const MultipleItemsTemplate: StoryFn<PriceCardProps> = (args) => {
7861
};
7962

8063
export const Default = DefaultTemplate.bind({});
64+
export const Link = DefaultTemplate.bind({});
8165
export const DifferentContent = DifferentContentTemplate.bind({});
8266
export const Themed = MultipleItemsTemplate.bind({});
8367

84-
Default.args = data.default.content as PriceCardProps;
85-
Themed.argTypes = {
86-
theme: {table: {disable: true}},
87-
title: {table: {disable: true}},
68+
Default.args = data.default as PriceCardModel;
69+
70+
Link.args = data.link as PriceCardModel;
71+
72+
DifferentContent.args = [
73+
data.default,
74+
{...data.link, description: undefined, priceDetails: undefined},
75+
data.minimal,
76+
] as PriceCardModel[];
77+
DifferentContent.parameters = {
78+
controls: {
79+
include: Object.keys(DifferentContent.args),
80+
},
81+
};
82+
83+
Themed.args = [
84+
{...data.default, title: 'Default theme'},
85+
data.light,
86+
data.dark,
87+
] as PriceCardModel[];
88+
Themed.parameters = {
89+
controls: {
90+
include: Object.keys(DifferentContent.args),
91+
},
8892
};

‎src/sub-blocks/PriceCard/__stories__/data.json‎

Lines changed: 78 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -1,147 +1,92 @@
11
{
2-
"common": {
2+
"default": {
3+
"type": "price-card",
34
"title": "Lorem ipsum",
45
"price": "299.99 $",
56
"pricePeriod": "month",
6-
"priceDetails": "plan details"
7-
},
8-
"links": [
9-
{
10-
"url": "#",
11-
"text": "Link",
12-
"theme": "normal",
13-
"arrow": true
14-
}
15-
],
16-
"buttons": [
17-
{
18-
"text": "Button",
19-
"url": "https://example.com",
20-
"width": "max",
21-
"theme": "action"
22-
}
23-
],
24-
"default": {
25-
"content": {
26-
"title": "Lorem ipsum",
27-
"price": "299.99 $",
28-
"pricePeriod": "month",
29-
"priceDetails": "plan details",
30-
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
31-
"list": [
32-
"Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
33-
"Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
34-
]
35-
}
36-
},
37-
"differentContent": {
38-
"content": [
39-
{
40-
"title": "Lorem ipsum",
41-
"price": "299.99 $",
42-
"pricePeriod": "month",
43-
"priceDetails": "plan details",
44-
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
45-
"list": [
46-
"Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
47-
"Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
48-
],
49-
"buttons": [
50-
{
51-
"text": "Button",
52-
"url": "https://example.com",
53-
"width": "max",
54-
"theme": "action"
55-
}
56-
]
57-
},
58-
{
59-
"title": "Lorem ipsum",
60-
"price": "299.99 $",
61-
"pricePeriod": "month",
62-
"list": [
63-
"Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
64-
"Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
65-
],
66-
"links": [
67-
{
68-
"url": "#",
69-
"text": "Link",
70-
"theme": "normal",
71-
"arrow": true
72-
}
73-
]
74-
},
7+
"priceDetails": "plan details",
8+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
9+
"list": [
10+
"Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
11+
"Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
12+
],
13+
"buttons": [
7514
{
76-
"title": "Lorem ipsum",
77-
"price": "299.99 $",
78-
"pricePeriod": "month",
79-
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
15+
"text": "Button",
16+
"url": "https://example.com",
17+
"width": "max",
18+
"theme": "action"
8019
}
8120
]
8221
},
83-
"themed": {
84-
"content": [
22+
"link": {
23+
"type": "price-card",
24+
"title": "Lorem ipsum",
25+
"price": "299.99 $",
26+
"pricePeriod": "month",
27+
"priceDetails": "plan details",
28+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
29+
"list": [
30+
"Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
31+
"Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
32+
],
33+
"links": [
8534
{
86-
"title": "Default theme",
87-
"price": "299.99 $",
88-
"pricePeriod": "month",
89-
"priceDetails": "plan details",
90-
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
91-
"list": [
92-
"Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
93-
"Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
94-
],
95-
"buttons": [
96-
{
97-
"text": "Button",
98-
"url": "https://example.com",
99-
"width": "max",
100-
"theme": "action"
101-
}
102-
]
103-
},
35+
"url": "#",
36+
"text": "Link",
37+
"theme": "normal",
38+
"arrow": true
39+
}
40+
]
41+
},
42+
"minimal": {
43+
"type": "price-card",
44+
"title": "Lorem ipsum",
45+
"price": "299.99 $",
46+
"pricePeriod": "month",
47+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
48+
},
49+
"light": {
50+
"type": "price-card",
51+
"title": "Light theme",
52+
"price": "299.99 $",
53+
"pricePeriod": "month",
54+
"priceDetails": "plan details",
55+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
56+
"list": [
57+
"Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
58+
"Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
59+
],
60+
"theme": "light",
61+
"buttons": [
10462
{
105-
"title": "Light theme",
106-
"price": "299.99 $",
107-
"pricePeriod": "month",
108-
"priceDetails": "plan details",
109-
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
110-
"list": [
111-
"Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
112-
"Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
113-
],
114-
"theme": "light",
115-
"buttons": [
116-
{
117-
"text": "Button",
118-
"url": "https://example.com",
119-
"width": "max",
120-
"theme": "monochrome"
121-
}
122-
],
123-
"backgroundColor": "#CCDAFF"
124-
},
63+
"text": "Button",
64+
"url": "https://example.com",
65+
"width": "max",
66+
"theme": "monochrome"
67+
}
68+
],
69+
"backgroundColor": "#CCDAFF"
70+
},
71+
"dark": {
72+
"type": "price-card",
73+
"title": "Dark theme",
74+
"price": "299.99 $",
75+
"pricePeriod": "month",
76+
"priceDetails": "plan details",
77+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
78+
"list": [
79+
"Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
80+
],
81+
"theme": "dark",
82+
"buttons": [
12583
{
126-
"title": "Dark theme",
127-
"price": "299.99 $",
128-
"pricePeriod": "month",
129-
"priceDetails": "plan details",
130-
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
131-
"list": [
132-
"Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
133-
],
134-
"theme": "dark",
135-
"buttons": [
136-
{
137-
"text": "Button",
138-
"url": "https://example.com",
139-
"width": "max",
140-
"theme": "normal-contrast"
141-
}
142-
],
143-
"backgroundColor": "#262626"
84+
"text": "Button",
85+
"url": "https://example.com",
86+
"width": "max",
87+
"theme": "normal-contrast"
14488
}
145-
]
89+
],
90+
"backgroundColor": "#262626"
14691
}
14792
}

‎src/sub-blocks/PriceCard/__tests__/PriceCard.visual.test.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {test} from '../../../../playwright/core/index';
22

3-
import {Default, DifferentContent, Themed} from './helpers';
3+
import {Default, DifferentContent, Link, Themed} from './helpers';
44

55
test.describe('PriceCard', () => {
66
test('render stories <Default>', async ({mount, expectScreenshot, defaultDelay}) => {
@@ -9,6 +9,12 @@ test.describe('PriceCard', () => {
99
await expectScreenshot({skipTheme: 'dark'});
1010
});
1111

12+
test('render stories <Link>', async ({mount, expectScreenshot, defaultDelay}) => {
13+
await mount(<Link />);
14+
await defaultDelay();
15+
await expectScreenshot({skipTheme: 'dark'});
16+
});
17+
1218
test('render stories <DifferentContent>', async ({mount, expectScreenshot, defaultDelay}) => {
1319
await mount(<DifferentContent />);
1420
await defaultDelay();

‎src/sub-blocks/PriceCard/__tests__/helpers.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@ import {composeStories} from '@storybook/react';
22

33
import * as PriceCardStories from '../__stories__/PriceCard.stories';
44

5-
export const {Default, DifferentContent, Themed} = composeStories(PriceCardStories);
5+
export const {Default, DifferentContent, Link, Themed} = composeStories(PriceCardStories);

0 commit comments

Comments
 (0)