@nypl/design-system-react-components 0.25.11 → 0.26.0

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,25 @@ 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.26.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [All Variations](#all-variations)
+- [Color Variations for Secondary Hero](#color-variations-for-secondary-hero)
+
+## Overview
 
 <Description of={Hero} />
 
@@ -72,6 +81,8 @@ The `Hero` component is used to display a full width banner at the top of a page
 The `Hero` will contain a required `h1` page title and may also include optional
 descriptive text and images.
 
+## Component Props
+
 <Canvas withToolbar>
   <Story
     name="Hero with Controls"
@@ -81,7 +92,8 @@ descriptive text and images.
       foregroundColor: undefined,
       heading: undefined,
       heroType: "HeroTypes.Primary",
-      image: undefined,
+      imageAlt: undefined,
+      imageSrc: undefined,
       locationDetails: undefined,
       subHeaderText: undefined,
     }}
@@ -106,7 +118,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 +142,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 +151,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}
         />
       ))
@@ -157,97 +162,12 @@ descriptive text and images.
 
 <ArgsTable story="Hero with Controls" />
 
-## Color Variations for Secondary Hero
-
-The background color for the title bar in "Secondary" types changes based on
-variants for the `Secondary` main variant. Before, components relied on the
-parent wrapper's CSS class name for background color updates. Now, the proper
-`HeroType` must be passed in.
+## Accessibility
 
-```jsx
-// Before
-<div className="nypl--books-and-more">
-  <Hero {...props} />
-</div>
-
-// Now
-<Hero heroType={HeroTypes.SecondaryBooksAndMore} {...props} />
-```
-
-<Canvas>
-  <Story name="Color Variations for Secondary Hero">
-    <VStack spacing={10} align="stretch">
-      <Heading
-        id="books-heading"
-        level={HeadingLevels.Two}
-        text="HeroTypes.SecondaryBooksAndMore"
-      />
-      <Hero
-        image={image}
-        heading={
-          <Heading
-            level={HeadingLevels.One}
-            id="books-hero"
-            text="Books and More"
-          />
-        }
-        heroType={HeroTypes.SecondaryBooksAndMore}
-        subHeaderText={secondarySubHeaderText}
-      />
-      <Heading
-        id="location-heading"
-        level={HeadingLevels.Two}
-        text="HeroTypes.SecondaryLocations"
-      />
-      <Hero
-        image={image}
-        heading={
-          <Heading
-            level={HeadingLevels.One}
-            id="locations-hero"
-            text="Locations"
-          />
-        }
-        heroType={HeroTypes.SecondaryLocations}
-        subHeaderText={secondarySubHeaderText}
-      />
-      <Heading
-        id="research-heading"
-        level={HeadingLevels.Two}
-        text="HeroTypes.SecondaryResearch"
-      />
-      <Hero
-        image={image}
-        heading={
-          <Heading
-            level={HeadingLevels.One}
-            id="research-hero"
-            text="Research"
-          />
-        }
-        heroType={HeroTypes.SecondaryResearch}
-        subHeaderText={secondarySubHeaderText}
-      />
-      <Heading
-        id="whats-on-heading"
-        level={HeadingLevels.Two}
-        text="HeroTypes.SecondaryWhatsOn"
-      />
-      <Hero
-        heading={
-          <Heading
-            level={HeadingLevels.One}
-            id="whats-on-hero"
-            text="What's On"
-          />
-        }
-        heroType={HeroTypes.SecondaryWhatsOn}
-        image={image}
-        subHeaderText={secondarySubHeaderText}
-      />
-    </VStack>
-  </Story>
-</Canvas>
+The `Hero` component is commonly used as a banner below the page's header and
+breadcrumbs and above the main content. This means that if the `Hero` displays
+a heading element, it should be the first on the page and an `h1` element set
+through `Heading`'s `level={HeadingLevels.One}`.
 
 ## All Variations
 
@@ -281,7 +201,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 +247,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,9 +259,117 @@ 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>
   </DSProvider>
 </Canvas>
+
+## Color Variations for Secondary Hero
+
+The background color for the title bar in the "Secondary" `Hero` changes based
+on the `HeroTypes` variants for the `Secondary` main variant.
+
+```jsx
+// Example `HeroTypes` "Secondary" variant.
+<Hero heroType={HeroTypes.SecondaryBooksAndMore} {...props} />
+```
+
+<Canvas>
+  <Story name="Color Variations for Secondary Hero">
+    <VStack spacing={10} align="stretch">
+      <Heading
+        id="main-secondary-heading"
+        level={HeadingLevels.Two}
+        text="HeroTypes.Secondary"
+      />
+      <Hero
+        heading={
+          <Heading
+            level={HeadingLevels.One}
+            id="main-secondary-hero"
+            text="Secondary"
+          />
+        }
+        heroType={HeroTypes.Secondary}
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
+        subHeaderText={secondarySubHeaderText}
+      />
+      <Heading
+        id="books-heading"
+        level={HeadingLevels.Two}
+        text="HeroTypes.SecondaryBooksAndMore"
+      />
+      <Hero
+        heading={
+          <Heading
+            level={HeadingLevels.One}
+            id="books-hero"
+            text="Books and More"
+          />
+        }
+        heroType={HeroTypes.SecondaryBooksAndMore}
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
+        subHeaderText={secondarySubHeaderText}
+      />
+      <Heading
+        id="location-heading"
+        level={HeadingLevels.Two}
+        text="HeroTypes.SecondaryLocations"
+      />
+      <Hero
+        heading={
+          <Heading
+            level={HeadingLevels.One}
+            id="locations-hero"
+            text="Locations"
+          />
+        }
+        heroType={HeroTypes.SecondaryLocations}
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
+        subHeaderText={secondarySubHeaderText}
+      />
+      <Heading
+        id="research-heading"
+        level={HeadingLevels.Two}
+        text="HeroTypes.SecondaryResearch"
+      />
+      <Hero
+        heading={
+          <Heading
+            level={HeadingLevels.One}
+            id="research-hero"
+            text="Research"
+          />
+        }
+        heroType={HeroTypes.SecondaryResearch}
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
+        subHeaderText={secondarySubHeaderText}
+      />
+      <Heading
+        id="whats-on-heading"
+        level={HeadingLevels.Two}
+        text="HeroTypes.SecondaryWhatsOn"
+      />
+      <Hero
+        heading={
+          <Heading
+            level={HeadingLevels.One}
+            id="whats-on-hero"
+            text="What's On"
+          />
+        }
+        heroType={HeroTypes.SecondaryWhatsOn}
+        imageAlt={imageAlt}
+        imageSrc={imageSrc}
+        subHeaderText={secondarySubHeaderText}
+      />
+    </VStack>
+  </Story>
+</Canvas>