@kaizen/components 1.58.2 → 1.60.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 (202) hide show
  1. package/codemods/README.md +15 -10
  2. package/codemods/migrateBrandMomentMoodToVariant/transformBrandMomentMoodToVariant.ts +1 -1
  3. package/codemods/migrateCardVariantToColor/transformCardVariantToColor.ts +1 -1
  4. package/codemods/migrateConfirmationModalMoodsToVariant/index.ts +3 -3
  5. package/codemods/migrateConfirmationModalMoodsToVariant/transformConfirmationModalMoodsToVariant.ts +25 -56
  6. package/codemods/migrateEmptyStateIllustrationTypeToVariant/transformEmptyStateIllustrationTypeToVariant.ts +1 -1
  7. package/codemods/migrateInformationTileMoodToVariant/transformInformationTileMoodToVariant.ts +1 -1
  8. package/codemods/migrateMultiActionTileMoodToVariant/transformMultiActionTileMoodToVariant.ts +1 -1
  9. package/codemods/migrateNotificationTypeToVariant/migrateNotificationTypeToVariant.ts +1 -1
  10. package/codemods/migrateProgressBarMoodToColor/transformProgressBarMoodToColor.ts +1 -1
  11. package/codemods/removeInputEditModalMood/index.ts +2 -2
  12. package/codemods/removeInputEditModalMood/removeInputEditModalMood.spec.ts +1 -31
  13. package/codemods/removeInputEditModalMood/removeInputEditModalMood.ts +2 -39
  14. package/codemods/removePopoverVariant/index.ts +15 -0
  15. package/codemods/removePopoverVariant/removePopoverVariant.spec.ts +65 -0
  16. package/codemods/removePopoverVariant/removePopoverVariant.ts +3 -0
  17. package/codemods/updateGuidanceBlockVariantProp/transformGuidanceBlockVariantProp.spec.ts +2 -2
  18. package/codemods/utils/removeProps.spec.ts +65 -0
  19. package/codemods/utils/removeProps.ts +30 -0
  20. package/dist/cjs/Avatar/Avatar.cjs +14 -12
  21. package/dist/cjs/Brand/Brand.cjs +1 -1
  22. package/dist/cjs/BrandMoment/BrandMoment.cjs +1 -1
  23. package/dist/cjs/Card/Card.cjs +1 -1
  24. package/dist/cjs/Card/Card.module.css.cjs +22 -0
  25. package/dist/cjs/Illustration/subcomponents/Base/Base.cjs +1 -1
  26. package/dist/cjs/Illustration/subcomponents/VideoPlayer/VideoPlayer.cjs +1 -1
  27. package/dist/cjs/Popover/Popover.module.scss.cjs +0 -7
  28. package/dist/cjs/index.cjs +2 -0
  29. package/dist/cjs/utils/hostedAssets.cjs +16 -0
  30. package/dist/cjs/utils/useResizeObserver.cjs +1 -0
  31. package/dist/esm/Avatar/Avatar.mjs +14 -12
  32. package/dist/esm/Brand/Brand.mjs +1 -1
  33. package/dist/esm/BrandMoment/BrandMoment.mjs +1 -1
  34. package/dist/esm/Card/Card.mjs +1 -1
  35. package/dist/esm/Card/Card.module.css.mjs +20 -0
  36. package/dist/esm/Illustration/subcomponents/Base/Base.mjs +1 -1
  37. package/dist/esm/Illustration/subcomponents/VideoPlayer/VideoPlayer.mjs +1 -1
  38. package/dist/esm/Popover/Popover.module.scss.mjs +0 -7
  39. package/dist/esm/index.mjs +1 -0
  40. package/dist/esm/utils/hostedAssets.mjs +14 -0
  41. package/dist/esm/utils/useResizeObserver.mjs +1 -0
  42. package/dist/styles.css +12983 -179
  43. package/dist/types/Avatar/Avatar.d.ts +6 -1
  44. package/dist/types/LikertScaleLegacy/index.d.ts +1 -0
  45. package/dist/types/Popover/Popover.d.ts +4 -2
  46. package/dist/types/utils/hostedAssets.d.ts +10 -0
  47. package/dist/types/utils/index.d.ts +1 -0
  48. package/dist/types/utils/useResizeObserver.d.ts +1 -0
  49. package/package.json +19 -11
  50. package/src/Avatar/Avatar.spec.tsx +63 -0
  51. package/src/Avatar/Avatar.tsx +16 -8
  52. package/src/AvatarGroup/AvatarGroup.tsx +1 -1
  53. package/src/Badge/Badge.tsx +1 -1
  54. package/src/Brand/Brand.tsx +2 -2
  55. package/src/BrandMoment/BrandMoment.tsx +3 -3
  56. package/src/BrandMoment/_docs/ExampleHeaders.tsx +2 -2
  57. package/src/ButtonGroup/ButtonGroup.tsx +1 -1
  58. package/src/Calendar/CalendarPopover/CalendarPopover.tsx +1 -1
  59. package/src/Calendar/CalendarRange/CalendarRange.tsx +1 -1
  60. package/src/Calendar/CalendarSingle/CalendarSingle.tsx +1 -1
  61. package/src/Card/{Card.module.scss → Card.module.css} +6 -14
  62. package/src/Card/Card.tsx +2 -2
  63. package/src/Checkbox/Checkbox/Checkbox.tsx +1 -1
  64. package/src/Checkbox/CheckboxGroup/CheckboxGroup.tsx +1 -1
  65. package/src/ClearButton/ClearButton.tsx +1 -1
  66. package/src/Collapsible/Collapsible/Collapsible.tsx +1 -1
  67. package/src/Collapsible/CollapsibleGroup/CollapsibleGroup.tsx +1 -1
  68. package/src/Content/Content.tsx +1 -1
  69. package/src/DateInput/DateInput/DateInput.tsx +1 -1
  70. package/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.tsx +1 -1
  71. package/src/Divider/Divider.tsx +1 -1
  72. package/src/EmptyState/EmptyState.tsx +1 -1
  73. package/src/ErrorPage/ErrorPage.tsx +1 -1
  74. package/src/FieldGroup/FieldGroup.tsx +1 -1
  75. package/src/FieldMessage/FieldMessage.tsx +1 -1
  76. package/src/Filter/Filter/Filter.tsx +1 -1
  77. package/src/Filter/Filter/subcomponents/FilterContents/FilterContents.tsx +1 -1
  78. package/src/Filter/Filter/subcomponents/FilterPopover/FilterPopover.tsx +1 -1
  79. package/src/Filter/FilterBar/FilterBar.tsx +1 -1
  80. package/src/Filter/FilterButton/FilterButton/FilterButton.tsx +1 -1
  81. package/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx +2 -2
  82. package/src/Filter/FilterButton/subcomponents/FilterButtonBase/FilterButtonBase.tsx +1 -1
  83. package/src/Filter/FilterDatePicker/hooks/useDateInputHandlers.spec.ts +1 -1
  84. package/src/Filter/FilterDatePicker/hooks/useDateValidation.spec.ts +1 -2
  85. package/src/Filter/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.tsx +2 -2
  86. package/src/Filter/FilterDatePicker/utils/getDateValidationHandler.tsx +1 -1
  87. package/src/Filter/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.tsx +2 -2
  88. package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx +2 -2
  89. package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useEndDateValidation.spec.ts +1 -2
  90. package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useStartDateValidation.spec.ts +1 -2
  91. package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/validateEndDateBeforeStartDate.tsx +1 -1
  92. package/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.stories.tsx +1 -1
  93. package/src/Filter/FilterSelect/FilterSelect.tsx +1 -1
  94. package/src/Heading/Heading.tsx +1 -1
  95. package/src/Icon/_docs/Icon.stories.tsx +1 -1
  96. package/src/Icon/subcomponents/SVG/SVG.tsx +1 -1
  97. package/src/Illustration/subcomponents/Base/Base.tsx +2 -2
  98. package/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx +1 -1
  99. package/src/Illustration/utils/usePausePlay.spec.tsx +1 -2
  100. package/src/Input/Input/Input.tsx +1 -1
  101. package/src/Input/InputRange/InputRange.tsx +1 -1
  102. package/src/Input/InputSearch/InputSearch.tsx +1 -1
  103. package/src/KaizenProvider/_docs/KaizenProvider.mdx +4 -4
  104. package/src/Label/Label.tsx +1 -1
  105. package/src/LabelledMessage/LabelledMessage.tsx +1 -1
  106. package/src/LikertScaleLegacy/index.ts +1 -0
  107. package/src/Loading/LoadingGraphic/LoadingGraphic.tsx +1 -1
  108. package/src/Loading/LoadingHeading/LoadingHeading.tsx +1 -1
  109. package/src/Loading/LoadingInput/LoadingInput.tsx +1 -1
  110. package/src/Loading/LoadingParagraph/LoadingParagraph.tsx +1 -1
  111. package/src/Loading/LoadingSpinner/LoadingSpinner.tsx +1 -1
  112. package/src/Modal/ConfirmationModal/ConfirmationModal.spec.tsx +1 -1
  113. package/src/Modal/ContextModal/ContextModal.spec.tsx +1 -1
  114. package/src/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.tsx +1 -1
  115. package/src/Modal/InputEditModal/InputEditModal.spec.tsx +1 -1
  116. package/src/MultiSelect/MultiSelect.tsx +1 -1
  117. package/src/MultiSelect/subcomponents/Checkbox/Checkbox.tsx +1 -1
  118. package/src/MultiSelect/subcomponents/MultiSelectOptionField/MultiSelectOptionField.tsx +1 -1
  119. package/src/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.tsx +1 -1
  120. package/src/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.tsx +1 -1
  121. package/src/MultiSelect/subcomponents/Popover/Popover.tsx +1 -1
  122. package/src/Notification/GlobalNotification/GlobalNotification.tsx +1 -1
  123. package/src/Notification/InlineNotification/InlineNotification.tsx +1 -1
  124. package/src/Notification/ToastNotification/ToastNotificationsList/subcomponents/ToastNotificationsMap/ToastNotificationsMap.tsx +1 -1
  125. package/src/Notification/ToastNotification/types.ts +1 -1
  126. package/src/Notification/subcomponents/GenericNotification/GenericNotification.tsx +1 -1
  127. package/src/Pagination/Pagination.tsx +1 -1
  128. package/src/Popover/Popover.module.scss +4 -26
  129. package/src/Popover/Popover.tsx +5 -3
  130. package/src/Popover/_docs/Popover.mdx +0 -3
  131. package/src/Popover/_docs/Popover.stickersheet.stories.tsx +1 -1
  132. package/src/Popover/_docs/Popover.stories.tsx +3 -42
  133. package/src/ProgressBar/ProgressBar.tsx +1 -1
  134. package/src/Radio/Radio/Radio.tsx +1 -1
  135. package/src/Radio/RadioGroup/RadioGroup.tsx +1 -1
  136. package/src/RichTextEditor/EditableRichTextContent/EditableRichTextContent.tsx +1 -1
  137. package/src/RichTextEditor/RichTextContent/RichTextContent.tsx +1 -1
  138. package/src/RichTextEditor/RichTextEditor/RichTextEditor.tsx +1 -1
  139. package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/ToggleIconButton.tsx +1 -1
  140. package/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/Toolbar.tsx +1 -1
  141. package/src/Skirt/Skirt.tsx +1 -1
  142. package/src/SplitButton/SplitButton.tsx +2 -2
  143. package/src/SplitButton/subcomponents/BaseButton/BaseButton.tsx +1 -1
  144. package/src/Table/Table.tsx +1 -1
  145. package/src/Tabs/subcomponents/Tab.tsx +1 -1
  146. package/src/Tabs/subcomponents/TabList.tsx +1 -1
  147. package/src/Tabs/subcomponents/TabPanel.tsx +1 -1
  148. package/src/Tabs/subcomponents/TabPanels.tsx +1 -1
  149. package/src/Text/Text.tsx +1 -1
  150. package/src/TextArea/TextArea.tsx +1 -1
  151. package/src/Tile/TileGrid/TileGrid.tsx +1 -1
  152. package/src/Tile/subcomponents/GenericTile/GenericTile.tsx +1 -1
  153. package/src/TimeField/TimeField.tsx +1 -1
  154. package/src/TitleBlockZen/TitleBlockZen.spec.tsx +1 -1
  155. package/src/TitleBlockZen/TitleBlockZen.tsx +1 -1
  156. package/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx +1 -1
  157. package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.tsx +1 -1
  158. package/src/VisuallyHidden/VisuallyHidden.tsx +1 -1
  159. package/src/Well/Well.tsx +1 -1
  160. package/src/Workflow/Workflow.tsx +1 -1
  161. package/src/Workflow/subcomponents/Footer/Footer.tsx +1 -1
  162. package/src/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.tsx +1 -1
  163. package/src/Workflow/subcomponents/Footer/components/Root/Root.tsx +1 -1
  164. package/src/Workflow/subcomponents/Header/components/Actions/Actions.tsx +1 -1
  165. package/src/Workflow/subcomponents/Header/components/Branding/Branding.tsx +1 -1
  166. package/src/Workflow/subcomponents/Header/components/Root/Root.tsx +1 -1
  167. package/src/Workflow/subcomponents/Header/components/Titles/Titles.tsx +1 -1
  168. package/src/Workflow/subcomponents/Main/Main.tsx +1 -1
  169. package/src/Workflow/subcomponents/Wrapper/Wrapper.tsx +1 -1
  170. package/src/__actions__/Button/v3/Button.tsx +1 -1
  171. package/src/__actions__/Menu/v1/subcomponents/MenuList/MenuList.tsx +1 -1
  172. package/src/__actions__/Menu/v3/Menu.tsx +1 -1
  173. package/src/__actions__/Menu/v3/MenuItem.tsx +1 -1
  174. package/src/__future__/Select/Select.tsx +1 -1
  175. package/src/__future__/Select/subcomponents/ListBox/ListBox.tsx +1 -1
  176. package/src/__future__/Select/subcomponents/Option/Option.tsx +1 -1
  177. package/src/__future__/Select/subcomponents/Overlay/Overlay.tsx +1 -1
  178. package/src/__future__/Select/subcomponents/SelectToggle/SelectToggle.tsx +1 -1
  179. package/src/__future__/Tag/RemovableTag/subcomponents/RemoveButton.tsx +1 -1
  180. package/src/__future__/Tag/Tag/Tag.tsx +1 -1
  181. package/src/__future__/Workflow/Workflow.tsx +1 -1
  182. package/src/__future__/Workflow/subcomponents/Footer/Footer.tsx +1 -1
  183. package/src/__future__/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.tsx +1 -1
  184. package/src/__future__/Workflow/subcomponents/Footer/components/Root/Root.tsx +1 -1
  185. package/src/__future__/Workflow/subcomponents/Header/components/Actions/Actions.tsx +1 -1
  186. package/src/__future__/Workflow/subcomponents/Header/components/Branding/Branding.tsx +1 -1
  187. package/src/__future__/Workflow/subcomponents/Header/components/Root/Root.tsx +1 -1
  188. package/src/__future__/Workflow/subcomponents/Header/components/Titles/Titles.tsx +1 -1
  189. package/src/__future__/Workflow/subcomponents/Main/Main.tsx +1 -1
  190. package/src/__future__/Workflow/subcomponents/Wrapper/Wrapper.tsx +1 -1
  191. package/src/__overlays__/Tooltip/v3/OverlayArrow.tsx +1 -1
  192. package/src/__overlays__/Tooltip/v3/Tooltip.tsx +1 -1
  193. package/src/__overlays__/Tooltip/v3/_docs/Tooltip.stickersheet.stories.tsx +1 -1
  194. package/src/utils/hostedAssets.ts +13 -0
  195. package/src/utils/index.ts +1 -0
  196. package/src/utils/useResizeObserver.ts +1 -0
  197. package/dist/cjs/Card/Card.module.scss.cjs +0 -22
  198. package/dist/esm/Card/Card.module.scss.mjs +0 -20
  199. package/src/utils/useResizeObserver.spec.tsx +0 -49
  200. /package/src/BrandMoment/_docs/{ExampleHeaders.scss → ExampleHeaders.module.scss} +0 -0
  201. /package/src/Filter/FilterMultiSelect/_docs/{FilterMultiSelect.stories.scss → FilterMultiSelect.module.scss} +0 -0
  202. /package/src/Icon/_docs/{icon.stories.scss → icon.module.scss} +0 -0
