@doyourjob/gravity-ui-page-constructor-addons 2.1.19 → 2.1.21-dev.0

package/build/cjs/components/HeaderStripe/CloseIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CloseIcon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

package/build/cjs/components/HeaderStripe/CloseIcon.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseIcon = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const CloseIcon = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true" }, props),
+    react_1.default.createElement("path", { d: "M15.5838 14.9948L14.9948 15.5838L0 0.589046L0.589046 0L15.5838 14.9948Z", fill: "currentColor" }),
+    react_1.default.createElement("path", { d: "M0.000647411 14.9948L0.589693 15.5838L15.5845 0.589046L14.9954 0L0.000647411 14.9948Z", fill: "currentColor" })));
+exports.CloseIcon = CloseIcon;

package/build/cjs/components/HeaderStripe/HeaderStripe.css

@@ -4,7 +4,6 @@ unpredictable css rules order in build */
   z-index: calc(var(--pc-addons-navigation-popup-z-index) + 1);
   width: 100%;
   color: var(--g-color-text-brand-contrast);
-  background-color: var(--g-color-base-brand);
   overflow: hidden;
   animation: expand-mobile 0.5s ease forwards;
 }
@@ -23,12 +22,22 @@ unpredictable css rules order in build */
     animation: expand-desktop 0.5s ease forwards;
   }
 }
+.pc-addons-header-stripe__root_closing {
+  animation: constrict-mobile 0.5s ease forwards;
+}
+
+@media (min-width: 769px) {
+  .pc-addons-header-stripe__root_closing {
+    animation: constrict-desktop 0.5s ease forwards;
+  }
+}
 .pc-addons-header-stripe__content {
   position: relative;
   display: flex;
   overflow: hidden;
   align-items: center;
   height: 56px;
+  border-radius: 12px;
 }
 
 .pc-addons-header-stripe__content_with-close {
@@ -42,7 +51,7 @@ unpredictable css rules order in build */
 
 @media (min-width: 769px) {
   .pc-addons-header-stripe__content {
-    height: 36px;
+    height: 28px;
   }
 }
 .pc-addons-header-stripe__item {
@@ -103,14 +112,14 @@ unpredictable css rules order in build */
   position: absolute;
   top: 0;
   right: 0;
-  width: 32px;
+  padding: 0 12px;
   height: 100%;
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   background: transparent;
-  color: inherit;
+  color: #737373;
   cursor: pointer;
 }
 
@@ -126,11 +135,27 @@ unpredictable css rules order in build */
     max-height: 56px;
   }
 }
+@keyframes constrict-mobile {
+  from {
+    max-height: 56px;
+  }
+  to {
+    max-height: 0;
+  }
+}
 @keyframes expand-desktop {
   from {
     max-height: 0;
   }
   to {
-    max-height: 36px;
+    max-height: 28px;
+  }
+}
+@keyframes constrict-desktop {
+  from {
+    max-height: 28px;
+  }
+  to {
+    max-height: 0;
   }
 }

package/build/cjs/components/HeaderStripe/HeaderStripe.d.ts

@@ -4,6 +4,8 @@ type HeaderStripeItemType = {
     link?: string;
     target?: string;
     onlyDesktop?: boolean;
+    background?: string;
+    textColor?: string;
 } | string;
 export type HeaderStripeProps = {
     duration?: number;
@@ -13,7 +15,8 @@ export type HeaderStripeProps = {
     items: HeaderStripeItemType[];
     onlyDesktop?: boolean;
     isAbsolute?: boolean;
+    canClose?: boolean;
     onClose?: () => void;
 };
-export declare const HeaderStripe: ({ duration, items, textColor, background, backgroundImage, onlyDesktop, onClose, }: HeaderStripeProps) => React.JSX.Element;
+export declare const HeaderStripe: ({ duration, items, textColor, background, backgroundImage, onlyDesktop, canClose, onClose, }: HeaderStripeProps) => React.JSX.Element;
 export {};

package/build/cjs/components/HeaderStripe/HeaderStripe.js

@@ -4,9 +4,10 @@ exports.HeaderStripe = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
-const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../utils/cn");
+const CloseIcon_1 = require("./CloseIcon");
+const i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const b = (0, cn_1.block)('header-stripe');
 const renderItemContent = (item) => {
     if (typeof item === 'string') {
@@ -19,12 +20,17 @@ const renderItemContent = (item) => {
         return item.text;
     }
 };
-const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroundImage, onlyDesktop, onClose, }) => {
+const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroundImage, onlyDesktop, canClose, onClose, }) => {
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    const [isClosing, setIsClosing] = (0, react_1.useState)(false);
     const isMobile = (0, uikit_1.useMobile)();
     const filteredItems = (0, react_1.useMemo)(() => isMobile
         ? items.filter((item) => (typeof item === 'object' ? !item.onlyDesktop : true))
         : items, [items, isMobile]);
+    const handleClose = (0, react_1.useCallback)(() => {
+        setIsClosing(true);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [onClose]);
     (0, react_1.useEffect)(() => {
         if (filteredItems.length > 0) {
             setActiveIndex(0);
@@ -53,10 +59,21 @@ const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroun
         }
         return properties;
     }, [textColor, background, backgroundImage]);
-    return (react_1.default.createElement("div", { className: b('root', { 'only-desktop': onlyDesktop }), style: rootStyle },
+    const contentStyle = (0, react_1.useMemo)(() => {
+        const item = filteredItems[activeIndex];
+        const properties = {};
+        if (typeof item === 'object' && item.background) {
+            properties.background = item.background;
+        }
+        if (typeof item === 'object' && item.textColor) {
+            properties.color = item.textColor;
+        }
+        return properties;
+    }, [filteredItems, activeIndex]);
+    return (react_1.default.createElement("div", { className: b('root', { 'only-desktop': onlyDesktop, closing: isClosing }), style: rootStyle },
         react_1.default.createElement(gravity_ui_page_constructor_1.Grid, null,
             react_1.default.createElement(gravity_ui_page_constructor_1.Col, null,
-                react_1.default.createElement("div", { className: b('content', { 'with-close': Boolean(onClose) }) },
+                react_1.default.createElement("div", { className: b('content', { 'with-close': Boolean(onClose) }), style: contentStyle },
                     filteredItems.map((item, index) => {
                         const isActive = index === activeIndex;
                         const isPrev = filteredItems.length > 1 &&
@@ -70,7 +87,7 @@ const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroun
                             }) },
                             react_1.default.createElement("div", { className: b('item-content') }, renderItemContent(item))));
                     }),
-                    onClose && (react_1.default.createElement("button", { className: b('close'), onClick: onClose },
-                        react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, className: b('close-icon'), size: 16 }))))))));
+                    canClose && (react_1.default.createElement("button", { "aria-label": (0, i18n_1.default)('close'), className: b('close'), onClick: handleClose },
+                        react_1.default.createElement(uikit_1.Icon, { data: CloseIcon_1.CloseIcon, className: b('close-icon'), size: 16 }))))))));
 };
 exports.HeaderStripe = HeaderStripe;

