From 8e08af718c46fb1a378c346dfbf88531858fd283 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Wed, 21 Jan 2026 09:38:38 +0000 Subject: [PATCH] feat(BOOK-743): Replaced deprecated Button component Approved-by: Bianca Widstam --- .../components/DateOfBirthError.tsx | 17 +- .../components/TooManyCodesError.tsx | 4 +- .../components/TooManyFailedAttemptsError.tsx | 4 +- .../sas-x-scandic/link/LinkAccountForm.tsx | 7 +- .../sas-x-scandic/transfer/success/page.tsx | 59 +- .../components/Blocks/CardsGrid.tsx | 38 +- .../JobylonFeed/JobylonCard/index.tsx | 29 +- .../UsePoints/UsePointsModal.tsx | 48 +- .../Rewards/Redeem/ConfirmClose.tsx | 10 +- .../Rewards/Redeem/Flows/Campaign.tsx | 10 +- .../Rewards/Redeem/Flows/Tier.tsx | 19 +- .../SAS/LinkedAccounts/UnlinkSAS.tsx | 6 +- .../TransferPointsFormClient.tsx | 35 +- .../Stays/Previous/OldClient.tsx | 4 +- .../Stays/Previous/SidePeek/index.tsx | 4 +- .../Stays/ShowMoreButton/button.module.css | 4 - .../Stays/ShowMoreButton/index.tsx | 39 - .../Stays/Upcoming/OldClient.tsx | 4 +- .../Stays/Upcoming/SidePeek/index.tsx | 4 +- .../CityListing/CityListingItem/index.tsx | 30 +- .../DestinationPage/Sidepeek/index.tsx | 12 +- .../ContentType/StartPage/InfoCard/index.tsx | 54 -- .../StartPage/InfoCardWithImage/index.tsx | 43 + .../infoCardWithImage.module.css} | 0 .../components/DatePicker/Single/Mobile.tsx | 22 +- .../DatePicker/Single/mobile.module.css | 7 - .../EmployeeBenefits/AuthCard/index.tsx | 14 +- .../NavigationMenu/MegaMenu/index.tsx | 17 +- .../AddedAncillaries/RemoveButton.tsx | 6 +- .../MyStay/GuestDetails/index.tsx | 77 +- .../Modal/ModalContent/Footer/index.tsx | 60 +- .../HotelReservation/MyStay/Promo/index.tsx | 53 +- .../MyStay/Promo/promo.module.css | 1 + .../Actions/CustomerSupportModal/index.tsx | 9 +- .../ManageStay/Actions/CancelStay/Alerts.tsx | 5 +- .../CancelStay/Steps/Confirmation/index.tsx | 17 +- .../Steps/FinalConfirmation/index.tsx | 14 +- .../ChangeDates/Alerts/CannotChange/index.tsx | 5 +- .../Alerts/CustomerSupport/index.tsx | 5 +- .../ChangeDates/Alerts/NotMainRoom.tsx | 5 +- .../ChangeDates/Steps/Confirmation/index.tsx | 14 +- .../Actions/ChangeDates/Steps/Form/index.tsx | 13 +- .../GuaranteeDialog/index.tsx | 10 +- .../components/SasTierComparison/index.tsx | 14 +- .../sasTierComparison.module.css | 1 - apps/scandic-web/components/Sidebar/index.tsx | 20 +- .../TempDesignSystem/Card/card.module.css | 196 ---- .../components/TempDesignSystem/Card/card.ts | 34 - .../TempDesignSystem/Card/index.tsx | 129 --- .../components/TempDesignSystem/Card/utils.ts | 24 - .../TempDesignSystem/Card/variants.ts | 28 - .../types/components/blocks/infoCard.ts | 25 - .../GuestsRoomsPicker/GuestsRoom/index.tsx | 5 +- .../Details/MemberPriceModal/index.tsx | 4 +- .../PriceChangeSummary/index.tsx | 33 +- .../EnterDetails/PriceChangeDialog/index.tsx | 6 +- .../ListingHotelCardDialog/index.tsx | 27 +- .../MobileMapButtonContainer/index.tsx | 40 +- .../RateSummary/DesktopSummary.tsx | 7 +- .../RateSummary/rateSummary.module.css | 1 - .../Rooms/MultiRoomWrapper/index.tsx | 19 +- .../lib/components/ButtonLink/index.tsx | 12 +- .../lib/components/InfoCard/InfoCard.tsx | 6 +- .../lib/components/InfoCard/types.ts | 9 +- .../Modal/ModalContentWithActions/index.tsx | 60 +- .../modalContent.module.css | 11 +- .../components/OldDSButton/button.module.css | 843 ------------------ .../lib/components/OldDSButton/index.tsx | 72 -- .../lib/components/OldDSButton/variants.ts | 154 ---- packages/design-system/package.json | 1 - .../lib/routers/contentstack/base/output.ts | 12 +- .../{infoCard.ts => infoCardWithImage.ts} | 38 +- .../contentstack/schemas/blocks/cardsGrid.ts | 107 ++- .../schemas/sidebar/scriptedCard.ts | 22 +- packages/trpc/lib/types/cardsEnum.ts | 4 +- packages/trpc/lib/types/cardsGridEnum.ts | 4 +- packages/trpc/lib/types/sidebar.ts | 2 +- 77 files changed, 575 insertions(+), 2233 deletions(-) delete mode 100644 apps/scandic-web/components/Blocks/DynamicContent/Stays/ShowMoreButton/button.module.css delete mode 100644 apps/scandic-web/components/Blocks/DynamicContent/Stays/ShowMoreButton/index.tsx delete mode 100644 apps/scandic-web/components/ContentType/StartPage/InfoCard/index.tsx create mode 100644 apps/scandic-web/components/ContentType/StartPage/InfoCardWithImage/index.tsx rename apps/scandic-web/components/ContentType/StartPage/{InfoCard/infoCard.module.css => InfoCardWithImage/infoCardWithImage.module.css} (100%) delete mode 100644 apps/scandic-web/components/TempDesignSystem/Card/card.module.css delete mode 100644 apps/scandic-web/components/TempDesignSystem/Card/card.ts delete mode 100644 apps/scandic-web/components/TempDesignSystem/Card/index.tsx delete mode 100644 apps/scandic-web/components/TempDesignSystem/Card/utils.ts delete mode 100644 apps/scandic-web/components/TempDesignSystem/Card/variants.ts delete mode 100644 apps/scandic-web/types/components/blocks/infoCard.ts delete mode 100644 packages/design-system/lib/components/OldDSButton/button.module.css delete mode 100644 packages/design-system/lib/components/OldDSButton/index.tsx delete mode 100644 packages/design-system/lib/components/OldDSButton/variants.ts rename packages/trpc/lib/routers/contentstack/schemas/blocks/cards/{infoCard.ts => infoCardWithImage.ts} (51%) diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/DateOfBirthError.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/DateOfBirthError.tsx index e25dd0727..779103ef6 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/DateOfBirthError.tsx +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/DateOfBirthError.tsx @@ -1,10 +1,9 @@ "use client" -import { Link } from "react-aria-components" import { useIntl } from "react-intl" import { profile } from "@scandic-hotels/common/constants/routes/myPages" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" -import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" import useLang from "@/hooks/useLang" @@ -40,14 +39,12 @@ export function DateOfBirthError() { })}

