@kaizen/components 1.67.21 → 1.68.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 (65) hide show
  1. package/dist/cjs/EmptyState/EmptyState.cjs +15 -17
  2. package/dist/cjs/EmptyState/EmptyState.module.css.cjs +20 -0
  3. package/dist/cjs/__actions__/Button/v3/Button.cjs +43 -8
  4. package/dist/cjs/__actions__/Button/v3/Button.module.css.cjs +21 -0
  5. package/dist/cjs/__actions__/Button/v3/subcomponents/ButtonContent/ButtonContent.cjs +37 -0
  6. package/dist/cjs/__actions__/Button/v3/subcomponents/ButtonContent/ButtonContent.module.css.cjs +9 -0
  7. package/dist/cjs/__actions__/Button/v3/subcomponents/PendingContent/PendingContent.cjs +35 -0
  8. package/dist/cjs/__actions__/Button/v3/subcomponents/PendingContent/PendingContent.module.css.cjs +8 -0
  9. package/dist/cjs/__overlays__/Tooltip/v3/Tooltip.cjs +2 -2
  10. package/dist/esm/EmptyState/EmptyState.mjs +15 -17
  11. package/dist/esm/EmptyState/EmptyState.module.css.mjs +18 -0
  12. package/dist/esm/__actions__/Button/v3/Button.mjs +44 -9
  13. package/dist/esm/__actions__/Button/v3/Button.module.css.mjs +19 -0
  14. package/dist/esm/__actions__/Button/v3/subcomponents/ButtonContent/ButtonContent.mjs +28 -0
  15. package/dist/esm/__actions__/Button/v3/subcomponents/ButtonContent/ButtonContent.module.css.mjs +7 -0
  16. package/dist/esm/__actions__/Button/v3/subcomponents/PendingContent/PendingContent.mjs +26 -0
  17. package/dist/esm/__actions__/Button/v3/subcomponents/PendingContent/PendingContent.module.css.mjs +6 -0
  18. package/dist/esm/__overlays__/Tooltip/v3/Tooltip.mjs +1 -1
  19. package/dist/styles.css +360 -246
  20. package/dist/types/EmptyState/EmptyState.d.ts +2 -1
  21. package/dist/types/__actions__/Button/v3/Button.d.ts +17 -4
  22. package/dist/types/__actions__/Button/v3/index.d.ts +1 -0
  23. package/dist/types/__actions__/Button/v3/subcomponents/ButtonContent/ButtonContent.d.ts +11 -0
  24. package/dist/types/__actions__/Button/v3/subcomponents/ButtonContent/index.d.ts +1 -0
  25. package/dist/types/__actions__/Button/v3/subcomponents/PendingContent/PendingContent.d.ts +5 -0
  26. package/dist/types/__actions__/Button/v3/subcomponents/PendingContent/index.d.ts +1 -0
  27. package/dist/types/__actions__/Button/v3/subcomponents/index.d.ts +2 -0
  28. package/dist/types/__actions__/Button/v3/types.d.ts +21 -0
  29. package/package.json +1 -1
  30. package/src/EmptyState/EmptyState.module.css +114 -0
  31. package/src/EmptyState/EmptyState.tsx +18 -20
  32. package/src/EmptyState/_docs/EmptyState.stickersheet.stories.tsx +55 -39
  33. package/src/__actions__/Button/v3/Button.module.css +235 -0
  34. package/src/__actions__/Button/v3/Button.tsx +92 -29
  35. package/src/__actions__/Button/v3/_docs/Button--api-specification.mdx +150 -0
  36. package/src/__actions__/Button/v3/_docs/Button--usage-guidelines.mdx +30 -0
  37. package/src/__actions__/Button/v3/_docs/Button.docs.stories.tsx +112 -50
  38. package/src/__actions__/Button/v3/_docs/Button.spec.stories.tsx +80 -120
  39. package/src/__actions__/Button/v3/_docs/Button.stickersheet.stories.tsx +183 -81
  40. package/src/__actions__/Button/v3/index.ts +1 -0
  41. package/src/__actions__/Button/v3/subcomponents/ButtonContent/ButtonContent.module.css +19 -0
  42. package/src/__actions__/Button/v3/subcomponents/ButtonContent/ButtonContent.tsx +40 -0
  43. package/src/__actions__/Button/v3/subcomponents/ButtonContent/index.ts +1 -0
  44. package/src/__actions__/Button/v3/subcomponents/PendingContent/PendingContent.module.css +16 -0
  45. package/src/__actions__/Button/v3/subcomponents/PendingContent/PendingContent.tsx +28 -0
  46. package/src/__actions__/Button/v3/subcomponents/PendingContent/index.ts +1 -0
  47. package/src/__actions__/Button/v3/subcomponents/index.ts +2 -0
  48. package/src/__actions__/Button/v3/types.ts +25 -0
  49. package/src/__actions__/Menu/v3/_docs/Menu.docs.stories.tsx +54 -18
  50. package/src/__actions__/Menu/v3/_docs/Menu.spec.stories.tsx +30 -10
  51. package/src/__actions__/Menu/v3/_docs/Menu.stories.tsx +12 -4
  52. package/src/__future__/Icon/_docs/Icon.docs.stories.tsx +7 -7
  53. package/src/__overlays__/Tooltip/v3/Tooltip.tsx +1 -1
  54. package/src/__overlays__/Tooltip/v3/_docs/Tooltip.spec.stories.tsx +2 -0
  55. package/dist/cjs/EmptyState/EmptyState.module.scss.cjs +0 -23
  56. package/dist/cjs/__actions__/Button/v3/Button.module.scss.cjs +0 -9
  57. package/dist/esm/EmptyState/EmptyState.module.scss.mjs +0 -21
  58. package/dist/esm/__actions__/Button/v3/Button.module.scss.mjs +0 -7
  59. package/src/EmptyState/EmptyState.module.scss +0 -186
  60. package/src/EmptyState/EmptyState.spec.tsx +0 -48
  61. package/src/EmptyState/_mixins.scss +0 -44
  62. package/src/__actions__/Button/v3/Button.module.scss +0 -104
  63. package/src/__actions__/Button/v3/_docs/ApiSpecification.mdx +0 -173
  64. package/src/__actions__/Button/v3/_docs/Button.mdx +0 -41
  65. package/src/__actions__/Button/v3/_docs/Button.stories.tsx +0 -98
