Skip to content

Commit

Permalink
feat(lists): Styles - FRONT-4417 (#3389)
Browse files Browse the repository at this point in the history 
* feat(lists): Styles - FRONT-4417

* feat(lists): Style tweaks - FRONT-4417

* feat(lists): Fixing styles for ordered and unordered list in EC and EU - FRONT-4417

* feat(lists): fixing divider color in EU - FRONT-4417

* feat(lists): Description list revisited - FRONT-4417

* feat(lists): Using standard font in EU description list - FRONT-1417

* feat(lists): Fixing font color in EU description list - FRONT-4417

* feat(lists): Fixing text color in lists for EU - FRONT-4417

* feat(lists): Only for the desing review, to be deleted - FRONT-4417

* feat(lists): Removing left padding from ordered and unordered lists - FRONT-4417

* feat(lists): Small adaptations to the print css - FRONT-4417

* feat(lists): Using frame for descriptions lists in the showcase - FRONT-4417

* feat(lists): Aligning everything on the marker - FRONT-4417

* feat(lists): Using the same data for the variants - FRONT-4417

* feat(lists): Setting a link in the first level of unstyled lists - FRONT-4417

* feat(lists): Aligning lists with grid content in EU - FRONT-4417
  • Loading branch information
@planctus
planctus authored Jun 25, 2024
1 parent 5cc7607 commit cf22f4e
Show file tree
Hide file tree
Showing 16 changed files with 124 additions and 107 deletions.
35 changes: 10 additions & 25 deletions src/implementations/twig/components/ordered-list/__snapshots__/ordered-list.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,7 @@ exports[`Ordered list Default renders correctly with divider variant 1`] = `
<li
class="ecl-ordered-list__item"
>
<a
class="ecl-link"
href="/example"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
<ol
class="ecl-ordered-list"
>
Expand Down Expand Up @@ -99,12 +94,7 @@ exports[`Ordered list Default renders correctly with divider variant 1`] = `
<li
class="ecl-ordered-list__item"
>
<a
class="ecl-link"
href="/example"
>
Nam dignissim condimentum pulvinar. Nullam volutpat tortor vel turpis iaculis feugiat. Vivamus eget turpis a est lacinia blandit
</a>
Nam dignissim condimentum pulvinar. Nullam volutpat tortor vel turpis iaculis feugiat. Vivamus eget turpis a est lacinia blandit
</li>
<li
class="ecl-ordered-list__item"
Expand All @@ -131,22 +121,12 @@ exports[`Ordered list Default renders correctly with divider variant 1`] = `
<li
class="ecl-ordered-list__item"
>
<a
class="ecl-link"
href="/example"
>
Nulla facilisi
</a>
Nulla facilisi
</li>
<li
class="ecl-ordered-list__item"
>
<a
class="ecl-link"
href="/example"
>
Phasellus in metus et libero scelerisque sagittis sollicitudin at lectus
</a>
Phasellus in metus et libero scelerisque sagittis sollicitudin at lectus
</li>
</ol>
</li>
Expand Down Expand Up @@ -312,7 +292,12 @@ exports[`Ordered list Default renders correctly with no-marker variant 1`] = `
<li
class="ecl-ordered-list__item"
>
Vestibulum sed accumsan ipsum
<a
class="ecl-link"
href="/example"
>
Vestibulum sed accumsan ipsum
</a>
<ol
class="ecl-ordered-list"
>
Expand Down
35 changes: 10 additions & 25 deletions src/implementations/twig/components/unordered-list/__snapshots__/unordered-list.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,7 @@ exports[`Unordered list Default renders correctly with divider variant 1`] = `
<li
class="ecl-unordered-list__item"
>
<a
class="ecl-link"
href="/example"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
<ul
class="ecl-unordered-list"
>
Expand Down Expand Up @@ -99,12 +94,7 @@ exports[`Unordered list Default renders correctly with divider variant 1`] = `
<li
class="ecl-unordered-list__item"
>
<a
class="ecl-link"
href="/example"
>
Nam dignissim condimentum pulvinar. Nullam volutpat tortor vel turpis iaculis feugiat. Vivamus eget turpis a est lacinia blandit
</a>
Nam dignissim condimentum pulvinar. Nullam volutpat tortor vel turpis iaculis feugiat. Vivamus eget turpis a est lacinia blandit
</li>
<li
class="ecl-unordered-list__item"
Expand All @@ -131,22 +121,12 @@ exports[`Unordered list Default renders correctly with divider variant 1`] = `
<li
class="ecl-unordered-list__item"
>
<a
class="ecl-link"
href="/example"
>
Nulla facilisi
</a>
Nulla facilisi
</li>
<li
class="ecl-unordered-list__item"
>
<a
class="ecl-link"
href="/example"
>
Phasellus in metus et libero scelerisque sagittis sollicitudin at lectus
</a>
Phasellus in metus et libero scelerisque sagittis sollicitudin at lectus
</li>
</ul>
</li>
Expand Down Expand Up @@ -312,7 +292,12 @@ exports[`Unordered list Default renders correctly with no-bullet variant 1`] = `
<li
class="ecl-unordered-list__item"
>
Vestibulum sed accumsan ipsum
<a
class="ecl-link"
href="/example"
>
Vestibulum sed accumsan ipsum
</a>
<ul
class="ecl-unordered-list"
>
Expand Down
16 changes: 9 additions & 7 deletions src/implementations/vanilla/components/description-list/description-list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ $description-list: null !default;
color: map.get($description-list, 'definition-color');
font: map.get($description-list, 'definition-font');
margin-inline-start: 0;
margin-top: var(--s-2xs);
max-width: var(--max-w);
}

