@nypl/design-system-react-components 0.25.12 → 0.25.13

package/src/components/Image/Image.tsx

@@ -3,15 +3,37 @@ import * as React from "react";
 
 import { ImageRatios, ImageSizes, ImageTypes } from "./ImageTypes";
 
+// Used for components that have an `imageProps` prop.
+export interface ComponentImageProps {
+  /** String value used to populate the `alt` attribute of the internal `Image`
+   * component's `img` element. @NOTE if an image is used, this value must be passed. */
+  alt?: string;
+  /** Optional value to control the aspect ratio of the internal `Image` component.
+   * Defaults to `ImageRatios.Square`. */
+  aspectRatio?: ImageRatios;
+  /** Optional value to render as a caption for the internal `Image` component. */
+  caption?: string;
+  /** Optional DOM element to use instead of the DS `Image` component. */
+  component?: JSX.Element;
+  /** Optional value to render as a credit for the internal `Image` component. */
+  credit?: string;
+  /** Optional value to control the size of the internal `Image` component.
+   * Defaults to `ImageSizes.Medium`. */
+  size?: ImageSizes;
+  /** Optional value that contains the path to an image. If omitted, the internal
+   * DS `Image` component will not render. */
+  src?: string;
+}
+
 interface ImageWrapperProps {
   /** Optionally pass in additional Chakra-based styles. */
   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` */
-  imageAspectRatio?: ImageRatios;
+  aspectRatio?: ImageRatios;
   /** Optional value to control the size of the image */
-  imageSize?: ImageSizes;
+  size?: ImageSizes;
 }
 
 export interface ImageProps extends ImageWrapperProps {
@@ -21,14 +43,12 @@ export interface ImageProps extends ImageWrapperProps {
   additionalImageStyles?: { [key: string]: any };
   /** Alternate text description of the image */
   alt: string;
+  /** Adding will wrap the image in a <figure> */
+  caption?: string;
   /** Custom image component */
   component?: JSX.Element | null;
   /** Adding will wrap the image in a <figure> */
-  imageCaption?: string;
-  /** Adding will wrap the image in a <figure> */
-  imageCredit?: string;
-  /** Optional value to control the size of the image */
-  imageSize?: ImageSizes;
+  credit?: string;
   /** Optional value for the image type */
   imageType?: ImageTypes;
   /** The src attribute is required, and contains the path to the image you want to embed. */
@@ -40,12 +60,12 @@ function ImageWrapper(props: React.PropsWithChildren<ImageWrapperProps>) {
     additionalWrapperStyles = {},
     className = "",
     children,
-    imageAspectRatio = ImageRatios.Original,
-    imageSize = ImageSizes.Default,
+    aspectRatio = ImageRatios.Original,
+    size = ImageSizes.Default,
   } = props;
   const styles = useMultiStyleConfig("CustomImageWrapper", {
-    ratio: imageAspectRatio,
-    size: imageSize,
+    ratio: aspectRatio,
+    size,
   });
   return (
     <Box
@@ -65,23 +85,25 @@ export default function Image(props: ImageProps) {
     additionalImageStyles = {},
     additionalWrapperStyles = {},
     alt,
+    aspectRatio = ImageRatios.Original,
+    caption,
     className = "",
     component,
-    imageAspectRatio = ImageRatios.Original,
-    imageCaption,
-    imageCredit,
-    imageSize = ImageSizes.Default,
+    credit,
     imageType = ImageTypes.Default,
+    size = ImageSizes.Default,
     src,
   } = props;
-  const useImageWrapper = imageAspectRatio !== ImageRatios.Original;
+  const useImageWrapper = aspectRatio !== ImageRatios.Original;
   const styles = useMultiStyleConfig("CustomImage", {
     variant: imageType,
-    size: imageSize,
+    size,
   });
 
   if (alt && alt.length > 300) {
-    throw new Error("Alt Text must be less than 300 characters");
+    throw new Error(
+      "NYPL Reservoir Image: Alt text must be less than 300 characters."
+    );
   }
 
   const imageComponent: JSX.Element = component ? (
@@ -96,10 +118,10 @@ export default function Image(props: ImageProps) {
   );
   const finalImage = useImageWrapper ? (
     <ImageWrapper
-      className={className}
-      imageAspectRatio={imageAspectRatio}
-      imageSize={imageSize}
       additionalWrapperStyles={additionalWrapperStyles}
+      aspectRatio={aspectRatio}
+      className={className}
+      size={size}
     >
       {imageComponent}
     </ImageWrapper>
@@ -107,14 +129,12 @@ export default function Image(props: ImageProps) {
     imageComponent
   );
 
-  return imageCaption || imageCredit ? (
+  return caption || credit ? (
     <Box as="figure" __css={{ ...styles.figure, ...additionalFigureStyles }}>
       {finalImage}
       <Box as="figcaption" __css={styles.figcaption}>
-        {imageCaption && (
-          <Box __css={styles.captionWrappers}>{imageCaption}</Box>
-        )}
-        {imageCredit && <Box __css={styles.captionWrappers}>{imageCredit}</Box>}
+        {caption && <Box __css={styles.captionWrappers}>{caption}</Box>}
+        {credit && <Box __css={styles.captionWrappers}>{credit}</Box>}
       </Box>
     </Box>
   ) : (

package/src/components/Image/ImageTypes.ts

@@ -11,11 +11,11 @@ export enum ImageRatios {
 
 export enum ImageSizes {
   Default = "default",
-  Large = "large",
-  Medium = "medium",
-  Small = "small",
-  ExtraSmall = "xsmall",
   ExtraExtraSmall = "xxsmall",
+  ExtraSmall = "xsmall",
+  Small = "small",
+  Medium = "medium",
+  Large = "large",
 }
 
 export enum ImageTypes {

package/src/components/Image/__snapshots__/Image.test.tsx.snap

@@ -30,6 +30,53 @@ exports[`Image Renders the UI snapshot correctly 2`] = `
 `;
 
 exports[`Image Renders the UI snapshot correctly 3`] = `
+<figure
+  className="css-0"
+>
+  <img
+    alt=""
+    className="css-0"
+    src="test.png"
+  />
+  <figcaption
+    className="css-0"
+  >
+    <div
+      className="css-0"
+    >
+      Credit
+    </div>
+  </figcaption>
+</figure>
+`;
+
+exports[`Image Renders the UI snapshot correctly 4`] = `
+<figure
+  className="css-0"
+>
+  <img
+    alt=""
+    className="css-0"
+    src="test.png"
+  />
+  <figcaption
+    className="css-0"
+  >
+    <div
+      className="css-0"
+    >
+      Caption
+    </div>
+    <div
+      className="css-0"
+    >
+      Credit
+    </div>
+  </figcaption>
+</figure>
+`;
+
+exports[`Image Renders the UI snapshot correctly 5`] = `
 <img
   alt=""
   className="css-0"
@@ -37,7 +84,7 @@ exports[`Image Renders the UI snapshot correctly 3`] = `
 />
 `;
 
-exports[`Image Renders the UI snapshot correctly 4`] = `
+exports[`Image Renders the UI snapshot correctly 6`] = `
 <img
   alt=""
   className="css-0"
@@ -45,7 +92,7 @@ exports[`Image Renders the UI snapshot correctly 4`] = `
 />
 `;
 
-exports[`Image Renders the UI snapshot correctly 5`] = `
+exports[`Image Renders the UI snapshot correctly 7`] = `
 <img
   alt=""
   className="css-0"
@@ -53,7 +100,7 @@ exports[`Image Renders the UI snapshot correctly 5`] = `
 />
 `;
 
-exports[`Image Renders the UI snapshot correctly 6`] = `
+exports[`Image Renders the UI snapshot correctly 8`] = `
 <img
   alt=""
   className="css-0"
@@ -61,7 +108,7 @@ exports[`Image Renders the UI snapshot correctly 6`] = `
 />
 `;
 
-exports[`Image Renders the UI snapshot correctly 7`] = `
+exports[`Image Renders the UI snapshot correctly 9`] = `
 <img
   alt=""
   className="css-0"
@@ -69,7 +116,7 @@ exports[`Image Renders the UI snapshot correctly 7`] = `
 />
 `;
 
-exports[`Image Renders the UI snapshot correctly 8`] = `
+exports[`Image Renders the UI snapshot correctly 10`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -85,7 +132,7 @@ exports[`Image Renders the UI snapshot correctly 8`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 9`] = `
+exports[`Image Renders the UI snapshot correctly 11`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -101,7 +148,7 @@ exports[`Image Renders the UI snapshot correctly 9`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 10`] = `
+exports[`Image Renders the UI snapshot correctly 12`] = `
 <img
   alt=""
   className="css-0"
