@kaizen/components 1.60.2 → 1.61.0

package/src/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/ProgressStepper.spec.tsx

@@ -0,0 +1,45 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { ProgressStepper, ProgressStepperProps } from "./"
+
+const defaultArgs = {
+  steps: [
+    { label: "Settings", id: "settings-step" },
+    { label: "Questions", id: "questions-step" },
+    { label: "Preview", id: "preview-step" },
+    { label: "Employees", id: "employees-step" },
+    { label: "Schedule", id: "schedule-step" },
+  ],
+} satisfies Pick<ProgressStepperProps, "steps">
+
+describe("<ProgressStepperr />", () => {
+  it("renders the correct number of steps", () => {
+    render(<ProgressStepper currentStepId="settings-step" {...defaultArgs} />)
+    expect(screen.getAllByRole("listitem").length).toBe(5)
+  })
+  it("tracks the correct position of the active step", () => {
+    render(<ProgressStepper currentStepId="settings-step" {...defaultArgs} />)
+    screen.getByText("Current: Settings")
+    expect(
+      screen.getByText(`Step 1 of ${defaultArgs.steps.length}`)
+    ).toBeInTheDocument()
+  })
+  it("renders the correct number of completed steps with an accessible name", () => {
+    render(<ProgressStepper currentStepId="preview-step" {...defaultArgs} />)
+    expect(screen.getAllByText("Completed:", { exact: false }).length).toBe(2)
+  })
+  it("renders the correct number of steps not started with an accessible name", () => {
+    render(<ProgressStepper currentStepId="preview-step" {...defaultArgs} />)
+    expect(screen.getAllByText("Not started:", { exact: false }).length).toBe(2)
+  })
+  it("renders all steps as complete if the provided the `isComplete` prop", () => {
+    render(
+      <ProgressStepper
+        currentStepId="preview-step"
+        {...defaultArgs}
+        isComplete
+      />
+    )
+    expect(screen.getAllByText("Completed:", { exact: false }).length).toBe(5)
+  })
+})

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

@@ -0,0 +1,154 @@
+import React from "react"
+import classnames from "classnames"
+import {
+  IndicatorActiveIcon,
+  IndicatorInactiveIcon,
+  SuccessIcon,
+} from "~components/Icon"
+import { Text } from "~components/Text"
+import { VisuallyHidden } from "~components/VisuallyHidden"
+import styles from "./ProgressStepper.module.css"
+
+export type Step = {
+  id: string
+  label: string
+}
+
+export type Steps = [Step, ...Step[]]
+
+export type ProgressStepperProps = {
+  /** 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: Step,
+  index: number
+): {
+  icon: JSX.Element
+  accessibleName: string
+} => {
+  if (isComplete) {
+    return {
+      icon: (
+        <SuccessIcon
+          key={index}
+          inheritSize
+          role="presentation"
+          classNameOverride="success"
+        />
+      ),
+      accessibleName: `Completed: ${step.label}`,
+    }
+  }
+  if (isCurrentStep) {
+    return {
+      icon: (
+        <IndicatorActiveIcon
+          key={index}
+          inheritSize
+          role="presentation"
+          classNameOverride="active"
+        />
+      ),
+      accessibleName: `Current: ${step.label}`,
+    }
+  }
+  return {
+    icon: (
+      <IndicatorInactiveIcon
+        key={index}
+        inheritSize
+        classNameOverride="incomplete"
+        role="presentation"
+      />
+    ),
+    accessibleName: `Not started: ${step.label}`,
+  }
+}
+
+export const ProgressStepper = ({
+  currentStepId,
+  steps,
+  isComplete = false,
+  ...restprops
+}: ProgressStepperProps): JSX.Element => {
+  const currentStepIndex = steps.findIndex(
+    stepItem => stepItem.id === currentStepId
+  )
+
+  return (
+    <div className={styles.stepsContainer}>
+      <ol
+        className={styles.stepList}
+        {...restprops}
+        aria-labelledby="stepper-description"
+      >
+        {steps.map((step, index: number) => {
+          const isCurrentStep = currentStepIndex === index
+          const isCompletedStep = index < currentStepIndex || isComplete
+          const { accessibleName, icon: Icon } = getStepStatus(
+            isCompletedStep,
+            isCurrentStep,
+            step,
+            index
+          )
+          return (
+            <li
+              className={styles.step}
+              key={`${step.id}`}
+              aria-current={isCurrentStep}
+            >
+              <div className={styles.stepContent}>
+                <VisuallyHidden>
+                  {/* will need to be translated */}
+                  {accessibleName}
+                </VisuallyHidden>
+                <Text
+                  classNameOverride={classnames(styles.stepName, {
+                    [styles.isCurrent]: isCurrentStep,
+                  })}
+                  variant="small"
+                  aria-hidden
+                >
+                  {step.label}
+                </Text>
+                <div className={styles.stepIndicator}>
+                  <span
+                    className={classnames(styles.stepIcon, {
+                      [styles.isCompleted]: isCompletedStep,
+                    })}
+                  >
+                    {Icon}
+                  </span>
+                </div>
+                {index < steps.length - 1 && (
+                  <div
+                    className={classnames([
+                      styles.stepDivider,
+                      isCompletedStep && styles.completedStep,
+                    ])}
+                  />
+                )}
+              </div>
+            </li>
+          )
+        })}
+      </ol>
+      <Text
+        classNameOverride={styles.stepperDescription}
+        variant="small"
+        id="stepper-description"
+      >
+        Step {currentStepIndex + 1} of {steps.length}
+      </Text>
+    </div>
+  )
+}
+
+ProgressStepper.displayName = "Workflow.ProgressStepper"

