@kaizen/components 1.61.2 → 1.62.0

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 (74) hide show
  1. package/codemods/README.md +0 -1
  2. package/dist/cjs/{__containers__/GuidanceBlock/v2 → GuidanceBlock}/GuidanceBlock.cjs +6 -6
  3. package/dist/cjs/GuidanceBlock/GuidanceBlock.module.scss.cjs +33 -0
  4. package/dist/cjs/Modal/ConfirmationModal/ConfirmationModal.cjs +1 -1
  5. package/dist/cjs/__future__/Select/Select.cjs +1 -6
  6. package/dist/cjs/__future__/Select/subcomponents/ListBox/ListBox.cjs +1 -2
  7. package/dist/cjs/__future__/Select/subcomponents/ListBox/ListBox.module.scss.cjs +1 -2
  8. package/dist/cjs/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/ProgressStepper.cjs +2 -4
  9. package/dist/cjs/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/ProgressStepper.cjs +2 -3
  10. package/dist/cjs/index.cjs +2 -2
  11. package/dist/esm/{__containers__/GuidanceBlock/v2 → GuidanceBlock}/GuidanceBlock.mjs +6 -6
  12. package/dist/esm/GuidanceBlock/GuidanceBlock.module.scss.mjs +31 -0
  13. package/dist/esm/Modal/ConfirmationModal/ConfirmationModal.mjs +1 -1
  14. package/dist/esm/__future__/Select/Select.mjs +1 -6
  15. package/dist/esm/__future__/Select/subcomponents/ListBox/ListBox.mjs +1 -2
  16. package/dist/esm/__future__/Select/subcomponents/ListBox/ListBox.module.scss.mjs +1 -2
  17. package/dist/esm/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/ProgressStepper.mjs +2 -4
  18. package/dist/esm/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/ProgressStepper.mjs +2 -3
  19. package/dist/esm/index.mjs +1 -1
  20. package/dist/styles.css +1450 -1777
  21. package/dist/types/{__containers__/GuidanceBlock/v1 → GuidanceBlock}/GuidanceBlock.d.ts +4 -4
  22. package/dist/types/index.d.ts +1 -1
  23. package/package.json +3 -3
  24. package/src/Collapsible/Collapsible/_docs/Collapsible.mdx +0 -2
  25. package/src/Filter/FilterSelect/FilterSelect.spec.tsx +1 -3
  26. package/src/{__containers__/GuidanceBlock/v1 → GuidanceBlock}/GuidanceBlock.module.scss +2 -2
  27. package/src/{__containers__/GuidanceBlock/v1 → GuidanceBlock}/_docs/GuidanceBlock.mdx +2 -2
  28. package/src/{__containers__/GuidanceBlock/v1 → GuidanceBlock}/_docs/GuidanceBlock.stickersheet.stories.tsx +1 -1
  29. package/src/{__containers__/GuidanceBlock/v1 → GuidanceBlock}/_docs/GuidanceBlock.stories.tsx +1 -1
  30. package/src/Modal/ConfirmationModal/ConfirmationModal.tsx +5 -1
  31. package/src/MultiSelect/subcomponents/Popover/Popover.module.scss +1 -0
  32. package/src/__future__/Select/Select.spec.tsx +4 -4
  33. package/src/__future__/Select/Select.tsx +1 -10
  34. package/src/__future__/Select/subcomponents/ListBox/ListBox.module.scss +3 -3
  35. package/src/__future__/Select/subcomponents/ListBox/ListBox.tsx +1 -1
  36. package/src/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss +8 -2
  37. package/src/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx +2 -7
  38. package/src/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.css +5 -0
  39. package/src/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx +2 -6
  40. package/src/index.ts +1 -2
  41. package/codemods/updateGuidanceBlockVariantProp/index.ts +0 -19
  42. package/codemods/updateGuidanceBlockVariantProp/transformGuidanceBlockVariantProp.spec.ts +0 -135
  43. package/codemods/updateGuidanceBlockVariantProp/transformGuidanceBlockVariantProp.ts +0 -77
  44. package/dist/cjs/__containers__/GuidanceBlock/v1/GuidanceBlock.cjs +0 -160
  45. package/dist/cjs/__containers__/GuidanceBlock/v1/GuidanceBlock.module.scss.cjs +0 -33
  46. package/dist/cjs/__containers__/GuidanceBlock/v2/GuidanceBlock.module.scss.cjs +0 -28
  47. package/dist/cjs/containersV1.cjs +0 -4
  48. package/dist/cjs/containersV2.cjs +0 -4
  49. package/dist/esm/__containers__/GuidanceBlock/v1/GuidanceBlock.mjs +0 -153
  50. package/dist/esm/__containers__/GuidanceBlock/v1/GuidanceBlock.module.scss.mjs +0 -31
  51. package/dist/esm/__containers__/GuidanceBlock/v2/GuidanceBlock.module.scss.mjs +0 -26
  52. package/dist/esm/containersV1.mjs +0 -1
  53. package/dist/esm/containersV2.mjs +0 -1
  54. package/dist/types/__containers__/GuidanceBlock/v2/GuidanceBlock.d.ts +0 -59
  55. package/dist/types/__containers__/GuidanceBlock/v2/index.d.ts +0 -1
  56. package/dist/types/__containers__/v1.d.ts +0 -1
  57. package/dist/types/__containers__/v2.d.ts +0 -1
  58. package/src/__containers__/GuidanceBlock/v2/GuidanceBlock.module.scss +0 -356
  59. package/src/__containers__/GuidanceBlock/v2/GuidanceBlock.spec.tsx +0 -82
  60. package/src/__containers__/GuidanceBlock/v2/GuidanceBlock.tsx +0 -262
  61. package/src/__containers__/GuidanceBlock/v2/_docs/GuidanceBlock.mdx +0 -38
  62. package/src/__containers__/GuidanceBlock/v2/_docs/GuidanceBlock.stickersheet.stories.tsx +0 -118
  63. package/src/__containers__/GuidanceBlock/v2/_docs/GuidanceBlock.stories.tsx +0 -152
  64. package/src/__containers__/GuidanceBlock/v2/index.ts +0 -1
  65. package/src/__containers__/v1.ts +0 -1
  66. package/src/__containers__/v2.ts +0 -1
  67. package/v1/containers/package.json +0 -5
  68. package/v2/containers/package.json +0 -5
  69. /package/dist/types/{__containers__/GuidanceBlock/v1 → GuidanceBlock}/index.d.ts +0 -0
  70. /package/dist/types/{__containers__/GuidanceBlock/v1 → GuidanceBlock}/types.d.ts +0 -0
  71. /package/src/{__containers__/GuidanceBlock/v1 → GuidanceBlock}/GuidanceBlock.spec.tsx +0 -0
  72. /package/src/{__containers__/GuidanceBlock/v1 → GuidanceBlock}/GuidanceBlock.tsx +0 -0
  73. /package/src/{__containers__/GuidanceBlock/v1 → GuidanceBlock}/index.ts +0 -0
  74. /package/src/{__containers__/GuidanceBlock/v1 → GuidanceBlock}/types.ts +0 -0
