@nypl/design-system-react-components 0.23.4 → 0.25.1

package/src/components/Hero/Hero.tsx

@@ -1,114 +1,109 @@
-// OH-30 Header with Image Right
 import * as React from "react";
-import bem from "../../utils/bem";
-import { HeroTypes } from "./HeroTypes";
+import { Box, useMultiStyleConfig } from "@chakra-ui/react";
+
+import { HeroTypes, HeroSecondaryTypes } from "./HeroTypes";
 
 export interface HeroProps {
-  /** Optional hex color value used to override the default background color for a given `Hero` variation; Note: not all `Hero` variations utilize this prop */
+  /** Optional hex color value used to override the default background
+   * color for a given `Hero` variation.
+   * Note: not all `Hero` variations utilize this prop. */
   backgroundColor?: string;
-  /** Optional path to an image that will be used as a background image for the `Hero` component; Note: not all `Hero` variations utilize this prop */
+  /** Optional path to an image that will be used as a background image for the
+   * `Hero` component.
+   * Note: not all `Hero` variations utilize this prop. */
   backgroundImageSrc?: string;
-  /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-  blockName?: string;
-  /** Optional className that appears in addition to `hero` */
-  className?: string;
-  /** Optional hex color value used to override the default text color for a given `Hero` variation; Note: not all `Hero` variations utilize this prop */
+  /** Optional hex color value used to override the default text color for a
+   * given `Hero` variation.
+   * Note: not all `Hero` variations utilize this prop. */
   foregroundColor?: string;
-  /** Required heading element. */
+  /** Optional heading element. */
   heading?: JSX.Element;
   /** Used to control how the `Hero` component will be rendered. */
   heroType?: HeroTypes;
-  /** Optional `Image` component used for SECONDARY, FIFTYFIFTY and CAMPAIGN `Hero` types; Note: `image` can only be used in conjunction with `backgroundImageSrc` for CAMPAIGN Hero type; Note: not all `Hero` variations utilize this prop */
+  /** Optional `Image` component used for SECONDARY, FIFTYFIFTY and CAMPAIGN
+   * `Hero` types; Note: `image` can only be used in conjunction with
+   * `backgroundImageSrc` for CAMPAIGN the `Hero` type.
+   * Note: not all `Hero` variations utilize this prop. */
   image?: JSX.Element;
-  /** Optional details area that contains location data; Note: not all `Hero` variations utilize this prop */
+  /** Optional details area that contains location data.
+   * Note: not all `Hero` variations utilize this prop. */
   locationDetails?: JSX.Element;
-  /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  modifiers?: string[];
-  /** Optional string used for the subheader that displays underneath the heading element */
-  subHeaderText?: JSX.Element;
+  /** Optional string used for the subheader that displays
+   * underneath the heading element. */
+  subHeaderText?: string | JSX.Element;
 }
 
