@kaizen/components 1.64.8 → 1.64.10

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.
@@ -3,8 +3,8 @@
3
3
  var tslib = require('tslib');
4
4
  var React = require('react');
5
5
  var GenericTile = require('../subcomponents/GenericTile/GenericTile.cjs');
6
- var Action = require('../subcomponents/GenericTile/Action.cjs');
7
6
  var MultiActionTile_module = require('./MultiActionTile.module.scss.cjs');
7
+ var Button = require('../../__actions__/Button/v1/Button/Button.cjs');
8
8
  function _interopDefault(e) {
9
9
  return e && e.__esModule ? e : {
10
10
  default: e
@@ -16,12 +16,9 @@ var renderActions = function (primaryAction, secondaryAction) {
16
16
  className: MultiActionTile_module.actions
17
17
  }, secondaryAction && React__default.default.createElement("div", {
18
18
  className: MultiActionTile_module.secondaryAction
19
- }, React__default.default.createElement(Action, {
20
- action: secondaryAction,
19
+ }, React__default.default.createElement(Button.Button, tslib.__assign({
21
20
  secondary: true
22
- })), React__default.default.createElement(Action, {
23
- action: primaryAction
24
- }));
21
+ }, secondaryAction))), React__default.default.createElement(Button.Button, tslib.__assign({}, primaryAction)));
25
22
  };
26
23
  /**
27
24
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#MultiActionTile.1 Guidance} |
@@ -8,9 +8,9 @@ require('../../../Icon/subcomponents/SVG/SVG.cjs');
8
8
  var ArrowBackwardIcon = require('../../../Icon/ArrowBackwardIcon.cjs');
9
9
  var InformationIcon = require('../../../Icon/InformationIcon.cjs');
10
10
  var Text = require('../../../Text/Text.cjs');
11
- var Action = require('./Action.cjs');
12
11
  var GenericTile_module = require('./GenericTile.module.scss.cjs');
13
12
  var IconButton = require('../../../__actions__/Button/v1/IconButton/IconButton.cjs');
13
+ var Button = require('../../../__actions__/Button/v1/Button/Button.cjs');
14
14
  function _interopDefault(e) {
15
15
  return e && e.__esModule ? e : {
16
16
  default: e
@@ -47,18 +47,6 @@ var GenericTile = function (_a) {
47
47
  color: "dark-reduced-opacity"
48
48
  }, metadata)));
49
49
  };
50
- var renderActions = function (primaryAction, secondaryAction, disabled) {
51
- return React__default.default.createElement("div", {
52
- className: GenericTile_module.actions
53
- }, secondaryAction && React__default.default.createElement(Action, {
54
- action: secondaryAction,
55
- secondary: true,
56
- disabled: disabled
57
- }), primaryAction && React__default.default.createElement(Action, {
58
- action: primaryAction,
59
- disabled: disabled
60
- }));
61
- };
62
50
  var renderFront = function () {
63
51
  return React__default.default.createElement("div", {
64
52
  className: classnames__default.default(GenericTile_module.face, GenericTile_module.faceFront, mood ? GenericTile_module[mood] : GenericTile_module[variant])
@@ -86,7 +74,14 @@ var GenericTile = function (_a) {
86
74
  variant: "body"
87
75
  }, informationProp.text), (informationProp.primaryAction || informationProp.secondaryAction) && React__default.default.createElement("div", {
88
76
  className: GenericTile_module.footer
89
- }, renderActions(informationProp.primaryAction, informationProp.secondaryAction, !isFlipped)));
77
+ }, React__default.default.createElement("div", {
78
+ className: GenericTile_module.actions
79
+ }, informationProp.secondaryAction && React__default.default.createElement(Button.Button, tslib.__assign({
80
+ secondary: true,
81
+ disabled: !isFlipped
82
+ }, informationProp.secondaryAction)), informationProp.primaryAction && React__default.default.createElement(Button.Button, tslib.__assign({
83
+ disabled: !isFlipped
84
+ }, informationProp.primaryAction)))));
90
85
  }
91
86
  return informationProp;
92
87
  };
@@ -1,19 +1,16 @@
1
1
  import { __rest, __assign } from 'tslib';
2
2
  import React from 'react';
3
3
  import { GenericTile } from '../subcomponents/GenericTile/GenericTile.mjs';
4
- import Action from '../subcomponents/GenericTile/Action.mjs';
5
4
  import styles from './MultiActionTile.module.scss.mjs';
5
+ import { Button } from '../../__actions__/Button/v1/Button/Button.mjs';
6
6
  var renderActions = function (primaryAction, secondaryAction) {
7
7
  return /*#__PURE__*/React.createElement("div", {
8
8
  className: styles.actions
9
9
  }, secondaryAction && ( /*#__PURE__*/React.createElement("div", {
10
10
  className: styles.secondaryAction
11
- }, /*#__PURE__*/React.createElement(Action, {
12
- action: secondaryAction,
11
+ }, /*#__PURE__*/React.createElement(Button, __assign({
13
12
  secondary: true
14
- }))), /*#__PURE__*/React.createElement(Action, {
15
- action: primaryAction
16
- }));
13
+ }, secondaryAction)))), /*#__PURE__*/React.createElement(Button, __assign({}, primaryAction)));
17
14
  };
