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;