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

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

import { VideoWithCard } from '.'
import { config } from './variants'

const meta: Meta<typeof VideoWithCard> = {
  title: 'Core Components//🚧 Video 🚧//VideoWithCard',
  component: VideoWithCard,
  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: {
    variant: {
      control: 'select',
      options: Object.keys(config.variants.variant),
      table: {
        defaultValue: {
          summary: config.defaultVariants.variant,
        },
        type: {
          summary: Object.keys(config.variants.variant).join(' | '),
        },
      },
      description:
        'The variant of the card, which determines its style of the text and what content is shown.',
    },
    style: {
      control: 'select',
      options: Object.keys(config.variants.style),
      table: {
        defaultValue: {
          summary: config.defaultVariants.style,
        },
        type: {
          summary: Object.keys(config.variants.style).join(' | '),
        },
      },
      description:
        'This decides the background color and text color of the card.',
    },
    heading: {
      table: {
        type: { summary: 'string' },
      },
      description: 'The heading text. Only applicable for the text variant.',
    },
    text: {
      table: {
        type: { summary: 'string' },
      },
      description: 'The body text. Only applicable for the text variant.',
    },
    quote: {
      table: {
        type: { summary: 'string' },
      },
      description: 'The quote text. Only applicable for the quote variant.',
    },
    author: {
      table: {
        type: { summary: 'string' },
      },
      description:
        'The author of the quote. Only applicable for the quote variant.',
    },
    authorDescription: {
      table: {
        type: { summary: 'string' },
      },
      description:
        'The description of the author. Only applicable for the quote variant.',
    },
    video: {
      control: false,
      table: {
        type: {
          summary:
            '{ src: string; captions?: Caption[]; focalPoint?: FocalPoint}',
        },
      },
      description:
        'The video props including source URL, captions and focal point. Please note that not all props from the VideoPlayer component are supported in this wrapper component.',
    },
  },
}

export default meta

type Story = StoryObj<typeof VideoWithCard>

const videoProps = {
  src: 'https://eu-assets.contentstack.com/v3/assets/bltfd73aa2de3a5c4e3/bltad0fe3c2ce340947/68eced6c14e5a8150ebba18c/Scandic_EB_Master.mp4',
}

const quoteCardProps = {
  variant: 'quote' as const,
  quote: 'Download our membership App for smoother & richer experience',
  author: 'Hans Christian Andersen',
  authorDescription: 'The famed Danish storyteller.',
  video: videoProps,
}

const textCardProps = {
  variant: 'text' as const,
  heading: 'Download our membership App now',
  text: 'Hans Christian Andersen, the famed Danish storyteller, spent many years of his life in Nyhavn, drawing inspiration from its lively atmosphere and picturesque setting.',
  video: videoProps,
}

const smallDecorator = (Story: React.FC) => (
  <div
    style={{
      width: '792px',
      paddingRight: '2rem',
    }}
  >
    <Story />
  </div>
)

const largeDecorator = (Story: React.FC) => (
  <div
    style={{
      width: '1200px',
      paddingRight: '2rem',
    }}
  >
    <Story />
  </div>
)

export const QuotePrimary1Small: Story = {
  args: {
    ...quoteCardProps,
    style: 'primary-1',
  },
  decorators: [smallDecorator],
  render: (args) => <VideoWithCard {...args} />,
}

export const QuotePrimary2Small: Story = {
  args: {
    ...quoteCardProps,
    style: 'primary-2',
  },
  decorators: [smallDecorator],
  render: (args) => <VideoWithCard {...args} />,
}

export const TextPrimary1Small: Story = {
  args: {
    ...textCardProps,
    style: 'primary-1',
  },
  decorators: [smallDecorator],
  render: (args) => <VideoWithCard {...args} />,
}

export const TextPrimary2Small: Story = {
  args: {
    ...textCardProps,
    style: 'primary-2',
  },
  decorators: [smallDecorator],
  render: (args) => <VideoWithCard {...args} />,
}

export const QuotePrimary1Large: Story = {
  args: {
    ...quoteCardProps,
    style: 'primary-1',
  },
  decorators: [largeDecorator],
  render: (args) => <VideoWithCard {...args} />,
}

export const QuotePrimary2Large: Story = {
  args: {
    ...quoteCardProps,
    style: 'primary-2',
  },
  decorators: [largeDecorator],
  render: (args) => <VideoWithCard {...args} />,
}

export const TextPrimary1Large: Story = {
  args: {
    ...textCardProps,
    style: 'primary-1',
  },
  decorators: [largeDecorator],
  render: (args) => <VideoWithCard {...args} />,
}

export const TextPrimary2Large: Story = {
  args: {
    ...textCardProps,
    style: 'primary-2',
  },
  decorators: [largeDecorator],
  render: (args) => <VideoWithCard {...args} />,
}