feat(SW-440) implemented changes to buttons according to figma

components/ContentType/HotelPage/Map/MapCard/index.tsx

@@ -55,6 +55,7 @@ export default function MapCard({ hotelName, pois }: MapCardProps) {
         theme="base"
         intent="secondary"
         size="small"
+        fullWidth
         className={styles.ctaButton}
         onClick={openDynamicMap}
       >

components/TempDesignSystem/Button/button.module.css

@@ -1,7 +1,6 @@
 .btn {
   background: none;
-  /* No variable yet for radius 50px */
-  border-radius: 50px;
+  border-radius: var(--Corner-radius-Rounded);
   cursor: pointer;
   margin: 0;
   padding: 0;
@@ -10,12 +9,12 @@
     background-color 300ms ease,
     color 300ms ease;
 
-  /* TODO: Waiting for variables for buttons from Design team */
   font-family: var(--typography-Body-Bold-fontFamily);
   font-size: var(--typography-Body-Bold-fontSize);
   font-weight: 500;
-  line-height: 24px;
+  line-height: var(--typography-Body-Bold-lineHeight);
   letter-spacing: 0.6%;
+  text-decoration: none;
 }
 
 .wrapping {
@@ -23,6 +22,10 @@
   padding-right: 0 !important;
 }
 
+.fullWidth {
+  width: 100%;
+}
+
 /* INTENT */
 .primary,
 a.primary {
@@ -70,20 +73,32 @@ a.default {
 
 /* SIZES */
 .btn.small {
+  font-size: var(--typography-Caption-Bold-fontSize);
+  line-height: var(--typography-Caption-Bold-lineHeight);
   gap: var(--Spacing-x-quarter);
-  height: 40px;
+  padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2); /* Special case padding to adjust the missing border */
+}
+
+.btn.small.secondary {
   padding: var(--Spacing-x1) var(--Spacing-x2);
 }
 
 .btn.medium {
   gap: var(--Spacing-x-half);
-  height: 48px;
+  padding: calc(var(--Spacing-x-one-and-half) + 2px) var(--Spacing-x2); /* Special case padding to adjust the missing border */
+}
+
+.medium.secondary {
   padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
 }
 
 .btn.large {
   gap: var(--Spacing-x-half);
-  height: 56px;
+  padding: calc(var(--Spacing-x2) + 2px) var(--Spacing-x3); /* Special case padding to adjust the missing border */
+}
+
+.large.secondary {
+  gap: var(--Spacing-x-half);
   padding: var(--Spacing-x2) var(--Spacing-x3);
 }
 

components/TempDesignSystem/Button/index.tsx

@@ -8,14 +8,23 @@ import { buttonVariants } from "./variants"
 import type { ButtonProps } from "./button"
 
 export default function Button(props: ButtonProps) {
-  const { className, intent, size, theme, wrapping, variant, ...restProps } =
-    props
+  const {
+    className,
+    intent,
+    size,
+    theme,
+    fullWidth,
+    wrapping,
+    variant,
+    ...restProps
+  } = props
 
   const classNames = buttonVariants({
     className,
     intent,
     size,
     theme,
+    fullWidth,
     wrapping,
     variant,
   })

components/TempDesignSystem/Button/variants.ts

@@ -33,6 +33,9 @@ export const buttonVariants = cva(styles.btn, {
     wrapping: {
       true: styles.wrapping,
     },
+    fullWidth: {
+      true: styles.fullWidth,
+    },
   },
   defaultVariants: {
     intent: "primary",

components/TempDesignSystem/Card/index.tsx

@@ -1,6 +1,7 @@
+import Link from "next/link"
+
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
-import Link from "@/components/TempDesignSystem/Link"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
@@ -26,7 +27,7 @@ export default function Card({
   onPrimaryButtonClick,
   onSecondaryButtonClick,
 }: CardProps) {
-  const { buttonTheme, primaryLinkColor, secondaryLinkColor } = getTheme(theme)
+  const buttonTheme = getTheme(theme)
 
   imageHeight = imageHeight || 320
   imageWidth =
@@ -85,7 +86,6 @@ export default function Card({
               <Link
                 href={primaryButton.href}
                 target={primaryButton.openInNewTab ? "_blank" : undefined}
-                color={primaryLinkColor}
                 onClick={onPrimaryButtonClick}
               >
                 {primaryButton.title}
@@ -103,7 +103,6 @@ export default function Card({
               <Link
                 href={secondaryButton.href}
                 target={secondaryButton.openInNewTab ? "_blank" : undefined}
-                color={secondaryLinkColor}
                 onClick={onSecondaryButtonClick}
               >
                 {secondaryButton.title}

utils/cardTheme.ts

@@ -1,53 +1,21 @@
 import type { ButtonProps } from "@/components/TempDesignSystem/Button/button"
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
-import type { LinkProps } from "@/components/TempDesignSystem/Link/link"
-
-export function getTheme(theme: CardProps["theme"]) {
-  let buttonTheme: ButtonProps["theme"] = "primaryLight"
-  let primaryLinkColor: LinkProps["color"] = "pale"
-  let secondaryLinkColor: LinkProps["color"] = "burgundy"
 
+export function getTheme(theme: CardProps["theme"]): ButtonProps["theme"] {
   switch (theme) {
-    case "one":
-      buttonTheme = "primaryLight"
-      primaryLinkColor = "pale"
-      secondaryLinkColor = "burgundy"
-      break
     case "two":
-      buttonTheme = "secondaryLight"
-      primaryLinkColor = "pale"
-      secondaryLinkColor = "burgundy"
-      break
+      return "secondaryLight"
     case "three":
-      buttonTheme = "tertiaryLight"
-      primaryLinkColor = "pale"
-      secondaryLinkColor = "burgundy"
-      break
+      return "tertiaryLight"
     case "primaryDark":
-      buttonTheme = "primaryDark"
-      primaryLinkColor = "burgundy"
-      secondaryLinkColor = "pale"
-      break
-    case "primaryDim":
-      buttonTheme = "primaryLight"
-      primaryLinkColor = "pale"
-      secondaryLinkColor = "burgundy"
-      break
-    case "primaryInverted":
-      buttonTheme = "primaryLight"
-      primaryLinkColor = "pale"
-      secondaryLinkColor = "burgundy"
-      break
+      return "primaryDark"
     case "primaryStrong":
     case "image":
-      buttonTheme = "primaryStrong"
-      primaryLinkColor = "red"
-      secondaryLinkColor = "white"
-  }
-
-  return {
-    buttonTheme: buttonTheme,
-    primaryLinkColor: primaryLinkColor,
-    secondaryLinkColor: secondaryLinkColor,
+      return "primaryStrong"
+    case "one":
+    case "primaryDim":
+    case "primaryInverted":
+    default:
+      return "primaryLight"
   }
 }