fix(Content): ul li color in dark theme (#30)

* fix(Content): ul li color in dark theme
gravity-ui · Oct 14, 2022 · 8e94579 · 8e94579
1 parent 56a3380
commit 8e94579
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 210 deletions.
diff --git a/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx b/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx
@@ -1,12 +1,16 @@
 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';
 
+const getPaddingBottomTitle = (padding: string) =>
+    data.paddings.title.replace('{{padding}}', padding);
+
 export default {
     component: BackgroundCard,
     title: `${COMPONENTS}/${CARDS}/BackgroundCard`,
@@ -26,46 +30,77 @@ const DefaultTemplate: Story<BackgroundCardProps> = (args) => (
 const PaddingsTemplate: Story<BackgroundCardProps> = (args) => (
     <div style={{display: 'flex'}}>
         <div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} title="paddingBottom = s" paddingBottom="s" />
+            <BackgroundCard {...args} title={getPaddingBottomTitle('S')} paddingBottom="s" />
         </div>
         <div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} title="paddingBottom = m" paddingBottom="m" />
+            <BackgroundCard {...args} title={getPaddingBottomTitle('M')} paddingBottom="m" />
         </div>
         <div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} title="paddingBottom = l" paddingBottom="l" />
+            <BackgroundCard {...args} title={getPaddingBottomTitle('L')} paddingBottom="l" />
         </div>
         <div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} title="paddingBottom = xl" paddingBottom="xl" />
+            <BackgroundCard {...args} title={getPaddingBottomTitle('XL')} paddingBottom="xl" />
         </div>
     </div>
 );
 
-const CardThemesTemplate: Story<BackgroundCardProps> = (args) => (
-    <div style={{display: 'flex'}}>
-        <div style={{maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} title="Тема по умолчанию = s" theme="default" />
-        </div>
-        <div style={{maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} title="Темная тема = m" theme="dark" />
-        </div>
-        <div style={{maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} title="Светлая тема = l" theme="light" />
+const CardThemesTemplate: Story<BackgroundCardProps[]> = (args) => {
+    return (
+        <div style={{display: 'flex'}}>
+            {Object.values(args).map((item, i) => (
+                <div style={{maxWidth: '400px', padding: '0 8px'}} key={i}>
+                    <BackgroundCard {...item} />
+                </div>
+            ))}
         </div>
-    </div>
-);
+    );
+};
 
 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({});
 
-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 = [...data.cardThemes.content].map((item) => ({
+    ...DefaultArgs,
+    ...item,
+})) 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;