diff --git a/apps/partner-sas/i18n/dictionaries/da.json b/apps/partner-sas/i18n/dictionaries/da.json index 5afa52134..fcad731e5 100644 --- a/apps/partner-sas/i18n/dictionaries/da.json +++ b/apps/partner-sas/i18n/dictionaries/da.json @@ -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" }, @@ -9101,4 +9091,4 @@ "value": "Fejl: bruger ikke fundet" } ] -} \ No newline at end of file +} diff --git a/apps/partner-sas/i18n/dictionaries/de.json b/apps/partner-sas/i18n/dictionaries/de.json index 3ee8ed584..9caf56c42 100644 --- a/apps/partner-sas/i18n/dictionaries/de.json +++ b/apps/partner-sas/i18n/dictionaries/de.json @@ -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" }, @@ -9101,4 +9092,4 @@ "value": "Fehler: Benutzer nicht gefunden" } ] -} \ No newline at end of file +} diff --git a/apps/partner-sas/i18n/dictionaries/en.json b/apps/partner-sas/i18n/dictionaries/en.json index fc1309fd8..f0e2252da 100644 --- a/apps/partner-sas/i18n/dictionaries/en.json +++ b/apps/partner-sas/i18n/dictionaries/en.json @@ -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" }, @@ -9069,4 +9060,4 @@ "value": "Error: User not found" } ] -} \ No newline at end of file +} diff --git a/apps/partner-sas/i18n/dictionaries/fi.json b/apps/partner-sas/i18n/dictionaries/fi.json index 79c5720c4..045f5472e 100644 --- a/apps/partner-sas/i18n/dictionaries/fi.json +++ b/apps/partner-sas/i18n/dictionaries/fi.json @@ -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" }, @@ -9129,4 +9120,4 @@ "value": "Virhe: käyttäjää ei löydy" } ] -} \ No newline at end of file +} diff --git a/apps/partner-sas/i18n/dictionaries/no.json b/apps/partner-sas/i18n/dictionaries/no.json index 0557ba5fe..d13c34e51 100644 --- a/apps/partner-sas/i18n/dictionaries/no.json +++ b/apps/partner-sas/i18n/dictionaries/no.json @@ -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" }, @@ -9129,4 +9122,4 @@ "value": "Feil: bruker ikke funnet" } ] -} \ No newline at end of file +} diff --git a/apps/partner-sas/i18n/dictionaries/sv.json b/apps/partner-sas/i18n/dictionaries/sv.json index 146319e2f..cebed1dd0 100644 --- a/apps/partner-sas/i18n/dictionaries/sv.json +++ b/apps/partner-sas/i18n/dictionaries/sv.json @@ -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" }, @@ -9093,4 +9084,4 @@ "value": "Fel: Användaren kunde inte hittas" } ] -} \ No newline at end of file +} diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx index 78ef79595..ce4e4254c 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx @@ -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({ })}
- - {intl.formatMessage( - { - id: "rewards.nextLevel.asOurLevel", - defaultMessage: "As our {level}", - }, - { level: nextLevelRewards.level?.name } - )} - - - {reward.label} - + +

+ {intl.formatMessage( + { + id: "rewards.nextLevel.asOurLevel", + defaultMessage: "As our {level}", + }, + { level: nextLevelRewards.level?.name } + )} +

+
+ +

{reward.label}

+
))} diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/next.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/next.module.css index b725b78e8..0c97843bd 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/next.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/next.module.css @@ -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); } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx index fd6267ef6..74e3adc60 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx @@ -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", })} - - {intl.formatMessage({ - id: "redeem.confirmClose.question", - defaultMessage: "Have you showed this benefit to the hotel staff?", - })} - - - {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.", - })} - + +

+ {intl.formatMessage({ + id: "redeem.confirmClose.question", + defaultMessage: + "Have you showed this benefit to the hotel staff?", + })} +

+
+ +

