@doyourjob/gravity-ui-page-constructor-addons 2.1.20 → 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;
 }
@@ -38,6 +37,7 @@ unpredictable css rules order in build */
   overflow: hidden;
   align-items: center;
   height: 56px;
+  border-radius: 12px;
 }
 
 .pc-addons-header-stripe__content_with-close {
@@ -51,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 {
@@ -112,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;
 }
 
@@ -148,12 +148,12 @@ unpredictable css rules order in build */
     max-height: 0;
   }
   to {
-    max-height: 36px;
+    max-height: 28px;
   }
 }
 @keyframes constrict-desktop {
   from {
-    max-height: 36px;
+    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;

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

@@ -4,9 +4,9 @@ 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) => {
@@ -59,10 +59,21 @@ const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroun
         }
         return properties;
     }, [textColor, background, backgroundImage]);
+    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 &&
@@ -77,6 +88,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: CloseIcon_1.CloseIcon, 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

@@ -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;
 }
@@ -38,6 +37,7 @@ unpredictable css rules order in build */
   overflow: hidden;
   align-items: center;
   height: 56px;
+  border-radius: 12px;
 }
 
 .pc-addons-header-stripe__content_with-close {
@@ -51,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 {
@@ -112,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;
 }
 
@@ -148,12 +148,12 @@ unpredictable css rules order in build */
     max-height: 0;
   }
   to {
-    max-height: 36px;
+    max-height: 28px;
   }
 }
 @keyframes constrict-desktop {
   from {
-    max-height: 36px;
+    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;

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

@@ -1,8 +1,8 @@
 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');
@@ -56,10 +56,21 @@ export const HeaderStripe = ({ duration = 8000, items, textColor, background, ba
         }
         return properties;
     }, [textColor, background, backgroundImage]);
+    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 &&
@@ -74,5 +85,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: CloseIcon, className: b('close-icon'), size: 16 }))))))));
 };

package/package.json

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