@nypl/design-system-react-components 0.27.0 → 0.28.0

package/src/components/Hero/Hero.test.tsx

@@ -4,8 +4,6 @@ import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import Heading from "../Heading/Heading";
-import { HeadingLevels } from "../Heading/HeadingTypes";
-import { HeroTypes } from "./HeroTypes";
 import Hero from "./Hero";
 
 export const subHeaderText = (
@@ -20,22 +18,18 @@ export const otherSubHeaderText =
   "With 92 locations across the Bronx, Manhattan, and Staten Island, The New " +
   "York Public Library is an essential part of neighborhoods across the city. " +
   "Visit us today.";
-const imageAlt = "Image example";
-const imageSrc = "https://placeimg.com/800/400/animals";
+const imageProps = {
+  alt: "Image example",
+  src: "https://placeimg.com/800/400/animals",
+};
 
 describe("Hero", () => {
   describe("axe accessbility tests", () => {
     it("passes for type Primary", async () => {
       const { container } = render(
         <Hero
-          heroType={HeroTypes.Primary}
-          heading={
-            <Heading
-              level={HeadingLevels.One}
-              id="a11y-hero"
-              text="Hero Primary"
-            />
-          }
+          heroType="primary"
+          heading={<Heading level="one" id="a11y-hero" text="Hero Primary" />}
           subHeaderText="Example Subtitle"
           backgroundImageSrc="https://placeimg.com/1600/800/arch"
         />
@@ -46,16 +40,9 @@ describe("Hero", () => {
     it("passes for type Secondary", async () => {
       const { container } = render(
         <Hero
-          heroType={HeroTypes.Secondary}
-          heading={
-            <Heading
-              level={HeadingLevels.One}
-              id="a11y-hero"
-              text="Hero Secondary"
-            />
-          }
-          imageAlt={imageAlt}
-          imageSrc={imageSrc}
+          heroType="secondary"
+          heading={<Heading level="one" id="a11y-hero" text="Hero Secondary" />}
+          imageProps={imageProps}
           subHeaderText={subHeaderText}
         />
       );
@@ -65,14 +52,8 @@ describe("Hero", () => {
     it("passes for type Tertiary", async () => {
       const { container } = render(
         <Hero
-          heroType={HeroTypes.Tertiary}
-          heading={
-            <Heading
-              level={HeadingLevels.One}
-              id="a11y-hero"
-              text="Hero Tertiary"
-            />
-          }
+          heroType="tertiary"
+          heading={<Heading level="one" id="a11y-hero" text="Hero Tertiary" />}
           subHeaderText={otherSubHeaderText}
         />
       );
@@ -83,16 +64,9 @@ describe("Hero", () => {
       const { container } = render(
         <Hero
           backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
-          heroType={HeroTypes.Campaign}
-          heading={
-            <Heading
-              level={HeadingLevels.One}
-              id="a11y-hero"
-              text="Hero Campaign"
-            />
-          }
-          imageAlt={imageAlt}
-          imageSrc={imageSrc}
+          heroType="campaign"
+          heading={<Heading level="one" id="a11y-hero" text="Hero Campaign" />}
+          imageProps={imageProps}
           subHeaderText={otherSubHeaderText}
         />
       );
@@ -102,9 +76,8 @@ describe("Hero", () => {
     it("passes for type FiftyFifty", async () => {
       const { container } = render(
         <Hero
-          heroType={HeroTypes.FiftyFifty}
-          imageAlt={imageAlt}
-          imageSrc={imageSrc}
+          heroType="fiftyFifty"
+          imageProps={imageProps}
           subHeaderText={otherSubHeaderText}
         />
       );
@@ -115,14 +88,8 @@ describe("Hero", () => {
   it("renders Primary Hero", () => {
     render(
       <Hero
-        heroType={HeroTypes.Primary}
-        heading={
-          <Heading
-            level={HeadingLevels.One}
-            id="primary-hero"
-            text="Hero Primary"
-          />
-        }
+        heroType="primary"
+        heading={<Heading level="one" id="primary-hero" text="Hero Primary" />}
         subHeaderText="Example Subtitle"
         backgroundImageSrc="https://placeimg.com/1600/800/arch"
       />
@@ -139,16 +106,11 @@ describe("Hero", () => {
   it("renders Secondary Hero", () => {
     render(
       <Hero
-        heroType={HeroTypes.Secondary}
+        heroType="secondary"
         heading={
-          <Heading
-            level={HeadingLevels.One}
-            id="secondary-hero"
-            text="Hero Secondary"
-          />
+          <Heading level="one" id="secondary-hero" text="Hero Secondary" />
         }
-        imageAlt={imageAlt}
-        imageSrc={imageSrc}
+        imageProps={imageProps}
         subHeaderText={subHeaderText}
       />
     );
@@ -165,13 +127,9 @@ describe("Hero", () => {
   it("renders Tertiary Hero", () => {
     render(
       <Hero
-        heroType={HeroTypes.Tertiary}
+        heroType="tertiary"
         heading={
-          <Heading
-            level={HeadingLevels.One}
-            id="tertiary-hero"
-            text="Hero Tertiary"
-          />
+          <Heading level="one" id="tertiary-hero" text="Hero Tertiary" />
         }
         subHeaderText={otherSubHeaderText}
       />
@@ -186,16 +144,11 @@ describe("Hero", () => {
     render(
       <Hero
         backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
-        heroType={HeroTypes.Campaign}
+        heroType="campaign"
         heading={
-          <Heading
-            level={HeadingLevels.One}
-            id="campaign-hero"
-            text="Hero Campaign"
-          />
+          <Heading level="one" id="campaign-hero" text="Hero Campaign" />
         }
-        imageAlt={imageAlt}
-        imageSrc={imageSrc}
+        imageProps={imageProps}
         subHeaderText={otherSubHeaderText}
       />
     );
@@ -216,9 +169,8 @@ describe("Hero", () => {
   it("renders Fifty-Fifty Hero", () => {
     render(
       <Hero
-        heroType={HeroTypes.FiftyFifty}
-        imageAlt={imageAlt}
-        imageSrc={imageSrc}
+        heroType="fiftyFifty"
+        imageProps={imageProps}
         subHeaderText={otherSubHeaderText}
       />
     );
@@ -234,10 +186,10 @@ describe("Hero", () => {
   it("renders custom background and foreground colors for all but the Secondary type", () => {
     const { rerender } = render(
       <Hero
-        heroType={HeroTypes.Primary}
+        heroType="primary"
         heading={
           <Heading
-            level={HeadingLevels.One}
+            level="one"
             id="custom-colors-hero"
             text="Hero with Custom Colors"
           />
@@ -257,9 +209,8 @@ describe("Hero", () => {
       <Hero
         backgroundColor="#654321"
         foregroundColor="#123456"
-        heroType={HeroTypes.FiftyFifty}
-        imageAlt={imageAlt}
-        imageSrc={imageSrc}
+        heroType="fiftyFifty"
+        imageProps={imageProps}
         subHeaderText={otherSubHeaderText}
       />
     );
@@ -273,16 +224,11 @@ describe("Hero", () => {
       <Hero
         backgroundColor="#654321"
         foregroundColor="#123456"
-        heroType={HeroTypes.Secondary}
+        heroType="secondary"
         heading={
-          <Heading
-            level={HeadingLevels.One}
-            id="secondary-hero"
-            text="Hero Secondary"
-          />
+          <Heading level="one" id="secondary-hero" text="Hero Secondary" />
         }
-        imageAlt={imageAlt}
-        imageSrc={imageSrc}
+        imageProps={imageProps}
         subHeaderText={subHeaderText}
       />
     );
@@ -293,106 +239,92 @@ describe("Hero", () => {
     );
   });
 
-  it("logs a warning if `imageSrc` prop is passed but not `imageAlt`", () => {
+  it("logs a warning if `imageProps.src` prop is passed but not `imageProps.alt`", () => {
     const warn = jest.spyOn(console, "warn");
     render(
       <Hero
         backgroundImageSrc="https://placeimg.com/1600/800/arch"
-        heroType={HeroTypes.Primary}
-        imageSrc={imageSrc}
+        heroType="primary"
+        imageProps={{ src: imageProps.src }}
       />
     );
 
     expect(warn).toHaveBeenCalledWith(
-      `NYPL Reservoir: The "imageSrc" prop was passed but the "imageAlt" props was not. This will make the rendered image inaccessible.`
+      `NYPL Reservoir Hero: The "imageProps.src" prop was passed but the "imageProps.alt" props was not. This will make the rendered image inaccessible.`
     );
   });
 
   it("renders Primary Hero with warnings in browser console", () => {
     const warn = jest.spyOn(console, "warn");
     const heading = (
-      <Heading
-        level={HeadingLevels.One}
-        id="hero-errors"
-        text="Hero with Error Warnings"
-      />
-    );
-    const { rerender } = render(
-      <Hero heroType={HeroTypes.Primary} heading={heading} />
+      <Heading level="one" id="hero-errors" text="Hero with Error Warnings" />
     );
+    const { rerender } = render(<Hero heroType="primary" heading={heading} />);
     expect(warn).toHaveBeenCalledWith(
       "NYPL Reservoir Hero: It is recommended to use the `backgroundImageSrc` " +
-        "prop for the `HeroTypes.Primary` `heroType` variant."
+        "prop for the `'primary'` `heroType` variant."
     );
 
     rerender(
       <Hero
         backgroundImageSrc="https://placeimg.com/1600/800/arch"
-        heroType={HeroTypes.Primary}
+        heroType="primary"
         heading={heading}
-        imageAlt={imageAlt}
-        imageSrc={imageSrc}
+        imageProps={imageProps}
       />
     );
     expect(warn).toHaveBeenCalledWith(
-      "NYPL Reservoir Hero: The `imageSrc` and `imageAlt` props have been passed, " +
-        "but the `HeroTypes.Primary` `heroType` variant will not use it."
+      "NYPL Reservoir Hero: The `imageProps.src` and `imageProps.alt` props have been passed, " +
+        "but the `'primary'` `heroType` variant will not use it."
     );
   });
 
   it("renders Secondary Hero with warnings in browser console", () => {
     const warn = jest.spyOn(console, "warn");
     const heading = (
-      <Heading
-        level={HeadingLevels.One}
-        id="hero-errors"
-        text="Hero with Error Warnings"
-      />
+      <Heading level="one" id="hero-errors" text="Hero with Error Warnings" />
     );
     const { rerender } = render(
       <Hero
-        heroType={HeroTypes.Secondary}
+        heroType="secondary"
         heading={heading}
-        imageAlt={imageAlt}
-        imageSrc={imageSrc}
+        imageProps={imageProps}
         locationDetails={<>Some location details.</>}
         subHeaderText={subHeaderText}
       />
     );
     expect(warn).toHaveBeenCalledWith(
       "NYPL Reservoir Hero: The `locationDetails` prop should only be used " +
-        "with the `HeroTypes.Primary` `heroType` variant."
+        "with the `'primary'` `heroType` variant."
     );
 
     rerender(
       <Hero
         backgroundImageSrc="https://placeimg.com/1600/800/arch"
-        heroType={HeroTypes.Secondary}
+        heroType="secondary"
         heading={heading}
-        imageAlt={imageAlt}
-        imageSrc={imageSrc}
+        imageProps={imageProps}
         subHeaderText={subHeaderText}
       />
     );
     expect(warn).toHaveBeenCalledWith(
       "NYPL Reservoir Hero: The `backgroundImageSrc` prop has been passed, " +
-        "but the `HeroTypes.Secondary` `heroType` variant will not use it."
+        "but the `'secondary'` `heroType` variant will not use it."
     );
 
     rerender(
       <Hero
         backgroundColor="#654321"
         foregroundColor="#123456"
-        heroType={HeroTypes.Secondary}
+        heroType="secondary"
         heading={heading}
-        imageAlt={imageAlt}
-        imageSrc={imageSrc}
+        imageProps={imageProps}
         subHeaderText={subHeaderText}
       />
     );
     expect(warn).toHaveBeenCalledWith(
       "NYPL Reservoir Hero: The `foregroundColor` and/or `backgroundColor` " +
-        "props have been passed, but the `HeroTypes.Secondary` `heroType` " +
+        "props have been passed, but the `'secondary'` `heroType` " +
         "variant will not use them."
     );
   });
@@ -400,15 +332,11 @@ describe("Hero", () => {
   it("renders Tertiary Hero with warnings in browser console", () => {
     const warn = jest.spyOn(console, "warn");
     const heading = (
-      <Heading
-        level={HeadingLevels.One}
-        id="hero-errors"
-        text="Hero with Error Warnings"
-      />
+      <Heading level="one" id="hero-errors" text="Hero with Error Warnings" />
     );
     const { rerender } = render(
       <Hero
-        heroType={HeroTypes.Tertiary}
+        heroType="tertiary"
         heading={heading}
         subHeaderText={otherSubHeaderText}
         locationDetails={<>Some location details.</>}
@@ -416,33 +344,32 @@ describe("Hero", () => {
     );
     expect(warn).toHaveBeenCalledWith(
       "NYPL Reservoir Hero: The `locationDetails` prop should only be used " +
-        "with the `HeroTypes.Primary` `heroType` variant."
+        "with the `'primary'` `heroType` variant."
     );
 
     rerender(
       <Hero
-        heroType={HeroTypes.Tertiary}
+        heroType="tertiary"
         heading={heading}
-        imageAlt={imageAlt}
-        imageSrc={imageSrc}
+        imageProps={imageProps}
         subHeaderText={otherSubHeaderText}
       />
     );
     expect(warn).toHaveBeenCalledWith(
-      "NYPL Reservoir Hero: The `HeroTypes.Tertiary` `heroType` variant hero " +
+      "NYPL Reservoir Hero: The `'tertiary'` `heroType` variant hero " +
         "will not use any of the image props."
     );
 
     rerender(
       <Hero
         backgroundImageSrc="https://placeimg.com/1600/800/arch"
-        heroType={HeroTypes.Tertiary}
+        heroType="tertiary"
         heading={heading}
         subHeaderText={otherSubHeaderText}
       />
     );
     expect(warn).toHaveBeenCalledWith(
-      "NYPL Reservoir Hero: The `HeroTypes.Tertiary` `heroType` variant hero " +
+      "NYPL Reservoir Hero: The `'tertiary'` `heroType` variant hero " +
         "will not use any of the image props."
     );
   });
@@ -450,47 +377,41 @@ describe("Hero", () => {
   it("renders Campaign Hero with warnings in browser console", () => {
     const warn = jest.spyOn(console, "warn");
     const heading = (
-      <Heading
-        level={HeadingLevels.One}
-        id="hero-errors"
-        text="Hero with Error Warnings"
-      />
+      <Heading level="one" id="hero-errors" text="Hero with Error Warnings" />
     );
     const { rerender } = render(
       <Hero
         backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
-        heroType={HeroTypes.Campaign}
+        heroType="campaign"
         heading={heading}
-        imageAlt={imageAlt}
-        imageSrc={imageSrc}
+        imageProps={imageProps}
         locationDetails={<>Some location details.</>}
         subHeaderText={otherSubHeaderText}
       />
     );
     expect(warn).toHaveBeenCalledWith(
       "NYPL Reservoir Hero: The `locationDetails` prop should only be used " +
-        "with the `HeroTypes.Primary` `heroType` variant."
+        "with the `'primary'` `heroType` variant."
     );
 
     rerender(
       <Hero
-        heroType={HeroTypes.Campaign}
+        heroType="campaign"
         heading={heading}
-        imageAlt={imageAlt}
-        imageSrc={imageSrc}
+        imageProps={imageProps}
         subHeaderText={otherSubHeaderText}
         locationDetails={<>Some location details.</>}
       />
     );
     expect(warn).toHaveBeenCalledWith(
       "NYPL Reservoir Hero: It is recommended to use both the " +
-        "`backgroundImageSrc` and `imageSrc` props for the `HeroTypes.Campaign` " +
+        "`backgroundImageSrc` and `imageProps.src` props for the `'campaign'` " +
         "`heroType` variant."
     );
 
     rerender(
       <Hero
-        heroType={HeroTypes.Campaign}
+        heroType="campaign"
         heading={heading}
         subHeaderText={otherSubHeaderText}
         backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
@@ -499,7 +420,7 @@ describe("Hero", () => {
     );
     expect(warn).toHaveBeenCalledWith(
       "NYPL Reservoir Hero: It is recommended to use both the " +
-        "`backgroundImageSrc` and `imageSrc` props for the `HeroTypes.Campaign` " +
+        "`backgroundImageSrc` and `imageProps.src` props for the `'campaign'` " +
         "`heroType` variant."
     );
   });
@@ -508,30 +429,28 @@ describe("Hero", () => {
     const warn = jest.spyOn(console, "warn");
     const { rerender } = render(
       <Hero
-        heroType={HeroTypes.FiftyFifty}
+        heroType="fiftyFifty"
         subHeaderText={otherSubHeaderText}
-        imageAlt={imageAlt}
-        imageSrc={imageSrc}
+        imageProps={imageProps}
         locationDetails={<>Some location details.</>}
       />
     );
     expect(warn).toHaveBeenCalledWith(
       "NYPL Reservoir Hero: The `locationDetails` prop should only be used " +
-        "with the `HeroTypes.Primary` `heroType` variant."
+        "with the `'primary'` `heroType` variant."
     );
 
     rerender(
       <Hero
         backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
-        heroType={HeroTypes.FiftyFifty}
-        imageAlt={imageAlt}
-        imageSrc={imageSrc}
+        heroType="fiftyFifty"
+        imageProps={imageProps}
         subHeaderText={otherSubHeaderText}
       />
     );
     expect(warn).toHaveBeenCalledWith(
       "NYPL Reservoir Hero: The `backgroundImageSrc` prop has been passed, " +
-        "but the `HeroTypes.FiftyFifty` `heroType` variant hero will not use it."
+        "but the `'fiftyFifty'` `heroType` variant hero will not use it."
     );
   });
 
@@ -539,13 +458,9 @@ describe("Hero", () => {
     const primary = renderer
       .create(
         <Hero
-          heroType={HeroTypes.Primary}
+          heroType="primary"
           heading={
-            <Heading
-              level={HeadingLevels.One}
-              id="primary-hero"
-              text="Hero Primary"
-            />
+            <Heading level="one" id="primary-hero" text="Hero Primary" />
           }
           subHeaderText="Example Subtitle"
           backgroundImageSrc="https://placeimg.com/1600/800/arch"
@@ -555,16 +470,11 @@ describe("Hero", () => {
     const secondary = renderer
       .create(
         <Hero
-          heroType={HeroTypes.Secondary}
+          heroType="secondary"
           heading={
-            <Heading
-              level={HeadingLevels.One}
-              id="secondary-hero"
-              text="Hero Secondary"
-            />
+            <Heading level="one" id="secondary-hero" text="Hero Secondary" />
           }
-          imageAlt={imageAlt}
-          imageSrc={imageSrc}
+          imageProps={imageProps}
           subHeaderText={subHeaderText}
         />
       )
@@ -572,16 +482,15 @@ describe("Hero", () => {
     const secondaryBooksAndMore = renderer
       .create(
         <Hero
-          heroType={HeroTypes.SecondaryBooksAndMore}
+          heroType="secondaryBooksAndMore"
           heading={
             <Heading
-              level={HeadingLevels.One}
+              level="one"
               id="secondary-hero"
               text="Hero Secondary Books and More"
             />
           }
-          imageAlt={imageAlt}
-          imageSrc={imageSrc}
+          imageProps={imageProps}
           subHeaderText={subHeaderText}
         />
       )
@@ -589,16 +498,15 @@ describe("Hero", () => {
     const secondaryLocations = renderer
       .create(
         <Hero
-          heroType={HeroTypes.SecondaryLocations}
+          heroType="secondaryLocations"
           heading={
             <Heading
-              level={HeadingLevels.One}
+              level="one"
               id="secondary-hero"
               text="Hero Secondary Locations"
             />
           }
-          imageAlt={imageAlt}
-          imageSrc={imageSrc}
+          imageProps={imageProps}
           subHeaderText={subHeaderText}
         />
       )
@@ -606,16 +514,11 @@ describe("Hero", () => {
     const secondaryResearch = renderer
       .create(
         <Hero
-          heroType={HeroTypes.SecondaryResearch}
+          heroType="secondaryResearch"
           heading={
-            <Heading
-              level={HeadingLevels.One}
-              id="secondary-hero"
-              text="Hero Secondary"
-            />
+            <Heading level="one" id="secondary-hero" text="Hero Secondary" />
           }
-          imageAlt={imageAlt}
-          imageSrc={imageSrc}
+          imageProps={imageProps}
           subHeaderText={subHeaderText}
         />
       )
@@ -623,16 +526,15 @@ describe("Hero", () => {
     const secondaryWhatsOn = renderer
       .create(
         <Hero
-          heroType={HeroTypes.SecondaryWhatsOn}
+          heroType="secondaryWhatsOn"
           heading={
             <Heading
-              level={HeadingLevels.One}
+              level="one"
               id="secondary-hero"
               text="Hero Secondary What's On"
             />
           }
-          imageAlt={imageAlt}
-          imageSrc={imageSrc}
+          imageProps={imageProps}
           subHeaderText={subHeaderText}
         />
       )
@@ -641,16 +543,11 @@ describe("Hero", () => {
       .create(
         <Hero
           backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
-          heroType={HeroTypes.Campaign}
+          heroType="campaign"
           heading={
-            <Heading
-              level={HeadingLevels.One}
-              id="campaign-hero"
-              text="Hero Campaign"
-            />
+            <Heading level="one" id="campaign-hero" text="Hero Campaign" />
           }
-          imageAlt={imageAlt}
-          imageSrc={imageSrc}
+          imageProps={imageProps}
           subHeaderText={otherSubHeaderText}
         />
       )
@@ -658,13 +555,9 @@ describe("Hero", () => {
     const tertiary = renderer
       .create(
         <Hero
-          heroType={HeroTypes.Tertiary}
+          heroType="tertiary"
           heading={
-            <Heading
-              level={HeadingLevels.One}
-              id="tertiary-hero"
-              text="Hero Tertiary"
-            />
+            <Heading level="one" id="tertiary-hero" text="Hero Tertiary" />
           }
           subHeaderText={otherSubHeaderText}
         />
@@ -673,9 +566,8 @@ describe("Hero", () => {
     const fiftyFifty = renderer
       .create(
         <Hero
-          heroType={HeroTypes.FiftyFifty}
-          imageAlt={imageAlt}
-          imageSrc={imageSrc}
+          heroType="fiftyFifty"
+          imageProps={imageProps}
           subHeaderText={otherSubHeaderText}
         />
       )
@@ -683,14 +575,8 @@ describe("Hero", () => {
     const withChakraProps = renderer
       .create(
         <Hero
-          heroType={HeroTypes.Primary}
-          heading={
-            <Heading
-              level={HeadingLevels.One}
-              id="chakra"
-              text="Hero Primary"
-            />
-          }
+          heroType="primary"
+          heading={<Heading level="one" id="chakra" text="Hero Primary" />}
           subHeaderText="Example Subtitle"
           backgroundImageSrc="https://placeimg.com/1600/800/arch"
           p="20px"
@@ -701,10 +587,8 @@ describe("Hero", () => {
     const withOtherProps = renderer
       .create(
         <Hero
-          heroType={HeroTypes.Primary}
-          heading={
-            <Heading level={HeadingLevels.One} id="props" text="Hero Primary" />
-          }
+          heroType="primary"
+          heading={<Heading level="one" id="props" text="Hero Primary" />}
           subHeaderText="Example Subtitle"
           backgroundImageSrc="https://placeimg.com/1600/800/arch"
           data-testid="props"