fix(SW-2692): Added hyphens:auto and text-wrap:balance to tackle long words

Approved-by: Matilda Landström

apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/sidebarContentWrapper.module.css

@@ -7,9 +7,8 @@
 
 .heading {
   color: var(--Text-Heading);
-  overflow-wrap: break-word;
-  word-break: break-word;
   hyphens: auto;
+  text-wrap: balance;
 }
 
 .text {

apps/scandic-web/components/ContentType/StaticPages/index.tsx

@@ -1,16 +1,15 @@
-import Link from "next/link"
 import { Suspense } from "react"
 
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import Blocks from "@/components/Blocks"
+import ButtonLink from "@/components/ButtonLink"
 import HeaderDynamicContent from "@/components/Headers/DynamicContent"
 import Hero from "@/components/Hero"
 import MeetingPackageWidget from "@/components/MeetingPackageWidget"
 import Sidebar from "@/components/Sidebar"
 import SidebarSkeleton from "@/components/Sidebar/SidebarSkeleton"
-import Button from "@/components/TempDesignSystem/Button"
 import LinkChips from "@/components/TempDesignSystem/LinkChips"
-import Preamble from "@/components/TempDesignSystem/Text/Preamble"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import TrackingSDK from "@/components/TrackingSDK"
 
 import { staticPageVariants } from "./variants"
@@ -34,21 +33,21 @@ export default async function StaticPage({
             {header ? (
               <>
                 <div className={styles.headerIntro}>
-                  <Title as="h2">{header.heading}</Title>
+                  <Typography variant="Title/lg">
-                  <Preamble>{header.preamble}</Preamble>
+                    <h1 className={styles.heading}>{header.heading}</h1>
+                  </Typography>
+                  <Typography variant="Body/Lead text">
+                    <p>{header.preamble}</p>
+                  </Typography>
                 </div>
                 {header.top_primary_button?.url ? (
-                  <Button
+                  <ButtonLink
-                    size="medium"
+                    href={header.top_primary_button.url}
-                    intent="tertiary"
+                    size="Medium"
-                    theme="base"
+                    variant="Tertiary"
-                    asChild
-                    className={styles.button}
                   >
-                    <Link href={header.top_primary_button.url}>
+                    {header.top_primary_button.title}
-                      {header.top_primary_button.title}
+                  </ButtonLink>
-                    </Link>
-                  </Button>
                 ) : null}
                 {header.navigation_links ? (
                   <LinkChips chips={header.navigation_links} />

apps/scandic-web/components/ContentType/StaticPages/staticPage.module.css

@@ -20,6 +20,12 @@
   gap: var(--Spacing-x3);
 }
 
+.heading {
+  color: var(--Text-Heading);
+  text-wrap: balance;
+  hyphens: auto;
+}
+
 .heroContainer {
   width: 100%;
   padding: var(--Spacing-x4) var(--Spacing-x2);

apps/scandic-web/components/JsonToHtml/jsontohtml.module.css

@@ -13,6 +13,8 @@
 .heading {
   color: var(--Text-Heading);
   margin-top: var(--Space-x3);
+  text-wrap: balance;
+  hyphens: auto;
 }
 
 .h1,

apps/scandic-web/components/TempDesignSystem/SidePeek/index.tsx

@@ -50,8 +50,8 @@ export default function SidePeek({
               <aside className={styles.sidePeek}>
                 <header className={styles.header}>
                   {title ? (
-                    <Typography variant="Title/md" className={styles.heading}>
+                    <Typography variant="Title/md">
-                      <h2>{title}</h2>
+                      <h2 className={styles.heading}>{title}</h2>
                     </Typography>
                   ) : null}
                   <Button

apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.module.css

@@ -81,6 +81,8 @@
 
 .heading {
   color: var(--Text-Heading);
+  text-wrap: balance;
+  hyphens: auto;
 }
 
 .sidePeekContent {