@vention/machine-ui 3.27.0 → 3.29.1-test.0

package/src/lib/components/shared/styles/input-styles.ts

@@ -1,123 +0,0 @@
-import { Theme, TypographyOwnProps } from "@mui/material"
-import { AllInputStates } from "../types/input-types"
-import { Sizes } from "../../../theme/machine-ui-theme"
-
-export const getBorderColorFromState = (state: AllInputStates, theme: Theme) => {
-  switch (state) {
-    case "error":
-      return theme.palette.border.subtleDestructive
-    case "warning":
-      return theme.palette.border.subtleWarning
-    case "success":
-      return theme.palette.border.subtleSuccess
-    case "focused":
-      return theme.palette.border.blueSubtle
-    case "hover":
-    case "default":
-    case "disabled":
-    default:
-      return theme.palette.border.main
-  }
-}
-
-export const getBackgroundColorFromState = (state: AllInputStates, theme: Theme) => {
-  switch (state) {
-    case "error":
-      return theme.palette.background.subtleDestructive
-    case "warning":
-      return theme.palette.background.subtleWarning
-    case "success":
-      return theme.palette.background.subtleSuccess
-    case "disabled":
-      return theme.palette.background.inputDisabled
-    case "default":
-    case "focused":
-    case "hover":
-    default:
-      return theme.palette.background.inputOutlined
-  }
-}
-
-export const getInputHeight = (size: Sizes, theme: Theme) => {
-  switch (size) {
-    case "x-small":
-      return theme.spacing(4)
-    case "small":
-      return theme.spacing(5)
-    case "medium":
-      return theme.spacing(7)
-    case "large":
-      return theme.spacing(8)
-    case "x-large":
-      return theme.spacing(9)
-    case "xx-large":
-      return theme.spacing(11)
-  }
-}
-
-export const getInputPaddingStyles = (size: Sizes, theme: Theme) => {
-  switch (size) {
-    case "x-small":
-    case "small":
-      return {
-        paddingLeft: theme.spacing(2),
-        paddingRight: theme.spacing(2),
-      }
-    case "medium":
-      return {
-        paddingLeft: theme.spacing(3),
-        paddingRight: theme.spacing(3),
-      }
-    case "large":
-    case "x-large":
-    case "xx-large":
-      return {
-        paddingLeft: theme.spacing(4),
-        paddingRight: theme.spacing(4),
-      }
-  }
-}
-
-export const typographyNameFromSizeMap: Record<
-  "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large",
-  Record<"label" | "text" | "helperText", TypographyOwnProps["variant"]>
-> = {
-  "x-small": {
-    label: "uiText12SemiBold",
-    text: "uiText12Regular",
-    helperText: "uiText12Regular",
-  },
-  small: {
-    label: "uiText12SemiBold",
-    text: "uiText12Regular",
-    helperText: "uiText12Regular",
-  },
-  medium: {
-    label: "uiText14SemiBold",
-    text: "uiText14Regular",
-    helperText: "uiText12Regular",
-  },
-  large: {
-    label: "uiText14SemiBold",
-    text: "uiText14Regular",
-    helperText: "uiText12Regular",
-  },
-  "x-large": {
-    label: "heading18SemiBold",
-    text: "paragraph18Regular",
-    helperText: "uiText12Regular",
-  },
-  "xx-large": {
-    label: "hmiText20SemiBold",
-    text: "hmiText22Regular",
-    helperText: "paragraph18Regular",
-  },
-}
-
-export const getTypography = (size: Sizes, theme: Theme) => {
-  return {
-    label: theme.typography[typographyNameFromSizeMap[size].label],
-    text: theme.typography[typographyNameFromSizeMap[size].text],
-    helperText: theme.typography[typographyNameFromSizeMap[size].helperText],
-  }
-}

package/src/lib/components/shared/types/input-types.ts

