feat(BOOK-743): Replaced deprecated Button component

Approved-by: Bianca Widstam
2026-01-21 09:38:38 +00:00
parent f834433d4d
commit 8e08af718c
77 changed files with 575 additions and 2233 deletions
--- a/apps/scandic-web/components/Blocks/CardsGrid.tsx
+++ b/apps/scandic-web/components/Blocks/CardsGrid.tsx
@@ -1,13 +1,13 @@
+import { InfoCard } from "@scandic-hotels/design-system/InfoCard"
 import { TeaserCard } from "@scandic-hotels/design-system/TeaserCard"
 import {
  CardsGridEnum,
  CardsGridLayoutEnum,
 } from "@scandic-hotels/trpc/types/cardsGridEnum"

-import InfoCard from "@/components/ContentType/StartPage/InfoCard"
+import InfoCardWithImage from "@/components/ContentType/StartPage/InfoCardWithImage"
 import { Section } from "@/components/Section"
 import { SectionHeader } from "@/components/Section/Header"
-import Card from "@/components/TempDesignSystem/Card"
 import Grids from "@/components/TempDesignSystem/Grids"
 import LoyaltyCard from "@/components/TempDesignSystem/LoyaltyCard"

@@ -55,33 +55,21 @@ export default function CardsGrid({
      <Grids.Stackable columns={columns}>
        {cards_grid.cards.map((card, index) => {
          switch (card.__typename) {
-            case CardsGridEnum.cards.Card:
-              return (
-                <Card
-                  theme={
-                    card.backgroundImage ? "image" : (cards_grid.theme ?? "one")
-                  }
-                  key={card.system.uid}
-                  scriptedTopTitle={card.scripted_top_title}
-                  heading={card.heading}
-                  bodyText={card.body_text}
-                  secondaryButton={card.secondaryButton}
-                  primaryButton={card.primaryButton}
-                  backgroundImage={card.backgroundImage}
-                  imageGradient
-                />
-              )
            case CardsGridEnum.cards.InfoCard:
              return (
                <InfoCard
                  key={card.system.uid}
-                  scriptedTopTitle={card.scriptedTopTitle}
-                  heading={card.heading}
-                  bodyText={card.bodyText}
-                  image={card.image}
-                  theme={card.theme ?? "one"}
-                  primaryButton={card.primaryButton}
-                  secondaryButton={card.secondaryButton}
+                  {...card}
+                  topTitleAngled
+                  theme={card.backgroundImage ? "Image" : cards_grid.theme}
+                />
+              )
+            case CardsGridEnum.cards.InfoCardWithImage:
+              return (
+                <InfoCardWithImage
+                  key={card.system.uid}
+                  {...card}
+                  topTitleAngled
                  imagePosition={index % 2 === 0 ? "right" : "left"}
                />
              )
--- a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx
@@ -3,8 +3,7 @@
 import { useIntl } from "react-intl"

 import { dt } from "@scandic-hotels/common/dt"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import useLang from "@/hooks/useLang"
@@ -52,21 +51,19 @@ export default function JobylonCard({ job }: JobylonCardProps) {
          </div>
        </Typography>

-        <Button
-          theme="base"
-          size="small"
-          intent="tertiary"
-          variant="icon"
-          asChild
+        <ButtonLink
+          size="sm"
+          variant="Tertiary"
+          href={job.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          trailingIconName="open_in_new"
        >
-          <a href={job.url} target="_blank" rel="noopener noreferrer">
-            {intl.formatMessage({
-              id: "jobylonFeed.card.viewAndApplyButton",
-              defaultMessage: "View & apply",
-            })}
-            <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
-          </a>
-        </Button>
+          {intl.formatMessage({
+            id: "jobylonFeed.card.viewAndApplyButton",
+            defaultMessage: "View & apply",
+          })}
+        </ButtonLink>
      </div>
    </div>
  )
--- a/apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/UsePoints/UsePointsModal.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/UsePoints/UsePointsModal.tsx
@@ -5,7 +5,6 @@ import { useIntl } from "react-intl"

 import { serializeBookingSearchParams } from "@scandic-hotels/booking-flow/utils/url"
 import { BOOK_NOW_SESSION_KEY } from "@scandic-hotels/common/constants/sessionKeys"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { LinkList } from "@scandic-hotels/design-system/LinkList"
 import { MessageBanner } from "@scandic-hotels/design-system/MessageBanner"
 import Modal from "@scandic-hotels/design-system/Modal"
@@ -15,7 +14,7 @@ import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"

 import { rewardNightsURL } from "@/constants/rewards"

-import InfoCard from "@/components/ContentType/StartPage/InfoCard"
+import InfoCardWithImage from "@/components/ContentType/StartPage/InfoCardWithImage"

 import { UsePointsButton } from "./UsePointsButton"

@@ -120,7 +119,7 @@ export function UsePointsModal({
          </div>
          <div>
            {points >= 10000 ? (
-              <InfoCard
+              <InfoCardWithImage
                image={items.image}
                heading={intl.formatMessage({
                  id: "myPages.membershipPointsModal.headingAboveThreshold",
@@ -132,35 +131,32 @@ export function UsePointsModal({
                })}
                primaryButton={{
                  href: bookLink,
-                  title: intl.formatMessage({
+                  text: intl.formatMessage({
                    id: "myPages.membershipPointsModal.bookNow",
                    defaultMessage: "Book now",
                  }),
-                  forceReload: true,
+                  // Kind of a hack to make sure the link opens with focus inside the booking widget
+                  // This should be refactored and the booking widget should handle this itself.
+                  // Currently it only listens to the search param on first load.
+                  isExternal: true,
+                  onClick: () => trackButtonClick("book now"),
                }}
                secondaryButton={{
                  href: rewardNightsURL,
-                  title: intl.formatMessage({
+                  text: intl.formatMessage({
                    id: "myPages.membershipPointsModal.priceList",
                    defaultMessage: "Price list",
                  }),
                  openInNewTab: true,
-                  materialIcon: (
-                    <MaterialIcon
-                      icon="open_in_new"
-                      color="CurrentColor"
-                      size={20}
-                    />
-                  ),
+                  trailingIconName: "open_in_new",
+                  onClick: () => trackButtonClick("price list"),
                }}
-                onPrimaryButtonClick={() => trackButtonClick("book now")}
-                onSecondaryButtonClick={() => trackButtonClick("price list")}
-                theme="primaryDark"
+                theme="Primary 3"
                imagePosition="top"
                height="dynamic"
-              ></InfoCard>
+              />
            ) : (
-              <InfoCard
+              <InfoCardWithImage
                heading={intl.formatMessage({
                  id: "myPages.membershipPointsModal.headingBelowThreshold",
                  defaultMessage:
@@ -168,24 +164,18 @@ export function UsePointsModal({
                })}
                secondaryButton={{
                  href: rewardNightsURL,
-                  title: intl.formatMessage({
+                  text: intl.formatMessage({
                    id: "myPages.membershipPointsModal.priceList",
                    defaultMessage: "Price list",
                  }),
                  openInNewTab: true,
-                  materialIcon: (
-                    <MaterialIcon
-                      icon="open_in_new"
-                      color="CurrentColor"
-                      size={20}
-                    />
-                  ),
+                  trailingIconName: "open_in_new",
+                  onClick: () => trackButtonClick("price list"),
                }}
-                onSecondaryButtonClick={() => trackButtonClick("price list")}
-                theme="primaryDark"
+                theme="Primary 3"
                imagePosition="top"
                height="dynamic"
-              ></InfoCard>
+              />
            )}
          </div>
          <div>
--- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx
@@ -1,6 +1,6 @@
 import { useIntl } from "react-intl"

-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import useRedeemFlow from "./useRedeemFlow"
@@ -42,17 +42,13 @@ export function ConfirmClose({ close }: { close: () => void }) {
        </Typography>
      </div>
      <footer className={styles.modalFooter}>
-        <Button
-          onClick={() => setRedeemStep("redeemed")}
-          intent="primary"
-          theme="base"
-        >
+        <Button onPress={() => setRedeemStep("redeemed")} variant="Primary">
          {intl.formatMessage({
            id: "redeem.confirmClose.goBack",
            defaultMessage: "No, go back",
          })}
        </Button>
-        <Button onClick={close} intent="secondary" theme="base">
+        <Button onPress={close} variant="Secondary">
          {intl.formatMessage({
            id: "redeem.confirmClose.confirm",
            defaultMessage: "Yes, close and remove benefit",
--- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx
@@ -2,8 +2,8 @@

 import { useIntl } from "react-intl"

+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { toast } from "@scandic-hotels/design-system/Toast"
 import { Typography } from "@scandic-hotels/design-system/Typography"

@@ -45,7 +45,7 @@ export default function Campaign({ reward }: { reward: Campaign }) {
      </div>
      <footer className={styles.modalFooter}>
        <Button
-          onClick={() => {
+          onPress={() => {
            try {
              navigator.clipboard.writeText(reward.operaRewardId)
              toast.success(
@@ -64,10 +64,8 @@ export default function Campaign({ reward }: { reward: Campaign }) {
            }
          }}
          type="button"
-          variant="icon"
-          size="small"
-          theme="base"
-          intent="primary"
+          variant="Primary"
+          size="sm"
        >
          <MaterialIcon icon="content_copy" color="CurrentColor" />
          {intl.formatMessage({
--- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Tier.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Tier.tsx
@@ -2,8 +2,8 @@

 import { useIntl } from "react-intl"

+import { Button } from "@scandic-hotels/design-system/Button"
 import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { isRestaurantOnSiteTierReward } from "@/utils/rewards"
@@ -87,9 +87,8 @@ export default function Tier({
          {redeemStep === "initial" && (
            <footer className={styles.modalFooter}>
              <Button
-                onClick={() => setRedeemStep("confirmation")}
-                intent="primary"
-                theme="base"
+                onPress={() => setRedeemStep("confirmation")}
+                variant="Primary"
              >
                {intl.formatMessage({
                  id: "redeemFlow.redeemBenefit",
@@ -102,10 +101,9 @@ export default function Tier({
          {redeemStep === "confirmation" && (
            <footer className={styles.modalFooter}>
              <Button
-                onClick={() => onRedeem(reward)}
-                disabled={isRedeeming}
-                intent="primary"
-                theme="base"
+                onPress={() => onRedeem(reward)}
+                isDisabled={isRedeeming}
+                variant="Primary"
              >
                {intl.formatMessage({
                  id: "redeemFlow.yesRedeem",
@@ -113,9 +111,8 @@ export default function Tier({
                })}
              </Button>
              <Button
-                onClick={() => setRedeemStep("initial")}
-                intent="secondary"
-                theme="base"
+                onPress={() => setRedeemStep("initial")}
+                variant="Secondary"
              >
                {intl.formatMessage({
                  id: "common.goBack",
--- a/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/UnlinkSAS.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/UnlinkSAS.tsx
@@ -3,8 +3,7 @@
 import { useParams } from "next/navigation"
 import { useIntl } from "react-intl"

-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import { Button } from "@scandic-hotels/design-system/Button"

 import Dialog from "@/components/Dialog"

@@ -35,12 +34,11 @@ export function UnlinkSAS() {
      })}
      proceedHref={`/${params.lang}/sas-x-scandic/login?intent=unlink`}
      trigger={
-        <Button intent="text" theme="base">
+        <Button variant="Text" trailingIconName="chevron_right">
          {intl.formatMessage({
            id: "partnerSas.unlinkAccounts",
            defaultMessage: "Unlink accounts",
          })}
-          <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
        </Button>
      }
    />
--- a/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsFormClient.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsFormClient.tsx
@@ -1,6 +1,5 @@
 "use client"

-import Link from "next/link"
 import { useParams } from "next/navigation"
 import { useContext, useState } from "react"
 import {
@@ -15,11 +14,12 @@ import {
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"

+import { Button } from "@scandic-hotels/design-system/Button"
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { FormInput } from "@scandic-hotels/design-system/Form/FormInput"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import Modal from "@scandic-hotels/design-system/Modal"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SAS_TRANSFER_POINT_KEY } from "@scandic-hotels/trpc/constants/partnerSAS"

@@ -183,9 +183,10 @@ function ConfirmModal({
  return (
    <>
      <Button
+        variant="Primary"
        className={styles.transferButton}
-        onClick={() => handleToggle(true)}
-        disabled={disabled}
+        onPress={() => handleToggle(true)}
+        isDisabled={disabled}
      >
        {intl.formatMessage({
          id: "partnerSas.exchangePoints",
@@ -249,22 +250,20 @@ function ConfirmModal({
          </Typography>
          <div className={styles.divider} />
          <div className={styles.buttonContainer}>
-            <Button asChild theme="base" fullWidth>
-              <Link
-                href={`/${lang}/sas-x-scandic/login?intent=transfer`}
-                color="none"
-              >
-                {intl.formatMessage({
-                  id: "partnerSas.yesIWantToExchangeMyPoints",
-                  defaultMessage: "Yes, I want to exchange my points",
-                })}
-              </Link>
-            </Button>
+            <ButtonLink
+              variant="Primary"
+              href={`/${lang}/sas-x-scandic/login?intent=transfer`}
+              fullWidth
+            >
+              {intl.formatMessage({
+                id: "partnerSas.yesIWantToExchangeMyPoints",
+                defaultMessage: "Yes, I want to exchange my points",
+              })}
+            </ButtonLink>
            <Button
              fullWidth
-              intent="text"
-              theme="base"
-              onClick={() => handleToggle(false)}
+              variant="Text"
+              onPress={() => handleToggle(false)}
            >
              {intl.formatMessage({
                id: "common.cancel",
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/OldClient.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/OldClient.tsx
@@ -1,6 +1,7 @@
 "use client"

 import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
+import { ShowMoreButton } from "@scandic-hotels/design-system/ShowMoreButton"
 import { trpc } from "@scandic-hotels/trpc/client"

 import Grids from "@/components/TempDesignSystem/Grids"
@@ -8,7 +9,6 @@ import useLang from "@/hooks/useLang"

 import ListContainer from "../ListContainer"
 import OldStayCard from "../OldStayCard"
-import ShowMoreButton from "../ShowMoreButton"

 import type {
  PreviousStaysClientProps,
@@ -58,7 +58,7 @@ export function ClientPreviousStays({
        ))}
      </Grids.Stackable>
      {hasNextPage ? (
-        <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
+        <ShowMoreButton isPending={isFetching} loadMoreData={loadMoreData} />
      ) : null}
    </ListContainer>
  )
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/SidePeek/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/SidePeek/index.tsx
@@ -6,13 +6,13 @@ import { useIntl } from "react-intl"
 import { useSidePeekScrollToTop } from "@scandic-hotels/common/hooks/useSidePeekScrollToTop"
 import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
 import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
+import { ShowMoreButton } from "@scandic-hotels/design-system/ShowMoreButton"
 import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"

 import useLang from "@/hooks/useLang"

-import ShowMoreButton from "../../ShowMoreButton"
 import { StayCard } from "../../StayCard"
 import { groupStaysByYear } from "../../utils/groupStaysByYear"

@@ -113,7 +113,7 @@ export function PreviousStaysSidePeek({
            ))}
            {hasNextPage && (
              <ShowMoreButton
-                disabled={isFetching}
+                isPending={isFetching}
                loadMoreData={loadMoreData}
              />
            )}
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/ShowMoreButton/button.module.css
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/ShowMoreButton/button.module.css
@@ -1,4 +0,0 @@
-.container {
-  display: flex;
-  justify-content: center;
-}
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/ShowMoreButton/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/ShowMoreButton/index.tsx
@@ -1,39 +0,0 @@
-"use client"
-
-import { useIntl } from "react-intl"
-
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-
-import styles from "./button.module.css"
-
-import type { ShowMoreButtonParams } from "@/types/components/myPages/stays/button"
-
-export default function ShowMoreButton({
-  disabled,
-  loadMoreData,
-}: ShowMoreButtonParams) {
-  const intl = useIntl()
-  return (
-    <div className={styles.container}>
-      <Button
-        disabled={disabled}
-        onClick={loadMoreData}
-        variant="icon"
-        type="button"
-        theme="base"
-        intent="text"
-      >
-        <MaterialIcon
-          icon="keyboard_arrow_down"
-          size={20}
-          color="CurrentColor"
-        />
-        {intl.formatMessage({
-          id: "common.showMore",
-          defaultMessage: "Show more",
-        })}
-      </Button>
-    </div>
-  )
-}
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/OldClient.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/OldClient.tsx
@@ -1,6 +1,7 @@
 "use client"

 import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
+import { ShowMoreButton } from "@scandic-hotels/design-system/ShowMoreButton"
 import { trpc } from "@scandic-hotels/trpc/client"

 import Grids from "@/components/TempDesignSystem/Grids"
@@ -8,7 +9,6 @@ import useLang from "@/hooks/useLang"

 import ListContainer from "../ListContainer"
 import OldStayCard from "../OldStayCard"
-import ShowMoreButton from "../ShowMoreButton"

 import type {
  UpcomingStaysClientProps,
@@ -58,7 +58,7 @@ export default function ClientUpcomingStays({
        ))}
      </Grids.Stackable>
      {hasNextPage ? (
-        <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
+        <ShowMoreButton isPending={isFetching} loadMoreData={loadMoreData} />
      ) : null}
    </ListContainer>
  ) : null
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/SidePeek/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/SidePeek/index.tsx
@@ -6,13 +6,13 @@ import { useIntl } from "react-intl"
 import { useSidePeekScrollToTop } from "@scandic-hotels/common/hooks/useSidePeekScrollToTop"
 import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
 import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
+import { ShowMoreButton } from "@scandic-hotels/design-system/ShowMoreButton"
 import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"

 import useLang from "@/hooks/useLang"

-import ShowMoreButton from "../../ShowMoreButton"
 import { StayCard } from "../../StayCard"
 import { groupStaysByYear } from "../../utils/groupStaysByYear"

@@ -113,7 +113,7 @@ export function UpcomingStaysSidePeek({
            ))}
            {hasNextPage && (
              <ShowMoreButton
-                disabled={isFetching}
+                isPending={isFetching}
                loadMoreData={loadMoreData}
              />
            )}