@gravity-ui/page-constructor 5.27.1-alpha.1 → 5.27.1-alpha.2

package/build/cjs/blocks/HeaderSlider/HeaderSlider.js

@@ -3,18 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderSliderBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const blocks_1 = require("../../blocks");
 const mobileContext_1 = require("../../context/mobileContext");
 const models_1 = require("../../models");
 const utils_1 = require("../../utils");
 const Header_1 = tslib_1.__importDefault(require("../Header/Header"));
-const unstable_1 = require("../unstable");
 const b = (0, utils_1.block)('header-slider-block');
 const HeaderSliderBlock = (_a) => {
     var { items, arrows } = _a, props = tslib_1.__rest(_a, ["items", "arrows"]);
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const showArrows = isMobile ? false : arrows;
     return (react_1.default.createElement("div", { className: b('wrapper'), "data-qa": "header-slider" },
-        react_1.default.createElement(unstable_1.SliderNewBlock, Object.assign({}, props, { arrows: showArrows, slidesToShow: 1, type: models_1.SliderType.HeaderCard, animated: false, blockClassName: b(), arrowSize: 20 }), items.map((item, index) => (react_1.default.createElement("div", { key: index, className: b('item'), "data-qa": `header-slider-item-${index + 1}` },
+        react_1.default.createElement(blocks_1.SliderBlock, Object.assign({}, props, { arrows: showArrows, slidesToShow: 1, type: models_1.SliderType.HeaderCard, animated: false, blockClassName: b(), arrowSize: 20 }), items.map((item, index) => (react_1.default.createElement("div", { key: index, className: b('item'), "data-qa": `header-slider-item-${index + 1}` },
             react_1.default.createElement(Header_1.default, Object.assign({}, item, { className: b('item-content') }))))))));
 };
 exports.HeaderSliderBlock = HeaderSliderBlock;

package/build/cjs/blocks/HeaderSlider/schema.js

@@ -9,7 +9,7 @@ exports.HeaderSliderBlock = {
     'header-slider-block': {
         additionalProperties: false,
         required: ['items'],
-        properties: Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), (0, omit_1.default)(blocks_1.SliderProps, ['loadable', 'children'])), { items: {
+        properties: Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), (0, omit_1.default)(blocks_1.SliderOldProps, ['loadable', 'children'])), { items: {
                 type: 'array',
                 items: {
                     type: 'object',

package/build/cjs/blocks/Slider/Arrow/Arrow.css

@@ -1,36 +1,25 @@
-.pc-slider-block-arrow__button {
+.pc-slider-block-arrow__inner {
   box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
 }
 
-.pc-slider-block-arrow__button:hover {
+.pc-slider-block-arrow__inner:hover {
   box-shadow: 0px 4px 24px var(--g-color-sfx-shadow), 0px 2px 8px var(--g-color-sfx-shadow);
   cursor: pointer;
 }
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-slider-block-arrow__icon-wrapper, .pc-slider-block-arrow__button, .pc-slider-block-arrow {
+.pc-slider-block-arrow__icon-wrapper, .pc-slider-block-arrow__inner, .pc-slider-block-arrow {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.pc-slider-block-arrow {
-  width: 42px;
-  height: 42px;
-  cursor: pointer;
-}
 @media (max-width: 576px) {
   .pc-slider-block-arrow {
     display: none;
   }
 }
-.pc-slider-block-arrow_type_left {
-  margin-right: 16px;
-}
-.pc-slider-block-arrow_type_left .pc-slider-block-arrow__icon-wrapper {
-  transform: rotate(180deg);
-}
 .pc-slider-block-arrow__button {
   display: inline-block;
   margin: 0;
@@ -41,6 +30,15 @@ unpredictable css rules order in build */
   color: inherit;
   background: none;
   cursor: pointer;
+}
+.pc-slider-block-arrow__button:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-slider-block-arrow__button:focus:not(:focus-visible) {
+  outline: 0;
+}
+.pc-slider-block-arrow__inner {
   width: 42px;
   height: 42px;
   color: var(--g-color-text-secondary);
@@ -49,17 +47,20 @@ unpredictable css rules order in build */
   box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
   transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 1s cubic-bezier(0.22, 0.61, 0.36, 1);
 }
-.pc-slider-block-arrow__button:focus {
-  outline: 2px solid var(--g-color-line-focus);
-  outline-offset: 0;
-}
-.pc-slider-block-arrow__button:focus:not(:focus-visible) {
-  outline: 0;
+.pc-slider-block-arrow__inner_type_left .pc-slider-block-arrow__icon-wrapper {
+  transform: rotate(180deg);
 }
-.pc-slider-block-arrow:hover .pc-slider-block-arrow__button {
+.pc-slider-block-arrow__inner: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);
 }
+.pc-slider-block-arrow__inner_transparent {
+  background-color: transparent;
+  box-shadow: none;
+}
+.pc-slider-block-arrow__inner_transparent:hover {
+  box-shadow: none;
+}
 .pc-slider-block-arrow__icon {
   position: relative;
 }

package/build/cjs/blocks/Slider/Arrow/Arrow.d.ts

@@ -1,9 +1,12 @@
+import React from 'react';
 import { ClassNameProps } from '../../../models';
 export type ArrowType = 'left' | 'right';
 export interface ArrowProps {
     type: ArrowType;
-    handleClick?: (direction: ArrowType) => void;
+    transparent?: boolean;
+    onClick?: () => void;
     size?: number;
+    extraProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
 }
-declare const Arrow: ({ type, handleClick, className, size }: ArrowProps & ClassNameProps) => JSX.Element;
+declare const Arrow: ({ type, transparent, onClick, className, size, extraProps, }: ArrowProps & ClassNameProps) => JSX.Element;
 export default Arrow;

package/build/cjs/blocks/Slider/Arrow/Arrow.js

@@ -6,8 +6,9 @@ const ToggleArrow_1 = tslib_1.__importDefault(require("../../../components/Toggl
 const utils_1 = require("../../../utils");
 const i18n_1 = require("../i18n");
 const b = (0, utils_1.block)('slider-block-arrow');
-const Arrow = ({ type, handleClick, className, size = 16 }) => (react_1.default.createElement("div", { className: b({ type }, className) },
-    react_1.default.createElement("button", { className: b('button'), onClick: () => handleClick && handleClick(type), "aria-label": (0, i18n_1.i18n)(`arrow-${type}`) },
-        react_1.default.createElement("span", { className: b('icon-wrapper') },
-            react_1.default.createElement(ToggleArrow_1.default, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') })))));
+const Arrow = ({ type, transparent, onClick, className, size = 16, extraProps, }) => (react_1.default.createElement("div", { className: b(null, className) },
+    react_1.default.createElement("button", Object.assign({ className: b('button'), onClick: onClick, "aria-label": (0, i18n_1.i18n)(`arrow-${type}`) }, extraProps),
+        react_1.default.createElement("div", { className: b('inner', { type, transparent }) },
+            react_1.default.createElement("span", { className: b('icon-wrapper') },
+                react_1.default.createElement(ToggleArrow_1.default, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') }))))));
 exports.default = Arrow;