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

package/src/components/Icons/IconSvgs.tsx

@@ -7,7 +7,6 @@ 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 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";
@@ -22,29 +21,9 @@ 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 headset from "../../../icons/svg/headset.svg";
-import logo_brooklyn from "../../../icons/svg/logo_brooklynpl.svg";
-import logo_nypl from "../../../icons/svg/logo_nypl.svg";
-import logo_nypl_negative from "../../../icons/svg/logo_nypl_negative.svg";
-import logo_queens from "../../../icons/svg/logo_queenspl.svg";
-import lpa_negative from "../../../icons/svg/lpa_negative.svg";
-import lpa_positive from "../../../icons/svg/lpa_positive.svg";
 import minus from "../../../icons/svg/minus.svg";
-import nypl_circle_negative from "../../../icons/svg/nypl_circle_negative.svg";
-import nypl_circle_positive from "../../../icons/svg/nypl_circle_positive.svg";
-import nypl_full_lock_up_negative from "../../../icons/svg/nypl_full_lock_up_negative.svg";
-import nypl_full_lock_up from "../../../icons/svg/nypl_full_lock_up.svg";
-import nypl_no_lion_negative from "../../../icons/svg/nypl_no_lion_negative.svg";
-import nypl_no_lion_positive from "../../../icons/svg/nypl_no_lion_positive.svg";
 import plus from "../../../icons/svg/plus.svg";
-import queens_long from "../../../icons/svg/queens_long.svg";
-import queens_stacked from "../../../icons/svg/queens_stacked.svg";
-import schomburg_circle from "../../../icons/svg/schomburg_circle.svg";
-import schomburg_positive from "../../../icons/svg/schomburg_positive.svg";
 import search from "../../../icons/svg/search.svg";
-import simplye_black from "../../../icons/svg/simplye_black.svg";
-import simplye_color from "../../../icons/svg/simplye_color.svg";
-import snfl_negative from "../../../icons/svg/snfl_negative.svg";
-import snfl_positive from "../../../icons/svg/snfl_positive.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";
@@ -60,7 +39,6 @@ export default {
   action_launch,
   alert_notification_important,
   arrow,
-  brooklyn,
   check,
   clock,
   close,
@@ -75,29 +53,9 @@ export default {
   file_type_spreadsheet,
   file_type_video,
   headset,
-  logo_brooklyn,
-  logo_nypl,
-  logo_nypl_negative,
-  logo_queens,
-  lpa_negative,
-  lpa_positive,
   minus,
-  nypl_circle_negative,
-  nypl_circle_positive,
-  nypl_full_lock_up_negative,
-  nypl_full_lock_up,
-  nypl_no_lion_negative,
-  nypl_no_lion_positive,
   plus,
-  queens_long,
-  queens_stacked,
-  schomburg_circle,
-  schomburg_positive,
   search,
-  simplye_black,
-  simplye_color,
-  snfl_negative,
-  snfl_positive,
   speaker_notes,
   utility_account_filled,
   utility_account_unfilled,

package/src/components/Icons/IconTypes.tsx

@@ -78,27 +78,3 @@ export enum IconNames {
   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

@@ -1,18 +1,26 @@
+import { VStack } from "@chakra-ui/react";
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
-import { VStack } from "@chakra-ui/react";
 
+import Heading from "../Heading/Heading";
 import Image from "./Image";
 import { ImageRatios, ImageSizes, ImageTypes } from "./ImageTypes";
-import Heading from "../Heading/Heading";
 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",
@@ -28,15 +36,43 @@ export const imageBlockStyles = {
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11896%3A45379",
+      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 } },
+    additionalFigureStyles: { control: false },
+    additionalImageStyles: { control: false },
+    additionalWrapperStyles: { control: false },
+    alt: {
+      control: false,
+      description:
+        "Alternate text description of the image. Needed for accessibility purposes.",
+    },
+    className: {
+      control: false,
+      description: "Additional class name for the component to use.",
+    },
+    component: { control: false },
+    imageAspectRatio: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "ImageRatios.Original" } },
+      options: ratiosEnumValues.options,
+    },
+    imageSize: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "ImageSizes.Default" } },
+      options: sizesEnumValues.options,
+    },
+    imageType: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "ImageTypes.Default" } },
+      options: typesEnumValues.options,
+    },
+    src: {
+      description:
+        "The src attribute is required, and contains the path to the image you want to embed.",
+    },
   }}
 />
 
