Merge pull request #559 from thepolicylab-projectportals/refactor/uni…

…fy-image-interfaces

refactor: unify image interfaces

packages/example-site/content/card-page/completed.json

@@ -7,5 +7,5 @@
   "filterOn": {
     "status": ["completed"]
   },
-  "image": ""
+  "image": "background.jpg"
 }

packages/example-site/content/card-page/index.json

@@ -7,5 +7,5 @@
   "filterOn": {
     "status": ["open", "ongoing", "completed"]
   },
-  "image": "open.jpg"
+  "image": "background.jpg"
 }

packages/example-site/content/card-page/ongoing.json

@@ -7,5 +7,5 @@
   "filterOn": {
     "status": ["ongoing"]
   },
-  "image": "ongoing.jpg"
+  "image": "background.jpg"
 }

packages/example-site/content/card-page/open.json

@@ -7,5 +7,5 @@
   "filterOn": {
     "status": ["open"]
   },
-  "image": "open.jpg"
+  "image": "background.jpg"
 }

packages/example-site/content/image/README.md

@@ -0,0 +1,5 @@
+Example theme image files:
+
+- background.jpg
+  - from https://commons.wikimedia.org/wiki/File:NRCSCT01022(15456)(NRCS_Photo_Gallery).jpg
+  - Attribution: USDA Natural Resources Conservation Service

packages/example-site/content/page/about.json

@@ -55,5 +55,5 @@
     }
   ],
   "accessibility": "We are committed to making the Research Partnerships Portal accessible for all visitors, and we welcome your feedback on the site. If you encounter any accessibility barriers while using the Portal, please contact Jenna Wallace (email: [[email protected]](mailto:[email protected]), office phone number: 210-207-7930) for assistance.\n\nWe are currently working to make the Research Partnerships Portal fully compliant with requirements in the Web Content Accessibility Guidelines’ A and AA standard. Our final steps to meet WCAG 2.1 A and AA criteria are to fulfill 2.4.2 Page Titled, which will make pages easier to differentiate for screen reader users, 2.5.3 Label in Name, which will make project cards more descriptive for screen reader users, and 2.4.5 Multiple Ways, which will make it easier for all users to find the content most relevant to them.\nFor more detailed descriptions of how the Research Partnerships Portal meets WCAG criteria, please see our full [Accessibility Conformance Report](https://drive.google.com/file/d/1C9ohi1t6N2yFsaVW_xcKsexflZymh_82/view).",
-  "image": "about.jpg"
+  "image": "background.jpg"
 }

packages/example-site/content/page/contact.json

@@ -2,5 +2,5 @@
   "templateKey": "ContactPage",
   "title": "Want to talk to the Office of Innovation? We'd love to hear from you!",
   "lede": "Our team is happy to answer questions about the partnerships pilot, project-specific questions, general questions about working with the City of San Antonio, and ideas for how we can improve this site.",
-  "image": "contact.jpg"
+  "image": "background.jpg"
 }

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

@@ -1,13 +1,20 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { BottomBanner } from "./BottomBanner"
-
-import { emptyGatsbyImageData } from "./Story.utilities"
+import { loadImage } from "./Story.utilities"
 
 const meta: Meta<typeof BottomBanner> = {
   component: BottomBanner,
   tags: ["autodocs"],
+  includeStories: /^[A-Z]/,
 }
 
+export const bottomBannerLogo = loadImage(
+  "image/ccv-logo.png",
+  160,
+  83,
+  "fixed"
+)
+
 export default meta
 
 type Story = StoryObj<typeof BottomBanner>
@@ -17,6 +24,6 @@ export const Primary: Story = {
     text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ",
     link: "https://ccv.brown.edu",
     linkId: null,
-    image: emptyGatsbyImageData,
+    image: bottomBannerLogo,
   },
 }

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

@@ -1,28 +1,37 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { Contact } from "./Contact"
-import { emptyGatsbyImageData } from "./Story.utilities"
+import { loadImage } from "./Story.utilities"
 
 const meta: Meta<typeof Contact> = {
   component: Contact,
   tags: ["autodocs"],
+  includeStories: /^[A-Z]/,
 }
 
 export default meta
 
 type Story = StoryObj<typeof Contact>
 
