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(language-list): Revamp - FRONT-3678 #2581

Merged
merged 11 commits into from
Jul 11, 2022
Merged

feat(language-list): Revamp - FRONT-3678 #2581

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
ce6b8d6
feat(language-list): Updated non official languages, changing label f…
planctus Jul 4, 2022
fd4c5b0
feat(language-list): Styles for EC and EU - FRONT-3678
planctus Jul 5, 2022
7dcf5d1
feat(language-list): Updating snapshots - FRONT-3678
planctus Jul 5, 2022
639cb48
Merge branch 'v3.4.0-dev' into FRONT-3678-language-list
planctus Jul 6, 2022
13f86eb
feat(language-list): Finalising - FRONT-3678
planctus Jul 6, 2022
5df0360
Merge branch 'v3.4.0-dev' into FRONT-3678-language-list
planctus Jul 7, 2022
c0c4462
feat(language-list): Aligning the layout in the two variants - FRONT-…
planctus Jul 7, 2022
6f6b5e6
Merge branch 'FRONT-3678-language-list' of github.com:ec-europa/europ…
planctus Jul 7, 2022
5498392
feat(language-list): Mimicking the splash behavior - FRONT-3678
planctus Jul 8, 2022
c068add
Merge branch 'v3.4.0-dev' into FRONT-3678-language-list
planctus Jul 11, 2022
52be6ec
Merge branch 'v3.4.0-dev' into FRONT-3678-language-list
emeryro Jul 11, 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
651 changes: 513 additions & 138 deletions src/implementations/twig/components/language-list/__snapshots__/language-list.test.js.snap
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions src/implementations/twig/components/language-list/language-list-grid.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@
{# Print the result #}

<div class="ecl-row ecl-language-list__{{ section }}">
<div class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2">
<div class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-offset-m-1">
{{- category -}}
</div>
<div class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2">
<div class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1">
<ul class="ecl-language-list__list">
{% for _item in _column1 %}
{% set _item_class = 'ecl-language-list__item' %}
Expand All @@ -49,7 +49,7 @@
{% endfor %}
</ul>
</div>
<div class="ecl-language-list__column ecl-col-12 ecl-col-l-4">
<div class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5">
<ul class="ecl-language-list__list">
{% for _item in _column2 %}
{% set _item_class = 'ecl-language-list__item' %}
Expand Down
4 changes: 2 additions & 2 deletions src/implementations/twig/components/language-list/language-list.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
{% if _overlay %}
<div class="ecl-language-list__container ecl-container">
<div class="ecl-row">
<div class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2">
<div class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2">
{% include '@ecl/button/button.html.twig' with {
label: _close_label,
variant: "ghost",
Expand All @@ -89,7 +89,7 @@
} only %}
</div>
<div
class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-offset-m-1"
id="ecl-language-list__title"
>
{% include '@ecl/icon/icon.html.twig' with {
Expand Down
80 changes: 40 additions & 40 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 @@ -212,7 +212,7 @@ exports[`Site Header EC renders correctly 1`] = `
class="ecl-row"
>
<div
class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
>
<button
class="ecl-button ecl-button--ghost ecl-language-list__close-button"
Expand Down Expand Up @@ -242,7 +242,7 @@ exports[`Site Header EC renders correctly 1`] = `
</button>
</div>
<div
class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-offset-m-1"
id="ecl-language-list__title"
>
<svg
Expand All @@ -261,12 +261,12 @@ exports[`Site Header EC renders correctly 1`] = `
class="ecl-row ecl-language-list__eu"
>
<div
class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-offset-m-1"
>
EU official languages
</div>
<div
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
>
<ul
class="ecl-language-list__list"
Expand Down Expand Up @@ -443,7 +443,7 @@ exports[`Site Header EC renders correctly 1`] = `
</ul>
</div>
<div
class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
>
<ul
class="ecl-language-list__list"
Expand Down Expand Up @@ -611,12 +611,12 @@ exports[`Site Header EC renders correctly 1`] = `
class="ecl-row ecl-language-list__non-eu"
>
<div
class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-offset-m-1"
>
Non-EU languages
</div>
<div
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
>
<ul
class="ecl-language-list__list"
Expand Down Expand Up @@ -663,7 +663,7 @@ exports[`Site Header EC renders correctly 1`] = `
</ul>
</div>
<div
class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
>
<ul
class="ecl-language-list__list"
Expand Down Expand Up @@ -947,7 +947,7 @@ exports[`Site Header EC renders correctly when logged in 1`] = `
class="ecl-row"
>
<div
class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
>
<button
class="ecl-button ecl-button--ghost ecl-language-list__close-button"
Expand Down Expand Up @@ -977,7 +977,7 @@ exports[`Site Header EC renders correctly when logged in 1`] = `
</button>
</div>
<div
class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-offset-m-1"
id="ecl-language-list__title"
>
<svg
Expand All @@ -996,12 +996,12 @@ exports[`Site Header EC renders correctly when logged in 1`] = `
class="ecl-row ecl-language-list__eu"
>
<div
class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-offset-m-1"
>
EU official languages
</div>
<div
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
>
<ul
class="ecl-language-list__list"
Expand Down Expand Up @@ -1178,7 +1178,7 @@ exports[`Site Header EC renders correctly when logged in 1`] = `
</ul>
</div>
<div
class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
>
<ul
class="ecl-language-list__list"
Expand Down Expand Up @@ -1346,12 +1346,12 @@ exports[`Site Header EC renders correctly when logged in 1`] = `
class="ecl-row ecl-language-list__non-eu"
>
<div
class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-offset-m-1"
>
Non-EU languages
</div>
<div
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
>
<ul
class="ecl-language-list__list"
Expand Down Expand Up @@ -1398,7 +1398,7 @@ exports[`Site Header EC renders correctly when logged in 1`] = `
</ul>
</div>
<div
class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
>
<ul
class="ecl-language-list__list"
Expand Down Expand Up @@ -1652,7 +1652,7 @@ exports[`Site Header EC renders correctly with extra attributes 1`] = `
class="ecl-row"
>
<div
class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
>
<button
class="ecl-button ecl-button--ghost ecl-language-list__close-button"
Expand Down Expand Up @@ -1682,7 +1682,7 @@ exports[`Site Header EC renders correctly with extra attributes 1`] = `
</button>
</div>
<div
class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-offset-m-1"
id="ecl-language-list__title"
>
<svg
Expand All @@ -1701,12 +1701,12 @@ exports[`Site Header EC renders correctly with extra attributes 1`] = `
class="ecl-row ecl-language-list__eu"
>
<div
class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-offset-m-1"
>
EU official languages
</div>
<div
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
>
<ul
class="ecl-language-list__list"
Expand Down Expand Up @@ -1883,7 +1883,7 @@ exports[`Site Header EC renders correctly with extra attributes 1`] = `
</ul>
</div>
<div
class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
>
<ul
class="ecl-language-list__list"
Expand Down Expand Up @@ -2051,12 +2051,12 @@ exports[`Site Header EC renders correctly with extra attributes 1`] = `
class="ecl-row ecl-language-list__non-eu"
>
<div
class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-offset-m-1"
>
Non-EU languages
</div>
<div
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
>
<ul
class="ecl-language-list__list"
Expand Down Expand Up @@ -2103,7 +2103,7 @@ exports[`Site Header EC renders correctly with extra attributes 1`] = `
</ul>
</div>
<div
class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
>
<ul
class="ecl-language-list__list"
Expand Down Expand Up @@ -2355,7 +2355,7 @@ exports[`Site Header EC renders correctly with extra class names 1`] = `
class="ecl-row"
>
<div
class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
>
<button
class="ecl-button ecl-button--ghost ecl-language-list__close-button"
Expand Down Expand Up @@ -2385,7 +2385,7 @@ exports[`Site Header EC renders correctly with extra class names 1`] = `
</button>
</div>
<div
class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-offset-m-1"
id="ecl-language-list__title"
>
<svg
Expand All @@ -2404,12 +2404,12 @@ exports[`Site Header EC renders correctly with extra class names 1`] = `
class="ecl-row ecl-language-list__eu"
>
<div
class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-offset-m-1"
>
EU official languages
</div>
<div
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
>
<ul
class="ecl-language-list__list"
Expand Down Expand Up @@ -2586,7 +2586,7 @@ exports[`Site Header EC renders correctly with extra class names 1`] = `
</ul>
</div>
<div
class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
>
<ul
class="ecl-language-list__list"
Expand Down Expand Up @@ -2754,12 +2754,12 @@ exports[`Site Header EC renders correctly with extra class names 1`] = `
class="ecl-row ecl-language-list__non-eu"
>
<div
class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-offset-m-1"
>
Non-EU languages
</div>
<div
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
>
<ul
class="ecl-language-list__list"
Expand Down Expand Up @@ -2806,7 +2806,7 @@ exports[`Site Header EC renders correctly with extra class names 1`] = `
</ul>
</div>
<div
class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
>
<ul
class="ecl-language-list__list"
Expand Down Expand Up @@ -3050,7 +3050,7 @@ exports[`Site Header EU renders correctly 1`] = `
class="ecl-row"
>
<div
class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
>
<button
class="ecl-button ecl-button--ghost ecl-language-list__close-button"
Expand Down Expand Up @@ -3080,7 +3080,7 @@ exports[`Site Header EU renders correctly 1`] = `
</button>
</div>
<div
class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-offset-m-1"
id="ecl-language-list__title"
>
<svg
Expand All @@ -3099,12 +3099,12 @@ exports[`Site Header EU renders correctly 1`] = `
class="ecl-row ecl-language-list__eu"
>
<div
class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-offset-m-1"
>
EU official languages
</div>
<div
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
>
<ul
class="ecl-language-list__list"
Expand Down Expand Up @@ -3281,7 +3281,7 @@ exports[`Site Header EU renders correctly 1`] = `
</ul>
</div>
<div
class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
>
<ul
class="ecl-language-list__list"
Expand Down Expand Up @@ -3449,12 +3449,12 @@ exports[`Site Header EU renders correctly 1`] = `
class="ecl-row ecl-language-list__non-eu"
>
<div
class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-offset-m-1"
>
Non-EU languages
</div>
<div
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
>
<ul
class="ecl-language-list__list"
Expand Down Expand Up @@ -3501,7 +3501,7 @@ exports[`Site Header EU renders correctly 1`] = `
</ul>
</div>
<div
class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
>
<ul
class="ecl-language-list__list"
Expand Down
Loading