@vention/machine-ui 3.27.0

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

@@ -0,0 +1,232 @@
+import { Box, Theme, Typography } from "@mui/material"
+import { IconCheck, IconAlertTriangle, IconInfoSmall } from "@tabler/icons-react"
+import { tss } from "tss-react/mui"
+
+import { VentionButton } from "../vention-button/vention-button"
+import { VentionModalBase } from "../vention-modal-base/vention-modal-base"
+import { VentionButtonProps } from "../vention-button/button-utils"
+import { Sizes, StrictExtract } from "../../theme/machine-ui-theme"
+import type { DataType } from "csstype"
+
+export interface VentionModalProps {
+  titleText: string
+  /**
+   * The content to display as the body.
+   * This can be a simple string or your own React Component.
+   */
+  body: string | React.ReactElement
+  type: "positive" | "info" | "warning" | "negative" | "none"
+  modalSize?: StrictExtract<Sizes, "small" | "medium" | "large" | "x-large" | "xx-large">
+  isTouchDevice?: boolean
+  isOpen: boolean
+  onClose: () => void
+  primaryButton?: {
+    text: string
+    onClick: () => void
+    variant?: VentionButtonProps["variant"]
+    loading?: VentionButtonProps["loading"]
+    disabled?: VentionButtonProps["disabled"]
+  }
+  secondaryButton?: {
+    text: string
+    onClick: () => void
+    variant?: VentionButtonProps["variant"]
+    loading?: VentionButtonProps["loading"]
+    disabled?: VentionButtonProps["disabled"]
+  }
+  backDropClickClosable?: boolean
+
+  /**
+   * How to align the text and the content.
+   * Defaults to "center".
+   */
+  textAlign?: "left" | "center"
+
+  /**
+   * The custom width will override the modals' default from the {@link modalSize}.
+   * If nothing is provided, {@link modalSize} will drive the width.
+   */
+  width?: `${number}px`
+}
+
+export const VentionModal = (props: VentionModalProps) => {
+  const { modalSize = "medium", isTouchDevice = false, type, backDropClickClosable = true, textAlign = "center" } = props
+  const { classes } = useStyles({ modalSize, isTouchDevice, type, textAlign })
+
+  const iconProps = isTouchDevice ? { stroke: 2, size: 32 } : { stroke: 1.5, size: 24 }
+
+  const handleClose = () => {
+    props.onClose()
+  }
+
+  const buttonSize = getButtonSize(modalSize, isTouchDevice)
+
+  return (
+    <VentionModalBase
+      onClose={handleClose}
+      isOpen={props.isOpen}
+      modalSize={props.modalSize}
+      isTouchDevice={isTouchDevice}
+      backDropClickClosable={backDropClickClosable}
+      width={props.width}
+    >
+      <Box className={classes.modalContent}>
+        {props.type !== "none" && (
+          <Box className={classes.statusGlow}>
+            <Box className={classes.statusCircle}>
+              {props.type === "positive" && <IconCheck {...iconProps} data-testid={ventionModalTestIds.positiveIcon} />}
+              {props.type === "info" && <IconInfoSmall {...iconProps} data-testid={ventionModalTestIds.infoIcon} />}
+              {props.type === "warning" && <IconAlertTriangle {...iconProps} data-testid={ventionModalTestIds.warningIcon} />}
+              {props.type === "negative" && <IconAlertTriangle {...iconProps} data-testid={ventionModalTestIds.negativeIcon} />}
+            </Box>
+          </Box>
+        )}
+        <Typography className={classes.titleText} variant={getTitleTypography(modalSize, isTouchDevice)}>
+          {props.titleText}
+        </Typography>
+        <Typography className={classes.bodyText} variant={getBodyTextTypography(modalSize, isTouchDevice)}>
+          {props.body}
+        </Typography>
+        <Box className={classes.modalActions}>
+          {props.secondaryButton && (
+            <VentionButton
+              size={buttonSize}
+              onClick={props.secondaryButton.onClick}
+              variant={props.secondaryButton.variant || "outline"}
+              className={classes.modalButton}
+              loading={props.secondaryButton.loading}
+              disabled={props.secondaryButton.disabled}
+            >
+              {props.secondaryButton.text}
+            </VentionButton>
+          )}
+          {props.primaryButton && (
+            <VentionButton
+              size={buttonSize}
+              onClick={props.primaryButton.onClick}
+              variant={props.primaryButton.variant || "filled"}
+              className={classes.modalButton}
+              loading={props.primaryButton.loading}
+              disabled={props.primaryButton.disabled}
+            >
+              {props.primaryButton.text}
+            </VentionButton>
+          )}
+        </Box>
+      </Box>
+    </VentionModalBase>
+  )
+}
+
+const useStyles = tss
+  .withParams<Pick<VentionModalProps, "type" | "modalSize" | "isTouchDevice" | "textAlign">>()
+  .create(({ type, modalSize, isTouchDevice, textAlign, theme }) => {
+    const colors = getColors(type, theme)
+
+    const status = isTouchDevice || modalSize === "xx-large" ? { glowSize: 72, containerSize: 48 } : { glowSize: 48, containerSize: 32 }
+
+    return {
+      modalContent: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: ALIGN_ITEMS[textAlign],
+      },
+      statusGlow: {
+        width: status.glowSize,
+        height: status.glowSize,
+        borderRadius: "50%",
+        backgroundColor: colors.statusGlowColor,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        marginBottom: modalSize === "small" ? theme.spacing(4) : theme.spacing(5),
+      },
+      statusCircle: {
+        width: status.containerSize,
+        height: status.containerSize,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: "50%",
+        backgroundColor: colors.statusContainerColor,
+        "& .tabler-icon": {
+          color: theme.palette.common.white,
+        },
+      },
+      modalActions: {
+        display: "flex",
+        width: "100%",
+        gap: isTouchDevice || modalSize === "xx-large" ? theme.spacing(5) : theme.spacing(4),
+      },
+      modalButton: {
+        flex: 1,
+      },
+      titleText: {
+        textAlign,
+        marginBottom: isTouchDevice || modalSize === "xx-large" ? theme.spacing(4) : theme.spacing(2),
+      },
+      bodyText: {
+        textAlign,
+        marginBottom: isTouchDevice || modalSize === "xx-large" ? theme.spacing(9) : theme.spacing(5),
+      },
+    }
+  })
+
+const ALIGN_ITEMS: Record<VentionModalProps["textAlign"], DataType.SelfPosition> = {
+  left: "flex-start",
+  center: "center",
+}
+
+const getColors = (type: VentionModalProps["type"], theme: Theme) => {
+  switch (type) {
+    case "positive":
+      return { statusContainerColor: theme.palette.background.success, statusGlowColor: theme.palette.background.subtleSuccess }
+    case "info":
+      return { statusContainerColor: theme.palette.background.blue, statusGlowColor: theme.palette.background.subtleBlue }
+    case "warning":
+      return { statusContainerColor: theme.palette.background.warning, statusGlowColor: theme.palette.background.subtleWarning }
+    case "negative":
+      return { statusContainerColor: theme.palette.background.destructive, statusGlowColor: theme.palette.background.subtleDestructive }
+    case "none":
+      return { statusContainerColor: "transparent", statusGlowColor: "transparent" }
+  }
+}
+
+const getButtonSize = (modalSize: VentionModalProps["modalSize"], isTouchDevice: boolean) => {
+  if (modalSize === "xx-large") {
+    return "xx-large"
+  } else if (isTouchDevice) {
+    return "x-large"
+  }
+
+  return "large"
+}
+
+const getTitleTypography = (modalSize: VentionModalProps["modalSize"], isTouchDevice: boolean) => {
+  if (modalSize === "xx-large") {
+    return "hmiText28SemiBold"
+  } else if (isTouchDevice) {
+    return "heading24SemiBold"
+  }
+
+  return "heading18SemiBold"
+}
+
+const getBodyTextTypography = (modalSize: VentionModalProps["modalSize"], isTouchDevice: boolean) => {
+  if (modalSize === "xx-large") {
+    return "hmiText22Regular"
+  } else if (isTouchDevice) {
+    return "paragraph18Regular"
+  } else if (modalSize === "small") {
+    return "uiText12Regular"
+  }
+
+  return "paragraph14Regular"
+}
+
+export const ventionModalTestIds = {
+  positiveIcon: "vention-modal-positive-icon",
+  infoIcon: "vention-modal-info-icon",
+  warningIcon: "vention-modal-warning-icon",
+  negativeIcon: "vention-modal-negative-icon",
+}

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

