DSD-1843: Hero primary refactor

CHANGELOG.md

@@ -22,6 +22,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 - Updates the docs for the `Template` component.
 - Replaces the error thrown with a console.warn for the `Breadcrumbs`, `Heading`, and `Image` components.
 - Removes props with HTML equivalents and instructs devs to use the native attributes
+- Updates the grid layout of the content for the `Hero` `"primary"` variant.
 
 ### Removals
 

src/components/Hero/Hero.mdx

@@ -7,19 +7,23 @@ import {
   Story,
 } from "@storybook/blocks";
 
-import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
 import * as HeroStories from "./Hero.stories";
-import { changelogData } from "./heroChangelogData";
 import Link from "../Link/Link";
+import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
+import ComponentDocsHeader from "../../utils/components/ComponentDocsHeader";
+import { changelogData } from "./heroChangelogData";
 
 <Meta of={HeroStories} />
 
-# Hero
+<ComponentDocsHeader
+  category="Basic Elements"
+  componentName="Hero"
+  summary="A full-width banner at the top of a page"
+  versionAdded="0.2.0"
+  versionLatest="Prerelease"
+/>
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.2.0`    |
-| Latest            | `3.4.1`    |
+<Canvas of={HeroStories.WithControls} />
 
 ## Table of Contents
 
@@ -35,9 +39,6 @@ import Link from "../Link/Link";
 
 ## Overview
 
-<Description of={HeroStories} />
-
-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.
 
@@ -72,8 +73,6 @@ section.
 
 ## Component Props
 
-<Canvas of={HeroStories.WithControls} />
-
 <ArgTypes of={HeroStories.WithControls} />
 
 ## Accessibility
@@ -90,8 +89,8 @@ Each `Hero` variation can be rendered through the `heroType` prop.
 ### Primary
 
 The `"primary"` hero type can be used with the `backgroundColor`, `backgroundImageSrc`,
-`foregroundColor`, `heading`, `locationDetails`, and `subHeaderText` props. The
-minimum props that should be used are `backgroundImageSrc` and `heading`.
+`foregroundColor`, ` heading`, and `subHeaderText` props. The minimum props
+that should be used are `backgroundImageSrc`and`heading`.
 
 <Story of={HeroStories.Primary} />
 

src/components/Hero/Hero.stories.tsx

@@ -78,7 +78,6 @@ const meta: Meta<typeof Hero> = {
       table: { defaultValue: { summary: "false" } },
     },
     isDarkText: { control: false },
-    locationDetails: { control: false },
     subHeaderText: { control: false },
   },
 };
@@ -103,7 +102,6 @@ export const WithControls: Story = {
     "imageProps.src": "",
     isDarkBackgroundImage: undefined,
     isDarkText: undefined,
-    locationDetails: undefined,
     subHeaderText: undefined,
   },
   render: (args) =>

src/components/Hero/Hero.test.tsx

@@ -218,19 +218,6 @@ describe("Hero", () => {
       <Heading level="h1" id="hero-errors" text="Hero with Error Warnings" />
     );
     const { rerender } = render(
-      <Hero
-        heroType="tertiary"
-        heading={heading}
-        subHeaderText={otherSubHeaderText}
-        locationDetails={<>Some location details.</>}
-      />
-    );
-    expect(warn).toHaveBeenCalledWith(
-      "NYPL Reservoir Hero: The `locationDetails` prop should only be used " +
-        "with the `'primary'` `heroType` variant."
-    );
-
-    rerender(
       <Hero
         heroType="tertiary"
         heading={heading}
@@ -263,27 +250,11 @@ describe("Hero", () => {
       <Heading level="h1" id="hero-errors" text="Hero with Error Warnings" />
     );
     const { rerender } = render(
-      <Hero
-        backgroundImageSrc={getPlaceholderImage("smaller", 0)}
-        heroType="campaign"
-        heading={heading}
-        imageProps={imageProps}
-        locationDetails={<>Some location details.</>}
-        subHeaderText={otherSubHeaderText}
-      />
-    );
-    expect(warn).toHaveBeenCalledWith(
-      "NYPL Reservoir Hero: The `locationDetails` prop should only be used " +
-        "with the `'primary'` `heroType` variant."
-    );
-
-    rerender(
       <Hero
         heroType="campaign"
         heading={heading}
         imageProps={imageProps}
         subHeaderText={otherSubHeaderText}
-        locationDetails={<>Some location details.</>}
       />
     );
     expect(warn).toHaveBeenCalledWith(
@@ -298,7 +269,6 @@ describe("Hero", () => {
         heading={heading}
         subHeaderText={otherSubHeaderText}
         backgroundImageSrc={getPlaceholderImage("smaller", 0)}
-        locationDetails={<>Some location details.</>}
       />
     );
     expect(warn).toHaveBeenCalledWith(

src/components/Hero/Hero.tsx

@@ -55,9 +55,6 @@ export interface HeroProps {
    * the "campaign" variant. If true, the background image will be converted to
    * black & white and darkened to 60% black. */
   isDarkBackgroundImage?: boolean;
-  /** Optional details area that contains location data.
-   * Note: not all `Hero` variations utilize this prop. */
-  locationDetails?: JSX.Element;
   /** Optional string used for the subheader that displays
    * underneath the heading element. */
   subHeaderText?: string | JSX.Element;
@@ -86,7 +83,6 @@ export const Hero: ChakraComponent<
         },
         isDarkText,
         isDarkBackgroundImage = false,
-        locationDetails,
         subHeaderText,
       } = props;
       const styles = useMultiStyleConfig("Hero", {
@@ -138,11 +134,6 @@ export const Hero: ChakraComponent<
               "passed, but the `'primary'` `heroType` variant will not use it."
           );
         }
-      } else if (locationDetails) {
-        console.warn(
-          "NYPL Reservoir Hero: The `locationDetails` prop should only be used " +
-            "with the `'primary'` `heroType` variant."
-        );
       }
       if (heroType === "tertiary" && (backgroundImageSrc || imageProps.src)) {
         console.warn(

src/components/Hero/heroChangelogData.ts

@@ -13,8 +13,11 @@ export const changelogData: ChangelogData[] = [
     date: "Prerelease",
     version: "Prerelease",
     type: "Update",
-    affects: ["Functionality"],
-    notes: ["Removes deprecated `secondary` and `fiftyFifty` variants."],
+    affects: ["Functionality", "Styles"],
+    notes: [
+      "Removes deprecated `secondary` and `fiftyFifty` variants.",
+      "Updates the grid layout for the `primary` variant.",
+    ],
   },
   {
     date: "2025-02-13",

src/components/Template/Template.stories.tsx

@@ -237,11 +237,11 @@ export const TemplateFullExample: Story = {
           />
           <Hero
             backgroundImageSrc={getPlaceholderImage()}
-            heroType="campaign"
-            heading={<Heading level="h1" id="1" text="Hero Campaign" />}
+            heroType="primary"
+            heading={<Heading level="h1" id="1" text="Hero Primary" />}
             imageProps={{
               alt: "Image example",
-              src: getPlaceholderImage("smaller"),
+              src: getPlaceholderImage(),
             }}
             isDarkBackgroundImage
             subHeaderText={otherSubHeaderText}

src/theme/components/hero.ts

@@ -2,6 +2,7 @@ import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
 // import { StyleFunctionProps } from "@chakra-ui/system";
 import { wrapperStyles } from "./global";
 import { screenreaderOnly } from "./globalMixins";
+import useResponsiveSpacing from "../../hooks/useResponsiveSpacing";
 
 // This function creates a set of functions that help us
 // create multipart component styles.
@@ -150,53 +151,50 @@ export const getLinkColor = (state, foregroundColor, isDarkText) => {
   return finalColor;
 };
 // Variant styling
-const primary = definePartsStyle(({ foregroundColor, isDarkText }) => ({
-  base: {
-    alignItems: "center",
-    backgroundSize: "cover",
-    backgroundPosition: "center",
-    display: "flex",
-    flexFlow: {
-      base: "column nowrap",
-      md: "row nowrap",
-    },
-    justifyContent: "center",
-    minHeight: "352px",
-    p: "l",
-  },
-  content: {
-    bg: "ui.black",
-    color: getTextColor("body", "light", foregroundColor, isDarkText),
-    flex: {
-      base: "0 0 100%",
-      md: "0 0 60%",
-    },
-    maxWidth: { md: "860px" },
-    padding: { base: "inset.default", lg: "inset.wide" },
-    paddingEnd: { lg: "inset.wide" },
-    paddingStart: { lg: "inset.wide" },
-    a: {
-      color: "inherit",
-      display: "inline-block",
-    },
-    bodyText: {
-      marginBottom: "0",
-    },
-    ".chakra-heading": {
-      color: getTextColor("heading", "light", foregroundColor, isDarkText),
+const primary = definePartsStyle(({ foregroundColor, isDarkText }) => {
+  const { responsiveGap } = useResponsiveSpacing();
+  return {
+    base: {
+      alignItems: "center",
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      display: "grid",
+      gridTemplateColumns: "repeat(12, 1fr)",
+      gap: responsiveGap,
+      minHeight: "352px",
+      p: "l",
+      paddingInline: "s",
     },
-    _dark: {
-      bgColor: "dark.ui.bg.default",
-      color: getTextColor("body", "dark", foregroundColor, isDarkText),
+    content: {
+      bg: "ui.black",
+      color: getTextColor("body", "light", foregroundColor, isDarkText),
+      gridColumn: { base: "1 / -1", md: "2 / 12", lg: "3 / 11" },
+      padding: { base: "inset.default", lg: "inset.wide" },
+      paddingEnd: { lg: "inset.wide" },
+      paddingStart: { lg: "inset.wide" },
+      a: {
+        color: "inherit",
+        display: "inline-block",
+      },
+      bodyText: {
+        marginBottom: "0",
+      },
       ".chakra-heading": {
-        color: getTextColor("heading", "dark", foregroundColor, isDarkText),
+        color: getTextColor("heading", "light", foregroundColor, isDarkText),
+      },
+      _dark: {
+        bgColor: "dark.ui.bg.default",
+        color: getTextColor("body", "dark", foregroundColor, isDarkText),
+        ".chakra-heading": {
+          color: getTextColor("heading", "dark", foregroundColor, isDarkText),
+        },
       },
     },
-  },
-  heading: {
-    color: getTextColor("heading", "dark", foregroundColor, isDarkText),
-  },
-}));
+    heading: {
+      color: getTextColor("heading", "dark", foregroundColor, isDarkText),
+    },
+  };
+});
 const secondary = getSecondaryVariantStyles();
 const secondaryBooksAndMore = getSecondaryVariantStyles(
   "section.books-and-more.primary"