@@ -8,7 +8,7 @@ require('../Illustration/subcomponents/Base/Base.cjs');
8
8
  require('../Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.cjs');
9
9
  var Scene = require('../Illustration/Scene/Scene.cjs');
10
10
  var Text = require('../Text/Text.cjs');
11
- var EmptyState_module = require('./EmptyState.module.scss.cjs');
11
+ var EmptyState_module = require('./EmptyState.module.css.cjs');
12
12
  function _interopDefault(e) {
13
13
  return e && e.__esModule ? e : {
14
14
  default: e
@@ -39,24 +39,25 @@ var EmptyState = function (_a) {
39
39
  id = _a.id,
40
40
  illustrationType = _a.illustrationType,
41
41
  _b = _a.variant,
42
- variant = _b === void 0 ? "informative" : _b,
43
- _c = _a.layoutContext,
44
- layoutContext = _c === void 0 ? "sidebarAndContent" : _c,
45
- headingProps = _a.headingProps,
42
+ variant = _b === void 0 ? "informative" : _b;
43
+ _a.layoutContext;
44
+ var headingProps = _a.headingProps,
46
45
  bodyText = _a.bodyText,
47
46
  straightCorners = _a.straightCorners,
48
- _d = _a.isAnimated,
49
- isAnimated = _d === void 0 ? true : _d,
50
- _e = _a.loop,
51
- loop = _e === void 0 ? false : _e,
47
+ _c = _a.isAnimated,
48
+ isAnimated = _c === void 0 ? true : _c,
49
+ _d = _a.loop,
50
+ loop = _d === void 0 ? false : _d,
52
51
  classNameOverride = _a.classNameOverride,
53
52
  props = tslib.__rest(_a, ["children", "id", "illustrationType", "variant", "layoutContext", "headingProps", "bodyText", "straightCorners", "isAnimated", "loop", "classNameOverride"]);
54
53
  var IllustrationComponent = ILLUSTRATIONS[illustrationType !== null && illustrationType !== void 0 ? illustrationType : variant];
55
54
  return React__default.default.createElement("div", tslib.__assign({
56
- className: classnames__default.default(EmptyState_module.container, illustrationType ? EmptyState_module[illustrationType] : EmptyState_module[variant], EmptyState_module[layoutContext], straightCorners && EmptyState_module.straightCorners, classNameOverride),
55
+ className: classnames__default.default(EmptyState_module.container, illustrationType ? EmptyState_module[illustrationType] : EmptyState_module[variant], straightCorners && EmptyState_module.straightCorners, classNameOverride),
57
56
  id: id
58
57
  }, props), React__default.default.createElement("div", {
59
- className: EmptyState_module.illustrationSide
58
+ className: EmptyState_module.content
59
+ }, React__default.default.createElement("div", {
60
+ className: EmptyState_module.illustrationContainer
60
61
  }, isAnimated ? React__default.default.createElement(IllustrationComponent, {
61
62
  isAnimated: true,
62
63
  loop: loop,
@@ -64,15 +65,12 @@ var EmptyState = function (_a) {
64
65
  }) : React__default.default.createElement(IllustrationComponent, {
65
66
  classNameOverride: EmptyState_module.illustration
66
67
  })), React__default.default.createElement("div", {
67
- className: EmptyState_module.textSide
68
- }, React__default.default.createElement("div", {
69
- className: EmptyState_module.textSideInner
68
+ className: EmptyState_module.textContainer
70
69
  }, headingProps && React__default.default.createElement(Heading.Heading, tslib.__assign({
71
70
  classNameOverride: EmptyState_module.heading
72
71
  }, headingProps)), React__default.default.createElement(Text.Text, {
73
- variant: "body",
74
- classNameOverride: EmptyState_module.description
75
- }, bodyText), children)));
72
+ variant: "body"
73
+ }, bodyText), children && React__default.default.createElement("span", null, children))));
76
74
  };
