Address review comments

Author: robkerrybjss

docs/upgrade-to-6.0.md

@@ -36,7 +36,7 @@ This replaces the [list panel component](#list-panel) which was removed in NHS.U
 The [notification banner](https://service-manual.nhs.uk/design-system/components/notification-banner) component from NHS.UK frontend v10 has been added:
 
 ```jsx
-<NotificationBanner title="Important Message">
+<NotificationBanner>
   <NotificationBanner.Heading>Upcoming Maintenance</NotificationBanner.Heading>
   <p>The service will be unavailable from 8pm to 9pm on Thursday 1 January 2025.</p>
 </NotificationBanner>
@@ -428,7 +428,7 @@ You must rename the `Select` prop `selectRef` to `ref` for consistency with othe
 To align with NHS.UK frontend, the skip link component focuses the main content rather than the first heading on the page:
 
 ```html
-<main class="nhsuk-main-wrapper id="maincontent">
+<main class="nhsuk-main-wrapper" id="maincontent">
   <!-- // ... -->
 ```
 

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

@@ -1,44 +1,82 @@
-import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import {
+  Children,
+  type ComponentPropsWithoutRef,
+  createRef,
+  forwardRef,
+  useEffect,
+  useState,
+} from 'react';
 import classNames from 'classnames';
-import { HeadingLevel } from '#components/utils/HeadingLevel.js';
-import { NotificationBannerHeading, NotificationBannerLink } from './components/index.js';
+import {
+  NotificationBannerHeading,
+  NotificationBannerLink,
+  NotificationBannerTitle,
+} from './components/index.js';
+import { type NotificationBanner as NotificationBannerModule } from 'nhsuk-frontend';
+import { childIsOfComponentType } from '#util/types/TypeGuards.js';
 
 export interface NotificationBannerProps extends ComponentPropsWithoutRef<'div'> {
   success?: boolean;
+  disableAutoFocus?: boolean;
 }
 
 const NotificationBannerComponent = forwardRef<HTMLDivElement, NotificationBannerProps>(
-  ({ children, className, title, success, ...rest }, forwardedRef) => {
+  ({ children, className, title, success, role, disableAutoFocus, ...rest }, forwardedRef) => {
+    const [moduleRef] = useState(() => forwardedRef || createRef<HTMLDivElement>());
+    const [instance, setInstance] = useState<NotificationBannerModule>();
+
+    useEffect(() => {
+      if (!('current' in moduleRef) || !moduleRef.current || instance) {
+        return;
+      }
+
+      const { current: $root } = moduleRef;
+
+      import('nhsuk-frontend').then(({ NotificationBanner }) => {
+        setInstance(new NotificationBanner($root));
+      });
+    }, [moduleRef, instance]);
+
+    const items = Children.toArray(children);
+    const titleElement = items.find((child) =>
+      childIsOfComponentType(child, NotificationBannerTitle),
+    ) || <NotificationBannerTitle success={success}>{title}</NotificationBannerTitle>;
+    const nonTitleItems = items.filter(
+      (child) => !childIsOfComponentType(child, NotificationBannerTitle),
+    );
+    const headerElement = nonTitleItems.find((child) =>
+      childIsOfComponentType(child, NotificationBannerHeading),
+    );
+    const bodyItems = nonTitleItems.filter(
+      (child) => !childIsOfComponentType(child, NotificationBannerHeading),
+    );
     return (
-      <section
+      <div
         className={classNames(
           'nhsuk-notification-banner',
           { 'nhsuk-notification-banner--success': success },
           className,
         )}
-        aria-labelledby="nhsuk-notification-banner-title"
+        aria-labelledby={titleElement.props.id || 'nhsuk-notification-banner-title'}
         data-module="nhsuk-notification-banner"
+        data-disable-auto-focus={disableAutoFocus}
+        ref={moduleRef}
+        role={role || (success ? 'alert' : 'region')}
       >
-        <div className="nhsuk-notification-banner__header">
-          <HeadingLevel
-            className="nhsuk-notification-banner__title"
-            headingLevel={'h2'}
-            id="nhsuk-notification-banner-title"
-          >
-            {title || (success ? 'Success' : 'Important')}
-          </HeadingLevel>
-        </div>
-        <div className={'nhsuk-notification-banner__content'} ref={forwardedRef} {...rest}>
-          {children}
+        {titleElement}
+        <div className={'nhsuk-notification-banner__content'} {...rest}>
+          {headerElement}
+          {bodyItems}
         </div>
-      </section>
+      </div>
     );
   },
 );
 
 NotificationBannerComponent.displayName = 'NotificationBanner';
 
 export const NotificationBanner = Object.assign(NotificationBannerComponent, {
+  Title: NotificationBannerTitle,
   Heading: NotificationBannerHeading,
   Link: NotificationBannerLink,
 });