Split out separate Legend component

Author: colinrotherham

src/__tests__/index.test.ts

@@ -38,6 +38,7 @@ describe('Index', () => {
       'InsetText',
       'Label',
       'LedeText',
+      'Legend',
       'NavAZ',
       'Pagination',
       'Panel',

src/components/form-elements/fieldset/Fieldset.tsx

@@ -1,45 +1,9 @@
-import React, { FC, HTMLProps, MutableRefObject } from 'react';
+import React, { HTMLProps, MutableRefObject } from 'react';
 import classNames from 'classnames';
-import { NHSUKSize } from '@util/types/NHSUKTypes';
-import HeadingLevel, { HeadingLevelType } from '@components/utils/HeadingLevel';
-import FormGroup from '@components/utils/FormGroup';
+import Legend from '../legend/Legend';
+import FormGroup from '../../utils/FormGroup';
 
-interface LegendProps extends Omit<HTMLProps<HTMLLegendElement>, 'size'> {
-  isPageHeading?: boolean;
-  headingLevel?: HeadingLevelType;
-  size?: NHSUKSize;
-}
-
-const Legend: FC<LegendProps> = ({
-  className,
-  children,
-  isPageHeading,
-  headingLevel = 'h1',
-  size,
-  ...rest
-}) => (
-  <legend
-    className={classNames(
-      'nhsuk-fieldset__legend',
-      {
-        'nhsuk-fieldset__legend--xl': isPageHeading && !size,
-      },
-      { [`nhsuk-fieldset__legend--${size}`]: size },
-      className,
-    )}
-    {...rest}
-  >
-    {isPageHeading ? (
-      <HeadingLevel className="nhsuk-fieldset__heading" headingLevel={headingLevel}>
-        {children}
-      </HeadingLevel>
-    ) : (
-      children
-    )}
-  </legend>
-);
-
-interface FieldsetProps extends HTMLProps<HTMLFieldSetElement> {
+export interface FieldsetProps extends HTMLProps<HTMLFieldSetElement> {
   fieldsetRef?: MutableRefObject<HTMLFieldSetElement | null>;
   disableErrorLine?: boolean;
 }

src/components/form-elements/fieldset/__tests__/Fieldset.test.tsx

@@ -29,19 +29,4 @@ describe('Fieldset', () => {
 
     expect(container.firstChild).toHaveClass('nhsuk-form-group');
   });
-
-  describe('Fieldset.Legend', () => {
-    it('matches snapshot', () => {
-      const { container } = render(<Fieldset.Legend>Text</Fieldset.Legend>);
-
-      expect(container).toMatchSnapshot('FieldsetLegend');
-    });
-
-    it('renders as page heading', () => {
-      const { container } = render(<Fieldset.Legend isPageHeading>Text</Fieldset.Legend>);
-
-      expect(container.querySelector('.nhsuk-fieldset__legend--xl')).toBeTruthy();
-      expect(container.querySelector('.nhsuk-fieldset__heading')?.textContent).toBe('Text');
-    });
-  });
 });

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

@@ -0,0 +1,41 @@
+import React, { FC, HTMLProps } from 'react';
+import classNames from 'classnames';
+import { NHSUKSize } from '@util/types/NHSUKTypes';
+import HeadingLevel, { HeadingLevelType } from '@components/utils/HeadingLevel';
+
+export interface LegendProps extends Omit<HTMLProps<HTMLLegendElement>, 'size'> {
+  isPageHeading?: boolean;
+  headingLevel?: HeadingLevelType;
+  size?: NHSUKSize;
+}
+
+const LegendComponent: FC<LegendProps> = ({
+  className,
+  children,
+  isPageHeading,
+  headingLevel = 'h1',
+  size,
+  ...rest
+}) => (
+  <legend
+    className={classNames(
+      'nhsuk-fieldset__legend',
+      {
+        'nhsuk-fieldset__legend--xl': isPageHeading && !size,
+      },
+      { [`nhsuk-fieldset__legend--${size}`]: size },
+      className,
+    )}
+    {...rest}
+  >
+    {isPageHeading ? (
+      <HeadingLevel className="nhsuk-fieldset__heading" headingLevel={headingLevel}>
+        {children}
+      </HeadingLevel>
+    ) : (
+      children
+    )}
+  </legend>
+);
+
+export default LegendComponent;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Legend from '..';
+
+describe('Legend', () => {
+  it('matches snapshot', () => {
+    const { container } = render(<Legend>Text</Legend>);
+
+    expect(container).toMatchSnapshot('Legend');
+  });
+
+  it('renders as page heading', () => {
+    const { container } = render(<Legend isPageHeading>Text</Legend>);
+
+    expect(container.querySelector('.nhsuk-fieldset__legend--xl')).toBeTruthy();
+    expect(container.querySelector('.nhsuk-fieldset__heading')?.textContent).toBe('Text');
+  });
+});

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Legend matches snapshot: Legend 1`] = `
+<div>
+  <legend
+    class="nhsuk-fieldset__legend"
+  >
+    Text
+  </legend>
+</div>
+`;

src/components/form-elements/legend/index.ts

@@ -0,0 +1 @@
+export { default } from './Legend';

src/index.ts

@@ -17,6 +17,7 @@ export { default as Form, useFormContext } from './components/form-elements/form
 export { default as Header } from './components/navigation/header';
 export { default as Hero } from './components/content-presentation/hero';
 export { default as HintText } from './components/form-elements/hint-text';
+export { default as Legend } from './components/form-elements/legend';
 export {
   ArrowLeft as ArrowLeftIcon,
   ArrowRight as ArrowRightIcon,