@@ -109,7 +156,7 @@ exports[`Image Renders the UI snapshot correctly 10`] = `
 />
 `;
 
-exports[`Image Renders the UI snapshot correctly 11`] = `
+exports[`Image Renders the UI snapshot correctly 13`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -125,7 +172,7 @@ exports[`Image Renders the UI snapshot correctly 11`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 12`] = `
+exports[`Image Renders the UI snapshot correctly 14`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -141,7 +188,7 @@ exports[`Image Renders the UI snapshot correctly 12`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 13`] = `
+exports[`Image Renders the UI snapshot correctly 15`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -157,7 +204,7 @@ exports[`Image Renders the UI snapshot correctly 13`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 14`] = `
+exports[`Image Renders the UI snapshot correctly 16`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -173,7 +220,7 @@ exports[`Image Renders the UI snapshot correctly 14`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 15`] = `
+exports[`Image Renders the UI snapshot correctly 17`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -189,7 +236,7 @@ exports[`Image Renders the UI snapshot correctly 15`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 16`] = `
+exports[`Image Renders the UI snapshot correctly 18`] = `
 <div
   className="the-wrap  css-0"
 >

package/src/components/Link/Link.tsx

@@ -3,7 +3,12 @@ import { Box, useStyleConfig } from "@chakra-ui/react";
 
 import { LinkTypes } from "./LinkTypes";
 import Icon from "../Icons/Icon";
