From 8d3b16dbb6ba9961c599af765648f22703dec7c4 Mon Sep 17 00:00:00 2001 From: Nikita Gorin <36075690+NikitaCG@users.noreply.github.com> Date: Mon, 16 Sep 2024 16:44:21 +0300 Subject: [PATCH] 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 --- src/blocks/Header/Header.scss | 6 ++ src/blocks/Header/Header.tsx | 3 +- .../__stories__/HeaderSlider.stories.tsx | 7 +++ src/blocks/HeaderSlider/__stories__/data.json | 57 +++++++++++++++++++ src/blocks/Slider/Arrow/Arrow.scss | 2 +- src/blocks/Slider/Slider.scss | 30 ++++++++++ 6 files changed, 103 insertions(+), 2 deletions(-) diff --git a/src/blocks/Header/Header.scss b/src/blocks/Header/Header.scss index 3fc2665e3..796ab7edd 100644 --- 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 index 5b7677384..27576b749 100644 --- a/src/blocks/Header/Header.tsx +++ b/src/blocks/Header/Header.tsx @@ -107,6 +107,7 @@ export const HeaderBlock = (props: React.PropsWithChildren ['has-media']: hasRightSideImage, ['full-width']: fullWidth, ['media-view']: mediaView, + ['controls-view']: textTheme, }, className, )} @@ -142,7 +143,7 @@ export const HeaderBlock = (props: React.PropsWithChildren {renderTitle ? renderTitle(title) : {title}} {description && ( -
+
= (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 index 0545ed64c..8c32715e5 100644 --- 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 index 00656852f..617474719 100644 --- 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 index f21182adc..3adb743ad 100644 --- 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;