@nypl/design-system-react-components 0.25.8 → 0.25.9

package/src/components/Heading/Heading.tsx

@@ -1,67 +1,67 @@
-// MT-82, MT 225, etc
+import { Heading as ChakraHeading, useStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
-import {
-  Box,
-  Heading as ChakraHeading,
-  Link as ChakraLink,
-  useStyleConfig,
-} from "@chakra-ui/react";
 
 import { HeadingDisplaySizes, HeadingLevels } from "./HeadingTypes";
+import Link from "../Link/Link";
+import { getVariant } from "../../utils/utils";
+import generateUUID from "../../helpers/generateUUID";
 
 export interface HeadingProps {
   /** Optionally pass in additional Chakra-based styles. */
   additionalStyles?: { [key: string]: any };
   /** Optional className that appears in addition to `heading` */
   className?: string;
-  /** Optional size used to override the default styles of the semantic HTML `<h>` elements */
+  /** Optional size used to override the default styles of the semantic HTM
+   * `<h>` elements */
   displaySize?: HeadingDisplaySizes;
   /** Optional ID that other components can cross reference for accessibility purposes */
   id?: string;
-  /** Optional number 1-6 used to create the `<h*>` tag; if prop is not passed, `Heading` will default to `<h2>` */
+  /** Optional number 1-6 used to create the `<h*>` tag; if prop is not passed,
+   * `Heading` will default to `<h2>` */
   level?: HeadingLevels;
   /** 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 */
+  /** 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 */
   url?: string;
   /** Optional className for the URL when the `url` prop is passed */
   urlClass?: string;
 }
 
-// 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;
+/** Map the word heading level to the number heading level. The default is 2. */
+const getMappedLevel = (level = HeadingLevels.Two) => {
+  const levelMap = {
+    one: 1,
+    two: 2,
+    three: 3,
+    four: 4,
+    five: 5,
+    six: 6,
+  };
+  return levelMap[level] || 2;
+};
 
 function Heading(props: React.PropsWithChildren<HeadingProps>) {
   const {
     additionalStyles = {},
     className,
     displaySize,
-    id,
+    id = generateUUID(),
     level = HeadingLevels.Two,
     text,
     url,
     urlClass,
   } = props;
-  const variant = displaySize ? getVariant(displaySize) : `h${level}`;
+  const finalLevel = getMappedLevel(level);
+  const variant = displaySize
+    ? getVariant(displaySize, HeadingDisplaySizes)
+    : `h${finalLevel}`;
   const styles = useStyleConfig("Heading", { variant });
   // Combine native base styles with any additional styles.
   // This is used in the `Hero` and `Notification` components.
   const finalStyles = { ...styles, ...additionalStyles };
-  const asHeading: any = `h${level}`;
-
-  if (level < 1 || level > 6) {
-    throw new Error("Heading only supports levels 1-6");
-  }
+  const asHeading: any = `h${finalLevel}`;
 
   if (!props.children && !text) {
     throw new Error("Heading has no children, please pass prop: text");
@@ -80,9 +80,9 @@ function Heading(props: React.PropsWithChildren<HeadingProps>) {
 
   const contentToRender = props.children ? props.children : text;
   const content = url ? (
-    <Box as={ChakraLink} href={url} className={urlClass}>
+    <Link className={urlClass} href={url} id={`${id}-link`}>
       {contentToRender}
-    </Box>
+    </Link>
   ) : (
     contentToRender
   );

package/src/components/Heading/HeadingTypes.tsx

@@ -6,10 +6,10 @@ export enum HeadingDisplaySizes {
 }
 
 export enum HeadingLevels {
-  One = 1,
-  Two = 2,
-  Three = 3,
-  Four = 4,
-  Five = 5,
-  Six = 6,
+  One = "one",
+  Two = "two",
+  Three = "three",
+  Four = "four",
+  Five = "five",
+  Six = "six",
 }

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

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Heading renders the UI snapshot correctly 1`] = `
+<h1
+  className="chakra-heading css-0"
+  id="basic"
+>
+  Heading text
+</h1>
+`;
+
+exports[`Heading renders the UI snapshot correctly 2`] = `
+<h1
+  className="chakra-heading css-0"
+  id="basicWithChildText"
+>
+  Heading text
+</h1>
+`;
+
+exports[`Heading renders the UI snapshot correctly 3`] = `
+<h1
+  className="chakra-heading css-0"
+  id="customDisplaySize"
+>
+  Heading with Secondary displaySize
+</h1>
+`;
+
+exports[`Heading renders the UI snapshot correctly 4`] = `
+<h6
+  className="chakra-heading css-0"
+  id="otherLevel"
+>
+  Heading level six
+</h6>
+`;
+
+exports[`Heading renders the UI snapshot correctly 5`] = `
+<h1
+  className="chakra-heading css-0"
+  id="withLink"
+>
+  <a
+    className="css-0"
+    href="fake-url"
+    id="withLink-link"
+    rel={null}
+    target={null}
+  >
+    Heading text is a link
+  </a>
+</h1>
+`;
+
+exports[`Heading renders the UI snapshot correctly 6`] = `
+<h1
+  className="chakra-heading css-0"
+  id="withCustomLink"
+>
+  Part of the heading text is
+  <a
+    className="custom-link"
+    href="fake-url"
+  >
+    <span>
+      a link
+    </span>
+  </a>
+</h1>
+`;

package/src/components/HelperErrorText/HelperErrorText.stories.mdx

@@ -1,13 +1,15 @@
 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 HelperErrorText from "./HelperErrorText";
+import Link from "../Link/Link";
+import Text from "../Text/Text";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
@@ -23,10 +25,20 @@ import DSProvider from "../../theme/provider";
     jest: ["HelperErrorText.test.tsx"],
   }}
   argTypes={{
-    ariaAtomic: { table: { disable: true } },
+    additionalStyles: { control: false },
+    ariaAtomic: {
+      control: false,
+      table: { defaultValue: { summary: true } },
+    },
+    ariaLive: {
+      table: { defaultValue: { summary: "polite" } },
+    },
     children: { table: { disable: true } },
-    className: { table: { disable: true } },
-    id: { table: { disable: true } },
+    className: { control: false },
+    id: { control: false },
+    isInvalid: {
+      table: { defaultValue: { summary: false } },
+    },
   }}
 />
 
@@ -35,41 +47,57 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.10`   |
-| Latest            | `0.25.3`   |
+| Latest            | `0.25.9`   |
 
 <Description of={HelperErrorText} />
 
 <Canvas withToolbar>
   <Story
-    name="Basic with Props"
+    name="HelperErrorText with Controls"
     args={{
+      additionalStyles: undefined,
+      ariaAtomic: undefined,
       ariaLive: "polite",
+      className: undefined,
+      id: "helperErrorText-id",
       isInvalid: false,
+      text: "This is the helper text!",
     }}
   >
     {(args) => (
-      <HelperErrorText {...args}>
-        {args.isInvalid
-          ? "This is the error text :("
-          : "This is the helper text!"}
-      </HelperErrorText>
+      <HelperErrorText
+        {...args}
+        text={args.isInvalid ? "This is the error text :(" : args.text}
+      />
     )}
   </Story>
 </Canvas>
 
-<ArgsTable story="Basic with Props" />
+<ArgsTable story="HelperErrorText with Controls" />
 
 ## With HTML Children
 
-The `HelperErrorText` component can take any React component or HTML element as
-its children.
+The `HelperErrorText` component can render any React component or HTML element
+through the `text` prop.
 
 <Canvas>
   <Story name="With HTML Children">
-    <HelperErrorText>
-      If you're unsure of your size, please view the{" "}
-      <a href="#sizing-chart">Sizing Chart</a>.
-    </HelperErrorText>
+    <HelperErrorText
+      text={
+        <>
+          This first example uses an HTML anchor element for{" "}
+          <a href="#">a link</a>.
+        </>
+      }
+    />
+    <HelperErrorText
+      text={
+        <Text>
+          This second example uses DS components, such as the{" "}
+          <Link href="#">`Link`</Link> component, and the `Text` component.
+        </Text>
+      }
+    />
   </Story>
 </Canvas>
 
@@ -80,7 +108,7 @@ NYPL "invalid" styling.
 
 <Canvas>
   <Story name="Invalid State">
-    <HelperErrorText isInvalid>This is the error text :(</HelperErrorText>
+    <HelperErrorText isInvalid text="This is the error text :(" />
   </Story>
 </Canvas>
 
@@ -107,7 +135,7 @@ announced immediately.
 
 <Canvas>
   <Story
-    name="With Aria Props"
+    name="With Aria Controls"
     args={{
       ariaAtomic: true,
       ariaLive: "polite",
@@ -115,10 +143,10 @@ announced immediately.
     }}
   >
     {(args) => (
-      <HelperErrorText {...args}>
-        Only invalid text can be read to screen readers with the appropriate
-        aria-atomic and aria-live props.
-      </HelperErrorText>
+      <HelperErrorText
+        {...args}
+        text="Only invalid text can be read to screen readers with the appropriate aria-atomic and aria-live props."
+      />
     )}
   </Story>
 </Canvas>

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>
 `;