table

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

@@ -20,6 +20,7 @@ npm install --save @ecl/twig-component-table
   - "rowspan" (string) (default: ''),
   - "data-ecl-table-header-group" (string) (default: ''),
   - "headers" (string) (default: ''): headers attribute to reference the relevant table headers ids (for multi headers table)
+- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup?
 - **"rows"** (array) (default: []): [
   { - "extra_attributes": (string) (default: ''), - "extra_classes": (string) (default: '') Extra classes for the table row (space separated) - "data: [
   {

src/implementations/twig/components/table/table.html.twig

@@ -7,6 +7,7 @@
   - "caption" (string) (default: ''): optional caption for the table
   - "label_sort" (string) (default: ''): label used for sorting buttons (screen reader only)
   - "zebra" (boolean) (default: false))
+  - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup?
   - "headers" (array) (default: []): format: [
       {
         "label" (string or array of string)
@@ -63,6 +64,7 @@
 {% set _label_sort = label_sort|default('') %}
 {% set _rows = rows|default([]) %}
 {% set _zebra = zebra|default(false) %}
+{% set _icon_wt_markup = icon_wt_markup|default(false) %}
 
 {# Internal logic - Process properties #}
 
@@ -78,6 +80,12 @@
   ]) %}
 {% endif %}
 
+{% if _icon_wt_markup %}
+  {% set extra_attributes = extra_attributes|default([])|merge([
+    { name: 'data-ecl-icon-wt-markup' },
+  ]) %}
+{% endif %}
+
 {% if _simple %}
   {% set _css_class = _css_class ~ ' ' ~ _simple_css_class %}
 {% endif %}

src/implementations/vanilla/components/table/table.js

@@ -58,20 +58,31 @@ export class Table {
   /**
    * @returns {HTMLElement}
    */
-  static createSortIcon(customClass) {
-    const tempElement = document.createElement('span');
-    tempElement.innerHTML = iconSvgAllArrow; // avoiding the use of not-so-stable createElementNs
-    const svg = tempElement.children[0];
-    svg.removeAttribute('height');
-    svg.removeAttribute('width');
-    svg.setAttribute('focusable', false);
-    svg.setAttribute('aria-hidden', true);
-    // The following element is <path> which does not support classList API as others.
-    svg.setAttribute(
-      'class',
-      `ecl-table__icon ecl-icon ecl-icon--${iconSvgAllArrowSize} ${customClass}`,
-    );
-    return svg;
+  static createSortIcon(customClass, wtMarkup) {
+    let icon = '';
+    if (wtMarkup) {
+      icon = document.createElement('span');
+      icon.setAttribute(
+        'class',
+        `ecl-table__icon wt-icon--solid-arrow ecl-icon--${iconSvgAllArrowSize} ${customClass}`,
+      );
+    } else {
+      const tempElement = document.createElement('span');
+      tempElement.innerHTML = iconSvgAllArrow; // avoiding the use of not-so-stable createElementNs
+      // eslint-disable-next-line prefer-destructuring
+      icon = tempElement.children[0];
+      icon.removeAttribute('height');
+      icon.removeAttribute('width');
+      icon.setAttribute('focusable', false);
+      icon.setAttribute('aria-hidden', true);
+      // The following element is <path> which does not support classList API as others.
+      icon.setAttribute(
+        'class',
+        `ecl-table__icon ecl-icon ecl-icon--${iconSvgAllArrowSize} ${customClass}`,
+      );
+    }
+
+    return icon;
   }
 
   /**
@@ -96,8 +107,11 @@ export class Table {
             this.element.getAttribute(this.sortLabelSelector),
           );
         }
-        sort.appendChild(Table.createSortIcon('ecl-table__icon-up'));
-        sort.appendChild(Table.createSortIcon('ecl-table__icon-down'));
+        const wtMarkup = this.element.hasAttribute('data-ecl-icon-wt-markup');
+        sort.appendChild(Table.createSortIcon('ecl-table__icon-up', wtMarkup));
+        sort.appendChild(
+          Table.createSortIcon('ecl-table__icon-down', wtMarkup),
+        );
         tr.appendChild(sort);
         tr.addEventListener('click', (e) => this.handleClickOnSort(tr)(e));
       });

src/playground/ec/.storybook/preview-head.html

@@ -13,11 +13,6 @@
   src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.8.2/pikaday.js"
   crossorigin="anonymous"
 ></script>
-<script
-  defer
-  src="https://webtools.europa.eu/load.js"
-  type="text/javascript"
-></script>
 <script>
   function inIframe() {
     try {
@@ -70,6 +65,11 @@
   }
 </script>
 <script type="text/javascript" src="./scripts/ecl-ec.js"></script>
+<script
+  defer
+  src="https://webtools.europa.eu/load.js"
+  type="text/javascript"
+></script>
 <script>
   // https://github.com/storybookjs/storybook/issues/6113#issuecomment-473965255
   function runOnPageChange() {

src/specs/components/table/demo/data--sort-table.js

@@ -1,6 +1,7 @@
 module.exports = {
   id: 'table-id',
   sortable: true,
+  icon_wt_markup: true,
   caption: 'Table caption',
   label_sort: 'Sort table',
   headers: [