@kaizen/components 1.34.0 → 1.35.1

package/src/__future__/Tag/Tag/Tag.module.scss

@@ -0,0 +1,79 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/typography";
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  padding: $spacing-4 $spacing-8;
+  gap: $spacing-4;
+  border-radius: 28px;
+  font-family: $typography-paragraph-intro-lede-font-family;
+  font-size: $typography-paragraph-small-font-size;
+  font-weight: $typography-paragraph-small-font-weight;
+  line-height: $typography-paragraph-small-line-height;
+  white-space: nowrap;
+}
+
+.iconContainer {
+  display: inline-flex;
+}
+
+.gray {
+  background-color: $color-gray-300;
+  color: $color-purple-800;
+}
+
+.blue {
+  background-color: $color-blue-100;
+  color: $color-blue-700;
+
+  .iconContainer {
+    color: $color-blue-500;
+  }
+}
+
+.green {
+  background-color: $color-green-100;
+  color: $color-green-700;
+
+  .iconContainer {
+    color: $color-green-500;
+  }
+}
+
+.yellow {
+  background-color: $color-yellow-100;
+  color: $color-yellow-700;
+
+  .iconContainer {
+    color: $color-yellow-500;
+  }
+}
+
+.orange {
+  background-color: $color-orange-100;
+  color: $color-orange-700;
+
+  .iconContainer {
+    color: $color-orange-500;
+  }
+}
+
+.red {
+  background-color: $color-red-100;
+  color: $color-red-700;
+
+  .iconContainer {
+    color: $color-red-500;
+  }
+}
+
+.purple {
+  background-color: $color-purple-100;
+  color: $color-purple-700;
+
+  .iconContainer {
+    color: $color-purple-500;
+  }
+}

package/src/__future__/Tag/Tag/Tag.tsx

@@ -0,0 +1,29 @@
+import React, { ReactNode, HTMLAttributes } from "react"
+import classNames from "classnames"
+import { OverrideClassName } from "~types/OverrideClassName"
+import { TagColors } from "./types"
+import styles from "./Tag.module.scss"
+
+export type TagProps = {
+  children: ReactNode
+  color?: TagColors
+  icon?: React.ReactElement
+} & OverrideClassName<HTMLAttributes<HTMLSpanElement>>
+
+export const Tag = ({
+  children,
+  classNameOverride,
+  icon,
+  color = "gray",
+  ...restProps
+}: TagProps): JSX.Element => (
+  <span
+    className={classNames(styles.tag, styles[color], classNameOverride)}
+    {...restProps}
+  >
+    {icon && <span className={styles.iconContainer}>{icon}</span>}
+    {children}
+  </span>
+)
+
+Tag.displayName = "Tag"

package/src/__future__/Tag/Tag/_docs/Tag.mdx

@@ -0,0 +1,59 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, KaioNotification, Installation } from "~storybook/components"
+import * as TagStories from "./Tag.stories"
+
+<Meta of={TagStories} />
+
+# Tag
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__future__/Tag"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3293283155/Tag"
+  className="!mb-8"
+/>
+
+<KaioNotification />
+
+<Installation
+  installCommand="yarn add @kaizen/components"
+  importStatement="import { Tag } from `@kaizen/components/future`"
+/>
+
+## Overview
+
+Tags helps users quickly recognize important information about items that organize and categorize them.
+
+Note: Tag does not yet have feature parity with the legacy Tag component. The goal with this
+component was to have a more flexible version of legacy Tag, and we will slowly add more functionality
+to this component until we reach feature parity.
+
+
+## API
+
+<Canvas of={TagStories.Playground} />
+<Controls of={TagStories.Playground} />
+
+### `children`
+
+Takes a `ReactNode`. This should be the text that is displayed inside the Tag.
+
+<Canvas of={TagStories.Children} />
+
+### `color`
+
+Determines the color of the background, text, and icon.
+
+<Canvas of={TagStories.Color} />
+
+### `icon`
+
+An optional icon can be passed via this prop. The icon will be rendered on the left of `children`
+in LTR, and on the right of `children` in RTL. For a list of icons, see [Icons](?path=/story/components-icons--sticker-sheet-default)
+
+<Canvas of={TagStories.Icon} />
+
+### `classNameOverride`
+
+Allows classnames to be attached to the outermost element of Tag.
+
+<Canvas of={TagStories.ClassNameOverride} />

package/src/__future__/Tag/Tag/_docs/Tag.stickersheet.stories.tsx