package/src/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/index.ts

@@ -0,0 +1 @@
+export * from "./ProgressStepper"

package/src/__layout__/Workflow/v3/subcomponents/Footer/components/Root/FooterRoot.module.css

@@ -0,0 +1,19 @@
+.footerRoot {
+  display: grid;
+  grid-template-areas: "prev stepper next";
+  grid-template-columns: 1fr 2fr 1fr;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+  padding: var(--spacing-24) var(--spacing-12);
+  background: var(--color-white);
+  gap: var(--spacing-16);
+
+  @media (width >= 768px) {
+    grid-template-columns: 1fr 5fr 1fr;
+    padding: var(--spacing-24) var(--spacing-32);
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+  }
+}

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

@@ -0,0 +1,23 @@
+import React, { HTMLAttributes } from "react"
+import classnames from "classnames"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./FooterRoot.module.css"
+
+export type FooterRootProps = OverrideClassName<
+  HTMLAttributes<HTMLHeadingElement>
+>
+
+export const FooterRoot = ({
+  children,
+  classNameOverride,
+  ...restProps
+}: FooterRootProps): JSX.Element => (
+  <footer
+    className={classnames(styles.footerRoot, classNameOverride)}
+    {...restProps}
+  >
+    {children}
+  </footer>
+)
+
+FooterRoot.displayName = "Workflow.FooterRoot"

package/src/__layout__/Workflow/v3/subcomponents/Footer/components/Root/index.ts

@@ -0,0 +1 @@
+export * from "./Root"

package/src/__layout__/Workflow/v3/subcomponents/Footer/components/index.ts

@@ -0,0 +1,3 @@
+export * from "./Root"
+export * from "./ProgressStepper"
+export * from "./FooterActions"

package/src/__layout__/Workflow/v3/subcomponents/Footer/index.ts

@@ -0,0 +1,2 @@
+export * from "./Footer"
+export * from "./components"

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

@@ -0,0 +1,31 @@
+import React from "react"
+import {
+  HeaderRoot,
+  Branding,
+  Titles,
+  Actions,
+  WorkflowActionsProps,
+  WorkflowTitlesProps,
+} from "./components"
+
+export type HeaderProps = WorkflowTitlesProps & WorkflowActionsProps
+
+export const Header = ({
+  workflowName,
+  stepName,
+  statusTag,
+  headerActions,
+  ...restProps
+}: HeaderProps): JSX.Element => (
+  <HeaderRoot {...restProps}>
+    <Branding alt="Culture Amp" />
+    <Titles
+      workflowName={workflowName}
+      stepName={stepName}
+      statusTag={statusTag}
+    />
+    <Actions headerActions={headerActions} />
+  </HeaderRoot>
+)
+
+Header.displayName = "Workflow.Header"

