Support page and StoryOverview page header

Author: yvonnetangsu

components/Storyblok/ComponentNotFound.tsx

@@ -7,5 +7,8 @@ type ComponentNotFoundProps = {
 }
 
 export const ComponentNotFound = ({ component: { blok } }: ComponentNotFoundProps) => (
-  <div className="rs-p-6 bg-red-600"><h2 className="text-white">{blok.component} component is missing from the codebase.</h2><p className="text-white">Source blok UID: {blok._uid}</p></div>
+  <div className="rs-p-6 bg-red-600">
+    <h2 className="text-white">{blok.component} component is missing from the codebase.</h2>
+    <p className="text-white">Source blok UID: {blok._uid}</p>
+  </div>
 );

components/Storyblok/Header/Header.types.ts renamed to components/Storyblok/PageHeader/Header.types.ts

@@ -1,7 +1,7 @@
 import { cnb } from 'cnbuilder';
 import { Container } from '@/components/Container';
 import { Heading } from '@/components/Typography';
-import { type HeaderProps } from '@/components/Storyblok/Header';
+import { type HeaderProps } from '@/components/Storyblok/PageHeader';
 import { darkBgColors } from '@/utilities/datasource';
 
 type HeaderMinimalProps = Partial<HeaderProps>;

components/Storyblok/Header/HeaderFullWidthImage.tsx renamed to components/Storyblok/PageHeader/HeaderFullWidthImage.tsx

@@ -1,7 +1,7 @@
 import { type SbBlokData, storyblokEditable } from '@storyblok/react/rsc';
 import {
   HeaderFullWidthImage, HeaderMinimal, HeaderNoImage, HeaderSmallImage, type HeaderProps,
-} from '@/components/Storyblok/Header';
+} from '@/components/Storyblok/PageHeader';
 import { BodyLeftSidebar, type BodyLeftSidebarProps } from '@/components/Storyblok/partials/BodyLeftSidebar';
 import { BodyNoSidebar, type BodyNoSidebarProps } from '@/components/Storyblok/partials/BodyNoSidebar';
 import { IconCardSection, type IconCardSectionProps } from '@/components/Storyblok/partials/IconCardSection';

components/Storyblok/Header/HeaderMinimal.tsx renamed to components/Storyblok/PageHeader/HeaderMinimal.tsx

@@ -1,12 +1,17 @@
 import { type SbBlokData } from '@storyblok/react/rsc';
+import { type StoryblokRichtext } from 'storyblok-rich-text-react-renderer';
 import { storyblokEditable } from '@storyblok/react/rsc';
 import { CreateBloks } from '@/components/CreateBloks';
 import { Footer, type FooterProps } from '@/components/Storyblok/partials/Footer';
-import { HeaderNoImage, type HeaderNoImageProps } from '@/components/Storyblok/partials/HeaderNoImage';
+import { HeaderNoImage } from '@/components/Storyblok/PageHeader/HeaderNoImage';
 import { IconCardSection, type IconCardSectionProps } from '@/components/Storyblok/partials/IconCardSection';
+import { type DarkBgColorsType } from '@/utilities/datasource';
 
-type SbStoryOverviewPageProps = HeaderNoImageProps & IconCardSectionProps & FooterProps & {
+type SbStoryOverviewPageProps = IconCardSectionProps & FooterProps & {
   blok: SbBlokData & {
+    title?: string;
+    intro?: StoryblokRichtext;
+    headerBackgroundColor?: DarkBgColorsType;
     localHeader: SbBlokData[];
     alertPicker: SbBlokData[];
     stories: SbBlokData[];

components/Storyblok/Header/HeaderNoImage.tsx renamed to components/Storyblok/PageHeader/HeaderNoImage.tsx

@@ -1,17 +1,23 @@
 'use client';
 import { type MouseEventHandler, useCallback, useEffect } from 'react';
+import { type StoryblokRichtext } from 'storyblok-rich-text-react-renderer';
 import { useRouter } from 'next/navigation';
 import { storyblokEditable, type SbBlokData } from '@storyblok/react/rsc';
 import { CreateBloks } from '@/components/CreateBloks';
-import { HeaderNoImage, type HeaderNoImageProps } from '@/components/Storyblok/partials/HeaderNoImage';
+import { HeaderNoImage } from '@/components/Storyblok/PageHeader/HeaderNoImage';
 import { Footer, type FooterProps } from '@/components/Storyblok/partials/Footer';
+import { Grid } from '@/components/Grid';
 import { IconCardSection, type IconCardSectionProps } from '@/components/Storyblok/partials/IconCardSection';
 import { CenteredContainer } from '@/components/Storyblok/partials/CenteredContainer';
 import { Heading, SrOnlyText } from '@/components/Typography';
-import { Grid } from '../Grid';
+import { type DarkBgColorsType } from '@/utilities/datasource';
 
-export type SbSupportPageProps = HeaderNoImageProps & IconCardSectionProps & FooterProps & {
+
+export type SbSupportPageProps = IconCardSectionProps & FooterProps & {
   blok: SbBlokData & {
+    title?: string;
+    intro?: StoryblokRichtext;
+    headerBackgroundColor?: DarkBgColorsType;
     localHeader: SbBlokData[];
     alertPicker: SbBlokData[];
     belowContent: SbBlokData[];

components/Storyblok/Header/HeaderSmallImage.tsx renamed to components/Storyblok/PageHeader/HeaderSmallImage.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { type SbBlokData } from '@storyblok/react/rsc';
 import { storyblokEditable } from '@storyblok/react/rsc';
 import { CreateBloks } from '@/components/CreateBloks';