From 9fb5f82d92614936c9e85ccebd62d66d85753504 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Thu, 5 Jun 2025 05:35:17 +0000
Subject: [PATCH] fix(SW-2692): Added hyphens:auto and text-wrap:balance to
 tackle long words
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Approved-by: Matilda Landström
---
 .../sidebarContentWrapper.module.css          |  3 +-
 .../ContentType/StaticPages/index.tsx         | 31 +++++++++----------
 .../StaticPages/staticPage.module.css         |  6 ++++
 .../JsonToHtml/jsontohtml.module.css          |  2 ++
 .../TempDesignSystem/SidePeek/index.tsx       |  4 +--
 .../SidePeek/sidePeek.module.css              |  2 ++
 6 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/sidebarContentWrapper.module.css b/apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/sidebarContentWrapper.module.css
index d6e80f428..7621be768 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/sidebarContentWrapper.module.css
+++ b/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 {
diff --git a/apps/scandic-web/components/ContentType/StaticPages/index.tsx b/apps/scandic-web/components/ContentType/StaticPages/index.tsx
index e711aa167..e82a0c6ad 100644
--- a/apps/scandic-web/components/ContentType/StaticPages/index.tsx
+++ b/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>
-                  <Preamble>{header.preamble}</Preamble>
+                  <Typography variant="Title/lg">
+                    <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
-                    size="medium"
-                    intent="tertiary"
-                    theme="base"
-                    asChild
-                    className={styles.button}
+                  <ButtonLink
+                    href={header.top_primary_button.url}
+                    size="Medium"
+                    variant="Tertiary"
                   >
-                    <Link href={header.top_primary_button.url}>
-                      {header.top_primary_button.title}
-                    </Link>
-                  </Button>
+                    {header.top_primary_button.title}
+                  </ButtonLink>
                 ) : null}
                 {header.navigation_links ? (
                   <LinkChips chips={header.navigation_links} />
diff --git a/apps/scandic-web/components/ContentType/StaticPages/staticPage.module.css b/apps/scandic-web/components/ContentType/StaticPages/staticPage.module.css
index 8247dffc0..63fc0219a 100644
--- a/apps/scandic-web/components/ContentType/StaticPages/staticPage.module.css
+++ b/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);
diff --git a/apps/scandic-web/components/JsonToHtml/jsontohtml.module.css b/apps/scandic-web/components/JsonToHtml/jsontohtml.module.css
index a023d2e7b..7787e2f94 100644
--- a/apps/scandic-web/components/JsonToHtml/jsontohtml.module.css
+++ b/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,
diff --git a/apps/scandic-web/components/TempDesignSystem/SidePeek/index.tsx b/apps/scandic-web/components/TempDesignSystem/SidePeek/index.tsx
index a7bf475c0..1d17781ac 100644
--- a/apps/scandic-web/components/TempDesignSystem/SidePeek/index.tsx
+++ b/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}>
-                      <h2>{title}</h2>
+                    <Typography variant="Title/md">
+                      <h2 className={styles.heading}>{title}</h2>
                     </Typography>
                   ) : null}
                   <Button
diff --git a/apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.module.css b/apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.module.css
index eb19a2013..57af27173 100644
--- a/apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.module.css
+++ b/apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.module.css
@@ -81,6 +81,8 @@
 
 .heading {
   color: var(--Text-Heading);
+  text-wrap: balance;
+  hyphens: auto;
 }
 
 .sidePeekContent {