From 15dc0b895e8ba6e721171869b698f04d69cba02f Mon Sep 17 00:00:00 2001 From: planctus Date: Tue, 8 Sep 2020 16:20:38 +0200 Subject: [PATCH 1/2] fix(pagination): fixing markup for links whithout icons - front-1574 --- .../__snapshots__/pagination.test.js.snap | 176 +++++------------- .../ec-component-pagination/demo/data.js | 36 +--- .../ecl-pagination.html.twig | 12 +- .../pagination.story.js | 2 +- 4 files changed, 60 insertions(+), 166 deletions(-) diff --git a/src/ec/packages/ec-component-pagination/__snapshots__/pagination.test.js.snap b/src/ec/packages/ec-component-pagination/__snapshots__/pagination.test.js.snap index 58812941d..ea8674cfe 100644 --- a/src/ec/packages/ec-component-pagination/__snapshots__/pagination.test.js.snap +++ b/src/ec/packages/ec-component-pagination/__snapshots__/pagination.test.js.snap @@ -70,26 +70,18 @@ exports[`EC - Pagination Default With missing input data returns the right warni class="ecl-link ecl-link--standalone ecl-pagination__link" href="/example" > - - 24 - + 24 - +
- - + [link--standalone] - ecl compliant +

+
  • - - 25 - + 25 - +
    - - + [link--standalone] - ecl compliant +

    +
  • - - 27 - + 27 - +
    - - + [link--standalone] - ecl compliant +

    +
  • - - 28 - + 28 - +
    - - + [link--standalone] - ecl compliant +

    +
  • - - 24 - + 24
  • - - 25 - + 25
  • - - 27 - + 27
  • - - 28 - + 28
  • - - 24 - + 24
  • - - 25 - + 25
  • - - 27 - + 27
  • - - 28 - + 28
  • - - 24 - + 24
  • - - 25 - + 25
  • - - 27 - + 27
  • - - 28 - + 28
  • formatItem(item)), - icon_path: '/icons.svg', -}; - -export default data; +export default adapter(specData); diff --git a/src/ec/packages/ec-component-pagination/ecl-pagination.html.twig b/src/ec/packages/ec-component-pagination/ecl-pagination.html.twig index 945eba9e5..e2ed0bcd6 100644 --- a/src/ec/packages/ec-component-pagination/ecl-pagination.html.twig +++ b/src/ec/packages/ec-component-pagination/ecl-pagination.html.twig @@ -51,22 +51,28 @@
  • {% if _item.link is not empty %} {% set _link = _item.link.link|merge({ type: 'standalone' }) %} + {% if _item.aria_label is defined and _item.aria_label is not empty %} + {% set _link = _link|merge({ aria_label: _item.aria_label }) %} + {% endif %} {% if _item.link.icon is defined and _item.link.icon is not empty %} {% set _icon = _icon_path is not empty ? _item.link.icon|merge({ path: _icon_path }) : _item.link.icon %} + {% set _link = _link|merge({ 'icon': _icon }) %} {% endif %} {% include '@ecl-twig/ec-component-link/ecl-link.html.twig' with _item.link|merge({ link: _link|default({}), - icon: _icon|default({}), extra_classes: "ecl-pagination__link", - extra_attributes: [{ name: "aria-label", value: _item.aria_label }], _compliance_: _compliance, _compliance_inner_check_: true }) only %} {% else %} {{- _item.label -}} diff --git a/src/ec/packages/ec-component-pagination/pagination.story.js b/src/ec/packages/ec-component-pagination/pagination.story.js index 9cf04186f..3f77f8c36 100644 --- a/src/ec/packages/ec-component-pagination/pagination.story.js +++ b/src/ec/packages/ec-component-pagination/pagination.story.js @@ -32,7 +32,7 @@ const preparePagination = (data) => { ); } item.aria_label = text( - `items[${i}].label`, + `items[${i}].aria_label`, item.aria_label, tabLabels.required ); From 2b850bca1546a41d770277b22c4a3e4ce1fd0a10 Mon Sep 17 00:00:00 2001 From: planctus Date: Wed, 9 Sep 2020 09:03:11 +0200 Subject: [PATCH 2/2] fix(pagination): forgot the adapter file - front-1574 --- .../hero-banner.story.js | 1 - .../ec-component-pagination/adapter.js | 38 +++++++++++++++++++ 2 files changed, 38 insertions(+), 1 deletion(-) create mode 100644 src/ec/packages/ec-component-pagination/adapter.js diff --git a/src/ec/packages/ec-component-hero-banner/hero-banner.story.js b/src/ec/packages/ec-component-hero-banner/hero-banner.story.js index 91c746466..322f7546c 100644 --- a/src/ec/packages/ec-component-hero-banner/hero-banner.story.js +++ b/src/ec/packages/ec-component-hero-banner/hero-banner.story.js @@ -41,7 +41,6 @@ let imageGradientData = { ...bannerDataImageGradient }; const simplePrimaryDescBtnToggler = () => { if (simplePrimaryData.description) { delete simplePrimaryData.description; - console.log(simplePrimaryData); } else { simplePrimaryData.description = bannerDataSimplePrimary.description; } diff --git a/src/ec/packages/ec-component-pagination/adapter.js b/src/ec/packages/ec-component-pagination/adapter.js new file mode 100644 index 000000000..1b88f2176 --- /dev/null +++ b/src/ec/packages/ec-component-pagination/adapter.js @@ -0,0 +1,38 @@ +import { formatLink } from '@ecl-twig/data-utils'; + +function formatItem(i) { + let type = ''; + if (i.isCurrent) { + type = 'current'; + } + if (i.isPrevious) { + type = 'previous'; + } + if (i.isNext) { + type = 'next'; + } + + const item = { + type, + label: i.label, + aria_label: i.ariaLabel, + }; + + if (i.link) { + i.link.ariaLabel = i.ariaLabel; + item.link = formatLink(i.link); + } + + return item; +} + +const adapter = (initialData) => { + // Copy reference specification demo adaptedData. + const adaptedData = JSON.parse(JSON.stringify(initialData)); + adaptedData.items = adaptedData.items.map((item) => formatItem(item)); + adaptedData.icon_path = '/icons.svg'; + + return adaptedData; +}; + +export default adapter;