@kaizen/components 1.61.3 → 1.63.0

package/src/__containers__/GuidanceBlock/v2/_docs/GuidanceBlock.stickersheet.stories.tsx

@@ -1,118 +0,0 @@
-import React from "react"
-import { Meta } from "@storybook/react"
-import { Heading } from "~components/Heading"
-import { EmptyStatesPositive, Informative } from "~components/Illustration"
-import { Tag } from "~components/Tag"
-import { Text } from "~components/Text"
-import {
-  StickerSheet,
-  StickerSheetStory,
-} from "~storybook/components/StickerSheet"
-import { GuidanceBlock, GuidanceBlockProps } from "../index"
-
-export default {
-  title: "Containers/GuidanceBlock/v2",
-  parameters: {
-    chromatic: { disable: false },
-    controls: { disable: true },
-  },
-} satisfies Meta
-
-const GENERIC_PROPS = {
-  persistent: true,
-  illustration: <Informative alt="" />,
-  actions: {
-    primary: {
-      label: "Action",
-      onClick: () => {
-        alert("tada: 🎉")
-      },
-    },
-    secondary: {
-      label: "Pass",
-      onClick: () => {
-        alert("tada: 🎉")
-      },
-    },
-  },
-}
-
-const TEXT_PROPS: GuidanceBlockProps = {
-  ...GENERIC_PROPS,
-  text: {
-    title: "This is the Guidance block title",
-    description:
-      "Mussum Ipsum, cacilds vidis litro abertis. Suco de cevadiss, é um leite divinis, " +
-      "qui tem lupuliz, matis, aguis e fermentis. Mé faiz elementum girarzis, nisi eros vermeio.",
-  },
-}
-
-const CONTENT_PROPS: GuidanceBlockProps = {
-  ...GENERIC_PROPS,
-  content: (
-    <>
-      <Tag>Early Access</Tag>
-      <Heading variant="heading-3">{TEXT_PROPS.text.title}</Heading>
-      <Text variant="body">{TEXT_PROPS.text.description}</Text>
-    </>
-  ),
-}
-
-const StickerSheetTemplate: StickerSheetStory = {
-  render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Default">
-          <GuidanceBlock {...TEXT_PROPS} />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Expert advice">
-          <GuidanceBlock variant="expert-advice" {...TEXT_PROPS} />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="No arrow">
-          <GuidanceBlock withActionButtonArrow={false} {...TEXT_PROPS} />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Custom Content">
-          <GuidanceBlock {...CONTENT_PROPS} />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Tooltip">
-          <GuidanceBlock
-            {...TEXT_PROPS}
-            actions={{
-              primary: {
-                ...GENERIC_PROPS.actions.primary,
-                tooltip: {
-                  text: "Opens in a new tab",
-                  mood: "cautionary",
-                  isInitiallyVisible: true,
-                },
-              },
-            }}
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Scene Illustration">
-          <GuidanceBlock
-            {...TEXT_PROPS}
-            illustration={<EmptyStatesPositive alt="" />}
-            illustrationType="scene"
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="No Max Width">
-          <GuidanceBlock {...TEXT_PROPS} noMaxWidth />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
-    </StickerSheet>
-  ),
-}
-
-export const StickerSheetDefault: StickerSheetStory = {
-  ...StickerSheetTemplate,
-  name: "Sticker Sheet (Default)",
-}
-
-export const StickerSheetRTL: StickerSheetStory = {
-  ...StickerSheetTemplate,
-  name: "Sticker Sheet (RTL)",
-  parameters: {
-    textDirection: "rtl",
-  },
-}

package/src/__containers__/GuidanceBlock/v2/_docs/GuidanceBlock.stories.tsx

@@ -1,152 +0,0 @@
-import React from "react"
-import { Meta, StoryObj } from "@storybook/react"
-import { Heading } from "~components/Heading"
-import {
-  BrandMomentPositiveOutro,
-  Informative,
-  SkillsCoachEssentialFeedback,
-} from "~components/Illustration"
-import { Text } from "~components/Text"
-import { GuidanceBlock } from "../index"
-
-const ContentComponent = (): JSX.Element => (
-  <>
-    <Heading tag="h3" variant="heading-3">
-      This is the Guidance block title
-    </Heading>
-    <Text variant="body">
-      Mussum Ipsum, cacilds vidis litro abertis. Suco de cevadiss, é um leite
-      divinis,
-    </Text>
-  </>
-)
-
-const defaultText = {
-  description:
-    "Mussum Ipsum, cacilds vidis litro abertis. Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Mé faiz elementum girarzis, nisi eros vermeio.",
-  title: "This is the Guidance block title",
-}
-
-const meta = {
-  title: "Containers/GuidanceBlock/v2",
-  component: GuidanceBlock,
-  args: {
-    layout: "default",
-    illustration: <Informative alt="" />,
-  },
-  argTypes: {
-    actions: {
-      control: false,
-    },
-    illustrationType: {
-      description:
-        "Sets the how the width and aspect ratio will respond to the Illustration passed in.",
-    },
-    illustration: {
-      control: { type: "radio" },
-      options: ["spot", "scene"],
-      mapping: {
-        spot: <Informative alt="" />,
-        scene: <BrandMomentPositiveOutro alt="" />,
-      },
-      description:
-        "This takes a scene scene or spot element, ie: `<Informative />`. This radio button implementation is a storybook only representation to toggle between the two illustration styles.",
-    },
-    content: {
-      description:
-        "If you need to render custom content inside of the `GuidanceBlock` that is more than just a title and description use this prop instead of the default `text` option.",
-    },
-  },
-} satisfies Meta<typeof GuidanceBlock>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Playground: Story = {
-  args: {
-    text: defaultText,
-  },
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: "shown",
-      },
-    },
-  },
-}
-
-export const Actions: Story = {
-  args: {
-    content: <ContentComponent />,
-    actions: {
-      primary: {
-        label: "Learn more",
-        onClick: () => alert("tada: 🎉"),
-      },
-      secondary: {
-        label: "Dismiss",
-        href: "#",
-      },
-    },
-  },
-}
-
-export const Tooltip: Story = {
-  args: {
-    content: <ContentComponent />,
-    actions: {
-      primary: {
-        label: "Hover me for a tooltip",
-        onClick: () => alert("tada: 🎉"),
-        tooltip: {
-          text: "Opens in a new tab",
-          mood: "cautionary",
-        },
-      },
-      secondary: {
-        label: "Dismiss",
-        href: "#",
-      },
-    },
-  },
-}
-
-export const CustomContent: Story = {
-  args: {
-    content: <ContentComponent />,
-  },
-}
-
-export const Stacked: Story = {
-  render: args => (
-    <div style={{ display: "flex", gap: "36px" }}>
-      <GuidanceBlock {...args} />
-      <GuidanceBlock {...args} />
-    </div>
-  ),
-  args: {
-    layout: "stacked",
-    content: <ContentComponent />,
-  },
-}
-
-export const SceneExample: Story = {
-  args: {
-    illustration: <SkillsCoachEssentialFeedback alt="" />,
-    illustrationType: "scene",
-    text: defaultText,
-  },
-}
-
-export const Variants: Story = {
-  render: args => (
-    <div className="flex flex-col gap-16">
-      <GuidanceBlock {...args} />
-      <GuidanceBlock variant="expert-advice" {...args} />
-    </div>
-  ),
-  args: {
-    text: defaultText,
-  },
-}

