@vention/machine-ui 3.27.0

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

@@ -0,0 +1,199 @@
+import { Box, Button, Grid, Stack, Typography } from "@mui/material"
+import { useTheme } from "@mui/material/styles"
+import { IconInfoCircle, IconX } from "@tabler/icons-react"
+import { ReactElement, cloneElement, useState } from "react"
+import { tss } from "tss-react/mui"
+
+import { applyDefaultProps } from "../../utilities"
+import { VentionButton } from "../vention-button/vention-button"
+import { VentionLink } from "../vention-link/vention-link"
+import { VentionButtonProps } from "../vention-button/button-utils"
+import { Sizes, StrictExtract } from "../../theme/machine-ui-theme"
+
+export interface VentionCalloutProps {
+  linkText?: string
+  primaryButtonText?: string
+  secondaryButtonText?: string
+  primaryButtonVariant?: VentionButtonProps["variant"]
+  onLinkClick?: () => void
+  onPrimaryButtonClick?: () => void
+  onSecondaryButtonClick?: () => void
+  size?: StrictExtract<Sizes, "small" | "medium">
+  descriptionText?: string
+  leftIcon?: ReactElement | undefined
+  title?: string
+  isCloseable?: boolean
+  variant?: "shaded" | "outline"
+  isSingleLine?: boolean
+}
+
+const defaultProps: Partial<VentionCalloutProps> = {
+  size: "medium",
+  descriptionText: "Description placeholder",
+  variant: "shaded",
+  leftIcon: <IconInfoCircle stroke={1} size={16} />,
+}
+
+export const VentionCallout = (inputProps: VentionCalloutProps) => {
+  const calloutProps = applyDefaultProps(inputProps, defaultProps)
+
+  const { classes } = useStyles({ isSingleLine: calloutProps.isSingleLine, variant: calloutProps.variant, size: calloutProps.size })
+  const theme = useTheme()
+  const [visible, setVisible] = useState(true)
+
+  return visible ? (
+    <Box
+      data-testid="calloutRootDiv"
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      width="fit-content"
+      maxWidth={560}
+      borderRadius="6px"
+      border={`1px solid var(--Border-Default-border-default, ${theme.palette.border.main})`}
+      className={classes.root}
+      padding={getCalloutPadding(calloutProps)}
+    >
+      <Grid container spacing={0} flexWrap="nowrap" lineHeight="0px">
+        {calloutProps.leftIcon ? (
+          <Grid
+            item
+            width={"fit-content"}
+            data-testid="leftIcon"
+            marginRight={calloutProps.size === "small" ? "8px" : "12px"}
+            alignSelf={calloutProps.isSingleLine ? "center" : "normal"}
+          >
+            {/* cloning is necessary to modify the size prop on this component as the existing component's props are inaccessible */}
+            {cloneElement(calloutProps.leftIcon as ReactElement, {
+              size: calloutProps.size === "small" ? 16 : 24,
+            })}
+          </Grid>
+        ) : null}
+        <Grid
+          item
+          width={"auto"}
+          marginRight={getMarginRightValueForContent(calloutProps)}
+          display="flex"
+          flexWrap="wrap"
+          flexDirection={calloutProps.isSingleLine ? "row" : "column"}
+          gap={getGapSpaceForContent(calloutProps.isSingleLine, calloutProps.size)}
+          alignItems={calloutProps.isSingleLine ? "center" : "normal"}
+        >
+          {calloutProps.title ? (
+            <Typography variant={calloutProps.size === "small" ? "uiText12SemiBold" : "uiText14SemiBold"} className={classes.title}>
+              {calloutProps.title}
+            </Typography>
+          ) : null}
+          <Typography
+            variant={calloutProps.size === "small" ? "uiText12Regular" : "uiText14Regular"}
+            className={classes.desc}
+            style={{ whiteSpace: "pre-wrap" }}
+          >
+            {calloutProps.descriptionText}
+          </Typography>
+          <Stack flexDirection={calloutProps.isSingleLine ? "row-reverse" : "row"} gap={"8px"}>
+            {calloutProps.primaryButtonText ? (
+              <VentionButton
+                onClick={calloutProps.onPrimaryButtonClick}
+                labelText={calloutProps.primaryButtonText}
+                size={calloutProps.size === "small" ? "small" : "medium"}
+                variant={calloutProps.primaryButtonVariant ? calloutProps.primaryButtonVariant : "filled-brand"}
+                data-testid="calloutPrimaryBtn"
+              />
+            ) : null}
+            {calloutProps.secondaryButtonText ? (
+              <VentionButton
+                variant="outline"
+                onClick={calloutProps.onSecondaryButtonClick}
+                labelText={calloutProps.secondaryButtonText}
+                size={calloutProps.size === "small" ? "small" : "medium"}
+                data-testid="calloutSecondaryBtn"
+              />
+            ) : null}
+            {calloutProps.linkText ? (
+              <VentionLink
+                onClick={calloutProps.onLinkClick}
+                labelText={calloutProps.linkText}
+                size={calloutProps.size === "small" ? "medium" : "large"}
+              />
+            ) : null}
+          </Stack>
+        </Grid>
+        {calloutProps.isCloseable ? (
+          <Grid item width={16} alignSelf={calloutProps.isSingleLine ? "center" : "normal"}>
+            <Button className={classes.closeButton} data-testid="closeButton" onClick={() => setVisible(false)}>
+              <IconX stroke={1} size={16} color={theme.palette.icon.primary} />
+            </Button>
+          </Grid>
+        ) : null}
+      </Grid>
+    </Box>
+  ) : null
+}
+
+function getCalloutPadding(calloutProps: VentionCalloutProps) {
+  if (calloutProps.isSingleLine) {
+    return calloutProps.size === "small" ? "4px 8px" : "8px 12px"
+  }
+
+  return calloutProps.size === "small" ? "12px 12px 16px 12px" : "20px 20px 24px 20px"
+}
+
+function getGapSpaceForContent(isSingleLine, size) {
+  if (isSingleLine) {
+    if (size === "small") {
+      return "8px"
+    }
+
+    return "12px"
+  }
+
+  return "0px"
+}
+
+function getMarginRightValueForContent(calloutProps: VentionCalloutProps) {
+  if (!calloutProps.isCloseable) {
+    return "0px"
+  } else if (calloutProps.isSingleLine) {
+    return calloutProps.size === "small" ? "8px" : "12px"
+  }
+
+  return "16px" //not on single line and isCloseable
+}
+
+function getBottomMarginForDescription(isSingleLine, size) {
+  if (isSingleLine) {
+    return "0px"
+  } else if (size === "small") {
+    return "12px"
+  }
+
+  return "16px"
+}
+
+const useStyles = tss
+  .withParams<Pick<VentionCalloutProps, "isSingleLine" | "variant" | "size">>()
+  .create(({ isSingleLine, variant, size, theme }) => {
+    const backgroundColor = variant === "shaded" ? theme.palette.background.surface2 : "transparent"
+
+    return {
+      root: {
+        backgroundColor: backgroundColor,
+      },
+      title: {
+        marginBottom: isSingleLine ? "0px" : "4px",
+      },
+      desc: {
+        marginBottom: getBottomMarginForDescription(isSingleLine, size),
+      },
+      closeButton: {
+        padding: 0,
+        minWidth: 0,
+        opacity: "0.6",
+        "&:hover": {
+          backgroundColor: "transparent",
+          opacity: "1",
+        },
+      },
+    }
+  })