-import { IconRotationTypes, IconNames, IconAlign } from "../Icons/IconTypes";
+import {
+  IconRotationTypes,
+  IconNames,
+  IconAlign,
+  IconSizes,
+} from "../Icons/IconTypes";
 import generateUUID from "../../helpers/generateUUID";
 
 export interface LinkProps {
@@ -51,6 +56,7 @@ function getWithDirectionIcon(children, type: LinkTypes, linkId) {
       iconRotation={iconRotation}
       id={iconId}
       name={IconNames.Arrow}
+      size={IconSizes.Medium}
     />
   );
 
@@ -71,6 +77,7 @@ function getExternalIcon(children, linkId) {
       className="more-link"
       id={iconId}
       name={IconNames.ActionLaunch}
+      size={IconSizes.Medium}
     />
   );
 

package/src/components/List/List.stories.mdx

@@ -51,7 +51,7 @@ export const enumValues = getStorybookEnumValues(ListTypes, "ListTypes");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.7.0`    |
-| Latest            | `0.25.12`  |
+| Latest            | `0.25.13`  |
 
 <Description of={List} />
 

package/src/components/List/List.test.tsx

@@ -138,7 +138,8 @@ describe("List", () => {
       </List>
     );
     expect(warn).toHaveBeenCalledWith(
-      "Pass in either `<li>`, `<dt>`, or `<dd>` children or use the `listItems` data prop, but don't use both."
+      "NYPL Reservoir List: Pass in either `<li>`, `<dt>`, or `<dd>` children " +
+        "or use the `listItems` data prop. Do not use both."
     );
   });
 
@@ -146,7 +147,8 @@ describe("List", () => {
     const warn = jest.spyOn(console, "warn");
     render(<List type={ListTypes.Ordered}></List>);
     expect(warn).toHaveBeenCalledWith(
-      "Either `<li>` children or the `listItems` prop must be used."
+      "NYPL Reservoir List: Pass in either `<li>` children or pass data in " +
+        "the `listItems` prop, not both."
     );
   });
 
@@ -160,7 +162,7 @@ describe("List", () => {
       </List>
     );
     expect(warn).toHaveBeenCalledWith(
-      "Direct children of `List` (ol) should be `<li>`s."
+      "NYPL Reservoir List: Direct children of `List` (ol) must be `<li>`s."
     );
   });
 
@@ -174,7 +176,8 @@ describe("List", () => {
       </List>
     );
     expect(warn).toHaveBeenCalledWith(
-      "Direct children of `List` (definition) should be `<dt>`s and `<dd>`s."
+      "NYPL Reservoir List: Direct children of `List` (definition) must be " +
+        "`<dt>`s and `<dd>`s."
     );
   });
 

package/src/components/List/List.tsx

@@ -60,13 +60,15 @@ export default function List(props: React.PropsWithChildren<ListProps>) {
   // prop must be used.
   if (children && (listItems || listItems?.length > 0)) {
     console.warn(
-      "Pass in either `<li>`, `<dt>`, or `<dd>` children or use the `listItems` data prop, but don't use both."
+      "NYPL Reservoir List: Pass in either `<li>`, `<dt>`, or `<dd>` " +
+        "children or use the `listItems` data prop. Do not use both."
     );
     return null;
   }
   if (!children && !listItems) {
     console.warn(
-      "Either `<li>` children or the `listItems` prop must be used."
+      "NYPL Reservoir List: Pass in either `<li>` children or pass data in " +
+        "the `listItems` prop, not both."
     );
     return null;
   }
@@ -100,7 +102,7 @@ export default function List(props: React.PropsWithChildren<ListProps>) {
     React.Children.map(children, (child: React.ReactElement) => {
       if (child && child?.type !== "li" && child?.props?.mdxType !== "li") {
         console.warn(
-          `Direct children of \`List\` (${listType}) should be \`<li>\`s.`
+          `NYPL Reservoir List: Direct children of \`List\` (${listType}) must be \`<li>\`s.`
         );
       }
     });
