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

30
apps/partner-sas/i18n/dictionaries/da.json
View File

@@ -3110,8 +3110,7 @@
"value": "Vi er stadig ved at bekræfte din booking. Det tager normalt kun få minutter, og vi undskylder ventetiden. Tjek venligst din indbakke for en bookingbekræftelse, og hvis du stadig ikke har modtaget den sidst på dagen, bedes du kontakte vores kundesupport på "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "link"
},
@@ -4533,8 +4532,7 @@
"value": "Indtast venligst koden sendt til "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},
@@ -7589,14 +7587,12 @@
"value": ". Sådanne tilbud kan være baseret på dine tidligere interaktioner med Scandic, herunder købshistorik, oplysninger du har indtastet i din medlemsprofil, besvarede kundeundersøgelser, interaktioner med kundeservice og online brugeradfærd, når du benytter Scandics hjemmeside eller app. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -7605,14 +7601,12 @@
"value": " Hvis du giver dit samtykke til forbedret personalisering, kan Scandic skabe et endnu mere personligt medlemskab til dig og sende dig personlige tilbud baseret på dine interaktioner med Scandic Friends-partnere. Scandic kan også dele de oplysninger, der bruges til dit personlige medlemskab, med Scandic Friends-partnere til analytiske og marketingformål, for eksempel for at følge op på partnerskaber, udvikle nye relevante produkter og skræddersy tilbud afhængigt af dine interesser. Scandic Friends-partnere kan tilpasse deres eksisterende kommunikation til dig baseret på persondata, vi har delt med dem. Ingen af vores Scandic Friends-partnere vil dog sende marketingkommunikation til dig baseret på det samtykke, du har givet til Scandic. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -8111,8 +8105,7 @@
"value": "Link dine "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "scandicFriends"
},
@@ -8121,8 +8114,7 @@
"value": " og "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "sasEuroBonus"
},
@@ -8992,8 +8984,7 @@
"value": "Indtast venligst den kode, der er sendt til "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},
@@ -9055,8 +9046,7 @@
"value": "Indtast venligst den kode, der er sendt til "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},

27
apps/partner-sas/i18n/dictionaries/de.json
View File

@@ -4553,8 +4553,7 @@
"value": "Bitte geben Sie den Code ein, der an "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},
@@ -7585,14 +7584,12 @@
"value": "erhalten. Solche Angebote können auf Ihren bisherigen Interaktionen mit Scandic basieren, einschließlich Kaufhistorie, Informationen, die Sie in Ihrem Mitgliedsprofil eingegeben haben, beantworteten Kundenbefragungen, Interaktionen mit dem Kundenservice und Online-Verhalten bei der Nutzung der Website oder App von Scandic. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -7601,14 +7598,12 @@
"value": " Wenn Sie Ihre Einwilligung zu einer verbesserten Personalisierung erteilen, kann Scandic eine noch persönlichere Mitgliedschaft für Sie erstellen und Ihnen personalisierte Angebote basierend auf Ihren Interaktionen mit Scandic Friends Partnern zusenden. Scandic kann die für Ihre personalisierte Mitgliedschaft verwendeten Informationen auch mit Scandic Friends Partnern zu Analyse- und Marketingzwecken teilen, beispielsweise um Partnerschaften nachzuverfolgen, neue relevante Produkte zu entwickeln und Angebote entsprechend Ihren Interessen anzupassen. Scandic Friends Partner können ihre bestehende Kommunikation mit Ihnen auf Grundlage der personenbezogenen Daten anpassen, die wir mit ihnen geteilt haben. Keiner unserer Scandic Friends Partner wird Ihnen jedoch auf Grundlage der Einwilligung, die Sie Scandic erteilt haben, Marketingkommunikation zusenden. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -8107,8 +8102,7 @@
"value": "Verknüpfen Sie Ihre "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "scandicFriends"
},
@@ -8117,8 +8111,7 @@
"value": "- und "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "sasEuroBonus"
},
@@ -8992,8 +8985,7 @@
"value": "Bitte geben Sie den an "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},
@@ -9055,8 +9047,7 @@
"value": "Bitte geben Sie den Code ein, der an "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},

27
apps/partner-sas/i18n/dictionaries/en.json
View File

@@ -4537,8 +4537,7 @@
"value": "Please enter the code sent to "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},
@@ -7565,14 +7564,12 @@
"value": ". Such offers could be based on your previous interactions with Scandic including purchase history, information you have entered in your member profile, answered customer surveys, interactions with customer service, and online behavior when using Scandic’s website or app. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -7581,14 +7578,12 @@
"value": " If you give your consent to improved personalization, Scandic can create an even more personalized membership for you and send you personalized offers based on your interactions with Scandic Friends partners. Scandic may also share the information used for your personalized membership with Scandic Friends partners for analytical and marketing purposes, for example to follow up on partnerships, develop new relevant products and to tailor offers depending on your interests. Scandic Friends partners may adapt their existing communications to you based on personal data we have shared with them. None of our Scandic Friends partners will however send marketing communications to you based on the consent you have given to Scandic. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -8087,8 +8082,7 @@
"value": "Link your "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "scandicFriends"
},
@@ -8097,8 +8091,7 @@
"value": " and "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "sasEuroBonus"
},
@@ -8960,8 +8953,7 @@
"value": "Please enter the code sent to "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},
@@ -9023,8 +9015,7 @@
"value": "Please enter the code sent to "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},

27
apps/partner-sas/i18n/dictionaries/fi.json
View File

@@ -4549,8 +4549,7 @@
"value": "Anna koodi, joka lähetettiin numeroon "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},
@@ -7605,14 +7604,12 @@
"value": "tuotteista ja palveluista. Tällaiset tarjoukset voivat perustua aiempiin vuorovaikutuksiisi Scandicin kanssa, kuten ostohistoriaasi, jäsenprofiiliisi syöttämiisi tietoihin, asiakaskyselyihin annettuihin vastauksiin, yhteydenpitoon asiakaspalvelun kanssa sekä verkkokäyttäytymiseesi Scandicin nettisivulla tai sovelluksessa. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -7621,14 +7618,12 @@
"value": " Jos annat suostumuksesi tehostettuun personointiin, Scandic voi luoda sinulle entistä yksilöllisemmän jäsenyyden ja lähettää personoituja tarjouksia myös Scandic Friends -kumppaneiden kanssa käymiesi vuorovaikutusten perusteella. Scandic voi lisäksi jakaa personointiin käytettyjä tietoja Scandic Friends -kumppaneiden kanssa analytiikka- ja markkinointitarkoituksiin, esimerkiksi kumppanuuksien seurantaan, uusien relevanttien tuotteiden kehittämiseen ja tarjousten räätälöintiin kiinnostustesi mukaan. Scandic Friends -kumppanit voivat mukauttaa sinuun kohdistuvaa omaa viestintäänsä jaettujen henkilötietojen perusteella. Yksikään Scandic Friends -kumppaneistamme ei kuitenkaan lähetä sinulle markkinointiviestintää Scandicille antamasi suostumuksen perusteella. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -8131,8 +8126,7 @@
"value": "Yhdistä "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "scandicFriends"
},
@@ -8141,8 +8135,7 @@
"value": "- ja "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "sasEuroBonus"
},
@@ -9020,8 +9013,7 @@
"value": "Kirjoita osoitteeseen "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},
@@ -9083,8 +9075,7 @@
"value": "Kirjoita osoitteeseen "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},

