@vention/machine-ui 3.27.0

package/src/lib/components/vention-progress-bar/vention-progress-bar.stories.tsx

@@ -0,0 +1,84 @@
+import { Box, Typography } from "@mui/material"
+import type { Meta, StoryObj } from "@storybook/react"
+import { IconGhost2 } from "@tabler/icons-react"
+import React from "react"
+
+import { VentionProgressBar } from "./vention-progress-bar"
+
+const meta: Meta<typeof VentionProgressBar> = {
+  component: VentionProgressBar,
+  title: "Components/VentionProgressBar",
+  argTypes: {
+    size: {
+      control: {
+        type: "radio",
+        options: ["large", "medium", "small"],
+      },
+    },
+    state: {
+      control: {
+        type: "radio",
+        options: ["default"],
+      },
+    },
+    label: {
+      control: {
+        type: "text",
+      },
+    },
+  },
+}
+export default meta
+type Story = StoryObj<typeof VentionProgressBar>
+
+export const Default: Story = {
+  args: {
+    value: 32,
+  },
+}
+
+export const Success: Story = {
+  args: {
+    state: "success",
+    statusText: "Loading Complete!",
+  },
+}
+
+export const Error: Story = {
+  args: {
+    state: "error",
+    statusText: "Something went wrong :(",
+  },
+}
+
+export const WithLabel: Story = {
+  args: {
+    value: 50,
+    colored: true,
+    label: "Loading progress ...",
+  },
+}
+
+export const WithComplexLabel: Story = {
+  args: {
+    value: 50,
+    colored: true,
+    label: (
+      <Box display="flex" alignItems="center" alignContent="center" justifyContent="space-between">
+        <Typography>
+          <IconGhost2 stroke={2} size={20} />
+          <span style={{ marginLeft: "8px" }}>Loading Spooky Haunted House ...</span>
+        </Typography>
+        <Typography variant="uiText14SemiBold">50%</Typography>
+      </Box>
+    ),
+  },
+}
+
+export const WithHelperText: Story = {
+  args: {
+    value: 68,
+    colored: true,
+    helperText: "68% completed",
+  },
+}

package/src/lib/components/vention-progress-bar/vention-progress-bar.test.tsx