package/src/__containers__/GuidanceBlock/v2/index.ts

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

package/src/__containers__/v1.ts

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

package/src/__containers__/v2.ts

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

package/src/__layout__/Workflow/v1/Workflow.tsx

@@ -1,55 +0,0 @@
-import React, { HTMLAttributes } from "react"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import {
-  Footer,
-  FooterProps,
-  Header,
-  Main,
-  HeaderProps,
-  ProgressStepper,
-  Wrapper,
-} from "./subcomponents"
-
-export type WorkflowProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> &
-  FooterProps &
-  HeaderProps
-
-/**
- * @deprecated Use { Workflow } from `@kaizen/components/future`
- */
-export const Workflow = ({
-  stepName,
-  steps,
-  isComplete,
-  workflowName,
-  status,
-  headerActions,
-  children,
-  nextAction,
-  previousAction,
-  classNameOverride,
-  ...restProps
-}: WorkflowProps): JSX.Element => (
-  <Workflow.Wrapper classNameOverride={classNameOverride} {...restProps}>
-    <Workflow.Header
-      workflowName={workflowName}
-      stepName={stepName}
-      status={status}
-      headerActions={headerActions}
-    />
-    <Workflow.Main>{children}</Workflow.Main>
-    <Workflow.Footer
-      stepName={stepName}
-      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/__layout__/Workflow/v1/_docs/ProgressStepper.mdx

@@ -1,38 +0,0 @@
-import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { Installation, ResourceLinks } 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"
-
-/>
-
-<Installation
-  installCommand="pnpm add @kaizen/components"
-  importStatement='import { Workflow } from "@kaizen/components/v1/layout"'
-/>
-
-## 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/__layout__/Workflow/v1/_docs/ProgressStepper.stories.tsx

@@ -1,84 +0,0 @@
-import React from "react"
-import { Meta, StoryObj } from "@storybook/react"
-import { Workflow } from "../"
-
-const meta = {
-  title: "Layout/Workflow/Workflow (v1)/Components/Progress Stepper",
-  component: Workflow.ProgressStepper,
-  args: {
-    stepName: "Settings",
-    steps: ["Settings", "Questions", "Preview", "Employees", "Schedule"],
-    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: {
-    stepName: "Questions",
-  },
-}
-
-/**
- * <p>You can use the `isComplete` follow a successful submission to render all steps as complete.</p>
- */
-export const AllStepsComplete: Story = {
-  args: {
-    stepName: "Schedule",
-    isComplete: true,
-  },
-}
-
-export const FewerSteps: Story = {
-  args: {
-    stepName: "Questions",
-    steps: ["Settings", "Questions", "Preview"],
-  },
-}
-
-/**
- * <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: {
-    stepName: "Questions",
-    steps: [
-      "Settings",
-      "Questions",
-      "Preview",
-      "Employees",
-      "Schedule",
-      "Plan",
-      "Provision",
-      "Another thing",
-    ],
-  },
-}

package/src/__layout__/Workflow/v1/_docs/Workflow.mdx

@@ -1,165 +0,0 @@
-import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
-import { Installation, ResourceLinks } from "~storybook/components"
-import * as Workflow from "./Workflow.stories"
-import * as WorkflowFooter from "./WorkflowFooter.stories"
-import * as WorkflowHeader from "./WorkflowHeader.stories"
-
-<Meta of={Workflow} />
-
-# Workflow
-
-<ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Workflow"
-
-/>
-
-<Installation
-  installCommand="pnpm add @kaizen/components"
-  importStatement='import { Workflow } from "@kaizen/components/v1/layout"'
-/>
-
-## 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 comparing the current step, indicated by `stepName`, against its position in the `steps` array.
-
-<Canvas
-  layout="fullscreen"
-  of={WorkflowFooter.FirstStep}
-  source={{code: `<Workflow
-    stepName="Setting"
-    steps={[
-      'Settings',
-      'Questions',
-      'Preview',
-      'Employees',
-      'Schedule'
-    ]}
-    {...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} />