refactor: split page layout component into two functions, simplifying testing

packages/gatsby-theme-project-portal/src/components/BottomBanner.stories.tsx

@@ -27,3 +27,14 @@ export const Primary: Story = {
     image: bottomBannerLogo,
   },
 }
+
+export const Nulls: Story = {
+  args: {
+    text: null,
+    link: null,
+    linkId: null,
+    image: null,
+  },
+}
+
+export const NoArgs: Story = {}

packages/gatsby-theme-project-portal/src/components/BottomBanner.tsx

@@ -1,4 +1,3 @@
-import { Link } from "gatsby"
 import React, { FunctionComponent } from "react"
 import { GatsbyImage, ImageDataLike, getImage } from "gatsby-plugin-image"
 import { MarkdownText } from "."
@@ -32,7 +31,7 @@ export const BottomBanner: FunctionComponent<BottomBannerProps> = ({
               />
             </a>
           )}
-          {isNA(link) && { resolvedImage } && (
+          {isNA(link) && resolvedImage && (
             <GatsbyImage
               className="inline-block logotype"
               image={resolvedImage}

packages/gatsby-theme-project-portal/src/components/Contact.stories.tsx

@@ -35,3 +35,13 @@ export const NoEmail: Story = {
 export const NoImage: Story = {
   args: { ...Primary.args, image: null },
 }
+
+export const TailwindXSWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXS" } },
+}
+
+export const TailwindSMWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindSM" } },
+}

packages/gatsby-theme-project-portal/src/components/Footer.stories.tsx

@@ -77,3 +77,14 @@ export const ThreeLinks: Story = {
     ],
   },
 }
+
+export const Nulls: Story = {
+  args: {
+    heading: null,
+    copyright: null,
+    links: null,
+    image: null,
+  },
+}
+
+export const NoArgs: Story = {}

packages/gatsby-theme-project-portal/src/components/Footer.tsx

@@ -2,12 +2,12 @@ import React, { FunctionComponent } from "react"
 import { GatsbyImage, ImageDataLike, getImage } from "gatsby-plugin-image"
 
 export interface FooterProps {
-  heading: {
+  heading?: {
     title: String
     link: string
   }
-  copyright: String
-  links: {
+  copyright?: String
+  links?: {
     title: String
     link: String
   }[]
@@ -23,15 +23,15 @@ export const Footer: FunctionComponent<FooterProps> = ({
   links,
   image,
 }) => {
-  const resolvedImage = getImage(image.imageData)
+  const resolvedImage = getImage(image?.imageData)
   return (
     <footer className="w-full px-2 py-8 bg-footer xl:container xl:px-12">
       <div className="flex items-center justify-center mt-6 lg:my-auto">
         <div className="text-nav text-footertext">{copyright}</div>
       </div>
       <div className="flex items-center justify-center mt-6 lg:my-auto">
         <ul className="text-nav text-footertext list-none">
-          {links.map(({ title, link }, i) => (
+          {links?.map(({ title, link }, i) => (
             <ListItem key={"link_" + i} target={link}>
               {title}
             </ListItem>
@@ -41,17 +41,17 @@ export const Footer: FunctionComponent<FooterProps> = ({
       <div className="block w-full lg:w-auto mt-5">
         <a
           className="flex items-center gap-4 justify-center flex-wrap"
-          href={heading.link}
+          href={heading?.link}
         >
           {resolvedImage && (
             <GatsbyImage
               className="xl:inline-block logotype"
               image={resolvedImage}
-              alt={image.altText}
+              alt={image?.altText}
             />
           )}
           <p className="text-center inline-block text-h4 font-bold text-footertext">
-            {heading.title}
+            {heading?.title}
           </p>
         </a>
       </div>

packages/gatsby-theme-project-portal/src/components/Navbar.stories.tsx

@@ -37,6 +37,15 @@ export const NoLogo: Story = {
   args: { ...Primary.args, activePage: "Open", image: null },
 }
 
+export const NoLogoXL: Story = {
+  args: { ...Primary.args, activePage: "Open", image: null },
+  parameters: { viewport: { defaultViewport: "tailwindXL" } },
+}
+
+export const NoTitle: Story = {
+  args: { ...Primary.args, activePage: "Open", title: null },
+}
+
 export const TailwindXSWindow: Story = {
   args: Primary.args,
   parameters: { viewport: { defaultViewport: "tailwindXS" } },
@@ -66,3 +75,23 @@ export const Tailwind2XLWindow: Story = {
   args: Primary.args,
   parameters: { viewport: { defaultViewport: "tailwind2XL" } },
 }
+
+export const EmptyStrings: Story = {
+  args: {
+    title: "",
+    image: SiteTitleStories.siteTitleLogo,
+    activePage: "",
+    pages: [],
+  },
+}
+
+export const Nulls: Story = {
+  args: {
+    title: null,
+    image: null,
+    activePage: null,
+    pages: null,
+  },
+}
+
+export const NoArgs: Story = {}

packages/gatsby-theme-project-portal/src/components/Navbar.tsx

@@ -4,11 +4,11 @@ import { FaBars, FaTimes } from "react-icons/fa"
 import { ImageDataLike } from "gatsby-plugin-image"
 import { SiteTitle, NavbarItem } from "."
 
-interface NavbarProps {
-  title: string
+export interface NavbarProps {
+  title?: string
   activePage?: string
   image?: ImageDataLike
-  pages: {
+  pages?: {
     name: string
     link: string
     show: boolean
@@ -41,7 +41,7 @@ export const Navbar: FunctionComponent<NavbarProps> = ({
               {navbarOpen ? <FaTimes /> : <FaBars />}
             </button>
             <Link
-              className="block mx-4 my-3 xl:my-auto overflow-hidden text-nav text-black font-bold flex gap-4 items-center whitespace-nowrap"
+              className="block xl:min-h-full mx-4 my-3 xl:my-auto overflow-hidden text-nav text-black font-bold flex gap-4 items-center whitespace-nowrap"
               to="/"
             >
               <SiteTitle image={image} title={title} />
@@ -55,7 +55,7 @@ export const Navbar: FunctionComponent<NavbarProps> = ({
             id="example-navbar-danger"
           >
             <ul className="flex flex-col list-none xl:flex-row xl:ml-auto">
-              {pages.map(({ name, link, show }, i) =>
+              {pages?.map(({ name, link, show }, i) =>
                 show ? (
                   <Link
                     key={"nav" + i}

packages/gatsby-theme-project-portal/src/components/PageLayout.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { PageLayout } from "./PageLayout"
+import * as bottomBannerStories from "../components/BottomBanner.stories"
+import * as footerStories from "../components/Footer.stories"
+import * as navbarStories from "../components/Navbar.stories"
+
+const meta: Meta<typeof PageLayout> = {
+  component: PageLayout,
+  tags: ["autodocs"],
+}
+
+export default meta
+
+type Story = StoryObj<typeof PageLayout>
+
+export const Primary: Story = {
+  args: {
+    devBanner: { show: true },
+    navbar: navbarStories.Primary.args,
+    bottomBanner: bottomBannerStories.Primary.args,
+    footer: footerStories.Primary.args,
+  },
+}
+
+export const TailwindXSWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXS" } },
+}
+
+export const TailwindSMWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindSM" } },
+}
+
+export const TailwindMDWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindMD" } },
+}
+
+export const TailwindLGWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindLG" } },
+}
+
+export const TailwindXLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXL" } },
+}
+
+export const Tailwind2XLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwind2XL" } },
+}
+
+export const Nulls: Story = {
+  args: {
+    devBanner: { show: true },
+    navbar: navbarStories.Nulls.args,
+    bottomBanner: bottomBannerStories.Nulls.args,
+    footer: footerStories.Nulls.args,
+  },
+}
+
+export const NoArgs: Story = {}

packages/gatsby-theme-project-portal/src/components/PageLayout.tsx

@@ -0,0 +1,31 @@
+import React, { FunctionComponent, ReactNode } from "react"
+import { DevelopmentBanner } from "./DevelopmentBanner"
+import { Navbar, NavbarProps } from "./Navbar"
+import { BottomBanner, BottomBannerProps } from "./BottomBanner"
+import { Footer, FooterProps } from "./Footer"
+
+export interface PageLayoutProps {
+  children: ReactNode
+  devBanner?: { show?: boolean }
+  navbar?: NavbarProps
+  bottomBanner?: BottomBannerProps
+  footer?: FooterProps
+}
+
+export const PageLayout: FunctionComponent<PageLayoutProps> = ({
+  children,
+  devBanner,
+  navbar,
+  bottomBanner,
+  footer,
+}) => {
+  return (
+    <div className="w-full mx-0 bg-white border-0 xl:container xl:p-0 xl:mx-auto xl:border-l xl:border-r xl:border-gray-200 flex flex-col min-h-screen">
+      {devBanner?.show && <DevelopmentBanner />}
+      <Navbar {...navbar} />
+      <div className="flex-1">{children}</div>
+      <BottomBanner {...bottomBanner} />
+      <Footer {...footer} />
+    </div>
+  )
+}

packages/gatsby-theme-project-portal/src/components/ProjectTeam.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { ProjectTeam } from "./ProjectTeam"
 import * as ContactStories from "./Contact.stories"
-import { contactImage } from "./Story.utilities"
 
 const meta: Meta<typeof ProjectTeam> = {
   component: ProjectTeam,
@@ -16,7 +15,7 @@ export const Primary: Story = {
   args: {
     title: "The Project Team",
     contacts: [ContactStories.Primary.args, ContactStories.NoEmail.args],
-    defaultImage: contactImage,
+    defaultImage: ContactStories.contactImage,
   },
 }
 

packages/gatsby-theme-project-portal/src/components/SiteTitle.stories.tsx

@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react"
 import { SiteTitle } from "./SiteTitle"
 
 import { loadImage } from "./Story.utilities"
-import { IGatsbyImageData } from "gatsby-plugin-image"
 
 const meta: Meta<typeof SiteTitle> = {
   component: SiteTitle,
@@ -22,3 +21,19 @@ export const Primary: Story = {
     title: "The Site Title",
   },
 }
+
+export const Nulls: Story = {
+  args: {
+    image: null,
+    title: null,
+  },
+}
+
+export const EmptyString: Story = {
+  args: {
+    image: null,
+    title: "",
+  },
+}
+
+export const NoArgs: Story = {}

packages/gatsby-theme-project-portal/src/components/SiteTitle.tsx

@@ -2,8 +2,8 @@ import React, { FunctionComponent } from "react"
 import { GatsbyImage, getImage, ImageDataLike } from "gatsby-plugin-image"
 
 export interface SiteTitleProps {
-  image: ImageDataLike
-  title: string
+  image?: ImageDataLike
+  title?: string
 }
 
 export const SiteTitle: FunctionComponent<SiteTitleProps> = ({

packages/gatsby-theme-project-portal/src/components/index.tsx

@@ -30,3 +30,4 @@ export { Topics } from "./Topics"
 export { Accordion } from "./Accordion"
 export { KeyDate } from "./KeyDate"
 export { NavbarItem } from "./NavbarItem"
+export { PageLayout } from "./PageLayout"

packages/gatsby-theme-project-portal/src/layouts/Layout.stories.tsx

@@ -23,10 +23,13 @@ export const Primary: Story = {
     data: {
       site: {
         siteMetadata: {
-          title: "The Site Title",
           showDevBanner: true,
-          pages: NavbarStories.Primary.args.pages,
+
           staticText: {
+            navbar: {
+              title: "The Site Title",
+              pages: NavbarStories.Primary.args.pages,
+            },
             bottomBanner: BottomBannerStories.Primary.args,
             footer: FooterStories.Primary.args,
           },
@@ -70,3 +73,31 @@ export const Tailwind2XLWindow: Story = {
   args: Primary.args,
   parameters: { viewport: { defaultViewport: "tailwind2XL" } },
 }
+
+export const Nulls: Story = {
+  args: {
+    data: {
+      site: {
+        siteMetadata: {
+          showDevBanner: null,
+          staticText: {
+            navbar: { title: null, pages: [] },
+            bottomBanner: { text: null, link: null },
+            footer: {
+              copyright: null,
+              heading: { title: null, link: null },
+              links: [],
+            },
+          },
+        },
+      },
+      navbarLogo: null,
+      bottomBannerLogo: null,
+      footerLogo: null,
+    },
+    path: null,
+    children: null,
+  },
+}
+
+export const NoArgs: Story = {}