@nypl/design-system-react-components 0.26.1 → 1.0.0

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

@@ -4,11 +4,10 @@ import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import Icon from "./Icon";
-import { IconNames } from "./IconTypes";
 
 describe("Icon Accessibility", () => {
   it("passes axe accessibility test", async () => {
-    const { container } = render(<Icon name={IconNames.Download} />);
+    const { container } = render(<Icon name="download" />);
     expect(await axe(container)).toHaveNoViolations();
   });
 });
@@ -17,7 +16,7 @@ describe("Icon", () => {
   it("consoles a warning if both name and children are passed to Icon", () => {
     const warn = jest.spyOn(console, "warn");
     render(
-      <Icon name={IconNames.Download} decorative={true}>
+      <Icon name="download" decorative={true}>
         <svg viewBox="0 0 24 14" xmlns="http://www.w3.org/2000/svg">
           <path
             fillRule="evenodd"
@@ -52,7 +51,7 @@ describe("Icon", () => {
   });
 
   it("renders an icon based on the icon `name` prop", () => {
-    const { container } = render(<Icon name={IconNames.Download} />);
+    const { container } = render(<Icon name="download" />);
     expect(container.querySelector("svg")).toBeInTheDocument();
   });
 
@@ -61,13 +60,13 @@ describe("Icon", () => {
   // In order to test this, we can check the `title` attribute in the svg
   // element itself. Inspect the `Icon` in Storybook to see the `title` element.
   it("renders a title element", () => {
-    const { container, rerender } = render(<Icon name={IconNames.Download} />);
+    const { container, rerender } = render(<Icon name="download" />);
     expect(container.querySelector("svg")).toHaveAttribute(
       "title",
       "download icon"
     );
 
-    rerender(<Icon name={IconNames.Download} title="title content" />);
+    rerender(<Icon name="download" title="title content" />);
     expect(container.querySelector("svg")).toHaveAttribute(
       "title",
       "title content"
@@ -90,9 +89,7 @@ describe("Icon", () => {
   });
 
   it("renders the UI snapshot correctly", () => {
-    const basic = renderer
-      .create(<Icon id="basic" name={IconNames.Download} />)
-      .toJSON();
+    const basic = renderer.create(<Icon id="basic" name="download" />).toJSON();
     const customIcon = renderer
       .create(
         <Icon id="customIcon">
@@ -108,16 +105,11 @@ describe("Icon", () => {
       .toJSON();
     const withChakraProps = renderer
       .create(
-        <Icon
-          id="chakra"
-          name={IconNames.Download}
-          p="20px"
-          color="ui.error.primary"
-        />
+        <Icon id="chakra" name="download" p="20px" color="ui.error.primary" />
       )
       .toJSON();
     const withOtherProps = renderer
-      .create(<Icon id="props" name={IconNames.Download} data-testid="props" />)
+      .create(<Icon id="props" name="download" data-testid="props" />)
       .toJSON();
 
     expect(basic).toMatchSnapshot();

package/src/components/Icons/Icon.tsx

@@ -6,19 +6,76 @@ import {
 } from "@chakra-ui/react";
 import * as React from "react";
 
-import {
-  IconAlign,
-  IconColors,
-  IconNames,
-  IconRotationTypes,
-  IconSizes,
-  IconTypes,
-} from "./IconTypes";
 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 {
-  /** Optionally pass in additional Chakra-based styles. */
-  additionalStyles?: { [key: string]: any };
   /** Aligns the icon. */
   align?: IconAlign;
   /** Optional className that will be added to the parent element */
@@ -50,18 +107,17 @@ export interface IconProps {
 export const Icon = chakra(
   (props: React.PropsWithChildren<IconProps>) => {
     const {
-      additionalStyles = {},
-      align = IconAlign.None,
+      align = "none",
       children,
       className,
-      color = IconColors.UiBlack,
+      color = "ui.black",
       decorative = true,
-      iconRotation = IconRotationTypes.Rotate0,
+      iconRotation = "rotate0",
       id,
       name,
-      size = IconSizes.Default,
+      size = "default",
       title = `${name} icon`,
-      type = IconTypes.Default,
+      type = "default",
       ...rest
     } = props;
     const styles = useStyleConfig("Icon", {
@@ -101,13 +157,7 @@ export const Icon = chakra(
     // render the SVG child with NYPL-theme styling.
     if (name) {
       const SvgComponent: any = iconSvgs[name];
-      return (
-        <ChakraIcon
-          as={SvgComponent}
-          {...iconProps}
-          __css={{ ...styles, ...additionalStyles }}
-        />
-      );
+      return <ChakraIcon as={SvgComponent} {...iconProps} __css={styles} />;
     }
 
     // If no `name` prop was passed, we expect a child SVG element to be passed.
@@ -127,14 +177,10 @@ export const Icon = chakra(
       );
     }
 
-    return (
-      <Box __css={styles} {...rest}>
-        {childSVG}
-      </Box>
-    );
+    return <Box __css={styles}>{childSVG}</Box>;
   },
   // Pass all custom props to Chakra and override, e.g. we want the
-  // DS color prop to use the DS enum and not color strings.
+  // DS color value set and not color strings.
   { shouldForwardProp: () => true }
 );
 

package/src/components/Icons/IconSvgs.tsx

@@ -1,64 +1,64 @@
 /* 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 alert_notification_important from "../../../icons/svg/alert_notification_important.svg";
+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 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 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 error_filled from "../../../icons/svg/error_filled.svg";
-import error_outline from "../../../icons/svg/error_outline.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 speaker_notes from "../../../icons/svg/speaker_notes.svg";
-import utility_account_filled from "../../../icons/svg/utility_account_filled.svg";
-import utility_account_unfilled from "../../../icons/svg/utility_account_unfilled.svg";
-import utility_hamburger from "../../../icons/svg/utility_hamburger.svg";
-import utility_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 {
-  accessibility_full,
-  accessibility_partial,
-  action_check_circle,
-  action_help_default,
-  action_help_outline,
-  action_launch,
-  alert_notification_important,
+  accessibilityFull,
+  accessibilityPartial,
+  actionCheckCircle,
+  actionHelpDefault,
+  actionHelpOutline,
+  actionLaunch,
+  alertNotificationImportant,
   arrow,
   check,
   clock,
   close,
   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,
+  errorFilled,
+  errorOutline,
+  fileTypeAudio,
+  fileTypeDoc,
+  fileTypeGenericDoc,
+  fileTypeImage,
+  fileTypePdf,
+  fileTypeSpreadsheet,
+  fileTypeVideo,
   headset,
   minus,
   plus,
   search,
-  speaker_notes,
-  utility_account_filled,
-  utility_account_unfilled,
-  utility_hamburger,
-  utility_search,
+  speakerNotes,
+  utilityAccountFilled,
+  utilityAccountUnfilled,
+  utilityHamburger,
+  utilitySearch,
 };

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

@@ -9,19 +9,9 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import Heading from "../Heading/Heading";
-import { HeadingLevels } from "../Heading/HeadingTypes";
 import Image from "./Image";
-import { ImageRatios, ImageSizes, ImageTypes } from "./ImageTypes";
 import SimpleGrid from "../Grid/SimpleGrid";
 import { getCategory } from "../../utils/componentCategories";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const ratiosEnumValues = getStorybookEnumValues(
-  ImageRatios,
-  "ImageRatios"
-);
-export const sizesEnumValues = getStorybookEnumValues(ImageSizes, "ImageSizes");
-export const typesEnumValues = getStorybookEnumValues(ImageTypes, "ImageTypes");
 
 export const imageBlockStyles = {
   margin: "auto",
@@ -51,9 +41,7 @@ export const imageBlockStyles = {
         "Alternate text description of the image. Needed for accessibility purposes.",
     },
     aspectRatio: {
-      control: { type: "select" },
-      table: { defaultValue: { summary: "ImageRatios.Original" } },
-      options: ratiosEnumValues.options,
+      table: { defaultValue: { summary: "original" } },
     },
     className: {
       control: false,
@@ -61,14 +49,10 @@ export const imageBlockStyles = {
     },
     component: { control: false },
     imageType: {
-      control: { type: "select" },
-      table: { defaultValue: { summary: "ImageTypes.Default" } },
-      options: typesEnumValues.options,
+      table: { defaultValue: { summary: "default" } },
     },
     size: {
-      control: { type: "select" },
-      table: { defaultValue: { summary: "ImageSizes.Default" } },
-      options: sizesEnumValues.options,
+      table: { defaultValue: { summary: "default" } },
     },
     src: {
       description:
@@ -82,7 +66,7 @@ export const imageBlockStyles = {
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.6`    |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -111,24 +95,17 @@ If you want a simple HTML `img` element then don't pass in values for the
       additionalImageStyles: undefined,
       additionalWrapperStyles: undefined,
       alt: "Alt text",
-      aspectRatio: "ImageRatios.TwoByOne",
+      aspectRatio: "twoByOne",
       caption: "Image caption",
       className: undefined,
       component: undefined,
       credit: "Image credit",
-      imageType: "ImageTypes.Default",
-      size: "ImageSizes.Medium",
+      imageType: "default",
+      size: "medium",
       src: "https://placeimg.com/400/300/animals",
     }}
   >
-    {(args) => (
-      <Image
-        {...args}
-        aspectRatio={ratiosEnumValues.getValue(args.aspectRatio)}
-        imageType={typesEnumValues.getValue(args.imageType)}
-        size={sizesEnumValues.getValue(args.size)}
-      />
-    )}
+    {(args) => <Image {...args} />}
   </Story>
 </Canvas>
 
@@ -158,11 +135,11 @@ then an `img` element will be rendered with or without wrapper style divs.
     name="Figure and figcaption"
     args={{
       alt: "Alt text",
-      aspectRatio: ImageRatios.ThreeByTwo,
+      aspectRatio: "threeByTwo",
       caption: "Image caption",
       credit: "Image credit",
-      imageType: ImageTypes.Default,
-      size: ImageSizes.Medium,
+      imageType: "default",
+      size: "medium",
       src: "https://placeimg.com/400/300/animals",
     }}
     argTypes={{
@@ -186,76 +163,52 @@ Use the `size` prop to set the desired size with the `ImageSizes` enum.
   <Story name="Image Sizes">
     <SimpleGrid columns={1}>
       <div style={{ textAlign: "center" }}>
-        <Heading
-          id="ExtraExtraSmall"
-          level={HeadingLevels.Four}
-          text="ImageSizes.ExtraExtraSmall"
-        />
+        <Heading id="ExtraExtraSmall" level="four" text="xxsmall" />
         <Image
           alt="Alt text"
           caption="64px"
-          size={ImageSizes.ExtraExtraSmall}
+          size="xxsmall"
           src="https://placeimg.com/400/300/animals"
         />
       </div>
       <div style={{ textAlign: "center" }}>
-        <Heading
-          id="ExtraSmall"
-          level={HeadingLevels.Four}
-          text="ImageSizes.ExtraSmall"
-        />
+        <Heading id="ExtraSmall" level="four" text="xsmall" />
         <Image
           alt="Alt text"
           caption="96px"
-          size={ImageSizes.ExtraSmall}
+          size="xsmall"
           src="https://placeimg.com/400/300/animals"
         />
       </div>
       <div style={{ textAlign: "center" }}>
-        <Heading
-          id="Small"
-          level={HeadingLevels.Four}
-          text="ImageSizes.Small"
-        />
+        <Heading id="Small" level="four" text="small" />
         <Image
           alt="Alt text"
           caption="165px"
-          size={ImageSizes.Small}
+          size="small"
           src="https://placeimg.com/400/300/animals"
         />
       </div>
       <div style={{ textAlign: "center" }}>
-        <Heading
-          id="Medium"
-          level={HeadingLevels.Four}
-          text="ImageSizes.Medium"
-        />
+        <Heading id="Medium" level="four" text="medium" />
         <Image
           alt="Alt text"
           caption="225px"
-          size={ImageSizes.Medium}
+          size="medium"
           src="https://placeimg.com/400/300/animals"
         />
       </div>
       <div style={{ textAlign: "center" }}>
-        <Heading
-          id="Large"
-          level={HeadingLevels.Four}
-          text="ImageSizes.Large"
-        />
+        <Heading id="Large" level="four" text="large" />
         <Image
           alt="Alt text"
           caption="360px"
-          size={ImageSizes.Large}
+          size="large"
           src="https://placeimg.com/400/300/animals"
         />
       </div>
       <div style={{ textAlign: "center" }}>
-        <Heading
-          id="Default"
-          level={HeadingLevels.Four}
-          text="ImageSizes.Default"
-        />
+        <Heading id="Default" level="four" text="default" />
         <Image
           alt="Alt text"
           caption="100%"
@@ -278,98 +231,66 @@ in an element with a fixed width value.
   <Story name="Image Aspect Ratios">
     <SimpleGrid columns={1}>
       <div style={imageBlockStyles}>
-        <Heading
-          id="fourbythree"
-          level={HeadingLevels.Four}
-          text="ImageRatios.FourByThree"
-        />
+        <Heading id="fourbythree" level="four" text="fourByThree" />
         <Image
           alt="Alt text"
-          aspectRatio={ImageRatios.FourByThree}
+          aspectRatio="fourByThree"
           src="https://placeimg.com/400/300/animals"
         />
       </div>
       <div style={imageBlockStyles}>
-        <Heading
-          id="onebytwo"
-          level={HeadingLevels.Four}
-          text="ImageRatios.OneByTwo"
-        />
+        <Heading id="onebytwo" level="four" text="oneByTwo" />
         <Image
           alt="Alt text"
-          aspectRatio={ImageRatios.OneByTwo}
+          aspectRatio="oneByTwo"
           src="https://placeimg.com/400/300/animals"
         />
       </div>
       <div style={imageBlockStyles}>
-        <Heading
-          id="original"
-          level={HeadingLevels.Four}
-          text="ImageRatios.Original"
-        />
+        <Heading id="original" level="four" text="original" />
         <Image
           alt="Alt text"
-          aspectRatio={ImageRatios.Original}
+          aspectRatio="original"
           src="https://placeimg.com/400/300/animals"
         />
       </div>
       <div style={imageBlockStyles}>
-        <Heading
-          id="sixteenbynine"
-          level={HeadingLevels.Four}
-          text="ImageRatios.SixteenByNine"
-        />
+        <Heading id="sixteenbynine" level="four" text="sixteenByNine" />
         <Image
           alt="Alt text"
-          aspectRatio={ImageRatios.SixteenByNine}
+          aspectRatio="sixteenByNine"
           src="https://placeimg.com/400/300/animals"
         />
       </div>
       <div style={imageBlockStyles}>
-        <Heading
-          id="square"
-          level={HeadingLevels.Four}
-          text="ImageRatios.Square"
-        />
+        <Heading id="square" level="four" text="square" />
         <Image
           alt="Alt text"
-          aspectRatio={ImageRatios.Square}
+          aspectRatio="square"
           src="https://placeimg.com/400/300/animals"
         />
       </div>
       <div style={imageBlockStyles}>
-        <Heading
-          id="threebyfour"
-          level={HeadingLevels.Four}
-          text="ImageRatios.ThreeByFour"
-        />
+        <Heading id="threebyfour" level="four" text="threeByFour" />
         <Image
           alt="Alt text"
-          aspectRatio={ImageRatios.ThreeByFour}
+          aspectRatio="threeByFour"
           src="https://placeimg.com/400/300/animals"
         />
       </div>
       <div style={imageBlockStyles}>
-        <Heading
-          id="threebytwo"
-          level={HeadingLevels.Four}
-          text="ImageRatios.ThreeByTwo"
-        />
+        <Heading id="threebytwo" level="four" text="threeByTwo" />
         <Image
           alt="Alt text"
-          aspectRatio={ImageRatios.ThreeByTwo}
+          aspectRatio="threeByTwo"
           src="https://placeimg.com/400/300/animals"
         />
       </div>
       <div style={imageBlockStyles}>
-        <Heading
-          id="twobyone"
-          level={HeadingLevels.Four}
-          text="ImageRatios.TwoByOne"
-        />
+        <Heading id="twobyone" level="four" text="twoByOne" />
         <Image
           alt="Alt text"
-          aspectRatio={ImageRatios.TwoByOne}
+          aspectRatio="twoByOne"
           src="https://placeimg.com/400/300/animals"
         />
       </div>
@@ -380,7 +301,7 @@ in an element with a fixed width value.
 ## Image Types
 
 Use the `imageType` prop to get an image variant. Note that to get a perfect
-circle, the `aspectRatio` prop _must_ be set to `ImageRatios.Square`.
+circle, the `aspectRatio` prop _must_ be set to `"square"`.
 
 For a better viewing experience, the `Image` components below have been wrapped
 in an element with a fixed width value.
@@ -389,28 +310,20 @@ in an element with a fixed width value.
   <Story name="Image Types">
     <SimpleGrid columns={1}>
       <div style={imageBlockStyles}>
-        <Heading
-          id="default"
-          level={HeadingLevels.Four}
-          text="ImageTypes.Default"
-        />
+        <Heading id="default" level="four" text="default" />
         <Image
           alt="Alt text"
-          aspectRatio={ImageRatios.Square}
-          imageType={ImageTypes.Default}
+          aspectRatio="square"
+          imageType="default"
           src="https://placeimg.com/400/400/animals"
         />
       </div>
       <div style={imageBlockStyles}>
-        <Heading
-          id="circle"
-          level={HeadingLevels.Four}
-          text="ImageTypes.Circle"
-        />
+        <Heading id="circle" level="four" text="circle" />
         <Image
           alt="Alt text"
-          aspectRatio={ImageRatios.Square}
-          imageType={ImageTypes.Circle}
+          aspectRatio="square"
+          imageType="circle"
           src="https://placeimg.com/400/400/animals"
         />
       </div>