@@ -8,7 +8,7 @@ Install `@kaizen/components`.
8
8
  ## CLI pattern
9
9
 
10
10
  ```
11
- kaizen-codemod {DIR} {CODEMOD_NAME}
11
+ kaizen-codemod {DIR} {CODEMOD_NAME}
12
12
  ```
13
13
 
14
14
  DIR - the directory to run the codemod for. Note that node_modules are excluded.
@@ -16,16 +16,21 @@ CODEMOD_NAME - the name of the codemod (refer to list below).
16
16
 
17
17
  Example:
18
18
  ```
19
- kaizen-codemod src migrateWellVariantToColor
19
+ kaizen-codemod src migrateWellVariantToColor
20
20
  ```
21
21
 
22
22
  ## Available codemods
23
- - `migrateBrandMomentMoodToVariant`: Migrates `BrandMoment` component prop from `mood` to `variant`.
24
- - `migrateEmptyStateIllustrationTypeToVariant`: Migrates `EmptyState` component prop from `illustrationType` to `variant`.
25
- - `migrateGlobalNotificationTypeToVariant`: Transforms `GlobalNotification`'s `type` prop to the new `variant` prop.
26
- - `migrateInlineNotificationTypeToVariant`: Transforms `InlineNotification`'s `type` prop to the new `variant` prop.
27
- - `migrateInformationTileMoodToVariant`: Migrates `InformationTile` component prop from `mood` to `variant`.
28
- - `migrateMultiActionTileMoodToVariant`: Migrates `MultiActionTile` component prop from `mood` to `variant`.
23
+ - `migrateBrandMomentMoodToVariant`: Migrates `BrandMoment` component prop from `mood` to `variant`
24
+ - `migrateCardVariantToColor`: Migrates `Card` component prop from `variant` to `color`
25
+ - `migrateConfirmationModalMoodsToVariant`: Migrates `ConfirmationModal` component prop from `mood` to `variant`
26
+ - `migrateEmptyStateIllustrationTypeToVariant`: Migrates `EmptyState` component prop from `illustrationType` to `variant`
27
+ - `migrateGlobalNotificationTypeToVariant`: Transforms `GlobalNotification`'s `type` prop to the new `variant` prop
28
+ - `migrateInformationTileMoodToVariant`: Migrates `InformationTile` component prop from `mood` to `variant`
29
+ - `migrateInlineNotificationTypeToVariant`: Transforms `InlineNotification`'s `type` prop to the new `variant` prop
30
+ - `migrateMultiActionTileMoodToVariant`: Migrates `MultiActionTile` component prop from `mood` to `variant`
29
31
  - `migrateProgressBarMoodToColor`: Migrates `ProgressBar` component prop from `mood` to `color`
