Formatting

Author: colinrotherham

src/components/content-presentation/notification-banner/NotificationBanner.tsx

@@ -26,6 +26,7 @@ export interface NotificationBannerProps extends ComponentPropsWithoutRef<'div'>
 const NotificationBannerComponent = forwardRef<HTMLDivElement, NotificationBannerProps>(
   (props, forwardedRef) => {
     const { children, className, title, titleId, success, role, disableAutoFocus, ...rest } = props;
+
     const [moduleRef] = useState(() => forwardedRef || createRef<HTMLDivElement>());
     const [instanceError, setInstanceError] = useState<Error>();
     const [instance, setInstance] = useState<NotificationBannerModule>();
@@ -47,6 +48,7 @@ const NotificationBannerComponent = forwardRef<HTMLDivElement, NotificationBanne
         className: 'nhsuk-notification-banner__title',
       }),
     );
+
     const titleElementId = titleElement?.props.id || titleId || 'nhsuk-notification-banner-title';
 
     const contentItems = items.filter((child) => child !== titleElement);
@@ -73,12 +75,12 @@ const NotificationBannerComponent = forwardRef<HTMLDivElement, NotificationBanne
           {titleElement ? (
             <>{titleElement}</>
           ) : (
-            <NotificationBannerTitle success={success} id={titleElementId}>
+            <NotificationBannerTitle id={titleElementId} success={success}>
               {title}
             </NotificationBannerTitle>
           )}
         </div>
-        <div className={'nhsuk-notification-banner__content'}>{contentItems}</div>
+        <div className="nhsuk-notification-banner__content">{contentItems}</div>
       </div>
     );
   },

src/components/content-presentation/notification-banner/__tests__/NotificationBanner.test.tsx

@@ -30,7 +30,7 @@ describe('NotificationBanner', () => {
 
   it('matches snapshot custom title', async () => {
     const { container } = await renderClient(
-      <NotificationBanner title={'Upcoming maintenance'}>
+      <NotificationBanner title="Upcoming maintenance">
         <NotificationBanner.Heading>
           The service will be unavailable from 8pm to 9pm on Thursday 1 January 2025.
         </NotificationBanner.Heading>
@@ -194,7 +194,7 @@ describe('NotificationBanner', () => {
 
   it('matches snapshot custom title (via server)', async () => {
     const { container } = await renderServer(
-      <NotificationBanner title={'Upcoming maintenance'}>
+      <NotificationBanner title="Upcoming maintenance">
         <NotificationBanner.Heading>
           The service will be unavailable from 8pm to 9pm on Thursday 1 January 2025.
         </NotificationBanner.Heading>
@@ -208,7 +208,7 @@ describe('NotificationBanner', () => {
   it('matches snapshot custom title html (via server)', async () => {
     const { container } = await renderServer(
       <NotificationBanner>
-        <NotificationBanner.Title id={'custom-title'}>
+        <NotificationBanner.Title id="custom-title">
           <strong>Very</strong> important information
         </NotificationBanner.Title>
         <NotificationBanner.Heading>
@@ -390,8 +390,8 @@ describe('NotificationBanner', () => {
 
   it('prioritises id of title element over provided title id', async () => {
     const { modules } = await renderClient(
-      <NotificationBanner titleId={'wrong-id'}>
-        <NotificationBanner.Title id={'correct-id'}>Important information</NotificationBanner.Title>
+      <NotificationBanner titleId="wrong-id">
+        <NotificationBanner.Title id="correct-id">Important information</NotificationBanner.Title>
         <NotificationBanner.Heading>
           The service will be unavailable from 8pm to 9pm on Thursday 1 January 2025.
         </NotificationBanner.Heading>

stories/Content Presentation/NotificationBanner.stories.tsx

@@ -93,7 +93,7 @@ export const StandardPanelWithCustomTitleElement: Story = {
   render: () => (
     <NotificationBanner>
       <NotificationBanner.Title>
-        Maintenance <time dateTime={'2025-01-01'}>January 1</time>
+        Maintenance <time dateTime="2025-01-01">January 1</time>
       </NotificationBanner.Title>
       <NotificationBanner.Heading>Upcoming maintenance</NotificationBanner.Heading>
       <p>The service will be unavailable from 8pm to 9pm on Thursday 1 January 2025.</p>