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

DS-767 Remove usage of image component from card #2520

Merged
merged 14 commits into from
Aug 23, 2022
Merged

DS-767 Remove usage of image component from card #2520

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
05dacf0
DS-767: Add Image Element support + backwards compatibility with the …
Jul 29, 2022
bb57ac8
DS-767: Replace a link in card schema that points to image element sc…
Jul 29, 2022
aa68e8b
DS-767: Replace image component props usage with image element props …
Jul 29, 2022
189a139
DS-767: Tests update
Jul 29, 2022
61c9b8c
DS-767: Update template
Aug 16, 2022
6654b46
DS-767: Update PL examples
Aug 16, 2022
ca7082c
DS-767: Update tests
Aug 16, 2022
7fb40ad
Merge branch 'master' of https://github.com/boltdesignsystem/bolt int…
Aug 16, 2022
4c4c501
DS-767: remove comment from template
Aug 22, 2022
083912a
DS-767: Update docs for card
Aug 22, 2022
348368c
DS-767: Update PL
Aug 22, 2022
3e530b8
DS-767: Update card horizontal
Aug 22, 2022
56631e0
DS-767: Update docs
Aug 23, 2022
9e9619d
DS-767: Update docs
Aug 23, 2022
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
15 changes: 11 additions & 4 deletions docs-site/src/pages/pattern-lab/_patterns/40-components/card/00-card-replacement-docs.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
{% set usage %}
{% verbatim %}
// Standard card-replacement
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
media: {
image: {
{% set image %}
{% include '@bolt-elements-image/image.twig' with {
attributes: {
alt: 'alt text',
src: '/images/placeholders/landscape-16x9-mountains.jpg',
alt: 'Image alt.',
loading: 'lazy',

},
} only %}
{% endset %}
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
media: {
image: image,
},
body: {
eyebrow: 'This is an eyebrow',
Expand Down
29 changes: 29 additions & 0 deletions docs-site/src/pages/pattern-lab/_patterns/40-components/card/06-card-horizontal.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,27 @@
}{% endverbatim %}
{% endset %}

{% set image_element_usage %}{% verbatim %}
{% set image %}
{% include '@bolt-elements-image/image.twig' with {
background: true,
attributes: {
alt: 'Image alt text',
src: 'path/image.jpg',
},
} only %}
{% endset %}
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
horizontal: true,
height: 'auto',
media: {
image: image,
},
...
} only %}
{% endverbatim %}
{% endset %}

{% set customBodyDemo %}{% verbatim %}body: {
content: customContentWithGrid,
}{% endverbatim %}
Expand All @@ -32,6 +53,14 @@
<bolt-text headline>
Default horizontal card
</bolt-text>
<bolt-text>
When using background element set <code>background: true</code>. This will crop the image in the horizontal card.
Copy link
Collaborator

Choose a reason for hiding this comment

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

Helper text here is just what we need, but I'm not sure I understand from the sentence how it's supposed to work. There isn't a background element here 🤔 . Isn't it essentially just the following?

When creating a horizontal card by setting the horizontal prop to true, the image you pass for card media should also have its background prop set to true in order to allow the image to be cropped and display properly.

Feel free to tweak the wording, but I think the really important thing to get across is that users need to set background: true on the image element whenever the card has horizontal: true.

Copy link
Collaborator Author

@MarcinMr MarcinMr Aug 23, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Today when I read this sentence, I didn't understand it either 😁 I updated the docs with your more specific description, only added one more detail that the horizontal card also must have the prop height set to auto. Without this images are broken.

</bolt-text>
{% include '@bolt-components-code-snippet/code-snippet.twig' with {
content: image_element_usage,
lang: 'twig',
mode: 'dark',
} only %}
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
horizontal: true,
height: 'auto',
Expand Down