18
15
  /**
19
16
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#MultiActionTile.1 Guidance} |
@@ -6,9 +6,9 @@ import '../../../Icon/subcomponents/SVG/SVG.mjs';
6
6
  import { ArrowBackwardIcon } from '../../../Icon/ArrowBackwardIcon.mjs';
7
7
  import { InformationIcon } from '../../../Icon/InformationIcon.mjs';
8
8
  import { Text } from '../../../Text/Text.mjs';
9
- import Action from './Action.mjs';
10
9
  import styles from './GenericTile.module.scss.mjs';
11
10
  import { IconButton } from '../../../__actions__/Button/v1/IconButton/IconButton.mjs';
11
+ import { Button } from '../../../__actions__/Button/v1/Button/Button.mjs';
12
12
  const GenericTile = /*#__PURE__*/function () {
13
13
  const GenericTile = function (_a) {
14
14
  var children = _a.children,
@@ -39,18 +39,6 @@ const GenericTile = /*#__PURE__*/function () {
39
39
  color: "dark-reduced-opacity"
40
40
  }, metadata))));
41
41
  };
42
- var renderActions = function (primaryAction, secondaryAction, disabled) {
43
- return /*#__PURE__*/React.createElement("div", {
44
- className: styles.actions
45
- }, secondaryAction && ( /*#__PURE__*/React.createElement(Action, {
46
- action: secondaryAction,
47
- secondary: true,
48
- disabled: disabled
49
- })), primaryAction && /*#__PURE__*/React.createElement(Action, {
50
- action: primaryAction,
51
- disabled: disabled
52
- }));
53
- };
54
42
  var renderFront = function () {
55
43
  return /*#__PURE__*/React.createElement("div", {
56
44
  className: classnames(styles.face, styles.faceFront, mood ? styles[mood] : styles[variant])
@@ -78,7 +66,14 @@ const GenericTile = /*#__PURE__*/function () {
78
66
  variant: "body"
79
67
  }, informationProp.text), (informationProp.primaryAction || informationProp.secondaryAction) && ( /*#__PURE__*/React.createElement("div", {
80
68
  className: styles.footer
81
- }, renderActions(informationProp.primaryAction, informationProp.secondaryAction, !isFlipped))));
69
+ }, /*#__PURE__*/React.createElement("div", {
70
+ className: styles.actions
71
+ }, informationProp.secondaryAction && ( /*#__PURE__*/React.createElement(Button, __assign({
72
+ secondary: true,
73
+ disabled: !isFlipped
74
+ }, informationProp.secondaryAction))), informationProp.primaryAction && ( /*#__PURE__*/React.createElement(Button, __assign({
75
+ disabled: !isFlipped
76
+ }, informationProp.primaryAction)))))));
82
77
  }