21
apps/partner-sas/i18n/dictionaries/no.json
View File

@@ -4537,8 +4537,7 @@
"value": "Vennligst skriv inn koden som ble sendt til "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},
@@ -7601,14 +7600,12 @@
"value": ". Slike tilbud kan være basert på dine tidligere interaksjoner med Scandic, inkludert kjøpshistorikk, informasjon du har lagt inn i medlemsprofilen din, besvarte kundeundersøkelser, interaksjoner med kundeservice og nettadferd når du bruker Scandics nettsted eller app. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -7617,14 +7614,12 @@
"value": " Hvis du gir ditt samtykke til forbedret personalisering, kan Scandic skape et enda mer personlig tilpasset medlemskap for deg og sende deg personlige tilbud basert på dine interaksjoner med Scandic Friends-partnere. Scandic kan også dele informasjonen som brukes til ditt personlige medlemskap med Scandic Friends-partnere for analyse- og markedsføringsformål, for eksempel for å følge opp partnerskap, utvikle nye relevante produkter og tilpasse tilbud avhengig av dine interesser. Scandic Friends-partnere kan tilpasse sin eksisterende kommunikasjon til deg basert på personopplysninger vi har delt med dem. Ingen av våre Scandic Friends-partnere vil imidlertid sende markedsføringskommunikasjon til deg basert på samtykket du har gitt til Scandic. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -8123,8 +8118,7 @@
"value": "Koble sammen "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "scandicFriends"
},
@@ -8133,8 +8127,7 @@
"value": " og "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "sasEuroBonus"
},

27
apps/partner-sas/i18n/dictionaries/sv.json
View File

@@ -4545,8 +4545,7 @@
"value": "Vänligen ange koden som skickats till "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},
@@ -7585,14 +7584,12 @@
"value": ". Sådana erbjudanden kan baseras på dina tidigare interaktioner med Scandic, inklusive köphistorik, information du har angett i din medlemsprofil, besvarade kundundersökningar, interaktioner med kundservice samt onlinebeteende när du använder Scandics webbplats eller app. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -7601,14 +7598,12 @@
"value": " Om du ger ditt samtycke till förbättrad personalisering kan Scandic skapa ett ännu mer personligt medlemskap för dig och skicka personliga erbjudanden baserade på dina interaktioner med Scandic Friends-partners. Scandic kan också dela den information som används för ditt personliga medlemskap med Scandic Friends-partners för analytiska och marknadsföringsändamål, till exempel för att följa upp partnerskap, utveckla nya relevanta produkter och anpassa erbjudanden utifrån dina intressen. Scandic Friends-partners kan anpassa sin befintliga kommunikation till dig baserat på personuppgifter som vi har delat med dem. Ingen av våra Scandic Friends-partners kommer dock att skicka marknadsföringskommunikation till dig baserat på det samtycke du har gett till Scandic. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -8107,8 +8102,7 @@
"value": "Länka dina "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "scandicFriends"
},
@@ -8117,8 +8111,7 @@
"value": " och "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "sasEuroBonus"
},
@@ -8984,8 +8977,7 @@
"value": "Vänligen ange koden som skickats till "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},
@@ -9047,8 +9039,7 @@
"value": "Vänligen ange den kod som skickats till "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},

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 {

30
apps/scandic-web/i18n/dictionaries/da.json
View File

@@ -3110,8 +3110,7 @@
"value": "Vi er stadig ved at bekræfte din booking. Det tager normalt kun få minutter, og vi undskylder ventetiden. Tjek venligst din indbakke for en bookingbekræftelse, og hvis du stadig ikke har modtaget den sidst på dagen, bedes du kontakte vores kundesupport på "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "link"
},
@@ -4533,8 +4532,7 @@
"value": "Indtast venligst koden sendt til "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},
@@ -7589,14 +7587,12 @@
"value": ". Sådanne tilbud kan være baseret på dine tidligere interaktioner med Scandic, herunder købshistorik, oplysninger du har indtastet i din medlemsprofil, besvarede kundeundersøgelser, interaktioner med kundeservice og online brugeradfærd, når du benytter Scandics hjemmeside eller app. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -7605,14 +7601,12 @@
"value": " Hvis du giver dit samtykke til forbedret personalisering, kan Scandic skabe et endnu mere personligt medlemskab til dig og sende dig personlige tilbud baseret på dine interaktioner med Scandic Friends-partnere. Scandic kan også dele de oplysninger, der bruges til dit personlige medlemskab, med Scandic Friends-partnere til analytiske og marketingformål, for eksempel for at følge op på partnerskaber, udvikle nye relevante produkter og skræddersy tilbud afhængigt af dine interesser. Scandic Friends-partnere kan tilpasse deres eksisterende kommunikation til dig baseret på persondata, vi har delt med dem. Ingen af vores Scandic Friends-partnere vil dog sende marketingkommunikation til dig baseret på det samtykke, du har givet til Scandic. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -8111,8 +8105,7 @@
"value": "Link dine "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "scandicFriends"
},
@@ -8121,8 +8114,7 @@
"value": " og "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "sasEuroBonus"
},
@@ -8992,8 +8984,7 @@
"value": "Indtast venligst den kode, der er sendt til "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},
@@ -9055,8 +9046,7 @@
"value": "Indtast venligst den kode, der er sendt til "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},

27
apps/scandic-web/i18n/dictionaries/de.json
View File

