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

[hollandjg]

Prepare for handover to RENCI: split page layout components into two parts:

• new components/PageLayout – this handles all of the styling and has a simple interface which doesn't "know" anything about the graphQL schema
• layouts/Layout – this handles the gatsby-specific graphQL bits, and uses components/PageLayout for the actual rendering

Additional simplifications:

• Move navbar config into the staticText block of the siteMetadata, to be consistent with the other staticText pieces

Drive-by-improvements, required for testing of the updated components:

• Make components associated with Layout accept nulls and empty values for all of their arguments. This is required to allow the PageLayout to accept null arguments. This fixes the defaults site, which up until now had not reliably rendered anything in develop mode on some browsers (Safari, for instance).
• Add more tests with empty and null values

[netlify]

✅ Deploy Preview for gatsby-theme-project-portal-defaults ready!

Name	Link
🔨 Latest commit	91e1d0a
🔍 Latest deploy log	https://app.netlify.com/sites/gatsby-theme-project-portal-defaults/deploys/65451753f343280008f662c9
😎 Deploy Preview	https://deploy-preview-639--gatsby-theme-project-portal-defaults.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for gatsby-theme-project-portal-ex-site ready!

Name	Link
🔨 Latest commit	91e1d0a
🔍 Latest deploy log	https://app.netlify.com/sites/gatsby-theme-project-portal-ex-site/deploys/65451753da476a00088d4c30
😎 Deploy Preview	https://deploy-preview-639--gatsby-theme-project-portal-ex-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for project-portal-storybook ready!

Name	Link
🔨 Latest commit	91e1d0a
🔍 Latest deploy log	https://app.netlify.com/sites/project-portal-storybook/deploys/65451753dd2e3c00081b7a9c
😎 Deploy Preview	https://deploy-preview-639--project-portal-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

Note: This comment gets updated with every commit

Git SHA: 91e1d0afcb47ea25dd8969e5cc409212a790da92

Site: example-site

Pa11y test status: PASS

 {
    "total": 20,
    "passes": 20,
    "errors": 0,
    "results": {
        "http://localhost:9000/project/completed-project-nodate/": [],
        "http://localhost:9000/project/completed-project/": [],
        "http://localhost:9000/project/completed-project2/": [],
        "http://localhost:9000/project/ongoing-project-nodate/": [],
        "http://localhost:9000/project/ongoing-project/": [],
        "http://localhost:9000/project/ongoing-project2/": [],
        "http://localhost:9000/project/open-project-2/": [],
        "http://localhost:9000/project/open-project-nodate/": [],
        "http://localhost:9000/project/open-project/": [],
        "http://localhost:9000/project/open-project3/": [],
        "http://localhost:9000/project/open-project4/": [],
        "http://localhost:9000/project/open-project5/": [],
        "http://localhost:9000/project/open-project6/": [],
        "http://localhost:9000/completed/": [],
        "http://localhost:9000/": [],
        "http://localhost:9000/open/": [],
        "http://localhost:9000/ongoing/": [],
        "http://localhost:9000/about/": [],
        "http://localhost:9000/contact/": [],
        "http://localhost:9000/contact/thank-you/": []
    }
}
 

[jashlu]

Note for Navbar: if logo doesn't exist, the site title is no longer aligned with the page links Do we need both Page Layout and Layout?

!! For the Page Layout, the small window still shows the logo, so I don't think this is working as expected

!! For the Project Team, the contact pictures aren't showing up in the XL window

!! For the Page Layout, the small window still shows the logo, so I don't think this is working as expected

We may want to revisit the styling for the SiteTitle, which is bundled with the expand navbar icon in the smaller screens. Also it may be hard to get it aligned with the page links, because the page links are slightly off-center, caused by the underline that could show up under each link

[hollandjg]

Thanks for the feedback, @hetd54 and @jashlu ! I'll take another look at this.

[hollandjg]

Note for Navbar: if logo doesn't exist, the site title is no longer aligned with the page links

• Fix alignment if image is missing

[hollandjg]

Do we need both Page Layout and Layout?

Good question. I'll see if I can convince you.

The layouts/Layout handles the graphql bit and converts the data { site { siteMetadata { staticText { navBar, bottomBanner, footer } } } } into { navBar, bottomBanner, footer }.

Having that simpler format means that testing the PageLayout is much simpler – the stories have really simple arguments in comparison to the layouts/Layout stories.

It also means that the components/PageLayout doesn't care at all about the graphql and the structure of the data, making it a bit simpler.

Is that enough to make it a worthwhile abstraction for you, or is it just a pain?

[hollandjg]

!! For the Page Layout, the small window still shows the logo, so I don't think this is working as expected

I think this is where you mean:

Is this the correct behavior? I think I'm missing something.

[hollandjg]

!! For the Project Team, the contact pictures aren't showing up in the XL window

Did you mean the XS? Because this is what I'm seeing:

This looks like a feature unrelated to the changes I made. This applies to the Contact component for XS screen sizes.

... and it arises because by default the images are hidden (hidden on 30)

[hollandjg]

We may want to revisit the styling for the SiteTitle, which is bundled with the expand navbar icon in the smaller screens. Also it may be hard to get it aligned with the page links, because the page links are slightly off-center, caused by the underline that could show up under each link

Part of this might be to merge the Navbar into a single component – makes it easier to format. I've done that here: #679

[hetd54]

Do we need both Page Layout and Layout?

Good question. I'll see if I can convince you.

The layouts/Layout handles the graphql bit and converts the data { site { siteMetadata { staticText { navBar, bottomBanner, footer } } } } into { navBar, bottomBanner, footer }.

Having that simpler format means that testing the PageLayout is much simpler – the stories have really simple arguments in comparison to the layouts/Layout stories.

It also means that the components/PageLayout doesn't care at all about the graphql and the structure of the data, making it a bit simpler.

Is that enough to make it a worthwhile abstraction for you, or is it just a pain?

Yep, I'm convinced!

[hetd54]

!! For the Project Team, the contact pictures aren't showing up in the XL window

Did you mean the XS? Because this is what I'm seeing:

Nope, for some reason it wasn't showing on XL screens, but it's fine now? Maybe storybook just had a hiccup.

[hetd54]

Beautiful!! Thanks for fixing some old style things too <3