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

package/src/components/List/List.stories.tsx

@@ -1,9 +1,10 @@
 import * as React from "react";
 
-import Card from "../Card/Card";
+import CardEdition from "../CardEdition/CardEdition";
 import Heading from "../Heading/Heading";
+import { HeadingLevels } from "../Heading/HeadingTypes";
 import Icon from "../Icons/Icon";
-import { IconNames } from "../Icons/IconTypes";
+import { IconAlign, IconNames, IconSizes } from "../Icons/IconTypes";
 import Image from "../Image/Image";
 import Link from "../Link/Link";
 import { LinkTypes } from "../Link/LinkTypes";
@@ -88,7 +89,7 @@ export const listRenderer = (args) => (
 );
 
 const exampleCard = (
-  <Card
+  <CardEdition
     className="example-card"
     image={<Image src="https://placeimg.com/300/400/arch" alt={""} />}
     ctas={
@@ -104,7 +105,11 @@ const exampleCard = (
     }
   >
     <>
-      <Heading level={2} id="heading1" text={"The Year of Magical Thinking"} />
+      <Heading
+        level={HeadingLevels.Two}
+        id="heading1"
+        text={"The Year of Magical Thinking"}
+      />
       <div className="book__callout">A portrait of loss and grief</div>
       <div>
         By <Link href="#joan-didion">Joan Didion</Link>,{" "}
@@ -113,10 +118,10 @@ const exampleCard = (
       </div>
       <div className="book__filetype">
         <Icon
-          name={IconNames.headset}
-          decorative={true}
-          modifiers={["left", "small"]}
-        ></Icon>
+          name={IconNames.Headset}
+          align={IconAlign.Left}
+          size={IconSizes.Small}
+        />
         Audiobook
       </div>
       <div className="book__description">
@@ -125,7 +130,7 @@ const exampleCard = (
         <Link href="#">Read More</Link>
       </div>
     </>
-  </Card>
+  </CardEdition>
 );
 
 export const cardsList = [];

package/src/components/List/List.test.tsx

@@ -31,21 +31,23 @@ describe("List", () => {
   ];
 
   it("renders unordered list", () => {
-    render(
+    const utils = render(
       <List type={ListTypes.Unordered}>
         <li>Mahi-mahi</li>
         <li>Golden trout</li>
       </List>
     );
-    expect(screen.getByRole("list")).toBeInTheDocument();
+    expect(utils.container.querySelector(".list")).toBeInTheDocument();
     expect(screen.getAllByRole("listitem")).toHaveLength(2);
     expect(screen.getByText("Mahi-mahi")).toBeInTheDocument();
     expect(screen.getByText("Golden trout")).toBeInTheDocument();
   });
 
   it("renders unordered list with the `listItems` prop", () => {
-    render(<List type={ListTypes.Unordered} listItems={fishArray} />);
-    expect(screen.getByRole("list")).toBeInTheDocument();
+    const utils = render(
+      <List type={ListTypes.Unordered} listItems={fishArray} />
+    );
+    expect(utils.container.querySelector(".list")).toBeInTheDocument();
     expect(screen.getAllByRole("listitem")).toHaveLength(4);
     expect(screen.getByText("Mahi-mahi")).toBeInTheDocument();
     expect(screen.getByText("Golden trout")).toBeInTheDocument();
@@ -54,21 +56,23 @@ describe("List", () => {
   });
 
   it("renders ordered list", () => {
-    render(
+    const utils = render(
       <List type={ListTypes.Ordered}>
         <li>Mahi-mahi</li>
         <li>Golden trout</li>
       </List>
     );
-    expect(screen.getByRole("list")).toBeInTheDocument();
+    expect(utils.container.querySelector(".list")).toBeInTheDocument();
     expect(screen.getAllByRole("listitem")).toHaveLength(2);
     expect(screen.getByText("Mahi-mahi")).toBeInTheDocument();
     expect(screen.getByText("Golden trout")).toBeInTheDocument();
   });
 
   it("renders ordered list with the `listItems` prop", () => {
-    render(<List type={ListTypes.Ordered} listItems={fishArray} />);
-    expect(screen.getByRole("list")).toBeInTheDocument();
+    const utils = render(
+      <List type={ListTypes.Ordered} listItems={fishArray} />
+    );
+    expect(utils.container.querySelector(".list")).toBeInTheDocument();
     expect(screen.getAllByRole("listitem")).toHaveLength(4);
     expect(screen.getByText("Mahi-mahi")).toBeInTheDocument();
     expect(screen.getByText("Golden trout")).toBeInTheDocument();

package/src/components/List/List.tsx

@@ -3,6 +3,8 @@ import * as React from "react";
 import bem from "../../utils/bem";
 import { ListTypes } from "./ListTypes";
 import Heading from "../Heading/Heading";
+import { HeadingLevels } from "../Heading/HeadingTypes";
+
 interface DefinitionProps {
   term: string;
   definition: string;
@@ -56,7 +58,7 @@ export default function List(props: React.PropsWithChildren<ListProps>) {
 
   const baseClass = "list";
   let listTag;
-  let errorText = "";
+  let invalidText = "";
   /**
    * This returns either the `children` elements passed to the `List` component
    * first, and if that is not passed, it will check and render the data passed
@@ -87,10 +89,10 @@ export default function List(props: React.PropsWithChildren<ListProps>) {
    * Checks for `li` element type and throws an error if it is a different type.
    */
   const checkLiChildrenError = (listType) => {
-    errorText = `Direct children of \`List\` (${listType}) should be \`<li>\`s`;
+    invalidText = `Direct children of \`List\` (${listType}) should be \`<li>\`s`;
     React.Children.map(children, function (child: React.ReactElement) {
-      if (child.type !== "li" && child.props.mdxType !== "li") {
-        throw new Error(errorText);
+      if (child?.type !== "li" && child?.props?.mdxType !== "li") {
+        throw new Error(invalidText);
       }
     });
   };
@@ -119,7 +121,7 @@ export default function List(props: React.PropsWithChildren<ListProps>) {
       );
       break;
     case ListTypes.Definition:
-      errorText =
+      invalidText =
         "Direct children of `List` (definition) should be `<dt>`s or `<dd>`s";
       React.Children.map(children, function (child: React.ReactElement) {
         if (
@@ -130,7 +132,7 @@ export default function List(props: React.PropsWithChildren<ListProps>) {
           child.props.mdxType !== "dd" &&
           child.props.mdxType !== React.Fragment
         ) {
-          throw new Error(errorText);
+          throw new Error(invalidText);
         }
       });
       listTag = (
@@ -139,7 +141,7 @@ export default function List(props: React.PropsWithChildren<ListProps>) {
           className={bem("definition-list", modifiers, baseClass)}
         >
           {title && (
-            <Heading id={`${id}-heading`} level={2}>
+            <Heading id={`${id}-heading`} level={HeadingLevels.Two}>
               {title}
             </Heading>
           )}

package/src/components/List/_List.scss

@@ -11,7 +11,7 @@
   margin: unset; // browser automatically applies margin
 
   &__definition-list {
-    border-bottom: 1px solid var(--ui-gray-light);
+    border-bottom: 1px solid var(--ui-gray-light-cool);
 
     h2 {
       border-top: 3px solid var(--section-research-primary);
@@ -26,7 +26,7 @@
       margin: var(--space-xs) 0 0;
 
       dt {
-        border-top: 1px solid var(--ui-gray-light);
+        border-top: 1px solid var(--ui-gray-light-cool);
         font-size: var(--font-size-0);
         font-weight: bold;
         padding-bottom: 0;
@@ -45,7 +45,7 @@
         padding-bottom: var(--space-s);
 
         @include breakpoint($breakpoint-medium) {
-          border-top: 1px solid var(--ui-gray-light);
+          border-top: 1px solid var(--ui-gray-light-cool);
           padding-top: var(--space-s);
         }
       }

package/src/components/Modal/Modal.stories.mdx

@@ -8,10 +8,10 @@ import {
 } from "@storybook/addon-docs/blocks";
 import Modal from "./Modal";
 import Button from "../Button/Button";
-import { ExampleCard } from "../Card/Card.stories";
+import { getCategory } from "../../utils/componentCategories";
 
 <Meta
-  title="Modal"
+  title={getCategory("Modal")}
   component={Modal}
   argTypes={{
     children: { table: { disable: true } },
@@ -23,6 +23,11 @@ import { ExampleCard } from "../Card/Card.stories";
 
 # Modal
 
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.1.0`    |
+| Latest            | `0.3.5`    |
+
 <Description of={Modal} />
 
 export const ModalStory = (args) => {
@@ -34,7 +39,6 @@ export const ModalStory = (args) => {
       <Button id="1" onClick={openModal}>
         Open Modal
       </Button>
-      <ExampleCard />
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Tempus quam

package/src/components/Modal/_Modal.scss

@@ -7,7 +7,7 @@
 .modal {
   @include space-inset-s;
 
-  background-color: var(--ui-gray-warm-xlight);
+  background-color: var(--ui-gray-x-light-warm);
   height: 100vh;
   left: 0;
   overflow-y: auto;

package/src/components/Notification/Notification.stories.mdx

@@ -15,9 +15,17 @@ import Notification, {
 } from "./Notification";
 import { NotificationTypes } from "./NotificationTypes";
 import Icon from "../Icons/Icon";
+import {
+  IconSizes,
+  IconColors,
+  IconNames,
+  IconAlign,
+} from "../Icons/IconTypes";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
 
 <Meta
-  title="Notification"
+  title={getCategory("Notification")}
   component={Notification}
   decorators={[withDesign]}
   parameters={{
@@ -32,13 +40,17 @@ import Icon from "../Icons/Icon";
 
 # Notification
 
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.23.2`   |
+
 <Description of={Notification} />
 
 The `Notification` component is a configurable callout that should be used to display important messages.
 
 In the preview below, the border around the `Notification` is not part of the component. It has been added to help illustrate how the `Notification` sits within a parent element.
 
-<Preview withToolbar>
+<Canvas>
   <Story
     name="Notification Props"
     args={{
@@ -66,7 +78,7 @@ In the preview below, the border around the `Notification` is not part of the co
       </div>
     )}
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="Notification Props" />
 
@@ -75,92 +87,114 @@ In the preview below, the border around the `Notification` is not part of the co
 ### With NotificationHeading
 
 <Canvas>
-  <Notification>
-    <NotificationHeading>Standard Notification</NotificationHeading>
-    <NotificationContent>
-      This is a "standard" Notification with a heading. Cras mattis consectetur
-      purus sit amet fermentum. Maecenas faucibus mollis interdum. Morbi leo
-      risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque
-      penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus
-      sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-    </NotificationContent>
-  </Notification>
+  <DSProvider>
+    <Notification>
+      <NotificationHeading>Standard Notification</NotificationHeading>
+      <NotificationContent>
+        This is a "standard" Notification with a heading. Cras mattis
+        consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.
+        Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis
+        natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+        mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
+        auctor.
+      </NotificationContent>
+    </Notification>
+  </DSProvider>
 </Canvas>
 
 <Canvas>
-  <Notification notificationType={NotificationTypes.Announcement}>
-    <NotificationHeading>Announcement Notification</NotificationHeading>
-    <NotificationContent>
-      This is an "announcement" Notification with a heading. Cras mattis
-      consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.
-      Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis
-      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-      Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-    </NotificationContent>
-  </Notification>
+  <DSProvider>
+    <Notification notificationType={NotificationTypes.Announcement}>
+      <NotificationHeading>Announcement Notification</NotificationHeading>
+      <NotificationContent>
+        This is an "announcement" Notification with a heading. Cras mattis
+        consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.
+        Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis
+        natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+        mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
+        auctor.
+      </NotificationContent>
+    </Notification>
+  </DSProvider>
 </Canvas>
 
 <Canvas>
-  <Notification notificationType={NotificationTypes.Warning}>
-    <NotificationHeading>Warning Notification</NotificationHeading>
-    <NotificationContent>
-      This is a "warning" Notification with a heading. Cras mattis consectetur
-      purus sit amet fermentum. Maecenas faucibus mollis interdum. Morbi leo
-      risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque
-      penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus
-      sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-    </NotificationContent>
-  </Notification>
+  <DSProvider>
+    <Notification notificationType={NotificationTypes.Warning}>
+      <NotificationHeading>Warning Notification</NotificationHeading>
+      <NotificationContent>
+        This is a "warning" Notification with a heading. Cras mattis consectetur
+        purus sit amet fermentum. Maecenas faucibus mollis interdum. Morbi leo
+        risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque
+        penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+      </NotificationContent>
+    </Notification>
+  </DSProvider>
 </Canvas>
 
 ### Without NotificationHeading
 
 <Canvas>
-  <Notification>
-    <NotificationContent>
-      This is a "standard" Notification without a heading. Cras mattis
-      consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.
-      Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis
-      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-      Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-    </NotificationContent>
-  </Notification>
+  <DSProvider>
+    <Notification>
+      <NotificationContent>
+        This is a "standard" Notification without a heading. Cras mattis
+        consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.
+        Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis
+        natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+        mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
+        auctor.
+      </NotificationContent>
+    </Notification>
+  </DSProvider>
 </Canvas>
 
 <Canvas>
-  <Notification notificationType={NotificationTypes.Announcement}>
-    <NotificationContent>
-      This is an "announcement" Notification without a heading. Cras mattis
-      consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.
-      Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis
-      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-      Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-    </NotificationContent>
-  </Notification>
+  <DSProvider>
+    <Notification notificationType={NotificationTypes.Announcement}>
+      <NotificationContent>
+        This is an "announcement" Notification without a heading. Cras mattis
+        consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.
+        Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis
+        natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+        mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
+        auctor.
+      </NotificationContent>
+    </Notification>
+  </DSProvider>
 </Canvas>
 
 <Canvas>
-  <Notification notificationType={NotificationTypes.Warning}>
-    <NotificationContent>
-      This is a "warning" Notification without a heading. Cras mattis
-      consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.
-      Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis
-      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-      Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-    </NotificationContent>
-  </Notification>
+  <DSProvider>
+    <Notification notificationType={NotificationTypes.Warning}>
+      <NotificationContent>
+        This is a "warning" Notification without a heading. Cras mattis
+        consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.
+        Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis
+        natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+        mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
+        auctor.
+      </NotificationContent>
+    </Notification>
+  </DSProvider>
 </Canvas>
 
 ## Custom Icon
 
 The default icon can be overridden by using the `icon` prop to pass a custom `Icon` component.
 
-<Preview>
+<Canvas>
   <Story name="Custom Icons">
     {(args) => (
       <Notification
         icon={
-          <Icon name="check" size="large" color="section-research-secondary" />
+          <Icon
+            align={IconAlign.Left}
+            name={IconNames.Check}
+            size={IconSizes.Large}
+            color={IconColors.SectionResearchSecondary}
+          />
         }
       >
         <NotificationHeading>Custom Icon</NotificationHeading>
@@ -173,13 +207,13 @@ The default icon can be overridden by using the `icon` prop to pass a custom `Ic
       </Notification>
     )}
   </Story>
-</Preview>
+</Canvas>
 
 ## Development Errors
 
 The `Notification` component will only accept one `NotificationHeading` child and one `NotificationContent` child.
 
-<Preview>
+<Canvas>
   <Story name="Development Errors">
     {(args) => (
       <Notification>
@@ -190,4 +224,4 @@ The `Notification` component will only accept one `NotificationHeading` child an
       </Notification>
     )}
   </Story>
-</Preview>
+</Canvas>

package/src/components/Notification/Notification.test.tsx

@@ -86,13 +86,6 @@ describe("Notification: check for Announcement Notification", () => {
       utils.container.querySelector(".notification--announcement")
     ).toBeInTheDocument();
   });
-  it("Renders Icon with proper color", () => {
-    expect(
-      utils.container.querySelector(
-        ".notification-icon.icon--section-research-secondary"
-      )
-    ).toBeInTheDocument();
-  });
 });
 
 describe("Notification: check for Warning Notification", () => {
@@ -114,12 +107,6 @@ describe("Notification: check for Warning Notification", () => {
       utils.container.querySelector(".notification--warning")
     ).toBeInTheDocument();
   });
-
-  it("Renders Icon with proper color", () => {
-    expect(
-      utils.container.querySelector(".notification-icon.icon--brand-primary")
-    ).toBeInTheDocument();
-  });
 });
 
 describe("Notification: check for custom Icon", () => {
@@ -130,9 +117,9 @@ describe("Notification: check for custom Icon", () => {
         id="notificationID"
         icon={
           <Icon
-            name={IconNames.check}
-            size={IconSizes.large}
-            color={IconColors.brand_primary}
+            name={IconNames.Check}
+            size={IconSizes.Large}
+            color={IconColors.BrandPrimary}
             className="custom-icon"
           />
         }

package/src/components/Notification/Notification.tsx

@@ -4,8 +4,9 @@ import bem from "../../utils/bem";
 import Button from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
 import Heading from "../Heading/Heading";
+import { HeadingLevels } from "../Heading/HeadingTypes";
 import Icon from "../Icons/Icon";
-import { IconColors, IconNames } from "../Icons/IconTypes";
+import { IconColors, IconNames, IconSizes } from "../Icons/IconTypes";
 import { NotificationTypes } from "./NotificationTypes";
 
 export interface NotificationProps {
@@ -34,7 +35,7 @@ export function NotificationHeading(props) {
   const { children, className } = props;
   return (
     <Heading
-      level={4}
+      level={HeadingLevels.Four}
       className={bem("notification-heading", [], "", [className])}
     >
       {children}
@@ -42,7 +43,7 @@ export function NotificationHeading(props) {
   );
 }
 
-// NotificationHeading child-component
+// NotificationContent child-component
 export function NotificationContent(props) {
   const { children, className } = props;
   return (
@@ -94,9 +95,9 @@ export default function Notification(
           <Icon
             decorative={false}
             className="notification-icon"
-            name={IconNames.speaker_notes}
-            color={IconColors.section_research_secondary}
-            modifiers={["large"]}
+            name={IconNames.SpeakerNotes}
+            color={IconColors.SectionResearchSecondary}
+            size={IconSizes.Large}
           />
         );
       case "warning":
@@ -104,9 +105,9 @@ export default function Notification(
           <Icon
             decorative={false}
             className="notification-icon"
-            name={IconNames.error_filled}
-            color={IconColors.brand_primary}
-            modifiers={["large"]}
+            name={IconNames.ErrorFilled}
+            color={IconColors.BrandPrimary}
+            size={IconSizes.Large}
           />
         );
       default:
@@ -189,10 +190,9 @@ export default function Notification(
           onClick={handleClose}
         >
           <Icon
-            modifiers={["medium"]}
             decorative={false}
-            name={IconNames.close}
-            titleText={"Close notification"}
+            name={IconNames.Close}
+            size={IconSizes.Large}
           />
         </Button>
       ) : null}

package/src/components/Notification/_Notification.scss

@@ -45,7 +45,7 @@
   }
 
   &--announcement {
-    background-color: var(--ui-gray-light);
+    background-color: var(--ui-gray-light-cool);
 
     .notification-heading {
       color: var(--section-research-secondary);
@@ -53,7 +53,7 @@
   }
 
   &--warning {
-    background-color: var(--ui-gray-xxlight);
+    background-color: var(--ui-gray-xx-light-cool);
 
     .notification-heading {
       color: var(--brand-primary);
@@ -79,13 +79,14 @@
     }
   }
 
-  .icon {
+  .chakra-icon {
     flex-shrink: 0;
     margin-right: var(--space-s);
   }
 
   .dismissible-button {
     align-items: center;
+    background-color: inherit;
     color: var(--ui-black);
     display: flex;
     height: var(--space-l);
@@ -100,7 +101,7 @@
       width: var(--space-m);
     }
 
-    .icon {
+    .chakra-icon {
       height: var(--space-m);
       margin-right: 0;
       width: var(--space-m);

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

@@ -10,7 +10,7 @@ exports[`Notification Snapshot Renders the UI snapshot correctly 1`] = `
   >
     <header>
       <h4
-        className="heading notification-heading "
+        className="chakra-heading notification-heading  css-0"
       >
         Notification Heading
       </h4>