From b81cc4208c69e7077c776da2551973af0063c1a2 Mon Sep 17 00:00:00 2001
From: Piotr Nalepa <piotr.nalepa@ez.no>
Date: Mon, 15 May 2017 11:15:41 +0200
Subject: [PATCH] DEMO-92: Render the Form UI as per the designs for 1/2/3
 column

---
 .../views/fields/captcha/basic.html.twig      | 27 +++++++++++------
 .../views/fields/checkbox/basic.html.twig     | 29 ++++++++++++++-----
 .../views/fields/date/basic.html.twig         | 14 ++++++++-
 .../views/fields/dropdown/basic.html.twig     | 16 ++++++----
 .../views/fields/email/basic.html.twig        | 14 ++++++++-
 .../views/fields/file/basic.html.twig         | 13 ++++++++-
 .../fields/paragraph_text/basic.html.twig     | 13 ++++++++-
 .../views/fields/radio/basic.html.twig        | 29 ++++++++++++++-----
 .../fields/single_line_text/basic.html.twig   | 14 ++++++++-
 .../views/fields/url/basic.html.twig          | 15 +++++++++-
 10 files changed, 148 insertions(+), 36 deletions(-)

diff --git a/app/Resources/EzSystemsFormBuilderBundle/views/fields/captcha/basic.html.twig b/app/Resources/EzSystemsFormBuilderBundle/views/fields/captcha/basic.html.twig
index 2230a1e59..0286b20c0 100644
--- a/app/Resources/EzSystemsFormBuilderBundle/views/fields/captcha/basic.html.twig
+++ b/app/Resources/EzSystemsFormBuilderBundle/views/fields/captcha/basic.html.twig
@@ -1,18 +1,27 @@
 {% extends 'EzSystemsFormBuilderBundle:fields:field.html.twig' %}
-{% trans_default_domain "formcaptcha" %}
+{% trans_default_domain "formfield" %}
 
 {% set imageId = 'captcha__' ~ field.id|replace({'-': '_'}) %}
 {% set captchaImage = ez_form_captcha_path(field) %}
 
 {% block input %}
-    <div class="row">
-        <div class="col-sm-4 col-xs-12">
-            <img class="ezform-captcha-image" id="{{ imageId }}" src="{{ captchaImage }}" alt="" />
-            <p><a class="ezform-captcha-reload btn btn-default btn-sm" href="#">{{ 'formcaptcha.reload_image'|trans }}</a></p>
-        </div>
-        <div class="col-sm-8 col-xs-12">
-            <input type="text" class="ezform-field ezform-captcha form-control" id="{{ field.id }}" placeholder="{{ field.placeholderText }}">
-        </div>
+    <div class="ezform-field-group" data-error-message="{{ 'field.is.required'|trans }}">
+        <span class="ezform-field-indicator"></span>
+        <span class="ezform-field-wrapper">
+            <input
+                id="{{ field.id }}"
+                type="text"
+                class="ezform-field ezform-captcha form-control"
+                placeholder="{{ field.placeholderText }}"
+                {% if field.isRequired %}required{% endif %}
+                >
+        </span>
+    </div>
+    <div class="ezform-captcha-image-wrapper">
+        <img class="ezform-captcha-image" id="{{ imageId }}" src="{{ captchaImage }}" alt="" />
+    </div>
+    <div class="ezform-captcha-reload-wrapper">
+        <a class="ezform-captcha-reload btn btn-default btn-sm" href="#">{{ 'formcaptcha.reload_image'|trans }}</a>
     </div>
 {% endblock %}
 
diff --git a/app/Resources/EzSystemsFormBuilderBundle/views/fields/checkbox/basic.html.twig b/app/Resources/EzSystemsFormBuilderBundle/views/fields/checkbox/basic.html.twig
index 86fa7f6bf..b84fc17ef 100644
--- a/app/Resources/EzSystemsFormBuilderBundle/views/fields/checkbox/basic.html.twig
+++ b/app/Resources/EzSystemsFormBuilderBundle/views/fields/checkbox/basic.html.twig
@@ -1,13 +1,26 @@
 {% extends 'EzSystemsFormBuilderBundle:fields:field.html.twig' %}
+{% trans_default_domain "formfield" %}
 
 {% block input %}
