feat(timeline): Content is optional and title mandatory - FRONT-2036

src/ec/packages/ec-component-ecl-compliance/components/ecl-compliance-timeline.html.twig

@@ -17,6 +17,7 @@
 {% set no_toggle_collapsed_case = false %}
 {% set no_toggle_expanded_case = false %}
 {% set no_icon_path_case = false %}
+{% set no_item_title_case = false %}
 
 {% if toggler %}
   {% set no_toggle_collapsed_case = toggle_collapsed is empty %}
@@ -30,6 +31,9 @@
     {% if item.label is not defined or item.label is empty %}
       {% set no_item_timestamp_case = true %}
     {% endif %}
+    {% if item.title is not defined or item.title is empty %}
+      {% set no_item_title_case = true %}
+    {% endif %}
   {% endfor %}
 {% endif %}
 
@@ -38,7 +42,8 @@
   no_item_timestamp_case or
   no_toggle_collapsed_case or
   no_toggle_expanded_case or
-  no_icon_path_case %}
+  no_icon_path_case or
+  no_item_title_case %}
 
 {% if no_items_case %}
   {% set message = message ~ ' {{ items }} is mandatory, it needs to be defined as an array of objects.' %}
@@ -49,6 +54,9 @@
 {% if no_item_timestamp_case %}
   {% set message = message ~ ' Each item of the timeline should contain a {{ label }} property set and filled in as it represents the mandatory timestamp.' %}
 {% endif %}
+{% if no_item_title_case %}
+  {% set message = message ~ ' Each item of the timeline should contain a {{ title }} property set and filled in.' %}
+{% endif %}
 {% if no_toggle_collapsed_case %}
   {% set message = message ~ ' The {{ toggle_collapsed }} property needs to be set and filled in as it represents the toggler button label.' %}
 {% endif %}

src/ec/packages/ec-component-timeline/README.md

@@ -15,10 +15,10 @@ npm install --save @ecl-twig/ec-component-timeline
   - "to": (integer) (default: items.length) Item index after which to resume displaying timeline items
 - **"items"** (array) (default: []):
   - "id": (string) (default: '')
-  - "label": (string) (default: '')
+  - "label": (string) (default: '') To be used as a "timestamp"
   - "title": (string) (default: '')
-  - "content": (block) (default: '')
-- **"icon_path"** (string) (default: ''): file containing the svg icons
+  - "content": (html markup marked as safe string) (default: '')
+- **"icon_path"** (string) (default: ''): Path to the file containing the icons
 - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
 - **"extra_attributes"** (optional) (array) (default: []) Extra attributes
   - "name" (string) Attribute name, eg. 'data-test'

src/ec/packages/ec-component-timeline/__snapshots__/timeline.test.js.snap

@@ -7268,11 +7268,6 @@ exports[`EC - Timeline with missing input data and debug enabled it returns the
       >
         17 November 2017
       </div>
-      <div
-        class="ecl-timeline2__title"
-      >
-        Social Summit is open
-      </div>
       <div
         class="ecl-timeline2__content"
       >
@@ -8000,7 +7995,7 @@ exports[`EC - Timeline with missing input data and debug enabled it returns the
     <p
       class="ecl-u-type-color-grey ecl-u-ml-m ecl-u-type-xs"
     >
-      [timeline] -  If the toggler is shown the {{ icon_path }} parameter needs to be set and filled in. Each item of the timeline should contain a {{ label }} property set and filled in as it represents the mandatory timestamp. The {{ toggle_collapsed }} property needs to be set and filled in as it represents the toggler button label. The {{ toggle_expanded }} property needs to be set and filled in as it represents the toggler button label.
+      [timeline] -  If the toggler is shown the {{ icon_path }} parameter needs to be set and filled in. Each item of the timeline should contain a {{ label }} property set and filled in as it represents the mandatory timestamp. Each item of the timeline should contain a {{ title }} property set and filled in. The {{ toggle_collapsed }} property needs to be set and filled in as it represents the toggler button label. The {{ toggle_expanded }} property needs to be set and filled in as it represents the toggler button label.
     </p>
   </div>
 </test>

src/ec/packages/ec-component-timeline/ecl-timeline.html.twig

@@ -8,11 +8,11 @@ Parameters:
     - "from": (integer) (default: items.length) Item index after which to start hiding timeline items
     - "to": (integer) (default: items.length) Item index after which to resume displaying timeline items
   - "items" (array) (default: []):
-    - "id": (string) (default: '')
-    - "label": (string) (default: '')
+    - "id": (string) (optional) (default: '')
+    - "label": (string) (default: '') To be used as a "timestamp"
     - "title": (string) (default: '')
-    - "content": (block) (default: '')
-  - "icon_path" (string) (default: ''): file containing the svg icons
+    - "content": (html markup marked as safe string) (optional) (default: '')
+  - "icon_path" (string) (default: ''): Path to the file containing the icons
   - "extra_classes" (string) (default: '')
   - "extra_attributes" (array) (default: []): format:
     - "name" (string) (default: '')
@@ -74,14 +74,16 @@ Parameters:
       {% set extra_class = (loop.index > _display_amount and loop.revindex > _bottom_amount) ? ' ecl-timeline2__item--collapsed' : '' %}
       <li
       class="ecl-timeline2__item{{ extra_class }}"
-        {% if _item.id is defined and _item.id is not empty %}
+      {% if _item.id is defined and _item.id is not empty %}
           id="{{ _item.id }}"
-        {% endif %}>
+      {% endif %}>
         <div class="ecl-timeline2__label">{{ _item.label }}</div>
-        {% if _item.title is defined and _item.title is not empty %}
+      {% if _item.title is defined and _item.title is not empty %}
         <div class="ecl-timeline2__title">{{ _item.title }}</div>
-        {% endif %}
-        <div class="ecl-timeline2__content">{{ _item.content|default('') }}</div>
+      {% endif %}
+      {% if _item.content is defined and _item.content is not empty %}
+        <div class="ecl-timeline2__content">{{ _item.content }}</div>
+      {% endif %}
       </li>
       {# Display the show more button if required. #}
       {% if (_hide_amount > 0 and loop.revindex == _bottom_amount + 1) or (_hide_amount > 0 and _hide_to == 0 and loop.revindex == 1) %}

src/ec/packages/ec-component-timeline/timeline.story.js

@@ -45,10 +45,10 @@ const prepareTimeline = (data) => {
   data.items.forEach((item, i) => {
     const { id, label, title, content } = item;
     item.label = text(`items[${i}].label`, label, tabLabels.required);
+    item.title = text(`items[${i}].title`, title, tabLabels.required);
     item.id = text(`items[${i}].id`, id, tabLabels.optional);
-    item.title = text(`items[${i}].title`, title, tabLabels.optional);
     item.content = he.decode(
-      text(`items[${i}].content`, content, tabLabels.required)
+      text(`items[${i}].content`, content, tabLabels.optional)
     );
   });
 

src/ec/packages/ec-component-timeline/timeline.test.js

@@ -113,6 +113,7 @@ describe('EC - Timeline', () => {
 
     const dataCompliance = { ...demoData, _compliance_: true };
     dataCompliance.items[1].label = '';
+    dataCompliance.items[3].title = '';
     dataCompliance.toggle_collapsed = '';
     dataCompliance.toggle_expanded = '';
     dataCompliance.icon_path = '';