@kaizen/components 0.0.0-canary-guidance-block-codemod-20251215033932 → 0.0.0-canary-01-titleblock-20251216220648

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 (40) hide show
  1. package/codemods/migrateGuidanceBlockActionsToActionsSlot/transformActionsToActionsSlot.spec.ts +105 -0
  2. package/codemods/utils/transformV1ButtonPropsToButtonOrLinkButton.ts +4 -14
  3. package/dist/cjs/src/MenuV1/index.cjs +4 -3
  4. package/dist/cjs/src/TitleBlock/TitleBlock.cjs +32 -36
  5. package/dist/cjs/src/TitleBlock/TitleBlock.module.scss.cjs +5 -1
  6. package/dist/cjs/src/TitleBlock/subcomponents/MainActions.cjs +90 -45
  7. package/dist/cjs/src/TitleBlock/subcomponents/MainActions.module.scss.cjs +3 -1
  8. package/dist/cjs/src/TitleBlock/subcomponents/SecondaryActions.cjs +51 -14
  9. package/dist/esm/src/MenuV1/index.mjs +5 -3
  10. package/dist/esm/src/TitleBlock/TitleBlock.mjs +33 -37
  11. package/dist/esm/src/TitleBlock/TitleBlock.module.scss.mjs +5 -1
  12. package/dist/esm/src/TitleBlock/subcomponents/MainActions.mjs +92 -47
  13. package/dist/esm/src/TitleBlock/subcomponents/MainActions.module.scss.mjs +3 -1
  14. package/dist/esm/src/TitleBlock/subcomponents/SecondaryActions.mjs +51 -14
  15. package/dist/styles.css +89 -210
  16. package/dist/types/TitleBlock/TitleBlock.d.ts +1 -1
  17. package/dist/types/TitleBlock/subcomponents/MainActions.d.ts +4 -3
  18. package/package.json +1 -1
  19. package/src/Avatar/Avatar.module.css +1 -0
  20. package/src/TitleBlock/TitleBlock.module.scss +63 -19
  21. package/src/TitleBlock/TitleBlock.spec.tsx +33 -461
  22. package/src/TitleBlock/TitleBlock.tsx +7 -24
  23. package/src/TitleBlock/_docs/TitleBlock.stories.tsx +59 -12
  24. package/src/TitleBlock/_mixins.scss +6 -0
  25. package/src/TitleBlock/subcomponents/MainActions.module.scss +20 -2
  26. package/src/TitleBlock/subcomponents/MainActions.tsx +127 -70
  27. package/src/TitleBlock/subcomponents/SecondaryActions.tsx +105 -45
  28. package/src/TitleBlock/subcomponents/Toolbar.tsx +1 -0
  29. package/dist/cjs/src/MenuV1/subcomponents/MenuHeading/MenuHeading.cjs +0 -27
  30. package/dist/cjs/src/MenuV1/subcomponents/MenuHeading/MenuHeading.module.scss.cjs +0 -6
  31. package/dist/cjs/src/TitleBlock/subcomponents/MobileActions.cjs +0 -306
  32. package/dist/cjs/src/TitleBlock/subcomponents/MobileActions.module.scss.cjs +0 -16
  33. package/dist/esm/src/MenuV1/subcomponents/MenuHeading/MenuHeading.mjs +0 -21
  34. package/dist/esm/src/MenuV1/subcomponents/MenuHeading/MenuHeading.module.scss.mjs +0 -4
  35. package/dist/esm/src/TitleBlock/subcomponents/MobileActions.mjs +0 -300
  36. package/dist/esm/src/TitleBlock/subcomponents/MobileActions.module.scss.mjs +0 -14
  37. package/dist/types/TitleBlock/subcomponents/MobileActions.d.ts +0 -14
  38. package/src/TitleBlock/subcomponents/MobileActions.module.scss +0 -208
  39. package/src/TitleBlock/subcomponents/MobileActions.spec.tsx +0 -210
  40. package/src/TitleBlock/subcomponents/MobileActions.tsx +0 -472