@@ -0,0 +1,53 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import { TagIcon } from "~components/Icon"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { Tag } from "../Tag"
+import { TagColorKeys } from "../types"
+
+export default {
+  title: "Components/Tag/Future",
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: () => (
+    <StickerSheet heading="Tag">
+      <StickerSheet.Header headings={["Label Only", "Icon"]} />
+      <StickerSheet.Body>
+        {TagColorKeys.map(color => (
+          <StickerSheet.Row key={color}>
+            <Tag color={color}>
+              {color.charAt(0).toUpperCase() + color.slice(1)}
+            </Tag>
+            <Tag icon={<TagIcon role="presentation" />} color={color}>
+              {color.charAt(0).toUpperCase() + color.slice(1)}
+            </Tag>
+          </StickerSheet.Row>
+        ))}
+      </StickerSheet.Body>
+    </StickerSheet>
+  ),
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+  parameters: {
+    controls: { disable: true },
+  },
+}
+
+export const StickerSheetRTL: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (RTL)",
+  parameters: {
+    textDirection: "rtl",
+  },
+}

package/src/__future__/Tag/Tag/_docs/Tag.stories.tsx

@@ -0,0 +1,73 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { AcademyIcon, ActionOffIcon, AddIcon, TagIcon } from "~components/Icon"
+import { TagColorKeys } from "../types"
+import { Tag } from ".."
+
+const meta = {
+  title: "Components/Tag/Future",
+  component: Tag,
+  args: {
+    children: "My tag",
+  },
+} satisfies Meta<typeof Tag>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+}
+
+export const Children: StoryObj = {
+  args: { children: "This text is the children" },
+}
+
+export const Color: StoryObj = {
+  render: () => (
+    <div className="flex gap-16">
+      {TagColorKeys.map(color => (
+        <Tag color={color} icon={<TagIcon role="presentation" />} key={color}>
+          {color}
+        </Tag>
+      ))}
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: { type: "dynamic" },
+    },
+  },
+}
+
+export const Icon: StoryObj = {
+  render: () => (
+    <div className="flex gap-16">
+      <Tag icon={<AcademyIcon role="presentation" />}>AcademyIcon</Tag>
+      <Tag color="yellow" icon={<ActionOffIcon role="presentation" />}>
+        ActionOffIcon
+      </Tag>
+      <Tag color="green" icon={<AddIcon role="presentation" />}>
+        AddIcon
+      </Tag>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: { type: "dynamic" },
+    },
+  },
+}
+
+export const ClassNameOverride: StoryObj = {
+  args: {
+    classNameOverride: "border-red-500 border-solid border",
+  },
+}

package/src/__future__/Tag/Tag/index.ts

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

package/src/__future__/Tag/Tag/types.ts

@@ -0,0 +1,11 @@
+export const TagColorKeys = [
+  "gray",
+  "blue",
+  "green",
+  "yellow",
+  "orange",
+  "red",
+  "purple",
+] as const
+
+export type TagColors = (typeof TagColorKeys)[number]

package/src/__future__/Tag/index.ts

@@ -0,0 +1,2 @@
+export * from "./RemovableTag"
+export * from "./Tag"

package/src/__future__/Workflow/Workflow.tsx

@@ -0,0 +1,55 @@
+import React, { HTMLAttributes } from "react"
+import { OverrideClassName } from "~types/OverrideClassName"
+import {
+  Footer,
+  FooterProps,
+  Header,
+  Main,
+  HeaderProps,
+  ProgressStepper,
+  Wrapper,
+} from "./subcomponents"
+
+export type WorkflowProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> &
+  FooterProps &
+  Pick<HeaderProps, "workflowName" | "status" | "headerActions">
+
+export const Workflow = ({
+  steps,
+  currentStepId,
+  isComplete,
+  workflowName,
+  status,
+  headerActions,
+  children,
+  nextAction,
+  previousAction,
+  classNameOverride,
+  ...restProps
+}: WorkflowProps): JSX.Element => {
+  const currentStep = steps.find(step => step.id === currentStepId)
+  return (
+    <Workflow.Wrapper classNameOverride={classNameOverride} {...restProps}>
+      <Workflow.Header
+        workflowName={workflowName}
+        stepName={currentStep!.label}
+        status={status}
+        headerActions={headerActions}
+      />
+      <Workflow.Main>{children}</Workflow.Main>
+      <Workflow.Footer
+        currentStepId={currentStepId}
+        steps={steps}
+        isComplete={isComplete}
+        nextAction={nextAction}
+        previousAction={previousAction}
+      />
+    </Workflow.Wrapper>
+  )
+}
+
+Workflow.Header = Header
+Workflow.Footer = Footer
+Workflow.Main = Main
+Workflow.ProgressStepper = ProgressStepper
+Workflow.Wrapper = Wrapper

