@vention/machine-ui 3.27.0

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

@@ -0,0 +1,197 @@
+import { Theme, Typography, TypographyOwnProps } from "@mui/material"
+import { Sizes, StrictExtract } from "../../theme/machine-ui-theme"
+
+import { tss } from "tss-react/mui"
+
+type VentionBadgeSizes = StrictExtract<Sizes, "small" | "medium" | "large" | "xx-large">
+export type VentionBadgeVariants = "filled" | "subtle" | "outlined"
+export type VentionBadgeColors = "red" | "blue" | "green" | "yellow" | "slate"
+
+interface VentionBadgeProps {
+  color: VentionBadgeColors
+  size: VentionBadgeSizes
+  text: string
+  variant: VentionBadgeVariants
+  iconLeft?: React.ReactNode
+  className?: string
+}
+
+export const VentionBadge = (props: VentionBadgeProps) => {
+  const { classes, cx } = useStyles({ size: props.size, color: props.color, variant: props.variant })
+
+  return (
+    <div className={cx(classes.root, props.className)}>
+      {props.iconLeft}
+      <Typography
+        textAlign="center"
+        variant={getBadgeTypographyVariant(props.size)}
+        style={{
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+        }}
+      >
+        {props.text}
+      </Typography>
+    </div>
+  )
+}
+
+const useStyles = tss
+  .withParams<{ size: VentionBadgeSizes; color: VentionBadgeColors; variant: VentionBadgeVariants }>()
+  .create(({ size, color, variant, theme }) => {
+    const height = getBadgeHeight(size)
+    const padding = getBadgePadding(size, theme)
+    const { background, borderColor, textColor } = getVentionBadgeColors(color, variant, theme)
+
+    return {
+      root: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: theme.spacing(1),
+        height,
+        padding,
+        background,
+        color: textColor,
+        border: borderColor && `0.5px solid ${borderColor}`,
+        borderRadius: size === "large" ? 6 : 4,
+        maxWidth: "fit-content",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+      },
+    }
+  })
+
+const getBadgeTypographyVariant = (size: VentionBadgeSizes): TypographyOwnProps["variant"] => {
+  switch (size) {
+    case "small":
+      return "uiText12Medium"
+    case "xx-large":
+      return "paragraph18Medium"
+    default:
+      return "uiText14Medium"
+  }
+}
+const getBadgeHeight = (size: VentionBadgeSizes) => {
+  switch (size) {
+    case "small":
+      return 16
+    case "medium":
+      return 24
+    case "large":
+      return 32
+    case "xx-large":
+      return 40
+  }
+}
+
+const getBadgePadding = (size: VentionBadgeSizes, theme: Theme) => {
+  switch (size) {
+    case "small":
+      return theme.spacing(0, 1)
+    case "medium":
+      return theme.spacing(0, 2)
+    case "large":
+      return theme.spacing(1, 3)
+    case "xx-large":
+      return theme.spacing(1, 4)
+  }
+}
+
+type BadgeStyle = {
+  background: string | null
+  borderColor: string | null
+  textColor: string
+}
+
+const badgeStyleMap: Record<VentionBadgeColors, Record<VentionBadgeVariants, (theme: Theme) => BadgeStyle>> = {
+  red: {
+    filled: (theme: Theme) => ({
+      background: theme.palette.background.destructive,
+      borderColor: "none",
+      textColor: theme.palette.common.white,
+    }),
+    subtle: (theme: Theme) => ({
+      background: theme.palette.background.subtleDestructive,
+      borderColor: theme.palette.border.subtleDestructive,
+      textColor: theme.palette.text.negative,
+    }),
+    outlined: (theme: Theme) => ({
+      background: null,
+      borderColor: theme.palette.border.subtleDestructive,
+      textColor: theme.palette.text.negative,
+    }),
+  },
+  blue: {
+    filled: (theme: Theme) => ({
+      background: theme.palette.background.blue,
+      borderColor: null,
+      textColor: theme.palette.common.white,
+    }),
+    subtle: (theme: Theme) => ({
+      background: theme.palette.background.subtleBlue,
+      borderColor: theme.palette.border.blueSubtle,
+      textColor: theme.palette.text.brand,
+    }),
+    outlined: (theme: Theme) => ({
+      background: null,
+      borderColor: theme.palette.border.blueSubtle,
+      textColor: theme.palette.text.brand,
+    }),
+  },
+  green: {
+    filled: (theme: Theme) => ({
+      background: theme.palette.background.success,
+      borderColor: null,
+      textColor: theme.palette.common.white,
+    }),
+    subtle: (theme: Theme) => ({
+      background: theme.palette.background.subtleSuccess,
+      borderColor: theme.palette.border.subtleSuccess,
+      textColor: theme.palette.text.positive,
+    }),
+    outlined: (theme: Theme) => ({
+      background: null,
+      borderColor: theme.palette.border.subtleSuccess,
+      textColor: theme.palette.text.positive,
+    }),
+  },
+  yellow: {
+    filled: (theme: Theme) => ({
+      background: theme.palette.background.warning,
+      borderColor: null,
+      textColor: theme.palette.common.black,
+    }),
+    subtle: (theme: Theme) => ({
+      background: theme.palette.background.subtleWarning,
+      borderColor: theme.palette.border.subtleWarning,
+      textColor: theme.palette.text.warning,
+    }),
+    outlined: (theme: Theme) => ({
+      background: null,
+      borderColor: theme.palette.border.subtleWarning,
+      textColor: theme.palette.text.warning,
+    }),
+  },
+  slate: {
+    filled: (theme: Theme) => ({
+      background: theme.palette.background.slate,
+      borderColor: null,
+      textColor: theme.palette.common.white,
+    }),
+    subtle: (theme: Theme) => ({
+      background: theme.palette.background.subtleSlate,
+      borderColor: theme.palette.border.subtleSlate,
+      textColor: theme.palette.text.primary,
+    }),
+    outlined: (theme: Theme) => ({
+      background: null,
+      borderColor: theme.palette.border.subtleSlate,
+      textColor: theme.palette.text.primary,
+    }),
+  },
+}
+
+export const getVentionBadgeColors = (color: VentionBadgeColors, variant: VentionBadgeVariants, theme: Theme): BadgeStyle => {
+  return badgeStyleMap[color][variant](theme)
+}

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

