@nypl/design-system-react-components 0.25.12 → 0.25.13

package/src/components/Hero/Hero.stories.mdx

@@ -12,7 +12,6 @@ import Heading from "../Heading/Heading";
 import { HeadingLevels } from "../Heading/HeadingTypes";
 import Hero from "./Hero";
 import { HeroTypes, HeroSecondaryTypes } from "./HeroTypes";
-import Image from "../Image/Image";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 import { getStorybookEnumValues } from "../../utils/utils";
@@ -39,7 +38,8 @@ export const enumValues = getStorybookEnumValues(HeroTypes, "HeroTypes");
       table: { defaultValue: { summary: "HeroTypes.Primary" } },
       options: enumValues.options,
     },
-    image: { control: false },
+    imageAlt: { control: false },
+    imageSrc: { control: false },
     locationDetails: { control: false },
     subHeaderText: { control: false },
   }}
@@ -55,16 +55,15 @@ export const secondarySubHeaderText = (
 );
 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.";
-export const image = (
-  <Image src="https://placeimg.com/800/400/animals" alt="Image example" />
-);
+const imageAlt = "Image example";
+const imageSrc = "https://placeimg.com/800/400/animals";
 
 # Hero
 
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.2.0`    |
-| Latest            | `0.25.2`   |
+| Latest            | `0.25.13`  |
 
 <Description of={Hero} />
 
@@ -81,7 +80,8 @@ descriptive text and images.
       foregroundColor: undefined,
       heading: undefined,
       heroType: "HeroTypes.Primary",
-      image: undefined,
+      imageAlt: undefined,
+      imageSrc: undefined,
       locationDetails: undefined,
       subHeaderText: undefined,
     }}
@@ -106,7 +106,8 @@ descriptive text and images.
               <Heading level={HeadingLevels.One} id="1" text="Hero Secondary" />
             }
             heroType={enumValues.getValue(args.heroType)}
-            image={image}
+            imageAlt={args.imageAlt}
+            imageSrc={args.imageSrc}
             subHeaderText={secondarySubHeaderText}
           />
         </div>
@@ -129,12 +130,8 @@ descriptive text and images.
             <Heading level={HeadingLevels.One} id="1" text="Hero Campaign" />
           }
           heroType={enumValues.getValue(args.heroType)}
-          image={
-            <Image
-              src="https://placeimg.com/800/400/animals"
-              alt="Image example"
-            />
-          }
+          imageAlt={args.imageAlt}
+          imageSrc={args.imageSrc}
           subHeaderText={otherSubHeaderText}
         />
       )) ||
@@ -142,12 +139,8 @@ descriptive text and images.
         <Hero
           {...args}
           heroType={enumValues.getValue(args.heroType)}
-          image={
-            <Image
-              src="https://placeimg.com/600/200/animals"
-              alt="Image example"
-            />
-          }
+          imageAlt={args.imageAlt}
+          imageSrc={args.imageSrc}
           subHeaderText={otherSubHeaderText}
         />
       ))
@@ -183,7 +176,6 @@ parent wrapper's CSS class name for background color updates. Now, the proper
         text="HeroTypes.SecondaryBooksAndMore"
       />
       <Hero
-        image={image}
         heading={
           <Heading
             level={HeadingLevels.One}
@@ -192,6 +184,8 @@ parent wrapper's CSS class name for background color updates. Now, the proper
           />
         }
         heroType={HeroTypes.SecondaryBooksAndMore}
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
         subHeaderText={secondarySubHeaderText}
       />
       <Heading
@@ -200,7 +194,6 @@ parent wrapper's CSS class name for background color updates. Now, the proper
         text="HeroTypes.SecondaryLocations"
       />
       <Hero
-        image={image}
         heading={
           <Heading
             level={HeadingLevels.One}
@@ -209,6 +202,8 @@ parent wrapper's CSS class name for background color updates. Now, the proper
           />
         }
         heroType={HeroTypes.SecondaryLocations}
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
         subHeaderText={secondarySubHeaderText}
       />
       <Heading
@@ -217,7 +212,6 @@ parent wrapper's CSS class name for background color updates. Now, the proper
         text="HeroTypes.SecondaryResearch"
       />
       <Hero
-        image={image}
         heading={
           <Heading
             level={HeadingLevels.One}
@@ -226,6 +220,8 @@ parent wrapper's CSS class name for background color updates. Now, the proper
           />
         }
         heroType={HeroTypes.SecondaryResearch}
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
         subHeaderText={secondarySubHeaderText}
       />
       <Heading
@@ -242,7 +238,8 @@ parent wrapper's CSS class name for background color updates. Now, the proper
           />
         }
         heroType={HeroTypes.SecondaryWhatsOn}
-        image={image}
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
         subHeaderText={secondarySubHeaderText}
       />
     </VStack>
@@ -281,7 +278,8 @@ parent wrapper's CSS class name for background color updates. Now, the proper
             />
           }
           heroType={HeroTypes.Secondary}
-          image={image}
+          imageAlt={imageAlt}
+          imageSrc={imageSrc}
           subHeaderText={secondarySubHeaderText}
         />
       </div>
@@ -326,7 +324,8 @@ parent wrapper's CSS class name for background color updates. Now, the proper
             text="Hero Campaign"
           />
         }
-        image={image}
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
         subHeaderText={otherSubHeaderText}
       />
       <Box marginTop="30px" />
@@ -337,7 +336,8 @@ parent wrapper's CSS class name for background color updates. Now, the proper
       />
       <Hero
         heroType={HeroTypes.FiftyFifty}
-        image={image}
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
         subHeaderText={otherSubHeaderText}
       />
     </VStack>

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

@@ -3,7 +3,6 @@ import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
-import Image from "../Image/Image";
 import Heading from "../Heading/Heading";
 import { HeadingLevels } from "../Heading/HeadingTypes";
 import { HeroTypes } from "./HeroTypes";
@@ -18,10 +17,11 @@ export const subHeaderText = (
   </>
 );
 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.";
-export const image = (
-  <Image src="https://placeimg.com/800/400/animals" alt="Image example" />
-);
+  "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";
 
 describe("Hero", () => {
   describe("axe accessbility tests", () => {
@@ -54,8 +54,9 @@ describe("Hero", () => {
               text="Hero Secondary"
             />
           }
+          imageAlt={imageAlt}
+          imageSrc={imageSrc}
           subHeaderText={subHeaderText}
-          image={image}
         />
       );
       expect(await axe(container)).toHaveNoViolations();
@@ -81,6 +82,7 @@ describe("Hero", () => {
     it("passes for type Campaign", async () => {
       const { container } = render(
         <Hero
+          backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
           heroType={HeroTypes.Campaign}
           heading={
             <Heading
@@ -89,9 +91,9 @@ describe("Hero", () => {
               text="Hero Campaign"
             />
           }
+          imageAlt={imageAlt}
+          imageSrc={imageSrc}
           subHeaderText={otherSubHeaderText}
-          backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
-          image={image}
         />
       );
       expect(await axe(container)).toHaveNoViolations();
@@ -101,8 +103,9 @@ describe("Hero", () => {
       const { container } = render(
         <Hero
           heroType={HeroTypes.FiftyFifty}
+          imageAlt={imageAlt}
+          imageSrc={imageSrc}
           subHeaderText={otherSubHeaderText}
-          image={image}
         />
       );
       expect(await axe(container)).toHaveNoViolations();
@@ -144,8 +147,9 @@ describe("Hero", () => {
             text="Hero Secondary"
           />
         }
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
         subHeaderText={subHeaderText}
-        image={image}
       />
     );
 
@@ -181,6 +185,7 @@ describe("Hero", () => {
   it("renders Campaign Hero", () => {
     render(
       <Hero
+        backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
         heroType={HeroTypes.Campaign}
         heading={
           <Heading
@@ -189,9 +194,9 @@ describe("Hero", () => {
             text="Hero Campaign"
           />
         }
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
         subHeaderText={otherSubHeaderText}
-        backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
-        image={image}
       />
     );
 
@@ -212,8 +217,9 @@ describe("Hero", () => {
     render(
       <Hero
         heroType={HeroTypes.FiftyFifty}
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
         subHeaderText={otherSubHeaderText}
-        image={image}
       />
     );
 
@@ -249,11 +255,12 @@ describe("Hero", () => {
 
     rerender(
       <Hero
+        backgroundColor="#654321"
+        foregroundColor="#123456"
         heroType={HeroTypes.FiftyFifty}
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
         subHeaderText={otherSubHeaderText}
-        image={image}
-        foregroundColor="#123456"
-        backgroundColor="#654321"
       />
     );
 
@@ -264,6 +271,8 @@ describe("Hero", () => {
 
     rerender(
       <Hero
+        backgroundColor="#654321"
+        foregroundColor="#123456"
         heroType={HeroTypes.Secondary}
         heading={
           <Heading
@@ -272,10 +281,9 @@ describe("Hero", () => {
             text="Hero Secondary"
           />
         }
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
         subHeaderText={subHeaderText}
-        image={image}
-        foregroundColor="#123456"
-        backgroundColor="#654321"
       />
     );
 
@@ -285,6 +293,21 @@ describe("Hero", () => {
     );
   });
 
+  it("logs a warning if `imageSrc` prop is passed but not `imageAlt`", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(
+      <Hero
+        backgroundImageSrc="https://placeimg.com/1600/800/arch"
+        heroType={HeroTypes.Primary}
+        imageSrc={imageSrc}
+      />
+    );
+
+    expect(warn).toHaveBeenCalledWith(
+      `NYPL Reservoir: The "imageSrc" prop was passed but the "imageAlt" 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 = (
@@ -298,19 +321,22 @@ describe("Hero", () => {
       <Hero heroType={HeroTypes.Primary} heading={heading} />
     );
     expect(warn).toHaveBeenCalledWith(
-      `Warning: it is recommended to use the "backgroundImageSrc" prop for PRIMARY hero.`
+      "NYPL Reservoir Hero: It is recommended to use the `backgroundImageSrc` " +
+        "prop for the `HeroTypes.Primary` `heroType` variant."
     );
 
     rerender(
       <Hero
+        backgroundImageSrc="https://placeimg.com/1600/800/arch"
         heroType={HeroTypes.Primary}
         heading={heading}
-        backgroundImageSrc="https://placeimg.com/1600/800/arch"
-        image={image}
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
       />
     );
     expect(warn).toHaveBeenCalledWith(
-      `Warning: the "image" prop has been passed, but PRIMARY hero will not use it.`
+      "NYPL Reservoir Hero: The `imageSrc` and `imageAlt` props have been passed, " +
+        "but the `HeroTypes.Primary` `heroType` variant will not use it."
     );
   });
 
