@kaizen/components 1.62.0 → 1.63.0

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

@@ -1,55 +0,0 @@
-import React, { HTMLAttributes } from "react"
-import { Heading } from "~components/Heading"
-import { Tag, DefaultTagProps } from "~components/Tag"
-import { VisuallyHidden } from "~components/VisuallyHidden"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./Titles.module.scss"
-
-export type WorkflowStatus = {
-  /** @default: "statusDraft" */
-  variant?: DefaultTagProps["variant"]
-  content?: string
-}
-
-export type WorkflowTitlesProps = {
-  workflowName: string
-  stepName: string
-  status?: WorkflowStatus
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
-
-export const Titles = ({
-  workflowName,
-  stepName,
-  status,
-  ...restProps
-}: WorkflowTitlesProps): JSX.Element => (
-  <div className={styles.titles} {...restProps}>
-    <Heading
-      variant="heading-1"
-      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>
-    {status && (
-      // status may need to be update by a fetch
-      <div className={styles.status}>
-        <Tag inline variant={status?.variant || "statusDraft"}>
-          {status?.content}
-        </Tag>
-      </div>
-    )}
-  </div>
-)
-
-Titles.displayName = "Workflow.Titles"

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

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

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

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

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

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

package/src/__layout__/Workflow/v2/subcomponents/Main/Main.module.scss

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

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

@@ -1,22 +0,0 @@
-import React, { HTMLAttributes, ReactNode } from "react"
-import classnames from "classnames"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./Main.module.scss"
-
-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/v2/subcomponents/Main/index.tsx

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

package/src/__layout__/Workflow/v2/subcomponents/Wrapper/Wrapper.module.scss

@@ -1,9 +0,0 @@
-@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;
-}

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

@@ -1,22 +0,0 @@
-import React, { HTMLAttributes, ReactNode } from "react"
-import classnames from "classnames"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./Wrapper.module.scss"
-
-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/v2/subcomponents/Wrapper/index.ts

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

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

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

package/src/__layout__/Workflow/v3/_docs/WorkflowHeader.mdx

@@ -1,28 +0,0 @@
-import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { Installation, ResourceLinks } from "~storybook/components"
-import * as WorkflowHeaderStories from "./WorkflowHeader.stories"
-
-<Meta of={WorkflowHeaderStories} />
-
-# Header
-
-<ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Workflow"
-  figma="https://www.figma.com/file/IJTy1JpS4Xyop5cQwroRje/%F0%9F%9B%A0%EF%B8%8F-Self-reflection%3A-Build-Handoff?node-id=188%3A62005&t=x4zyx07E2G3BmKGw-1"
-  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064989884/Documentation"
-
-/>
-
-<Installation
-  installCommand="pnpm add @kaizen/components"
-  importStatement='import { Workflow } from "@kaizen/components/v3/layout"'
-/>
-
-## Overview
-
-<Canvas of={WorkflowHeaderStories.Playground} />
-<Controls of={WorkflowHeaderStories.Playground} />
-
-## API
-
-<DocsStory of={WorkflowHeaderStories.MultipleActions} />

package/src/__layout__/Workflow/v3/_docs/controls/index.tsx

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

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

@@ -1,38 +0,0 @@
-import React from "react"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import {
-  FooterRoot,
-  FooterAction,
-  ProgressStepper,
-  ProgressStepperProps,
-  FooterRootProps,
-} from "./components"
-
-export type FooterProps = {
-  /** An action to return to a previous step */
-  previousAction?: JSX.Element
-  /** An action to progress to the next step or submit the form */
-  nextAction?: JSX.Element
-} & ProgressStepperProps &
-  OverrideClassName<Omit<FooterRootProps, "children">>
-
-export const Footer = ({
-  steps,
-  currentStepId,
-  isComplete,
-  previousAction,
-  nextAction,
-  ...restProps
-}: FooterProps): JSX.Element => (
-  <FooterRoot {...restProps}>
-    <FooterAction action={previousAction} actionType="Previous" />
-    <ProgressStepper
-      steps={steps}
-      currentStepId={currentStepId}
-      isComplete={isComplete}
-    />
-    <FooterAction action={nextAction} actionType="Next" />
-  </FooterRoot>
-)
-
-Footer.displayName = "Workflow.Footer"

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

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

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

@@ -1,45 +0,0 @@
-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/index.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/__layout__/v1.ts

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

package/src/__layout__/v2.ts

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

package/src/__layout__/v3.ts

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

package/v1/layout/package.json

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

package/v2/layout/package.json

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

package/v3/layout/package.json

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