@kaizen/components 0.0.0-canary-toast-notification-fix-20240822034045 → 0.0.0-canary-workflow-export-20240910075656

package/src/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx

@@ -5,20 +5,28 @@ import {
   IndicatorInactiveIcon,
   SuccessIcon,
 } from "~components/Icon"
-import { Text } from "~components/Text"
 import { VisuallyHidden } from "~components/VisuallyHidden"
-import styles from "./ProgressStepper.module.scss"
+import styles from "./ProgressStepper.module.css"
+
+export type Step = {
+  id: string
+  label: string
+}
+
+export type Steps = [Step, ...Step[]]
 
 export type ProgressStepperProps = {
-  stepName: string
-  steps: [string, ...string[]]
+  /** The id reference to within a Step object */
+  currentStepId: Step["id"]
+  /** A non-empty array of Steps */
+  steps: Steps
   isComplete?: boolean
 }
 
 const getStepStatus = (
   isComplete: boolean,
   isCurrentStep: boolean,
-  step: string,
+  step: Step,
   index: number
 ): {
   icon: JSX.Element
@@ -34,7 +42,7 @@ const getStepStatus = (
           classNameOverride="success"
         />
       ),
-      accessibleName: `Completed: ${step}`,
+      accessibleName: `Completed: ${step.label}`,
     }
   }
   if (isCurrentStep) {
@@ -47,7 +55,7 @@ const getStepStatus = (
           classNameOverride="active"
         />
       ),
-      accessibleName: `Current: ${step}`,
+      accessibleName: `Current: ${step.label}`,
     }
   }
   return {
@@ -59,17 +67,19 @@ const getStepStatus = (
         role="presentation"
       />
     ),
-    accessibleName: `Not started: ${step}`,
+    accessibleName: `Not started: ${step.label}`,
   }
 }
 
 export const ProgressStepper = ({
-  stepName,
+  currentStepId,
   steps,
   isComplete = false,
   ...restprops
 }: ProgressStepperProps): JSX.Element => {
-  const currentStepIndex = steps.indexOf(stepName)
+  const currentStepIndex = steps.findIndex(
+    stepItem => stepItem.id === currentStepId
+  )
 
   return (
     <div className={styles.stepsContainer}>
@@ -78,7 +88,7 @@ export const ProgressStepper = ({
         {...restprops}
         aria-labelledby="stepper-description"
       >
-        {steps.map((step: string, index: number) => {
+        {steps.map((step, index: number) => {
           const isCurrentStep = currentStepIndex === index
           const isCompletedStep = index < currentStepIndex || isComplete
           const { accessibleName, icon: Icon } = getStepStatus(
@@ -90,7 +100,7 @@ export const ProgressStepper = ({
           return (
             <li
               className={styles.step}
-              key={`${index}-${step}`}
+              key={`${step.id}`}
               aria-current={isCurrentStep}
             >
               <div className={styles.stepContent}>
@@ -98,16 +108,22 @@ export const ProgressStepper = ({
                   {/* will need to be translated */}
                   {accessibleName}
                 </VisuallyHidden>
-                <Text
-                  classNameOverride={styles.stepName}
-                  variant="small"
-                  color="white"
+                <span
+                  className={classnames(styles.stepName, {
+                    [styles.isCurrent]: isCurrentStep,
+                  })}
                   aria-hidden
                 >
-                  {step}
-                </Text>
+                  {step.label}
+                </span>
                 <div className={styles.stepIndicator}>
-                  <span className={styles.stepIcon}>{Icon}</span>
+                  <span
+                    className={classnames(styles.stepIcon, {
+                      [styles.isCompleted]: isCompletedStep,
+                    })}
+                  >
+                    {Icon}
+                  </span>
                 </div>
                 {index < steps.length - 1 && (
                   <div
@@ -122,14 +138,9 @@ export const ProgressStepper = ({
           )
         })}
       </ol>
-      <Text
-        classNameOverride={styles.stepperDescription}
-        variant="small"
-        color="white"
-        id="stepper-description"
-      >
+      <span className={styles.stepperDescription} id="stepper-description">
         Step {currentStepIndex + 1} of {steps.length}
-      </Text>
+      </span>
     </div>
   )
 }

package/src/{__future__/Workflow/subcomponents/Footer/components/Root/FooterRoot.module.scss → Workflow/subcomponents/Footer/components/Root/FooterRoot.module.css}

@@ -1,6 +1,3 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/color";
-
 .footerRoot {
   display: grid;
   grid-template-areas: "prev stepper next";
@@ -8,13 +5,14 @@
   flex-grow: 1;
   justify-content: center;
   align-items: center;
-  padding: $spacing-24 $spacing-12;
-  background: $color-blue-500;
-  gap: $spacing-16;
+  padding: var(--spacing-24) var(--spacing-12);
+  background: var(--color-white);
+  gap: var(--spacing-16);
+  border-top: 2px solid rgba(var(--color-gray-600-rgb), 0.1);
 
-  @media (min-width: 768px) {
+  @media (width >= 768px) {
     grid-template-columns: 1fr 5fr 1fr;
-    padding: $spacing-24 $spacing-32;
+    padding: var(--spacing-24) var(--spacing-32);
     position: sticky;
     bottom: 0;
     z-index: 1;

package/src/Workflow/subcomponents/Footer/components/Root/Root.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
-import styles from "./FooterRoot.module.scss"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./FooterRoot.module.css"
 
 export type FooterRootProps = OverrideClassName<
   HTMLAttributes<HTMLHeadingElement>

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

@@ -4,8 +4,8 @@ import {
   Branding,
   Titles,
   Actions,
-  WorkflowTitlesProps,
   WorkflowActionsProps,
+  WorkflowTitlesProps,
 } from "./components"
 
 export type HeaderProps = WorkflowTitlesProps & WorkflowActionsProps
@@ -13,13 +13,17 @@ export type HeaderProps = WorkflowTitlesProps & WorkflowActionsProps
 export const Header = ({
   workflowName,
   stepName,
-  status,
+  statusTag,
   headerActions,
   ...restProps
 }: HeaderProps): JSX.Element => (
   <HeaderRoot {...restProps}>
     <Branding alt="Culture Amp" />
-    <Titles workflowName={workflowName} stepName={stepName} status={status} />
+    <Titles
+      workflowName={workflowName}
+      stepName={stepName}
+      statusTag={statusTag}
+    />
     <Actions headerActions={headerActions} />
   </HeaderRoot>
 )

package/src/{__future__/Workflow/subcomponents/Header/components/Actions/Actions.module.scss → Workflow/subcomponents/Header/components/Actions/Actions.module.css}

@@ -1,5 +1,3 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-
 .actions {
   grid-area: actions;
   display: flex;
@@ -8,10 +6,10 @@
   justify-content: center;
   align-items: center;
 
-  @media (min-width: 768px) {
+  @media (width >= 768px) {
     flex-direction: row;
     align-items: flex-start;
     justify-content: flex-end;
-    margin-top: calc(-1 * #{$spacing-12});
+    margin-top: calc(-1 * var(--spacing-12));
   }
 }

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

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react"
-import { OverrideClassName } from "~types/OverrideClassName"
-import styles from "./Actions.module.scss"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./Actions.module.css"
 
 export type WorkflowActionsProps = {
   /**

package/src/{__future__/Workflow/subcomponents/Header/components/Branding/Branding.module.scss → Workflow/subcomponents/Header/components/Branding/Branding.module.css}

@@ -1,13 +1,11 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-
 .branding {
   justify-content: center;
   grid-area: branding;
   display: flex;
   flex-grow: 1;
-  padding-top: $spacing-4;
+  padding-top: var(--spacing-4);
 
-  @media (min-width: 768px) {
+  @media (width >= 768px) {
     justify-content: unset;
   }
 }

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

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import { Brand, BrandProps } from "~components/Brand"
-import { OverrideClassName } from "~types/OverrideClassName"
-import styles from "./Branding.module.scss"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./Branding.module.css"
 
 export type WorflowBrandingProps = {
   variant?: BrandProps["variant"]

package/src/{__future__/Workflow/subcomponents/Header/components/Root/Root.module.scss → Workflow/subcomponents/Header/components/Root/Root.module.css}

@@ -1,20 +1,16 @@
-@import "~@kaizen/design-tokens/sass/shadow";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/color";
-
 .root {
   display: grid;
-  background-color: $color-white;
+  background-color: var(--color-white);
   grid-template: "branding" min-content "titles" max-content "actions" min-content / 1fr;
   flex-grow: 1;
   justify-content: center;
   align-items: center;
   text-align: center;
-  box-shadow: $shadow-small-box-shadow;
-  padding: $spacing-24;
-  gap: $spacing-16;
+  padding: var(--spacing-24);
+  gap: var(--spacing-16);
+  border-bottom: 2px solid rgb(var(--color-gray-600-rgb), 0.1);
 
-  @media (min-width: 768px) {
+  @media (width >= 768px) {
     align-items: start;
     grid-template: "branding titles actions" min-content / 1fr max-content 1fr;
     position: sticky;

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

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
-import styles from "./Root.module.scss"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./Root.module.css"
 
 export type HeaderRootProps = OverrideClassName<
   HTMLAttributes<HTMLHeadingElement>

package/src/{__future__/Workflow/subcomponents/Header/components/Titles/Titles.module.scss → Workflow/subcomponents/Header/components/Titles/Titles.module.css}

@@ -1,5 +1,3 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-
 .titles {
   grid-area: titles;
   display: flex;
@@ -15,9 +13,9 @@
 }
 
 .prefix {
-  margin-bottom: $spacing-4;
+  margin-bottom: var(--spacing-4);
 }
 
-.status {
-  margin-top: $spacing-8;
+.statusTag {
+  margin-top: var(--spacing-8);
 }

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

@@ -1,31 +1,24 @@
-import React, { HTMLAttributes } from "react"
+import React, { HTMLAttributes, ReactNode } from "react"
 import { Heading } from "~components/Heading"
-import { Tag, DefaultTagProps } from "~components/Tag"
 import { VisuallyHidden } from "~components/VisuallyHidden"
-import { OverrideClassName } from "~types/OverrideClassName"
-import styles from "./Titles.module.scss"
-
-export type WorkflowStatus = {
-  /** @default: "statusDraft" */
-  variant?: DefaultTagProps["variant"]
-  content?: string
-}
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./Titles.module.css"
 
 export type WorkflowTitlesProps = {
   workflowName: string
   stepName: string
-  status?: WorkflowStatus
+  statusTag?: ReactNode
 } & OverrideClassName<HTMLAttributes<HTMLDivElement>>
 
 export const Titles = ({
   workflowName,
   stepName,
-  status,
+  statusTag,
   ...restProps
 }: WorkflowTitlesProps): JSX.Element => (
   <div className={styles.titles} {...restProps}>
     <Heading
-      variant="heading-1"
+      variant="composable-header-title"
       tag="h1"
       color="dark"
       classNameOverride={styles.pageTitle}
@@ -41,13 +34,9 @@ export const Titles = ({
       </Heading>
       <span>{stepName}</span>
     </Heading>
-    {status && (
+    {statusTag && (
       // status may need to be update by a fetch
-      <div className={styles.status}>
-        <Tag inline variant={status?.variant || "statusDraft"}>
-          {status?.content}
-        </Tag>
-      </div>
+      <div className={styles.statusTag}>{statusTag}</div>
     )}
   </div>
 )

package/src/Workflow/subcomponents/Main/Main.module.css

@@ -0,0 +1,4 @@
+.main {
+  /* This is set so children will sit beneath the header and footer when sticky */
+  z-index: 0;
+}

package/src/Workflow/subcomponents/Main/Main.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes, ReactNode } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
-import styles from "./Main.module.scss"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./Main.module.css"
 
 export type WorkflowMainProps = OverrideClassName<
   HTMLAttributes<HTMLDivElement>

package/src/{__future__/Workflow/subcomponents/Wrapper/Wrapper.module.scss → Workflow/subcomponents/Wrapper/Wrapper.module.css}

@@ -1,9 +1,7 @@
-@import "~@kaizen/design-tokens/sass/color";
-
 .wrapper {
   display: grid;
   grid-template-rows: min-content 1fr min-content;
   position: relative;
   min-height: 100vh;
-  background: $color-gray-100;
+  background: var(--color-gray-100);
 }

package/src/Workflow/subcomponents/Wrapper/Wrapper.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes, ReactNode } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
-import styles from "./Wrapper.module.scss"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./Wrapper.module.css"
 
 export type WorkflowWrapperProps = OverrideClassName<
   HTMLAttributes<HTMLDivElement>

package/src/__actions__/Button/v3/Button.tsx

@@ -4,7 +4,7 @@ import {
   ButtonProps as RACButtonProps,
 } from "react-aria-components"
 import { useReversedColors } from "~components/__utilities__/v3"
-import { mergeClassNames } from "~utils/mergeClassNames"
+import { mergeClassNames } from "~components/utils/mergeClassNames"
 import styles from "./Button.module.scss"
 
 export type ButtonVariants = "default"

package/src/__actions__/Menu/v1/Menu.spec.tsx

@@ -23,7 +23,7 @@ describe("Dropdown", () => {
   })
 
   it("shows menu & handles onClick set by the consumer when clicking on the button", async () => {
-    const onButtonClick = jest.fn<void, []>()
+    const onButtonClick = vi.fn()
 
     render(
       <Menu button={<Button label="Button" onClick={onButtonClick} />}>
@@ -42,7 +42,7 @@ describe("Dropdown", () => {
     })
   })
   it("shows menu & handles onMouseDown set by the consumer when mousing down on the button", async () => {
-    const onMouseDown = jest.fn<void, []>()
+    const onMouseDown = vi.fn()
 
     render(
       <Menu button={<Button label="Button" onMouseDown={onMouseDown} />}>

package/src/__actions__/Menu/v1/subcomponents/MenuList/MenuList.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes, cloneElement, useId } from "react"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./MenuList.module.scss"
 
 export type MenuListProps = {

package/src/__actions__/Menu/v3/Menu.tsx

@@ -3,7 +3,7 @@ import {
   Menu as RACMenu,
   MenuProps as RACMenuProps,
 } from "react-aria-components"
-import { mergeClassNames } from "~utils/mergeClassNames"
+import { mergeClassNames } from "~components/utils/mergeClassNames"
 import styles from "./Menu.module.scss"
 
 export type MenuProps = Omit<

package/src/__actions__/Menu/v3/MenuItem.tsx

@@ -3,7 +3,7 @@ import {
   MenuItem as RACMenuItem,
   MenuItemProps as RACMenuItemProps,
 } from "react-aria-components"
-import { mergeClassNames } from "~utils/mergeClassNames"
+import { mergeClassNames } from "~components/utils/mergeClassNames"
 import styles from "./MenuItem.module.scss"
 
 export type MenuItemProps = RACMenuItemProps & {

package/src/__future__/Select/Select.spec.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import { render, waitFor, screen, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { Select, SelectProps } from "./Select"
 import { singleMockItems } from "./_docs/mockData"
-
 const user = userEvent.setup()
 
 const SelectWrapper = ({
@@ -87,7 +87,7 @@ describe("<Select />", () => {
       })
 
       it("fires the onOpenChange callback when the trigger is interacted", async () => {
-        const onOpenChange = jest.fn()
+        const onOpenChange = vi.fn()
         const { getByRole } = render(
           <SelectWrapper
             selectedKey="batch-brew"
@@ -194,11 +194,11 @@ describe("<Select />", () => {
       })
 
       describe("Given the menu is opened", () => {
-        it("moves the focus to the first focusable element inside the menu initially", async () => {
+        it("focuses the listbox initially", async () => {
           const { getByRole } = render(<SelectWrapper defaultOpen />)
           expect(getByRole("listbox")).toBeVisible()
           await waitFor(() => {
-            expect(getByRole("option", { name: "Short black" })).toHaveFocus()
+            expect(getByRole("listbox")).toHaveFocus()
           })
         })
         it("is closed when hits the escape key", async () => {
@@ -267,7 +267,7 @@ describe("<Select />", () => {
 
     describe("Selection - Mouse interaction", () => {
       it("fires onSelectionChange when clicks on a option", async () => {
-        const spy = jest.fn()
+        const spy = vi.fn()
         const { getByRole } = render(
           <SelectWrapper defaultOpen onSelectionChange={spy} />
         )
@@ -305,12 +305,12 @@ describe("<Select />", () => {
         })
       })
 
-      it("keeps the focus ring at the first element when hits arrow up key on it", async () => {
+      it("focuses the last item in the list on up arrow press", async () => {
         const { getByRole } = render(<SelectWrapper />)
         await user.tab()
         await user.keyboard("{ArrowUp}")
         await waitFor(() => {
-          expect(getByRole("option", { name: "Short black" })).toHaveFocus()
+          expect(getByRole("option", { name: "Magic" })).toHaveFocus()
         })
       })
 
@@ -335,7 +335,7 @@ describe("<Select />", () => {
       })
 
       it("fires onSelectionChange when hits enter on a option", async () => {
-        const spy = jest.fn()
+        const spy = vi.fn()
         const { getByRole } = render(<SelectWrapper onSelectionChange={spy} />)
 
         await user.tab()
@@ -367,19 +367,6 @@ describe("<Select />", () => {
       })
     })
 
-    it("will portal to the document body by default", async () => {
-      render(<SelectWrapper selectedKey="batch-brew" isOpen />)
-
-      const popover = screen.getByRole("dialog")
-      // expected div that FocusOn adds to the popover
-      const popoverFocusWrapper = popover.parentNode
-
-      await waitFor(() => {
-        const expectedBodyTag = popoverFocusWrapper?.parentNode
-        expect(expectedBodyTag?.nodeName).toEqual("BODY")
-      })
-    })
-
     it("will render as a descendant of the element matching the id", async () => {
       const SelectWithPortal = (): JSX.Element => {
         const portalContainerId = "id--portal-container"
@@ -401,13 +388,13 @@ describe("<Select />", () => {
 
       await waitFor(() => {
         const newPortalRegion = screen.getByTestId("id--portal-container-test")
-        const popover = within(newPortalRegion).getByRole("dialog")
+        const listbox = within(newPortalRegion).getByRole("listbox")
 
-        expect(popover).toBeInTheDocument()
+        expect(listbox).toBeInTheDocument()
       })
     })
 
-    it("will portal to the document body if the id does not match", async () => {
+    it("will still render the listbox when the portal id given is invalid", async () => {
       const SelectWithPortal = (): JSX.Element => {
         const expectedContainerId = "id--portal-container"
         return (
@@ -424,9 +411,8 @@ describe("<Select />", () => {
       render(<SelectWithPortal />)
 
       await waitFor(() => {
-        const popover = within(document.body).getByRole("dialog")
-
-        expect(popover).toBeInTheDocument()
+        const listbox = within(document.body).getByRole("listbox")
+        expect(listbox).toBeInTheDocument()
       })
     })
   })

package/src/__future__/Select/Select.tsx

@@ -13,7 +13,7 @@ import {
   Popover,
   useFloating,
 } from "~components/MultiSelect/subcomponents/Popover"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { SelectProvider } from "./context"
 import {
   ListBox,
@@ -191,16 +191,7 @@ export const Select = <Option extends SelectOption = SelectOption>({
           trigger(selectToggleProps, selectToggleProps.ref)
         )}
         {state.isOpen && (
-          <Popover
-            id={popoverId}
-            portalContainer={portalContainer}
-            refs={refs}
-            focusOnProps={{
-              onEscapeKey: state.close,
-              onClickOutside: state.close,
-              noIsolation: true,
-            }}
-          >
+          <Popover id={popoverId} portalContainer={portalContainer} refs={refs}>
             <SelectProvider<Option> state={state}>
               <SelectPopoverContents menuProps={menuProps}>
                 {children}

package/src/__future__/Select/_docs/Select.mdx

@@ -101,3 +101,5 @@ By default, the Select's popover will attach itself to the `body` of the documen
 You can change the default behaviour by providing a `portalContainerId` to attach this to different element in the DOM. This can help to resolve issues that may arise with `z-index` or having a Select in a modal.
 
 <Canvas of={SelectStories.PortalContainer} />
+
+There is currently a known issue whereby a selected option will cause the page to scroll to the top of the window on open (click on [default to see example](https://cultureamp.design/?path=/docs/components-select-future--docs#portals)). This can be solved by setting a `portalContainerId` to the closest parent of the Select.

package/src/__future__/Select/subcomponents/ListBox/ListBox.module.scss

@@ -5,8 +5,8 @@
   padding: 0;
   display: grid;
   max-height: 22rem;
+}
 
-  &.focus {
-    outline: none;
-  }
+.listBox:focus-visible {
+  outline: none;
 }

package/src/__future__/Select/subcomponents/ListBox/ListBox.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import { AriaListBoxOptions, useListBox } from "@react-aria/listbox"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { useSelectContext } from "../../context"
 import { SelectOption, SelectItem } from "../../types"
 import styles from "./ListBox.module.scss"
@@ -23,7 +23,7 @@ export const ListBox = <Option extends SelectOption>({
   const { state } = useSelectContext<Option>()
   const ref = React.useRef<HTMLUListElement>(null)
   const { listBoxProps } = useListBox(
-    { ...menuProps, disallowEmptySelection: true, autoFocus: "first" },
+    { ...menuProps, disallowEmptySelection: true },
     state,
     ref
   )