@@ -1,9 +0,0 @@
-/**
- * All user configurable input states.
- */
-export type InputStates = "default" | "error" | "warning" | "success" | "disabled"
-
-/**
- * These are additional possible input states based on user interaction
- */
-export type AllInputStates = InputStates | "hover" | "focused"

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

@@ -1,57 +0,0 @@
-import { Stack } from "@mui/material"
-import { tss } from "tss-react/mui"
-
-import { VentionButton } from "../vention-button/vention-button"
-import { VentionLink } from "../vention-link/vention-link"
-import { getGapSpaceForContent, VentionAlertProps } from "./vention-alert-utils"
-
-export interface VentionAlertControlProps
-  extends Pick<
-    VentionAlertProps,
-    "size" | "primaryButtonText" | "onPrimaryButtonClick" | "secondaryButtonText" | "onSecondaryButtonClick" | "linkText" | "onLinkClick"
-  > {
-  display: boolean
-}
-
-export const VentionAlertControls = (alertControlProps: VentionAlertControlProps) => {
-  const { classes } = useStyles(alertControlProps)
-
-  return alertControlProps.display ? (
-    <Stack className={classes.alertControls}>
-      {alertControlProps.primaryButtonText ? (
-        <VentionButton
-          onClick={alertControlProps.onPrimaryButtonClick}
-          labelText={alertControlProps.primaryButtonText}
-          size={alertControlProps.size}
-          variant="shaded"
-          data-testid="alertPrimaryBtn"
-        />
-      ) : null}
-      {alertControlProps.secondaryButtonText ? (
-        <VentionButton
-          onClick={alertControlProps.onSecondaryButtonClick}
-          labelText={alertControlProps.secondaryButtonText}
-          size={alertControlProps.size}
-          variant="text-only"
-          data-testid="alertSecondaryBtn"
-        />
-      ) : null}
-      {alertControlProps.linkText ? (
-        <VentionLink
-          onClick={alertControlProps.onLinkClick}
-          labelText={alertControlProps.linkText}
-          size={alertControlProps.size === "small" ? "medium" : "large"}
-        />
-      ) : null}
-    </Stack>
-  ) : null
-}
-
-const useStyles = tss.withParams<Pick<VentionAlertProps, "isSingleLine" | "size">>().create(({ isSingleLine, size }) => {
-  return {
-    alertControls: {
-      flexDirection: isSingleLine ? "row-reverse" : "row",
-      gap: getGapSpaceForContent(isSingleLine, size),
-    },
-  }
-})

package/src/lib/components/vention-alert/vention-alert-utils.ts

@@ -1,27 +0,0 @@
-import { ReactElement } from "react"
-import { Sizes, StrictExtract } from "../../theme/machine-ui-theme"
-
-export interface VentionAlertProps {
-  severity: "info" | "warn" | "error" | "success"
-  linkText?: string
-  primaryButtonText?: string
-  secondaryButtonText?: string
-  onLinkClick?: () => void
-  onPrimaryButtonClick?: () => void
-  onSecondaryButtonClick?: () => void
-  onCloseButtonClick?: () => void
-  size?: StrictExtract<Sizes, "small" | "medium" | "large" | "xx-large">
-  descriptionText?: ReactElement | string
-  leftIcon?: ReactElement | undefined
-  rightIcon?: ReactElement | undefined
-  title?: ReactElement | string
-  isCloseable?: boolean
-  isSingleLine?: boolean
-  isFullWidth?: boolean
-}
-
-export function getGapSpaceForContent(isSingleLine: boolean, size: VentionAlertProps["size"]) {
-  if (!isSingleLine) return "0px"
-
-  return size === "small" ? "8px" : "12px"
-}

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

