feat(step-sequence): reinstate component

Reinstates StepSequence component

playwright/components/step-sequence/index.ts

@@ -0,0 +1,16 @@
+import { Page } from "@playwright/test";
+import {
+  STEP_SEQUENCE_ITEM_INDICATOR,
+  STEP_SEQUENCE_DATA_COMPONENT,
+  STEP_SEQUENCE_DATA_COMPONENT_ITEM,
+} from "./locators";
+
+// component preview locators
+export const stepSequenceItemIndicator = (page: Page) =>
+  page.locator(STEP_SEQUENCE_ITEM_INDICATOR).first();
+
+export const stepSequenceDataComponentItem = (page: Page) =>
+  page.locator(STEP_SEQUENCE_DATA_COMPONENT_ITEM);
+
+export const stepSequenceDataComponent = (page: Page) =>
+  page.locator(STEP_SEQUENCE_DATA_COMPONENT);

playwright/components/step-sequence/locators.ts

@@ -0,0 +1,5 @@
+// component preview locators
+export const STEP_SEQUENCE_DATA_COMPONENT_ITEM =
+  '[data-component="step-sequence-item"]';
+export const STEP_SEQUENCE_ITEM_INDICATOR = `${STEP_SEQUENCE_DATA_COMPONENT_ITEM} > span > span`;
+export const STEP_SEQUENCE_DATA_COMPONENT = '[data-component="step-sequence"]';

src/components/step-sequence/components.test-pw.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import StepSequence from "./step-sequence.component";
+import StepSequenceItem, {
+  StepSequenceItemProps,
+} from "./step-sequence-item/step-sequence-item.component";
+
+export const StepSequenceComponent = ({ ...props }) => {
+  return (
+    <StepSequence {...props}>
+      <StepSequenceItem
+        aria-label="Step 1 of 5"
+        hiddenCompleteLabel="Complete"
+        hiddenCurrentLabel="Current"
+        indicator="1"
+        status="complete"
+      >
+        Name
+      </StepSequenceItem>
+      <StepSequenceItem
+        aria-label="Step 2 of 5"
+        hiddenCompleteLabel="Complete"
+        hiddenCurrentLabel="Current"
+        indicator="2"
+        status="complete"
+      >
+        Delivery Address
+      </StepSequenceItem>
+      <StepSequenceItem
+        aria-label="Step 3 of 5"
+        hiddenCompleteLabel="Complete"
+        hiddenCurrentLabel="Current"
+        indicator="3"
+        status="current"
+      >
+        Delivery Details
+      </StepSequenceItem>
+      <StepSequenceItem
+        aria-label="Step 4 of 5"
+        hiddenCompleteLabel="Complete"
+        hiddenCurrentLabel="Current"
+        indicator="4"
+        status="incomplete"
+      >
+        Payment
+      </StepSequenceItem>
+      <StepSequenceItem
+        aria-label="Step 5 of 5"
+        hiddenCompleteLabel="Complete"
+        hiddenCurrentLabel="Current"
+        indicator="5"
+        status="incomplete"
+      >
+        Confirm
+      </StepSequenceItem>
+    </StepSequence>
+  );
+};
+
+export const StepSequenceItemCustom = (
+  props: Partial<StepSequenceItemProps>,
+) => {
+  return (
+    <StepSequence>
+      <StepSequenceItem
+        aria-label="Step 1 of 5"
+        hiddenCompleteLabel="Complete"
+        hiddenCurrentLabel="Current"
+        indicator="1"
+        status="complete"
+        {...props}
+      >
+        Name
+      </StepSequenceItem>
+    </StepSequence>
+  );
+};

src/components/step-sequence/index.ts

@@ -0,0 +1,4 @@
+export { default as StepSequence } from "./step-sequence.component";
+export type { StepSequenceProps } from "./step-sequence.component";
+export { default as StepSequenceItem } from "./step-sequence-item";
+export type { StepSequenceItemProps } from "./step-sequence-item";

src/components/step-sequence/step-sequence-item/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./step-sequence-item.component";
+export type { StepSequenceItemProps } from "./step-sequence-item.component";

src/components/step-sequence/step-sequence-item/step-sequence-item.component.tsx

