feat(navigation-list): add component - FRONT-3520

src/implementations/twig/components/card/README.md

@@ -19,9 +19,19 @@ npm install --save @ecl/twig-component-card
   - "infos" (array) (default: []): List of infos. The format of each element in the array:
     - "label" (string) (default: ''): Label of info
     - "icon" (associative array) (default: {}): Predefined structure compatible with EC Icon
-  - "links" (array) (default: []): List of links (required if Card type is a 'tile'). The format of each element in the array
-    - "label" (string) (default: ''): Label of link
-    - "path" (string) (default: ''): Link url (href attribute)
+    - "links" (array) (default: []): Array or multi array of links (required if Card type is a 'tile')
+      [
+      {
+      label: (string) (default: ''): Label of link
+      path: (string) (default: ''): Link url (href attribute)
+      },
+      ...
+      ]
+      OR
+      [
+      [ { label, path }, { label, path }, ... ],
+      [ { label, path }, { label, path }, ... ],
+      ],
   - "lists" (array) (default: []) Array of objects of type "description list"
     - "variant" (optional) (taxonomy or horizontal)
     - "items" (array)

src/implementations/twig/components/card/card.html.twig

@@ -18,12 +18,15 @@
             },
             ...
           ]
-          links: [], (array) (default: []): List of links (required if Card type is a 'tile'). Format: [
+          links: [], (array) (default: []): Array or multi array of links (required if Card type is a 'tile'). Format: [
             {
               label: (string) (default: ''): Label of link
               path: (string) (default: ''): Link url (href attribute)
             },
             ...
+          ] OR [
+            [ { label, path }, { label, path }, ... ],
+            [ { label, path }, { label, path }, ... ],
           ],
           lists [], (array) (default: []) Array of objects of type "description list". Format: [
             {
@@ -111,9 +114,11 @@
         {% endfor %}
       </ul>
     {% endif %}
+
     {% if _card.meta is not empty %}
       <div class="ecl-card__meta">{{ _card.meta|join(" | ") }}</div>
     {% endif %}
+
     {% if _card.title is not empty and _card.title.label is not empty %}
       <h1 class="ecl-card__title">
         {%- if _card.title.path %}
@@ -126,22 +131,41 @@
         {%- endif -%}
       </h1>
     {% endif %}
+
     {% if _card.description is not empty %}
       <div class="ecl-card__description">{{ _card.description }}</div>
     {% endif %}
+
     {% if _card.links is defined and _card.links is not empty and _card.links is iterable %}
-      <ul class="ecl-card__link-container">
-        {% for link in _card.links %}
-          <li class="ecl-card__link-item">
-            {% include '@ecl/link/link.html.twig' with {
-              link: link|merge({ type: 'standalone' }),
-              extra_classes: 'ecl-card__link',
-              icon_path: _icon_path
-            } only %}
-          </li>
+      {% if _card.links[0][0] is defined %}
+        {% for _section in _card.links %}
+          <ul class="ecl-card__link-container">
+            {% for link in _section %}
+              <li class="ecl-card__link-item">
+                {% include '@ecl/link/link.html.twig' with {
+                  link: link|merge({ type: 'standalone' }),
+                  extra_classes: 'ecl-card__link',
+                  icon_path: _icon_path
+                } only %}
+              </li>
+            {% endfor %}
+          </ul>
         {% endfor %}
-      </ul>
+      {% else %}
+        <ul class="ecl-card__link-container">
+          {% for link in _card.links %}
+            <li class="ecl-card__link-item">
+              {% include '@ecl/link/link.html.twig' with {
+                link: link|merge({ type: 'standalone' }),
+                extra_classes: 'ecl-card__link',
+                icon_path: _icon_path
+              } only %}
+            </li>
+          {% endfor %}
+        </ul>
+      {% endif %}
     {% endif %}
+
     {% if _card.infos is defined and _card.infos is not empty and _card.infos is iterable %}
       <ul class="ecl-card__info-container">
         {% for info in _card.infos %}
@@ -162,6 +186,7 @@
         {% endfor %}
       </ul>
     {% endif %}
+
     {% if _card.tags is defined and _card.tags is not empty and _card.tags is iterable %}
       <ul class="ecl-card__tag-container">
         {% for tag in _card.tags %}
@@ -175,6 +200,7 @@
         {% endfor %}
       </ul>
     {% endif %}
+
     {% if _card.lists is defined and _card.lists is not empty and _card.lists is iterable %}
       {% for _list in _card.lists %}
         {% include '@ecl/description-list/description-list.html.twig' with _list|merge({ extra_classes: 'ecl-card__list'}) only %}

src/implementations/twig/components/content-item/package.json

@@ -3,7 +3,7 @@
   "author": "European Commission",
   "license": "EUPL-1.2",
   "version": "3.2.3",
-  "description": "ECL Card",
+  "description": "ECL Content Item",
   "publishConfig": {
     "access": "public"
   },

src/implementations/twig/components/navigation-list/.npmignore

@@ -0,0 +1,2 @@
+__snapshots__
+*.js

src/implementations/twig/components/navigation-list/README.md

@@ -0,0 +1,16 @@
+# ECL Navigation List component
+
+npm package: `@ecl/twig-component-navigation-list`
+
+```shell
+npm install --save @ecl/twig-component-navigation-list
+```
+
+### Parameters
+
+<!-- prettier-ignore -->
+```twig
+{% include '@ecl/navigation-list/navigation-list.html.twig' with { 
+
+} %}
+```