fix: support ContentList theme prop; pass theme prop from Content to ContentList (#1066)

Author: benax-se

src/components/ContentList/ContentList.scss

@@ -7,6 +7,17 @@ $iconSizeS: 20px;
 $iconSizeXS: 18px;
 $marginIconSizeS: 2px;
 $marginIconSizeL: 1px;
+$lightPrimary: var(--g-color-text-light-primary);
+$darkPrimary: var(--g-color-text-dark-primary);
+$darkSecondary: var(--g-color-text-dark-secondary);
+
+@mixin content-link($baseColor: $primary, $hoverColor: $secondary) {
+    color: $baseColor;
+    text-decoration: underline;
+    &:hover {
+        color: $hoverColor;
+    }
+}
 
 #{$block} {
     &_size_l {
@@ -84,6 +95,34 @@ $marginIconSizeL: 1px;
         }
     }
 
+    &_theme_light {
+        #{$block}__item {
+            *,
+            .yfm,
+            .yfm * {
+                color: $darkPrimary;
+            }
+
+            .yfm a {
+                @include content-link($darkPrimary, $darkSecondary);
+            }
+        }
+    }
+
+    &_theme_dark {
+        #{$block}__item {
+            *,
+            .yfm,
+            .yfm * {
+                color: $lightPrimary;
+            }
+
+            .yfm a {
+                @include content-link($lightPrimary, $lightSecondary);
+            }
+        }
+    }
+
     &__icon {
         display: block;
     }

src/components/ContentList/ContentList.tsx

@@ -24,11 +24,11 @@ function getHeadingLevel(size: ContentSize) {
     }
 }
 
-const ContentList = ({list, size = 'l', qa}: ContentListProps & QAProps) => {
+const ContentList = ({list, size = 'l', qa, theme}: ContentListProps & QAProps) => {
     const qaAttributes = getQaAttrubutes(qa, ['image', 'title', 'text']);
 
     return (
-        <div className={b({size})} data-qa={qa}>
+        <div className={b({size, theme})} data-qa={qa}>
             {list?.map((item) => {
                 const {icon, title, text} = item;
                 return (

src/sub-blocks/BackgroundCard/__snapshots__/BackgroundCard.visual.test.tsx-snapshots/BackgroundCard-render-stories-CardThemes-light-chromium-linux.png

@@ -19,6 +19,13 @@ const transformedContentList = data.common.list.map((item) => {
     };
 }) as ContentItemProps[];
 
+const transformedContentDarkList = data.common.darkList.map((item) => {
+    return {
+        ...item,
+        text: item?.text && yfmTransform(item.text),
+    };
+}) as ContentItemProps[];
+
 const getPaddingBottomTitle = (padding: string) =>
     data.paddings.title.replace('{{padding}}', padding);
 
@@ -78,7 +85,12 @@ const CardThemesTemplate: StoryFn<{items: BackgroundCardProps[]}> = (args) => (
     <div style={{display: 'flex'}}>
         {args.items.map((item, i) => (
             <div style={{maxWidth: '400px', padding: '0 8px'}} key={i}>
-                <BackgroundCard {...item} />
+                <BackgroundCard
+                    {...item}
+                    list={
+                        item.theme === 'dark' ? transformedContentDarkList : transformedContentList
+                    }
+                />
             </div>
         ))}
     </div>

src/sub-blocks/BackgroundCard/__snapshots__/BackgroundCard.visual.test.tsx-snapshots/BackgroundCard-render-stories-CardThemes-light-webkit-linux.png

@@ -35,6 +35,21 @@
         "title": "Lorem ipsum ipsum"
       }
     ],
+    "darkList": [
+      {
+        "icon": "/story-assets/icon_1_dark.svg",
+        "title": "Lorem ipsum",
+        "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation."
+      },
+      {
+        "icon": "/story-assets/icon_2_dark.svg",
+        "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation."
+      },
+      {
+        "icon": "/story-assets/icon_3_dark.svg",
+        "title": "Lorem ipsum ipsum"
+      }
+    ],
     "buttons": [
       {
         "text": "Button\r",

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

@@ -130,9 +130,6 @@ $darkSecondary: var(--g-color-text-dark-secondary);
             #{$block}__title *,
             #{$block}__text .yfm,
             #{$block}__text .yfm *,
-            #{$block}__list *,
-            #{$block}__list .yfm,
-            #{$block}__list .yfm *,
             #{$block}__links a {
                 color: $lightPrimary;
             }
@@ -148,8 +145,7 @@ $darkSecondary: var(--g-color-text-dark-secondary);
                 }
             }
 
-            #{$block}__text,
-            #{$block}__list {
+            #{$block}__text {
                 .yfm a {
                     @include content-link($lightPrimary, $lightSecondary);
                 }
@@ -167,9 +163,6 @@ $darkSecondary: var(--g-color-text-dark-secondary);
             #{$block}__title *,
             #{$block}__text .yfm,
             #{$block}__text .yfm *,
-            #{$block}__list *,
-            #{$block}__list .yfm,
-            #{$block}__list .yfm *,
             #{$block}__links a {
                 color: $darkPrimary;
             }
@@ -185,8 +178,7 @@ $darkSecondary: var(--g-color-text-dark-secondary);
                 }
             }
 
-            #{$block}__text,
-            #{$block}__list {
+            #{$block}__text {
                 .yfm a {
                     @include content-link($darkPrimary, $darkSecondary);
                 }

src/sub-blocks/BackgroundCard/__stories__/data.json

@@ -80,7 +80,7 @@ const Content = (props: ContentProps) => {
             )}
             {list?.length ? (
                 <div className={b('list')}>
-                    <ContentList list={list} size={size} qa={qaAttributes.list} />
+                    <ContentList list={list} size={size} qa={qaAttributes.list} theme={theme} />
                 </div>
             ) : null}
             {additionalInfo && (