@@ -327,40 +353,47 @@ describe("Hero", () => {
       <Hero
         heroType={HeroTypes.Secondary}
         heading={heading}
-        subHeaderText={subHeaderText}
-        image={image}
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
         locationDetails={<>Some location details.</>}
+        subHeaderText={subHeaderText}
       />
     );
     expect(warn).toHaveBeenCalledWith(
-      `Warning: Please provide "locationDetails" only to PRIMARY hero.`
+      "NYPL Reservoir Hero: The `locationDetails` prop should only be used " +
+        "with the `HeroTypes.Primary` `heroType` variant."
     );
 
     rerender(
       <Hero
+        backgroundImageSrc="https://placeimg.com/1600/800/arch"
         heroType={HeroTypes.Secondary}
         heading={heading}
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
         subHeaderText={subHeaderText}
-        image={image}
-        backgroundImageSrc="https://placeimg.com/1600/800/arch"
       />
     );
     expect(warn).toHaveBeenCalledWith(
-      `Warning: the "backgroundImageSrc" prop has been passed, but SECONDARY hero will not use it.`
+      "NYPL Reservoir Hero: The `backgroundImageSrc` prop has been passed, " +
+        "but the `HeroTypes.Secondary` `heroType` variant will not use it."
     );
 
     rerender(
       <Hero
+        backgroundColor="#654321"
+        foregroundColor="#123456"
         heroType={HeroTypes.Secondary}
         heading={heading}
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
         subHeaderText={subHeaderText}
-        image={image}
-        foregroundColor="#123456"
-        backgroundColor="#654321"
       />
     );
     expect(warn).toHaveBeenCalledWith(
-      `Warning: the "foregroundColor" and/or "backgroundColor" props have been passed, but SECONDARY Hero will not use them.`
+      "NYPL Reservoir Hero: The `foregroundColor` and/or `backgroundColor` " +
+        "props have been passed, but the `HeroTypes.Secondary` `heroType` " +
+        "variant will not use them."
     );
   });
 