-    {% for option in field.options.choices.value %}
-        {% set checkboxId = field.id ~ '-' ~ loop.index %}
-        <div class="checkbox">
-            <label for="{{ checkboxId }}">
-                <input type="checkbox" value="{{ option.value }}" {% if option.checked %}checked{% endif %} id="{{ checkboxId }}" name="{{ field.id }}[]" class="ezform-field ezform-checkbox">
-                {{ option.value }}
-            </label>
+    <div class="ezform-field-group {% if field.isRequired %}ezform-field-group--required{% endif %}" data-error-message="{{ 'field.is.required'|trans }}">
+        <div class="ezform-field-indicator"></div>
+        <div class="ezform-field-wrapper">
+        {% for option in field.options.choices.value %}
+            {% set checkboxId = field.id ~ '-' ~ loop.index %}
+            <div class="checkbox">
+                <label class="ezform-checkbox-label" for="{{ checkboxId }}">
+                    <input
+                        id="{{ checkboxId }}"
+                        name="{{ field.id }}[]"
+                        type="checkbox"
+                        class="ezform-field ezform-checkbox"
+                        value="{{ option.value }}"
+                        {% if option.checked %}checked{% endif %}
+                        >
+                    {{ option.value }}
+                </label>
+            </div>
+        {% endfor %}
         </div>
-    {% endfor %}
+    </div>
 {% endblock %}
diff --git a/app/Resources/EzSystemsFormBuilderBundle/views/fields/date/basic.html.twig b/app/Resources/EzSystemsFormBuilderBundle/views/fields/date/basic.html.twig
index b053adadc..a220f54fa 100644
--- a/app/Resources/EzSystemsFormBuilderBundle/views/fields/date/basic.html.twig
+++ b/app/Resources/EzSystemsFormBuilderBundle/views/fields/date/basic.html.twig
@@ -1,4 +1,5 @@
 {% extends 'EzSystemsFormBuilderBundle:fields:field.html.twig' %}
+{% trans_default_domain "formfield" %}
 
 {% set placeholder = '' %}
 {% for validator in field.validators if validator.type == 'format' %}
@@ -6,5 +7,16 @@
 {% endfor %}
 
 {% block input %}
-    <input type="text" class="ezform-field ezform-date form-control" id="{{ field.id }}" placeholder="{{ placeholder }}">
+    <div class="ezform-field-group" data-error-message="{{ 'field.is.required'|trans }}">
+        <div class="ezform-field-indicator"></div>
+        <div class="ezform-field-wrapper">
+            <input
+                id="{{ field.id }}"
+                type="text"
+                class="ezform-field ezform-date form-control"
+                placeholder="{{ placeholder }}"
+                {% if field.isRequired %}required{% endif %}
+                >
+        </div>
+    </div>
 {% endblock %}
diff --git a/app/Resources/EzSystemsFormBuilderBundle/views/fields/dropdown/basic.html.twig b/app/Resources/EzSystemsFormBuilderBundle/views/fields/dropdown/basic.html.twig
index 32405e3db..68811741c 100644
--- a/app/Resources/EzSystemsFormBuilderBundle/views/fields/dropdown/basic.html.twig
+++ b/app/Resources/EzSystemsFormBuilderBundle/views/fields/dropdown/basic.html.twig
@@ -1,9 +1,15 @@
 {% extends 'EzSystemsFormBuilderBundle:fields:field.html.twig' %}
+{% trans_default_domain "formfield" %}
 
 {% block input %}
-    <select id="{{ field.id }}" class="ezform-field ezform-dropdown form-control">
-    {% for option in field.options.choices.value %}
-        <option value="{{ option.value }}" {% if option.checked %}selected{% endif %}>{{ option.value }}</option>
-    {% endfor %}
-    </select>
+    <div class="ezform-field-group {% if field.isRequired %}ezform-field-dropdown--required{% endif %}" data-error-message="{{ 'field.is.required'|trans }}">
+        <div class="ezform-field-indicator"></div>
+        <div class="ezform-field-wrapper">
+            <select id="{{ field.id }}" class="ezform-field ezform-dropdown form-control">
+            {% for option in field.options.choices.value %}
+                <option value="{{ option.value }}" {% if option.checked %}selected{% endif %}>{{ option.value }}</option>
+            {% endfor %}
+            </select>
+        </div>
+    </div>
 {% endblock %}
