Make sure headingLevel automatically assumes isPageHeading

Author: colinrotherham

src/components/form-elements/label/Label.tsx

@@ -1,9 +1,12 @@
 import classNames from 'classnames';
 import { type ComponentPropsWithoutRef, type FC } from 'react';
 
+import { HeadingLevel, type HeadingLevelProps } from '#components/utils/HeadingLevel.js';
 import { type NHSUKSize } from '#util/types/NHSUKTypes.js';
 
-export interface LabelProps extends ComponentPropsWithoutRef<'label'> {
+export interface LabelProps
+  extends ComponentPropsWithoutRef<'label'>,
+    Pick<HeadingLevelProps, 'headingLevel'> {
   isPageHeading?: boolean;
   size?: NHSUKSize;
 }
@@ -16,16 +19,18 @@ const LabelComponent: FC<Omit<LabelProps, 'isPageHeading'>> = ({ className, size
   />
 );
 
-export const Label: FC<LabelProps> = ({ isPageHeading, children, ...rest }) => {
+export const Label: FC<LabelProps> = (props) => {
+  const { children, isPageHeading, headingLevel = 'h1', ...rest } = props;
+
   if (!children) {
     return null;
   }
 
-  if (isPageHeading) {
+  if (isPageHeading || props.headingLevel) {
     return (
-      <h1 className="nhsuk-label-wrapper">
+      <HeadingLevel className="nhsuk-label-wrapper" headingLevel={headingLevel}>
         <LabelComponent {...rest}>{children}</LabelComponent>
-      </h1>
+      </HeadingLevel>
     );
   }
 

src/components/form-elements/label/__tests__/Label.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 
-import { Label } from '..';
+import { Label, type LabelProps } from '..';
 
 import { type NHSUKSize } from '#util/types';
 
@@ -50,6 +50,21 @@ describe('Label', () => {
     },
   );
 
+  it.each<LabelProps>([
+    { headingLevel: 'h1' },
+    { headingLevel: 'h2' },
+    { headingLevel: 'h3' },
+    { headingLevel: 'h4' },
+  ])('renders as page heading with custom heading level $headingLevel', (props) => {
+    const { container } = render(<Label {...props}>Text</Label>);
+
+    const headingEl = container.querySelector('.nhsuk-label-wrapper');
+    const labelEl = headingEl?.querySelector('.nhsuk-label');
+
+    expect(headingEl?.tagName).toBe(props?.headingLevel?.toUpperCase());
+    expect(labelEl).toHaveTextContent('Text');
+  });
+
   it('renders null with no children', () => {
     const { container } = render(<Label />);
 

src/components/form-elements/legend/Legend.tsx

@@ -11,14 +11,9 @@ export interface LegendProps
   size?: NHSUKSize;
 }
 
-export const Legend: FC<LegendProps> = ({
-  className,
-  children,
-  isPageHeading,
-  headingLevel = 'h1',
-  size,
-  ...rest
-}) => {
+export const Legend: FC<LegendProps> = (params) => {
+  const { className, children, isPageHeading, headingLevel = 'h1', size, ...rest } = params;
+
   if (!children) {
     return null;
   }
@@ -32,7 +27,7 @@ export const Legend: FC<LegendProps> = ({
       )}
       {...rest}
     >
-      {isPageHeading ? (
+      {isPageHeading || params.headingLevel ? (
         <HeadingLevel className="nhsuk-fieldset__heading" headingLevel={headingLevel}>
           {children}
         </HeadingLevel>

src/components/form-elements/legend/__tests__/Legend.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 
-import { Legend } from '..';
+import { Legend, type LegendProps } from '..';
 
 import { type NHSUKSize } from '#util/types/NHSUKTypes';
 
@@ -40,6 +40,21 @@ describe('Legend', () => {
     },
   );
 
+  it.each<LegendProps>([
+    { headingLevel: 'h1' },
+    { headingLevel: 'h2' },
+    { headingLevel: 'h3' },
+    { headingLevel: 'h4' },
+  ])('renders as page heading with with custom heading level $headingLevel', (props) => {
+    const { container } = render(<Legend {...props}>Text</Legend>);
+
+    const legendEl = container.querySelector('.nhsuk-fieldset__legend');
+    const headingEl = legendEl?.querySelector('.nhsuk-fieldset__heading');
+
+    expect(legendEl).toHaveTextContent('Text');
+    expect(headingEl?.tagName).toBe(props?.headingLevel?.toUpperCase());
+  });
+
   it('renders null with no children', () => {
     const { container } = render(<Legend />);