Add fallback className to component guards

Author: colinrotherham

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

@@ -39,19 +39,21 @@ const NotificationBannerComponent = forwardRef<HTMLDivElement, NotificationBanne
     }, [moduleRef, instance]);
 
     const items = Children.toArray(children);
+
     const titleElement = items.find((child) =>
-      childIsOfComponentType(child, NotificationBannerTitle),
-    );
-    const nonTitleItems = items.filter(
-      (child) => !childIsOfComponentType(child, NotificationBannerTitle),
-    );
-    const headerElement = nonTitleItems.find((child) =>
-      childIsOfComponentType(child, NotificationBannerHeading),
+      childIsOfComponentType(child, NotificationBannerTitle, {
+        className: 'nhsuk-notification-banner__title',
+      }),
     );
-    const bodyItems = nonTitleItems.filter(
-      (child) => !childIsOfComponentType(child, NotificationBannerHeading),
+
+    const headerElement = items.find((child) =>
+      childIsOfComponentType(child, NotificationBannerHeading, {
+        className: 'nhsuk-notification-banner__heading',
+      }),
     );
 
+    const bodyItems = items.filter((child) => child !== titleElement && child !== headerElement);
+
     if (instanceError) {
       throw instanceError;
     }