@@ -0,0 +1,124 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { IconAlertTriangleFilled, IconCircleCheck, IconInfoCircleFilled } from "@tabler/icons-react"
+import { VentionBanner } from "./vention-banner"
+import { VentionButton } from "../vention-button/vention-button"
+
+const meta: Meta<typeof VentionBanner> = {
+  title: "Components/VentionBanner",
+  component: VentionBanner,
+  argTypes: {
+    color: {
+      control: { type: "select" },
+      options: ["warning", "negative", "positive", "operational"],
+      description: "Color theme of the banner",
+      table: {
+        type: { summary: `"warning" | "negative" | "positive" | "operational"` },
+        defaultValue: { summary: `"warning"` },
+      },
+    },
+    accent: {
+      control: { disable: true },
+      description: "Accent level (fixed to 'strong')",
+    },
+    size: {
+      control: { type: "select" },
+      options: ["large"],
+      defaultValue: "large",
+      description: "Size of the banner",
+      table: {
+        type: { summary: `"large"` },
+        defaultValue: { summary: `"large"` },
+      },
+    },
+    startAdornment: {
+      description: "Custom icon to display in the banner",
+    },
+    title: {
+      control: { type: "text" },
+      description: "Title text of the banner",
+      table: {
+        type: { summary: "string" },
+      },
+    },
+    description: {
+      control: { type: "text" },
+      description: "Description text of the banner",
+      table: {
+        type: { summary: "string" },
+      },
+    },
+    endAdornment: {
+      description: "Optional ReactNode displayed at the end of the banner",
+      table: {
+        type: { summary: "ReactNode" },
+      },
+    },
+    onClick: {
+      action: "clicked",
+      description: "Click handler for the banner",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof VentionBanner>
+
+const WarningIcon = <IconAlertTriangleFilled />
+const NegativeIcon = <IconAlertTriangleFilled color="white" />
+const PositiveIcon = <IconCircleCheck color="white" />
+const OperationalIcon = <IconInfoCircleFilled color="white" />
+
+export const WarningBanner: Story = {
+  args: {
+    color: "warning",
+    size: "large",
+    accent: "strong",
+    startAdornment: WarningIcon,
+    title: "Warning Alert",
+    description: "This is a warning message to inform you about something important.",
+  },
+}
+
+export const NegativeBanner: Story = {
+  args: {
+    ...WarningBanner.args,
+    color: "negative",
+    startAdornment: NegativeIcon,
+    title: "Negative Alert",
+    description: "Critical issue detected.",
+  },
+}
+
+export const PositiveBanner: Story = {
+  args: {
+    ...WarningBanner.args,
+    color: "positive",
+    startAdornment: PositiveIcon,
+    title: "Success!",
+    description: "Everything is running smoothly.",
+  },
+}
+
+export const OperationalBanner: Story = {
+  args: {
+    ...WarningBanner.args,
+    color: "operational",
+    startAdornment: OperationalIcon,
+    title: "Operational Alert",
+    description: "For informational purposes.",
+  },
+}
+
+export const WithEndAdornment: Story = {
+  args: {
+    ...WarningBanner.args,
+    title: "Banner with Action",
+    description: "This banner includes an end adornment with a button.",
+    endAdornment: (
+      <VentionButton variant="shaded" size="medium">
+        Action
+      </VentionButton>
+    ),
+  },
+}

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

@@ -0,0 +1,72 @@
+import React from "react"
+import { renderWithTheme } from "../../testing/utils"
+import { screen, fireEvent } from "@testing-library/react"
+import { VentionBanner, VentionBannerProps } from "./vention-banner"
+import { COLORS } from "../../theme/colors"
+
+describe("VentionBanner", () => {
+  const defaultProps: VentionBannerProps = {
+    title: "Default Title",
+    color: "warning",
+  }
+
+  it("renders with warning configuration", () => {
+    renderWithTheme(<VentionBanner {...defaultProps} />)
+    const bannerRoot = screen.getByTestId("banner-root")
+    expect(bannerRoot).toBeInTheDocument()
+    expect(bannerRoot).toHaveTextContent(defaultProps.title)
+  })
+
+  it("renders with custom description", () => {
+    const customDescription = "Custom Description"
+    renderWithTheme(<VentionBanner {...defaultProps} description={customDescription} />)
+    const bannerRoot = screen.getByTestId("banner-root")
+    expect(bannerRoot).toHaveTextContent(customDescription)
+  })
+
+  it("renders icon that is passed", () => {
+    const customIcon = <span data-testid="custom-icon">🔔</span>
+    renderWithTheme(<VentionBanner {...defaultProps} startAdornment={customIcon} />)
+    const iconElement = screen.getByTestId("custom-icon")
+    expect(iconElement).toBeInTheDocument()
+  })
+
+  it("renders with endAdornment", () => {
+    const endAdornment = <button data-testid="end-adornment">Click Me</button>
+    renderWithTheme(<VentionBanner {...defaultProps} endAdornment={endAdornment} />)
+    const endAdornmentElement = screen.getByTestId("end-adornment")
+    expect(endAdornmentElement).toBeInTheDocument()
+  })
+
+  it("applies the correct styles for warning color", () => {
+    renderWithTheme(<VentionBanner {...defaultProps} color="warning" />)
+    const bannerRoot = screen.getByTestId("banner-root")
+    expect(bannerRoot).toHaveStyle(`background-color: ${COLORS.amber[400]}`)
+  })
+
+  it("applies the correct styles for negative color", () => {
+    renderWithTheme(<VentionBanner {...defaultProps} color="negative" />)
+    const bannerRoot = screen.getByTestId("banner-root")
+    expect(bannerRoot).toHaveStyle(`background-color: ${COLORS.red[500]}`)
+  })
+
+  it("applies the correct styles for positive color", () => {
+    renderWithTheme(<VentionBanner {...defaultProps} color="positive" />)
+    const bannerRoot = screen.getByTestId("banner-root")
+    expect(bannerRoot).toHaveStyle(`background-color: ${COLORS.green[500]}`)
+  })
+
+  it("applies the correct styles for operational color", () => {
+    renderWithTheme(<VentionBanner {...defaultProps} color="operational" />)
+    const bannerRoot = screen.getByTestId("banner-root")
+    expect(bannerRoot).toHaveStyle(`background-color: ${COLORS.blue[600]}`)
+  })
+
+  it("triggers onClick when the banner is clicked", () => {
+    const mockOnClick = jest.fn()
+    renderWithTheme(<VentionBanner {...defaultProps} onClick={mockOnClick} />)
+    const bannerRoot = screen.getByTestId("banner-root")
+    fireEvent.click(bannerRoot)
+    expect(mockOnClick).toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,123 @@
+import React from "react"
+import { Box, Typography } from "@mui/material"
+import { tss } from "tss-react/mui"
+import { COLORS } from "../../theme/colors"
+import { Sizes, StrictExtract } from "../../theme/machine-ui-theme"
+
+export interface VentionBannerProps {
+  size?: StrictExtract<Sizes, "large">
+  accent?: "strong"
+  color: "warning" | "negative" | "positive" | "operational"
+  startAdornment?: React.ReactNode
+  title: string
+  description?: string
+  endAdornment?: React.ReactNode
+  onClick?: () => void
+}
+
+export const VentionBanner = ({
+  size = "large",
+  accent = "strong",
+  color,
+  startAdornment,
+  title,
+  description,
+  endAdornment,
+  onClick,
+}: VentionBannerProps) => {
+  const { classes } = useStyles({ color, accent, hasIcon: !!startAdornment })
+
+  return (
+    <Box className={classes.banner} onClick={onClick} role="alert" tabIndex={0} data-testid="banner-root">
+      {startAdornment && <Box className={classes.bannerIconContainer}>{startAdornment}</Box>}
+
+      <Typography component="span" className={classes.bannerTitle} title={title} variant="heading16SemiBold">
+        {title}
+      </Typography>
+
+      {description && (
+        <Typography component="span" className={classes.bannerDescription} title={description} variant="paragraph14Regular">
+          {description}
+        </Typography>
+      )}
+
+      {endAdornment && <Box className={classes.endAdornment}>{endAdornment}</Box>}
+    </Box>
+  )
+}
+
+/**
+ * Compute banner background and text color based on the `color` prop
+ */
+export function useBannerColorStyles(color: "warning" | "negative" | "positive" | "operational", theme) {
+  let backgroundColor: string
+  let textColor: string
+
+  switch (color) {
+    case "negative":
+      backgroundColor = COLORS.red[500]
+      textColor = theme.palette.common.white
+      break
+    case "positive":
+      backgroundColor = COLORS.green[500]
+      textColor = theme.palette.common.white
+      break
+    case "operational":
+      backgroundColor = COLORS.blue[600]
+      textColor = theme.palette.common.white
+      break
+    case "warning":
+    default:
+      backgroundColor = COLORS.amber[400]
+      textColor = theme.palette.text.primary
+      break
+  }
+
+  return { backgroundColor, textColor }
+}
+
+const useStyles = tss
+  .withParams<{
+    color: VentionBannerProps["color"]
+    accent: VentionBannerProps["accent"]
+    hasIcon: boolean
+  }>()
+  .create(({ theme, color, accent, hasIcon }) => {
+    const { backgroundColor, textColor } = useBannerColorStyles(color, theme)
+
+    return {
+      banner: {
+        display: "flex",
+        alignItems: "center",
+        flex: 1,
+        backgroundColor,
+        cursor: "pointer",
+        boxShadow: theme.shadows[2],
+        padding: theme.spacing(3),
+        gap: theme.spacing(2),
+        borderRadius: theme.shape.borderRadius,
+        outline: "none",
+      },
+      bannerIconContainer: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      },
+      bannerTitle: {
+        color: textColor,
+        whiteSpace: "nowrap",
+      },
+      bannerDescription: {
+        color: textColor,
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+      },
+      endAdornment: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        marginLeft: "auto",
+      },
+    }
+  })

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

@@ -0,0 +1,143 @@
+import { ButtonProps, Theme } from "@mui/material"
+import { Sizes, StrictExtract } from "../../theme/machine-ui-theme"
+
+import { ReactNode } from "react"
+
+interface StylingProperties {
+  backgroundColor: string
+  backgroundColorOnHover: string
+  backgroundColorOnPress: string
+  backgroundColorOnDisable: string
+  textColor: string
+  textColorOnDisable: string
+  border: string
+  borderRadius: string
+}
+
+export interface VentionButtonProps extends Omit<ButtonProps, "size" | "variant"> {
+  size?: StrictExtract<Sizes, "small" | "medium" | "large" | "x-large" | "xx-large">
+  labelText?: string
+  children?: ReactNode
+  variant?: "filled-brand" | "filled" | "outline" | "text-only" | "shaded" | "destructive"
+  disabled?: boolean
+  iconLeft?: ReactNode
+  iconRight?: ReactNode
+  className?: string
+  type?: "button" | "submit"
+  fullWidth?: boolean
+  loading?: boolean
+}
+
+export function getButtonStylingPropertiesGivenProps(
+  variant: VentionButtonProps["variant"] | "simple",
+  size: VentionButtonProps["size"],
+  theme: Theme
+): StylingProperties {
+  const { buttonText, button, border } = theme.palette
+  const borderRadius = getBorderRadius(size)
+
+  switch (variant) {
+    case "simple": {
+      return {
+        backgroundColor: "transparent",
+        backgroundColorOnHover: button.shadedHover,
+        backgroundColorOnPress: button.shadedPressed,
+        backgroundColorOnDisable: "transparent",
+        textColor: buttonText.primary,
+        textColorOnDisable: buttonText.primaryDisabled,
+        border: "none",
+        borderRadius,
+      }
+    }
+    case "filled-brand":
+      return {
+        backgroundColor: button.primary,
+        backgroundColorOnHover: button.primaryHover,
+        backgroundColorOnPress: button.primaryPressed,
+        backgroundColorOnDisable: button.primaryDisabled,
+        textColor: buttonText.primaryOnColor,
+        textColorOnDisable: buttonText.primaryOnColor,
+        border: "none",
+        borderRadius,
+      }
+    case "shaded":
+      return {
+        backgroundColor: button.shaded,
+        backgroundColorOnHover: button.shadedHover,
+        backgroundColorOnPress: button.shadedPressed,
+        backgroundColorOnDisable: button.shaded,
+        textColor: buttonText.primary,
+        textColorOnDisable: buttonText.primary,
+        border: "none",
+        borderRadius,
+      }
+    case "filled":
+      return {
+        backgroundColor: button.filled,
+        backgroundColorOnHover: button.filledHover,
+        backgroundColorOnPress: button.filledPressed,
+        backgroundColorOnDisable: button.filledDisabled,
+        textColor: buttonText.primaryInverse,
+        textColorOnDisable: buttonText.primaryInverse,
+        border: "none",
+        borderRadius,
+      }
+    case "outline":
+      return {
+        backgroundColor: theme.palette.common.white,
+        backgroundColorOnHover: button.secondaryHover,
+        backgroundColorOnPress: button.secondaryPressed,
+        backgroundColorOnDisable: theme.palette.common.white,
+        textColor: buttonText.primary,
+        textColorOnDisable: buttonText.primaryDisabled,
+        border: `${size === "xx-large" ? 2 : 1}px solid ${border.main}`,
+        borderRadius,
+      }
+    case "text-only":
+      return {
+        backgroundColor: "transparent",
+        backgroundColorOnHover: button.secondaryHover,
+        backgroundColorOnPress: button.secondaryPressed,
+        backgroundColorOnDisable: "transparent",
+        textColor: buttonText.primary,
+        textColorOnDisable: buttonText.primaryDisabled,
+        border: "none",
+        borderRadius,
+      }
+    case "destructive":
+      return {
+        backgroundColor: button.destructive,
+        backgroundColorOnHover: button.destructiveHover,
+        backgroundColorOnPress: button.destructivePressed,
+        backgroundColorOnDisable: button.destructiveDisabled,
+        textColor: buttonText.primaryOnColor,
+        textColorOnDisable: buttonText.primaryOnColor,
+        border: "none",
+        borderRadius,
+      }
+  }
+}
+
+export function getButtonHeight(size: VentionButtonProps["size"], theme: Theme): string {
+  switch (size) {
+    case "small":
+      return theme.spacing(5) // 24px
+    case "medium":
+      return theme.spacing(7) // 32px
+    case "large":
+      return theme.spacing(8) // 40px
+    case "x-large":
+      return theme.spacing(10) // 56px
+    case "xx-large":
+      return theme.spacing(12) // 80px
+  }
+}
+
+function getBorderRadius(size: VentionButtonProps["size"]): string {
+  switch (size) {
+    case "small":
+      return "2px"
+    default:
+      return "4px"
+  }
+}