feat: header slider support controls change theme (#1015)

* feat: header slider support controls change theme * feat: header slider support controls change theme: add auto play story
gravity-ui · Sep 16, 2024 · 8d3b16d · 8d3b16d
1 parent d9d26b1
commit 8d3b16d
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 2 deletions.
diff --git a/src/blocks/Header/Header.scss b/src/blocks/Header/Header.scss
@@ -30,6 +30,12 @@ $backgroundWidth: 1440px;
             #{$block}__overtitle {
                 color: var(--g-color-text-light-primary);
             }
+
+            #{$block}__description {
+                .yfm {
+                    color: var(--g-color-text-light-primary);
+                }
+            }
         }
 
         &_vertical-offset {

diff --git a/src/blocks/Header/Header.tsx b/src/blocks/Header/Header.tsx
@@ -107,6 +107,7 @@ export const HeaderBlock = (props: React.PropsWithChildren<HeaderBlockFullProps>
                     ['has-media']: hasRightSideImage,
                     ['full-width']: fullWidth,
                     ['media-view']: mediaView,
+                    ['controls-view']: textTheme,
                 },
                 className,
             )}
@@ -142,7 +143,7 @@ export const HeaderBlock = (props: React.PropsWithChildren<HeaderBlockFullProps>
                                         {renderTitle ? renderTitle(title) : <HTML>{title}</HTML>}
                                     </h1>
                                     {description && (
-                                        <div className={b('description')}>
+                                        <div className={b('description', {theme: textTheme})}>
                                             <YFMWrapper
                                                 content={description}
                                                 modifiers={{

diff --git a/src/blocks/HeaderSlider/__stories__/HeaderSlider.stories.tsx b/src/blocks/HeaderSlider/__stories__/HeaderSlider.stories.tsx
@@ -32,9 +32,16 @@ const AutoPlayTemplate: StoryFn<HeaderSliderBlockModel> = (args) => (
 
 export const Default = DefaultTemplate.bind({});
 export const AutoPlay = AutoPlayTemplate.bind({});
+export const WithDifferentSlidesThemes = DefaultTemplate.bind({});
+export const WithDifferentSlidesThemesAutoPlay = AutoPlayTemplate.bind({});
 
 Default.args = data.default.content as HeaderSliderBlockProps;
+WithDifferentSlidesThemes.args = data.withDifferentSlidesTheme.content as HeaderSliderBlockProps;
 AutoPlay.args = {
     ...data.autoPlay.content,
     items: data.default.content.items,
 } as HeaderSliderBlockProps;
+WithDifferentSlidesThemesAutoPlay.args = {
+    ...data.autoPlay.content,
+    items: data.withDifferentSlidesTheme.content.items,
+} as HeaderSliderBlockProps;
diff --git a/src/blocks/HeaderSlider/__stories__/data.json b/src/blocks/HeaderSlider/__stories__/data.json
@@ -76,5 +76,62 @@
         }
       ]
     }
+  },
+  "withDifferentSlidesTheme": {
+    "content": {
+      "dots": true,
+      "randomOrder": false,
+      "adaptive": true,
+      "type": "header-slider-block",
+      "arrows": true,
+      "items": [
+        {
+          "theme": "light",
+          "title": "Lorem ipsum dolor sit amet",
+          "description": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident",
+          "width": "s",
+          "background": {
+            "image": "/story-assets/header-bg-img_light.png",
+            "color": "#EFF2F8",
+            "fullWidth": true
+          },
+          "buttons": [
+            {
+              "text": "Button\r",
+              "theme": "action",
+              "url": "https://example.com"
+            },
+            {
+              "text": "Buttom",
+              "theme": "outlined",
+              "url": "https://example.com"
+            }
+          ]
+        },
+        {
+          "theme": "dark",
+          "title": "Lorem ipsum dolor sit amet",
+          "description": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident",
+          "width": "s",
+          "background": {
+            "image": "/story-assets/header-bg-img_dark.png",
+            "color": "#262626",
+            "fullWidth": true
+          },
+          "buttons": [
+            {
+              "text": "Button\r",
+              "theme": "action",
+              "url": "https://example.com"
+            },
+            {
+              "text": "Buttom",
+              "theme": "normal-contrast",
+              "url": "https://example.com"
+            }
+          ]
+        }
+      ]
+    }
   }
 }
diff --git a/src/blocks/Slider/Arrow/Arrow.scss b/src/blocks/Slider/Arrow/Arrow.scss
@@ -39,7 +39,7 @@ $block: '.#{$ns}slider-block-arrow';
         background-color: var(--g-color-base-background);
         box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
 
-        transition: box-shadow 0.3s $ease-out-cubic, color 0.3s $ease-out-cubic;
+        transition: box-shadow 0.3s $ease-out-cubic, color 1s $ease-out-cubic;
 
         @include focusable();
     }

diff --git a/src/blocks/Slider/Slider.scss b/src/blocks/Slider/Slider.scss
@@ -107,6 +107,8 @@ $block: '.#{$ns}SliderBlock';
         background-color: var(--g-color-line-generic-accent);
         cursor: pointer;
 
+        transition: background-color 1s;
+
         &:hover {
             background-color: var(--g-color-line-generic-accent-hover);
         }
@@ -268,6 +270,34 @@ $block: '.#{$ns}SliderBlock';
             }
         }
 
+        &:has(.slick-active .#{$ns}header-block_controls-view_light) {
+            .#{$ns}slider-block-arrow__button {
+                color: var(--g-color-text-dark-primary);
+            }
+
+            .#{$ns}SliderBlock__dot {
+                background-color: var(--g-color-private-black-150);
+
+                &_active {
+                    background-color: var(--g-color-private-black-300);
+                }
+            }
+        }
+
+        &:has(.slick-active .#{$ns}header-block_controls-view_dark) {
+            .#{$ns}slider-block-arrow__button {
+                color: var(--g-color-text-light-primary);
+            }
+
+            .#{$ns}SliderBlock__dot {
+                background-color: var(--g-color-private-white-150);
+
+                &_active {
+                    background-color: var(--g-color-private-white-300);
+                }
+            }
+        }
+
         .slick-slide {
             padding: 0;