From 9fc9a925017711f58db3bc5f718633d761322383 Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Mon, 27 Jan 2020 17:26:16 +0100
Subject: [PATCH] feat(search-form): (almost) green diff with ECL - TWIG-238
 (#301)

---
 .../ec-component-button/ecl-button.html.twig  |  2 +-
 .../__snapshots__/search-form.test.js.snap    | 64 +++++++++++++------
 .../ec-component-search-form/demo/data.js     |  5 +-
 .../search-form.test.js                       | 29 ++-------
 4 files changed, 53 insertions(+), 47 deletions(-)

diff --git a/src/ec/packages/ec-component-button/ecl-button.html.twig b/src/ec/packages/ec-component-button/ecl-button.html.twig
index 3ab39a6e5..3da66ead0 100644
--- a/src/ec/packages/ec-component-button/ecl-button.html.twig
+++ b/src/ec/packages/ec-component-button/ecl-button.html.twig
@@ -55,7 +55,7 @@
 
 {# Print the result #}
 
-<button class="{{ _css_class }}" type="{{ _type }}"{{ _extra_attributes|raw }}>
+<button class="{{ _css_class }}" type="{{ _type }}" {{ _extra_attributes|raw }}>
   {%- if _icon.name is not empty %}
     <span class="ecl-button__container">
       {% if _icon_position == 'before' %}
diff --git a/src/ec/packages/ec-component-search-form/__snapshots__/search-form.test.js.snap b/src/ec/packages/ec-component-search-form/__snapshots__/search-form.test.js.snap
index 9e40888b2..bb2fc22f1 100644
--- a/src/ec/packages/ec-component-search-form/__snapshots__/search-form.test.js.snap
+++ b/src/ec/packages/ec-component-search-form/__snapshots__/search-form.test.js.snap
@@ -8,14 +8,20 @@ exports[`EC - Search Form Default renders correctly 1`] = `
   <div
     class="ecl-form-group ecl-form-group--text-input"
   >
+    <label
+      class="ecl-form-label ecl-search-form__label"
+      for="search-input"
+    >
+      Search
+    </label>
     <input
       class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
-      id="input-email"
-      name="email"
-      type="text"
+      id="search-input"
+      type="search"
     />
   </div>
   <button
+    aria-label="Search"
     class="ecl-button ecl-button--search ecl-search-form__button"
     type="submit"
   >
@@ -30,12 +36,12 @@ exports[`EC - Search Form Default renders correctly 1`] = `
       </span>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--fluid ecl-button__icon ecl-button__icon--after"
+        class="ecl-icon ecl-icon--xs ecl-button__icon ecl-button__icon--after"
         data-ecl-icon=""
         focusable="false"
       >
         <use
-          xlink:href="static/icons.svg#general--search"
+          xlink:href="/icons.svg#general--search"
         />
       </svg>
     </span>
@@ -53,14 +59,20 @@ exports[`EC - Search Form Default renders correctly with extra attributes 1`] =
   <div
     class="ecl-form-group ecl-form-group--text-input"
   >
+    <label
+      class="ecl-form-label ecl-search-form__label"
+      for="search-input"
+    >
+      Search
+    </label>
     <input
       class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
-      id="input-email"
-      name="email"
-      type="text"
+      id="search-input"
+      type="search"
     />
   </div>
   <button
+    aria-label="Search"
     class="ecl-button ecl-button--search ecl-search-form__button"
     type="submit"
   >
@@ -75,12 +87,12 @@ exports[`EC - Search Form Default renders correctly with extra attributes 1`] =
       </span>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--fluid ecl-button__icon ecl-button__icon--after"
+        class="ecl-icon ecl-icon--xs ecl-button__icon ecl-button__icon--after"
         data-ecl-icon=""
         focusable="false"
       >
         <use
-          xlink:href="static/icons.svg#general--search"
+          xlink:href="/icons.svg#general--search"
         />
       </svg>
     </span>
@@ -96,14 +108,20 @@ exports[`EC - Search Form Default renders correctly with extra class names 1`] =
   <div
     class="ecl-form-group ecl-form-group--text-input"
   >
+    <label
+      class="ecl-form-label ecl-search-form__label"
+      for="search-input"
+    >
+      Search
+    </label>
     <input
       class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
-      id="input-email"
-      name="email"
-      type="text"
+      id="search-input"
+      type="search"
     />
   </div>
   <button
+    aria-label="Search"
     class="ecl-button ecl-button--search ecl-search-form__button"
     type="submit"
   >
@@ -118,12 +136,12 @@ exports[`EC - Search Form Default renders correctly with extra class names 1`] =
       </span>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--fluid ecl-button__icon ecl-button__icon--after"
+        class="ecl-icon ecl-icon--xs ecl-button__icon ecl-button__icon--after"
         data-ecl-icon=""
         focusable="false"
       >
         <use
-          xlink:href="static/icons.svg#general--search"
+          xlink:href="/icons.svg#general--search"
         />
       </svg>
     </span>
@@ -139,14 +157,20 @@ exports[`EC - Search Form Default renders correctly with extra form elements 1`]
   <div
     class="ecl-form-group ecl-form-group--text-input"
   >
+    <label
+      class="ecl-form-label ecl-search-form__label"
+      for="search-input"
+    >
+      Search
+    </label>
     <input
       class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
-      id="input-email"
-      name="email"
-      type="text"
+      id="search-input"
+      type="search"
     />
   </div>
   <button
+    aria-label="Search"
     class="ecl-button ecl-button--search ecl-search-form__button"
     type="submit"
   >
@@ -161,12 +185,12 @@ exports[`EC - Search Form Default renders correctly with extra form elements 1`]
       </span>
       <svg
         aria-hidden="true"
-        class="ecl-icon ecl-icon--fluid ecl-button__icon ecl-button__icon--after"
+        class="ecl-icon ecl-icon--xs ecl-button__icon ecl-button__icon--after"
         data-ecl-icon=""
         focusable="false"
       >
         <use
-          xlink:href="static/icons.svg#general--search"
+          xlink:href="/icons.svg#general--search"
         />
       </svg>
     </span>
diff --git a/src/ec/packages/ec-component-search-form/demo/data.js b/src/ec/packages/ec-component-search-form/demo/data.js
index 343249049..8a673a060 100644
--- a/src/ec/packages/ec-component-search-form/demo/data.js
+++ b/src/ec/packages/ec-component-search-form/demo/data.js
@@ -3,9 +3,9 @@ import specs from '@ecl/ec-specs-search-form/demo/data';
 const data = {
   text_input: {
     id: specs.textInputId,
-    name: 'search',
     extra_classes: 'ecl-search-form__text-input',
     label: specs.inputLabel,
+    type: 'search',
   },
   button: {
     variant: 'search',
@@ -13,10 +13,11 @@ const data = {
       type: 'general',
       name: 'search',
       path: '/icons.svg',
-      size: 'fluid',
+      size: 'xs',
     },
     label: specs.buttonLabel,
     extra_classes: 'ecl-search-form__button',
+    extra_attributes: [{ name: 'aria-label', value: 'Search' }],
   },
 };
 
diff --git a/src/ec/packages/ec-component-search-form/search-form.test.js b/src/ec/packages/ec-component-search-form/search-form.test.js
index 0d74b61c6..2fa838d40 100644
--- a/src/ec/packages/ec-component-search-form/search-form.test.js
+++ b/src/ec/packages/ec-component-search-form/search-form.test.js
@@ -1,40 +1,21 @@
 import { merge, renderTwigFileAsNode } from '@ecl-twig/test-utils';
+import data from './demo/data';
 
 describe('EC - Search Form', () => {
   const template =
     '@ecl-twig/ec-component-search-form/ecl-search-form.html.twig';
   const render = params => renderTwigFileAsNode(template, params);
-  const defaultIconPath = 'static/icons.svg';
 
   describe('Default', () => {
-    const options = {
-      text_input: {
-        id: 'input-email',
-        name: 'email',
-        extra_classes: 'ecl-search-form__text-input',
-      },
-      button: {
-        variant: 'search',
-        icon: {
-          type: 'general',
-          name: 'search',
-          path: defaultIconPath,
-          size: 'fluid',
-        },
-        label: 'Search',
-        extra_classes: 'ecl-search-form__button',
-      },
-    };
-
     test('renders correctly', () => {
       expect.assertions(1);
-      return expect(render(options)).resolves.toMatchSnapshot();
+      return expect(render(data)).resolves.toMatchSnapshot();
     });
 
     test('renders correctly with extra class names', () => {
       expect.assertions(1);
 
-      const withExtraClasses = merge(options, {
+      const withExtraClasses = merge(data, {
         extra_classes: 'custom-class custom-class--test',
       });
 
@@ -44,7 +25,7 @@ describe('EC - Search Form', () => {
     test('renders correctly with extra attributes', () => {
       expect.assertions(1);
 
-      const withExtraAttributes = merge(options, {
+      const withExtraAttributes = merge(data, {
         extra_attributes: [
           { name: 'data-test', value: 'data-test-value' },
           { name: 'data-test-1', value: 'data-test-value-1' },
@@ -57,7 +38,7 @@ describe('EC - Search Form', () => {
     test('renders correctly with extra form elements', () => {
       expect.assertions(1);
 
-      const withExtraFormElements = merge(options, {
+      const withExtraFormElements = merge(data, {
         extra_form_elements:
           '<input type="hidden" id="custId" name="custId" value="1">',
       });