@@ -120,7 +122,8 @@ export default function List(props: React.PropsWithChildren<ListProps>) {
         child.props.mdxType !== React.Fragment
       ) {
         console.warn(
-          "Direct children of `List` (definition) should be `<dt>`s and `<dd>`s."
+          "NYPL Reservoir List: Direct children of `List` (definition) must " +
+            "be `<dt>`s and `<dd>`s."
         );
       }
     });

package/src/components/Logo/Logo.stories.mdx

@@ -148,24 +148,12 @@ is the logo's code name. Pass in better descriptive text in the `title` prop
 when using the `Logo` component in your application. This will give screenreaders
 a better descriptive title for the `svg` graphic.
 
-## All Logos
-
-The `Logo` component contains the logos most commonly used by are listed available
-logos are listed in the `LogoNames` enum in `src/components/Logos/LogoTypes.tsx`.
-
-If you feel a necessary logo should be added to the `Logo` component, please reach out
-to the DS team.
-
-<Canvas withToolbar>
-  <Story name="All Logos">{allLogosGrid(logos)}</Story>
-</Canvas>
-
 ## Logo Sizes
 
 Update the size of the `Logo` component by passing the `size` prop with a value from
 `LogoSizes`. The `LogoSizes` enum can be found in`src/components/Logo/LogoTypes.tsx`.
 