77
75
  EmptyState.displayName = "EmptyState";
78
76
  exports.EmptyState = EmptyState;
@@ -0,0 +1,20 @@
1
+ 'use strict';
2
+
3
+ var styles = {
4
+ "container": "EmptyState-module_container__0kOpV",
5
+ "straightCorners": "EmptyState-module_straightCorners__BNh-9",
6
+ "positive": "EmptyState-module_positive__Z2a3J",
7
+ "negative": "EmptyState-module_negative__mSmjN",
8
+ "action": "EmptyState-module_action__l1243",
9
+ "neutral": "EmptyState-module_neutral__i9IVq",
10
+ "success": "EmptyState-module_success__w9nvN",
11
+ "warning": "EmptyState-module_warning__vdEBx",
12
+ "informative": "EmptyState-module_informative__aeHUD",
13
+ "expert-advice": "EmptyState-module_expert-advice__05WOw",
14
+ "content": "EmptyState-module_content__dggps",
15
+ "illustrationContainer": "EmptyState-module_illustrationContainer__2Ch-u",
16
+ "illustration": "EmptyState-module_illustration__QSUZA",
17
+ "textContainer": "EmptyState-module_textContainer__jJ9NS",
18
+ "heading": "EmptyState-module_heading__pEPi3"
19
+ };
20
+ module.exports = styles;
@@ -4,7 +4,9 @@ var tslib = require('tslib');
4
4
  var React = require('react');
5
5
  var reactAriaComponents = require('react-aria-components');
6
6
  var mergeClassNames = require('../../../utils/mergeClassNames.cjs');
7
- var Button_module = require('./Button.module.scss.cjs');
7
+ var PendingContent = require('./subcomponents/PendingContent/PendingContent.cjs');
8
+ var ButtonContent = require('./subcomponents/ButtonContent/ButtonContent.cjs');
9
+ var Button_module = require('./Button.module.css.cjs');
8
10
  var ReversedColors = require('../../../__utilities__/ReversedColors/v3/ReversedColors.cjs');
9
11
  function _interopDefault(e) {
10
12
  return e && e.__esModule ? e : {
@@ -12,17 +14,50 @@ function _interopDefault(e) {
12
14
  };
13
15
  }
14
16
  var React__default = /*#__PURE__*/_interopDefault(React);
15
- var Button = function (_a) {
17
+ var Button = React.forwardRef(function (_a, ref) {
16
18
  var _b = _a.variant,
17
- variant = _b === void 0 ? "default" : _b,
18
- className = _a.className,
19
+ variant = _b === void 0 ? "primary" : _b,
19
20
  _c = _a.size,
20
21
  size = _c === void 0 ? "medium" : _c,
22
+ className = _a.className,
21
23
  children = _a.children,
22
- otherProps = tslib.__rest(_a, ["variant", "className", "size", "children"]);
24
+ isDisabled = _a.isDisabled,
25
+ _d = _a.isFullWidth,
26
+ isFullWidth = _d === void 0 ? false : _d,
27
+ icon = _a.icon,
28
+ iconPosition = _a.iconPosition,
29
+ _e = _a.hasHiddenLabel,
30
+ hasHiddenLabel = _e === void 0 ? false : _e,
31
+ isPending = _a.isPending,
32
+ _f = _a.hasHiddenPendingLabel,
33
+ propsHasHiddenPendingLabel = _f === void 0 ? false : _f,
34
+ pendingLabel = _a.pendingLabel,
35
+ restProps = tslib.__rest(_a, ["variant", "size", "className", "children", "isDisabled", "isFullWidth", "icon", "iconPosition", "hasHiddenLabel", "isPending", "hasHiddenPendingLabel", "pendingLabel"]);
23
36
  var isReversed = ReversedColors.useReversedColors();
37
+ var pendingProps = isPending ? {
38
+ isPending: isPending,
39
+ hasHiddenPendingLabel: hasHiddenLabel || propsHasHiddenPendingLabel,
40
+ pendingLabel: pendingLabel
41
+ } : {};
42
+ var buttonContentClass = isPending ? !hasHiddenLabel && propsHasHiddenPendingLabel ? Button_module.retainContentWidth : Button_module.hideContentWidth : undefined;
24
43
  return React__default.default.createElement(reactAriaComponents.Button, tslib.__assign({
25
- className: mergeClassNames.mergeClassNames(Button_module.button, Button_module[variant], Button_module[size], isReversed && Button_module.reversed, className)
26
- }, otherProps), children);
27
- };
44
+ ref: ref,
45
+ className: mergeClassNames.mergeClassNames(Button_module.button, Button_module[size], hasHiddenLabel && Button_module["".concat(size, "IconButton")], isDisabled && Button_module.isDisabled, isReversed ? Button_module["".concat(variant, "Reversed")] : Button_module[variant], isFullWidth && Button_module.fullWidth, className),
46
+ isDisabled: isDisabled,
47
+ isPending: isPending
48
+ }, restProps), function (racStateProps) {
49
+ var childIsFunction = typeof children === "function";
50
+ return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(ButtonContent.ButtonContent, {
51
+ size: size,
52
+ icon: icon,
53
+ iconPosition: iconPosition,
54
+ hasHiddenLabel: hasHiddenLabel,
55
+ className: buttonContentClass
56
+ }, childIsFunction ? children(racStateProps) : children), React__default.default.createElement("span", {
57
+ "aria-live": "polite"
58
+ }, pendingProps.isPending && React__default.default.createElement(PendingContent.PendingContent, tslib.__assign({}, pendingProps, {
59
+ size: size
60
+ }))));
61
+ });
62
+ });
28
63
  exports.Button = Button;