@@ -4553,8 +4553,7 @@
"value": "Bitte geben Sie den Code ein, der an "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},
@@ -7585,14 +7584,12 @@
"value": "erhalten. Solche Angebote können auf Ihren bisherigen Interaktionen mit Scandic basieren, einschließlich Kaufhistorie, Informationen, die Sie in Ihrem Mitgliedsprofil eingegeben haben, beantworteten Kundenbefragungen, Interaktionen mit dem Kundenservice und Online-Verhalten bei der Nutzung der Website oder App von Scandic. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -7601,14 +7598,12 @@
"value": " Wenn Sie Ihre Einwilligung zu einer verbesserten Personalisierung erteilen, kann Scandic eine noch persönlichere Mitgliedschaft für Sie erstellen und Ihnen personalisierte Angebote basierend auf Ihren Interaktionen mit Scandic Friends Partnern zusenden. Scandic kann die für Ihre personalisierte Mitgliedschaft verwendeten Informationen auch mit Scandic Friends Partnern zu Analyse- und Marketingzwecken teilen, beispielsweise um Partnerschaften nachzuverfolgen, neue relevante Produkte zu entwickeln und Angebote entsprechend Ihren Interessen anzupassen. Scandic Friends Partner können ihre bestehende Kommunikation mit Ihnen auf Grundlage der personenbezogenen Daten anpassen, die wir mit ihnen geteilt haben. Keiner unserer Scandic Friends Partner wird Ihnen jedoch auf Grundlage der Einwilligung, die Sie Scandic erteilt haben, Marketingkommunikation zusenden. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -8107,8 +8102,7 @@
"value": "Verknüpfen Sie Ihre "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "scandicFriends"
},
@@ -8117,8 +8111,7 @@
"value": "- und "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "sasEuroBonus"
},
@@ -8992,8 +8985,7 @@
"value": "Bitte geben Sie den an "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},
@@ -9055,8 +9047,7 @@
"value": "Bitte geben Sie den Code ein, der an "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},

27
apps/scandic-web/i18n/dictionaries/en.json
View File

@@ -4537,8 +4537,7 @@
"value": "Please enter the code sent to "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},
@@ -7565,14 +7564,12 @@
"value": ". Such offers could be based on your previous interactions with Scandic including purchase history, information you have entered in your member profile, answered customer surveys, interactions with customer service, and online behavior when using Scandic’s website or app. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -7581,14 +7578,12 @@
"value": " If you give your consent to improved personalization, Scandic can create an even more personalized membership for you and send you personalized offers based on your interactions with Scandic Friends partners. Scandic may also share the information used for your personalized membership with Scandic Friends partners for analytical and marketing purposes, for example to follow up on partnerships, develop new relevant products and to tailor offers depending on your interests. Scandic Friends partners may adapt their existing communications to you based on personal data we have shared with them. None of our Scandic Friends partners will however send marketing communications to you based on the consent you have given to Scandic. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -8087,8 +8082,7 @@
"value": "Link your "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "scandicFriends"
},
@@ -8097,8 +8091,7 @@
"value": " and "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "sasEuroBonus"
},
@@ -8960,8 +8953,7 @@
"value": "Please enter the code sent to "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},
@@ -9023,8 +9015,7 @@
"value": "Please enter the code sent to "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},

27
apps/scandic-web/i18n/dictionaries/fi.json
View File

@@ -4549,8 +4549,7 @@
"value": "Anna koodi, joka lähetettiin numeroon "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},
@@ -7605,14 +7604,12 @@
"value": "tuotteista ja palveluista. Tällaiset tarjoukset voivat perustua aiempiin vuorovaikutuksiisi Scandicin kanssa, kuten ostohistoriaasi, jäsenprofiiliisi syöttämiisi tietoihin, asiakaskyselyihin annettuihin vastauksiin, yhteydenpitoon asiakaspalvelun kanssa sekä verkkokäyttäytymiseesi Scandicin nettisivulla tai sovelluksessa. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -7621,14 +7618,12 @@
"value": " Jos annat suostumuksesi tehostettuun personointiin, Scandic voi luoda sinulle entistä yksilöllisemmän jäsenyyden ja lähettää personoituja tarjouksia myös Scandic Friends -kumppaneiden kanssa käymiesi vuorovaikutusten perusteella. Scandic voi lisäksi jakaa personointiin käytettyjä tietoja Scandic Friends -kumppaneiden kanssa analytiikka- ja markkinointitarkoituksiin, esimerkiksi kumppanuuksien seurantaan, uusien relevanttien tuotteiden kehittämiseen ja tarjousten räätälöintiin kiinnostustesi mukaan. Scandic Friends -kumppanit voivat mukauttaa sinuun kohdistuvaa omaa viestintäänsä jaettujen henkilötietojen perusteella. Yksikään Scandic Friends -kumppaneistamme ei kuitenkaan lähetä sinulle markkinointiviestintää Scandicille antamasi suostumuksen perusteella. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -8131,8 +8126,7 @@
"value": "Yhdistä "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "scandicFriends"
},
@@ -8141,8 +8135,7 @@
"value": "- ja "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "sasEuroBonus"
},
@@ -9020,8 +9013,7 @@
"value": "Kirjoita osoitteeseen "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},
@@ -9083,8 +9075,7 @@
"value": "Kirjoita osoitteeseen "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},

21
apps/scandic-web/i18n/dictionaries/no.json
View File

@@ -4537,8 +4537,7 @@
"value": "Vennligst skriv inn koden som ble sendt til "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},
@@ -7601,14 +7600,12 @@
"value": ". Slike tilbud kan være basert på dine tidligere interaksjoner med Scandic, inkludert kjøpshistorikk, informasjon du har lagt inn i medlemsprofilen din, besvarte kundeundersøkelser, interaksjoner med kundeservice og nettadferd når du bruker Scandics nettsted eller app. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -7617,14 +7614,12 @@
"value": " Hvis du gir ditt samtykke til forbedret personalisering, kan Scandic skape et enda mer personlig tilpasset medlemskap for deg og sende deg personlige tilbud basert på dine interaksjoner med Scandic Friends-partnere. Scandic kan også dele informasjonen som brukes til ditt personlige medlemskap med Scandic Friends-partnere for analyse- og markedsføringsformål, for eksempel for å følge opp partnerskap, utvikle nye relevante produkter og tilpasse tilbud avhengig av dine interesser. Scandic Friends-partnere kan tilpasse sin eksisterende kommunikasjon til deg basert på personopplysninger vi har delt med dem. Ingen av våre Scandic Friends-partnere vil imidlertid sende markedsføringskommunikasjon til deg basert på samtykket du har gitt til Scandic. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -8123,8 +8118,7 @@
"value": "Koble sammen "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "scandicFriends"
},
@@ -8133,8 +8127,7 @@
"value": " og "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "sasEuroBonus"
},

27
apps/scandic-web/i18n/dictionaries/sv.json
View File