-Note: `LogoSizes.Default` sets the width to `100%` and the logo will expand to
+Note: `LogoSizes.Default` sets the width to `100%` and the rendered logo will expand to
 fill the full width of the parent element.
 
 ```jsx
@@ -177,6 +165,18 @@ fill the full width of the parent element.
   <Story name="Logo Sizes">{allLogosGrid(sizes)}</Story>
 </Canvas>
 
+## All Logos
+
+The `Logo` component contains the logos most commonly used by are listed available
+logos are listed in the `LogoNames` enum in `src/components/Logos/LogoTypes.tsx`.
+
+If you feel a necessary logo should be added to the `Logo` component, please reach out
+to the DS team.
+
+<Canvas withToolbar>
+  <Story name="All Logos">{allLogosGrid(logos)}</Story>
+</Canvas>
+
 ## Custom Logos
 
 If you'd like to pass a custom `svg` to your application, you can pass it a

package/src/components/Logo/Logo.test.tsx

@@ -28,7 +28,7 @@ describe("Logo", () => {
       </Logo>
     );
     expect(warn).toHaveBeenCalledWith(
-      "Logo accepts either a `name` prop or an `svg` element child. It can not accept both."
+      "NYPL Reservoir Logo: Pass either a `name` prop or an `svg` element child. Do not pass both."
     );
   });
 
@@ -36,7 +36,17 @@ describe("Logo", () => {
     const warn = jest.spyOn(console, "warn");
     render(<Logo />);
     expect(warn).toHaveBeenCalledWith(
-      "Pass a logo `name` prop or an SVG child to `Logo` to ensure a logo appears."
+      "NYPL Reservoir Logo: Pass a logo `name` prop or an SVG child to " +
+        "`Logo` to ensure a logo appears."
+    );
+  });
+
+  it("consoles a warning if name is not passed and a child is but it's not an SVG element", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(<Logo>Not an SVG</Logo>);
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir Logo: An `svg` element must be passed to the `Logo` " +
+        "component as its child."
     );
   });
 

package/src/components/Logo/Logo.tsx

@@ -55,12 +55,14 @@ export default function Logo(props: React.PropsWithChildren<LogoProps>) {
   // Component prop validation
   if (name && children) {
     console.warn(
-      "Logo accepts either a `name` prop or an `svg` element child. It can not accept both."
+      "NYPL Reservoir Logo: Pass either a `name` prop or an `svg` element " +
+        "child. Do not pass both."
     );
     return null;
   } else if (!name && !children) {
     console.warn(
-      "Pass a logo `name` prop or an SVG child to `Logo` to ensure a logo appears."
+      "NYPL Reservoir Logo: Pass a logo `name` prop or an SVG child to " +
+        "`Logo` to ensure a logo appears."
     );
     return null;
   }
@@ -83,14 +85,17 @@ export default function Logo(props: React.PropsWithChildren<LogoProps>) {
   // Apply logo 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"
+    (children as JSX.Element).props?.type === "svg" ||
+    (children as JSX.Element).props?.mdxType === "svg"
   ) {
     childSVG = React.cloneElement(children as JSX.Element, {
       ...logoProps,
     });
   } else {
-    console.warn("You must pass an `svg` element to the `Logo` component.");
+    console.warn(
+      "NYPL Reservoir Logo: An `svg` element must be passed to the `Logo` " +
+        "component as its child."
+    );
   }
 
   return <Box __css={styles}>{childSVG}</Box>;

package/src/components/Logo/LogoTypes.tsx

@@ -5,12 +5,12 @@ export enum LogoColors {
 }
 
 export enum LogoSizes {
+  Default = "default",
   ExtraExtraSmall = "xxsmall",
   ExtraSmall = "xsmall",
   Small = "small",
   Medium = "medium",
   Large = "large",
-  Default = "default",
 }
 
 export enum LogoNames {

package/src/components/Notification/Notification.stories.mdx

@@ -33,15 +33,15 @@ export const enumValues = getStorybookEnumValues(
     jest: ["Notification.test.tsx"],
   }}
   argTypes={{
-    centered: {
-      table: { defaultValue: { summary: false } },
-    },
     className: { control: false },
     dismissible: {
       table: { defaultValue: { summary: false } },
     },
     icon: { control: false },
     id: { control: false },
+    isCentered: {
+      table: { defaultValue: { summary: false } },
+    },
     noMargin: {
       table: { defaultValue: { summary: false } },
     },
@@ -59,7 +59,7 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.25.12`  |
+| Latest            | `0.25.13`  |
 
 <Description of={Notification} />
 
@@ -75,11 +75,11 @@ within a parent element.
     name="Notification with Controls"
     args={{
       ariaLabel: "Notification label",
-      centered: false,
       className: undefined,
       dismissible: false,
       icon: undefined,
       id: "notification-id",
+      isCentered: false,
       noMargin: false,
       notificationHeading: "Notification Heading",
       notificationContent: (