@@ -0,0 +1,102 @@
+import "@testing-library/jest-dom"
+
+import { Typography } from "@mui/material"
+
+import { areElementsInDOM, renderWithTheme } from "../../testing/utils"
+import { VentionProgressBar } from "./vention-progress-bar"
+
+describe("<VentionProgressBar />", () => {
+  it("should show default progress bar", () => {
+    const progressBarValue = 45
+
+    const { queryByTestId } = renderWithTheme(<VentionProgressBar value={progressBarValue} />)
+    const { progressBar, successIcon, errorIcon } = getElementsOfInterest(queryByTestId)
+
+    areElementsInDOM([
+      { element: progressBar, isInDOM: true },
+      { element: successIcon, isInDOM: false },
+      { element: errorIcon, isInDOM: false },
+    ])
+    expect(progressBar).toHaveAttribute("aria-valuenow", progressBarValue.toString())
+  })
+
+  it("should show default colored progress bar", () => {
+    const progressBarValue = 64
+
+    const { queryByTestId } = renderWithTheme(<VentionProgressBar value={progressBarValue} colored={true} />)
+    const { progressBar, successIcon, errorIcon } = getElementsOfInterest(queryByTestId)
+
+    areElementsInDOM([
+      { element: progressBar, isInDOM: true },
+      { element: successIcon, isInDOM: false },
+      { element: errorIcon, isInDOM: false },
+    ])
+    expect(progressBar).toHaveAttribute("aria-valuenow", progressBarValue.toString())
+  })
+
+  it("should show success progress bar with label", () => {
+    const successText = "Success"
+    const { queryByTestId, getByText } = renderWithTheme(<VentionProgressBar state="success" statusText={successText} />)
+    const { progressBar, successIcon, errorIcon } = getElementsOfInterest(queryByTestId)
+
+    areElementsInDOM([
+      { element: progressBar, isInDOM: true },
+      { element: successIcon, isInDOM: true },
+      { element: errorIcon, isInDOM: false },
+    ])
+    expect(progressBar).toHaveAttribute("aria-valuenow", "100")
+    getByText(successText)
+  })
+
+  it("should show error progress bar with label", () => {
+    const errorText = "Error"
+    const value = 42
+    const { queryByTestId, getByText } = renderWithTheme(<VentionProgressBar state="error" value={value} statusText={errorText} />)
+    const { progressBar, successIcon, errorIcon } = getElementsOfInterest(queryByTestId)
+
+    areElementsInDOM([
+      { element: progressBar, isInDOM: true },
+      { element: successIcon, isInDOM: false },
+      { element: errorIcon, isInDOM: true },
+    ])
+    expect(progressBar).toHaveAttribute("aria-valuenow", value.toString())
+    getByText(errorText)
+  })
+
+  it("should show progress bar with label", () => {
+    const labelText = "Progress"
+    const { getByText } = renderWithTheme(<VentionProgressBar label={labelText} />)
+    getByText(labelText)
+  })
+
+  it("should show progress bar with complex label", () => {
+    const labelElement = <Typography>Progress</Typography>
+    const { getByText } = renderWithTheme(<VentionProgressBar label={labelElement} />)
+    getByText("Progress")
+  })
+
+  it("should show progress bar with helper text", () => {
+    const helperText = "Helper"
+    const { getByText } = renderWithTheme(<VentionProgressBar helperText={helperText} />)
+    getByText(helperText)
+  })
+
+  it("should not show status text if not completed", () => {
+    const statusText = "Status"
+    const { queryByTestId, queryByText } = renderWithTheme(<VentionProgressBar statusText={statusText} />)
+    const { successIcon, errorIcon } = getElementsOfInterest(queryByTestId)
+    const statusTextElement = queryByText(statusText)
+
+    expect(statusTextElement).toBeNull()
+    areElementsInDOM([
+      { element: successIcon, isInDOM: false },
+      { element: errorIcon, isInDOM: false },
+    ])
+  })
+})
+
+const getElementsOfInterest = (queryByTestId: (testId: string) => HTMLElement) => ({
+  progressBar: queryByTestId("progressBar"),
+  successIcon: queryByTestId("successIcon"),
+  errorIcon: queryByTestId("errorIcon"),
+})

package/src/lib/components/vention-progress-bar/vention-progress-bar.tsx

