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

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 10 commits
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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs-site/src/pages/pattern-lab/_patterns/40-components/band/55-band-collection.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
image: {
src: '/images/placeholders/landscape-16x9-mountains.jpg',
alt: 'Image description',
lazyload: false,
loading: 'lazy',
Copy link
Collaborator

Choose a reason for hiding this comment

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

Any reason you didn't replace the image structured data array here with a rendered image, such that this looks like the following?

media: {
  image: image,
}

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

updated

},
},
body: {
Expand All @@ -25,7 +25,7 @@
image: {
src: '/images/placeholders/landscape-16x9-mountains.jpg',
alt: 'Image description',
lazyload: false,
loading: 'lazy',
},
},
body: {
Expand All @@ -45,7 +45,7 @@
image: {
src: '/images/placeholders/landscape-16x9-mountains.jpg',
alt: 'Image description',
lazyload: false,
loading: 'lazy',
},
},
body: {
Expand Down
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
13 changes: 9 additions & 4 deletions docs-site/src/pages/pattern-lab/_patterns/40-components/card/05-card.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
media: {
image: {
{% set image %}
{% include '@bolt-elements-image/image.twig' with {
attributes: {
alt: 'Image alt text',
src: '/images/placeholders/landscape-16x9-mountains.jpg',
alt: 'Image alt.',
},
} only %}
{% endset %}
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
media: {
image: image,
},
body: {
eyebrow: 'This is an eyebrow',
Expand Down
53 changes: 42 additions & 11 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,24 +13,59 @@
}{% 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 %}
{% endset %}

{% set image %}
{% include '@bolt-elements-image/image.twig' with {
background: true,
attributes: {
alt: 'Image alt text',
src: '/images/placeholders/landscape-16x9-mountains.jpg',
},
} only %}
{% endset %}

{% set card %}
<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

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',
media: {
image: {
src: '/images/placeholders/landscape-16x9-mountains.jpg',
alt: 'Image alt.',
placeholder_color: '#afcde6',
},
image: image
},
body: {
eyebrow: 'This is an eyebrow',
Expand Down Expand Up @@ -78,11 +113,7 @@
horizontal: true,
height: 'auto',
media: {
image: {
src: '/images/placeholders/landscape-16x9-mountains.jpg',
alt: 'Image alt.',
placeholder_color: '#afcde6',
},
image: image,
attributes: {
style: 'min-width:' ~ width,
}
Expand Down Expand Up @@ -196,4 +227,4 @@
} only %}
</bolt-grid-item>
{% endfor %}
</bolt-grid>>
</bolt-grid>
29 changes: 13 additions & 16 deletions docs-site/src/pages/pattern-lab/_patterns/40-components/card/10-card-button-variations.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
{% set image %}
{% include '@bolt-elements-image/image.twig' with {
attributes: {
alt: 'Image alt text',
src: '/images/placeholders/landscape-16x9-mountains.jpg',
},
} only %}
{% endset %}

{% set card_1 %}
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
media: {
image: {
src: '/images/placeholders/landscape-16x9-mountains.jpg',
alt: 'Image alt.',
},
image: image,
},
body: {
eyebrow: 'This is an eyebrow',
Expand All @@ -23,10 +29,7 @@
{% set card_2 %}
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
media: {
image: {
src: '/images/placeholders/landscape-16x9-mountains.jpg',
alt: 'Image alt.',
},
image: image,
},
body: {
eyebrow: 'This is an eyebrow',
Expand All @@ -46,10 +49,7 @@
{% set card_3 %}
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
media: {
image: {
src: '/images/placeholders/landscape-16x9-mountains.jpg',
alt: 'Image alt.',
},
image: image,
},
body: {
eyebrow: 'This is an eyebrow',
Expand All @@ -69,10 +69,7 @@
{% set card_4 %}
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
media: {
image: {
src: '/images/placeholders/landscape-16x9-mountains.jpg',
alt: 'Image alt.',
},
image: image,
},
body: {
eyebrow: 'This is an eyebrow',
Expand Down
13 changes: 9 additions & 4 deletions .../pages/pattern-lab/_patterns/40-components/card/15-card-replacement-with-two-buttons.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
{% set image %}
{% include '@bolt-elements-image/image.twig' with {
attributes: {
alt: 'Image alt text',
src: '/images/placeholders/landscape-16x9-mountains.jpg',
},
} only %}
{% endset %}

{% set card %}
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
media: {
image: {
src: '/images/placeholders/landscape-16x9-mountains.jpg',
alt: 'Image alt.',
},
image: image,
},
body: {
eyebrow: 'This is an eyebrow',
Expand Down
19 changes: 10 additions & 9 deletions ...pages/pattern-lab/_patterns/40-components/card/25-card-replacement-height-variations.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
{% set schema = bolt.data.components['@bolt-components-card-replacement'].schema %}

{% set image %}
{% include '@bolt-elements-image/image.twig' with {
attributes: {
alt: 'Image alt text',
src: '/images/placeholders/landscape-16x9-mountains.jpg',
},
} only %}
{% endset %}
<bolt-grid gutter="medium" row-gutter="medium">
{% for height in schema.properties.height.enum %}
{% if height == 'full' %}
Expand All @@ -11,10 +18,7 @@
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
height: height,
media: {
image: {
src: '/images/placeholders/landscape-16x9-mountains.jpg',
alt: 'Image alt.',
},
image: image,
},
body: {
headline: 'This card has ' ~ height ~ ' height. ' ~ more_text,
Expand All @@ -41,10 +45,7 @@
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
height: 'full',
media: {
image: {
src: '/images/placeholders/landscape-16x9-mountains.jpg',
alt: 'Image alt.',
},
image: image,
},
body: {
headline: 'This card also has full height.',
Expand Down
19 changes: 10 additions & 9 deletions ...c/pages/pattern-lab/_patterns/40-components/card/30-card-replacement-link-variations.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,18 @@
href: 'https://yahoo.com'
}
} only %}{% endspaceless %}{% endset %}

{% set image %}
{% include '@bolt-elements-image/image.twig' with {
attributes: {
alt: 'Image alt text',
src: '/images/placeholders/landscape-16x9-mountains.jpg',
},
} only %}
{% endset %}
{% set card_1 %}
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
media: {
image: {
src: '/images/placeholders/landscape-16x9-mountains.jpg',
alt: 'Image alt.',
},
image: image,
},
body: {
headline: 'No link',
Expand All @@ -33,10 +37,7 @@
text: 'Go to google.com'
},
media: {
image: {
src: '/images/placeholders/landscape-16x9-mountains.jpg',
alt: 'Image alt.',
},
image: image,
},
body: {
headline: 'With link',
Expand Down
13 changes: 9 additions & 4 deletions ...s/pattern-lab/_patterns/40-components/card/40-card-replacement-with-freeform-content.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,12 +126,17 @@
]
}
} only %}
{% include '@bolt-components-card-replacement/_card-replacement-media.twig' with {
media: {
image: {
{% set image %}
{% include '@bolt-elements-image/image.twig' with {
attributes: {
alt: 'Image alt text',
src: '/images/placeholders/landscape-16x9-mountains.jpg',
alt: 'Image alt.',
},
} only %}
{% endset %}
{% include '@bolt-components-card-replacement/_card-replacement-media.twig' with {
media: {
image: image,
}
} %}
{% endset %}
Expand Down
14 changes: 9 additions & 5 deletions ...c/pages/pattern-lab/_patterns/40-components/card/45-card-replacement-with-text-group.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,14 +71,18 @@
content: block_list,
} only %}
{% endset %}

{% set image %}
{% include '@bolt-elements-image/image.twig' with {
attributes: {
alt: 'Image alt text',
src: '/images/placeholders/landscape-16x9-mountains.jpg',
},
} only %}
{% endset %}
{% set card_2 %}
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
media: {
image: {
src: '/images/placeholders/landscape-16x9-mountains.jpg',
alt: 'Image alt.',
},
image: image,
},
height: 'auto',
body: {
Expand Down