@gravity-ui/page-constructor 5.16.0 → 5.17.0

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

@@ -0,0 +1,62 @@
+.pc-slider-new-block-arrow__button {
+  box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
+}
+
+.pc-slider-new-block-arrow__button: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-new-block-arrow__icon-wrapper, .pc-slider-new-block-arrow__button, .pc-slider-new-block-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pc-slider-new-block-arrow {
+  width: 42px;
+  height: 42px;
+  cursor: pointer;
+}
+@media (max-width: 576px) {
+  .pc-slider-new-block-arrow {
+    display: none;
+  }
+}
+.pc-slider-new-block-arrow_type_left .pc-slider-new-block-arrow__icon-wrapper {
+  transform: rotate(180deg);
+}
+.pc-slider-new-block-arrow__button {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  width: 42px;
+  height: 42px;
+  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 cubic-bezier(0.22, 0.61, 0.36, 1), color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+.pc-slider-new-block-arrow__button:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-slider-new-block-arrow__button:focus:not(:focus-visible) {
+  outline: 0;
+}
+.pc-slider-new-block-arrow:hover .pc-slider-new-block-arrow__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);
+}
+.pc-slider-new-block-arrow__icon {
+  position: relative;
+}

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

@@ -0,0 +1,9 @@
+import { ClassNameProps } from '../../../models';
+export type ArrowType = 'left' | 'right';
+export interface ArrowProps {
+    type: ArrowType;
+    onClick?: () => void;
+    size?: number;
+}
+declare const Arrow: ({ type, onClick, className, size }: ArrowProps & ClassNameProps) => JSX.Element;
+export default Arrow;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const ToggleArrow_1 = tslib_1.__importDefault(require("../../../components/ToggleArrow/ToggleArrow"));
+const utils_1 = require("../../../utils");
+const i18n_1 = require("../i18n");
+const b = (0, utils_1.block)('slider-new-block-arrow');
+const Arrow = ({ type, onClick, className, size = 16 }) => (react_1.default.createElement("div", { className: b({ type }, className) },
+    react_1.default.createElement("button", { className: b('button'), onClick: onClick, "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') })))));
+exports.default = Arrow;