@@ -0,0 +1,119 @@
+import { Box, LinearProgress, Stack, Theme, Typography, linearProgressClasses } from "@mui/material"
+import { IconAlertTriangleFilled, IconCheck } from "@tabler/icons-react"
+import { CSSProperties, ReactNode } from "react"
+import { tss } from "tss-react/mui"
+
+import { applyDefaultProps } from "../../utilities"
+import { Sizes, StrictExtract } from "../../theme/machine-ui-theme"
+
+export interface VentionProgressBarProps {
+  value?: number
+  size?: StrictExtract<Sizes, "small" | "medium" | "large">
+  colored?: boolean
+  state?: "default" | "error" | "success"
+  label?: ReactNode | string
+  helperText?: string
+  statusText?: string
+}
+
+const defaultProps: Partial<VentionProgressBarProps> = {
+  value: 0,
+  size: "medium",
+  colored: false,
+  state: "default",
+}
+
+export const VentionProgressBar = (inputProps: VentionProgressBarProps) => {
+  const props = applyDefaultProps(inputProps, defaultProps)
+  const isStatusState = props.state === "error" || props.state === "success"
+
+  const { classes } = useStyles({ size: props.size, colored: props.colored, state: props.state })
+
+  return (
+    <Box>
+      {props.label &&
+        (typeof props.label === "string" ? (
+          <Typography variant="uiText14Regular" color="textPrimary">
+            {props.label}
+          </Typography>
+        ) : (
+          props.label
+        ))}
+      <LinearProgress
+        className={classes.progressBar}
+        variant="determinate"
+        value={props.state === "success" ? 100 : props.value}
+        data-testid="progressBar"
+      />
+      {isStatusState && props.statusText && (
+        <Stack direction="row" gap={1} alignItems="center" alignContent="center" className={classes.statusText}>
+          {props.state === "error" ? (
+            <IconAlertTriangleFilled size={14} data-testid="errorIcon" />
+          ) : (
+            <IconCheck size={14} data-testid="successIcon" />
+          )}
+          <Typography variant="uiText12Regular">{props.statusText}</Typography>
+        </Stack>
+      )}
+      {props.helperText && (
+        <Typography variant="uiText12Regular" color="textSecondary">
+          {props.helperText}
+        </Typography>
+      )}
+    </Box>
+  )
+}
+
+const useStyles = tss
+  .withParams<Pick<VentionProgressBarProps, "size" | "colored" | "state">>()
+  .create(({ size, colored, state, theme }) => {
+    const { barColor, textColor } = getColors(state, colored, theme)
+
+    return {
+      progressBar: {
+        ...PROGRESS_BAR_SIZES[size],
+        marginBottom: theme.spacing(1),
+        [`&.${linearProgressClasses.colorPrimary}`]: {
+          backgroundColor: theme.palette.background.surface3,
+        },
+        [`& .${linearProgressClasses.bar}`]: {
+          backgroundColor: barColor,
+        },
+      },
+      statusText: {
+        color: textColor,
+      },
+    }
+  })
+
+const getColors = (state: VentionProgressBarProps["state"], isColored: VentionProgressBarProps["colored"], theme: Theme) => {
+  const backgroundColors = theme.palette.background
+  const textColors = theme.palette.text
+
+  if (isColored && state === "default") {
+    return { barColor: backgroundColors.blue, textColor: textColors.primary }
+  } else if (state === "success") {
+    return { barColor: backgroundColors.success, textColor: textColors.positive }
+  } else if (state === "error") {
+    return { barColor: backgroundColors.destructive, textColor: textColors.negative }
+  }
+
+  return { barColor: backgroundColors.defaultInverse, textColor: textColors.primary }
+}
+
+const PROGRESS_BAR_SIZES: Record<VentionProgressBarProps["size"], CSSProperties> = {
+  large: {
+    height: 24,
+    borderRadius: 4,
+  },
+  medium: {
+    height: 8,
+    borderRadius: 16,
+  },
+  small: {
+    height: 2,
+    borderRadius: 0,
+  },
+}
+
+VentionProgressBar.defaultProps = defaultProps

package/src/lib/components/vention-radio/radio-model.ts

