V3 - refactor text component (#802)

* refactor of Text types * update text components * add missing comma * linting fix
varianter · Oct 22, 2024 · 528a0a0 · 528a0a0
1 parent b039b2f
commit 528a0a0
Show file tree

Hide file tree

Showing 17 changed files with 231 additions and 84 deletions.
diff --git a/src/components/compensations/components/yearlyBonuses/YearlyBonuses.tsx b/src/components/compensations/components/yearlyBonuses/YearlyBonuses.tsx
@@ -31,10 +31,10 @@ const YearlyBonuses = ({ bonuses, locale }: YearlyBonusesProps) => {
             .map((bonus) => (
               <tr key={bonus._key}>
                 <th>
-                  <Text type={"small"}>{bonus.year}</Text>
+                  <Text type={"bodySmall"}>{bonus.year}</Text>
                 </th>
                 <td className={styles.bonusCell}>
-                  <Text type={"small"}>
+                  <Text type={"bodySmall"}>
                     {formatAsCurrency(
                       bonus.bonus,
                       locale.locale,

diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
@@ -20,7 +20,7 @@ export default function CustomerCase({ customerCase }: CustomerCaseProps) {
           <SanitySharedImage image={customerCase.image} />
         </div>
         <div className={styles.ingress}>
-          <Text type={"bodyLarge"}>{customerCase.description}</Text>
+          <Text type={"bodyBig"}>{customerCase.description}</Text>
           <div className={styles.projectInfo}>
             <div className={styles.projectInfoItem}>
               <Text>Kunde</Text>

diff --git a/src/components/forms/checkbox/Checkbox.tsx b/src/components/forms/checkbox/Checkbox.tsx
@@ -47,7 +47,7 @@ const Checkbox = ({
       {error && (
         <span>
           <Text
-            type="small"
+            type="bodySmall"
             className={styles.error}
             id={hintID}
             aria-live="assertive"

diff --git a/src/components/forms/inputField/InputField.tsx b/src/components/forms/inputField/InputField.tsx
@@ -74,7 +74,7 @@ const InputField = ({
       {error && (
         <span>
           <Text
-            type="small"
+            type="bodySmall"
             className={styles.error}
             id={hintID}
             aria-live="assertive"

diff --git a/src/components/forms/inputTextArea/InputTextArea.tsx b/src/components/forms/inputTextArea/InputTextArea.tsx
@@ -48,7 +48,7 @@ const InputTextArea = ({
       {error && (
         <span>
           <Text
-            type="small"
+            type="bodySmall"
             className={styles.error}
             id={hintID}
             aria-live="assertive"

diff --git a/src/components/languageSwitcher/LanguageSwitcher.tsx b/src/components/languageSwitcher/LanguageSwitcher.tsx
@@ -22,7 +22,7 @@ export default function LanguageSwitcher({
           return null;
         }
         const linkText = (
-          <Text type={"small"}>{pathTranslation._key.toUpperCase()}</Text>
+          <Text type={"bodySmall"}>{pathTranslation._key.toUpperCase()}</Text>
         );
         return (
           <Fragment key={pathTranslation._key}>

diff --git a/src/components/legal/Legal.tsx b/src/components/legal/Legal.tsx
@@ -67,7 +67,7 @@ const Legal = ({ document }: { document: LegalDocument }) => {
               <RichText value={document.richText} />
             ) : (
               <section className={styles.document}>
-                <Text type="body">
+                <Text type="bodyNormal">
                   It appears that this legal document is missing some
                   information. Please visit the studio to add the necessary
                   details.

diff --git a/src/components/richText/RichText.tsx b/src/components/richText/RichText.tsx
@@ -32,7 +32,7 @@ const myPortableTextComponents: Partial<PortableTextReactComponents> = {
         {children}
       </Text>
     ),
-    normal: ({ children }) => <Text type="body">{children}</Text>,
+    normal: ({ children }) => <Text type="bodyNormal">{children}</Text>,
     blockquote: ({ children }) => (
       <blockquote className={`${styles.blockquote} ${textStyles.body}`}>
         {children}

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="caption">{article.tag}</Text>
+            <Text type="labelSmall">{article.tag}</Text>
             <Text type="h2">{article.basicTitle}</Text>
           </div>
           {article.richText && <RichText value={article.richText} />}

diff --git a/src/components/sections/callout/Callout.tsx b/src/components/sections/callout/Callout.tsx
@@ -11,7 +11,7 @@ interface CalloutProps {
 }
 
 const myPortableTextComponents: Partial<PortableTextReactComponents> = {
-  block: ({ children }) => <Text type="bodySuperLarge">{children}</Text>,
+  block: ({ children }) => <Text type="bodyXl">{children}</Text>,
 };
 
 const Callout = ({ callout }: CalloutProps) => {

diff --git a/src/components/sections/grid/Grid.tsx b/src/components/sections/grid/Grid.tsx
@@ -58,5 +58,5 @@ const Element = ({
 };
 
 const myPortableTextComponents: Partial<PortableTextReactComponents> = {
-  block: ({ children }) => <Text type="small">{children}</Text>,
+  block: ({ children }) => <Text type="bodySmall">{children}</Text>,
 };
diff --git a/src/components/sections/hero/Hero.tsx b/src/components/sections/hero/Hero.tsx
@@ -20,12 +20,12 @@ export const Hero = ({ hero, isLanding = false }: HeroProps) => {
     >
       {isLanding ? (
         <div className={styles.secondary}>
-          <Text type="display" className={styles.title}>
+          <Text type="h1" className={styles.title}>
             {hero.basicTitle}
           </Text>
           {hero.description && (
             <div className={styles.description}>
-              <Text type="bodyLarge">{hero.description}</Text>
+              <Text type="bodyBig">{hero.description}</Text>
             </div>
           )}
           <ul className={styles.cta}>
@@ -46,9 +46,7 @@ export const Hero = ({ hero, isLanding = false }: HeroProps) => {
       ) : (
         <div className={styles.primary}>
           <Text type="h1">{hero.basicTitle}</Text>
-          {hero.description && (
-            <Text type="bodySuperLarge">{hero.description}</Text>
-          )}
+          {hero.description && <Text type="bodyXl">{hero.description}</Text>}
         </div>
       )}
     </div>

diff --git a/src/components/sections/logoSalad/LogoSalad.tsx b/src/components/sections/logoSalad/LogoSalad.tsx
@@ -11,7 +11,7 @@ interface LogoSaladProps {
 }
 
 const myPortableTextComponents: Partial<PortableTextReactComponents> = {
-  block: ({ children }) => <Text type="bodySuperLarge">{children}</Text>,
+  block: ({ children }) => <Text type="bodyXl">{children}</Text>,
 };
 
 export const LogoSalad = ({ logoSalad }: LogoSaladProps) => {

diff --git a/src/components/text/Text.stories.tsx b/src/components/text/Text.stories.tsx
@@ -10,15 +10,29 @@ const meta: Meta<typeof Text> = {
       control: {
         type: "select",
         options: [
-          "display",
+          "desktopLink",
           "h1",
           "h2",
           "h3",
-          "bodySuperLarge",
-          "bodyLarge",
-          "body",
-          "small",
-          "caption",
+          "h4",
+          "h5",
+          "h6",
+          "h7",
+          "labelSmall",
+          "labelLight",
+          "labelRegular",
+          "labelSemibold",
+          "labelBold",
+          "quoteItalic",
+          "quoteNormal",
+          "bodyExtraSmall",
+          "bodySmall",
+          "bodyNormal",
+          "bodySmall",
+          "bodyBig",
+          "bodyXl",
+          "mobileH1",
+          "mobileBodyNormal",
         ],
       },
     },
@@ -31,9 +45,9 @@ const meta: Meta<typeof Text> = {
 export default meta;
 type Story = StoryObj<typeof Text>;
 
-export const Display: Story = {
+export const DesktopLink: Story = {
   args: {
-    type: "display",
+    type: "desktopLink",
     children: "This is a display text",
   },
 };
@@ -59,37 +73,114 @@ export const H3: Story = {
   },
 };
 
-export const BodySuperLarge: Story = {
+export const H4: Story = {
   args: {
-    type: "bodySuperLarge",
-    children: "This is a Body Super Large text",
+    type: "h4",
+    children: "This is an H4 text",
   },
 };
 
-export const BodyLarge: Story = {
+export const H5: Story = {
   args: {
-    type: "bodyLarge",
-    children: "This is a Body Large text",
+    type: "h5",
+    children: "This is an H5 text",
   },
 };
 
-export const Body: Story = {
+export const H6: Story = {
   args: {
-    type: "body",
-    children: "This is a Body text",
+    type: "h6",
+    children: "This is an H6 text",
+  },
+};
+
+export const H7: Story = {
+  args: {
+    type: "h7",
+    children: "This is an H7 text",
+  },
+};
+
+export const LabelSmall: Story = {
+  args: {
+    type: "labelSmall",
+    children: "This is a Label Small text",
+  },
+};
+
+export const LabelLight: Story = {
+  args: {
+    type: "labelLight",
+    children: "This is a Label Light text",
+  },
+};
+
+export const LabelRegular: Story = {
+  args: {
+    type: "labelRegular",
+    children: "This is a Label Regular text",
+  },
+};
+
+export const LabelSemibold: Story = {
+  args: {
+    type: "labelSemibold",
+    children: "This is a Label Semibold text",
+  },
+};
+
+export const QuoteItalic: Story = {
+  args: {
+    type: "quoteItalic",
+    children: "This is a Quote Italic text",
   },
 };
 
-export const Small: Story = {
+export const QuoteNormal: Story = {
   args: {
-    type: "small",
+    type: "quoteNormal",
+    children: "This is a Quote Normal text",
+  },
+};
+
+export const BodySmall: Story = {
+  args: {
+    type: "bodySmall",
     children: "This is a Small text",
   },
 };
 
-export const Caption: Story = {
+export const BodyNormal: Story = {
+  args: {
+    type: "bodyNormal",
+    children: "This is a Body text",
+  },
+};
+
+export const BodyBig: Story = {
+  args: {
+    type: "bodyBig",
+    children: "This is a Body Super Large text",
+  },
+};
+
+export const BodyXl: Story = {
+  args: {
+    type: "bodyXl",
+    children: "This is a Body Large text",
+  },
+};
+
+export const MobileH1: Story = {
+  args: {
+    type: "mobileH1",
+    children: "This is a Mobile H1 text",
+  },
+};
+
+export const MobileBodyNormal: Story = {
   args: {
-    type: "caption",
-    children: "This is a Caption text",
+    type: "mobileBodyNormal",
+    children: "This is a Mobile Body text",
   },
 };