feat(progress-steps): add ProgressStepsContent (#4065)

* feat(progress-steps): use css for separator * feat(progress-steps): add ProgressStepContent props * feat(progress-steps): remove content prop * feat(progress-steps): add padding bottom to component * feat(progress-steps): update story * feat(progress-steps): update docs site with additonal content example * feat(progress-steps): add changeset * feat(progress-steps): update types * feat(progress-steps): add verticle padding to ProgressStepsContent * feat(progress-steps): add changset for codemods * feat(progress-steps): implement changes from review * feat(progress-steps): change minwidth of separator * feat(progress-steps): update typedocs * feat(progress-steps): fix build issue * feat(progress-steps): add test for progressStepsContent * feat(progress-steps): update typedocs * feat(progress-steps): update package json * feat(progress-steps): update yarn lock * feat(progress-steps): implement changes from review * feat(progress-steps): update typedocs * feat(progress-steps): update typedocs * feat(progress-steps): add ProgressStepSeparator callout * feat(progress-steps): update paddingY comment * feat(progress-steps): update type docs * feat(progress-steps): update type docs * feat(progress-steps): add Timeline vs. Progress Steps * feat(progress-steps): use 10px as margin top for separator * feat(progress-steps): update typedocs
twilio-labs · Sep 18, 2024 · d108aeb · d108aeb
1 parent a84b45b
commit d108aeb
Show file tree

Hide file tree

Showing 18 changed files with 1,985 additions and 122 deletions.
diff --git a/.changeset/cyan-hats-provide.md b/.changeset/cyan-hats-provide.md
@@ -0,0 +1,5 @@
+---
+"@twilio-paste/codemods": minor
+---
+
+[Progress Steps] Add `ProgressStepsContent` component to add additional content during vertical orientation
diff --git a/.changeset/nice-cats-leave.md b/.changeset/nice-cats-leave.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/progress-steps": minor
+"@twilio-paste/core": minor
+---
+
+[Progress Steps] Add `ProgressStepsContent` component to add additional content during vertical orientation
diff --git a/packages/paste-codemods/tools/.cache/mappings.json b/packages/paste-codemods/tools/.cache/mappings.json
@@ -219,6 +219,7 @@
   "ProgressBar": "@twilio-paste/core/progress-bar",
   "ProgressBarLabel": "@twilio-paste/core/progress-bar",
   "ProgressStepComplete": "@twilio-paste/core/progress-steps",
+  "ProgressStepContent": "@twilio-paste/core/progress-steps",
   "ProgressStepCurrent": "@twilio-paste/core/progress-steps",
   "ProgressStepError": "@twilio-paste/core/progress-steps",
   "ProgressStepIncomplete": "@twilio-paste/core/progress-steps",

diff --git a/packages/paste-core/components/progress-steps/__tests__/index.spec.tsx b/packages/paste-core/components/progress-steps/__tests__/index.spec.tsx
@@ -11,6 +11,7 @@ import {
   ProgressSteps,
 } from "../src";
 import { Anchors, Buttons, Divs } from "../stories/horizontal.stories";
+import { WithContent } from "../stories/vertical.stories";
 
 describe("ProgressSteps", () => {
   it("should render divs correctly", () => {
@@ -55,6 +56,13 @@ describe("ProgressSteps", () => {
     expect(signupLabel?.getAttribute("href")).toEqual("#");
   });
 
+  it("should render with content correctly", () => {
+    const { getByText } = render(<WithContent />);
+    const signupLabel = getByText("Snowflake");
+
+    expect(signupLabel?.tagName).toEqual("DT");
+  });
+
   describe("element naming", () => {
     it("should set all default element names", async () => {
       const { getByRole } = render(<Buttons />);
@@ -70,6 +78,11 @@ describe("ProgressSteps", () => {
       expect(addFriends?.dataset.pasteElement).toEqual("PROGRESS_STEP_INCOMPLETE");
       expect(wrapper?.dataset.pasteElement).toEqual("PROGRESS_STEPS");
     });
+    it("should set default name on progress steps content", async () => {
+      expect(
+        render(<WithContent />).baseElement.querySelector("[data-paste-element='PROGRESS_STEP_CONTENT']"),
+      ).toBeInTheDocument();
+    });
   });
   describe("custom element naming", () => {
     it("should set all custom element names", async () => {

diff --git a/packages/paste-core/components/progress-steps/src/ProgressStepComplete.tsx b/packages/paste-core/components/progress-steps/src/ProgressStepComplete.tsx
@@ -15,7 +15,6 @@ export const ProgressStepComplete = React.forwardRef<HTMLDivElement, ProgressSte
           type={as === "button" ? "button" : undefined}
           ref={ref}
           display="flex"
-          alignItems="center"
           columnGap="space30"
           border="none"
           background="none"
@@ -32,10 +31,10 @@ export const ProgressStepComplete = React.forwardRef<HTMLDivElement, ProgressSte
           _hover={as !== "div" ? { textDecoration: "none", color: "colorTextPrimary" } : undefined}
           _focus={as !== "div" ? { boxShadow: "shadowFocus" } : undefined}
         >
-          <ProgressSuccessIcon decorative={false} title={i18nCompleteLabel} />
-          <Box as="span" textAlign="left">
-            {children}
+          <Box display="flex" flexDirection="column" alignItems="center">
+            <ProgressSuccessIcon decorative={false} title={i18nCompleteLabel} />
           </Box>
+          <Box textAlign="left">{children}</Box>
         </Box>
       </div>
     );

diff --git a/packages/paste-core/components/progress-steps/src/ProgressStepContent.tsx b/packages/paste-core/components/progress-steps/src/ProgressStepContent.tsx
@@ -0,0 +1,35 @@
+import { Box, type BoxProps } from "@twilio-paste/box";
+import type { Padding } from "@twilio-paste/style-props";
+import type { HTMLPasteProps } from "@twilio-paste/types";
+import React from "react";
+
+export interface ProgressStepContentProps extends HTMLPasteProps<"div"> {
+  children?: React.ReactNode;
+  /**
+   * Overrides the default element name to apply unique styles with the Customization Provider
+   *
+   * @default 'PROGRESS_STEP_CONTENT'
+   * @type {BoxProps['element']}
+   * @memberof ProgressStepContentProps
+   */
+  element?: BoxProps["element"];
+  /**
+   * Responsive prop of Space tokens for the CSS `padding-top` and `padding-bottom` properties
+   *
+   * @default 'space40'
+   * @type {Padding}
+   * @memberof ProgressStepContentProps
+   */
+  paddingY?: Padding;
+}
+
+export const ProgressStepContent = React.forwardRef<HTMLDivElement, ProgressStepContentProps>(
+  ({ element = "PROGRESS_STEP_CONTENT", paddingY = "space40", ...props }, ref) => {
+    return (
+      <Box element={element} color="colorText" ref={ref} paddingY={paddingY}>
+        {props.children}
+      </Box>
+    );
+  },
+);
+ProgressStepContent.displayName = "ProgressStepContent";
diff --git a/packages/paste-core/components/progress-steps/src/ProgressStepCurrent.tsx b/packages/paste-core/components/progress-steps/src/ProgressStepCurrent.tsx
@@ -16,7 +16,6 @@ export const ProgressStepCurrent = React.forwardRef<HTMLDivElement, ProgressStep
           ref={ref}
           aria-current="step"
           display="flex"
-          alignItems="center"
           columnGap="space30"
           border="none"
           background="none"
@@ -33,10 +32,10 @@ export const ProgressStepCurrent = React.forwardRef<HTMLDivElement, ProgressStep
           _hover={as !== "div" ? { textDecoration: "none", color: "colorTextPrimaryStrongest" } : undefined}
           _focus={as !== "div" ? { boxShadow: "shadowFocus" } : undefined}
         >
-          <ProgressCurrentIcon decorative={false} title={i18nCurrentLabel} />
-          <Box as="span" textAlign="left">
-            {children}
+          <Box display="flex" flexDirection="column" alignItems="center">
+            <ProgressCurrentIcon decorative={false} title={i18nCurrentLabel} />
           </Box>
+          <Box textAlign="left">{children}</Box>
         </Box>
       </div>
     );

diff --git a/packages/paste-core/components/progress-steps/src/ProgressStepError.tsx b/packages/paste-core/components/progress-steps/src/ProgressStepError.tsx
@@ -15,7 +15,6 @@ export const ProgressStepError = React.forwardRef<HTMLDivElement, ProgressStepEr
           type={as === "button" ? "button" : undefined}
           ref={ref}
           display="flex"
-          alignItems="center"
           columnGap="space30"
           border="none"
           background="none"
@@ -32,10 +31,11 @@ export const ProgressStepError = React.forwardRef<HTMLDivElement, ProgressStepEr
           _hover={as !== "div" ? { textDecoration: "none", color: "colorTextErrorStrongest" } : undefined}
           _focus={as !== "div" ? { boxShadow: "shadowFocus" } : undefined}
         >
-          <ProgressErrorIcon decorative={false} title={i18nErrorLabel} />
-          <Box as="span" textAlign="left">
-            {children}
+          <Box display="flex" flexDirection="column" alignItems="center">
+            <ProgressErrorIcon decorative={false} title={i18nErrorLabel} />
           </Box>
+
+          <Box textAlign="left">{children} </Box>
         </Box>
       </div>
     );

diff --git a/packages/paste-core/components/progress-steps/src/ProgressStepIncomplete.tsx b/packages/paste-core/components/progress-steps/src/ProgressStepIncomplete.tsx
@@ -26,7 +26,6 @@ export const ProgressStepIncomplete = React.forwardRef<HTMLDivElement, ProgressS
           disabled={disabled}
           ref={ref}
           display="flex"
-          alignItems="center"
           columnGap="space30"
           border="none"
           background="none"
@@ -44,10 +43,10 @@ export const ProgressStepIncomplete = React.forwardRef<HTMLDivElement, ProgressS
           _focus={as !== "div" ? { boxShadow: "shadowFocus" } : undefined}
           _disabled={{ textDecoration: "none", color: "colorTextWeaker", cursor: "not-allowed" }}
         >
-          <ProgressIncompleteIcon decorative={false} title={i18nIncompleteLabel} />
-          <Box as="span" textAlign="left">
-            {children}
+          <Box display="flex" flexDirection="column" alignItems="center">
+            <ProgressIncompleteIcon decorative={false} title={i18nIncompleteLabel} />
           </Box>
+          <Box textAlign="left">{children} </Box>
         </Box>
       </div>
     );

diff --git a/packages/paste-core/components/progress-steps/src/ProgressStepSeparator.tsx b/packages/paste-core/components/progress-steps/src/ProgressStepSeparator.tsx
@@ -1,26 +1,7 @@
-import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
 import type { BoxProps } from "@twilio-paste/box";
 import type { HTMLPasteProps } from "@twilio-paste/types";
 import * as React from "react";
 
-import { ProgressStepsContext } from "./ProgressStepsContext";
-
-const VerticalStyles: BoxProps = {
-  borderLeftWidth: "borderWidth20",
-  borderLeftStyle: "solid",
-  borderLeftColor: "colorBorderWeaker",
-  borderRadius: "borderRadius0",
-  minHeight: "32px",
-  marginLeft: "space30",
-};
-const HorizontalStyles: BoxProps = {
-  borderBottomWidth: "borderWidth20",
-  borderBottomStyle: "solid",
-  borderBottomColor: "colorBorderWeaker",
-  borderRadius: "borderRadius20",
-  minWidth: "32px",
-};
-
 export interface ProgressStepSeparatorProps extends HTMLPasteProps<"div"> {
   children?: React.ReactNode;
   /**
@@ -33,21 +14,8 @@ export interface ProgressStepSeparatorProps extends HTMLPasteProps<"div"> {
   element?: BoxProps["element"];
 }
 
-export const ProgressStepSeparator = React.forwardRef<HTMLDivElement, ProgressStepSeparatorProps>(
-  ({ element = "PROGRESS_STEP_SEPARATOR", ...props }, ref) => {
-    const { orientation } = React.useContext(ProgressStepsContext);
-
-    return (
-      <Box
-        {...safelySpreadBoxProps(props)}
-        {...(orientation === "horizontal" ? HorizontalStyles : VerticalStyles)}
-        ref={ref}
-        aria-hidden
-        flexShrink={0}
-        flexGrow={1}
-        element={element}
-      />
-    );
-  },
-);
+export const ProgressStepSeparator = React.forwardRef<HTMLDivElement, ProgressStepSeparatorProps>(() => {
+  // returning null since we are relying on the CSS to render the separator
+  return null;
+});
 ProgressStepSeparator.displayName = "ProgressStepSeparator";
diff --git a/packages/paste-core/components/progress-steps/src/ProgressSteps.tsx b/packages/paste-core/components/progress-steps/src/ProgressSteps.tsx
@@ -1,22 +1,12 @@
 import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
-import type { BoxProps } from "@twilio-paste/box";
+import type { BoxProps, BoxStyleProps } from "@twilio-paste/box";
+import { css, styled } from "@twilio-paste/styling-library";
 import type { HTMLPasteProps } from "@twilio-paste/types";
 import * as React from "react";
 
 import { ProgressStepsContext } from "./ProgressStepsContext";
 import type { Orientation } from "./types";
 
-const VerticalStyles: BoxProps = {
-  flexDirection: "column",
-  rowGap: "space30",
-  alignItems: "flex-start", // to prevent children from stretching full width
-};
-const HorizontalStyles: BoxProps = {
-  alignItems: "center",
-  columnGap: "space30",
-  flexWrap: "nowrap",
-};
-
 export interface ProgressStepsProps extends Omit<HTMLPasteProps<"div">, "children"> {
   children?: React.ReactNode;
   /**
@@ -36,18 +26,79 @@ export interface ProgressStepsProps extends Omit<HTMLPasteProps<"div">, "childre
   orientation?: Orientation;
 }
 
+const ItemSeparatorStyles: {
+  [key in Orientation]: Record<string, string | Record<string, string | BoxStyleProps>>;
+} = {
+  vertical: {
+    flexDirection: "column",
+    alignItems: "flex-start",
+    "[role='listitem']>*>div:first-child::after": {
+      content: "''",
+      borderLeftWidth: "borderWidth20",
+      borderLeftStyle: "solid",
+      borderLeftColor: "colorBorderWeaker",
+      borderRadius: "borderRadius0",
+      minHeight: "sizeBase80",
+      flexGrow: "1",
+      marginY: "space30",
+    },
+
+    "[role='listitem']:last-child>*>div:first-child::after": {
+      content: "none",
+    },
+  },
+  horizontal: {
+    flexWrap: "nowrap",
+    "[role='listitem']": {
+      display: "flex",
+      alignItems: "flex-start",
+      flexGrow: "1",
+      "&::after": {
+        content: "''",
+        borderBottomWidth: "borderWidth20",
+        borderBottomStyle: "solid",
+        borderBottomColor: "colorBorderWeaker",
+        borderRadius: "borderRadius20",
+        minWidth: "sizeBase40",
+        flexGrow: 1,
+        // @ts-expect-error do not have tokens for 10px
+        marginTop: "10px",
+      },
+
+      "&>*:first-child": {
+        marginX: "space30",
+      },
+    },
+    "[role='listitem']:first-child": {
+      "&>*:first-child": {
+        marginLeft: "space0",
+      },
+    },
+    "[role='listitem']:last-child": {
+      flexGrow: "0",
+      "&::after": {
+        content: "none",
+      },
+
+      "&>*:last-child": {
+        marginRight: "space0",
+      },
+    },
+  },
+};
+
 export const ProgressSteps = React.forwardRef<HTMLDivElement, ProgressStepsProps>(
   ({ element = "PROGRESS_STEPS", orientation = "horizontal", ...props }, ref) => {
+    const ContainerStyled = styled.div(
+      css({
+        display: "flex",
+        ...ItemSeparatorStyles[orientation],
+      }),
+    );
+
     return (
       <ProgressStepsContext.Provider value={{ orientation }}>
-        <Box
-          {...safelySpreadBoxProps(props)}
-          ref={ref}
-          element={element}
-          display="flex"
-          role="list"
-          {...(orientation === "horizontal" ? HorizontalStyles : VerticalStyles)}
-        >
+        <Box {...safelySpreadBoxProps(props)} as={ContainerStyled as any} ref={ref} element={element} role="list">
           {props.children}
         </Box>
       </ProgressStepsContext.Provider>

diff --git a/packages/paste-core/components/progress-steps/src/index.tsx b/packages/paste-core/components/progress-steps/src/index.tsx
@@ -2,6 +2,8 @@ export { ProgressSteps } from "./ProgressSteps";
 export type { ProgressStepsProps } from "./ProgressSteps";
 export { ProgressStepSeparator } from "./ProgressStepSeparator";
 export type { ProgressStepSeparatorProps } from "./ProgressStepSeparator";
+export { ProgressStepContent } from "./ProgressStepContent";
+export type { ProgressStepContentProps } from "./ProgressStepContent";
 // Step types
 export { ProgressStepComplete } from "./ProgressStepComplete";
 export * from "./ProgressStepIncomplete";

diff --git a/packages/paste-core/components/progress-steps/stories/horizontal.stories.tsx b/packages/paste-core/components/progress-steps/stories/horizontal.stories.tsx
@@ -102,3 +102,28 @@ export const Internationalized: React.FC = () => {
     </ProgressSteps>
   );
 };
+
+export const WithoutSeparatorComponent = (): React.ReactNode => {
+  return (
+    <ProgressSteps>
+      <ProgressStepComplete as="div">Complete </ProgressStepComplete>
+      <ProgressStepError as="div">Error</ProgressStepError>
+      <ProgressStepCurrent as="div">Current</ProgressStepCurrent>
+      <ProgressStepIncomplete as="div">Incomplete</ProgressStepIncomplete>
+    </ProgressSteps>
+  );
+};
+
+export const SuperLongText = (): React.ReactNode => {
+  return (
+    <ProgressSteps>
+      <ProgressStepComplete as="div">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nesciunt neque dolor facere! Eius fugiat
+        obcaecati voluptas, inventore quo, hic sapiente voluptatibus ad repellendus, tempore placeat sit qui ea saepe?
+      </ProgressStepComplete>
+      <ProgressStepError as="div">Error</ProgressStepError>
+      <ProgressStepCurrent as="div">Current</ProgressStepCurrent>
+      <ProgressStepIncomplete as="div">Incomplete</ProgressStepIncomplete>
+    </ProgressSteps>
+  );
+};