83
78
  return informationProp;
84
79
  };
package/dist/styles.css CHANGED
@@ -83,35 +83,39 @@
83
83
  opacity: 1;
84
84
  }
85
85
  }
86
- .Menu-module_menu__iHYqh {
87
- background-color: var(--color-white);
88
- color: var(--color-purple-800);
89
- width: 248px;
90
- max-height: 22rem;
91
- overflow: auto;
92
- padding-block: var(--spacing-6);
93
- outline: none;
94
- border-radius: var(--border-solid-border-radius);
95
- box-shadow: var(--shadow-large-box-shadow);
86
+ .MenuItem-module_item__DPerF {
87
+ font-family: var(--typography-paragraph-body-font-family);
88
+ font-size: var(--typography-paragraph-body-font-size);
89
+ letter-spacing: var(--typography-paragraph-body-letter-spacing);
90
+ font-weight: var(--typography-paragraph-body-font-weight);
91
+ line-height: var(--typography-paragraph-body-line-height);
92
+ color: rgba(var(--color-purple-800-rgb), 0.7);
93
+ padding: var(--spacing-6) var(--spacing-8);
94
+ border: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) transparent;
95
+ border-radius: 4px;
96
+ display: flex;
97
+ gap: 0 var(--spacing-8);
98
+ align-items: center;
99
+ margin-inline: var(--spacing-6);
100
+ text-decoration: none;
101
+ cursor: pointer;
96
102
  }
97
103
 
