@kaizen/components 1.41.0 → 1.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.41.0",
+  "version": "1.42.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -47,7 +47,7 @@
     "@react-stately/select": "^3.6.2",
     "@react-types/shared": "^3.22.1",
     "classnames": "^2.5.1",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.5.0",
     "lodash.debounce": "^4.0.8",
     "nanobus": "^4.5.0",
     "prosemirror-commands": "^1.5.2",
@@ -80,8 +80,8 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
-    "@cultureamp/frontend-apis": "^9.4.1",
-    "@cultureamp/i18n-react-intl": "^2.5.2",
+    "@cultureamp/frontend-apis": "^9.4.2",
+    "@cultureamp/i18n-react-intl": "^2.5.3",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -90,7 +90,7 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/react-dom": "^18.2.19",
+    "@types/react-dom": "^18.2.22",
     "@types/react-textfit": "^1.1.4",
     "@types/uuid": "^9.0.8",
     "agadoo": "^3.0.0",
@@ -99,12 +99,12 @@
     "concat-cli": "^4.0.0",
     "query-string": "^9.0.0",
     "react-intl": "^6.6.2",
-    "rollup": "^4.12.0",
+    "rollup": "^4.12.1",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-ignore": "^1.0.10",
     "rollup-plugin-node-externals": "^7.0.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.71.1",
+    "sass": "^1.72.0",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.2.0",
     "ts-jest": "^29.1.2",
@@ -115,7 +115,7 @@
     "@kaizen/tailwind": "1.2.5"
   },
   "peerDependencies": {
-    "@cultureamp/i18n-react-intl": "^2.5.1",
+    "@cultureamp/i18n-react-intl": "^2.5.3",
     "react": "^18.2.0",
     "react-intl": "^6.6.2"
   },

package/src/DateRangePicker/_docs/DateRangePicker.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import { DateRange } from "react-day-picker"
 import { DateRangePicker, formatDateRangeValue } from "../index"
 
@@ -8,6 +9,7 @@ const meta = {
   component: DateRangePicker,
   args: {
     labelText: "Label",
+    onChange: fn(),
   },
 } satisfies Meta<typeof DateRangePicker>
 

package/src/Filter/Filter/_docs/Filter.stories.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react"
 import { action } from "@storybook/addon-actions"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import { FilterButton, FilterButtonRemovable } from "~components/Filter"
 import { Filter, FilterContents } from "../index"
 
@@ -20,6 +21,7 @@ const meta = {
       <FilterButton label="Label" {...triggerProps} />
     ),
     isOpen: false,
+    setIsOpen: fn(),
   },
 } satisfies Meta<typeof Filter>
 

package/src/Filter/FilterBar/_docs/FilterBar.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import queryString from "query-string"
 import Highlight from "react-highlight"
 import {
@@ -30,6 +31,7 @@ const meta = {
   args: {
     filters: [], // Defined in stories
     values: {}, // Defined in stories
+    onValuesChange: fn(),
   },
 } satisfies Meta<typeof FilterBar>
 

package/src/Filter/FilterDatePicker/_docs/FilterDatePicker.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import Highlight from "react-highlight"
 import { defaultMonthControls } from "~components/Calendar/_docs/controls/defaultMonthControls"
 import {
@@ -56,6 +57,8 @@ const meta = {
     ),
     isOpen: false,
     selectedDate: undefined,
+    setIsOpen: fn(),
+    onDateChange: fn(),
   },
 } satisfies Meta<typeof FilterDatePicker>
 

package/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import Highlight from "react-highlight"
 import { DateRange } from "~components/Calendar"
 import { defaultMonthControls } from "~components/Calendar/_docs/controls/defaultMonthControls"
@@ -75,6 +76,8 @@ const meta = {
     renderTrigger: (triggerButtonProps: FilterButtonProps): JSX.Element => (
       <FilterButton {...triggerButtonProps} />
     ),
+    setIsOpen: fn(),
+    onRangeChange: fn(),
   },
 } satisfies Meta<typeof FilterDateRangePicker>
 

package/src/Filter/FilterSelect/_docs/FilterSelect.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import { renderTriggerControls } from "~components/Filter/_docs/controls/renderTriggerControls"
 import { FilterButton } from "../../FilterButton"
 import { FilterSelect } from "../FilterSelect"
