Skip to content

Commit 8cdf1ec

Browse files
author
berdysheva
committed
feat: refactoring storybook pt2
1 parent 3fc66a4 commit 8cdf1ec

File tree

7 files changed

+340
-345
lines changed

7 files changed

+340
-345
lines changed

‎src/blocks/Header/__stories__/Header.stories.tsx‎

Lines changed: 74 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ const VerticalOffsetTemplate: Story<HeaderBlockModel> = (args) => (
6565
</Fragment>
6666
);
6767

68-
const MediaTemplate: Story<HeaderBlockModel> = (args) => (
68+
const BackgroundTemplate: Story<HeaderBlockModel> = (args) => (
6969
<Fragment>
7070
<DefaultTemplate
7171
{...args}
@@ -77,20 +77,75 @@ const MediaTemplate: Story<HeaderBlockModel> = (args) => (
7777
title={data.media.content.video.title}
7878
background={data.media.content.video.background}
7979
/>
80+
</Fragment>
81+
);
82+
83+
const FullWithBackgroundTemplate: Story<HeaderBlockModel> = (args) => (
84+
<Fragment>
8085
<DefaultTemplate
8186
{...args}
82-
title={data.media.content.fullWidthBackground.title}
83-
background={data.media.content.fullWidthBackground.background}
87+
title={data.media.content.image.title}
88+
background={{
89+
light: {
90+
...data.media.content.image.background.light,
91+
fullWidth: true,
92+
},
93+
dark: {
94+
...data.media.content.image.background.dark,
95+
fullWidth: true,
96+
},
97+
}}
8498
/>
8599
<DefaultTemplate
86100
{...args}
87-
title={data.media.content.fullWidthMedia.title}
88-
background={data.media.content.fullWidthMedia.background}
101+
title={data.media.content.video.title}
102+
background={{
103+
light: {
104+
...data.media.content.video.background.light,
105+
fullWidth: true,
106+
},
107+
dark: {
108+
...data.media.content.video.background.dark,
109+
fullWidth: true,
110+
},
111+
}}
89112
/>
113+
</Fragment>
114+
);
115+
116+
const FullWidthMediaBackgroundTemplate: Story<HeaderBlockModel> = (args) => (
117+
<Fragment>
90118
<DefaultTemplate
91119
{...args}
92-
title={data.media.content.deviceSupport.title}
93-
background={data.media.content.deviceSupport.background}
120+
title={data.media.content.image.title}
121+
background={{
122+
light: {
123+
...data.media.content.image.background.light,
124+
fullWidth: true,
125+
fullWidthMedia: true,
126+
},
127+
dark: {
128+
...data.media.content.image.background.dark,
129+
fullWidth: true,
130+
fullWidthMedia: true,
131+
},
132+
}}
133+
/>
134+
<DefaultTemplate
135+
{...args}
136+
title={data.media.content.video.title}
137+
background={{
138+
light: {
139+
...data.media.content.video.background.light,
140+
fullWidth: true,
141+
fullWidthMedia: true,
142+
},
143+
dark: {
144+
...data.media.content.video.background.dark,
145+
fullWidth: true,
146+
fullWidthMedia: true,
147+
},
148+
}}
94149
/>
95150
</Fragment>
96151
);
@@ -117,7 +172,9 @@ export const Default = DefaultTemplate.bind({});
117172
export const Size = SizeTemplate.bind({});
118173
export const Image = ImageTemplate.bind({});
119174
export const VerticalOffset = VerticalOffsetTemplate.bind({});
120-
export const Media = MediaTemplate.bind({});
175+
export const Background = BackgroundTemplate.bind({});
176+
export const FullWithBackground = FullWithBackgroundTemplate.bind({});
177+
export const FullWidthMediaBackground = FullWidthMediaBackgroundTemplate.bind({});
121178
export const DarkTheme = DefaultTemplate.bind({});
122179
export const Breadcrumbs = BreadCrumbsTemplate.bind({});
123180

@@ -135,7 +192,15 @@ VerticalOffset.args = {
135192
...data.image.content,
136193
} as HeaderBlockPropsNoTitle;
137194

138-
Media.args = {
195+
Background.args = {
196+
...DefaultArgs,
197+
} as HeaderBlockPropsNoTitle;
198+
199+
FullWithBackground.args = {
200+
...DefaultArgs,
201+
} as HeaderBlockPropsNoTitle;
202+
203+
FullWidthMediaBackground.args = {
139204
...DefaultArgs,
140205
} as HeaderBlockPropsNoTitle;
141206

‎src/blocks/Header/__stories__/data.json‎

Lines changed: 19 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -72,11 +72,17 @@
7272
"title": "Block with image",
7373
"background": {
7474
"light": {
75-
"image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-bg-img_light.png",
75+
"image": {
76+
"desktop": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-bg-img_light.png",
77+
"mobile": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-bg_nopadding_4-12_light.png"
78+
},
7679
"color": "#EFF2F8"
7780
},
7881
"dark": {
79-
"image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-bg-img_dark.png",
82+
"image": {
83+
"desktop": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-bg-img_dark.png",
84+
"mobile": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-bg_nopadding_4-12_dark.png"
85+
},
8086
"color": "#262626"
8187
}
8288
}
@@ -85,7 +91,10 @@
8591
"title": "Block with video",
8692
"background": {
8793
"light": {
88-
"image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-bg-img_light.png",
94+
"image": {
95+
"desktop": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-bg-img_light.png",
96+
"mobile": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-bg_nopadding_4-12_light.png"
97+
},
8998
"video": {
9099
"src": [
91100
"https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-bg-video_light.webm",
@@ -96,75 +105,18 @@
96105
"color": "#EFF2F8"
97106
},
98107
"dark": {
99-
"image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-bg-img_dark.png",
100-
"color": "#262626"
101-
}
102-
}
103-
},
104-
"fullWidthBackground": {
105-
"title": "Block with full width background",
106-
"background": {
107-
"light": {
108-
"image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/main/main-visual/mobile.png",
109-
"video": {
110-
"src": [
111-
"https://storage.yandexcloud.net/cloud-www-assets/constructor/main/main-visual/main_video.webm",
112-
"https://storage.yandexcloud.net/cloud-www-assets/constructor/main/main-visual/main_video.ogv",
113-
"https://storage.yandexcloud.net/cloud-www-assets/constructor/main/main-visual/main_video.mp4",
114-
"https://storage.yandexcloud.net/cloud-www-assets/constructor/main/main-visual/mobile.png"
115-
]
108+
"image": {
109+
"desktop": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-bg-img_dark.png",
110+
"mobile": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-bg_nopadding_4-12_dark.png"
116111
},
117-
"color": "#EFF2F8",
118-
"fullWidth": true
119-
},
120-
"dark": {
121-
"image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-black.png",
122-
"color": "#262626",
123-
"fullWidth": true
124-
}
125-
}
126-
},
127-
"fullWidthMedia": {
128-
"title": "Block with full width media",
129-
"background": {
130-
"light": {
131-
"image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/main/main-visual/mobile.png",
132112
"video": {
133113
"src": [
134-
"https://storage.yandexcloud.net/cloud-www-assets/constructor/main/main-visual/main_video.webm",
135-
"https://storage.yandexcloud.net/cloud-www-assets/constructor/main/main-visual/main_video.ogv",
136-
"https://storage.yandexcloud.net/cloud-www-assets/constructor/main/main-visual/main_video.mp4",
137-
"https://storage.yandexcloud.net/cloud-www-assets/constructor/main/main-visual/mobile.png"
114+
"https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-bg-video_dark.webm",
115+
"https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-bg-video_dark.mp4",
116+
"https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-bg-video_dark.png"
138117
]
139118
},
140-
"fullWidthMedia": true,
141-
"fullWidth": true,
142-
"color": "#EFF2F8"
143-
},
144-
"dark": {
145-
"image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-black.png",
146-
"fullWidthMedia": true
147-
}
148-
}
149-
},
150-
"deviceSupport": {
151-
"title": "Block with devices support image",
152-
"background": {
153-
"light": {
154-
"image": {
155-
"desktop": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png",
156-
"mobile": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-black.png",
157-
"disableCompress": true,
158-
"alt": "Lorem"
159-
}
160-
},
161-
"dark": {
162-
"image": {
163-
"desktop": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-black.png",
164-
"mobile": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png",
165-
"disableCompress": true,
166-
"alt": "Lorem"
167-
}
119+
"color": "#262626"
168120
}
169121
}
170122
}

‎src/blocks/Icons/__stories__/data.json‎

Lines changed: 20 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,30 @@
22
"default": {
33
"content": {
44
"type": "icons-block",
5-
"size": "s",
65
"items": [
76
{
8-
"src": "https://storage.cloud-preprod.yandex.net/berdysheva-test/ydb-assets/twitter.svg",
9-
"text": "Twitter",
7+
"src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icons-link_1_64.svg",
8+
"text": "Lorem ipsum dolor sit amet",
109
"url": "#"
1110
},
1211
{
13-
"src": "https://storage.cloud-preprod.yandex.net/berdysheva-test/ydb-assets/twitter.svg",
14-
"text": "Twitter",
12+
"src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icons-link_2_64.svg",
13+
"text": "Lorem ipsum dolor sit amet",
1514
"url": "#"
1615
},
1716
{
18-
"src": "https://storage.cloud-preprod.yandex.net/berdysheva-test/ydb-assets/twitter.svg",
19-
"text": "Twitter",
17+
"src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icons-link_3_64.svg",
18+
"text": "Lorem ipsum dolor sit amet",
2019
"url": "#"
2120
},
2221
{
23-
"src": "https://storage.cloud-preprod.yandex.net/berdysheva-test/ydb-assets/twitter.svg",
24-
"text": "Twitter",
22+
"src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icons-link_4_64.svg",
23+
"text": "Lorem ipsum dolor sit amet",
2524
"url": "#"
2625
},
2726
{
28-
"src": "https://storage.cloud-preprod.yandex.net/berdysheva-test/ydb-assets/twitter.svg",
29-
"text": "Twitter",
30-
"url": "#"
31-
},
32-
{
33-
"src": "https://storage.cloud-preprod.yandex.net/berdysheva-test/ydb-assets/twitter.svg",
34-
"text": "Twitter",
35-
"url": "#"
36-
},
37-
{
38-
"src": "https://storage.cloud-preprod.yandex.net/berdysheva-test/ydb-assets/twitter.svg",
39-
"text": "Twitter",
27+
"src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icons-link_5_64.svg",
28+
"text": "Lorem ipsum dolor sit amet",
4029
"url": "#"
4130
}
4231
]
@@ -47,43 +36,28 @@
4736
"type": "icons-block",
4837
"items": [
4938
{
50-
"src": "https://storage.cloud-preprod.yandex.net/berdysheva-test/ydb-assets/telegram.svg",
51-
"text": "Telegram",
52-
"url": "#"
53-
},
54-
{
55-
"src": "https://storage.cloud-preprod.yandex.net/berdysheva-test/ydb-assets/slack.svg",
56-
"text": "Slack",
57-
"url": "#"
58-
},
59-
{
60-
"src": "https://storage.cloud-preprod.yandex.net/berdysheva-test/ydb-assets/git.svg",
61-
"text": "GitHub",
62-
"url": "#"
63-
},
64-
{
65-
"src": "https://storage.cloud-preprod.yandex.net/berdysheva-test/ydb-assets/youtube.svg",
66-
"text": "YouTube",
39+
"src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icons-link_1_64.svg",
40+
"text": "Lorem ipsum dolor sit amet",
6741
"url": "#"
6842
},
6943
{
70-
"src": "https://storage.cloud-preprod.yandex.net/berdysheva-test/ydb-assets/stack.svg",
71-
"text": "Stack Overflow",
44+
"src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icons-link_2_64.svg",
45+
"text": "Lorem ipsum dolor sit amet",
7246
"url": "#"
7347
},
7448
{
75-
"src": "https://storage.cloud-preprod.yandex.net/berdysheva-test/ydb-assets/twitter.svg",
76-
"text": "Twitter",
49+
"src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icons-link_3_64.svg",
50+
"text": "Lorem ipsum dolor sit amet",
7751
"url": "#"
7852
},
7953
{
80-
"src": "https://storage.cloud-preprod.yandex.net/berdysheva-test/ydb-assets/facebook.svg",
81-
"text": "Facebook",
54+
"src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icons-link_4_64.svg",
55+
"text": "Lorem ipsum dolor sit amet",
8256
"url": "#"
8357
},
8458
{
85-
"src": "https://storage.cloud-preprod.yandex.net/berdysheva-test/ydb-assets/rss.svg",
86-
"text": "RSS",
59+
"src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icons-link_5_64.svg",
60+
"text": "Lorem ipsum dolor sit amet",
8761
"url": "#"
8862
}
8963
]

0 commit comments

Comments
 (0)