From 510f25a81211da5d913e0b4e663c38ba25f165ef Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Tue, 20 Jan 2026 12:37:05 +0000 Subject: [PATCH] feat(BOOK-757): Replaced Biroscript component with Typography Approved-by: Bianca Widstam --- .../DynamicContent/LoyaltyLevels/index.tsx | 25 +++-- .../LoyaltyLevels/loyaltyLevels.module.css | 7 ++ .../OverviewTable/RewardValue/index.tsx | 1 + .../RewardValue/rewardValue.module.css | 4 + .../OverviewTable/YourLevelScript/index.tsx | 21 ++-- .../YourLevelScript/yourLevel.module.css | 2 + .../Rewards/ScriptedRewardText/index.tsx | 9 +- .../scriptedRewardText.module.css | 5 + .../fullWidthCampaign.module.css | 5 +- .../Blocks/FullWidthCampaign/index.tsx | 14 ++- .../TempDesignSystem/Card/card.module.css | 34 +++++++ .../TempDesignSystem/Card/index.tsx | 16 +-- .../components/TempDesignSystem/Card/utils.ts | 25 ----- .../Text/BiroScript/biroScript.module.css | 99 ------------------- .../Text/BiroScript/biroScript.ts | 9 -- .../Text/BiroScript/index.tsx | 25 ----- .../Text/BiroScript/variants.ts | 41 -------- 17 files changed, 92 insertions(+), 250 deletions(-) create mode 100644 apps/scandic-web/components/Blocks/DynamicContent/Rewards/ScriptedRewardText/scriptedRewardText.module.css delete mode 100644 apps/scandic-web/components/TempDesignSystem/Text/BiroScript/biroScript.module.css delete mode 100644 apps/scandic-web/components/TempDesignSystem/Text/BiroScript/biroScript.ts delete mode 100644 apps/scandic-web/components/TempDesignSystem/Text/BiroScript/index.tsx delete mode 100644 apps/scandic-web/components/TempDesignSystem/Text/BiroScript/variants.ts diff --git a/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx index 7927754c2..2a4761002 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx @@ -4,7 +4,6 @@ import { Typography } from "@scandic-hotels/design-system/Typography" import { serverClient } from "@/lib/trpc/server" import MembershipLevelIcon from "@/components/Levels/Icon" -import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" import { getIntl } from "@/i18n" import SectionWrapper from "../SectionWrapper" @@ -62,19 +61,17 @@ async function LevelCard({ level }: LevelCardProps) { return (
- - {intl.formatMessage( - { - id: "common.membershipLevelWithValue", - defaultMessage: "Level {level}", - }, - { level: level.user_facing_tag } - )} - + +

+ {intl.formatMessage( + { + id: "common.membershipLevelWithValue", + defaultMessage: "Level {level}", + }, + { level: level.user_facing_tag } + )} +