@@ -29,6 +30,7 @@ const meta = {
     renderTrigger: (triggerProps): JSX.Element => (
       <FilterButton {...triggerProps} />
     ),
+    setIsOpen: fn(),
   },
   parameters: {
     actions: {

package/src/Heading/Heading.module.scss

@@ -15,6 +15,14 @@
   letter-spacing: $typography-display-0-letter-spacing;
 }
 
+.composable-header-title {
+  font-family: $typography-display-0-font-family; // Tiempos
+  font-weight: 500; // Medium
+  font-size: $typography-heading-1-font-size;
+  line-height: $typography-heading-1-line-height;
+  letter-spacing: $typography-heading-1-letter-spacing;
+}
+
 .heading-1 {
   font-family: $typography-heading-1-font-family;
   font-weight: $typography-heading-1-font-weight;

package/src/Heading/Heading.tsx

@@ -7,6 +7,7 @@ const VARIANTS_24PX_OR_GREATER = ["display-0", "heading-1", "heading-2"]
 
 export type HeadingVariants =
   | "display-0"
+  | "composable-header-title"
   | "heading-1"
   | "heading-2"
   | "heading-3"
@@ -84,6 +85,7 @@ Heading.displayName = "Heading"
 const translateHeadingLevelToTag = (headingLevel: HeadingVariants): string => {
   switch (headingLevel) {
     case "display-0":
+    case "composable-header-title":
     case "heading-1":
       return "h1"
     case "heading-2":

package/src/Heading/_docs/Heading.mdx

@@ -30,3 +30,12 @@ People using a screen reader rely on heading elements to get an understanding of
 In most cases, you will need to use the `tag` prop to adjust the heading level to suit your page.
 
 There will the odd case where you want heading styling, but the text isn't actually acting as a heading. In those cases, use `tag="div"` or `tag="span"`.
+
+## Variant - Composable Header Title
+
+Use this variant only for the title within the composable header. [See documentation](https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3456565336/Composable+Header+-+IN+DRAFT)
+
+Defaults to `h1` element.
+
+<Canvas of={HeadingStories.ComposableHeaderTitle} />
+

package/src/Heading/_docs/Heading.stickersheet.stories.tsx

@@ -26,6 +26,11 @@ const StickerSheetTemplate: StickerSheetStory = {
                 Let's create a better world of work
               </Heading>
             </StickerSheet.Row>
+            <StickerSheet.Row rowTitle="Composable header title">
+              <Heading variant="composable-header-title" color={fontColour}>
+                Use me in the composable header!
+              </Heading>
+            </StickerSheet.Row>
             <StickerSheet.Row rowTitle="Heading 1">
               <div>
                 <Heading variant="heading-1" color={fontColour}>

package/src/Heading/_docs/Heading.stories.tsx

@@ -28,6 +28,13 @@ export const Playground: Story = {
   },
 }
 
+export const ComposableHeaderTitle: Story = {
+  args: {
+    variant: "composable-header-title",
+    children: "Page title within composable header",
+  },
+}
+
 export const Reversed: Story = {
   args: { color: "white" },
   parameters: {

package/src/Modal/ConfirmationModal/_docs/ConfirmationModal.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import isChromatic from "chromatic"
 import { Text } from "~components/Text"
 import { chromaticModalSettings } from "../../_docs/controls"
@@ -7,6 +8,33 @@ import { ConfirmationModal } from "../index"
 
 const IS_CHROMATIC = isChromatic()
 
+const meta = {
+  title: "Components/Modals/Confirmation Modal",
+  component: ConfirmationModal,
+  args: {
+    isOpen: false,
+    title: "Confirmation modal title",
+    mood: "cautionary",
+    children: (
+      <Text variant="body">
+        Confirmation modals contain smaller pieces of content and can provide
+        additional information to aide the user.
+      </Text>
+    ),
+    onConfirm: fn(),
+    onDismiss: fn(),
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+} satisfies Meta<typeof ConfirmationModal>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
 const ConfirmationModalTemplate: Story = {
   render: args => {
     const [isOpen, setIsOpen] = useState(IS_CHROMATIC)
@@ -35,31 +63,6 @@ const ConfirmationModalTemplate: Story = {
   ...chromaticModalSettings,
 }
 
-const meta = {
-  title: "Components/Modals/Confirmation Modal",
-  component: ConfirmationModal,
-  args: {
-    isOpen: false,
-    title: "Confirmation modal title",
-    mood: "cautionary",
-    children: (
-      <Text variant="body">
-        Confirmation modals contain smaller pieces of content and can provide
-        additional information to aide the user.
-      </Text>
-    ),
-  },
-  argTypes: {
-    children: {
-      control: false,
-    },
-  },
-} satisfies Meta<typeof ConfirmationModal>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
 export const Playground: Story = {
   ...ConfirmationModalTemplate,
   parameters: {

package/src/Modal/ContextModal/_docs/ContextModal.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import isChromatic from "chromatic"
 import { AddImage } from "~components/Illustration"
 import { ModalAccessibleDescription } from "~components/Modal/GenericModal/subcomponents/ModalAccessibleDescription"
@@ -9,6 +10,26 @@ import { ContextModal } from "../index"
 
 const IS_CHROMATIC = isChromatic()
 
+const meta = {
+  title: "Components/Modals/Context Modal",
+  component: ContextModal,
+  args: {
+    isOpen: false,
+    title: "Context modal title",
+    children: undefined,
+    onDismiss: fn(),
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+} satisfies Meta<typeof ContextModal>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
 const ContextModalTemplate: Story = {
   render: args => {
     const [isOpen, setIsOpen] = useState(IS_CHROMATIC)
@@ -72,25 +93,6 @@ const ContextModalTemplate: Story = {
   },
 }
 
-const meta = {
-  title: "Components/Modals/Context Modal",
-  component: ContextModal,
-  args: {
-    isOpen: false,
-    title: "Context modal title",
-    children: undefined,
-  },
-  argTypes: {
-    children: {
-      control: false,
-    },
-  },
-} satisfies Meta<typeof ContextModal>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
 export const Playground: Story = {
   ...ContextModalTemplate,
   parameters: {

package/src/Modal/InputEditModal/InputEditModal.tsx

@@ -30,7 +30,7 @@ export type InputEditModalProps = {
   automationId?: string
   children: React.ReactNode
   submitWorking?: { label: string; labelHidden?: boolean }
-} & HTMLAttributes<HTMLDivElement>
+} & Omit<HTMLAttributes<HTMLDivElement>, "onSubmit">
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093114/Modal#Input-Edit-Modal Guidance} |

package/src/Modal/InputEditModal/_docs/InputEditModal.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import isChromatic from "chromatic"
 import { ModalAccessibleDescription } from "~components/Modal"
 import { Text } from "~components/Text"
@@ -9,33 +10,6 @@ import { InputEditModal } from "../index"
 
 const IS_CHROMATIC = isChromatic()
 
-const InputModalTemplate: Story = {
-  render: args => {
-    const [isOpen, setIsOpen] = useState(IS_CHROMATIC)
-
-    const handleOpen = (): void => setIsOpen(true)
-    const handleClose = (): void => setIsOpen(false)
-
-    return (
-      <>
-        <button
-          type="button"
-          className="border border-gray-500"
-          onClick={handleOpen}
-        >
-          Open Modal
-        </button>
-        <InputEditModal
-          {...args}
-          isOpen={isOpen}
-          onSubmit={handleClose}
-          onDismiss={handleClose}
-        />
-      </>
-    )
-  },
-}
-
 const ExampleForm = (): JSX.Element => (
   <>
     <ModalAccessibleDescription>
@@ -58,6 +32,8 @@ const meta = {
     mood: "positive",
     children: <ExampleForm />,
     submitLabel: "Submit label",
+    onSubmit: fn(),
+    onDismiss: fn(),
   },
   argTypes: {
     children: {
@@ -70,6 +46,33 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
+const InputModalTemplate: Story = {
+  render: args => {
+    const [isOpen, setIsOpen] = useState(IS_CHROMATIC)
+
+    const handleOpen = (): void => setIsOpen(true)
+    const handleClose = (): void => setIsOpen(false)
+
+    return (
+      <>
+        <button
+          type="button"
+          className="border border-gray-500"
+          onClick={handleOpen}
+        >
+          Open Modal
+        </button>
+        <InputEditModal
+          {...args}
+          isOpen={isOpen}
+          onSubmit={handleClose}
+          onDismiss={handleClose}
+        />
+      </>
+    )
+  },
+}
+
 export const Playground: Story = {
   ...InputModalTemplate,
   parameters: {

package/src/MultiSelect/_docs/MultiSelect.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import { MultiSelect, MultiSelectProps } from "../index"
 
 const meta = {
@@ -41,6 +42,8 @@ const meta = {
         value: "toastie",
       },
     ],
+    onSelectedValuesChange: fn(),
+    onOpenChange: fn(),
   },
 } satisfies Meta<typeof MultiSelect>
 

package/src/MultiSelect/subcomponents/MultiSelectOptions/_docs/MultiSelectOptions.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import { MultiSelectOptions, MultiSelectOptionsProps } from "../index"
 
 const meta = {
@@ -22,6 +23,7 @@ const meta = {
         value: "toastie",
       },
     ],
+    onChange: fn(),
   },
 } satisfies Meta<typeof MultiSelectOptions>
 

package/src/RichTextEditor/EditableRichTextContent/_docs/EditableRichTextContent.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import { Button } from "~components/Button"
 import {
   EditorContentArray,
@@ -15,6 +16,7 @@ const meta = {
   args: {
     content: dummyContent,
     labelText: "Editable rich text content",
+    onClick: fn(),
   },
   argTypes: {
     content: { control: "disabled" },

package/src/SplitButton/subcomponents/DropdownButton/DropdownButton.spec.tsx

@@ -9,8 +9,8 @@ const DropdownButtonWrapper = (
 describe("<DropdownButton />", () => {
   it("renders icon with default aria-label", () => {
     render(<DropdownButtonWrapper />)
-    const button = screen.getByRole("button", { name: "Open menu" })
-    expect(button.getAttribute("aria-label")).toBe("Open menu")
+    const button = screen.getByRole("button", { name: "Additional actions" })
+    expect(button.getAttribute("aria-label")).toBe("Additional actions")
     expect(button.firstChild?.nodeName).toEqual("svg")
   })
 

package/src/SplitButton/subcomponents/DropdownButton/DropdownButton.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import { useIntl } from "@cultureamp/i18n-react-intl"
 import classnames from "classnames"
 import { ChevronDownIcon } from "~components/Icon"
 import { BaseButton, BaseButtonProps } from "../BaseButton"
@@ -10,13 +11,23 @@ export const DropdownButton = ({
   classNameOverride,
   "aria-label": ariaLabel,
   ...restProps
-}: DropdownButtonProps): JSX.Element => (
-  <BaseButton
-    label={ariaLabel || "Open menu"}
-    icon={<ChevronDownIcon role="presentation" />}
-    classNameOverride={classnames(styles.dropdownButton, classNameOverride)}
-    {...restProps}
-  />
-)
+}: DropdownButtonProps): JSX.Element => {
+  const { formatMessage } = useIntl()
+  return (
+    <BaseButton
+      label={
+        ariaLabel ||
+        formatMessage({
+          id: "splitButton.dropdownButton.label",
+          defaultMessage: "Additional actions",
+          description: "Label for a dropdown menu holding additional actions",
+        })
+      }
+      icon={<ChevronDownIcon role="presentation" />}
+      classNameOverride={classnames(styles.dropdownButton, classNameOverride)}
+      {...restProps}
+    />
+  )
+}
 
 DropdownButton.displayName = "DropdownButton"

package/src/TimeField/_docs/TimeField.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import { TimeField } from "../index"
 import { ValueType } from "../types"
 
@@ -18,6 +19,7 @@ const meta = {
     label: "Time",
     locale: "en-US",
     value: null,
+    onChange: fn(),
   },
 } satisfies Meta<typeof TimeField>
 

package/src/Workflow/subcomponents/Header/Header.tsx

@@ -18,7 +18,7 @@ export const Header = ({
   ...restProps
 }: HeaderProps): JSX.Element => (
   <HeaderRoot {...restProps}>
-    <Branding alt="Cultureamp" />
+    <Branding alt="Culture Amp" />
     <Titles workflowName={workflowName} stepName={stepName} status={status} />
     <Actions headerActions={headerActions} />
   </HeaderRoot>