feat(description-list): horizontal variant - TWIG-39 (#139)

* feat(description-list): Creating horizontal variant for the component - TWIG-39

* feat(description-list): changing data source in the test

* TWIG-39 - updating yarn lock

* feat(description-list) : changes post review - TWIG-39

* feat(description-list): Fixing test - TWIG-39

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
 <!-- prettier-ignore -->
 ```twig
 {% include 'path/to/description-list.html.twig' with { 
-  items: [ 
+  variant: 'horizontal',
+  items: [
     { 
       term: 'European Commission', 
       definition: 

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`] = `
 </dl>
 `;
 
+exports[`EC - Description list Default renders correctly in the horizontal variant 1`] = `
+<dl
+  class="ecl-description-list ecl-description-list--horizontal"
+>
+  <dt
+    class="ecl-description-list__term"
+  >
+    European Commission
+  </dt>
+  <dd
+    class="ecl-description-list__definition"
+  >
+    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
+  </dd>
+  <dt
+    class="ecl-description-list__term"
+  >
+    European Union
+  </dt>
+  <dd
+    class="ecl-description-list__definition"
+  >
+    An association of European nations formed in 1993 for the purpose of achieving political and economic integration.
+  </dd>
+  <dt
+    class="ecl-description-list__term"
+  >
+    Citizen
+  </dt>
+  <dd
+    class="ecl-description-list__definition"
+  >
+    A native or naturalized member of a state or nation who owes allegiance to its government and is entitled to its protection
+  </dd>
+</dl>
+`;
+
 exports[`EC - Description list Default renders correctly with extra attributes 1`] = `
 <dl
   class="ecl-description-list"

src/ec/packages/ec-component-description-list/description-list.html.twig

@@ -9,6 +9,7 @@
         },
         ...
       ]
+    - "variant" (string) (default: '')
     - "extra_classes" (string) (default: '')
     - "extra_attributes" (array) (default: []): format: [
         {
@@ -23,10 +24,15 @@
 
 {% set _items = items|default([]) %}
 {% set _css_class = 'ecl-description-list' %}
+{% set _variant = variant|default('') %}
 {% set _extra_attributes = '' %}
 
 {# Internal logic - Process properties #}
 
+{% if _variant is not empty %}
+  {% set _css_class = _css_class ~ ' ' ~ _css_class ~ '--' ~ _variant %}
+{% endif %}
+
 {% if extra_classes is defined and extra_classes is not empty %}
   {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
 {% endif %}
@@ -39,7 +45,7 @@
 
 {# Print the result #}
 
-{% if _items is not empty %}
+{% if _items is not empty and _items is iterable %}
   <dl class="{{ _css_class }}"{{ _extra_attributes|raw }}>
     {% for _item in _items %}
       {% if _item.term is not empty %}

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 },

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);
 

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",

yarn.lock

@@ -746,6 +746,11 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@ecl-twig/[email protected]":
+  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/[email protected]":
+  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/[email protected]":
   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/[email protected]":
+  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/[email protected]":
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/@ecl/ec-specs-expandable/-/ec-specs-expandable-2.11.0.tgz#4129bc9fc286c60cc9f214178283859f19d37b49"