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

feat(site-header): Using picture, keeping data structure unchanged - FRONT-3882 #2810

Merged
merged 4 commits into from
Mar 28, 2023
Merged

feat(site-header): Using picture, keeping data structure unchanged - FRONT-3882 #2810

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7c07d3e
feat(site-header): Using picture, keeping data structure unchanged - …
planctus Mar 23, 2023
68ee181
feat(site-header): Using different approach for the picture - FRONT-3882
planctus Mar 23, 2023
e5e59ec
Merge branch 'v3.8.0-dev' into FRONT-3882-Picture-in-site-header
planctus Mar 28, 2023
e92b51d
feat(site-header): Backward compatibility in EU, removing unneded sou…
planctus Mar 28, 2023
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
84 changes: 54 additions & 30 deletions src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,16 @@ exports[`Site Header EC renders correctly 1`] = `
class="ecl-link ecl-link--standalone ecl-site-header__logo-link"
href="/example"
>
<img
alt="European Commission logo"
class="ecl-site-header__logo-image ecl-site-header__logo-image-desktop"
src="/logo-ec--en.svg"
<picture
class="ecl-picture ecl-site-header__picture"
title="European Commission"
/>
>
<img
alt="European Commission logo"
class="ecl-site-header__logo-image ecl-site-header__logo-image-desktop"
src="/logo-ec--en.svg"
/>
</picture>
</a>
<div
class="ecl-site-header__action"
Expand Down Expand Up @@ -1188,12 +1192,16 @@ exports[`Site Header EC renders correctly when logged in 1`] = `
class="ecl-link ecl-link--standalone ecl-site-header__logo-link"
href="/example"
>
<img
alt="European Commission logo"
class="ecl-site-header__logo-image ecl-site-header__logo-image-desktop"
src="/logo-ec--en.svg"
<picture
class="ecl-picture ecl-site-header__picture"
title="European Commission"
/>
>
<img
alt="European Commission logo"
class="ecl-site-header__logo-image ecl-site-header__logo-image-desktop"
src="/logo-ec--en.svg"
/>
</picture>
</a>
<div
class="ecl-site-header__action"
Expand Down Expand Up @@ -2389,12 +2397,16 @@ exports[`Site Header EC renders correctly with extra attributes 1`] = `
class="ecl-link ecl-link--standalone ecl-site-header__logo-link"
href="/example"
>
<img
alt="European Commission logo"
class="ecl-site-header__logo-image ecl-site-header__logo-image-desktop"
src="/logo-ec--en.svg"
<picture
class="ecl-picture ecl-site-header__picture"
title="European Commission"
/>
>
<img
alt="European Commission logo"
class="ecl-site-header__logo-image ecl-site-header__logo-image-desktop"
src="/logo-ec--en.svg"
/>
</picture>
</a>
<div
class="ecl-site-header__action"
Expand Down Expand Up @@ -3556,12 +3568,16 @@ exports[`Site Header EC renders correctly with extra class names 1`] = `
class="ecl-link ecl-link--standalone ecl-site-header__logo-link"
href="/example"
>
<img
alt="European Commission logo"
class="ecl-site-header__logo-image ecl-site-header__logo-image-desktop"
src="/logo-ec--en.svg"
<picture
class="ecl-picture ecl-site-header__picture"
title="European Commission"
/>
>
<img
alt="European Commission logo"
class="ecl-site-header__logo-image ecl-site-header__logo-image-desktop"
src="/logo-ec--en.svg"
/>
</picture>
</a>
<div
class="ecl-site-header__action"
Expand Down Expand Up @@ -4723,18 +4739,26 @@ exports[`Site Header EU renders correctly 1`] = `
class="ecl-link ecl-link--standalone ecl-site-header__logo-link"
href="/example"
>
<img
alt="European Union flag"
class="ecl-site-header__logo-image ecl-site-header__logo-image-mobile"
src="/condensed-version/positive/logo-eu--en.svg"
<picture
class="ecl-picture ecl-site-header__picture"
title="European Union"
/>
<img
alt="European Union flag"
class="ecl-site-header__logo-image ecl-site-header__logo-image-desktop"
src="/standard-version/positive/logo-eu--en.svg"
>
<img
alt="European Union flag"
class="ecl-site-header__logo-image ecl-site-header__logo-image-mobile"
src="/condensed-version/positive/logo-eu--en.svg"
/>
</picture>
<picture
class="ecl-picture ecl-site-header__picture"
title="European Union"
/>
>
<img
alt="European Union flag"
class="ecl-site-header__logo-image ecl-site-header__logo-image-desktop"
src="/standard-version/positive/logo-eu--en.svg"
/>
</picture>
</a>
<div
class="ecl-site-header__action"
Expand Down
44 changes: 27 additions & 17 deletions src/implementations/twig/components/site-header/site-header.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,25 +202,35 @@
<div class="ecl-site-header__header">
<div class="ecl-site-header__container ecl-container">
<div class="ecl-site-header__top" data-ecl-site-header-top>
{% if _logo is not empty %}
{# Logo #}
{% if _logo is not empty %}
{% set _label %}
{% if _logo.src_mobile is defined and _logo.src_mobile is not empty %}
<img
alt="{{ _logo.alt }}"
title="{{ _logo.title }}"
class="ecl-site-header__logo-image ecl-site-header__logo-image-mobile"
src="{{ _logo.src_mobile }}"
/>
{% endif %}
{% if _logo.src_desktop is defined and _logo.src_desktop is not empty %}
<img
alt="{{ _logo.alt }}"
title="{{ _logo.title }}"
class="ecl-site-header__logo-image ecl-site-header__logo-image-desktop"
src="{{ _logo.src_desktop }}"
/>
{% endif %}
{% if _logo.src_mobile is defined and _logo.src_mobile is not empty %}
{% include '@ecl/picture/picture.html.twig' with {
picture: {
img: {
src: _logo.src_mobile,
alt: _logo.alt,
},
},
extra_classes: "ecl-site-header__picture",
extra_image_classes: 'ecl-site-header__logo-image ecl-site-header__logo-image-mobile',
extra_attributes: [{ name: 'title', value: _logo.title }],
} only %}
{% endif %}
{% if _logo.src_desktop is defined and _logo.src_desktop is not empty %}
{% include '@ecl/picture/picture.html.twig' with {
picture: {
img: {
src: _logo.src_desktop,
alt: _logo.alt,
},
},
extra_attributes: [{ name: 'title', value: _logo.title }],
extra_classes: "ecl-site-header__picture",
extra_image_classes: 'ecl-site-header__logo-image ecl-site-header__logo-image-desktop',
} only %}
{% endif %}
{% endset %}
{% include '@ecl/link/link.html.twig' with {
link: {
Expand Down