package/src/__layout__/Workflow/v3/subcomponents/Header/components/Actions/Actions.module.css

@@ -0,0 +1,15 @@
+.actions {
+  grid-area: actions;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+
+  @media (width >= 768px) {
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-end;
+    margin-top: calc(-1 * var(--spacing-12));
+  }
+}

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

@@ -0,0 +1,24 @@
+import React, { HTMLAttributes } from "react"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./Actions.module.css"
+
+export type WorkflowActionsProps = {
+  /**
+   * Header actions will render in order of the array.
+   */
+  headerActions?: JSX.Element[]
+} & OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, "children">>
+
+/** A wrapper for an exit trigger (and other) actions of the Header Workflow  */
+export const Actions = ({
+  headerActions,
+  ...restProps
+}: WorkflowActionsProps): JSX.Element => (
+  <div className={styles.actions} {...restProps}>
+    {headerActions?.map((action, index) => (
+      <action.type key={`header-actions ${index}`} {...action.props} />
+    ))}
+  </div>
+)
+
+Actions.displayName = "Workflow.Actions"

package/src/__layout__/Workflow/v3/subcomponents/Header/components/Actions/index.ts

@@ -0,0 +1 @@
+export * from "./Actions"

package/src/__layout__/Workflow/v3/subcomponents/Header/components/Branding/Branding.module.css

@@ -0,0 +1,15 @@
+.branding {
+  justify-content: center;
+  grid-area: branding;
+  display: flex;
+  flex-grow: 1;
+  padding-top: var(--spacing-4);
+
+  @media (width >= 768px) {
+    justify-content: unset;
+  }
+}
+
+.logo {
+  flex-basis: 7.5rem;
+}

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

