fix(button): Simplify markup - TWIG-98 (#194)

ec-europa · Nov 5, 2019 · 7dd5c7e · 7dd5c7e
1 parent 4dc1014
commit 7dd5c7e
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 69 deletions.
diff --git a/src/ec/packages/ec-component-button/__snapshots__/button.test.js.snap b/src/ec/packages/ec-component-button/__snapshots__/button.test.js.snap
@@ -142,16 +142,7 @@ exports[`EC - Button Primary renders correctly 1`] = `
   class="ecl-button ecl-button--primary"
   type="submit"
 >
-  <span
-    class="ecl-button__container"
-  >
-    <span
-      class="ecl-button__label"
-      data-ecl-label="true"
-    >
-      Primary button
-    </span>
-  </span>
+  Primary button
 </button>
 `;
 
@@ -160,16 +151,7 @@ exports[`EC - Button Search renders correctly 1`] = `
   class="ecl-button ecl-button--search"
   type="submit"
 >
-  <span
-    class="ecl-button__container"
-  >
-    <span
-      class="ecl-button__label"
-      data-ecl-label="true"
-    >
-      Search button
-    </span>
-  </span>
+  Search button
 </button>
 `;
 
@@ -178,16 +160,7 @@ exports[`EC - Button Secondary renders correctly 1`] = `
   class="ecl-button ecl-button--secondary"
   type="submit"
 >
-  <span
-    class="ecl-button__container"
-  >
-    <span
-      class="ecl-button__label"
-      data-ecl-label="true"
-    >
-      Secondary button
-    </span>
-  </span>
+  Secondary button
 </button>
 `;
 
@@ -196,15 +169,6 @@ exports[`EC - Button Text renders correctly 1`] = `
   class="ecl-button ecl-button--ghost"
   type="submit"
 >
-  <span
-    class="ecl-button__container"
-  >
-    <span
-      class="ecl-button__label"
-      data-ecl-label="true"
-    >
-      Text button
-    </span>
-  </span>
+  Text button
 </button>
 `;
diff --git a/src/ec/packages/ec-component-button/button.html.twig b/src/ec/packages/ec-component-button/button.html.twig
@@ -56,21 +56,25 @@
 {# Print the result #}
 
 <button class="{{ _css_class }}" type="{{ _type }}"{{ _extra_attributes|raw }}>
-  <span class="ecl-button__container">
-    {% if _icon.name is not empty and _icon_position == 'before' %}
-      {% include '@ecl-twig/ec-component-icon/icon.html.twig' with {
-        icon: _icon,
-        extra_classes: 'ecl-button__icon ecl-button__icon--before'
-      } only %}
-    {% endif %}
-    <span class="ecl-button__label" data-ecl-label="true">{%- block label _label|raw %}</span>
-    {% if _icon.name is not empty and _icon_position == 'after' %}
-      {% include '@ecl-twig/ec-component-icon/icon.html.twig' with {
-        icon: _icon,
-        extra_classes: 'ecl-button__icon ecl-button__icon--after'
-      } only %}
-    {% endif %}
-  </span>
+  {%- if _icon.name is not empty %}
+    <span class="ecl-button__container">
+      {% if _icon_position == 'before' %}
+        {% include '@ecl-twig/ec-component-icon/icon.html.twig' with {
+          icon: _icon,
+          extra_classes: 'ecl-button__icon ecl-button__icon--before'
+        } only %}
+      {% endif %}
+      <span class="ecl-button__label" data-ecl-label="true">{% block label _label|raw %}</span>
+      {% if _icon_position == 'after' %}
+        {% include '@ecl-twig/ec-component-icon/icon.html.twig' with {
+          icon: _icon,
+          extra_classes: 'ecl-button__icon ecl-button__icon--after'
+        } only %}
+      {% endif %}
+    </span>
+  {% else %}
+    {{- block('label') -}}
+  {% endif -%}
 </button>
 
 {% endspaceless %}
diff --git a/src/ec/packages/ec-component-button/button.story.js b/src/ec/packages/ec-component-button/button.story.js
@@ -57,7 +57,7 @@ storiesOf('Components/Button', module)
           type: 'ui',
           name: iconsListSelect,
           path: defaultSprite,
-          size: 'fluid',
+          size: 'xs',
         },
       });
     },
@@ -85,7 +85,7 @@ storiesOf('Components/Button', module)
           type: 'ui',
           name: iconsListSelect,
           path: defaultSprite,
-          size: 'fluid',
+          size: 'xs',
         },
       });
     },
