diff --git a/src/ec/packages/ec-component-ordered-list/ecl-ordered-list.html.twig b/src/ec/packages/ec-component-ordered-list/ecl-ordered-list.html.twig
index 3799282d4..df54076de 100644
--- a/src/ec/packages/ec-component-ordered-list/ecl-ordered-list.html.twig
+++ b/src/ec/packages/ec-component-ordered-list/ecl-ordered-list.html.twig
@@ -50,7 +50,7 @@
{% for _item in _items %}
{% if _item is not empty %}
- {{- _item.label -}}
+ {{- _item.label|raw -}}
{% if _item.nested is not empty and _item.nested is iterable %}
{{- list.ordered_list(_item.nested) -}}
{% endif -%}
diff --git a/src/ec/packages/ec-component-unordered-list/__snapshots__/unordered-list.test.js.snap b/src/ec/packages/ec-component-unordered-list/__snapshots__/unordered-list.test.js.snap
index 3c8d141fb..34b28166b 100644
--- a/src/ec/packages/ec-component-unordered-list/__snapshots__/unordered-list.test.js.snap
+++ b/src/ec/packages/ec-component-unordered-list/__snapshots__/unordered-list.test.js.snap
@@ -62,48 +62,88 @@ exports[`EC - Unordered list Default renders correctly with divider variant 1`]
- Jobs, growth and investment
+
+ Jobs, growth and investment
+
- Digital single market
+
+ Digital single market
+
- Energy union and climate
+
+ Energy union and climate
+
@@ -222,6 +262,101 @@ exports[`EC - Unordered list Default renders correctly with extra class names 1`
`;
+exports[`EC - Unordered list Default renders correctly with links 1`] = `
+
+`;
+
exports[`EC - Unordered list Default renders correctly with no-bullet variant 1`] = `
- Jobs, growth and investment
+
+ Jobs, growth and investment
+
-
- Digital single market
+
+ Digital single market
+
-
- Energy union and climate
+
+ Energy union and climate
+
diff --git a/src/ec/packages/ec-component-unordered-list/ecl-unordered-list.html.twig b/src/ec/packages/ec-component-unordered-list/ecl-unordered-list.html.twig
index 1a44126ac..f6f6396dd 100644
--- a/src/ec/packages/ec-component-unordered-list/ecl-unordered-list.html.twig
+++ b/src/ec/packages/ec-component-unordered-list/ecl-unordered-list.html.twig
@@ -53,7 +53,7 @@
{% for _item in _items %}
{% if _item is not empty %}
-
- {{- _item.label -}}
+ {{- _item.label|raw -}}
{% if _item.nested is not empty and _item.nested is iterable %}
{{- list.unordered_list(_item.nested) -}}
{% endif -%}
diff --git a/src/ec/packages/ec-component-unordered-list/unordered-list.story.js b/src/ec/packages/ec-component-unordered-list/unordered-list.story.js
index ed93397f8..d4baa9146 100644
--- a/src/ec/packages/ec-component-unordered-list/unordered-list.story.js
+++ b/src/ec/packages/ec-component-unordered-list/unordered-list.story.js
@@ -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 },
diff --git a/src/ec/packages/ec-component-unordered-list/unordered-list.test.js b/src/ec/packages/ec-component-unordered-list/unordered-list.test.js
index fe901a7be..c3f0677b4 100644
--- a/src/ec/packages/ec-component-unordered-list/unordered-list.test.js
+++ b/src/ec/packages/ec-component-unordered-list/unordered-list.test.js
@@ -1,5 +1,8 @@
import { merge, renderTwigFileAsNode } from '@ecl-twig/test-utils';
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';
describe('EC - Unordered list', () => {
const template =
@@ -26,21 +29,19 @@ describe('EC - Unordered list', () => {
test('renders correctly with no-bullet variant', () => {
expect.assertions(1);
- const noBullet = merge(data, {
- variant: 'no-bullet',
- });
+ return expect(render(dataLinkNoBullet)).resolves.toMatchSnapshot();
+ });
+
+ test('renders correctly with links', () => {
+ expect.assertions(1);
- return expect(render(noBullet)).resolves.toMatchSnapshot();
+ return expect(render(dataLink)).resolves.toMatchSnapshot();
});
test('renders correctly with divider variant', () => {
expect.assertions(1);
- const divider = merge(data, {
- variant: 'divider',
- });
-
- return expect(render(divider)).resolves.toMatchSnapshot();
+ return expect(render(dataLinkDivider)).resolves.toMatchSnapshot();
});
test('renders correctly with extra attributes', () => {