@nypl/design-system-react-components 0.26.1 → 1.0.0

package/src/components/Heading/Heading.stories.mdx

@@ -8,18 +8,7 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import Heading from "./Heading";
-import { HeadingSizes, HeadingLevels } from "./HeadingTypes";
 import { getCategory } from "../../utils/componentCategories";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const sizesEnumValues = getStorybookEnumValues(
-  HeadingSizes,
-  "HeadingSizes"
-);
-export const levelsEnumValues = getStorybookEnumValues(
-  HeadingLevels,
-  "HeadingLevels"
-);
 
 <Meta
   title={getCategory("Heading")}
@@ -33,17 +22,10 @@ export const levelsEnumValues = getStorybookEnumValues(
     jest: ["Heading.test.tsx"],
   }}
   argTypes={{
-    additionalStyles: { control: false },
     className: { control: false },
     id: { control: false },
     level: {
-      control: { type: "select" },
-      options: levelsEnumValues.options,
-      table: { defaultValue: { summary: "HeadingLevels.Two" } },
-    },
-    size: {
-      control: { type: "select" },
-      options: sizesEnumValues.options,
+      table: { defaultValue: { summary: "two" } },
     },
   }}
 />
@@ -53,7 +35,7 @@ export const levelsEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -79,23 +61,16 @@ semantic elements can be overwritten using the `size` prop.
   <Story
     name="Heading with Controls"
     args={{
-      additionalStyles: undefined,
       className: undefined,
       id: "heading-id",
-      level: "HeadingLevels.Two",
+      level: "two",
       size: undefined,
       text: "Default Heading",
       url: undefined,
       urlClass: undefined,
     }}
   >
-    {(args) => (
-      <Heading
-        {...args}
-        level={levelsEnumValues.getValue(args.level)}
-        size={args.size && sizesEnumValues.getValue(args.size)}
-      />
-    )}
+    {(args) => <Heading {...args} />}
   </Story>
 </Canvas>
 
@@ -125,36 +100,16 @@ Resources:
 <Canvas>
   <Story name="Default Heading Styles">
     <div>
-      <Heading
-        id="heading-one"
-        level={HeadingLevels.One}
-        text="<h1> Heading 1 - HeadingLevels.One"
-      />
-      <Heading
-        id="heading-two"
-        level={HeadingLevels.Two}
-        text="<h2> Heading 2 - HeadingLevels.Two"
-      />
+      <Heading id="heading-one" level="one" text="<h1> Heading 1 - 'one'" />
+      <Heading id="heading-two" level="two" text="<h2> Heading 2 - 'two'" />
       <Heading
         id="heading-three"
-        level={HeadingLevels.Three}
-        text="<h3> Heading 3 - HeadingLevels.Three"
-      />
-      <Heading
-        id="heading-four"
-        level={HeadingLevels.Four}
-        text="<h4> Heading 4 - HeadingLevels.Four"
-      />
-      <Heading
-        id="heading-five"
-        level={HeadingLevels.Five}
-        text="<h5> Heading 5 - HeadingLevels.Five"
-      />
-      <Heading
-        id="heading-six"
-        level={HeadingLevels.Six}
-        text="<h6> Heading 6 - HeadingLevels.Six"
+        level="three"
+        text="<h3> Heading 3 - 'three'"
       />
+      <Heading id="heading-four" level="four" text="<h4> Heading 4 - 'four'" />
+      <Heading id="heading-five" level="five" text="<h5> Heading 5 - 'five'" />
+      <Heading id="heading-six" level="six" text="<h6> Heading 6 - 'six'" />
     </div>
   </Story>
 </Canvas>
@@ -162,34 +117,34 @@ Resources:
 ## Size Styles
 
 Note: The `level` prop for the `Heading`s in the next example are all set to
-`level={HeadingLevels.One}`.
+`level="one"`.
 
 <Canvas>
   <Story name="Size Styles">
     <div>
       <Heading
         id="heading-primary"
-        level={HeadingLevels.One}
-        size={HeadingSizes.Primary}
-        text="<h1> HeadingSizes.Primary"
+        level="one"
+        size="primary"
+        text="<h1> 'primary'"
       />
       <Heading
         id="heading-secondary"
-        level={HeadingLevels.One}
-        size={HeadingSizes.Secondary}
-        text="<h1> HeadingSizes.Secondary"
+        level="one"
+        size="secondary"
+        text="<h1> 'secondary'"
       />
       <Heading
         id="heading-tertiary"
-        level={HeadingLevels.One}
-        size={HeadingSizes.Tertiary}
-        text="<h1> HeadingSizes.Tertiary"
+        level="one"
+        size="tertiary"
+        text="<h1> 'tertiary'"
       />
       <Heading
         id="heading-callout"
-        level={HeadingLevels.One}
-        size={HeadingSizes.Callout}
-        text="<h1> HeadingSizes.Callout"
+        level="one"
+        size="callout"
+        text="<h1> 'callout'"
       />
     </div>
   </Story>
@@ -199,7 +154,7 @@ Note: The `level` prop for the `Heading`s in the next example are all set to
 
 <Canvas>
   <Story name="Heading with Bold Text">