@@ -382,31 +415,35 @@ describe("Hero", () => {
       />
     );
     expect(warn).toHaveBeenCalledWith(
-      `Warning: Please provide "locationDetails" only to PRIMARY hero.`
+      "NYPL Reservoir Hero: The `locationDetails` prop should only be used " +
+        "with the `HeroTypes.Primary` `heroType` variant."
     );
 
     rerender(
       <Hero
         heroType={HeroTypes.Tertiary}
         heading={heading}
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
         subHeaderText={otherSubHeaderText}
-        image={image}
       />
     );
     expect(warn).toHaveBeenCalledWith(
-      `Warning: TERTIARY hero will not use any of the image props.`
+      "NYPL Reservoir Hero: The `HeroTypes.Tertiary` `heroType` variant hero " +
+        "will not use any of the image props."
     );
 
     rerender(
       <Hero
+        backgroundImageSrc="https://placeimg.com/1600/800/arch"
         heroType={HeroTypes.Tertiary}
         heading={heading}
         subHeaderText={otherSubHeaderText}
-        backgroundImageSrc="https://placeimg.com/1600/800/arch"
       />
     );
     expect(warn).toHaveBeenCalledWith(
-      `Warning: TERTIARY hero will not use any of the image props.`
+      "NYPL Reservoir Hero: The `HeroTypes.Tertiary` `heroType` variant hero " +
+        "will not use any of the image props."
     );
   });
 
