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

Merged in chore/replace-deprecated-body (pull request #3300)

Browse Source 
Replace deprecated <Body> with <Typography>

* chore: replace deprecated body component

* refactor: replace Body component with Typography across various components

* merge


Approved-by: Bianca Widstam
Approved-by: Matilda Landström
This commit is contained in:
Joakim Jäderberg
2025-12-09 12:45:34 +00:00
parent f40035baa9
commit 7eb74ea239
69 changed files with 755 additions and 899 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx
View File

@@ -1,9 +1,8 @@
import { Lock } from "react-feather"
import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membershipLevels"
import Body from "@scandic-hotels/design-system/Body"
import Chip from "@scandic-hotels/design-system/Chip"
import Title from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { getMembershipLevel } from "@/lib/trpc/memoizedRequests"
import { serverClient } from "@/lib/trpc/server"
@@ -55,18 +54,23 @@ export default async function NextLevelRewardsBlock({
})}
</Chip>
<div className={styles.textContainer}>
<Body color="peach50" textAlign="center">
{intl.formatMessage(
{
id: "rewards.nextLevel.asOurLevel",
defaultMessage: "As our {level}",
},
{ level: nextLevelRewards.level?.name }
)}
</Body>
<Title level="h4" as="h4" color="pale" textAlign="center">
{reward.label}
</Title>
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.asOur}
>
<p>
{intl.formatMessage(
{
id: "rewards.nextLevel.asOurLevel",
defaultMessage: "As our {level}",
},
{ level: nextLevelRewards.level?.name }
)}
</p>
</Typography>
<Typography variant="Title/xs" className={styles.rewardTitle}>
<h4>{reward.label}</h4>
</Typography>
</div>
</article>
))}

9
apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/next.module.css
View File

@@ -12,4 +12,13 @@
.textContainer {
display: grid;
gap: var(--Space-x1);
text-align: center;
}
.asOur {
color: var(--Primary-Dark-On-Surface-Accent);
}
.rewardTitle {
color: var(--Scandic-Brand-Pale-Peach);
}

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

@@ -1,8 +1,8 @@
import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Title from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography"
import useRedeemFlow from "./useRedeemFlow"
@@ -21,19 +21,24 @@ export function ConfirmClose({ close }: { close: () => void }) {
defaultMessage: "If you close this your benefit will be removed",
})}
</Title>
<Body>
{intl.formatMessage({
id: "redeem.confirmClose.question",
defaultMessage: "Have you showed this benefit to the hotel staff?",
})}
</Body>
<Body>
{intl.formatMessage({
id: "redeem.confirmClose.info",
defaultMessage:
"If not, please go back and do so before you close this. Once you close this your benefit will be void and removed from My Benefits.",
})}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "redeem.confirmClose.question",
defaultMessage:
"Have you showed this benefit to the hotel staff?",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "redeem.confirmClose.info",
defaultMessage:
"If not, please go back and do so before you close this. Once you close this your benefit will be void and removed from My Benefits.",
})}
</p>
</Typography>
</div>
<footer className={styles.modalFooter}>
<Button

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