+export const contactImage = loadImage("image/torso.png", 100, 100, "fixed")
+
+export const contactImageYogi = loadImage("image/yogi.jpg", 100, 100, "fixed")
+
 export const Primary: Story = {
   args: {
     name: "Contact Name",
     title: "Title",
     employer: "Employer",
     email: "[email protected]",
     showEmail: true,
-    image: emptyGatsbyImageData,
-    defaultImage: emptyGatsbyImageData,
+    image: contactImage,
+    defaultImage: contactImageYogi,
   },
 }
 
 export const NoEmail: Story = {
   args: { ...Primary.args, showEmail: false },
 }
+
+export const NoImage: Story = {
+  args: { ...Primary.args, image: null },
+}

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

@@ -1,13 +1,22 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { Footer } from "./Footer"
 
-import { emptyGatsbyImageData } from "./Story.utilities"
+import { IGatsbyImageData } from "gatsby-plugin-image"
+import { loadImage } from "./Story.utilities"
 
 const meta: Meta<typeof Footer> = {
   component: Footer,
   tags: ["autodocs"],
+  includeStories: /^[A-Z]/,
 }
 
+export const footerLogo: IGatsbyImageData = loadImage(
+  "image/logo-wide.png",
+  129,
+  64,
+  "fixed"
+)
+
 export default meta
 
 type Story = StoryObj<typeof Footer>
@@ -29,10 +38,14 @@ export const Primary: Story = {
         link: "https://brown.edu",
       },
     ],
-    image: { imageData: emptyGatsbyImageData, altText: "" },
+    image: { imageData: footerLogo, altText: "Brown Logo" },
   },
 }
 
+export const ImageNoHeading: Story = {
+  args: { ...Primary.args, heading: { title: "", link: "" } },
+}
+
 export const Empty: Story = {
   args: { links: [], heading: { title: "", link: "" }, copyright: "" },
 }

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { HeaderWithImage } from "./HeaderWithImage"
+import { loadImage } from "./Story.utilities"
 
 const meta: Meta<typeof HeaderWithImage> = {
   component: HeaderWithImage,
@@ -16,6 +17,6 @@ export const Primary: Story = {
     lede:
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor" +
       " incididunt ut labore et dolore magna aliqua. ",
-    imageSrc: "image/background.jpg",
+    image: loadImage("image/background.jpg"),
   },
 }

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

@@ -1,22 +1,23 @@
-import { withPrefix } from "gatsby"
+import { withPrefix, graphql } from "gatsby"
 import React from "react"
 import { MarkdownText } from "../components"
