DSD-1630: Adding and passing down isLazy from Card to its Image component

CHANGELOG.md

@@ -32,6 +32,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 - Updates the layout for the `"campaign"` variant of the `Hero` component to have consistent padding on its left and right sides.
 - Updates the `getSectionColors` function to also return dark mode color variants.
 - Updates the `NewsletterSignup` component's `newsletterSignupType` prop to render proper dark mode variant colors.
+- Updates the `Card` component so that it accepts the `imageProps.isLazy` prop and passes it to its internal `Image` component.
 
 ## 2.1.1 (October 26, 2023)
 

src/components/Card/Card.mdx

@@ -2,15 +2,17 @@ import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks";
 
 import * as CardStories from "./Card.stories";
 import Link from "../Link/Link";
+import { changelogData } from "./cardChangelogData";
+import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
 
 <Meta of={CardStories} />
 
 # Card
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.24.0`   |
-| Latest            | `2.0.0`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `0.24.0`     |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 
@@ -26,6 +28,7 @@ import Link from "../Link/Link";
 - {<Link href="#cards-in-a-grid" target="_self">Cards in a Grid</Link>}
 - {<Link href="#cards-in-a-stack" target="_self">Cards in a Stack</Link>}
 - {<Link href="#cards-without-images" target="_self">Cards Without Images</Link>}
+- {<Link href="#changelog" target="_self">Changelog</Link>}
 
 ## Overview
 
@@ -39,6 +42,8 @@ order and each child component may be used multiple times within the content
 area. Although a `Card` is a self-contained unit, `Card` components are often
 grouped together and displayed in some type of grid layout.
 
+Note: all of the examples have images with the `isLazy` set to true.
+
 ### CardHeading
 
 The `CardHeading` component mirrors the standard Reservoir Design System (DS)
@@ -59,6 +64,44 @@ in the row layout of the `Card` component.
 The `CardContent` component should be used to display all content other than
 headings and CTAs.
 
+### CardImage
+
+The `CardImage` component is _not_ exported and is used internally only in the
+`Card` component. It is a convenience component that mirrors the standard DS
+`Image` component. This means that the `CardImage` component accepts the same
+props as the `Image` component, in addition to the `isAtEnd` prop.
+
+Developers do _not_ need to implement this component. Instead, it will be
+rendered in the `Card` component through its `imageProps` prop.
+
+<Source
+  code={`
+<Card
+  imageProps={{
+    alt: "Alt text",
+    aspectRatio: "twoByOne",
+    caption: "caption text",
+    credit: "credit text",
+    isAtEnd: true,
+    isLazy: true,
+    size: "medium",
+    src: "//placekitten.com/400/200",
+  }}
+  {...otherCardProps}
+>
+  <CardHeading level="h3" id="heading-id">
+    Heading Text
+  </CardHeading>
+  <CardContent>
+    Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+    Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac
+    facilisis in, egestas eget quam.
+  </CardContent>
+</Card>
+`}
+  language="jsx"
+/>
+
 ## Component Props
 
 <Canvas of={CardStories.WithControls} />
@@ -106,9 +149,9 @@ link.
 
 By default, the image is always the first element within a `Card`. This means
 the image is at the top of a `Card` with a column layout and on the left side of
-a `Card` with a row layout. However, you can use the `imageProps.isAtEnd` boolean prop
-to override the default placement and move the image to the last element within
-a `Card`.
+a `Card` with a row layout. However, you can use the `imageProps.isAtEnd` boolean
+prop to override the default placement and move the image to the last element
+within a `Card`.
 
 ### Column Cards
 
@@ -185,3 +228,7 @@ must be set to `true`.
 ## Cards Without Images
 
 <Canvas of={CardStories.WithoutImages} />
+
+## Changelog
+
+<ComponentChangelogTable changelogData={changelogData} />

src/components/Card/Card.stories.tsx

@@ -33,6 +33,9 @@ const meta: Meta<typeof Card> = {
     "imageProps.isAtEnd": {
       table: { defaultValue: { summary: false } },
     },
+    "imageProps.isLazy": {
+      table: { defaultValue: { summary: false } },
+    },
     "imageProps.size": {
       table: { defaultValue: { summary: "default" } },
     },
@@ -73,6 +76,7 @@ export const WithControls: Story = {
     "imageProps.aspectRatio": "square",
     "imageProps.component": undefined,
     "imageProps.isAtEnd": false,
+    "imageProps.isLazy": true,
     "imageProps.size": "default",
     "imageProps.src": "//placekitten.com/400/300",
     isAlignedRightActions: false,
@@ -92,6 +96,7 @@ export const WithControls: Story = {
         aspectRatio: args["imageProps.aspectRatio"],
         component: args["imageProps.component"],
         isAtEnd: args["imageProps.isAtEnd"],
+        isLazy: args["imageProps.isLazy"],
         size: args["imageProps.size"],
         src: args["imageProps.src"],
       }}
@@ -148,6 +153,7 @@ export const ImagePositionColumnCards: Story = {
         imageProps={{
           alt: "Alt text",
           aspectRatio: "twoByOne",
+          isLazy: true,
           src: "//placekitten.com/400/200",
         }}
       >
@@ -164,6 +170,7 @@ export const ImagePositionColumnCards: Story = {
           alt: "Alt text",
           aspectRatio: "twoByOne",
           isAtEnd: true,
+          isLazy: true,
           src: "//placekitten.com/400/200",
         }}
       >
@@ -187,6 +194,7 @@ export const ImagePositionRowCards: Story = {
           alt: "Alt text",
           aspectRatio: "twoByOne",
           src: "//placekitten.com/400/200",
+          isLazy: true,
         }}
         isCentered
         layout="row"
@@ -205,6 +213,7 @@ export const ImagePositionRowCards: Story = {
           alt: "Alt text",
           aspectRatio: "twoByOne",
           isAtEnd: true,
+          isLazy: true,
           src: "//placekitten.com/400/200",
         }}
         isCentered
@@ -230,6 +239,7 @@ export const ImageSizeColumnCards: Story = {
         imageProps={{
           alt: "Alt text",
           aspectRatio: "square",
+          isLazy: true,
           size: "xxsmall",
           src: "//placekitten.com/400/200",
         }}
@@ -253,6 +263,7 @@ export const ImageSizeColumnCards: Story = {
         imageProps={{
           alt: "Alt text",
           aspectRatio: "square",
+          isLazy: true,
           size: "xsmall",
           src: "//placekitten.com/400/200",
         }}
@@ -276,6 +287,7 @@ export const ImageSizeColumnCards: Story = {
         imageProps={{
           alt: "Alt text",
           aspectRatio: "square",
+          isLazy: true,
           size: "small",
           src: "//placekitten.com/400/200",
         }}
@@ -299,6 +311,7 @@ export const ImageSizeColumnCards: Story = {
         imageProps={{
           alt: "Alt text",
           aspectRatio: "square",
+          isLazy: true,
           size: "medium",
           src: "//placekitten.com/400/200",
         }}
@@ -322,6 +335,7 @@ export const ImageSizeColumnCards: Story = {
         imageProps={{
           alt: "Alt text",
           aspectRatio: "square",
+          isLazy: true,
           size: "large",
           src: "//placekitten.com/400/200",
         }}
@@ -345,6 +359,7 @@ export const ImageSizeColumnCards: Story = {
         imageProps={{
           alt: "Alt text",
           aspectRatio: "square",
+          isLazy: true,
           src: "//placekitten.com/400/200",
         }}
         isCentered
@@ -372,6 +387,7 @@ export const ImageSizeRowCards: Story = {
         imageProps={{
           alt: "Alt text",
           aspectRatio: "twoByOne",
+          isLazy: true,
           size: "xxsmall",
           src: "//placekitten.com/400/200",
         }}
@@ -394,6 +410,7 @@ export const ImageSizeRowCards: Story = {
         imageProps={{
           alt: "Alt text",
           aspectRatio: "twoByOne",
+          isLazy: true,
           size: "xsmall",
           src: "//placekitten.com/400/200",
         }}
@@ -416,6 +433,7 @@ export const ImageSizeRowCards: Story = {
         imageProps={{
           alt: "Alt text",
           aspectRatio: "twoByOne",
+          isLazy: true,
           size: "small",
           src: "//placekitten.com/400/200",
         }}
@@ -438,6 +456,7 @@ export const ImageSizeRowCards: Story = {
         imageProps={{
           alt: "Alt text",
           aspectRatio: "twoByOne",
+          isLazy: true,
           size: "medium",
           src: "//placekitten.com/400/200",
         }}
@@ -461,6 +480,7 @@ export const ImageSizeRowCards: Story = {
         imageProps={{
           alt: "Alt text",
           aspectRatio: "twoByOne",
+          isLazy: true,
           size: "large",
           src: "//placekitten.com/400/200",
         }}
@@ -485,6 +505,7 @@ export const ImageSizeRowCards: Story = {
         imageProps={{
           alt: "Alt text",
           aspectRatio: "twoByOne",
+          isLazy: true,
           src: "//placekitten.com/400/200",
         }}
         isCentered
@@ -757,6 +778,7 @@ export const GridExample: Story = {
         imageProps={{
           alt: "Alt text",
           aspectRatio: "twoByOne",
+          isLazy: true,
           src: "//placekitten.com/400/200",
         }}
       >
@@ -778,6 +800,7 @@ export const GridExample: Story = {
         imageProps={{
           alt: "Alt text",
           aspectRatio: "twoByOne",
+          isLazy: true,
           src: "//placekitten.com/410/210",
         }}
       >
@@ -799,6 +822,7 @@ export const GridExample: Story = {
         imageProps={{
           alt: "Alt text",
           aspectRatio: "twoByOne",
+          isLazy: true,
           src: "//placekitten.com/420/220",
         }}
       >
@@ -820,6 +844,7 @@ export const GridExample: Story = {
         imageProps={{
           alt: "Alt text",
           aspectRatio: "twoByOne",
+          isLazy: true,
           src: "//placekitten.com/430/230",
         }}
       >
@@ -841,6 +866,7 @@ export const GridExample: Story = {
         imageProps={{
           alt: "Alt text",
           aspectRatio: "twoByOne",
+          isLazy: true,
           src: "//placekitten.com/440/200",
         }}
       >
@@ -862,6 +888,7 @@ export const GridExample: Story = {
         imageProps={{
           alt: "Alt text",
           aspectRatio: "twoByOne",
+          isLazy: true,
           src: "//placekitten.com/450/200",
         }}
       >
@@ -890,6 +917,7 @@ export const StackExample: Story = {
         imageProps={{
           alt: "Alt text",
           aspectRatio: "twoByOne",
+          isLazy: true,
           src: "//placekitten.com/400/200",
         }}
         isCentered
@@ -914,6 +942,7 @@ export const StackExample: Story = {
         imageProps={{
           alt: "Alt text",
           aspectRatio: "twoByOne",
+          isLazy: true,
           src: "//placekitten.com/410/210",
         }}
         isCentered
@@ -938,6 +967,7 @@ export const StackExample: Story = {
         imageProps={{
           alt: "Alt text",
           aspectRatio: "twoByOne",
+          isLazy: true,
           src: "//placekitten.com/420/220",
         }}
         isCentered

src/components/Card/Card.tsx

@@ -88,6 +88,7 @@ function CardImage(
     credit,
     isAtEnd,
     isCentered,
+    isLazy,
     layout,
     size,
     src,
@@ -99,14 +100,16 @@ function CardImage(
     layout,
     size,
   });
+
   return (
     <Box __css={styles}>
       <Image
         alt={alt}
+        aspectRatio={aspectRatio}
         caption={caption}
         component={component}
         credit={credit}
-        aspectRatio={aspectRatio}
+        isLazy={isLazy}
         size={size}
         src={src}
       />
@@ -208,6 +211,7 @@ export const Card = chakra(
           component: undefined,
           credit: undefined,
           isAtEnd: false,
+          isLazy: false,
           size: "default",
           src: "",
         },
@@ -319,6 +323,7 @@ export const Card = chakra(
               component={imageProps.component}
               credit={imageProps.credit}
               isAtEnd={imageProps.isAtEnd}
+              isLazy={imageProps.isLazy}
               layout={layout}
               size={imageProps.size}
               src={imageProps.src ? imageProps.src : undefined}