@@ -4545,8 +4545,7 @@
"value": "Vänligen ange koden som skickats till "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},
@@ -7585,14 +7584,12 @@
"value": ". Sådana erbjudanden kan baseras på dina tidigare interaktioner med Scandic, inklusive köphistorik, information du har angett i din medlemsprofil, besvarade kundundersökningar, interaktioner med kundservice samt onlinebeteende när du använder Scandics webbplats eller app. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -7601,14 +7598,12 @@
"value": " Om du ger ditt samtycke till förbättrad personalisering kan Scandic skapa ett ännu mer personligt medlemskap för dig och skicka personliga erbjudanden baserade på dina interaktioner med Scandic Friends-partners. Scandic kan också dela den information som används för ditt personliga medlemskap med Scandic Friends-partners för analytiska och marknadsföringsändamål, till exempel för att följa upp partnerskap, utveckla nya relevanta produkter och anpassa erbjudanden utifrån dina intressen. Scandic Friends-partners kan anpassa sin befintliga kommunikation till dig baserat på personuppgifter som vi har delat med dem. Ingen av våra Scandic Friends-partners kommer dock att skicka marknadsföringskommunikation till dig baserat på det samtycke du har gett till Scandic. "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
{
"children": [
],
"children": [],
"type": 8,
"value": "br"
},
@@ -8107,8 +8102,7 @@
"value": "Länka dina "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "scandicFriends"
},
@@ -8117,8 +8111,7 @@
"value": " och "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "sasEuroBonus"
},
@@ -8984,8 +8977,7 @@
"value": "Vänligen ange koden som skickats till "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},
@@ -9047,8 +9039,7 @@
"value": "Vänligen ange den kod som skickats till "
},
{
"children": [
],
"children": [],
"type": 8,
"value": "maskedContactInfo"
},

11
packages/booking-flow/lib/components/BookingConfirmation/Header/index.tsx
View File

