📱 Scale text to device

🔥 Remove unused labelSmall
varianter · Dec 9, 2024 · f0e0f60 · f0e0f60
1 parent 6835688
commit f0e0f60
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 25 deletions.
diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx
@@ -10,7 +10,6 @@ import { defaultLanguage } from "i18n/supportedLanguages";
 import LanguageSwitcher from "src/components/languageSwitcher/LanguageSwitcher";
 import CustomLink from "src/components/link/CustomLink";
 import LinkButton from "src/components/linkButton/LinkButton";
-import Text from "src/components/text/Text";
 import useScrollDirection from "src/utils/hooks/useScrollDirection";
 import { getHref } from "src/utils/link";
 import { Announcement } from "studio/lib/interfaces/announcement";

diff --git a/src/components/sections/article/Article.tsx b/src/components/sections/article/Article.tsx
@@ -24,7 +24,7 @@ const Article = ({ article }: ArticleProps) => {
         )}
         <div className={styles.content}>
           <div>
-            <Text type="labelSmall">{article.tag}</Text>
+            <Text type="labelRegular">{article.tag}</Text>
             <Text type="h2">{article.basicTitle}</Text>
           </div>
           {article.richText && <RichText value={article.richText} />}

diff --git a/src/components/text/Text.stories.tsx b/src/components/text/Text.stories.tsx
@@ -17,7 +17,6 @@ const meta: Meta<typeof Text> = {
           "h4",
           "h5",
           "h6",
-          "labelSmall",
           "labelRegular",
           "quoteItalic",
           "quoteNormal",
@@ -90,13 +89,6 @@ export const H6: Story = {
   },
 };
 
-export const LabelSmall: Story = {
-  args: {
-    type: "labelSmall",
-    children: "This is a Label Small text",
-  },
-};
-
 export const LabelRegular: Story = {
   args: {
     type: "labelRegular",

diff --git a/src/components/text/Text.tsx b/src/components/text/Text.tsx
@@ -9,7 +9,6 @@ export type TextType =
   | "h6"
   | "desktopLink"
   | "desktopLinkBig"
-  | "labelSmall"
   | "labelRegular"
   | "labelLarge"
   | "quoteItalic"
@@ -31,7 +30,6 @@ const elementMap: { [key in TextType]: keyof JSX.IntrinsicElements } = {
   h6: "h6",
   desktopLink: "p",
   desktopLinkBig: "p",
-  labelSmall: "span",
   labelRegular: "span",
   labelLarge: "span",
   quoteItalic: "p",
@@ -54,7 +52,6 @@ const classMap: { [key in TextType]?: string } = {
   h6: styles.h6,
   desktopLink: styles.desktopLink,
   desktopLinkBig: styles.desktopLinkBig,
-  labelSmall: styles.labelSmall,
   labelRegular: styles.labelRegular,
   labelLarge: styles.labelLarge,
   quoteItalic: styles.quoteItalic,

diff --git a/src/components/text/text.module.css b/src/components/text/text.module.css
@@ -3,7 +3,6 @@
   font-family: var(--font-britti-sans);
 }
 
-.labelSmall,
 .labelRegular,
 .quoteItalic,
 .quoteNormal,
@@ -21,18 +20,43 @@
   font-style: normal;
   font-weight: 450;
   line-height: 111.111%;
+
+  @media (max-width: 834px) {
+    font-size: 3.5rem;
+    line-height: 114.286%;
+  }
+
+  @media (max-width: 425px) {
+    font-size: 2.5rem;
+    line-height: 120%;
+  }
 }
 
 .h2 {
   font-size: 3.5rem;
   font-weight: 450;
   line-height: 114.286%;
+
+  @media (max-width: 834px) {
+    font-size: 2.5rem;
+    line-height: 120%;
+  }
+
+  @media (max-width: 425px) {
+    font-size: 2rem;
+    line-height: 125%;
+  }
 }
 
 .h3 {
   font-size: 2rem;
   font-weight: 450;
   line-height: 125%;
+
+  @media (max-width: 425px) {
+    font-size: 1.5rem;
+    line-height: 133.333%;
+  }
 }
 
 .h4 {
@@ -49,14 +73,21 @@
   line-height: 120%;
 }
 
-/* TODO: add font variables */
-/* .h6 */
-
 .desktopLink {
   font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: 150%;
+
+  @media (max-width: 834px) {
+    font-size: 2.5rem;
+    line-height: 120%;
+  }
+
+  @media (max-width: 425px) {
+    font-size: 2rem;
+    line-height: 125%;
+  }
 }
 
 .desktopLinkBig {
@@ -65,20 +96,44 @@
   font-weight: 300;
   line-height: 120%;
   text-decoration-line: underline;
+
+  @media (max-width: 834px) {
+    font-size: 2.5rem;
+    line-height: 120%;
+  }
+
+  @media (max-width: 425px) {
+    font-size: 2rem;
+    line-height: 125%;
+  }
 }
 
 .bodyXl {
   font-size: 2.5rem;
   font-weight: 300;
   line-height: 120%;
   letter-spacing: 0.025rem;
+
+  @media (max-width: 834px) {
+    font-size: 2.5rem;
+    line-height: 120%;
+  }
+
+  @media (max-width: 425px) {
+    font-size: 2rem;
+    line-height: 125%;
+  }
 }
 
 .bodyBig {
   font-size: 1.5rem;
   font-style: normal;
   font-weight: 300;
   line-height: 133.333%;
+
+  @media (max-width: 425px) {
+    line-height: 120%;
+  }
 }
 
 .bodyNormal {
@@ -87,12 +142,22 @@
   font-weight: 300;
   line-height: 160%;
   letter-spacing: 0.0125rem;
+
+  @media (max-width: 425px) {
+    font-size: 0.875rem;
+    line-height: 120%;
+  }
 }
 
 .bodySmall {
   font-size: 1rem;
-  font-weight: 400;
+  font-weight: 300;
   line-height: 150%;
+
+  @media (max-width: 425px) {
+    font-size: 0.875rem;
+    line-height: 114.286%;
+  }
 }
 
 .bodyExtraSmall {
@@ -101,31 +166,36 @@
   line-height: 128.571%;
   letter-spacing: 0.00875rem;
 
-  @media (max-width: 375px) {
+  @media (max-width: 425px) {
     font-size: 0.75px;
+    line-height: 150%;
     letter-spacing: 0.0075rem;
   }
 }
 
-.labelSmall {
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 171.429%;
-}
-
 .labelRegular {
   font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: 150%;
   letter-spacing: 0.02rem;
+
+  @media (max-width: 425px) {
+    font-size: 0.875rem;
+    line-height: 128.571%;
+  }
 }
 
 .labelLarge {
   font-size: 1.25rem;
   font-style: normal;
   font-weight: 400;
   line-height: 120%;
+
+  @media (max-width: 425px) {
+    font-size: 1.125rem;
+    line-height: 133.333%;
+  }
 }
 
 .quoteNormal {