Align warning callout with NHS.UK frontend

Author: colinrotherham

src/components/content-presentation/warning-callout/WarningCallout.tsx

@@ -2,12 +2,12 @@ import React, { FC, HTMLProps } from 'react';
 import classNames from 'classnames';
 import HeadingLevel, { HeadingLevelType } from '@components/utils/HeadingLevel';
 
-interface WarningCalloutLabelProps extends HTMLProps<HTMLHeadingElement> {
+interface WarningCalloutHeadingProps extends HTMLProps<HTMLHeadingElement> {
   headingLevel?: HeadingLevelType;
   visuallyHiddenText?: string | false;
 }
 
-const WarningCalloutLabel: FC<WarningCalloutLabelProps> = ({
+const WarningCalloutHeading: FC<WarningCalloutHeadingProps> = ({
   className,
   visuallyHiddenText = 'Important: ',
   children,
@@ -23,13 +23,13 @@ const WarningCalloutLabel: FC<WarningCalloutLabelProps> = ({
 );
 
 interface IWarningCallout extends FC<HTMLProps<HTMLDivElement>> {
-  Label: typeof WarningCalloutLabel;
+  Heading: typeof WarningCalloutHeading;
 }
 
 const WarningCalloutComponent: IWarningCallout = ({ className, ...rest }) => (
   <div className={classNames('nhsuk-warning-callout', className)} {...rest} />
 );
 
-WarningCalloutComponent.Label = WarningCalloutLabel;
+WarningCalloutComponent.Heading = WarningCalloutHeading;
 
 export default WarningCalloutComponent;

src/components/content-presentation/warning-callout/__tests__/WarningCallout.test.tsx

@@ -6,7 +6,7 @@ describe('WarningCallout', () => {
   it('matches snapshot', () => {
     const { container } = render(
       <WarningCallout>
-        <WarningCallout.Label>School, nursery or work</WarningCallout.Label>
+        <WarningCallout.Heading>School, nursery or work</WarningCallout.Heading>
         <p>
           Stay away from school, nursery or work until all the spots have crusted over. This is
           usually 5 days after the spots first appeared.
@@ -20,7 +20,7 @@ describe('WarningCallout', () => {
   it('adds default visually hidden text', () => {
     const { container } = render(
       <WarningCallout>
-        <WarningCallout.Label>School, nursery or work</WarningCallout.Label>
+        <WarningCallout.Heading>School, nursery or work</WarningCallout.Heading>
         <p>
           Stay away from school, nursery or work until all the spots have crusted over. This is
           usually 5 days after the spots first appeared.
@@ -36,9 +36,9 @@ describe('WarningCallout', () => {
   it('adds custom visually hidden text', () => {
     const { container } = render(
       <WarningCallout>
-        <WarningCallout.Label visuallyHiddenText="Not Very Important: ">
+        <WarningCallout.Heading visuallyHiddenText="Not Very Important: ">
           School, nursery or work
-        </WarningCallout.Label>
+        </WarningCallout.Heading>
         <p>
           Stay away from school, nursery or work until all the spots have crusted over. This is
           usually 5 days after the spots first appeared.
@@ -54,9 +54,9 @@ describe('WarningCallout', () => {
   it('can disable visually hidden text', () => {
     const { container } = render(
       <WarningCallout>
-        <WarningCallout.Label visuallyHiddenText={false}>
+        <WarningCallout.Heading visuallyHiddenText={false}>
           School, nursery or work
-        </WarningCallout.Label>
+        </WarningCallout.Heading>
         <p>
           Stay away from school, nursery or work until all the spots have crusted over. This is
           usually 5 days after the spots first appeared.

stories/Content Presentation/WarningCallout.stories.tsx

@@ -9,12 +9,12 @@ const meta: Meta<typeof WarningCallout> = {
 export default meta;
 type Story = StoryObj<typeof WarningCallout>;
 
-WarningCallout.Label.displayName = 'WarningCallout.Label';
+WarningCallout.Heading.displayName = 'WarningCallout.Heading';
 
 export const StandardWarningCallout: Story = {
   render: (args) => (
     <WarningCallout>
-      <WarningCallout.Label>School, nursery or work</WarningCallout.Label>
+      <WarningCallout.Heading>School, nursery or work</WarningCallout.Heading>
       <p>
         Stay away from school, nursery or work until all the spots have crusted over. This is
         usually 5 days after the spots first appeared.
@@ -28,9 +28,9 @@ export const StandardWarningCallout: Story = {
 export const WarningCalloutWithCustomVisuallyHiddenText: Story = {
   render: (args) => (
     <WarningCallout>
-      <WarningCallout.Label visuallyHiddenText="Not Important: ">
+      <WarningCallout.Heading visuallyHiddenText="Not Important: ">
         School, nursery or work
-      </WarningCallout.Label>
+      </WarningCallout.Heading>
       <p>
         Stay away from school, nursery or work until all the spots have crusted over. This is
         usually 5 days after the spots first appeared.
@@ -42,9 +42,9 @@ export const WarningCalloutWithCustomVisuallyHiddenText: Story = {
 export const WarningCalloutWithDisabledVisuallyHiddenText: Story = {
   render: (args) => (
     <WarningCallout>
-      <WarningCallout.Label visuallyHiddenText={false}>
+      <WarningCallout.Heading visuallyHiddenText={false}>
         School, nursery or work
-      </WarningCallout.Label>
+      </WarningCallout.Heading>
       <p>
         Stay away from school, nursery or work until all the spots have crusted over. This is
         usually 5 days after the spots first appeared.