@@ -1,27 +0,0 @@
1
- 'use strict';
2
-
3
- var tslib = require('tslib');
4
- var React = require('react');
5
- var classnames = require('classnames');
6
- var Heading = require('../../../Heading/Heading.cjs');
7
- var MenuHeading_module = require('./MenuHeading.module.scss.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
- var MenuHeading = function (_a) {
16
- var id = _a.id,
17
- classNameOverride = _a.classNameOverride,
18
- restProps = tslib.__rest(_a, ["id", "classNameOverride"]);
19
- return React__default.default.createElement(Heading.Heading, tslib.__assign({
20
- id: id,
21
- variant: "heading-6",
22
- tag: "span",
23
- classNameOverride: classnames__default.default(MenuHeading_module.heading, classNameOverride)
24
- }, restProps));
25
- };
26
- MenuHeading.displayName = 'MenuHeading';
27
- exports.MenuHeading = MenuHeading;
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var styles = {
4
- "heading": "MenuHeading-module_heading__hrHGy"
5
- };
6
- module.exports = styles;
@@ -1,306 +0,0 @@
1
- 'use strict';
2
-
3
- var tslib = require('tslib');
4
- var React = require('react');
5
- var classnames = require('classnames');
6
- var reactFocusOn = require('react-focus-on');
7
- var Icon = require('../../Icon/Icon.cjs');
8
- var index = require('../../MenuV1/index.cjs');
9
- var constants = require('../constants.cjs');
10
- var utils = require('../utils.cjs');
11
- var TitleBlockMenuItem = require('./TitleBlockMenuItem.cjs');
12
- var MobileActions_module = require('./MobileActions.module.scss.cjs');
13
- function _interopDefault(e) {
14
- return e && e.__esModule ? e : {
15
- default: e
16
- };
17
- }
18
- var React__default = /*#__PURE__*/_interopDefault(React);
19
- var classnames__default = /*#__PURE__*/_interopDefault(classnames);
20
- var menuItemIsLink = function (item) {
21
- return 'href' in item;
22
- };
23
- var defaultActionIsLink = function (action) {
24
- return 'href' in action;
25
- };
26
- var defaultActionIsButton = function (action) {
27
- return !('href' in action) && 'onClick' in action || 'component' in action;
28
- };
29
- var filterActions = function (menuItems, filterType) {
30
- return menuItems.filter(function (item) {
31
- return filterType === 'link' ? menuItemIsLink(item) : !menuItemIsLink(item);
32
- });
33
- };
34
- /** Returns a filtered array of TitleBlockMenuItem based on actionType
35
- * This is use to sort a selectively render the action into a specifc order
36
- */
37
- var renderPrimaryActionDrawerContent = function (primaryAction, actionType) {
38
- if (!primaryAction) return null;
39
- if (utils.isMenuGroupNotButton(primaryAction)) {
40
- var filteredActions = filterActions(primaryAction.menuItems, actionType);
41
- return filteredActions.map(function (item, idx) {
42
- var itemType = menuItemIsLink(item) ? 'link' : 'action';
43
- return React__default.default.createElement(TitleBlockMenuItem.TitleBlockMenuItem, tslib.__assign({}, item, {
44
- key: "title-block-mobile-actions-primary-".concat(itemType, "-").concat(idx),
45
- "data-automation-id": "title-block-mobile-actions-primary-".concat(itemType, "-").concat(idx),
46
- "data-testid": "title-block-mobile-actions-primary-".concat(itemType, "-").concat(idx)
47
- }));
48
- });
49
- }
50
- return null;
51
- };
52
- var renderDefaultLink = function (defaultAction) {
53
- if (!defaultActionIsLink(defaultAction)) return;
54
- if ('component' in defaultAction) {
55
- return React__default.default.createElement(TitleBlockMenuItem.TitleBlockMenuItem, tslib.__assign({}, defaultAction, {
56
- key: "title-block-mobile-actions-default-link",
57
- "data-automation-id": "title-block-mobile-actions-default-link",
58
- "data-testid": "title-block-mobile-actions-default-link"
59
- }));
60
- }
61
- return React__default.default.createElement(index.MenuItem, {
62
- href: defaultAction.href,
63
- label: defaultAction.label,
64
- icon: defaultAction.icon,
65
- disabled: defaultAction.disabled,
66
- key: "title-block-mobile-actions-default-link",
67
- "data-automation-id": "title-block-mobile-actions-default-link",
68
- "data-testid": "title-block-mobile-actions-default-link",
69
- id: defaultAction.id
70
- });
71
- };
72
- var renderDefaultAction = function (defaultAction) {
73
- if (!defaultActionIsLink(defaultAction)) {
74
- return React__default.default.createElement(TitleBlockMenuItem.TitleBlockMenuItem, tslib.__assign({}, defaultAction, {
75
- key: "title-block-mobile-actions-default-action",
76
- "data-automation-id": "title-block-mobile-actions-default-action",
77
- "data-testid": "title-block-mobile-actions-default-action"
78
- }));
79
- }
80
- return null;
81
- };
82
- var renderSecondaryActions = function (secondaryActions) {
83
- if (!secondaryActions) return null;
84
- var secondaryActionMenuItems = utils.convertSecondaryActionsToMenuItems(secondaryActions);
85
- return secondaryActionMenuItems.map(function (item, idx) {
86
- return React__default.default.createElement(TitleBlockMenuItem.TitleBlockMenuItem, tslib.__assign({}, item, {
87
- key: "title-block-mobile-actions-secondary-action-".concat(idx),
88
- "data-testid": "title-block-mobile-actions-secondary-action"
89
- }));
90
- });
91
- };
92
- var renderSecondaryOverflowMenuItems = function (secondaryOverflowMenuItems) {
93
- return secondaryOverflowMenuItems.map(function (item, idx) {
94
- return React__default.default.createElement(TitleBlockMenuItem.TitleBlockMenuItem, tslib.__assign({}, item, {
95
- key: "title-block-mobile-actions-overflow-menu-item-".concat(idx),
96
- "data-testid": "title-block-mobile-actions-overflow-menu-item"
97
- }));
98
- });
99
- };
100
- var DrawerMenuContent = function (_a) {
101
- var _b, _c, _d;
102
- var primaryAction = _a.primaryAction,
103
- defaultAction = _a.defaultAction,
104
- secondaryActions = _a.secondaryActions,
105
- secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems;
106
- var showOtherActionsHeading = (_c = (_b = defaultAction && defaultActionIsButton(defaultAction)) !== null && _b !== void 0 ? _b : secondaryActions) !== null && _c !== void 0 ? _c : secondaryOverflowMenuItems;
107
- return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(index.MenuList, null, primaryAction && renderPrimaryActionDrawerContent(primaryAction, 'link'), defaultAction && renderDefaultLink(defaultAction), primaryAction && renderPrimaryActionDrawerContent(primaryAction, 'action')), ((_d = defaultAction !== null && defaultAction !== void 0 ? defaultAction : secondaryActions) !== null && _d !== void 0 ? _d : secondaryOverflowMenuItems) && React__default.default.createElement(index.MenuList, {
108
- heading: showOtherActionsHeading ? React__default.default.createElement(index.MenuHeading, null, "Other actions") : undefined
109
- }, defaultAction && renderDefaultAction(defaultAction), secondaryActions && renderSecondaryActions(secondaryActions), secondaryOverflowMenuItems && renderSecondaryOverflowMenuItems(secondaryOverflowMenuItems)));
110
- };
111
- var renderDrawerHandleLabel = function (label, icon, drawerHandleLabelIconPosition) {
112
- if (drawerHandleLabelIconPosition === 'end') {
113
- return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("span", {
114
- className: MobileActions_module.drawerHandleLabelText,
115
- "data-testid": "drawer-handle-lable-text"
116
- }, label), React__default.default.createElement(React__default.default.Fragment, null, icon && React__default.default.createElement("span", {
117
- className: MobileActions_module.drawerHandleIcon
118
- }, icon)));
119
- } else {
120
- return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(React__default.default.Fragment, null, icon && React__default.default.createElement("span", {
121
- className: MobileActions_module.drawerHandleIcon
122
- }, icon)), React__default.default.createElement("span", {
123
- className: MobileActions_module.drawerHandleLabelText,
124
- "data-testid": "drawer-handle-lable-text"
125
- }, label));
126
- }
127
- };
128
- var ButtonOrLink = function (_a) {
129
- var action = _a.action,
130
- children = _a.children;
131
- if (typeof action === 'object' && 'onClick' in action && 'href' in action) {
132
- return React__default.default.createElement("a", {
133
- onClick: action.onClick,
134
- href: action.href,
135
- className: classnames__default.default(MobileActions_module.mobileActionsPrimaryLabel, MobileActions_module.mobileActionsPrimaryButton),
136
- "data-testid": "title-block-mobile-actions-primary-button"
137
- }, children);
138
- }
139
- if (typeof action === 'function') {
140
- return React__default.default.createElement("button", {
141
- type: "button",
142
- onClick: action,
143
- className: classnames__default.default(MobileActions_module.mobileActionsPrimaryLabel, MobileActions_module.mobileActionsPrimaryButton),
144
- "data-testid": "title-block-mobile-actions-primary-button"
145
- }, children);
146
- }
147
- if (typeof action === 'string') {
148
- return React__default.default.createElement("a", {
149
- href: action,
150
- className: classnames__default.default(MobileActions_module.mobileActionsPrimaryLabel, MobileActions_module.mobileActionsPrimaryButton),
151
- "data-testid": "title-block-mobile-actions-primary-button"
152
- }, children);
153
- }
154
- // when there's no action (e.g. primary button is disabled)
155
- return React__default.default.createElement("button", {
156
- type: "button",
157
- className: classnames__default.default(MobileActions_module.mobileActionsPrimaryLabel, MobileActions_module.mobileActionsPrimaryButton),
158
- "data-testid": "title-block-mobile-actions-primary-button"
159
- }, children);
160
- };
161
- var getAction = function (primaryAction) {
162
- if (primaryAction && !primaryAction.disabled) {
163
- if (primaryAction.onClick && primaryAction.href) {
164
- return {
165
- href: primaryAction.href,
166
- onClick: primaryAction.onClick
167
- };
168
- }
169
- if (primaryAction.onClick) {
170
- return primaryAction.onClick;
171
- }
172
- if (primaryAction.href) {
173
- return primaryAction.href;
174
- }
175
- }
176
- return undefined;
177
- };
178
- var DrawerHandle = function (_a) {
179
- var _b;
180
- var primaryAction = _a.primaryAction,
181
- secondaryActions = _a.secondaryActions,
182
- defaultAction = _a.defaultAction,
183
- secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
184
- drawerHandleLabelIconPosition = _a.drawerHandleLabelIconPosition,
185
- toggleDisplay = _a.toggleDisplay,
186
- isOpen = _a.isOpen;
187
- var showDrawer = (_b = defaultAction !== null && defaultAction !== void 0 ? defaultAction : secondaryActions) !== null && _b !== void 0 ? _b : secondaryOverflowMenuItems;
188
- if (primaryAction) {
189
- // If the primary action is a menu
190
- if (utils.isMenuGroupNotButton(primaryAction)) {
191
- return React__default.default.createElement("div", {
192
- className: classnames__default.default(MobileActions_module.mobileActionsTopRow, MobileActions_module.mobileActionsTopRowSingleButton),
193
- "data-testid": "title-block-mobile-actions-drawer-handle"
194
- }, React__default.default.createElement("button", {
195
- type: "button",
196
- className: classnames__default.default(MobileActions_module.mobileActionsExpandButton, MobileActions_module.mobileActionsPrimaryLabel),
197
- onClick: toggleDisplay,
198
- "aria-expanded": isOpen
199
- }, primaryAction.label, React__default.default.createElement("span", {
200
- className: MobileActions_module.mobileActionsChevronSquare
201
- }, React__default.default.createElement(Icon.Icon, {
202
- name: isOpen ? 'keyboard_arrow_down' : 'keyboard_arrow_up',
203
- isPresentational: true
204
- }))));
205
- }
206
- // If the primary action is a button, or has no onClick/href/action
207
- return React__default.default.createElement("div", {
208
- className: classnames__default.default(MobileActions_module.mobileActionsTopRow, !showDrawer && MobileActions_module.mobileActionsTopRowSingleButton),
209
- "data-testid": "title-block-mobile-actions-drawer-handle"
210
- }, 'component' in primaryAction ? React__default.default.createElement(primaryAction.component, tslib.__assign({
211
- className: classnames__default.default(MobileActions_module.mobileActionsPrimaryLabel, MobileActions_module.mobileActionsPrimaryButton)
212
- }, primaryAction), primaryAction.label && renderDrawerHandleLabel(primaryAction.label, primaryAction.icon, drawerHandleLabelIconPosition)) : React__default.default.createElement(ButtonOrLink, {
213
- action: getAction(primaryAction)
214
- }, renderDrawerHandleLabel(primaryAction.label, primaryAction.icon, drawerHandleLabelIconPosition)), showDrawer && React__default.default.createElement("button", {
215
- type: "button",
216
- className: MobileActions_module.mobileActionsExpandButton,
217
- onClick: toggleDisplay,
218
- "aria-expanded": isOpen,
219
- id: constants.TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID,
220
- "aria-label": "Other actions"
221
- }, React__default.default.createElement(Icon.Icon, {
222
- name: isOpen ? 'keyboard_arrow_down' : 'keyboard_arrow_up',
223
- isPresentational: true
224
- })));
225
- }
226
- // if there are default/secondary actions but no primary action
227
- if (showDrawer) {
228
- return React__default.default.createElement("div", {
229
- className: classnames__default.default(MobileActions_module.mobileActionsTopRow, MobileActions_module.mobileActionsTopRowSingleButton),
230
- "data-testid": "title-block-mobile-actions-drawer-handle"
231
- }, React__default.default.createElement("button", {
232
- type: "button",
233
- className: classnames__default.default(MobileActions_module.mobileActionsExpandButton, MobileActions_module.mobileActionsPrimaryLabel),
234
- onClick: toggleDisplay,
235
- "aria-expanded": isOpen,
236
- id: constants.TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID
237
- }, renderDrawerHandleLabel('Other actions'), React__default.default.createElement("span", {
238
- className: MobileActions_module.mobileActionsChevronSquare
239
- }, React__default.default.createElement(Icon.Icon, {
240
- name: isOpen ? 'keyboard_arrow_down' : 'keyboard_arrow_up',
241
- isPresentational: true
242
- }))));
243
- }
244
- return null;
245
- };
246
- var MobileActions = function (_a) {
247
- var _b, _c;
248
- var primaryAction = _a.primaryAction,
249
- defaultAction = _a.defaultAction,
250
- secondaryActions = _a.secondaryActions,
251
- secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
252
- drawerHandleLabelIconPosition = _a.drawerHandleLabelIconPosition,
253
- _d = _a.autoHide,
254
- autoHide = _d === void 0 ? false : _d;
255
- var _e = React.useState(false),
256
- isOpen = _e[0],
257
- setIsOpen = _e[1];
258
- var menuContent = React__default.default.createRef();
259
- var toggleDisplay = function () {
260
- setIsOpen(!isOpen);
261
- };
262
- // This callback handler will not run when autoHide === "off"
263
- var handleDocumentClickForAutoHide = React.useCallback(function (e) {
264
- var _a;
265
- if (isOpen && e.target instanceof Node && ((_a = menuContent.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
266
- setIsOpen(false);
267
- }
268
- },
269
- // @todo: Fix if possible - avoiding breaking in eslint upgrade
270
- // eslint-disable-next-line react-hooks/exhaustive-deps
271
- [menuContent]);
272
- React.useEffect(function () {
273
- if (autoHide) {
274
- document.addEventListener('click', handleDocumentClickForAutoHide, true);
275
- }
276
- return function () {
277
- if (autoHide) {
278
- document.removeEventListener('click', handleDocumentClickForAutoHide, true);
279
- }
280
- };
281
- }, [autoHide, handleDocumentClickForAutoHide]);
282
- return React__default.default.createElement("div", {
283
- className: classnames__default.default(MobileActions_module.mobileActionsContainer, isOpen && MobileActions_module.isOpen)
284
- }, React__default.default.createElement(reactFocusOn.FocusOn, {
285
- enabled: isOpen,
286
- scrollLock: false
287
- }, React__default.default.createElement(DrawerHandle, {
288
- primaryAction: primaryAction,
289
- secondaryActions: secondaryActions,
290
- defaultAction: defaultAction,
291
- secondaryOverflowMenuItems: secondaryOverflowMenuItems,
292
- drawerHandleLabelIconPosition: drawerHandleLabelIconPosition,
293
- toggleDisplay: toggleDisplay,
294
- isOpen: isOpen
295
- }), ((_c = (_b = defaultAction !== null && defaultAction !== void 0 ? defaultAction : secondaryActions) !== null && _b !== void 0 ? _b : secondaryOverflowMenuItems) !== null && _c !== void 0 ? _c : primaryAction && utils.isMenuGroupNotButton(primaryAction)) && React__default.default.createElement("div", {
296
- ref: menuContent,
297
- className: MobileActions_module.mobileActionsMenuContainer
298
- }, React__default.default.createElement(DrawerMenuContent, {
299
- primaryAction: primaryAction,
300
- defaultAction: defaultAction,
301
- secondaryActions: secondaryActions,
302
- secondaryOverflowMenuItems: secondaryOverflowMenuItems
303
- }))));
304
- };
305
- MobileActions.displayName = 'MobileActions';
306
- exports.MobileActions = MobileActions;
@@ -1,16 +0,0 @@
1
- 'use strict';
2
-
3
- var styles = {
4
- "mobileActionsContainer": "MobileActions-module_mobileActionsContainer__XoepA",
5
- "isOpen": "MobileActions-module_isOpen__D40v5",
6
- "mobileActionsMenuContainer": "MobileActions-module_mobileActionsMenuContainer__x--Eb",
7
- "mobileActionsTopRow": "MobileActions-module_mobileActionsTopRow__RXNFZ",
8
- "mobileActionsTopRowSingleButton": "MobileActions-module_mobileActionsTopRowSingleButton__5EjiI",
9
- "drawerHandleIcon": "MobileActions-module_drawerHandleIcon__q9ewm",
10
- "drawerHandleLabelText": "MobileActions-module_drawerHandleLabelText__MwJTA",
11
- "mobileActionsPrimaryLabel": "MobileActions-module_mobileActionsPrimaryLabel__8yfuH",
12
- "mobileActionsPrimaryButton": "MobileActions-module_mobileActionsPrimaryButton__Xsvo-",
13
- "mobileActionsExpandButton": "MobileActions-module_mobileActionsExpandButton__XuHNU",
14
- "mobileActionsChevronSquare": "MobileActions-module_mobileActionsChevronSquare__SPIsI"
15
- };
16
- module.exports = styles;
@@ -1,21 +0,0 @@
1
- import { __rest, __assign } from 'tslib';
2
- import React from 'react';
3
- import classnames from 'classnames';
4
- import { Heading } from '../../../Heading/Heading.mjs';
5
- import styles from './MenuHeading.module.scss.mjs';
6
- const MenuHeading = /*#__PURE__*/function () {
7
- const MenuHeading = function (_a) {
8
- var id = _a.id,
9
- classNameOverride = _a.classNameOverride,
10
- restProps = __rest(_a, ["id", "classNameOverride"]);
11
- return /*#__PURE__*/React.createElement(Heading, __assign({
12
- id: id,
13
- variant: "heading-6",
14
- tag: "span",
15
- classNameOverride: classnames(styles.heading, classNameOverride)
16
- }, restProps));
17
- };
18
- MenuHeading.displayName = 'MenuHeading';
19
- return MenuHeading;
20
- }();
21
- export { MenuHeading };
@@ -1,4 +0,0 @@
1
- var styles = {
2
- "heading": "MenuHeading-module_heading__hrHGy"
3
- };
4
- export { styles as default };