98
- .Menu-module_menu__iHYqh .react-aria-Header {
99
- font-family: var(--typography-heading-6-font-family);
100
- font-size: var(--typography-heading-6-font-size);
101
- letter-spacing: var(--typography-heading-6-letter-spacing);
102
- font-weight: var(--typography-heading-6-font-weight);
103
- line-height: var(--typography-heading-6-line-height);
104
- padding: var(--spacing-6) 10px;
105
- margin-inline: var(--spacing-6);
104
+ .MenuItem-module_iconWrapper__bRdQN {
105
+ flex-shrink: 0;
106
+ display: flex;
107
+ align-items: center;
106
108
  }
107
109
 
108
- .Menu-module_menu__iHYqh section:not(:last-of-type)::after {
109
- width: 100%;
110
- height: 1px;
111
- background-color: var(--border-solid-border-color);
112
- content: "";
113
- display: block;
114
- margin-block: var(--spacing-6);
110
+ .MenuItem-module_item__DPerF[data-focused] {
111
+ background-color: var(--color-blue-100);
112
+ color: var(--color-blue-500);
113
+ outline: none;
114
+ border-color: var(--color-blue-500);
115
+ }
116
+
117
+ .MenuItem-module_item__DPerF[data-disabled] {
118
+ opacity: 0.3;
115
119
  }
116
120
  .Button-module_button__QOSYH {
117
121
  --button-min-height-width: var(--spacing-48);
@@ -204,39 +208,35 @@
204
208
  .Focusable-module_focusableWrapper__NfuIi {
205
209
  display: inline-flex;
206
210
  }
207
- .MenuItem-module_item__DPerF {
208
- font-family: var(--typography-paragraph-body-font-family);
209
- font-size: var(--typography-paragraph-body-font-size);
210
- letter-spacing: var(--typography-paragraph-body-letter-spacing);
211
- font-weight: var(--typography-paragraph-body-font-weight);
212
- line-height: var(--typography-paragraph-body-line-height);
213
- color: rgba(var(--color-purple-800-rgb), 0.7);
214
- padding: var(--spacing-6) var(--spacing-8);
215
- border: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) transparent;
216
- border-radius: 4px;
217
- display: flex;
218
- gap: 0 var(--spacing-8);
219
- align-items: center;
220
- margin-inline: var(--spacing-6);
221
- text-decoration: none;
222
- cursor: pointer;
223
- }
224
-
225
- .MenuItem-module_iconWrapper__bRdQN {
226
- flex-shrink: 0;
227
- display: flex;
228
- align-items: center;
211
+ .Menu-module_menu__iHYqh {
212
+ background-color: var(--color-white);
213
+ color: var(--color-purple-800);
214
+ width: 248px;
215
+ max-height: 22rem;
216
+ overflow: auto;
217
+ padding-block: var(--spacing-6);
218
+ outline: none;
219
+ border-radius: var(--border-solid-border-radius);
220
+ box-shadow: var(--shadow-large-box-shadow);
229
221
  }
230
222
 
231
- .MenuItem-module_item__DPerF[data-focused] {
232
- background-color: var(--color-blue-100);
233
- color: var(--color-blue-500);
234
- outline: none;
235
- border-color: var(--color-blue-500);
223
+ .Menu-module_menu__iHYqh .react-aria-Header {
224
+ font-family: var(--typography-heading-6-font-family);
225
+ font-size: var(--typography-heading-6-font-size);
226
+ letter-spacing: var(--typography-heading-6-letter-spacing);
227
+ font-weight: var(--typography-heading-6-font-weight);
228
+ line-height: var(--typography-heading-6-line-height);
229
+ padding: var(--spacing-6) 10px;
230
+ margin-inline: var(--spacing-6);
236
231
  }
237
232
 
238
- .MenuItem-module_item__DPerF[data-disabled] {
239
- opacity: 0.3;
233
+ .Menu-module_menu__iHYqh section:not(:last-of-type)::after {
234
+ width: 100%;
235
+ height: 1px;
236
+ background-color: var(--border-solid-border-color);
237
+ content: "";
238
+ display: block;
239
+ margin-block: var(--spacing-6);
240
240
  }
241
241
  .SVG-module_icon__8J5Ev {
242
242
  width: 20px;
@@ -2,17 +2,7 @@ import React, { HTMLAttributes } from "react";
2
2
  import { AllowedHeadingTags } from "../../../Heading";
3
3
  import { GenericButtonProps } from "../../../__actions__/Button/v1/GenericButton";
4
4
  import { OverrideClassName } from "../../../types/OverrideClassName";
5
- export type TileAction = {
6
- label: string;
7
- onClick?: GenericButtonProps["onClick"];
8
- href?: string;
9
- icon?: JSX.Element;
10
- /**
11
- * @deprecated use data-testid instead
12
- */
13
- automationId?: string;
14
- newTabAndIUnderstandTheAccessibilityImplications?: boolean;
15
- } & HTMLAttributes<HTMLButtonElement>;
5
+ export type TileAction = GenericButtonProps;
16
6
  export type TileInformation = {
17
7
  text: string;
18
8
  primaryAction?: TileAction;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kaizen/components",
3
- "version": "1.64.8",
3
+ "version": "1.64.10",
4
4
  "description": "Kaizen component library",
5
5
  "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
6
6
  "homepage": "https://cultureamp.design",
@@ -33,7 +33,6 @@
33
33
  "bin": {
34
34
  "kaizen-codemod": "./bin/codemod.sh"
35
35
  },
36
- "type": "module",
37
36
  "dependencies": {
38
37
  "@floating-ui/react-dom": "^2.1.2",
39
38
  "@headlessui/react": "<=1.5.0",
@@ -120,8 +119,8 @@
120
119
  "svgo": "^3.3.2",
121
120
  "tslib": "^2.7.0",
122
121
  "tsx": "^4.17.0",
123
- "@kaizen/package-bundler": "1.1.6",
124
- "@kaizen/design-tokens": "10.6.2"
122
+ "@kaizen/design-tokens": "10.6.2",
123
+ "@kaizen/package-bundler": "1.1.6"
125
124
  },
126
125
  "peerDependencies": {
127
126
  "@cultureamp/i18n-react-intl": "^2.5.9",
@@ -1,10 +1,10 @@
1
1
  import React from "react"
2
+ import { Button } from "~components/__actions__/v2"
2
3
  import {
3
4
  GenericTile,
4
5
  GenericTileProps,
5
6
  TileAction,
6
7
  } from "../subcomponents/GenericTile"
7
- import Action from "../subcomponents/GenericTile/Action"
8
8
  import styles from "./MultiActionTile.module.scss"
9
9
 
10
10
  export type MultiActionTileProps = {
@@ -19,10 +19,10 @@ const renderActions = (
19
19
  <div className={styles.actions}>
20
20
  {secondaryAction && (
21
21
  <div className={styles.secondaryAction}>
22
- <Action action={secondaryAction} secondary />
22
+ <Button secondary {...secondaryAction} />
23
23
  </div>
24
24
  )}
25
- <Action action={primaryAction} />
25
+ <Button {...primaryAction} />
26
26
  </div>
27
27
  )
28
28
 
@@ -4,22 +4,11 @@ import { AllowedHeadingTags, Heading } from "~components/Heading"
4
4
  import { ArrowBackwardIcon, InformationIcon } from "~components/Icon"
5
5
  import { Text } from "~components/Text"
6
6
  import { GenericButtonProps } from "~components/__actions__/Button/v1/GenericButton"
7
- import { IconButton } from "~components/__actions__/v2"
7
+ import { IconButton, Button } from "~components/__actions__/v2"
8
8
  import { OverrideClassName } from "~components/types/OverrideClassName"
9
- import Action from "./Action"
10
9
  import styles from "./GenericTile.module.scss"
11
10
 
12
- export type TileAction = {
13
- label: string
14
- onClick?: GenericButtonProps["onClick"]
15
- href?: string
16
- icon?: JSX.Element
17
- /**
18
- * @deprecated use data-testid instead
19
- */
20
- automationId?: string
21
- newTabAndIUnderstandTheAccessibilityImplications?: boolean
22
- } & HTMLAttributes<HTMLButtonElement>
11
+ export type TileAction = GenericButtonProps
23
12
 
24
13
  export type TileInformation = {
25
14
  text: string
@@ -80,19 +69,6 @@ export const GenericTile = ({
80
69
  </div>
81
70
  )
82
71
 
83
- const renderActions = (
84
- primaryAction?: TileAction,
85
- secondaryAction?: TileAction,
86
- disabled?: boolean
87
- ): JSX.Element => (
88
- <div className={styles.actions}>
89
- {secondaryAction && (
90
- <Action action={secondaryAction} secondary disabled={disabled} />
91
- )}
92
- {primaryAction && <Action action={primaryAction} disabled={disabled} />}
93
- </div>
94
- )
95
-
96
72
  const renderFront = (): JSX.Element => (
97
73
  <div
98
74
  className={classnames(
@@ -132,11 +108,21 @@ export const GenericTile = ({
132
108
  {(informationProp.primaryAction ||
133
109
  informationProp.secondaryAction) && (
134
110
  <div className={styles.footer}>
135
- {renderActions(
136
- informationProp.primaryAction,
137
- informationProp.secondaryAction,
138
- !isFlipped
139
- )}
111
+ <div className={styles.actions}>
112
+ {informationProp.secondaryAction && (
113
+ <Button
114
+ secondary
115
+ disabled={!isFlipped}
116
+ {...informationProp.secondaryAction}
117
+ />
118
+ )}
119
+ {informationProp.primaryAction && (
120
+ <Button
121
+ disabled={!isFlipped}
122
+ {...informationProp.primaryAction}
123
+ />
124
+ )}
125
+ </div>
140
126
  </div>
141
127
  )}
142
128
  </>
@@ -1,34 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var Button = require('../../../__actions__/Button/v1/Button/Button.cjs');
5
- function _interopDefault(e) {
6
- return e && e.__esModule ? e : {
7
- default: e
8
- };
9
- }
10
- var React__default = /*#__PURE__*/_interopDefault(React);
11
- var Action = function (_a) {
12
- var action = _a.action,
13
- _b = _a.secondary,
14
- secondary = _b === void 0 ? false : _b,
15
- _c = _a.disabled,
16
- disabled = _c === void 0 ? false : _c;
17
- var label = action.label,
18
- href = action.href,
19
- onClick = action.onClick,
20
- icon = action.icon,
21
- automationId = action.automationId,
22
- newTabAndIUnderstandTheAccessibilityImplications = action.newTabAndIUnderstandTheAccessibilityImplications;
23
- return React__default.default.createElement(Button.Button, {
24
- label: label,
25
- href: href,
26
- onClick: onClick,
27
- secondary: secondary,
28
- icon: icon,
29
- "data-automation-id": automationId,
30
- disabled: disabled,
31
- newTabAndIUnderstandTheAccessibilityImplications: newTabAndIUnderstandTheAccessibilityImplications
32
- });
33
- };
34
- module.exports = Action;
@@ -1,26 +0,0 @@
1
- import React from 'react';
2
- import { Button } from '../../../__actions__/Button/v1/Button/Button.mjs';
3
- var Action = function (_a) {
4
- var action = _a.action,
5
- _b = _a.secondary,
6
- secondary = _b === void 0 ? false : _b,
7
- _c = _a.disabled,
8
- disabled = _c === void 0 ? false : _c;
9
- var label = action.label,
10
- href = action.href,
11
- onClick = action.onClick,
12
- icon = action.icon,
13
- automationId = action.automationId,
14
- newTabAndIUnderstandTheAccessibilityImplications = action.newTabAndIUnderstandTheAccessibilityImplications;
15
- return /*#__PURE__*/React.createElement(Button, {
16
- label: label,
17
- href: href,
18
- onClick: onClick,
19
- secondary: secondary,
20
- icon: icon,
21
- "data-automation-id": automationId,
22
- disabled: disabled,
23
- newTabAndIUnderstandTheAccessibilityImplications: newTabAndIUnderstandTheAccessibilityImplications
24
- });
25
- };
26
- export { Action as default };
@@ -1,8 +0,0 @@
1
- import { TileAction } from "./GenericTile";
2
- type ActionProps = {
3
- action: TileAction;
4
- secondary?: boolean;
5
- disabled?: boolean;
6
- };
7
- declare const Action: ({ action, secondary, disabled, }: ActionProps) => JSX.Element;
8
- export default Action;
@@ -1,41 +0,0 @@
1
- import React from "react"
2
- import { Button } from "~components/__actions__/v2"
3
- import { TileAction } from "./GenericTile"
4
-
5
- type ActionProps = {
6
- action: TileAction
7
- secondary?: boolean
8
- disabled?: boolean
9
- }
10
-
11
- const Action = ({
12
- action,
13
- secondary = false,
14
- disabled = false,
15
- }: ActionProps): JSX.Element => {
16
- const {
17
- label,
18
- href,
19
- onClick,
20
- icon,
21
- automationId,
22
- newTabAndIUnderstandTheAccessibilityImplications,
23
- } = action
24
-
25
- return (
26
- <Button
27
- label={label}
28
- href={href}
29
- onClick={onClick}
30
- secondary={secondary}
31
- icon={icon}
32
- data-automation-id={automationId}
33
- disabled={disabled}
34
- newTabAndIUnderstandTheAccessibilityImplications={
35
- newTabAndIUnderstandTheAccessibilityImplications
36
- }
37
- />
38
- )
39
- }
40
-
41
- export default Action