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

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

@@ -10,7 +10,7 @@ const fishArray = ["Mahi-mahi", "Golden trout", "Rainbowfish", "Suckerfish"];
 const fishDefinitions = [
   {
     term: "Mahi-mahi",
-    definition: "The mahi-mahi is an ocean fish known...",
+    definition: <p>The mahi-mahi is an ocean fish known...</p>,
   },
   {
     term: "Golden trout",

package/src/components/List/List.tsx

@@ -8,7 +8,7 @@ import generateUUID from "../../helpers/generateUUID";
 
 interface DefinitionProps {
   term: string;
-  definition: string;
+  definition: string | JSX.Element;
 }
 export interface ListProps {
   /** Optionally pass in additional Chakra-based styles. */
@@ -98,7 +98,7 @@ export default function List(props: React.PropsWithChildren<ListProps>) {
    */
   const checkListChildrenError = (listType: ListTypes) => {
     React.Children.map(children, (child: React.ReactElement) => {
-      if (child?.type !== "li" && child?.props?.mdxType !== "li") {
+      if (child && child?.type !== "li" && child?.props?.mdxType !== "li") {
         console.warn(
           `Direct children of \`List\` (${listType}) should be \`<li>\`s.`
         );

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

@@ -96,7 +96,9 @@ exports[`List Renders the UI snapshot correctly 5`] = `
       Mahi-mahi
     </dt>
     <dd>
-      The mahi-mahi is an ocean fish known...
+      <p>
+        The mahi-mahi is an ocean fish known...
+      </p>
     </dd>
     <dt>
       Golden trout

package/src/components/Logo/Logo.stories.mdx

@@ -57,7 +57,7 @@ export const sizesEnumValues = getStorybookEnumValues(LogoSizes, "LogoSizes");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.9`   |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.12`  |
 
 <Description of={Logo} />
 
@@ -77,11 +77,13 @@ export const sizesEnumValues = getStorybookEnumValues(LogoSizes, "LogoSizes");
     {(args) => (
       <div
         style={
-          args.name.indexOf("White") !== -1
+          args.name.indexOf("White") !== -1 ||
+          args.name.indexOf("Negative") !== -1
             ? {
                 backgroundColor: "var(--nypl-colors-ui-gray-xdark)",
                 display: "inline-block",
                 padding: "var(--nypl-space-l)",
+                width: "100%",
               }
             : undefined
         }
@@ -104,11 +106,11 @@ export const logoRow = (logo, opts = {}) => {
   const styles = { textAlign: "center" };
   const { size = LogoSizes.Large, displayValue } = opts;
   let key = logo;
-  if (logo.indexOf("White") !== -1) {
+  if (logo.indexOf("White") !== -1 || logo.indexOf("Negative") !== -1) {
     styles.backgroundColor = "var(--nypl-colors-ui-gray-xdark)";
-    styles.paddingBottom = "32px";
-    styles.paddingTop = "32px";
     styles.color = "var(--nypl-colors-ui-white)";
+    styles.paddingBottom = "var(--nypl-space-l)";
+    styles.paddingTop = "var(--nypl-space-l)";
   }
   if (size !== LogoSizes.Large) {
     key += `-${size}`;

package/src/components/Logo/LogoSvgs.tsx

@@ -1,34 +1,78 @@
 /* eslint-disable camelcase */
 import logo_bpl_black from "../../../icons/svg/logo_bpl_black.svg";
+import logo_bpl_white from "../../../icons/svg/logo_bpl_white.svg";
+import logo_clever_color from "../../../icons/svg/logo_clever_color.svg";
+import logo_clever_white from "../../../icons/svg/logo_clever_white.svg";
+import logo_firstbook_color from "../../../icons/svg/logo_firstbook_color.svg";
+import logo_firstbook_color_negative from "../../../icons/svg/logo_firstbook_color_negative.svg";
 import logo_lpa_color from "../../../icons/svg/logo_lpa_color.svg";
+import logo_lpa_black from "../../../icons/svg/logo_lpa_black.svg";
 import logo_lpa_white from "../../../icons/svg/logo_lpa_white.svg";
+import logo_mln_black from "../../../icons/svg/logo_mln_black.svg";
+import logo_mln_white from "../../../icons/svg/logo_mln_white.svg";
 import logo_nypl_full_black from "../../../icons/svg/logo_nypl_full_black.svg";
 import logo_nypl_full_white from "../../../icons/svg/logo_nypl_full_white.svg";
 import logo_nypl_lion_black from "../../../icons/svg/logo_nypl_lion_black.svg";
 import logo_nypl_lion_white from "../../../icons/svg/logo_nypl_lion_white.svg";
+import logo_openebooks_color from "../../../icons/svg/logo_openebooks_color.svg";
+import logo_openebooks_negative from "../../../icons/svg/logo_openebooks_negative.svg";
+import logo_openebooks_wtext_color from "../../../icons/svg/logo_openebooks_wtext_color.svg";
+import logo_openebooks_wtext_negative from "../../../icons/svg/logo_openebooks_wtext_negative.svg";
 import logo_qpl_alt_black from "../../../icons/svg/logo_qpl_alt_black.svg";
+import logo_qpl_alt_white from "../../../icons/svg/logo_qpl_alt_white.svg";
+import logo_qpl_black from "../../../icons/svg/logo_qpl_black.svg";
 import logo_qpl_color from "../../../icons/svg/logo_qpl_color.svg";
+import logo_qpl_white from "../../../icons/svg/logo_qpl_white.svg";
+import logo_schomburg_black from "../../../icons/svg/logo_schomburg_black.svg";
+import logo_schomburg_circle_black from "../../../icons/svg/logo_schomburg_circle_black.svg";
 import logo_schomburg_circle_color from "../../../icons/svg/logo_schomburg_circle_color.svg";
+import logo_schomburg_circle_white from "../../../icons/svg/logo_schomburg_circle_white.svg";
 import logo_schomburg_color from "../../../icons/svg/logo_schomburg_color.svg";
+import logo_schomburg_white from "../../../icons/svg/logo_schomburg_white.svg";
 import logo_simplye_black from "../../../icons/svg/logo_simplye_black.svg";
+import logo_simplye_white from "../../../icons/svg/logo_simplye_white.svg";
 import logo_simplye_color from "../../../icons/svg/logo_simplye_color.svg";
 import logo_snfl_black from "../../../icons/svg/logo_snfl_black.svg";
 import logo_snfl_white from "../../../icons/svg/logo_snfl_white.svg";
+import logo_treasures_color from "../../../icons/svg/logo_treasures_color.svg";
+import logo_treasures_color_negative from "../../../icons/svg/logo_treasures_color_negative.svg";
 
 export default {
   logo_bpl_black,
+  logo_bpl_white,
+  logo_clever_color,
+  logo_clever_white,
+  logo_firstbook_color,
+  logo_firstbook_color_negative,
+  logo_lpa_black,
   logo_lpa_color,
   logo_lpa_white,
+  logo_mln_black,
+  logo_mln_white,
   logo_nypl_full_black,
   logo_nypl_full_white,
-  logo_nypl_lion_white,
   logo_nypl_lion_black,
+  logo_nypl_lion_white,
+  logo_openebooks_color,
+  logo_openebooks_negative,
+  logo_openebooks_wtext_color,
+  logo_openebooks_wtext_negative,
   logo_qpl_alt_black,
+  logo_qpl_alt_white,
+  logo_qpl_black,
   logo_qpl_color,
+  logo_qpl_white,
+  logo_schomburg_black,
+  logo_schomburg_circle_black,
   logo_schomburg_circle_color,
+  logo_schomburg_circle_white,
   logo_schomburg_color,
+  logo_schomburg_white,
   logo_simplye_black,
+  logo_simplye_white,
   logo_simplye_color,
   logo_snfl_black,
   logo_snfl_white,
+  logo_treasures_color,
+  logo_treasures_color_negative,
 };

package/src/components/Logo/LogoTypes.tsx

@@ -15,18 +15,40 @@ export enum LogoSizes {
 
 export enum LogoNames {
   BrooklynPublicLibraryBlack = "logo_bpl_black",
+  BrooklynPublicLibraryWhite = "logo_bpl_white",
+  CleverColor = "logo_clever_color",
+  CleverWhite = "logo_clever_white",
+  FirstBookColor = "logo_firstbook_color",
+  FirstBookColorNegative = "logo_firstbook_color_negative",
   LPAColor = "logo_lpa_color",
+  LPABlack = "logo_lpa_black",
   LPAWhite = "logo_lpa_white",
+  MyLibraryNYCBlack = "logo_mln_black",
+  MyLibraryNYCWhite = "logo_mln_white",
   NYPLBlack = "logo_nypl_full_black",
   NYPLWhite = "logo_nypl_full_white",
   NYPLLionBlack = "logo_nypl_lion_black",
   NYPLLionWhite = "logo_nypl_lion_white",
+  OpenEBooksColor = "logo_openebooks_color",
+  OpenEBooksNegative = "logo_openebooks_negative",
+  OpenEBooksWithTextColor = "logo_openebooks_wtext_color",
+  OpenEBooksWithTextNegative = "logo_openebooks_wtext_negative",
   QueensPublicLibraryColor = "logo_qpl_color",
+  QueensPublicLibraryBlack = "logo_qpl_black",
+  QueensPublicLibraryWhite = "logo_qpl_white",
   QueensPublicLibraryAltBlack = "logo_qpl_alt_black",
+  QueensPublicLibraryAltWhite = "logo_qpl_alt_white",
   SchomburgColor = "logo_schomburg_color",
+  SchomburgBlack = "logo_schomburg_black",
+  SchomburgWhite = "logo_schomburg_white",
   SchomburgCircleColor = "logo_schomburg_circle_color",
+  SchomburgCircleBlack = "logo_schomburg_circle_black",
+  SchomburgCircleWhite = "logo_schomburg_circle_white",
   SimplyEColor = "logo_simplye_color",
   SimplyEBlack = "logo_simplye_black",
+  SimplyEWhite = "logo_simplye_white",
   SNFLBlack = "logo_snfl_black",
   SNFLWhite = "logo_snfl_white",
+  TreasuresColor = "logo_treasures_color",
+  TreasuresColorNegative = "logo_treasures_color_negative",
 }

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

@@ -9,6 +9,7 @@ import { withDesign } from "storybook-addon-designs";
 
 import Icon from "../Icons/Icon";
 import { IconColors, IconNames } from "../Icons/IconTypes";
+import Link from "../Link/Link";
 import Notification from "./Notification";
 import { NotificationTypes } from "./NotificationTypes";
 import { getCategory } from "../../utils/componentCategories";
@@ -44,6 +45,7 @@ export const enumValues = getStorybookEnumValues(
     noMargin: {
       table: { defaultValue: { summary: false } },
     },
+    notificationContent: { control: false },
     notificationType: {
       control: { type: "select" },
       table: { defaultValue: { summary: "NotificationTypes.Standard" } },
@@ -57,7 +59,7 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.12`  |
 
 <Description of={Notification} />
 
@@ -72,6 +74,7 @@ within a parent element.
   <Story
     name="Notification with Controls"
     args={{
+      ariaLabel: "Notification label",
       centered: false,
       className: undefined,
       dismissible: false,
@@ -89,6 +92,7 @@ within a parent element.
           nisi erat porttitor ligula.
         </>
       ),
+      notificationType: "NotificationTypes.Standard",
       showIcon: true,
     }}
   >
@@ -105,6 +109,20 @@ within a parent element.
 
 <ArgsTable story="Notification with Controls" />
 
+## Accessibility
+
+The `Notification` component renders with an HTML `aside` element as its wrapper.
+This is an HTML landmark element that is similar to adding an attribute of
+`role="complementary"`. For accessibility purposes, landmark elements should not
+be rendered inside other landmark elements such as the `header` and `footer`
+landmark elements. Adding a `Notification` component inside an HTML `main` landmark
+element is acceptable.
+
+Icons rendered in the `Notification` component are decorative by default which
+means that they are hidden to screen readers. Since the "X" close icon inside the
+dismissible button is decorative and because there is no discernible text inside
+the button, an `aria-label` attribute is added to the button.
+
 ## Variants
 
 ### With NotificationHeading
@@ -253,6 +271,34 @@ The `Notification` icon can be hidden with the `showIcon` prop set to `false`.
   </DSProvider>
 </Canvas>
 
+### With HTML content
+
+The `notificationContent` prop can accept HTML.
+
+<Canvas>
+  <DSProvider>
+    <Notification
+      notificationHeading="Standard Notification with HTML content"
+      notificationContent={
+        <>
+          <p>
+            Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus
+            mollis interdum.
+          </p>
+          <p>
+            Morbi leo risus, porta ac consectetur ac, vestibulum at eros.{" "}
+            <b>
+              Cum sociis natoque penatibus et magnis dis parturient montes,
+              nascetur ridiculus mus
+            </b>
+            . <Link href="#">This is a link</Link>.
+          </p>
+        </>
+      }
+    />
+  </DSProvider>
+</Canvas>
+
 ## Custom Icon
 
 The default icon can be overridden by using the `icon` prop to pass a custom `Icon` component.
@@ -278,3 +324,29 @@ The default icon can be overridden by using the `icon` prop to pass a custom `Ic
     />
   </Story>
 </Canvas>
+
+## Dismissible
+
+A dismissible `Notification` component can be created by setting the
+`dismissible` prop to `true`. Once the "X" close icon on the upper right is
+clicked, the `Notification` will be removed from the DOM, therefore it only
+appears once.
+
+<Canvas>
+  <Story name="Dismissible">
+    <Notification
+      dismissible
+      notificationHeading="Dismissible Notification"
+      notificationContent={
+        <>
+          This is a dismissible Notification with an X icon. 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.
+        </>
+      }
+      notificationType={NotificationTypes.Announcement}
+    />
+  </Story>
+</Canvas>

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

@@ -41,6 +41,18 @@ describe("Notification Accessibility", () => {
     );
     expect(await axe(container)).toHaveNoViolations();
   });
+
+  it("passes axe accessibility test for the dismissible type", async () => {
+    const { container } = render(
+      <Notification
+        dismissible
+        id="notificationID"
+        notificationContent={<>Notification content.</>}
+        notificationHeading="Notification Heading"
+      />
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
 });
 
 describe("Notification", () => {
@@ -48,6 +60,7 @@ describe("Notification", () => {
   beforeEach(() => {
     utils = render(
       <Notification
+        ariaLabel="Notification label"
         id="notificationID"
         notificationContent={<>Notification content.</>}
         notificationHeading="Notification Heading"
@@ -64,8 +77,12 @@ describe("Notification", () => {
   });
 
   it("renders with an Icon", () => {
-    // The Icon's role is "img".
-    expect(screen.queryByRole("img")).toBeInTheDocument();
+    // Since the icon has aria-hidden set to true, we can't get it
+    // by its "img" role.
+    const icon = utils.container.querySelector(
+      "#notificationID-notification-icon"
+    );
+    expect(icon).toBeInTheDocument();
   });
 
   it("does not render an Icon", () => {
@@ -77,8 +94,10 @@ describe("Notification", () => {
         showIcon={false}
       />
     );
-    // The Icon's role is "img".
-    expect(screen.queryByRole("img")).not.toBeInTheDocument();
+    const icon = utils.container.querySelector(
+      "#notificationID-notification-icon"
+    );
+    expect(icon).not.toBeInTheDocument();
   });
 
   it("renders a custom Icon component", () => {
@@ -98,7 +117,11 @@ describe("Notification", () => {
         notificationHeading="Notification Heading"
       />
     );
-    expect(utils.container.querySelector(".custom-icon")).toBeInTheDocument();
+
+    const customIcon = utils.container.querySelector(
+      "#notificationID-custom-notification-icon"
+    );
+    expect(customIcon).toBeInTheDocument();
   });
 
   it("renders the announcement Notification type", () => {
@@ -133,6 +156,31 @@ describe("Notification", () => {
     );
   });
 
+  it("renders with an aria-label attribute", () => {
+    expect(screen.getByRole("complementary")).toHaveAttribute(
+      "aria-label",
+      "Notification label"
+    );
+  });
+
+  it("renders a dismissible icon", () => {
+    utils.rerender(
+      <Notification
+        dismissible
+        id="notificationID"
+        notificationContent={<>Notification content.</>}
+        notificationHeading="Notification Heading"
+        notificationType={NotificationTypes.Standard}
+      />
+    );
+
+    const dismissibleIcon = utils.container.querySelector(
+      "#notificationID-dismissible-notification-icon"
+    );
+    expect(dismissibleIcon).toBeInTheDocument();
+    expect(screen.getByTitle("Notification close icon")).toBeInTheDocument();
+  });
+
   it("renders the UI snapshot correctly", () => {
     const standard = renderer
       .create(
@@ -190,11 +238,22 @@ describe("Notification", () => {
         />
       )
       .toJSON();
+    const dismissible = renderer
+      .create(
+        <Notification
+          dismissible
+          id="notificationID7"
+          notificationContent={<>Notification content.</>}
+        />
+      )
+      .toJSON();
+
     expect(standard).toMatchSnapshot();
     expect(announcement).toMatchSnapshot();
     expect(warning).toMatchSnapshot();
     expect(withoutHeading).toMatchSnapshot();
     expect(withoutAnIcon).toMatchSnapshot();
     expect(withoutHeadingAndIcon).toMatchSnapshot();
+    expect(dismissible).toMatchSnapshot();
   });
 });

package/src/components/Notification/Notification.tsx

@@ -30,6 +30,8 @@ type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
 type BasePropsWithoutCentered = Omit<BaseProps, "centered">;
 
 export interface NotificationProps extends BasePropsWithoutAlignText {
+  /** Label used to describe the `Notification`'s aside HTML element. */
+  ariaLabel?: string;
   /** Additional `className` to add.  */
   className?: string;
   /** Optional prop to control whether a `Notification` can be dismissed
@@ -99,6 +101,7 @@ export function NotificationContent(
  */
 export default function Notification(props: NotificationProps) {
   const {
+    ariaLabel,
     centered = false,
     className,
     dismissible = false,
@@ -114,15 +117,14 @@ export default function Notification(props: NotificationProps) {
   const handleClose = () => setIsOpen(false);
   const styles = useMultiStyleConfig("Notification", {
     centered,
+    dismissible,
     noMargin,
     notificationType,
-    showIcon,
   });
   const iconElement = () => {
     const baseIconProps = {
-      decorative: false,
-      size: IconSizes.Large,
       additionalStyles: styles.icon,
+      size: IconSizes.Large,
     };
     // If the icon should not display, return null.
     if (!showIcon) {
@@ -136,16 +138,19 @@ export default function Notification(props: NotificationProps) {
       });
     const iconProps = {
       [NotificationTypes.Announcement]: {
-        name: IconNames.SpeakerNotes,
         color: IconColors.SectionResearchSecondary,
+        name: IconNames.SpeakerNotes,
+        title: "Notification announcement icon",
       },
       [NotificationTypes.Standard]: {
-        name: IconNames.AlertNotificationImportant,
         color: IconColors.UiBlack,
+        name: IconNames.AlertNotificationImportant,
+        title: "Notification standard icon",
       },
       [NotificationTypes.Warning]: {
-        name: IconNames.ErrorFilled,
         color: IconColors.BrandPrimary,
+        name: IconNames.ErrorFilled,
+        title: "Notification warning icon",
       },
     };
     return (
@@ -158,15 +163,19 @@ export default function Notification(props: NotificationProps) {
   };
   const dismissibleButton = dismissible && (
     <Button
+      additionalStyles={styles.dismissibleButton}
+      attributes={{
+        "aria-label": "Close the notification",
+      }}
       buttonType={ButtonTypes.Link}
+      id={`${id}-notification-dismissible-button`}
       onClick={handleClose}
-      additionalStyles={styles.dismissibleButton}
     >
       <Icon
-        id={`${id}-notification-dismissible-icon`}
-        decorative={false}
+        id={`${id}-dismissible-notification-icon`}
         name={IconNames.Close}
         size={IconSizes.Large}
+        title="Notification close icon"
       />
     </Button>
   );
@@ -199,11 +208,12 @@ export default function Notification(props: NotificationProps) {
   }
   return (
     <Box
+      aria-label={ariaLabel}
       as="aside"
-      id={id}
       className={className}
-      __css={styles}
       data-type={notificationType}
+      id={id}
+      __css={styles}
     >
       <Box __css={styles.container}>
         {childHeading}