+
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css b/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css index 416abfcda..8aced1d52 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css @@ -32,6 +32,13 @@ justify-content: center; } +.scriptedText { + color: var(--Icon-Accent); + transform: rotate(-11deg); + transform-origin: left; + margin-bottom: -4px; +} + .redText { color: var(--Base-Text-Accent); } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/index.tsx index eec445e29..422a821f8 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/index.tsx @@ -16,6 +16,7 @@ export default function RewardValue({ reward }: RewardValueProps) { icon="check_circle" size={32} color="Icon/Feedback/Success" + className={styles.checkIcon} /> ) } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/rewardValue.module.css b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/rewardValue.module.css index 077fdb095..6ffd5e9bb 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/rewardValue.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/rewardValue.module.css @@ -17,3 +17,7 @@ text-align: center; color: var(--UI-Grey-80); } + +.checkIcon { + display: inline-flex; +} diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/YourLevelScript/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/YourLevelScript/index.tsx index f07fb6bd7..8ad2b1338 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/YourLevelScript/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/YourLevelScript/index.tsx @@ -1,22 +1,19 @@ import { useIntl } from "react-intl" -import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" +import { Typography } from "@scandic-hotels/design-system/Typography" import styles from "./yourLevel.module.css" export default function YourLevel() { const intl = useIntl() return ( - - {intl.formatMessage({ - id: "overviewTable.yourLevel", - defaultMessage: "Your level", - })} - + + + {intl.formatMessage({ + id: "overviewTable.yourLevel", + defaultMessage: "Your level", + })} + + ) } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/YourLevelScript/yourLevel.module.css b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/YourLevelScript/yourLevel.module.css index 9572ab79d..1693b1486 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/YourLevelScript/yourLevel.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/YourLevelScript/yourLevel.module.css @@ -1,6 +1,8 @@ .script { transform: rotate(-4deg); padding-bottom: var(--Space-x05); + text-align: center; + color: var(--Text-Interactive-Secondary); } @media screen and (min-width: 950px) { diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/ScriptedRewardText/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/ScriptedRewardText/index.tsx index 966faffee..8e9037045 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/ScriptedRewardText/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/ScriptedRewardText/index.tsx @@ -1,10 +1,11 @@ import { useIntl } from "react-intl" import { isMembershipLevel } from "@scandic-hotels/common/utils/membershipLevels" +import { Typography } from "@scandic-hotels/design-system/Typography" import { TIER_TO_FRIEND_MAP } from "@/constants/membershipLevels" -import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" +import styles from "./scriptedRewardText.module.css" import type { ScriptedRewardTextProps } from "@/types/components/myPages/myPage/accountPage" @@ -46,8 +47,8 @@ export default function ScriptedRewardText({ if (!label) return null return ( - - {label} - + + {label} + ) } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/ScriptedRewardText/scriptedRewardText.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/ScriptedRewardText/scriptedRewardText.module.css new file mode 100644 index 000000000..3b712fb68 --- /dev/null +++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/ScriptedRewardText/scriptedRewardText.module.css @@ -0,0 +1,5 @@ +.scriptedText { + transform: rotate(-3deg); + transform-origin: left; + color: var(--Text-Accent-Primary); +} diff --git a/apps/scandic-web/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css b/apps/scandic-web/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css index 423ddf2be..6b3bec096 100644 --- a/apps/scandic-web/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css +++ b/apps/scandic-web/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css @@ -35,6 +35,8 @@ gap: var(--Space-x1); padding: var(--Space-x4) var(--Space-x3); z-index: 2; + color: var(--Base-Text-Inverted); + text-align: center; } .mainContent { @@ -60,7 +62,8 @@ } .scriptedText { - display: inline-block; + transform: rotate(-3deg); + transform-origin: left; } @media screen and (max-width: 767px) { diff --git a/apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx b/apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx index e3cc94bbd..dc3d4114e 100644 --- a/apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx +++ b/apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx @@ -2,8 +2,6 @@ import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import Image from "@scandic-hotels/design-system/Image" import { Typography } from "@scandic-hotels/design-system/Typography" -import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" - import styles from "./fullWidthCampaign.module.css" import type { FullWidthCampaign } from "@/types/trpc/routers/contentstack/startPage" @@ -33,17 +31,17 @@ export default function FullWidthCampaign({ /> ) : null}
-
- + + {content.scripted_top_title} - -
+ +
- {content.heading} + {content.heading} -

{content.body_text}

+

{content.body_text}
{content.has_primary_button ? ( diff --git a/apps/scandic-web/components/TempDesignSystem/Card/card.module.css b/apps/scandic-web/components/TempDesignSystem/Card/card.module.css index 5e51738e9..62868b853 100644 --- a/apps/scandic-web/components/TempDesignSystem/Card/card.module.css +++ b/apps/scandic-web/components/TempDesignSystem/Card/card.module.css @@ -62,6 +62,10 @@ .bodyText { color: var(--Primary-Light-On-Surface-Text); } + + .scriptedTitle { + color: var(--Primary-Light-On-Surface-Accent); + } } .themeTwo { @@ -72,6 +76,10 @@ .bodyText { color: var(--Secondary-Light-On-Surface-Text); } + + .scriptedTitle { + color: var(--Secondary-Light-On-Surface-Accent); + } } .themeThree { @@ -82,6 +90,10 @@ .bodyText { color: var(--Tertiary-Light-On-Surface-Text); } + + .scriptedTitle { + color: var(--Tertiary-Light-On-Surface-Accent); + } } .themePrimaryDark { @@ -92,6 +104,10 @@ .bodyText { color: var(--Primary-Dark-On-Surface-Text); } + + .scriptedTitle { + color: var(--Primary-Dark-On-Surface-Accent); + } } .themePrimaryDim { @@ -102,6 +118,10 @@ .bodyText { color: var(--Primary-Dim-On-Surface-Text); } + + .scriptedTitle { + color: var(--Primary-Dim-On-Surface-Accent); + } } .themePrimaryInverted { @@ -112,6 +132,10 @@ .bodyText { color: var(--Primary-Light-On-Surface-Text); } + + .scriptedTitle { + color: var(--Primary-Light-On-Surface-Accent); + } } .themePrimaryStrong { @@ -122,6 +146,10 @@ .bodyText { color: var(--Primary-Strong-On-Surface-Text); } + + .scriptedTitle { + color: var(--Primary-Strong-On-Surface-Accent); + } } .themeImage { @@ -134,6 +162,10 @@ .content { position: absolute; } + + .scriptedTitle { + color: var(--Base-Text-Inverted); + } } .scriptContainer { @@ -144,6 +176,8 @@ .scriptedTitle { padding: var(--Space-x1); margin: 0; + transform: rotate(-3deg); + transform-origin: left; } .buttonContainer { diff --git a/apps/scandic-web/components/TempDesignSystem/Card/index.tsx b/apps/scandic-web/components/TempDesignSystem/Card/index.tsx index ec6fbf08d..654b4c054 100644 --- a/apps/scandic-web/components/TempDesignSystem/Card/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/Card/index.tsx @@ -5,9 +5,7 @@ import Image from "@scandic-hotels/design-system/Image" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" -import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" - -import { getButtonTheme, getScriptFontColor } from "./utils" +import { getButtonTheme } from "./utils" import { cardVariants } from "./variants" import styles from "./card.module.css" @@ -29,7 +27,6 @@ export default function Card({ height, }: CardProps) { const buttonTheme = getButtonTheme(theme) - const scriptFontColor = getScriptFontColor(theme) return (
{scriptedTopTitle && (
- - {scriptedTopTitle} - + + {scriptedTopTitle} +
)} diff --git a/apps/scandic-web/components/TempDesignSystem/Card/utils.ts b/apps/scandic-web/components/TempDesignSystem/Card/utils.ts index 8ba9667c4..648ab4762 100644 --- a/apps/scandic-web/components/TempDesignSystem/Card/utils.ts +++ b/apps/scandic-web/components/TempDesignSystem/Card/utils.ts @@ -1,31 +1,6 @@ import type { ButtonProps } from "@scandic-hotels/design-system/OldDSButton" -import type { VariantProps } from "class-variance-authority" import type { CardProps } from "@/components/TempDesignSystem/Card/card" -import type { biroScriptVariants } from "@/components/TempDesignSystem/Text/BiroScript/variants" - -export function getScriptFontColor( - theme: CardProps["theme"] -): VariantProps["color"] { - switch (theme) { - case "one": - return "primaryLightOnSurfaceAccent" - case "two": - return "secondaryLightAccent" - case "three": - return "tertiaryLightAccent" - case "primaryDark": - return "pink" - case "primaryDim": - return "primaryDimAccent" - case "primaryInverted": - return "primaryLightOnSurfaceAccent" - case "primaryStrong": - return "primaryStrongAccent" - case "image": - return "baseText" - } -} export function getButtonTheme( theme: CardProps["theme"] diff --git a/apps/scandic-web/components/TempDesignSystem/Text/BiroScript/biroScript.module.css b/apps/scandic-web/components/TempDesignSystem/Text/BiroScript/biroScript.module.css deleted file mode 100644 index 97eb71458..000000000 --- a/apps/scandic-web/components/TempDesignSystem/Text/BiroScript/biroScript.module.css +++ /dev/null @@ -1,99 +0,0 @@ -.text { - display: block; - font-family: var(--typography-Script-1-fontFamily); - text-transform: none; -} - -.one { - font-size: clamp( - var(--typography-Script-1-Mobile-fontSize), - 1.3vw + 14px, - var(--typography-Script-1-Desktop-fontSize) - ); - font-weight: var(--typography-Script-1-fontWeight); - letter-spacing: var(--typography-Script-1-letterSpacing); - line-height: var(--typography-Script-1-lineHeight); -} - -.two { - font-size: clamp( - var(--typography-Script-2-Mobile-fontSize), - 0.6vw + 15px, - var(--typography-Script-2-Desktop-fontSize) - ); - font-weight: var(--typography-Script-2-fontWeight); - letter-spacing: var(--typography-Script-2-letterSpacing); - line-height: var(--typography-Script-2-lineHeight); -} - -.tiltedExtraSmall { - transform: rotate(-2deg); -} - -.tiltedSmall { - transform: rotate(-3deg); -} - -.tiltedMedium { - transform: rotate(-4deg) translate(0px, -15px); -} - -.tiltedLarge { - transform: rotate(-13deg) translate(0px, -15px); -} - -.center { - text-align: center; -} - -.left { - text-align: left; -} - -.black { - color: var(--Main-Grey-100); -} - -.burgundy { - color: var(--Scandic-Brand-Burgundy); -} - -.pale { - color: var(--Scandic-Brand-Pale-Peach); -} - -.peach80 { - color: var(--Base-Text-Medium-contrast); -} - -.plosa { - color: var(--Primary-Light-On-Surface-Accent); -} - -.red { - color: var(--Scandic-Brand-Scandic-Red); -} - -.pink { - color: var(--Primary-Dark-On-Surface-Accent); -} - -.secondaryLightAccent { - color: var(--Secondary-Light-On-Surface-Accent); -} - -.tertiaryLightAccent { - color: var(--Tertiary-Light-On-Surface-Accent); -} - -.primaryDimAccent { - color: var(--Primary-Dim-On-Surface-Accent); -} - -.primaryStrongAccent { - color: var(--Primary-Strong-On-Surface-Accent); -} - -.baseText { - color: var(--Base-Text-Inverted); -} diff --git a/apps/scandic-web/components/TempDesignSystem/Text/BiroScript/biroScript.ts b/apps/scandic-web/components/TempDesignSystem/Text/BiroScript/biroScript.ts deleted file mode 100644 index aaa0044a5..000000000 --- a/apps/scandic-web/components/TempDesignSystem/Text/BiroScript/biroScript.ts +++ /dev/null @@ -1,9 +0,0 @@ -import type { VariantProps } from "class-variance-authority" - -import type { biroScriptVariants } from "./variants" - -export interface BiroScriptProps - extends Omit, "color">, - VariantProps { - asChild?: boolean -} diff --git a/apps/scandic-web/components/TempDesignSystem/Text/BiroScript/index.tsx b/apps/scandic-web/components/TempDesignSystem/Text/BiroScript/index.tsx deleted file mode 100644 index 095bec4f7..000000000 --- a/apps/scandic-web/components/TempDesignSystem/Text/BiroScript/index.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Slot } from "@radix-ui/react-slot" - -import { biroScriptVariants } from "./variants" - -import type { BiroScriptProps } from "./biroScript" - -export default function BiroScript({ - asChild = false, - className, - color, - textAlign, - type, - tilted, - ...props -}: BiroScriptProps) { - const Comp = asChild ? Slot : "span" - const classNames = biroScriptVariants({ - className, - color, - textAlign, - type, - tilted, - }) - return -} diff --git a/apps/scandic-web/components/TempDesignSystem/Text/BiroScript/variants.ts b/apps/scandic-web/components/TempDesignSystem/Text/BiroScript/variants.ts deleted file mode 100644 index af23254c9..000000000 --- a/apps/scandic-web/components/TempDesignSystem/Text/BiroScript/variants.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { cva } from "class-variance-authority" - -import styles from "./biroScript.module.css" - -const config = { - variants: { - color: { - black: styles.black, - burgundy: styles.burgundy, - pale: styles.pale, - peach80: styles.peach80, - primaryLightOnSurfaceAccent: styles.plosa, - red: styles.red, - pink: styles.pink, - secondaryLightAccent: styles.secondaryLightAccent, - tertiaryLightAccent: styles.tertiaryLightAccent, - primaryDimAccent: styles.primaryDimAccent, - primaryStrongAccent: styles.primaryStrongAccent, - baseText: styles.baseText, - }, - textAlign: { - center: styles.center, - left: styles.left, - }, - type: { - one: styles.one, - two: styles.two, - }, - tilted: { - extraSmall: styles.tiltedExtraSmall, - small: styles.tiltedSmall, - medium: styles.tiltedMedium, - large: styles.tiltedLarge, - }, - }, - defaultVariants: { - type: "one", - }, -} as const - -export const biroScriptVariants = cva(styles.text, config)