Skip to content

Commit

Permalink
fix(list-illustration): Fixing center alignment - FRONT-4298 (#3279)
Browse files Browse the repository at this point in the history
  • Loading branch information
@planctus
planctus committed Mar 14, 2024
1 parent e1eebe2 commit 6e77184
Show file tree
Hide file tree
Showing 4 changed files with 348 additions and 10 deletions.
306 changes: 306 additions & 0 deletions ...mentations/twig/components/list-illustration/__snapshots__/list-illustration.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,6 +306,159 @@ exports[`List with illustration With image renders correctly 1`] = `
</jest>
`;

exports[`List with illustration With image renders correctly when centered 1`] = `
<jest>
<div
class="ecl-list-illustration ecl-list-illustration--zebra ecl-list-illustration--centered"
>
<div
class="ecl-list-illustration__item"
>
<picture
class="ecl-picture ecl-list-illustration__picture"
>
<img
alt="Image alternative text"
class="ecl-list-illustration__image"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
/>
</picture>
<div
class="ecl-list-illustration__detail"
>
<div
class="ecl-list-illustration__title-container"
>
<div
class="ecl-list-illustration__value"
>
3.2 million
</div>
<div
class="ecl-list-illustration__title"
>
List with illustration item 1
</div>
</div>
<div
class="ecl-list-illustration__description"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis. Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce sit amet sem dui. In nec lacinia eros.
</div>
</div>
</div>
<div
class="ecl-list-illustration__item"
>
<picture
class="ecl-picture ecl-list-illustration__picture"
>
<img
alt="Image alternative text"
class="ecl-list-illustration__image"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
/>
</picture>
<div
class="ecl-list-illustration__detail"
>
<div
class="ecl-list-illustration__title-container"
>
<div
class="ecl-list-illustration__value"
>
3.2 million
</div>
<div
class="ecl-list-illustration__title"
>
List with illustration item 2
</div>
</div>
<div
class="ecl-list-illustration__description"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis. Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce sit amet sem dui. In nec lacinia eros.
</div>
</div>
</div>
<div
class="ecl-list-illustration__item"
>
<picture
class="ecl-picture ecl-list-illustration__picture"
>
<img
alt="Image alternative text"
class="ecl-list-illustration__image"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
/>
</picture>
<div
class="ecl-list-illustration__detail"
>
<div
class="ecl-list-illustration__title-container"
>
<div
class="ecl-list-illustration__value"
>
3.2 million
</div>
<div
class="ecl-list-illustration__title"
>
List with illustration item 3
</div>
</div>
<div
class="ecl-list-illustration__description"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis. Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce sit amet sem dui. In nec lacinia eros.
</div>
</div>
</div>
<div
class="ecl-list-illustration__item"
>
<picture
class="ecl-picture ecl-list-illustration__picture"
>
<img
alt="Image alternative text"
class="ecl-list-illustration__image"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
/>
</picture>
<div
class="ecl-list-illustration__detail"
>
<div
class="ecl-list-illustration__title-container"
>
<div
class="ecl-list-illustration__value"
>
3.2 million
</div>
<div
class="ecl-list-illustration__title"
>
List with illustration item 4
</div>
</div>
<div
class="ecl-list-illustration__description"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis. Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce sit amet sem dui. In nec lacinia eros.
</div>
</div>
</div>
</div>
</jest>
`;

exports[`List with illustration With image renders correctly with extra attributes 1`] = `
<jest>
<div
Expand Down Expand Up @@ -613,3 +766,156 @@ exports[`List with illustration With image renders correctly with extra class na
</div>
</jest>
`;

exports[`List with illustration With image renders correctly with squared images 1`] = `
<jest>
<div
class="ecl-list-illustration ecl-list-illustration--zebra"
>
<div
class="ecl-list-illustration__item"
>
<picture
class="ecl-picture ecl-list-illustration__picture ecl-list-illustration__picture--square"
>
<img
alt="Image alternative text"
class="ecl-list-illustration__image ecl-list-illustration__image--square ecl-list-illustration__image--m"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
/>
</picture>
<div
class="ecl-list-illustration__detail"
>
<div
class="ecl-list-illustration__title-container"
>
<div
class="ecl-list-illustration__value"
>
3.2 million
</div>
<div
class="ecl-list-illustration__title"
>
List with illustration item 1
</div>
</div>
<div
class="ecl-list-illustration__description"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis. Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce sit amet sem dui. In nec lacinia eros.
</div>
</div>
</div>
<div
class="ecl-list-illustration__item"
>
<picture
class="ecl-picture ecl-list-illustration__picture ecl-list-illustration__picture--square"
>
<img
alt="Image alternative text"
class="ecl-list-illustration__image ecl-list-illustration__image--square ecl-list-illustration__image--m"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
/>
</picture>
<div
class="ecl-list-illustration__detail"
>
<div
class="ecl-list-illustration__title-container"
>
<div
class="ecl-list-illustration__value"
>
3.2 million
</div>
<div
class="ecl-list-illustration__title"
>
List with illustration item 2
</div>
</div>
<div
class="ecl-list-illustration__description"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis. Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce sit amet sem dui. In nec lacinia eros.
</div>
</div>
</div>
<div
class="ecl-list-illustration__item"
>
<picture
class="ecl-picture ecl-list-illustration__picture ecl-list-illustration__picture--square"
>
<img
alt="Image alternative text"
class="ecl-list-illustration__image ecl-list-illustration__image--square ecl-list-illustration__image--m"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
/>
</picture>
<div
class="ecl-list-illustration__detail"
>
<div
class="ecl-list-illustration__title-container"
>
<div
class="ecl-list-illustration__value"
>
3.2 million
</div>
<div
class="ecl-list-illustration__title"
>
List with illustration item 3
</div>
</div>
<div
class="ecl-list-illustration__description"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis. Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce sit amet sem dui. In nec lacinia eros.
</div>
</div>
</div>
<div
class="ecl-list-illustration__item"
>
<picture
class="ecl-picture ecl-list-illustration__picture ecl-list-illustration__picture--square"
>
<img
alt="Image alternative text"
class="ecl-list-illustration__image ecl-list-illustration__image--square ecl-list-illustration__image--m"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
/>
</picture>
<div
class="ecl-list-illustration__detail"
>
<div
class="ecl-list-illustration__title-container"
>
<div
class="ecl-list-illustration__value"
>
3.2 million
</div>
<div
class="ecl-list-illustration__title"
>
List with illustration item 4
</div>
</div>
<div
class="ecl-list-illustration__description"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis. Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce sit amet sem dui. In nec lacinia eros.
</div>
</div>
</div>
</div>
</jest>
`;
4 changes: 3 additions & 1 deletion src/implementations/twig/components/list-illustration/list-illustration-item.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
{% set _media_size = media_size|default('m') %}
{% set _css_class = 'ecl-list-illustration__item' %}
{% set _image_class = 'ecl-list-illustration__image' %}
{% set _picture_classes = 'ecl-list-illustration__picture' %}
{% set _icon_size = '' %}
{% set _extra_attributes = '' %}

Expand All @@ -51,6 +52,7 @@
{% if _square %}
{% set _image_class = _image_class ~ ' ecl-list-illustration__image--square' %}
{% set _image_class = _image_class ~ ' ecl-list-illustration__image--' ~ _media_size %}
{% set _picture_classes = _picture_classes ~ ' ecl-list-illustration__picture--square' %}
{% endif %}

{% if _media_size == 'l' %}
Expand All @@ -65,7 +67,7 @@
{% if _picture.img is not empty %}
{% include '@ecl/picture/picture.html.twig' with {
picture: _picture,
extra_classes: "ecl-list-illustration__picture",
extra_classes: _picture_classes,
extra_image_classes: _image_class,
} only %}
{% endif %}
Expand Down
19 changes: 19 additions & 0 deletions src/implementations/twig/components/list-illustration/list-illustration.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,25 @@ describe('List with illustration', () => {
).resolves.toMatchSnapshot();
});

test('renders correctly when centered', () => {
expect.assertions(1);

return expect(
render({ ...dataListIllustrationImage, centered: true }),
).resolves.toMatchSnapshot();
});

test('renders correctly with squared images', () => {
expect.assertions(1);

const dataSquared = JSON.parse(JSON.stringify(dataListIllustrationImage));
dataSquared.items.forEach((item) => {
item.square = true;
});

return expect(render(dataSquared)).resolves.toMatchSnapshot();
});

test('renders correctly with extra class names', () => {
expect.assertions(1);

Expand Down

1 comment on commit 6e77184

@github-actions
Copy link

Choose a reason for hiding this comment

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

🚀 Deployed on https://v4-dev--europa-component-library.netlify.app

Please sign in to comment.