-export default function Hero(props: React.PropsWithChildren<HeroProps>) {
-  const heroBaseClass = "hero";
+// Used to map between HeroTypes enum values and Chakra variant options.
+const variantMap = {};
+for (const type in HeroTypes) {
+  variantMap[HeroTypes[type]] = HeroTypes[type];
+}
+/**
+ * Map the HeroTypes to the Hero Chakra theme variant object. If a wrong
+ * value is passed (typically in non-Typescript scenarios), then the default
+ * is the "primary" variant.
+ */
+const getVariant = (type) => variantMap[type] || HeroTypes.Primary;
 
+export default function Hero(props: React.PropsWithChildren<HeroProps>) {
   const {
     backgroundColor,
     backgroundImageSrc,
-    blockName,
-    className,
     foregroundColor,
     heading,
     heroType,
     image,
-    modifiers = [],
     locationDetails,
     subHeaderText,
   } = props;
+  const variant = getVariant(heroType);
+  const styles = useMultiStyleConfig("Hero", { variant });
+  const headingStyles = styles.heading;
+  // We want to add `Hero`-specific styling to the `Heading` component.
+  const finalHeading =
+    heading && React.cloneElement(heading, { sx: headingStyles });
+  let backgroundImageStyle = {};
+  let contentBoxStyling = {};
 
   if (heroType === HeroTypes.Primary) {
-    modifiers.push("primary");
-  } else if (heroType === HeroTypes.Secondary) {
-    modifiers.push("secondary");
-  } else if (heroType === HeroTypes.Tertiary) {
-    modifiers.push("tertiary");
-  } else if (heroType === HeroTypes.FiftyFifty) {
-    modifiers.push("50-50");
-  } else if (heroType === HeroTypes.Campaign) {
-    modifiers.push("campaign");
-  }
-
-  if (heroType === HeroTypes.Primary && !backgroundImageSrc) {
-    console.warn(
-      `Warning: it is recommended to use the "backgroundImageSrc" prop for PRIMARY hero`
-    );
-    modifiers.push("warning");
-  }
-
-  if (heroType === HeroTypes.Primary && image) {
+    if (!backgroundImageSrc) {
+      console.warn(
+        `Warning: it is recommended to use the "backgroundImageSrc" prop for PRIMARY hero.`
+      );
+    }
+    if (image) {
+      console.warn(
+        `Warning: the "image" prop has been passed, but PRIMARY hero will not use it.`
+      );
+    }
+  } else if (locationDetails) {
     console.warn(
-      `Warning: the "image" prop has been passed, but PRIMARY hero will not use it`
+      `Warning: Please provide "locationDetails" only to PRIMARY hero.`
     );
-    modifiers.push("warning");
   }
-
-  if (heroType === HeroTypes.Secondary && backgroundImageSrc) {
+  if (HeroSecondaryTypes.includes(heroType) && backgroundImageSrc) {
     console.warn(
-      `Warning: the "backgroundImageSrc" prop has been passed, but SECONDARY hero will not use it`
+      `Warning: the "backgroundImageSrc" prop has been passed, but SECONDARY hero will not use it.`
     );
-    modifiers.push("warning");
   }
-
   if (heroType === HeroTypes.Tertiary && (backgroundImageSrc || image)) {
-    console.warn(`Warning: TERTIARY hero will not use any of the image props`);
-    modifiers.push("warning");
-  }
-
-  if (heroType === HeroTypes.FiftyFifty && backgroundImageSrc) {
-    console.warn(
-      `Warning: the "backgroundImageSrc" prop has been passed, but FIFTYFIFTY hero will not use it`
-    );
-    modifiers.push("warning");
+    console.warn(`Warning: TERTIARY hero will not use any of the image props.`);
   }
-
   if (heroType === HeroTypes.Campaign && (!backgroundImageSrc || !image)) {
     console.warn(
-      `Warning: it is recommended to use both "backgroundImageSrc" and "image" props for CAMPAIGN hero`
+      `Warning: it is recommended to use both "backgroundImageSrc" and "image" props for CAMPAIGN hero.`
     );
-    modifiers.push("warning");
   }
-
-  if (heroType !== HeroTypes.Primary && locationDetails) {
+  if (heroType === HeroTypes.FiftyFifty && backgroundImageSrc) {
     console.warn(
-      `Warning: Please provide "locationDetails" only to PRIMARY hero`
+      `Warning: the "backgroundImageSrc" prop has been passed, but FIFTYFIFTY hero will not use it.`
     );
-    modifiers.push("warning");
   }
 
-  let backgroundImageStyle = {};
   if (heroType === HeroTypes.Primary) {
     backgroundImageStyle = backgroundImageSrc
       ? { backgroundImage: `url(${backgroundImageSrc})` }
-      : null;
+      : {};
   } else if (heroType === HeroTypes.Campaign) {
     backgroundImageStyle = backgroundImageSrc
       ? { backgroundImage: `url(${backgroundImageSrc})` }
@@ -120,63 +115,55 @@ export default function Hero(props: React.PropsWithChildren<HeroProps>) {
     backgroundImageStyle = { backgroundColor };
   }
 
-  let contentBoxStyling = {};
-  if (
-    heroType === HeroTypes.Primary ||
-    heroType === HeroTypes.Tertiary ||
-    heroType === HeroTypes.FiftyFifty ||
-    heroType === HeroTypes.Campaign
-  ) {
+  if (!HeroSecondaryTypes.includes(heroType)) {
     contentBoxStyling = {
       color: foregroundColor,
       backgroundColor,
     };
-  } else {
-    if (foregroundColor || backgroundColor) {
-      console.warn(
-        `Warning: the "foregroundColor" and/or "backgroundColor" props have been passed, but SECONDARY Hero will not use them`
-      );
-      modifiers.push("warning");
-    }
+  } else if (foregroundColor || backgroundColor) {
+    console.warn(
+      `Warning: the "foregroundColor" and/or "backgroundColor" props have been passed, but SECONDARY Hero will not use them.`
+    );
   }
 
   const childrenToRender =
     heroType === HeroTypes.Campaign ? (
       <>
         {image}
-        <div className="interior">
-          {heading}
+        <Box __css={styles.interior}>
+          {finalHeading}
           {subHeaderText}
-        </div>
+        </Box>
       </>
     ) : (
       <>
         {heroType !== HeroTypes.Primary &&
           heroType !== HeroTypes.Tertiary &&
           image}
-        {heading}
-        {heroType === HeroTypes.Tertiary ? (
+        {finalHeading}
+        {heroType === HeroTypes.Tertiary && subHeaderText ? (
           <p>{subHeaderText}</p>
         ) : (
-          subHeaderText
+          <Box __css={styles.bodyText}>{subHeaderText}</Box>
         )}
       </>
     );
 
   return (
-    <div
-      className={bem(heroBaseClass, modifiers, blockName, [className])}
+    <Box
+      data-testid="hero"
       data-responsive-background-image
       style={backgroundImageStyle}
+      __css={styles}
     >
-      <div
-        className={bem("content", [], heroBaseClass)}
+      <Box
+        data-testid="hero-content"
         style={contentBoxStyling}
+        __css={styles.content}
       >
         {childrenToRender}
-      </div>
-
+      </Box>
       {locationDetails}
-    </div>
+    </Box>
   );
 }

package/src/components/Hero/HeroTypes.tsx

@@ -1,7 +1,19 @@
 export enum HeroTypes {
-  Campaign = "CAMPAIGN",
-  FiftyFifty = "FIFTYFIFTY",
-  Primary = "PRIMARY",
-  Secondary = "SECONDARY",
-  Tertiary = "TERTIARY",
+  Primary = "primary",
+  Secondary = "secondary",
+  SecondaryBooksAndMore = "secondaryBooksAndMore",
+  SecondaryLocations = "secondaryLocations",
+  SecondaryResearch = "secondaryResearch",
+  SecondaryWhatsOn = "secondaryWhatsOn",
+  Tertiary = "tertiary",
+  Campaign = "campaign",
+  FiftyFifty = "fiftyfifty",
 }
+
+export const HeroSecondaryTypes = [
+  HeroTypes.Secondary,
+  HeroTypes.SecondaryBooksAndMore,
+  HeroTypes.SecondaryLocations,
+  HeroTypes.SecondaryResearch,
+  HeroTypes.SecondaryWhatsOn,
+];

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

@@ -0,0 +1,307 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Hero Renders the UI snapshot correctly 1`] = `
+<div
+  className="css-0"
+  data-responsive-background-image={true}
+  data-testid="hero"
+  style={
+    Object {
+      "backgroundImage": "url(https://placeimg.com/1600/800/arch)",
+    }
+  }
+>
+  <div
+    className="css-0"
+    data-testid="hero-content"
+    style={
+      Object {
+        "backgroundColor": undefined,
+        "color": undefined,
+      }
+    }
+  >
+    <h1
+      className="chakra-heading css-0"
+      id="primary-hero"
+    >
+      Hero Primary
+    </h1>
+    <div
+      className="css-0"
+    >
+      Example Subtitle
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Hero Renders the UI snapshot correctly 2`] = `
+<div
+  className="css-0"
+  data-responsive-background-image={true}
+  data-testid="hero"
+  style={Object {}}
+>
+  <div
+    className="css-0"
+    data-testid="hero-content"
+    style={Object {}}
+  >
+    <img
+      alt="Image example"
+      className="image "
+      src="https://placeimg.com/800/400/animals"
+    />
+    <h1
+      className="chakra-heading css-0"
+      id="secondary-hero"
+    >
+      Hero Secondary
+    </h1>
+    <div
+      className="css-0"
+    >
+      Explore our collection of hundreds of online resources and databases. Use our free online content to help with your research, whether it's finding a single article, tracing a family tree, learning a new language, or anything in between.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Hero Renders the UI snapshot correctly 3`] = `
+<div
+  className="css-0"
+  data-responsive-background-image={true}
+  data-testid="hero"
+  style={Object {}}
+>
+  <div
+    className="css-0"
+    data-testid="hero-content"
+    style={Object {}}
+  >
+    <img
+      alt="Image example"
+      className="image "
+      src="https://placeimg.com/800/400/animals"
+    />
+    <h1
+      className="chakra-heading css-0"
+      id="secondary-hero"
+    >
+      Hero Secondary Books and More
+    </h1>
+    <div
+      className="css-0"
+    >
+      Explore our collection of hundreds of online resources and databases. Use our free online content to help with your research, whether it's finding a single article, tracing a family tree, learning a new language, or anything in between.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Hero Renders the UI snapshot correctly 4`] = `
+<div
+  className="css-0"
+  data-responsive-background-image={true}
+  data-testid="hero"
+  style={Object {}}
+>
+  <div
+    className="css-0"
+    data-testid="hero-content"
+    style={Object {}}
+  >
+    <img
+      alt="Image example"
+      className="image "
+      src="https://placeimg.com/800/400/animals"
+    />
+    <h1
+      className="chakra-heading css-0"
+      id="secondary-hero"
+    >
+      Hero Secondary Locations
+    </h1>
+    <div
+      className="css-0"
+    >
+      Explore our collection of hundreds of online resources and databases. Use our free online content to help with your research, whether it's finding a single article, tracing a family tree, learning a new language, or anything in between.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Hero Renders the UI snapshot correctly 5`] = `
+<div
+  className="css-0"
+  data-responsive-background-image={true}
+  data-testid="hero"
+  style={Object {}}
+>
+  <div
+    className="css-0"
+    data-testid="hero-content"
+    style={Object {}}
+  >
+    <img
+      alt="Image example"
+      className="image "
+      src="https://placeimg.com/800/400/animals"
+    />
+    <h1
+      className="chakra-heading css-0"
+      id="secondary-hero"
+    >
+      Hero Secondary
+    </h1>
+    <div
+      className="css-0"
+    >
+      Explore our collection of hundreds of online resources and databases. Use our free online content to help with your research, whether it's finding a single article, tracing a family tree, learning a new language, or anything in between.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Hero Renders the UI snapshot correctly 6`] = `
+<div
+  className="css-0"
+  data-responsive-background-image={true}
+  data-testid="hero"
+  style={Object {}}
+>
+  <div
+    className="css-0"
+    data-testid="hero-content"
+    style={Object {}}
+  >
+    <img
+      alt="Image example"
+      className="image "
+      src="https://placeimg.com/800/400/animals"
+    />
+    <h1
+      className="chakra-heading css-0"
+      id="secondary-hero"
+    >
+      Hero Secondary What's On
+    </h1>
+    <div
+      className="css-0"
+    >
+      Explore our collection of hundreds of online resources and databases. Use our free online content to help with your research, whether it's finding a single article, tracing a family tree, learning a new language, or anything in between.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Hero Renders the UI snapshot correctly 7`] = `
+<div
+  className="css-0"
+  data-responsive-background-image={true}
+  data-testid="hero"
+  style={
+    Object {
+      "backgroundColor": undefined,
+    }
+  }
+>
+  <div
+    className="css-0"
+    data-testid="hero-content"
+    style={
+      Object {
+        "backgroundColor": undefined,
+        "color": undefined,
+      }
+    }
+  >
+    <h1
+      className="chakra-heading css-0"
+      id="tertiary-hero"
+    >
+      Hero Tertiary
+    </h1>
+    <p>
+      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.
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Hero Renders the UI snapshot correctly 8`] = `
+<div
+  className="css-0"
+  data-responsive-background-image={true}
+  data-testid="hero"
+  style={
+    Object {
+      "backgroundImage": "url(https://placeimg.com/2400/800/nature/grayscale)",
+    }
+  }
+>
+  <div
+    className="css-0"
+    data-testid="hero-content"
+    style={
+      Object {
+        "backgroundColor": undefined,
+        "color": undefined,
+      }
+    }
+  >
+    <img
+      alt="Image example"
+      className="image "
+      src="https://placeimg.com/800/400/animals"
+    />
+    <div
+      className="css-0"
+    >
+      <h1
+        className="chakra-heading css-0"
+        id="campaign-hero"
+      >
+        Hero Campaign
+      </h1>
+      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.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Hero Renders the UI snapshot correctly 9`] = `
+<div
+  className="css-0"
+  data-responsive-background-image={true}
+  data-testid="hero"
+  style={
+    Object {
+      "backgroundColor": undefined,
+    }
+  }
+>
+  <div
+    className="css-0"
+    data-testid="hero-content"
+    style={
+      Object {
+        "backgroundColor": undefined,
+        "color": undefined,
+      }
+    }
+  >
+    <img
+      alt="Image example"
+      className="image "
+      src="https://placeimg.com/800/400/animals"
+    />
+    <div
+      className="css-0"
+    >
+      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.
+    </div>
+  </div>
+</div>
+`;

package/src/components/HorizontalRule/HorizontalRule.stories.mdx

@@ -10,9 +10,10 @@ import { withDesign } from "storybook-addon-designs";
 
 import HorizontalRule from "./HorizontalRule";
 import { action } from "@storybook/addon-actions";
+import { getCategory } from "../../utils/componentCategories";
 
 <Meta
-  title="HorizontalRule"
+  title={getCategory("HorizontalRule")}
   component={HorizontalRule}
   decorators={[withDesign]}
   parameters={{
@@ -31,6 +32,10 @@ import { action } from "@storybook/addon-actions";
 
 # Horizontal Rule
 
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.23.0`   |
+
 <Description of={HorizontalRule} />
 
 The `HorizontalRule` component renders a basic `<hr>` element. The `height`, `width` and `alignment` can be customized.

package/src/components/HorizontalRule/_HorizontalRule.scss

@@ -1,5 +1,5 @@
 .horizontal-rule {
-  background-color: $gray-light;
+  background-color: $gray-light-cool;
   border: 0;
   height: 2px;
   margin-bottom: var(--space-s);