From dee62fbde034447b9ac715813c208ba6583edda9 Mon Sep 17 00:00:00 2001
From: Petter Hohle <petter.hohle@gmail.com>
Date: Fri, 6 Dec 2024 12:55:21 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Align=20text=20CSS=20classes=20w?=
 =?UTF-8?q?ith=20design=20(#952)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💄 Align text CSS classes with design
💄 Add labelLarge class
🔥 Remove labelSemibold and labelLight

* 🔥 Remove labelBold

* 💄 Update bodySmall and labelSmall
---
 .../breadCrumbMenu/BreadCrumbMenu.tsx         |  2 +-
 src/components/navigation/header/Header.tsx   |  2 +-
 .../sections/employees/EmployeeList.tsx       |  4 +-
 src/components/text/Text.stories.tsx          | 17 ----
 src/components/text/Text.tsx                  | 12 +--
 src/components/text/text.module.css           | 84 ++++++++-----------
 6 files changed, 43 insertions(+), 78 deletions(-)

diff --git a/src/components/navigation/breadCrumbMenu/BreadCrumbMenu.tsx b/src/components/navigation/breadCrumbMenu/BreadCrumbMenu.tsx
index 7bcb84d41..34c74acf3 100644
--- a/src/components/navigation/breadCrumbMenu/BreadCrumbMenu.tsx
+++ b/src/components/navigation/breadCrumbMenu/BreadCrumbMenu.tsx
@@ -48,7 +48,7 @@ export const BreadCrumbMenu = ({
                 className={
                   isLast ? styles.breadCrumbText : styles.breadCrumbLink
                 }
-                type={isLast ? "labelSemibold" : "desktopLink"}
+                type={isLast ? "labelRegular" : "desktopLink"}
               >
                 {title}
               </Text>
diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx
index 0dede3c83..5909c7454 100644
--- a/src/components/navigation/header/Header.tsx
+++ b/src/components/navigation/header/Header.tsx
@@ -103,7 +103,7 @@ export const Header = ({
                   />
                 )}
                 <Button size="large" type="secondary" background="light">
-                  <Text type="labelRegular">{t("contact_us")}</Text>
+                  <Text type="labelLarge">{t("contact_us")}</Text>
                 </Button>
               </div>
               <button
diff --git a/src/components/sections/employees/EmployeeList.tsx b/src/components/sections/employees/EmployeeList.tsx
index 19b2217f6..48f463f29 100644
--- a/src/components/sections/employees/EmployeeList.tsx
+++ b/src/components/sections/employees/EmployeeList.tsx
@@ -99,7 +99,7 @@ export default function EmployeeList({
     <>
       <div className={styles.employeeFiltersWrapper}>
         <div className={styles.employeeFilterWrapper}>
-          <Text type="labelSemibold" className={styles.employeeFilterLabel}>
+          <Text type="labelRegular" className={styles.employeeFilterLabel}>
             {t("field")}
           </Text>
           <Tag
@@ -125,7 +125,7 @@ export default function EmployeeList({
           })}
         </div>
         <div className={styles.employeeFilterWrapper}>
-          <Text type="labelSemibold" className={styles.employeeFilterLabel}>
+          <Text type="labelRegular" className={styles.employeeFilterLabel}>
             {t("location")}
           </Text>
           <Tag
diff --git a/src/components/text/Text.stories.tsx b/src/components/text/Text.stories.tsx
index 7bf7dfc14..0c86f9b9c 100644
--- a/src/components/text/Text.stories.tsx
+++ b/src/components/text/Text.stories.tsx
@@ -18,10 +18,7 @@ const meta: Meta<typeof Text> = {
           "h5",
           "h6",
           "labelSmall",
-          "labelLight",
           "labelRegular",
-          "labelSemibold",
-          "labelBold",
           "quoteItalic",
           "quoteNormal",
           "bodyExtraSmall",
@@ -100,13 +97,6 @@ export const LabelSmall: Story = {
   },
 };
 
-export const LabelLight: Story = {
-  args: {
-    type: "labelLight",
-    children: "This is a Label Light text",
-  },
-};
-
 export const LabelRegular: Story = {
   args: {
     type: "labelRegular",
@@ -114,13 +104,6 @@ export const LabelRegular: Story = {
   },
 };
 
-export const LabelSemibold: Story = {
-  args: {
-    type: "labelSemibold",
-    children: "This is a Label Semibold text",
-  },
-};
-
 export const QuoteItalic: Story = {
   args: {
     type: "quoteItalic",
diff --git a/src/components/text/Text.tsx b/src/components/text/Text.tsx
index ce7ad46e3..5d859d66c 100644
--- a/src/components/text/Text.tsx
+++ b/src/components/text/Text.tsx
@@ -10,10 +10,8 @@ export type TextType =
   | "desktopLink"
   | "desktopLinkBig"
   | "labelSmall"
-  | "labelLight"
   | "labelRegular"
-  | "labelSemibold"
-  | "labelBold"
+  | "labelLarge"
   | "quoteItalic"
   | "quoteNormal"
   | "bodyExtraSmall"
@@ -34,10 +32,8 @@ const elementMap: { [key in TextType]: keyof JSX.IntrinsicElements } = {
   desktopLink: "p",
   desktopLinkBig: "p",
   labelSmall: "span",
-  labelLight: "span",
   labelRegular: "span",
-  labelSemibold: "span",
-  labelBold: "span",
+  labelLarge: "span",
   quoteItalic: "p",
   quoteNormal: "p",
   bodyExtraSmall: "p",
@@ -59,10 +55,8 @@ const classMap: { [key in TextType]?: string } = {
   desktopLink: styles.desktopLink,
   desktopLinkBig: styles.desktopLinkBig,
   labelSmall: styles.labelSmall,
-  labelLight: styles.labelLight,
   labelRegular: styles.labelRegular,
-  labelSemibold: styles.labelSemibold,
-  labelBold: styles.labelBold,
+  labelLarge: styles.labelLarge,
   quoteItalic: styles.quoteItalic,
   quoteNormal: styles.quoteNormal,
   bodyExtraSmall: styles.bodyExtraSmall,
diff --git a/src/components/text/text.module.css b/src/components/text/text.module.css
index d5118b8bf..db88803fd 100644
--- a/src/components/text/text.module.css
+++ b/src/components/text/text.module.css
@@ -4,10 +4,7 @@
 }
 
 .labelSmall,
-.labelLight,
 .labelRegular,
-.labelSemibold,
-.labelBold,
 .quoteItalic,
 .quoteNormal,
 .bodyExtraSmall,
@@ -22,32 +19,33 @@
 .h1 {
   font-size: 4.5rem;
   font-style: normal;
-  font-weight: 600;
-  line-height: 120%;
+  font-weight: 450;
+  line-height: 111.111%;
 }
 
 .h2 {
-  font-size: 3rem;
-  font-weight: 600;
-  line-height: 120%;
+  font-size: 3.5rem;
+  font-weight: 450;
+  line-height: 114.286%;
 }
 
 .h3 {
-  font-size: 2.125rem;
-  font-weight: 600;
+  font-size: 2rem;
+  font-weight: 450;
+  line-height: 125%;
 }
 
 .h4 {
   font-size: 1.5rem;
   font-style: normal;
-  font-weight: 500;
-  line-height: 120%; /* 1.8rem */
+  font-weight: 450;
+  line-height: 133.3%;
 }
 
 .h5 {
   font-size: 1.25rem;
   font-style: normal;
-  font-weight: 400;
+  font-weight: 450;
   line-height: 120%;
 }
 
@@ -58,7 +56,7 @@
   font-size: 1rem;
   font-style: normal;
   font-weight: 400;
-  line-height: 110%;
+  line-height: 150%;
 }
 
 .desktopLinkBig {
@@ -71,7 +69,7 @@
 
 .bodyXl {
   font-size: 2.5rem;
-  font-weight: 400;
+  font-weight: 300;
   line-height: 120%;
   letter-spacing: 0.025rem;
 }
@@ -79,65 +77,54 @@
 .bodyBig {
   font-size: 1.5rem;
   font-style: normal;
-  font-weight: 400;
-  line-height: 130%;
+  font-weight: 300;
+  line-height: 133.333%;
 }
 
 .bodyNormal {
   font-size: 1.25rem;
   font-style: normal;
   font-weight: 300;
+  line-height: 160%;
+  letter-spacing: 0.0125rem;
 }
 
 .bodySmall {
   font-size: 1rem;
-  font-weight: 300;
+  font-weight: 400;
   line-height: 150%;
 }
 
 .bodyExtraSmall {
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 18px;
-  letter-spacing: 0.14px;
+  line-height: 128.571%;
+  letter-spacing: 0.00875rem;
 
   @media (max-width: 375px) {
-    font-size: 12px;
-    letter-spacing: 0.12px;
+    font-size: 0.75px;
+    letter-spacing: 0.0075rem;
   }
 }
 
 .labelSmall {
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-}
-
-.labelLight {
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 300;
-  line-height: 120%;
+  line-height: 171.429%;
 }
 
 .labelRegular {
   font-size: 1rem;
   font-style: normal;
   font-weight: 400;
-  line-height: 120%;
-}
-
-.labelSemibold {
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 120%;
+  line-height: 150%;
+  letter-spacing: 0.02rem;
 }
 
-.labelBold {
-  font-size: 1rem;
+.labelLarge {
+  font-size: 1.25rem;
   font-style: normal;
-  font-weight: 800;
+  font-weight: 400;
   line-height: 120%;
 }
 
@@ -149,9 +136,10 @@
   white-space: pre-line;
 }
 
-/* TODO: add font variables */
-/* .labelBold */
-/* .quoteItalic */
-/* .labelSemibold, */
-/* .labelBold, */
-/* .quoteItalic, */
+.quoteItalic {
+  font-size: 1.5rem;
+  font-style: italic;
+  font-weight: 400;
+  line-height: 130%;
+  white-space: pre-line;
+}