@@ -1,137 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { IconHelp, IconShieldFilled } from "@tabler/icons-react"
-import React from "react"
-
-import { VentionAlert } from "./vention-alert"
-
-const meta: Meta<typeof VentionAlert> = {
-  component: VentionAlert,
-  title: "Components/VentionAlert",
-  argTypes: {
-    onLinkClick: { action: "onClick executed!" },
-  },
-}
-export default meta
-type Story = StoryObj<typeof VentionAlert>
-
-export const Default: Story = {
-  args: {
-    size: "medium",
-    descriptionText: "Description placeholder",
-    title: "Alert",
-    severity: "info",
-  },
-}
-
-export const LongTextSingleLine: Story = {
-  args: {
-    size: "medium",
-    descriptionText:
-      "In a perfect world, content stays brief. Yet, when more words are essential, it unfolds like this. In a perfect world, content stays brief. Yet, when more words are essential, it unfolds like this. In a perfect world, content stays brief. Yet, when more words are essential, it unfolds like this",
-    title:
-      "This is a very long title that should wrap. This is a very long title that should wrap. This is a very long title that should wrap",
-    severity: "info",
-  },
-}
-
-export const WithPrimaryAndSecondaryAndLinkButtons: Story = {
-  args: {
-    size: "medium",
-    descriptionText: "In a perfect world, content stays brief. Yet, when more words are essential, it unfolds like this",
-    title: "Complete",
-    primaryButtonText: "Primary",
-    secondaryButtonText: "Secondary",
-    linkText: "Link Btn",
-    severity: "success",
-    rightIcon: <IconHelp />,
-  },
-}
-
-export const WithCloseButton: Story = {
-  args: {
-    size: "medium",
-    descriptionText: "Description placeholder",
-    title: "Warning",
-    primaryButtonText: "Primary",
-    secondaryButtonText: "Secondary",
-    isCloseable: true,
-    severity: "warn",
-  },
-}
-
-export const OnSingleLine: Story = {
-  decorators: [
-    Story => (
-      <div style={{ minWidth: "800px" }}>
-        <Story />
-      </div>
-    ),
-  ],
-  args: {
-    size: "medium",
-    descriptionText: "Description placeholder",
-    title: "Error",
-    primaryButtonText: "Primary",
-    secondaryButtonText: "Secondary",
-    linkText: "Link",
-    severity: "error",
-    isCloseable: true,
-    isSingleLine: true,
-    rightIcon: <IconHelp />,
-  },
-}
-
-export const LongTextOnSingleLine: Story = {
-  decorators: [
-    Story => (
-      <div style={{ width: "800px" }}>
-        <Story />
-      </div>
-    ),
-  ],
-  args: {
-    size: "medium",
-    descriptionText:
-      "In a perfect world, content stays brief. Yet, when more words are essential, it unfolds like this. In a perfect world, content stays brief. Yet, when more words are essential, it unfolds like this. In a perfect world, content stays brief. Yet, when more words are essential, it unfolds like this",
-    title:
-      "This is a very long title that should wrap. This is a very long title that should wrap. This is a very long title that should wrap",
-    severity: "info",
-    isSingleLine: true,
-    isCloseable: true,
-    isFullWidth: true,
-    rightIcon: <IconHelp />,
-  },
-}
-
-export const WithCustomWidth: Story = {
-  decorators: [
-    Story => (
-      <div style={{ minWidth: "480px" }}>
-        <Story />
-      </div>
-    ),
-  ],
-  args: {
-    size: "large",
-    descriptionText: "Description placeholder",
-    title: "Warning",
-    severity: "warn",
-    isSingleLine: true,
-    isCloseable: true,
-  },
-}
-
-export const WithCustomIcons: Story = {
-  args: {
-    size: "large",
-    descriptionText: "Description placeholder",
-    title: "Alert",
-    linkText: "Link",
-    isSingleLine: true,
-    primaryButtonText: "Primary",
-    secondaryButtonText: "Secondary",
-    severity: "error",
-    leftIcon: <IconShieldFilled />,
-    rightIcon: <IconHelp />,
-  },
-}

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

@@ -1,185 +0,0 @@
-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()
-  })
-})