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