scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(BOOK-743): Replaced deprecated Button component

Browse Source 
Approved-by: Bianca Widstam
This commit is contained in:
Erik Tiekstra
2026-01-21 09:38:38 +00:00
parent f834433d4d
commit 8e08af718c
77 changed files with 575 additions and 2233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/DateOfBirthError.tsx
View File

@@ -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() {
})}
</p>
</Typography>
<Button theme="base" asChild>
<Link href={profile[lang]}>
{intl.formatMessage({
id: "linkEuroBonusAccount.viewYourDetailsButton",
defaultMessage: "View your details",
})}
</Link>
</Button>
<ButtonLink href={profile[lang]} variant="Primary">
{intl.formatMessage({
id: "linkEuroBonusAccount.viewYourDetailsButton",
defaultMessage: "View your details",
})}
</ButtonLink>
<SASModalDivider />
<SASModalContactBlock />
</SASModal>

4
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyCodesError.tsx
View File

@@ -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() {
})}
</p>
</Typography>
<Button theme="base" disabled>
<Button variant="Primary" isDisabled>
{intl.formatMessage({
id: "linkEuroBonusAccount.sendNewCodeButton",
defaultMessage: "Send new code",

4
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyFailedAttemptsError.tsx
View File

@@ -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 TooManyFailedAttemptsError() {
})}
</p>
</Typography>
<Button theme="base" disabled>
<Button variant="Primary" isDisabled>
{intl.formatMessage({
id: "linkEuroBonusAccount.sendNewCodeButton",
defaultMessage: "Send new code",

7
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx
View File

@@ -6,10 +6,10 @@ import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { profileEdit } from "@scandic-hotels/common/constants/routes/myPages"
import { Button } from "@scandic-hotels/design-system/Button"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Image from "@scandic-hotels/design-system/Image"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Link from "@scandic-hotels/design-system/OldDSLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -159,11 +159,12 @@ export function LinkAccountForm({
</div>
<div className={styles.ctaContainer}>
<Button
theme="base"
variant="Primary"
fullWidth
className={styles.ctaButton}
type="submit"
disabled={isPending || disableSubmit}
isDisabled={disableSubmit}
isPending={isPending}
>
{intl.formatMessage({
id: "linkEuroBonusAccount.linkMyAccountsButton",

59
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/transfer/success/page.tsx
View File

@@ -1,11 +1,9 @@
import Link from "next/link"
import React, { Suspense } from "react"
import { Suspense } from "react"
import { hotelreservation } from "@scandic-hotels/common/constants/routes/hotelReservation"
import { partnerSas } from "@scandic-hotels/common/constants/routes/myPages"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import Image from "@scandic-hotels/design-system/Image"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -53,19 +51,18 @@ export default async function SASxScandicTransferSuccessPage(
</Typography>
<TransactionCard addedPoints={addedPoints} lang={lang} />
<div className={styles.divider} />
<Button
theme="primaryLight"
asChild
<ButtonLink
href={partnerSas[lang]}
variant="Primary"
color="Inverted"
fullWidth
className={styles.backButton}
>
<Link href={partnerSas[lang]} color="none">
{intl.formatMessage({
id: "transferEuroBonusPoints.backToMyPagesButton",
defaultMessage: "Go back to My Pages",
})}
</Link>
</Button>
{intl.formatMessage({
id: "transferEuroBonusPoints.backToMyPagesButton",
defaultMessage: "Go back to My Pages",
})}
</ButtonLink>
</div>
</SASModal>
)
@@ -146,31 +143,21 @@ async function TransactionCard({
</p>
</Typography>
</div>
<Button
theme="primaryLight"
intent="secondary"
size="small"
{/* TODO correct link */}
<ButtonLink
href={hotelreservation(lang)}
color="Inverted"
variant="Secondary"
size="sm"
fullWidth
className={styles.bookButton}
asChild
trailingIconName="calendar_add_on"
>
{/* TODO correct link */}
<Link href={hotelreservation(lang)} color="none">
{intl.formatMessage({
id: "transferEuroBonusPoints.bookNowButton",
defaultMessage: "Book now",
})}
{
/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */
" "
}
<MaterialIcon
icon="calendar_add_on"
size={20}
color="CurrentColor"
/>
</Link>
</Button>
{intl.formatMessage({
id: "transferEuroBonusPoints.bookNowButton",
defaultMessage: "Book now",
})}
</ButtonLink>
</div>
)}
</div>

38
apps/scandic-web/components/Blocks/CardsGrid.tsx
View File

@@ -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"}
/>
)

29
apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx
View File

@@ -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>
)

48
apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/UsePoints/UsePointsModal.tsx
View File

@@ -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>

10
apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx
View File

@@ -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",

10
apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx
View File

@@ -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({

19
apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Tier.tsx
View File

@@ -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",

6
apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/UnlinkSAS.tsx
View File

@@ -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>
}
/>

35
apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsFormClient.tsx
View File

@@ -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",

4
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/OldClient.tsx
View File

@@ -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>
)

4
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/SidePeek/index.tsx
View File

@@ -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}
/>
)}

4
apps/scandic-web/components/Blocks/DynamicContent/Stays/ShowMoreButton/button.module.css
View File

@@ -1,4 +0,0 @@
.container {
display: flex;
justify-content: center;
}

39
apps/scandic-web/components/Blocks/DynamicContent/Stays/ShowMoreButton/index.tsx
View File

@@ -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>
)
}