@@ -0,0 +1,77 @@
+import { Palette } from "@mui/material/styles"
+import { Sizes, StrictExtract } from "../../theme/machine-ui-theme"
+import { InputStates } from "../shared/types/input-types"
+
+export type VentionRadioSizes = StrictExtract<Sizes, "small" | "medium" | "large" | "xx-large">
+export type VentionRadioVariantStyle = "outlined" | "shaded"
+export type VentionRadioState = StrictExtract<InputStates, "default" | "error">
+
+export type CheckedString = "checked" | "unchecked"
+
+export type RadioColors = {
+  borderColor: string | null
+  borderColorOnHover: string | null
+  borderColorOnPress: string | null
+  borderColorOnError: string | null
+  borderColorOnDisable: string | null
+  backgroundColor: string
+  backgroundColorOnHover: string
+  backgroundColorOnPress: string
+  backgroundColorOnError: string
+  backgroundColorOnDisable: string
+}
+
+export const radioColorMap: Record<CheckedString, Record<VentionRadioVariantStyle, (palette: Palette) => RadioColors>> = {
+  checked: {
+    outlined: (palette: Palette) => ({
+      borderColor: palette.button.primary,
+      borderColorOnHover: palette.button.primaryHover,
+      borderColorOnPress: palette.button.primaryPressed,
+      borderColorOnError: palette.button.destructive,
+      borderColorOnDisable: palette.background.defaultInverse,
+      backgroundColor: palette.icon.inverse,
+      backgroundColorOnHover: palette.icon.inverse,
+      backgroundColorOnPress: palette.icon.inverse,
+      backgroundColorOnError: palette.icon.inverse,
+      backgroundColorOnDisable: palette.icon.inverse,
+    }),
+    shaded: (palette: Palette) => ({
+      borderColor: palette.button.filled,
+      borderColorOnHover: palette.button.filledHover,
+      borderColorOnPress: palette.button.filledPressed,
+      borderColorOnError: palette.button.destructive,
+      borderColorOnDisable: palette.background.defaultInverse,
+      backgroundColor: palette.icon.inverse,
+      backgroundColorOnHover: palette.icon.inverse,
+      backgroundColorOnPress: palette.icon.inverse,
+      backgroundColorOnError: palette.icon.inverse,
+      backgroundColorOnDisable: palette.icon.inverse,
+    }),
+  },
+  unchecked: {
+    outlined: (palette: Palette) => ({
+      borderColor: palette.border.main,
+      borderColorOnHover: palette.border.hover,
+      borderColorOnPress: palette.border.active,
+      borderColorOnError: palette.border.destructive,
+      borderColorOnDisable: palette.background.defaultInverse,
+      backgroundColor: palette.icon.inverse,
+      backgroundColorOnHover: palette.button.secondaryHover,
+      backgroundColorOnPress: palette.button.secondaryPressed,
+      backgroundColorOnError: palette.background.subtleDestructive,
+      backgroundColorOnDisable: palette.icon.inverse,
+    }),
+    shaded: (palette: Palette) => ({
+      borderColor: palette.background.surface3,
+      borderColorOnHover: palette.background.surface3hover,
+      borderColorOnPress: palette.background.surface3active,
+      borderColorOnError: palette.border.destructive,
+      borderColorOnDisable: palette.background.defaultInverse,
+      backgroundColor: palette.background.surface3,
+      backgroundColorOnHover: palette.background.surface3hover,
+      backgroundColorOnPress: palette.background.surface3active,
+      backgroundColorOnError: palette.background.surface3,
+      backgroundColorOnDisable: palette.background.surface2,
+    }),
+  },
+}

package/src/lib/components/vention-radio/vention-radio-tile/vention-radio-tile-control.tsx

@@ -0,0 +1,38 @@
+import React from "react"
+import { tss } from "tss-react/mui"
+
+import { VentionRadio } from "../vention-radio"
+import { VentionRadioLocation, VentionRadioTileProps } from "./vention-radio-tile"
+
+export const VentionRadioTileControl = (props: VentionRadioTileProps) => {
+  const { classes } = useStyles({ radioLocation: props.radioLocation })
+
+  return (
+    <div className={classes.controllerContainer} data-testid="RadioTileControl">
+      <VentionRadio
+        checked={props.checked}
+        variant={props.variant}
+        radioSize={props.radioSize}
+        state={props.state}
+        disabled={props.disabled}
+        hideWhenUnchecked={false}
+        value={props.value}
+      />
+    </div>
+  )
+}
+
+const useStyles = tss.withParams<{ radioLocation: VentionRadioLocation }>().create(({ radioLocation }) => {
+  return {
+    controllerContainer: {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      display: "flex",
+      justifyContent: radioLocation === "left" ? "flex-start" : "flex-end",
+      alignItems: "flex-start",
+      width: "100%",
+      zIndex: "99",
+    },
+  }
+})

package/src/lib/components/vention-radio/vention-radio-tile/vention-radio-tile-label.tsx