package/src/__future__/Workflow/_docs/ProgressStepper.mdx

@@ -0,0 +1,42 @@
+import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
+import { Installation, KaioNotification, ResourceLinks, KaioLegacyDocsNotification } from "~storybook/components"
+import * as ProgressStepperStories from "./ProgressStepper.stories"
+
+<Meta of={ProgressStepperStories} />
+
+# Progress Stepper
+
+<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"
+  className="!mb-8"
+/>
+
+<KaioNotification />
+
+<KaioLegacyDocsNotification version="1.16.0" />
+
+<Installation
+  installCommand="yarn add @kaizen/components"
+  importStatement="import { ProgressStepper } from `@kaizen/components/future`"
+/>
+
+## Overview
+
+This component is used in the `Footer` to track progress of the Workflows steps.
+
+It has no reverse variant and should only be used in the Worflow's `Footer` component.
+
+<Canvas of={ProgressStepperStories.Playground} />
+<Controls of={ProgressStepperStories.Playground} />
+
+## API
+
+<DocsStory of={ProgressStepperStories.ProgressStates} />
+
+<DocsStory of={ProgressStepperStories.AllStepsComplete} />
+
+<DocsStory of={ProgressStepperStories.FewerSteps} />
+
+<DocsStory of={ProgressStepperStories.EightSteps} />

package/src/__future__/Workflow/_docs/ProgressStepper.stories.tsx

