@nypl/design-system-react-components 1.0.1 → 1.0.2

package/src/components/Icons/Icon.tsx

@@ -0,0 +1,187 @@
+import {
+  Icon as ChakraIcon,
+  Box,
+  chakra,
+  useStyleConfig,
+} from "@chakra-ui/react";
+import * as React from "react";
+
+import iconSvgs from "./IconSvgs";
+
+export type IconAlign = "left" | "right" | "none";
+export type IconColors =
+  | "ui.black"
+  | "ui.white"
+  | "brand.primary"
+  | "brand.secondary"
+  | "section.blogs.primary"
+  | "section.blogs.secondary"
+  | "section.books-and-more.primary"
+  | "section.books-and-more.secondary"
+  | "section.education.primary"
+  | "section.education.secondary"
+  | "section.locations.primary"
+  | "section.locations.secondary"
+  | "section.research.primary"
+  | "section.research.secondary"
+  | "section.research-library.lpa"
+  | "section.research-library.schomburg"
+  | "section.research-library.schwartzman"
+  | "section.whats-on.primary"
+  | "section.whats-on.secondary";
+export type IconNames =
+  | "accessibilityFull"
+  | "accessibilityPartial"
+  | "actionCheckCircle"
+  | "actionHelpDefault"
+  | "actionHelpOutline"
+  | "actionLaunch"
+  | "alertNotificationImportant"
+  | "arrow"
+  | "check"
+  | "clock"
+  | "close"
+  | "download"
+  | "errorFilled"
+  | "errorOutline"
+  | "fileTypeAudio"
+  | "fileTypeDoc"
+  | "fileTypeGenericDoc"
+  | "fileTypeImage"
+  | "fileTypePdf"
+  | "fileTypeSpreadsheet"
+  | "fileTypeVideo"
+  | "headset"
+  | "minus"
+  | "plus"
+  | "search"
+  | "speakerNotes"
+  | "utilityAccountFilled"
+  | "utilityAccountUnfilled"
+  | "utilityHamburger"
+  | "utilitySearch";
+export type IconRotationTypes =
+  | "rotate0"
+  | "rotate90"
+  | "rotate180"
+  | "rotate270";
+export type IconSizes =
+  | "default"
+  | "small"
+  | "medium"
+  | "large"
+  | "xlarge"
+  | "xxlarge"
+  | "xxxlarge";
+export type IconTypes = "default" | "breadcrumbs";
+
+export interface IconProps {
+  /** Aligns the icon. */
+  align?: IconAlign;
+  /** Optional className that will be added to the parent element */
+  className?: string;
+  /** Overrides default icon color (black). */
+  color?: IconColors;
+  /** Icons designated as decorative will be ignored by screenreaders. True
+   * by default. */
+  decorative?: boolean;
+  /** Rotates the icon clockwise in increments of 90deg */
+  iconRotation?: IconRotationTypes;
+  /** ID that other components can cross reference for accessibility purposes */
+  id?: string;
+  /** The name of the icon you want to use. */
+  name?: IconNames;
+  /** Sets the icon size. */
+  size?: IconSizes;
+  /** 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;
+  /** FOR INTERNAL DS USE ONLY: the icon variant to display. */
+  type?: IconTypes;
+}
+
+/**
+ * Renders SVG-based icons.
+ */
+export const Icon = chakra(
+  (props: React.PropsWithChildren<IconProps>) => {
+    const {
+      align = "none",
+      children,
+      className,
+      color = "ui.black",
+      decorative = true,
+      iconRotation = "rotate0",
+      id,
+      name,
+      size = "default",
+      title = `${name} icon`,
+      type = "default",
+      ...rest
+    } = props;
+    const styles = useStyleConfig("Icon", {
+      align,
+      color,
+      iconRotation,
+      size,
+      variant: type,
+    });
+    const iconProps = {
+      "aria-hidden": decorative,
+      className,
+      id,
+      role: "img",
+      title,
+      ...rest,
+    };
+    let childSVG = null;
+
+    // Component prop validation
+    if (name && children) {
+      console.warn(
+        "NYPL Reservoir Icon: Pass in either a `name` prop or an `svg` element " +
+          "child. Do not pass both."
+      );
+      return null;
+    } else if (!name && !children) {
+      console.warn(
+        "NYPL Reservoir Icon: Pass an icon `name` prop or an SVG child to " +
+          "ensure an icon appears."
+      );
+      return null;
+    }
+
+    // The user wants to render an existing icon. Load the icon 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 = iconSvgs[name];
+      return <ChakraIcon as={SvgComponent} {...iconProps} __css={styles} />;
+    }
+
+    // If no `name` prop was passed, we expect a child SVG element to be passed.
+    // Apply icon 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, {
+        ...iconProps,
+      });
+    } else {
+      console.warn(
+        "NYPL Reservoir Icon: An `svg` element must be passed to the `Icon` " +
+          "component as its child."
+      );
+    }
+
+    return <Box __css={styles}>{childSVG}</Box>;
+  },
+  // Pass all custom props to Chakra and override, e.g. we want the
+  // DS color value set and not color strings.
+  { shouldForwardProp: () => true }
+);
+
+export default Icon;