diff --git a/app/Resources/EzSystemsFormBuilderBundle/views/fields/email/basic.html.twig b/app/Resources/EzSystemsFormBuilderBundle/views/fields/email/basic.html.twig
index 8d33e31f8..4eb5a9c4f 100644
--- a/app/Resources/EzSystemsFormBuilderBundle/views/fields/email/basic.html.twig
+++ b/app/Resources/EzSystemsFormBuilderBundle/views/fields/email/basic.html.twig
@@ -1,5 +1,17 @@
 {% extends 'EzSystemsFormBuilderBundle:fields:field.html.twig' %}
+{% trans_default_domain "formfield" %}
 
 {% block input %}
-    <input type="email" class="ezform-field ezform-email form-control" id="{{ field.id }}" placeholder="{{ field.placeholderText }}">
+    <div class="ezform-field-group" data-error-message="{{ 'field.is.required'|trans }}">
+        <div class="ezform-field-indicator"></div>
+        <div class="ezform-field-wrapper">
+            <input
+                id="{{ field.id }}"
+                type="email"
+                class="ezform-field ezform-email form-control"
+                placeholder="{{ field.placeholderText }}"
+                {% if field.isRequired %}required{% endif %}
+                >
+        </div>
+    </div>
 {% endblock %}
diff --git a/app/Resources/EzSystemsFormBuilderBundle/views/fields/file/basic.html.twig b/app/Resources/EzSystemsFormBuilderBundle/views/fields/file/basic.html.twig
index 5a3f09c40..24e6d222b 100644
--- a/app/Resources/EzSystemsFormBuilderBundle/views/fields/file/basic.html.twig
+++ b/app/Resources/EzSystemsFormBuilderBundle/views/fields/file/basic.html.twig
@@ -1,5 +1,16 @@
 {% extends 'EzSystemsFormBuilderBundle:fields:field.html.twig' %}
+{% trans_default_domain "formfield" %}
 
 {% block input %}
-    <input type="file" class="ezform-field ezform-file" id="{{ field.id }}" placeholder="{{ field.placeholderText }}">
+    <div class="ezform-field-group" data-error-message="{{ 'field.is.required'|trans }}">
+        <div class="ezform-field-wrapper">
+            <input
+                id="{{ field.id }}"
+                type="file"
+                class="ezform-field ezform-file"
+                placeholder="{{ field.placeholderText }}"
+                {% if field.isRequired %}required{% endif %}
+                >
+        </div>
+    </div>
 {% endblock %}
diff --git a/app/Resources/EzSystemsFormBuilderBundle/views/fields/paragraph_text/basic.html.twig b/app/Resources/EzSystemsFormBuilderBundle/views/fields/paragraph_text/basic.html.twig
index 7d2d0371a..e17cd411a 100644
--- a/app/Resources/EzSystemsFormBuilderBundle/views/fields/paragraph_text/basic.html.twig
+++ b/app/Resources/EzSystemsFormBuilderBundle/views/fields/paragraph_text/basic.html.twig
@@ -1,5 +1,16 @@
 {% extends 'EzSystemsFormBuilderBundle:fields:field.html.twig' %}
+{% trans_default_domain "formfield" %}
 
 {% block input %}
-    <textarea type="text" class="ezform-field ezform-paragraph_text form-control" id="{{ field.id }}" placeholder="{{ field.placeholderText }}"></textarea>
+    <div class="ezform-field-group" data-error-message="{{ 'field.is.required'|trans }}">
+        <div class="ezform-field-indicator"></div>
+        <div class="ezform-field-wrapper">
+            <textarea
+                id="{{ field.id }}"
+                class="ezform-field ezform-paragraph_text form-control"
+                placeholder="{{ field.placeholderText }}"
+                {% if field.isRequired %}required{% endif %}
+                ></textarea>
+        </div>
+    </div>
 {% endblock %}
diff --git a/app/Resources/EzSystemsFormBuilderBundle/views/fields/radio/basic.html.twig b/app/Resources/EzSystemsFormBuilderBundle/views/fields/radio/basic.html.twig
index d056c1221..84e2987a9 100644
--- a/app/Resources/EzSystemsFormBuilderBundle/views/fields/radio/basic.html.twig
+++ b/app/Resources/EzSystemsFormBuilderBundle/views/fields/radio/basic.html.twig
@@ -1,13 +1,26 @@
 {% extends 'EzSystemsFormBuilderBundle:fields:field.html.twig' %}
