feat(SW-1806): Implemented design systems button inside buttonLink component and changed teasercard buttons

Approved-by: Matilda Landström

apps/scandic-web/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx

@@ -2,12 +2,12 @@
 
 import { useState } from "react"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 
+import ButtonLink from "@/components/ButtonLink"
 import JsonToHtml from "@/components/JsonToHtml"
-import Button from "@/components/TempDesignSystem/Button"
 
-import Link from "../../Link"
 import SidePeek from "../../SidePeek"
 
 import styles from "./sidepeek.module.css"
@@ -22,14 +22,13 @@ export default function TeaserCardSidepeek({
   const { heading, content, primary_button, secondary_button } = sidePeekContent
 
   return (
-    <div>
+    <div className={styles.teaserCardSidepeek}>
       <Button
         onPress={() => setSidePeekIsOpen(true)}
-        theme="base"
-        variant="icon"
-        intent="text"
-        size="small"
-        wrapping
+        variant="Secondary"
+        color="Primary"
+        size="Small"
+        typography="Body/Supporting text (caption)/smBold"
       >
         {button.call_to_action_text}
         <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
@@ -46,25 +45,28 @@ export default function TeaserCardSidepeek({
         />
         <div className={styles.ctaContainer}>
           {primary_button && (
-            <Button asChild theme="base" intent="primary" size="small">
-              <Link
-                href={primary_button.href}
-                target={primary_button.openInNewTab ? "_blank" : undefined}
-                color="none"
-              >
-                {primary_button.title}
-              </Link>
-            </Button>
+            <ButtonLink
+              variant="Primary"
+              color="Primary"
+              size="Small"
+              typography="Body/Supporting text (caption)/smBold"
+              href={primary_button.href}
+              target={primary_button.openInNewTab ? "_blank" : undefined}
+            >
+              {primary_button.title}
+            </ButtonLink>
           )}
           {secondary_button && (
-            <Button asChild intent="secondary" size="small">
-              <Link
-                href={secondary_button.href}
-                target={secondary_button.openInNewTab ? "_blank" : undefined}
-              >
-                {secondary_button.title}
-              </Link>
-            </Button>
+            <ButtonLink
+              variant="Secondary"
+              color="Primary"
+              size="Small"
+              typography="Body/Supporting text (caption)/smBold"
+              href={secondary_button.href}
+              target={secondary_button.openInNewTab ? "_blank" : undefined}
+            >
+              {secondary_button.title}
+            </ButtonLink>
           )}
         </div>
       </SidePeek>

apps/scandic-web/components/TempDesignSystem/TeaserCard/Sidepeek/sidepeek.module.css

@@ -1,3 +1,7 @@
+.teaserCardSidepeek {
+  display: grid;
+}
+
 .ctaContainer {
   display: grid;
   gap: var(--Spacing-x2);

apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx

@@ -1,6 +1,5 @@
+import ButtonLink from "@/components/ButtonLink"
 import Image from "@/components/Image"
-import Button from "@/components/TempDesignSystem/Button"
-import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
 import Subtitle from "../Text/Subtitle"
@@ -51,37 +50,30 @@ export default function TeaserCard({
         ) : (
           <div className={styles.ctaContainer}>
             {primaryButton && (
-              <Button
-                asChild
-                intent="primary"
-                size="small"
+              <ButtonLink
+                variant="Tertiary"
+                color="Primary"
+                size="Small"
+                typography="Body/Supporting text (caption)/smBold"
                 className={styles.ctaButton}
+                href={primaryButton.href}
+                target={primaryButton.openInNewTab ? "_blank" : undefined}
               >
-                <Link
-                  href={primaryButton.href}
-                  target={primaryButton.openInNewTab ? "_blank" : undefined}
-                  color="none"
-                >
-                  {primaryButton.title}
-                </Link>
-              </Button>
+                {primaryButton.title}
+              </ButtonLink>
             )}
             {secondaryButton && (
-              <Button
-                asChild
-                intent="secondary"
-                size="small"
+              <ButtonLink
+                variant="Secondary"
+                color="Primary"
+                size="Small"
+                typography="Body/Supporting text (caption)/smBold"
                 className={styles.ctaButton}
+                href={secondaryButton.href}
+                target={secondaryButton.openInNewTab ? "_blank" : undefined}
               >
-                <Link
-                  href={secondaryButton.href}
-                  target={secondaryButton.openInNewTab ? "_blank" : undefined}
-                  color="burgundy"
-                  weight="bold"
-                >
-                  {secondaryButton.title}
-                </Link>
-              </Button>
+                {secondaryButton.title}
+              </ButtonLink>
             )}
           </div>
         )}

apps/scandic-web/components/TempDesignSystem/TeaserCard/teaserCard.module.css

@@ -48,10 +48,6 @@
   width: 100%;
 }
 
-.ctaButton {
-  width: 100%;
-}
-
 @media (min-width: 1367px) {
   .card:not(.alwaysStack) .ctaContainer {
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));