-    <Heading id="headingWithBold" level={HeadingLevels.One}>
+    <Heading id="headingWithBold" level="one">
       <>
         Heading with a <b>Bold</b> Word
       </>
@@ -215,12 +170,12 @@ When the `url` prop is passed to `Heading`, a child `<a>` element is created and
   <Story name="Headings with Links">
     <Heading
       id="heading-with-link-url"
-      level={HeadingLevels.Two}
+      level="two"
       text="Heading with URL Props"
       url="http://apple.com"
       urlClass="special-link"
     />
-    <Heading id="heading-with-link-child" level={HeadingLevels.Two}>
+    <Heading id="heading-with-link-child">
       <>
         Heading with a Word <a href="#hello">Link</a>
       </>

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

@@ -4,12 +4,11 @@ import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import Heading from "./Heading";
-import { HeadingSizes, HeadingLevels } from "./HeadingTypes";
 
 describe("Heading Accessibility", () => {
   it("passes axe accessibility test", async () => {
     const { container } = render(
-      <Heading id="h1" level={HeadingLevels.One} text="Heading 1" />
+      <Heading id="h1" level="one" text="Heading 1" />
     );
     expect(await axe(container)).toHaveNoViolations();
   });
@@ -17,17 +16,13 @@ describe("Heading Accessibility", () => {
 
 describe("Heading", () => {
   it("renders and HTML heading element with the correct level", () => {
-    render(<Heading id="h1" level={HeadingLevels.One} text="Heading 1" />);
+    render(<Heading id="h1" level="one" text="Heading 1" />);
     expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
     expect(screen.getByText("Heading 1")).toBeInTheDocument();
   });
 
   it("can pass heading content as child", () => {
-    render(
-      <Heading id="h1" level={HeadingLevels.Two}>
-        Heading 2
-      </Heading>
-    );
+    render(<Heading id="h1">Heading 2</Heading>);
     expect(screen.getByRole("heading", { level: 2 })).toBeInTheDocument();
     expect(screen.getByText("Heading 2")).toBeInTheDocument();
   });
@@ -37,15 +32,9 @@ describe("Heading", () => {
     expect(screen.getByRole("heading", { level: 2 })).toBeInTheDocument();
   });
 
-  // TODO: check that header children are links
-  // it("Throws error when invalid heading is passed as child", () => {
-  //   expect(() => render(<Heading id="h1" level={HeadingLevels.Three}><span>oh no</span></Heading>))
-  //   .to.throw("Headings can only be plain text or bold");
-  // });
-
   it("can pass a span element as a child", () => {
     render(
-      <Heading id="h1" level={HeadingLevels.One}>
+      <Heading id="h1" level="one">
         <span>
           Text <b>hi</b>
         </span>
@@ -56,7 +45,7 @@ describe("Heading", () => {
 
   it("prioritizes the child when both child and the text prop are passed", () => {
     render(
-      <Heading id="h1" level={HeadingLevels.One} text="prop text">
+      <Heading id="h1" level="one" text="prop text">
         child text
       </Heading>
     );
@@ -64,14 +53,7 @@ describe("Heading", () => {
   });
 
   it("renders an anchor element when the `url` prop is passed", () => {
-    render(
-      <Heading
-        id="h1"
-        level={HeadingLevels.One}
-        text="Heading 1"
-        url="fake-url"
-      />
-    );
+    render(<Heading id="h1" level="one" text="Heading 1" url="fake-url" />);
 
     expect(screen.getByRole("link")).toBeInTheDocument();
   });
@@ -80,7 +62,7 @@ describe("Heading", () => {
     render(
       <Heading
         id="h1"
-        level={HeadingLevels.One}
+        level="one"
         url="fake-url"
         urlClass="fake-class"
         text="Heading 1"
@@ -92,7 +74,7 @@ describe("Heading", () => {
   });
 
   it("throws error when neither child nor text is passed", () => {
-    expect(() => render(<Heading id="h1" level={HeadingLevels.One} />)).toThrow(
+    expect(() => render(<Heading id="h1" level="one" />)).toThrow(
       "NYPL Reservoir Heading: No children or value was passed to the `text` prop."
     );
   });
@@ -100,7 +82,7 @@ describe("Heading", () => {
   it("throws error when heading with many children is passed", () => {
     expect(() =>
       render(
-        <Heading id="h1" level={HeadingLevels.Four}>
+        <Heading id="h1" level="four">
           <span>too</span>
           <span>many</span>
         </Heading>
@@ -112,8 +94,8 @@ describe("Heading", () => {
     render(
       <Heading
         id="h1"
-        level={HeadingLevels.One}
-        size={HeadingSizes.Secondary}
+        level="one"
+        size="secondary"
         text="Heading with Secondary size"
       />
     );
@@ -124,13 +106,11 @@ describe("Heading", () => {
 
   it("renders the UI snapshot correctly", () => {
     const basic = renderer
-      .create(
-        <Heading id="basic" level={HeadingLevels.One} text="Heading text" />
-      )
+      .create(<Heading id="basic" level="one" text="Heading text" />)
       .toJSON();
     const basicWithChildText = renderer
       .create(
-        <Heading id="basicWithChildText" level={HeadingLevels.One}>
+        <Heading id="basicWithChildText" level="one">
           Heading text
         </Heading>
       )
@@ -139,26 +119,20 @@ describe("Heading", () => {
       .create(
         <Heading
           id="customDisplaySize"
-          level={HeadingLevels.One}
-          size={HeadingSizes.Secondary}
+          level="one"
+          size="secondary"
           text="Heading with Secondary size"
         />
       )
       .toJSON();
     const otherLevel = renderer
-      .create(
-        <Heading
-          id="otherLevel"
-          level={HeadingLevels.Six}
-          text="Heading level six"
-        />
-      )
+      .create(<Heading id="otherLevel" level="six" text="Heading level six" />)
       .toJSON();
     const withLink = renderer
       .create(
         <Heading
           id="withLink"
-          level={HeadingLevels.One}
+          level="one"
           text="Heading text is a link"
           url="fake-url"
         />
@@ -166,7 +140,7 @@ describe("Heading", () => {
       .toJSON();
     const withCustomLink = renderer
       .create(
-        <Heading id="withCustomLink" level={HeadingLevels.One}>
+        <Heading id="withCustomLink" level="one">
           <>
             Part of the heading text is
             <a href="fake-url" className="custom-link">

package/src/components/Heading/Heading.tsx

@@ -5,12 +5,11 @@ import {
 } from "@chakra-ui/react";
 import * as React from "react";
 
-import { HeadingSizes, HeadingLevels } from "./HeadingTypes";
 import Link from "../Link/Link";
-import { getVariant } from "../../utils/utils";
+
+export type HeadingSizes = "primary" | "secondary" | "tertiary" | "callout";
+export type HeadingLevels = "one" | "two" | "three" | "four" | "five" | "six";
 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 ID that other components can cross reference for accessibility purposes */
@@ -32,7 +31,7 @@ export interface HeadingProps {
 }
 
 /** Map the word heading level to the number heading level. The default is 2. */
-const getMappedLevel = (level = HeadingLevels.Two) => {
+const getMappedLevel = (level = "two") => {
   const levelMap = {
     one: 1,
     two: 2,
@@ -47,10 +46,9 @@ const getMappedLevel = (level = HeadingLevels.Two) => {
 export const Heading = chakra(
   (props: React.PropsWithChildren<HeadingProps>) => {
     const {
-      additionalStyles = {},
       className,
       id,
-      level = HeadingLevels.Two,
+      level = "two",
       size,
       text,
       url,
@@ -58,11 +56,10 @@ export const Heading = chakra(
       ...rest
     } = props;
     const finalLevel = getMappedLevel(level);
-    const variant = size ? getVariant(size, HeadingSizes) : `h${finalLevel}`;
+    const variant = size ? size : `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${finalLevel}`;
 
     if (!props.children && !text) {
@@ -92,7 +89,7 @@ export const Heading = chakra(
         as={asHeading}
         className={className}
         id={id}
-        sx={finalStyles}
+        sx={styles}
         {...rest}
       >
         {content}

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

@@ -25,7 +25,6 @@ import DSProvider from "../../theme/provider";
     jest: ["HelperErrorText.test.tsx"],
   }}
   argTypes={{
-    additionalStyles: { control: false },
     ariaAtomic: {
       control: false,
       table: { defaultValue: { summary: true } },
@@ -47,7 +46,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.10`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -67,7 +66,6 @@ import DSProvider from "../../theme/provider";
   <Story
     name="HelperErrorText with Controls"
     args={{
-      additionalStyles: undefined,
       ariaAtomic: undefined,
       ariaLive: "polite",
       className: undefined,

package/src/components/HelperErrorText/HelperErrorText.tsx

@@ -5,8 +5,6 @@ export type AriaLiveValues = "assertive" | "off" | "polite";
 export type HelperErrorTextType = string | JSX.Element;
 
 interface HelperErrorTextProps {
-  /** Optionally pass in additional Chakra-based styles. */
-  additionalStyles?: { [key: string]: any };
   /** Aria attribute. When true, assistive technologies will
    * read the entire DOM element. When false, only changes (additionals or
    * removals) will be read. True by default. */
@@ -33,7 +31,6 @@ interface HelperErrorTextProps {
  */
 export const HelperErrorText = chakra(
   ({
-    additionalStyles = {},
     ariaAtomic = true,
     ariaLive = "polite",
     className = "",
@@ -45,14 +42,13 @@ export const HelperErrorText = chakra(
     // Only announce the text in the invalid state.
     const announceAriaLive = isInvalid;
     const styles = useStyleConfig("HelperErrorText", { isInvalid });
-    const finalStyles = { ...styles, ...additionalStyles };
     const props = {
       "aria-atomic": ariaAtomic,
       "aria-live": announceAriaLive ? ariaLive : "off",
       className,
       "data-isinvalid": isInvalid,
       id,
-      __css: finalStyles,
+      __css: styles,
       ...rest,
     };
     return typeof text === "string" ? (