Skip to content

Commit

Permalink
Merge pull request #1462 from NYPL/DSD-1630/card-image-props
Browse files Browse the repository at this point in the history
DSD-1630: Adding and passing down isLazy from Card to its Image component
  • Loading branch information
EdwinGuzman authored Nov 27, 2023
2 parents 1fa05c6 + d185e59 commit 599ac49
Show file tree
Hide file tree
Showing 6 changed files with 114 additions and 10 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
61 changes: 54 additions & 7 deletions src/components/Card/Card.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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

Expand All @@ -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)
Expand All @@ -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} />
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -185,3 +228,7 @@ must be set to `true`.
## Cards Without Images

<Canvas of={CardStories.WithoutImages} />

## Changelog

<ComponentChangelogTable changelogData={changelogData} />
30 changes: 30 additions & 0 deletions src/components/Card/Card.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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" } },
},
Expand Down Expand Up @@ -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,
Expand All @@ -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"],
}}
Expand Down Expand Up @@ -148,6 +153,7 @@ export const ImagePositionColumnCards: Story = {
imageProps={{
alt: "Alt text",
aspectRatio: "twoByOne",
isLazy: true,
src: "//placekitten.com/400/200",
}}
>
Expand All @@ -164,6 +170,7 @@ export const ImagePositionColumnCards: Story = {
alt: "Alt text",
aspectRatio: "twoByOne",
isAtEnd: true,
isLazy: true,
src: "//placekitten.com/400/200",
}}
>
Expand All @@ -187,6 +194,7 @@ export const ImagePositionRowCards: Story = {
alt: "Alt text",
aspectRatio: "twoByOne",
src: "//placekitten.com/400/200",
isLazy: true,
}}
isCentered
layout="row"
Expand All @@ -205,6 +213,7 @@ export const ImagePositionRowCards: Story = {
alt: "Alt text",
aspectRatio: "twoByOne",
isAtEnd: true,
isLazy: true,
src: "//placekitten.com/400/200",
}}
isCentered
Expand All @@ -230,6 +239,7 @@ export const ImageSizeColumnCards: Story = {
imageProps={{
alt: "Alt text",
aspectRatio: "square",
isLazy: true,
size: "xxsmall",
src: "//placekitten.com/400/200",
}}
Expand All @@ -253,6 +263,7 @@ export const ImageSizeColumnCards: Story = {
imageProps={{
alt: "Alt text",
aspectRatio: "square",
isLazy: true,
size: "xsmall",
src: "//placekitten.com/400/200",
}}
Expand All @@ -276,6 +287,7 @@ export const ImageSizeColumnCards: Story = {
imageProps={{
alt: "Alt text",
aspectRatio: "square",
isLazy: true,
size: "small",
src: "//placekitten.com/400/200",
}}
Expand All @@ -299,6 +311,7 @@ export const ImageSizeColumnCards: Story = {
imageProps={{
alt: "Alt text",
aspectRatio: "square",
isLazy: true,
size: "medium",
src: "//placekitten.com/400/200",
}}
Expand All @@ -322,6 +335,7 @@ export const ImageSizeColumnCards: Story = {
imageProps={{
alt: "Alt text",
aspectRatio: "square",
isLazy: true,
size: "large",
src: "//placekitten.com/400/200",
}}
Expand All @@ -345,6 +359,7 @@ export const ImageSizeColumnCards: Story = {
imageProps={{
alt: "Alt text",
aspectRatio: "square",
isLazy: true,
src: "//placekitten.com/400/200",
}}
isCentered
Expand Down Expand Up @@ -372,6 +387,7 @@ export const ImageSizeRowCards: Story = {
imageProps={{
alt: "Alt text",
aspectRatio: "twoByOne",
isLazy: true,
size: "xxsmall",
src: "//placekitten.com/400/200",
}}
Expand All @@ -394,6 +410,7 @@ export const ImageSizeRowCards: Story = {
imageProps={{
alt: "Alt text",
aspectRatio: "twoByOne",
isLazy: true,
size: "xsmall",
src: "//placekitten.com/400/200",
}}
Expand All @@ -416,6 +433,7 @@ export const ImageSizeRowCards: Story = {
imageProps={{
alt: "Alt text",
aspectRatio: "twoByOne",
isLazy: true,
size: "small",
src: "//placekitten.com/400/200",
}}
Expand All @@ -438,6 +456,7 @@ export const ImageSizeRowCards: Story = {
imageProps={{
alt: "Alt text",
aspectRatio: "twoByOne",
isLazy: true,
size: "medium",
src: "//placekitten.com/400/200",
}}
Expand All @@ -461,6 +480,7 @@ export const ImageSizeRowCards: Story = {
imageProps={{
alt: "Alt text",
aspectRatio: "twoByOne",
isLazy: true,
size: "large",
src: "//placekitten.com/400/200",
}}
Expand All @@ -485,6 +505,7 @@ export const ImageSizeRowCards: Story = {
imageProps={{
alt: "Alt text",
aspectRatio: "twoByOne",
isLazy: true,
src: "//placekitten.com/400/200",
}}
isCentered
Expand Down Expand Up @@ -757,6 +778,7 @@ export const GridExample: Story = {
imageProps={{
alt: "Alt text",
aspectRatio: "twoByOne",
isLazy: true,
src: "//placekitten.com/400/200",
}}
>
Expand All @@ -778,6 +800,7 @@ export const GridExample: Story = {
imageProps={{
alt: "Alt text",
aspectRatio: "twoByOne",
isLazy: true,
src: "//placekitten.com/410/210",
}}
>
Expand All @@ -799,6 +822,7 @@ export const GridExample: Story = {
imageProps={{
alt: "Alt text",
aspectRatio: "twoByOne",
isLazy: true,
src: "//placekitten.com/420/220",
}}
>
Expand All @@ -820,6 +844,7 @@ export const GridExample: Story = {
imageProps={{
alt: "Alt text",
aspectRatio: "twoByOne",
isLazy: true,
src: "//placekitten.com/430/230",
}}
>
Expand All @@ -841,6 +866,7 @@ export const GridExample: Story = {
imageProps={{
alt: "Alt text",
aspectRatio: "twoByOne",
isLazy: true,
src: "//placekitten.com/440/200",
}}
>
Expand All @@ -862,6 +888,7 @@ export const GridExample: Story = {
imageProps={{
alt: "Alt text",
aspectRatio: "twoByOne",
isLazy: true,
src: "//placekitten.com/450/200",
}}
>
Expand Down Expand Up @@ -890,6 +917,7 @@ export const StackExample: Story = {
imageProps={{
alt: "Alt text",
aspectRatio: "twoByOne",
isLazy: true,
src: "//placekitten.com/400/200",
}}
isCentered
Expand All @@ -914,6 +942,7 @@ export const StackExample: Story = {
imageProps={{
alt: "Alt text",
aspectRatio: "twoByOne",
isLazy: true,
src: "//placekitten.com/410/210",
}}
isCentered
Expand All @@ -938,6 +967,7 @@ export const StackExample: Story = {
imageProps={{
alt: "Alt text",
aspectRatio: "twoByOne",
isLazy: true,
src: "//placekitten.com/420/220",
}}
isCentered
Expand Down
7 changes: 6 additions & 1 deletion src/components/Card/Card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ function CardImage(
credit,
isAtEnd,
isCentered,
isLazy,
layout,
size,
src,
Expand All @@ -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}
/>
Expand Down Expand Up @@ -208,6 +211,7 @@ export const Card = chakra(
component: undefined,
credit: undefined,
isAtEnd: false,
isLazy: false,
size: "default",
src: "",
},
Expand Down Expand Up @@ -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}
Expand Down
Loading

1 comment on commit 599ac49

@vercel
Copy link

@vercel vercel bot commented on 599ac49 Nov 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.