@@ -0,0 +1,94 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { Workflow } from "../"
+import { WorkflowControls } from "./controls"
+
+const meta = {
+  title: "Pages/Workflow/Future/Components/Progress Stepper",
+  component: Workflow.ProgressStepper,
+  argTypes: {
+    currentStepId: WorkflowControls.currentStepId,
+  },
+  args: {
+    currentStepId: "preview-step",
+    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" },
+    ],
+    isComplete: false,
+  },
+  decorators: [
+    Story => (
+      <div className="bg-blue-500 p-8">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Workflow.ProgressStepper>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+/**
+ * <p>This component is used in the `Footer` to track progress of the Workflows steps.</p>
+ * <p>It has no reverse variant and should only be used in the Worflow's `Footer` component.</p>
+ */
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+}
+
+/** <p>To ensure WCAG AA compliance, there are 3 visually destinct states.</p>
+ * <p>These are reflected in their accessible names for screen reader: "Completed", "Current" and "Not started"</p>
+ */
+export const ProgressStates: Story = {
+  args: {
+    currentStepId: "questions-step",
+  },
+}
+
+/**
+ * <p>You can use the `isComplete` follow a successful submission to render all steps as complete.</p>
+ */
+export const AllStepsComplete: Story = {
+  args: {
+    currentStepId: "schedule-step",
+    isComplete: true,
+  },
+}
+
+export const FewerSteps: Story = {
+  args: {
+    currentStepId: "questions-step",
+    steps: [
+      { label: "Settings", id: "settings-step" },
+      { label: "Questions", id: "questions-step" },
+      { label: "Preview", id: "preview-step" },
+    ],
+  },
+}
+
+/**
+ * <p>We have baked in a container query to ensure the component can be responsive.</p>
+ * <p>When a step reaches its minimum size (4.5rem), it will hide the display name to maximise realestate.</p>
+ */
+export const EightSteps: Story = {
+  args: {
+    currentStepId: "questions-step",
+    steps: [
+      ...meta.args.steps,
+      { label: "Plan", id: "plan-step" },
+      { label: "Provision", id: "provision-step" },
+      { label: "Procure", id: "procure-step" },
+    ],
+  },
+}

package/src/__future__/Workflow/_docs/Workflow.mdx

@@ -0,0 +1,169 @@
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
+import { Installation, KaioNotification, KaioLegacyDocsNotification, ResourceLinks } from "~storybook/components"
+import * as Workflow from "./Workflow.stories"
+import * as WorkflowFooter from "./WorkflowFooter.stories"
+import * as WorkflowHeader from "./WorkflowHeader.stories"
+
+<Meta title="Pages/Workflow" />
+
+# Workflow
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Workflow"
+  className="!mb-8"
+/>
+
+<KaioNotification />
+
+<KaioLegacyDocsNotification version="1.16.0" />
+
+<Installation
+  installCommand="yarn add @kaizen/components"
+  importStatement='import { Workflow } from "@kaizen/components/future"'
+/>
+
+## Overview
+
+This is a page template component containing the header, footer, and main landmarks that compose a Workflow page. Its purpose is to guide a customer through a multi-step form to create a Workflow.
+
+The Worflow is intended as a page wrapper and sets a minimum height of `100vh` with a sticky `Header` component. The `Children` will be wrapped in an unstyled main landmark to provide flexibility for inner content layouts.
+
+To ensure at readability at 400% zoom (See WCAG's [Reflow criteria](https://www.w3.org/WAI/WCAG21/Understanding/reflow.html)) this component will collapse to a vertical layout on smaller screen sizes and remove `sticky` positioning to maximise screen real estate. You can see an example in [the responsive workflow story](/story/pages-workflow-components-workflow--responsive-workflow).
+
+<Canvas layout="fullscreen" of={Workflow.Playground} />
+
+## Header actions
+
+The `headerActions` prop  takes array of JSX elements that will render in the top right of the `Header` component.
+
+While the number of JSX elements is not limited, is important to consider the real estate in the `Header` and how larger strings or components may be rendered on smaller screen sizes.
+
+<Canvas
+  layout="fullscreen"
+  of={WorkflowHeader.MultipleActions}
+  source={{code: `<Workflow
+    headerActions={[
+      <Button
+        key="would-use-uui-1"
+        label="Preview"
+        icon={VisibleIcon}
+        secondary
+        iconPosition="start"
+      />,
+      <Button
+        key="would-use-uui-2"
+        label="Save and close"
+        icon={CloseIcon}
+        secondary
+        iconPosition="end"
+      />
+    ]}
+    {...otherProps}
+  >
+    <MockContent />
+  </Workflow>`}}
+/>
+
+
+## Handling a Workflow exit
+
+A common pattern identified is a Workflow Exit button. An implementation of this component should be passed to the `headerActions` an array to handle a user leaving a Workflow. We've provided an example below that combines a Kaizen `Button` with the `ConfirmationModal` component.
+
+<Canvas
+  layout="fullscreen"
+  of={WorkflowHeader.Playground}
+  source={{code: `
+  const [showModal, setShowModal] = useState<boolean>(false)
+  ...
+  return (
+    <>
+      <Button
+        label={exitLabel}
+        icon={closeIcon}
+        iconPosition="end"
+        secondary
+        onClick={() => setShowModal(true)}
+      />
+      <ConfirmationModal
+        isOpen={showModal}
+        mood={mood}
+        isProminent={true}
+        title={exitTitle}
+        confirmLabel={confirmExitLabel}
+        dismissLabel={dismissExitLabel}
+        onConfirm={onConfirmExitCallback}
+        onDismiss={() => {
+          setShowModal(false)
+        }}
+      >
+        <div>
+          <Text variant="body">{exitDescription}</Text>
+        </div>
+      </ConfirmationModal>
+    </>
+  )`
+  }}
+/>
+
+## Tracking progress
+
+The Footer tracks the progress of the form by using finding the index of the `currentStepId` within the `steps` array.
+
+<Canvas
+  layout="fullscreen"
+  of={WorkflowFooter.FirstStep}
+  source={{code: `<Workflow
+    currentStepId="settings-step"
+    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" },
+    ]}
+    {...otherProps}
+  >
+    <MockContent />
+  </Workflow>`}}
+/>
+
+The Footer is agnostic to the JSX elements that are used in the `previousAction` and `nextAction`. While we recommend using the Kaizen Button, a button-like component can be used in its place to satisfy project-specific requirements.
+
+
+To hide, disable or change the appearance of the Footer buttons you can leverage the props available for the `@kaizen/button` or pass in undefined to not render the component.
+
+<Canvas
+  layout="fullscreen"
+  of={WorkflowFooter.LastStep}
+  source={{code: `<Workflow
+    nextAction={<Button disabled label="Finish" primary reversed/>}
+    previousAction={<Button label="Back" reversed/>}
+    {...otherProps}
+  >
+    <MockContent />
+  </Workflow>`}}
+/>
+
+In Instances where users are returning to a completed workflow you can pass the `isComplete` prop to set the indicators to their "complete" status. This will also be reflected in their Aria title.
+
+<Canvas
+  layout="fullscreen"
+  of={WorkflowFooter.AllStepsComplete}
+  source={{code: `<Workflow
+    isComplete
+    {...otherProps}
+  >
+    <MockContent />
+  </Workflow>`}}
+/>
+
+## Composable Worflow
+
+While we do not advise this path, a composable Workflow may be created if required. Refer to the component's stories on how to consume each subcomponent.
+
+<Canvas layout="fullscreen" of={Workflow.ComposableWorkflow} />
+
+
+## Worflow API at a glance
+
+<ArgTypes of={Workflow.Playground} />