@nypl/design-system-react-components 0.25.0 → 0.25.4

package/src/components/Icons/Icon.tsx

@@ -1,39 +1,44 @@
-/* eslint-disable camelcase */
 import * as React from "react";
-import bem from "../../utils/bem";
-import generateUUID from "../../helpers/generateUUID";
+import { Icon as ChakraIcon, Box, useStyleConfig } from "@chakra-ui/react";
 
+import generateUUID from "../../helpers/generateUUID";
 import {
-  IconRotationTypes,
-  IconNames,
-  LogoNames,
+  IconAlign,
   IconColors,
+  IconNames,
+  IconRotationTypes,
   IconSizes,
+  IconTypes,
+  LogoNames,
 } from "./IconTypes";
-
 import iconSvgs from "./IconSvgs";
 
 export interface IconProps {
-  /** Additional attributes to pass to the `<svg>` tag. */
-  attributes?: { [key: string]: any };
-  /** 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[];
+  /** Optionally pass in additional Chakra-based styles. */
+  additionalStyles?: { [key: string]: any };
+  /** Aligns the icon. */
+  align?: IconAlign;
   /** className that appears in addition to "icon" */
   className?: string;
-  /** Icons designated as decorative will be ignored by screenreaders */
+  /** Overrides default icon color (black). */
+  color?: IconColors;
+  /** Icons designated as decorative will be ignored by screenreaders. True
+   * by default. */
   decorative?: boolean;
-  /** This text will be added as a child `<title>` element inside the `<svg>` tag.  It is recommended to do this for increased accessibility. */
-  titleText?: string;
   /** Rotates the icon clockwise in increments of 90deg */
   iconRotation?: IconRotationTypes;
-  /** Overrides default icon color (black). */
-  color?: IconColors;
-  /** Sets the icon size. */
-  size?: IconSizes;
+  /** ID that other components can cross reference for accessibility purposes */
+  id?: string;
   /** The name of the icon you want to use. */
   name?: IconNames | LogoNames;
+  /** 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;
+  /** Sets the icon variant type. */
+  type?: IconTypes;
 }
 
 /**
@@ -41,63 +46,75 @@ export interface IconProps {
  */
 export default function Icon(props: React.PropsWithChildren<IconProps>) {
   const {
-    blockName,
-    decorative = false,
+    additionalStyles = {},
+    align = "none",
+    children,
     className,
-    titleText,
-    iconRotation,
-    color,
-    size,
-    modifiers = [],
+    color = IconColors.UiBlack,
+    decorative = true,
+    iconRotation = IconRotationTypes.Rotate0,
+    id = generateUUID(),
     name,
-    children,
-    attributes = [],
+    size = IconSizes.Medium,
+    title = `${name} icon`,
+    type = IconTypes.Default,
   } = props;
-
-  if (iconRotation) {
-    modifiers.push(iconRotation);
-  }
-
-  if (color) {
-    modifiers.push(color);
-  }
-
-  if (size) {
-    modifiers.push(size);
-  }
-
-  const iconID = generateUUID();
+  const styles = useStyleConfig("Icon", {
+    align,
+    color,
+    iconRotation,
+    size,
+    variant: type,
+  });
   const iconProps = {
-    className: bem("icon", modifiers, blockName, [className]),
-    id: iconID,
-    role: "img",
-    title: titleText || null,
     "aria-hidden": decorative,
-    ...attributes,
+    className,
+    id,
+    role: "img",
+    title,
   };
-
-  // Apply icon props to SVG that was passed as a child.
-  const renderChildren = () =>
-    React.Children.map(children, (child) =>
-      React.cloneElement(child as JSX.Element, { ...iconProps })
-    );
+  let childSVG = null;
 
   // Component prop validation
   if (name && children) {
-    throw new Error("Icon accepts either a name or children, not both");
+    console.warn(
+      "Icon accepts either a `name` prop or an `svg` element child, not both."
+    );
+    return null;
   } else if (!name && !children) {
     console.warn(
-      "Pass a name or any children to Icon to ensure an icon appears"
+      "Pass an icon `name` prop or an SVG child to `Icon` to ensure an icon appears."
     );
+    return null;
   }
 
   // The user wants to render an existing icon. Load the icon and render it
-  // as a component. Otherwise, we're just going to render the children that
-  // were passed to this component.
+  // 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 = iconSvgs[name];
-    return <SvgComponent {...iconProps} />;
+    const SvgComponent: any = iconSvgs[name];
+    return (
+      <ChakraIcon
+        as={SvgComponent}
+        {...iconProps}
+        __css={{ ...styles, ...additionalStyles }}
+      />
+    );
+  }
+
+  // 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("You must pass an `svg` element to the `Icon` component.");
   }
 
