@vention/machine-ui 3.27.0

package/src/lib/components/vention-button/vention-icon-button/vention-icon-button.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { IconPlus } from "@tabler/icons-react"
+import React from "react"
+
+import { VentionIconButton } from "./vention-icon-button"
+
+const meta: Meta<typeof VentionIconButton> = {
+  component: VentionIconButton,
+  title: "Components/VentionIconButton",
+  argTypes: {
+    onClick: { action: "onClick executed!" },
+  },
+}
+export default meta
+type Story = StoryObj<typeof VentionIconButton>
+
+export const Primary: Story = {
+  args: {
+    variant: "filled-brand",
+    size: "medium",
+    children: <IconPlus size={24} />,
+  },
+}
+
+export const Shaded: Story = {
+  args: {
+    variant: "shaded",
+    size: "medium",
+    children: <IconPlus size={24} />,
+  },
+}
+
+export const Filled: Story = {
+  args: {
+    variant: "filled",
+    size: "medium",
+    children: <IconPlus size={24} />,
+  },
+}
+
+export const OutlinedAndSmall: Story = {
+  args: {
+    variant: "outline",
+    size: "small",
+    children: <IconPlus size={24} />,
+  },
+}
+
+export const DestructiveAndLarge: Story = {
+  args: {
+    children: <IconPlus size={24} />,
+    variant: "destructive",
+    size: "large",
+  },
+}

package/src/lib/components/vention-button/vention-icon-button/vention-icon-button.test.tsx

