diff --git a/src/ec/packages/ec-component-description-list/README.md b/src/ec/packages/ec-component-description-list/README.md index 44f158ff7..8fcf970a3 100644 --- a/src/ec/packages/ec-component-description-list/README.md +++ b/src/ec/packages/ec-component-description-list/README.md @@ -13,6 +13,7 @@ npm install --save @ecl-twig/ec-component-description-list - "items" (array) (default: []) - "term" (string or array of string) - "definition" (string or array of string) +- "variant" (optional) (string) (default: '') Modifier of the component - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) - "extra_attributes" (optional) (array) (default: []) Extra attributes - "name" (string) Attribute name, eg. 'data-test' @@ -23,7 +24,8 @@ npm install --save @ecl-twig/ec-component-description-list ```twig {% include 'path/to/description-list.html.twig' with { - items: [ + variant: 'horizontal', + items: [ { term: 'European Commission', definition: diff --git a/src/ec/packages/ec-component-description-list/__snapshots__/description-list.test.js.snap b/src/ec/packages/ec-component-description-list/__snapshots__/description-list.test.js.snap index f10ff0f68..3315fb917 100644 --- a/src/ec/packages/ec-component-description-list/__snapshots__/description-list.test.js.snap +++ b/src/ec/packages/ec-component-description-list/__snapshots__/description-list.test.js.snap @@ -47,6 +47,43 @@ exports[`EC - Description list Default renders correctly 1`] = ` `; +exports[`EC - Description list Default renders correctly in the horizontal variant 1`] = ` +
+
+ European Commission +
+
+ The executive body of the European Union formed in 1967, which initiates action in the EU and mediates between member governments. Former name (until 1993): Commission of the European Communities +
+
+ European Union +
+
+ An association of European nations formed in 1993 for the purpose of achieving political and economic integration. +
+
+ Citizen +
+
+ A native or naturalized member of a state or nation who owes allegiance to its government and is entitled to its protection +
+
+`; + exports[`EC - Description list Default renders correctly with extra attributes 1`] = `
{% for _item in _items %} {% if _item.term is not empty %} diff --git a/src/ec/packages/ec-component-description-list/description-list.story.js b/src/ec/packages/ec-component-description-list/description-list.story.js index 0eeae34ac..ac8aba379 100644 --- a/src/ec/packages/ec-component-description-list/description-list.story.js +++ b/src/ec/packages/ec-component-description-list/description-list.story.js @@ -1,19 +1,43 @@ 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--description'; - +import data from '@ecl/ec-specs-description-list/demo/data'; +import dataHorizontal from '@ecl/ec-specs-description-list/demo/data--horizontal'; import docs from './README.md'; import descriptionList from './description-list.html.twig'; +const options = { + vertical: '', + horizontal: 'horizontal', +}; + storiesOf('Components/List/Description list', module) .addDecorator(withNotes) .addDecorator(withCode) + .addDecorator(withKnobs) + .add( + 'vertical', + () => { + const defaultValue = options.vertical; + return descriptionList({ + ...data, + variant: select('Variant', options, defaultValue), + }); + }, + { + notes: { markdown: docs }, + } + ) .add( - 'default', + 'horizontal', () => { - return descriptionList(data); + const defaultValue = options.horizontal; + return descriptionList({ + ...dataHorizontal, + variant: select('Variant', options, defaultValue), + }); }, { notes: { markdown: docs }, diff --git a/src/ec/packages/ec-component-description-list/description-list.test.js b/src/ec/packages/ec-component-description-list/description-list.test.js index 1b35fa5fa..1b2a80c14 100644 --- a/src/ec/packages/ec-component-description-list/description-list.test.js +++ b/src/ec/packages/ec-component-description-list/description-list.test.js @@ -1,6 +1,7 @@ import path from 'path'; import { merge, renderTwigFileAsNode } from '@ecl-twig/test-utils'; -import data from '@ecl/ec-specs-list/demo/data--description'; +import data from '@ecl/ec-specs-description-list/demo/data'; +import dataHorizontal from '@ecl/ec-specs-description-list/demo/data--horizontal'; describe('EC - Description list', () => { const template = path.resolve(__dirname, './description-list.html.twig'); @@ -13,6 +14,16 @@ describe('EC - Description list', () => { return expect(render(data)).resolves.toMatchSnapshot(); }); + test('renders correctly in the horizontal variant', () => { + expect.assertions(1); + + const horizontal = merge(dataHorizontal, { + variant: 'horizontal', + }); + + return expect(render(horizontal)).resolves.toMatchSnapshot(); + }); + test('renders correctly with extra class names', () => { expect.assertions(1); diff --git a/src/ec/packages/ec-component-description-list/package.json b/src/ec/packages/ec-component-description-list/package.json index 1a7dc109a..dd64eae3f 100644 --- a/src/ec/packages/ec-component-description-list/package.json +++ b/src/ec/packages/ec-component-description-list/package.json @@ -2,14 +2,14 @@ "name": "@ecl-twig/ec-component-description-list", "author": "European Commission", "license": "EUPL-1.1", - "version": "2.9.1", + "version": "2.11.0", "description": "ECL Twig - EC Description list", "publishConfig": { "access": "public" }, "devDependencies": { - "@ecl/ec-component-list": "2.11.0", - "@ecl/ec-specs-list": "2.11.0" + "@ecl/ec-component-description-list": "2.11.0", + "@ecl/ec-specs-description-list": "2.11.0" }, "repository": { "type": "git", diff --git a/yarn.lock b/yarn.lock index 68951b6dd..9e1d48c88 100644 --- a/yarn.lock +++ b/yarn.lock @@ -746,6 +746,11 @@ exec-sh "^0.3.2" minimist "^1.2.0" +"@ecl-twig/ec-component-description-list@2.9.1": + version "2.9.1" + resolved "https://registry.yarnpkg.com/@ecl-twig/ec-component-description-list/-/ec-component-description-list-2.9.1.tgz#c474a01930951481642b5c28a08785a3599b202c" + integrity sha512-QV4O67fEyZHqmh0Dyac46N5BdqX1IGew4ZSW1rK6471M804tr2CBkfVZFoDroQ9hoM4wkI4z03vSYOmwlaGFTQ== + "@ecl-twig/storybook-addon-code@file:utils/storybook-addon-code": version "0.0.0-dev-only" @@ -809,6 +814,13 @@ dependencies: "@ecl/ec-base" "^2.11.0" +"@ecl/ec-component-description-list@2.11.0": + version "2.11.0" + resolved "https://registry.yarnpkg.com/@ecl/ec-component-description-list/-/ec-component-description-list-2.11.0.tgz#72da0022fc80c8258615bdd2d196341288763776" + integrity sha512-V8CboDXTfMRxW7TV47/IKMwbJFyIpD2/Js95WbzgP4Ybz3BP9kNk6OqA5zWwipkl7ZAlr2i+cUdRssHBCenJvA== + dependencies: + "@ecl/ec-base" "^2.11.0" + "@ecl/ec-component-expandable@2.11.0": version "2.11.0" resolved "https://registry.yarnpkg.com/@ecl/ec-component-expandable/-/ec-component-expandable-2.11.0.tgz#339e4fdb1d9392cbd24a873d741272b460b0c07f" @@ -1134,6 +1146,11 @@ resolved "https://registry.yarnpkg.com/@ecl/ec-specs-date-block/-/ec-specs-date-block-2.11.0.tgz#4885ca7eb7dca3a2686dedb0fe6a767c0f8ec7b5" integrity sha512-0wPAg6gtjZROB10LAM0X6NRqFhCiT3wXBRnQOuXFEfLpixRJEfUu+Uc/mFQGrhn+6NGgw4Vr4aLRHILxzeS7Tg== +"@ecl/ec-specs-description-list@2.11.0": + version "2.11.0" + resolved "https://registry.yarnpkg.com/@ecl/ec-specs-description-list/-/ec-specs-description-list-2.11.0.tgz#cec85db7a50e42b64db40be09f221c13ddaba33d" + integrity sha512-ZiX2HU4iw+TM1nXiR6TMn20aLJzpDzI2UJepcUnLNSMHyuUepRqjFqCLWsdhgBxIGikNtgrC+o7Bolt8sA+Ssw== + "@ecl/ec-specs-expandable@2.11.0": version "2.11.0" resolved "https://registry.yarnpkg.com/@ecl/ec-specs-expandable/-/ec-specs-expandable-2.11.0.tgz#4129bc9fc286c60cc9f214178283859f19d37b49"