@nypl/design-system-react-components 1.0.0 → 1.0.3-beta

package/src/components/Icons/Icon.tsx

@@ -1,187 +0,0 @@
-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

@@ -1,64 +0,0 @@
-/* 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

@@ -1,129 +0,0 @@
-// 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>
-`;