@@ -0,0 +1,21 @@
1
+ 'use strict';
2
+
3
+ var styles = {
4
+ "button": "Button-module_button__vlUCI",
5
+ "fullWidth": "Button-module_fullWidth__qIkG6",
6
+ "small": "Button-module_small__FYPwk",
7
+ "medium": "Button-module_medium__4LOhQ",
8
+ "large": "Button-module_large__MjtVH",
9
+ "smallIconButton": "Button-module_smallIconButton__4gN-i",
10
+ "mediumIconButton": "Button-module_mediumIconButton__CEXv-",
11
+ "largeIconButton": "Button-module_largeIconButton__Apt33",
12
+ "secondary": "Button-module_secondary__Mmev0",
13
+ "tertiary": "Button-module_tertiary__MJjKC",
14
+ "primaryReversed": "Button-module_primaryReversed__m4kze",
15
+ "secondaryReversed": "Button-module_secondaryReversed__Q435c",
16
+ "tertiaryReversed": "Button-module_tertiaryReversed__Q-UqR",
17
+ "isDisabled": "Button-module_isDisabled__m1eE-",
18
+ "hideContentWidth": "Button-module_hideContentWidth__-E94d",
19
+ "retainContentWidth": "Button-module_retainContentWidth__b4IEC"
20
+ };
21
+ module.exports = styles;
@@ -0,0 +1,37 @@
1
+ 'use strict';
2
+
3
+ var tslib = require('tslib');
4
+ var React = require('react');
5
+ var classnames = require('classnames');
6
+ var VisuallyHidden = require('../../../../../VisuallyHidden/VisuallyHidden.cjs');
7
+ var ButtonContent_module = require('./ButtonContent.module.css.cjs');
8
+ function _interopDefault(e) {
9
+ return e && e.__esModule ? e : {
10
+ default: e
11
+ };
12
+ }
13
+ var React__default = /*#__PURE__*/_interopDefault(React);
14
+ var classnames__default = /*#__PURE__*/_interopDefault(classnames);
15
+
16
+ /** Renders the inner content of the button, handling icon and label visibility */
17
+ var ButtonContent = function (_a) {
18
+ var children = _a.children,
19
+ hasHiddenLabel = _a.hasHiddenLabel,
20
+ _b = _a.size,
21
+ size = _b === void 0 ? "medium" : _b,
22
+ icon = _a.icon,
23
+ _c = _a.iconPosition,
24
+ iconPosition = _c === void 0 ? "start" : _c,
25
+ className = _a.className,
26
+ restProps = tslib.__rest(_a, ["children", "hasHiddenLabel", "size", "icon", "iconPosition", "className"]);
27
+ return React__default.default.createElement("span", tslib.__assign({
28
+ className: classnames__default.default(className, ButtonContent_module.buttonContent, ButtonContent_module[size])
29
+ }, restProps), icon && iconPosition === "start" && React__default.default.createElement("span", {
30
+ className: ButtonContent_module.buttonIcon
31
+ }, icon), hasHiddenLabel ? React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, children) : React__default.default.createElement("span", {
32
+ className: ButtonContent_module.buttonLabel
33
+ }, children), icon && iconPosition === "end" && React__default.default.createElement("span", {
34
+ className: ButtonContent_module.buttonIcon
35
+ }, icon));
36
+ };
37
+ exports.ButtonContent = ButtonContent;
@@ -0,0 +1,9 @@
1
+ 'use strict';
2
+
3
+ var styles = {
4
+ "buttonContent": "ButtonContent-module_buttonContent__v5mHZ",
5
+ "large": "ButtonContent-module_large__mLOdb",
6
+ "buttonLabel": "ButtonContent-module_buttonLabel__T5XAq",
7
+ "buttonIcon": "ButtonContent-module_buttonIcon__qkAX-"
8
+ };
9
+ module.exports = styles;
@@ -0,0 +1,35 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var classnames = require('classnames');
5
+ require('../../../../../Loading/LoadingGraphic/LoadingGraphic.cjs');
6
+ require('../../../../../Loading/LoadingHeading/LoadingHeading.cjs');
7
+ require('../../../../../Loading/LoadingInput/LoadingInput.cjs');
8
+ require('../../../../../Loading/LoadingParagraph/LoadingParagraph.cjs');
9
+ var LoadingSpinner = require('../../../../../Loading/LoadingSpinner/LoadingSpinner.cjs');
10
+ var VisuallyHidden = require('../../../../../VisuallyHidden/VisuallyHidden.cjs');
11
+ var PendingContent_module = require('./PendingContent.module.css.cjs');
12
+ function _interopDefault(e) {
13
+ return e && e.__esModule ? e : {
14
+ default: e
15
+ };
16
+ }
17
+ var React__default = /*#__PURE__*/_interopDefault(React);
18
+ var classnames__default = /*#__PURE__*/_interopDefault(classnames);
19
+
20
+ /** Renders the pending content of the button, handling pending label visibility and spinner positioning */
21
+ var PendingContent = function (_a) {
22
+ var pendingLabel = _a.pendingLabel,
23
+ _b = _a.hasHiddenPendingLabel,
24
+ hasHiddenPendingLabel = _b === void 0 ? false : _b,
25
+ _c = _a.size,
26
+ size = _c === void 0 ? "medium" : _c;
27
+ return React__default.default.createElement("span", {
28
+ className: classnames__default.default(PendingContent_module.pendingContent, PendingContent_module[size])
29
+ }, hasHiddenPendingLabel ? React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, pendingLabel) : React__default.default.createElement("span", null, pendingLabel), React__default.default.createElement(LoadingSpinner.LoadingSpinner, {
30
+ size: size === "small" ? "xs" : "sm",
31
+ accessibilityLabel: "",
32
+ classNameOverride: hasHiddenPendingLabel ? PendingContent_module.centerSpinner : undefined
33
+ }));
34
+ };
35
+ exports.PendingContent = PendingContent;
@@ -0,0 +1,8 @@
1
+ 'use strict';
2
+
3
+ var styles = {
4
+ "pendingContent": "PendingContent-module_pendingContent__c4IFS",
5
+ "large": "PendingContent-module_large__ypTxk",
6
+ "centerSpinner": "PendingContent-module_centerSpinner__EYn7L"
7
+ };
8
+ module.exports = styles;
@@ -2,8 +2,8 @@
2
2
 
