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 { Button } from "../../Button"
import { Typography } from "../../Typography"

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="lg" variant="Primary" onPress={args._onPrimaryPress}>
          Primary action
        </Button>
      )}

      {showPrimaryButton && !inMainArea && (
        <Button size="sm" variant="Tertiary" onPress={args._onPrimaryPress}>
          Primary action
        </Button>
      )}

      {showSecondaryButton && (
        <Button
          size={inMainArea ? "lg" : "sm"}
          variant="Secondary"
          onPress={args._onSecondaryPress}
        >
          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,
}