feat(BOOK-757): Replaced Biroscript component with Typography

Approved-by: Bianca Widstam

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 (
     <article className={styles.card}>
       <header>
-        <BiroScript
-          type="two"
-          color="primaryLightOnSurfaceAccent"
-          tilted="large"
-        >
-          {intl.formatMessage(
-            {
-              id: "common.membershipLevelWithValue",
-              defaultMessage: "Level {level}",
-            },
-            { level: level.user_facing_tag }
-          )}
-        </BiroScript>
+        <Typography variant="Title/Decorative/md">
+          <p className={styles.scriptedText}>
+            {intl.formatMessage(
+              {
+                id: "common.membershipLevelWithValue",
+                defaultMessage: "Level {level}",
+              },
+              { level: level.user_facing_tag }
+            )}
+          </p>
+        </Typography>
         <MembershipLevelIcon level={level.level_id} color="red" />
       </header>
       <Typography variant="Title/xs" className={styles.pointMsg}>

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);
 }

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}
       />
     )
   }

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;
+}

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 (
-    <BiroScript
-      className={styles.script}
-      color="peach80"
-      type="two"
-      textAlign="center"
-    >
-      {intl.formatMessage({
-        id: "overviewTable.yourLevel",
-        defaultMessage: "Your level",
-      })}
-    </BiroScript>
+    <Typography variant="Title/Decorative/md">
+      <span className={styles.script}>
+        {intl.formatMessage({
+          id: "overviewTable.yourLevel",
+          defaultMessage: "Your level",
+        })}
+      </span>
+    </Typography>
   )
 }

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

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 (
-    <BiroScript type="two" color="red" tilted="small">
-      {label}
-    </BiroScript>
+    <Typography variant="Title/Decorative/md">
+      <span className={styles.scriptedText}>{label}</span>
+    </Typography>
   )
 }

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

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

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}
       <div className={styles.content}>
-        <div className={styles.scriptedText}>
-          <BiroScript color="baseText" type="two" tilted="small">
+        <Typography variant="Title/Decorative/lg">
+          <span className={styles.scriptedText}>
             {content.scripted_top_title}
-          </BiroScript>
-        </div>
+          </span>
+        </Typography>
         <div className={styles.mainContent}>
           <Typography variant="Title/mdLowCase">
-            <Hx className={styles.bodyText}>{content.heading}</Hx>
+            <Hx>{content.heading}</Hx>
           </Typography>
           <Typography variant="Body/Lead text">
-            <p className={styles.bodyText}>{content.body_text}</p>
+            <p>{content.body_text}</p>
           </Typography>
           <div className={styles.buttons}>
             {content.has_primary_button ? (

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 {

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 (
     <article
@@ -59,14 +56,9 @@ export default function Card({
       <div className={styles.content}>
         {scriptedTopTitle && (
           <section className={styles.scriptContainer}>
-            <BiroScript
-              className={styles.scriptedTitle}
-              type="two"
-              tilted="small"
-              color={scriptFontColor}
-            >
-              {scriptedTopTitle}
-            </BiroScript>
+            <Typography variant="Title/Decorative/md">
+              <span className={styles.scriptedTitle}>{scriptedTopTitle}</span>
+            </Typography>
           </section>
         )}
         <Typography variant="Title/smLowCase" className={styles.heading}>

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<typeof biroScriptVariants>["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"]

apps/scandic-web/components/TempDesignSystem/Text/BiroScript/biroScript.module.css

@@ -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);
-}

apps/scandic-web/components/TempDesignSystem/Text/BiroScript/biroScript.ts

@@ -1,9 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-
-import type { biroScriptVariants } from "./variants"
-
-export interface BiroScriptProps
-  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">,
-    VariantProps<typeof biroScriptVariants> {
-  asChild?: boolean
-}

apps/scandic-web/components/TempDesignSystem/Text/BiroScript/index.tsx

@@ -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 <Comp className={classNames} {...props} />
-}

apps/scandic-web/components/TempDesignSystem/Text/BiroScript/variants.ts

@@ -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)