@@ -1,160 +0,0 @@
1
- 'use strict';
2
-
3
- var tslib = require('tslib');
4
- var React = require('react');
5
- var classnames = require('classnames');
6
- var Media = require('react-media');
7
- var Heading = require('../../../Heading/Heading.cjs');
8
- require('../../../Icon/subcomponents/SVG/SVG.cjs');
9
- var ArrowForwardIcon = require('../../../Icon/ArrowForwardIcon.cjs');
10
- var Text = require('../../../Text/Text.cjs');
11
- var index = require('../../../__overlays__/Tooltip/v1/index.cjs');
12
- var GuidanceBlock_module = require('./GuidanceBlock.module.scss.cjs');
13
- var Button = require('../../../__actions__/Button/v1/Button/Button.cjs');
14
- function _interopDefault(e) {
15
- return e && e.__esModule ? e : {
16
- default: e
17
- };
18
- }
19
- var React__default = /*#__PURE__*/_interopDefault(React);
20
- var classnames__default = /*#__PURE__*/_interopDefault(classnames);
21
- var Media__default = /*#__PURE__*/_interopDefault(Media);
22
- var WithTooltip = function (_a) {
23
- var tooltipProps = _a.tooltipProps,
24
- children = _a.children;
25
- return !!tooltipProps ? React__default.default.createElement(index.Tooltip, tslib.__assign({}, tooltipProps), children) : React__default.default.createElement(React__default.default.Fragment, null, children);
26
- };
27
- /**
28
- * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093807/Guidance+Block Guidance} |
29
- * {@link https://cultureamp.design/?path=/docs/components-guidanceblock--docs Storybook}
30
- */
31
- var GuidanceBlock = function (_a) {
32
- var _b, _c, _d, _e;
33
- var _f = _a.layout,
34
- layout = _f === void 0 ? "default" : _f,
35
- _g = _a.variant,
36
- variant = _g === void 0 ? "default" : _g,
37
- _h = _a.withActionButtonArrow,
38
- withActionButtonArrow = _h === void 0 ? true : _h,
39
- _j = _a.noMaxWidth,
40
- noMaxWidth = _j === void 0 ? false : _j,
41
- _k = _a.illustrationType,
42
- illustrationType = _k === void 0 ? "spot" : _k,
43
- _l = _a.smallScreenTextAlignment,
44
- smallScreenTextAlignment = _l === void 0 ? "center" : _l,
45
- actions = _a.actions,
46
- illustration = _a.illustration,
47
- secondaryDismiss = _a.secondaryDismiss,
48
- restProps = tslib.__rest(_a, ["layout", "variant", "withActionButtonArrow", "noMaxWidth", "illustrationType", "smallScreenTextAlignment", "actions", "illustration", "secondaryDismiss"]);
49
- var _m = React.useState(false),
50
- hidden = _m[0],
51
- setHidden = _m[1];
52
- var _o = React.useState(false),
53
- removed = _o[0],
54
- setRemoved = _o[1];
55
- var _p = React.useState(""),
56
- mediaQueryLayout = _p[0],
57
- setMediaQueryLayout = _p[1];
58
- var containerRef = React__default.default.createRef();
59
- React.useEffect(function () {
60
- if (layout === "inline" || layout === "stacked") {
61
- containerQuery();
62
- }
63
- }, []);
64
- var handleDismissBanner = function () {
65
- var _a;
66
- setHidden(true);
67
- (_a = actions === null || actions === void 0 ? void 0 : actions.dismiss) === null || _a === void 0 ? void 0 : _a.onClick();
68
- };
69
- var onTransitionEnd = function (e) {
70
- // Be careful: this assumes the final CSS property to be animated is "margin-top".
71
- if (hidden && e.propertyName === "margin-top") {
72
- setRemoved(true);
73
- }
74
- };
75
- var containerQuery = function () {
76
- var resizeObserver = new ResizeObserver(function (entries) {
77
- if (entries.length === 1) {
78
- handleMediaQueryLayout(entries[0].contentRect.width);
79
- }
80
- });
81
- resizeObserver.observe(containerRef.current);
82
- };
83
- var handleMediaQueryLayout = function (width) {
84
- if (width <= 320) {
85
- setMediaQueryLayout("centerContent");
86
- } else {
87
- setMediaQueryLayout("");
88
- }
89
- };
90
- var marginTop = function () {
91
- if (hidden && containerRef.current) {
92
- return -containerRef.current.clientHeight + "px";
93
- }
94
- return "0";
95
- };
96
- if (removed) {
97
- return React__default.default.createElement(React__default.default.Fragment, null);
98
- }
99
- var componentIsMobile = mediaQueryLayout.includes("centerContent");
100
- return React__default.default.createElement("div", {
101
- className: classnames__default.default(GuidanceBlock_module.banner, variant && GuidanceBlock_module[variant], layout && GuidanceBlock_module[layout], hidden && GuidanceBlock_module.hidden, mediaQueryLayout === "centerContent" && GuidanceBlock_module.centerContent, noMaxWidth && GuidanceBlock_module.noMaxWidth, illustrationType === "scene" && GuidanceBlock_module.hasSceneIllustration, smallScreenTextAlignment === "left" && GuidanceBlock_module.smallScreenTextAlignment),
102
- style: {
103
- marginTop: marginTop()
104
- },
105
- ref: containerRef,
106
- onTransitionEnd: onTransitionEnd
107
- }, React__default.default.createElement("div", {
108
- className: GuidanceBlock_module.illustrationWrapper
109
- }, React__default.default.createElement("div", {
110
- className: GuidanceBlock_module.illustration
111
- }, illustrationType === "scene" ? React__default.default.cloneElement(illustration, {
112
- enableAspectRatio: true
113
- }) : illustration)), React__default.default.createElement("div", {
114
- className: GuidanceBlock_module.descriptionAndActions
115
- }, React__default.default.createElement("div", {
116
- className: GuidanceBlock_module.descriptionContainer
117
- }, "content" in restProps && restProps.content, "text" in restProps && React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("div", {
118
- className: GuidanceBlock_module.headingWrapper
119
- }, React__default.default.createElement(Heading.Heading, {
120
- tag: (_c = (_b = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _b === void 0 ? void 0 : _b.titleTag) !== null && _c !== void 0 ? _c : "h3",
121
- variant: "heading-3"
122
- }, (_d = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _d === void 0 ? void 0 : _d.title)), React__default.default.createElement(Text.Text, {
123
- tag: "p",
124
- variant: "body"
125
- }, (_e = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _e === void 0 ? void 0 : _e.description))), (actions === null || actions === void 0 ? void 0 : actions.primary) && React__default.default.createElement(Media__default.default, {
126
- query: "(max-width: 767px)"
127
- }, function (isMobile) {
128
- var _a;
129
- return React__default.default.createElement("div", {
130
- className: classnames__default.default({
131
- noRightMargin: isMobile || componentIsMobile,
132
- rightMargin: !(isMobile || componentIsMobile) && layout === "default"
133
- })
134
- }, React__default.default.createElement("div", {
135
- className: classnames__default.default(GuidanceBlock_module.buttonContainer, (actions === null || actions === void 0 ? void 0 : actions.secondary) && GuidanceBlock_module.secondaryAction)
136
- }, React__default.default.createElement(WithTooltip, {
137
- tooltipProps: actions.primary.tooltip
138
- }, React__default.default.createElement(Button.Button, tslib.__assign({
139
- icon: withActionButtonArrow ? React__default.default.createElement(ArrowForwardIcon.ArrowForwardIcon, {
140
- role: "presentation"
141
- }) : undefined,
142
- iconPosition: "end"
143
- }, actions.primary, {
144
- fullWidth: isMobile || componentIsMobile
145
- }))), (actions === null || actions === void 0 ? void 0 : actions.secondary) && React__default.default.createElement(WithTooltip, {
146
- tooltipProps: actions.secondary.tooltip
147
- }, React__default.default.createElement("div", {
148
- className: GuidanceBlock_module.secondaryAction
149
- }, React__default.default.createElement(Button.Button, tslib.__assign({
150
- secondary: true
151
- }, actions.secondary, {
152
- onClick: secondaryDismiss ? function () {
153
- return handleDismissBanner();
154
- } : (_a = actions === null || actions === void 0 ? void 0 : actions.secondary) === null || _a === void 0 ? void 0 : _a.onClick,
155
- fullWidth: isMobile || componentIsMobile
156
- }))))));
157
- })));
158
- };
159
- GuidanceBlock.displayName = "GuidanceBlock";
160
- exports.GuidanceBlock = GuidanceBlock;
@@ -1,33 +0,0 @@
1
- 'use strict';
2
-
3
- var styles = {
4
- "rightMargin": "GuidanceBlock-module_rightMargin__SbVUD",
5
- "noRightMargin": "GuidanceBlock-module_noRightMargin__CbCz9",
6
- "banner": "GuidanceBlock-module_banner__NyOs1",
7
- "noMaxWidth": "GuidanceBlock-module_noMaxWidth__Rh070",
8
- "illustrationWrapper": "GuidanceBlock-module_illustrationWrapper__lIGaj",
9
- "illustration": "GuidanceBlock-module_illustration__W7PwM",
10
- "hasSceneIllustration": "GuidanceBlock-module_hasSceneIllustration__CX8GF",
11
- "descriptionContainer": "GuidanceBlock-module_descriptionContainer__JyNJp",
12
- "descriptionAndActions": "GuidanceBlock-module_descriptionAndActions__2KGZQ",
13
- "buttonContainer": "GuidanceBlock-module_buttonContainer__6-Ty-",
14
- "hidden": "GuidanceBlock-module_hidden__a6zCg",
15
- "headingWrapper": "GuidanceBlock-module_headingWrapper__3zGY2",
16
- "cancel": "GuidanceBlock-module_cancel__G-4ci",
17
- "icon": "GuidanceBlock-module_icon__W0pEX",
18
- "disabled": "GuidanceBlock-module_disabled__GL1dK",
19
- "hover": "GuidanceBlock-module_hover__5PdJM",
20
- "active": "GuidanceBlock-module_active__3ifEz",
21
- "default": "GuidanceBlock-module_default__9rhEq",
22
- "positive": "GuidanceBlock-module_positive__m6n-N",
23
- "negative": "GuidanceBlock-module_negative__Z8tj-",
24
- "assertive": "GuidanceBlock-module_assertive__76y6Y",
25
- "informative": "GuidanceBlock-module_informative__QBzhx",
26
- "cautionary": "GuidanceBlock-module_cautionary__iwOA-",
27
- "prominent": "GuidanceBlock-module_prominent__LWMSm",
28
- "inline": "GuidanceBlock-module_inline__Dq-OU",
29
- "stacked": "GuidanceBlock-module_stacked__h3bUz",
30
- "centerContent": "GuidanceBlock-module_centerContent__Cyd34",
31
- "smallScreenTextAlignment": "GuidanceBlock-module_smallScreenTextAlignment__VI-fw"
32
- };
33
- module.exports = styles;
@@ -1,28 +0,0 @@
1
- 'use strict';
2
-
3
- var styles = {
4
- "rightMargin": "GuidanceBlock-module_rightMargin__gIzig",
5
- "noRightMargin": "GuidanceBlock-module_noRightMargin__xtPiX",
6
- "banner": "GuidanceBlock-module_banner__ng6kh",
7
- "noMaxWidth": "GuidanceBlock-module_noMaxWidth__V-DbD",
8
- "illustrationWrapper": "GuidanceBlock-module_illustrationWrapper__-rRYc",
9
- "illustration": "GuidanceBlock-module_illustration__LpEwu",
10
- "hasSceneIllustration": "GuidanceBlock-module_hasSceneIllustration__HxwOA",
11
- "descriptionContainer": "GuidanceBlock-module_descriptionContainer__N1EEi",
12
- "descriptionAndActions": "GuidanceBlock-module_descriptionAndActions__D206m",
13
- "buttonContainer": "GuidanceBlock-module_buttonContainer__w3vEh",
14
- "hidden": "GuidanceBlock-module_hidden__hgakl",
15
- "headingWrapper": "GuidanceBlock-module_headingWrapper__xqjf-",
16
- "cancel": "GuidanceBlock-module_cancel__0lcBe",
17
- "icon": "GuidanceBlock-module_icon__XVKkH",
18
- "disabled": "GuidanceBlock-module_disabled__tbZPh",
19
- "hover": "GuidanceBlock-module_hover__vs7Wu",
20
- "active": "GuidanceBlock-module_active__eJu5N",
21
- "default": "GuidanceBlock-module_default__W7fnR",
22
- "expert-advice": "GuidanceBlock-module_expert-advice__uGg7D",
23
- "inline": "GuidanceBlock-module_inline__DC0LQ",
24
- "stacked": "GuidanceBlock-module_stacked__2SSuH",
25
- "centerContent": "GuidanceBlock-module_centerContent__pS9uQ",
26
- "smallScreenTextAlignment": "GuidanceBlock-module_smallScreenTextAlignment__iaw5d"
27
- };
28
- module.exports = styles;
@@ -1,4 +0,0 @@
1
- 'use strict';
2
-
3
- var GuidanceBlock = require('./__containers__/GuidanceBlock/v1/GuidanceBlock.cjs');
4
- exports.GuidanceBlock = GuidanceBlock.GuidanceBlock;
@@ -1,4 +0,0 @@
1
- 'use strict';
2
-
3
- var GuidanceBlock = require('./__containers__/GuidanceBlock/v2/GuidanceBlock.cjs');
4
- exports.GuidanceBlock = GuidanceBlock.GuidanceBlock;
@@ -1,153 +0,0 @@
1
- import { __rest, __assign } from 'tslib';
2
- import React, { useState, useEffect } from 'react';
3
- import classnames from 'classnames';
4
- import Media from 'react-media';
5
- import { Heading } from '../../../Heading/Heading.mjs';
6
- import '../../../Icon/subcomponents/SVG/SVG.mjs';
7
- import { ArrowForwardIcon } from '../../../Icon/ArrowForwardIcon.mjs';
8
- import { Text } from '../../../Text/Text.mjs';
9
- import { Tooltip } from '../../../__overlays__/Tooltip/v1/index.mjs';
10
- import styles from './GuidanceBlock.module.scss.mjs';
11
- import { Button } from '../../../__actions__/Button/v1/Button/Button.mjs';
12
- var WithTooltip = function (_a) {
13
- var tooltipProps = _a.tooltipProps,
14
- children = _a.children;
15
- return !!tooltipProps ? ( /*#__PURE__*/React.createElement(Tooltip, __assign({}, tooltipProps), children)) : ( /*#__PURE__*/React.createElement(React.Fragment, null, children));
16
- };
17
- /**
18
- * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093807/Guidance+Block Guidance} |
19
- * {@link https://cultureamp.design/?path=/docs/components-guidanceblock--docs Storybook}
20
- */
21
- const GuidanceBlock = /*#__PURE__*/function () {
22
- const GuidanceBlock = function (_a) {
23
- var _b, _c, _d, _e;
24
- var _f = _a.layout,
25
- layout = _f === void 0 ? "default" : _f,
26
- _g = _a.variant,
27
- variant = _g === void 0 ? "default" : _g,
28
- _h = _a.withActionButtonArrow,
29
- withActionButtonArrow = _h === void 0 ? true : _h,
30
- _j = _a.noMaxWidth,
31
- noMaxWidth = _j === void 0 ? false : _j,
32
- _k = _a.illustrationType,
33
- illustrationType = _k === void 0 ? "spot" : _k,
34
- _l = _a.smallScreenTextAlignment,
35
- smallScreenTextAlignment = _l === void 0 ? "center" : _l,
36
- actions = _a.actions,
37
- illustration = _a.illustration,
38
- secondaryDismiss = _a.secondaryDismiss,
39
- restProps = __rest(_a, ["layout", "variant", "withActionButtonArrow", "noMaxWidth", "illustrationType", "smallScreenTextAlignment", "actions", "illustration", "secondaryDismiss"]);
40
- var _m = useState(false),
41
- hidden = _m[0],
42
- setHidden = _m[1];
43
- var _o = useState(false),
44
- removed = _o[0],
45
- setRemoved = _o[1];
46
- var _p = useState(""),
47
- mediaQueryLayout = _p[0],
48
- setMediaQueryLayout = _p[1];
49
- var containerRef = /*#__PURE__*/React.createRef();
50
- useEffect(function () {
51
- if (layout === "inline" || layout === "stacked") {
52
- containerQuery();
53
- }
54
- }, []);
55
- var handleDismissBanner = function () {
56
- var _a;
57
- setHidden(true);
58
- (_a = actions === null || actions === void 0 ? void 0 : actions.dismiss) === null || _a === void 0 ? void 0 : _a.onClick();
59
- };
60
- var onTransitionEnd = function (e) {
61
- // Be careful: this assumes the final CSS property to be animated is "margin-top".
62
- if (hidden && e.propertyName === "margin-top") {
63
- setRemoved(true);
64
- }
65
- };
66
- var containerQuery = function () {
67
- var resizeObserver = new ResizeObserver(function (entries) {
68
- if (entries.length === 1) {
69
- handleMediaQueryLayout(entries[0].contentRect.width);
70
- }
71
- });
72
- resizeObserver.observe(containerRef.current);
73
- };
74
- var handleMediaQueryLayout = function (width) {
75
- if (width <= 320) {
76
- setMediaQueryLayout("centerContent");
77
- } else {
78
- setMediaQueryLayout("");
79
- }
80
- };
81
- var marginTop = function () {
82
- if (hidden && containerRef.current) {
83
- return -containerRef.current.clientHeight + "px";
84
- }
85
- return "0";
86
- };
87
- if (removed) {
88
- return /*#__PURE__*/React.createElement(React.Fragment, null);
89
- }
90
- var componentIsMobile = mediaQueryLayout.includes("centerContent");
91
- return /*#__PURE__*/React.createElement("div", {
92
- className: classnames(styles.banner, variant && styles[variant], layout && styles[layout], hidden && styles.hidden, mediaQueryLayout === "centerContent" && styles.centerContent, noMaxWidth && styles.noMaxWidth, illustrationType === "scene" && styles.hasSceneIllustration, smallScreenTextAlignment === "left" && styles.smallScreenTextAlignment),
93
- style: {
94
- marginTop: marginTop()
95
- },
96
- ref: containerRef,
97
- onTransitionEnd: onTransitionEnd
98
- }, /*#__PURE__*/React.createElement("div", {
99
- className: styles.illustrationWrapper
100
- }, /*#__PURE__*/React.createElement("div", {
101
- className: styles.illustration
102
- }, illustrationType === "scene" ? /*#__PURE__*/React.cloneElement(illustration, {
103
- enableAspectRatio: true
104
- }) : illustration)), /*#__PURE__*/React.createElement("div", {
105
- className: styles.descriptionAndActions
106
- }, /*#__PURE__*/React.createElement("div", {
107
- className: styles.descriptionContainer
108
- }, "content" in restProps && restProps.content, "text" in restProps && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
109
- className: styles.headingWrapper
110
- }, /*#__PURE__*/React.createElement(Heading, {
111
- tag: (_c = (_b = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _b === void 0 ? void 0 : _b.titleTag) !== null && _c !== void 0 ? _c : "h3",
112
- variant: "heading-3"
113
- }, (_d = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _d === void 0 ? void 0 : _d.title)), /*#__PURE__*/React.createElement(Text, {
114
- tag: "p",
115
- variant: "body"
116
- }, (_e = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _e === void 0 ? void 0 : _e.description)))), (actions === null || actions === void 0 ? void 0 : actions.primary) && ( /*#__PURE__*/React.createElement(Media, {
117
- query: "(max-width: 767px)"
118
- }, function (isMobile) {
119
- var _a;
120
- return /*#__PURE__*/React.createElement("div", {
121
- className: classnames({
122
- noRightMargin: isMobile || componentIsMobile,
123
- rightMargin: !(isMobile || componentIsMobile) && layout === "default"
124
- })
125
- }, /*#__PURE__*/React.createElement("div", {
126
- className: classnames(styles.buttonContainer, (actions === null || actions === void 0 ? void 0 : actions.secondary) && styles.secondaryAction)
127
- }, /*#__PURE__*/React.createElement(WithTooltip, {
128
- tooltipProps: actions.primary.tooltip
129
- }, /*#__PURE__*/React.createElement(Button, __assign({
130
- icon: withActionButtonArrow ? ( /*#__PURE__*/React.createElement(ArrowForwardIcon, {
131
- role: "presentation"
132
- })) : undefined,
133
- iconPosition: "end"
134
- }, actions.primary, {
135
- fullWidth: isMobile || componentIsMobile
136
- }))), (actions === null || actions === void 0 ? void 0 : actions.secondary) && ( /*#__PURE__*/React.createElement(WithTooltip, {
137
- tooltipProps: actions.secondary.tooltip
138
- }, /*#__PURE__*/React.createElement("div", {
139
- className: styles.secondaryAction
140
- }, /*#__PURE__*/React.createElement(Button, __assign({
141
- secondary: true
142
- }, actions.secondary, {
143
- onClick: secondaryDismiss ? function () {
144
- return handleDismissBanner();
145
- } : (_a = actions === null || actions === void 0 ? void 0 : actions.secondary) === null || _a === void 0 ? void 0 : _a.onClick,
146
- fullWidth: isMobile || componentIsMobile
147
- })))))));
148
- }))));
149
- };
150
- GuidanceBlock.displayName = "GuidanceBlock";
151
- return GuidanceBlock;
152
- }();
153
- export { GuidanceBlock };
@@ -1,31 +0,0 @@
1
- var styles = {
2
- "rightMargin": "GuidanceBlock-module_rightMargin__SbVUD",
3
- "noRightMargin": "GuidanceBlock-module_noRightMargin__CbCz9",
4
- "banner": "GuidanceBlock-module_banner__NyOs1",
5
- "noMaxWidth": "GuidanceBlock-module_noMaxWidth__Rh070",
6
- "illustrationWrapper": "GuidanceBlock-module_illustrationWrapper__lIGaj",
7
- "illustration": "GuidanceBlock-module_illustration__W7PwM",
8
- "hasSceneIllustration": "GuidanceBlock-module_hasSceneIllustration__CX8GF",
9
- "descriptionContainer": "GuidanceBlock-module_descriptionContainer__JyNJp",
10
- "descriptionAndActions": "GuidanceBlock-module_descriptionAndActions__2KGZQ",
11
- "buttonContainer": "GuidanceBlock-module_buttonContainer__6-Ty-",
12
- "hidden": "GuidanceBlock-module_hidden__a6zCg",
13
- "headingWrapper": "GuidanceBlock-module_headingWrapper__3zGY2",
14
- "cancel": "GuidanceBlock-module_cancel__G-4ci",
15
- "icon": "GuidanceBlock-module_icon__W0pEX",
16
- "disabled": "GuidanceBlock-module_disabled__GL1dK",
17
- "hover": "GuidanceBlock-module_hover__5PdJM",
18
- "active": "GuidanceBlock-module_active__3ifEz",
19
- "default": "GuidanceBlock-module_default__9rhEq",
20
- "positive": "GuidanceBlock-module_positive__m6n-N",
21
- "negative": "GuidanceBlock-module_negative__Z8tj-",
22
- "assertive": "GuidanceBlock-module_assertive__76y6Y",
23
- "informative": "GuidanceBlock-module_informative__QBzhx",
24
- "cautionary": "GuidanceBlock-module_cautionary__iwOA-",
25
- "prominent": "GuidanceBlock-module_prominent__LWMSm",
26
- "inline": "GuidanceBlock-module_inline__Dq-OU",
27
- "stacked": "GuidanceBlock-module_stacked__h3bUz",
28
- "centerContent": "GuidanceBlock-module_centerContent__Cyd34",
29
- "smallScreenTextAlignment": "GuidanceBlock-module_smallScreenTextAlignment__VI-fw"
30
- };
31
- export { styles as default };
@@ -1,26 +0,0 @@
1
- var styles = {
2
- "rightMargin": "GuidanceBlock-module_rightMargin__gIzig",
3
- "noRightMargin": "GuidanceBlock-module_noRightMargin__xtPiX",
4
- "banner": "GuidanceBlock-module_banner__ng6kh",
5
- "noMaxWidth": "GuidanceBlock-module_noMaxWidth__V-DbD",
6
- "illustrationWrapper": "GuidanceBlock-module_illustrationWrapper__-rRYc",
7
- "illustration": "GuidanceBlock-module_illustration__LpEwu",
8
- "hasSceneIllustration": "GuidanceBlock-module_hasSceneIllustration__HxwOA",
9
- "descriptionContainer": "GuidanceBlock-module_descriptionContainer__N1EEi",
10
- "descriptionAndActions": "GuidanceBlock-module_descriptionAndActions__D206m",
11
- "buttonContainer": "GuidanceBlock-module_buttonContainer__w3vEh",
12
- "hidden": "GuidanceBlock-module_hidden__hgakl",
13
- "headingWrapper": "GuidanceBlock-module_headingWrapper__xqjf-",
14
- "cancel": "GuidanceBlock-module_cancel__0lcBe",
15
- "icon": "GuidanceBlock-module_icon__XVKkH",
16
- "disabled": "GuidanceBlock-module_disabled__tbZPh",
17
- "hover": "GuidanceBlock-module_hover__vs7Wu",
18
- "active": "GuidanceBlock-module_active__eJu5N",
19
- "default": "GuidanceBlock-module_default__W7fnR",
20
- "expert-advice": "GuidanceBlock-module_expert-advice__uGg7D",
21
- "inline": "GuidanceBlock-module_inline__DC0LQ",
22
- "stacked": "GuidanceBlock-module_stacked__2SSuH",
23
- "centerContent": "GuidanceBlock-module_centerContent__pS9uQ",
24
- "smallScreenTextAlignment": "GuidanceBlock-module_smallScreenTextAlignment__iaw5d"
25
- };
26
- export { styles as default };
@@ -1 +0,0 @@
1
- export { GuidanceBlock } from './__containers__/GuidanceBlock/v1/GuidanceBlock.mjs';
@@ -1 +0,0 @@
1
- export { GuidanceBlock } from './__containers__/GuidanceBlock/v2/GuidanceBlock.mjs';
@@ -1,59 +0,0 @@
1
- import React from "react";
2
- import { HeadingProps } from "../../../Heading";
3
- import { SceneProps, SpotProps } from "../../../Illustration";
4
- import { ButtonProps } from "../../../__actions__/v2";
5
- import { TooltipProps } from "../../../__overlays__/Tooltip/v1";
6
- export type ActionProps = ButtonProps & {
7
- tooltip?: TooltipProps;
8
- };
9
- type LayoutType = "default" | "inline" | "stacked";
10
- type IllustrationType = "spot" | "scene";
11
- type TextAlignment = "center" | "left";
12
- type GuidanceBlockActions = {
13
- primary: ActionProps;
14
- secondary?: ActionProps;
15
- dismiss?: {
16
- onClick: () => void;
17
- };
18
- };
19
- type BaseGuidanceBlockProps = {
20
- layout?: LayoutType;
21
- illustration: React.ReactElement<SpotProps | SceneProps>;
22
- illustrationType?: IllustrationType;
23
- smallScreenTextAlignment?: TextAlignment;
24
- actions?: GuidanceBlockActions;
25
- secondaryDismiss?: boolean;
26
- /**
27
- * If you are migrating from the KAIO v1:
28
- * - `prominent` is now `expert-advice`
29
- * - All other variants are removed in favour of `default`
30
- */
31
- variant?: "default" | "expert-advice";
32
- withActionButtonArrow?: boolean;
33
- noMaxWidth?: boolean;
34
- };
35
- type GuidanceBlockWithText = {
36
- text: {
37
- title: string;
38
- titleTag?: HeadingProps["tag"];
39
- description: string | React.ReactNode;
40
- };
41
- } & BaseGuidanceBlockProps;
42
- type GuidanceBlockPropsWithContent = {
43
- content: React.ReactElement;
44
- } & BaseGuidanceBlockProps;
45
- export type GuidanceBlockProps = GuidanceBlockWithText | GuidanceBlockPropsWithContent;
46
- export type GuidanceBlockState = {
47
- hidden: boolean;
48
- removed: boolean;
49
- mediaQueryLayout: string;
50
- };
51
- /**
52
- * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093807/Guidance+Block Guidance} |
53
- * {@link https://cultureamp.design/?path=/docs/components-guidanceblock--docs Storybook}
54
- */
55
- export declare const GuidanceBlock: {
56
- ({ layout, variant, withActionButtonArrow, noMaxWidth, illustrationType, smallScreenTextAlignment, actions, illustration, secondaryDismiss, ...restProps }: GuidanceBlockProps): JSX.Element;
57
- displayName: string;
58
- };
59
- export {};
@@ -1 +0,0 @@
1
- export * from "./GuidanceBlock";
@@ -1 +0,0 @@
1
- export * from "./GuidanceBlock/v1";
@@ -1 +0,0 @@
1
- export * from "./GuidanceBlock/v2";