feat(SW-441): Added table block component

components/TempDesignSystem/ShowMoreButton/index.tsx

@@ -5,18 +5,29 @@ import { useIntl } from "react-intl"
 import { ChevronDownIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 
-import styles from "./button.module.css"
+import { showMoreButtonVariants } from "./variants"
 
-import type { ShowMoreButtonParams } from "@/types/components/myPages/stays/button"
+import styles from "./showMoreButton.module.css"
+
+import type { ShowMoreButtonProps } from "./showMoreButton"
 
 export default function ShowMoreButton({
+  className,
+  intent,
   disabled,
+  showLess,
   loadMoreData,
-}: ShowMoreButtonParams) {
-  const { formatMessage } = useIntl()
+}: ShowMoreButtonProps) {
+  const intl = useIntl()
+  const classNames = showMoreButtonVariants({
+    className,
+    intent,
+  })
+
   return (
-    <div className={styles.container}>
+    <div className={`${classNames} ${showLess ? styles.showLess : ""}`}>
       <Button
+        className={styles.button}
         disabled={disabled}
         onClick={loadMoreData}
         variant="icon"
@@ -24,8 +35,8 @@ export default function ShowMoreButton({
         theme="base"
         intent="text"
       >
-        <ChevronDownIcon />
-        {formatMessage({ id: "Show more" })}
+        <ChevronDownIcon className={styles.icon} />
+        {intl.formatMessage({ id: showLess ? "Show less" : "Show more" })}
       </Button>
     </div>
   )