fix: [Eyebrow] display as <div> with ".h5" class instead of <h5> (#204)

* fix: [Eyebrow] display as <div> with ".h5" class instead of <h5> * fix: [Heading] Update Eyebrow story to display H1 as div.h1 instead of actual <h1>
cfpb · Oct 20, 2023 · ed4b167 · ed4b167
1 parent 62fe41d
commit ed4b167
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/src/components/Headings/Heading.test.tsx b/src/components/Headings/Heading.test.tsx
@@ -56,8 +56,9 @@ describe('<Heading />', () => {
     const current = screen.getByTestId(testid);
 
     expect(current).toBeInTheDocument();
-    expect(current.tagName.toLowerCase()).toBe('h5');
+    expect(current.tagName.toLowerCase()).toBe('div');
     expect(current.className.includes('eyebrow')).toBeTruthy();
+    expect(current.className.includes('h5')).toBeTruthy();
   });
 
   it('Renders Slug heading', () => {

diff --git a/src/components/Headings/Heading.tsx b/src/components/Headings/Heading.tsx
@@ -39,8 +39,8 @@ export const Heading = ({
     DynamicHeading = 'h1';
     classes.push('superheading');
   } else if (type === 'eyebrow') {
-    DynamicHeading = 'h5';
-    classes.push('eyebrow');
+    DynamicHeading = 'div';
+    classes.push('h5 eyebrow');
   } else DynamicHeading = `h${type}`;
 
   return (

diff --git a/src/components/Headings/Headings.stories.tsx b/src/components/Headings/Headings.stories.tsx
@@ -72,7 +72,7 @@ export const Eyebrow: Story = {
   render: arguments_ => (
     <>
       <Heading {...arguments_} />
-      <Heading>Heading 1</Heading>
+      <div className='h1'>Heading 1</div>
     </>
   )
 };