fix(breadcrumb): component review - TWIG-205 (#294)

ec-europa · Jan 23, 2020 · b01610c · b01610c
1 parent 570eace
commit b01610c
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 79 deletions.
diff --git a/php/php_storybook/scripts/ecl-diff.js b/php/php_storybook/scripts/ecl-diff.js
@@ -203,8 +203,9 @@ yargsInteractive()
             'xlink:href="{{.*icons.*.svg#}}'
           )
           // Booleans.
-          // Inline attributes.
           .replace(/(data-ecl[-A-Za-z]+)(?=[\s/>])/g, '$1="{{true|false}}"')
+          // aria-hidden
+          .replace(/(aria-hidden)(=".+")/g, '$1="{{true|false}}"')
           // Logo
           .replace(
             /\/logo--(en|fr|mute).svg/g,
@@ -276,6 +277,7 @@ yargsInteractive()
         const browser = await puppeteer.launch();
         const page = await browser.newPage();
         await page.goto(eclFinalUrl, { waitUntil: 'domcontentloaded' });
+        await page.setViewport({ width: 1900, height: 1600 });
         // We might be redirected if the url doesn't exist.
         await page.waitFor(5000);
         // If we have been redirected we try to look for the available variants.

diff --git a/src/ec/packages/ec-component-accordion/ecl-accordion.html.twig b/src/ec/packages/ec-component-accordion/ecl-accordion.html.twig
@@ -66,7 +66,6 @@
             { name: 'data-ecl-accordion-toggle' },
           ]
         } only %}
-
       </h{{ _item.level|default(3) }}>
       <div
         class="ecl-accordion__content"

diff --git a/src/ec/packages/ec-component-breadcrumb/__snapshots__/breadcrumb.test.js.snap b/src/ec/packages/ec-component-breadcrumb/__snapshots__/breadcrumb.test.js.snap
@@ -23,7 +23,7 @@ exports[`EC - Breadcrumb Long renders correctly 1`] = `
       </a>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
         focusable="false"
         role="presentation"
       >
@@ -47,7 +47,7 @@ exports[`EC - Breadcrumb Long renders correctly 1`] = `
       </button>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
         focusable="false"
         role="presentation"
       >
@@ -69,7 +69,7 @@ exports[`EC - Breadcrumb Long renders correctly 1`] = `
       </a>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
         focusable="false"
         role="presentation"
       >
@@ -91,7 +91,7 @@ exports[`EC - Breadcrumb Long renders correctly 1`] = `
       </a>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
         focusable="false"
         role="presentation"
       >
@@ -113,7 +113,7 @@ exports[`EC - Breadcrumb Long renders correctly 1`] = `
       </a>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
         focusable="false"
         role="presentation"
       >
@@ -159,7 +159,7 @@ exports[`EC - Breadcrumb Long renders correctly with extra attributes 1`] = `
       </a>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
         focusable="false"
         role="presentation"
       >
@@ -183,7 +183,7 @@ exports[`EC - Breadcrumb Long renders correctly with extra attributes 1`] = `
       </button>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
         focusable="false"
         role="presentation"
       >
@@ -205,7 +205,7 @@ exports[`EC - Breadcrumb Long renders correctly with extra attributes 1`] = `
       </a>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
         focusable="false"
         role="presentation"
       >
@@ -227,7 +227,7 @@ exports[`EC - Breadcrumb Long renders correctly with extra attributes 1`] = `
       </a>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
         focusable="false"
         role="presentation"
       >
@@ -249,7 +249,7 @@ exports[`EC - Breadcrumb Long renders correctly with extra attributes 1`] = `
       </a>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
         focusable="false"
         role="presentation"
       >
@@ -293,7 +293,7 @@ exports[`EC - Breadcrumb Long renders correctly with extra class names 1`] = `
       </a>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
         focusable="false"
         role="presentation"
       >
@@ -317,7 +317,7 @@ exports[`EC - Breadcrumb Long renders correctly with extra class names 1`] = `
       </button>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
         focusable="false"
         role="presentation"
       >
@@ -339,7 +339,7 @@ exports[`EC - Breadcrumb Long renders correctly with extra class names 1`] = `
       </a>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
         focusable="false"
         role="presentation"
       >
@@ -361,7 +361,7 @@ exports[`EC - Breadcrumb Long renders correctly with extra class names 1`] = `
       </a>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
         focusable="false"
         role="presentation"
       >
@@ -383,7 +383,7 @@ exports[`EC - Breadcrumb Long renders correctly with extra class names 1`] = `
       </a>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
         focusable="false"
         role="presentation"
       >
@@ -427,7 +427,7 @@ exports[`EC - Breadcrumb Simple renders correctly 1`] = `
       </a>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
         focusable="false"
         role="presentation"
       >
@@ -449,7 +449,7 @@ exports[`EC - Breadcrumb Simple renders correctly 1`] = `
       </a>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
         focusable="false"
         role="presentation"
       >
@@ -495,7 +495,7 @@ exports[`EC - Breadcrumb Simple renders correctly with extra attributes 1`] = `
       </a>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
         focusable="false"
         role="presentation"
       >
@@ -517,7 +517,7 @@ exports[`EC - Breadcrumb Simple renders correctly with extra attributes 1`] = `
       </a>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
         focusable="false"
         role="presentation"
       >
@@ -561,7 +561,7 @@ exports[`EC - Breadcrumb Simple renders correctly with extra class names 1`] = `
       </a>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
         focusable="false"
         role="presentation"
       >