+{% trans_default_domain "formfield" %}
 
 {% block input %}
-    {% for option in field.options.choices.value %}
-        {% set radioId = field.id ~ '-' ~ loop.index %}
-        <div class="radio">
-            <label for="{{ radioId }}">
-                <input type="radio" value="{{ option.value }}" {% if option.checked %}checked{% endif %} id="{{ radioId }}" name="{{ field.id }}" class="ezform-field ezform-radio">
-                {{ option.value }}
-            </label>
+    <div class="ezform-field-group {% if field.isRequired %}ezform-field-group--required{% endif %}" data-error-message="{{ 'field.is.required'|trans }}">
+        <div class="ezform-field-indicator"></div>
+        <div class="ezform-field-wrapper">
+        {% for option in field.options.choices.value %}
+            {% set radioId = field.id ~ '-' ~ loop.index %}
+            <div class="radio">
+                <label class="ezform-radio-label" for="{{ radioId }}">
+                    <input
+                        id="{{ radioId }}"
+                        name="{{ field.id }}"
+                        type="radio"
+                        class="ezform-field ezform-radio"
+                        value="{{ option.value }}"
+                        {% if option.checked %}checked{% endif %}
+                        >
+                    {{ option.value }}
+                </label>
+            </div>
+        {% endfor %}
         </div>
-    {% endfor %}
+    </div>
 {% endblock %}
diff --git a/app/Resources/EzSystemsFormBuilderBundle/views/fields/single_line_text/basic.html.twig b/app/Resources/EzSystemsFormBuilderBundle/views/fields/single_line_text/basic.html.twig
index 6489dc6f6..601ed64ec 100644
--- a/app/Resources/EzSystemsFormBuilderBundle/views/fields/single_line_text/basic.html.twig
+++ b/app/Resources/EzSystemsFormBuilderBundle/views/fields/single_line_text/basic.html.twig
@@ -1,5 +1,17 @@
 {% extends 'EzSystemsFormBuilderBundle:fields:field.html.twig' %}
+{% trans_default_domain "formfield" %}
 
 {% block input %}
-    <input type="text" class="ezform-field ezform-single_line_text form-control" id="{{ field.id }}" placeholder="{{ field.placeholderText }}">
+    <div class="ezform-field-group" data-error-message="{{ 'field.is.required'|trans }}">
+        <div class="ezform-field-indicator"></div>
+        <div class="ezform-field-wrapper">
+            <input
+                id="{{ field.id }}"
+                type="text"
+                class="ezform-field ezform-single_line_text form-control"
+                placeholder="{{ field.placeholderText }}"
+                {% if field.isRequired %}required{% endif %}
+                >
+        </div>
+    </div>
 {% endblock %}
diff --git a/app/Resources/EzSystemsFormBuilderBundle/views/fields/url/basic.html.twig b/app/Resources/EzSystemsFormBuilderBundle/views/fields/url/basic.html.twig
index e5389360c..2189d7f02 100644
--- a/app/Resources/EzSystemsFormBuilderBundle/views/fields/url/basic.html.twig
+++ b/app/Resources/EzSystemsFormBuilderBundle/views/fields/url/basic.html.twig
@@ -1,5 +1,18 @@
 {% extends 'EzSystemsFormBuilderBundle:fields:field.html.twig' %}
+{% trans_default_domain "formfield" %}
 
 {% block input %}
-    <input type="url" class="ezform-field ezform-url form-control" id="{{ field.id }}" placeholder="{{ field.placeholderText }}" value="http://">
+    <div class="ezform-field-group" data-error-message="{{ 'field.is.required'|trans }}">
+        <div class="ezform-field-indicator"></div>
+        <div class="ezform-field-wrapper">
+            <input
+                id="{{ field.id }}"
+                type="url"
+                class="ezform-field ezform-url form-control"
+                value="http://"
+                placeholder="{{ field.placeholderText }}"
+                {% if field.isRequired %}required{% endif %}
+                >
+        </div>
+    </div>
 {% endblock %}