@vention/machine-ui 3.27.0

package/src/lib/components/vention-steps/vention-steps.test.tsx

@@ -0,0 +1,144 @@
+import "@testing-library/jest-dom"
+
+import { fireEvent, within } from "@testing-library/react"
+
+import { renderWithTheme } from "../../testing/utils"
+import { ElementTestIds, VentionSteps, VentionStepsProps } from "./vention-steps"
+
+const ADDON_TEXT = "This is an addon component to a step"
+const ACTIVE_COLOR = "#2563EB"
+const INACTIVE_COLOR = "#E2E8F0"
+const DISABLED_COLOR = "'rgba(0, 0, 0, 0.38)'"
+const SHADED_COLOR = "#F1F5F9"
+
+type Step = VentionStepsProps["steps"][number]
+
+function createStepsList(props: Partial<VentionStepsProps>): JSX.Element {
+  const size = props.size ?? "xx-large"
+  const variant = props.variant ?? "number"
+  const layout = props.layout ?? "vertical"
+  const disabled = props.disabled ?? false
+  const steps = props.steps ?? []
+
+  return <VentionSteps size={size} variant={variant} layout={layout} disabled={disabled} steps={steps} />
+}
+
+function step(attributes?: Partial<Step>): Step {
+  return {
+    ...attributes,
+    title: attributes?.title ?? "",
+    isCompleted: attributes?.isCompleted ?? false,
+    isSelected: attributes?.isSelected ?? false,
+  }
+}
+
+describe("<VentionSteps />", () => {
+  it("renders with minimum props", () => {
+    const title = "Step 1"
+    const { getByText } = renderWithTheme(createStepsList({ steps: [step({ title })] }))
+    expect(getByText(title)).toBeInTheDocument()
+  })
+
+  it("displays step bullets", () => {
+    const { queryByTestId } = renderWithTheme(createStepsList({ steps: [step()] }))
+    expect(queryByTestId(ElementTestIds.Bullet)).toBeInTheDocument()
+  })
+
+  describe("when style variant is 'number'", () => {
+    it("displays step numbers", () => {
+      const { queryAllByTestId } = renderWithTheme(createStepsList({ size: "xx-large", variant: "number", steps: [step(), step()] }))
+      const bullets = queryAllByTestId(ElementTestIds.Bullet)
+      expect(bullets).toHaveLength(2)
+      expect(bullets[0].textContent).toBe("1")
+      expect(bullets[1].textContent).toBe("2")
+    })
+  })
+
+  describe("when style variant is 'dot'", () => {
+    it("does not display step numbers", () => {
+      const { queryAllByTestId } = renderWithTheme(createStepsList({ variant: "dot", steps: [step(), step()] }))
+      const bullets = queryAllByTestId(ElementTestIds.Bullet)
+      expect(bullets[0].textContent).toBe("")
+      expect(bullets[1].textContent).toBe("")
+    })
+  })
+
+  describe("when size is 'small'", () => {
+    it("doesn't support 'number' style variant and defaults to 'dot'", () => {
+      const { queryAllByTestId } = renderWithTheme(createStepsList({ size: "small", variant: "number", steps: [step(), step()] }))
+      const stepBullet = queryAllByTestId(ElementTestIds.Bullet)
+      expect(stepBullet[0].textContent).toBe("")
+      expect(stepBullet[1].textContent).toBe("")
+    })
+  })
+
+  it("displays step as completed", () => {
+    const { queryAllByTestId, queryByTestId } = renderWithTheme(
+      createStepsList({ steps: [step({ isCompleted: true }), step({ isCompleted: true })] })
+    )
+    const stepBullets = queryAllByTestId(ElementTestIds.Bullet)
+    const progressBar = queryByTestId(ElementTestIds.Bar)
+    expect(within(stepBullets[0]).queryByTestId(ElementTestIds.CheckIcon)).toBeInTheDocument()
+    expect(progressBar).toHaveStyle(`background-color: ${ACTIVE_COLOR}`)
+  })
+
+  it("displays step as current one", () => {
+    const { queryAllByTestId } = renderWithTheme(createStepsList({ steps: [step(), step()] }))
+    const stepBullets = queryAllByTestId(ElementTestIds.Bullet)
+    expect(stepBullets[0]).toHaveStyle(`border-color: ${ACTIVE_COLOR}`)
+    expect(stepBullets[1]).toHaveStyle(`border-color: ${INACTIVE_COLOR}`)
+  })
+
+  describe("when steps are disabled", () => {
+    it("displays current step grayed out", () => {
+      const { queryByTestId } = renderWithTheme(createStepsList({ steps: [step({ title: "Step", description: "Do it" })], disabled: true }))
+
+      const stepBullet = queryByTestId(ElementTestIds.Bullet)
+      const stepTitle = queryByTestId(ElementTestIds.Title)
+      const stepDescription = queryByTestId(ElementTestIds.Description)
+
+      expect(stepBullet).toHaveStyle(`border-color: ${INACTIVE_COLOR}`)
+      expect(stepTitle).toHaveStyle(`color: ${DISABLED_COLOR}`)
+      expect(stepDescription).toHaveStyle(`color: ${DISABLED_COLOR}`)
+    })
+  })
+
+  describe("when step has description", () => {
+    it("displays step description", () => {
+      const description = "Description"
+      const { getByText } = renderWithTheme(createStepsList({ steps: [step({ description })] }))
+      expect(getByText(description)).toBeInTheDocument()
+    })
+  })
+
+  describe("when step is clicked", () => {
+    it("calls onClick handler when a step with onClick is clicked", () => {
+      const handleClick = jest.fn()
+      const { queryByTestId } = renderWithTheme(createStepsList({ steps: [step({ onClick: handleClick })] }))
+      const bullet = queryByTestId(ElementTestIds.Bullet)
+      fireEvent.click(bullet)
+      expect(handleClick).toHaveBeenCalled()
+    })
+
+    it("does not throw error when a step without onClick is clicked", () => {
+      const { queryByTestId } = renderWithTheme(createStepsList({ steps: [step()] }))
+      const bullet = queryByTestId(ElementTestIds.Bullet)
+      expect(() => fireEvent.click(bullet)).not.toThrow()
+    })
+  })
+
+  describe("when step is selected", () => {
+    it("displays a shaded background", () => {
+      const { queryByTestId } = renderWithTheme(createStepsList({ steps: [step({ isSelected: true })] }))
+      const stepContent = queryByTestId(ElementTestIds.Content)
+      expect(stepContent).toHaveStyle(`background-color: ${SHADED_COLOR}`)
+    })
+  })
+
+  describe("when step has addon", () => {
+    it("displays the addon", () => {
+      const { getByText } = renderWithTheme(createStepsList({ steps: [step({ addon: <div>{ADDON_TEXT}</div> })] }))
+      expect(getByText(ADDON_TEXT)).toBeInTheDocument()
+    })
+  })
+})

