Feat/slider new (#959)

* feat: add new slider to unstable blocks

Author: qradle-yndx

package-lock.json

@@ -106,6 +106,7 @@
     "react-waypoint": "^10.1.0",
     "sanitize-html": "2.12.1",
     "snakecase-keys": "^5.1.0",
+    "swiper": "^6.8.4",
     "typograf": "^6.14.0",
     "utility-types": "^3.10.0",
     "uuid": "^9.0.0"

package.json

@@ -0,0 +1,60 @@
+@import '../../../../styles/mixins.scss';
+@import '../../../../styles/variables.scss';
+
+$block: '.#{$ns}slider-new-block-arrow';
+
+%flex {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#{$block} {
+    @include desktop-tablet-only();
+    @extend %flex;
+
+    $root: &;
+
+    width: $sliderArrowSize;
+    height: $sliderArrowSize;
+    cursor: pointer;
+
+    &_type_left {
+        #{$root}__icon-wrapper {
+            transform: rotate(180deg);
+        }
+    }
+
+    &__button {
+        @include reset-button-style();
+        @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 0.3s $ease-out-cubic;
+
+        @include focusable();
+    }
+
+    &:hover {
+        #{$root}__button {
+            color: var(--g-color-text-primary);
+            box-shadow: 0 2px 12px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
+        }
+    }
+
+    &__icon-wrapper {
+        @extend %flex;
+    }
+
+    &__icon {
+        position: relative;
+    }
+}

src/blocks/SliderNew/Arrow/Arrow.scss

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import ToggleArrow from '../../../components/ToggleArrow/ToggleArrow';
+import {ClassNameProps} from '../../../models';
+import {block} from '../../../utils';
+import {i18n} from '../i18n';
+
+import './Arrow.scss';
+
+const b = block('slider-new-block-arrow');
+
+export type ArrowType = 'left' | 'right';
+
+export interface ArrowProps {
+    type: ArrowType;
+    onClick?: () => void;
+    size?: number;
+}
+
+const Arrow = ({type, onClick, className, size = 16}: ArrowProps & ClassNameProps) => (
+    <div className={b({type}, className)}>
+        <button className={b('button')} onClick={onClick} aria-label={i18n(`arrow-${type}`)}>
+            <span className={b('icon-wrapper')}>
+                <ToggleArrow
+                    size={size}
+                    type={'horizontal'}
+                    iconType="navigation"
+                    className={b('icon')}
+                />
+            </span>
+        </button>
+    </div>
+);
+
+export default Arrow;