Expand All @@ -59,7 +58,7 @@ $description-list: null !default;
flex-direction: column;

.ecl-description-list__see_more {
margin-top: var(--s-m);
margin-top: var(--s-xs);
}
}

Expand All @@ -80,7 +79,6 @@ $description-list: null !default;
// Inline links
.ecl-description-list__definition--inline {
display: inline-block;
margin-bottom: calc(-1 * var(--s-xs));
}

// stylelint-disable-next-line no-descending-specificity
Expand Down Expand Up @@ -109,6 +107,10 @@ $description-list: null !default;
.ecl-description-list__definition--tag {
display: inline-block;
margin-bottom: calc(-1 * var(--s-xs));

.ecl-description-list__see_more {
margin-top: 0;
}
}

// stylelint-disable-next-line no-descending-specificity
Expand Down Expand Up @@ -185,9 +187,9 @@ $description-list: null !default;
var(--max-w)
);

.ecl-description-list__term,
%ecl-description-list__term {
margin-top: var(--s-xl);
.ecl-description-list__term {
margin-bottom: 0;
margin-top: var(--s-l);
}

.ecl-description-list__term:first-of-type {
Expand All @@ -197,7 +199,7 @@ $description-list: null !default;
.ecl-description-list__definition,
%ecl-description-list__definition {
align-items: flex-start;
margin-top: var(--s-xl);
margin-top: var(--s-l);
overflow-wrap: break-word;
}

Expand Down
24 changes: 17 additions & 7 deletions src/implementations/vanilla/components/ordered-list/ordered-list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,22 @@ $list: null !default;
list-style-position: outside;
list-style-type: map.get($list, 'ordered', 'marker');
margin: 0;
padding-inline-start: var(--s-3xl);
padding-inline-start: map.get($list, 'ordered', 'padding-start');
}

.ecl-ordered-list .ecl-ordered-list,
%ecl-ordered-list--nested {
list-style-type: map.get($list, 'ordered', 'sublist-marker');
margin-top: var(--s-xs);
padding-inline-start: calc(var(--s-3xl) - var(--s-l) - var(--s-2xs));
padding-inline-start: map.get($list, 'ordered', 'sublist-padding');
}

.ecl-ordered-list__item,
%ecl-ordered-list__item {
margin-inline-start: var(--s-l);
margin-inline-start: map.get($list, 'ordered', 'item-margin');
margin-top: var(--s-m);
max-width: var(--max-w);
padding-inline-start: var(--s-2xs);
padding-inline-start: 0;

&:first-of-type {
margin-top: var(--s-xs);
Expand All @@ -40,6 +40,10 @@ $list: null !default;
&:last-of-type {
margin-bottom: var(--s-xs);
}

.ecl-link {
text-decoration: none;
}
}

// No marker
Expand All @@ -49,9 +53,10 @@ $list: null !default;

.ecl-ordered-list {
list-style-type: none;
padding-inline-start: map.get($list, 'ordered', 'unstyled-sublist-padding');
}

> .ecl-ordered-list__item {
.ecl-ordered-list__item {
margin-inline-start: 0;
padding-inline-start: 0;
}
Expand All @@ -62,19 +67,24 @@ $list: null !default;
list-style: none;
padding-inline-start: 0;

.ecl-ordered-list__item {
margin-inline-start: 0;
padding-inline-start: 0;
}

> .ecl-ordered-list__item {
border-bottom: 1px solid map.get($list, 'divider-color');
margin-bottom: var(--s-m);
margin-inline-start: 0;
padding-bottom: var(--s-m);
padding-inline-start: 0;

.ecl-link {
padding: 0;
}
}

.ecl-ordered-list {
padding-inline-start: map.get($list, 'ordered', 'unstyled-sublist-padding');

.ecl-ordered-list__item {
list-style-type: none;
}
Expand Down
3 changes: 3 additions & 0 deletions src/implementations/vanilla/components/unordered-list/unordered-list-print.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ $list: null !default;
%ecl-unordered-list {
color: map.get($list, 'text-color');
font-family: map.get($theme, 'font-family-print', 'default');
list-style-position: inside;
margin: 0;
padding: 0;
}

.ecl-unordered-list__item,
Expand Down Expand Up @@ -55,4 +57,5 @@ $list: null !default;
.ecl-unordered-list .ecl-unordered-list,
%ecl-unordered-list--nested {
margin-top: map.get($theme, 'spacing-print', 's');
padding-inline-start: map.get($theme, 'spacing-print', 'l');
}
51 changes: 30 additions & 21 deletions src/implementations/vanilla/components/unordered-list/unordered-list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,37 +16,41 @@ $list: null !default;
list-style-position: outside;
list-style-type: map.get($list, 'unordered', 'marker');
margin: 0;
padding-bottom: var(--s-2xs);
padding-inline-start: var(--s-3xl);
padding-bottom: var(--s-xs);
padding-inline-start: map.get($list, 'unordered', 'padding-start');
}

.ecl-unordered-list__item,
%ecl-unordered-list__item {
margin-inline-start: var(--s-m);
padding-bottom: var(--s-2xs);
padding-top: var(--s-2xs);
margin-inline-start: map.get($list, 'unordered', 'item-margin');
padding-bottom: var(--s-xs);
padding-inline-start: map.get($list, 'unordered', 'item-padding');
padding-top: var(--s-xs);
max-width: var(--max-w);
padding-inline-start: var(--s-xs);

&:first-of-type {
padding-top: var(--s-2xs);
padding-top: var(--s-xs);
}

&:last-of-type {
padding-bottom: 0;
}

.ecl-link {
text-decoration: none;
}
}

.ecl-unordered-list .ecl-unordered-list,
.ecl-unordered-list .ecl-ordered-list,
%ecl-unordered-list--nested {
list-style-type: map.get($list, 'unordered', 'sublist-marker');
padding-bottom: 0;
padding-top: var(--s-2xs);
padding-inline-start: calc(var(--s-3xl) - var(--s-m) - var(--s-xs));
padding-top: var(--s-xs);
padding-inline-start: map.get($list, 'unordered', 'sublist-padding');

.ecl-unordered-list__item {
padding-top: var(--s-2xs);
padding-top: var(--s-xs);
padding-inline-start: 0;
}
}
Expand All @@ -58,15 +62,14 @@ $list: null !default;

.ecl-unordered-list {
list-style-type: none;
padding-inline-start: var(--s-m);

.ecl-unordered-list__item {
padding-inline-start: var(--s-xs);
}
padding-inline-start: map.get(
$list,
'unordered',
'unstyled-sublist-padding'
);
}

// stylelint-disable-next-line no-descending-specificity
> .ecl-unordered-list__item {
.ecl-unordered-list__item {
margin-inline-start: 0;
padding-inline-start: 0;
}
Expand All @@ -77,25 +80,31 @@ $list: null !default;
list-style: none;
padding-inline-start: 0;

.ecl-unordered-list__item {
margin-inline-start: 0;
padding-inline-start: 0;
}

// stylelint-disable-next-line no-descending-specificity
> .ecl-unordered-list__item {
border-bottom: 1px solid map.get($list, 'divider-color');
margin-bottom: var(--s-m);
margin-inline-start: 0;
padding-bottom: var(--s-m);
padding-inline-start: 0;

.ecl-link {
padding: 0;
}
}

.ecl-unordered-list {
padding-inline-start: var(--s-m);
padding-inline-start: map.get(
$list,
'unordered',
'unstyled-sublist-padding'
);

.ecl-unordered-list__item {
list-style-type: none;
padding-inline-start: var(--s-xs);
}
}
}
Loading

1 comment on commit cf22f4e

@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.