Remove support for uppercase heading levels

Author: colinrotherham

src/components/content-presentation/tabs/__tests__/Tabs.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
-import Tabs from '../Tabs';
-import { HeadingLevelType } from '@components/utils/HeadingLevel';
+import Tabs, { TabTitleProps } from '../Tabs';
 
 describe('The tabs component', () => {
   it('Matches the snapshot', () => {
@@ -71,25 +70,19 @@ describe('The tabs component', () => {
   });
 
   describe('The tabs title', () => {
-    it.each`
-      headingLevel
-      ${undefined}
-      ${'H1'}
-      ${'H2'}
-      ${'H3'}
-      ${'H4'}
-    `(
-      'Renders the chosen heading level $headingLevel if specified',
-      ({ headingLevel }: { headingLevel: HeadingLevelType }) => {
-        const { container } = render(
-          <Tabs.Title headingLevel={headingLevel}>Test title</Tabs.Title>,
-        );
-
-        const title = container.querySelector('.nhsuk-tabs__title');
-
-        expect(title?.nodeName).toEqual(headingLevel ?? 'H2');
-      },
-    );
+    it.each<TabTitleProps | undefined>([
+      undefined,
+      { headingLevel: 'h1' },
+      { headingLevel: 'h2' },
+      { headingLevel: 'h3' },
+      { headingLevel: 'h4' },
+    ])('Renders the chosen heading level $headingLevel if specified', (props) => {
+      const { container } = render(<Tabs.Title {...props}>Test title</Tabs.Title>);
+
+      const title = container.querySelector('.nhsuk-tabs__title');
+
+      expect(title).toHaveProperty('tagName', props?.headingLevel?.toUpperCase() ?? 'H2');
+    });
   });
 
   describe('The tab list', () => {

src/components/utils/HeadingLevel.tsx

@@ -1,41 +1,25 @@
-import React, { HTMLAttributes, FC } from 'react';
+import React, { ElementType, HTMLAttributes, forwardRef } from 'react';
 
 export interface HeadingLevelProps extends HTMLAttributes<HTMLHeadingElement> {
-  headingLevel?: HeadingLevelType;
+  headingLevel?: Extract<ElementType, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
 }
 
-export type HeadingLevelType =
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'H1'
-  | 'H2'
-  | 'H3'
-  | 'H4'
-  | 'H5'
-  | 'H6';
+const HeadingLevel = forwardRef<HTMLHeadingElement, HeadingLevelProps>((props, ref) => {
+  const { headingLevel = 'h3', children, ...rest } = props;
+  let Element = headingLevel;
 
-const HeadingLevel: FC<HeadingLevelProps> = ({ headingLevel = 'h3', children, ...rest }) => {
-  switch (headingLevel.toLowerCase()) {
-    case 'h1':
-      return <h1 {...rest}>{children}</h1>;
-    case 'h2':
-      return <h2 {...rest}>{children}</h2>;
-    case 'h3':
-      return <h3 {...rest}>{children}</h3>;
-    case 'h4':
-      return <h4 {...rest}>{children}</h4>;
-    case 'h5':
-      return <h5 {...rest}>{children}</h5>;
-    case 'h6':
-      return <h6 {...rest}>{children}</h6>;
-    default:
-      console.error(`HeadingLevel: Invalid headingLevel prop: ${headingLevel}`);
-      return <h3 {...rest}>{children}</h3>;
+  if (!['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(Element.toLowerCase())) {
+    console.error(`HeadingLevel: Invalid headingLevel prop: ${Element}`);
+    Element = 'h3';
   }
-};
+
+  return (
+    <Element ref={ref} {...rest}>
+      {children}
+    </Element>
+  );
+});
+
+HeadingLevel.displayName = 'HeadingLevel';
 
 export default HeadingLevel;

src/components/utils/__tests__/HeadingLevel.test.tsx

@@ -1,25 +1,21 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import HeadingLevel, { HeadingLevelType } from '../HeadingLevel';
+import HeadingLevel, { HeadingLevelProps } from '../HeadingLevel';
 
 describe('HeadingLevel', () => {
-  it.each<HeadingLevelType>([
-    'h1',
-    'H1',
-    'h2',
-    'H2',
-    'h3',
-    'H3',
-    'h4',
-    'H4',
-    'h5',
-    'H5',
-    'h6',
-    'H6',
-  ])('renders the correct elements - %s', (headingLevel: HeadingLevelType) => {
-    const { container } = render(<HeadingLevel headingLevel={headingLevel} />);
+  it.each<HeadingLevelProps>([
+    { headingLevel: 'h1' },
+    { headingLevel: 'h2' },
+    { headingLevel: 'h3' },
+    { headingLevel: 'h4' },
+    { headingLevel: 'h5' },
+    { headingLevel: 'h6' },
+  ])('renders the correct elements - %s', (props) => {
+    const { container } = render(<HeadingLevel {...props} />);
 
-    expect(container.querySelector(String(headingLevel).toLowerCase())).toBeTruthy();
+    const headingEl = container.querySelector(props.headingLevel!);
+
+    expect(headingEl).toHaveProperty('tagName', props?.headingLevel?.toUpperCase());
   });
 
   it('console.warn when headingLevel is invalid', () => {