@gravity-ui/page-constructor 6.6.2 → 7.0.0-alpha.1

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

@@ -2,8 +2,10 @@ import { ClassNameProps } from "../../../models/index.js";
 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) => import("react/jsx-runtime").JSX.Element;
+declare const Arrow: ({ type, transparent, onClick, className, size, extraProps, }: ArrowProps & ClassNameProps) => import("react/jsx-runtime").JSX.Element;
 export default Arrow;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Arrow.js","sourceRoot":"../../../../../src","sources":["blocks/Slider/Arrow/Arrow.tsx"],"names":[],"mappings":";;;;AAAA,yGAAsE;AAEtE,mDAAqC;AACrC,2CAA6B;AAI7B,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,oBAAoB,CAAC,CAAC;AAUtC,MAAM,KAAK,GAAG,CAAC,EAAC,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,GAAG,EAAE,EAA8B,EAAE,EAAE,CAAC,CACtF,gCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAC,EAAE,SAAS,CAAC,YAChC,mCACI,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,IAAI,WAAW,CAAC,IAAI,CAAC,gBACnC,IAAA,WAAI,EAAC,SAAS,IAAI,EAAE,CAAC,YAEjC,iCAAM,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,YAC9B,uBAAC,qBAAW,IACR,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB,GACC,GACF,GACP,CACT,CAAC;AAEF,kBAAe,KAAK,CAAC","sourcesContent":["import ToggleArrow from '../../../components/ToggleArrow/ToggleArrow';\nimport {ClassNameProps} from '../../../models';\nimport {block} from '../../../utils';\nimport {i18n} from '../i18n';\n\nimport './Arrow.scss';\n\nconst b = block('slider-block-arrow');\n\nexport type ArrowType = 'left' | 'right';\n\nexport interface ArrowProps {\n    type: ArrowType;\n    handleClick?: (direction: ArrowType) => void;\n    size?: number;\n}\n\nconst Arrow = ({type, handleClick, className, size = 16}: ArrowProps & ClassNameProps) => (\n    <div className={b({type}, className)}>\n        <button\n            className={b('button')}\n            onClick={() => handleClick && handleClick(type)}\n            aria-label={i18n(`arrow-${type}`)}\n        >\n            <span className={b('icon-wrapper')}>\n                <ToggleArrow\n                    size={size}\n                    type={'horizontal'}\n                    iconType=\"navigation\"\n                    className={b('icon')}\n                />\n            </span>\n        </button>\n    </div>\n);\n\nexport default Arrow;\n"]}
+{"version":3,"file":"Arrow.js","sourceRoot":"../../../../../src","sources":["blocks/Slider/Arrow/Arrow.tsx"],"names":[],"mappings":";;;;AAAA,yGAAsE;AAEtE,mDAAqC;AACrC,2CAA6B;AAI7B,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,oBAAoB,CAAC,CAAC;AAYtC,MAAM,KAAK,GAAG,CAAC,EACX,IAAI,EACJ,WAAW,EACX,OAAO,EACP,SAAS,EACT,IAAI,GAAG,EAAE,EACT,UAAU,GACgB,EAAE,EAAE,CAAC,CAC/B,gCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,YAC9B,mCACI,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,OAAO,EAAE,OAAO,gBACJ,IAAA,WAAI,EAAC,SAAS,IAAI,EAAE,CAAC,KAC7B,UAAU,YAEd,gCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,IAAI,EAAE,WAAW,EAAC,CAAC,YAC3C,iCAAM,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,YAC9B,uBAAC,qBAAW,IACR,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB,GACC,GACL,GACD,GACP,CACT,CAAC;AAEF,kBAAe,KAAK,CAAC","sourcesContent":["import ToggleArrow from '../../../components/ToggleArrow/ToggleArrow';\nimport {ClassNameProps} from '../../../models';\nimport {block} from '../../../utils';\nimport {i18n} from '../i18n';\n\nimport './Arrow.scss';\n\nconst b = block('slider-block-arrow');\n\nexport type ArrowType = 'left' | 'right';\n\nexport interface ArrowProps {\n    type: ArrowType;\n    transparent?: boolean;\n    onClick?: () => void;\n    size?: number;\n    extraProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n}\n\nconst Arrow = ({\n    type,\n    transparent,\n    onClick,\n    className,\n    size = 16,\n    extraProps,\n}: ArrowProps & ClassNameProps) => (\n    <div className={b(null, className)}>\n        <button\n            className={b('button')}\n            onClick={onClick}\n            aria-label={i18n(`arrow-${type}`)}\n            {...extraProps}\n        >\n            <div className={b('inner', {type, transparent})}>\n                <span className={b('icon-wrapper')}>\n                    <ToggleArrow\n                        size={size}\n                        type={'horizontal'}\n                        iconType=\"navigation\"\n                        className={b('icon')}\n                    />\n                </span>\n            </div>\n        </button>\n    </div>\n);\n\nexport default Arrow;\n"]}