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.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")
+    })
+  })
+})