#1375 - page hero tall enhancement

undp · Jan 11, 2025 · f24774d · f24774d
1 parent 3bddb42
commit f24774d
Show file tree

Hide file tree

Showing 9 changed files with 266 additions and 149 deletions.
diff --git a/docs/css/components/page-hero.min.css b/docs/css/components/page-hero.min.css
diff --git a/docs/js/all.min.js b/docs/js/all.min.js
diff --git a/docs/js/fitText.min.js b/docs/js/fitText.min.js
diff --git a/docs/js/swiper.min.js b/docs/js/swiper.min.js
diff --git a/stories/Atom/Typography/Heading/Heading.jsx b/stories/Atom/Typography/Heading/Heading.jsx
@@ -1,20 +1,41 @@
-import React from 'react';
-import '../../../assets/scss/_typography.scss';
+import React, { useEffect } from "react";
+import "../../../assets/scss/_typography.scss";
+import { fitHeading } from "../../../assets/js/fitText";
 
 export function Heading({
   type,
   label,
   className,
   tabIndex,
   dataViewport,
+  isFitHeading,
 }) {
+  useEffect(() => {
+    if (isFitHeading) {
+      // use setTimeout to apply Fitty after the DOM has stabilized.
+      // If you don’t use setTimeout, the heading may overlap the top of
+      // the right image when refreshing the page or loading the homepage
+      // for the first time.
+      const timeoutId = setTimeout(() => {
+        const headingFunction = fitHeading(".fit-text");
+        return headingFunction;
+      }, 100);
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    }
+  }, [isFitHeading]);
   const HeadingTag = `h${type}`;
-  const tab_index = tabIndex ?? '0';
+  const tab_index = tabIndex ?? "0";
   const data_viewport = dataViewport ?? false;
-  const heading_classes = className ?? '';
+  const heading_classes = className ?? "";
 
   return (
-    <HeadingTag className={heading_classes} tabIndex={tab_index} data-viewport={data_viewport}>
+    <HeadingTag
+      className={`${heading_classes} fit-text`}
+      tabIndex={tab_index}
+      data-viewport={data_viewport}
+    >
       {label}
     </HeadingTag>
   );

diff --git a/stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.jsx b/stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.jsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import './page-hero.scss';
-import { Video } from '../../../../Atom/Video/Video';
-import { Heading } from '../../../../Atom/Typography/Heading/Heading';
-import { Breadcrumbcomponent } from '../../../Navigationcomponents/Breadcrumbs/Breadcrumbs';
-import { CtaButton } from '../../Buttons/CtaButton/CtaButton';
+import React from "react";
+import "./page-hero.scss";
+import { Video } from "../../../../Atom/Video/Video";
+import { Heading } from "../../../../Atom/Typography/Heading/Heading";
+import { Breadcrumbcomponent } from "../../../Navigationcomponents/Breadcrumbs/Breadcrumbs";
+import { CtaButton } from "../../Buttons/CtaButton/CtaButton";
 
 export function PageHeroOption({
   data,
@@ -19,28 +19,38 @@ export function PageHeroOption({
   cta,
   ...args
 }) {
-  const CtaEnabledClass = args.CTA == 'On' ? 'has-cta' : '';
+  const CtaEnabledClass = args.CTA == "On" ? "has-cta" : "";
   return (
-    <div className={['pagehero-tall', CtaEnabledClass].join(' ')}>
+    <div className={["pagehero-tall", CtaEnabledClass].join(" ")}>
       <div className="grid-x">
         <div className="cell medium-4 medium-offset-1">
           <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" />
-            {args.Subtitle == 'On' && subtitle && <p className="subtitle">{subtitle}</p>}
-            {args.CTA == 'On' && cta.label && <CtaButton label={cta.label} For_Primary={cta.for_primary} />}
+            {args.Overline == "On" && content && (
+              <Heading type="4" label={content} dataViewport="true" />
+            )}
+            <Heading
+              type="2"
+              label={title}
+              dataViewport="true"
+              isFitHeading={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>
         </div>
         <div className="cell medium-7">
           <div className="homepage-hero-image">
-            {variant === 'Video' ? (
+            {variant === "Video" ? (
               <Video src={videosrc} width="100%" height="100%" />
             ) : (
               <picture>
                 <source media="(min-width: 767px)" srcSet={imgsrc} />
-                <img 
-                src={imgsrc2} alt={imgalt} />
+                <img src={imgsrc2} alt={imgalt} />
               </picture>
             )}
           </div>