package/src/lib/components/vention-steps/vention-steps.tsx

@@ -0,0 +1,305 @@
+import { Typography, TypographyOwnProps } from "@mui/material"
+import { IconCheck } from "@tabler/icons-react"
+import { Sizes, StrictExtract } from "../../theme/machine-ui-theme"
+
+import React from "react"
+import { tss } from "tss-react/mui"
+
+interface Step {
+  title: string
+  description?: string
+  isCompleted: boolean
+  isSelected: boolean
+  onClick?: (step: Step) => void
+  addon?: JSX.Element
+}
+
+export interface VentionStepsProps {
+  variant: "number" | "dot"
+  layout: "vertical"
+  steps: Step[]
+  size: StrictExtract<Sizes, "small" | "xx-large">
+  disabled?: boolean
+}
+
+export const VentionSteps = (props: VentionStepsProps) => {
+  const { classes, cx } = useStyles(props)
+  const typographyVariants = getTypographyVariants(props.size)
+  let variant = props.variant
+  if (props.size === "small" && variant === "number") {
+    console.warn("The design system doesn't support vention-steps bullet numbering for the requested size. Defaulting to dots style.")
+    variant = "dot"
+  }
+
+  return (
+    <div className={cx(classes.root, props.disabled && classes.stepsDisabled)}>
+      {props.steps.map((step, index) => {
+        const previousStep = props.steps[index - 1]
+        const isCurrentStep = !step.isCompleted && (!previousStep || previousStep.isCompleted) && !props.disabled
+
+        return (
+          <div
+            data-testid={ElementTestIds.Content}
+            key={index}
+            className={cx(classes.step, step.isSelected && classes.stepSelected, step.onClick !== undefined && classes.stepClickable)}
+            onClick={() => step.onClick?.(step)}
+            role="button"
+          >
+            <div className={classes.stepProgress}>
+              <div
+                data-testid={ElementTestIds.Bullet}
+                className={cx(
+                  classes.stepBullet,
+                  props.size === "small" && classes.small,
+                  variant === "number" && classes.stepNumber,
+                  variant === "dot" && classes.stepDot,
+                  step.isCompleted && classes.stepCompleted,
+                  isCurrentStep && classes.stepCurrent
+                )}
+              >
+                {step.isCompleted ? (
+                  <IconCheck data-testid={ElementTestIds.CheckIcon} className={classes.checkIcon} />
+                ) : (
+                  <BulletContent
+                    bulletVariant={variant}
+                    typographyVariant={typographyVariants.bulletText}
+                    bulletText={(index + 1).toFixed(0)}
+                  />
+                )}
+              </div>
+              {props.steps.length !== index + 1 && (
+                <div
+                  data-testid={ElementTestIds.Bar}
+                  className={cx(classes.bar, props.size === "small" && classes.small, step.isCompleted && classes.barCompleted)}
+                />
+              )}
+            </div>
+            <div className={classes.stepContent}>
+              <Typography data-testid={ElementTestIds.Title} variant={typographyVariants.heading}>
+                {step.title}
+              </Typography>
+              {step.description && (
+                <Typography data-testid={ElementTestIds.Description} variant={typographyVariants.description}>
+                  {step.description}
+                </Typography>
+              )}
+              {step.addon}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+const useStyles = tss
+  .withParams<Pick<VentionStepsProps, "size">>()
+  .withNestedSelectors<"stepsDisabled" | "checkIcon" | "stepCompleted" | "stepCurrent" | "stepClickable" | "small">()
+  .create(({ theme, size, classes }) => {
+    const sizes = VARIABLE_SIZES[size]
+
+    return {
+      stepsDisabled: {},
+      checkIcon: {},
+      stepCompleted: {},
+      stepCurrent: {},
+      small: {},
+
+      root: {
+        display: "flex",
+        flexDirection: "column",
+      },
+      step: {
+        display: "flex",
+        gap: 12,
+        borderRadius: 8,
+
+        [`&:not(.${classes.stepClickable})`]: {
+          // specific rule to avoid conflict with bootstrap's styling on button role
+          cursor: "auto",
+        },
+      },
+      stepClickable: {
+        cursor: "pointer",
+        "&:hover": {
+          backgroundColor: theme.palette.button.shaded,
+        },
+      },
+      stepSelected: {
+        backgroundColor: theme.palette.button.shaded,
+      },
+      stepProgress: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        paddingBottom: 2,
+        gap: 2,
+      },
+      stepBullet: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "50%",
+        width: `${sizes.bulletSize}px`,
+        height: `${sizes.bulletSize}px`,
+        marginTop: `${sizes.bulletTopMargin}px`,
+      },
+      stepNumber: {
+        border: `${sizes.borderThickness.number}px solid ${theme.palette.border.main}`,
+        color: theme.palette.text.secondary,
+
+        [`& .${classes.checkIcon}`]: {
+          strokeWidth: 4,
+          color: theme.palette.text.primaryOnColor,
+        },
+
+        [`&.${classes.stepCompleted}`]: {
+          borderColor: theme.palette.text.brand,
+          backgroundColor: theme.palette.text.brand,
+          color: theme.palette.text.brand,
+        },
+
+        [`&.${classes.stepCurrent}`]: {
+          borderColor: theme.palette.text.brand,
+          color: theme.palette.text.brand,
+        },
+      },
+      stepDot: {
+        border: `${sizes.borderThickness.dot}px solid ${theme.palette.border.main}`,
+        backgroundColor: theme.palette.border.main,
+
+        [`& .${classes.checkIcon}`]: {
+          strokeWidth: 4,
+          color: theme.palette.text.brand,
+          width: "100%",
+          height: "100%",
+        },
+
+        [`&.${classes.stepCompleted}`]: {
+          borderColor: "transparent",
+          backgroundColor: "transparent",
+          color: "transparent",
+          marginBottom: "-3px",
+        },
+
+        [`&.${classes.stepCurrent}`]: {
+          borderColor: theme.palette.text.brand,
+          backgroundColor: "transparent",
+          color: theme.palette.text.brand,
+        },
+
+        [`&.${classes.small}`]: {
+          marginLeft: "5px",
+          marginRight: "5px",
+
+          [`&.${classes.stepCompleted}`]: {
+            // this special case makes the check icon bigger than usual dots
+            marginLeft: 0,
+            marginRight: 0,
+            marginTop: "0px",
+            width: "18px",
+            height: "18px",
+          },
+        },
+      },
+      bar: {
+        width: "2px",
+        flexGrow: 1,
+        backgroundColor: theme.palette.border.main,
+        marginBottom: `-${sizes.bulletTopMargin}px`,
+      },
+      barCompleted: {
+        backgroundColor: theme.palette.text.brand,
+      },
+      stepContent: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        minHeight: `${sizes.minContentHeight}px`,
+        paddingTop: `${sizes.contentTopPadding}px`,
+        paddingBottom: `${sizes.contentBottomPadding}px`,
+
+        [`.${classes.stepsDisabled} &`]: {
+          color: theme.palette.text.disabled,
+        },
+      },
+    }
+  })
+
+function BulletContent(props: {
+  bulletVariant: VentionStepsProps["variant"]
+  typographyVariant?: TypographyOwnProps["variant"]
+  bulletText?: string
+}) {
+  switch (props.bulletVariant) {
+    case "number":
+      return <Typography variant={props.typographyVariant}>{props.bulletText}</Typography>
+    case "dot":
+      return <div />
+  }
+}
+
+export const ElementTestIds = {
+  Bullet: "step-bullet",
+  Bar: "step-bar",
+  Content: "step-content",
+  Title: "step-title",
+  Description: "step-description",
+  CheckIcon: "step-check-icon",
+} as const
+
+const getTypographyVariants = (
+  size: VentionStepsProps["size"]
+): {
+  heading: TypographyOwnProps["variant"]
+  description: TypographyOwnProps["variant"]
+  bulletText?: TypographyOwnProps["variant"]
+} => {
+  switch (size) {
+    case "small":
+      return {
+        heading: "uiText12SemiBold",
+        description: "uiText12Regular",
+      }
+    case "xx-large":
+      return {
+        heading: "heading24SemiBold",
+        description: "hmiText20Regular",
+        bulletText: "hmiText20SemiBold",
+      }
+  }
+}
+
+type VariableSizes = {
+  bulletSize: number
+  bulletTopMargin: number
+  borderThickness: Record<VentionStepsProps["variant"], number>
+  minContentHeight: number
+  contentTopPadding: number
+  contentBottomPadding: number
+}
+
+const VARIABLE_SIZES: Record<VentionStepsProps["size"], VariableSizes> = {
+  small: {
+    bulletSize: 8,
+    bulletTopMargin: 4,
+    borderThickness: {
+      number: 2,
+      dot: 2,
+    },
+    minContentHeight: 54,
+    contentTopPadding: 0,
+    contentBottomPadding: 20,
+  },
+  "xx-large": {
+    bulletSize: 42,
+    bulletTopMargin: 0,
+    borderThickness: {
+      number: 2,
+      dot: 5,
+    },
+    minContentHeight: 80,
+    contentTopPadding: 5,
+    contentBottomPadding: 20,
+  },
+}

package/src/lib/components/vention-switch/vention-switch.stories.tsx

@@ -0,0 +1,48 @@
+import { useArgs } from "@storybook/preview-api"
+import { Meta, StoryObj } from "@storybook/react"
+import React from "react"
+
+import { VentionSwitch } from "./vention-switch"
+
+const meta: Meta<typeof VentionSwitch> = {
+  component: VentionSwitch,
+  title: "Components/VentionSwitch",
+  argTypes: {
+    checked: {
+      options: ["on", "off", "mixed", "loading"],
+      control: {
+        type: "select",
+      },
+    },
+    size: {
+      options: ["small", "medium", "large", "x-large", "xx-large"],
+      control: {
+        type: "select",
+      },
+    },
+    disabled: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+}
+export default meta
+type Story = StoryObj<typeof VentionSwitch>
+
+export const Default: Story = {
+  args: {
+    checked: "on",
+    size: "x-large",
+    disabled: false,
+  },
+  render: function Render(args) {
+    const [{ checked, disabled }, updateArgs] = useArgs()
+
+    const handleChange = (__checked: "on" | "off") => {
+      updateArgs({ checked: __checked })
+    }
+
+    return <VentionSwitch {...args} disabled={disabled} checked={checked} onChange={handleChange} />
+  },
+}

package/src/lib/components/vention-switch/vention-switch.test.tsx

@@ -0,0 +1,118 @@
+import { fireEvent, screen } from "@testing-library/react"
+import React from "react"
+
+import { renderWithTheme } from "../../testing/utils"
+import { machineUiTheme } from "../../theme/machine-ui-theme"
+import { VentionSwitch } from "./vention-switch"
+
+describe("VentionSwitch", () => {
+  it("should render correctly", () => {
+    const { container } = renderWithTheme(<VentionSwitch checked="on" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it("should call onChange when clicked", () => {
+    const handleChange = jest.fn()
+    const { container } = renderWithTheme(<VentionSwitch checked="off" onChange={handleChange} />)
+    fireEvent.click(container.firstChild)
+    expect(handleChange).toHaveBeenCalledTimes(1)
+    expect(handleChange).toHaveBeenCalledWith("on")
+  })
+
+  it("should not call onChange when disabled", () => {
+    const handleChange = jest.fn()
+    const { container } = renderWithTheme(<VentionSwitch checked="off" onChange={handleChange} disabled />)
+    fireEvent.click(container.firstChild)
+    expect(handleChange).not.toHaveBeenCalled()
+  })
+
+  it("should toggle from off to on", () => {
+    const handleChange = jest.fn()
+    const { container } = renderWithTheme(<VentionSwitch checked="off" onChange={handleChange} />)
+    fireEvent.click(container.firstChild)
+    expect(handleChange).toHaveBeenCalledTimes(1)
+    expect(handleChange).toHaveBeenCalledWith("on")
+  })
+
+  it("should toggle from on to off", () => {
+    const handleChange = jest.fn()
+    const { container } = renderWithTheme(<VentionSwitch checked="on" onChange={handleChange} />)
+    fireEvent.click(container.firstChild)
+    expect(handleChange).toHaveBeenCalledTimes(1)
+    expect(handleChange).toHaveBeenCalledWith("off")
+  })
+
+  it("should not toggle from mixed to on", () => {
+    const handleChange = jest.fn()
+    const { container } = renderWithTheme(<VentionSwitch checked="mixed" onChange={handleChange} />)
+    fireEvent.click(container.firstChild)
+    expect(handleChange).not.toHaveBeenCalled()
+  })
+
+  it("should not toggle from loading to on", () => {
+    const handleChange = jest.fn()
+    const { container } = renderWithTheme(<VentionSwitch checked="loading" onChange={handleChange} />)
+    fireEvent.click(container.firstChild)
+    expect(handleChange).not.toHaveBeenCalled()
+  })
+
+  it("should render correctly with size small", () => {
+    const { container } = renderWithTheme(<VentionSwitch checked="on" size="small" />)
+    expect(container.firstChild).toBeInTheDocument()
+    const thumb = screen.getByTestId("vention-switch-thumb")
+    expect(thumb).toHaveStyle(`width: ${machineUiTheme.spacing(2)}`)
+  })
+
+  it("should render correctly with size medium", () => {
+    const { container } = renderWithTheme(<VentionSwitch checked="on" size="medium" />)
+    expect(container.firstChild).toBeInTheDocument()
+    const thumb = screen.getByTestId("vention-switch-thumb")
+    expect(thumb).toHaveStyle(`width: ${machineUiTheme.spacing(3)}`)
+  })
+
+  it("should render correctly with size large", () => {
+    const { container } = renderWithTheme(<VentionSwitch checked="on" size="large" />)
+    expect(container.firstChild).toBeInTheDocument()
+    const thumb = screen.getByTestId("vention-switch-thumb")
+    expect(thumb).toHaveStyle(`width: ${machineUiTheme.spacing(4)}`)
+  })
+
+  it("should render correctly with size XL", () => {
+    const { container } = renderWithTheme(<VentionSwitch checked="on" size="x-large" />)
+    expect(container.firstChild).toBeInTheDocument()
+    const thumb = screen.getByTestId("vention-switch-thumb")
+    expect(thumb).toHaveStyle(`width: calc(${machineUiTheme.spacing(5)} + 2px)`)
+  })
+
+  it("should render correctly with size XXL", () => {
+    const { container } = renderWithTheme(<VentionSwitch checked="on" size="xx-large" />)
+    expect(container.firstChild).toBeInTheDocument()
+    const thumb = screen.getByTestId("vention-switch-thumb")
+    expect(thumb).toHaveStyle(`width: calc(${machineUiTheme.spacing(7)} + 6px)`)
+  })
+
+  it("should render correctly with variant shaded", () => {
+    const { container } = renderWithTheme(<VentionSwitch checked="on" size="xx-large" variant="shaded" />)
+    expect(container.firstChild).toBeInTheDocument()
+    const thumb = screen.getByTestId("vention-switch-thumb")
+    expect(thumb).toHaveStyle(`width: calc(${machineUiTheme.spacing(7)} + 6px)`)
+  })
+  it("should render correctly with variant shaded", () => {
+    const { container } = renderWithTheme(<VentionSwitch checked="off" size="xx-large" variant="shaded" />)
+    expect(container.firstChild).toBeInTheDocument()
+    const thumb = screen.getByTestId("vention-switch-thumb")
+    expect(thumb).toHaveStyle(`width: calc(${machineUiTheme.spacing(7)} + 6px)`)
+  })
+  it("should render correctly with variant shaded", () => {
+    const { container } = renderWithTheme(<VentionSwitch checked="mixed" size="xx-large" variant="shaded" />)
+    expect(container.firstChild).toBeInTheDocument()
+    const thumb = screen.getByTestId("vention-switch-minus")
+    expect(thumb).toBeInTheDocument()
+  })
+  it("should render correctly with variant shaded", () => {
+    const { container } = renderWithTheme(<VentionSwitch checked="loading" size="xx-large" variant="shaded" />)
+    expect(container.firstChild).toBeInTheDocument()
+    const thumb = screen.getByTestId("vention-switch-loading")
+    expect(thumb).toBeInTheDocument()
+  })
+})