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)
+  },
+}

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

@@ -0,0 +1,116 @@
+import { describe, expect, it, vi, afterEach } from "vitest"
+import { render, screen, cleanup, fireEvent } from "@testing-library/react"
+import { IntlProvider } from "react-intl"
+
+import { ShowMoreButton } from "./ShowMoreButton"
+
+afterEach(() => {
+  cleanup()
+})
+
+const renderShowMoreButton = (
+  props: React.ComponentProps<typeof ShowMoreButton>
+) => {
+  return render(
+    <IntlProvider locale="en" messages={{}}>
+      <ShowMoreButton {...props} />
+    </IntlProvider>
+  )
+}
+
+describe("ShowMoreButton", () => {
+  describe("props", () => {
+    it("renders with default props", () => {
+      const loadMoreData = vi.fn()
+      renderShowMoreButton({ loadMoreData })
+      expect(screen.getByRole("button")).toBeTruthy()
+    })
+
+    it("displays 'Show more' text by default", () => {
+      const loadMoreData = vi.fn()
+      renderShowMoreButton({ loadMoreData })
+      expect(screen.getByText("Show more")).toBeTruthy()
+    })
+
+    it("displays 'Show less' text when showLess is true", () => {
+      const loadMoreData = vi.fn()
+      renderShowMoreButton({ loadMoreData, showLess: true })
+      expect(screen.getByText("Show less")).toBeTruthy()
+    })
+
+    it("displays custom 'Show more' text when provided", () => {
+      const loadMoreData = vi.fn()
+      renderShowMoreButton({
+        loadMoreData,
+        textShowMore: "Load more items",
+      })
+      expect(screen.getByText("Load more items")).toBeTruthy()
+    })
+
+    it("displays custom 'Show less' text when provided", () => {
+      const loadMoreData = vi.fn()
+      renderShowMoreButton({
+        loadMoreData,
+        showLess: true,
+        textShowLess: "Show fewer items",
+      })
+      expect(screen.getByText("Show fewer items")).toBeTruthy()
+    })
+
+    it("calls loadMoreData when clicked", () => {
+      const loadMoreData = vi.fn()
+      renderShowMoreButton({ loadMoreData })
+      const button = screen.getByRole("button")
+      // React Aria Components Button uses onPress which listens to click events
+      fireEvent.click(button)
+      expect(loadMoreData).toHaveBeenCalledTimes(1)
+    })
+
+    it("renders down arrow icon when showLess is false", () => {
+      const loadMoreData = vi.fn()
+      renderShowMoreButton({ loadMoreData, showLess: false })
+      const icon = screen.getByTestId("MaterialIcon")
+      expect(icon).toBeTruthy()
+      expect(icon.textContent).toBe("keyboard_arrow_down")
+    })
+
+    it("renders up arrow icon when showLess is true", () => {
+      const loadMoreData = vi.fn()
+      renderShowMoreButton({ loadMoreData, showLess: true })
+      const icon = screen.getByTestId("MaterialIcon")
+      expect(icon).toBeTruthy()
+      expect(icon.textContent).toBe("keyboard_arrow_up")
+    })
+
+    it("applies custom variant prop", () => {
+      const loadMoreData = vi.fn()
+      renderShowMoreButton({ loadMoreData, variant: "Primary" })
+      const button = screen.getByRole("button")
+      expect(button).toBeTruthy()
+    })
+
+    it("applies custom color prop", () => {
+      const loadMoreData = vi.fn()
+      renderShowMoreButton({ loadMoreData, color: "Inverted" })
+      const button = screen.getByRole("button")
+      expect(button).toBeTruthy()
+    })
+
+    it("applies custom size prop", () => {
+      const loadMoreData = vi.fn()
+      renderShowMoreButton({ loadMoreData, size: "lg" })
+      const button = screen.getByRole("button")
+      expect(button).toBeTruthy()
+    })
+
+    it("passes through additional props to Button", () => {
+      const loadMoreData = vi.fn()
+      renderShowMoreButton({
+        loadMoreData,
+        "aria-label": "Custom label",
+      })
+      const button = screen.getByRole("button")
+      expect(button.getAttribute("aria-label")).toBe("Custom label")
+    })
+  })
+})

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

@@ -0,0 +1,57 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { Button } from "../Button"
+import { MaterialIcon } from "../Icons/MaterialIcon"
+
+import type { ShowMoreButtonProps } from "./types"
+
+export function ShowMoreButton({
+  variant = "Text",
+  color = "Primary",
+  size = "md",
+  showLess,
+  textShowMore,
+  textShowLess,
+  loadMoreData,
+  ...props
+}: ShowMoreButtonProps) {
+  const intl = useIntl()
+
+  if (!textShowMore) {
+    textShowMore = intl.formatMessage({
+      id: "common.showMore",
+      defaultMessage: "Show more",
+    })
+  }
+
+  if (!textShowLess) {
+    textShowLess = intl.formatMessage({
+      id: "common.showLess",
+      defaultMessage: "Show less",
+    })
+  }
+
+  return (
+    <Button
+      variant={variant}
+      color={color}
+      size={size}
+      onPress={loadMoreData}
+      {...props}
+    >
+      {showLess ? (
+        <>
+          <MaterialIcon icon="keyboard_arrow_up" color="CurrentColor" />
+          <span>{textShowLess}</span>
+        </>
+      ) : (
+        <>
+          <MaterialIcon icon="keyboard_arrow_down" color="CurrentColor" />
+          <span>{textShowMore}</span>
+        </>
+      )}
+    </Button>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { ShowMoreButton } from "./ShowMoreButton"
+export { type ShowMoreButtonProps } from "./types"

packages/design-system/lib/components/ShowMoreButton/types.ts

@@ -0,0 +1,11 @@
+import type { ButtonProps } from "../Button/types"
+
+export interface ShowMoreButtonProps extends Omit<
+  ButtonProps,
+  "children" | "onPress"
+> {
+  showLess?: boolean
+  textShowMore?: string
+  textShowLess?: string
+  loadMoreData: () => void
+}

packages/design-system/package.json

@@ -167,6 +167,7 @@
     "./Radio": "./lib/components/Radio/index.tsx",
     "./RegularRateCard": "./lib/components/RateCard/Regular/index.tsx",
     "./Select": "./lib/components/Select/index.tsx",
+    "./ShowMoreButton": "./lib/components/ShowMoreButton/index.tsx",
     "./SidePeek": "./lib/components/SidePeek/index.tsx",
     "./SidePeek/SidePeekProvider": "./lib/components/SidePeek/SidePeekContext/SidePeekProvider.tsx",
     "./SidePeekSelfControlled": "./lib/components/SidePeek/SelfControlled.tsx",