@@ -0,0 +1,227 @@
+import "@testing-library/jest-dom"
+import { fireEvent, screen } from "@testing-library/react"
+import { renderWithTheme } from "../../../testing/utils"
+import { VentionIconButton } from "./vention-icon-button"
+import { IconRefresh } from "@tabler/icons-react"
+import { useRef } from "react"
+
+const handleClickMock = jest.fn()
+describe("VentionIconButton", () => {
+  it.each([
+    ["small", "24px"],
+    ["medium", "32px"],
+    ["large", "40px"],
+    ["x-large", "56px"],
+    ["xx-large", "80px"],
+  ] as const)("should render a button of size %s with height and width %s", (size, expected) => {
+    renderWithTheme(<VentionIconButton size={size} variant="filled-brand" onClick={handleClickMock} />)
+    const button = screen.getByRole("button")
+    expect(button).toHaveStyle(`height: ${expected}`)
+    expect(button).toHaveStyle(`width: ${expected}`)
+  })
+
+  it("should call the onClick function when the button is clicked with minimal props", () => {
+    renderWithTheme(<VentionIconButton size="small" variant="shaded" onClick={handleClickMock} />)
+    const button = screen.getByRole("button")
+    fireEvent.click(button)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+  it("should call the onClick function when the button is clicked with filled variant", () => {
+    renderWithTheme(<VentionIconButton variant="filled" onClick={handleClickMock} />)
+    const button = screen.getByRole("button")
+    fireEvent.click(button)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+  it("should call the onClick function when the button is clicked with outline variant", () => {
+    renderWithTheme(<VentionIconButton variant="outline" onClick={handleClickMock} />)
+    const button = screen.getByRole("button")
+    fireEvent.click(button)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+  it("should call the onClick function when the button is clicked with filled variant with medium size", () => {
+    renderWithTheme(<VentionIconButton size="medium" variant="filled" onClick={handleClickMock} />)
+    const button = screen.getByRole("button")
+    fireEvent.click(button)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+  it("should call the onClick function when the button is clicked with shaded variant", () => {
+    renderWithTheme(<VentionIconButton variant="shaded" onClick={handleClickMock} />)
+    const button = screen.getByRole("button")
+    fireEvent.click(button)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+  it("should call the onClick function when the button is clicked with destructive variant", () => {
+    renderWithTheme(<VentionIconButton variant="destructive" onClick={handleClickMock} />)
+    const button = screen.getByRole("button")
+    fireEvent.click(button)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+  it("should call the onClick function when the button is clicked with shaded variant with large size", () => {
+    renderWithTheme(<VentionIconButton size="large" variant="shaded" onClick={handleClickMock} />)
+    const button = screen.getByRole("button")
+    fireEvent.click(button)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+  it("should call the onClick function when the button is clicked with filled-brand variant", () => {
+    renderWithTheme(<VentionIconButton variant="filled-brand" onClick={handleClickMock} />)
+    const button = screen.getByRole("button")
+    fireEvent.click(button)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+  it("should call the onClick function when the button is clicked with filled-brand variant with large size", () => {
+    renderWithTheme(<VentionIconButton size="large" variant="filled-brand" onClick={handleClickMock} />)
+    const button = screen.getByRole("button")
+    fireEvent.click(button)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+  it("should call the onClick function when the button is clicked with filled-brand variant with x-large size", () => {
+    renderWithTheme(<VentionIconButton size="x-large" variant="filled-brand" onClick={handleClickMock} />)
+    const button = screen.getByRole("button")
+    fireEvent.click(button)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+  it("should render the icon passed as children", () => {
+    renderWithTheme(
+      <VentionIconButton size="x-large" variant="filled-brand" onClick={handleClickMock}>
+        <IconRefresh size={24} />
+      </VentionIconButton>
+    )
+    const icon = document.querySelector(".tabler-icon-refresh")
+    expect(icon).toBeInTheDocument()
+  })
+  it("should disable the button when disabled is true", () => {
+    renderWithTheme(<VentionIconButton disabled onClick={handleClickMock} />)
+    const button = screen.getByRole("button")
+    expect(button).toBeDisabled()
+  })
+
+  describe("forwardRef functionality", () => {
+    it("should forward ref to the underlying button element", () => {
+      const TestComponent = () => {
+        const buttonRef = useRef<HTMLButtonElement>(null)
+
+        const handleFocus = () => {
+          buttonRef.current?.focus()
+        }
+
+        return (
+          <div>
+            <VentionIconButton ref={buttonRef} onClick={handleClickMock}>
+              <IconRefresh size={24} />
+            </VentionIconButton>
+            <button onClick={handleFocus}>Focus Icon Button</button>
+          </div>
+        )
+      }
+
+      renderWithTheme(<TestComponent />)
+
+      const iconButton = screen.getByRole("button", { name: "" })
+      const focusButton = screen.getByRole("button", { name: "Focus Icon Button" })
+
+      expect(iconButton).not.toHaveFocus()
+
+      fireEvent.click(focusButton)
+
+      expect(iconButton).toHaveFocus()
+    })
+
+    it("should allow ref to access button properties and methods", () => {
+      let buttonRef: React.RefObject<HTMLButtonElement>
+
+      const TestComponent = () => {
+        buttonRef = useRef<HTMLButtonElement>(null)
+
+        const handleClick = () => {
+          buttonRef.current?.blur()
+        }
+
+        return (
+          <VentionIconButton ref={buttonRef} onClick={handleClick}>
+            <IconRefresh size={24} />
+          </VentionIconButton>
+        )
+      }
+
+      renderWithTheme(<TestComponent />)
+
+      const iconButton = screen.getByRole("button")
+
+      expect(buttonRef.current).toBeInstanceOf(HTMLButtonElement)
+
+      fireEvent.click(iconButton)
+    })
+
+    it("should work with ref callback pattern", () => {
+      let buttonElement: HTMLButtonElement | null = null
+
+      const refCallback = (element: HTMLButtonElement | null) => {
+        buttonElement = element
+      }
+
+      renderWithTheme(
+        <VentionIconButton ref={refCallback} onClick={handleClickMock}>
+          <IconRefresh size={24} />
+        </VentionIconButton>
+      )
+
+      expect(buttonElement).toBeInstanceOf(HTMLButtonElement)
+    })
+
+    it("should maintain ref functionality across different variants and sizes", () => {
+      const TestComponent = () => {
+        const buttonRef = useRef<HTMLButtonElement>(null)
+
+        const handleFocus = () => {
+          buttonRef.current?.focus()
+        }
+
+        return (
+          <div>
+            <VentionIconButton ref={buttonRef} size="large" variant="outline" onClick={handleClickMock}>
+              <IconRefresh size={24} />
+            </VentionIconButton>
+            <button onClick={handleFocus}>Focus Icon Button</button>
+          </div>
+        )
+      }
+
+      renderWithTheme(<TestComponent />)
+
+      const iconButton = screen.getByRole("button", { name: "" })
+      const focusButton = screen.getByRole("button", { name: "Focus Icon Button" })
+
+      fireEvent.click(focusButton)
+      expect(iconButton).toHaveFocus()
+    })
+
+    it("should work with disabled state and ref", () => {
+      let buttonRef: React.RefObject<HTMLButtonElement>
+      let clickHandlerCalled = false
+
+      const TestComponent = () => {
+        buttonRef = useRef<HTMLButtonElement>(null)
+
+        const handleClick = () => {
+          clickHandlerCalled = true
+        }
+
+        return (
+          <VentionIconButton ref={buttonRef} disabled onClick={handleClick}>
+            <IconRefresh size={24} />
+          </VentionIconButton>
+        )
+      }
+
+      renderWithTheme(<TestComponent />)
+
+      const iconButton = screen.getByRole("button")
+      expect(iconButton).toBeDisabled()
+      expect(buttonRef.current).toBeInstanceOf(HTMLButtonElement)
+      expect(buttonRef.current?.disabled).toBe(true)
+
+      fireEvent.click(iconButton)
+      expect(clickHandlerCalled).toBe(false)
+    })
+  })
+})

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

@@ -0,0 +1,60 @@
+import { IconButtonProps, IconButton } from "@mui/material"
+import { ReactNode, forwardRef } from "react"
+import { tss } from "tss-react/mui"
+import { getButtonHeight, getButtonStylingPropertiesGivenProps } from "../button-utils"
+import { Sizes, StrictExtract } from "../../../theme/machine-ui-theme"
+
+export interface VentionIconButtonProps extends Omit<IconButtonProps, "size" | "variant"> {
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
+  size?: StrictExtract<Sizes, "small" | "medium" | "large" | "x-large" | "xx-large">
+  children?: ReactNode
+  variant?: "filled-brand" | "filled" | "outline" | "shaded" | "destructive" | "text-only"
+  disabled?: boolean
+  className?: string
+}
+
+export const VentionIconButton = forwardRef<HTMLButtonElement, VentionIconButtonProps>((inputProps, ref) => {
+  const { variant = "filled-brand", size = "small", className, disabled = false, onClick, children, ...other } = inputProps
+
+  const { classes, cx } = useStyles({
+    variant: variant,
+    size: size,
+  })
+
+  return (
+    <IconButton ref={ref} className={cx(classes.root, className)} disableRipple disabled={disabled} onClick={onClick} {...other}>
+      {children}
+    </IconButton>
+  )
+})
+
+VentionIconButton.displayName = "VentionIconButton"
+
+const useStyles = tss.withParams<Pick<VentionIconButtonProps, "variant" | "size">>().create(({ variant, size, theme }) => {
+  const stylingProperties = getButtonStylingPropertiesGivenProps(variant, size, theme)
+
+  const buttonSize = getButtonHeight(size, theme)
+
+  return {
+    root: {
+      padding: 0,
+      height: buttonSize,
+      width: buttonSize,
+      backgroundColor: stylingProperties.backgroundColor,
+      color: stylingProperties.textColor,
+      borderRadius: stylingProperties.borderRadius,
+      border: stylingProperties.border,
+      "&:hover": {
+        backgroundColor: stylingProperties.backgroundColorOnHover,
+      },
+      "&:active": {
+        backgroundColor: stylingProperties.backgroundColorOnPress,
+      },
+      "&:disabled": {
+        backgroundColor: stylingProperties.backgroundColorOnDisable,
+        color: stylingProperties.textColorOnDisable,
+        cursor: "not-allowed",
+      },
+    },
+  }
+})

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

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { VentionCallout } from "./vention-callout"
+
+const meta: Meta<typeof VentionCallout> = {
+  component: VentionCallout,
+  title: "Components/VentionCallout",
+  argTypes: {
+    onLinkClick: { action: "onClick executed!" },
+  },
+}
+export default meta
+type Story = StoryObj<typeof VentionCallout>
+
+export const Default: Story = {
+  args: {
+    size: "medium",
+    descriptionText: "Description placeholder",
+    title: "The Title",
+  },
+}
+
+export const WithPrimaryAndSecondaryAndLinkButtons: Story = {
+  args: {
+    size: "medium",
+    descriptionText: "Description placeholder",
+    title: "The Title",
+    primaryButtonText: "Primary",
+    secondaryButtonText: "Secondary",
+    linkText: "Link Btn",
+  },
+}
+
+export const WithCloseBtn: Story = {
+  args: {
+    size: "medium",
+    descriptionText: "Description placeholder",
+    title: "The Title",
+    primaryButtonText: "Primary",
+    secondaryButtonText: "Secondary",
+    isCloseable: true,
+  },
+}
+
+export const WithoutLeftIcon: Story = {
+  args: {
+    size: "medium",
+    descriptionText: "Description placeholder",
+    title: "The Title",
+    primaryButtonText: "Primary",
+    secondaryButtonText: "Secondary",
+    isCloseable: true,
+    leftIcon: undefined,
+  },
+}
+
+export const OnSingleLine: Story = {
+  args: {
+    size: "medium",
+    descriptionText: "Description placeholder",
+    title: "The Title",
+    primaryButtonText: "Primary",
+    secondaryButtonText: "Secondary",
+    linkText: "Link",
+    isCloseable: true,
+    isSingleLine: true,
+  },
+}
+
+export const WithCustomizedPrimaryButtonVariant: Story = {
+  args: {
+    size: "medium",
+    descriptionText: "Description placeholder",
+    title: "The Title",
+    primaryButtonText: "Primary",
+    secondaryButtonText: "Secondary",
+    linkText: "Link",
+    isCloseable: true,
+    isSingleLine: true,
+    primaryButtonVariant: "destructive",
+  },
+}

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

@@ -0,0 +1,142 @@
+import "@testing-library/jest-dom"
+
+import { fireEvent } from "@testing-library/react"
+
+import { renderWithTheme } from "../../testing/utils"
+import { VentionCallout, VentionCalloutProps } from "./vention-callout"
+
+const handleClickMock = jest.fn()
+describe("VentionCallout", () => {
+  it("should call the onClick function when the link is clicked", () => {
+    const { queryByTestId } = renderWithTheme(
+      <VentionCallout size="small" linkText="Click me" isCloseable={true} onLinkClick={handleClickMock} />
+    )
+    const closeButton = queryByTestId("closeButton")
+    const calloutRootDiv = queryByTestId("calloutRootDiv")
+    fireEvent.click(closeButton)
+    expect(calloutRootDiv).not.toBeVisible()
+  })
+
+  it("should render the link with the correct text", () => {
+    const linkText = "Click me"
+    const { getByText } = renderWithTheme(<VentionCallout linkText="Click me" size="medium" onLinkClick={handleClickMock} />)
+    const linkElement = getByText(linkText)
+    expect(linkElement).toBeInTheDocument()
+  })
+
+  it("should call the onClick function when the link is clicked", () => {
+    const { getByText } = renderWithTheme(<VentionCallout size="small" linkText="Click me" onLinkClick={handleClickMock} />)
+    const linkElement = getByText("Click me")
+    fireEvent.click(linkElement)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+
+  it("should call the onClick function when the link is clicked with minimal props", () => {
+    const { getByText } = renderWithTheme(
+      <VentionCallout size="small" linkText="Click me" isSingleLine={true} onLinkClick={handleClickMock} />
+    )
+    const linkElement = getByText("Click me")
+    fireEvent.click(linkElement)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+
+  it("title should exist on callout card", () => {
+    const { getByText } = renderWithTheme(
+      <VentionCallout size="small" linkText="Click me" title="A title" isCloseable={true} onLinkClick={handleClickMock} />
+    )
+    const titleElement = getByText("A title")
+    expect(titleElement).toBeInTheDocument()
+  })
+
+  it("should close when close button pressed, on single line style layout", () => {
+    const { queryByTestId } = renderWithTheme(
+      <VentionCallout
+        size="small"
+        title="A title"
+        isCloseable={true}
+        linkText="Click me"
+        isSingleLine={true}
+        onLinkClick={handleClickMock}
+      />
+    )
+    const closeButton = queryByTestId("closeButton")
+    const calloutRootDiv = queryByTestId("calloutRootDiv")
+    fireEvent.click(closeButton)
+    expect(calloutRootDiv).not.toBeVisible()
+  })
+
+  it("ensure that left icon does not exist", () => {
+    const { queryByTestId } = renderWithTheme(
+      <VentionCallout
+        size="medium"
+        isSingleLine={true}
+        variant="outline"
+        title="A title"
+        leftIcon={undefined}
+        isCloseable={true}
+        onLinkClick={handleClickMock}
+      />
+    )
+    const leftIconElement = queryByTestId("leftIcon")
+    expect(leftIconElement).toBeNull()
+  })
+
+  const calloutSizes: VentionCalloutProps["size"][] = ["medium", "small"]
+
+  calloutSizes.forEach(size => {
+    it("ensure that primary button exists and clickable", () => {
+      const { getByText } = renderWithTheme(
+        <VentionCallout
+          size={size}
+          isSingleLine={true}
+          variant="outline"
+          title="A title"
+          leftIcon={undefined}
+          isCloseable={true}
+          onPrimaryButtonClick={handleClickMock}
+          primaryButtonText="Primary Btn"
+        />
+      )
+      const primaryBtn = getByText("Primary Btn")
+      primaryBtn.click()
+      expect(handleClickMock).toHaveBeenCalled()
+    })
+
+    it("ensure that primary button exists and clickable with primary button variant", () => {
+      const { getByText } = renderWithTheme(
+        <VentionCallout
+          size={size}
+          isSingleLine={true}
+          variant="outline"
+          title="A title"
+          leftIcon={undefined}
+          isCloseable={true}
+          onPrimaryButtonClick={handleClickMock}
+          primaryButtonText="Primary Btn"
+          primaryButtonVariant="shaded"
+        />
+      )
+      const primaryBtn = getByText("Primary Btn")
+      primaryBtn.click()
+      expect(handleClickMock).toHaveBeenCalled()
+    })
+
+    it("ensure that secondary button exists and clickable", () => {
+      const { getByText } = renderWithTheme(
+        <VentionCallout
+          size={size}
+          isSingleLine={true}
+          variant="outline"
+          title="A title"
+          leftIcon={undefined}
+          isCloseable={true}
+          onSecondaryButtonClick={handleClickMock}
+          secondaryButtonText="Secondary Btn"
+        />
+      )
+      const secondaryBtn = getByText("Secondary Btn")
+      secondaryBtn.click()
+      expect(handleClickMock).toHaveBeenCalled()
+    })
+  })
+})