@doyourjob/gravity-ui-page-constructor-addons 2.1.20 → 2.1.21-dev.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/build/cjs/components/HeaderStripe/CloseIcon.d.ts +2 -0
  2. package/build/cjs/components/HeaderStripe/CloseIcon.js +9 -0
  3. package/build/cjs/components/HeaderStripe/HeaderStripe.css +9 -6
  4. package/build/cjs/components/HeaderStripe/HeaderStripe.d.ts +2 -0
  5. package/build/cjs/components/HeaderStripe/HeaderStripe.js +14 -3
  6. package/build/esm/components/HeaderStripe/CloseIcon.d.ts +2 -0
  7. package/build/esm/components/HeaderStripe/CloseIcon.js +4 -0
  8. package/build/esm/components/HeaderStripe/HeaderStripe.css +9 -6
  9. package/build/esm/components/HeaderStripe/HeaderStripe.d.ts +2 -0
  10. package/build/esm/components/HeaderStripe/HeaderStripe.js +14 -3
  11. package/package.json +1 -1
package/build/cjs/components/HeaderStripe/CloseIcon.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const CloseIcon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
package/build/cjs/components/HeaderStripe/CloseIcon.js ADDED
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.CloseIcon = void 0;
4
+ const tslib_1 = require("tslib");
5
+ const react_1 = tslib_1.__importDefault(require("react"));
6
+ 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),
7
+ react_1.default.createElement("path", { d: "M15.5838 14.9948L14.9948 15.5838L0 0.589046L0.589046 0L15.5838 14.9948Z", fill: "currentColor" }),
8
+ react_1.default.createElement("path", { d: "M0.000647411 14.9948L0.589693 15.5838L15.5845 0.589046L14.9954 0L0.000647411 14.9948Z", fill: "currentColor" })));
9
+ exports.CloseIcon = CloseIcon;
package/build/cjs/components/HeaderStripe/HeaderStripe.css CHANGED
@@ -4,7 +4,6 @@ unpredictable css rules order in build */
4
4
  z-index: calc(var(--pc-addons-navigation-popup-z-index) + 1);
5
5
  width: 100%;
6
6
  color: var(--g-color-text-brand-contrast);
7
- background-color: var(--g-color-base-brand);
8
7
  overflow: hidden;
9
8
  animation: expand-mobile 0.5s ease forwards;
10
9
  }
@@ -38,6 +37,10 @@ unpredictable css rules order in build */
38
37
  overflow: hidden;
39
38
  align-items: center;
40
39
  height: 56px;
40
+ border-radius: 12px;
41
+ background: transparent;
42
+ color: inherit;
43
+ transition: background 0.3s ease, color 0.3s ease;
41
44
  }
42
45
 
43
46
  .pc-addons-header-stripe__content_with-close {
@@ -51,7 +54,7 @@ unpredictable css rules order in build */
51
54
 
52
55
  @media (min-width: 769px) {
53
56
  .pc-addons-header-stripe__content {
54
- height: 36px;
57
+ height: 28px;
55
58
  }
56
59
  }
57
60
  .pc-addons-header-stripe__item {
@@ -112,14 +115,14 @@ unpredictable css rules order in build */
112
115
  position: absolute;
113
116
  top: 0;
114
117
  right: 0;
115
- width: 32px;
118
+ padding: 0 12px;
116
119
  height: 100%;
117
120
  border: none;
118
121
  display: flex;
119
122
  align-items: center;
120
123
  justify-content: center;
121
124
  background: transparent;
122
- color: inherit;
125
+ color: #737373;
123
126
  cursor: pointer;
124
127
  }
125
128
 
@@ -148,12 +151,12 @@ unpredictable css rules order in build */
148
151
  max-height: 0;
149
152
  }
150
153
  to {
151
- max-height: 36px;
154
+ max-height: 28px;
152
155
  }
153
156
  }