package/build/cjs/components/HeaderStripe/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "close": "Close"
+}

package/build/cjs/components/HeaderStripe/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/cjs/components/HeaderStripe/i18n/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const registerKeyset_1 = require("../../../utils/registerKeyset");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+const COMPONENT = 'HeaderStripe';
+exports.default = (0, registerKeyset_1.registerKeyset)({ en: en_json_1.default, ru: ru_json_1.default }, COMPONENT);

package/build/cjs/components/HeaderStripe/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "close": "Закрыть"
+}

package/build/esm/components/HeaderStripe/CloseIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CloseIcon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

package/build/esm/components/HeaderStripe/CloseIcon.js

@@ -0,0 +1,4 @@
+import React from 'react';
+export const CloseIcon = (props) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true" }, props),
+    React.createElement("path", { d: "M15.5838 14.9948L14.9948 15.5838L0 0.589046L0.589046 0L15.5838 14.9948Z", fill: "currentColor" }),
+    React.createElement("path", { d: "M0.000647411 14.9948L0.589693 15.5838L15.5845 0.589046L14.9954 0L0.000647411 14.9948Z", fill: "currentColor" })));

package/build/esm/components/HeaderStripe/HeaderStripe.css

@@ -4,7 +4,6 @@ unpredictable css rules order in build */
   z-index: calc(var(--pc-addons-navigation-popup-z-index) + 1);
   width: 100%;
   color: var(--g-color-text-brand-contrast);
-  background-color: var(--g-color-base-brand);
   overflow: hidden;
   animation: expand-mobile 0.5s ease forwards;
 }
@@ -23,12 +22,22 @@ unpredictable css rules order in build */
     animation: expand-desktop 0.5s ease forwards;
   }
 }
+.pc-addons-header-stripe__root_closing {
+  animation: constrict-mobile 0.5s ease forwards;
+}
+
+@media (min-width: 769px) {
+  .pc-addons-header-stripe__root_closing {
+    animation: constrict-desktop 0.5s ease forwards;
+  }
+}
 .pc-addons-header-stripe__content {
   position: relative;
   display: flex;
   overflow: hidden;
   align-items: center;
   height: 56px;
+  border-radius: 12px;
 }
 
 .pc-addons-header-stripe__content_with-close {
@@ -42,7 +51,7 @@ unpredictable css rules order in build */
 
 @media (min-width: 769px) {
   .pc-addons-header-stripe__content {
-    height: 36px;
+    height: 28px;
   }
 }
 .pc-addons-header-stripe__item {
@@ -103,14 +112,14 @@ unpredictable css rules order in build */
   position: absolute;
   top: 0;
   right: 0;
-  width: 32px;
+  padding: 0 12px;
   height: 100%;
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   background: transparent;
-  color: inherit;
+  color: #737373;
   cursor: pointer;
 }
 
@@ -126,11 +135,27 @@ unpredictable css rules order in build */
     max-height: 56px;
   }
 }