-  return <>{renderChildren()}</>;
+  return <Box __css={styles}>{childSVG}</Box>;
 }

package/src/components/Icons/IconSvgs.tsx

@@ -1,11 +1,22 @@
 /* eslint-disable camelcase */
 import accessibility_full from "../../../icons/svg/accessibility_full.svg";
 import accessibility_partial from "../../../icons/svg/accessibility_partial.svg";
+import action_check_circle from "../../../icons/svg/action_check_circle.svg";
+import action_help_default from "../../../icons/svg/action_help_default.svg";
+import action_help_outline from "../../../icons/svg/action_help_outline.svg";
+import action_launch from "../../../icons/svg/action_launch.svg";
 import arrow from "../../../icons/svg/arrow.svg";
 import brooklyn from "../../../icons/svg/brooklyn.svg";
 import check from "../../../icons/svg/check.svg";
 import clock from "../../../icons/svg/clock.svg";
 import close from "../../../icons/svg/close.svg";
+import file_type_audio from "../../../icons/svg/file_type_audio.svg";
+import file_type_doc from "../../../icons/svg/file_type_doc.svg";
+import file_type_generic_doc from "../../../icons/svg/file_type_generic_doc.svg";
+import file_type_image from "../../../icons/svg/file_type_image.svg";
+import file_type_pdf from "../../../icons/svg/file_type_pdf.svg";
+import file_type_spreadsheet from "../../../icons/svg/file_type_spreadsheet.svg";
+import file_type_video from "../../../icons/svg/file_type_video.svg";
 import download from "../../../icons/svg/download.svg";
 import error_filled from "../../../icons/svg/error_filled.svg";
 import error_outline from "../../../icons/svg/error_outline.svg";
