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"
}

5
packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/GuestsRoom/index.tsx
View File

@@ -2,7 +2,6 @@ import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
@@ -55,11 +54,9 @@ export function GuestsRoom({
variant="Text"
onPress={() => onRemove(index)}
size="sm"
color="Primary"
className={styles.roomActionsButton}
wrapping
leadingIconName="delete"
>
<MaterialIcon icon="delete" color="CurrentColor" />
{intl.formatMessage({
id: "bookingWidget.roomsPicker.removeRoom",
defaultMessage: "Remove room",

4
packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/index.tsx
View File

@@ -6,9 +6,9 @@ import { useIntl } from "react-intl"
import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import { Button } from "@scandic-hotels/design-system/Button"
import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon"
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 { useRoomContext } from "../../../../contexts/EnterDetails/RoomContext"
@@ -89,7 +89,7 @@ export default function MemberPriceModal() {
</span>
)}
</div>
<Button intent="primary" theme="base" onClick={() => setIsOpen(false)}>
<Button variant="Primary" onPress={() => setIsOpen(false)}>
{intl.formatMessage({
id: "enterDetails.memberPriceModal.okButtonLabel",
defaultMessage: "OK",

33
packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
View File

@@ -10,9 +10,9 @@ import {
import { useIntl } from "react-intl"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import { Button } from "@scandic-hotels/design-system/Button"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import { IconButton } from "@scandic-hotels/design-system/IconButton"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { getRoomFeatureDescription } from "../../../../utils/getRoomFeatureDescription"
@@ -42,18 +42,15 @@ export default function PriceChangeSummary({
return (
<DialogTrigger>
<Button
intent="text"
size="small"
theme="base"
variant="icon"
wrapping
onClick={() => toggleOpen((isOpen) => !isOpen)}
variant="Text"
size="sm"
onPress={() => toggleOpen((isOpen) => !isOpen)}
trailingIconName="chevron_right"
>
{intl.formatMessage({
id: "enterDetails.priceChangeDialog.seePriceDetailsButton",
defaultMessage: "See price details",
})}
<MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
</Button>
<ModalOverlay isOpen={isOpen} onOpenChange={toggleOpen}>
<Modal>
@@ -69,13 +66,17 @@ export default function PriceChangeSummary({
})}
</p>
</Typography>
<Button
<IconButton
iconName="close"
variant="Muted"
emphasis
onPress={close}
variant="clean"
className={styles.closeButton}
>
<MaterialIcon icon="close" size={20} color="CurrentColor" />
</Button>
aria-label={intl.formatMessage({
id: "common.close",
defaultMessage: "Close",
})}
/>
</header>
<section>
<div>
@@ -235,13 +236,13 @@ export default function PriceChangeSummary({
</div>
</section>
<footer className={styles.footer}>
<Button intent="secondary" onClick={onCancel}>
<Button variant="Secondary" onPress={onCancel}>
{intl.formatMessage({
id: "enterDetails.priceChangeDialog.cancelButton",
defaultMessage: "Back to room selection",
})}
</Button>
<Button onClick={onAccept}>
<Button variant="Primary" onPress={onAccept}>
{intl.formatMessage({
id: "enterDetails.priceChangeDialog.acceptButton",
defaultMessage: "Continue with new price",

6
packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx
View File

@@ -2,8 +2,8 @@ import { Dialog, Modal, ModalOverlay } from "react-aria-components"
import { useIntl } from "react-intl"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
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 { Typography } from "@scandic-hotels/design-system/Typography"
import { useEnterDetailsStore } from "../../../stores/enter-details"
@@ -152,13 +152,13 @@ export default function PriceChangeDialog({
/>
</header>
<footer className={styles.footer}>
<Button intent="secondary" onClick={onCancel}>
<Button variant="Secondary" onPress={onCancel}>
{intl.formatMessage({
id: "enterDetails.priceChangeDialog.cancelButton",
defaultMessage: "Back to room selection",
})}
</Button>
<Button onClick={onAccept}>
<Button variant="Primary" onPress={onAccept}>
{intl.formatMessage({
id: "enterDetails.priceChangeDialog.acceptButton",
defaultMessage: "Continue with new price",

27
packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx
View File

@@ -5,13 +5,12 @@ import { useIntl } from "react-intl"
import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { FacilityToIcon } from "@scandic-hotels/design-system/FacilityToIcon"
import { HotelCardDialogImage } from "@scandic-hotels/design-system/HotelCard/HotelCardDialogImage"
import { HotelPointsRow } from "@scandic-hotels/design-system/HotelCard/HotelPointsRow"
import { NoPriceAvailableCard } from "@scandic-hotels/design-system/HotelCard/NoPriceAvailableCard"
import { IconButton } from "@scandic-hotels/design-system/IconButton"
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 { useIsLoggedIn } from "../../hooks/useIsLoggedIn"
@@ -233,23 +232,17 @@ export default function ListingHotelCardDialog({
</Typography>
</div>
) : (
<Button
asChild
theme="base"
size="small"
<ButtonLink
variant="Primary"
size="sm"
className={styles.button}
href={`${selectRate(lang)}?hotel=${operaId}`}
>
<Link
href={`${selectRate(lang)}?hotel=${operaId}`}
color="none"
keepSearchParams
>
{intl.formatMessage({
id: "common.seeRooms",
defaultMessage: "See rooms",
})}
</Link>
</Button>
{intl.formatMessage({
id: "common.seeRooms",
defaultMessage: "See rooms",
})}
</ButtonLink>
)}
</div>
) : (

40
packages/booking-flow/lib/components/SelectHotel/MobileMapButtonContainer/index.tsx
View File

@@ -1,14 +1,13 @@
"use client"
import { useSearchParams } from "next/navigation"
import { useIntl } from "react-intl"
import {
alternativeHotelsMap,
selectHotelMap,
} from "@scandic-hotels/common/constants/routes/hotelReservation"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Link from "@scandic-hotels/design-system/OldDSLink"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import useLang from "../../../hooks/useLang"
import FilterAndSortModal from "../Filters/FilterAndSortModal"
@@ -26,30 +25,25 @@ export default function MobileMapButtonContainer({
}) {
const intl = useIntl()
const lang = useLang()
const searchParams = useSearchParams()
const url = isAlternative ? alternativeHotelsMap(lang) : selectHotelMap(lang)
const search = searchParams.toString()
const href = search ? `${url}?${search}` : url
return (
<div className={styles.buttonContainer}>
<Button
asChild
theme="base"
variant="icon"
intent="secondary"
size="small"
<ButtonLink
variant="Secondary"
href={href}
size="sm"
leadingIconName="map"
>
<Link
href={
isAlternative ? alternativeHotelsMap(lang) : selectHotelMap(lang)
}
keepSearchParams
weight="bold"
>
<MaterialIcon icon="map" color="CurrentColor" />
{intl.formatMessage({
id: "destination.seeOnMap",
defaultMessage: "See on map",
})}
</Link>
</Button>
{intl.formatMessage({
id: "destination.seeOnMap",
defaultMessage: "See on map",
})}
</ButtonLink>
<FilterAndSortModal filters={filters} />
</div>
)

7
packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx
View File

@@ -3,7 +3,7 @@ import { useIntl } from "react-intl"
import { RateEnum } from "@scandic-hotels/common/constants/rate"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
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 { useIsLoggedIn } from "../../../../hooks/useIsLoggedIn"
@@ -215,9 +215,10 @@ export function DesktopSummary({
</div>
<Button
className={styles.continueButton}
disabled={!isAllRoomsSelected || isSubmitting}
theme="base"
isDisabled={!isAllRoomsSelected}
isPending={isSubmitting}
type="submit"
variant="Primary"
>
{intl.formatMessage({
id: "common.continue",

1
packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
View File

@@ -78,7 +78,6 @@
.continueButton {
margin-left: auto;
height: fit-content;
width: 100%;
min-width: 140px;
}

19
packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx
View File

@@ -2,8 +2,7 @@ import { useEffect } from "react"
import { useIntl } from "react-intl"
import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
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 { Typography } from "@scandic-hotels/design-system/Typography"
import { useSelectRateContext } from "../../../../../contexts/SelectRate/SelectRateContext"
@@ -122,23 +121,15 @@ export function MultiRoomWrapper({ children, isMultiRoom, roomIndex }: Props) {
)}
{selectedRate && isActiveRoom ? (
<Button
intent="text"
onClick={() => {
setActiveRoom("deselect")
}}
size="medium"
theme="base"
variant="icon"
variant="Text"
onPress={() => setActiveRoom("deselect")}
size="md"
trailingIconName="keyboard_arrow_up"
>
{intl.formatMessage({
id: "common.close",
defaultMessage: "Close",
})}
<MaterialIcon
icon="keyboard_arrow_up"
size={20}
color="CurrentColor"
/>
</Button>
) : null}
</div>

12
packages/design-system/lib/components/ButtonLink/index.tsx
View File

@@ -8,8 +8,8 @@ import type { VariantProps } from "class-variance-authority"
import Link from "next/link"
import { useIntl } from "react-intl"
import { MaterialIcon } from "../Icons/MaterialIcon"
import { Typography } from "../Typography"
import { MaterialIconName } from "../Icons/MaterialIcon/generated"
import { Typography } from "../Typography"
export interface ButtonLinkProps
extends
@@ -17,6 +17,7 @@ export interface ButtonLinkProps
VariantProps<typeof variants> {
leadingIconName?: MaterialIconName | null
trailingIconName?: MaterialIconName | null
isExternal?: boolean
}
export default function ButtonLink({
@@ -28,6 +29,7 @@ export default function ButtonLink({
className,
href,
target,
isExternal,
leadingIconName,
trailingIconName,
children,
@@ -48,6 +50,8 @@ export default function ButtonLink({
defaultMessage: "Opens in a new tab/window",
})
const LinkComponent = isExternal ? "a" : Link
return (
<Typography
variant={
@@ -56,9 +60,9 @@ export default function ButtonLink({
: "Body/Paragraph/mdBold"
}
>
<Link
<LinkComponent
className={classNames}
href={href}
href={href.toString()}
target={target}
title={target === "_blank" ? newTabText : ""}
{...props}
@@ -78,7 +82,7 @@ export default function ButtonLink({
size={size === "sm" ? 20 : 24}
/>
) : null}
</Link>
</LinkComponent>
</Typography>
)
}

6
packages/design-system/lib/components/InfoCard/InfoCard.tsx
View File

@@ -74,7 +74,8 @@ export function InfoCard({
size="sm"
href={primaryButton.href}
onClick={primaryButton.onClick}
scroll={primaryButton.scrollOnClick ?? false}
scroll={primaryButton.scrollOnClick}
isExternal={primaryButton.isExternal}
{...buttonProps.primaryButton}
>
{primaryButton.text}
@@ -85,7 +86,8 @@ export function InfoCard({
size="sm"
href={secondaryButton.href}
onClick={secondaryButton.onClick}
scroll={secondaryButton.scrollOnClick ?? false}
scroll={secondaryButton.scrollOnClick}
isExternal={secondaryButton.isExternal}
{...buttonProps.secondaryButton}
>
{secondaryButton.text}

9
packages/design-system/lib/components/InfoCard/types.ts
View File

@@ -1,6 +1,6 @@
import type { VariantProps } from "class-variance-authority"
import { MouseEventHandler } from "react"
import { ButtonLinkProps } from "../ButtonLink"
import type { infoCardVariants } from "./variants"
export type InfoCardBackgroundImage = {
@@ -10,12 +10,13 @@ export type InfoCardBackgroundImage = {
dimensions?: { width: number; height: number; aspectRatio?: number }
}
export type InfoCardButton = {
href: string
export type InfoCardButton = Pick<
ButtonLinkProps,
"href" | "onClick" | "trailingIconName" | "leadingIconName" | "isExternal"
> & {
text: string
openInNewTab?: boolean
scrollOnClick?: boolean
onClick?: MouseEventHandler<HTMLAnchorElement>
}
export interface InfoCardProps

60
packages/design-system/lib/components/Modal/ModalContentWithActions/index.tsx
View File

@@ -1,5 +1,6 @@
import { MaterialIcon } from "../../Icons/MaterialIcon"
import { OldDSButton as Button } from "../../OldDSButton"
import { useIntl } from "react-intl"
import { Button, ButtonProps } from "../../Button"
import { IconButton } from "../../IconButton"
import { Typography } from "../../Typography"
import styles from "./modalContent.module.css"
@@ -9,18 +10,19 @@ import type { ReactNode } from "react"
interface ModalContentProps {
title?: string
content: ReactNode
primaryAction: {
label: string
onClick: () => void
intent?: "primary" | "secondary" | "text"
isLoading?: boolean
disabled?: boolean
} | null
secondaryAction: {
label: string
onClick: () => void
intent?: "primary" | "secondary" | "text"
} | null
primaryAction:
| (Pick<
ButtonProps,
"onPress" | "variant" | "isPending" | "isDisabled" | "type"
> & {
label: string
})
| null
secondaryAction:
| (Pick<ButtonProps, "onPress" | "variant"> & {
label: string
})
| null
onClose?: () => void
}
@@ -31,6 +33,7 @@ export function ModalContentWithActions({
secondaryAction,
onClose,
}: ModalContentProps) {
const intl = useIntl()
return (
<>
{title && (
@@ -38,29 +41,36 @@ export function ModalContentWithActions({
<Typography variant="Title/Subtitle/md">
<p>{title}</p>
</Typography>
<button onClick={onClose} type="button" className={styles.close}>
<MaterialIcon icon="close" color="Icon/Interactive/Placeholder" />
</button>
<IconButton
variant="Muted"
emphasis
onPress={onClose}
type="button"
className={styles.close}
iconName="close"
aria-label={intl.formatMessage({
id: "common.close",
defaultMessage: "Close",
})}
/>
</header>
)}
<div className={styles.content}>{content}</div>
<footer className={styles.footer}>
{secondaryAction && (
<Button
theme="base"
intent={secondaryAction.intent ?? "text"}
color="burgundy"
onClick={secondaryAction.onClick}
variant={secondaryAction.variant ?? "Text"}
onPress={secondaryAction.onPress}
>
{secondaryAction.label}
</Button>
)}
{primaryAction && (
<Button
theme="base"
intent={primaryAction.intent ?? "secondary"}
onClick={primaryAction.onClick}
disabled={primaryAction.isLoading || primaryAction.disabled}
variant={primaryAction.variant ?? "Secondary"}
onPress={primaryAction.onPress}
isPending={primaryAction.isPending}
isDisabled={primaryAction.isDisabled}
>
{primaryAction.label}
</Button>

11
packages/design-system/lib/components/Modal/ModalContentWithActions/modalContent.module.css
View File

@@ -24,16 +24,9 @@
}
.close {
background: none;
border: none;
cursor: pointer;
position: absolute;
display: flex;
align-items: center;
padding: 0;
justify-content: center;
top: 20px;
right: 20px;
top: var(--Space-x2);
right: var(--Space-x2);
}
@media screen and (min-width: 768px) {

843
packages/design-system/lib/components/OldDSButton/button.module.css
View File

@@ -1,843 +0,0 @@
.btn {
background: none;
border-radius: var(--Corner-radius-rounded);
cursor: pointer;
margin: 0;
padding: 0;
text-align: center;
transition:
background-color 300ms ease,
color 300ms ease;
font-family: var(--typography-Body-Bold-fontFamily);
font-size: var(--typography-Body-Bold-fontSize);
font-weight: 500;
line-height: var(--typography-Body-Bold-lineHeight);
letter-spacing: 0.084px;
text-decoration: none;
}
.wrapping {
padding-left: 0 !important;
padding-right: 0 !important;
}
.fullWidth {
width: 100%;
}
/* INTENT */
.primary,
a.primary {
border: none;
}
.secondary,
a.secondary {
background: none;
border-style: solid;
border-width: 2px;
}
.tertiary,
a.tertiary {
border: none;
}
.inverted,
a.inverted {
border: none;
}
.text,
a.text {
background: none;
border: none;
outline: none;
}
/* TODO: The variants for combinations of size/text/wrapping should be looked at and iterated on */
.text:not(.wrapping) {
padding: 0 !important;
}
/* VARIANTS */
.default,
a.default {
align-items: center;
display: flex;
gap: var(--Space-x1);
justify-content: center;
}
.btn.icon:is(.small, .medium, .large) {
align-items: center;
display: flex;
gap: var(--Space-x1);
justify-content: center;
}
/* SIZES */
.btn.small {
font-size: var(--typography-Caption-Bold-fontSize);
line-height: var(--typography-Caption-Bold-lineHeight);
gap: var(--Space-x025);
padding: calc(var(--Space-x1) + 2px) var(--Space-x2);
/* Special case padding to adjust the missing border */
}
.btn.small.secondary {
padding: var(--Space-x1) var(--Space-x2);
}
.btn.medium {
gap: var(--Space-x05);
padding: calc(var(--Space-x15) + 2px) var(--Space-x2);
/* Special case padding to adjust the missing border */
}
.medium.secondary {
padding: var(--Space-x15) var(--Space-x2);
}
.btn.large {
gap: var(--Space-x05);
padding: calc(var(--Space-x2) + 2px) var(--Space-x3);
/* Special case padding to adjust the missing border */
}
.large.secondary {
gap: var(--Space-x05);
padding: var(--Space-x2) var(--Space-x3);
}
/* DISABLED */
.btn:disabled {
background-color: var(--disabled-background-color);
color: var(--disabled-color);
cursor: not-allowed;
}
/* THEMES */
.basePrimary {
background-color: var(--Base-Button-Primary-Fill-Normal);
color: var(--Base-Button-Primary-On-Fill-Normal);
}
.basePrimary:active,
.basePrimary:focus,
.basePrimary:hover {
background-color: var(--Base-Button-Primary-Fill-Hover);
color: var(--Base-Button-Primary-On-Fill-Hover);
}
.basePrimary:disabled {
background-color: var(--Base-Button-Primary-Fill-Disabled);
color: var(--Base-Button-Primary-On-Fill-Disabled);
}
.icon.basePrimary svg,
.icon.basePrimary svg * {
fill: var(--Base-Button-Primary-On-Fill-Normal);
}
.icon.basePrimary:active svg,
.icon.basePrimary:focus svg,
.icon.basePrimary:hover svg,
.icon.basePrimary:active svg *,
.icon.basePrimary:focus svg *,
.icon.basePrimary:hover svg * {
fill: var(--Base-Button-Primary-On-Fill-Hover);
}
.icon.basePrimary:disabled *,
.icon.basePrimary:disabled svg * {
fill: var(--Base-Button-Primary-On-Fill-Disabled);
}
.baseSecondary {
background-color: var(--Base-Button-Secondary-Fill-Normal);
border-color: var(--Base-Button-Secondary-Border-Normal);
color: var(--Base-Button-Secondary-On-Fill-Normal);
}
.baseSecondary:active,
.baseSecondary:focus,
.baseSecondary:hover {
background-color: var(--Base-Button-Secondary-Fill-Hover);
border-color: var(--Base-Button-Secondary-Border-Hover);
color: var(--Base-Button-Secondary-On-Fill-Hover);
}
.baseSecondary:disabled {
background-color: var(--Base-Button-Secondary-Fill-Disabled);
border-color: var(--Base-Button-Secondary-Border-Disabled);
color: var(--Base-Button-Secondary-On-Fill-Disabled);
}
.icon.baseSecondary svg,
.icon.baseSecondary svg * {
fill: var(--Base-Button-Secondary-On-Fill-Normal);
}
.icon.baseSecondary:active svg,
.icon.baseSecondary:focus svg,
.icon.baseSecondary:hover svg,
.icon.baseSecondary:active svg *,
.icon.baseSecondary:focus svg *,
.icon.baseSecondary:hover svg * {
fill: var(--Base-Button-Secondary-On-Fill-Hover);
}
.icon.baseSecondary:disabled svg,
.icon.baseSecondary:disabled svg * {
fill: var(--Base-Button-Secondary-On-Fill-Disabled);
}
.btn.baseTertiary {
background-color: var(--Base-Button-Tertiary-Fill-Normal);
color: var(--Base-Button-Tertiary-On-Fill-Normal);
}
.btn.baseTertiary:active,
.btn.baseTertiary:focus,
.btn.baseTertiary:hover {
background-color: var(--Base-Button-Tertiary-Fill-Hover);
color: var(--Base-Button-Tertiary-On-Fill-Hover);
}
.btn.baseTertiary:disabled {
background-color: var(--Base-Button-Tertiary-Fill-Disabled);
color: var(--Base-Button-Tertiary-On-Fill-Disabled);
}
.icon.baseTertiary svg,
.icon.baseTertiary svg * {
fill: var(--Base-Button-Tertiary-On-Fill-Normal);
}
.icon.baseTertiary:active svg,
.icon.baseTertiary:focus svg,
.icon.baseTertiary:hover svg,
.icon.baseTertiary:active svg *,
.icon.baseTertiary:focus svg *,
.icon.baseTertiary:hover svg * {
fill: var(--Base-Button-Tertiary-On-Fill-Hover);
}
.icon.baseTertiary:disabled svg,
.icon.baseTertiary:disabled svg * {
fill: var(--Base-Button-Tertiary-On-Fill-Disabled);
}
.baseInverted {
background-color: var(--Base-Button-Inverted-Fill-Normal);
color: var(--Base-Button-Inverted-On-Fill-Normal);
}
.baseInverted:active,
.baseInverted:focus,
.baseInverted:hover {
background-color: var(--Base-Button-Inverted-Fill-Hover);
color: var(--Base-Button-Inverted-On-Fill-Hover);
}
.baseInverted:disabled {
background-color: var(--Base-Button-Inverted-Fill-Disabled);
color: var(--Base-Button-Inverted-On-Fill-Disabled);
}
.icon.baseInverted svg,
.icon.baseInverted svg * {
fill: var(--Base-Button-Inverted-On-Fill-Normal);
}
.icon.baseInverted:active svg,
.icon.baseInverted:focus svg,
.icon.baseInverted:hover svg,
.icon.baseInverted:active svg *,
.icon.baseInverted:focus svg *,
.icon.baseInverted:hover svg * {
fill: var(--Base-Button-Inverted-On-Fill-Hover);
}
.icon.baseInverted:disabled svg,
.icon.baseInverted:disabled svg * {
fill: var(--Base-Button-Inverted-On-Fill-Disabled);
}
.baseText {
color: var(--Base-Button-Text-On-Fill-Normal);
}
.baseTextInverted {
color: var(--Base-Button-Primary-On-Fill-Normal);
}
.baseText:active,
.baseText:focus,
.baseText:hover {
color: var(--Base-Button-Text-On-Fill-Hover);
text-decoration: underline;
}
.baseText:disabled {
color: var(--Base-Button-Text-On-Fill-Disabled);
}
.icon.baseText svg,
.icon.baseText svg * {
fill: var(--Base-Button-Text-On-Fill-Normal);
}
.icon.baseText:active svg,
.icon.baseText:focus svg,
.icon.baseText:hover svg,
.icon.baseText:active svg *,
.icon.baseText:focus svg *,
.icon.baseText:hover svg * {
fill: var(--Base-Button-Text-On-Fill-Hover);
text-decoration: underline;
}
.icon.baseText:disabled svg,
.icon.baseText:disabled svg * {
fill: var(--Base-Button-Text-On-Fill-Disabled);
}
.primaryStrongPrimary {
background-color: var(--Primary-Strong-Button-Primary-Fill-Normal);
color: var(--Primary-Strong-Button-Primary-On-Fill-Normal);
}
.primaryStrongPrimary:active,
.primaryStrongPrimary:focus,
.primaryStrongPrimary:hover {
background-color: var(--Primary-Strong-Button-Primary-Fill-Hover);
color: var(--Primary-Strong-Button-Primary-On-Fill-Hover);
}
.primaryStrongPrimary:disabled {
background-color: var(--Primary-Strong-Button-Primary-Fill-Disabled);
color: var(--Primary-Strong-Button-Primary-On-Fill-Disabled);
}
.icon.primaryStrongPrimary svg,
.icon.primaryStrongPrimary svg * {
fill: var(--Primary-Strong-Button-Primary-On-Fill-Normal);
}
.icon.primaryStrongPrimary:active svg,
.icon.primaryStrongPrimary:focus svg,
.icon.primaryStrongPrimary:hover svg,
.icon.primaryStrongPrimary:active svg *,
.icon.primaryStrongPrimary:focus svg *,
.icon.primaryStrongPrimary:hover svg * {
fill: var(--Primary-Strong-Button-Primary-On-Fill-Hover);
}
.icon.primaryStrongPrimary:disabled svg,
.icon.primaryStrongPrimary:disabled svg * {
fill: var(--Primary-Strong-Button-Primary-On-Fill-Disabled);
}
.primaryStrongSecondary {
background-color: var(--Primary-Strong-Button-Secondary-Fill-Normal);
border-color: var(--Primary-Strong-Button-Secondary-Border-Normal);
color: var(--Primary-Strong-Button-Secondary-On-Fill-Normal);
}
.primaryStrongSecondary:active,
.primaryStrongSecondary:focus,
.primaryStrongSecondary:hover {
background-color: var(--Primary-Strong-Button-Secondary-Fill-Hover);
border-color: var(--Primary-Strong-Button-Secondary-Border-Hover);
color: var(--Primary-Strong-Button-Secondary-On-Fill-Hover);
}
.primaryStrongSecondary:disabled {
background-color: var(--Primary-Strong-Button-Secondary-Fill-Disabled);
border-color: var(--Primary-Strong-Button-Secondary-Border-Disabled);
color: var(--Primary-Strong-Button-Secondary-On-Fill-Disabled);
}
.icon.primaryStrongSecondary svg,
.icon.primaryStrongSecondary svg * {
fill: var(--Primary-Strong-Button-Secondary-On-Fill-Normal);
}
.icon.primaryStrongSecondary:active svg,
.icon.primaryStrongSecondary:focus svg,
.icon.primaryStrongSecondary:hover svg,
.icon.primaryStrongSecondary:active svg *,
.icon.primaryStrongSecondary:focus svg *,
.icon.primaryStrongSecondary:hover svg * {
fill: var(--Primary-Strong-Button-Secondary-On-Fill-Hover);
}
.icon.primaryStrongSecondary:disabled svg,
.icon.primaryStrongSecondary:disabled svg * {
fill: var(--Primary-Strong-Button-Secondary-On-Fill-Disabled);
}
.primaryDarkPrimary {
background-color: var(--Primary-Dark-Button-Primary-Fill-Normal);
color: var(--Primary-Dark-Button-Primary-On-Fill-Normal);
}
.primaryDarkPrimary:active,
.primaryDarkPrimary:focus,
.primaryDarkPrimary:hover {
background-color: var(--Primary-Dark-Button-Primary-Fill-Hover);
color: var(--Primary-Dark-Button-Primary-On-Fill-Hover);
}
.primaryDarkPrimary:disabled {
background-color: var(--Primary-Dark-Button-Primary-Fill-Disabled);
color: var(--Primary-Dark-Button-Primary-On-Fill-Disabled);
}
.icon.primaryDarkPrimary svg,
.icon.primaryDarkPrimary svg * {
fill: var(--Primary-Dark-Button-Primary-On-Fill-Normal);
}
.icon.primaryDarkPrimary:active svg,
.icon.primaryDarkPrimary:focus svg,
.icon.primaryDarkPrimary:hover svg,
.icon.primaryDarkPrimary:active svg *,
.icon.primaryDarkPrimary:focus svg *,
.icon.primaryDarkPrimary:hover svg * {
fill: var(--Primary-Dark-Button-Primary-On-Fill-Hover);
}
.icon.primaryDarkPrimary:disabled svg,
.icon.primaryDarkPrimary:disabled svg * {
fill: var(--Primary-Dark-Button-Primary-On-Fill-Disabled);
}
.primaryDarkSecondary {
background-color: var(--Primary-Dark-Button-Secondary-Fill-Normal);
border-color: var(--Primary-Dark-Button-Secondary-Border-Normal);
color: var(--Primary-Dark-Button-Secondary-On-Fill-Normal);
}
.primaryDarkSecondary:active,
.primaryDarkSecondary:focus,
.primaryDarkSecondary:hover {
background-color: var(--Primary-Dark-Button-Secondary-Fill-Hover);
border-color: var(--Primary-Dark-Button-Secondary-Border-Hover);
color: var(--Primary-Dark-Button-Secondary-On-Fill-Hover);
}
.primaryDarkSecondary:disabled {
background-color: var(--Primary-Dark-Button-Secondary-Fill-Disabled);
border-color: var(--Primary-Dark-Button-Secondary-Border-Disabled);
color: var(--Primary-Dark-Button-Secondary-On-Fill-Disabled);
}
.icon.primaryDarkSecondary svg,
.icon.primaryDarkSecondary svg * {
fill: var(--Primary-Dark-Button-Secondary-On-Fill-Normal);
}
.icon.primaryDarkSecondary:active svg,
.icon.primaryDarkSecondary:focus svg,
.icon.primaryDarkSecondary:hover svg,
.icon.primaryDarkSecondary:active svg *,
.icon.primaryDarkSecondary:focus svg *,
.icon.primaryDarkSecondary:hover svg * {
fill: var(--Primary-Dark-Button-Secondary-On-Fill-Hover);
}
.icon.primaryDarkSecondary:disabled svg,
.icon.primaryDarkSecondary:disabled svg * {
fill: var(--Primary-Dark-Button-Secondary-On-Fill-Disabled);
}
.primaryLightPrimary {
background-color: var(--Primary-Light-Button-Primary-Fill-Normal);
color: var(--Primary-Light-Button-Primary-On-Fill-Normal);
}
.primaryLightPrimary:active,
.primaryLightPrimary:focus,
.primaryLightPrimary:hover {
background-color: var(--Primary-Light-Button-Primary-Fill-Hover);
color: var(--Primary-Light-Button-Primary-On-Fill-Hover);
}
.primaryLightPrimary:disabled {
background-color: var(--Primary-Light-Button-Primary-Fill-Disabled);
color: var(--Primary-Light-Button-Primary-On-Fill-Disabled);
}
.icon.primaryLightPrimary svg,
.icon.primaryLightPrimary svg * {
fill: var(--Primary-Light-Button-Primary-On-Fill-Normal);
}
.icon.primaryLightPrimary:active svg,
.icon.primaryLightPrimary:focus svg,
.icon.primaryLightPrimary:hover svg,
.icon.primaryLightPrimary:active svg *,
.icon.primaryLightPrimary:focus svg *,
.icon.primaryLightPrimary:hover svg * {
fill: var(--Primary-Light-Button-Primary-On-Fill-Hover);
}
.icon.primaryLightPrimary:disabled svg,
.icon.primaryLightPrimary:disabled svg * {
fill: var(--Primary-Light-Button-Primary-On-Fill-Disabled);
}
.primaryLightSecondary {
background-color: var(--Primary-Light-Button-Secondary-Fill-Normal);
border-color: var(--Primary-Light-Button-Secondary-Border-Normal);
color: var(--Primary-Light-Button-Secondary-On-Fill-Normal);
}
.primaryLightSecondary:active,
.primaryLightSecondary:focus,
.primaryLightSecondary:hover {
background-color: var(--Primary-Light-Button-Secondary-Fill-Hover);
border-color: var(--Primary-Light-Button-Secondary-Border-Hover);
color: var(--Primary-Light-Button-Secondary-On-Fill-Hover);
}
.primaryLightSecondary:disabled {
background-color: var(--Primary-Light-Button-Secondary-Fill-Disabled);
border-color: var(--Primary-Light-Button-Secondary-Border-Disabled);
color: var(--Primary-Light-Button-Secondary-On-Fill-Disabled);
}
.icon.primaryLightSecondary svg,
.icon.primaryLightSecondary svg * {
fill: var(--Primary-Light-Button-Secondary-On-Fill-Normal);
}
.icon.primaryLightSecondary:active svg,
.icon.primaryLightSecondary:focus svg,
.icon.primaryLightSecondary:hover svg,
.icon.primaryLightSecondary:active svg *,
.icon.primaryLightSecondary:focus svg *,
.icon.primaryLightSecondary:hover svg * {
fill: var(--Primary-Light-Button-Secondary-On-Fill-Hover);
}
.icon.primaryLightSecondary:disabled svg,
.icon.primaryLightSecondary:disabled svg * {
fill: var(--Primary-Light-Button-Secondary-On-Fill-Disabled);
}
.secondaryDarkPrimary {
background-color: var(--Secondary-Dark-Button-Primary-Fill-Normal);
color: var(--Secondary-Dark-Button-Primary-On-Fill-Normal);
}
.secondaryDarkPrimary:active,
.secondaryDarkPrimary:focus,
.secondaryDarkPrimary:hover {
background-color: var(--Secondary-Dark-Button-Primary-Fill-Hover);
color: var(--Secondary-Dark-Button-Primary-On-Fill-Hover);
}
.secondaryDarkPrimary:disabled {
background-color: var(--Secondary-Dark-Button-Primary-Fill-Disabled);
color: var(--Secondary-Dark-Button-Primary-On-Fill-Disabled);
}
.icon.secondaryDarkPrimary svg,
.icon.secondaryDarkPrimary svg * {
fill: var(--Secondary-Dark-Button-Primary-On-Fill-Normal);
}
.icon.secondaryDarkPrimary:active svg,
.icon.secondaryDarkPrimary:focus svg,
.icon.secondaryDarkPrimary:hover svg,
.icon.secondaryDarkPrimary:active svg *,
.icon.secondaryDarkPrimary:focus svg *,
.icon.secondaryDarkPrimary:hover svg * {
fill: var(--Secondary-Dark-Button-Primary-On-Fill-Hover);
}
.icon.secondaryDarkPrimary:disabled svg,
.icon.secondaryDarkPrimary:disabled svg * {
fill: var(--Secondary-Dark-Button-Primary-On-Fill-Disabled);
}
.secondaryDarkSecondary {
background-color: var(--Secondary-Dark-Button-Secondary-Fill-Normal);
border-color: var(--Secondary-Dark-Button-Secondary-Border-Normal);
color: var(--Secondary-Dark-Button-Secondary-On-Fill-Normal);
}
.secondaryDarkSecondary:active,
.secondaryDarkSecondary:focus,
.secondaryDarkSecondary:hover {
background-color: var(--Secondary-Dark-Button-Secondary-Fill-Hover);
border-color: var(--Secondary-Dark-Button-Secondary-Border-Hover);
color: var(--Secondary-Dark-Button-Secondary-On-Fill-Hover);
}
.secondaryDarkSecondary:disabled {
background-color: var(--Secondary-Dark-Button-Secondary-Fill-Disabled);
border-color: var(--Secondary-Dark-Button-Secondary-Border-Disabled);
color: var(--Secondary-Dark-Button-Secondary-On-Fill-Disabled);
}
.icon.secondaryDarkSecondary svg,
.icon.secondaryDarkSecondary svg * {
fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Normal);
}
.icon.secondaryDarkSecondary:active svg,
.icon.secondaryDarkSecondary:focus svg,
.icon.secondaryDarkSecondary:hover svg,
.icon.secondaryDarkSecondary:active svg *,
.icon.secondaryDarkSecondary:focus svg *,
.icon.secondaryDarkSecondary:hover svg * {
fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Hover);
}
.icon.secondaryDarkSecondary:disabled svg,
.icon.secondaryDarkSecondary:disabled svg * {
fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Disabled);
}
.secondaryLightPrimary {
background-color: var(--Secondary-Light-Button-Primary-Fill-Normal);
color: var(--Secondary-Light-Button-Primary-On-Fill-Normal);
}
.secondaryLightPrimary:active,
.secondaryLightPrimary:focus,
.secondaryLightPrimary:hover {
background-color: var(--Secondary-Light-Button-Primary-Fill-Hover);
color: var(--Secondary-Light-Button-Primary-On-Fill-Hover);
}
.secondaryLightPrimary:disabled {
background-color: var(--Secondary-Light-Button-Primary-Fill-Disabled);
color: var(--Secondary-Light-Button-Primary-On-Fill-Disabled);
}
.icon.secondaryLightPrimary svg,
.icon.secondaryLightPrimary svg * {
fill: var(--Secondary-Light-Button-Primary-On-Fill-Normal);
}
.icon.secondaryLightPrimary:active svg,
.icon.secondaryLightPrimary:focus svg,
.icon.secondaryLightPrimary:hover svg,
.icon.secondaryLightPrimary:active svg *,
.icon.secondaryLightPrimary:focus svg *,
.icon.secondaryLightPrimary:hover svg * {
fill: var(--Secondary-Light-Button-Primary-On-Fill-Hover);
}
.icon.secondaryLightPrimary:disabled svg,
.icon.secondaryLightPrimary:disabled svg * {
fill: var(--Secondary-Light-Button-Primary-On-Fill-Disabled);
}
.secondaryLightSecondary {
background-color: var(--Secondary-Light-Button-Secondary-Fill-Normal);
border-color: var(--Secondary-Light-Button-Secondary-Border-Normal);
color: var(--Secondary-Light-Button-Secondary-On-Fill-Normal);
}
.secondaryLightSecondary:active,
.secondaryLightSecondary:focus,
.secondaryLightSecondary:hover {
background-color: var(--Secondary-Light-Button-Secondary-Fill-Hover);
border-color: var(--Secondary-Light-Button-Secondary-Border-Hover);
color: var(--Secondary-Light-Button-Secondary-On-Fill-Hover);
}
.secondaryLightSecondary:disabled {
background-color: var(--Secondary-Light-Button-Secondary-Fill-Disabled);
border-color: var(--Secondary-Light-Button-Secondary-Border-Disabled);
color: var(--Secondary-Light-Button-Secondary-On-Fill-Disabled);
}
.icon.secondaryLightSecondary svg,
.icon.secondaryLightSecondary svg * {
fill: var(--Secondary-Light-Button-Secondary-On-Fill-Normal);
}
.icon.secondaryLightSecondary:active svg,
.icon.secondaryLightSecondary:focus svg,
.icon.secondaryLightSecondary:hover svg,
.icon.secondaryLightSecondary:active svg *,
.icon.secondaryLightSecondary:focus svg *,
.icon.secondaryLightSecondary:hover svg * {
fill: var(--Secondary-Light-Button-Secondary-On-Fill-Hover);
}
.icon.secondaryLightSecondary:disabled svg,
.icon.secondaryLightSecondary:disabled svg * {
fill: var(--Secondary-Light-Button-Secondary-On-Fill-Disabled);
}
.tertiaryDarkPrimary {
background-color: var(--Tertiary-Dark-Button-Primary-Fill-Normal);
color: var(--Tertiary-Dark-Button-Primary-On-Fill-Normal);
}
.tertiaryDarkPrimary:active,
.tertiaryDarkPrimary:focus,
.tertiaryDarkPrimary:hover {
background-color: var(--Tertiary-Dark-Button-Primary-Fill-Hover);
color: var(--Tertiary-Dark-Button-Primary-On-Fill-Hover);
}
.tertiaryDarkPrimary:disabled {
background-color: var(--Tertiary-Dark-Button-Primary-Fill-Disabled);
color: var(--Tertiary-Dark-Button-Primary-On-Fill-Disabled);
}
.icon.tertiaryDarkPrimary svg,
.icon.tertiaryDarkPrimary svg * {
fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Normal);
}
.icon.tertiaryDarkPrimary:active svg,
.icon.tertiaryDarkPrimary:focus svg,
.icon.tertiaryDarkPrimary:hover svg,
.icon.tertiaryDarkPrimary:active svg *,
.icon.tertiaryDarkPrimary:focus svg *,
.icon.tertiaryDarkPrimary:hover svg * {
fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Hover);
}
.icon.tertiaryDarkPrimary:disabled svg,
.icon.tertiaryDarkPrimary:disabled svg * {
fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Disabled);
}
.tertiaryDarkSecondary {
background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Normal);
border-color: var(--Tertiary-Dark-Button-Secondary-Border-Normal);
color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Normal);
}
.tertiaryDarkSecondary:active,
.tertiaryDarkSecondary:focus,
.tertiaryDarkSecondary:hover {
background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Hover);
border-color: var(--Tertiary-Dark-Button-Secondary-Border-Hover);
color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Hover);
}
.tertiaryDarkSecondary:disabled {
background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Disabled);
border-color: var(--Tertiary-Dark-Button-Secondary-Border-Disabled);
color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Disabled);
}
.icon.tertiaryDarkSecondary svg,
.icon.tertiaryDarkSecondary svg * {
fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Normal);
}
.icon.tertiaryDarkSecondary:active svg,
.icon.tertiaryDarkSecondary:focus svg,
.icon.tertiaryDarkSecondary:hover svg,
.icon.tertiaryDarkSecondary:active svg *,
.icon.tertiaryDarkSecondary:focus svg *,
.icon.tertiaryDarkSecondary:hover svg * {
fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Hover);
}
.icon.tertiaryDarkSecondary:disabled svg,
.icon.tertiaryDarkSecondary:disabled svg * {
fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Disabled);
}
.tertiaryLightPrimary {
background-color: var(--Tertiary-Light-Button-Primary-Fill-Normal);
color: var(--Tertiary-Light-Button-Primary-On-Fill-Normal);
}
.tertiaryLightPrimary:active,
.tertiaryLightPrimary:focus,
.tertiaryLightPrimary:hover {
background-color: var(--Tertiary-Light-Button-Primary-Fill-Hover);
color: var(--Tertiary-Light-Button-Primary-On-Fill-Hover);
}
.tertiaryLightPrimary:disabled {
background-color: var(--Tertiary-Light-Button-Primary-Fill-Disabled);
color: var(--Tertiary-Light-Button-Primary-On-Fill-Disabled);
}
.icon.tertiaryLightPrimary svg,
.icon.tertiaryLightPrimary svg * {
fill: var(--Tertiary-Light-Button-Primary-On-Fill-Normal);
}
.icon.tertiaryLightPrimary:active svg,
.icon.tertiaryLightPrimary:focus svg,
.icon.tertiaryLightPrimary:hover svg,
.icon.tertiaryLightPrimary:active svg *,
.icon.tertiaryLightPrimary:focus svg *,
.icon.tertiaryLightPrimary:hover svg * {
fill: var(--Tertiary-Light-Button-Primary-On-Fill-Hover);
}
.icon.tertiaryLightPrimary:disabled svg,
.icon.tertiaryLightPrimary:disabled svg * {
fill: var(--Tertiary-Light-Button-Primary-On-Fill-Disabled);
}
.tertiaryLightSecondary {
background-color: var(--Tertiary-Light-Button-Secondary-Fill-Normal);
border-color: var(--Tertiary-Light-Button-Secondary-Border-Normal);
color: var(--Tertiary-Light-Button-Secondary-On-Fill-Normal);
}
.tertiaryLightSecondary:active,
.tertiaryLightSecondary:focus,
.tertiaryLightSecondary:hover {
background-color: var(--Tertiary-Light-Button-Secondary-Fill-Hover);
border-color: var(--Tertiary-Light-Button-Secondary-Border-Hover);
color: var(--Tertiary-Light-Button-Secondary-On-Fill-Hover);
}
.tertiaryLightSecondary:disabled {
background-color: var(--Tertiary-Light-Button-Secondary-Fill-Disabled);
border-color: var(--Tertiary-Light-Button-Secondary-Border-Disabled);
color: var(--Tertiary-Light-Button-Secondary-On-Fill-Disabled);
}
.icon.tertiaryLightSecondary svg,
.icon.tertiaryLightSecondary svg * {
fill: var(--Tertiary-Light-Button-Secondary-On-Fill-Normal);
}
.icon.tertiaryLightSecondary:active svg,
.icon.tertiaryLightSecondary:focus svg,
.icon.tertiaryLightSecondary:hover svg,
.icon.tertiaryLightSecondary:active svg *,
.icon.tertiaryLightSecondary:focus svg *,
.icon.tertiaryLightSecondary:hover svg * {
fill: var(--Tertiary-Light-Button-Secondary-On-Fill-Hover);
}
.icon.tertiaryLightSecondary:disabled svg,
.icon.tertiaryLightSecondary:disabled svg * {
fill: var(--Tertiary-Light-Button-Secondary-On-Fill-Disabled);
}
button.btn.clean {
background: none;
background-color: unset;
border: none;
border-color: unset;
border-radius: unset;
color: unset;
gap: unset;
margin: 0;
padding: 0;
}

72
packages/design-system/lib/components/OldDSButton/index.tsx
View File

@@ -1,72 +0,0 @@
"use client"
import { Slot } from "@radix-ui/react-slot"
import { Button as ButtonRAC } from "react-aria-components"
import { buttonVariants } from "./variants"
import type { VariantProps } from "class-variance-authority"
import type { ButtonProps as ReactAriaButtonProps } from "react-aria-components"
export interface ButtonPropsRAC
extends
Omit<ReactAriaButtonProps, "isDisabled" | "onClick">,
VariantProps<typeof buttonVariants> {
asChild?: false | undefined | never
disabled?: ReactAriaButtonProps["isDisabled"]
onClick?: ReactAriaButtonProps["onPress"]
}
export interface ButtonPropsSlot
extends
React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild: true
}
export type ButtonProps = ButtonPropsSlot | ButtonPropsRAC
/**
* @deprecated Use `@scandic-hotels/design-system/Button` instead.
*/
export function OldDSButton(props: ButtonProps) {
const {
className,
clean,
intent,
size,
theme,
fullWidth,
wrapping,
variant,
...restProps
} = props
const classNames = buttonVariants({
className,
clean,
intent,
size,
theme,
fullWidth,
wrapping,
variant,
})
if (restProps.asChild) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { asChild, ...slotProps } = restProps
return <Slot className={classNames} {...slotProps} />
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { asChild, onClick, disabled, ...racProps } = restProps
return (
<ButtonRAC
className={classNames}
isDisabled={disabled}
onPress={onClick}
{...racProps}
/>
)
}

154
packages/design-system/lib/components/OldDSButton/variants.ts
View File

@@ -1,154 +0,0 @@
import { cva } from "class-variance-authority"
import styles from "./button.module.css"
export const buttonVariants = cva(styles.btn, {
variants: {
intent: {
inverted: styles.inverted,
primary: styles.primary,
secondary: styles.secondary,
tertiary: styles.tertiary,
text: styles.text,
textInverted: styles.text,
},
size: {
small: styles.small,
medium: styles.medium,
large: styles.large,
},
theme: {
base: "",
primaryDark: "",
primaryStrong: "",
primaryLight: "",
secondaryLight: "",
secondaryDark: "",
tertiaryLight: "",
tertiaryDark: "",
},
variant: {
clean: styles.clean,
default: styles.default,
icon: styles.icon,
},
wrapping: {
true: styles.wrapping,
},
clean: {
true: styles.clean,
},
fullWidth: {
true: styles.fullWidth,
},
},
defaultVariants: {
intent: "primary",
size: "medium",
theme: "primaryLight",
variant: "default",
},
compoundVariants: [
{
className: styles.basePrimary,
intent: "primary",
theme: "base",
},
{
className: styles.baseSecondary,
intent: "secondary",
theme: "base",
},
{
className: styles.baseTertiary,
intent: "tertiary",
theme: "base",
},
{
className: styles.baseInverted,
intent: "inverted",
theme: "base",
},
{
className: styles.primaryDarkPrimary,
intent: "primary",
theme: "primaryDark",
},
{
className: styles.primaryDarkSecondary,
intent: "secondary",
theme: "primaryDark",
},
{
className: styles.primaryLightPrimary,
intent: "primary",
theme: "primaryLight",
},
{
className: styles.primaryLightSecondary,
intent: "secondary",
theme: "primaryLight",
},
{
className: styles.primaryStrongPrimary,
intent: "primary",
theme: "primaryStrong",
},
{
className: styles.primaryStrongSecondary,
intent: "secondary",
theme: "primaryStrong",
},
{
className: styles.secondaryDarkPrimary,
intent: "primary",
theme: "secondaryDark",
},
{
className: styles.secondaryDarkSecondary,
intent: "secondary",
theme: "secondaryDark",
},
{
className: styles.secondaryLightPrimary,
intent: "primary",
theme: "secondaryLight",
},
{
className: styles.secondaryLightSecondary,
intent: "secondary",
theme: "secondaryLight",
},
{
className: styles.tertiaryDarkPrimary,
intent: "primary",
theme: "tertiaryDark",
},
{
className: styles.tertiaryDarkSecondary,
intent: "secondary",
theme: "tertiaryDark",
},
{
className: styles.tertiaryLightPrimary,
intent: "primary",
theme: "tertiaryLight",
},
{
className: styles.tertiaryLightSecondary,
intent: "secondary",
theme: "tertiaryLight",
},
{
className: styles.baseText,
intent: "text",
theme: "base",
},
{
className: styles.baseTextInverted,
intent: "textInverted",
theme: "base",
},
],
})

1
packages/design-system/package.json
View File

@@ -158,7 +158,6 @@
"./Modal": "./lib/components/Modal/index.tsx",
"./Modal/ModalContentWithActions": "./lib/components/Modal/ModalContentWithActions/index.tsx",
"./NoRateAvailableCard": "./lib/components/RateCard/NoRateAvailable/index.tsx",
"./OldDSButton": "./lib/components/OldDSButton/index.tsx",
"./OldDSLink": "./lib/components/OldDSLink/index.tsx",
"./OpeningHours": "./lib/components/OpeningHours/index.tsx",
"./ParkingInformation": "./lib/components/ParkingInformation/index.tsx",

12
packages/trpc/lib/routers/contentstack/base/output.ts
View File

@@ -11,10 +11,10 @@ import { nullableStringValidator } from "@scandic-hotels/common/utils/zod/string
import { discriminatedUnion } from "../../../utils/discriminatedUnion"
import {
cardBlockRefsSchema,
cardBlockSchema,
transformCardBlock,
infoCardBlockRefsSchema,
infoCardBlockSchema,
transformCardBlockRefs,
transformInfoCardBlock,
} from "../schemas/blocks/cardsGrid"
import { linkConnectionRefsSchema } from "../schemas/blocks/utils/linkConnection"
import {
@@ -300,7 +300,7 @@ const menuItemsRefsSchema = z.intersection(
cardConnection: z.object({
edges: z.array(
z.object({
node: cardBlockRefsSchema,
node: infoCardBlockRefsSchema,
})
),
}),
@@ -457,7 +457,7 @@ export const menuItemSchema = z
cardConnection: z.object({
edges: z.array(
z.object({
node: cardBlockSchema,
node: infoCardBlockSchema,
})
),
}),
@@ -472,7 +472,7 @@ export const menuItemSchema = z
.transform((data) => {
let card = null
if (data.cardConnection.edges.length) {
card = transformCardBlock(data.cardConnection.edges[0].node)
card = transformInfoCardBlock(data.cardConnection.edges[0].node)
}
return {

38
packages/trpc/lib/routers/contentstack/schemas/blocks/cards/infoCard.ts → packages/trpc/lib/routers/contentstack/schemas/blocks/cards/infoCardWithImage.ts
View File

@@ -4,10 +4,11 @@ import { transformedImageVaultAssetSchema } from "@scandic-hotels/common/utils/i
import { CardsEnum } from "../../../../../types/cardsEnum"
import { systemSchema } from "../../system"
import { getInfoCardThemeFromDeprecatedCardTheme } from "../cardsGrid"
import { buttonSchema } from "../utils/buttonLinkSchema"
import { linkConnectionRefsSchema } from "../utils/linkConnection"
const INFO_CARD_THEMES = [
const INFO_CARD_WITH_IMAGE_THEMES = [
"one",
"two",
"three",
@@ -15,38 +16,55 @@ const INFO_CARD_THEMES = [
"primaryStrong",
] as const
export const infoCardBlockSchema = z.object({
__typename: z.literal(CardsEnum.InfoCard),
export const infoCardWithImageBlockSchema = z.object({
__typename: z.literal(CardsEnum.InfoCardWithImage),
scripted_top_title: z.string().optional(),
heading: z.string().optional().default(""),
body_text: z.string().optional().default(""),
image: transformedImageVaultAssetSchema,
theme: z.enum(INFO_CARD_THEMES).nullable(),
theme: z
.enum(INFO_CARD_WITH_IMAGE_THEMES)
.nullable()
.transform(getInfoCardThemeFromDeprecatedCardTheme),
title: z.string().optional(),
primary_button: buttonSchema.optional().nullable(),
secondary_button: buttonSchema.optional().nullable(),
system: systemSchema,
})
export function transformInfoCardBlock(card: typeof infoCardBlockSchema._type) {
export function transformInfoCardWithImageBlock(
card: typeof infoCardWithImageBlockSchema._type
) {
return {
__typename: card.__typename,
scriptedTopTitle: card.scripted_top_title,
topTitle: card.scripted_top_title,
heading: card.heading,
bodyText: card.body_text,
image: card.image,
theme: card.theme,
title: card.title,
primaryButton: card.primary_button?.href ? card.primary_button : undefined,
primaryButton: card.primary_button?.href
? {
href: card.primary_button.href,
text: card.primary_button.title,
openInNewTab: card.primary_button.openInNewTab,
isExternal: card.primary_button.isExternal,
}
: undefined,
secondaryButton: card.secondary_button?.href
? card.secondary_button
? {
href: card.secondary_button.href,
text: card.secondary_button.title,
openInNewTab: card.secondary_button.openInNewTab,
isExternal: card.secondary_button.isExternal,
}
: undefined,
system: card.system,
}
}
export const infoCardBlockRefsSchema = z.object({
__typename: z.literal(CardsEnum.InfoCard),
export const infoCardWithImageBlockRefsSchema = z.object({
__typename: z.literal(CardsEnum.InfoCardWithImage),
primary_button: linkConnectionRefsSchema,
secondary_button: linkConnectionRefsSchema,
system: systemSchema,

107
packages/trpc/lib/routers/contentstack/schemas/blocks/cardsGrid.ts
View File

@@ -10,10 +10,10 @@ import {
} from "../../../../types/cardsGridEnum"
import { systemSchema } from "../system"
import {
infoCardBlockRefsSchema,
infoCardBlockSchema,
transformInfoCardBlock,
} from "./cards/infoCard"
infoCardWithImageBlockRefsSchema,
infoCardWithImageBlockSchema,
transformInfoCardWithImageBlock,
} from "./cards/infoCardWithImage"
import {
loyaltyCardBlockRefsSchema,
loyaltyCardBlockSchema,
@@ -26,8 +26,8 @@ import {
import { buttonSchema } from "./utils/buttonLinkSchema"
import { linkConnectionRefsSchema } from "./utils/linkConnection"
export const cardBlockSchema = z.object({
__typename: z.literal(CardsGridEnum.cards.Card),
export const infoCardBlockSchema = z.object({
__typename: z.literal(CardsGridEnum.cards.InfoCard),
// JSON - ImageVault Image
background_image: transformedImageVaultAssetSchema,
body_text: z.string().optional().default(""),
@@ -41,17 +41,36 @@ export const cardBlockSchema = z.object({
title: z.string().optional(),
})
export function transformCardBlock(card: typeof cardBlockSchema._type) {
export function transformInfoCardBlock(card: typeof infoCardBlockSchema._type) {
return {
__typename: card.__typename,
backgroundImage: card.background_image,
body_text: card.body_text,
heading: card.heading,
primaryButton: card.has_primary_button ? card.primary_button : undefined,
scripted_top_title: card.scripted_top_title,
secondaryButton: card.has_secondary_button
? card.secondary_button
backgroundImage: card.background_image
? {
src: card.background_image.url,
alt: card.background_image.meta.alt ?? undefined,
focalPoint: card.background_image.focalPoint,
dimensions: card.background_image.dimensions,
}
: undefined,
bodyText: card.body_text,
heading: card.heading,
primaryButton:
card.has_primary_button && card.primary_button
? {
href: card.primary_button.href,
text: card.primary_button.title,
openInNewTab: card.primary_button.openInNewTab,
}
: undefined,
topTitle: card.scripted_top_title,
secondaryButton:
card.has_secondary_button && card.secondary_button
? {
href: card.secondary_button.href,
text: card.secondary_button.title,
openInNewTab: card.secondary_button.openInNewTab,
}
: undefined,
system: card.system,
title: card.title,
}
@@ -68,10 +87,10 @@ export const cardsGridSchema = z.object({
edges: z.array(
z.object({
node: z.discriminatedUnion("__typename", [
cardBlockSchema,
infoCardBlockSchema,
loyaltyCardBlockSchema,
teaserCardBlockSchema,
infoCardBlockSchema,
infoCardWithImageBlockSchema,
]),
})
),
@@ -80,7 +99,10 @@ export const cardsGridSchema = z.object({
layout: z.nativeEnum(CardsGridLayoutEnum),
preamble: z.string().optional().default(""),
theme: z.nativeEnum(scriptedCardThemeEnum).nullable(),
theme: z
.nativeEnum(scriptedCardThemeEnum)
.nullable()
.transform(getInfoCardThemeFromDeprecatedCardTheme),
title: z.string().optional().default(""),
})
.transform((data) => {
@@ -94,12 +116,14 @@ export const cardsGridSchema = z.object({
? { href: data.link.href, text: data.link.title }
: undefined,
cards: data.cardConnection.edges.map((card) => {
if (card.node.__typename === CardsGridEnum.cards.Card) {
return transformCardBlock(card.node)
if (card.node.__typename === CardsGridEnum.cards.InfoCard) {
return transformInfoCardBlock(card.node)
} else if (card.node.__typename === CardsGridEnum.cards.TeaserCard) {
return transformTeaserCardBlock(card.node)
} else if (card.node.__typename === CardsGridEnum.cards.InfoCard) {
return transformInfoCardBlock(card.node)
} else if (
card.node.__typename === CardsGridEnum.cards.InfoCardWithImage
) {
return transformInfoCardWithImageBlock(card.node)
} else {
return {
__typename: card.node.__typename,
@@ -116,8 +140,8 @@ export const cardsGridSchema = z.object({
}),
})
export const cardBlockRefsSchema = z.object({
__typename: z.literal(CardsGridEnum.cards.Card),
export const infoCardBlockRefsSchema = z.object({
__typename: z.literal(CardsGridEnum.cards.InfoCard),
primary_button: linkConnectionRefsSchema,
secondary_button: linkConnectionRefsSchema,
system: systemSchema,
@@ -125,9 +149,9 @@ export const cardBlockRefsSchema = z.object({
export function transformCardBlockRefs(
card:
| typeof cardBlockRefsSchema._type
| typeof teaserCardBlockRefsSchema._type
| typeof infoCardBlockRefsSchema._type
| typeof teaserCardBlockRefsSchema._type
| typeof infoCardWithImageBlockRefsSchema._type
) {
const cards = [card.system]
if (card.primary_button) {
@@ -146,10 +170,10 @@ export const cardGridRefsSchema = z.object({
edges: z.array(
z.object({
node: z.discriminatedUnion("__typename", [
cardBlockRefsSchema,
infoCardBlockRefsSchema,
loyaltyCardBlockRefsSchema,
teaserCardBlockRefsSchema,
infoCardBlockRefsSchema,
infoCardWithImageBlockRefsSchema,
]),
})
),
@@ -160,9 +184,9 @@ export const cardGridRefsSchema = z.object({
return data.cardConnection.edges
.map(({ node }) => {
if (
node.__typename === CardsGridEnum.cards.Card ||
node.__typename === CardsGridEnum.cards.InfoCard ||
node.__typename === CardsGridEnum.cards.TeaserCard ||
node.__typename === CardsGridEnum.cards.InfoCard
node.__typename === CardsGridEnum.cards.InfoCardWithImage
) {
return transformCardBlockRefs(node)
} else {
@@ -176,3 +200,28 @@ export const cardGridRefsSchema = z.object({
.flat()
}),
})
export function getInfoCardThemeFromDeprecatedCardTheme(theme?: string | null) {
if (!theme) {
return null
}
switch (theme) {
case "one":
return "Primary 1"
case "primaryDark":
return "Primary 3"
case "primaryDim":
return "Accent"
case "primaryInverted":
return "White"
case "primaryStrong":
return "Primary 2"
case "image":
return "Image"
case "two": // Doesn't exist anymore, map to Primary 1
case "three": // Doesn't exist anymore, map to Primary 1
default:
return "Primary 1"
}
}

22
packages/trpc/lib/routers/contentstack/schemas/sidebar/scriptedCard.ts
View File

@@ -3,24 +3,28 @@ import { z } from "zod"
import { scriptedCardThemeEnum } from "../../../../enums/scriptedCard"
import { SidebarEnums } from "../../../../types/sidebar"
import {
cardBlockRefsSchema,
cardBlockSchema,
transformCardBlock,
getInfoCardThemeFromDeprecatedCardTheme,
infoCardBlockRefsSchema,
infoCardBlockSchema,
transformCardBlockRefs,
transformInfoCardBlock,
} from "../blocks/cardsGrid"
export const scriptedCardsSchema = z.object({
typename: z
.literal(SidebarEnums.blocks.ScriptedCard)
.literal(SidebarEnums.blocks.InfoCard)
.optional()
.default(SidebarEnums.blocks.ScriptedCard),
.default(SidebarEnums.blocks.InfoCard),
scripted_card: z
.object({
theme: z.nativeEnum(scriptedCardThemeEnum).nullable(),
theme: z
.nativeEnum(scriptedCardThemeEnum)
.nullable()
.transform(getInfoCardThemeFromDeprecatedCardTheme),
scripted_cardConnection: z.object({
edges: z.array(
z.object({
node: cardBlockSchema,
node: infoCardBlockSchema,
})
),
}),
@@ -33,7 +37,7 @@ export const scriptedCardsSchema = z.object({
return {
theme: data.theme,
...transformCardBlock(data.scripted_cardConnection.edges[0].node),
...transformInfoCardBlock(data.scripted_cardConnection.edges[0].node),
}
}),
})
@@ -44,7 +48,7 @@ export const scriptedCardRefschema = z.object({
scripted_cardConnection: z.object({
edges: z.array(
z.object({
node: cardBlockRefsSchema,
node: infoCardBlockRefsSchema,
})
),
}),

4
packages/trpc/lib/types/cardsEnum.ts
View File

@@ -1,7 +1,7 @@
export const CardsEnum = {
Card: "Card",
InfoCard: "Card", // ContentType is Card, component is InfoCard
TeaserCard: "TeaserCard",
LoyaltyCard: "LoyaltyCard",
InfoCard: "InfoCard",
InfoCardWithImage: "InfoCard", // ContentType is InfoCard, component is InfoCardWithImage
ContentCard: "ContentCard",
} as const

4
packages/trpc/lib/types/cardsGridEnum.ts
View File

@@ -7,10 +7,10 @@ import { CardsEnum } from "./cardsEnum"
*/
export namespace CardsGridEnum {
export const cards = {
Card: CardsEnum.Card,
InfoCard: CardsEnum.InfoCard,
InfoCardWithImage: CardsEnum.InfoCardWithImage,
LoyaltyCard: CardsEnum.LoyaltyCard,
TeaserCard: CardsEnum.TeaserCard,
InfoCard: CardsEnum.InfoCard,
} as const satisfies Partial<typeof CardsEnum>
}

2
packages/trpc/lib/types/sidebar.ts
View File

@@ -3,7 +3,7 @@ export namespace SidebarEnums {
Content = "Content",
DynamicContent = "DynamicContent",
JoinLoyaltyContact = "JoinLoyaltyContact",
ScriptedCard = "ScriptedCard",
InfoCard = "ScriptedCard", // ContentType is ScriptedCard, component is InfoCard
TeaserCard = "TeaserCard",
QuickLinks = "QuickLinks",
}