+@keyframes constrict-mobile {
+  from {
+    max-height: 56px;
+  }
+  to {
+    max-height: 0;
+  }
+}
 @keyframes expand-desktop {
   from {
     max-height: 0;
   }
   to {
-    max-height: 36px;
+    max-height: 28px;
+  }
+}
+@keyframes constrict-desktop {
+  from {
+    max-height: 28px;
+  }
+  to {
+    max-height: 0;
   }
 }

package/build/esm/components/HeaderStripe/HeaderStripe.d.ts

@@ -5,6 +5,8 @@ type HeaderStripeItemType = {
     link?: string;
     target?: string;
     onlyDesktop?: boolean;
+    background?: string;
+    textColor?: string;
 } | string;
 export type HeaderStripeProps = {
     duration?: number;
@@ -14,7 +16,8 @@ export type HeaderStripeProps = {
     items: HeaderStripeItemType[];
     onlyDesktop?: boolean;
     isAbsolute?: boolean;
+    canClose?: boolean;
     onClose?: () => void;
 };
-export declare const HeaderStripe: ({ duration, items, textColor, background, backgroundImage, onlyDesktop, onClose, }: HeaderStripeProps) => React.JSX.Element;
+export declare const HeaderStripe: ({ duration, items, textColor, background, backgroundImage, onlyDesktop, canClose, onClose, }: HeaderStripeProps) => React.JSX.Element;
 export {};

package/build/esm/components/HeaderStripe/HeaderStripe.js

@@ -1,8 +1,9 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Col, Grid } from '@doyourjob/gravity-ui-page-constructor';
-import { Xmark } from '@gravity-ui/icons';
 import { Icon, useMobile } from '@gravity-ui/uikit';
 import { block } from '../../utils/cn';
+import { CloseIcon } from './CloseIcon';
+import i18n from './i18n';
 import './HeaderStripe.css';
 const b = block('header-stripe');
 const renderItemContent = (item) => {
@@ -16,12 +17,17 @@ const renderItemContent = (item) => {
         return item.text;
     }
 };
-export const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroundImage, onlyDesktop, onClose, }) => {
+export const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroundImage, onlyDesktop, canClose, onClose, }) => {
     const [activeIndex, setActiveIndex] = useState(0);
+    const [isClosing, setIsClosing] = useState(false);
     const isMobile = useMobile();
     const filteredItems = useMemo(() => isMobile
         ? items.filter((item) => (typeof item === 'object' ? !item.onlyDesktop : true))
         : items, [items, isMobile]);
+    const handleClose = useCallback(() => {
+        setIsClosing(true);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [onClose]);
     useEffect(() => {
         if (filteredItems.length > 0) {
             setActiveIndex(0);
@@ -50,10 +56,21 @@ export const HeaderStripe = ({ duration = 8000, items, textColor, background, ba
         }
         return properties;
     }, [textColor, background, backgroundImage]);
-    return (React.createElement("div", { className: b('root', { 'only-desktop': onlyDesktop }), style: rootStyle },
+    const contentStyle = useMemo(() => {
+        const item = filteredItems[activeIndex];
+        const properties = {};
+        if (typeof item === 'object' && item.background) {
+            properties.background = item.background;
+        }
+        if (typeof item === 'object' && item.textColor) {
+            properties.color = item.textColor;
+        }
+        return properties;
+    }, [filteredItems, activeIndex]);
+    return (React.createElement("div", { className: b('root', { 'only-desktop': onlyDesktop, closing: isClosing }), style: rootStyle },
         React.createElement(Grid, null,
             React.createElement(Col, null,
-                React.createElement("div", { className: b('content', { 'with-close': Boolean(onClose) }) },
+                React.createElement("div", { className: b('content', { 'with-close': Boolean(onClose) }), style: contentStyle },
                     filteredItems.map((item, index) => {
                         const isActive = index === activeIndex;
                         const isPrev = filteredItems.length > 1 &&
@@ -67,6 +84,6 @@ export const HeaderStripe = ({ duration = 8000, items, textColor, background, ba
                             }) },
                             React.createElement("div", { className: b('item-content') }, renderItemContent(item))));
                     }),
-                    onClose && (React.createElement("button", { className: b('close'), onClick: onClose },
-                        React.createElement(Icon, { data: Xmark, className: b('close-icon'), size: 16 }))))))));
+                    canClose && (React.createElement("button", { "aria-label": i18n('close'), className: b('close'), onClick: handleClose },
+                        React.createElement(Icon, { data: CloseIcon, className: b('close-icon'), size: 16 }))))))));
 };

package/build/esm/components/HeaderStripe/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "close": "Close"
+}

package/build/esm/components/HeaderStripe/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/esm/components/HeaderStripe/i18n/index.js

@@ -0,0 +1,5 @@
+import { registerKeyset } from '../../../utils/registerKeyset';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'HeaderStripe';
+export default registerKeyset({ en, ru }, COMPONENT);

package/build/esm/components/HeaderStripe/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "close": "Закрыть"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doyourjob/gravity-ui-page-constructor-addons",
-  "version": "2.1.19",
+  "version": "2.1.21-dev.0",
   "description": "Components and plugins for @doyourjob/gravity-ui-page-constructor",
   "license": "MIT",
   "repository": {