@@ -2,12 +2,12 @@
import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Title from "@scandic-hotels/design-system/Title"
import { toast } from "@scandic-hotels/design-system/Toast"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { RewardIcon } from "../../RewardIcon"
@@ -25,7 +25,12 @@ export default function Campaign({ reward }: { reward: Campaign }) {
<Title level="h3" textAlign="center" textTransform="regular">
{reward.label}
</Title>
<Body textAlign="center">{reward.description}</Body>
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.rewardDescription}
>
<p>{reward.description}</p>
</Typography>
<div className={styles.rewardBadge}>
<Caption textAlign="center" color="uiTextHighContrast" type="bold">
{intl.formatMessage({

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

@@ -2,10 +2,10 @@
import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Title from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { isRestaurantOnSiteTierReward } from "@/utils/rewards"
@@ -50,7 +50,12 @@ export default function Tier({
{reward.redeemLocation !== "Non-redeemable" && (
<>
{redeemStep === "initial" && (
<Body textAlign="center">{reward.description}</Body>
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.rewardDescription}
>
<p>{reward.description}</p>
</Typography>
)}
{redeemStep === "confirmation" && reward.redeem_description && (

4
apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css
View File

@@ -129,3 +129,7 @@
.redeemButton {
width: 100%;
}
.rewardDescription {
text-align: center;
}

2
apps/scandic-web/components/Blocks/DynamicContent/index.tsx
View File

@@ -26,9 +26,9 @@ import { ProfilingConsentBanner } from "@/components/MyPages/ProfilingConsent/Ba
import { SJWidget } from "@/components/SJWidget"
import JobylonFeed from "./JobylonFeed"
import { RewardNights } from "./RewardNights"
import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent"
import { RewardNights } from "./RewardNights"
export default function DynamicContent(props: DynamicContentProps) {
return (

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

@@ -3,11 +3,11 @@
import Link from "next/link"
import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
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 Subtitle from "@scandic-hotels/design-system/Subtitle"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery"
@@ -47,7 +47,9 @@ export default function CityListingItem({ city }: CityListingItemProps) {
{city.experiences?.length ? (
<ExperienceList experiences={city.experiences} />
) : null}
<Body>{city.preamble}</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p>{city.preamble}</p>
</Typography>
<Divider color="Border/Divider/Subtle" />

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

@@ -4,9 +4,9 @@ import { useIntl } from "react-intl"
import { Lang } from "@scandic-hotels/common/constants/language"
import { dt } from "@scandic-hotels/common/dt"
import Body from "@scandic-hotels/design-system/Body"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { Typography } from "@scandic-hotels/design-system/Typography"
import useLang from "@/hooks/useLang"
@@ -101,14 +101,14 @@ export default function DatePickerSingleMobile({
size="large"
theme="base"
>
<Body color="white" textTransform="bold" asChild>
<Typography variant="Body/Paragraph/mdBold">
<span>
{intl.formatMessage({
id: "datePicker.selectDates",
defaultMessage: "Select dates",
})}
</span>
</Body>
</Typography>
</Button>
</footer>
</div>

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

@@ -88,6 +88,9 @@ div.months {
.footer .button {
width: 100%;
span {
color: white;
}
}
td.day,

6
apps/scandic-web/components/DestinationFilterAndSort/Filter/Checkbox/index.tsx
View File

@@ -2,8 +2,8 @@
import { Checkbox as AriaCheckbox } from "react-aria-components"
import Body from "@scandic-hotels/design-system/Body"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "./checkbox.module.css"
@@ -31,9 +31,9 @@ export default function Checkbox({
<span className={styles.checkbox}>
{isSelected && <MaterialIcon icon="check" color="Icon/Inverted" />}
</span>
<Body asChild>
<Typography variant="Body/Paragraph/mdRegular">
<span>{name}</span>
</Body>
</Typography>
</>
)}
</AriaCheckbox>

5
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/addedAncillaries.module.css
View File

@@ -26,6 +26,7 @@
display: flex;
justify-content: space-between;
gap: var(--Space-x1);
color: var(--Base-Text-High-contrast);
}
.ancillaryMobile {
@@ -106,3 +107,7 @@
display: flex;
gap: var(--Space-x2);
}
.ancillaryComment {
color: var(--UI-Text-Medium-contrast);
}

182
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx
View File

@@ -4,10 +4,10 @@ import { useIntl } from "react-intl"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Accordion from "@scandic-hotels/design-system/Accordion"
import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
import Body from "@scandic-hotels/design-system/Body"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"
import { getBreakfastPackagesFromAncillaryFlow } from "../../utils/hasBreakfastPackage"
@@ -47,17 +47,18 @@ export function AddedAncillaries({
</Subtitle>
{booking.ancillary?.deliveryTime && (
<div className={styles.deliveryTime}>
<Body color="baseTextHighContrast" textTransform="bold">
{intl.formatMessage({
id: "ancillaries.deliveredAt",
defaultMessage: "Delivered at:",
})}
</Body>
<Body color="baseTextHighContrast" textTransform="bold">
{booking.ancillary?.deliveryTime}
</Body>
</div>
<Typography variant="Body/Paragraph/mdBold">
<div className={styles.deliveryTime}>
<p>
{intl.formatMessage({
id: "ancillaries.deliveredAt",
defaultMessage: "Delivered at:",
})}
</p>
<p>{booking.ancillary?.deliveryTime}</p>
</div>
</Typography>
)}
</div>
@@ -90,46 +91,55 @@ export function AddedAncillaries({
{ancillary.comment && (
<>
<div className={styles.commentMobile}>
<Body textTransform="bold">
{intl.formatMessage({
id: "common.otherRequests",
defaultMessage: "Other requests",
})}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{":"}
</Body>
<Body color="uiTextMediumContrast">
{ancillary.comment}
</Body>
<Typography variant="Body/Paragraph/mdBold">
<p>
{intl.formatMessage({
id: "common.otherRequests",
defaultMessage: "Other requests",
})}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{":"}
</p>
</Typography>
<Typography
variant="Body/Paragraph/mdBold"
className={styles.ancillaryComment}
>
<p>{ancillary.comment}</p>
</Typography>
</div>
</>
)}
<div className={styles.paymentMobileWrapper}>
<div className={styles.paymentMobile}>
<Body>
{intl.formatMessage({
id: "common.total",
defaultMessage: "Total",
})}
</Body>
<Body textTransform="bold">
{ancillary.currency.toLowerCase() === "points"
? intl.formatMessage(
{
id: "common.numberOfPoints",
defaultMessage:
"{points, plural, one {# point} other {# points}}",
},
{
points: ancillary.totalPrice,
}
)
: formatPrice(
intl,
ancillary.totalPrice,
ancillary.currency
)}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "common.total",
defaultMessage: "Total",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdBold">
<p>
{ancillary.currency.toLowerCase() === "points"
? intl.formatMessage(
{
id: "common.numberOfPoints",
defaultMessage:
"{points, plural, one {# point} other {# points}}",
},
{
points: ancillary.totalPrice,
}
)
: formatPrice(
intl,
ancillary.totalPrice,
ancillary.currency
)}
</p>
</Typography>
</div>
</div>
</div>
@@ -162,33 +172,39 @@ export function AddedAncillaries({
icon="check_circle"
color="Icon/Feedback/Success"
/>
<Body textTransform="bold">{ancillaryTitle}</Body>
<Typography variant="Body/Paragraph/mdBold">
<p>{ancillaryTitle}</p>
</Typography>
</div>
<div className={styles.payment}>
<Body>
{intl.formatMessage({
id: "common.total",
defaultMessage: "Total",
})}
</Body>
<Body textTransform="bold">
{ancillary.currency.toLowerCase() === "points"
? intl.formatMessage(
{
id: "common.numberOfPoints",
defaultMessage:
"{points, plural, one {# point} other {# points}}",
},
{
points: ancillary.totalPrice,
}
)
: formatPrice(
intl,
ancillary.totalPrice,
ancillary.currency
)}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "common.total",
defaultMessage: "Total",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdBold">
<p>
{ancillary.currency.toLowerCase() === "points"
? intl.formatMessage(
{
id: "common.numberOfPoints",
defaultMessage:
"{points, plural, one {# point} other {# points}}",
},
{
points: ancillary.totalPrice,
}
)
: formatPrice(
intl,
ancillary.totalPrice,
ancillary.currency
)}
</p>
</Typography>
</div>
</div>
@@ -198,15 +214,19 @@ export function AddedAncillaries({
<div className={styles.comment}>
{ancillary.comment && (
<>
<Body textTransform="bold">
{intl.formatMessage({
id: "common.otherRequests",
defaultMessage: "Other requests",
})}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{":"}
</Body>
<Body>{ancillary.comment}</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "common.otherRequests",
defaultMessage: "Other requests",
})}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{":"}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>{ancillary.comment}</p>
</Typography>
</>
)}
</div>

18
apps/scandic-web/components/MyPages/Profile/MembershipCards/index.tsx
View File

@@ -1,4 +1,3 @@
import Body from "@scandic-hotels/design-system/Body"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Link from "@scandic-hotels/design-system/OldDSLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -86,12 +85,17 @@ export default async function MembershipCardSlot() {
))}
<Link href="#" variant="icon">
<MaterialIcon icon="add_circle" color="CurrentColor" />
<Body color="burgundy" textTransform="underlined">
{intl.formatMessage({
id: "myPages.addNewCard",
defaultMessage: "Add new card",
})}
</Body>
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.addNewCardText}
>
<p>
{intl.formatMessage({
id: "myPages.addNewCard",
defaultMessage: "Add new card",
})}
</p>
</Typography>
</Link>
</section>
)

5
apps/scandic-web/components/MyPages/Profile/MembershipCards/membershipCards.module.css
View File

@@ -20,3 +20,8 @@
.subTitle {
grid-column: span 2;
}
.addNewCardText {
text-decoration: underline;
color: var(--Scandic-Brand-Burgundy);
}

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

@@ -1,7 +1,6 @@
"use client"
import Image from "next/image"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
@@ -9,6 +8,7 @@ import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton
import Link from "@scandic-hotels/design-system/OldDSLink"
import Subtitle from "@scandic-hotels/design-system/Subtitle"
import Title from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { Section } from "@/components/Section"
@@ -94,13 +94,12 @@ function TierDetails({
<details className={styles.tierDetails} name="sas-scandic-tier-match">
<summary className={styles.tierSummary}>
<div className={styles.tierTitles}>
<Body
textAlign="center"
textTransform="bold"
<Typography
variant="Body/Paragraph/mdBold"
className={styles.tierTitle}
>
{tierMatch.scandic_friends_tier_name}
</Body>
<p>{tierMatch.scandic_friends_tier_name}</p>
</Typography>
<div className={styles.comparisonIcon}>
<MaterialIcon icon="compare_arrows" size={16} />
</div>
@@ -111,13 +110,12 @@ function TierDetails({
position: "relative",
}}
>
<Body
textAlign="center"
textTransform="bold"
<Typography
variant="Body/Paragraph/mdBold"
className={styles.tierTitle}
>
{tierMatch.sas_eb_tier_name}
</Body>
<p>{tierMatch.sas_eb_tier_name}</p>
</Typography>
<div className={styles.iconWrapper}>
<MaterialIcon
icon="keyboard_arrow_down"

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

@@ -119,6 +119,7 @@
.tierTitle {
flex-grow: 1;
z-index: 1;
text-align: center;
}
.comparisonIcon {

4
apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css
View File

@@ -9,3 +9,7 @@
align-items: center;
gap: var(--Space-x1);
}
.displayText {
color: var(--Scandic-Brand-Burgundy);
}

11
apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
View File

@@ -1,10 +1,10 @@
import Body from "@scandic-hotels/design-system/Body"
import Footnote from "@scandic-hotels/design-system/Footnote"
import {
MaterialIcon,
type MaterialIconSetIconProps,
} from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Link from "@scandic-hotels/design-system/OldDSLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { getValueFromContactConfig } from "@scandic-hotels/trpc/utils/contactConfig"
import { serverClient } from "@/lib/trpc/server"
@@ -46,9 +46,12 @@ export default async function ContactRow({ contact }: ContactRowProps) {
return (
<div className={styles.wrapper}>
<Body color="burgundy" textTransform="bold">
{contact.display_text}
</Body>
<Typography
variant="Body/Paragraph/mdBold"
className={styles.displayText}
>
<p>{contact.display_text}</p>
</Typography>
<Link
className={styles.link}
href={openableLink}

9
apps/scandic-web/components/TempDesignSystem/AncillaryCard/ancillaryCard.module.css
View File

@@ -18,6 +18,7 @@
.price {
display: flex;
gap: var(--Space-x1);
color: var(--UI-Text-High-contrast);
}
.contentContainer {
@@ -26,3 +27,11 @@
flex-direction: column;
gap: var(--Space-x1);
}
.ancillaryTitle {
color: var(--UI-Text-High-contrast);
}
.ancillaryPoints {
color: var(--UI-Text-High-contrast);
text-align: right;
}

58
apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx
View File

@@ -1,10 +1,10 @@
import { useIntl } from "react-intl"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption"
import { Divider } from "@scandic-hotels/design-system/Divider"
import Image from "@scandic-hotels/design-system/Image"
import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "./ancillaryCard.module.css"
@@ -30,37 +30,47 @@ export function AncillaryCard({ ancillary }: AncillaryCardProps) {
</div>
<div className={styles.contentContainer}>
<div>
<Body textTransform="bold" color="uiTextHighContrast">
{ancillary.title}
</Body>
<Typography
variant="Body/Paragraph/mdBold"
className={styles.ancillaryTitle}
>
<p>{ancillary.title}</p>
</Typography>
<div className={styles.price}>
<Body color="uiTextHighContrast">
{ancillary.price.included
? intl.formatMessage({
id: "common.included",
defaultMessage: "Included",
})
: priceMsg}
</Body>
<Typography>
<p>
{ancillary.price.included
? intl.formatMessage({
id: "common.included",
defaultMessage: "Included",
})
: priceMsg}
</p>
</Typography>
{ancillary.points && (
<>
<div>
<Divider variant="vertical" />
</div>
<Body textAlign="right" color="uiTextHighContrast">
{intl.formatMessage(
{
id: "common.numberOfPoints",
defaultMessage:
"{points, plural, one {# point} other {# points}}",
},
{
points: ancillary.points,
}
)}
</Body>
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.ancillaryPoints}
>
<p>
{intl.formatMessage(
{
id: "common.numberOfPoints",
defaultMessage:
"{points, plural, one {# point} other {# points}}",
},
{
points: ancillary.points,
}
)}
</p>
</Typography>
</>
)}
</div>

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

@@ -56,34 +56,60 @@
.themeOne {
background: var(--Primary-Light-Surface-Normal);
.bodyText {
color: var(--Primary-Light-On-Surface-Text);
}
}
.themeTwo {
background: var(--Secondary-Light-Surface-Normal);
.bodyText {
color: var(--Secondary-Light-On-Surface-Text);
}
}
.themeThree {
background: var(--Tertiary-Light-Surface-Normal);
.bodyText {
color: var(--Tertiary-Light-On-Surface-Text);
}
}
.themePrimaryDark {
background: var(--Primary-Dark-Surface-Normal);
.bodyText {
color: var(--Primary-Dark-On-Surface-Text);
}
}
.themePrimaryDim {
background: var(--Primary-Dim-Surface-Normal);
.bodyText {
color: var(--Primary-Dim-On-Surface-Text);
}
}
.themePrimaryInverted {
background: var(--Base-Surface-Primary-light-Normal);
.bodyText {
color: var(--Primary-Light-On-Surface-Text);
}
}
.themePrimaryStrong {
background: var(--Primary-Strong-Surface-Normal);
.bodyText {
color: var(--Primary-Strong-On-Surface-Text);
}
}
.themeImage .content {
position: absolute;
.themeImage {
.bodyText {
color: var(--Base-Text-Inverted);
}
.content {
position: absolute;
}
}
.scriptContainer {

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

@@ -1,19 +1,14 @@
import { cx } from "class-variance-authority"
import Link from "next/link"
import Body from "@scandic-hotels/design-system/Body"
import Image from "@scandic-hotels/design-system/Image"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Title from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import {
getBodyFontColor,
getButtonTheme,
getScriptFontColor,
getTitleFontColor,
} from "./utils"
import { getButtonTheme, getScriptFontColor, getTitleFontColor } from "./utils"
import { cardVariants } from "./variants"
import styles from "./card.module.css"
@@ -37,7 +32,6 @@ export default function Card({
const buttonTheme = getButtonTheme(theme)
const titleFontColor = getTitleFontColor(theme)
const scriptFontColor = getScriptFontColor(theme)
const bodyFontColor = getBodyFontColor(theme)
return (
<article
@@ -65,7 +59,7 @@ export default function Card({
</div>
)}
<div className={styles.content}>
{scriptedTopTitle ? (
{scriptedTopTitle && (
<section className={styles.scriptContainer}>
<BiroScript
className={styles.scriptedTitle}
@@ -76,7 +70,7 @@ export default function Card({
{scriptedTopTitle}
</BiroScript>
</section>
) : null}
)}
<Title
as="h3"
level="h3"
@@ -86,11 +80,14 @@ export default function Card({
>
{heading}
</Title>
{bodyText ? (
<Body textAlign="center" color={bodyFontColor}>
{bodyText}
</Body>
) : null}
{bodyText && (
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.bodyText}
>
<p>{bodyText}</p>
</Typography>
)}
<div className={styles.buttonContainer}>
{primaryButton ? (
<Button

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

@@ -1,4 +1,3 @@
import type Body from "@scandic-hotels/design-system/Body"
import type { ButtonProps } from "@scandic-hotels/design-system/OldDSButton"
import type Title from "@scandic-hotels/design-system/Title"
import type { VariantProps } from "class-variance-authority"
@@ -52,28 +51,6 @@ export function getScriptFontColor(
}
}
type BodyColor = ComponentProps<typeof Body>["color"]
export function getBodyFontColor(theme: CardProps["theme"]): BodyColor {
switch (theme) {
case "one":
return "primaryLight"
case "two":
return "secondaryLight"
case "three":
return "tertiaryLight"
case "primaryDark":
return "primaryDark"
case "primaryDim":
return "primaryDim"
case "primaryInverted":
return "primaryLight"
case "primaryStrong":
return "primaryStrong"
case "image":
return "baseText"
}
}
export function getButtonTheme(
theme: CardProps["theme"]
): ButtonProps["theme"] {

11
apps/scandic-web/components/TempDesignSystem/LoyaltyCard/index.tsx
View File

@@ -1,8 +1,8 @@
import Body from "@scandic-hotels/design-system/Body"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Image from "@scandic-hotels/design-system/Image"
import Link from "@scandic-hotels/design-system/OldDSLink"
import Title from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { loyaltyCardVariants } from "./variants"
@@ -39,7 +39,14 @@ export default function LoyaltyCard({
<Title as="h4" level="h3" textAlign="center">
{heading}
</Title>
{bodyText ? <Body textAlign="center">{bodyText}</Body> : null}
{!!bodyText && (
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.bodyText}
>
<p>{bodyText}</p>
</Typography>
)}
<div className={styles.buttonContainer}>
{link ? (
<Link

3
apps/scandic-web/components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css
View File

@@ -36,3 +36,6 @@
.icon {
align-self: center;
}
.bodyText {
text-align: center;
}

7
apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx
View File

@@ -1,7 +1,7 @@
import Body from "@scandic-hotels/design-system/Body"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import Image from "@scandic-hotels/design-system/Image"
import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { Typography } from "@scandic-hotels/design-system/Typography"
import TeaserCardSidepeek from "./Sidepeek"
import { teaserCardVariants } from "./variants"
@@ -42,7 +42,10 @@ export default function TeaserCard({
<Subtitle textAlign="left" type="two" color="black">
{title}
</Subtitle>
<Body color="black">{description}</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p>{description}</p>
</Typography>
{sidePeekButton && sidePeekContent ? (
<TeaserCardSidepeek
button={sidePeekButton}

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

@@ -35,6 +35,8 @@
padding: var(--Space-x2) var(--Space-x3);
grid-template-rows: auto 1fr auto;
flex-grow: 1;
color: var(--Main-Grey-100);
}
.description {