@doyourjob/gravity-ui-page-constructor-addons 2.1.21 → 2.1.23

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

@@ -1,6 +1,8 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-addons-header-stripe__root {
+  --local-hs-height-desktop: 56px;
+  --local-hs-height-mobile: 36px;
   z-index: calc(var(--pc-addons-navigation-popup-z-index) + 1);
   width: 100%;
   color: var(--g-color-text-brand-contrast);
@@ -32,12 +34,30 @@ unpredictable css rules order in build */
     animation: constrict-desktop 0.5s ease forwards;
   }
 }
+.pc-addons-header-stripe__root_new-design {
+  --local-hs-height-mobile: 28px;
+  background-color: transparent;
+}
+
+.pc-addons-header-stripe__root_new-design .pc-addons-header-stripe__content {
+  border-radius: 12px;
+  background: transparent;
+  color: inherit;
+  transition: background 0.3s ease, color 0.3s ease;
+}
+
+.pc-addons-header-stripe__root_new-design .pc-addons-header-stripe__close {
+  width: auto;
+  padding: 0 12px;
+  color: #737373;
+}
+
 .pc-addons-header-stripe__content {
   position: relative;
   display: flex;
   overflow: hidden;
   align-items: center;
-  height: 56px;
+  height: var(--local-hs-height-desktop);
 }
 
 .pc-addons-header-stripe__content_with-close {
@@ -51,7 +71,7 @@ unpredictable css rules order in build */
 
 @media (min-width: 769px) {
   .pc-addons-header-stripe__content {
-    height: 36px;
+    height: var(--local-hs-height-mobile);
   }
 }
 .pc-addons-header-stripe__item {
@@ -132,12 +152,12 @@ unpredictable css rules order in build */
     max-height: 0;
   }
   to {
-    max-height: 56px;
+    max-height: var(--local-hs-height-desktop);
   }
 }
 @keyframes constrict-mobile {
   from {
-    max-height: 56px;
+    max-height: var(--local-hs-height-desktop);
   }
   to {
     max-height: 0;
@@ -148,12 +168,12 @@ unpredictable css rules order in build */
     max-height: 0;
   }
   to {
-    max-height: 36px;
+    max-height: var(--local-hs-height-mobile);
   }
 }
 @keyframes constrict-desktop {
   from {
-    max-height: 36px;
+    max-height: var(--local-hs-height-mobile);
   }
   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;
@@ -15,6 +17,7 @@ export type HeaderStripeProps = {
     isAbsolute?: boolean;
     canClose?: boolean;
     onClose?: () => void;
+    newDesign?: boolean;
 };
-export declare const HeaderStripe: ({ duration, items, textColor, background, backgroundImage, onlyDesktop, canClose, onClose, }: HeaderStripeProps) => React.JSX.Element;
+export declare const HeaderStripe: ({ duration, items, textColor, background, backgroundImage, onlyDesktop, canClose, onClose, newDesign, }: HeaderStripeProps) => React.JSX.Element;
 export {};

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

@@ -7,6 +7,7 @@ const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constr
 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) => {
@@ -20,7 +21,7 @@ const renderItemContent = (item) => {
         return item.text;
     }
 };
-const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroundImage, onlyDesktop, canClose, onClose, }) => {
+const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroundImage, onlyDesktop, canClose, onClose, newDesign, }) => {
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
     const [isClosing, setIsClosing] = (0, react_1.useState)(false);
     const isMobile = (0, uikit_1.useMobile)();
@@ -59,10 +60,28 @@ 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, closing: isClosing }), style: rootStyle },
+    const contentStyle = (0, react_1.useMemo)(() => {
+        if (!newDesign) {
+            return {};
+        }
+        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;
+    }, [newDesign, filteredItems, activeIndex]);
+    return (react_1.default.createElement("div", { className: b('root', {
+            'only-desktop': onlyDesktop,
+            closing: isClosing,
+            'new-design': newDesign,
+        }), 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 &&
@@ -77,6 +96,6 @@ const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroun
                             react_1.default.createElement("div", { className: b('item-content') }, renderItemContent(item))));
                     }),
                     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: icons_1.Xmark, className: b('close-icon'), size: 16 }))))))));
+                        react_1.default.createElement(uikit_1.Icon, { data: newDesign ? CloseIcon_1.CloseIcon : icons_1.Xmark, className: b('close-icon'), size: 16 }))))))));
 };
 exports.HeaderStripe = HeaderStripe;

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

