@doyourjob/gravity-ui-page-constructor-addons 2.1.13 → 2.1.14

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 (7) hide show
  1. package/build/cjs/components/HeaderStripe/HeaderStripe.css +20 -0
  2. package/build/cjs/components/HeaderStripe/HeaderStripe.d.ts +2 -1
  3. package/build/cjs/components/HeaderStripe/HeaderStripe.js +18 -14
  4. package/build/esm/components/HeaderStripe/HeaderStripe.css +20 -0
  5. package/build/esm/components/HeaderStripe/HeaderStripe.d.ts +2 -1
  6. package/build/esm/components/HeaderStripe/HeaderStripe.js +19 -15
  7. package/package.json +1 -1
package/build/cjs/components/HeaderStripe/HeaderStripe.css CHANGED
@@ -18,6 +18,7 @@ unpredictable css rules order in build */
18
18
  }
19
19
  .pc-addons-header-stripe__content {
20
20
  position: relative;
21
+ padding: 0 32px;
21
22
  display: flex;
22
23
  overflow: hidden;
23
24
  align-items: center;
@@ -75,4 +76,23 @@ unpredictable css rules order in build */
75
76
  display: block;
76
77
  width: 100%;
77
78
  text-decoration: none;
79
+ }
80
+
81
+ .pc-addons-header-stripe__close {
82
+ position: absolute;
83
+ top: 0;
84
+ right: 0;
85
+ width: 32px;
86
+ height: 100%;
87
+ border: none;
88
+ display: flex;
89
+ align-items: center;
90
+ justify-content: center;
91
+ color: var(--g-color-text-brand-contrast);
92
+ background: transparent;
93
+ cursor: pointer;
94
+ }
95
+
96
+ .pc-addons-header-stripe__close:hover {
97
+ opacity: 0.6;
78
98
  }
package/build/cjs/components/HeaderStripe/HeaderStripe.d.ts CHANGED
@@ -13,6 +13,7 @@ export type HeaderStripeProps = {
13
13
  items: HeaderStripeItemType[];
14
14
  onlyDesktop?: boolean;
15
15
  isAbsolute?: boolean;
16
+ onClose?: () => void;
16
17
  };
17
- export declare const HeaderStripe: ({ duration, items, textColor, background, backgroundImage, onlyDesktop, }: HeaderStripeProps) => React.JSX.Element;
18
+ export declare const HeaderStripe: ({ duration, items, textColor, background, backgroundImage, onlyDesktop, onClose, }: HeaderStripeProps) => React.JSX.Element;
18
19
  export {};
package/build/cjs/components/HeaderStripe/HeaderStripe.js CHANGED
@@ -4,6 +4,7 @@ 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");
7
8
  const uikit_1 = require("@gravity-ui/uikit");
8
9
  const cn_1 = require("../../utils/cn");
9
10
  const b = (0, cn_1.block)('header-stripe');
@@ -18,7 +19,7 @@ const renderItemContent = (item) => {
18
19
  return item.text;
19
20
  }
20
21
  };
21
- const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroundImage, onlyDesktop, }) => {
22
+ const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroundImage, onlyDesktop, onClose, }) => {
22
23
  const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
23
24
  const isMobile = (0, uikit_1.useMobile)();
24
25
  const filteredItems = (0, react_1.useMemo)(() => isMobile
@@ -55,18 +56,21 @@ const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroun
55
56
  return (react_1.default.createElement("div", { className: b('root', { 'only-desktop': onlyDesktop }), style: rootStyle },
56
57
  react_1.default.createElement(gravity_ui_page_constructor_1.Grid, null,
57
58
  react_1.default.createElement(gravity_ui_page_constructor_1.Col, null,
58
- react_1.default.createElement("div", { className: b('content') }, filteredItems.map((item, index) => {
59
- const isActive = index === activeIndex;
60
- const isPrev = filteredItems.length > 1 &&
61
- index ===
62
- (activeIndex === 0
63
- ? filteredItems.length - 1
64
- : activeIndex - 1);
65
- return (react_1.default.createElement("div", { key: String(index), className: b('item', {
66
- active: isActive,
67
- prev: isPrev,
68
- }) },
69
- react_1.default.createElement("div", { className: b('item-content') }, renderItemContent(item))));
70
- }))))));
59
+ react_1.default.createElement("div", { className: b('content') },
60
+ filteredItems.map((item, index) => {
61
+ const isActive = index === activeIndex;
62
+ const isPrev = filteredItems.length > 1 &&
63
+ index ===
64
+ (activeIndex === 0
65
+ ? filteredItems.length - 1
66
+ : activeIndex - 1);
67
+ return (react_1.default.createElement("div", { key: String(index), className: b('item', {
68
+ active: isActive,
69
+ prev: isPrev,
70
+ }) },
71
+ react_1.default.createElement("div", { className: b('item-content') }, renderItemContent(item))));
72
+ }),
73
+ onClose && (react_1.default.createElement("button", { className: b('close'), onClick: onClose },
74
+ react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, className: b('close-icon'), size: 16 }))))))));
71
75
  };
