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

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { Icon as ChakraIcon, Box, useStyleConfig } from "@chakra-ui/react";
+
+import generateUUID from "../../helpers/generateUUID";
+import { LogoNames, LogoSizes } from "./LogoTypes";
+import logoSvgs from "./LogoSvgs";
+
+export interface LogoProps {
+  /** Optionally pass in additional Chakra-based styles. */
+  additionalStyles?: { [key: string]: any };
+  /** Optional className that will be added to the parent element */
+  className?: string;
+  /** Logos designated as decorative will be ignored by screenreaders. False
+   * by default. */
+  decorative?: boolean;
+  /** ID that other components can cross reference for accessibility purposes */
+  id?: string;
+  /** The name of the logo you want to use. */
+  name?: LogoNames;
+  /** Sets the logo size. */
+  size?: LogoSizes;
+  /** For accessibility purposes, the text passed in the `title` prop gets
+   * rendered in a `title` element in the SVG. This descriptive text is not
+   * visible but is needed for screenreaders to describe the graphic. */
+  title?: string;
+}
+
+/**
+ * The `Logo` component renders SVG-based logos and color variants that are
+ * commonly used by the New York Public Library.
+ */
+export default function Logo(props: React.PropsWithChildren<LogoProps>) {
+  const {
+    additionalStyles = {},
+    children,
+    className,
+    decorative = false,
+    id = generateUUID(),
+    name,
+    size = LogoSizes.Medium,
+    title = `${name} logo`,
+  } = props;
+  const styles = useStyleConfig("Logo", {
+    size,
+  });
+  const logoProps = {
+    "aria-hidden": decorative,
+    className,
+    id,
+    role: "img",
+    title,
+  };
+  let childSVG = null;
+
+  // Component prop validation
+  if (name && children) {
+    console.warn(
+      "Logo accepts either a `name` prop or an `svg` element child. It can not accept both."
+    );
+    return null;
+  } else if (!name && !children) {
+    console.warn(
+      "Pass a logo `name` prop or an SVG child to `Logo` to ensure a logo appears."
+    );
+    return null;
+  }
+
+  // The user wants to render an existing logo. Load the logo and render it
+  // as a component through Chakra's Icon component. Otherwise, we're going to
+  // render the SVG child with NYPL-theme styling.
+  if (name) {
+    const SvgComponent: any = logoSvgs[name];
+    return (
+      <ChakraIcon
+        as={SvgComponent}
+        {...logoProps}
+        __css={{ ...styles, ...additionalStyles }}
+      />
+    );
+  }
+
+  // If no `name` prop was passed, we expect a child SVG element to be passed.
+  // Apply logo props to the SVG child.
+  if (
+    (children as JSX.Element).type === "svg" ||
+    (children as JSX.Element).props.type === "svg" ||
+    (children as JSX.Element).props.mdxType === "svg"
+  ) {
+    childSVG = React.cloneElement(children as JSX.Element, {
+      ...logoProps,
+    });
+  } else {
+    console.warn("You must pass an `svg` element to the `Logo` component.");
+  }
+
+  return <Box __css={styles}>{childSVG}</Box>;
+}

package/src/components/Logo/LogoSvgs.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable camelcase */
+import logo_bpl_black from "../../../icons/svg/logo_bpl_black.svg";
+import logo_lpa_color from "../../../icons/svg/logo_lpa_color.svg";
+import logo_lpa_white from "../../../icons/svg/logo_lpa_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_qpl_alt_black from "../../../icons/svg/logo_qpl_alt_black.svg";
+import logo_qpl_color from "../../../icons/svg/logo_qpl_color.svg";
+import logo_schomburg_circle_color from "../../../icons/svg/logo_schomburg_circle_color.svg";
+import logo_schomburg_color from "../../../icons/svg/logo_schomburg_color.svg";
+import logo_simplye_black from "../../../icons/svg/logo_simplye_black.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";
+
+export default {
+  logo_bpl_black,
+  logo_lpa_color,
+  logo_lpa_white,
+  logo_nypl_full_black,
+  logo_nypl_full_white,
+  logo_nypl_lion_white,
+  logo_nypl_lion_black,
+  logo_qpl_alt_black,
+  logo_qpl_color,
+  logo_schomburg_circle_color,
+  logo_schomburg_color,
+  logo_simplye_black,
+  logo_simplye_color,
+  logo_snfl_black,
+  logo_snfl_white,
+};

package/src/components/Logo/LogoTypes.tsx

