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),
}