Skip to content
This repository has been archived by the owner on May 2, 2023. It is now read-only.

Commit

Permalink
feat(lists): Adding example with links, fixing templates - TWIG-135 (#…
Browse files Browse the repository at this point in the history 
…227)
  • Loading branch information
@planctus @papegaill
planctus authored and papegaill committed Nov 20, 2019
1 parent 4e4ec70 commit 0f9c99b
Show file tree
Hide file tree
Showing 5 changed files with 234 additions and 39 deletions.
2 changes: 1 addition & 1 deletion src/ec/packages/ec-component-ordered-list/ecl-ordered-list.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
{% for _item in _items %}
{% if _item is not empty %}
<li class="ecl-ordered-list__item">
{{- _item.label -}}
{{- _item.label|raw -}}
{% if _item.nested is not empty and _item.nested is iterable %}
{{- list.ordered_list(_item.nested) -}}
{% endif -%}
Expand Down
207 changes: 191 additions & 16 deletions src/ec/packages/ec-component-unordered-list/__snapshots__/unordered-list.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,48 +62,88 @@ exports[`EC - Unordered list Default renders correctly with divider variant 1`]
<li
class="ecl-unordered-list__item"
>
Jobs, growth and investment
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
Jobs, growth and investment
</a>
<ul
class="ecl-unordered-list"
>
<li
class="ecl-unordered-list__item"
>
Investment Plan for Europe: the Juncker Plan
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
Investment Plan for Europe: the Juncker Plan
</a>
</li>
<li
class="ecl-unordered-list__item"
>
European Semester
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
European Semester
</a>
</li>
</ul>
</li>
<li
class="ecl-unordered-list__item"
>
Digital single market
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
Digital single market
</a>
</li>
<li
class="ecl-unordered-list__item"
>
Energy union and climate
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
Energy union and climate
</a>
<ul
class="ecl-unordered-list"
>
<li
class="ecl-unordered-list__item"
>
Security, solidarity and trust
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
Security, solidarity and trust
</a>
</li>
<li
class="ecl-unordered-list__item"
>
A fully-integrated internal energy market
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
A fully-integrated internal energy market
</a>
</li>
<li
class="ecl-unordered-list__item"
>
Energy efficiency
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
Energy efficiency
</a>
</li>
</ul>
</li>
Expand Down Expand Up @@ -222,55 +262,190 @@ exports[`EC - Unordered list Default renders correctly with extra class names 1`
</ul>
`;

exports[`EC - Unordered list Default renders correctly with links 1`] = `
<ul
class="ecl-unordered-list"
>
<li
class="ecl-unordered-list__item"
>
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
Jobs, growth and investment
</a>
<ul
class="ecl-unordered-list"
>
<li
class="ecl-unordered-list__item"
>
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
Investment Plan for Europe: the Juncker Plan
</a>
</li>
<li
class="ecl-unordered-list__item"
>
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
European Semester
</a>
</li>
</ul>
</li>
<li
class="ecl-unordered-list__item"
>
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
Digital single market
</a>
</li>
<li
class="ecl-unordered-list__item"
>
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
Energy union and climate
</a>
<ul
class="ecl-unordered-list"
>
<li
class="ecl-unordered-list__item"
>
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
Security, solidarity and trust
</a>
</li>
<li
class="ecl-unordered-list__item"
>
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
A fully-integrated internal energy market
</a>
</li>
<li
class="ecl-unordered-list__item"
>
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
Energy efficiency
</a>
</li>
</ul>
</li>
</ul>
`;

exports[`EC - Unordered list Default renders correctly with no-bullet variant 1`] = `
<ul
class="ecl-unordered-list ecl-unordered-list--no-bullet"
>
<li
class="ecl-unordered-list__item"
>
Jobs, growth and investment
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
Jobs, growth and investment
</a>
<ul
class="ecl-unordered-list"
>
<li
class="ecl-unordered-list__item"
>
Investment Plan for Europe: the Juncker Plan
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
Investment Plan for Europe: the Juncker Plan
</a>
</li>
<li
class="ecl-unordered-list__item"
>
European Semester
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
European Semester
</a>
</li>
</ul>
</li>
<li
class="ecl-unordered-list__item"
>
Digital single market
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
Digital single market
</a>
</li>
<li
class="ecl-unordered-list__item"
>
Energy union and climate
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
Energy union and climate
</a>
<ul
class="ecl-unordered-list"
>
<li
class="ecl-unordered-list__item"
>
Security, solidarity and trust
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
Security, solidarity and trust
</a>
</li>
<li
class="ecl-unordered-list__item"
>
A fully-integrated internal energy market
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
A fully-integrated internal energy market
</a>
</li>
<li
class="ecl-unordered-list__item"
>
Energy efficiency
<a
class="ecl-link ecl-link--standalone"
href="/example"
>
Energy efficiency
</a>
</li>
</ul>
</li>
Expand Down
2 changes: 1 addition & 1 deletion src/ec/packages/ec-component-unordered-list/ecl-unordered-list.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
{% for _item in _items %}
{% if _item is not empty %}
<li class="ecl-unordered-list__item">
{{- _item.label -}}
{{- _item.label|raw -}}
{% if _item.nested is not empty and _item.nested is iterable %}
{{- list.unordered_list(_item.nested) -}}
{% endif -%}
Expand Down
43 changes: 31 additions & 12 deletions src/ec/packages/ec-component-unordered-list/unordered-list.story.js
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,49 @@
import { storiesOf } from '@storybook/html';
import { withNotes } from '@ecl-twig/storybook-addon-notes';
import { withKnobs, select } from '@storybook/addon-knobs';
import withCode from '@ecl-twig/storybook-addon-code';

import data from '@ecl/ec-specs-list/demo/data--text';
import dataLink from '@ecl/ec-specs-list/demo/data--link';
import dataLinkDivider from '@ecl/ec-specs-list/demo/data--link-divider';
import dataLinkNoBullet from '@ecl/ec-specs-list/demo/data--link-no-bullet';

import docs from './README.md';
import unorderedList from './ecl-unordered-list.html.twig';

const options = {
default: '',
no_bullet: 'no-bullet',
divider: 'divider',
};

storiesOf('Components/List/Unordered list', module)
.addDecorator(withNotes)
.addDecorator(withCode)
.addDecorator(withKnobs)
.add(
'default',
() => {
return unorderedList({
...data,
variant: select('Variant', options, ''),
});
return unorderedList(data);
},
{
notes: { markdown: docs },
}
)
.add(
'with divider',
() => {
return unorderedList(dataLinkDivider);
},
{
notes: { markdown: docs },
}
)
.add(
'with links',
() => {
return unorderedList(dataLink);
},
{
notes: { markdown: docs },
}
)
.add(
'no bullet',
() => {
return unorderedList(dataLinkNoBullet);
},
{
notes: { markdown: docs },
Expand Down
Loading

0 comments on commit 0f9c99b

Please sign in to comment.