@@ -0,0 +1,52 @@
+import { Typography, TypographyOwnProps } from "@mui/material"
+import React from "react"
+import { tss } from "tss-react/mui"
+
+import { VentionRadioSizes } from "../radio-model"
+
+interface TileLabelProps {
+  graphic: React.ReactNode
+  size: VentionRadioSizes
+  labelText?: string
+}
+
+export const VentionRadioTileLabel = (props: TileLabelProps) => {
+  const { classes } = useStyles({ size: props.size, labelText: props.labelText })
+
+  return (
+    <div className={classes.labelContainer} data-testid="RadioTileLabel">
+      {props.graphic}
+      <Typography variant={getTypographyVariant(props.size)} my={props.size === "xx-large" ? 1 : 0}>
+        {props.labelText}
+      </Typography>
+    </div>
+  )
+}
+
+const useStyles = tss.withParams<{ size: VentionRadioSizes; labelText: string }>().create(({ theme, size, labelText }) => {
+  return {
+    labelContainer: {
+      position: "absolute",
+      bottom: "0",
+      left: "0",
+      width: "100%",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      textAlign: "center",
+      marginBottom: size === "small" && labelText ? theme.spacing(1) : 0,
+    },
+  }
+})
+
+const getTypographyVariant = (size: VentionRadioSizes): TypographyOwnProps["variant"] => {
+  switch (size) {
+    case "small":
+      return "uiText12SemiBold"
+    case "xx-large":
+      return "hmiText20SemiBold"
+    default:
+      return "uiText14SemiBold"
+  }
+}

package/src/lib/components/vention-radio/vention-radio-tile/vention-radio-tile.stories.tsx

@@ -0,0 +1,67 @@
+import { RadioGroup } from "@mui/material"
+import type { Meta, StoryObj } from "@storybook/react"
+import React, { ChangeEvent } from "react"
+import { useState } from "react"
+
+import { getAssetFromS3 } from "../../../utilities"
+import { VentionRadioTile, VentionRadioTileProps } from "./vention-radio-tile"
+
+const meta: Meta<typeof VentionRadioTile> = {
+  component: VentionRadioTile,
+  title: "Components/VentionRadioTile",
+}
+
+export default meta
+type Story = StoryObj<typeof VentionRadioTile>
+
+const Template = (args: Partial<VentionRadioTileProps>) => {
+  const [value, setValue] = useState("option1")
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <RadioGroup row aria-label="custom-radio-group" name="custom-radio-group" value={value} onChange={handleChange}>
+      <VentionRadioTile {...args} value="option1" labelText="Option 1" checked={value === "option1"} />
+      <VentionRadioTile {...args} value="option2" labelText="Option 2" checked={value === "option2"} />
+      <VentionRadioTile {...args} value="option3" labelText="Option 3" checked={value === "option3"} />
+      <VentionRadioTile {...args} value="option4" checked={value === "option4"} />
+    </RadioGroup>
+  )
+}
+
+export const Default: Story = Template.bind({})
+
+export const DefaultWithGraphic: Story = Template.bind({})
+DefaultWithGraphic.args = {
+  graphic: <img style={{ maxWidth: "100%", paddingTop: "40px" }} src={getAssetFromS3("ventionv.jpeg")} alt="panel type" />,
+}
+
+export const ShadedNoGraphicSmallRadio: Story = Template.bind({})
+ShadedNoGraphicSmallRadio.args = {
+  variant: "shaded",
+  radioSize: "small",
+}
+
+export const ErrorNoGraphicLargeRadio: Story = Template.bind({})
+ErrorNoGraphicLargeRadio.args = {
+  state: "error",
+  radioSize: "large",
+}
+
+export const DisabledNoGraphic: Story = Template.bind({})
+DisabledNoGraphic.args = {
+  disabled: true,
+}
+
+export const RightRadioNoGraphic: Story = Template.bind({})
+RightRadioNoGraphic.args = {
+  radioLocation: "right",
+}
+
+export const Height200Width150NoGraphic: Story = Template.bind({})
+Height200Width150NoGraphic.args = {
+  tileHeight: "200px",
+  tileWidth: "150px",
+}

package/src/lib/components/vention-radio/vention-radio-tile/vention-radio-tile.test.tsx

