web/packages/design-system/lib/components/ShowMoreButton/ShowMoreButton.stories.tsx

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

import { ShowMoreButton } from "./ShowMoreButton"

const meta: Meta<typeof ShowMoreButton> = {
  title: "Core Components/ShowMoreButton",
  component: ShowMoreButton,
  argTypes: {
    loadMoreData: {
      table: {
        type: { summary: "function" },
        defaultValue: { summary: "undefined" },
      },
      description: "Callback function to handle button press events.",
    },
    showLess: {
      control: "boolean",
      table: {
        type: { summary: "boolean" },
        defaultValue: { summary: "false" },
      },
      description: "When true, shows 'Show less' text and up arrow icon.",
    },
    textShowMore: {
      control: "text",
      table: {
        type: { summary: "string" },
        defaultValue: { summary: "undefined (uses i18n)" },
      },
      description:
        "Custom text for 'Show more' state. If not provided, uses i18n message.",
    },
    textShowLess: {
      control: "text",
      table: {
        type: { summary: "string" },
        defaultValue: { summary: "undefined (uses i18n)" },
      },
      description:
        "Custom text for 'Show less' state. If not provided, uses i18n message.",
    },
    variant: {
      control: "select",
      options: ["Primary", "Secondary", "Tertiary", "Text"],
      table: {
        type: { summary: "Primary | Secondary | Tertiary | Text" },
        defaultValue: { summary: "Text" },
      },
    },
    color: {
      control: "select",
      options: ["Primary", "Inverted"],
      table: {
        type: { summary: "Primary | Inverted" },
        defaultValue: { summary: "Primary" },
      },
    },
    size: {
      control: "select",
      options: ["sm", "md", "lg"],
      table: {
        type: { summary: "sm | md | lg" },
        defaultValue: { summary: "md" },
      },
    },
  },
}

export default meta

type Story = StoryObj<typeof ShowMoreButton>

// Wrapper component that manages state for interactive stories
function InteractiveShowMoreButton(
  props: Omit<
    React.ComponentProps<typeof ShowMoreButton>,
    "showLess" | "loadMoreData"
  > & {
    initialShowLess?: boolean
  }
) {
  const [showLess, setShowLess] = useState(props.initialShowLess ?? false)

  const handleLoadMore = () => {
    setShowLess((prev) => !prev)
  }

  return (
    <ShowMoreButton
      {...props}
      showLess={showLess}
      loadMoreData={handleLoadMore}
    />
  )
}

export const Default: Story = {
  render: (args) => <InteractiveShowMoreButton {...args} />,
  args: {},
  play: async ({ canvas, userEvent }) => {
    const button = await canvas.findByRole("button")
    await userEvent.click(button)
    // Button should now show "Show less"
    await userEvent.click(button)
    // Button should now show "Show more" again
  },
}

export const ShowLess: Story = {
  render: (args) => (
    <InteractiveShowMoreButton {...args} initialShowLess={true} />
  ),
  args: {},
  play: async ({ canvas, userEvent }) => {
    const button = await canvas.findByRole("button")
    await userEvent.click(button)
    // Button should now show "Show more"
    await userEvent.click(button)
    // Button should now show "Show less" again
  },
}

export const CustomText: Story = {
  render: (args) => <InteractiveShowMoreButton {...args} />,
  args: {
    textShowMore: "Load more items",
    textShowLess: "Show fewer items",
  },
  play: async ({ canvas, userEvent }) => {
    const button = await canvas.findByRole("button")
    await userEvent.click(button)
    // Button should now show "Show fewer items"
    await userEvent.click(button)
    // Button should now show "Load more items" again
  },
}

export const PrimaryVariant: Story = {
  render: (args) => <InteractiveShowMoreButton {...args} />,
  args: {
    variant: "Primary",
  },
  play: async ({ canvas, userEvent }) => {
    const button = await canvas.findByRole("button")
    await userEvent.click(button)
    await userEvent.click(button)
  },
}

export const SecondaryVariant: Story = {
  render: (args) => <InteractiveShowMoreButton {...args} />,
  args: {
    variant: "Secondary",
  },
  play: async ({ canvas, userEvent }) => {
    const button = await canvas.findByRole("button")
    await userEvent.click(button)
    await userEvent.click(button)
  },
}

export const SmallSize: Story = {
  render: (args) => <InteractiveShowMoreButton {...args} />,
  args: {
    size: "sm",
  },
  play: async ({ canvas, userEvent }) => {
    const button = await canvas.findByRole("button")
    await userEvent.click(button)
    await userEvent.click(button)
  },
}

export const LargeSize: Story = {
  render: (args) => <InteractiveShowMoreButton {...args} />,
  args: {
    size: "lg",
  },
  play: async ({ canvas, userEvent }) => {
    const button = await canvas.findByRole("button")
    await userEvent.click(button)
    await userEvent.click(button)
  },
}

export const InvertedColor: Story = {
  globals: {
    backgrounds: { value: "scandicPrimaryDark" },
  },
  render: (args) => <InteractiveShowMoreButton {...args} />,
  args: {
    color: "Inverted",
  },
  play: async ({ canvas, userEvent }) => {
    const button = await canvas.findByRole("button")
    await userEvent.click(button)
    await userEvent.click(button)
  },
}

export const InvertedShowLess: Story = {
  globals: {
    backgrounds: { value: "scandicPrimaryDark" },
  },
  render: (args) => (
    <InteractiveShowMoreButton {...args} initialShowLess={true} />
  ),
  args: {
    color: "Inverted",
  },
  play: async ({ canvas, userEvent }) => {
    const button = await canvas.findByRole("button")
    await userEvent.click(button)
    await userEvent.click(button)
  },
}