@@ -421,29 +458,34 @@ describe("Hero", () => {
     );
     const { rerender } = render(
       <Hero
+        backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
         heroType={HeroTypes.Campaign}
         heading={heading}
-        subHeaderText={otherSubHeaderText}
-        backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
-        image={image}
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
         locationDetails={<>Some location details.</>}
+        subHeaderText={otherSubHeaderText}
       />
     );
     expect(warn).toHaveBeenCalledWith(
-      `Warning: Please provide "locationDetails" only to PRIMARY hero.`
+      "NYPL Reservoir Hero: The `locationDetails` prop should only be used " +
+        "with the `HeroTypes.Primary` `heroType` variant."
     );
 
     rerender(
       <Hero
         heroType={HeroTypes.Campaign}
         heading={heading}
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
         subHeaderText={otherSubHeaderText}
-        image={image}
         locationDetails={<>Some location details.</>}
       />
     );
     expect(warn).toHaveBeenCalledWith(
-      `Warning: it is recommended to use both "backgroundImageSrc" and "image" props for CAMPAIGN hero.`
+      "NYPL Reservoir Hero: It is recommended to use both the " +
+        "`backgroundImageSrc` and `imageSrc` props for the `HeroTypes.Campaign` " +
+        "`heroType` variant."
     );
 
     rerender(
@@ -456,7 +498,9 @@ describe("Hero", () => {
       />
     );
     expect(warn).toHaveBeenCalledWith(
-      `Warning: it is recommended to use both "backgroundImageSrc" and "image" props for CAMPAIGN hero.`
+      "NYPL Reservoir Hero: It is recommended to use both the " +
+        "`backgroundImageSrc` and `imageSrc` props for the `HeroTypes.Campaign` " +
+        "`heroType` variant."
     );
   });
 
@@ -466,24 +510,28 @@ describe("Hero", () => {
       <Hero
         heroType={HeroTypes.FiftyFifty}
         subHeaderText={otherSubHeaderText}
-        image={image}
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
         locationDetails={<>Some location details.</>}
       />
     );
     expect(warn).toHaveBeenCalledWith(
-      `Warning: Please provide "locationDetails" only to PRIMARY hero.`
+      "NYPL Reservoir Hero: The `locationDetails` prop should only be used " +
+        "with the `HeroTypes.Primary` `heroType` variant."
     );
 
     rerender(
       <Hero
+        backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
         heroType={HeroTypes.FiftyFifty}
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
         subHeaderText={otherSubHeaderText}
-        image={image}
-        backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
       />
     );
     expect(warn).toHaveBeenCalledWith(
-      `Warning: the "backgroundImageSrc" prop has been passed, but FIFTYFIFTY hero will not use it.`
+      "NYPL Reservoir Hero: The `backgroundImageSrc` prop has been passed, " +
+        "but the `HeroTypes.FiftyFifty` `heroType` variant hero will not use it."
     );
   });
 
