@kaizen/components 1.38.2 → 1.38.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.38.2",
+  "version": "1.38.4",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -97,19 +97,19 @@
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
     "@cultureamp/frontend-apis": "^9.0.2",
-    "@cultureamp/i18n-react-intl": "^2.1.3",
-    "@kaizen/design-tokens": "^10.3.16",
-    "@kaizen/tailwind": "^1.2.0",
+    "@cultureamp/i18n-react-intl": "^2.1.5",
+    "@kaizen/design-tokens": "^10.3.17",
+    "@kaizen/tailwind": "^1.2.1",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-image": "^3.0.3",
-    "@rollup/plugin-json": "^6.0.1",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.5",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react-dom": "^18.2.17",
-    "@types/react-textfit": "^1.1.3",
+    "@types/react-textfit": "^1.1.4",
     "@types/uuid": "^9.0.7",
     "agadoo": "^3.0.0",
     "autoprefixer": "^10.4.16",
@@ -124,13 +124,13 @@
     "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.69.5",
     "serialize-query-params": "^2.0.2",
-    "svgo": "^3.0.4",
+    "svgo": "^3.1.0",
     "ts-jest": "^29.1.1",
-    "ts-patch": "^3.0.2",
+    "ts-patch": "^3.1.1",
     "typescript-transform-paths": "^3.4.6"
   },
   "peerDependencies": {
-    "@cultureamp/i18n-react-intl": "^2.1.3",
+    "@cultureamp/i18n-react-intl": "^2.1.5",
     "react": "^18.2.0",
     "react-intl": "^6.5.5"
   }

package/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx

@@ -51,12 +51,10 @@ const meta = {
     secondaryActions: SECONDARY_ACTIONS,
     secondaryOverflowMenuItems: [
       {
-        action: (): void => alert("test"),
         label: "Overflow action 1",
         icon: <StarOnIcon role="presentation" />,
       },
       {
-        action: "#",
         label: "Overflow link 1",
         icon: <StarOnIcon role="presentation" />,
       },

package/src/TitleBlockZen/subcomponents/MainActions.tsx

@@ -2,12 +2,13 @@ import React from "react"
 import { Button, IconButton } from "~components/Button"
 import { ChevronDownIcon, MeatballsIcon } from "~components/Icon"
 import { Menu, MenuList } from "~components/Menu"
-import { DefaultActionProps, PrimaryActionProps } from "../types"
-import { isMenuGroupNotButton } from "../utils"
 import {
-  TitleBlockMenuItem,
+  DefaultActionProps,
+  PrimaryActionProps,
   TitleBlockMenuItemProps,
-} from "./TitleBlockMenuItem"
+} from "../types"
+import { isMenuGroupNotButton } from "../utils"
+import { TitleBlockMenuItem } from "./TitleBlockMenuItem"
 import { Toolbar } from "./Toolbar"
 import styles from "./MainActions.module.scss"
 
@@ -32,7 +33,7 @@ export const MainActions = ({
       <TitleBlockMenuItem
         {...item}
         key={`main-action-primary-menu-item-${idx}`}
-        automationId={`main-action-primary-menu-item-${idx}`}
+        data-automation-id={`main-action-primary-menu-item-${idx}`}
         data-testid={`main-action-primary-menu-item-${idx}`}
       />
     ))

package/src/TitleBlockZen/subcomponents/MobileActions.spec.tsx

@@ -8,11 +8,11 @@ const user = userEvent.setup()
 const MENU_LINKS = [
   {
     label: "Primary menu link 1",
-    action: "#",
+    href: "#",
   },
   {
     label: "Primary menu action 2",
-    action: (): void => alert("test"),
+    onClick: (): void => alert("test"),
   },
 ]
 

package/src/TitleBlockZen/subcomponents/MobileActions.tsx

@@ -10,15 +10,13 @@ import {
   SecondaryActionsProps,
   TitleBlockButtonProps,
   TitleBlockMenuGroup,
+  TitleBlockMenuItemProps,
 } from "../types"
 import {
   convertSecondaryActionsToMenuItems,
   isMenuGroupNotButton,
 } from "../utils"
-import {
-  TitleBlockMenuItem,
-  TitleBlockMenuItemProps,
-} from "./TitleBlockMenuItem"
+import { TitleBlockMenuItem } from "./TitleBlockMenuItem"
 
 import styles from "./MobileActions.module.scss"
 
@@ -57,7 +55,7 @@ const renderPrimaryActionDrawerContent = (
         <TitleBlockMenuItem
           {...item}
           key={`title-block-mobile-actions-primary-${itemType}-${idx}`}
-          automationId={`title-block-mobile-actions-primary-${itemType}-${idx}`}
+          data-automation-id={`title-block-mobile-actions-primary-${itemType}-${idx}`}
           data-testid={`title-block-mobile-actions-primary-${itemType}-${idx}`}
         />
       )
@@ -76,7 +74,7 @@ const renderDefaultLink = (
       <TitleBlockMenuItem
         {...defaultAction}
         key="title-block-mobile-actions-default-link"
-        automationId="title-block-mobile-actions-default-link"
+        data-automation-id="title-block-mobile-actions-default-link"
         data-testid="title-block-mobile-actions-default-link"
       />
     )
@@ -88,7 +86,7 @@ const renderDefaultLink = (
       icon={defaultAction.icon}
       disabled={defaultAction.disabled}
       key="title-block-mobile-actions-default-link"
-      automationId="title-block-mobile-actions-default-link"
+      data-automation-id="title-block-mobile-actions-default-link"
       data-testid="title-block-mobile-actions-default-link"
     />
   )
@@ -102,7 +100,7 @@ const renderDefaultAction = (
       <TitleBlockMenuItem
         {...defaultAction}
         key="title-block-mobile-actions-default-action"
-        automationId="title-block-mobile-actions-default-action"
+        data-automation-id="title-block-mobile-actions-default-action"
         data-testid="title-block-mobile-actions-default-action"
       />
     )

package/src/TitleBlockZen/subcomponents/TitleBlockMenuItem.tsx

@@ -1,15 +1,9 @@
 import React from "react"
 import classnames from "classnames"
-import { CustomButtonProps } from "~components/Button"
-import { MenuItem, MenuItemProps } from "~components/Menu"
+import { MenuItem } from "~components/Menu"
+import { TitleBlockMenuItemProps } from "../types"
 import styles from "./TitleBlockMenuItem.module.scss"
 
-export type TitleBlockMenuItemProps =
-  | ({
-      component: (props: CustomButtonProps) => JSX.Element
-    } & MenuItemProps)
-  | MenuItemProps
-
 export const TitleBlockMenuItem = (
   props: TitleBlockMenuItemProps
 ): JSX.Element => {

package/src/TitleBlockZen/types.ts

@@ -125,9 +125,7 @@ export type TitleBlockCustomButtonProps = TitleBlockDistributiveOmit<
 }
 
 export type TitleBlockMenuItemProps =
-  | (Omit<MenuItemProps, "action"> & {
-      action: ((e: any) => void) | string
-    })
+  | MenuItemProps
   | TitleBlockCustomButtonProps
 
 export type ButtonWithHrefNotOnClick = TitleBlockDistributiveOmit<

package/src/TitleBlockZen/utils.ts

@@ -1,4 +1,3 @@
-import { MenuItemProps } from "~components/Menu"
 import {
   TitleBlockButtonProps,
   TitleBlockCustomButtonProps,
@@ -8,10 +7,6 @@ import {
   TitleBlockMenuItemProps,
 } from "./types"
 
-export const isMenuItemNotButton = (
-  value: TitleBlockButtonProps | MenuItemProps
-): value is MenuItemProps => "action" in value
-
 export const isMenuGroupNotButton = (
   value:
     | (TitleBlockButtonProps | TitleBlockCustomButtonProps)

package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.tsx

@@ -39,7 +39,7 @@ export const ToggleSwitch = ({
       />
       <span className={styles.track}>
         <span className={styles.thumb}>
-          <CheckIcon role="presentation" />
+          <CheckIcon classNameOverride={styles.checkIcon} role="presentation" />
         </span>
       </span>
     </span>