@openeuropa/bcl-description-list 0.19.0 → 0.22.0

package/__snapshots__/description-list.test.js.snap

@@ -51,14 +51,14 @@ exports[`OE - Description List horizontal renders correctly 1`] = `
     <dt>
       Only title label
     </dt>
-    <div>
-      <dd>
+    <dd>
+      <div>
         Description text goes here.
-      </dd>
-      <dd>
+      </div>
+      <div>
         Description text goes here.
-      </dd>
-    </div>
+      </div>
+    </dd>
   </dl>
 </jest>
 `;
@@ -119,7 +119,7 @@ exports[`OE - Description List renders correctly 1`] = `
 exports[`OE - Description List with title horizontal renders correctly 1`] = `
 <jest>
   <h6
-    class="fw-bold mb-4"
+    class="fw-bold mb-4 bcl-heading"
   >
     Description list test title
   </h6>
@@ -172,14 +172,14 @@ exports[`OE - Description List with title horizontal renders correctly 1`] = `
     <dt>
       Only title label
     </dt>
-    <div>
-      <dd>
+    <dd>
+      <div>
         Description text goes here.
-      </dd>
-      <dd>
+      </div>
+      <div>
         Description text goes here.
-      </dd>
-    </div>
+      </div>
+    </dd>
   </dl>
 </jest>
 `;
@@ -187,7 +187,7 @@ exports[`OE - Description List with title horizontal renders correctly 1`] = `
 exports[`OE - Description List with title renders correctly 1`] = `
 <jest>
   <h6
-    class="fw-bold mb-4"
+    class="fw-bold mb-4 bcl-heading"
   >
     Description list test title
   </h6>

package/description-list.html.twig

@@ -4,6 +4,7 @@
   Parameters:
   - title: (string) (default: "")
   - title_tag: (string) (default: "h2")
+  - title_attributes (drupal attrs)
   - "items" (array) (default: []): format: [
       {
         "term" (object or array of object) -format: {
@@ -22,6 +23,7 @@
 
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _items = items|default([]) %}
 {% set _variant = variant|default('') %}
 
@@ -34,10 +36,11 @@
 {% endif %}
 
 {% if _title is not empty %}
-  {% set _title_classes = 'fw-bold mb-4' %}
-  <{{ _title_tag }} class="{{ _title_classes }}">
-    {{- _title -}}
-  </{{ _title_tag }}>
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    attributes: _title_attributes,
+  } only %}
 {% endif %}
 
 <dl
@@ -63,10 +66,14 @@
               {% include '@oe-bcl/bcl-icon/icon.html.twig' with _term.icon|merge({
                 attributes: create_attribute().addClass(_icon_classes)
               }) only %}
-            <p class="mb-0 d-inline-block">{{ _term.label }}</p>
-          {%- else -%}
-            {{- _term.label -}}
-          {%- endif -%}
+              <p class="mb-0 d-inline-block">{{ _term.label }}</p>
+            {%- elseif _term.color is not empty -%}
+              <div class="d-flex align-items-center">
+                <span class="p-2 me-2 d-inline-block rounded-1 {{ _term.color }}"></span>{{- _term.label -}}
+              </div>
+            {%- else -%}
+              {{- _term.label -}}
+            {%- endif -%}
           </dt>
         {% endfor %}
         {% if _variant == 'horizontal' %}
@@ -87,6 +94,10 @@
               attributes: create_attribute().addClass(_icon_classes)
             }) only -%}
             <p class="mb-0 d-inline-block">{{ _item.term.label }}</p>
+          {%- elseif _item.term.color is not empty -%}
+            <div class="d-flex align-items-center">
+              <span class="p-2 me-2 d-inline-block rounded-1 {{ _item.term.color }}"></span>{{- _item.term.label -}}
+            </div>
           {%- else -%}
             {{- _item.term.label -}}
           {%- endif -%}
@@ -96,10 +107,10 @@
     {% if _item.definition is not empty %}
       {% if _item.definition is iterable %}
         {% if _variant == 'horizontal' %}
-          <div>
+          <dd>
         {% endif %}
         {% for _definition in _item.definition %}
-          <dd>
+          {% if _variant == 'horizontal' %}<div>{% else %}<dd>{% endif %}
             {%- if _definition.button is defined -%}
               {% include '@oe-bcl/bcl-button/button.html.twig' with _definition.button only %}
             {%- elseif _definition.link is defined %}
@@ -115,10 +126,10 @@
                 {{- _definition.label -}}
               {%- endif -%}
             {%- endif -%}
-          </dd>
+          {% if _variant == 'horizontal' %}</div>{% else %}</dd>{% endif %}
         {% endfor %}
         {% if _variant == 'horizontal' %}
-          </div>
+          </dd>
         {% endif %}
       {% else %}
         <dd>

package/description-list.story.js

@@ -1,10 +1,14 @@
-import demoData from "@openeuropa/bcl-description-list/data.js";
-import demoDataHorizontal from "@openeuropa/bcl-description-list/dataHorizontal";
+import withCode from "@openeuropa/storybook-addon-code";
+import { withDesign } from "storybook-addon-designs";
+
+import demoData from "@openeuropa/bcl-description-list/data/data.js";
+import demoDataHorizontal from "@openeuropa/bcl-description-list/data/data--horizontal";
 import descriptionList from "@openeuropa/bcl-description-list/description-list.html.twig";
 import { correctPaths } from "@openeuropa/bcl-story-utils";
 
 export default {
   title: "Paragraphs/Description List",
+  decorators: [withCode, withDesign],
   parameters: {
     controls: {
       disable: true,
@@ -23,3 +27,5 @@ export const Default = () => descriptionList(correctPaths(demoData));
 
 export const Horizontal = () =>
   descriptionList(correctPaths(demoDataHorizontal));
+
+Horizontal.storyName = "Horizontal Description List";

package/description-list.test.js

@@ -1,6 +1,6 @@
 import { renderTwigFileAsNode } from "@openeuropa/bcl-test-utils";
-import demoData from "@openeuropa/bcl-description-list/data.js";
-import demoDataHorizontal from "@openeuropa/bcl-description-list/dataHorizontal";
+import demoData from "@openeuropa/bcl-description-list/data/data";
+import demoDataHorizontal from "@openeuropa/bcl-description-list/data/data--horizontal";
 const template = "@oe-bcl/bcl-description-list/description-list.html.twig";
 
 const render = (params) => renderTwigFileAsNode(template, params);

package/package.json

@@ -2,13 +2,14 @@
   "name": "@openeuropa/bcl-description-list",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.19.0",
+  "version": "0.22.0",
   "description": "OE - BCL description-list",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@openeuropa/bcl-icon": "^0.19.0"
+    "@openeuropa/bcl-heading": "^0.22.0",
+    "@openeuropa/bcl-icon": "^0.22.0"
   },
   "repository": {
     "type": "git",
@@ -24,5 +25,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "8bfce06400c8829a46578797f0126b4e9c02e725"
+  "gitHead": "57304ad94ae3c234f2f2b904208ce540a7a53f23"
 }