(fix) issue undp#1375 -- header size dynamically adjusted

The size of the header is computed with a mathematical function and passed further to react. This way the header does not wrap around for single words that are long. However, it still wraps around for phrases.
networkinstitutevu · Sep 17, 2024 · e82d792 · e82d792
1 parent 22828b1
commit e82d792
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/stories/Atom/Typography/Heading/Heading.jsx b/stories/Atom/Typography/Heading/Heading.jsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import '../../../assets/scss/_typography.scss';
+import React from "react";
+import "../../../assets/scss/_typography.scss";
 
 export function Heading({
   type,
@@ -14,8 +14,26 @@ export function Heading({
   const heading_classes = className ?? '';
 
   return (
-    <HeadingTag className={heading_classes} tabIndex={tab_index} data-viewport={data_viewport}>
+    <HeadingTag className={heading_classes} tabIndex={tab_index} data-viewport={data_viewport} style={{ fontSize: `${getSize()}vw` }}>
       {label}
     </HeadingTag>
   );
+
+  function getSize() {
+    const MAX_SIZE = 8;
+    // there are more words
+    if (label.indexOf(' ') !== -1) {
+      return 4; // 4vw
+    }
+
+    // => there is only one word
+    if (label.length < 5) {
+      return 8; // 8vw
+    }
+
+    const WORD_LENGTH = label.length;
+    const WORD_SIZE = WORD_LENGTH * (0.88 ** WORD_LENGTH);
+    if (WORD_SIZE > MAX_SIZE) return MAX_SIZE;
+    return WORD_SIZE;
+  }
 }
diff --git a/stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.jsx b/stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.jsx
@@ -27,7 +27,7 @@ export function PageHeroOption({
           <div className="pagehero-content color-black">
             <Breadcrumbcomponent data={data} />
             {args.Overline == 'On' && content && <Heading type="4" label={content} dataViewport="true" />}
-            <Heading type="2" label={title} dataViewport="true" />
+            <Heading type="2" label={title} className="title" dataViewport="true" />
             {args.Subtitle == 'On' && subtitle && <p className="subtitle">{subtitle}</p>}
             {args.CTA == 'On' && cta.label && <CtaButton label={cta.label} For_Primary={cta.for_primary} />}
           </div>
@@ -39,7 +39,7 @@ export function PageHeroOption({
             ) : (
               <picture>
                 <source media="(min-width: 767px)" srcSet={imgsrc} />
-                <img 
+                <img
                 src={imgsrc2} alt={imgalt} />
               </picture>
             )}