@@ -94,7 +94,7 @@ storiesOf('Components/Button', module)
     }
   )
   .add(
-    'call-to-action',
+    'call to action',
     () => {
       const iconsListSelect = select('Icon (sample)', iconsList, null);
 
@@ -113,7 +113,7 @@ storiesOf('Components/Button', module)
           type: 'ui',
           name: iconsListSelect,
           path: defaultSprite,
-          size: 'fluid',
+          size: 'xs',
         },
       });
     },
@@ -141,7 +141,7 @@ storiesOf('Components/Button', module)
           type: 'ui',
           name: iconsListSelect,
           path: defaultSprite,
-          size: 'fluid',
+          size: 'xs',
         },
       });
     },
@@ -169,7 +169,7 @@ storiesOf('Components/Button', module)
           type: 'ui',
           name: iconsListSelect,
           path: defaultSprite,
-          size: 'fluid',
+          size: 'xs',
         },
       });
     },

diff --git a/src/ec/packages/ec-component-button/package.json b/src/ec/packages/ec-component-button/package.json
@@ -2,11 +2,11 @@
   "name": "@ecl-twig/ec-component-button",
   "author": "European Commission",
   "license": "EUPL-1.1",
-  "version": "2.11.2",
+  "version": "2.14.0",
   "description": "ECL Twig - EC Button",
   "devDependencies": {
-    "@ecl/ec-resources-icons": "2.11.0",
-    "@ecl/ec-specs-button": "2.11.0"
+    "@ecl/ec-resources-icons": "2.14.0",
+    "@ecl/ec-specs-button": "2.14.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/src/ec/packages/ec-components/package.json b/src/ec/packages/ec-components/package.json
@@ -15,7 +15,7 @@
     "@ecl-twig/ec-component-breadcrumb-core": "2.13.0",
     "@ecl-twig/ec-component-breadcrumb-harmonised": "2.13.0",
     "@ecl-twig/ec-component-breadcrumb-standardised": "2.13.0",
-    "@ecl-twig/ec-component-button": "2.11.2",
+    "@ecl-twig/ec-component-button": "2.14.0",
     "@ecl-twig/ec-component-card": "2.11.2",
     "@ecl-twig/ec-component-checkbox": "2.11.2",
     "@ecl-twig/ec-component-contextual-navigation": "2.11.2",

diff --git a/yarn.lock b/yarn.lock
@@ -741,6 +741,11 @@
 "@ecl-twig/data-utils@file:utils/data-utils":
   version "0.0.0-dev-only"
 
+"@ecl-twig/[email protected]":
+  version "2.11.2"
+  resolved "https://registry.yarnpkg.com/@ecl-twig/ec-component-button/-/ec-component-button-2.11.2.tgz#44583828aa4570f04d56fec9f7050892828fcbc0"
+  integrity sha512-GOFbdj7GofrovLnoJr2VAIzTx/EbPKrgDlg0bMBxyrJ7mPgSgsXv0eFv4yi6b5MiGlXvdEmFB16d16rq4uirTw==
+
 "@ecl-twig/storybook-addon-code@file:utils/storybook-addon-code":
   version "0.0.0-dev-only"
 
@@ -1331,10 +1336,10 @@
   resolved "https://registry.yarnpkg.com/@ecl/ec-specs-breadcrumb/-/ec-specs-breadcrumb-2.11.0.tgz#4860f033785a3c8bbf3bcd09cd430dc9623bc135"
   integrity sha512-X3kPZkmjsGL+uF25Lg/to+CDHFpof9rD7HZCXyfg71bPMxx8gvapBhU0BoAFCax6janluLtQlZ349nU8Z/DlPQ==
 
-"@ecl/ec-specs-button@2.11.0":
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/@ecl/ec-specs-button/-/ec-specs-button-2.11.0.tgz#64c16d5c73ae6f5fb163762cacbbf214177811fe"
-  integrity sha512-WLeuLAUkBzVRwhnYX6XCn4Hdq4c2PTMEsYg5V4QXy01UFqOZSGScLpfBixDTqIJJhIcViqm9EGileOLnEee31w==
+"@ecl/ec-specs-button@2.14.0":
+  version "2.14.0"
+  resolved "https://registry.yarnpkg.com/@ecl/ec-specs-button/-/ec-specs-button-2.14.0.tgz#37fb0a77cc5ed618a09508fb070b66350219bb2a"
+  integrity sha512-T4phMaf0z1IH6dr4OsFUJOAONQpS2rqaz5lDbvDuc07udLVAXptFYZj3VlJYKLHGyuim1iUyl3pBYHHHzBW0gw==
 
 "@ecl/[email protected]":
   version "2.11.0"