@@ -45,7 +81,7 @@ export const imageBlockStyles = {
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.6`    |
-| Latest            | `0.25.8`   |
+| Latest            | `0.25.9`   |
 
 <Description of={Image} />
 
@@ -56,22 +92,34 @@ export const imageBlockStyles = {
 
 <Canvas>
   <Story
-    name="Image Props"
+    name="Image with Controls"
     args={{
+      additionalFigureStyles: undefined,
+      additionalImageStyles: undefined,
+      additionalWrapperStyles: undefined,
       alt: "Alt text",
-      imageAspectRatio: ImageRatios.TwoByOne,
+      className: undefined,
+      component: undefined,
+      imageAspectRatio: "ImageRatios.TwoByOne",
       imageCaption: "Image caption",
       imageCredit: "Image credit",
-      imageSize: ImageSizes.Medium,
-      imageType: ImageTypes.Default,
+      imageSize: "ImageSizes.Medium",
+      imageType: "ImageTypes.Default",
       src: "https://placeimg.com/400/300/animals",
     }}
   >
-    {(args) => <Image {...args} />}
+    {(args) => (
+      <Image
+        {...args}
+        imageAspectRatio={ratiosEnumValues.getValue(args.imageAspectRatio)}
+        imageSize={sizesEnumValues.getValue(args.imageSize)}
+        imageType={typesEnumValues.getValue(args.imageType)}
+      />
+    )}
   </Story>
 </Canvas>
 
-<ArgsTable story="Image Props" />
+<ArgsTable story="Image with Controls" />
 
 ## Image Figure
 

package/src/components/Image/Image.tsx

@@ -1,11 +1,11 @@
-import * as React from "react";
 import { Box, useMultiStyleConfig } from "@chakra-ui/react";
+import * as React from "react";
 
 import { ImageRatios, ImageSizes, ImageTypes } from "./ImageTypes";
 
 interface ImageWrapperProps {
   /** Optionally pass in additional Chakra-based styles. */
-  additionalStyles?: { [key: string]: any };
+  additionalWrapperStyles?: { [key: string]: any };
   /** ClassName you can add in addition to 'image' */
   className?: string;
   /** Optional value to control the aspect ratio of the cartd image; default value is `square` */
@@ -15,6 +15,10 @@ interface ImageWrapperProps {
 }
 
 export interface ImageProps extends ImageWrapperProps {
+  /** Optionally pass in additional Chakra-based styles only for the figure. */
+  additionalFigureStyles?: { [key: string]: any };
+  /** Optionally pass in additional Chakra-based styles only for the image. */
+  additionalImageStyles?: { [key: string]: any };
   /** Alternate text description of the image */
   alt: string;
   /** Custom image component */
@@ -33,7 +37,7 @@ export interface ImageProps extends ImageWrapperProps {
 
 function ImageWrapper(props: React.PropsWithChildren<ImageWrapperProps>) {
   const {
-    additionalStyles = {},
+    additionalWrapperStyles = {},
     className = "",
     children,
     imageAspectRatio = ImageRatios.Original,
@@ -45,19 +49,21 @@ function ImageWrapper(props: React.PropsWithChildren<ImageWrapperProps>) {
   });
   return (
     <Box
-      __css={{ ...styles, ...additionalStyles }}
       className={`the-wrap ${className}`}
+      __css={{ ...styles, ...additionalWrapperStyles }}
     >
-      <Box __css={styles.crop} className="the-crop">
+      <Box className="the-crop" __css={styles.crop}>
         {children}
       </Box>
     </Box>
   );
 }
 
-export default function Image(props: React.ComponentProps<"img"> & ImageProps) {
+export default function Image(props: ImageProps) {
   const {
-    additionalStyles = {},
+    additionalFigureStyles = {},
+    additionalImageStyles = {},
+    additionalWrapperStyles = {},
     alt,
     className = "",
     component,
@@ -81,14 +87,19 @@ export default function Image(props: React.ComponentProps<"img"> & ImageProps) {
   const imageComponent: JSX.Element = component ? (
     component
   ) : (
-    <Box as="img" src={src} alt={alt} __css={styles.img} />
+    <Box
+      as="img"
+      src={src}
+      alt={alt}
+      __css={{ ...styles.img, ...additionalImageStyles }}
+    />
   );
   const finalImage = useImageWrapper ? (
     <ImageWrapper
       className={className}
       imageAspectRatio={imageAspectRatio}
       imageSize={imageSize}
-      additionalStyles={additionalStyles}
+      additionalWrapperStyles={additionalWrapperStyles}
     >
       {imageComponent}
     </ImageWrapper>
@@ -97,7 +108,7 @@ export default function Image(props: React.ComponentProps<"img"> & ImageProps) {
   );
 
   return imageCaption || imageCredit ? (
-    <Box as="figure" __css={styles.figure}>
+    <Box as="figure" __css={{ ...styles.figure, ...additionalFigureStyles }}>
       {finalImage}
       <Box as="figcaption" __css={styles.figcaption}>
         {imageCaption && (

package/src/components/Label/Label.stories.mdx

@@ -1,11 +1,11 @@
+import { Box } from "@chakra-ui/react";
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
-import { Box } from "@chakra-ui/react";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 
 import Label from "./Label";
 import { getCategory } from "../../utils/componentCategories";
@@ -17,8 +17,15 @@ import { getCategory } from "../../utils/componentCategories";
     jest: ["Label.test.tsx"],
   }}
   argTypes={{
-    className: { table: { disable: true } },
-    id: { table: { disable: true } },
+    className: { control: false },
+    id: { control: false },
+    optReqFlag: {
+      control: { type: "select" },
+      options: ["Required", "Optional", ""],
+    },
+    text: {
+      description: "Only used for Storybook",
+    },
   }}
 />
 
@@ -33,26 +40,20 @@ import { getCategory } from "../../utils/componentCategories";
 
 <Canvas>
   <Story
-    name="Label"
+    name="Label with Controls"
     args={{
-      text: "A label for a villager.",
-      optReqFlag: "Required",
+      className: undefined,
       htmlFor: "id-of-input-element",
-    }}
-    argTypes={{
-      optReqFlag: {
-        control: {
-          type: "select",
-        },
-        options: ["Required", "Optional", ""],
-      },
+      id: "label-id",
+      optReqFlag: "Required",
+      text: "A label for a villager.",
     }}
   >
     {(args) => <Label {...args}>{args.text}</Label>}
   </Story>
 </Canvas>
 
-<ArgsTable story="Label" />
+<ArgsTable story="Label with Controls" />
 
 ## Required/Optional helper text
 

package/src/components/Link/Link.stories.mdx

@@ -1,23 +1,26 @@
+import { VStack } from "@chakra-ui/react";
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
-import { withDesign } from "storybook-addon-designs";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import {
   BrowserRouter as Router,
   Link as ReactRouterLink,
 } from "react-router-dom";
-import { VStack } from "@chakra-ui/react";
+import { withDesign } from "storybook-addon-designs";
 
 import Link from "./Link";
 import { LinkTypes } from "./LinkTypes";
 import Icon from "../Icons/Icon";
-import { IconAlign, IconSizes } from "../Icons/IconTypes";
+import { IconAlign, IconNames, IconSizes } from "../Icons/IconTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const enumValues = getStorybookEnumValues(LinkTypes, "LinkTypes");
 
 <Meta
   title={getCategory("Link")}
@@ -31,13 +34,15 @@ import DSProvider from "../../theme/provider";
     jest: ["Link.test.tsx"],
   }}
   argTypes={{
-    attributes: { table: { disable: true } },
+    additionalStyles: { control: false },
+    attributes: { control: false },
     children: { table: { disable: true } },
+    key: { table: { disable: true } },
+    ref: { table: { disable: true } },
     type: {
-      control: {
-        type: "select",
-      },
-      options: LinkTypes,
+      control: { type: "select" },
+      table: { defaultValue: { summary: "LinkTypes.Default" } },
+      options: enumValues.options,
     },
   }}
 />
@@ -47,29 +52,34 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.8`   |
+| Latest            | `0.25.9`   |
 
 <Description of={Link} />
 
 <Canvas withToolbar>
   <Story
-    name="Basic"
+    name="Link with Controls"
     args={{
-      id: "nypl-link",
-      type: LinkTypes.Action,
-      href: "https://nypl.org",
-      className: "custom-class",
+      additionalStyles: undefined,
       attributes: {
         rel: "nofollow",
         onClick: (e) => e.preventDefault(),
       },
+      className: "custom-class",
+      href: "https://nypl.org",
+      id: "nypl-link",
+      type: "LinkTypes.Action",
     }}
   >
-    {(args) => <Link {...args}>Link</Link>}
+    {(args) => (
+      <Link {...args} type={enumValues.getValue(args.type)}>
+        Link
+      </Link>
+    )}
   </Story>
 </Canvas>
 
-<ArgsTable story="Basic" />
+<ArgsTable story="Link with Controls" />
 
 ## Links With Icons
 
@@ -89,12 +99,20 @@ links with icons. Icons can be rendered to the left or right of the link text.
         Clock Link
       </Link>
       <Link type={LinkTypes.Action} href="#passed-in-link">
-        <Icon name="check" align={IconAlign.Left} size={IconSizes.Small} />
+        <Icon
+          name={IconNames.Check}
+          align={IconAlign.Left}
+          size={IconSizes.Small}
+        />
         Check Link
       </Link>
       <Link type={LinkTypes.Action} href="#passed-in-link-right">
         Check Link Right
-        <Icon name="check" align={IconAlign.Right} size={IconSizes.Small} />
+        <Icon
+          name={IconNames.Check}
+          align={IconAlign.Right}
+          size={IconSizes.Small}
+        />
       </Link>
     </VStack>
   </Story>
@@ -102,8 +120,29 @@ links with icons. Icons can be rendered to the left or right of the link text.
 
 ## Anchor Element Rendering
 
-`Link` can wrap an existing `<a>` tag or it can use the `href` prop to generate
-an `<a>` tag.
+`Link` can wrap an existing `<a>` element (and `Icon` component) or it
+can use the `href` prop to generate an `<a>` element.
+
+```jsx
+// Existing anchor element
+<Link type={LinkTypes.Action}>
+  <a href="#existing-anchor-tag">link</a>
+</Link>
+
+// Also works with an icon component. Make sure to wrap the icon and anchor
+// in a single element for this pattern.
+<Link type={LinkTypes.Action}>
+  <>
+    <Icon name={IconNames.Check} align={IconAlign.Left} size={IconSizes.Small} />
+    <a href="#existing-anchor-tag">check link</a>
+  </>
+</Link>
+
+// Otherwise, the `href` prop will generate an `<a>` tag.
+<Link type={LinkTypes.Action} href="#passed-in-link">
+  link
+</Link>
+```
 
 <Canvas>
   <Story name="Anchor Element Rendering">
@@ -112,11 +151,23 @@ an `<a>` tag.
       <Link type={LinkTypes.Action}>
         <a href="#existing-anchor-tag">link</a>
       </Link>{" "}
-      with the &lt;a&gt; tag as a child of the Link component. And this is a{" "}
+      with the &lt;a&gt; element as a child of the `Link` component. This is a{" "}
       <Link type={LinkTypes.Action} href="#passed-in-link">
         link
       </Link>{" "}
-      where the Link component uses the `href` prop and has a string-only child.
+      where the `Link` component uses the `href` prop and has a string-only
+      child. Finally, this is a{" "}
+      <Link type={LinkTypes.Action}>
+        <>
+          <Icon
+            name={IconNames.Check}
+            align={IconAlign.Left}
+            size={IconSizes.Small}
+          />
+          <a href="#existing-anchor-tag">link</a>
+        </>
+      </Link>{" "}
+      with a check icon.
     </>
   </Story>
 </Canvas>
@@ -144,9 +195,11 @@ an `<a>` tag.
 
 The Design System's `Link` component should wrap around `react-router`'s own
 `Link` component. To avoid name conflicts, rename either the Design System's
-or `react-router`'s `Link` component.
+or `react-router`'s `Link` component. Any of the following patterns are valid.
 
 ```jsx
+// In this first example, React Router's `Link` component
+// is renamed as `ReactRouterLink`.
 import {
   BrowserRouter as Router,
   Link as ReactRouterLink,
@@ -157,8 +210,9 @@ import { Link, LinkTypes } from "@nypl/design-system-react-components";
   <ReactRouterLink to="#">Next Page</ReactRouterLink>
 </Link>;
 
-// or
-
+// In this second example, React Router's `Link` component
+// is not renamed but the DS's `Link` component is renamed
+// to `DSLink`.
 import { BrowserRouter, Link } from "react-router-dom";
 import {
   Link as DSLink,
@@ -169,8 +223,9 @@ import {
   <Link to="#">Next Page</Link>
 </DSLink>;
 
-// or
-
+// In this third example, React Router's `Link` component
+// is not renamed and the DS's `Link` component is
+// imported and rendered as `DS.Link`.
 import { BrowserRouter, Link } from "react-router-dom";
 import DS from "@nypl/design-system-react-components";
 
@@ -200,34 +255,30 @@ pages in a NextJS app.
 ```jsx
 import { Link, LinkTypes } from "@nypl/design-system-react-components";
 
-/* This is just an example wrapper that works similarly to NextJS' `Link`
+/**
+ * This is just an example wrapper that works similarly to NextJS' `Link`
  * component. In real life, NextJS's `Link` component will pass down the
  * `href` and `passHref` props and a `ref` to make routing functional.
  */
-export const NextJsLink = (props: HTMLAnchorElement) => (
-  <div>
-    {React.cloneElement(
-      props.children,
-      { ...props },
-      props.children.props.children
-    )}
-  </div>
-);
-
+export const NextJsLink = (props: HTMLAnchorElement) =>
+  React.cloneElement(
+    props.children,
+    { ...props },
+    props.children.props.children
+  );
+
+// Note that NextJS' `href` and `passHref` props are required.
 <NextJsLink href="#" passHref>
   <Link type={LinkTypes.Action}>Next Page</Link>
 </NextJsLink>;
 ```
 
-export const NextJsLink = (props) => (
-  <div>
-    {React.cloneElement(
-      props.children,
-      { ...props },
-      props.children.props.children
-    )}
-  </div>
-);
+export const NextJsLink = (props) =>
+  React.cloneElement(
+    props.children,
+    { ...props },
+    props.children.props.children
+  );
 
 <Canvas>
   <DSProvider>