@@ -0,0 +1,104 @@
+import React from "react"
+import { renderWithTheme } from "../../testing/utils"
+import { screen, fireEvent } from "@testing-library/react"
+import { VentionModalBanner, VentionModalBannerProps } from "./vention-modal-banner"
+import { COLORS } from "../../theme/colors"
+
+describe("VentionBanner", () => {
+  const defaultProps: VentionModalBannerProps = {
+    title: "Default Title",
+    color: "warning",
+    description: "Example description",
+  }
+
+  it("renders with warning configuration", () => {
+    renderWithTheme(<VentionModalBanner {...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(<VentionModalBanner {...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(<VentionModalBanner {...defaultProps} icon={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(<VentionModalBanner {...defaultProps} endAdornment={endAdornment} />)
+    const endAdornmentElement = screen.getByTestId("end-adornment")
+    expect(endAdornmentElement).toBeInTheDocument()
+  })
+
+  it("opens the modal on click", () => {
+    renderWithTheme(<VentionModalBanner {...defaultProps} />)
+    const bannerRoot = screen.getByTestId("banner-root")
+    fireEvent.click(bannerRoot)
+    const modal = screen.getByTestId("banner-modal")
+    expect(modal).toBeVisible()
+  })
+
+  it("renders modal content with title and description", () => {
+    const description = "Detailed Description"
+    renderWithTheme(<VentionModalBanner {...defaultProps} description={description} />)
+    const bannerRoot = screen.getByTestId("banner-root")
+    fireEvent.click(bannerRoot)
+    const modal = screen.getByTestId("banner-modal")
+    expect(modal).toBeVisible()
+    expect(modal).toHaveTextContent(defaultProps.title)
+    expect(modal).toHaveTextContent(description)
+  })
+
+  it("applies the correct styles for warning color", () => {
+    renderWithTheme(<VentionModalBanner {...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(<VentionModalBanner {...defaultProps} color="negative" />)
+    const bannerRoot = screen.getByTestId("banner-root")
+    expect(bannerRoot).toHaveStyle(`background-color: ${COLORS.red[500]}`)
+  })
+
+  it("applies the correct styles for operational color", () => {
+    renderWithTheme(<VentionModalBanner {...defaultProps} color="operational" />)
+    const bannerRoot = screen.getByTestId("banner-root")
+    expect(bannerRoot).toHaveStyle(`background-color: ${COLORS.blue[600]}`)
+  })
+
+  it("applies the correct styles for positive color", () => {
+    renderWithTheme(<VentionModalBanner {...defaultProps} color="positive" />)
+    const bannerRoot = screen.getByTestId("banner-root")
+    expect(bannerRoot).toHaveStyle(`background-color: ${COLORS.green[500]}`)
+  })
+
+  it("handles accent and size arguments", () => {
+    renderWithTheme(<VentionModalBanner {...defaultProps} accent="strong" size="large" />)
+    const bannerRoot = screen.getByTestId("banner-root")
+    expect(bannerRoot).toHaveClass("MuiBox-root")
+  })
+
+  it("modal not visible when it is closed", () => {
+    renderWithTheme(<VentionModalBanner {...defaultProps} />)
+    const bannerRoot = screen.getByTestId("banner-root")
+
+    // Open the modal
+    fireEvent.click(bannerRoot)
+    const modal = screen.getByTestId("banner-modal")
+    expect(modal).toBeVisible()
+
+    // Manually trigger the modal's close event
+    fireEvent.keyDown(modal, { key: "Escape", code: "Escape" }) // Simulate backdrop behavior
+    expect(modal).not.toBeVisible()
+  })
+})

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

@@ -0,0 +1,120 @@
+import React, { useState } from "react"
+import { Box, Modal, Typography } from "@mui/material"
+import { VentionBanner } from "../vention-banner/vention-banner"
+import { useBannerColorStyles } from "../vention-banner/vention-banner"
+import { tss } from "tss-react/mui"
+import { Sizes, StrictExtract } from "../../theme/machine-ui-theme"
+
+export interface VentionModalBannerProps {
+  size?: StrictExtract<Sizes, "large">
+  accent?: "strong"
+  color: "warning" | "negative" | "positive" | "operational"
+  icon?: React.ReactNode
+  title: string
+  description: string
+  endAdornment?: React.ReactNode
+  maxWidth?: number
+}
+
+/**
+ * A customizable modal banner component with an interactive modal.
+ *
+ * The `VentionModalBanner` displays a banner (via `VentionBanner`) with a title,
+ * optional icon, description, and end adornment. Clicking the banner opens
+ * a modal displaying the same information.
+ */
+export const VentionModalBanner = ({
+  size = "large",
+  accent = "strong",
+  color,
+  icon,
+  title,
+  description,
+  endAdornment,
+  maxWidth = 560,
+}: VentionModalBannerProps) => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const { classes } = useStyles({ color, accent, hasIcon: !!icon, maxWidth })
+
+  const handleOpenModal = () => setIsModalOpen(true)
+  const handleCloseModal = () => setIsModalOpen(false)
+
+  return (
+    <>
+      {/* Banner */}
+      <VentionBanner
+        size={size}
+        accent={accent}
+        color={color}
+        startAdornment={icon}
+        title={title}
+        description={description}
+        endAdornment={endAdornment}
+        onClick={handleOpenModal}
+      />
+
+      {/* Modal */}
+      <Modal open={isModalOpen} onClose={handleCloseModal} className={classes.modal}>
+        <Box className={classes.modalBox} data-testid="banner-modal">
+          <Box className={classes.modalRowContainer}>
+            {icon && <Box className={classes.modalIconContainer}>{icon}</Box>}
+            <Box className={classes.modalTitleContainer}>
+              <Typography component="span" variant="heading16SemiBold" className={classes.modalTitle}>
+                {title}
+              </Typography>
+              {description && (
+                <Typography component="span" variant="paragraph14Regular" className={classes.modalDescription}>
+                  {description}
+                </Typography>
+              )}
+            </Box>
+          </Box>
+        </Box>
+      </Modal>
+    </>
+  )
+}
+
+const useStyles = tss
+  .withParams<{ color: VentionModalBannerProps["color"]; accent: VentionModalBannerProps["accent"]; hasIcon: boolean; maxWidth: number }>()
+  .create(({ theme, color, accent, hasIcon, maxWidth }) => {
+    const { backgroundColor, textColor } = useBannerColorStyles(color, theme)
+
+    return {
+      modal: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      },
+      modalBox: {
+        backgroundColor: backgroundColor,
+        padding: theme.spacing(4),
+        maxWidth: maxWidth,
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.spacing(2),
+      },
+      modalRowContainer: {
+        display: "flex",
+        alignItems: "center",
+        gap: theme.spacing(2),
+      },
+      modalIconContainer: {
+        display: "flex",
+        alignSelf: "flex-start",
+        justifyContent: "center",
+      },
+      modalTitleContainer: {
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.spacing(1),
+      },
+      modalTitle: {
+        color: textColor,
+      },
+      modalDescription: {
+        color: textColor,
+      },
+    }
+  })

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

@@ -0,0 +1,138 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { IconAlertTriangleFilled, IconCircleCheck, IconInfoCircleFilled } from "@tabler/icons-react"
+import { VentionModalBanner } from "./vention-modal-banner"
+import { VentionButton } from "../vention-button/vention-button"
+
+const meta: Meta<typeof VentionModalBanner> = {
+  title: "Components/VentionModalBanner",
+  component: VentionModalBanner,
+  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 of the banner text (fixed to 'strong')",
+    },
+    size: {
+      control: { type: "select" },
+      options: ["large"],
+      defaultValue: "large",
+      description: "Size of the banner",
+      table: {
+        type: { summary: `"large"` },
+        defaultValue: { summary: `"large"` },
+      },
+    },
+    icon: {
+      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" },
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof VentionModalBanner>
+
+/**
+ * Sample Icons
+ */
+const WarningIcon = <IconAlertTriangleFilled />
+const NegativeIcon = <IconAlertTriangleFilled color="white" />
+const PositiveIcon = <IconCircleCheck color="white" />
+const OperationalIcon = <IconInfoCircleFilled color="white" />
+
+/**
+ * Warning Banner
+ */
+export const Default: Story = {
+  args: {
+    size: "large",
+    accent: "strong",
+    color: "warning",
+    icon: WarningIcon,
+    title: "Warning Alert",
+    description: "This is a warning message to inform you about something important.",
+  },
+}
+
+/**
+ * Negative Banner
+ */
+export const NegativeBanner: Story = {
+  args: {
+    ...Default.args,
+    color: "negative",
+    icon: NegativeIcon,
+    title: "Negative Alert",
+    description: "This banner uses the 'negative' color scheme to indicate a critical issue.",
+  },
+}
+
+/**
+ * Positive Banner
+ */
+export const PositiveBanner: Story = {
+  args: {
+    ...Default.args,
+    color: "positive",
+    icon: PositiveIcon,
+    title: "Success!",
+    description: "Operation completed successfully. Everything is running smoothly.",
+  },
+}
+
+/**
+ * Operational Banner
+ */
+export const OperationalBanner: Story = {
+  args: {
+    ...Default.args,
+    color: "operational",
+    icon: OperationalIcon,
+    title: "Operational Alert",
+    description: "This banner uses the 'operational' color scheme for informational purposes.",
+  },
+}
+
+/**
+ * Banner with End Adornment
+ */
+export const WithEndAdornment: Story = {
+  args: {
+    ...Default.args,
+    title: "Banner with Action",
+    description: "This banner includes an end adornment with a button for user action.",
+    endAdornment: (
+      <VentionButton variant="shaded" size="medium">
+        Action
+      </VentionButton>
+    ),
+  },
+}

package/src/lib/components/vention-modal-base/vention-modal-base.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import React, { useState } from "react"
+
+import { VentionButton } from "../vention-button/vention-button"
+import { VentionModalBase, VentionModalBaseProps } from "./vention-modal-base"
+import { blue } from "@mui/material/colors"
+
+const StoryBookComponent = (props: VentionModalBaseProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <>
+      <VentionButton
+        labelText="Open Modal"
+        onClick={() => {
+          setIsOpen(true)
+        }}
+      />
+      <VentionModalBase {...props} isOpen={isOpen} onClose={() => setIsOpen(false)}>
+        <div
+          style={{
+            backgroundColor: blue[100],
+            height: "100px",
+            width: "100%",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          Modal Content
+        </div>
+      </VentionModalBase>
+    </>
+  )
+}
+
+const meta: Meta<typeof VentionModalBase> = {
+  component: VentionModalBase,
+  title: "Components/VentionModalBase",
+  render: StoryBookComponent,
+}
+
+export default meta
+type Story = StoryObj<typeof VentionModalBase>
+
+export const Small: Story = {
+  args: {
+    modalSize: "small",
+    isOpen: true,
+  },
+}
+
+export const Medium: Story = {
+  args: {
+    modalSize: "medium",
+    isOpen: true,
+  },
+}
+
+export const Large: Story = {
+  args: {
+    modalSize: "large",
+    isOpen: true,
+  },
+}
+
+export const XLarge: Story = {
+  args: {
+    modalSize: "x-large",
+    isOpen: true,
+  },
+}
+
+export const XLargeTouch: Story = {
+  args: {
+    modalSize: "x-large",
+    isOpen: true,
+    isTouchDevice: true,
+  },
+}
+
+export const Dynamic: Story = {
+  args: {
+    modalSize: "dynamic",
+    isOpen: true,
+  },
+}
+
+export const CustomWidth: Story = {
+  args: {
+    modalSize: "medium",
+    isOpen: true,
+    width: "1000px",
+  },
+}