+import { getSrc, ImageDataLike } from "gatsby-plugin-image"
 interface HeaderWithImageProps {
   title: string
   lede: string
-  imageSrc: string
+  image: ImageDataLike
 }
 
 export const HeaderWithImage = ({
   title,
   lede,
-  imageSrc,
+  image,
 }: HeaderWithImageProps) => {
   return (
     <div
       className="px-4 py-4 mx-0 lg:mb-16 bg-white md:px-8 md:py-12 xl:px-16 xl:container sm:min-h-15rem"
       style={{
-        background: `url(${withPrefix(imageSrc)})`,
+        background: `url(${withPrefix(getSrc(image))})`,
         backgroundRepeat: "no-repeat",
         backgroundSize: "auto",
         backgroundPositionY: "center",
@@ -38,3 +39,11 @@ export const HeaderWithImage = ({
     </div>
   )
 }
+
+export const query = graphql`
+  fragment HeaderWithImageBackground on File {
+    childImageSharp {
+      gatsbyImageData(width: 1563)
+    }
+  }
+`

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { MainContact } from "./MainContact"
-import { emptyGatsbyImageData } from "./Story.utilities"
+import { contactImage, contactImageYogi } from "./Contact.stories"
 
 const meta: Meta<typeof MainContact> = {
   component: MainContact,
@@ -19,8 +19,8 @@ export const Primary: Story = {
     email: "[email protected]",
     projectInterestLink: "https://ccv.brown.edu/",
     status: "open",
-    image: emptyGatsbyImageData,
-    defaultImage: emptyGatsbyImageData,
+    image: contactImage,
+    defaultImage: contactImageYogi,
     openText: "Open project – get involved.",
     ongoingText: "Ongoing project – watch us do something awesome.",
     completeText: "Completed project – look at what we did!",

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

@@ -5,6 +5,7 @@ import * as SiteTitleStories from "./SiteTitle.stories"
 const meta: Meta<typeof Navbar> = {
   component: Navbar,
   tags: ["autodocs"],
+  includeStories: /^[A-Z]/,
 }
 
 export default meta
@@ -13,7 +14,8 @@ type Story = StoryObj<typeof Navbar>
 
 export const Primary: Story = {
   args: {
-    ...SiteTitleStories.Primary.args,
+    title: "The Site Title",
+    image: SiteTitleStories.siteTitleLogo,
     activePage: "Home",
     pages: [
       { name: "Home", link: "/", show: true },
@@ -30,3 +32,7 @@ export const Primary: Story = {
 export const OpenPageIsActive: Story = {
   args: { ...Primary.args, activePage: "/open/" },
 }
+
+export const NoLogo: Story = {
+  args: { ...Primary.args, activePage: "Open", image: null },
+}

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

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { ProjectDetail } from "./ProjectDetail"
-import * as ContactStories from "./Contact.stories"
 import * as ProjectTeamStories from "./ProjectTeam.stories"
 import { emptyGatsbyImageData } from "./Story.utilities"
+import { contactImage, contactImageYogi } from "./Contact.stories"
 
 const meta: Meta<typeof ProjectDetail> = {
   component: ProjectDetail,
@@ -36,7 +36,7 @@ export const Primary: Story = {
       title: "Title",
       employer: "Employer",
       email: "[email protected]",
-      image: emptyGatsbyImageData,
+      image: contactImageYogi,
     },
     openText: "Are you interested in collaborating?",
     ongoingText: "This project is ongoing.",
@@ -53,6 +53,8 @@ export const Primary: Story = {
     agency: "Sample Agency",
     lastModified: new Date("2022-05-27T16:34:04.000Z"),
     topics: [{ slug: "test", title: "Test" }],
+
+    defaultContactImage: contactImage,
   },
 }
 
@@ -79,7 +81,6 @@ export const Minimum: Story = {
       title: "Title",
       employer: "Employer",
       email: "[email protected]",
-      image: emptyGatsbyImageData,
     },
 
     status: "open",

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { ProjectPage } from "./ProjectPage"
 import * as CardsStories from "./Cards.stories"
+import { loadImage } from "./Story.utilities"
 
 const meta: Meta<typeof ProjectPage> = {
   component: ProjectPage,
@@ -20,6 +21,6 @@ export const Primary: Story = {
       ...CardsStories.Primary.args.nodes,
     ],
     sortOptions: ["created", "opportunityCloses", "startDate", "endDate"],
-    bgImage: "image/background.jpg",
+    image: loadImage("image/background.jpg"),
   },
 }

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

@@ -6,6 +6,7 @@ import { ForwardIcon } from "./ForwardIcon"
 import Select, { MultiValue } from "react-select"
 import * as JsSearch from "js-search"
 import { SearchBar } from "./SearchBar"
+import { ImageDataLike } from "gatsby-plugin-image"
 
 function customSort(dateField: string, sortAscending: boolean) {
   return function (a, b) {
@@ -40,15 +41,15 @@ export interface ProjectPageProps {
   lede: string
   sortOptions: [...any]
   allProjects: CardProps[]
-  bgImage: string
+  image: ImageDataLike
 }
 
 export const ProjectPage = ({
   title,
   allProjects,
   lede,
   sortOptions,
-  bgImage,
+  image,
 }: ProjectPageProps) => {
   const getTopics = (project: CardProps[]): CardProps[] => {
     let tempFilterOptions = []
@@ -234,7 +235,7 @@ export const ProjectPage = ({
   return (
     <>
       <header>
-        <HeaderWithImage title={title} imageSrc={bgImage} lede={lede} />
+        <HeaderWithImage title={title} image={image} lede={lede} />
       </header>
       <div className="relative">
         <div ref={scrollToRef} className="absolute -top-100px"></div>

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

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

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

@@ -1,20 +1,24 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { SiteTitle } from "./SiteTitle"
 
-import { emptyGatsbyImageData } from "./Story.utilities"
+import { loadImage } from "./Story.utilities"
+import { IGatsbyImageData } from "gatsby-plugin-image"
 
 const meta: Meta<typeof SiteTitle> = {
   component: SiteTitle,
   tags: ["autodocs"],
+  includeStories: /^[A-Z]/,
 }
 
+export const siteTitleLogo = loadImage("image/logo-square.png", 64, 74, "fixed")
+
 export default meta
 
 type Story = StoryObj<typeof SiteTitle>
 
 export const Primary: Story = {
   args: {
-    image: emptyGatsbyImageData,
+    image: siteTitleLogo,
     title: "The Site Title",
   },
 }