From 50d5eafe10594e8394f6efa86ab66c0f2e46dffa Mon Sep 17 00:00:00 2001 From: berdysheva Date: Thu, 13 Oct 2022 15:41:40 +0300 Subject: [PATCH 1/3] fix(Content): ul li color in dark theme --- .../__stories__/BackgroundCard.stories.tsx | 60 ++++++- .../BackgroundCard/__stories__/data.json | 156 +----------------- src/sub-blocks/Content/Content.scss | 8 +- 3 files changed, 58 insertions(+), 166 deletions(-) diff --git a/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx b/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx index 1ffa4b1c6..990dba2a9 100644 --- a/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx +++ b/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx @@ -1,8 +1,9 @@ import {Meta, Story} from '@storybook/react/types-6-0'; import React from 'react'; +import yfm from '@doc-tools/transform'; import BackgroundCard from '../BackgroundCard'; -import {BackgroundCardModel, BackgroundCardProps} from '../../../models'; +import {BackgroundCardProps} from '../../../models'; import {CARDS, COMPONENTS} from '../../../demo/constants'; import data from './data.json'; @@ -46,7 +47,15 @@ const CardThemesTemplate: Story = (args) => (
- +
@@ -62,10 +71,43 @@ export const BorderLine = DefaultTemplate.bind({}); export const BackgroundColor = DefaultTemplate.bind({}); export const WithTheme = DefaultTemplate.bind({}); -Default.args = data.default.content as BackgroundCardModel; -WithBackgroundImage.args = data.withBackgroundImage.content as BackgroundCardModel; -Paddings.args = data.paddings.content as BackgroundCardModel; -CardThemes.args = data.cardThemes.content as BackgroundCardModel; -BorderLine.args = data.borderLine.content as BackgroundCardModel; -BackgroundColor.args = data.backgroundColor.content as BackgroundCardModel; -WithTheme.args = data.withTheme.content as BackgroundCardModel; +const DefaultArgs = { + ...data.default.content, + text: yfm(data.default.content.text).result.html, + additionalInfo: yfm(data.default.content.additionalInfo).result.html, +}; + +Default.args = { + ...DefaultArgs, +} as BackgroundCardProps; + +WithBackgroundImage.args = { + ...DefaultArgs, + ...data.withBackgroundImage.content, +} as BackgroundCardProps; + +Paddings.args = { + ...DefaultArgs, + ...data.withBackgroundImage.content, +} as BackgroundCardProps; + +CardThemes.args = { + ...DefaultArgs, + ...data.withBackgroundImage.content, +} as BackgroundCardProps; + +BorderLine.args = { + ...DefaultArgs, + ...data.borderLine.content, + ...data.withBackgroundImage.content, +} as BackgroundCardProps; + +BackgroundColor.args = { + ...DefaultArgs, + ...data.backgroundColor.content, +} as BackgroundCardProps; + +WithTheme.args = { + ...DefaultArgs, + ...data.withTheme.content, +} as BackgroundCardProps; diff --git a/src/sub-blocks/BackgroundCard/__stories__/data.json b/src/sub-blocks/BackgroundCard/__stories__/data.json index 769b311e8..0a5544c68 100644 --- a/src/sub-blocks/BackgroundCard/__stories__/data.json +++ b/src/sub-blocks/BackgroundCard/__stories__/data.json @@ -33,9 +33,8 @@ "content": { "url": "#", "title": "Lorem ipsumt", - "text": "

Lorem ipsum dolor sit amet that consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", - "additionalInfo": "

Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", - "paddingBottom": "s", + "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", + "additionalInfo": "Duis aute irure dolor in [reprehenderit](https://example.com) n voluptate velit esse cillum dolore eu fugiat nulla pariatur.", "links": [ { "url": "#", @@ -60,65 +59,6 @@ }, "withBackgroundImage": { "content": { - "url": "#", - "title": "Lorem ipsumt", - "text": "

Lorem ipsum dolor sit amet that consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", - "additionalInfo": "

Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", - "paddingBottom": "s", - "links": [ - { - "url": "#", - "text": "Link", - "theme": "normal", - "arrow": true - } - ], - "buttons": [ - { - "text": "Button\r", - "theme": "action", - "url": "https://example.com" - }, - { - "text": "Button", - "theme": "outlined", - "url": "#" - } - ], - "background": { - "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png", - "alt": "Lorem ipsumt", - "disableCompress": true - } - } - }, - "cardThemes": { - "content": { - "url": "#", - "title": "Lorem ipsumt", - "text": "

Lorem ipsum dolor sit amet that consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", - "additionalInfo": "

Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", - "paddingBottom": "s", - "links": [ - { - "url": "#", - "text": "Link", - "theme": "normal", - "arrow": true - } - ], - "buttons": [ - { - "text": "Button\r", - "theme": "action", - "url": "https://example.com" - }, - { - "text": "Button", - "theme": "outlined", - "url": "#" - } - ], "background": { "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png", "alt": "Lorem ipsumt", @@ -128,67 +68,11 @@ }, "borderLine": { "content": { - "url": "#", - "title": "Lorem ipsumt", - "text": "

Lorem ipsum dolor sit amet that consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", - "additionalInfo": "

Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", - "paddingBottom": "s", - "links": [ - { - "url": "#", - "text": "Link", - "theme": "normal", - "arrow": true - } - ], - "buttons": [ - { - "text": "Button\r", - "theme": "action", - "url": "https://example.com" - }, - { - "text": "Button", - "theme": "outlined", - "url": "#" - } - ], - "background": { - "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png", - "alt": "Lorem ipsumt", - "disableCompress": true - }, "border": "line" } }, "withTheme": { "content": { - "type": "background-card", - "url": "#", - "title": "Lorem ipsumt", - "text": "

Lorem ipsum dolor sit amet that consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", - "additionalInfo": "

Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", - "paddingBottom": "s", - "links": [ - { - "url": "#", - "text": "Link", - "theme": "normal", - "arrow": true - } - ], - "buttons": [ - { - "text": "Button\r", - "theme": "action", - "url": "https://example.com" - }, - { - "text": "Button", - "theme": "outlined", - "url": "#" - } - ], "background": { "light": { "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png", @@ -196,45 +80,11 @@ "disableCompress": true }, "dark": { - "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-white.png", + "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-black.png", "alt": "Lorem ipsumt", "disableCompress": true } } } - }, - "paddings": { - "content": { - "url": "#", - "title": "Lorem ipsumt", - "text": "

Lorem ipsum dolor sit amet that consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", - "additionalInfo": "

Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", - "paddingBottom": "s", - "links": [ - { - "url": "#", - "text": "Link", - "theme": "normal", - "arrow": true - } - ], - "buttons": [ - { - "text": "Button\r", - "theme": "action", - "url": "https://example.com" - }, - { - "text": "Button", - "theme": "outlined", - "url": "#" - } - ], - "background": { - "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png", - "alt": "Lorem ipsumt", - "disableCompress": true - } - } } } diff --git a/src/sub-blocks/Content/Content.scss b/src/sub-blocks/Content/Content.scss index 3232915dc..9eb7da4a1 100644 --- a/src/sub-blocks/Content/Content.scss +++ b/src/sub-blocks/Content/Content.scss @@ -120,14 +120,14 @@ $darkSecondary: var(--yc-color-text-dark-secondary); &_dark { #{$block}__title, #{$block}__text .yfm, - #{$block}__text .yfm > *, + #{$block}__text .yfm *, #{$block}__link a { color: $lightPrimary; } #{$block}__notice { .yfm, - .yfm > * { + .yfm * { color: $lightSecondary; } @@ -153,14 +153,14 @@ $darkSecondary: var(--yc-color-text-dark-secondary); &_light { #{$block}__title, #{$block}__text .yfm, - #{$block}__text .yfm > *, + #{$block}__text .yfm *, #{$block}__link a { color: $darkPrimary; } #{$block}__notice { .yfm, - .yfm > * { + .yfm * { color: $darkSecondary; } From b6a9205e0cbadc1961c70c7be1fd40a3c371cf31 Mon Sep 17 00:00:00 2001 From: berdysheva Date: Thu, 13 Oct 2022 19:41:59 +0300 Subject: [PATCH 2/3] fix: fix storybook data --- package.json | 3 + .../__stories__/BackgroundCard.stories.tsx | 49 ++++++------ .../BackgroundCard/__stories__/data.json | 75 ++++++++++++------- 3 files changed, 71 insertions(+), 56 deletions(-) diff --git a/package.json b/package.json index 4d4d90789..738db6f99 100644 --- a/package.json +++ b/package.json @@ -121,5 +121,8 @@ "*.{json,yaml,yml,md}": [ "prettier --write" ] + }, + "publishConfig": { + "tag": "alpha" } } diff --git a/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx b/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx index 990dba2a9..a9cee5a36 100644 --- a/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx +++ b/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx @@ -8,6 +8,9 @@ import {CARDS, COMPONENTS} from '../../../demo/constants'; import data from './data.json'; +const getPaddingBottomTitle = (padding: string) => + data.paddings.title.replace('{{padding}}', padding); + export default { component: BackgroundCard, title: `${COMPONENTS}/${CARDS}/BackgroundCard`, @@ -27,46 +30,36 @@ const DefaultTemplate: Story = (args) => ( const PaddingsTemplate: Story = (args) => (
- +
- +
- +
- +
); -const CardThemesTemplate: Story = (args) => ( -
-
- -
-
- +const CardThemesTemplate: Story = (args) => { + return ( +
+ {Object.values(args).map((item, i) => ( +
+ +
+ ))}
-
- -
-
-); + ); +}; export const Default = DefaultTemplate.bind({}); export const WithBackgroundImage = DefaultTemplate.bind({}); export const Paddings = PaddingsTemplate.bind({}); -export const CardThemes = CardThemesTemplate.bind({}); +export const CardThemes = CardThemesTemplate.bind([]); export const BorderLine = DefaultTemplate.bind({}); export const BackgroundColor = DefaultTemplate.bind({}); export const WithTheme = DefaultTemplate.bind({}); @@ -91,10 +84,10 @@ Paddings.args = { ...data.withBackgroundImage.content, } as BackgroundCardProps; -CardThemes.args = { +CardThemes.args = [...data.cardThemes.content].map((item) => ({ ...DefaultArgs, - ...data.withBackgroundImage.content, -} as BackgroundCardProps; + ...item, +})) as BackgroundCardProps[]; BorderLine.args = { ...DefaultArgs, diff --git a/src/sub-blocks/BackgroundCard/__stories__/data.json b/src/sub-blocks/BackgroundCard/__stories__/data.json index 0a5544c68..2890407f3 100644 --- a/src/sub-blocks/BackgroundCard/__stories__/data.json +++ b/src/sub-blocks/BackgroundCard/__stories__/data.json @@ -1,43 +1,18 @@ { "backgroundColor": { "content": { - "url": "#", - "title": "Lorem ipsumt", - "text": "

Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", - "additionalInfo": "

Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", - "paddingBottom": "s", - "links": [ - { - "url": "#", - "text": "Link", - "theme": "normal", - "arrow": true - } - ], - "buttons": [ - { - "text": "Button\r", - "theme": "action", - "url": "https://example.com" - }, - { - "text": "Button", - "theme": "outlined", - "url": "#" - } - ], "backgroundColor": "#7ccea0" } }, "default": { "content": { - "url": "#", + "url": "https://example.com", "title": "Lorem ipsumt", "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", "additionalInfo": "Duis aute irure dolor in [reprehenderit](https://example.com) n voluptate velit esse cillum dolore eu fugiat nulla pariatur.", "links": [ { - "url": "#", + "url": "https://example.com", "text": "Link", "theme": "normal", "arrow": true @@ -52,7 +27,7 @@ { "text": "Button", "theme": "outlined", - "url": "#" + "url": "https://example.com" } ] } @@ -71,6 +46,50 @@ "border": "line" } }, + "paddings": { + "title": "Padding Bottom = {{padding}}" + }, + "cardThemes": { + "content": [ + { + "title": "Default theme", + "theme": "default" + }, + { + "title": "Dark Monochrome theme", + "theme": "dark", + "background": "src: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-black.png'", + "buttons": [ + { + "text": "Button", + "theme": "normal-contrast", + "url": "https://example.com" + }, + { + "text": "Button", + "theme": "outlined-contrast", + "url": "https://example.com" + } + ] + }, + { + "title": "Light Monochrome theme", + "theme": "light", + "buttons": [ + { + "text": "Button", + "theme": "monochrome", + "url": "https://example.com" + }, + { + "text": "Button", + "theme": "normal", + "url": "https://example.com" + } + ] + } + ] + }, "withTheme": { "content": { "background": { From ad4f3c9488266a8cf037fcd4e00460260d7bd6f7 Mon Sep 17 00:00:00 2001 From: berdysheva Date: Fri, 14 Oct 2022 15:37:20 +0300 Subject: [PATCH 3/3] fix: remove unnecessary tag --- package.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/package.json b/package.json index 738db6f99..4d4d90789 100644 --- a/package.json +++ b/package.json @@ -121,8 +121,5 @@ "*.{json,yaml,yml,md}": [ "prettier --write" ] - }, - "publishConfig": { - "tag": "alpha" } }