@@ -515,8 +563,9 @@ describe("Hero", () => {
               text="Hero Secondary"
             />
           }
+          imageAlt={imageAlt}
+          imageSrc={imageSrc}
           subHeaderText={subHeaderText}
-          image={image}
         />
       )
       .toJSON();
@@ -531,8 +580,9 @@ describe("Hero", () => {
               text="Hero Secondary Books and More"
             />
           }
+          imageAlt={imageAlt}
+          imageSrc={imageSrc}
           subHeaderText={subHeaderText}
-          image={image}
         />
       )
       .toJSON();
@@ -547,8 +597,9 @@ describe("Hero", () => {
               text="Hero Secondary Locations"
             />
           }
+          imageAlt={imageAlt}
+          imageSrc={imageSrc}
           subHeaderText={subHeaderText}
-          image={image}
         />
       )
       .toJSON();
@@ -563,8 +614,9 @@ describe("Hero", () => {
               text="Hero Secondary"
             />
           }
+          imageAlt={imageAlt}
+          imageSrc={imageSrc}
           subHeaderText={subHeaderText}
-          image={image}
         />
       )
       .toJSON();
@@ -579,14 +631,16 @@ describe("Hero", () => {
               text="Hero Secondary What's On"
             />
           }
+          imageAlt={imageAlt}
+          imageSrc={imageSrc}
           subHeaderText={subHeaderText}
-          image={image}
         />
       )
       .toJSON();
     const campaign = renderer
       .create(
         <Hero
+          backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
           heroType={HeroTypes.Campaign}
           heading={
             <Heading
@@ -595,9 +649,9 @@ describe("Hero", () => {
               text="Hero Campaign"
             />
           }
+          imageAlt={imageAlt}
+          imageSrc={imageSrc}
           subHeaderText={otherSubHeaderText}
-          backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
-          image={image}
         />
       )
       .toJSON();
@@ -620,8 +674,9 @@ describe("Hero", () => {
       .create(
         <Hero
           heroType={HeroTypes.FiftyFifty}
+          imageAlt={imageAlt}
+          imageSrc={imageSrc}
           subHeaderText={otherSubHeaderText}
-          image={image}
         />
       )
       .toJSON();