package/src/lib/components/vention-checkbox/vention-checkbox-icon.tsx

@@ -0,0 +1,64 @@
+import { Box } from "@mui/material"
+import { tss } from "tss-react/mui"
+
+interface VentionCheckboxIconSize {
+  width: string
+  height: string
+  borderRadius: string
+}
+
+interface VentionCheckboxIconColors {
+  checkedColor: string
+  uncheckedColor: string
+}
+
+interface VentionCheckboxIconProps {
+  size: VentionCheckboxIconSize
+  checked: boolean
+  disabled: boolean
+  colors: VentionCheckboxIconColors
+}
+
+export const VentionCheckboxIcon = ({ size, checked, disabled, colors }: VentionCheckboxIconProps) => {
+  const { classes } = useStyles({
+    size,
+    checked,
+    disabled,
+    colors,
+  })
+
+  return (
+    <Box className={classes.root}>
+      {checked && (
+        <Box component="svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" className={classes.checkmark}>
+          <path d="M6 12l4 4 8-8" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+const useStyles = tss
+  .withParams<{
+    size: VentionCheckboxIconSize
+    checked: boolean
+    disabled: boolean
+    colors: VentionCheckboxIconColors
+  }>()
+  .create(({ size, checked, disabled, colors }) => ({
+    root: {
+      width: size.width,
+      height: size.height,
+      border: `1px solid ${checked ? colors.checkedColor : colors.uncheckedColor}`,
+      borderRadius: size.borderRadius,
+      backgroundColor: checked ? colors.checkedColor : "white",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      opacity: disabled ? 0.2 : 1,
+      transition: "all 0.2s ease",
+    },
+    checkmark: {
+      color: "white",
+    },
+  }))

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

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { VentionCheckbox } from "./vention-checkbox"
+
+const meta: Meta<typeof VentionCheckbox> = {
+  title: "Components/VentionCheckbox",
+  component: VentionCheckbox,
+  parameters: {
+    docs: {
+      description: {
+        component: "A customizable checkbox component with label and description support.",
+      },
+      extractArgTypes: false, // Disable automatic prop extraction
+    },
+  },
+  argTypes: {
+    // Show only custom props
+    labelText: {
+      control: "text",
+      description: "The main label text for the checkbox",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    helperText: {
+      control: "text",
+      description: "Smaller descriptive text that appears under the label",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    variant: {
+      control: "select",
+      options: ["outlined"],
+      description: "The visual style variant of the checkbox",
+      table: {
+        type: { summary: "outlined" },
+        defaultValue: { summary: "outlined" },
+      },
+    },
+    checkboxSize: {
+      control: "select",
+      options: ["small", "medium", "large"],
+      description: "The size of the checkbox",
+      table: {
+        type: { summary: "small | medium | large" },
+        defaultValue: { summary: "large" },
+      },
+    },
+    checkboxPosition: {
+      control: "select",
+      options: ["left", "right"],
+      description: "Position of the checkbox relative to the label",
+      table: {
+        type: { summary: "left | right" },
+        defaultValue: { summary: "left" },
+      },
+    },
+    textAlign: {
+      control: "select",
+      options: ["left", "center", "right"],
+      description: "Text alignment for label and helper text",
+      table: {
+        type: { summary: "left | center | right" },
+        defaultValue: { summary: "left" },
+      },
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the checkbox is disabled",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    className: {
+      control: "text",
+      description: "Additional CSS class names",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+  },
+}
+export default meta
+type Story = StoryObj<typeof VentionCheckbox>
+
+export const Default: Story = {
+  args: {
+    labelText: "Checkbox Text",
+    variant: "outlined",
+    checkboxSize: "large",
+    disabled: false,
+    helperText: "Helpful description of the option which may briefly highlight side effects or conditions of the option.",
+  },
+}
+
+export const TextAlignment: Story = {
+  args: {
+    labelText: "Center Aligned Text",
+    helperText: "This text is center aligned",
+    textAlign: "center",
+    variant: "outlined",
+    checkboxSize: "large",
+    disabled: false,
+  },
+}
+
+export const RightAligned: Story = {
+  args: {
+    labelText: "Right Aligned Text",
+    helperText: "This text is right aligned",
+    textAlign: "right",
+    variant: "outlined",
+    checkboxSize: "large",
+    disabled: false,
+  },
+}