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

package/src/components/Card/Card.test.tsx

@@ -3,14 +3,16 @@ import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
-import Card, { CardHeading, CardContent, CardActions } from "./Card";
-import Link from "../Link/Link";
-import { LinkTypes } from "../Link/LinkTypes";
 import Button from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
+import Card, { CardHeading, CardContent, CardActions } from "./Card";
 import { HeadingLevels } from "../Heading/HeadingTypes";
 import Icon from "../Icons/Icon";
 import { IconRotationTypes, IconNames, IconAlign } from "../Icons/IconTypes";
+import Image from "../Image/Image";
+import Link from "../Link/Link";
+import { LinkTypes } from "../Link/LinkTypes";
+import { ImageRatios } from "../Image/ImageTypes";
 
 describe("Card Accessibility", () => {
   it("passes axe accessibility test", async () => {
@@ -92,12 +94,12 @@ describe("Card", () => {
   );
   const cardWithExtendedStyles = (
     <Card
-      id="cardWithExtendedStyles"
       className="edition-card"
-      imageSrc="https://placeimg.com/300/400/arch"
+      id="cardWithExtendedStyles"
       imageAlt="Alt text"
+      imageSrc="https://placeimg.com/300/400/arch"
     >
-      <CardHeading level={HeadingLevels.Two} id="editioncardheading1">
+      <CardHeading id="editioncardheading1" level={HeadingLevels.Two}>
         The Card Heading
       </CardHeading>
       <CardContent>
@@ -114,10 +116,10 @@ describe("Card", () => {
         </Link>
         <Link id="link-icon" href="#url" type={LinkTypes.Action}>
           <Icon
-            id="icon-cardWithExtendedStyles"
-            name={IconNames.Download}
             align={IconAlign.Left}
             iconRotation={IconRotationTypes.Rotate0}
+            id="icon-cardWithExtendedStyles"
+            name={IconNames.Download}
           />
           Download
         </Link>
@@ -126,12 +128,12 @@ describe("Card", () => {
   );
   const cardWithNoCTAs = (
     <Card
-      id="cardWithNoCTAs"
       className="edition-card"
-      imageSrc="https://placeimg.com/300/400/arch"
+      id="cardWithNoCTAs"
       imageAlt="Alt text"
+      imageSrc="https://placeimg.com/300/400/arch"
     >
-      <CardHeading level={HeadingLevels.Two} id="editioncardheading1">
+      <CardHeading id="editioncardheading1" level={HeadingLevels.Two}>
         The Card Heading
       </CardHeading>
       <CardContent>
@@ -143,14 +145,14 @@ describe("Card", () => {
   );
   const cardWithNoContent = (
     <Card
-      id="cardWithNoContent"
       className="edition-card"
-      imageSrc="https://placeimg.com/300/400/arch"
+      id="cardWithNoContent"
       imageAlt="Alt text"
+      imageSrc="https://placeimg.com/300/400/arch"
     >
       <CardHeading
-        level={HeadingLevels.Two}
         id="editioncardheading1"
+        level={HeadingLevels.Two}
         url="#edition-link"
       >
         The Card Heading
@@ -161,10 +163,10 @@ describe("Card", () => {
         </Link>
         <Link id="link-icon" href="#url" type={LinkTypes.Action}>
           <Icon
-            id="icon-cardWithNoContent"
-            name={IconNames.Download}
             align={IconAlign.Left}
             iconRotation={IconRotationTypes.Rotate0}
+            id="icon-cardWithNoContent"
+            name={IconNames.Download}
           />
           Download
         </Link>
@@ -174,8 +176,8 @@ describe("Card", () => {
   const cardWithNoImage = (
     <Card id="cardWithNoImage" className="edition-card">
       <CardHeading
-        level={HeadingLevels.Two}
         id="editioncardheading1"
+        level={HeadingLevels.Two}
         url="#edition-link"
       >
         The Card Heading
@@ -187,10 +189,10 @@ describe("Card", () => {
         </Link>
         <Link id="link-icon" href="#url" type={LinkTypes.Action}>
           <Icon
-            id="icon-cardWithNoImage"
-            name={IconNames.Download}
             align={IconAlign.Left}
             iconRotation={IconRotationTypes.Rotate0}
+            id="icon-cardWithNoImage"
+            name={IconNames.Download}
           />
           Download
         </Link>
@@ -200,8 +202,8 @@ describe("Card", () => {
   const cardFullClick = () => (
     <Card
       id="fullclick"
-      imageSrc="https://placeimg.com/400/200/arch"
       imageAlt="Alt text"
+      imageSrc="https://placeimg.com/400/200/arch"
       mainActionLink="http://nypl.org"
     >
       <CardHeading level={HeadingLevels.Three} id="heading1">
@@ -210,9 +212,9 @@ describe("Card", () => {
       <CardContent>middle column content</CardContent>
       <CardActions>
         <Button
-          onClick={() => {}}
-          id="button1"
           buttonType={ButtonTypes.Primary}
+          id="button1"
+          onClick={() => {}}
           type="submit"
         >
           Example CTA
@@ -220,6 +222,18 @@ describe("Card", () => {
       </CardActions>
     </Card>
   );
+  const cardImageComponentAndRatio = () => (
+    <Card
+      id="fullclick"
+      imageComponent={<Image alt="" src="https://placeimg.com/400/200/arch" />}
+      imageAspectRatio={ImageRatios.ThreeByTwo}
+    >
+      <CardHeading level={HeadingLevels.Three} id="heading1">
+        The Card Heading
+      </CardHeading>
+      <CardContent>middle column content</CardContent>
+    </Card>
+  );
   let container;
 
   it("renders a Card with a header, image, content, and CTAs", () => {
@@ -289,6 +303,14 @@ describe("Card", () => {
     );
   });
 
+  it("Logs a warning when both `imageComponent` and `imageAspectRatio` are passed", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(cardImageComponentAndRatio());
+    expect(warn).toHaveBeenCalledWith(
+      "Both `imageComponent` and `imageAspectRatio` are set but `imageAspectRatio` will be ignored in favor of the aspect ratio on `imageComponent`."
+    );
+  });
+
   it("Renders the UI snapshot correctly", () => {
     const regular = renderer.create(regularCard).toJSON();
     const withExtendedStyles = renderer.create(cardWithExtendedStyles).toJSON();
@@ -296,6 +318,7 @@ describe("Card", () => {
     const withNoContent = renderer.create(cardWithNoContent).toJSON();
     const withNoImage = renderer.create(cardWithNoImage).toJSON();
     const withFullClick = renderer.create(cardFullClick()).toJSON();
+
     expect(regular).toMatchSnapshot();
     expect(withExtendedStyles).toMatchSnapshot();
     expect(withNoCTAs).toMatchSnapshot();

package/src/components/Card/Card.tsx

@@ -16,7 +16,8 @@ import generateUUID from "../../helpers/generateUUID";
 interface CardBaseProps {
   /** Optional value to control the alignment of the text and elements. */
   center?: boolean;
-  /** Optional value to render the layout in a row or column (default). */
+  /** Optional value to render the layout in a row or column.
+   * Default is `CardLayouts.Column`. */
   layout?: CardLayouts;
 }
 
@@ -54,14 +55,15 @@ export interface CardProps extends CardBaseProps, CardLinkBoxProps {
   /** Text description of the image; to follow best practices for accessibility,
    * this prop should not be left blank if `imageSrc` is passed. */
   imageAlt?: string;
-  /** Optional value to control the aspect ratio of the `CardIage`; default
-   * value is `square`. */
+  /** Optional value to control the aspect ratio of the `CardImage`; default
+   * value is `ImageRatios.Square`. */
   imageAspectRatio?: ImageRatios;
   /** Optional boolean value to control the position of the `CardImage`. */
   imageAtEnd?: boolean;
   /** Custom image component used in place of DS `Image` component. */
   imageComponent?: JSX.Element;
-  /** Optional value to control the size of the `CardImage`. */
+  /** Optional value to control the size of the `CardImage`. Default value is
+   * `ImageSizes.Default`. */
   imageSize?: ImageSizes;
   /** The path to the image displayed within the `Card` component. */
   imageSrc?: string;
@@ -91,14 +93,15 @@ function CardImage(props: React.ComponentProps<"img"> & CardImageProps) {
     layout,
   });
   return (
-    <Image
-      alt={alt}
-      component={component}
-      imageAspectRatio={imageAspectRatio}
-      imageSize={imageSize}
-      src={src}
-      additionalStyles={styles}
-    />
+    <Box __css={styles}>
+      <Image
+        alt={alt}
+        component={component}
+        imageAspectRatio={imageAspectRatio}
+        imageSize={imageSize}
+        src={src}
+      />
+    </Box>
   );
 }
 
@@ -178,10 +181,19 @@ export default function Card(props: React.PropsWithChildren<CardProps>) {
     mainActionLink,
   } = props;
   const hasImage = imageSrc || imageComponent;
+  const finalImageAspectRatio = imageComponent
+    ? ImageRatios.Original
+    : imageAspectRatio;
   const customColors = {};
   const cardContents = [];
   let cardHeadingCount = 0;
 
+  if (imageComponent && imageAspectRatio !== ImageRatios.Square) {
+    console.warn(
+      "Both `imageComponent` and `imageAspectRatio` are set but `imageAspectRatio` will be ignored in favor of the aspect ratio on `imageComponent`."
+    );
+  }
+
   backgroundColor && (customColors["backgroundColor"] = backgroundColor);
   foregroundColor && (customColors["color"] = foregroundColor);
 
@@ -191,6 +203,7 @@ export default function Card(props: React.PropsWithChildren<CardProps>) {
     hasImage,
     imageAtEnd,
     layout,
+    mainActionLink,
   });
 
   React.Children.map(children, (child: React.ReactElement, key) => {
@@ -245,7 +258,7 @@ export default function Card(props: React.PropsWithChildren<CardProps>) {
             component={imageComponent}
             alt={imageAlt}
             imageSize={imageSize}
-            imageAspectRatio={imageAspectRatio}
+            imageAspectRatio={finalImageAspectRatio}
             imageAtEnd={imageAtEnd}
             layout={layout}
           />

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

@@ -6,16 +6,20 @@ exports[`Card Renders the UI snapshot correctly 1`] = `
   id="regularCard"
 >
   <div
-    className="the-wrap  css-0"
+    className="css-0"
   >
     <div
-      className="the-crop css-0"
+      className="the-wrap  css-0"
     >
-      <img
-        alt="Alt text"
-        className="css-0"
-        src="https://placeimg.com/400/200/arch"
-      />
+      <div
+        className="the-crop css-0"
+      >
+        <img
+          alt="Alt text"
+          className="css-0"
+          src="https://placeimg.com/400/200/arch"
+        />
+      </div>
     </div>
   </div>
   <div
@@ -55,16 +59,20 @@ exports[`Card Renders the UI snapshot correctly 2`] = `
   id="cardWithExtendedStyles"
 >
   <div
-    className="the-wrap  css-0"
+    className="css-0"
   >
     <div
-      className="the-crop css-0"
+      className="the-wrap  css-0"
     >
-      <img
-        alt="Alt text"
-        className="css-0"
-        src="https://placeimg.com/300/400/arch"
-      />
+      <div
+        className="the-crop css-0"
+      >
+        <img
+          alt="Alt text"
+          className="css-0"
+          src="https://placeimg.com/300/400/arch"
+        />
+      </div>
     </div>
   </div>
   <div
@@ -96,6 +104,8 @@ exports[`Card Renders the UI snapshot correctly 2`] = `
         className="css-0"
         href="online"
         id="link-online"
+        rel={null}
+        target={null}
       >
         Read Online
       </a>
@@ -103,6 +113,8 @@ exports[`Card Renders the UI snapshot correctly 2`] = `
         className="css-0"
         href="#url"
         id="link-icon"
+        rel={null}
+        target={null}
       >
         <svg
           aria-hidden={true}
@@ -149,16 +161,20 @@ exports[`Card Renders the UI snapshot correctly 3`] = `
   id="cardWithNoCTAs"
 >
   <div
-    className="the-wrap  css-0"
+    className="css-0"
   >
     <div
-      className="the-crop css-0"
+      className="the-wrap  css-0"
     >
-      <img
-        alt="Alt text"
-        className="css-0"
-        src="https://placeimg.com/300/400/arch"
-      />
+      <div
+        className="the-crop css-0"
+      >
+        <img
+          alt="Alt text"
+          className="css-0"
+          src="https://placeimg.com/300/400/arch"
+        />
+      </div>
     </div>
   </div>
   <div
@@ -193,16 +209,20 @@ exports[`Card Renders the UI snapshot correctly 4`] = `
   id="cardWithNoContent"
 >
   <div
-    className="the-wrap  css-0"
+    className="css-0"
   >
     <div
-      className="the-crop css-0"
+      className="the-wrap  css-0"
     >
-      <img
-        alt="Alt text"
-        className="css-0"
-        src="https://placeimg.com/300/400/arch"
-      />
+      <div
+        className="the-crop css-0"
+      >
+        <img
+          alt="Alt text"
+          className="css-0"
+          src="https://placeimg.com/300/400/arch"
+        />
+      </div>
     </div>
   </div>
   <div
@@ -213,8 +233,11 @@ exports[`Card Renders the UI snapshot correctly 4`] = `
       id="editioncardheading1"
     >
       <a
-        className="chakra-link css-1xdhyk6"
+        className="css-0"
         href="#edition-link"
+        id="editioncardheading1-link"
+        rel={null}
+        target={null}
       >
         The Card Heading
       </a>
@@ -226,6 +249,8 @@ exports[`Card Renders the UI snapshot correctly 4`] = `
         className="css-0"
         href="online"
         id="link-online"
+        rel={null}
+        target={null}
       >
         Read Online
       </a>
@@ -233,6 +258,8 @@ exports[`Card Renders the UI snapshot correctly 4`] = `
         className="css-0"
         href="#url"
         id="link-icon"
+        rel={null}
+        target={null}
       >
         <svg
           aria-hidden={true}
@@ -286,8 +313,11 @@ exports[`Card Renders the UI snapshot correctly 5`] = `
       id="editioncardheading1"
     >
       <a
-        className="chakra-link css-1xdhyk6"
+        className="css-0"
         href="#edition-link"
+        id="editioncardheading1-link"
+        rel={null}
+        target={null}
       >
         The Card Heading
       </a>
@@ -304,6 +334,8 @@ exports[`Card Renders the UI snapshot correctly 5`] = `
         className="css-0"
         href="online"
         id="link-online"
+        rel={null}
+        target={null}
       >
         Read Online
       </a>
@@ -311,6 +343,8 @@ exports[`Card Renders the UI snapshot correctly 5`] = `
         className="css-0"
         href="#url"
         id="link-icon"
+        rel={null}
+        target={null}
       >
         <svg
           aria-hidden={true}
@@ -360,16 +394,20 @@ exports[`Card Renders the UI snapshot correctly 6`] = `
     id="fullclick"
   >
     <div
-      className="the-wrap  css-0"
+      className="css-0"
     >
       <div
-        className="the-crop css-0"
+        className="the-wrap  css-0"
       >
-        <img
-          alt="Alt text"
-          className="css-0"
-          src="https://placeimg.com/400/200/arch"
-        />
+        <div
+          className="the-crop css-0"
+        >
+          <img
+            alt="Alt text"
+            className="css-0"
+            src="https://placeimg.com/400/200/arch"
+          />
+        </div>
       </div>
     </div>
     <div

package/src/components/Chakra/Box.stories.mdx

@@ -1,12 +1,12 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
 import { Box } from "@chakra-ui/react";
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
 
-import { getCategory } from "../../utils/componentCategories";
 import VideoPlayer from "../VideoPlayer/VideoPlayer";
 import {
-  VideoPlayerTypes,
   VideoPlayerAspectRatios,
+  VideoPlayerTypes,
 } from "../VideoPlayer/VideoPlayerTypes";
+import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
 <Meta title={getCategory("Box")} component={Box} />

package/src/components/Chakra/Center.stories.mdx

@@ -1,11 +1,11 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
-import { Box, Center, Square, Circle, HStack } from "@chakra-ui/react";
+import { Box, Center, Circle, HStack, Square } from "@chakra-ui/react";
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
 
-import { getCategory } from "../../utils/componentCategories";
+import Icon from "../Icons/Icon";
+import { IconColors, IconNames, IconSizes } from "../Icons/IconTypes";
 import Image from "../Image/Image";
 import { ImageSizes } from "../Image/ImageTypes";
-import Icon from "../Icons/Icon";
-import { IconNames, IconColors, IconSizes } from "../Icons/IconTypes";
+import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
 <Meta title={getCategory("Center, Circle, Square")} component={Center} />

package/src/components/Chakra/Grid.stories.mdx

@@ -1,6 +1,6 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
-import { Box } from "@chakra-ui/react";
-import { Grid, GridItem } from "@chakra-ui/react";
+import { Box, Grid, GridItem } from "@chakra-ui/react";
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
@@ -11,6 +11,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.1`   |
+| Latest            | `0.25.1`   |
 
 Note: This needs the use of the `DSProvider` component. See the
 [README](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/chakra-ui--page#dsprovider)
@@ -63,16 +64,12 @@ the `templateColumns` and `templateRows`.
       height="200px"
       templateRows="repeat(2, 1fr)"
       templateColumns="repeat(5, 1fr)"
-      gap="32"
+      gap="l"
     >
-      <GridItem
-        rowSpan={2}
-        colSpan={1}
-        bg="var(--nypl-colors-ui-link-primary)"
-      />
-      <GridItem colSpan={2} bg="var(--nypl-colors-ui-success-primary)" />
-      <GridItem colSpan={2} bg="var(--nypl-colors-ui-success-secondary)" />
-      <GridItem colSpan={4} bg="var(--nypl-colors-ui-link-secondary)" />
+      <GridItem rowSpan={2} colSpan={1} bg="ui.link.primary" />
+      <GridItem colSpan={2} bg="ui.success.primary" />
+      <GridItem colSpan={2} bg="ui.success.secondary" />
+      <GridItem colSpan={4} bg="ui.link.secondary" />
     </Grid>
   </DSProvider>
 </Canvas>
@@ -82,11 +79,11 @@ the `templateColumns` and `templateRows`.
   height="200px"
   templateRows="repeat(2, 1fr)"
   templateColumns="repeat(5, 1fr)"
-  gap="32"
+  gap="l"
 >
-  <GridItem rowSpan={2} colSpan={1} bg="var(--nypl-colors-ui-link-primary)" />
-  <GridItem colSpan={2} bg="var(--nypl-colors-ui-success-primary)" />
-  <GridItem colSpan={2} bg="var(--nypl-colors-ui-success-secondary)" />
-  <GridItem colSpan={4} bg="var(--nypl-colors-ui-link-secondary)" />
+  <GridItem rowSpan={2} colSpan={1} bg="ui.link.primary" />
+  <GridItem colSpan={2} bg="ui.success.primary" />
+  <GridItem colSpan={2} bg="ui.success.secondary" />
+  <GridItem colSpan={4} bg="ui.link.secondary" />
 </Grid>
 ```

package/src/components/Chakra/Stack.stories.mdx

@@ -1,10 +1,10 @@
 import { Meta, Story, Canvas } from "@storybook/addon-docs";
 import { Box, Stack, HStack, VStack, Circle } from "@chakra-ui/react";
 
-import { getCategory } from "../../utils/componentCategories";
-import DSProvider from "../../theme/provider";
 import Icon from "../Icons/Icon";
 import { IconNames, IconSizes } from "../Icons/IconTypes";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
 
 <Meta title={getCategory("Stack, HStack, VStack")} component={Stack} />