@@ -0,0 +1,88 @@
+import "@testing-library/jest-dom"
+
+import { renderWithTheme } from "../../../testing/utils"
+import { VentionRadioTile } from "./vention-radio-tile"
+
+describe("<VentionRadioTile />", () => {
+  it("renders with default props", () => {
+    const { getByTestId } = renderWithTheme(<VentionRadioTile />)
+    const label = getByTestId("RadioTileFormControlLabel")
+    expect(label).toBeInTheDocument()
+    expect(label).not.toBeDisabled()
+  })
+
+  it("renders with the correct label text", () => {
+    const { getByText } = renderWithTheme(<VentionRadioTile labelText="Custom Label" />)
+    const label = getByText("Custom Label")
+    expect(label).toBeInTheDocument()
+  })
+
+  it("renders with the correct graphic", () => {
+    const { getByText } = renderWithTheme(<VentionRadioTile graphic={<div>Graphic</div>} />)
+    const graphic = getByText("Graphic")
+    expect(graphic).toBeInTheDocument()
+  })
+
+  it("renders with disabled state", () => {
+    const { getByTestId } = renderWithTheme(<VentionRadioTile disabled />)
+    const label = getByTestId("RadioTileFormControlLabel")
+    expect(label.className).toMatch(/Mui-disabled/)
+  })
+
+  it("renders with different variants", () => {
+    const { getByTestId } = renderWithTheme(<VentionRadioTile variant="shaded" />)
+    const label = getByTestId("RadioTileFormControlLabel")
+    expect(label).toHaveStyle("background-color: rgb(248, 250, 252)")
+  })
+
+  it("renders with small size", () => {
+    const testLabelText = "Test Label"
+    const { getByText } = renderWithTheme(<VentionRadioTile radioSize="small" labelText={testLabelText} />)
+    const label = getByText(testLabelText)
+    expect(label.className).toMatch(/uiText12SemiBold/)
+  })
+
+  it("renders with correct styles for xx-large size", () => {
+    const testLabelText = "Test Label"
+    const { getByText } = renderWithTheme(<VentionRadioTile radioSize="xx-large" labelText={testLabelText} />)
+    const label = getByText(testLabelText)
+    expect(label.className).toMatch(/hmiText20SemiBold/)
+  })
+
+  it("renders with error state", () => {
+    const { getByTestId } = renderWithTheme(<VentionRadioTile state="error" />)
+    const label = getByTestId("RadioTileFormControlLabel")
+    expect(label).toHaveStyle("border: 2px solid #ef4444")
+  })
+
+  it("renders with different tile dimensions", () => {
+    const { getByTestId } = renderWithTheme(<VentionRadioTile tileHeight="120px" tileWidth="120px" />)
+    const label = getByTestId("RadioTileFormControlLabel")
+    expect(label).toHaveStyle("height: 120px")
+    expect(label).toHaveStyle("width: 120px")
+  })
+
+  it("renders with right radio location", () => {
+    const { getByTestId } = renderWithTheme(<VentionRadioTile radioLocation="right" />)
+    const label = getByTestId("RadioTileFormControlLabel")
+    expect(label).toHaveStyle("justify-content: flex-end")
+  })
+
+  it("renders with unchecked state", () => {
+    const { getByRole } = renderWithTheme(<VentionRadioTile checked={true} />)
+    const radioElement = getByRole("radio")
+    expect(radioElement).toBeChecked()
+  })
+
+  it("renders with VentionRadioTileLabel", () => {
+    const { getByTestId } = renderWithTheme(<VentionRadioTile />)
+    const labelContainer = getByTestId("RadioTileLabel")
+    expect(labelContainer).toBeInTheDocument()
+  })
+
+  it("renders with VentionRadioTileControl", () => {
+    const { getByTestId } = renderWithTheme(<VentionRadioTile />)
+    const controlContainer = getByTestId("RadioTileControl")
+    expect(controlContainer).toBeInTheDocument()
+  })
+})