72
76
  exports.HeaderStripe = HeaderStripe;
package/build/esm/components/HeaderStripe/HeaderStripe.css CHANGED
@@ -18,6 +18,7 @@ unpredictable css rules order in build */
18
18
  }
19
19
  .pc-addons-header-stripe__content {
20
20
  position: relative;
21
+ padding: 0 32px;
21
22
  display: flex;
22
23
  overflow: hidden;
23
24
  align-items: center;
@@ -75,4 +76,23 @@ unpredictable css rules order in build */
75
76
  display: block;
76
77
  width: 100%;
77
78
  text-decoration: none;
79
+ }
80
+
81
+ .pc-addons-header-stripe__close {
82
+ position: absolute;
83
+ top: 0;
84
+ right: 0;
85
+ width: 32px;
86
+ height: 100%;
87
+ border: none;
88
+ display: flex;
89
+ align-items: center;
90
+ justify-content: center;
91
+ color: var(--g-color-text-brand-contrast);
92
+ background: transparent;
93
+ cursor: pointer;
94
+ }
95
+
96
+ .pc-addons-header-stripe__close:hover {
97
+ opacity: 0.6;
78
98
  }
package/build/esm/components/HeaderStripe/HeaderStripe.d.ts CHANGED
@@ -14,6 +14,7 @@ export type HeaderStripeProps = {
14
14
  items: HeaderStripeItemType[];
15
15
  onlyDesktop?: boolean;
16
16
  isAbsolute?: boolean;
17
+ onClose?: () => void;
17
18
  };
18
- export declare const HeaderStripe: ({ duration, items, textColor, background, backgroundImage, onlyDesktop, }: HeaderStripeProps) => React.JSX.Element;
19
+ export declare const HeaderStripe: ({ duration, items, textColor, background, backgroundImage, onlyDesktop, onClose, }: HeaderStripeProps) => React.JSX.Element;
19
20
  export {};
package/build/esm/components/HeaderStripe/HeaderStripe.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React, { useEffect, useMemo, useState } from 'react';
2
2
  import { Col, Grid } from '@doyourjob/gravity-ui-page-constructor';
3
- import { useMobile } from '@gravity-ui/uikit';
3
+ import { Xmark } from '@gravity-ui/icons';
4
+ import { Icon, useMobile } from '@gravity-ui/uikit';
4
5
  import { block } from '../../utils/cn';
5
6
  import './HeaderStripe.css';
6
7
  const b = block('header-stripe');
@@ -15,7 +16,7 @@ const renderItemContent = (item) => {
15
16
  return item.text;
16
17
  }
17
18
  };
18
- export const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroundImage, onlyDesktop, }) => {
19
+ export const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroundImage, onlyDesktop, onClose, }) => {
19
20
  const [activeIndex, setActiveIndex] = useState(0);
20
21
  const isMobile = useMobile();
21
22
  const filteredItems = useMemo(() => isMobile
@@ -52,17 +53,20 @@ export const HeaderStripe = ({ duration = 8000, items, textColor, background, ba
52
53
  return (React.createElement("div", { className: b('root', { 'only-desktop': onlyDesktop }), style: rootStyle },
53
54
  React.createElement(Grid, null,
54
55
  React.createElement(Col, null,
55
- React.createElement("div", { className: b('content') }, filteredItems.map((item, index) => {
56
- const isActive = index === activeIndex;
57
- const isPrev = filteredItems.length > 1 &&
58
- index ===
59
- (activeIndex === 0
60
- ? filteredItems.length - 1
61
- : activeIndex - 1);
62
- return (React.createElement("div", { key: String(index), className: b('item', {
63
- active: isActive,
64
- prev: isPrev,
65
- }) },
66
- React.createElement("div", { className: b('item-content') }, renderItemContent(item))));
67
- }))))));
56
+ React.createElement("div", { className: b('content') },
57
+ filteredItems.map((item, index) => {
58
+ const isActive = index === activeIndex;
59
+ const isPrev = filteredItems.length > 1 &&
60
+ index ===
61
+ (activeIndex === 0
62
+ ? filteredItems.length - 1
63
+ : activeIndex - 1);
64
+ return (React.createElement("div", { key: String(index), className: b('item', {
65
+ active: isActive,
66
+ prev: isPrev,
67
+ }) },
68
+ React.createElement("div", { className: b('item-content') }, renderItemContent(item))));
69
+ }),
70
+ onClose && (React.createElement("button", { className: b('close'), onClick: onClose },
71
+ React.createElement(Icon, { data: Xmark, className: b('close-icon'), size: 16 }))))))));
68
72
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@doyourjob/gravity-ui-page-constructor-addons",
3
- "version": "2.1.13",
3
+ "version": "2.1.14",
4
4
  "description": "Components and plugins for @doyourjob/gravity-ui-page-constructor",
5
5
  "license": "MIT",
6
6
  "repository": {