package/src/components/Icons/IconSvgs.tsx

@@ -0,0 +1,64 @@
+/* eslint-disable camelcase */
+import accessibilityFull from "../../../icons/svg/accessibility-full.svg";
+import accessibilityPartial from "../../../icons/svg/accessibility-partial.svg";
+import actionCheckCircle from "../../../icons/svg/action-check-circle.svg";
+import actionHelpDefault from "../../../icons/svg/action-help-default.svg";
+import actionHelpOutline from "../../../icons/svg/action-help-outline.svg";
+import actionLaunch from "../../../icons/svg/action-launch.svg";
+import alertNotificationImportant from "../../../icons/svg/alert-notification-important.svg";
+import arrow from "../../../icons/svg/arrow.svg";
+import check from "../../../icons/svg/check.svg";
+import clock from "../../../icons/svg/clock.svg";
+import close from "../../../icons/svg/close.svg";
+import fileTypeAudio from "../../../icons/svg/file-type-audio.svg";
+import fileTypeDoc from "../../../icons/svg/file-type-doc.svg";
+import fileTypeGenericDoc from "../../../icons/svg/file-type-generic-doc.svg";
+import fileTypeImage from "../../../icons/svg/file-type-image.svg";
+import fileTypePdf from "../../../icons/svg/file-type-pdf.svg";
+import fileTypeSpreadsheet from "../../../icons/svg/file-type-spreadsheet.svg";
+import fileTypeVideo from "../../../icons/svg/file-type-video.svg";
+import download from "../../../icons/svg/download.svg";
+import errorFilled from "../../../icons/svg/error-filled.svg";
+import errorOutline from "../../../icons/svg/error-outline.svg";
+import headset from "../../../icons/svg/headset.svg";
+import minus from "../../../icons/svg/minus.svg";
+import plus from "../../../icons/svg/plus.svg";
+import search from "../../../icons/svg/search.svg";
+import speakerNotes from "../../../icons/svg/speaker-notes.svg";
+import utilityAccountFilled from "../../../icons/svg/utility-account-filled.svg";
+import utilityAccountUnfilled from "../../../icons/svg/utility-account-unfilled.svg";
+import utilityHamburger from "../../../icons/svg/utility-hamburger.svg";
+import utilitySearch from "../../../icons/svg/search.svg";
+
+export default {
+  accessibilityFull,
+  accessibilityPartial,
+  actionCheckCircle,
+  actionHelpDefault,
+  actionHelpOutline,
+  actionLaunch,
+  alertNotificationImportant,
+  arrow,
+  check,
+  clock,
+  close,
+  download,
+  errorFilled,
+  errorOutline,
+  fileTypeAudio,
+  fileTypeDoc,
+  fileTypeGenericDoc,
+  fileTypeImage,
+  fileTypePdf,
+  fileTypeSpreadsheet,
+  fileTypeVideo,
+  headset,
+  minus,
+  plus,
+  search,
+  speakerNotes,
+  utilityAccountFilled,
+  utilityAccountUnfilled,
+  utilityHamburger,
+  utilitySearch,
+};

package/src/components/Icons/__snapshots__/Icon.test.tsx.snap

@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Icon renders the UI snapshot correctly 1`] = `
+<svg
+  aria-hidden={true}
+  className="chakra-icon css-1grhd2q"
+  focusable={false}
+  id="basic"
+  role="img"
+  title="download icon"
+  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[`Icon renders the UI snapshot correctly 2`] = `
+<div
+  className="css-0"
+>
+  <svg
+    aria-hidden={true}
+    className="css-0"
+    id="customIcon"
+    role="img"
+    title="undefined icon"
+    viewBox="0 0 24 14"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      clipRule="evenodd"
+      d="M10.526 12.871L.263 1.676 1.737.324 12 11.52 22.263.324l1.474 1.352L13.474 12.87a2 2 0 01-2.948 0z"
+      fillRule="evenodd"
+    />
+  </svg>
+</div>
+`;
+
+exports[`Icon renders the UI snapshot correctly 3`] = `
+<svg
+  aria-hidden={true}
+  className="chakra-icon css-7rufou"
+  focusable={false}
+  id="chakra"
+  role="img"
+  title="download icon"
+  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[`Icon renders the UI snapshot correctly 4`] = `
+<svg
+  aria-hidden={true}
+  className="chakra-icon css-1grhd2q"
+  data-testid="props"
+  focusable={false}
+  id="props"
+  role="img"
+  title="download icon"
+  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>
+`;