@@ -583,7 +583,7 @@ exports[`EC - Breadcrumb Simple renders correctly with extra class names 1`] = `
       </a>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
         focusable="false"
         role="presentation"
       >

diff --git a/src/ec/packages/ec-component-breadcrumb/adapter.js b/src/ec/packages/ec-component-breadcrumb/adapter.js
@@ -6,6 +6,8 @@ const adapter = initialData => {
   const adaptedData = JSON.parse(JSON.stringify(initialData));
   adaptedData.links = adaptedData.items.map(formatLinkAlt);
   adaptedData.icon_file_path = '/icons.svg';
+  adaptedData.ellipsis_label = 'Click to expand';
+  adaptedData.navigation_text = adaptedData.label;
 
   return adaptedData;
 };

diff --git a/src/ec/packages/ec-component-breadcrumb/breadcrumb.story.js b/src/ec/packages/ec-component-breadcrumb/breadcrumb.story.js
@@ -21,7 +21,7 @@ storiesOf('Components/Navigation/Breadcrumb', module)
         links: dataSimple.links,
         icon_file_path: defaultSprite,
         navigation_text: dataSimple.label,
-        ellipsis_label: 'Click to expand',
+        ellipsis_label: dataSimple.ariaLabel,
       }),
     {
       notes: { markdown: notes, json: dataSimple },
@@ -34,7 +34,7 @@ storiesOf('Components/Navigation/Breadcrumb', module)
         links: dataLong.links,
         icon_file_path: defaultSprite,
         navigation_text: dataLong.label,
-        ellipsis_label: 'Click to expand',
+        ellipsis_label: dataLong.ariaLabel,
       }),
     {
       notes: { markdown: notes, json: dataLong },

diff --git a/src/ec/packages/ec-component-breadcrumb/breadcrumb.test.js b/src/ec/packages/ec-component-breadcrumb/breadcrumb.test.js
@@ -8,20 +8,15 @@ describe('EC - Breadcrumb', () => {
   const render = params => renderTwigFileAsNode(template, params);
 
   describe('Simple', () => {
-    const data = merge(dataSimple, {
-      navigation_text: dataSimple.label,
-      ellipsis_label: 'Click to expand',
-    });
-
     test(`renders correctly`, () => {
       expect.assertions(1);
-      return expect(render(data)).resolves.toMatchSnapshot();
+      return expect(render(dataSimple)).resolves.toMatchSnapshot();
     });
 
     test('renders correctly with extra class names', () => {
       expect.assertions(1);
 
-      const optionsWithExtraClasses = merge(data, {
+      const optionsWithExtraClasses = merge(dataSimple, {
         extra_classes: 'custom-class custom-class--test',
       });
 
@@ -31,7 +26,7 @@ describe('EC - Breadcrumb', () => {
     test('renders correctly with extra attributes', () => {
       expect.assertions(1);
 
-      const optionsWithExtraClasses = merge(data, {
+      const optionsWithExtraClasses = merge(dataSimple, {
         extra_attributes: [
           { name: 'data-test', value: 'data-test-value' },
           { name: 'data-test-1', value: 'data-test-value-1' },
@@ -43,20 +38,15 @@ describe('EC - Breadcrumb', () => {
   });
 
   describe('Long', () => {
-    const data = merge(dataLong, {
-      navigation_text: dataLong.label,
-      ellipsis_label: 'Click to expand',
-    });
-
     test(`renders correctly`, () => {
       expect.assertions(1);
-      return expect(render(data)).resolves.toMatchSnapshot();
+      return expect(render(dataLong)).resolves.toMatchSnapshot();
     });
 
     test('renders correctly with extra class names', () => {
       expect.assertions(1);
 
-      const optionsWithExtraClasses = merge(data, {
+      const optionsWithExtraClasses = merge(dataLong, {
         extra_classes: 'custom-class custom-class--test',
       });
 
@@ -66,7 +56,7 @@ describe('EC - Breadcrumb', () => {
     test('renders correctly with extra attributes', () => {
       expect.assertions(1);
 
-      const optionsWithExtraClasses = merge(data, {
+      const optionsWithExtraClasses = merge(dataLong, {
         extra_attributes: [
           { name: 'data-test', value: 'data-test-value' },
           { name: 'data-test-1', value: 'data-test-value-1' },

diff --git a/src/ec/packages/ec-component-breadcrumb/ecl-breadcrumb.html.twig b/src/ec/packages/ec-component-breadcrumb/ecl-breadcrumb.html.twig
@@ -35,7 +35,6 @@
     size: 'xs',
     transform: 'rotate-90',
     path: icon_file_path|default(''),
-    color: 'inverted'
   },
   extra_classes: 'ecl-breadcrumb__icon',
   extra_attributes: [{ name: 'role', value: 'presentation' }]
@@ -66,7 +65,7 @@
 
 {# Print the result #}
 
-<nav class="{{ _css_class }}"{{ _extra_attributes|raw }}>
+<nav class="{{ _css_class }}" {{ _extra_attributes|raw }}>
   <ol class="ecl-breadcrumb__container">
     {% for key, link in links %}
       {% set _breadcrumb_segment_attributes = 'data-ecl-breadcrumb-item="static" aria-hidden="false"' %}