From b018486cb28b479123d045440918b7f63a5bd5aa Mon Sep 17 00:00:00 2001 From: planctus Date: Tue, 16 Feb 2021 14:06:21 +0200 Subject: [PATCH 1/2] feat(timeline): Content is optional and title mandatory - front-2036 --- .../components/ecl-compliance-timeline.html.twig | 10 +++++++++- src/ec/packages/ec-component-timeline/README.md | 2 +- .../__snapshots__/timeline.test.js.snap | 7 +------ .../ec-component-timeline/ecl-timeline.html.twig | 16 +++++++++------- .../ec-component-timeline/timeline.story.js | 4 ++-- .../ec-component-timeline/timeline.test.js | 1 + 6 files changed, 23 insertions(+), 17 deletions(-) diff --git a/src/ec/packages/ec-component-ecl-compliance/components/ecl-compliance-timeline.html.twig b/src/ec/packages/ec-component-ecl-compliance/components/ecl-compliance-timeline.html.twig index 8c08acf50..9caa5056e 100644 --- a/src/ec/packages/ec-component-ecl-compliance/components/ecl-compliance-timeline.html.twig +++ b/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 %} diff --git a/src/ec/packages/ec-component-timeline/README.md b/src/ec/packages/ec-component-timeline/README.md index abcbe8bb9..8174bfcb1 100644 --- a/src/ec/packages/ec-component-timeline/README.md +++ b/src/ec/packages/ec-component-timeline/README.md @@ -17,7 +17,7 @@ npm install --save @ecl-twig/ec-component-timeline - "id": (string) (default: '') - "label": (string) (default: '') - "title": (string) (default: '') - - "content": (block) (default: '') + - "content": (string) (default: '') - **"icon_path"** (string) (default: ''): file containing the svg icons - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated) - **"extra_attributes"** (optional) (array) (default: []) Extra attributes diff --git a/src/ec/packages/ec-component-timeline/__snapshots__/timeline.test.js.snap b/src/ec/packages/ec-component-timeline/__snapshots__/timeline.test.js.snap index 10b47d5c5..aea27b910 100644 --- a/src/ec/packages/ec-component-timeline/__snapshots__/timeline.test.js.snap +++ b/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 -
- Social Summit is open -
@@ -8000,7 +7995,7 @@ exports[`EC - Timeline with missing input data and debug enabled it returns the

- [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.

diff --git a/src/ec/packages/ec-component-timeline/ecl-timeline.html.twig b/src/ec/packages/ec-component-timeline/ecl-timeline.html.twig index dba80239d..1db597ada 100644 --- a/src/ec/packages/ec-component-timeline/ecl-timeline.html.twig +++ b/src/ec/packages/ec-component-timeline/ecl-timeline.html.twig @@ -8,10 +8,10 @@ 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: '') + - "id": (string) (optional) (default: '') - "label": (string) (default: '') - "title": (string) (default: '') - - "content": (block) (default: '') + - "content": (string) (optional) (default: '') - "icon_path" (string) (default: ''): file containing the svg icons - "extra_classes" (string) (default: '') - "extra_attributes" (array) (default: []): format: @@ -74,14 +74,16 @@ Parameters: {% set extra_class = (loop.index > _display_amount and loop.revindex > _bottom_amount) ? ' ecl-timeline2__item--collapsed' : '' %}
  • + {% endif %}>
    {{ _item.label }}
    - {% if _item.title is defined and _item.title is not empty %} + {% if _item.title is defined and _item.title is not empty %}
    {{ _item.title }}
    - {% endif %} -
    {{ _item.content|default('') }}
    + {% endif %} + {% if _item.content is defined and _item.content is not empty %} +
    {{ _item.content }}
    + {% endif %}
    • {# 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) %} diff --git a/src/ec/packages/ec-component-timeline/timeline.story.js b/src/ec/packages/ec-component-timeline/timeline.story.js index 45aaf5f64..0e7f2237a 100644 --- a/src/ec/packages/ec-component-timeline/timeline.story.js +++ b/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) ); }); diff --git a/src/ec/packages/ec-component-timeline/timeline.test.js b/src/ec/packages/ec-component-timeline/timeline.test.js index 3d049849d..d7633191b 100644 --- a/src/ec/packages/ec-component-timeline/timeline.test.js +++ b/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 = ''; From 50f5f2e9ccf86a0227116ee95794bf4e64221b9d Mon Sep 17 00:00:00 2001 From: planctus Date: Thu, 18 Feb 2021 15:25:50 +0200 Subject: [PATCH 2/2] feat(timeline): Small tweaks in the docs - front-2036 --- src/ec/packages/ec-component-timeline/README.md | 6 +++--- .../packages/ec-component-timeline/ecl-timeline.html.twig | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/ec/packages/ec-component-timeline/README.md b/src/ec/packages/ec-component-timeline/README.md index 8174bfcb1..1b8869ef9 100644 --- a/src/ec/packages/ec-component-timeline/README.md +++ b/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": (string) (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' diff --git a/src/ec/packages/ec-component-timeline/ecl-timeline.html.twig b/src/ec/packages/ec-component-timeline/ecl-timeline.html.twig index 1db597ada..9a6fe06a4 100644 --- a/src/ec/packages/ec-component-timeline/ecl-timeline.html.twig +++ b/src/ec/packages/ec-component-timeline/ecl-timeline.html.twig @@ -9,10 +9,10 @@ Parameters: - "to": (integer) (default: items.length) Item index after which to resume displaying timeline items - "items" (array) (default: []): - "id": (string) (optional) (default: '') - - "label": (string) (default: '') + - "label": (string) (default: '') To be used as a "timestamp" - "title": (string) (default: '') - - "content": (string) (optional) (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: '')