@@ -2,7 +2,6 @@
import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { AddToCalendar } from "../../AddToCalendar"
@@ -17,8 +16,10 @@ import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConf
import type { EventAttributes } from "ics"
import type { MutableRefObject } from "react"
interface BookingConfirmationHeaderProps
extends Pick<BookingConfirmation, "booking" | "hotel"> {
interface BookingConfirmationHeaderProps extends Pick<
BookingConfirmation,
"booking" | "hotel"
> {
mainRef: MutableRefObject<HTMLElement | null>
}
@@ -69,7 +70,9 @@ export function Header({
<h2 className={styles.hotelTitle}>{hotel.name}</h2>
</Typography>
</hgroup>
<Body className={styles.body}>{text}</Body>
<Typography variant="Body/Paragraph/mdRegular" className={styles.body}>
<p>{text}</p>
</Typography>
<div className={styles.actions}>
<AddToCalendar
checkInDate={booking.checkInDate}

4
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/index.tsx
View File

@@ -193,9 +193,7 @@ export default function BookingCode() {
}
>
<Switch name="bookingCode.remember" className="mobile-switch">
<Typography
variant="Body/Supporting text (caption)/smRegular"
>
<Typography variant="Body/Supporting text (caption)/smRegular">
<span>
{intl.formatMessage({
id: "bookingWidget.bookingCode.remember",

6
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Input/index.tsx
View File

@@ -1,7 +1,7 @@
import React, { forwardRef, type InputHTMLAttributes } from "react"
import { Input as InputRAC } from "react-aria-components"
import Body from "@scandic-hotels/design-system/Body"
import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "./input.module.css"
@@ -10,8 +10,8 @@ export const Input = forwardRef<
InputHTMLAttributes<HTMLInputElement>
>(function InputComponent(props, ref) {
return (
<Body asChild color="uiTextHighContrast">
<Typography variant="Body/Paragraph/mdRegular">
<InputRAC {...props} ref={ref} className={styles.input} />
</Body>
</Typography>
)
})

2
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Input/input.module.css
View File

@@ -7,6 +7,8 @@
width: 100%;
z-index: 2;
color: var(--UI-Text-High-contrast);
&:placeholder-shown::-webkit-search-cancel-button {
display: none;
background-image: url("/_static/icons/cancel.svg");

20
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/index.tsx
View File

@@ -1,8 +1,10 @@
import Body from "@scandic-hotels/design-system/Body"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { listItemVariants } from "./variants"
import styles from "./listItem.module.css"
import type { AutoCompleteLocation } from "@scandic-hotels/trpc/routers/autocomplete/schema"
import type { PropGetters } from "downshift"
@@ -31,11 +33,19 @@ export default function ListItem({
item: location,
})}
>
<Body color="black" textTransform="bold">
{location.name}
</Body>
<Typography
variant="Body/Paragraph/mdBold"
className={styles.locationName}
>
<p>{location.name}</p>
</Typography>
{location.destination && (
<Body color="uiTextPlaceholder">{location.destination}</Body>
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.locationDestination}
>
<p>{location.destination}</p>
</Typography>
)}
</li>
)

8
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/listItem.module.css
View File

@@ -11,3 +11,11 @@
.active {
background-color: var(--Surface-Primary-Hover);
}
.locationName {
color: var(--Main-Grey-100);
}
.locationDestination {
color: var(--UI-Text-Placeholder);
}

37
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx
View File

@@ -1,14 +1,15 @@
"use client"
import { cx } from "class-variance-authority"
import { useEffect } from "react"
import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import { useDebounceValue } from "usehooks-ts"
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 Footnote from "@scandic-hotels/design-system/Footnote"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trpc } from "@scandic-hotels/trpc/client"
import useLang from "../../../../../../hooks/useLang"
@@ -172,19 +173,23 @@ export default function SearchList({
if (!hasAutocompleteItems && debouncedSearch) {
return (
<Dialog getMenuProps={getMenuProps} variant="error">
<Body className={styles.text} textTransform="bold">
{intl.formatMessage({
id: "bookingWidget.searchList.noResults",
defaultMessage: "No results",
})}
</Body>
<Body className={styles.text} color="uiTextPlaceholder">
{intl.formatMessage({
id: "bookingWidget.searchList.noResultsDesc",
defaultMessage:
"We couldn't find a matching location for your search.",
})}
</Body>
<Typography variant="Body/Paragraph/mdBold" className={styles.text}>
<p>
{intl.formatMessage({
id: "bookingWidget.searchList.noResults",
defaultMessage: "No results",
})}
</p>
</Typography>
<Typography className={cx(styles.text, styles.textPlaceholderColor)}>
<p>
{intl.formatMessage({
id: "bookingWidget.searchList.noResultsDesc",
defaultMessage:
"We couldn't find a matching location for your search.",
})}
</p>
</Typography>
{typeFilteredSearchHistory && typeFilteredSearchHistory.length > 0 && (
<>
<Divider className={styles.noResultsDivider} />
@@ -305,7 +310,9 @@ function SearchListError({
<MaterialIcon icon="error" color="Icon/Interactive/Accent" />
{caption}
</Caption>
<Body>{body}</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p>{body}</p>
</Typography>
</Dialog>
)
}

3
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/searchList.module.css
View File

@@ -33,3 +33,6 @@
.text {
padding: 0 var(--Space-x1);
}
.textPlaceholderColor {
color: var(--UI-Text-Placeholder);
}

5
packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/Mobile.tsx
View File

@@ -5,7 +5,6 @@ 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 { 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"
@@ -137,14 +136,14 @@ export default function DatePickerRangeMobile({
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>

1
packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css
View File

@@ -92,6 +92,7 @@ div.months {
.footer .button {
width: 100%;
color: var(--UI-Opacity-White-100);
}
td.day,

22
packages/booking-flow/lib/components/EnterDetails/Breakfast/index.tsx
View File

@@ -6,11 +6,11 @@ import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Body from "@scandic-hotels/design-system/Body"
import RadioCard from "@scandic-hotels/design-system/Form/RadioCard"
import BreakfastBuffetIcon from "@scandic-hotels/design-system/Icons/BreakfastBuffetIcon"
import NoBreakfastBuffetIcon from "@scandic-hotels/design-system/Icons/NoBreakfastBuffetIcon"
import { MessageBanner } from "@scandic-hotels/design-system/MessageBanner"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trackBreakfastSelection } from "@scandic-hotels/tracking/booking"
import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"
@@ -95,15 +95,17 @@ export default function Breakfast() {
return (
<FormProvider {...methods}>
<div className={styles.container} ref={formRef}>
{hasChildrenInRoom ? (
<Body>
{intl.formatMessage({
id: "enterDetails.breakfast.childrenFreeInfo",
defaultMessage:
"Children's breakfast is always free as part of the adult's breakfast.",
})}
</Body>
) : null}
{hasChildrenInRoom && (
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "enterDetails.breakfast.childrenFreeInfo",
defaultMessage:
"Children's breakfast is always free as part of the adult's breakfast.",
})}
</p>
</Typography>
)}
{methods.formState.errors.breakfast && (
<div className={styles.errorContainer}>
<MessageBanner

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

@@ -6,7 +6,6 @@ import { useIntl } from "react-intl"
import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Body from "@scandic-hotels/design-system/Body"
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"
@@ -67,12 +66,14 @@ export default function MemberPriceModal() {
{memberPrice && (
<span className={styles.newPrice}>
<Body>
{intl.formatMessage({
id: "enterDetails.memberPriceModal.newPriceLabel",
defaultMessage: "The new price is",
})}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "enterDetails.memberPriceModal.newPriceLabel",
defaultMessage: "The new price is",
})}
</p>
</Typography>
<Subtitle type="two" color="red">
{formatPrice(
intl,

16
packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/index.tsx
View File

@@ -2,8 +2,8 @@ import React from "react"
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 { Typography } from "@scandic-hotels/design-system/Typography"
import {
calculateTotalRoomPrice,
@@ -136,12 +136,14 @@ function PaymentCard({
)}
</span>
</Caption>
<Body textTransform="bold" className={styles.priceItem}>
{formatPrice(intl, price, currency)}
{isMemberRateApplied && comparisonPrice ? (
<span>{formatPrice(intl, comparisonPrice, currency)}</span>
) : null}
</Body>
<Typography variant="Body/Paragraph/mdBold" className={styles.priceItem}>
<p>
{formatPrice(intl, price, currency)}
{isMemberRateApplied && comparisonPrice && (
<span>{formatPrice(intl, comparisonPrice, currency)}</span>
)}
</p>
</Typography>
</div>
)
}

47
packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx
View File

@@ -2,10 +2,10 @@
import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import Link from "@scandic-hotels/design-system/OldDSLink"
import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
import useLang from "../../../../../hooks/useLang"
@@ -26,26 +26,31 @@ export default function TimeoutSpinner() {
defaultMessage: "Taking longer than usual",
})}
</Subtitle>
<Body textAlign="center" className={styles.messageContainer}>
{intl.formatMessage(
{
id: "enterDetails.payment.loadingMessage",
defaultMessage:
"We are still confirming your booking. This is usually a matter of minutes and we do apologise for the wait. Please check your inbox for a booking confirmation email and if you still haven't received it by end of day, please contact our <link>customer support</link>.",
},
{
link: (text) => (
<Link
href={routes.customerService[lang]}
textDecoration="underline"
target="_blank"
>
{text}
</Link>
),
}
)}
</Body>
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.messageContainer}
>
<p>
{intl.formatMessage(
{
id: "enterDetails.payment.loadingMessage",
defaultMessage:
"We are still confirming your booking. This is usually a matter of minutes and we do apologise for the wait. Please check your inbox for a booking confirmation email and if you still haven't received it by end of day, please contact our <link>customer support</link>.",
},
{
link: (text) => (
<Link
href={routes.customerService[lang]}
textDecoration="underline"
target="_blank"
>
{text}
</Link>
),
}
)}
</p>
</Typography>
</div>
)
}

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

@@ -10,12 +10,12 @@ import {
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 { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
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 { getRoomFeatureDescription } from "../../../../utils/getRoomFeatureDescription"
@@ -86,21 +86,25 @@ export default function PriceChangeSummary({
return (
<Fragment key={idx}>
<div className={styles.rowContainer}>
<Body textTransform="bold">
{rooms.length > 1
? intl.formatMessage(
{
id: "booking.roomIndex",
defaultMessage: "Room {roomIndex}",
},
{ roomIndex: roomNumber }
)
: intl.formatMessage({
id: "common.room",
defaultMessage: "Room",
})}
</Body>
<Body>{room.roomType}</Body>
<Typography variant="Body/Paragraph/mdBold">
<p>
{rooms.length > 1
? intl.formatMessage(
{
id: "booking.roomIndex",
defaultMessage: "Room {roomIndex}",
},
{ roomIndex: roomNumber }
)
: intl.formatMessage({
id: "common.room",
defaultMessage: "Room",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>{room.roomType}</p>
</Typography>
<div className={styles.priceRow}>
<Caption color="uiTextMediumContrast">
{intl.formatMessage({
@@ -117,16 +121,15 @@ export default function PriceChangeSummary({
room.roomPrice.perStay.local.currency
)}
</Caption>
<Body
color="uiTextMediumContrast"
textTransform="bold"
>
{formatPrice(
intl,
newPrice,
room.roomPrice.perStay.local.currency
)}
</Body>
<Typography variant="Body/Paragraph/mdBold">
<p>
{formatPrice(
intl,
newPrice,
room.roomPrice.perStay.local.currency
)}
</p>
</Typography>
</div>
) : (
<Caption color="uiTextMediumContrast">
@@ -185,26 +188,32 @@ export default function PriceChangeSummary({
})}
</div>
<div className={styles.rowContainer}>
<Body>
{intl.formatMessage({
id: "common.total",
defaultMessage: "Total",
})}
</Body>
<div className={styles.priceRow}>
<Body textTransform="bold">
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "booking.priceIncludingVat",
defaultMessage: "Price including VAT",
id: "common.total",
defaultMessage: "Total",
})}
</Body>
<Body textTransform="bold">
{formatPrice(
intl,
newTotalPrice.price,
newTotalPrice.currency
)}
</Body>
</p>
</Typography>
<div className={styles.priceRow}>
<Typography variant="Body/Paragraph/mdBold">
<p>
{intl.formatMessage({
id: "booking.priceIncludingVat",
defaultMessage: "Price including VAT",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdBold">
<p>
{formatPrice(
intl,
newTotalPrice.price,
newTotalPrice.currency
)}
</p>
</Typography>
</div>
</div>
</section>

1
packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css
View File

@@ -56,6 +56,7 @@
.priceRow {
display: flex;
justify-content: space-between;
color: var(--UI-Text-Medium-contrast);
}
.updatedPrice {

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

@@ -2,12 +2,12 @@ import { Dialog, Modal, ModalOverlay } from "react-aria-components"
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 { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
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 { useEnterDetailsStore } from "../../../stores/enter-details"
import { calculateTotalRoomPrice } from "../Payment/helpers"
@@ -112,20 +112,22 @@ export default function PriceChangeDialog({
{title}
</Title>
</div>
<Body textAlign="center">
{intl.formatMessage(
{
id: "enterDetails.priceChangeDialog.description",
defaultMessage:
"Prices have increased since you selected your {roomSelection}.{linebreak} To continue your booking, accept the updated price,{linebreak} or go back to select {newRoomSelection}.",
},
{
roomSelection: roomSelectionMsg,
newRoomSelection: newRoomSelectionMsg,
linebreak: <br />,
}
)}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p style={{ textAlign: "center" }}>
{intl.formatMessage(
{
id: "enterDetails.priceChangeDialog.description",
defaultMessage:
"Prices have increased since you selected your {roomSelection}.{linebreak} To continue your booking, accept the updated price,{linebreak} or go back to select {newRoomSelection}.",
},
{
roomSelection: roomSelectionMsg,
newRoomSelection: newRoomSelectionMsg,
linebreak: <br />,
}
)}
</p>
</Typography>
<div>
<Subtitle textAlign="center" color="burgundy">
{intl.formatMessage({
@@ -137,9 +139,11 @@ export default function PriceChangeDialog({
<Caption striked>
{formatPrice(intl, prevTotalPrice, currency)}
</Caption>
<Body textAlign="center" textTransform="bold">
{formatPrice(intl, newTotalPrice, currency)}
</Body>
<Typography variant="Body/Paragraph/mdBold">
<p style={{ textAlign: "center" }}>
{formatPrice(intl, newTotalPrice, currency)}
</p>
</Typography>
</div>
</div>
<PriceChangeSummary

27
packages/booking-flow/lib/components/EnterDetails/Summary/UI/index.tsx
View File

@@ -8,7 +8,6 @@ import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import { longDateFormat } from "@scandic-hotels/common/constants/dateFormats"
import { dt } from "@scandic-hotels/common/dt"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Body from "@scandic-hotels/design-system/Body"
import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -108,18 +107,20 @@ export default function SummaryUI({
defaultMessage: "Booking summary",
})}
</Subtitle>
<Body className={styles.date} color="baseTextMediumContrast">
{dt(booking.fromDate).locale(lang).format(longDateFormat[lang])}
<MaterialIcon
icon="arrow_right"
color="Icon/Interactive/Secondary"
size={15}
/>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{dt(booking.toDate).locale(lang).format(longDateFormat[lang])} (
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{nightsMsg})
</Body>
<Typography variant="Body/Paragraph/mdRegular" className={styles.date}>
<p>
{dt(booking.fromDate).locale(lang).format(longDateFormat[lang])}
<MaterialIcon
icon="arrow_right"
color="Icon/Interactive/Secondary"
size={15}
/>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{dt(booking.toDate).locale(lang).format(longDateFormat[lang])} (
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{nightsMsg})
</p>
</Typography>
<MaterialIcon
className={styles.chevronIcon}
icon="keyboard_arrow_down"

1
packages/booking-flow/lib/components/EnterDetails/Summary/UI/ui.module.css
View File

@@ -28,6 +28,7 @@
gap: var(--Space-x1);
justify-content: flex-start;
grid-area: date;
color: var(--Base-Text-Medium-contrast);
}
.link {

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

@@ -2,11 +2,11 @@ import { useIntl } from "react-intl"
import { RateEnum } from "@scandic-hotels/common/constants/rate"
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 Footnote from "@scandic-hotels/design-system/Footnote"
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 { useIsLoggedIn } from "../../../../hooks/useIsLoggedIn"
import SignupPromoDesktop from "../../../SignupPromo/Desktop"
@@ -137,15 +137,17 @@ export function DesktopSummary({
</div>
)}
<div className={styles.summaryPriceTextDesktop}>
<Body>
{intl.formatMessage(
{
id: "booking.totalPriceInclVat",
defaultMessage: "<b>Total price</b> (incl VAT)",
},
{ b: (str) => <b>{str}</b> }
)}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage(
{
id: "booking.totalPriceInclVat",
defaultMessage: "<b>Total price</b> (incl VAT)",
},
{ b: (str) => <b>{str}</b> }
)}
</p>
</Typography>
<Caption color="uiTextMediumContrast">{summaryPriceText}</Caption>
</div>
<div className={styles.summaryPrice}>
@@ -175,25 +177,31 @@ export function DesktopSummary({
)}
</Caption>
)}
{selectedRates.totalPrice.requested ? (
<Body color="uiTextMediumContrast">
{intl.formatMessage(
{
id: "booking.approxValue",
defaultMessage: "Approx. {value}",
},
{
value: formatPrice(
intl,
selectedRates.totalPrice.requested.price,
selectedRates.totalPrice.requested.currency,
selectedRates.totalPrice.requested.additionalPrice,
selectedRates.totalPrice.requested.additionalPriceCurrency
),
}
)}
</Body>
) : null}
{!!selectedRates.totalPrice.requested && (
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.approxPrice}
>
<p>
{intl.formatMessage(
{
id: "booking.approxValue",
defaultMessage: "Approx. {value}",
},
{
value: formatPrice(
intl,
selectedRates.totalPrice.requested.price,
selectedRates.totalPrice.requested.currency,
selectedRates.totalPrice.requested.additionalPrice,
selectedRates.totalPrice.requested
.additionalPriceCurrency
),
}
)}
</p>
</Typography>
)}
</div>
<div className={styles.summaryPriceTextMobile}>
<Caption color="uiTextHighContrast">
@@ -259,12 +267,17 @@ function RateSummary({
{ roomIndex: roomIndex + 1 }
)}
</Subtitle>
<Body color="uiTextPlaceholder">
{intl.formatMessage({
id: "booking.selectRoom",
defaultMessage: "Select room",
})}
</Body>
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.selectRoom}
>
<p>
{intl.formatMessage({
id: "booking.selectRoom",
defaultMessage: "Select room",
})}
</p>
</Typography>
</div>
)
}
@@ -279,7 +292,12 @@ function RateSummary({
{ roomIndex: roomIndex + 1 }
)}
</Subtitle>
<Body color="uiTextMediumContrast">{room.roomInfo.roomType}</Body>
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.uiTextMediumContrast}
>
<p>{room.roomInfo.roomType}</p>
</Typography>
<Caption color="uiTextMediumContrast">
{getRateDetails(room.rate)}
</Caption>
@@ -289,7 +307,12 @@ function RateSummary({
<Subtitle color="uiTextHighContrast">
{room.roomInfo.roomType}
</Subtitle>
<Body color="uiTextMediumContrast">{getRateDetails(room.rate)}</Body>
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.uiTextMediumContrast}
>
<p>{getRateDetails(room.rate)}</p>
</Typography>
</>
)}
</div>

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

@@ -43,6 +43,9 @@
width: 100%;
gap: var(--Space-x4);
}
.approxPrice {
color: var(--UI-Text-Medium-contrast);
}
.petInfo {
border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
@@ -74,6 +77,14 @@
display: block;
}
.selectRoom {
color: var(--UI-Text-Placeholder);
}
.uiTextMediumContrast {
color: var(--UI-Text-Medium-contrast);
}
@media (min-width: 1367px) {
.summary {
border-top: 1px solid var(--Base-Border-Subtle);

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

@@ -4,12 +4,12 @@ import { useIntl } from "react-intl"
import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import { RateEnum } from "@scandic-hotels/common/constants/rate"
import { logger } from "@scandic-hotels/common/logger"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption"
import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
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 { useSelectRateContext } from "../../../../../../contexts/SelectRate/SelectRateContext"
import { useIsLoggedIn } from "../../../../../../hooks/useIsLoggedIn"
@@ -59,8 +59,12 @@ export function SelectedRoomPanel({ roomIndex }: { roomIndex: number }) {
<Subtitle className={styles.subtitle} color="uiTextHighContrast">
{selectedRate.roomInfo.roomType}
</Subtitle>
<Body color="uiTextMediumContrast">{rateTitle}</Body>
<Body color="uiTextHighContrast">{selectedProductTitle}</Body>
<Typography variant="Body/Paragraph/mdRegular">
<div>
<p className={styles.uiTextMediumContrast}>{rateTitle}</p>
<p className={styles.uiTextHighContrast}>{selectedProductTitle}</p>
</div>
</Typography>
</div>
<div className={styles.imageContainer}>
{image?.src ? (

8
packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css
View File

@@ -33,6 +33,14 @@ div.selectedRoomPanel p.subtitle {
padding-bottom: var(--Space-x1);
}
.uiTextMediumContrast {
color: var(--UI-Text-Medium-contrast);
}
.uiTextHighContrast {
color: var(--UI-Text-High-contrast);
}
@media screen and (max-width: 767px) {
.selectedRoomPanel {
gap: var(--Space-x1);

2
packages/design-system/.storybook/content/Colors.tsx
View File

@@ -64,7 +64,7 @@ export function Colors({
const [selectedThemeName, setSelectedThemeName] = useState<string>(
defaultThemeName || themes?.[0]?.name || ''
)
const [copiedKey, setCopiedKey] = useState<string | null>(null)
const [, setCopiedKey] = useState<string | null>(null)
const currentTheme =
propTheme ||

149
packages/design-system/lib/components/Body/body.module.css
View File

@@ -1,149 +0,0 @@
.body {
margin: 0;
padding: 0;
}
.bodyFontOnly {
font-style: normal;
}
.bold {
font-family: var(--typography-Body-Bold-fontFamily);
font-size: var(--typography-Body-Bold-fontSize);
font-weight: 500;
letter-spacing: var(--typography-Body-Bold-letterSpacing);
line-height: var(--typography-Body-Bold-lineHeight);
text-decoration: var(--typography-Body-Bold-textDecoration);
}
.regular {
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: 400;
letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: var(--typography-Body-Regular-lineHeight);
text-decoration: var(--typography-Body-Regular-textDecoration);
}
.underlined {
font-family: var(--typography-Body-Underline-fontFamily);
font-size: var(--typography-Body-Underline-fontSize);
font-weight: 500;
letter-spacing: var(--typography-Body-Underline-letterSpacing);
line-height: var(--typography-Body-Underline-lineHeight);
text-decoration: var(--typography-Body-Underline-textDecoration);
}
.uppercase {
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Bold-fontWeight);
letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: var(--typography-Body-Regular-lineHeight);
text-decoration: var(--typography-Body-Regular-textDecoration);
text-transform: uppercase;
}
.textAlignCenter {
text-align: center;
}
.textAlignLeft {
text-align: left;
}
.textAlignRight {
text-align: right;
}
.black {
color: var(--Main-Grey-100);
}
.burgundy {
color: var(--Scandic-Brand-Burgundy);
}
.grey {
color: var(--UI-Grey-60);
}
.pale {
color: var(--Scandic-Brand-Pale-Peach);
}
.red {
color: var(--Scandic-Brand-Scandic-Red);
}
.textMediumContrast {
color: var(--Base-Text-Medium-contrast);
}
.baseTextHighContrast {
color: var(--Base-Text-High-contrast);
}
.baseTextMediumContrast {
color: var(--Base-Text-Medium-contrast);
}
.white {
color: var(--UI-Opacity-White-100);
}
.peach50 {
color: var(--Primary-Dark-On-Surface-Accent);
}
.baseTextMediumContrast {
color: var(--Base-Text-Medium-contrast);
}
.uiTextHighContrast {
color: var(--UI-Text-High-contrast);
}
.uiTextMediumContrast {
color: var(--UI-Text-Medium-contrast);
}
.uiTextPlaceholder {
color: var(--UI-Text-Placeholder);
}
.disabled {
color: var(--Base-Text-Disabled);
}
.primaryLight {
color: var(--Primary-Light-On-Surface-Text);
}
.secondaryLight {
color: var(--Secondary-Light-On-Surface-Text);
}
.tertiaryLight {
color: var(--Tertiary-Light-On-Surface-Text);
}
.primaryDark {
color: var(--Primary-Dark-On-Surface-Text);
}
.primaryDim {
color: var(--Primary-Dim-On-Surface-Text);
}
.primaryStrong {
color: var(--Primary-Strong-On-Surface-Text);
}
.baseText {
color: var(--Base-Text-Inverted);
}
.success {
color: var(--UI-Semantic-Success);
}

40
packages/design-system/lib/components/Body/index.tsx
View File

@@ -1,40 +0,0 @@
import { Slot } from '@radix-ui/react-slot'
import { bodyFontOnlyVariants, bodyVariants } from './variants'
import type { VariantProps } from 'class-variance-authority'
interface BodyProps
extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'>,
VariantProps<typeof bodyVariants> {
asChild?: boolean
fontOnly?: boolean
}
/**
* @deprecated Use `@scandic-hotels/design-system/Typography` instead.
*/
export default function Body({
asChild = false,
className = '',
color,
fontOnly = false,
textAlign,
textTransform,
...props
}: BodyProps) {
const Comp = asChild ? Slot : 'p'
const classNames = fontOnly
? bodyFontOnlyVariants({
className,
textAlign,
textTransform,
})
: bodyVariants({
className,
color,
textAlign,
textTransform,
})
return <Comp className={classNames} {...props} />
}

71
packages/design-system/lib/components/Body/variants.ts
View File

@@ -1,71 +0,0 @@
import { cva } from 'class-variance-authority'
import styles from './body.module.css'
const config = {
variants: {
color: {
black: styles.black,
burgundy: styles.burgundy,
disabled: styles.disabled,
grey: styles.grey,
pale: styles.pale,
red: styles.red,
textMediumContrast: styles.textMediumContrast,
baseTextMediumContrast: styles.baseTextMediumContrast,
baseTextHighContrast: styles.baseTextHighContrast,
white: styles.white,
peach50: styles.peach50,
uiTextHighContrast: styles.uiTextHighContrast,
uiTextMediumContrast: styles.uiTextMediumContrast,
uiTextPlaceholder: styles.uiTextPlaceholder,
primaryLight: styles.primaryLight,
secondaryLight: styles.secondaryLight,
tertiaryLight: styles.tertiaryLight,
primaryDark: styles.primaryDark,
primaryDim: styles.primaryDim,
primaryStrong: styles.primaryStrong,
baseText: styles.baseText,
success: styles.success,
},
textAlign: {
center: styles.textAlignCenter,
left: styles.textAlignLeft,
right: styles.textAlignRight,
},
textTransform: {
bold: styles.bold,
regular: styles.regular,
underlined: styles.underlined,
uppercase: styles.uppercase,
},
},
defaultVariants: {
color: 'black',
textAlign: 'left',
textTransform: 'regular',
},
} as const
export const bodyVariants = cva(styles.body, config)
const fontOnlyconfig = {
variants: {
textAlign: {
center: styles.textAlignCenter,
left: styles.textAlignLeft,
right: styles.textAlignRight,
},
textTransform: {
bold: styles.bold,
regular: styles.regular,
underlined: styles.underlined,
uppercase: styles.uppercase,
},
},
defaultVariants: {
textAlign: 'left',
textTransform: 'regular',
},
} as const
export const bodyFontOnlyVariants = cva(styles.bodyFontOnly, fontOnlyconfig)

23
packages/design-system/lib/components/DeprecatedSelect/index.tsx
View File

@@ -13,8 +13,8 @@ import {
import SelectChevron from './SelectChevron'
import styles from './select.module.css'
import Body from '../Body'
import { InputLabel } from '../InputLabel'
import { Typography } from '../Typography'
interface SelectProps extends Omit<
React.SelectHTMLAttributes<HTMLSelectElement>,
@@ -95,7 +95,7 @@ export default function Select({
onOpenChange={setOverflowVisible}
isDisabled={disabled}
>
<Body asChild fontOnly>
<Typography variant="Body/Paragraph/mdRegular">
<Button
className={`${styles.input} select-button`}
data-testid={name}
@@ -111,18 +111,23 @@ export default function Select({
{discreet && DELIMITER}
</InputLabel>
{selectedText && (
<Body className={optionsIcon ? styles.iconLabel : ''}>
{optionsIcon ? optionsIcon : null}
{selectedText}
</Body>
<Typography
variant="Body/Paragraph/mdRegular"
className={optionsIcon ? styles.iconLabel : ''}
>
<p>
{optionsIcon ? optionsIcon : null}
{selectedText}
</p>
</Typography>
)}
</>
)}
</SelectValue>
<SelectChevron {...chevronProps} />
</Button>
</Body>
<Body asChild fontOnly>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<Popover
className={styles.popover}
placement="bottom"
@@ -151,7 +156,7 @@ export default function Select({
))}
</ListBox>
</Popover>
</Body>
</Typography>
</ReactAriaSelect>
</div>
)

3
packages/design-system/lib/components/InputNew/Input.tsx
View File

@@ -24,6 +24,7 @@ const InputComponent = forwardRef(function AriaInputWithLabelComponent(
labelPosition = 'floating',
leftIcon,
rightIcon,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onRightIconClick,
showClearContentIcon,
placeholder,
@@ -109,6 +110,7 @@ const InputComponent = forwardRef(function AriaInputWithLabelComponent(
className={styles.rightIconButton}
theme="Black"
onClick={onClearContent}
// eslint-disable-next-line formatjs/no-literal-string-in-jsx
aria-label="Clear content"
>
<MaterialIcon icon="cancel" />
@@ -156,6 +158,7 @@ const InputComponent = forwardRef(function AriaInputWithLabelComponent(
className={styles.rightIconButton}
theme="Black"
onClick={onClearContent}
// eslint-disable-next-line formatjs/no-literal-string-in-jsx
aria-label="Clear content"
>
<MaterialIcon icon="cancel" />