3
3
  var tslib = require('tslib');
4
4
  var React = require('react');
5
- var reactAria = require('react-aria');
6
5
  var reactAriaComponents = require('react-aria-components');
6
+ var VisuallyHidden = require('../../../VisuallyHidden/VisuallyHidden.cjs');
7
7
  var mergeClassNames = require('../../../utils/mergeClassNames.cjs');
8
8
  var OverlayArrow = require('./OverlayArrow.cjs');
9
9
  var Tooltip_module = require('./Tooltip.module.scss.cjs');
@@ -42,7 +42,7 @@ var Tooltip = React.forwardRef(function (_a, ref) {
42
42
  className: mergeClassNames.mergeClassNames(Tooltip_module.tooltip, className, reverseColors && Tooltip_module.reversed)
43
43
  }), function (renderProps) {
44
44
  return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(OverlayArrow.OverlayArrow, null), typeof children === "function" ? children(renderProps) : children);
45
- }), shouldInlineHiddenContent ? React__default.default.createElement(reactAria.VisuallyHidden, null, typeof children === "function" ? children({
45
+ }), shouldInlineHiddenContent ? React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, typeof children === "function" ? children({
46
46
  placement: "center",
47
47
  isEntering: false,
48
48
  isExiting: false,
@@ -6,7 +6,7 @@ import '../Illustration/subcomponents/Base/Base.mjs';
6
6
  import '../Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.mjs';
7
7
  import { EmptyStatesNegative, EmptyStatesNeutral, EmptyStatesPositive, EmptyStatesInformative } from '../Illustration/Scene/Scene.mjs';
8
8
  import { Text } from '../Text/Text.mjs';
9
- import styles from './EmptyState.module.scss.mjs';
9
+ import styles from './EmptyState.module.css.mjs';
10
10
  var ILLUSTRATIONS = {
11
11
  success: EmptyStatesPositive,
12
12
  warning: EmptyStatesNegative,
@@ -31,24 +31,25 @@ const EmptyState = /*#__PURE__*/function () {
31
31
  id = _a.id,
32
32
  illustrationType = _a.illustrationType,
33
33
  _b = _a.variant,
34
- variant = _b === void 0 ? "informative" : _b,
35
- _c = _a.layoutContext,
36
- layoutContext = _c === void 0 ? "sidebarAndContent" : _c,
37
- headingProps = _a.headingProps,
34
+ variant = _b === void 0 ? "informative" : _b;
35
+ _a.layoutContext;
36
+ var headingProps = _a.headingProps,
38
37
  bodyText = _a.bodyText,
39
38
  straightCorners = _a.straightCorners,
40
- _d = _a.isAnimated,
41
- isAnimated = _d === void 0 ? true : _d,
42
- _e = _a.loop,
43
- loop = _e === void 0 ? false : _e,
39
+ _c = _a.isAnimated,
40
+ isAnimated = _c === void 0 ? true : _c,
41
+ _d = _a.loop,
42
+ loop = _d === void 0 ? false : _d,
44
43
  classNameOverride = _a.classNameOverride,
45
44
  props = __rest(_a, ["children", "id", "illustrationType", "variant", "layoutContext", "headingProps", "bodyText", "straightCorners", "isAnimated", "loop", "classNameOverride"]);
46
45
  var IllustrationComponent = ILLUSTRATIONS[illustrationType !== null && illustrationType !== void 0 ? illustrationType : variant];
47
46
  return /*#__PURE__*/React.createElement("div", __assign({
48
- className: classnames(styles.container, illustrationType ? styles[illustrationType] : styles[variant], styles[layoutContext], straightCorners && styles.straightCorners, classNameOverride),
47
+ className: classnames(styles.container, illustrationType ? styles[illustrationType] : styles[variant], straightCorners && styles.straightCorners, classNameOverride),
49
48
  id: id
50
49
  }, props), /*#__PURE__*/React.createElement("div", {
51
- className: styles.illustrationSide
50
+ className: styles.content
51
+ }, /*#__PURE__*/React.createElement("div", {
52
+ className: styles.illustrationContainer
52
53
  }, isAnimated ? ( /*#__PURE__*/React.createElement(IllustrationComponent, {
53
54
  isAnimated: true,
54
55
  loop: loop,
@@ -56,15 +57,12 @@ const EmptyState = /*#__PURE__*/function () {
56
57
  })) : ( /*#__PURE__*/React.createElement(IllustrationComponent, {
57
58
  classNameOverride: styles.illustration
58
59
  }))), /*#__PURE__*/React.createElement("div", {
59
- className: styles.textSide
60
- }, /*#__PURE__*/React.createElement("div", {
61
- className: styles.textSideInner
60
+ className: styles.textContainer
62
61
  }, headingProps && ( /*#__PURE__*/React.createElement(Heading, __assign({
63
62
  classNameOverride: styles.heading
64
63
  }, headingProps))), /*#__PURE__*/React.createElement(Text, {
65
- variant: "body",
66
- classNameOverride: styles.description
67
- }, bodyText), children)));
64
+ variant: "body"
65
+ }, bodyText), children && /*#__PURE__*/React.createElement("span", null, children))));
68
66
  };
69
67
  EmptyState.displayName = "EmptyState";
70
68
  return EmptyState;
@@ -0,0 +1,18 @@
1
+ var styles = {
2
+ "container": "EmptyState-module_container__0kOpV",
3
+ "straightCorners": "EmptyState-module_straightCorners__BNh-9",
4
+ "positive": "EmptyState-module_positive__Z2a3J",
5
+ "negative": "EmptyState-module_negative__mSmjN",
6
+ "action": "EmptyState-module_action__l1243",
7
+ "neutral": "EmptyState-module_neutral__i9IVq",
8
+ "success": "EmptyState-module_success__w9nvN",
9
+ "warning": "EmptyState-module_warning__vdEBx",
10
+ "informative": "EmptyState-module_informative__aeHUD",
11
+ "expert-advice": "EmptyState-module_expert-advice__05WOw",
12
+ "content": "EmptyState-module_content__dggps",
13
+ "illustrationContainer": "EmptyState-module_illustrationContainer__2Ch-u",
14
+ "illustration": "EmptyState-module_illustration__QSUZA",
15
+ "textContainer": "EmptyState-module_textContainer__jJ9NS",
16
+ "heading": "EmptyState-module_heading__pEPi3"
17
+ };
18
+ export { styles as default };
@@ -1,20 +1,55 @@
1
1
  import { __rest, __assign } from 'tslib';
2
- import React from 'react';
2
+ import React, { forwardRef } from 'react';
3
3
  import { Button as Button$1 } from 'react-aria-components';
4
4
  import { mergeClassNames } from '../../../utils/mergeClassNames.mjs';
5
- import styles from './Button.module.scss.mjs';
5
+ import { PendingContent } from './subcomponents/PendingContent/PendingContent.mjs';
6
+ import { ButtonContent } from './subcomponents/ButtonContent/ButtonContent.mjs';
7
+ import styles from './Button.module.css.mjs';
6
8
  import { useReversedColors } from '../../../__utilities__/ReversedColors/v3/ReversedColors.mjs';
7
- var Button = function (_a) {
9
+ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
8
10
  var _b = _a.variant,
9
- variant = _b === void 0 ? "default" : _b,
10
- className = _a.className,
11
+ variant = _b === void 0 ? "primary" : _b,
11
12
  _c = _a.size,
12
13
  size = _c === void 0 ? "medium" : _c,
14
+ className = _a.className,
13
15
  children = _a.children,
14
- otherProps = __rest(_a, ["variant", "className", "size", "children"]);
16
+ isDisabled = _a.isDisabled,
17
+ _d = _a.isFullWidth,
18
+ isFullWidth = _d === void 0 ? false : _d,
19
+ icon = _a.icon,
20
+ iconPosition = _a.iconPosition,
21
+ _e = _a.hasHiddenLabel,
22
+ hasHiddenLabel = _e === void 0 ? false : _e,
23
+ isPending = _a.isPending,
24
+ _f = _a.hasHiddenPendingLabel,
25
+ propsHasHiddenPendingLabel = _f === void 0 ? false : _f,
26
+ pendingLabel = _a.pendingLabel,
27
+ restProps = __rest(_a, ["variant", "size", "className", "children", "isDisabled", "isFullWidth", "icon", "iconPosition", "hasHiddenLabel", "isPending", "hasHiddenPendingLabel", "pendingLabel"]);
15
28
  var isReversed = useReversedColors();
29
+ var pendingProps = isPending ? {
30
+ isPending: isPending,
31
+ hasHiddenPendingLabel: hasHiddenLabel || propsHasHiddenPendingLabel,
32
+ pendingLabel: pendingLabel
33
+ } : {};
34
+ var buttonContentClass = isPending ? !hasHiddenLabel && propsHasHiddenPendingLabel ? styles.retainContentWidth : styles.hideContentWidth : undefined;
16
35
  return /*#__PURE__*/React.createElement(Button$1, __assign({
17
- className: mergeClassNames(styles.button, styles[variant], styles[size], isReversed && styles.reversed, className)
18
- }, otherProps), children);
19
- };
36
+ ref: ref,
37
+ className: mergeClassNames(styles.button, styles[size], hasHiddenLabel && styles["".concat(size, "IconButton")], isDisabled && styles.isDisabled, isReversed ? styles["".concat(variant, "Reversed")] : styles[variant], isFullWidth && styles.fullWidth, className),
38
+ isDisabled: isDisabled,
39
+ isPending: isPending
40
+ }, restProps), function (racStateProps) {
41
+ var childIsFunction = typeof children === "function";
42
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonContent, {
43
+ size: size,
44
+ icon: icon,
45
+ iconPosition: iconPosition,
46
+ hasHiddenLabel: hasHiddenLabel,
47
+ className: buttonContentClass
48
+ }, childIsFunction ? children(racStateProps) : children), /*#__PURE__*/React.createElement("span", {
49
+ "aria-live": "polite"
50
+ }, pendingProps.isPending && ( /*#__PURE__*/React.createElement(PendingContent, __assign({}, pendingProps, {
51
+ size: size
52
+ })))));
53
+ });
54
+ });
20
55
  export { Button };