- + + {intl.formatMessage({ + id: "linkEuroBonusAccount.viewYourDetailsButton", + defaultMessage: "View your details", + })} + diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyCodesError.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyCodesError.tsx index f7f589f38..6eb45d2e2 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyCodesError.tsx +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyCodesError.tsx @@ -2,7 +2,7 @@ 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 { GenericError } from "./GenericError" @@ -26,7 +26,7 @@ export function TooManyCodesError() { })}

- + {intl.formatMessage({ + id: "transferEuroBonusPoints.backToMyPagesButton", + defaultMessage: "Go back to My Pages", + })} + ) @@ -146,31 +143,21 @@ async function TransactionCard({

- + {intl.formatMessage({ + id: "transferEuroBonusPoints.bookNowButton", + defaultMessage: "Book now", + })} + )} diff --git a/apps/scandic-web/components/Blocks/CardsGrid.tsx b/apps/scandic-web/components/Blocks/CardsGrid.tsx index 675a7fd3b..c73a9fcc9 100644 --- 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({ {cards_grid.cards.map((card, index) => { switch (card.__typename) { - case CardsGridEnum.cards.Card: - return ( - - ) case CardsGridEnum.cards.InfoCard: return ( + ) + case CardsGridEnum.cards.InfoCardWithImage: + return ( + ) diff --git a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx index ce816befe..aef98a2ce 100644 --- 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) { - + {intl.formatMessage({ + id: "jobylonFeed.card.viewAndApplyButton", + defaultMessage: "View & apply", + })} + ) diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/UsePoints/UsePointsModal.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/UsePoints/UsePointsModal.tsx index 6eb3328b5..1802a7001 100644 --- 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({
{points >= 10000 ? ( - trackButtonClick("book now"), }} secondaryButton={{ href: rewardNightsURL, - title: intl.formatMessage({ + text: intl.formatMessage({ id: "myPages.membershipPointsModal.priceList", defaultMessage: "Price list", }), openInNewTab: true, - materialIcon: ( - - ), + 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" - > + /> ) : ( - - ), + trailingIconName: "open_in_new", + onClick: () => trackButtonClick("price list"), }} - onSecondaryButtonClick={() => trackButtonClick("price list")} - theme="primaryDark" + theme="Primary 3" imagePosition="top" height="dynamic" - > + /> )}
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx index 56fbd12b8..ac1627eff 100644 --- 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 }) {