From d2b6e9e3583abf43009af537fd202741f17ee19b Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@forefront.se>
Date: Fri, 28 Jun 2024 14:29:46 +0200
Subject: [PATCH] feat: add baseText style

---
 .../MyPages/Blocks/Stays/Previous/index.tsx   |  4 +-
 .../Stays/ShowMoreButton/button.module.css    |  6 +++
 .../Blocks/Stays/ShowMoreButton/index.tsx     |  8 +++-
 .../MyPages/Blocks/Stays/Upcoming/index.tsx   |  4 +-
 .../TempDesignSystem/Button/button.module.css | 41 +++++++++++++++++++
 .../TempDesignSystem/Button/variants.ts       |  6 +++
 6 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/components/MyPages/Blocks/Stays/Previous/index.tsx b/components/MyPages/Blocks/Stays/Previous/index.tsx
index 49c4316a5..9a2959d23 100644
--- a/components/MyPages/Blocks/Stays/Previous/index.tsx
+++ b/components/MyPages/Blocks/Stays/Previous/index.tsx
@@ -13,7 +13,9 @@ export default async function PreviousStays({
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const initialPreviousStays = await serverClient().user.stays.previous()
+  const initialPreviousStays = await serverClient().user.stays.previous({
+    limit: 6,
+  })
   if (!initialPreviousStays?.data) {
     return null
   }
diff --git a/components/MyPages/Blocks/Stays/ShowMoreButton/button.module.css b/components/MyPages/Blocks/Stays/ShowMoreButton/button.module.css
index f55557f33..81c35a9ed 100644
--- a/components/MyPages/Blocks/Stays/ShowMoreButton/button.module.css
+++ b/components/MyPages/Blocks/Stays/ShowMoreButton/button.module.css
@@ -2,3 +2,9 @@
   display: flex;
   justify-content: center;
 }
+
+.button {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-half);
+}
diff --git a/components/MyPages/Blocks/Stays/ShowMoreButton/index.tsx b/components/MyPages/Blocks/Stays/ShowMoreButton/index.tsx
index d3e57e27b..87c80cc50 100644
--- a/components/MyPages/Blocks/Stays/ShowMoreButton/index.tsx
+++ b/components/MyPages/Blocks/Stays/ShowMoreButton/index.tsx
@@ -2,6 +2,7 @@
 
 import { useIntl } from "react-intl"
 
+import { ChevronDownIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 
 import styles from "./button.module.css"
@@ -17,11 +18,14 @@ export default function ShowMoreButton({
     <div className={styles.container}>
       <Button
         disabled={disabled}
-        intent="primary"
         onClick={loadMoreData}
-        theme="secondaryDark"
+        variant="icon"
         type="button"
+        className={styles.button}
+        theme="base"
+        intent="text"
       >
+        <ChevronDownIcon className={styles.icon} />
         {formatMessage({ id: "Show more" })}
       </Button>
     </div>
diff --git a/components/MyPages/Blocks/Stays/Upcoming/index.tsx b/components/MyPages/Blocks/Stays/Upcoming/index.tsx
index 736251cfa..b9085cb4f 100644
--- a/components/MyPages/Blocks/Stays/Upcoming/index.tsx
+++ b/components/MyPages/Blocks/Stays/Upcoming/index.tsx
@@ -14,7 +14,9 @@ export default async function UpcomingStays({
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const initialUpcomingStays = await serverClient().user.stays.upcoming()
+  const initialUpcomingStays = await serverClient().user.stays.upcoming({
+    limit: 3,
+  })
   if (!initialUpcomingStays?.data) {
     return null
   }
diff --git a/components/TempDesignSystem/Button/button.module.css b/components/TempDesignSystem/Button/button.module.css
index c4a6699a5..d3ba7b8a3 100644
--- a/components/TempDesignSystem/Button/button.module.css
+++ b/components/TempDesignSystem/Button/button.module.css
@@ -41,6 +41,12 @@ a.inverted {
   border: none;
 }
 
+.text,
+a.text {
+  background: none;
+  border: none;
+}
+
 /* VARIANTS */
 .default,
 a.default {
@@ -227,6 +233,41 @@ a.default {
   fill: var(--Base-Button-Inverted-On-Fill-Disabled);
 }
 
+.baseText {
+  color: var(--Base-Button-Text-On-Fill-Normal, #4d001b);
+}
+
+.baseText:active,
+.baseText:focus,
+.baseText:hover {
+  color: var(--Base-Button-Text-On-Fill-Hover, #8f4350);
+  text-decoration: underline;
+}
+
+.baseText:disabled {
+  color: var(--Base-Button-Text-On-Fill-Disabled, #a8a4a2);
+}
+
+.icon.baseText svg,
+.icon.baseText svg * {
+  fill: var(--Base-Button-Text-On-Fill-Normal, #4d001b);
+}
+
+.icon.baseText:active svg,
+.icon.baseText:focus svg,
+.icon.baseText:hover svg,
+.icon.baseText:active svg *,
+.icon.baseText:focus svg *,
+.icon.baseText:hover svg * {
+  fill: var(--Base-Button-Text-On-Fill-Hover, #8f4350);
+  text-decoration: underline;
+}
+
+.icon.baseText:disabled svg,
+.icon.baseText:disabled svg * {
+  fill: var(--Base-Button-Text-On-Fill-Disabled, #a8a4a2);
+}
+
 .primaryStrongPrimary {
   background-color: var(--Theme-Primary-Strong-Button-Primary-Fill-Normal);
   color: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Normal);
diff --git a/components/TempDesignSystem/Button/variants.ts b/components/TempDesignSystem/Button/variants.ts
index 71757fcfe..217d14b51 100644
--- a/components/TempDesignSystem/Button/variants.ts
+++ b/components/TempDesignSystem/Button/variants.ts
@@ -9,6 +9,7 @@ export const buttonVariants = cva(styles.btn, {
       primary: styles.primary,
       secondary: styles.secondary,
       tertiary: styles.tertiary,
+      text: styles.text,
     },
     size: {
       small: styles.small,
@@ -128,5 +129,10 @@ export const buttonVariants = cva(styles.btn, {
       intent: "secondary",
       theme: "tertiaryLight",
     },
+    {
+      className: styles.baseText,
+      intent: "text",
+      theme: "base",
+    },
   ],
 })