@@ -0,0 +1,32 @@
+export enum LogoColors {
+  Default = "",
+  UiBlack = "ui.black",
+  UiWhite = "ui.white",
+}
+
+export enum LogoSizes {
+  ExtraExtraSmall = "xxsmall",
+  ExtraSmall = "xsmall",
+  Small = "small",
+  Medium = "medium",
+  Large = "large",
+  Default = "default",
+}
+
+export enum LogoNames {
+  BrooklynPublicLibraryBlack = "logo_bpl_black",
+  LPAColor = "logo_lpa_color",
+  LPAWhite = "logo_lpa_white",
+  NYPLBlack = "logo_nypl_full_black",
+  NYPLWhite = "logo_nypl_full_white",
+  NYPLLionBlack = "logo_nypl_lion_black",
+  NYPLLionWhite = "logo_nypl_lion_white",
+  QueensPublicLibraryColor = "logo_qpl_color",
+  QueensPublicLibraryAltBlack = "logo_qpl_alt_black",
+  SchomburgColor = "logo_schomburg_color",
+  SchomburgCircleColor = "logo_schomburg_circle_color",
+  SimplyEColor = "logo_simplye_color",
+  SimplyEBlack = "logo_simplye_black",
+  SNFLBlack = "logo_snfl_black",
+  SNFLWhite = "logo_snfl_white",
+}

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

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Logo renders the UI snapshot correctly 1`] = `
+<svg
+  aria-hidden={false}
+  className="chakra-icon css-onkibi"
+  focusable={false}
+  id="test-logo"
+  role="img"
+  title="logo_nypl_full_black logo"
+  viewBox="0 0 24 24"
+>
+  <g
+    stroke="currentColor"
+    strokeWidth="1.5"
+  >
+    <path
+      d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+      fill="none"
+      strokeLinecap="round"
+    />
+    <path
+      d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+      fill="currentColor"
+      strokeLinecap="round"
+    />
+    <circle
+      cx="12"
+      cy="12"
+      fill="none"
+      r="11.25"
+      strokeMiterlimit="10"
+    />
+  </g>
+</svg>
+`;
+
+exports[`Logo renders the UI snapshot correctly 2`] = `
+<svg
+  aria-hidden={false}
+  className="chakra-icon css-onkibi"
+  focusable={false}
+  id="test-logo-size"
+  role="img"
+  title="logo_nypl_full_black logo"
+  viewBox="0 0 24 24"
+>
+  <g
+    stroke="currentColor"
+    strokeWidth="1.5"
+  >
+    <path
+      d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+      fill="none"
+      strokeLinecap="round"
+    />
+    <path
+      d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+      fill="currentColor"
+      strokeLinecap="round"
+    />
+    <circle
+      cx="12"
+      cy="12"
+      fill="none"
+      r="11.25"
+      strokeMiterlimit="10"
+    />
+  </g>
+</svg>
+`;

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

@@ -1,11 +1,12 @@
 import { useState } from "react";
 import {
-  Meta,
-  Story,
   ArgsTable,
   Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
+
 import Modal from "./Modal";
 import Button from "../Button/Button";
 import { getCategory } from "../../utils/componentCategories";
@@ -14,7 +15,12 @@ import { getCategory } from "../../utils/componentCategories";
   title={getCategory("Modal")}
   component={Modal}
   argTypes={{
+    blockName: { control: false },
     children: { table: { disable: true } },
+    className: { control: false },
+    id: { control: false },
+    modifiers: { control: false },
+    open: { description: "Only used in Storybook." },
   }}
   parameters={{
     jest: ["Modal.test.tsx"],
@@ -119,12 +125,21 @@ export const ModalStory = (args) => {
 };
 
 <Canvas withToolbar>
-  <Story name="Basic" args={{ open: false }}>
+  <Story
+    name="Modal"
+    args={{
+      blockName: undefined,
+      className: undefined,
+      id: "modal-id",
+      modifiers: undefined,
+      open: false,
+    }}
+  >
     {(args) => <ModalStory {...args} />}
   </Story>
 </Canvas>
 
-<ArgsTable story="Basic" />
+<ArgsTable story="Modal" />
 
 ## Code Implementation
 

package/src/components/Modal/Modal.tsx

@@ -1,15 +1,10 @@
 import * as React from "react";
-import bem from "../../utils/bem";
 
 export interface ModalProps {
-  /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-  blockName?: string;
   /** ClassName that appears in addition to "modal" */
   className?: string;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
-  /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  modifiers?: string[];
 }
 
 /** Full-screen modal that appears on top of the body of the page. */
@@ -23,14 +18,13 @@ export default class Modal extends React.Component<ModalProps, any> {
   }
 
   render() {
-    const { modifiers = [], blockName, id, className } = this.props;
-    const baseClass = "modal";
+    const { id, className } = this.props;
 
     return (
       <div
         // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
         tabIndex={0}
-        className={bem(baseClass, modifiers, blockName, [className])}
+        className={`modal ${className}`}
         id={id}
       >
         {this.props.children}

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

@@ -1,24 +1,24 @@
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
-  Preview,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
+import Icon from "../Icons/Icon";
+import { IconColors, IconNames } from "../Icons/IconTypes";
 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";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const enumValues = getStorybookEnumValues(
+  NotificationTypes,
+  "NotificationTypes"
+);
 
 <Meta
   title={getCategory("Notification")}
@@ -31,6 +31,25 @@ import DSProvider from "../../theme/provider";
     },
     jest: ["Notification.test.tsx"],
   }}
+  argTypes={{
+    centered: {
+      table: { defaultValue: { summary: false } },
+    },
+    className: { control: false },
+    dismissible: {
+      table: { defaultValue: { summary: false } },
+    },
+    icon: { control: false },
+    id: { control: false },
+    noMargin: {
+      table: { defaultValue: { summary: false } },
+    },
+    notificationType: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "NotificationTypes.Standard" } },
+      options: enumValues.options,
+    },
+  }}
 />
 
 # Notification
@@ -38,7 +57,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.25.8`   |
+| Latest            | `0.25.9`   |
 
 <Description of={Notification} />
 