154
157
  @keyframes constrict-desktop {
155
158
  from {
156
- max-height: 36px;
159
+ max-height: 28px;
157
160
  }
158
161
  to {
159
162
  max-height: 0;
package/build/cjs/components/HeaderStripe/HeaderStripe.d.ts CHANGED
@@ -4,6 +4,8 @@ type HeaderStripeItemType = {
4
4
  link?: string;
5
5
  target?: string;
6
6
  onlyDesktop?: boolean;
7
+ background?: string;
8
+ textColor?: string;
7
9
  } | string;
8
10
  export type HeaderStripeProps = {
9
11
  duration?: number;
package/build/cjs/components/HeaderStripe/HeaderStripe.js CHANGED
@@ -4,9 +4,9 @@ exports.HeaderStripe = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const react_1 = tslib_1.__importStar(require("react"));
6
6
  const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
7
- const icons_1 = require("@gravity-ui/icons");
8
7
  const uikit_1 = require("@gravity-ui/uikit");
9
8
  const cn_1 = require("../../utils/cn");
9
+ const CloseIcon_1 = require("./CloseIcon");
10
10
  const i18n_1 = tslib_1.__importDefault(require("./i18n"));
11
11
  const b = (0, cn_1.block)('header-stripe');
12
12
  const renderItemContent = (item) => {
@@ -59,10 +59,21 @@ const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroun
59
59
  }
60
60
  return properties;
61
61
  }, [textColor, background, backgroundImage]);
62
+ const contentStyle = (0, react_1.useMemo)(() => {
63
+ const item = filteredItems[activeIndex];
64
+ const properties = {};
65
+ if (typeof item === 'object' && item.background) {
66
+ properties.background = item.background;
67
+ }
68
+ if (typeof item === 'object' && item.textColor) {
69
+ properties.color = item.textColor;
70
+ }
71
+ return properties;
72
+ }, [filteredItems, activeIndex]);
62
73
  return (react_1.default.createElement("div", { className: b('root', { 'only-desktop': onlyDesktop, closing: isClosing }), style: rootStyle },
63
74
  react_1.default.createElement(gravity_ui_page_constructor_1.Grid, null,
64
75
  react_1.default.createElement(gravity_ui_page_constructor_1.Col, null,
65
- react_1.default.createElement("div", { className: b('content', { 'with-close': Boolean(onClose) }) },
76
+ react_1.default.createElement("div", { className: b('content', { 'with-close': Boolean(onClose) }), style: contentStyle },
66
77
  filteredItems.map((item, index) => {
67
78
  const isActive = index === activeIndex;
68
79
  const isPrev = filteredItems.length > 1 &&
@@ -77,6 +88,6 @@ const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroun
77
88
  react_1.default.createElement("div", { className: b('item-content') }, renderItemContent(item))));
78
89
  }),
79
90
  canClose && (react_1.default.createElement("button", { "aria-label": (0, i18n_1.default)('close'), className: b('close'), onClick: handleClose },
80
- react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, className: b('close-icon'), size: 16 }))))))));
91
+ react_1.default.createElement(uikit_1.Icon, { data: CloseIcon_1.CloseIcon, className: b('close-icon'), size: 16 }))))))));
81
92
  };
82
93
  exports.HeaderStripe = HeaderStripe;
package/build/esm/components/HeaderStripe/CloseIcon.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const CloseIcon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
package/build/esm/components/HeaderStripe/CloseIcon.js ADDED
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ 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),
3
+ React.createElement("path", { d: "M15.5838 14.9948L14.9948 15.5838L0 0.589046L0.589046 0L15.5838 14.9948Z", fill: "currentColor" }),
4
+ 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 CHANGED
@@ -4,7 +4,6 @@ unpredictable css rules order in build */
4
4
  z-index: calc(var(--pc-addons-navigation-popup-z-index) + 1);
5
5
  width: 100%;
6
6
  color: var(--g-color-text-brand-contrast);
7
- background-color: var(--g-color-base-brand);
8
7
  overflow: hidden;
9
8
  animation: expand-mobile 0.5s ease forwards;
10
9
  }
@@ -38,6 +37,10 @@ unpredictable css rules order in build */
38
37
  overflow: hidden;
39
38
  align-items: center;
40
39
  height: 56px;
40
+ border-radius: 12px;
41
+ background: transparent;
42
+ color: inherit;
43
+ transition: background 0.3s ease, color 0.3s ease;
41
44
  }
42
45
 