@@ -42,6 +53,10 @@ import utility_search from "../../../icons/svg/search.svg";
 export default {
   accessibility_full,
   accessibility_partial,
+  action_check_circle,
+  action_help_default,
+  action_help_outline,
+  action_launch,
   arrow,
   brooklyn,
   check,
@@ -50,6 +65,13 @@ export default {
   download,
   error_filled,
   error_outline,
+  file_type_audio,
+  file_type_doc,
+  file_type_generic_doc,
+  file_type_image,
+  file_type_pdf,
+  file_type_spreadsheet,
+  file_type_video,
   headset,
   logo_brooklyn,
   logo_nypl,

package/src/components/Icons/IconTypes.tsx

@@ -1,76 +1,103 @@
 /* eslint-disable camelcase */
-export enum IconRotationTypes {
-  rotate0 = "rotate-0",
-  rotate90 = "rotate-90",
-  rotate180 = "rotate-180",
-  rotate270 = "rotate-270",
+export enum IconAlign {
+  Left = "left",
+  Right = "right",
+  None = "none",
 }
 
-export enum IconNames {
-  accessibility_full = "accessibility_full",
-  accessibility_partial = "accessibility_partial",
-  arrow = "arrow",
-  check = "check",
-  clock = "clock",
-  close = "close",
-  download = "download",
-  error_filled = "error_filled",
-  error_outline = "error_outline",
-  headset = "headset",
-  minus = "minus",
-  plus = "plus",
-  search = "search",
-  speaker_notes = "speaker_notes",
-  utility_account_filled = "utility_account_filled",
-  utility_account_unfilled = "utility_account_unfilled",
-  utility_hamburger = "utility_hamburger",
-  utility_search = "utility_search",
+export enum IconTypes {
+  Default = "default",
+  Breadcrumbs = "breadcrumbs",
 }
 
-export enum LogoNames {
-  brooklyn = "brooklyn",
-  logo_brooklyn = "logo_brooklyn",
-  logo_nypl = "logo_nypl",
-  logo_nypl_negative = "logo_nypl_negative",
-  logo_queens = "logo_queens",
-  lpa_negative = "lpa_negative",
-  lpa_positive = "lpa_positive",
-  nypl_circle_negative = "nypl_circle_negative",
-  nypl_circle_positive = "nypl_circle_positive",
-  nypl_full_lock_up_negative = "nypl_full_lock_up_negative",
-  nypl_full_lock_up = "nypl_full_lock_up",
-  nypl_no_lion_negative = "nypl_no_lion_negative",
-  nypl_no_lion_positive = "nypl_no_lion_positive",
-  queens_long = "queens_long",
-  queens_stacked = "queens_stacked",
-  schomburg_circle = "schomburg_circle",
-  schomburg_positive = "schomburg_positive",
-  simplye_black = "simplye_black",
-  simplye_color = "simplye_color",
-  snfl_negative = "snfl_negative",
-  snfl_positive = "snfl_positive",
+export enum IconRotationTypes {
+  Rotate0 = "rotate0",
+  Rotate90 = "rotate90",
+  Rotate180 = "rotate180",
+  Rotate270 = "rotate270",
 }
 
 export enum IconColors {
-  ui_black = "ui-black",
-  ui_white = "ui-white",
-  brand_primary = "brand-primary",
-  brand_secondary = "brand-secondary",
-  section_whats_on_primary = "section-whats-on-primary",
-  section_books_and_more_primary = "section-books-and-more-primary",
-  section_research_primary = "section-research-primary",
-  section_research_secondary = "section-research-secondary",
-  section_locations_primary = "section-locations-primary",
-  section_research_library_lpa = "section-research-library-lpa",
-  section_research_library_schomburg = "section-research-library-schomburg",
-  section_research_library_schwartzman = "section-research-library-schwartzman",
+  UiBlack = "ui.black",
+  UiWhite = "ui.white",
+  BrandPrimary = "brand.primary",
+  BrandSecondary = "brand.secondary",
+  SectionWhatsOnPrimary = "section.whats-on.primary",
+  SectionWhatsOnSecondary = "section.whats-on.secondary",
+  SectionBooksAndMorePrimary = "section.books-and-more.primary",
+  SectionBooksAndMoreSecondary = "section.books-and-more.secondary",
+  SectionResearchPrimary = "section.research.primary",
+  SectionResearchSecondary = "section.research.secondary",
+  SectionLocationsPrimary = "section.locations.primary",
+  SectionLocationsSecondary = "section.locations.secondary",
+  SectionBlogsPrimary = "section.blogs.primary",
+  SectionBlogsSecondary = "section.blogs.secondary",
+  SectionResearchLibraryLpa = "section.research-library.lpa",
+  SectionResearchLibrarySchomburg = "section.research-library.schomburg",
+  SectionResearchLibrarySchwartzman = "section.research-library.schwartzman",
 }
 
 export enum IconSizes {
-  small = "small",
-  medium = "medium",
-  large = "large",
-  xlarge = "xlarge",
-  xxlarge = "xxlarge",
-  xxxlarge = "xxxlarge",
+  Small = "small",
+  Medium = "medium",
+  Large = "large",
+  ExtraLarge = "xlarge",
+  ExtraExtraLarge = "xxlarge",
+  ExtraExtraExtraLarge = "xxxlarge",
+}
+
+export enum IconNames {
+  AccessibilityFull = "accessibility_full",
+  AccessibilityPartial = "accessibility_partial",
+  ActionCheckCircle = "action_check_circle",
+  ActionHelpDefault = "action_help_default",
+  ActionHelpOutline = "action_help_outline",
+  ActionLaunch = "action_launch",
+  Arrow = "arrow",
+  Check = "check",
+  Clock = "clock",
+  Close = "close",
+  Download = "download",
+  ErrorFilled = "error_filled",
+  ErrorOutline = "error_outline",
+  FileTypeAudio = "file_type_audio",
+  FileTypeDoc = "file_type_doc",
+  FileTypeGenericDoc = "file_type_generic_doc",
+  FileTypeImage = "file_type_image",
+  FileTypePdf = "file_type_pdf",
+  FileTypeSpreadsheet = "file_type_spreadsheet",
+  FileTypeVideo = "file_type_video",
+  Headset = "headset",
+  Minus = "minus",
+  Plus = "plus",
+  Search = "search",
+  SpeakerNotes = "speaker_notes",
+  UtilityAccountFilled = "utility_account_filled",
+  UtilityAccountUnfilled = "utility_account_unfilled",
+  UtilityHamburger = "utility_hamburger",
+  UtilitySearch = "utility_search",
+}
+
+export enum LogoNames {
+  Brooklyn = "brooklyn",
+  LogoBrooklyn = "logo_brooklyn",
+  LogoNypl = "logo_nypl",
+  LogoNyplNegative = "logo_nypl_negative",
+  LogoQueens = "logo_queens",
+  LpaNegative = "lpa_negative",
+  LpaPositive = "lpa_positive",
+  NyplCircleNegative = "nypl_circle_negative",
+  NyplCirclePositive = "nypl_circle_positive",
+  NyplFullLockUpNegative = "nypl_full_lock_up_negative",
+  NyplFullLockUp = "nypl_full_lock_up",
+  NyplNoLionNegative = "nypl_no_lion_negative",
+  NyplNoLionPositive = "nypl_no_lion_positive",
+  QueensLong = "queens_long",
+  QueensStacked = "queens_stacked",
+  SchomburgCircle = "schomburg_circle",
+  SchomburgPositive = "schomburg_positive",
+  SimplyeBlack = "simplye_black",
+  SimplyeColor = "simplye_color",
+  SnflNegative = "snfl_negative",
+  SnflPositive = "snfl_positive",
 }

package/src/components/Image/Image.stories.mdx

@@ -0,0 +1,220 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  ArgsTable,
+  Description,
+} from "@storybook/addon-docs/blocks";
+import { withDesign } from "storybook-addon-designs";
+import { VStack } from "@chakra-ui/react";
+
+import Image from "./Image";
+import { ImageRatios, ImageSizes, ImageTypes } from "./ImageTypes";
+import Heading from "../Heading/Heading";
+import { getCategory } from "../../utils/componentCategories";
+
+<Meta
+  title={getCategory("Image")}
+  component={Image}
+  decorators={[withDesign]}
+  parameters={{
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11896%3A45379",
+    },
+    jest: ["Image.test.tsx"],
+  }}
+  argTypes={{
+    alt: { table: { disable: true } },
+    className: { table: { disable: true } },
+    component: { table: { disable: true } },
+  }}
+/>
+
+# Image
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.0.6`    |
+| Latest            | `0.25.3`   |
+
+<Description of={Image} />
+
+<p>
+  If you want a simple HTML `img` element then don't pass in values for the
+  `imageAspectRatio` or `imageSize` props.
+</p>
+
+<Canvas>
+  <Story
+    name="Image Props"
+    args={{
+      alt: "Alt text",
+      imageAspectRatio: ImageRatios.TwoByOne,
+      imageCaption: "Image caption",
+      imageCredit: "Image credit",
+      imageSize: ImageSizes.Medium,
+      imageType: ImageTypes.Default,
+      src: "https://placeimg.com/400/300/animals",
+    }}
+  >
+    {(args) => <Image {...args} />}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Image Props" />
+
+## Image Figure
+
+By passing in `imageCredit` or `imageCaption`, the `Image` component will
+render an HTML `figure` element and render an `img` element inside with the
+proper props. If no `imageCredit` or `imageCaption` prop values are passed,
+then an `img` element will be rendered with or without wrapper style divs.
+
+<Canvas>
+  <Story
+    name="Figure and figcaption"
+    args={{
+      alt: "Alt text",
+      imageAspectRatio: ImageRatios.ThreeByTwo,
+      imageCaption: "Image caption",
+      imageCredit: "Image credit",
+      imageSize: ImageSizes.Medium,
+      imageType: ImageTypes.Default,
+      src: "https://placeimg.com/400/300/animals",
+    }}
+    argTypes={{
+      imageAspectRatio: { table: { disable: true } },
+      imageCaption: { table: { disable: true } },
+      imageCredit: { table: { disable: true } },
+      imageSize: { table: { disable: true } },
+      imageType: { table: { disable: true } },
+      src: { table: { disable: true } },
+    }}
+  >
+    {(args) => <Image {...args} />}
+  </Story>
+</Canvas>
+
+## Image Sizes
+
+Use the `ImageSizes` prop to set the desired size.
+
+<Canvas>
+  <Story name="Image Sizes">
+    <VStack spacing="xs">
+      <Heading id="Small" text="ImageSizes.Small" />
+      <Image
+        alt="Alt text"
+        imageSize={ImageSizes.Small}
+        src="https://placeimg.com/400/300/animals"
+      />
+      <Heading id="Medium" text="ImageSizes.Medium" />
+      <Image
+        alt="Alt text"
+        imageSize={ImageSizes.Medium}
+        src="https://placeimg.com/400/300/animals"
+      />
+      <Heading id="Large" text="ImageSizes.Large" />
+      <Image
+        alt="Alt text"
+        imageSize={ImageSizes.Large}
+        src="https://placeimg.com/400/300/animals"
+      />
+      <Heading id="Default" text="ImageSizes.Default" />
+      <Image alt="Alt text" src="https://placeimg.com/400/300/animals" />
+    </VStack>
+  </Story>
+</Canvas>
+
+## Image Aspect Ratios
+
+Use the `imageAspectRatio` prop to set the desired aspect ratio. Note: the
+following example has `imageSize` set to `ImageSizes.Small`.
+
+For a better viewing experience, the `Image` components below have been wrapped
+in an element with a fixed width value.
+
+<Canvas>
+  <Story name="Image Aspect Ratios">
+    <VStack spacing="xs" maxWidth="360px" margin="auto">
+      <Heading id="fourbythree" text="ImageRatios.FourByThree" />
+      <Image
+        alt="Alt text"
+        imageAspectRatio={ImageRatios.FourByThree}
+        src="https://placeimg.com/400/300/animals"
+      />
+      <Heading id="onebytwo" text="ImageRatios.OneByTwo" />
+      <Image
+        alt="Alt text"
+        imageAspectRatio={ImageRatios.OneByTwo}
+        src="https://placeimg.com/400/300/animals"
+      />
+      <Heading id="original" text="ImageRatios.Original" />
+      <Image
+        alt="Alt text"
+        imageAspectRatio={ImageRatios.Original}
+        src="https://placeimg.com/400/300/animals"
+      />
+      <Heading id="sixteenbynine" text="ImageRatios.SixteenByNine" />
+      <Image
+        alt="Alt text"
+        imageAspectRatio={ImageRatios.SixteenByNine}
+        src="https://placeimg.com/400/300/animals"
+      />
+      <Heading id="square" text="ImageRatios.Square" />
+      <Image
+        alt="Alt text"
+        imageAspectRatio={ImageRatios.Square}
+        src="https://placeimg.com/400/300/animals"
+      />
+      <Heading id="threebyfour" text="ImageRatios.ThreeByFour" />
+      <Image
+        alt="Alt text"
+        imageAspectRatio={ImageRatios.ThreeByFour}
+        src="https://placeimg.com/400/300/animals"
+      />
+      <Heading id="threebytwo" text="ImageRatios.ThreeByTwo" />
+      <Image
+        alt="Alt text"
+        imageAspectRatio={ImageRatios.ThreeByTwo}
+        src="https://placeimg.com/400/300/animals"
+      />
+      <Heading id="twobyone" text="ImageRatios.TwoByOne" />
+      <Image
+        alt="Alt text"
+        imageAspectRatio={ImageRatios.TwoByOne}
+        src="https://placeimg.com/400/300/animals"
+      />
+    </VStack>
+  </Story>
+</Canvas>
+
+## Image Types
+
+Use the `imageType` prop to get an image variant. Note that to get a perfect
+circle, the `imageAspectRatio` prop _must_ be set to `ImageRatios.Square`.
+
+For a better viewing experience, the `Image` components below have been wrapped
+in an element with a fixed width value.
+
+<Canvas>
+  <Story name="Image Types">
+    <VStack spacing="xs" maxWidth="360px" margin="auto">
+      <Heading id="default" text="ImageTypes.Default" />
+      <Image
+        alt="Alt text"
+        imageAspectRatio={ImageRatios.Square}
+        imageType={ImageTypes.Default}
+        src="https://placeimg.com/400/400/animals"
+      />
+      <Heading id="circle" text="ImageTypes.Circle" />
+      <Image
+        alt="Alt text"
+        imageAspectRatio={ImageRatios.Square}
+        imageType={ImageTypes.Circle}
+        src="https://placeimg.com/400/400/animals"
+      />
+    </VStack>
+  </Story>
+</Canvas>