+ {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.", + })} +

+
diff --git a/apps/scandic-web/components/DatePicker/Single/mobile.module.css b/apps/scandic-web/components/DatePicker/Single/mobile.module.css index ef6c6309b..28c2afb04 100644 --- a/apps/scandic-web/components/DatePicker/Single/mobile.module.css +++ b/apps/scandic-web/components/DatePicker/Single/mobile.module.css @@ -88,6 +88,9 @@ div.months { .footer .button { width: 100%; + span { + color: white; + } } td.day, diff --git a/apps/scandic-web/components/DestinationFilterAndSort/Filter/Checkbox/index.tsx b/apps/scandic-web/components/DestinationFilterAndSort/Filter/Checkbox/index.tsx index 574f7950c..74ad14a40 100644 --- a/apps/scandic-web/components/DestinationFilterAndSort/Filter/Checkbox/index.tsx +++ b/apps/scandic-web/components/DestinationFilterAndSort/Filter/Checkbox/index.tsx @@ -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({ {isSelected && } - + {name} - + )} diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/addedAncillaries.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/addedAncillaries.module.css index fea7a30de..2ab68a2c9 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/addedAncillaries.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/addedAncillaries.module.css @@ -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); +} diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx index 85f43d49d..d824cb04f 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx @@ -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({ {booking.ancillary?.deliveryTime && ( -
- - {intl.formatMessage({ - id: "ancillaries.deliveredAt", - defaultMessage: "Delivered at:", - })} - - - {booking.ancillary?.deliveryTime} - -
+ +
+

+ {intl.formatMessage({ + id: "ancillaries.deliveredAt", + defaultMessage: "Delivered at:", + })} +

+ +

{booking.ancillary?.deliveryTime}

+
+
)} @@ -90,46 +91,55 @@ export function AddedAncillaries({ {ancillary.comment && ( <>
- - {intl.formatMessage({ - id: "common.otherRequests", - defaultMessage: "Other requests", - })} - {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} - {":"} - - - {ancillary.comment} - + +

+ {intl.formatMessage({ + id: "common.otherRequests", + defaultMessage: "Other requests", + })} + {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} + {":"} +

+
+ +

{ancillary.comment}

+
)}
- - {intl.formatMessage({ - id: "common.total", - defaultMessage: "Total", - })} - - - {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 - )} - + +

+ {intl.formatMessage({ + id: "common.total", + defaultMessage: "Total", + })} +

+
+ +

+ {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 + )} +

+
@@ -162,33 +172,39 @@ export function AddedAncillaries({ icon="check_circle" color="Icon/Feedback/Success" /> - {ancillaryTitle} + +

{ancillaryTitle}

+
- - {intl.formatMessage({ - id: "common.total", - defaultMessage: "Total", - })} - - - {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 - )} - + +

+ {intl.formatMessage({ + id: "common.total", + defaultMessage: "Total", + })} +

+
+ +

+ {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 + )} +

+
@@ -198,15 +214,19 @@ export function AddedAncillaries({
{ancillary.comment && ( <> - - {intl.formatMessage({ - id: "common.otherRequests", - defaultMessage: "Other requests", - })} - {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} - {":"} - - {ancillary.comment} + +

+ {intl.formatMessage({ + id: "common.otherRequests", + defaultMessage: "Other requests", + })} + {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} + {":"} +

+
+ +

{ancillary.comment}

+
)}
diff --git a/apps/scandic-web/components/MyPages/Profile/MembershipCards/index.tsx b/apps/scandic-web/components/MyPages/Profile/MembershipCards/index.tsx index a24f26322..d06232491 100644 --- a/apps/scandic-web/components/MyPages/Profile/MembershipCards/index.tsx +++ b/apps/scandic-web/components/MyPages/Profile/MembershipCards/index.tsx @@ -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() { ))} - - {intl.formatMessage({ - id: "myPages.addNewCard", - defaultMessage: "Add new card", - })} - + +

+ {intl.formatMessage({ + id: "myPages.addNewCard", + defaultMessage: "Add new card", + })} +

+
) diff --git a/apps/scandic-web/components/MyPages/Profile/MembershipCards/membershipCards.module.css b/apps/scandic-web/components/MyPages/Profile/MembershipCards/membershipCards.module.css index 115e0c83b..6919d3d8b 100644 --- a/apps/scandic-web/components/MyPages/Profile/MembershipCards/membershipCards.module.css +++ b/apps/scandic-web/components/MyPages/Profile/MembershipCards/membershipCards.module.css @@ -20,3 +20,8 @@ .subTitle { grid-column: span 2; } + +.addNewCardText { + text-decoration: underline; + color: var(--Scandic-Brand-Burgundy); +} diff --git a/apps/scandic-web/components/SasTierComparison/index.tsx b/apps/scandic-web/components/SasTierComparison/index.tsx index 58357ae9e..602091d13 100644 --- a/apps/scandic-web/components/SasTierComparison/index.tsx +++ b/apps/scandic-web/components/SasTierComparison/index.tsx @@ -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({
- - {tierMatch.scandic_friends_tier_name} - +

{tierMatch.scandic_friends_tier_name}

+
@@ -111,13 +110,12 @@ function TierDetails({ position: "relative", }} > - - {tierMatch.sas_eb_tier_name} - +

{tierMatch.sas_eb_tier_name}

+
- - {contact.display_text} - + +

{contact.display_text}

+
- - {ancillary.title} - + +

{ancillary.title}

+
- - {ancillary.price.included - ? intl.formatMessage({ - id: "common.included", - defaultMessage: "Included", - }) - : priceMsg} - + +

+ {ancillary.price.included + ? intl.formatMessage({ + id: "common.included", + defaultMessage: "Included", + }) + : priceMsg} +

+
{ancillary.points && ( <>
- - {intl.formatMessage( - { - id: "common.numberOfPoints", - defaultMessage: - "{points, plural, one {# point} other {# points}}", - }, - { - points: ancillary.points, - } - )} - + +

+ {intl.formatMessage( + { + id: "common.numberOfPoints", + defaultMessage: + "{points, plural, one {# point} other {# points}}", + }, + { + points: ancillary.points, + } + )} +

+
)}
diff --git a/apps/scandic-web/components/TempDesignSystem/Card/card.module.css b/apps/scandic-web/components/TempDesignSystem/Card/card.module.css index 77481e1e7..4dac71728 100644 --- a/apps/scandic-web/components/TempDesignSystem/Card/card.module.css +++ b/apps/scandic-web/components/TempDesignSystem/Card/card.module.css @@ -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 { diff --git a/apps/scandic-web/components/TempDesignSystem/Card/index.tsx b/apps/scandic-web/components/TempDesignSystem/Card/index.tsx index 5de46d3d1..2c95299e6 100644 --- a/apps/scandic-web/components/TempDesignSystem/Card/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/Card/index.tsx @@ -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 (
)}
- {scriptedTopTitle ? ( + {scriptedTopTitle && (
- ) : null} + )} {heading} - {bodyText ? ( - - {bodyText} - - ) : null} + {bodyText && ( + +

{bodyText}

+
+ )}
{primaryButton ? (
diff --git a/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css b/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css index 02863d9fe..c9a27ee31 100644 --- a/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css @@ -92,6 +92,7 @@ div.months { .footer .button { width: 100%; + color: var(--UI-Opacity-White-100); } td.day, diff --git a/packages/booking-flow/lib/components/EnterDetails/Breakfast/index.tsx b/packages/booking-flow/lib/components/EnterDetails/Breakfast/index.tsx index 85c094fdd..2ed5bff1e 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Breakfast/index.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/Breakfast/index.tsx @@ -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 (
- {hasChildrenInRoom ? ( - - {intl.formatMessage({ - id: "enterDetails.breakfast.childrenFreeInfo", - defaultMessage: - "Children's breakfast is always free as part of the adult's breakfast.", - })} - - ) : null} + {hasChildrenInRoom && ( + +

+ {intl.formatMessage({ + id: "enterDetails.breakfast.childrenFreeInfo", + defaultMessage: + "Children's breakfast is always free as part of the adult's breakfast.", + })} +

+
+ )} {methods.formState.errors.breakfast && (
- - {intl.formatMessage({ - id: "enterDetails.memberPriceModal.newPriceLabel", - defaultMessage: "The new price is", - })} - + +

+ {intl.formatMessage({ + id: "enterDetails.memberPriceModal.newPriceLabel", + defaultMessage: "The new price is", + })} +

+
{formatPrice( intl, diff --git a/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/index.tsx b/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/index.tsx index f0770031b..d36f0b175 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/index.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/index.tsx @@ -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({ )} - - {formatPrice(intl, price, currency)} - {isMemberRateApplied && comparisonPrice ? ( - {formatPrice(intl, comparisonPrice, currency)} - ) : null} - + +

+ {formatPrice(intl, price, currency)} + {isMemberRateApplied && comparisonPrice && ( + {formatPrice(intl, comparisonPrice, currency)} + )} +

+
) } diff --git a/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx b/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx index eb3d1c162..960e5b085 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx @@ -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", })} - - {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 customer support.", - }, - { - link: (text) => ( - - {text} - - ), - } - )} - + +

+ {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 customer support.", + }, + { + link: (text) => ( + + {text} + + ), + } + )} +

+
) } diff --git a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx index 4a84969a1..1f678cecc 100644 --- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx @@ -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 (
- - {rooms.length > 1 - ? intl.formatMessage( - { - id: "booking.roomIndex", - defaultMessage: "Room {roomIndex}", - }, - { roomIndex: roomNumber } - ) - : intl.formatMessage({ - id: "common.room", - defaultMessage: "Room", - })} - - {room.roomType} + +

+ {rooms.length > 1 + ? intl.formatMessage( + { + id: "booking.roomIndex", + defaultMessage: "Room {roomIndex}", + }, + { roomIndex: roomNumber } + ) + : intl.formatMessage({ + id: "common.room", + defaultMessage: "Room", + })} +

+
+ +

{room.roomType}

+
{intl.formatMessage({ @@ -117,16 +121,15 @@ export default function PriceChangeSummary({ room.roomPrice.perStay.local.currency )} - - {formatPrice( - intl, - newPrice, - room.roomPrice.perStay.local.currency - )} - + +

+ {formatPrice( + intl, + newPrice, + room.roomPrice.perStay.local.currency + )} +

+
) : ( @@ -185,26 +188,32 @@ export default function PriceChangeSummary({ })}
- - {intl.formatMessage({ - id: "common.total", - defaultMessage: "Total", - })} - -
- + +

{intl.formatMessage({ - id: "booking.priceIncludingVat", - defaultMessage: "Price including VAT", + id: "common.total", + defaultMessage: "Total", })} - - - {formatPrice( - intl, - newTotalPrice.price, - newTotalPrice.currency - )} - +

+
+
+ +

+ {intl.formatMessage({ + id: "booking.priceIncludingVat", + defaultMessage: "Price including VAT", + })} +

+
+ +

+ {formatPrice( + intl, + newTotalPrice.price, + newTotalPrice.currency + )} +

+
diff --git a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css index e77f8bd8a..878c903b3 100644 --- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css @@ -56,6 +56,7 @@ .priceRow { display: flex; justify-content: space-between; + color: var(--UI-Text-Medium-contrast); } .updatedPrice { diff --git a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx index 5b39c9fbd..88a75c0e5 100644 --- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx @@ -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}
- - {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:
, - } - )} - + +

+ {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:
, + } + )} +

+
{intl.formatMessage({ @@ -137,9 +139,11 @@ export default function PriceChangeDialog({ {formatPrice(intl, prevTotalPrice, currency)} - - {formatPrice(intl, newTotalPrice, currency)} - + +

+ {formatPrice(intl, newTotalPrice, currency)} +

+
- - {dt(booking.fromDate).locale(lang).format(longDateFormat[lang])} - - {/* 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}) - + +

+ {dt(booking.fromDate).locale(lang).format(longDateFormat[lang])} + + {/* 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}) +

+
)}
- - {intl.formatMessage( - { - id: "booking.totalPriceInclVat", - defaultMessage: "Total price (incl VAT)", - }, - { b: (str) => {str} } - )} - + +

+ {intl.formatMessage( + { + id: "booking.totalPriceInclVat", + defaultMessage: "Total price (incl VAT)", + }, + { b: (str) => {str} } + )} +

+
{summaryPriceText}
@@ -175,25 +177,31 @@ export function DesktopSummary({ )} )} - {selectedRates.totalPrice.requested ? ( - - {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 - ), - } - )} - - ) : null} + {!!selectedRates.totalPrice.requested && ( + +

+ {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 + ), + } + )} +

+
+ )}
@@ -259,12 +267,17 @@ function RateSummary({ { roomIndex: roomIndex + 1 } )} - - {intl.formatMessage({ - id: "booking.selectRoom", - defaultMessage: "Select room", - })} - + +

+ {intl.formatMessage({ + id: "booking.selectRoom", + defaultMessage: "Select room", + })} +

+
) } @@ -279,7 +292,12 @@ function RateSummary({ { roomIndex: roomIndex + 1 } )} - {room.roomInfo.roomType} + +

{room.roomInfo.roomType}

+
{getRateDetails(room.rate)} @@ -289,7 +307,12 @@ function RateSummary({ {room.roomInfo.roomType} - {getRateDetails(room.rate)} + +

{getRateDetails(room.rate)}

+
)}
diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css index c019a54a4..e11110ab6 100644 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css +++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css @@ -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); diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx index 921345ec8..90923d933 100644 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx +++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx @@ -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 }) { {selectedRate.roomInfo.roomType} - {rateTitle} - {selectedProductTitle} + +
+

{rateTitle}

+

{selectedProductTitle}

+
+
{image?.src ? ( diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css index 6c5326e04..5e2a94055 100644 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css +++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css @@ -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); diff --git a/packages/design-system/.storybook/content/Colors.tsx b/packages/design-system/.storybook/content/Colors.tsx index 9a21be573..4e47f6b33 100644 --- a/packages/design-system/.storybook/content/Colors.tsx +++ b/packages/design-system/.storybook/content/Colors.tsx @@ -64,7 +64,7 @@ export function Colors({ const [selectedThemeName, setSelectedThemeName] = useState( defaultThemeName || themes?.[0]?.name || '' ) - const [copiedKey, setCopiedKey] = useState(null) + const [, setCopiedKey] = useState(null) const currentTheme = propTheme || diff --git a/packages/design-system/lib/components/Body/body.module.css b/packages/design-system/lib/components/Body/body.module.css deleted file mode 100644 index 919194c04..000000000 --- a/packages/design-system/lib/components/Body/body.module.css +++ /dev/null @@ -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); -} diff --git a/packages/design-system/lib/components/Body/index.tsx b/packages/design-system/lib/components/Body/index.tsx deleted file mode 100644 index dbf55caef..000000000 --- a/packages/design-system/lib/components/Body/index.tsx +++ /dev/null @@ -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, 'color'>, - VariantProps { - 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 -} diff --git a/packages/design-system/lib/components/Body/variants.ts b/packages/design-system/lib/components/Body/variants.ts deleted file mode 100644 index 697011a37..000000000 --- a/packages/design-system/lib/components/Body/variants.ts +++ /dev/null @@ -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) diff --git a/packages/design-system/lib/components/DeprecatedSelect/index.tsx b/packages/design-system/lib/components/DeprecatedSelect/index.tsx index 6927d59cd..91b1437df 100644 --- a/packages/design-system/lib/components/DeprecatedSelect/index.tsx +++ b/packages/design-system/lib/components/DeprecatedSelect/index.tsx @@ -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, @@ -95,7 +95,7 @@ export default function Select({ onOpenChange={setOverflowVisible} isDisabled={disabled} > - + - - + + - +
) diff --git a/packages/design-system/lib/components/InputNew/Input.tsx b/packages/design-system/lib/components/InputNew/Input.tsx index 55db3726b..76aa70fcc 100644 --- a/packages/design-system/lib/components/InputNew/Input.tsx +++ b/packages/design-system/lib/components/InputNew/Input.tsx @@ -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" > @@ -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" >