Skip to content

Commit 1098feb

Browse files
PahaN47PahaN47
committed
chore: update screenshots
1 parent 148e7ab commit 1098feb

File tree

3 files changed

+81
-95
lines changed

3 files changed

+81
-95
lines changed

‎src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-stories-ThemesSizes-light-chromium-linux.png

1.85 KB
Loading

‎src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-stories-ThemesSizes-light-webkit-linux.png

-12.7 KB
Loading

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

+81-95
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,6 @@ import BackgroundCard from '../BackgroundCard';
1010

1111
import data from './data.json';
1212

13-
interface BackgroundCardStoryProps {
14-
items: BackgroundCardProps[];
15-
}
16-
1713
const transformContentList = (list: ContentItemProps[]) =>
1814
list.map((item) => {
1915
return {
@@ -25,28 +21,6 @@ const transformContentList = (list: ContentItemProps[]) =>
2521
const getPaddingBottomTitle = (padding: string) =>
2622
data.paddings.title.replace('{{padding}}', padding);
2723

28-
const getStoryArgs = (
29-
count: number,
30-
args: BackgroundCardProps,
31-
getExtra: (index: number) => Partial<BackgroundCardProps>,
32-
): BackgroundCardStoryProps => ({
33-
items: new Array(count).fill(null).map((_, index) => ({...args, ...getExtra(index)})),
34-
});
35-
36-
const getDefaultExtraArgs: Parameters<typeof getStoryArgs>[2] = (index) => {
37-
switch (index) {
38-
case 0:
39-
return {additionalInfo: yfmTransform(data.common.additionalInfo)};
40-
case 1:
41-
return {links: data.common.links as LinkProps[]};
42-
case 2:
43-
return {buttons: data.common.buttons as ButtonProps[]};
44-
case 3:
45-
default:
46-
return {list: transformContentList(data.common.list)};
47-
}
48-
};
49-
5024
export default {
5125
component: BackgroundCard,
5226
title: 'Components/Cards/BackgroundCard',
@@ -65,20 +39,41 @@ export default {
6539
},
6640
} as Meta;
6741

68-
const DefaultTemplate: StoryFn<BackgroundCardStoryProps & BackgroundCardProps> = ({
69-
items,
70-
...props
71-
}) => (
42+
const DefaultTemplate: StoryFn<BackgroundCardProps> = (args) => (
7243
<div style={{display: 'flex'}}>
73-
{items.map((item, index) => (
74-
<div key={index} style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
75-
<BackgroundCard {...item} {...props} />
76-
</div>
77-
))}
44+
<div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
45+
<BackgroundCard {...args} additionalInfo={yfmTransform(data.common.additionalInfo)} />
46+
</div>
47+
<div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
48+
<BackgroundCard {...args} links={data.common.links as LinkProps[]} />
49+
</div>
50+
<div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
51+
<BackgroundCard {...args} buttons={data.common.buttons as ButtonProps[]} />
52+
</div>
53+
<div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
54+
<BackgroundCard {...args} list={transformContentList(data.common.list)} />
55+
</div>
56+
</div>
57+
);
58+
59+
const PaddingsTemplate: StoryFn<BackgroundCardProps> = (args) => (
60+
<div style={{display: 'flex'}}>
61+
<div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
62+
<BackgroundCard {...args} title={getPaddingBottomTitle('S')} paddingBottom="s" />
63+
</div>
64+
<div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
65+
<BackgroundCard {...args} title={getPaddingBottomTitle('M')} paddingBottom="m" />
66+
</div>
67+
<div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
68+
<BackgroundCard {...args} title={getPaddingBottomTitle('L')} paddingBottom="l" />
69+
</div>
70+
<div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
71+
<BackgroundCard {...args} title={getPaddingBottomTitle('XL')} paddingBottom="xl" />
72+
</div>
7873
</div>
7974
);
8075

81-
const CardThemesTemplate: StoryFn<BackgroundCardStoryProps> = (args) => (
76+
const CardThemesTemplate: StoryFn<{items: BackgroundCardProps[]}> = (args) => (
8277
<div style={{display: 'flex'}}>
8378
{args.items.map((item, i) => (
8479
<div style={{maxWidth: '400px', padding: '0 8px'}} key={i}>
@@ -95,6 +90,33 @@ const CardThemesTemplate: StoryFn<BackgroundCardStoryProps> = (args) => (
9590
</div>
9691
);
9792

93+
const BackgroundColorTemplate: StoryFn<BackgroundCardProps> = (args) => (
94+
<div style={{display: 'flex'}}>
95+
<div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
96+
<BackgroundCard {...args} additionalInfo={yfmTransform(data.common.additionalInfo)} />
97+
</div>
98+
<div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
99+
<BackgroundCard {...args} links={data.common.links as LinkProps[]} />
100+
</div>
101+
<div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
102+
<BackgroundCard
103+
{...args}
104+
buttons={data.cardThemes.content[1].buttons as ButtonProps[]}
105+
/>
106+
</div>
107+
</div>
108+
);
109+
110+
const WithUrlTemplate: StoryFn<{items: BackgroundCardProps[]}> = (args) => (
111+
<div style={{display: 'flex'}}>
112+
{args.items.map((item, i) => (
113+
<div style={{maxWidth: '400px', padding: '0 8px'}} key={i}>
114+
<BackgroundCard {...item} />
115+
</div>
116+
))}
117+
</div>
118+
);
119+
98120
const ControlPositionTemplate: StoryFn<BackgroundCardProps> = (args) => (
99121
<Grid>
100122
<ConstructorRow>
@@ -132,49 +154,31 @@ const ControlPositionTemplate: StoryFn<BackgroundCardProps> = (args) => (
132154

133155
export const Default = DefaultTemplate.bind({});
134156
export const WithBackgroundImage = DefaultTemplate.bind({});
135-
export const Paddings = DefaultTemplate.bind({});
157+
export const Paddings = PaddingsTemplate.bind({});
136158
export const CardThemes = CardThemesTemplate.bind([]);
137159
export const BorderLine = DefaultTemplate.bind({});
138-
export const BackgroundColor = DefaultTemplate.bind({});
139-
export const WithUrl = DefaultTemplate.bind({});
160+
export const BackgroundColor = BackgroundColorTemplate.bind({});
161+
export const WithUrl = WithUrlTemplate.bind({});
140162
export const ControlPosition = ControlPositionTemplate.bind({});
141163

142164
const DefaultArgs = {
143165
title: data.common.title,
144166
text: yfmTransform(data.common.text),
145167
};
146168

147-
Default.args = getStoryArgs(4, DefaultArgs, getDefaultExtraArgs);
169+
Default.args = {
170+
...DefaultArgs,
171+
} as BackgroundCardProps;
148172

149-
WithBackgroundImage.args = getStoryArgs(
150-
4,
151-
{
152-
...DefaultArgs,
153-
...data.withBackgroundImage.content,
154-
},
155-
getDefaultExtraArgs,
156-
);
173+
WithBackgroundImage.args = {
174+
...DefaultArgs,
175+
...data.withBackgroundImage.content,
176+
} as BackgroundCardProps;
157177

158-
Paddings.args = getStoryArgs(
159-
4,
160-
{
161-
...DefaultArgs,
162-
...data.withBackgroundImage.content,
163-
},
164-
(index) => {
165-
switch (index) {
166-
case 0:
167-
return {title: getPaddingBottomTitle('S'), paddingBottom: 's'};
168-
case 1:
169-
return {title: getPaddingBottomTitle('M'), paddingBottom: 'm'};
170-
case 2:
171-
return {title: getPaddingBottomTitle('L'), paddingBottom: 'l'};
172-
case 3:
173-
default:
174-
return {title: getPaddingBottomTitle('XL'), paddingBottom: 'xl'};
175-
}
176-
},
177-
);
178+
Paddings.args = {
179+
...DefaultArgs,
180+
...data.withBackgroundImage.content,
181+
} as BackgroundCardProps;
178182

179183
CardThemes.args = {
180184
items: [...data.cardThemes.content].map((item) => ({
@@ -183,34 +187,16 @@ CardThemes.args = {
183187
})) as BackgroundCardProps[],
184188
};
185189

186-
BorderLine.args = getStoryArgs(
187-
4,
188-
{
189-
...DefaultArgs,
190-
...data.borderLine.content,
191-
...data.withBackgroundImage.content,
192-
} as BackgroundCardProps,
193-
getDefaultExtraArgs,
194-
);
190+
BorderLine.args = {
191+
...DefaultArgs,
192+
...data.borderLine.content,
193+
...data.withBackgroundImage.content,
194+
} as BackgroundCardProps;
195195

196-
BackgroundColor.args = getStoryArgs(
197-
3,
198-
{
199-
...DefaultArgs,
200-
...data.backgroundColor.content,
201-
} as BackgroundCardProps,
202-
(index) => {
203-
switch (index) {
204-
case 0:
205-
return {additionalInfo: yfmTransform(data.common.additionalInfo)};
206-
case 1:
207-
return {links: data.common.links as LinkProps[]};
208-
case 2:
209-
default:
210-
return {buttons: data.cardThemes.content[1].buttons as ButtonProps[]};
211-
}
212-
},
213-
);
196+
BackgroundColor.args = {
197+
...DefaultArgs,
198+
...data.backgroundColor.content,
199+
} as BackgroundCardProps;
214200

215201
WithUrl.args = {
216202
items: [

0 commit comments

Comments
 (0)