web/packages/design-system/lib/components/Card/Compositions/ContentCard.stories.tsx

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

import { themes } from '../../../../.storybook/preview'

import { Card } from '../'
import { Typography } from '../../Typography'
import { Button } from '../../Button'

type CompositionProps = React.ComponentPropsWithoutRef<typeof Card> & {
  _onPrimaryPress?: () => void
  _onSecondaryPress?: () => void
  inMainArea: boolean
  showTitle: boolean
  showPreamble: boolean
  showPrimaryButton: boolean
  showSecondaryButton: boolean
}

const meta: Meta<CompositionProps> = {
  title: 'Compositions/Card',
  component: Card,
  decorators: [
    (Story, context) => {
      if (context.name.toLowerCase().indexOf('all themes') >= 0) {
        return (
          <>
            <h1>{context.name}</h1>
            {Object.entries(themes.themes).map(([key, value], ix) => {
              return (
                <div key={ix} className={value} style={{ padding: '1em 0' }}>
                  <h2 style={{ paddingBottom: '0.5em' }}>{key}</h2>
                  <Story />
                </div>
              )
            })}
          </>
        )
      }

      return (
        <div style={{ display: 'flex' }}>
          <Story />
        </div>
      )
    },
  ],
  argTypes: {
    inMainArea: {
      name: 'Is in main area',
    },
    showTitle: {
      name: 'Composition: Show title',
    },
    showPreamble: {
      name: 'Composition: Show preamble',
    },
    showPrimaryButton: {
      name: 'Composition: Show primary button',
    },
    showSecondaryButton: {
      name: 'Composition: Show secondary button',
    },
    _onPrimaryPress: {
      table: {
        disable: true,
      },
    },
    _onSecondaryPress: {
      table: {
        disable: true,
      },
    },
  },
  render: ({
    inMainArea,
    showTitle,
    showPreamble,
    showPrimaryButton,
    showSecondaryButton,
    ...args
  }) => (
    <Card {...args}>
      {showTitle && (
        <Typography variant="Title/md">
          <h3>Content Card</h3>
        </Typography>
      )}

      {showPreamble && (
        <Typography variant="Body/Paragraph/mdRegular">
          <p>
            Mattis sit duis pulvinar ultricies auctor euismod. Augue mattis
            mauris at est iaculis pulvinar pulvinar.
          </p>
        </Typography>
      )}

      {showPrimaryButton && inMainArea && (
        <Button
          size="Large"
          variant="Primary"
          typography="Body/Paragraph/mdBold"
          onPress={args._onPrimaryPress}
        >
          Primary action
        </Button>
      )}

      {showPrimaryButton && !inMainArea && (
        <Button
          size="Small"
          variant="Tertiary"
          typography="Body/Paragraph/mdBold"
          onPress={args._onPrimaryPress}
        >
          Primary action
        </Button>
      )}

      {showSecondaryButton && (
        <Button
          size={inMainArea ? 'Large' : 'Small'}
          variant="Secondary"
          onPress={args._onSecondaryPress}
          typography="Body/Paragraph/mdBold"
        >
          Secondary action
        </Button>
      )}
    </Card>
  ),
}

export default meta

type Story = StoryObj<CompositionProps>

export const ContentCardMainArea: Story = {
  args: {
    as: 'Default',
    inMainArea: true,
    showTitle: true,
    showPreamble: true,
    showPrimaryButton: true,
    showSecondaryButton: true,
    _onPrimaryPress: fn(),
    _onSecondaryPress: fn(),
  },
}

export const ContentCardNonMainArea: Story = {
  args: {
    as: 'Default',
    inMainArea: false,
    showTitle: true,
    showPreamble: true,
    showPrimaryButton: true,
    showSecondaryButton: true,
    _onPrimaryPress: fn(),
    _onSecondaryPress: fn(),
  },
}

export const ContentCardMainAreaAllThemes: Story = {
  ...ContentCardMainArea,
}

export const ContentCardNonMainAreaAllThemes: Story = {
  ...ContentCardNonMainArea,
}