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

package/src/components/Heading/Heading.tsx

@@ -1,21 +1,25 @@
 // MT-82, MT 225, etc
 import * as React from "react";
-import bem from "../../utils/bem";
-import { HeadingDisplaySizes } from "./HeadingDisplaySizes";
+import {
+  Box,
+  Heading as ChakraHeading,
+  Link as ChakraLink,
+  useStyleConfig,
+} from "@chakra-ui/react";
+
+import { HeadingDisplaySizes, HeadingLevels } from "./HeadingTypes";
 
 export interface HeadingProps {
-  /** 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 `heading` */
   className?: string;
   /** Optional size used to override the default styles of the semantic HTML `<h>` elements */
   displaySize?: HeadingDisplaySizes;
   /** Optional ID that other components can cross reference for accessibility purposes */
   id?: string;
-  /** Number 1-6; used to create the `<h*>` tag */
-  level: number;
-  /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  modifiers?: string[];
+  /** Optional number 1-6 used to create the `<h*>` tag; if prop is not passed, `Heading` will default to `<h2>` */
+  level?: HeadingLevels;
+  /** Optionally pass in additional Chakra-based styles. */
+  sx?: { [key: string]: any };
   /** Inner text of the `<h*>` element */
   text?: string;
   /** Optional URL that header points to; when `url` prop is passed to `Heading`, a child `<a>` element is created and the heading text becomes an active link */
@@ -24,24 +28,36 @@ export interface HeadingProps {
   urlClass?: string;
 }
 
-export default function Heading(props: React.PropsWithChildren<HeadingProps>) {
+// Used to map between ButtonTypes enum values and Chakra variant options.
+const variantMap = {};
+for (const type in HeadingDisplaySizes) {
+  variantMap[HeadingDisplaySizes[type]] = HeadingDisplaySizes[type];
+}
+
+/**
+ * Map the HeadingDisplaySizes to the Heading Chakra theme variant object. If a wrong
+ * value is passed (typically in non-Typescript scenarios), then the default
+ * is "null" and displaySize is not envoked.
+ */
+const getVariant = (displaySize) => variantMap[displaySize] || null;
+
+function Heading(props: React.PropsWithChildren<HeadingProps>) {
   const {
-    blockName,
     className,
     displaySize,
     id,
-    level,
-    modifiers = [],
+    level = HeadingLevels.Two,
+    sx = {},
     text,
     url,
     urlClass,
   } = props;
-
-  const baseClass = "heading";
-
-  if (displaySize) {
-    modifiers.push(displaySize);
-  }
+  const variant = displaySize ? getVariant(displaySize) : `h${level}`;
+  const styles = useStyleConfig("Heading", { variant });
+  // Combine native base styles with any additional styles.
+  // This is used only in the `Hero` component, for now.
+  const finalStyles = { ...styles, ...sx };
+  const asHeading: any = `h${level}`;
 
   if (level < 1 || level > 6) {
     throw new Error("Heading only supports levels 1-6");
@@ -62,25 +78,25 @@ export default function Heading(props: React.PropsWithChildren<HeadingProps>) {
     );
   }
 
-  let content: string | React.ReactNode;
-  if (props.children) {
-    content = url
-      ? React.createElement(
-          "a",
-          { href: url, className: urlClass },
-          props.children
-        )
-      : props.children;
-  } else {
-    content = url
-      ? React.createElement("a", { href: url, className: urlClass }, text)
-      : text;
-  }
+  const contentToRender = props.children ? props.children : text;
+  const content = url ? (
+    <Box as={ChakraLink} href={url} className={urlClass}>
+      {contentToRender}
+    </Box>
+  ) : (
+    contentToRender
+  );
 
-  const headingProps = {
-    className: bem(baseClass, modifiers, blockName, [className]),
-    id: id,
-  };
-
-  return React.createElement("h" + level, headingProps, content);
+  return (
+    <ChakraHeading
+      id={id}
+      as={asHeading}
+      sx={finalStyles}
+      className={className}
+    >
+      {content}
+    </ChakraHeading>
+  );
 }
+
+export default Heading;

package/src/components/Heading/{HeadingDisplaySizes.tsx → HeadingTypes.tsx}

@@ -4,3 +4,12 @@ export enum HeadingDisplaySizes {
   Tertiary = "tertiary",
   Callout = "callout",
 }
+
+export enum HeadingLevels {
+  One = 1,
+  Two = 2,
+  Three = 3,
+  Four = 4,
+  Five = 5,
+  Six = 6,
+}

package/src/components/HelperErrorText/HelperErrorText.stories.tsx

@@ -2,9 +2,10 @@ import * as React from "react";
 
 import HelperErrorText from "./HelperErrorText";
 import { boolean } from "@storybook/addon-knobs";
+import { getCategory } from "../../utils/componentCategories";
 
 export default {
-  title: "HelperErrorText",
+  title: getCategory("HelperErrorText"),
   component: HelperErrorText,
 };
 

package/src/components/HelperErrorText/_HelperErrorText.scss

@@ -4,6 +4,6 @@
   font-size: var(--font-size--1);
 
   &--error {
-    color: var(--ui-error);
+    color: var(--ui-error-primary);
   }
 }

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

@@ -3,20 +3,21 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
+import { Box, VStack } from "@chakra-ui/react";
 
 import Hero from "./Hero";
-import { HeroTypes } from "./HeroTypes";
+import { HeroTypes, HeroSecondaryTypes } from "./HeroTypes";
 import Image from "../Image/Image";
 import Heading from "../Heading/Heading";
-import sections from "../../utils/siteSections";
-import { action } from "@storybook/addon-actions";
+import { HeadingLevels } from "../Heading/HeadingTypes";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
 
 <Meta
-  title="Hero"
+  title={getCategory("Hero")}
   component={Hero}
   decorators={[withDesign]}
   parameters={{
@@ -28,32 +29,27 @@ import { action } from "@storybook/addon-actions";
     jest: ["Hero.test.tsx"],
   }}
   argTypes={{
-    attributes: { table: { disable: true } },
-    blockName: { table: { disable: true } },
-    className: { table: { disable: true } },
+    backgroundColor: { table: { disable: true } },
+    foregroundColor: { table: { disable: true } },
     heading: { table: { disable: true } },
-    modifiers: { table: { disable: true } },
-    subHeaderText: { table: { disable: true } },
     image: { table: { disable: true } },
+    locationDetails: { table: { disable: true } },
+    subHeaderText: { table: { disable: true } },
   }}
 />
 
 export const secondarySubHeaderText = (
-  <div className="hero__body-text">
+  <>
     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>
+  </>
 );
 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 secondaryImage = (
-  <Image
-    src="https://placeimg.com/800/400/animals"
-    blockName="hero"
-    alt="Image example"
-  />
+export const image = (
+  <Image src="https://placeimg.com/800/400/animals" alt="Image example" />
 );
 
 # Hero
@@ -61,17 +57,19 @@ export const secondaryImage = (
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.2.0`    |
-| Latest            | `0.23.4`   |
+| Latest            | `0.25.1`   |
 
 <Description of={Hero} />
 
-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.
+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.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story
     name="Hero Props"
     args={{
-      heroType: HeroTypes.Primary,
+      heroType: HeroTypes.Campaign,
     }}
   >
     {(args) =>
@@ -79,32 +77,21 @@ The `Hero` component is used to display a full width banner at the top of a page
         <Hero
           {...args}
           heading={
-            <Heading level={1} id="1" text="Hero Primary" blockName="hero" />
+            <Heading level={HeadingLevels.One} id="1" text="Hero Primary" />
           }
           subHeaderText="Example Subtitle"
           backgroundImageSrc="https://placeimg.com/2400/800/nature"
         />
       )) ||
-      (args.heroType === HeroTypes.Secondary && (
-        <div className={"nypl-ds nypl--books-and-more"}>
+      (HeroSecondaryTypes.includes(args.heroType) && (
+        <div className="nypl--books-and-more">
           <Hero
             {...args}
             heading={
-              <Heading
-                level={1}
-                id="1"
-                text="Hero Secondary"
-                blockName="hero"
-              />
+              <Heading level={HeadingLevels.One} id="1" text="Hero Secondary" />
             }
             subHeaderText={secondarySubHeaderText}
-            image={
-              <Image
-                src="https://placeimg.com/800/400/animals"
-                blockName="hero"
-                alt="Image example"
-              />
-            }
+            image={image}
           />
         </div>
       )) ||
@@ -112,36 +99,34 @@ The `Hero` component is used to display a full width banner at the top of a page
         <Hero
           {...args}
           heading={
-            <Heading level={1} id="1" text="Hero Tertiary" blockName="hero" />
+            <Heading level={HeadingLevels.One} id="1" text="Hero Tertiary" />
           }
           subHeaderText={otherSubHeaderText}
         />
       )) ||
-      (args.heroType === HeroTypes.FiftyFifty && (
+      (args.heroType === HeroTypes.Campaign && (
         <Hero
           {...args}
+          heading={
+            <Heading level={HeadingLevels.One} id="1" text="Hero Campaign" />
+          }
           subHeaderText={otherSubHeaderText}
+          backgroundImageSrc="https://placeimg.com/2400/800/nature"
           image={
             <Image
-              src="https://placeimg.com/600/200/animals"
-              blockName="hero"
+              src="https://placeimg.com/800/400/animals"
               alt="Image example"
             />
           }
         />
       )) ||
-      (args.heroType === HeroTypes.Campaign && (
+      (args.heroType === HeroTypes.FiftyFifty && (
         <Hero
           {...args}
-          heading={
-            <Heading level={1} id="1" text="Hero Campaign" blockName="hero" />
-          }
           subHeaderText={otherSubHeaderText}
-          backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
           image={
             <Image
-              src="https://placeimg.com/800/400/animals"
-              blockName="hero"
+              src="https://placeimg.com/600/200/animals"
               alt="Image example"
             />
           }
@@ -149,58 +134,183 @@ The `Hero` component is used to display a full width banner at the top of a page
       ))
     }
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="Hero Props" />
 
 ## Color Variations for Secondary Hero
 
-The background color for the title bar in `HeroTypes.Secondary` is determined by the placement of the `Hero` component within a comsuming app. The CSS for `Hero` is constructued to use classes of the `Hero` component's parent elements as a determinant for the title bar background color. Below are the four color variations available based on the consuming React app.
+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.
+
+```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">
-    <div className={"nypl-ds nypl--books-and-more"}>
+    <VStack spacing={10} align="stretch">
+      <Heading
+        level={HeadingLevels.Two}
+        text="HeroTypes.SecondaryBooksAndMore"
+        id="books-heading"
+      />
+      <Hero
+        heroType={HeroTypes.SecondaryBooksAndMore}
+        heading={
+          <Heading
+            level={HeadingLevels.One}
+            id="books-hero"
+            text="Books and More"
+          />
+        }
+        subHeaderText={secondarySubHeaderText}
+        image={image}
+      />
+      <Heading
+        level={HeadingLevels.Two}
+        text="HeroTypes.SecondaryLocations"
+        id="location-heading"
+      />
+      <Hero
+        heroType={HeroTypes.SecondaryLocations}
+        heading={
+          <Heading
+            level={HeadingLevels.One}
+            id="locations-hero"
+            text="Locations"
+          />
+        }
+        subHeaderText={secondarySubHeaderText}
+        image={image}
+      />
+      <Heading
+        level={HeadingLevels.Two}
+        text="HeroTypes.SecondaryResearch"
+        id="research-heading"
+      />
       <Hero
-        heroType={HeroTypes.Secondary}
+        heroType={HeroTypes.SecondaryResearch}
         heading={
-          <Heading level={1} id="1" text={"Books and More"} blockName="hero" />
+          <Heading
+            level={HeadingLevels.One}
+            id="research-hero"
+            text="Research"
+          />
         }
         subHeaderText={secondarySubHeaderText}
-        image={secondaryImage}
+        image={image}
       />
-    </div>
+      <Heading
+        level={HeadingLevels.Two}
+        text="HeroTypes.SecondaryWhatsOn"
+        id="whats-on-heading"
+      />
+      <Hero
+        heroType={HeroTypes.SecondaryWhatsOn}
+        heading={
+          <Heading
+            level={HeadingLevels.One}
+            id="whats-on-hero"
+            text="What's On"
+          />
+        }
+        subHeaderText={secondarySubHeaderText}
+        image={image}
+      />
+    </VStack>
   </Story>
 </Canvas>
 
-<Canvas>
-  <div className={"nypl-ds nypl--locations"}>
-    <Hero
-      heroType={HeroTypes.Secondary}
-      heading={<Heading level={1} id="1" text={"Locations"} blockName="hero" />}
-      subHeaderText={secondarySubHeaderText}
-      image={secondaryImage}
-    />
-  </div>
-</Canvas>
-
-<Canvas>
-  <div className={"nypl-ds nypl--research"}>
-    <Hero
-      heroType={HeroTypes.Secondary}
-      heading={<Heading level={1} id="1" text={"Research"} blockName="hero" />}
-      subHeaderText={secondarySubHeaderText}
-      image={secondaryImage}
-    />
-  </div>
-</Canvas>
+## All Variations
 
 <Canvas>
-  <div className={"nypl-ds nypl--whats-on"}>
-    <Hero
-      heroType={HeroTypes.Secondary}
-      heading={<Heading level={1} id="1" text={"What's On"} blockName="hero" />}
-      subHeaderText={secondarySubHeaderText}
-      image={secondaryImage}
-    />
-  </div>
+  <DSProvider>
+    <VStack spacing={10} align="stretch">
+      <Heading level={HeadingLevels.Two} text="Primary" id="primary-heading" />
+      <Hero
+        heroType={HeroTypes.Primary}
+        heading={
+          <Heading
+            level={HeadingLevels.One}
+            id="primary-hero"
+            text="Hero Primary"
+          />
+        }
+        backgroundImageSrc="https://placeimg.com/1600/800/arch"
+      />
+      <Heading
+        level={HeadingLevels.Two}
+        text="Secondary"
+        id="secondary-heading"
+      />
+      <div className="nypl--locations">
+        <Hero
+          heroType={HeroTypes.Secondary}
+          heading={
+            <Heading
+              level={HeadingLevels.One}
+              id="secondary-hero"
+              text="Hero Secondary"
+            />
+          }
+          subHeaderText={secondarySubHeaderText}
+          image={image}
+        />
+      </div>
+      <Heading
+        level={HeadingLevels.Two}
+        text="Tertiary"
+        id="tertiary-heading"
+      />
+      <Hero
+        heroType={HeroTypes.Tertiary}
+        heading={
+          <Heading
+            level={HeadingLevels.One}
+            id="tertiary-hero"
+            text="Hero Tertiary"
+          />
+        }
+        subHeaderText={otherSubHeaderText}
+      />
+      <Heading
+        level={HeadingLevels.Two}
+        text="Campaign"
+        id="campaign-heading"
+      />
+      <Hero
+        heroType={HeroTypes.Campaign}
+        heading={
+          <Heading
+            level={HeadingLevels.One}
+            id="campaign-hero"
+            text="Hero Campaign"
+          />
+        }
+        subHeaderText={otherSubHeaderText}
+        backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
+        image={image}
+      />
+      <Box marginTop="30px" />
+      <Heading
+        level={HeadingLevels.Two}
+        text="FiftyFifty"
+        id="fiftyfifty-heading"
+      />
+      <Hero
+        heroType={HeroTypes.FiftyFifty}
+        subHeaderText={otherSubHeaderText}
+        image={image}
+      />
+    </VStack>
+  </DSProvider>
 </Canvas>