Merged in feat/3694-show-more-button-to-ds (pull request #3405)

feat(SW-3694): Move ShowMoreButton to design-system

* Move ShowMoreButton to design-system

* Update to interactive stories

* Merged master into feat/3694-show-more-button-to-ds

* Merge branch 'master' into feat/3694-show-more-button-to-ds

* Merge branch 'feat/3694-show-more-button-to-ds' of bitbucket.org:scandic-swap/web into feat/3694-show-more-button-to-ds


Approved-by: Linus Flood

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

@@ -0,0 +1,217 @@
+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)
+  },
+}