web/packages/design-system/lib/components/VideoPlayer/Button/VideoPlayerButton.stories.tsx

import type { Meta, StoryObj } from "@storybook/nextjs-vite"

import { fn } from "storybook/test"
import { VideoPlayerButton } from "."
import { videoPlayerButtonIconNames } from "./types"
import { config } from "./variants"

const meta: Meta<typeof VideoPlayerButton> = {
  title: "Core Components/Video/VideoPlayerButton",
  component: VideoPlayerButton,
  parameters: {
    docs: {
      description: {
        component:
          "A component to display a VideoPlayer and content inside a card connected to the video. The size and gaps are determined by the parent container.",
      },
    },
  },
  argTypes: {
    onPress: {
      table: {
        type: { summary: "function" },
      },
      defaultValue: { summary: "undefined" },
    },
    size: {
      control: "select",
      options: Object.keys(config.variants.size),
      table: {
        defaultValue: {
          summary: config.defaultVariants.size,
        },
        type: {
          summary: Object.keys(config.variants.size).join(" | "),
        },
      },
      description: "The size of the button.",
    },
    iconName: {
      control: "select",
      options: videoPlayerButtonIconNames,
      table: {
        defaultValue: {
          summary: "undefined",
        },
        type: {
          summary: videoPlayerButtonIconNames.join(" | "),
        },
      },
      description:
        "This decides the background color and text color of the card.",
    },
  },
}

export default meta

function renderAllIcons(args: Story["args"]) {
  return (
    <div
      style={{
        display: "flex",
        gap: "16px",
        alignItems: "center",
        justifyContent: "center",
        flexWrap: "wrap",
      }}
    >
      {videoPlayerButtonIconNames.map((iconName) => (
        <VideoPlayerButton key={iconName} {...args} iconName={iconName} />
      ))}
    </div>
  )
}

type Story = StoryObj<typeof VideoPlayerButton>

export const Default: Story = {
  args: { iconName: "play_arrow", onPress: fn() },
}

export const Small: Story = {
  args: { ...Default.args, size: "sm" },
  render: (args) => renderAllIcons(args),
}

export const Medium: Story = {
  args: { ...Default.args, size: "md" },
  render: (args) => renderAllIcons(args),
}

export const Large: Story = {
  args: { ...Default.args, size: "lg" },
  render: (args) => renderAllIcons(args),
}