feat!: version 6

.storybook/preview.tsx

@@ -15,6 +15,7 @@ import {Theme} from '../src';
 import {GlobalThemeController} from './theme/utils/global-theme-controller';
 
 import '../styles/styles.scss';
+import '@gravity-ui/uikit/styles/fonts.css';
 
 const withContextProvider: Decorator = (Story, context) => {
     const theme = context.globals.theme;

.storybook/stories/documentation/Blocks.mdx

@@ -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)

README.md

@@ -165,6 +165,12 @@ To use mixins and constructor style variables when creating custom blocks, add i
 @import '~@gravity-ui/page-constructor/styles/styles.scss';
 ```
 
+To use default font, add import in your file:
+
+```css
+@import '~@gravity-ui/page-constructor/styles/fonts.scss';
+```
+
 ### Loadable blocks
 
 It's sometimes necessary that a block renders itself based on data to be loaded. In this case, loadable blocks are used.

playwright/playwright/index.scss

@@ -1,2 +1,3 @@
 @import '../../styles/styles.scss';
+@import '../../styles/fonts.scss';
 @import '../../styles/storybook/index.scss';

src/blocks/HeaderSlider/HeaderSlider.scss

@@ -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%;
-            }
-        }
     }
 }

src/blocks/HeaderSlider/HeaderSlider.tsx

@@ -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';
 

src/blocks/Media/__stories__/Media.stories.tsx

@@ -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,
+                        },
+                    },
+                },
             ],
         }}
     />

src/blocks/Slider/Arrow/Arrow.scss

@@ -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 {

src/blocks/Slider/Arrow/Arrow.tsx

@@ -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>
 );