@@ -0,0 +1,20 @@
+import React, { HTMLAttributes } from "react"
+import { Brand, BrandProps } from "~components/Brand"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./Branding.module.css"
+
+export type WorflowBrandingProps = {
+  variant?: BrandProps["variant"]
+  alt: string
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
+
+export const Branding = ({
+  variant = "logo-horizontal",
+  alt,
+}: WorflowBrandingProps): JSX.Element => (
+  <div className={styles.branding}>
+    <Brand classNameOverride={styles.logo} variant={variant} alt={alt} />
+  </div>
+)
+
+Branding.displayName = "Workflow.Branding"

package/src/__layout__/Workflow/v3/subcomponents/Header/components/Branding/index.ts

@@ -0,0 +1 @@
+export * from "./Branding"

package/src/__layout__/Workflow/v3/subcomponents/Header/components/Root/Root.module.css

@@ -0,0 +1,20 @@
+.root {
+  display: grid;
+  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: var(--shadow-small-box-shadow);
+  padding: var(--spacing-24);
+  gap: var(--spacing-16);
+
+  @media (width >= 768px) {
+    align-items: start;
+    grid-template: "branding titles actions" min-content / 1fr max-content 1fr;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+}

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

@@ -0,0 +1,20 @@
+import React, { HTMLAttributes } from "react"
+import classnames from "classnames"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./Root.module.css"
+
+export type HeaderRootProps = OverrideClassName<
+  HTMLAttributes<HTMLHeadingElement>
+>
+
+export const HeaderRoot = ({
+  children,
+  classNameOverride,
+  ...restProps
+}: HeaderRootProps): JSX.Element => (
+  <header className={classnames(styles.root, classNameOverride)} {...restProps}>
+    {children}
+  </header>
+)
+
+HeaderRoot.displayName = "Workflow.HeaderRoot"

package/src/__layout__/Workflow/v3/subcomponents/Header/components/Root/index.tsx

@@ -0,0 +1 @@
+export * from "./Root"

package/src/__layout__/Workflow/v3/subcomponents/Header/components/Titles/Titles.module.css

@@ -0,0 +1,21 @@
+.titles {
+  grid-area: titles;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+}
+
+.pageTitle {
+  display: flex;
+  flex-direction: column;
+}
+
+.prefix {
+  margin-bottom: var(--spacing-4);
+}
+
+.statusTag {
+  margin-top: var(--spacing-8);
+}

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

@@ -0,0 +1,44 @@
+import React, { HTMLAttributes, ReactNode } from "react"
+import { Heading } from "~components/Heading"
+import { VisuallyHidden } from "~components/VisuallyHidden"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./Titles.module.css"
+
+export type WorkflowTitlesProps = {
+  workflowName: string
+  stepName: string
+  statusTag?: ReactNode
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
+
+export const Titles = ({
+  workflowName,
+  stepName,
+  statusTag,
+  ...restProps
+}: WorkflowTitlesProps): JSX.Element => (
+  <div className={styles.titles} {...restProps}>
+    <Heading
+      variant="composable-header-title"
+      tag="h1"
+      color="dark"
+      classNameOverride={styles.pageTitle}
+    >
+      <Heading
+        classNameOverride={styles.prefix}
+        variant="heading-6"
+        tag="span"
+        color="dark-reduced-opacity"
+      >
+        {workflowName}
+        <VisuallyHidden>:</VisuallyHidden>
+      </Heading>
+      <span>{stepName}</span>
+    </Heading>
+    {statusTag && (
+      // status may need to be update by a fetch
+      <div className={styles.statusTag}>{statusTag}</div>
+    )}
+  </div>
+)
+
+Titles.displayName = "Workflow.Titles"

package/src/__layout__/Workflow/v3/subcomponents/Header/components/Titles/index.ts

@@ -0,0 +1 @@
+export * from "./Titles"

package/src/__layout__/Workflow/v3/subcomponents/Header/components/index.ts

@@ -0,0 +1,4 @@
+export * from "./Titles"
+export * from "./Actions"
+export * from "./Branding"
+export * from "./Root"

package/src/__layout__/Workflow/v3/subcomponents/Header/index.ts

@@ -0,0 +1,2 @@
+export * from "./Header"
+export * from "./components"

package/src/__layout__/Workflow/v3/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/__layout__/Workflow/v3/subcomponents/Main/Main.tsx

@@ -0,0 +1,22 @@
+import React, { HTMLAttributes, ReactNode } from "react"
+import classnames from "classnames"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./Main.module.css"
+
+export type WorkflowMainProps = OverrideClassName<
+  HTMLAttributes<HTMLDivElement>
+> & {
+  children: ReactNode
+}
+
+export const Main = ({
+  children,
+  classNameOverride,
+  ...restProps
+}: WorkflowMainProps): JSX.Element => (
+  <main className={classnames([styles.main, classNameOverride])} {...restProps}>
+    {children}
+  </main>
+)
+
+Main.displayName = "Workflow.Main"

package/src/__layout__/Workflow/v3/subcomponents/Main/index.tsx

@@ -0,0 +1 @@
+export * from "./Main"

package/src/__layout__/Workflow/v3/subcomponents/Wrapper/Wrapper.module.css

@@ -0,0 +1,7 @@
+.wrapper {
+  display: grid;
+  grid-template-rows: min-content 1fr min-content;
+  position: relative;
+  min-height: 100vh;
+  background: var(--color-gray-100);
+}

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

@@ -0,0 +1,22 @@
+import React, { HTMLAttributes, ReactNode } from "react"
+import classnames from "classnames"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./Wrapper.module.css"
+
+export type WorkflowWrapperProps = OverrideClassName<
+  HTMLAttributes<HTMLDivElement>
+> & {
+  children: ReactNode
+}
+
+export const Wrapper = ({
+  children,
+  classNameOverride,
+  ...restProps
+}: WorkflowWrapperProps): JSX.Element => (
+  <div className={classnames(styles.wrapper, classNameOverride)} {...restProps}>
+    {children}
+  </div>
+)
+
+Wrapper.displayName = "Workflow.Wrapper"

package/src/__layout__/Workflow/v3/subcomponents/Wrapper/index.ts

@@ -0,0 +1 @@
+export * from "./Wrapper"

package/src/__layout__/Workflow/v3/subcomponents/index.ts

@@ -0,0 +1,4 @@
+export * from "./Footer"
+export * from "./Header"
+export * from "./Main"
+export * from "./Wrapper"

package/src/__layout__/v1.ts

@@ -0,0 +1 @@
+export * from "./Workflow/v1"

package/src/__layout__/v2.ts

@@ -0,0 +1 @@
+export * from "./Workflow/v2"

package/src/__layout__/v3.ts

@@ -0,0 +1 @@
+export * from "./Workflow/v3"

package/src/index.ts

@@ -57,7 +57,7 @@ export * from "./ToggleSwitch"
 export * from "./utils"
 export * from "./VisuallyHidden"
 export * from "./Well"
-export * from "./Workflow"
+export * from "./__layout__/Workflow/v1"
 export * from "./__overlays__/Tooltip/v1"
 export * from "./__actions__/Menu/v1"
 export * from "./__actions__/Button/v1"

package/v1/layout/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../../dist/cjs/layoutV1.cjs",
+  "module": "../../dist/esm/layoutV1.mjs",
+  "types": "../../dist/types/__layout__/v1.d.ts"
+}

package/v2/layout/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../../dist/cjs/layoutV2.cjs",
+  "module": "../../dist/esm/layoutV2.mjs",
+  "types": "../../dist/types/__layout__/v2.d.ts"
+}

package/v3/layout/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../../dist/cjs/layoutV3.cjs",
+  "module": "../../dist/esm/layoutV3.mjs",
+  "types": "../../dist/types/__layout__/v3.d.ts"
+}

