@nypl/design-system-react-components 0.25.7 → 0.25.10

package/src/components/HelperErrorText/HelperErrorText.test.tsx

@@ -7,45 +7,51 @@ import HelperErrorText from "./HelperErrorText";
 
 describe("HelperErrorText Accessibility", () => {
   it("passes axe accessibility test", async () => {
-    const { container } = render(<HelperErrorText>Text</HelperErrorText>);
+    const { container } = render(<HelperErrorText text="Text" />);
     expect(await axe(container)).toHaveNoViolations();
   });
 });
 
 describe("HelperErrorText", () => {
   it("renders the text passed", () => {
-    render(<HelperErrorText>Text</HelperErrorText>);
+    render(<HelperErrorText text="Text" />);
     expect(screen.getByText("Text")).toBeInTheDocument();
   });
 
+  it("renders the text passed as an HTML string", () => {
+    render(<HelperErrorText text="<b>This text is bold</b>" />);
+    expect(screen.getByText("This text is bold")).toBeInTheDocument();
+  });
+
+  it("renders the text passed as HTML", () => {
+    render(<HelperErrorText text={<b>This text is bold</b>} />);
+    expect(screen.getByText("This text is bold")).toBeInTheDocument();
+  });
+
   it("renders the invalid state", () => {
-    const utils = render(<HelperErrorText>Text</HelperErrorText>);
+    const utils = render(<HelperErrorText text="Text" />);
 
     // False by default. Note, this is a custom `data-*` attribute only used
     // for testing the invalid state.
     expect(screen.getByText("Text")).toHaveAttribute("data-isinvalid", "false");
 
-    utils.rerender(<HelperErrorText isInvalid>Text</HelperErrorText>);
+    utils.rerender(<HelperErrorText isInvalid text="Text" />);
     expect(screen.getByText("Text")).toHaveAttribute("data-isinvalid", "true");
   });
 
   it("has aria-live and aria-atomic attributes when errored", () => {
-    render(<HelperErrorText isInvalid>Text</HelperErrorText>);
+    render(<HelperErrorText isInvalid text="Text" />);
     expect(screen.getByText("Text")).toHaveAttribute("aria-live", "polite");
     expect(screen.getByText("Text")).toHaveAttribute("aria-atomic");
   });
 
   it("accepts an aria-atomic value of false", () => {
-    const utils = render(
-      <HelperErrorText isInvalid>Static Text</HelperErrorText>
-    );
+    const utils = render(<HelperErrorText isInvalid text="Static Text" />);
     // The default is "true".
     expect(screen.getByText("Static Text")).toHaveAttribute("aria-atomic");
 
     utils.rerender(
-      <HelperErrorText ariaAtomic={false} isInvalid>
-        Static Text
-      </HelperErrorText>
+      <HelperErrorText ariaAtomic={false} isInvalid text="Static Text" />
     );
     // But the prop accepts false in case only part of the helper text
     // should only be read instead of the whole region.
@@ -57,16 +63,37 @@ describe("HelperErrorText", () => {
 
   it("Renders the UI snapshot correctly", () => {
     const basic = renderer
-      .create(<HelperErrorText id="basic">Text</HelperErrorText>)
+      .create(<HelperErrorText id="basic" text="Text" />)
       .toJSON();
     const invalid = renderer
+      .create(<HelperErrorText id="invalid" isInvalid text="Text" />)
+      .toJSON();
+    const withHTMLString = renderer
       .create(
-        <HelperErrorText id="invalid" isInvalid>
-          Text
-        </HelperErrorText>
+        <HelperErrorText
+          id="invalid"
+          isInvalid
+          text="This helper text <b>contains HTML in the string</b>."
+        />
       )
       .toJSON();
+    const withHTMLElement = renderer
+      .create(
+        <HelperErrorText
+          id="invalid"
+          isInvalid
+          text={
+            <>
+              This helper text <b>contains HTML</b>.
+            </>
+          }
+        />
+      )
+      .toJSON();
+
     expect(basic).toMatchSnapshot();
     expect(invalid).toMatchSnapshot();
+    expect(withHTMLString).toMatchSnapshot();
+    expect(withHTMLElement).toMatchSnapshot();
   });
 });

package/src/components/HelperErrorText/HelperErrorText.tsx

@@ -4,6 +4,7 @@ import { Box, useStyleConfig } from "@chakra-ui/react";
 import generateUUID from "../../helpers/generateUUID";
 
 export type AriaLiveValues = "assertive" | "off" | "polite";
+export type HelperErrorTextType = string | JSX.Element;
 
 interface HelperErrorTextProps {
   /** Optionally pass in additional Chakra-based styles. */
@@ -24,38 +25,37 @@ interface HelperErrorTextProps {
   id?: string;
   /** Toggles between helper and invalid styling. */
   isInvalid?: boolean;
+  /** The text to display. */
+  text: HelperErrorTextType;
 }
 
 /**
  * Helper or Error text for forms
  */
-export default function HelperErrorText(
-  props: React.PropsWithChildren<HelperErrorTextProps>
-) {
-  const {
-    additionalStyles = {},
-    ariaAtomic = true,
-    ariaLive = "polite",
-    children,
-    className = "",
-    id = generateUUID(),
-    isInvalid = false,
-  } = props;
+export default function HelperErrorText({
+  additionalStyles = {},
+  ariaAtomic = true,
+  ariaLive = "polite",
+  className = "",
+  id = generateUUID(),
+  isInvalid = false,
+  text,
+}: HelperErrorTextProps) {
   // Only announce the text in the invalid state.
   const announceAriaLive = isInvalid;
   const styles = useStyleConfig("HelperErrorText", { isInvalid });
   const finalStyles = { ...styles, ...additionalStyles };
-
-  return (
-    <Box
-      id={id}
-      className={className}
-      aria-atomic={ariaAtomic}
-      data-isinvalid={isInvalid}
-      aria-live={announceAriaLive ? ariaLive : "off"}
-      __css={finalStyles}
-    >
-      {children}
-    </Box>
+  const props = {
+    "aria-atomic": ariaAtomic,
+    "aria-live": announceAriaLive ? ariaLive : "off",
+    className,
+    "data-isinvalid": isInvalid,
+    id,
+    __css: finalStyles,
+  };
+  return typeof text === "string" ? (
+    <Box {...props} dangerouslySetInnerHTML={{ __html: text }} />
+  ) : (
+    <Box {...props}>{text}</Box>
   );
 }

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

@@ -5,14 +5,47 @@ exports[`HelperErrorText Renders the UI snapshot correctly 1`] = `
   aria-atomic={true}
   aria-live="off"
   className=" css-0"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "Text",
+    }
+  }
   data-isinvalid={false}
   id="basic"
->
-  Text
-</div>
+/>
 `;
 
 exports[`HelperErrorText Renders the UI snapshot correctly 2`] = `
+<div
+  aria-atomic={true}
+  aria-live="polite"
+  className=" css-0"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "Text",
+    }
+  }
+  data-isinvalid={true}
+  id="invalid"
+/>
+`;
+
+exports[`HelperErrorText Renders the UI snapshot correctly 3`] = `
+<div
+  aria-atomic={true}
+  aria-live="polite"
+  className=" css-0"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "This helper text <b>contains HTML in the string</b>.",
+    }
+  }
+  data-isinvalid={true}
+  id="invalid"
+/>
+`;
+
+exports[`HelperErrorText Renders the UI snapshot correctly 4`] = `
 <div
   aria-atomic={true}
   aria-live="polite"
@@ -20,6 +53,10 @@ exports[`HelperErrorText Renders the UI snapshot correctly 2`] = `
   data-isinvalid={true}
   id="invalid"
 >
-  Text
+  This helper text 
+  <b>
+    contains HTML
+  </b>
+  .
 </div>
 `;

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

@@ -1,20 +1,23 @@
+import { Box, VStack } from "@chakra-ui/react";
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
-import { Box, VStack } from "@chakra-ui/react";
 
+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 Heading from "../Heading/Heading";
-import { HeadingLevels } from "../Heading/HeadingTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const enumValues = getStorybookEnumValues(HeroTypes, "HeroTypes");
 
 <Meta
   title={getCategory("Hero")}
@@ -23,18 +26,22 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10968%3A5314",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=36817%3A23704",
     },
     jest: ["Hero.test.tsx"],
   }}
   argTypes={{
-    backgroundColor: { table: { disable: true } },
-    foregroundColor: { table: { disable: true } },
-    heading: { table: { disable: true } },
-    image: { table: { disable: true } },
-    locationDetails: { table: { disable: true } },
-    subHeaderText: { table: { disable: true } },
+    backgroundColor: { control: false },
+    foregroundColor: { control: false },
+    heading: { control: false },
+    heroType: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "HeroTypes.Primary" } },
+      options: enumValues.options,
+    },
+    image: { control: false },
+    locationDetails: { control: false },
+    subHeaderText: { control: false },
   }}
 />
 
@@ -67,76 +74,88 @@ descriptive text and images.
 
 <Canvas withToolbar>
   <Story
-    name="Hero Props"
+    name="Hero with Controls"
     args={{
-      heroType: HeroTypes.Campaign,
+      backgroundColor: undefined,
+      backgroundImageSrc: undefined,
+      foregroundColor: undefined,
+      heading: undefined,
+      heroType: "HeroTypes.Primary",
+      image: undefined,
+      locationDetails: undefined,
+      subHeaderText: undefined,
     }}
   >
     {(args) =>
-      (args.heroType === HeroTypes.Primary && (
+      (args.heroType === "HeroTypes.Primary" && (
         <Hero
           {...args}
+          backgroundImageSrc="https://placeimg.com/2400/800/nature"
           heading={
             <Heading level={HeadingLevels.One} id="1" text="Hero Primary" />
           }
+          heroType={enumValues.getValue(args.heroType)}
           subHeaderText="Example Subtitle"
-          backgroundImageSrc="https://placeimg.com/2400/800/nature"
         />
       )) ||
-      (HeroSecondaryTypes.includes(args.heroType) && (
+      (HeroSecondaryTypes.includes(enumValues.getValue(args.heroType)) && (
         <div className="nypl--books-and-more">
           <Hero
             {...args}
             heading={
               <Heading level={HeadingLevels.One} id="1" text="Hero Secondary" />
             }
-            subHeaderText={secondarySubHeaderText}
+            heroType={enumValues.getValue(args.heroType)}
             image={image}
+            subHeaderText={secondarySubHeaderText}
           />
         </div>
       )) ||
-      (args.heroType === HeroTypes.Tertiary && (
+      (args.heroType === "HeroTypes.Tertiary" && (
         <Hero
           {...args}
           heading={
             <Heading level={HeadingLevels.One} id="1" text="Hero Tertiary" />
           }
+          heroType={enumValues.getValue(args.heroType)}
           subHeaderText={otherSubHeaderText}
         />
       )) ||
-      (args.heroType === HeroTypes.Campaign && (
+      (args.heroType === "HeroTypes.Campaign" && (
         <Hero
           {...args}
+          backgroundImageSrc="https://placeimg.com/2400/800/nature"
           heading={
             <Heading level={HeadingLevels.One} id="1" text="Hero Campaign" />
           }
-          subHeaderText={otherSubHeaderText}
-          backgroundImageSrc="https://placeimg.com/2400/800/nature"
+          heroType={enumValues.getValue(args.heroType)}
           image={
             <Image
               src="https://placeimg.com/800/400/animals"
               alt="Image example"
             />
           }
+          subHeaderText={otherSubHeaderText}
         />
       )) ||
-      (args.heroType === HeroTypes.FiftyFifty && (
+      (args.heroType === "HeroTypes.FiftyFifty" && (
         <Hero
           {...args}
-          subHeaderText={otherSubHeaderText}
+          heroType={enumValues.getValue(args.heroType)}
           image={
             <Image
               src="https://placeimg.com/600/200/animals"
               alt="Image example"
             />
           }
+          subHeaderText={otherSubHeaderText}
         />
       ))
     }
   </Story>
 </Canvas>
 
-<ArgsTable story="Hero Props" />
+<ArgsTable story="Hero with Controls" />
 
 ## Color Variations for Secondary Hero
 
@@ -159,12 +178,12 @@ parent wrapper's CSS class name for background color updates. Now, the proper
   <Story name="Color Variations for Secondary Hero">
     <VStack spacing={10} align="stretch">
       <Heading
+        id="books-heading"
         level={HeadingLevels.Two}
         text="HeroTypes.SecondaryBooksAndMore"
-        id="books-heading"
       />
       <Hero
-        heroType={HeroTypes.SecondaryBooksAndMore}
+        image={image}
         heading={
           <Heading
             level={HeadingLevels.One}
@@ -172,16 +191,16 @@ parent wrapper's CSS class name for background color updates. Now, the proper
             text="Books and More"
           />
         }
+        heroType={HeroTypes.SecondaryBooksAndMore}
         subHeaderText={secondarySubHeaderText}
-        image={image}
       />
       <Heading
+        id="location-heading"
         level={HeadingLevels.Two}
         text="HeroTypes.SecondaryLocations"
-        id="location-heading"
       />
       <Hero
-        heroType={HeroTypes.SecondaryLocations}
+        image={image}
         heading={
           <Heading
             level={HeadingLevels.One}
@@ -189,16 +208,16 @@ parent wrapper's CSS class name for background color updates. Now, the proper
             text="Locations"
           />
         }
+        heroType={HeroTypes.SecondaryLocations}
         subHeaderText={secondarySubHeaderText}
-        image={image}
       />
       <Heading
+        id="research-heading"
         level={HeadingLevels.Two}
         text="HeroTypes.SecondaryResearch"
-        id="research-heading"
       />
       <Hero
-        heroType={HeroTypes.SecondaryResearch}
+        image={image}
         heading={
           <Heading
             level={HeadingLevels.One}
@@ -206,16 +225,15 @@ parent wrapper's CSS class name for background color updates. Now, the proper
             text="Research"
           />
         }
+        heroType={HeroTypes.SecondaryResearch}
         subHeaderText={secondarySubHeaderText}
-        image={image}
       />
       <Heading
+        id="whats-on-heading"
         level={HeadingLevels.Two}
         text="HeroTypes.SecondaryWhatsOn"
-        id="whats-on-heading"
       />
       <Hero
-        heroType={HeroTypes.SecondaryWhatsOn}
         heading={
           <Heading
             level={HeadingLevels.One}
@@ -223,8 +241,9 @@ parent wrapper's CSS class name for background color updates. Now, the proper
             text="What's On"
           />
         }
-        subHeaderText={secondarySubHeaderText}
+        heroType={HeroTypes.SecondaryWhatsOn}
         image={image}
+        subHeaderText={secondarySubHeaderText}
       />
     </VStack>
   </Story>
@@ -237,7 +256,7 @@ parent wrapper's CSS class name for background color updates. Now, the proper
     <VStack spacing={10} align="stretch">
       <Heading level={HeadingLevels.Two} text="Primary" id="primary-heading" />
       <Hero
-        heroType={HeroTypes.Primary}
+        backgroundImageSrc="https://placeimg.com/1600/800/arch"
         heading={
           <Heading
             level={HeadingLevels.One}
@@ -245,16 +264,15 @@ parent wrapper's CSS class name for background color updates. Now, the proper
             text="Hero Primary"
           />
         }
-        backgroundImageSrc="https://placeimg.com/1600/800/arch"
+        heroType={HeroTypes.Primary}
       />
       <Heading
+        id="secondary-heading"
         level={HeadingLevels.Two}
         text="Secondary"
-        id="secondary-heading"
       />
       <div className="nypl--locations">
         <Hero
-          heroType={HeroTypes.Secondary}
           heading={
             <Heading
               level={HeadingLevels.One}
@@ -262,17 +280,17 @@ parent wrapper's CSS class name for background color updates. Now, the proper
               text="Hero Secondary"
             />
           }
-          subHeaderText={secondarySubHeaderText}
+          heroType={HeroTypes.Secondary}
           image={image}
+          subHeaderText={secondarySubHeaderText}
         />
       </div>
       <Heading
+        id="tertiary-heading"
         level={HeadingLevels.Two}
         text="Tertiary"
-        id="tertiary-heading"
       />
       <Hero
-        heroType={HeroTypes.Tertiary}
         heading={
           <Heading
             level={HeadingLevels.One}
@@ -280,10 +298,10 @@ parent wrapper's CSS class name for background color updates. Now, the proper
             text="Hero Tertiary with Sub-Header"
           />
         }
+        heroType={HeroTypes.Tertiary}
         subHeaderText={otherSubHeaderText}
       />
       <Hero
-        heroType={HeroTypes.Tertiary}
         heading={
           <Heading
             level={HeadingLevels.One}
@@ -291,13 +309,15 @@ parent wrapper's CSS class name for background color updates. Now, the proper
             text="Hero Tertiary without Sub-Header"
           />
         }
+        heroType={HeroTypes.Tertiary}
       />
       <Heading
+        id="campaign-heading"
         level={HeadingLevels.Two}
         text="Campaign"
-        id="campaign-heading"
       />
       <Hero
+        backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
         heroType={HeroTypes.Campaign}
         heading={
           <Heading
@@ -306,20 +326,19 @@ parent wrapper's CSS class name for background color updates. Now, the proper
             text="Hero Campaign"
           />
         }
-        subHeaderText={otherSubHeaderText}
-        backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
         image={image}
+        subHeaderText={otherSubHeaderText}
       />
       <Box marginTop="30px" />
       <Heading
+        id="fiftyfifty-heading"
         level={HeadingLevels.Two}
         text="FiftyFifty"
-        id="fiftyfifty-heading"
       />
       <Hero
         heroType={HeroTypes.FiftyFifty}
-        subHeaderText={otherSubHeaderText}
         image={image}
+        subHeaderText={otherSubHeaderText}
       />
     </VStack>
   </DSProvider>

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

@@ -1,14 +1,15 @@
+import { action } from "@storybook/addon-actions";
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
 import HorizontalRule from "./HorizontalRule";
-import { action } from "@storybook/addon-actions";
+import SimpleGrid from "../Grid/SimpleGrid";
 import { getCategory } from "../../utils/componentCategories";
 
 <Meta
@@ -18,13 +19,14 @@ import { getCategory } from "../../utils/componentCategories";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=19659%3A0",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=19659%3A0",
     },
     jest: ["HorizontalRule.test.tsx"],
   }}
   argTypes={{
-    className: { table: { disable: true } },
+    className: { control: false },
+    height: { table: { defaultValue: { summary: "2px" } } },
+    width: { table: { defaultValue: { summary: "100%" } } },
   }}
 />
 
@@ -33,7 +35,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.0`   |
-| Latest            | `0.25.3`   |
+| Latest            | `0.25.10`  |
 
 <Description of={HorizontalRule} />
 

package/src/components/HorizontalRule/HorizontalRule.tsx

@@ -1,6 +1,6 @@
 // HorizontalRule
-import * as React from "react";
 import { Box, useStyleConfig } from "@chakra-ui/react";
+import * as React from "react";
 
 export interface HorizontalRuleProps {
   /** Optional alignment value to align the horizontal rule to one side or the
@@ -16,14 +16,12 @@ export interface HorizontalRuleProps {
   height?: string;
   /** Optional width value. This value should be entered with the same
    * formatting as a CSS width attribute (ex. `50%`, `640px`, `20rem`). If
-   * omitted, the horizontal rule will have a default width of "auto". */
+   * omitted, the horizontal rule will have a default width of "100%". */
   width?: string;
 }
 
-export default function HorizontalRule(
-  props: React.ComponentProps<"hr"> & HorizontalRuleProps
-) {
-  const { align, className, height = "2px", width = "auto" } = props;
+export default function HorizontalRule(props: HorizontalRuleProps) {
+  const { align, className, height = "2px", width = "100%" } = props;
   const styles = useStyleConfig("HorizontalRule", { align });
   let finalHeight = height;