30
- - `migrateToastNotificationTypeToVariant`: Transforms `ToastNotification`'s `type` prop to the new `variant` prop.
31
- - `migrateWellVariantToColor`: Migrates `Well` component prop from `variant` to `color`.
32
+ - `migrateToastNotificationTypeToVariant`: Transforms `ToastNotification`'s `type` prop to the new `variant` prop
33
+ - `migrateWellVariantToColor`: Migrates `Well` component prop from `variant` to `color`
34
+ - `removeInputEditModalMood`: Removes `InputEditModal` component prop `mood`
35
+ - `removePopoverVariant`: Removes `Popover` component props `variant` and `customIcon`
36
+ - `updateGuidanceBlockVariantProp`: Updates `GuidanceBlock` import location and updates `variant` prop to `default` or `expert-advice`
@@ -1,4 +1,4 @@
1
- import type { BrandMomentProps } from "~components/BrandMoment"
1
+ import type { BrandMomentProps } from "../../src/BrandMoment"
2
2
  import { migrateStringProp } from "../utils"
3
3
 
4
4
  const OLD_PROP_NAME = "mood"
@@ -1,4 +1,4 @@
1
- import type { CardProps } from "~components/Card"
1
+ import type { CardProps } from "../../src/Card"
2
2
  import { migrateStringProp } from "../utils"