package/dist/cjs/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.module.scss.cjs

@@ -1,8 +0,0 @@
-'use strict';
-
-var styles = {
-  "footerAction": "FooterActions-module_footerAction__H-bdq",
-  "footerActionPrevious": "FooterActions-module_footerActionPrevious__yyzsX",
-  "footerActionNext": "FooterActions-module_footerActionNext__GIowc"
-};
-module.exports = styles;

package/dist/cjs/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss.cjs

@@ -1,14 +0,0 @@
-'use strict';
-
-var styles = {
-  "stepsContainer": "ProgressStepper-module_stepsContainer__kh4S2",
-  "stepList": "ProgressStepper-module_stepList__ToKVO",
-  "step": "ProgressStepper-module_step__5Zakx",
-  "stepContent": "ProgressStepper-module_stepContent__brp8m",
-  "stepIndicator": "ProgressStepper-module_stepIndicator__vAWW6",
-  "stepName": "ProgressStepper-module_stepName__21rPP",
-  "stepIcon": "ProgressStepper-module_stepIcon__eW-Ps",
-  "stepDivider": "ProgressStepper-module_stepDivider__SaO4y",
-  "stepperDescription": "ProgressStepper-module_stepperDescription__XT8Ra"
-};
-module.exports = styles;

package/dist/cjs/Workflow/subcomponents/Header/components/Branding/Branding.module.scss.cjs

@@ -1,7 +0,0 @@
-'use strict';
-
-var styles = {
-  "branding": "Branding-module_branding__Oayqr",
-  "logo": "Branding-module_logo__rTXU9"
-};
-module.exports = styles;

package/dist/cjs/Workflow/subcomponents/Header/components/Titles/Titles.module.scss.cjs

@@ -1,9 +0,0 @@
-'use strict';
-
-var styles = {
-  "titles": "Titles-module_titles__tO9dZ",
-  "pageTitle": "Titles-module_pageTitle__7-ui0",
-  "prefix": "Titles-module_prefix__vV-WW",
-  "status": "Titles-module_status__RvbTg"
-};
-module.exports = styles;