Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat!: migrate to new slider, fix new slider styles (#978)
Browse files Browse the repository at this point in the history
* feat!: migrate to new slider

---------

Co-authored-by: Nik Tverd <nn.tverd@gmail.com>
Co-authored-by: gravity-ui-bot <111915794+gravity-ui-bot@users.noreply.github.com>
Co-authored-by: Sergei Bubeev <qradle@qradle-dev.vla.yp-c.yandex.net>
4 people authored Nov 27, 2024
1 parent 0f30842 commit 40bca43
Showing 91 changed files with 1,900 additions and 1,611 deletions.
2 changes: 2 additions & 0 deletions .storybook/stories/documentation/Blocks.mdx
Original file line number Diff line number Diff line change
@@ -49,6 +49,8 @@ _[Common field types](?id=documentation-types&viewMode=docs)_

## [Share](?path=/story/blocks-share--docs&viewMode=docs)

## [<s>SliderOld</s>](?path=/story/blocks-sliderold-deprecated--docs&viewMode=docs) (Deprecated, use Slider instead)

## [Slider](?path=/story/blocks-slider--docs&viewMode=docs)

## [Table](?path=/story/blocks-table--docs&viewMode=docs)
14 changes: 0 additions & 14 deletions src/blocks/HeaderSlider/HeaderSlider.scss
Original file line number Diff line number Diff line change
@@ -47,14 +47,6 @@ $block: '.#{$ns}header-slider-block';
}
}

@media (max-width: map-get($gridBreakpoints, 'md')) {
&.#{$ns}SliderBlock {
margin-left: -$indentXXXS;
padding-left: 0;
width: calc(100% + #{$indentXXXS});
}
}

@media (max-width: map-get($gridBreakpoints, 'sm')) {
&__item-content {
.#{$ns}header-block__content {
@@ -66,11 +58,5 @@ $block: '.#{$ns}header-slider-block';
padding-left: $indentXS + $indentXXXS;
}
}

.slick-track {
.slick-slide {
max-width: 100%;
}
}
}
}
2 changes: 1 addition & 1 deletion src/blocks/HeaderSlider/HeaderSlider.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React, {useContext} from 'react';

import {SliderBlock} from '../../blocks';
import {MobileContext} from '../../context/mobileContext';
import {HeaderSliderBlockProps, SliderType} from '../../models';
import {block} from '../../utils';
import Header from '../Header/Header';
import {SliderBlock} from '../index';

import './HeaderSlider.scss';

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions src/blocks/Media/__stories__/Media.stories.tsx
Original file line number Diff line number Diff line change
@@ -51,6 +51,19 @@ const DefaultTemplate: StoryFn<MediaBlockModel> = (args) => (
}),
links: data.common.links as LinkProps[],
},
{
...args,
media: {
light: {
...data.default.content.media.light,
fullscreen: true,
},
dark: {
...data.default.content.media.dark,
fullscreen: true,
},
},
},
],
}}
/>
35 changes: 19 additions & 16 deletions src/blocks/Slider/Arrow/Arrow.scss
Original file line number Diff line number Diff line change
@@ -15,40 +15,43 @@ $block: '.#{$ns}slider-block-arrow';

$root: &;

width: $sliderArrowSize;
height: $sliderArrowSize;
cursor: pointer;

&_type_left {
#{$root}__icon-wrapper {
transform: rotate(180deg);
}
margin-right: 16px;
}

&__button {
@include reset-button-style();
@include focusable();
}

&__inner {
@include shadow();
@extend %flex;

width: $sliderArrowSize;
height: $sliderArrowSize;

color: var(--g-color-text-secondary);
border-radius: 100%;
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 1s $ease-out-cubic;

@include focusable();
}
&_type_left {
#{$root}__icon-wrapper {
transform: rotate(180deg);
}
}

&:hover {
#{$root}__button {
&:hover {
color: var(--g-color-text-primary);
box-shadow: 0 2px 12px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
}

&_transparent {
background-color: transparent;
box-shadow: none;

&:hover {
box-shadow: none;
}
}
}

&__icon-wrapper {
36 changes: 24 additions & 12 deletions src/blocks/Slider/Arrow/Arrow.tsx
Original file line number Diff line number Diff line change
@@ -13,25 +13,37 @@ export type ArrowType = 'left' | 'right';

export interface ArrowProps {
type: ArrowType;
handleClick?: (direction: ArrowType) => void;
transparent?: boolean;
onClick?: () => void;
size?: number;
extraProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
}

const Arrow = ({type, handleClick, className, size = 16}: ArrowProps & ClassNameProps) => (
<div className={b({type}, className)}>
const Arrow = ({
type,
transparent,
onClick,
className,
size = 16,
extraProps,
}: ArrowProps & ClassNameProps) => (
<div className={b(null, className)}>
<button
className={b('button')}
onClick={() => handleClick && handleClick(type)}
onClick={onClick}
aria-label={i18n(`arrow-${type}`)}
{...extraProps}
>
<span className={b('icon-wrapper')}>
<ToggleArrow
size={size}
type={'horizontal'}
iconType="navigation"
className={b('icon')}
/>
</span>
<div className={b('inner', {type, transparent})}>
<span className={b('icon-wrapper')}>
<ToggleArrow
size={size}
type={'horizontal'}
iconType="navigation"
className={b('icon')}
/>
</span>
</div>
</button>
</div>
);
Loading

0 comments on commit 40bca43

Please sign in to comment.