3
3
 
4
4
  const OLD_PROP_NAME = "variant"
@@ -1,7 +1,7 @@
1
1
  import { transformComponentsInDir } from "../utils"
2
2
  import { transformConfirmationModalMoodsToVariant } from "./transformConfirmationModalMoodsToVariant"
3
- /** This is here as a script runner that migrates Well variant to their color equivalent */
4
- const migrateModalMoodsToVariant = (): void => {
3
+
4
+ const run = (): void => {
5
5
  // eslint-disable-next-line no-console
6
6
  console.log(" ~(-_- ~) Running ConfirmationModal transformer (~ -_-)~")
7
7
  const targetDir = process.argv[2]
@@ -16,4 +16,4 @@ const migrateModalMoodsToVariant = (): void => {
16
16
  )
17
17
  }
18
18
 
19
- migrateModalMoodsToVariant()
19
+ run()
@@ -1,59 +1,28 @@
1
- import ts from "typescript"
2
- import { getPropValueText } from "../utils/getPropValueText"
1
+ import type { ConfirmationModalProps } from "../../src/Modal"
2
+ import { migrateStringProp } from "../utils"
3
3
 
4
- /** Recurses through AST to find and update any jsx element that matched the tagName */
5
- export const transformConfirmationModalMoodsToVariant =
6
- (context: ts.TransformationContext, tagName: string) =>
7
- (rootNode: ts.Node): ts.Node => {
8
- function visit(node: ts.Node): ts.Node {
9
- if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
10
- if (node.tagName.getText() === tagName) {
11
- const newAttributes = node.attributes.properties.map(attr => {
12
- if (ts.isJsxAttribute(attr) && attr.name.getText() === "mood") {
13
- const valueName =
14
- attr.initializer && getPropValueText(attr.initializer)
4
+ const OLD_PROP_NAME = "mood"
5
+ const NEW_PROP_NAME = "variant"
15
6
 
16
- if (valueName) {
17
- let variantValue: string = ""
18
- switch (valueName) {
19
- case "positive":
20
- variantValue = "success"
21
- break
22
- case "negative":
23
- variantValue = "warning"
24
- break
25
- case "assertive":
26
- variantValue = "cautionary"
27
- break
28
- }
29
- return ts.factory.createJsxAttribute(
30
- ts.factory.createIdentifier("variant"),
31
- ts.factory.createStringLiteral(variantValue)
32
- )
33
- }
34
- }
35
-
36
- return attr
37
- })
38
-
39
- if (ts.isJsxOpeningElement(node)) {
40
- return ts.factory.updateJsxOpeningElement(
41
- node,
42
- node.tagName,
43
- node.typeArguments,
44
- ts.factory.createJsxAttributes(newAttributes)
45
- )
46
- } else if (ts.isJsxSelfClosingElement(node)) {
47
- return ts.factory.updateJsxSelfClosingElement(
48
- node,
49
- node.tagName,
50
- node.typeArguments,
51
- ts.factory.createJsxAttributes(newAttributes)
52
- )
53
- }
54
- }
55
- }
56
- return ts.visitEachChild(node, visit, context)
57
- }
58
- return ts.visitNode(rootNode, visit)
7
+ const getNewVariantValue = (
8
+ oldValue: Exclude<ConfirmationModalProps[typeof OLD_PROP_NAME], undefined>
9
+ ): Exclude<ConfirmationModalProps[typeof NEW_PROP_NAME], undefined> => {
10
+ switch (oldValue) {
11
+ case "positive":
12
+ return "success"
13
+ case "informative":
14
+ return "informative"
15
+ case "negative":
16
+ return "warning"
17
+ case "cautionary":
18
+ return "cautionary"
19
+ case "assertive":
20
+ return "cautionary"
59
21
  }
22
+ }
23
+
24
+ export const transformConfirmationModalMoodsToVariant = migrateStringProp(
25
+ OLD_PROP_NAME,
26
+ NEW_PROP_NAME,
27
+ getNewVariantValue
28
+ )
@@ -1,4 +1,4 @@
1
- import type { EmptyStateProps } from "~components/EmptyState"
1
+ import type { EmptyStateProps } from "../../src/EmptyState"
2
2
  import { migrateStringProp } from "../utils"
3
3
 
4
4
  const OLD_PROP_NAME = "illustrationType"
@@ -1,4 +1,4 @@
1
- import type { InformationTileProps } from "~components/Tile"
1
+ import type { InformationTileProps } from "../../src/Tile"
2
2
  import { migrateStringProp } from "../utils"
3
3
 
4
4
  const OLD_PROP_NAME = "mood"
@@ -1,4 +1,4 @@
1
- import type { MultiActionTileProps } from "~components/Tile"
1
+ import type { MultiActionTileProps } from "../../src/Tile"
2
2
  import { migrateStringProp } from "../utils"
3
3
 
4
4
  const OLD_PROP_NAME = "mood"
@@ -1,4 +1,4 @@
1
- import type { GenericNotificationProps } from "~components/Notification/subcomponents/GenericNotification"
1
+ import type { GenericNotificationProps } from "../../src/Notification/subcomponents/GenericNotification"
2
2
  import { migrateStringProp } from "../utils"
3
3
 
4
4
  const OLD_PROP_NAME = "type"
@@ -1,4 +1,4 @@
1
- import type { ProgressBarProps } from "~components/ProgressBar"
1
+ import type { ProgressBarProps } from "../../src/ProgressBar"
2
2
  import { migrateStringProp } from "../utils"
3
3
 
4
4
  const OLD_PROP_NAME = "mood"
@@ -1,7 +1,7 @@
1
1
  import { transformComponentsInDir } from "../utils"
2
2
  import { removeInputEditModalMood } from "./removeInputEditModalMood"
3
3
  /** This is here as a script runner that migrates Well variant to their color equivalent */
4
- const migrateModalMoodsToVariant = (): void => {
4
+ const run = (): void => {
5
5
  // eslint-disable-next-line no-console
6
6
  console.log(" ~(-_- ~) Running InputEditModal transformer (~ -_-)~")
7
7
  const targetDir = process.argv[2]
@@ -16,4 +16,4 @@ const migrateModalMoodsToVariant = (): void => {
16
16
  )
17
17
  }
18
18
 
19
- migrateModalMoodsToVariant()
19
+ run()
@@ -3,7 +3,7 @@ import { transformSource, printAst } from "../utils"
3
3
  import { removeInputEditModalMood } from "./removeInputEditModalMood"
4
4
 
5
5
  describe("removeInputEditModalMood", () => {
6
- it("removed mood", () => {
6
+ it("removes mood", () => {
7
7
  const inputAst = parseJsx(`
8
8
  export const TestComponent = () => <InputEditModal mood="positive"/>
9
9
  `)
@@ -47,34 +47,4 @@ describe("removeInputEditModalMood", () => {
47
47
  })
48
48
  expect(transformed).toBe(printAst(outputAst))
49
49
  })
50
-
51
- it("transforms InputEditModal with arbitrary braces", () => {
52
- const inputAst = parseJsx(`
53
- export const TestComponent = () => <div><InputEditModal mood={"positive"}/><InputEditModal mood={'assertive'}/><InputEditModal mood={\`positive\`}/></div>
54
- `)
55
- const outputAst = parseJsx(`
56
- export const TestComponent = () => <div><InputEditModal /><InputEditModal /><InputEditModal /></div>
57
- `)
58
- const transformed = transformSource({
59
- sourceFile: inputAst,
60
- astTransformer: removeInputEditModalMood,
61
- tagName: "InputEditModal",
62
- })
63
- expect(transformed).toBe(printAst(outputAst))
64
- })
65
-
66
- it("won't modify variants usings variables", () => {
67
- const inputAst = parseJsx(`
68
- export const TestComponent = () => <div><InputEditModal mood={InputEditModalVariable}/></div>
69
- `)
70
- const outputAst = parseJsx(`
71
- export const TestComponent = () => <div><InputEditModal /></div>
72
- `)
73
- const transformed = transformSource({
74
- sourceFile: inputAst,
75
- astTransformer: removeInputEditModalMood,
76
- tagName: "InputEditModal",
77
- })
78
- expect(transformed).toBe(printAst(outputAst))
79
- })
80
50
  })
@@ -1,40 +1,3 @@
1
- import ts from "typescript"
1
+ import { removeProps } from "../utils/removeProps"
2
2
 
3
- /** Recurses through AST to find and update any jsx element that matched the tagName */
4
- export const removeInputEditModalMood =
5
- (context: ts.TransformationContext, tagName: string) =>
6
- (rootNode: ts.Node): ts.Node => {
7
- function visit(node: ts.Node): ts.Node {
8
- if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
9
- if (node.tagName.getText() === tagName) {
10
- const newAttributes = node.attributes.properties.reduce<
11
- ts.JsxAttributeLike[]
12
- >((acc, attr) => {
13
- if (ts.isJsxAttribute(attr) && attr.name.getText() === "mood") {
14
- return acc
15
- }
16
-
17
- return [...acc, attr]
18
- }, [])
19
-
20
- if (ts.isJsxOpeningElement(node)) {
21
- return ts.factory.updateJsxOpeningElement(
22
- node,
23
- node.tagName,
24
- node.typeArguments,
25
- ts.factory.createJsxAttributes(newAttributes)
26
- )
27
- } else if (ts.isJsxSelfClosingElement(node)) {
28
- return ts.factory.updateJsxSelfClosingElement(
29
- node,
30
- node.tagName,
31
- node.typeArguments,
32
- ts.factory.createJsxAttributes(newAttributes)
33
- )
34
- }
35
- }
36
- }
37
- return ts.visitEachChild(node, visit, context)
38
- }
39
- return ts.visitNode(rootNode, visit)
40
- }
3
+ export const removeInputEditModalMood = removeProps(["mood"])
@@ -0,0 +1,15 @@
1
+ import { transformComponentsInDir } from "../utils"
2
+ import { removePopoverVariant } from "./removePopoverVariant"
3
+
4
+ const run = (): void => {
5
+ // eslint-disable-next-line no-console
6
+ console.log(" ~(-_- ~) Running Popover transformer (~ -_-)~")
7
+ const targetDir = process.argv[2]
8
+ if (!targetDir) {
9
+ process.exit(1)
10
+ }
11
+
12
+ transformComponentsInDir(targetDir, removePopoverVariant, "Popover")
13
+ }
14
+
15
+ run()
@@ -0,0 +1,65 @@
1
+ import { parseJsx } from "../__tests__/utils"
2
+ import { transformSource, printAst } from "../utils"
3
+ import { removePopoverVariant } from "./removePopoverVariant"
4
+
5
+ describe("removePopoverVariant()", () => {
6
+ it("removes variant", () => {
7
+ const inputAst = parseJsx(`
8
+ export const TestComponent = () => <Popover variant="positive" />
9
+ `)
10
+ const outputAst = parseJsx(`
11
+ export const TestComponent = () => <Popover />
12
+ `)
13
+ const transformed = transformSource({
14
+ sourceFile: inputAst,
15
+ astTransformer: removePopoverVariant,
16
+ tagName: "Popover",
17
+ })
18
+ expect(transformed).toEqual(printAst(outputAst))
19
+ })
20
+
21
+ it("removes customIcon", () => {
22
+ const inputAst = parseJsx(`
23
+ export const TestComponent = () => <Popover variant="positive" customIcon={<Icon />} />
24
+ `)
25
+ const outputAst = parseJsx(`
26
+ export const TestComponent = () => <Popover />
27
+ `)
28
+ const transformed = transformSource({
29
+ sourceFile: inputAst,
30
+ astTransformer: removePopoverVariant,
31
+ tagName: "Popover",
32
+ })
33
+ expect(transformed).toEqual(printAst(outputAst))
34
+ })
35
+
36
+ it("handles multiple attributes and remove only variant", () => {
37
+ const inputAst = parseJsx(`
38
+ export const TestComponent = () => <Popover variant="negative" id="123"/>
39
+ `)
40
+ const outputAst = parseJsx(`
41
+ export const TestComponent = () => <Popover id="123"/>
42
+ `)
43
+ const transformed = transformSource({
44
+ sourceFile: inputAst,
45
+ astTransformer: removePopoverVariant,
46
+ tagName: "Popover",
47
+ })
48
+ expect(transformed).toBe(printAst(outputAst))
49
+ })
50
+
51
+ it("transforms multiple Popovers", () => {
52
+ const inputAst = parseJsx(`
53
+ export const TestComponent = () => <div><Popover variant="positive"/><Popover variant="negative" customIcon={<Icon />}/></div>
54
+ `)
55
+ const outputAst = parseJsx(`
56
+ export const TestComponent = () => <div><Popover /><Popover /></div>
57
+ `)
58
+ const transformed = transformSource({
59
+ sourceFile: inputAst,
60
+ astTransformer: removePopoverVariant,
61
+ tagName: "Popover",
62
+ })
63
+ expect(transformed).toBe(printAst(outputAst))
64
+ })
65
+ })
@@ -0,0 +1,3 @@
1
+ import { removeProps } from "../utils/removeProps"
2
+
3
+ export const removePopoverVariant = removeProps(["variant", "customIcon"])
@@ -120,10 +120,10 @@ describe("transformGuidanceBlockVariantProp", () => {
120
120
 
121
121
  it("won't modify variants usings variables", () => {
122
122
  const inputAst = parseJsx(`
123
- export const TestComponent = () => <div><GuidanceBlock variant={wellVariable} /></div>
123
+ export const TestComponent = () => <div><GuidanceBlock variant={varName} /></div>
124
124
  `)
125
125
  const outputAst = parseJsx(`
126
- export const TestComponent = () => <div><GuidanceBlock variant={wellVariable} /></div>
126
+ export const TestComponent = () => <div><GuidanceBlock variant={varName} /></div>
127
127
  `)
128
128
  const transformed = transformSource({
129
129
  sourceFile: inputAst,
@@ -0,0 +1,65 @@
1
+ import { parseJsx } from "../__tests__/utils"
2
+ import { transformSource, printAst } from "../utils"
3
+ import { removeProps } from "./removeProps"
4
+
5
+ describe("removeProps()", () => {
6
+ it("removes single specified prop", () => {
7
+ const inputAst = parseJsx(`
8
+ export const TestComponent = () => <Pancakes topping="butter" />
9
+ `)
10
+ const outputAst = parseJsx(`
11
+ export const TestComponent = () => <Pancakes />
12
+ `)
13
+ const transformed = transformSource({
14
+ sourceFile: inputAst,
15
+ astTransformer: removeProps(["topping"]),
16
+ tagName: "Pancakes",
17
+ })
18
+ expect(transformed).toEqual(printAst(outputAst))
19
+ })
20
+
21
+ it("removes multiple specified props", () => {
22
+ const inputAst = parseJsx(`
23
+ export const TestComponent = () => <Pancakes topping="butter" fruit="blueberries" />
24
+ `)
25
+ const outputAst = parseJsx(`
26
+ export const TestComponent = () => <Pancakes />
27
+ `)
28
+ const transformed = transformSource({
29
+ sourceFile: inputAst,
30
+ astTransformer: removeProps(["topping", "fruit"]),
31
+ tagName: "Pancakes",
32
+ })
33
+ expect(transformed).toEqual(printAst(outputAst))
34
+ })
35
+
36
+ it("handles multiple attributes and removes only specified props", () => {
37
+ const inputAst = parseJsx(`
38
+ export const TestComponent = () => <Pancakes topping="jam" id="123"/>
39
+ `)
40
+ const outputAst = parseJsx(`
41
+ export const TestComponent = () => <Pancakes id="123"/>
42
+ `)
43
+ const transformed = transformSource({
44
+ sourceFile: inputAst,
45
+ astTransformer: removeProps(["topping"]),
46
+ tagName: "Pancakes",
47
+ })
48
+ expect(transformed).toBe(printAst(outputAst))
49
+ })
50
+
51
+ it("transforms multiple Pancakess", () => {
52
+ const inputAst = parseJsx(`
53
+ export const TestComponent = () => <div><Pancakes topping="butter"/><Pancakes topping="jam"/></div>
54
+ `)
55
+ const outputAst = parseJsx(`
56
+ export const TestComponent = () => <div><Pancakes /><Pancakes /></div>
57
+ `)
58
+ const transformed = transformSource({
59
+ sourceFile: inputAst,
60
+ astTransformer: removeProps(["topping"]),
61
+ tagName: "Pancakes",
62
+ })
63
+ expect(transformed).toBe(printAst(outputAst))
64
+ })
65
+ })
@@ -0,0 +1,30 @@
1
+ import ts from "typescript"
2
+ import { updateJsxElementWithNewProps } from "./updateJsxElementWithNewProps"
3
+
4
+ export const removeProps =
5
+ (propsToRemove: string[]) =>
6
+ (context: ts.TransformationContext, tagName: string) =>
7
+ (rootNode: ts.Node): ts.Node => {
8
+ function visit(node: ts.Node): ts.Node {
9
+ if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
10
+ if (node.tagName.getText() === tagName) {
11
+ const newAttributes = node.attributes.properties.reduce<
12
+ ts.JsxAttributeLike[]
13
+ >((acc, attr) => {
14
+ if (
15
+ ts.isJsxAttribute(attr) &&
16
+ propsToRemove.includes(attr.name.getText())
17
+ ) {
18
+ return acc
19
+ }
20
+
21
+ return [...acc, attr]
22
+ }, [])
23
+
24
+ return updateJsxElementWithNewProps(node, newAttributes)
25
+ }
26
+ }
27
+ return ts.visitEachChild(node, visit, context)
28
+ }
29
+ return ts.visitNode(rootNode, visit)
30
+ }
@@ -28,12 +28,12 @@ var getMaxFontSizePixels = function (size) {
28
28
  if (size === "xlarge" || size === "xxlarge") return 34;
29
29
  return 22;
30
30
  };
31
- var fallbackIcon = function (fullName) {
32
- if (fullName) {
31
+ var fallbackIcon = function (alt) {
32
+ if (alt) {
33
33
  return React__default.default.createElement(UserIcon.UserIcon, {
34
34
  inheritSize: true,
35
35
  role: "img",
36
- "aria-label": fullName
36
+ "aria-label": alt
37
37
  });
38
38
  }
39
39
  return React__default.default.createElement(UserIcon.UserIcon, {
@@ -41,7 +41,7 @@ var fallbackIcon = function (fullName) {
41
41
  role: "presentation"
42
42
  });
43
43
  };
44
- var renderInitials = function (fullName, size, disableInitials) {
44
+ var renderInitials = function (fullName, alt, size, disableInitials) {
45
45
  if (fullName === void 0) {
46
46
  fullName = "";
47
47
  }
@@ -53,9 +53,9 @@ var renderInitials = function (fullName, size, disableInitials) {
53
53
  var renderFallback = disableInitials || initials === "";
54
54
  return renderFallback ? React__default.default.createElement("span", {
55
55
  className: Avatar_module.fallbackIcon
56
- }, fallbackIcon(fullName)) : React__default.default.createElement("abbr", {
56
+ }, fallbackIcon(alt)) : React__default.default.createElement("abbr", {
57
57
  className: classnames__default.default(Avatar_module.initials, isLongName && Avatar_module.longName),
58
- title: fullName || ""
58
+ title: alt
59
59
  }, isLongName ?
60
60
  // Only called if 3 or more initials, fits text width for long names
61
61
  React__default.default.createElement(reactTextfit.Textfit, {
@@ -78,11 +78,13 @@ var Avatar = function (_a) {
78
78
  isCompany = _d === void 0 ? false : _d,
79
79
  _e = _a.isCurrentUser,
80
80
  isCurrentUser = _e === void 0 ? true : _e,
81
+ _f = _a.alt,
82
+ alt = _f === void 0 ? fullName || "" : _f,
81
83
  classNameOverride = _a.classNameOverride,
82
- restProps = tslib.__rest(_a, ["fullName", "size", "avatarSrc", "disableInitials", "isCompany", "isCurrentUser", "classNameOverride"]);
83
- var _f = React.useState(avatarSrc ? "loading" : "none"),
84
- avatarState = _f[0],
85
- setAvatarState = _f[1];
84
+ restProps = tslib.__rest(_a, ["fullName", "size", "avatarSrc", "disableInitials", "isCompany", "isCurrentUser", "alt", "classNameOverride"]);
85
+ var _g = React.useState(avatarSrc ? "loading" : "none"),
86
+ avatarState = _g[0],
87
+ setAvatarState = _g[1];
86
88
  var image = React.useRef(null);
87
89
  var renderInitialAvatar = !isCompany && (avatarState === "none" || avatarState === "error");
88
90
  React.useEffect(function () {
@@ -110,7 +112,7 @@ var Avatar = function (_a) {
110
112
  src: avatarSrc,
111
113
  onError: onImageFailure,
112
114
  onLoad: onImageSuccess,
113
- alt: fullName || ""
114
- }), renderInitialAvatar && renderInitials(fullName, size, disableInitials));
115
+ alt: alt
116
+ }), renderInitialAvatar && renderInitials(fullName, alt, size, disableInitials));
115
117
  };
116
118
  exports.Avatar = Avatar;
@@ -2,7 +2,7 @@
2
2
 
3
3
  var tslib = require('tslib');
4
4
  var React = require('react');
5
- var hostedAssets = require('@kaizen/hosted-assets');
5
+ var hostedAssets = require('../utils/hostedAssets.cjs');
6
6
  var BrandCollectiveIntelligence = require('./BrandCollectiveIntelligence/BrandCollectiveIntelligence.cjs');
7
7
  var Brand_module = require('./Brand.module.scss.cjs');
8
8
  function _interopDefault(e) {
@@ -3,9 +3,9 @@
3
3
  var tslib = require('tslib');
4
4
  var React = require('react');
5
5
  var classnames = require('classnames');
6
- var hostedAssets = require('@kaizen/hosted-assets');
7
6
  var Heading = require('../Heading/Heading.cjs');
8
7
  var Text = require('../Text/Text.cjs');
8
+ var hostedAssets = require('../utils/hostedAssets.cjs');
9
9
  var useMediaQueries = require('../utils/useMediaQueries.cjs');
10
10
  var BrandMoment_module = require('./BrandMoment.module.scss.cjs');
11
11
  var Button = require('../__actions__/Button/v1/Button/Button.cjs');
@@ -3,7 +3,7 @@
3
3
  var tslib = require('tslib');
4
4
  var React = require('react');
5
5
  var classnames = require('classnames');
6
- var Card_module = require('./Card.module.scss.cjs');
6
+ var Card_module = require('./Card.module.css.cjs');
7
7
  function _interopDefault(e) {
8
8
  return e && e.__esModule ? e : {
9
9
  default: e
@@ -0,0 +1,22 @@
1
+ 'use strict';
2
+
3
+ var styles = {
4
+ "wrapper": "Card-module_wrapper__Hriov",
5
+ "elevated": "Card-module_elevated__qkaCe",
6
+ "blue": "Card-module_blue__JOIuL",
7
+ "gray": "Card-module_gray__cRl9J",
8
+ "green": "Card-module_green__s2Oj8",
9
+ "orange": "Card-module_orange__qrxQo",
10
+ "purple": "Card-module_purple__cp6Bx",
11
+ "red": "Card-module_red__Ux35X",
12
+ "white": "Card-module_white__LjMQF",
13
+ "yellow": "Card-module_yellow__A3F9a",
14
+ "default": "Card-module_default__c8nG0",
15
+ "informative": "Card-module_informative__6la3C",
16
+ "positive": "Card-module_positive__waT0O",
17
+ "cautionary": "Card-module_cautionary__Fxfva",
18
+ "destructive": "Card-module_destructive__OqDdg",
19
+ "assertive": "Card-module_assertive__5ntbN",
20
+ "highlight": "Card-module_highlight__QJ5hP"
21
+ };
22
+ module.exports = styles;
@@ -3,7 +3,7 @@
3
3
  var tslib = require('tslib');
4
4
  var React = require('react');
5
5
  var classnames = require('classnames');
6
- var hostedAssets = require('@kaizen/hosted-assets');
6
+ var hostedAssets = require('../../../utils/hostedAssets.cjs');
7
7
  var Base_module = require('./Base.module.scss.cjs');
8
8
  function _interopDefault(e) {
9
9
  return e && e.__esModule ? e : {
@@ -2,7 +2,7 @@
2
2
 
3
3
  var React = require('react');
4
4
  var classnames = require('classnames');
5
- var hostedAssets = require('@kaizen/hosted-assets');
5
+ var hostedAssets = require('../../../utils/hostedAssets.cjs');
6
6
  var canPlayWebm = require('../../utils/canPlayWebm.cjs');
7
7
  var usePausePlay = require('../../utils/usePausePlay.cjs');
8
8
  var Base_module = require('../Base/Base.module.scss.cjs');
@@ -22,13 +22,6 @@ var styles = {
22
22
  "close": "Popover-module_close__8h4Rt",
23
23
  "arrowWrapper": "Popover-module_arrowWrapper__DiE3-",
24
24
  "arrow": "Popover-module_arrow__PS4V6",
25
- "arrowSideTop": "Popover-module_arrowSideTop__JoORK",
26
- "arrowSideLeft": "Popover-module_arrowSideLeft__2Zhqb",
27
- "arrowSideRight": "Popover-module_arrowSideRight__fHKWI",
28
- "arrowSideBottom": "Popover-module_arrowSideBottom__mBr5k",
29
- "arrowPositionCenter": "Popover-module_arrowPositionCenter__l8V0-",
30
- "arrowPositionStart": "Popover-module_arrowPositionStart__eXyu0",
31
- "arrowPositionEnd": "Popover-module_arrowPositionEnd__UY4MU",
32
25
  "large": "Popover-module_large__-LH0l",
33
26
  "singleLine": "Popover-module_singleLine__7il24"
34
27
  };