@@ -51,10 +70,14 @@ within a parent element.
 
 <Canvas>
   <Story
-    name="Notification Props"
+    name="Notification with Controls"
     args={{
-      id: "basic-notification",
-      centered: true,
+      centered: false,
+      className: undefined,
+      dismissible: false,
+      icon: undefined,
+      id: "notification-id",
+      noMargin: false,
       notificationHeading: "Notification Heading",
       notificationContent: (
         <>
@@ -71,13 +94,16 @@ within a parent element.
   >
     {(args) => (
       <div style={{ border: "1px solid #ccc" }}>
-        <Notification {...args} />
+        <Notification
+          {...args}
+          notificationType={enumValues.getValue(args.notificationType)}
+        />
       </div>
     )}
   </Story>
 </Canvas>
 
-<ArgsTable story="Notification Props" />
+<ArgsTable story="Notification with Controls" />
 
 ## Variants
 
@@ -233,25 +259,22 @@ The default icon can be overridden by using the `icon` prop to pass a custom `Ic
 
 <Canvas>
   <Story name="Custom Icons">
-    {(args) => (
-      <Notification
-        icon={
-          <Icon
-            name={IconNames.Check}
-            color={IconColors.SectionResearchSecondary}
-          />
-        }
-        notificationHeading="Custom Icon"
-        notificationContent={
-          <>
-            This is a Notification with a custom 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.
-          </>
-        }
-      />
-    )}
+    <Notification
+      icon={
+        <Icon
+          name={IconNames.Check}
+          color={IconColors.SectionResearchSecondary}
+        />
+      }
+      notificationHeading="Custom Icon"
+      notificationContent={
+        <>
+          This is a Notification with a custom 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.
+        </>
+      }
+    />
   </Story>
 </Canvas>

package/src/components/Notification/Notification.tsx

@@ -17,6 +17,8 @@ interface BaseProps {
   centered?: boolean;
   /** Optional custom `Icon` that will override the default `Icon`. */
   icon?: JSX.Element;
+  /** ID that other components can cross reference for accessibility purposes. */
+  id?: string;
   /** Optional prop to control the coloring of the `Notification` text and the
    * visibility of an applicable icon. */
   notificationType?: NotificationTypes;
@@ -35,8 +37,6 @@ export interface NotificationProps extends BasePropsWithoutAlignText {
   dismissible?: boolean;
   /** Optional custom `Icon` that will override the default `Icon`. */
   icon?: JSX.Element;
-  /** ID that other components can cross reference for accessibility purposes. */
-  id?: string;
   /** Optional prop to control the margin around the `Notification` component. */
   noMargin?: boolean;
   /** Content to be rendered in a `NotificationContent` component. */
@@ -53,7 +53,7 @@ export interface NotificationProps extends BasePropsWithoutAlignText {
 export function NotificationHeading(
   props: React.PropsWithChildren<BasePropsWithoutAlignText>
 ) {
-  const { centered, children, icon, notificationType } = props;
+  const { centered, children, icon, id, notificationType } = props;
   const styles = useMultiStyleConfig("NotificationHeading", {
     centered,
     icon,
@@ -62,7 +62,11 @@ export function NotificationHeading(
   return (
     <Box as="header" __css={styles}>
       {icon}
-      <Heading level={HeadingLevels.Four} additionalStyles={styles.heading}>
+      <Heading
+        additionalStyles={styles.heading}
+        id={`${id}-heading`}
+        level={HeadingLevels.Four}
+      >
         {children}
       </Heading>
     </Box>
@@ -171,6 +175,7 @@ export default function Notification(props: NotificationProps) {
     <NotificationHeading
       centered={centered}
       icon={iconElem}
+      id={id}
       notificationType={notificationType}
     >
       {notificationHeading}

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

@@ -46,6 +46,7 @@ exports[`Notification renders the UI snapshot correctly 1`] = `
       </svg>
       <h4
         className="chakra-heading css-0"
+        id="notificationID1-heading"
       >
         Notification Heading
       </h4>
@@ -109,6 +110,7 @@ exports[`Notification renders the UI snapshot correctly 2`] = `
       </svg>
       <h4
         className="chakra-heading css-0"
+        id="notificationID2-heading"
       >
         Notification Heading
       </h4>
@@ -172,6 +174,7 @@ exports[`Notification renders the UI snapshot correctly 3`] = `
       </svg>
       <h4
         className="chakra-heading css-0"
+        id="notificationID3-heading"
       >
         Notification Heading
       </h4>
@@ -257,6 +260,7 @@ exports[`Notification renders the UI snapshot correctly 5`] = `
     >
       <h4
         className="chakra-heading css-0"
+        id="notificationID5-heading"
       >
         Notification Heading
       </h4>

package/src/components/Pagination/Pagination.stories.mdx

@@ -1,12 +1,13 @@
 import {
-  Meta,
-  Story,
   ArgsTable,
   Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 import { withQuery } from "@storybook/addon-queryparams";
+
 import Pagination from "./Pagination";
 import * as stories from "./Pagination.stories.tsx";
 import { getCategory } from "../../utils/componentCategories";
@@ -23,9 +24,11 @@ import { getCategory } from "../../utils/componentCategories";
     jest: ["Pagination.test.tsx"],
   }}
   argTypes={{
-    id: { table: { disable: true } },
-    getPageHref: { table: { disable: true } },
-    onPageChange: { table: { disable: true } },
+    className: { control: false },
+    getPageHref: { control: false },
+    id: { control: false },
+    initialPage: { table: { defaultValue: { summary: 1 } } },
+    onPageChange: { control: false },
   }}
 />
 
@@ -69,7 +72,11 @@ const getPageHref = (selectedPage: number) => {
   <Story
     name="Pagination with URL Updates"
     args={{
+      className: undefined,
+      getPageHref: undefined,
+      id: "pagination-id",
       initialPage: 1,
+      onPageChange: undefined,
       pageCount: 10,
     }}
   >
@@ -102,7 +109,11 @@ const onPageChange = (currentPage: number) => {
   <Story
     name="Pagination with Unchanging URL"
     args={{
+      className: undefined,
+      getPageHref: undefined,
+      id: "pagination-id-2",
       initialPage: 7,
+      onPageChange: undefined,
       pageCount: 100,
     }}
   >

package/src/components/Pagination/Pagination.tsx

@@ -31,9 +31,9 @@ export interface PaginationProps {
 const Pagination: React.FC<PaginationProps> = (props: PaginationProps) => {
   const {
     className,
-    initialPage = 1,
     getPageHref,
     id = generateUUID(),
+    initialPage = 1,
     onPageChange = () => {},
     pageCount,
   } = props;

package/src/components/Placeholder/Placeholder.tsx

@@ -1,24 +1,17 @@
 import * as React from "react";
-import bem from "../../utils/bem";
 
 export interface PlaceholderProps {
-  /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-  blockName?: string;
-  /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  modifiers?: string[];
+  /** Modifier string for the classname. */
+  variant?: string;
 }
 
 /** Creates a gray box with an editable string for dropping in spaces
  * within components or on templates where a component will be but
  * that hasn't been created yet
  */
-export default function Placeholder(
-  props: React.PropsWithChildren<PlaceholderProps>
-) {
-  const { modifiers = [], blockName } = props;
-  return (
-    <div className={bem("placeholder", modifiers, blockName)}>
-      {props.children}
-    </div>
-  );
+export default function Placeholder({
+  children,
+  variant,
+}: React.PropsWithChildren<PlaceholderProps>) {
+  return <div className={`placeholder placeholder-${variant}`}>{children}</div>;
 }