4
apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/OldClient.tsx
View File

@@ -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

4
apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/SidePeek/index.tsx
View File

@@ -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}
/>
)}

30
apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/CityListing/CityListingItem/index.tsx
View File

@@ -1,11 +1,10 @@
"use client"
import Link from "next/link"
import { useIntl } from "react-intl"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { Divider } from "@scandic-hotels/design-system/Divider"
import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery"
@@ -53,23 +52,20 @@ export default function CityListingItem({ city }: CityListingItemProps) {
<Divider color="Border/Divider/Subtle" />
<div className={styles.ctaWrapper}>
<Button
intent="tertiary"
theme="base"
size="small"
<ButtonLink
href={city.url}
variant="Tertiary"
size="sm"
className={styles.button}
asChild
>
<Link href={city.url}>
{intl.formatMessage(
{
id: "destination.cityList.exploreCity",
defaultMessage: "Explore {city}",
},
{ city: city.cityName }
)}
</Link>
</Button>
{intl.formatMessage(
{
id: "destination.cityList.exploreCity",
defaultMessage: "Explore {city}",
},
{ city: city.cityName }
)}
</ButtonLink>
</div>
</section>
</article>

12
apps/scandic-web/components/ContentType/DestinationPage/Sidepeek/index.tsx
View File

@@ -3,9 +3,8 @@
import { useState } from "react"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
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 SidePeek from "@scandic-hotels/design-system/SidePeek"
import { trackOpenSidePeekOnDestinationPagesEvent } from "@/utils/tracking/destinationPage"
@@ -43,18 +42,15 @@ export default function DestinationPageSidepeek({
<div>
<Button
onPress={handleButtonClick}
theme="base"
variant="icon"
intent="text"
size="small"
wrapping
variant="Text"
size="sm"
trailingIconName="chevron_right"
>
{buttonText ||
intl.formatMessage({
id: "common.readMore",
defaultMessage: "Read more",
})}
<MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
</Button>
<SidePeek
title={heading}

54
apps/scandic-web/components/ContentType/StartPage/InfoCard/index.tsx
View File

@@ -1,54 +0,0 @@
import Image from "@scandic-hotels/design-system/Image"
import Card from "@/components/TempDesignSystem/Card"
import styles from "./infoCard.module.css"
import type { InfoCardProps } from "@/types/components/blocks/infoCard"
export default function InfoCard({
scriptedTopTitle,
heading,
bodyText,
image,
primaryButton,
secondaryButton,
onPrimaryButtonClick,
onSecondaryButtonClick,
theme = "one",
imagePosition = "right",
height = "fixed",
}: InfoCardProps) {
return (
<article className={styles.container}>
{image ? (
<div
className={`${styles.imageContainer} ${styles[`image-${imagePosition}`]}`}
>
<Image
src={image.url}
alt={image.title}
sizes="(min-width: 768px) 724px, 358px"
width={358}
height={179}
focalPoint={image.focalPoint}
dimensions={image.dimensions}
className={imagePosition === "top" ? styles.imageTop : styles.image}
/>
</div>
) : null}
<Card
scriptedTopTitle={scriptedTopTitle}
heading={heading}
bodyText={bodyText}
primaryButton={primaryButton}
secondaryButton={secondaryButton}
onPrimaryButtonClick={onPrimaryButtonClick}
onSecondaryButtonClick={onSecondaryButtonClick}
className={styles.card}
theme={theme}
height={height}
/>
</article>
)
}

43
apps/scandic-web/components/ContentType/StartPage/InfoCardWithImage/index.tsx Normal file
View File

@@ -0,0 +1,43 @@
import Image from "@scandic-hotels/design-system/Image"
import {
InfoCard,
type InfoCardProps,
} from "@scandic-hotels/design-system/InfoCard"
import styles from "./infoCardWithImage.module.css"
import type { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault"
export interface InfoCardWithImageProps extends InfoCardProps {
image?: ImageVaultAsset
imagePosition?: "left" | "right" | "top"
}
export default function InfoCardWithImage({
image,
imagePosition = "right",
theme = "Primary 1",
...props
}: InfoCardWithImageProps) {
return (
<article className={styles.container}>
{image ? (
<div
className={`${styles.imageContainer} ${styles[`image-${imagePosition}`]}`}
>
<Image
src={image.url}
alt={image.title}
sizes="(min-width: 768px) 724px, 358px"
width={358}
height={179}
focalPoint={image.focalPoint}
dimensions={image.dimensions}
className={imagePosition === "top" ? styles.imageTop : styles.image}
/>
</div>
) : null}
<InfoCard {...props} theme={theme} className={styles.card} />
</article>
)
}

0
apps/scandic-web/components/ContentType/StartPage/InfoCard/infoCard.module.css → apps/scandic-web/components/ContentType/StartPage/InfoCardWithImage/infoCardWithImage.module.css
View File

22
apps/scandic-web/components/DatePicker/Single/Mobile.tsx
View File

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
import { Lang } from "@scandic-hotels/common/constants/language"
import { dt } from "@scandic-hotels/common/dt"
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 useLang from "@/hooks/useLang"
@@ -93,21 +93,11 @@ export default function DatePickerSingleMobile({
}}
/>
<footer className={styles.footer}>
<Button
className={styles.button}
intent="tertiary"
onPress={close}
size="large"
theme="base"
>
<Typography variant="Body/Paragraph/mdBold">
<span>
{intl.formatMessage({
id: "datePicker.selectDates",
defaultMessage: "Select dates",
})}
</span>
</Typography>
<Button variant="Tertiary" onPress={close} size="lg" fullWidth>
{intl.formatMessage({
id: "datePicker.selectDates",
defaultMessage: "Select dates",
})}
</Button>
</footer>
</div>

7
apps/scandic-web/components/DatePicker/Single/mobile.module.css
View File

@@ -86,13 +86,6 @@ div.months {
z-index: 10;
}
.footer .button {
width: 100%;
span {
color: white;
}
}
td.day,
td.rangeEnd,
td.rangeStart {

14
apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/AuthCard/index.tsx
View File

@@ -1,7 +1,7 @@
import { login } from "@scandic-hotels/common/constants/routes/handleAuth"
import { signup } from "@scandic-hotels/common/constants/routes/signup"
import { InfoCard } from "@scandic-hotels/design-system/InfoCard"
import Card from "@/components/TempDesignSystem/Card"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { isLoggedInUser } from "@/utils/isLoggedInUser"
@@ -20,9 +20,9 @@ export default async function EmployeeBenefitsAuthCard() {
}
return (
<Card
<InfoCard
className={styles.card}
scriptedTopTitle={intl.formatMessage({
topTitle={intl.formatMessage({
id: "dtmc.letsBeFriends",
defaultMessage: "Let’s be friends!",
})}
@@ -32,21 +32,19 @@ export default async function EmployeeBenefitsAuthCard() {
})}
primaryButton={{
href: login[lang],
title: intl.formatMessage({
text: intl.formatMessage({
id: "dtmc.logIn",
defaultMessage: "Log in",
}),
openInNewTab: false,
}}
secondaryButton={{
href: signup[lang],
title: intl.formatMessage({
text: intl.formatMessage({
id: "common.signUp",
defaultMessage: "Sign up",
}),
openInNewTab: false,
}}
theme="primaryInverted"
theme="White"
/>
)
}

17
apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
View File

@@ -6,12 +6,11 @@ import FocusLock from "react-focus-lock"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { InfoCard } from "@scandic-hotels/design-system/InfoCard"
import { Typography } from "@scandic-hotels/design-system/Typography"
import useDropdownStore from "@/stores/main-menu"
import Card from "@/components/TempDesignSystem/Card"
import { MenuLink } from "../../MenuLink"
import styles from "./megaMenu.module.css"
@@ -97,18 +96,10 @@ export default function MegaMenu({
</div>
{card ? (
<div className={styles.cardWrapper}>
<Card
<InfoCard
className={styles.card}
backgroundImage={card.backgroundImage}
bodyText={card.body_text}
heading={card.heading}
primaryButton={card.primaryButton}
secondaryButton={card.secondaryButton}
scriptedTopTitle={card.scripted_top_title}
onPrimaryButtonClick={handleNavigate}
onSecondaryButtonClick={handleNavigate}
imageGradient
theme="image"
{...card}
theme={card.backgroundImage ? "Image" : "Primary 1"}
height="dynamic"
/>
</div>

6
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/RemoveButton.tsx
View File

@@ -1,8 +1,7 @@
import { useRouter } 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 { toast } from "@scandic-hotels/design-system/Toast"
import { trpc } from "@scandic-hotels/trpc/client"
@@ -56,8 +55,7 @@ export default function RemoveButton({
defaultMessage: "Remove",
})} ${title}`}
trigger={
<Button intent="text" size="small" variant="icon" theme="base">
<MaterialIcon icon="delete" color="CurrentColor" />
<Button variant="Text" size="sm" leadingIconName="delete">
{intl.formatMessage({
id: "common.remove",
defaultMessage: "Remove",

77
apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx
View File

@@ -8,10 +8,10 @@ import { useIntl } from "react-intl"
import { profileEdit } from "@scandic-hotels/common/constants/routes/myPages"
import { formatPhoneNumber } from "@scandic-hotels/common/utils/phone"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Modal from "@scandic-hotels/design-system/Modal"
import { ModalContentWithActions } from "@scandic-hotels/design-system/Modal/ModalContentWithActions"
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"
import { trpc } from "@scandic-hotels/trpc/client"
@@ -232,56 +232,32 @@ export default function GuestDetails({
<>
{isMemberBooking ? (
<Button
variant="icon"
color="burgundy"
intent="secondary"
onClick={handleModifyMemberDetails}
disabled={isCancelled}
size="small"
variant="Secondary"
onPress={handleModifyMemberDetails}
isDisabled={isCancelled}
size="sm"
leadingIconName="edit"
>
<MaterialIcon
icon="edit"
color="Icon/Interactive/Default"
size={20}
/>
<Typography variant="Body/Paragraph/mdRegular">
<span>
{intl.formatMessage({
id: "myStay.guestDetails.modifyGuestDetails",
defaultMessage: "Edit guest details",
})}
</span>
</Typography>
{intl.formatMessage({
id: "myStay.guestDetails.modifyGuestDetails",
defaultMessage: "Edit guest details",
})}
</Button>
) : (
<>
<Button
variant="icon"
color="burgundy"
intent="secondary"
onClick={() =>
variant="Secondary"
onPress={() =>
setIsModifyGuestDetailsOpen(!isModifyGuestDetailsOpen)
}
disabled={isCancelled}
size="small"
isDisabled={isCancelled}
size="sm"
leadingIconName="edit"
>
<MaterialIcon
icon="edit"
color={
isCancelled
? "Icon/Interactive/Disabled"
: "Icon/Interactive/Default"
}
size={20}
/>
<Typography variant="Body/Paragraph/mdRegular">
<span>
{intl.formatMessage({
id: "myStay.guestDetails.modifyGuestDetails",
defaultMessage: "Edit guest details",
})}
</span>
</Typography>
{intl.formatMessage({
id: "myStay.guestDetails.modifyGuestDetails",
defaultMessage: "Edit guest details",
})}
</Button>
{isModifyGuestDetailsOpen && (
<Modal
@@ -322,11 +298,14 @@ export default function GuestDetails({
id: "common.confirm",
defaultMessage: "Confirm",
}),
onClick: isFirstStep
? () => setCurrentStep(MODAL_STEPS.CONFIRMATION)
: form.handleSubmit(onSubmit),
disabled: !form.formState.isValid || isLoading,
intent: isFirstStep ? "secondary" : "primary",
onPress: () =>
isFirstStep
? setCurrentStep(MODAL_STEPS.CONFIRMATION)
: form.handleSubmit(onSubmit)(),
type: isFirstStep ? "button" : "submit",
isDisabled: !form.formState.isValid,
isPending: isLoading,
variant: isFirstStep ? "Secondary" : "Primary",
}}
secondaryAction={{
label: isFirstStep
@@ -338,7 +317,7 @@ export default function GuestDetails({
id: "common.cancel",
defaultMessage: "Cancel",
}),
onClick: () => {
onPress: () => {
close()
setCurrentStep(MODAL_STEPS.INITIAL)
},

60
apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Footer/index.tsx
View File

@@ -1,65 +1,7 @@
import {
type ButtonProps as _ButtonProps,
OldDSButton as Button,
} from "@scandic-hotels/design-system/OldDSButton"
import styles from "./footer.module.css"
import type { ButtonHTMLAttributes, PropsWithChildren } from "react"
import type { ButtonProps as ReactAriaButtonProps } from "react-aria-components"
import type { PropsWithChildren } from "react"
export default function Footer({ children }: PropsWithChildren) {
return <footer className={styles.footer}>{children}</footer>
}
interface ButtonProps extends PropsWithChildren {
intent?: _ButtonProps["intent"]
onClick?: ReactAriaButtonProps["onPress"]
type?: ButtonHTMLAttributes<HTMLButtonElement>["type"]
}
interface PrimaryButtonProps extends ButtonProps {
disabled?: boolean
form?: string
}
Footer.Primary = function PrimaryButton({
children,
disabled = false,
form,
intent = "primary",
onClick,
type = "button",
}: PrimaryButtonProps) {
return (
<Button
disabled={disabled}
form={form}
intent={intent}
onClick={onClick}
theme="base"
type={type}
>
{children}
</Button>
)
}
Footer.Secondary = function SecondaryButton({
children,
intent = "text",
onClick,
type = "button",
}: ButtonProps) {
return (
<Button
color="burgundy"
intent={intent}
onClick={onClick}
theme="base"
type={type}
>
{children}
</Button>
)
}

53
apps/scandic-web/components/HotelReservation/MyStay/Promo/index.tsx
View File

@@ -1,6 +1,7 @@
import NextLink from "next/link"
import { FakeButton } from "@scandic-hotels/design-system/FakeButton"
import Image from "@scandic-hotels/design-system/Image"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Link from "@scandic-hotels/design-system/OldDSLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "./promo.module.css"
@@ -25,31 +26,29 @@ export default function Promo({
image,
}: PromoProps) {
return (
<Link color="none" href={href}>
<article className={styles.promo}>
{image && (
<div className={styles.imageContainer}>
<Image
className={styles.image}
src={image.src}
alt={image.altText || image.altText_En}
fill
/>
</div>
)}
<div className={styles.overlay} />
<div className={styles.content}>
<Typography variant="Title/smLowCase">
<p>{title}</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.text}>{text}</p>
</Typography>
<Button asChild intent="secondary" size="small" theme="primaryStrong">
<span>{buttonText}</span>
</Button>
<NextLink className={styles.promo} href={href}>
{image && (
<div className={styles.imageContainer}>
<Image
className={styles.image}
src={image.src}
alt={image.altText || image.altText_En}
fill
/>
</div>
</article>
</Link>
)}
<div className={styles.overlay} />
<div className={styles.content}>
<Typography variant="Title/smLowCase">
<p>{title}</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.text}>{text}</p>
</Typography>
<FakeButton variant="Secondary" color="Inverted" size="sm">
{buttonText}
</FakeButton>
</div>
</NextLink>
)
}

1
apps/scandic-web/components/HotelReservation/MyStay/Promo/promo.module.css
View File

@@ -3,6 +3,7 @@
position: relative;
display: flex;
overflow: hidden;
text-decoration: none;
}
.content {

9
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/CustomerSupportModal/index.tsx
View File

@@ -3,6 +3,7 @@ import Link from "next/link"
import { Dialog } from "react-aria-components"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -69,18 +70,18 @@ export default function CustomerSupportModal() {
</div>
</Modal.Content.Body>
<Modal.Content.Footer>
<Modal.Content.Footer.Secondary onClick={close}>
<Button variant="Text" onPress={close}>
{intl.formatMessage({
id: "common.back",
defaultMessage: "Back",
})}
</Modal.Content.Footer.Secondary>
<Modal.Content.Footer.Primary intent="secondary" onClick={close}>
</Button>
<Button variant="Secondary" onPress={close}>
{intl.formatMessage({
id: "common.close",
defaultMessage: "Close",
})}
</Modal.Content.Footer.Primary>
</Button>
</Modal.Content.Footer>
</Modal.Content>
)}

5
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/CancelStay/Alerts.tsx
View File

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
import { CancellationRuleEnum } from "@scandic-hotels/common/constants/booking"
import { Alert } from "@scandic-hotels/design-system/Alert"
import { Button } from "@scandic-hotels/design-system/Button"
import { useMyStayStore } from "@/stores/my-stay"
@@ -64,12 +65,12 @@ export default function Alerts({ children, closeModal }: AlertsProps) {
<Alert type={AlertTypeEnum.Info} heading={heading} text={text} />
</Modal.Content.Body>
<Modal.Content.Footer>
<Modal.Content.Footer.Secondary onClick={closeModal}>
<Button variant="Text" onPress={closeModal}>
{intl.formatMessage({
id: "common.back",
defaultMessage: "Back",
})}
</Modal.Content.Footer.Secondary>
</Button>
</Modal.Content.Footer>
</Modal.Content>
)

17
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/CancelStay/Steps/Confirmation/index.tsx
View File

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
import { longDateWithYearFormat } from "@scandic-hotels/common/constants/dateFormats"
import { dt } from "@scandic-hotels/common/dt"
import { Button } from "@scandic-hotels/design-system/Button"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useMyStayStore } from "@/stores/my-stay"
@@ -116,25 +117,25 @@ export default function CancelStayConfirmation({
</form>
</Modal.Content.Body>
<Modal.Content.Footer>
<Modal.Content.Footer.Secondary onClick={closeModal}>
<Button variant="Text" onPress={closeModal}>
{secondaryLabel}
</Modal.Content.Footer.Secondary>
</Button>
{isCancelable ? (
<Modal.Content.Footer.Primary
disabled={!isValid}
<Button
isDisabled={!isValid}
form="cancel-stay"
intent="secondary"
variant="Secondary"
type="submit"
>
{primaryLabel}
</Modal.Content.Footer.Primary>
</Button>
) : (
<Modal.Content.Footer.Primary intent="secondary" onClick={closeModal}>
<Button variant="Secondary" onPress={closeModal}>
{intl.formatMessage({
id: "common.close",
defaultMessage: "Close",
})}
</Modal.Content.Footer.Primary>
</Button>
)}
</Modal.Content.Footer>
</Modal.Content>

14
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/CancelStay/Steps/FinalConfirmation/index.tsx
View File

@@ -3,6 +3,7 @@ import { differenceInCalendarDays } from "date-fns"
import { useWatch } from "react-hook-form"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { toast } from "@scandic-hotels/design-system/Toast"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trpc } from "@scandic-hotels/trpc/client"
@@ -188,15 +189,16 @@ export default function FinalConfirmation({
<CancelStayPriceContainer />
</Modal.Content.Body>
<Modal.Content.Footer>
<Modal.Content.Footer.Secondary onClick={closeModal}>
<Button variant="Text" onPress={closeModal}>
{dontCancel}
</Modal.Content.Footer.Secondary>
<Modal.Content.Footer.Primary
disabled={cancelBookingsMutation.isPending}
onClick={cancelBooking}
</Button>
<Button
variant="Primary"
isPending={cancelBookingsMutation.isPending}
onPress={cancelBooking}
>
{confirm}
</Modal.Content.Footer.Primary>
</Button>
</Modal.Content.Footer>
</Modal.Content>
)

5
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Alerts/CannotChange/index.tsx
View File

@@ -1,6 +1,7 @@
"use client"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useMyStayStore } from "@/stores/my-stay"
@@ -45,9 +46,9 @@ export default function CannotChangeDate({
</Typography>
</Modal.Content.Body>
<Modal.Content.Footer>
<Modal.Content.Footer.Secondary onClick={closeModal}>
<Button variant="Text" onPress={closeModal}>
{intl.formatMessage({ defaultMessage: "Back", id: "common.back" })}
</Modal.Content.Footer.Secondary>
</Button>
</Modal.Content.Footer>
</Modal.Content>
)

5
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Alerts/CustomerSupport/index.tsx
View File

@@ -2,6 +2,7 @@
import Link from "next/link"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -69,9 +70,9 @@ export default function CustomerSupport({
</div>
</Modal.Content.Body>
<Modal.Content.Footer>
<Modal.Content.Footer.Secondary onClick={closeModal}>
<Button variant="Text" onPress={closeModal}>
{intl.formatMessage({ defaultMessage: "Back", id: "common.back" })}
</Modal.Content.Footer.Secondary>
</Button>
</Modal.Content.Footer>
</Modal.Content>
)

5
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Alerts/NotMainRoom.tsx
View File

@@ -3,6 +3,7 @@ import { useIntl } from "react-intl"
import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
import { Alert } from "@scandic-hotels/design-system/Alert"
import { Button } from "@scandic-hotels/design-system/Button"
import Modal from "@/components/HotelReservation/MyStay/Modal"
@@ -36,9 +37,9 @@ export default function NotMainRoom({
/>
</Modal.Content.Body>
<Modal.Content.Footer>
<Modal.Content.Footer.Secondary onClick={closeModal}>
<Button variant="Text" onPress={closeModal}>
{intl.formatMessage({ defaultMessage: "Back", id: "common.back" })}
</Modal.Content.Footer.Secondary>
</Button>
</Modal.Content.Footer>
</Modal.Content>
)

14
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Confirmation/index.tsx
View File

@@ -3,6 +3,7 @@ import { useIntl } from "react-intl"
import { longDateWithYearFormat } from "@scandic-hotels/common/constants/dateFormats"
import { dt } from "@scandic-hotels/common/dt"
import { Button } from "@scandic-hotels/design-system/Button"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { toast } from "@scandic-hotels/design-system/Toast"
import { trpc } from "@scandic-hotels/trpc/client"
@@ -180,18 +181,19 @@ export default function Confirmation({
</div>
</Modal.Content.Body>
<Modal.Content.Footer>
<Modal.Content.Footer.Secondary onClick={closeModal}>
<Button variant="Text" onPress={closeModal}>
{intl.formatMessage({ defaultMessage: "Back", id: "common.back" })}
</Modal.Content.Footer.Secondary>
<Modal.Content.Footer.Primary
disabled={updateBooking.isPending}
onClick={handleModifyStay}
</Button>
<Button
variant="Primary"
isPending={updateBooking.isPending}
onPress={handleModifyStay}
>
{intl.formatMessage({
defaultMessage: "Confirm",
id: "common.confirm",
})}
</Modal.Content.Footer.Primary>
</Button>
</Modal.Content.Footer>
</Modal.Content>
)

13
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Form/index.tsx
View File

@@ -4,6 +4,7 @@ import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { dt } from "@scandic-hotels/common/dt"
import { Button } from "@scandic-hotels/design-system/Button"
import { toast } from "@scandic-hotels/design-system/Toast"
import { useMyStayStore } from "@/stores/my-stay"
@@ -68,22 +69,22 @@ export default function Form({
<NewDates checkInDate={checkInDate} checkOutDate={checkOutDate} />
</Modal.Content.Body>
<Modal.Content.Footer>
<Modal.Content.Footer.Secondary onClick={closeModal}>
<Button variant="Text" onPress={closeModal}>
{intl.formatMessage({
defaultMessage: "Back",
id: "common.back",
})}
</Modal.Content.Footer.Secondary>
<Modal.Content.Footer.Primary
disabled={methods.formState.isSubmitting}
intent="secondary"
</Button>
<Button
variant="Secondary"
type="submit"
isPending={methods.formState.isSubmitting}
>
{intl.formatMessage({
id: "myStay.actions.changeDates.checkAvailability",
defaultMessage: "Check availability",
})}
</Modal.Content.Footer.Primary>
</Button>
</Modal.Content.Footer>
</Modal.Content>
</form>

10
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/GuaranteeLateArrival/GuaranteeDialog/index.tsx
View File

@@ -1,6 +1,8 @@
import { Dialog } from "react-aria-components"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import Modal from "@/components/HotelReservation/MyStay/Modal"
import Form from "../Form"
@@ -28,18 +30,18 @@ export default function GuaranteeDialog({ error }: GuaranteeDialogProps) {
<Form error={error} />
</Modal.Content.Body>
<Modal.Content.Footer>
<Modal.Content.Footer.Secondary onClick={close}>
<Button variant="Text" onPress={close}>
{intl.formatMessage({
id: "common.back",
defaultMessage: "Back",
})}
</Modal.Content.Footer.Secondary>
<Modal.Content.Footer.Primary form="guarantee" type="submit">
</Button>
<Button variant="Primary" form="guarantee" type="submit">
{intl.formatMessage({
id: "common.confirm",
defaultMessage: "Confirm",
})}
</Modal.Content.Footer.Primary>
</Button>
</Modal.Content.Footer>
</Modal.Content>
)}

14
apps/scandic-web/components/SasTierComparison/index.tsx
View File

@@ -1,9 +1,9 @@
"use client"
import Image from "next/image"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Link from "@scandic-hotels/design-system/OldDSLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -68,11 +68,13 @@ export function SasTierComparison({
</div>
</div>
{tierComparison.cta?.link && (
<Button theme="primaryLight" asChild className={styles.ctaButton}>
<Link href={tierComparison.cta.link.url} color="white">
{tierComparison.cta.title || tierComparison.cta.link.title}
</Link>
</Button>
<ButtonLink
variant="Tertiary"
className={styles.ctaButton}
href={tierComparison.cta.link.url}
>
{tierComparison.cta.title || tierComparison.cta.link.title}
</ButtonLink>
)}
</Section>
)

1
apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css
View File

@@ -196,7 +196,6 @@
}
a.ctaButton {
width: fit-content;
margin: 0 auto;
}

20
apps/scandic-web/components/Sidebar/index.tsx
View File

@@ -1,3 +1,4 @@
import { InfoCard } from "@scandic-hotels/design-system/InfoCard"
import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
import { TeaserCard } from "@scandic-hotels/design-system/TeaserCard"
import { DynamicContentEnum } from "@scandic-hotels/trpc/types/dynamicContent"
@@ -7,7 +8,6 @@ import { CookieConsentButton } from "@/components/Blocks/DynamicContent/ManageCo
import EmployeeBenefitsAuthCard from "@/components/DigitalTeamMemberCard/EmployeeBenefits/AuthCard"
import ShortcutsList from "../Blocks/ShortcutsList"
import Card from "../TempDesignSystem/Card"
import JoinLoyaltyContact from "./JoinLoyalty"
import styles from "./sidebar.module.css"
@@ -46,21 +46,21 @@ export default function Sidebar({ blocks }: SidebarProps) {
block={block.join_loyalty_contact}
/>
)
case SidebarEnums.blocks.ScriptedCard:
case SidebarEnums.blocks.InfoCard:
if (!block.scripted_card) {
return null
}
return (
<Card
<InfoCard
key={block.scripted_card.system.uid}
heading={block.scripted_card.heading}
secondaryButton={block.scripted_card.secondaryButton}
primaryButton={block.scripted_card.primaryButton}
bodyText={block.scripted_card.body_text}
scriptedTopTitle={block.scripted_card.scripted_top_title}
theme={block.scripted_card.theme ?? "image"}
backgroundImage={block.scripted_card.backgroundImage}
{...block.scripted_card}
topTitleAngled
theme={
block.scripted_card.backgroundImage
? "Image"
: block.scripted_card.theme
}
/>
)
case SidebarEnums.blocks.TeaserCard:

196
apps/scandic-web/components/TempDesignSystem/Card/card.module.css
View File

@@ -1,196 +0,0 @@
.container {
position: relative;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
border-radius: var(--Corner-radius-md);
margin-right: var(--Space-x2);
text-align: center;
width: 100%;
text-wrap: wrap;
overflow: hidden;
}
.fixed {
height: 320px; /* Fixed height from Figma */
}
.dynamic {
height: 100%;
}
.imageContainer {
display: flex;
width: 100%;
height: 100%;
}
.imageGradient::after {
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.36) 50%,
rgba(0, 0, 0, 0.75) 100%
);
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.image {
object-fit: cover;
width: 100%;
height: 100%;
min-height: 320px; /* Fixed height from Figma */
}
.content {
display: grid;
padding: var(--Space-x4) var(--Space-x3);
gap: var(--Space-x2);
}
.themeOne {
background: var(--Primary-Light-Surface-Normal);
.heading {
color: var(--Primary-Light-On-Surface-Text);
}
.bodyText {
color: var(--Primary-Light-On-Surface-Text);
}
.scriptedTitle {
color: var(--Primary-Light-On-Surface-Accent);
}
}
.themeTwo {
background: var(--Secondary-Light-Surface-Normal);
.heading {
color: var(--Secondary-Light-On-Surface-Text);
}
.bodyText {
color: var(--Secondary-Light-On-Surface-Text);
}
.scriptedTitle {
color: var(--Secondary-Light-On-Surface-Accent);
}
}
.themeThree {
background: var(--Tertiary-Light-Surface-Normal);
.heading {
color: var(--Tertiary-Light-On-Surface-Text);
}
.bodyText {
color: var(--Tertiary-Light-On-Surface-Text);
}
.scriptedTitle {
color: var(--Tertiary-Light-On-Surface-Accent);
}
}
.themePrimaryDark {
background: var(--Primary-Dark-Surface-Normal);
.heading {
color: var(--Primary-Dark-On-Surface-Text);
}
.bodyText {
color: var(--Primary-Dark-On-Surface-Text);
}
.scriptedTitle {
color: var(--Primary-Dark-On-Surface-Accent);
}
}
.themePrimaryDim {
background: var(--Primary-Dim-Surface-Normal);
.heading {
color: var(--Primary-Dim-On-Surface-Text);
}
.bodyText {
color: var(--Primary-Dim-On-Surface-Text);
}
.scriptedTitle {
color: var(--Primary-Dim-On-Surface-Accent);
}
}
.themePrimaryInverted {
background: var(--Base-Surface-Primary-light-Normal);
.heading {
color: var(--Primary-Light-On-Surface-Text);
}
.bodyText {
color: var(--Primary-Light-On-Surface-Text);
}
.scriptedTitle {
color: var(--Primary-Light-On-Surface-Accent);
}
}
.themePrimaryStrong {
background: var(--Primary-Strong-Surface-Normal);
.heading {
color: var(--Primary-Strong-On-Surface-Text);
}
.bodyText {
color: var(--Primary-Strong-On-Surface-Text);
}
.scriptedTitle {
color: var(--Primary-Strong-On-Surface-Accent);
}
}
.themeImage {
.bodyText {
color: var(--Base-Text-Inverted);
}
.heading {
color: var(--Base-Text-Inverted);
}
.content {
position: absolute;
}
.scriptedTitle {
color: var(--Base-Text-Inverted);
}
}
.scriptContainer {
display: grid;
gap: var(--Space-x1);
}
.scriptedTitle {
padding: var(--Space-x1);
margin: 0;
transform: rotate(-3deg);
transform-origin: left;
}
.buttonContainer {
display: grid;
gap: var(--Space-x1);
justify-content: center;
}
.button {
min-width: 150px;
}
@media screen and (min-width: 768px) {
.buttonContainer {
display: flex;
}
}

34
apps/scandic-web/components/TempDesignSystem/Card/card.ts
View File

@@ -1,34 +0,0 @@
import type { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault"
import type { VariantProps } from "class-variance-authority"
import type { JSX } from "react"
import type { ApiImage } from "@/types/components/image"
import type { cardVariants } from "./variants"
export interface CardProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof cardVariants> {
primaryButton?: {
href: string
title: string
openInNewTab?: boolean
forceReload?: boolean
scrollOnClick?: boolean
materialIcon?: JSX.Element
} | null
secondaryButton?: {
href: string
title: string
openInNewTab?: boolean
forceReload?: boolean
scrollOnClick?: boolean
materialIcon?: JSX.Element
} | null
scriptedTopTitle?: string | null
heading?: string | null
bodyText?: string | null
imageGradient?: boolean
onPrimaryButtonClick?: () => void
onSecondaryButtonClick?: () => void
backgroundImage?: ImageVaultAsset | ApiImage
}

129
apps/scandic-web/components/TempDesignSystem/Card/index.tsx
View File

@@ -1,129 +0,0 @@
import { cx } from "class-variance-authority"
import Link from "next/link"
import Image from "@scandic-hotels/design-system/Image"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { getButtonTheme } from "./utils"
import { cardVariants } from "./variants"
import styles from "./card.module.css"
import type { CardProps } from "./card"
export default function Card({
primaryButton,
secondaryButton,
scriptedTopTitle,
heading,
bodyText,
className,
theme,
backgroundImage,
imageGradient,
onPrimaryButtonClick,
onSecondaryButtonClick,
height,
}: CardProps) {
const buttonTheme = getButtonTheme(theme)
return (
<article
className={cardVariants({
theme,
height,
className,
})}
>
{backgroundImage && (
<div
className={cx(styles.imageContainer, {
[styles.imageGradient]: imageGradient,
})}
>
<Image
src={backgroundImage.url}
className={styles.image}
alt={backgroundImage.meta.alt || backgroundImage.title}
fill
sizes="(min-width: 1367px) 700px, 900px"
focalPoint={backgroundImage.focalPoint}
dimensions={backgroundImage.dimensions}
/>
</div>
)}
<div className={styles.content}>
{scriptedTopTitle && (
<section className={styles.scriptContainer}>
<Typography variant="Title/Decorative/md">
<span className={styles.scriptedTitle}>{scriptedTopTitle}</span>
</Typography>
</section>
)}
<Typography variant="Title/smLowCase" className={styles.heading}>
<h3>{heading}</h3>
</Typography>
{bodyText && (
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.bodyText}
>
<p>{bodyText}</p>
</Typography>
)}
<div className={styles.buttonContainer}>
{primaryButton ? (
<Button
asChild
theme={buttonTheme}
size="small"
className={styles.button}
>
{primaryButton.forceReload ? (
<a
href={primaryButton.href}
target={primaryButton.openInNewTab ? "_blank" : undefined}
onClick={onPrimaryButtonClick}
>
{primaryButton.title}
{primaryButton.materialIcon}
</a>
) : (
<Link
href={primaryButton.href}
target={primaryButton.openInNewTab ? "_blank" : undefined}
onClick={onPrimaryButtonClick}
scroll={primaryButton.scrollOnClick ?? true}
>
{primaryButton.title}
{primaryButton.materialIcon}
</Link>
)}
</Button>
) : null}
{secondaryButton ? (
<Button
asChild
theme={buttonTheme}
size="small"
className={styles.button}
intent="secondary"
disabled
>
<Link
href={secondaryButton.href}
target={secondaryButton.openInNewTab ? "_blank" : undefined}
onClick={onSecondaryButtonClick}
scroll={secondaryButton.scrollOnClick ?? true}
>
{secondaryButton.title}
{secondaryButton.materialIcon}
</Link>
</Button>
) : null}
</div>
</div>
</article>
)
}

24
apps/scandic-web/components/TempDesignSystem/Card/utils.ts
View File

@@ -1,24 +0,0 @@
import type { ButtonProps } from "@scandic-hotels/design-system/OldDSButton"
import type { CardProps } from "@/components/TempDesignSystem/Card/card"
export function getButtonTheme(
theme: CardProps["theme"]
): ButtonProps["theme"] {
switch (theme) {
case "two":
return "secondaryLight"
case "three":
return "tertiaryLight"
case "primaryDark":
return "primaryDark"
case "primaryStrong":
case "image":
return "primaryStrong"
case "one":
case "primaryDim":
case "primaryInverted":
default:
return "primaryLight"
}
}

28
apps/scandic-web/components/TempDesignSystem/Card/variants.ts
View File

@@ -1,28 +0,0 @@
import { cva } from "class-variance-authority"
import styles from "./card.module.css"
export const cardVariants = cva(styles.container, {
variants: {
theme: {
one: styles.themeOne,
two: styles.themeTwo,
three: styles.themeThree,
primaryDark: styles.themePrimaryDark,
primaryDim: styles.themePrimaryDim,
primaryInverted: styles.themePrimaryInverted,
primaryStrong: styles.themePrimaryStrong,
image: styles.themeImage,
},
height: {
fixed: styles.fixed,
dynamic: styles.dynamic,
},
},
defaultVariants: {
theme: "one",
height: "fixed",
},
})

25
apps/scandic-web/types/components/blocks/infoCard.ts
View File

@@ -1,25 +0,0 @@
import type { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault"
import type { VariantProps } from "class-variance-authority"
import type { CardProps } from "@/components/TempDesignSystem/Card/card"
import type { cardVariants } from "@/components/TempDesignSystem/Card/variants"
type CardTheme = Exclude<
NonNullable<VariantProps<typeof cardVariants>["theme"]>,
"image"
>
export interface InfoCardProps {
scriptedTopTitle?: string
heading: string
bodyText?: string
image?: ImageVaultAsset
imagePosition?: "left" | "right" | "top"
primaryButton?: CardProps["primaryButton"]
secondaryButton?: CardProps["secondaryButton"]
onPrimaryButtonClick?: () => void
onSecondaryButtonClick?: () => void
theme?: CardTheme
className?: string
height?: "fixed" | "dynamic"
}