43
46
  .pc-addons-header-stripe__content_with-close {
@@ -51,7 +54,7 @@ unpredictable css rules order in build */
51
54
 
52
55
  @media (min-width: 769px) {
53
56
  .pc-addons-header-stripe__content {
54
- height: 36px;
57
+ height: 28px;
55
58
  }
56
59
  }
57
60
  .pc-addons-header-stripe__item {
@@ -112,14 +115,14 @@ unpredictable css rules order in build */
112
115
  position: absolute;
113
116
  top: 0;
114
117
  right: 0;
115
- width: 32px;
118
+ padding: 0 12px;
116
119
  height: 100%;
117
120
  border: none;
118
121
  display: flex;
119
122
  align-items: center;
120
123
  justify-content: center;
121
124
  background: transparent;
122
- color: inherit;
125
+ color: #737373;
123
126
  cursor: pointer;
124
127
  }
125
128
 
@@ -148,12 +151,12 @@ unpredictable css rules order in build */
148
151
  max-height: 0;
149
152
  }
150
153
  to {
151
- max-height: 36px;
154
+ max-height: 28px;
152
155
  }
153
156
  }
154
157
  @keyframes constrict-desktop {
155
158
  from {
156
- max-height: 36px;
159
+ max-height: 28px;
157
160
  }
158
161
  to {
159
162
  max-height: 0;
package/build/esm/components/HeaderStripe/HeaderStripe.d.ts CHANGED
@@ -5,6 +5,8 @@ type HeaderStripeItemType = {
5
5
  link?: string;
6
6
  target?: string;
7
7
  onlyDesktop?: boolean;
8
+ background?: string;
9
+ textColor?: string;
8
10
  } | string;
9
11
  export type HeaderStripeProps = {
10
12
  duration?: number;
package/build/esm/components/HeaderStripe/HeaderStripe.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import React, { useCallback, useEffect, useMemo, useState } from 'react';
2
2
  import { Col, Grid } from '@doyourjob/gravity-ui-page-constructor';
3
- import { Xmark } from '@gravity-ui/icons';
4
3
  import { Icon, useMobile } from '@gravity-ui/uikit';
5
4
  import { block } from '../../utils/cn';
5
+ import { CloseIcon } from './CloseIcon';
6
6
  import i18n from './i18n';
7
7
  import './HeaderStripe.css';
8
8
  const b = block('header-stripe');
@@ -56,10 +56,21 @@ export const HeaderStripe = ({ duration = 8000, items, textColor, background, ba
56
56
  }
57
57
  return properties;
58
58
  }, [textColor, background, backgroundImage]);
59
+ const contentStyle = useMemo(() => {
60
+ const item = filteredItems[activeIndex];
61
+ const properties = {};
62
+ if (typeof item === 'object' && item.background) {
63
+ properties.background = item.background;
64
+ }
65
+ if (typeof item === 'object' && item.textColor) {
66
+ properties.color = item.textColor;
67
+ }
68
+ return properties;
69
+ }, [filteredItems, activeIndex]);
59
70
  return (React.createElement("div", { className: b('root', { 'only-desktop': onlyDesktop, closing: isClosing }), style: rootStyle },
60
71
  React.createElement(Grid, null,
61
72
  React.createElement(Col, null,
62
- React.createElement("div", { className: b('content', { 'with-close': Boolean(onClose) }) },
73
+ React.createElement("div", { className: b('content', { 'with-close': Boolean(onClose) }), style: contentStyle },
63
74
  filteredItems.map((item, index) => {
64
75
  const isActive = index === activeIndex;
65
76
  const isPrev = filteredItems.length > 1 &&
@@ -74,5 +85,5 @@ export const HeaderStripe = ({ duration = 8000, items, textColor, background, ba
74
85
  React.createElement("div", { className: b('item-content') }, renderItemContent(item))));
75
86
  }),
76
87
  canClose && (React.createElement("button", { "aria-label": i18n('close'), className: b('close'), onClick: handleClose },
77
- React.createElement(Icon, { data: Xmark, className: b('close-icon'), size: 16 }))))))));
88
+ React.createElement(Icon, { data: CloseIcon, className: b('close-icon'), size: 16 }))))))));
78
89
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@doyourjob/gravity-ui-page-constructor-addons",
3
- "version": "2.1.20",
3
+ "version": "2.1.21-dev.1",
4
4
  "description": "Components and plugins for @doyourjob/gravity-ui-page-constructor",
5
5
  "license": "MIT",
6
6
  "repository": {