@vention/machine-ui 3.27.0

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

@@ -0,0 +1,185 @@
+import "@testing-library/jest-dom"
+
+import { rgbToHex } from "@mui/material"
+import { IconTool } from "@tabler/icons-react"
+import { fireEvent } from "@testing-library/react"
+
+import { renderWithTheme } from "../../testing/utils"
+import { machineUiTheme } from "../../theme/machine-ui-theme"
+import { VentionAlert } from "./vention-alert"
+
+const handleClickMock = jest.fn()
+describe("VentionAlert", () => {
+  it("closes the alert when the close button is clicked", () => {
+    const { queryByTestId } = renderWithTheme(<VentionAlert severity="info" size="small" isCloseable={true} />)
+    const closeButton = queryByTestId("closeButton")
+    const alertRootDiv = queryByTestId("alertRootDiv")
+    if (closeButton) fireEvent.click(closeButton)
+
+    expect(alertRootDiv).not.toBeVisible()
+  })
+
+  it("renders the link with the correct text", () => {
+    const linkText = "Click me"
+    const { getByText } = renderWithTheme(<VentionAlert severity="info" linkText={linkText} size="medium" onLinkClick={handleClickMock} />)
+    const linkElement = getByText(linkText)
+    expect(linkElement).toBeInTheDocument()
+  })
+
+  it("calls the onLinkClick functions when the link is clicked", () => {
+    const linkText = "Click me"
+    const { getByText } = renderWithTheme(<VentionAlert severity="info" size="small" linkText={linkText} onLinkClick={handleClickMock} />)
+    const linkElement = getByText(linkText)
+    fireEvent.click(linkElement)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+
+  it("renders a title when set", () => {
+    const titleText = "Alert title"
+    const { getByText } = renderWithTheme(
+      <VentionAlert severity="info" size="small" linkText="Click me" title={titleText} isCloseable={true} onLinkClick={handleClickMock} />
+    )
+
+    const titleElement = getByText(titleText)
+    expect(titleElement).toBeInTheDocument()
+  })
+
+  it("does not render a left icon if nullish", () => {
+    const { queryByTestId } = renderWithTheme(
+      <VentionAlert severity="info" size="medium" isSingleLine={true} descriptionText="description" isCloseable={true} leftIcon={null} />
+    )
+    const leftIconElement = queryByTestId("leftIcon")
+    expect(leftIconElement).toBeNull()
+  })
+
+  it("does not render a right icon if nullish", () => {
+    const { queryByTestId } = renderWithTheme(
+      <VentionAlert severity="info" size="medium" isSingleLine={true} descriptionText="description" isCloseable={true} />
+    )
+    const righIconElement = queryByTestId("rightIcon")
+    expect(righIconElement).toBeNull()
+  })
+
+  it("renders a clickable primary button if set", () => {
+    const primaryBtnText = "Primary Btn"
+    const { getByText } = renderWithTheme(
+      <VentionAlert
+        severity="info"
+        isSingleLine={true}
+        title="Alert"
+        onPrimaryButtonClick={handleClickMock}
+        primaryButtonText={primaryBtnText}
+      />
+    )
+
+    const primaryBtn = getByText(primaryBtnText)
+    primaryBtn.click()
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+
+  it("renders a clickable secondary button if set", () => {
+    const secondaryBtnText = "Secondary Btn"
+    const { getByText } = renderWithTheme(
+      <VentionAlert
+        severity="info"
+        isSingleLine={true}
+        size="small"
+        title="Alert"
+        isCloseable={true}
+        onSecondaryButtonClick={handleClickMock}
+        secondaryButtonText={secondaryBtnText}
+      />
+    )
+
+    const primaryBtn = getByText(secondaryBtnText)
+    primaryBtn.click()
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+
+  it("creates an info alert in blue", () => {
+    const { queryByTestId } = renderWithTheme(
+      <VentionAlert severity="info" isSingleLine={true} title="Alert" onSecondaryButtonClick={handleClickMock} />
+    )
+
+    const alertRootDiv = queryByTestId("alertRootDiv")
+    const computedStyles = alertRootDiv ? window.getComputedStyle(alertRootDiv) : null
+    const bgColor = rgbToHex(computedStyles?.background ?? "").toUpperCase()
+    expect(bgColor).toBe(machineUiTheme.palette.background.subtleBlue)
+  })
+
+  it("creates an error alert in red", () => {
+    const { queryByTestId } = renderWithTheme(
+      <VentionAlert severity="error" isSingleLine={true} title="Alert" size="large" onSecondaryButtonClick={handleClickMock} />
+    )
+
+    const alertRootDiv = queryByTestId("alertRootDiv")
+    const computedStyles = alertRootDiv ? window.getComputedStyle(alertRootDiv) : null
+    const bgColor = rgbToHex(computedStyles?.background ?? "").toUpperCase()
+    expect(bgColor).toBe(machineUiTheme.palette.background.subtleDestructive)
+  })
+
+  it("creates a warning alert in blue", () => {
+    const { queryByTestId } = renderWithTheme(
+      <VentionAlert severity="warn" isSingleLine={true} title="Alert" onSecondaryButtonClick={handleClickMock} />
+    )
+
+    const alertRootDiv = queryByTestId("alertRootDiv")
+    const computedStyles = alertRootDiv ? window.getComputedStyle(alertRootDiv) : null
+    const bgColor = rgbToHex(computedStyles?.background ?? "").toUpperCase()
+    expect(bgColor).toBe(machineUiTheme.palette.background.subtleWarning)
+  })
+
+  it("creates a success alert in green", () => {
+    const { queryByTestId } = renderWithTheme(
+      <VentionAlert severity="success" isSingleLine={true} title="Alert" onSecondaryButtonClick={handleClickMock} />
+    )
+
+    const alertRootDiv = queryByTestId("alertRootDiv")
+    const computedStyles = alertRootDiv ? window.getComputedStyle(alertRootDiv) : null
+    const bgColor = rgbToHex(computedStyles?.background ?? "").toUpperCase()
+    expect(bgColor).toBe(machineUiTheme.palette.background.subtleSuccess)
+  })
+
+  it("creates an alert with a custom left icon when provided", () => {
+    const { queryByTestId } = renderWithTheme(
+      <VentionAlert severity="success" leftIcon={<IconTool />} title="Alert" onSecondaryButtonClick={handleClickMock} />
+    )
+
+    const leftIconGrid = queryByTestId("leftIcon")
+    expect(leftIconGrid).not.toBeNull()
+  })
+
+  it("creates an alert with a custom right icon when provided", () => {
+    const { queryByTestId } = renderWithTheme(
+      <VentionAlert severity="success" rightIcon={<IconTool />} title="Alert" onSecondaryButtonClick={handleClickMock} />
+    )
+
+    const rightIconGrid = queryByTestId("rightIcon")
+    expect(rightIconGrid).not.toBeNull()
+  })
+
+  it("create an alert with full width when isFullWidth is true", () => {
+    const { queryByTestId } = renderWithTheme(<VentionAlert severity="info" size="medium" isFullWidth={true} />)
+    const alertRootDiv = queryByTestId("alertRootDiv")
+    const computedStyles = alertRootDiv ? window.getComputedStyle(alertRootDiv) : null
+
+    expect(computedStyles?.width).toBe("100%")
+  })
+
+  it("uses the correct sizing for xx-large single-line alerts", () => {
+    const { queryByTestId } = renderWithTheme(<VentionAlert severity="info" size="xx-large" isSingleLine />)
+    const alertRootDiv = queryByTestId("alertRootDiv")
+    const computedStyles = alertRootDiv ? window.getComputedStyle(alertRootDiv) : null
+
+    expect(computedStyles?.padding).toBe("16px 24px")
+  })
+
+  it("uses the onCloseButtonClick action call setVisible if none given from consumer props", () => {
+    const { queryByTestId } = renderWithTheme(<VentionAlert severity="info" size="medium" isCloseable={true} />)
+    const closeButton = queryByTestId("closeButton")
+    const alertRootDiv = queryByTestId("alertRootDiv")
+    if (closeButton) fireEvent.click(closeButton)
+
+    expect(alertRootDiv).not.toBeVisible()
+  })
+})

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

@@ -0,0 +1,295 @@
+import { Box, Button, Grid, Typography, TypographyOwnProps } from "@mui/material"
+import { Theme } from "@mui/material/styles"
+import { IconInfoCircleFilled } from "@tabler/icons-react"
+import { IconAlertTriangleFilled, IconCircleCheckFilled, IconX } from "@tabler/icons-react"
+import { ReactElement, cloneElement, useState } from "react"
+import { tss } from "tss-react/mui"
+
+import { applyDefaultProps } from "../../utilities"
+import { VentionAlertControls } from "./vention-alert-controls"
+import { getGapSpaceForContent, VentionAlertProps } from "./vention-alert-utils"
+
+const getDefaultProps = (
+  severity: VentionAlertProps["severity"],
+  setVisible: React.Dispatch<React.SetStateAction<boolean>>
+): Partial<VentionAlertProps> => {
+  return {
+    size: "medium",
+    leftIcon: getAlertIcon(severity),
+    onCloseButtonClick: () => setVisible(false),
+  }
+}
+
+export const VentionAlert = (inputProps: VentionAlertProps) => {
+  const [visible, setVisible] = useState(true)
+  const alertProps = applyDefaultProps(inputProps, getDefaultProps(inputProps.severity, setVisible))
+  const hasControlProps = !!(alertProps.linkText || alertProps.primaryButtonText || alertProps.secondaryButtonText)
+  const { classes } = useStyles({ ...alertProps, hasControlProps })
+  const [titleTypography, descriptionTypography] = getTypographyVariant(alertProps.size)
+
+  return visible ? (
+    <Box data-testid="alertRootDiv" className={classes.root}>
+      <Grid container spacing={0} className={classes.alertGridContainer}>
+        {alertProps.leftIcon ? (
+          <Grid data-testid="leftIcon" className={classes.leftIcon}>
+            {/* To set the size on received child icon */}
+            {cloneElement(alertProps.leftIcon as ReactElement, {
+              size: getIconSize(alertProps.size),
+            })}
+          </Grid>
+        ) : null}
+        <Grid className={classes.alertContent}>
+          {alertProps.title ? (
+            <Typography variant={titleTypography} className={classes.title}>
+              {alertProps.title}
+            </Typography>
+          ) : null}
+          <Typography variant={descriptionTypography} className={classes.desc}>
+            {alertProps.descriptionText}
+          </Typography>
+          <VentionAlertControls {...alertProps} display={!alertProps.isSingleLine} />
+        </Grid>
+        <Grid item className={classes.rightColumn}>
+          <VentionAlertControls {...alertProps} display={alertProps.isSingleLine} />
+          {alertProps.rightIcon ? (
+            <Grid data-testid="rightIcon" className={classes.rightIcon}>
+              {/* To set the size on received child icon */}
+              {cloneElement(alertProps.rightIcon as ReactElement, {
+                size: getIconSize(alertProps.size),
+              })}
+            </Grid>
+          ) : null}
+          {alertProps.isCloseable ? (
+            <Grid width={16}>
+              <Button data-testid="closeButton" className={classes.closeButton} onClick={alertProps.onCloseButtonClick}>
+                <IconX stroke={1} size={16} />
+              </Button>
+            </Grid>
+          ) : null}
+        </Grid>
+      </Grid>
+    </Box>
+  ) : null
+}
+
+function getAlertPadding(alertProps: Pick<VentionAlertProps, "isSingleLine" | "size">) {
+  if (alertProps.isSingleLine) {
+    switch (alertProps.size) {
+      case "small":
+        return "4px 8px"
+      case "xx-large":
+        return "16px 24px"
+      default:
+        return "8px 12px"
+    }
+  }
+
+  return alertProps.size === "small" ? "12px 12px 16px 12px" : "20px 20px 24px 20px"
+}
+
+function getMarginRightValueForContent(alertProps: Pick<VentionAlertProps, "isSingleLine" | "size">) {
+  if (alertProps.isSingleLine) {
+    return alertProps.size === "small" ? "8px" : "12px"
+  }
+
+  return "16px"
+}
+
+function getBottomMarginForDescription(isSingleLine: boolean, size: VentionAlertProps["size"], hasControlProps: boolean) {
+  if (isSingleLine || !hasControlProps) {
+    return "0px"
+  } else if (size === "small") {
+    return "12px"
+  }
+
+  return "16px"
+}
+
+function getRootMaxWidth(isSingleLine: boolean, isFullWidth: boolean) {
+  if (isFullWidth) return "100%"
+  if (isSingleLine) return "inherit"
+
+  return "560px"
+}
+
+const useStyles = tss
+  .withParams<
+    Pick<VentionAlertProps, "isSingleLine" | "severity" | "size" | "isCloseable" | "isFullWidth"> & { hasControlProps: boolean }
+  >()
+  .create(({ isSingleLine, severity, size, isFullWidth, theme, hasControlProps }) => {
+    const { backgroundColor, borderColor, iconColor } = getAlertColors(severity, theme)
+    const textSize = getFontSize(size)
+
+    return {
+      root: {
+        backgroundColor: backgroundColor,
+        border: `${size === "large" ? 2 : 1}px solid var(--Border-Default-border-default, ${borderColor})`,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        boxSizing: "border-box",
+        height: getRootHeight({ isSingleLine, size }),
+        width: isFullWidth ? "100%" : "fit-content",
+        minWidth: "inherit",
+        maxWidth: getRootMaxWidth(isSingleLine, isFullWidth),
+        borderRadius: "4px",
+        padding: getAlertPadding({ isSingleLine, size }),
+      },
+      alertGridContainer: {
+        flexWrap: "nowrap",
+        lineHeight: "0px",
+        justifyContent: "space-between",
+      },
+      alertControls: {
+        flexDirection: isSingleLine ? "row-reverse" : "row",
+        gap: getGapSpaceForContent(isSingleLine, size),
+      },
+      alertContent: {
+        item: true,
+        width: "100%",
+        overflow: "hidden",
+        marginRight: getMarginRightValueForContent({ isSingleLine, size }),
+        display: "flex",
+        flexWrap: isSingleLine ? "nowrap" : "wrap",
+        flexDirection: isSingleLine ? "row" : "column",
+        flex: "1 1",
+        gap: getGapSpaceForContent(isSingleLine, size),
+        alignItems: isSingleLine ? "center" : "normal",
+      },
+      title: {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        marginBottom: isSingleLine ? "0px" : "4px",
+        fontSize: textSize,
+        color: theme.palette.text.primary,
+        textWrap: isSingleLine ? "nowrap" : "wrap",
+      },
+      desc: {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        marginBottom: getBottomMarginForDescription(isSingleLine, size, hasControlProps),
+        fontSize: textSize,
+        color: theme.palette.text.primary,
+        whiteSpace: "pre-wrap",
+        textWrap: isSingleLine ? "nowrap" : "wrap",
+      },
+      rightColumn: {
+        display: "flex",
+        flexShrink: 0,
+        gap: getGapSpaceForContent(isSingleLine, size),
+        alignItems: isSingleLine ? "center" : "normal",
+      },
+      leftIcon: {
+        color: iconColor,
+        item: true,
+        size: size === "small" ? 16 : 24,
+        width: "fit-content",
+        marginRight: size === "small" ? "8px" : "12px",
+        alignSelf: isSingleLine ? "center" : "normal",
+      },
+      rightIcon: {
+        color: iconColor,
+        size: size === "small" ? 16 : 24,
+        width: "fit-content",
+      },
+      closeButton: {
+        color: theme.palette.icon.primary,
+        padding: 0,
+        minWidth: 0,
+        opacity: "0.6",
+        "&:hover": {
+          backgroundColor: "transparent",
+          opacity: "1",
+        },
+      },
+    }
+  })
+
+const getRootHeight = (alertProps: Pick<VentionAlertProps, "isSingleLine" | "size">) => {
+  if (!alertProps.isSingleLine) return "fit-content"
+
+  const heights = {
+    small: "32px",
+    medium: "48px",
+    large: "56px",
+  }
+
+  return heights[alertProps.size]
+}
+
+const getAlertColors = (severity: VentionAlertProps["severity"], theme: Theme) => {
+  switch (severity) {
+    case "warn":
+      return {
+        backgroundColor: theme.palette.background.subtleWarning,
+        borderColor: theme.palette.border.subtleWarning,
+        iconColor: theme.palette.icon.warning,
+      }
+    case "error":
+      return {
+        backgroundColor: theme.palette.background.subtleDestructive,
+        borderColor: theme.palette.border.subtleDestructive,
+        iconColor: theme.palette.icon.negative,
+      }
+    case "success":
+      return {
+        backgroundColor: theme.palette.background.subtleSuccess,
+        borderColor: theme.palette.border.subtleSuccess,
+        iconColor: theme.palette.icon.positive,
+      }
+    case "info":
+      return {
+        backgroundColor: theme.palette.background.subtleBlue,
+        borderColor: theme.palette.border.blueSubtle,
+        iconColor: theme.palette.icon.brand,
+      }
+  }
+}
+
+const getAlertIcon = (severity: string) => {
+  switch (severity) {
+    case "warn":
+      return <IconAlertTriangleFilled />
+    case "error":
+      return <IconAlertTriangleFilled />
+    case "success":
+      return <IconCircleCheckFilled />
+    case "info":
+      return <IconInfoCircleFilled />
+  }
+}
+
+const getIconSize = (size: VentionAlertProps["size"]) => {
+  switch (size) {
+    case "small":
+      return 16
+    case "xx-large":
+      return 28
+    default:
+      return 24
+  }
+}
+
+const getFontSize = (size: VentionAlertProps["size"]) => {
+  switch (size) {
+    case "small":
+      return 12
+    case "medium":
+      return 14
+    case "large":
+      return 18
+    case "xx-large":
+      return 20
+  }
+}
+
+const getTypographyVariant = (size: VentionAlertProps["size"]): [TypographyOwnProps["variant"], TypographyOwnProps["variant"]] => {
+  switch (size) {
+    case "small":
+      return ["uiText12SemiBold", "uiText12Regular"]
+    case "xx-large":
+      return ["hmiText20SemiBold", "hmiText20Regular"]
+    default:
+      return ["uiText14SemiBold", "uiText14Regular"]
+  }
+}

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

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { IconCheckbox } from "@tabler/icons-react"
+import React from "react"
+
+import { VentionBadge } from "./vention-badge"
+
+const meta: Meta<typeof VentionBadge> = {
+  component: VentionBadge,
+  title: "Components/VentionBadge",
+}
+export default meta
+type Story = StoryObj<typeof VentionBadge>
+
+export const Default: Story = {
+  args: {
+    size: "medium",
+    variant: "filled",
+    color: "red",
+    text: "Badge",
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    size: "large",
+    variant: "subtle",
+    color: "green",
+    text: "Badge",
+    iconLeft: <IconCheckbox />,
+  },
+}
+
+export const Ellipsis: Story = {
+  args: {
+    size: "medium",
+    variant: "subtle",
+    color: "blue",
+    text: "This is a very long badge text that should be truncated",
+  },
+  render: args => (
+    <div style={{ width: "100px", border: "1px dotted red" }}>
+      <VentionBadge {...args} />
+    </div>
+  ),
+}
+
+export const TwoBadgesEllipsis: Story = {
+  args: {
+    size: "medium",
+    variant: "subtle",
+    color: "blue",
+    text: "This long badge truncated",
+  },
+  render: args => (
+    <div style={{ width: "300px", border: "1px dotted red", display: "flex", gap: "4px" }}>
+      <VentionBadge {...args} />
+      <VentionBadge {...args} />
+    </div>
+  ),
+}

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

@@ -0,0 +1,59 @@
+import "@testing-library/jest-dom"
+
+import { screen } from "@testing-library/react"
+
+import { renderWithTheme } from "../../testing/utils"
+import { VentionBadge, VentionBadgeColors, VentionBadgeVariants } from "./vention-badge"
+import { machineUiTheme } from "../../theme/machine-ui-theme"
+
+describe("VentionBadge", () => {
+  it("render the correct value", () => {
+    renderWithTheme(<VentionBadge color="red" size="medium" text={"dummyText"} variant="filled" />)
+    expect(screen.getByText("dummyText")).toBeInTheDocument()
+  })
+
+  it("render with small size", () => {
+    renderWithTheme(<VentionBadge color="blue" size="small" text={"dummyText"} variant="outlined" />)
+    const textElement = screen.getByText("dummyText")
+    expect(textElement).toHaveClass("MuiTypography-uiText12Medium")
+  })
+
+  it("render with medium or large size", () => {
+    renderWithTheme(<VentionBadge color="green" size="large" text={"dummyText"} variant="subtle" />)
+    const textElement = screen.getByText("dummyText")
+    expect(textElement).toHaveClass("MuiTypography-uiText14Medium")
+  })
+
+  it("renders with xx-large size", () => {
+    renderWithTheme(<VentionBadge color="yellow" size="xx-large" text={"dummyText"} variant="filled" />)
+    const textElement = screen.getByText("dummyText")
+    expect(textElement).toHaveClass("MuiTypography-paragraph18Medium")
+    expect(textElement.parentElement).toHaveStyle({ height: "40px", padding: machineUiTheme.spacing(1, 4) })
+  })
+
+  const combinations: Array<[VentionBadgeColors, VentionBadgeVariants]> = [
+    ["red", "filled"],
+    ["red", "subtle"],
+    ["red", "outlined"],
+    ["blue", "filled"],
+    ["blue", "subtle"],
+    ["blue", "outlined"],
+    ["green", "filled"],
+    ["green", "subtle"],
+    ["green", "outlined"],
+    ["yellow", "filled"],
+    ["yellow", "subtle"],
+    ["yellow", "outlined"],
+    ["slate", "filled"],
+    ["slate", "subtle"],
+    ["slate", "outlined"],
+  ]
+
+  combinations.forEach(([color, variant]) => {
+    it(`renders with ${color} color and ${variant} variant`, () => {
+      renderWithTheme(<VentionBadge color={color} size="medium" text={"dummyText"} variant={variant} />)
+      const counterElement = screen.getByText("dummyText")
+      expect(counterElement).toBeInTheDocument()
+    })
+  })
+})