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

NikitaCG · web-flow · commit 8d3b16dbb6ba · 2024-09-16T16:44:21.000+03:00
* feat: header slider support controls change theme

* feat: header slider support controls change theme: add auto play story
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;
 

Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,12 @@ $backgroundWidth: 1440px;`
`30`	`30`	`#{$block}__overtitle {`
`31`	`31`	`color: var(--g-color-text-light-primary);`
`32`	`32`	`}`
	`33`	`+`
	`34`	`+ #{$block}__description {`
	`35`	`+ .yfm {`
	`36`	`+ color: var(--g-color-text-light-primary);`
	`37`	`+ }`
	`38`	`+ }`
`33`	`39`	`}`
`34`	`40`
`35`	`41`	`&_vertical-offset {`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ $block: '.#{$ns}slider-block-arrow';`
`39`	`39`	`background-color: var(--g-color-base-background);`
`40`	`40`	`box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);`
`41`	`41`
`42`		`- transition: box-shadow 0.3s $ease-out-cubic, color 0.3s $ease-out-cubic;`
	`42`	`+ transition: box-shadow 0.3s $ease-out-cubic, color 1s $ease-out-cubic;`
`43`	`43`
`44`	`44`	`@include focusable();`
`45`	`45`	`}`