Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add img props to infoCard component #1112

Merged
merged 7 commits into from
Aug 15, 2024
Merged

Add img props to infoCard component #1112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8597e60
Initial commit
diegoleone Aug 7, 2024
7524c5c
Remove logs
diegoleone Aug 7, 2024
aee2bad
Add changelog and docs
diegoleone Aug 7, 2024
83ac918
Add comma
diegoleone Aug 7, 2024
1a52947
Add comma
diegoleone Aug 7, 2024
1e3c02a
Add false as a default value to boolenvariable
diegoleone Aug 13, 2024
718794d
Merge branch 'master' into add-image-props
diegoleone Aug 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

## [Unreleased]

### Added

- Adding 'fetchpriority' & 'preload' props to the infoCard component, in order to manage the images it contains.

## [3.174.2] - 2024-08-12

### Fixed
Expand Down
8 changes: 7 additions & 1 deletion docs/InfoCard.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@ The `info-card` component groups information on a single topic. It often include
"callToActionText": "DISCOVER",
"callToActionUrl": "/sale/d",
"blockClass": "info-card-example",
"textAlignment": "center"
"textAlignment": "center",
"fetchpriority": "auto",
"preload": true
}
},
```
Expand All @@ -56,6 +58,10 @@ The `info-card` component groups information on a single topic. It often include
| `textAlignment` | `TextAlignmentEnum` | Text alignment inside the component: `left`, `center` or `right`. This prop is ignored if `isFullModeStyle` is true. | `"left"` |
| `textMode` | `TextModeEnum` | Text mode used to process the text from `headline` and `subhead` props. | `"html"` |
| `textPosition` | `TextPositionEnum` | Position of the text component: `left`, `center` or `right`. | `"left"` |
| `fetchpriority` | `string` | The fetch priority hint ('high', 'low' or 'auto').
| `auto` |
| `preload` | `boolean` | Preloads the first image in a list, prioritizing the image display over other assets.
| `false` |

#### `TextPositionEnum` possible values

Expand Down
10 changes: 10 additions & 0 deletions react/components/InfoCard/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,8 @@ const InfoCard = ({
htmlId,
textMode,
linkTarget,
fetchpriority,
preload,
}) => {
const {
hints: { mobile },
Expand Down Expand Up @@ -242,6 +244,12 @@ const InfoCard = ({
style={{ objectFit: 'cover' }}
alt={formatIOMessage({ id: callToActionText, intl })}
data-testid="half-image"
fetchPriority={fetchpriority}
{...(preload
? {
'data-vtex-preload': 'true',
}
: {})}
/>
</LinkWrapper>
</div>
Expand Down Expand Up @@ -290,6 +298,8 @@ MemoizedInfoCard.defaultProps = {
textMode: textModeTypes.TEXT_MODE_HTML.value,
linkTarget: '_self',
callToActionLinkTarget: '_self',
fetchpriority: 'auto',
preload: false,
}

MemoizedInfoCard.schema = {
Expand Down
Loading