From 0f1eb62a2cd068fa82b53d4f1f21c10f32a72592 Mon Sep 17 00:00:00 2001 From: Vlad Date: Wed, 17 Jan 2024 12:14:55 +0100 Subject: [PATCH] fix: asset path in new stories (#777) * fix: asset path in new stories * fix: refactor card-layout storybook --------- Co-authored-by: Vladislav Kharitonov Co-authored-by: qradle --- .../story-assets/content-bg-img_light.png | Bin 0 -> 13357 bytes .../__stories__/CardLayout.stories.tsx | 58 +++--------------- src/blocks/CardLayout/__stories__/data.json | 51 ++++++++++++++- 3 files changed, 56 insertions(+), 53 deletions(-) create mode 100644 .storybook/public/story-assets/content-bg-img_light.png diff --git a/.storybook/public/story-assets/content-bg-img_light.png b/.storybook/public/story-assets/content-bg-img_light.png new file mode 100644 index 0000000000000000000000000000000000000000..0415ca3ab04c1c978e1d8e4de9f1743debf97392 GIT binary patch literal 13357 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

= (args) => ( children: [ { ...data.cards.priceCard, - buttons: [ - { - text: 'Button', - url: 'https://example.com', - width: 'max', - theme: 'outlined', - }, - ], + buttons: [data.buttons.outlined], }, { ...data.cards.priceCard, - buttons: [ - { - text: 'Button', - url: 'https://example.com', - width: 'max', - theme: 'action', - }, - ], + buttons: [data.buttons.action], }, { ...data.cards.priceCard, - buttons: [ - { - text: 'Button', - url: 'https://example.com', - width: 'max', - theme: 'monochrome', - }, - ], + buttons: [data.buttons.monochrome], }, ], }, @@ -168,47 +147,26 @@ const WithBackgroundTemplate: StoryFn = (args) => ( blocks: [ { ...args, - background: { - src: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/content-bg-img_light.png', - disableCompress: true, - }, + background: data.backgrounds.image, children: createCardArray(8, data.cards.basicCard), }, { ...args, title: 'Card layout with background color (basic cards)', - background: { - style: { - backgroundColor: '#EEF2F8', - }, - }, + background: data.backgrounds.backgroundColor, children: createCardArray(4, data.cards.basicCard), }, { ...args, - background: { - border: 'shadow', - style: { - backgroundColor: '#7CCEA0', - }, - }, + background: data.backgrounds.backgroundColorAndShadow, title: 'Card layout with background color and shadow (layout items)', - description: - 'Three cards in a row on the desktop, three cards in a row on a tablet, one card in a row on a mobile phone.', - colSizes: { - all: 12, - sm: 4, - md: 4, - }, + ...data.colSizes.threeOne, children: createCardArray(3, data.cards.layoutItem), }, { ...args, title: 'Card layout with background image (price cards)', - background: { - src: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/content-bg-img_light.png', - disableCompress: true, - }, + background: data.backgrounds.image, children: createCardArray(4, data.cards.priceCard), }, ], diff --git a/src/blocks/CardLayout/__stories__/data.json b/src/blocks/CardLayout/__stories__/data.json index 912d80bbc..1bd2f2899 100644 --- a/src/blocks/CardLayout/__stories__/data.json +++ b/src/blocks/CardLayout/__stories__/data.json @@ -4,7 +4,7 @@ "type": "basic-card", "title": "Tell a story and build a narrative", "text": "We are all storytellers. Stories are a powerful way to communicate ideas and share information. The right story can lead to a better understanding of a situation, make us laugh, or even inspire us to do something in the future.", - "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg" + "icon": "/story-assets/icon_1_light.svg" }, "layoutItem": { "type": "layout-item", @@ -22,12 +22,12 @@ "text": "We are all storytellers. Stories are a powerful way to communicate ideas and share information. The right story can lead to a better understanding of a situation, make us laugh, or even inspire us to do something in the future.", "background": { "light": { - "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-bg_nopadding_4-12_light.png", + "src": "/story-assets/img-bg_nopadding_4-12_light.png", "alt": "Lorem ipsumt", "disableCompress": true }, "dark": { - "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-bg_nopadding_4-12_dark.png", + "src": "/story-assets/img-bg_nopadding_4-12_dark.png", "alt": "Lorem ipsumt" } } @@ -45,6 +45,43 @@ ] } }, + "buttons": { + "outlined": { + "text": "Button", + "url": "https://example.com", + "width": "max", + "theme": "outlined" + }, + "action": { + "text": "Button", + "url": "https://example.com", + "width": "max", + "theme": "action" + }, + "monochrome": { + "text": "Button", + "url": "https://example.com", + "width": "max", + "theme": "monochrome" + } + }, + "backgrounds": { + "image": { + "src": "/story-assets/content-bg-img_light.png", + "disableCompress": true + }, + "backgroundColor": { + "style": { + "backgroundColor": "#EEF2F8" + } + }, + "backgroundColorAndShadow": { + "border": "shadow", + "style": { + "backgroundColor": "#7CCEA0" + } + } + }, "default": { "content": { "type": "card-layout-block", @@ -86,6 +123,14 @@ "colSizes": { "all": 6 } + }, + "threeOne": { + "description": "Three cards in a row on the desktop, three cards in a row on a tablet, one card in a row on a mobile phone.", + "colSizes": { + "all": 12, + "sm": 4, + "md": 4 + } } }, "withBackground": {