@@ -1,6 +1,8 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-addons-header-stripe__root {
+  --local-hs-height-desktop: 56px;
+  --local-hs-height-mobile: 36px;
   z-index: calc(var(--pc-addons-navigation-popup-z-index) + 1);
   width: 100%;
   color: var(--g-color-text-brand-contrast);
@@ -32,12 +34,30 @@ unpredictable css rules order in build */
     animation: constrict-desktop 0.5s ease forwards;
   }
 }
+.pc-addons-header-stripe__root_new-design {
+  --local-hs-height-mobile: 28px;
+  background-color: transparent;
+}
+
+.pc-addons-header-stripe__root_new-design .pc-addons-header-stripe__content {
+  border-radius: 12px;
+  background: transparent;
+  color: inherit;
+  transition: background 0.3s ease, color 0.3s ease;
+}
+
+.pc-addons-header-stripe__root_new-design .pc-addons-header-stripe__close {
+  width: auto;
+  padding: 0 12px;
+  color: #737373;
+}
+
 .pc-addons-header-stripe__content {
   position: relative;
   display: flex;
   overflow: hidden;
   align-items: center;
-  height: 56px;
+  height: var(--local-hs-height-desktop);
 }
 
 .pc-addons-header-stripe__content_with-close {
@@ -51,7 +71,7 @@ unpredictable css rules order in build */
 
 @media (min-width: 769px) {
   .pc-addons-header-stripe__content {
-    height: 36px;
+    height: var(--local-hs-height-mobile);
   }
 }
 .pc-addons-header-stripe__item {
@@ -132,12 +152,12 @@ unpredictable css rules order in build */
     max-height: 0;
   }
   to {
-    max-height: 56px;
+    max-height: var(--local-hs-height-desktop);
   }
 }
 @keyframes constrict-mobile {
   from {
-    max-height: 56px;
+    max-height: var(--local-hs-height-desktop);
   }
   to {
     max-height: 0;
@@ -148,12 +168,12 @@ unpredictable css rules order in build */
     max-height: 0;
   }
   to {
-    max-height: 36px;
+    max-height: var(--local-hs-height-mobile);
   }
 }
 @keyframes constrict-desktop {
   from {
-    max-height: 36px;
+    max-height: var(--local-hs-height-mobile);
   }
   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;
@@ -16,6 +18,7 @@ export type HeaderStripeProps = {
     isAbsolute?: boolean;
     canClose?: boolean;
     onClose?: () => void;
+    newDesign?: boolean;
 };
-export declare const HeaderStripe: ({ duration, items, textColor, background, backgroundImage, onlyDesktop, canClose, onClose, }: HeaderStripeProps) => React.JSX.Element;
+export declare const HeaderStripe: ({ duration, items, textColor, background, backgroundImage, onlyDesktop, canClose, onClose, newDesign, }: HeaderStripeProps) => React.JSX.Element;
 export {};

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

@@ -3,6 +3,7 @@ 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');
@@ -17,7 +18,7 @@ const renderItemContent = (item) => {
         return item.text;
     }
 };
-export const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroundImage, onlyDesktop, canClose, onClose, }) => {
+export const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroundImage, onlyDesktop, canClose, onClose, newDesign, }) => {
     const [activeIndex, setActiveIndex] = useState(0);
     const [isClosing, setIsClosing] = useState(false);
     const isMobile = useMobile();
@@ -56,10 +57,28 @@ export const HeaderStripe = ({ duration = 8000, items, textColor, background, ba
         }
         return properties;
     }, [textColor, background, backgroundImage]);
-    return (React.createElement("div", { className: b('root', { 'only-desktop': onlyDesktop, closing: isClosing }), style: rootStyle },
+    const contentStyle = useMemo(() => {
+        if (!newDesign) {
+            return {};
+        }
+        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;
+    }, [newDesign, filteredItems, activeIndex]);
+    return (React.createElement("div", { className: b('root', {
+            'only-desktop': onlyDesktop,
+            closing: isClosing,
+            'new-design': newDesign,
+        }), 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 &&
@@ -74,5 +93,5 @@ export const HeaderStripe = ({ duration = 8000, items, textColor, background, ba
                             React.createElement("div", { className: b('item-content') }, renderItemContent(item))));
                     }),
                     canClose && (React.createElement("button", { "aria-label": i18n('close'), className: b('close'), onClick: handleClose },
-                        React.createElement(Icon, { data: Xmark, className: b('close-icon'), size: 16 }))))))));
+                        React.createElement(Icon, { data: newDesign ? CloseIcon : Xmark, className: b('close-icon'), size: 16 }))))))));
 };

package/package.json

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