spike(hero): use Heading instead of allowing generic h1, h2, etc

cfpb · Apr 1, 2024 · 0c2c037 · 0c2c037
1 parent 6cd5acc
commit 0c2c037
Showing 1 changed file with 33 additions and 16 deletions.
diff --git a/src/components/Hero/Hero.tsx b/src/components/Hero/Hero.tsx
@@ -1,6 +1,7 @@
 import classnames from 'classnames';
-import { createElement } from 'react';
 import type { HeadingLevel } from '../../types/headingLevel';
+import type { HeadingType } from '../Headings/Heading';
+import { Heading } from '../Headings/Heading';
 import { HeroImage } from './HeroImage';
 import './hero.less';
 import { useBackgroundImage } from './useBackgroundImage';
@@ -51,25 +52,41 @@ export default function Hero({
   if (isKnockout) heroCnames.push('m-hero__knockout');
   if (imageIsPhoto) heroCnames.push('m-hero__overlay');
 
+  // NOTE: This is a mapping of the Hero component's HeadingLevel to the Heading component's
+  // HeadingType but we could also use the HeadingType directly in the Hero component with some
+  // refactoring of the Heading component or run a regex replace on the HeadingLevel in the Hero
+  const HeadingLevelToHeadingType: Record<string, HeadingType> = {
+    h1: '1',
+    h2: '2',
+    h3: '3',
+    h4: '4',
+    h5: '5',
+    display: 'display',
+    eyebrow: 'eyebrow',
+    slug: 'slug'
+  };
+
   return (
     <div className={classnames(heroCnames)} style={heroStyles} {...properties}>
       <div className='m-hero_wrapper' ref={wrapperReference}>
         <div className='m-hero_text' style={textStyles} data-testid='hero-text'>
-          {createElement(
-            headingLevel,
-            {
-              className: `m-hero_heading ${headingLevel}`,
-              'data-testid': 'hero-heading'
-            },
-            heading
-          )}
-          {createElement(
-            subheadingLevel,
-            {
-              className: `m-hero_subhead ${subheadingLevel}`,
-              'data-testid': 'hero-subheading'
-            },
-            subheading
+          <Heading
+            className='m-hero_heading'
+            data-testid='hero-heading'
+            type={HeadingLevelToHeadingType[headingLevel]}
+          >
+            {heading}
+          </Heading>
+          {subheadingLevel === 'p' ? (
+            <p className='m-hero_subhead'>{subheading}</p>
+          ) : (
+            <Heading
+              className='m-hero_subhead'
+              data-testid='hero-subheading'
+              type={HeadingLevelToHeadingType[subheadingLevel]}
+            >
+              {subheading}
+            </Heading>
           )}
         </div>
         <HeroImage image={image} altText={imageAltText} />