@@ -0,0 +1,19 @@
1
+ var styles = {
2
+ "button": "Button-module_button__vlUCI",
3
+ "fullWidth": "Button-module_fullWidth__qIkG6",
4
+ "small": "Button-module_small__FYPwk",
5
+ "medium": "Button-module_medium__4LOhQ",
6
+ "large": "Button-module_large__MjtVH",
7
+ "smallIconButton": "Button-module_smallIconButton__4gN-i",
8
+ "mediumIconButton": "Button-module_mediumIconButton__CEXv-",
9
+ "largeIconButton": "Button-module_largeIconButton__Apt33",
10
+ "secondary": "Button-module_secondary__Mmev0",
11
+ "tertiary": "Button-module_tertiary__MJjKC",
12
+ "primaryReversed": "Button-module_primaryReversed__m4kze",
13
+ "secondaryReversed": "Button-module_secondaryReversed__Q435c",
14
+ "tertiaryReversed": "Button-module_tertiaryReversed__Q-UqR",
15
+ "isDisabled": "Button-module_isDisabled__m1eE-",
16
+ "hideContentWidth": "Button-module_hideContentWidth__-E94d",
17
+ "retainContentWidth": "Button-module_retainContentWidth__b4IEC"
18
+ };
19
+ export { styles as default };
@@ -0,0 +1,28 @@
1
+ import { __rest, __assign } from 'tslib';
2
+ import React from 'react';
3
+ import classnames from 'classnames';
4
+ import { VisuallyHidden } from '../../../../../VisuallyHidden/VisuallyHidden.mjs';
5
+ import styles from './ButtonContent.module.css.mjs';
6
+
7
+ /** Renders the inner content of the button, handling icon and label visibility */
8
+ var ButtonContent = function (_a) {
9
+ var children = _a.children,
10
+ hasHiddenLabel = _a.hasHiddenLabel,
11
+ _b = _a.size,
12
+ size = _b === void 0 ? "medium" : _b,
13
+ icon = _a.icon,
14
+ _c = _a.iconPosition,
15
+ iconPosition = _c === void 0 ? "start" : _c,
16
+ className = _a.className,
17
+ restProps = __rest(_a, ["children", "hasHiddenLabel", "size", "icon", "iconPosition", "className"]);
18
+ return /*#__PURE__*/React.createElement("span", __assign({
19
+ className: classnames(className, styles.buttonContent, styles[size])
20
+ }, restProps), icon && iconPosition === "start" && ( /*#__PURE__*/React.createElement("span", {
21
+ className: styles.buttonIcon
22
+ }, icon)), hasHiddenLabel ? ( /*#__PURE__*/React.createElement(VisuallyHidden, null, children)) : ( /*#__PURE__*/React.createElement("span", {
23
+ className: styles.buttonLabel
24
+ }, children)), icon && iconPosition === "end" && ( /*#__PURE__*/React.createElement("span", {
25
+ className: styles.buttonIcon
26
+ }, icon)));
27
+ };
28
+ export { ButtonContent };
@@ -0,0 +1,7 @@
1
+ var styles = {
2
+ "buttonContent": "ButtonContent-module_buttonContent__v5mHZ",
3
+ "large": "ButtonContent-module_large__mLOdb",
4
+ "buttonLabel": "ButtonContent-module_buttonLabel__T5XAq",
5
+ "buttonIcon": "ButtonContent-module_buttonIcon__qkAX-"
6
+ };
7
+ export { styles as default };
@@ -0,0 +1,26 @@
1
+ import React from 'react';
2
+ import classnames from 'classnames';
3
+ import '../../../../../Loading/LoadingGraphic/LoadingGraphic.mjs';
4
+ import '../../../../../Loading/LoadingHeading/LoadingHeading.mjs';
5
+ import '../../../../../Loading/LoadingInput/LoadingInput.mjs';
6
+ import '../../../../../Loading/LoadingParagraph/LoadingParagraph.mjs';
7
+ import { LoadingSpinner } from '../../../../../Loading/LoadingSpinner/LoadingSpinner.mjs';
8
+ import { VisuallyHidden } from '../../../../../VisuallyHidden/VisuallyHidden.mjs';
9
+ import styles from './PendingContent.module.css.mjs';
10
+
11
+ /** Renders the pending content of the button, handling pending label visibility and spinner positioning */
12
+ var PendingContent = function (_a) {
13
+ var pendingLabel = _a.pendingLabel,
14
+ _b = _a.hasHiddenPendingLabel,
15
+ hasHiddenPendingLabel = _b === void 0 ? false : _b,
16
+ _c = _a.size,
17
+ size = _c === void 0 ? "medium" : _c;
18
+ return /*#__PURE__*/React.createElement("span", {
19
+ className: classnames(styles.pendingContent, styles[size])
20
+ }, hasHiddenPendingLabel ? ( /*#__PURE__*/React.createElement(VisuallyHidden, null, pendingLabel)) : ( /*#__PURE__*/React.createElement("span", null, pendingLabel)), /*#__PURE__*/React.createElement(LoadingSpinner, {
21
+ size: size === "small" ? "xs" : "sm",
22
+ accessibilityLabel: "",
23
+ classNameOverride: hasHiddenPendingLabel ? styles.centerSpinner : undefined
24
+ }));
25
+ };
26
+ export { PendingContent };
@@ -0,0 +1,6 @@
1
+ var styles = {
2
+ "pendingContent": "PendingContent-module_pendingContent__c4IFS",
3
+ "large": "PendingContent-module_large__ypTxk",
4
+ "centerSpinner": "PendingContent-module_centerSpinner__EYn7L"
5
+ };
6
+ export { styles as default };
@@ -1,8 +1,8 @@
1
1
  import { __rest, __assign } from 'tslib';
2
2
  import React, { forwardRef, useContext, useState, useLayoutEffect } from 'react';
3
- import { VisuallyHidden } from 'react-aria';
4
3
  import { useContextProps, TooltipContext, TooltipTriggerStateContext, Tooltip as Tooltip$1 } from 'react-aria-components';
5
4
  export { TooltipContext } from 'react-aria-components';
5
+ import { VisuallyHidden } from '../../../VisuallyHidden/VisuallyHidden.mjs';
6
6
  import { mergeClassNames } from '../../../utils/mergeClassNames.mjs';
7
7
  import { OverlayArrow } from './OverlayArrow.mjs';
8
8
  import styles from './Tooltip.module.scss.mjs';