feat: EC language list

src/ec/.storybook/webpack.config.js

@@ -16,7 +16,7 @@ module.exports = {
           {
             loader: 'file-loader',
             options: {
-              name: 'static/icons.svg',
+              name: 'static/[name]-[hash:8].[ext]',
             },
           },
         ],

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

@@ -6,7 +6,7 @@ exports[`EC - Button CTA button - icon after renders correctly 1`] = `
     <span class=\\"ecl-button__label\\">CTA Button with icon</span>
 
     <svg
-      class=\\"ecl-icon ecl-icon--xs ecl-button__icon ecl-button__icon--after\\"
+      class=\\"ecl-icon ecl-icon--fluid ecl-button__icon ecl-button__icon--after\\"
       focusable=\\"false\\"
       aria-hidden=\\"true\\"
     >
@@ -21,7 +21,7 @@ exports[`EC - Button CTA button - icon before renders correctly 1`] = `
 "<button class=\\"ecl-button ecl-button--call\\" type=\\"submit\\">
   <span class=\\"ecl-button__container\\">
     <svg
-      class=\\"ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-button__icon ecl-button__icon--before\\"
+      class=\\"ecl-icon ecl-icon--fluid ecl-icon--rotate-90 ecl-button__icon ecl-button__icon--before\\"
       focusable=\\"false\\"
       aria-hidden=\\"true\\"
     >
@@ -39,7 +39,7 @@ exports[`EC - Button CTA renders correctly 1`] = `
     <span class=\\"ecl-button__label\\">Call to action button</span>
 
     <svg
-      class=\\"ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-button__icon ecl-button__icon--after\\"
+      class=\\"ecl-icon ecl-icon--fluid ecl-icon--rotate-90 ecl-button__icon ecl-button__icon--after\\"
       focusable=\\"false\\"
       aria-hidden=\\"true\\"
     >

src/ec/packages/ec-component-button/button.html.twig

@@ -24,6 +24,7 @@
 {% set _label = label|default('') %}
 {% set _variant = variant|default('primary') %}
 {% set _type = type|default('submit') %}
+{% set _icon = icon|default({}) %}
 {% set _icon_position = icon_position|default('after') %}
 {% set _disabled = disabled|default(false) %}
 
@@ -45,22 +46,15 @@
   {% set _extra_attributes = ' disabled' %}
 {% endif %}
 
-{# validate icon #}
-{% if icon is defined and icon is not empty %}
-  {% if (icon.type is not defined or icon.type is empty) or (icon.name is not defined or icon.name is empty) %}
-    {% set icon = null %}
-  {% endif %}
-{% endif %}
-
 {# Print the result #}
 <button class="{{ _css_class }}" type="{{ _type }}"{{ _extra_attributes|raw }}>
   <span class="ecl-button__container">
-    {% if icon and _icon_position == 'before' %}
-      {% include '../ec-component-icon/icon.html.twig' with { icon: icon|merge({ size: 'xs' }), extra_classes: 'ecl-button__icon ecl-button__icon--before' } %}
+    {% if _icon.name is not empty and _icon_position == 'before' %}
+      {% include '../ec-component-icon/icon.html.twig' with { icon: _icon, extra_classes: 'ecl-button__icon ecl-button__icon--before' } %}
     {% endif %}
     <span class="ecl-button__label">{% block label _label %}</span>
-    {% if icon and _icon_position == 'after' %}
-      {% include '../ec-component-icon/icon.html.twig' with { icon: icon|merge({ size: 'xs' }), extra_classes: 'ecl-button__icon ecl-button__icon--after' } %}
+    {% if _icon.name is not empty and _icon_position == 'after' %}
+      {% include '../ec-component-icon/icon.html.twig' with { icon: _icon, extra_classes: 'ecl-button__icon ecl-button__icon--after' } %}
     {% endif %}
   </span>
 </button>

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

@@ -57,6 +57,7 @@ storiesOf('Components/Button', module)
           type: 'ui',
           name: iconsListSelect,
           path: defaultSprite,
+          size: 'fluid',
         },
       });
     },
@@ -84,6 +85,7 @@ storiesOf('Components/Button', module)
           type: 'ui',
           name: iconsListSelect,
           path: defaultSprite,
+          size: 'fluid',
         },
       });
     },
@@ -111,6 +113,7 @@ storiesOf('Components/Button', module)
           type: 'ui',
           name: iconsListSelect,
           path: defaultSprite,
+          size: 'fluid',
         },
       });
     },
@@ -138,6 +141,7 @@ storiesOf('Components/Button', module)
           type: 'ui',
           name: iconsListSelect,
           path: defaultSprite,
+          size: 'fluid',
         },
       });
     },
@@ -165,6 +169,7 @@ storiesOf('Components/Button', module)
           type: 'ui',
           name: iconsListSelect,
           path: defaultSprite,
+          size: 'fluid',
         },
       });
     },

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

@@ -40,6 +40,7 @@ describe('EC - Button', () => {
       dataCall.icon.path = 'static/icons.svg';
       dataCall.icon.type = 'ui';
       dataCall.icon.name = 'corner-arrow';
+      dataCall.icon.size = 'fluid';
 
       renderTwigFile(template, dataCall, (err, html) => {
         expect(html).toMatchSnapshot();
@@ -77,6 +78,7 @@ describe('EC - Button', () => {
       dataCall.icon.path = 'static/icons.svg';
       dataCall.icon.type = 'ui';
       dataCall.icon.name = 'corner-arrow';
+      dataCall.icon.size = 'fluid';
       dataCall.icon_position = 'before';
 
       renderTwigFile(template, dataCall, (err, html) => {
@@ -97,6 +99,7 @@ describe('EC - Button', () => {
           path: 'static/icons.svg',
           type: 'ui',
           name: 'corner-arrow',
+          size: 'fluid',
         },
       };
 

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

@@ -10,9 +10,9 @@ exports[`EC - Card Card default - renders correctly 1`] = `
     ></div>
     <div class=\\"ecl-card__meta\\">Meta 1 | Meta 2 | Meta 3</div>
     <h1 class=\\"ecl-card__title\\">
-      <a href=\\"/example\\" class=\\"ecl-link ecl-link--standalone\\">
-        Better regulation
-      </a>
+      <a href=\\"/example\\" class=\\"ecl-link ecl-link--standalone\\"
+        >Better regulation</a
+      >
     </h1>
   </header>
   <section class=\\"ecl-card__body\\">
@@ -76,25 +76,22 @@ exports[`EC - Card Card tile - renders correctly 1`] = `
         <a
           href=\\"/example-1\\"
           class=\\"ecl-link ecl-link--standalone ecl-card__link\\"
+          >link 1</a
         >
-          link 1
-        </a>
       </li>
       <li class=\\"ecl-card__link-item\\">
         <a
           href=\\"/example-2\\"
           class=\\"ecl-link ecl-link--standalone ecl-card__link\\"
+          >link 2</a
         >
-          link 2
-        </a>
       </li>
       <li class=\\"ecl-card__link-item\\">
         <a
           href=\\"/example-3\\"
           class=\\"ecl-link ecl-link--standalone ecl-card__link\\"
+          >link 3</a
         >
-          link 3
-        </a>
       </li>
     </ul>
   </section>