@@ -0,0 +1,87 @@
+import React, { useContext } from "react";
+import {
+  StyledStepSequenceItem,
+  StyledStepSequenceItemContent,
+  StyledStepSequenceItemIndicator,
+  StyledStepSequenceItemHiddenLabel,
+} from "./step-sequence-item.style";
+import Icon from "../../icon";
+import { StepSequenceContext } from "../step-sequence.component";
+
+export interface StepSequenceItemProps {
+  /** Aria label */
+  ariaLabel?: string;
+  /** Hidden label to be displayed if item is complete */
+  hiddenCompleteLabel?: string;
+  /** Hidden label to be displayed if item is current */
+  hiddenCurrentLabel?: string;
+  /** Value to be displayed before text for incomplete steps */
+  indicator: string;
+  /** Flag to hide the indicator for incomplete steps */
+  hideIndicator?: boolean;
+  /** Status for the step */
+  status?: "complete" | "current" | "incomplete";
+  /** Content to be displayed */
+  children: React.ReactNode;
+}
+
+export const StepSequenceItem = ({
+  hideIndicator = false,
+  indicator,
+  status = "incomplete",
+  hiddenCompleteLabel,
+  hiddenCurrentLabel,
+  children,
+  ariaLabel,
+  ...rest
+}: StepSequenceItemProps) => {
+  const { orientation } = useContext(StepSequenceContext);
+
+  const indicatorText = () => {
+    return !hideIndicator ? (
+      <StyledStepSequenceItemIndicator>
+        {indicator}
+      </StyledStepSequenceItemIndicator>
+    ) : null;
+  };
+
+  const icon = () =>
+    status === "complete" ? <Icon type="tick" /> : indicatorText();
+
+  const hiddenLabel = () => {
+    if (hiddenCompleteLabel && status === "complete") {
+      return (
+        <StyledStepSequenceItemHiddenLabel>
+          {hiddenCompleteLabel}
+        </StyledStepSequenceItemHiddenLabel>
+      );
+    }
+    if (hiddenCurrentLabel && status === "current") {
+      return (
+        <StyledStepSequenceItemHiddenLabel>
+          {hiddenCurrentLabel}
+        </StyledStepSequenceItemHiddenLabel>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <StyledStepSequenceItem
+      data-component="step-sequence-item"
+      orientation={orientation}
+      status={status}
+      key={`step-seq-item-${indicator}`}
+      aria-label={ariaLabel}
+      {...rest}
+    >
+      {hiddenLabel()}
+      <StyledStepSequenceItemContent>
+        {icon()}
+        <span>{children}</span>
+      </StyledStepSequenceItemContent>
+    </StyledStepSequenceItem>
+  );
+};
+
+export default StepSequenceItem;

src/components/step-sequence/step-sequence-item/step-sequence-item.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from "@storybook/react";
+import StepSequenceItem from "./step-sequence-item.component";
+
+/**
+ * This file is used primarily as a means to generate the props table.
+ * It contains the tag: ["hideInSidebar"] so that it is not included in the sidebar.
+ */
+
+const meta: Meta<typeof StepSequenceItem> = {
+  title: "Step Sequence Item",
+  component: StepSequenceItem,
+  tags: ["hideInSidebar"],
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof StepSequenceItem>;
+
+export const Default: Story = {
+  args: {},
+};

src/components/step-sequence/step-sequence-item/step-sequence-item.style.ts

@@ -0,0 +1,111 @@
+import styled, { css } from "styled-components";
+import { StepSequenceProps } from "../step-sequence.component";
+import { StepSequenceItemProps } from "./step-sequence-item.component";
+import StyledIcon from "../../icon/icon.style";
+
+export const StyledStepSequenceItem = styled.li<
+  Pick<StepSequenceItemProps, "status"> & Pick<StepSequenceProps, "orientation">
+>`
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  text-align: right;
+  list-style-type: none;
+  color: var(--colorsUtilityYin055);
+
+  ${({ orientation, status }) => {
+    const side: string = orientation === "vertical" ? "left" : "top";
+
+    return css`
+      &::before {
+        content: "";
+        flex-grow: 1;
+        display: block;
+        margin: 0 16px;
+        border-${side}: var(--sizing025) dashed var(--colorsUtilityYin055);
+      }
+
+      & span {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      ${StyledIcon} {
+        margin-right: 8px;
+        color: var(--colorsBaseTheme, var(--colorsSemanticPositive500));
+      }
+
+      &:first-child {
+        flex-grow: 0;
+
+        &::before {
+          display: none;
+        }
+      }
+
+      ${
+        status === "current" &&
+        css`
+          color: var(--colorsUtilityYin090);
+
+          &::before {
+            border-${side}-color: var(--colorsUtilityYin090);
+            border-${side}-style: solid;
+          }
+        `
+      }
+
+      ${
+        status === "complete" &&
+        css`
+          color: var(--colorsBaseTheme, var(--colorsSemanticPositive500));
+
+          &::before {
+            border-${side}-color: var(
+              --colorsBaseTheme,
+              var(--colorsSemanticPositive500)
+            );
+            border-${side}-style: solid;
+          }
+        `
+      }
+
+      ${
+        orientation === "vertical" &&
+        css`
+          flex-direction: column;
+          align-items: flex-start;
+
+          &::before {
+            flex-grow: 0;
+            border-left-width: var(--sizing025);
+            height: 100%;
+            min-height: var(--sizing300);
+            margin: 12px 8px;
+          }
+        `
+      }
+    `;
+  }}
+`;
+
+export const StyledStepSequenceItemContent = styled.span`
+  display: flex;
+`;
+
+export const StyledStepSequenceItemHiddenLabel = styled.span`
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+`;
+
+export const StyledStepSequenceItemIndicator = styled.span`
+  display: block;
+  min-width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  text-align: center;
+`;