@kaizen/components 1.62.0 → 1.63.1

package/src/__layout__/Workflow/v1/subcomponents/Footer/components/FooterActions/FooterActions.tsx

@@ -1,28 +0,0 @@
-import React, { HTMLAttributes } from "react"
-import classnames from "classnames"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./FooterActions.module.scss"
-
-export type FooterActionsProps = {
-  actionType?: "Previous" | "Next"
-  action?: JSX.Element
-} & OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, "children">>
-
-/** A simple wrapper for a Footer previous or next action  */
-export const FooterAction = ({
-  actionType = "Previous",
-  action,
-  ...restProps
-}: FooterActionsProps): JSX.Element => (
-  <div
-    className={classnames([
-      styles.footerAction,
-      styles[`footerAction${actionType}`],
-    ])}
-    {...restProps}
-  >
-    {action}
-  </div>
-)
-
-FooterAction.displayName = "Workflow.FooterActions"

package/src/__layout__/Workflow/v1/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss

@@ -1,105 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/typography";
-
-$indicator-size: 1.25rem;
-
-.stepsContainer {
-  width: 100%;
-  grid-area: stepper;
-}
-
-.stepList {
-  display: none;
-  justify-content: center;
-  align-items: flex-end;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-
-  @media (min-width: 768px) {
-    display: flex;
-  }
-}
-
-.step {
-  display: flex;
-  flex-grow: 1;
-  flex-basis: 100%;
-  justify-content: center;
-  max-width: $spacing-96;
-  overflow-wrap: break-word;
-  position: relative;
-  container: step / inline-size;
-}
-
-.stepContent {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
-.stepIndicator {
-  width: $indicator-size;
-  height: $indicator-size;
-  position: relative;
-}
-
-.stepName {
-  display: none;
-  text-align: center;
-  margin-bottom: $spacing-12;
-  font-weight: $typography-paragraph-bold-font-weight;
-}
-
-.stepIcon {
-  color: $color-white;
-  position: absolute;
-  width: $indicator-size;
-  height: $indicator-size;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.stepDivider {
-  height: 0;
-  display: flex;
-  position: absolute;
-  flex-grow: 1;
-  min-width: calc(100% - #{$spacing-24});
-  border: solid $spacing-1 $color-white;
-  margin: 0;
-  border-radius: $border-solid-border-radius;
-  left: 100%;
-  // sets fron the bottom to the centre of the dot
-  top: calc(100% - calc(#{$indicator-size}/ 2));
-  transform: translateX(-50%);
-
-  [dir="rtl"] & {
-    left: unset;
-    right: 100%;
-    transform: translateX(50%);
-  }
-}
-
-.stepperDescription {
-  display: flex;
-  justify-content: center;
-
-  @media (min-width: 768px) {
-    // sr hidden styles
-    position: absolute;
-    width: 0;
-    height: 0;
-    overflow: hidden;
-  }
-}
-
-// Some defensive CSS for many steps on desktop screens
-@container step (min-width: 4.5rem) {
-  .stepName {
-    display: inline;
-  }
-}

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

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

package/src/__layout__/Workflow/v1/subcomponents/Footer/components/Root/FooterRoot.module.scss

@@ -1,22 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/color";
-
-.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: $spacing-24 $spacing-12;
-  background: $color-blue-500;
-  gap: $spacing-16;
-
-  @media (min-width: 768px) {
-    grid-template-columns: 1fr 5fr 1fr;
-    padding: $spacing-24 $spacing-32;
-    position: sticky;
-    bottom: 0;
-    z-index: 1;
-  }
-}

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

@@ -1,23 +0,0 @@
-import React, { HTMLAttributes } from "react"
-import classnames from "classnames"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./FooterRoot.module.scss"
-
-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/v1/subcomponents/Header/Header.tsx

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

package/src/__layout__/Workflow/v1/subcomponents/Header/components/Actions/Actions.module.scss

@@ -1,17 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.actions {
-  grid-area: actions;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  justify-content: center;
-  align-items: center;
-
-  @media (min-width: 768px) {
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: flex-end;
-    margin-top: calc(-1 * #{$spacing-12});
-  }
-}

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

@@ -1,24 +0,0 @@
-import React, { HTMLAttributes } from "react"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./Actions.module.scss"
-
-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/v1/subcomponents/Header/components/Branding/Branding.module.scss

@@ -1,17 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.branding {
-  justify-content: center;
-  grid-area: branding;
-  display: flex;
-  flex-grow: 1;
-  padding-top: $spacing-4;
-
-  @media (min-width: 768px) {
-    justify-content: unset;
-  }
-}
-
-.logo {
-  flex-basis: 7.5rem;
-}

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

@@ -1,20 +0,0 @@
-import React, { HTMLAttributes } from "react"
-import { Brand, BrandProps } from "~components/Brand"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./Branding.module.scss"
-
-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/v1/subcomponents/Header/components/Root/Root.module.scss

@@ -1,24 +0,0 @@
-@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;
-  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;
-
-  @media (min-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/v1/subcomponents/Header/components/Root/Root.tsx

@@ -1,20 +0,0 @@
-import React, { HTMLAttributes } from "react"
-import classnames from "classnames"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./Root.module.scss"
-
-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/v1/subcomponents/Header/components/Titles/Titles.module.scss

@@ -1,23 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.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: $spacing-4;
-}
-
-.status {
-  margin-top: $spacing-8;
-}

package/src/__layout__/Workflow/v1/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/v1/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/v1/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/v1/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/v1/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/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 &
-  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