adding form input macro

Author: EvanLovely

dist/_macros/forms.twig

@@ -0,0 +1,21 @@
+{% macro input(name, type, classes, label, placeholder, value, size, required) %}
+    {% set show_label = label|default(true) %}
+    <div class="field-container {{ classes }}">
+        {% if show_label %}
+            <label class="{{ classes }}">{{ label|default(name|title) }}{% if required %}<abbr title="Required">*</abbr>{% endif %}
+        {% endif %}
+        <input type="{{ type|default('text') }}" name="{{ name }}" placeholder="{{ placeholder|default(name|title) }}" value="{{ value|e }}" size="{{ size|default(20) }}"{% if required %} required{% endif %} />
+        {% if show_label %}</label>{% endif %}
+    </div>
+{% endmacro %}
+
+{% macro textarea(label, placeholder, rows, classes) %}
+    {% set show_label = label|default(true) %}
+    <div class="field-container {{ classes }}">
+        {% if show_label %}
+            <label class="{{ classes }}">{{ label|default(name|title) }}{% if required %}<abbr title="Required">*</abbr>{% endif %}
+        {% endif %}
+        <textarea placeholder="{{ placeholder|default(name|title) }}" rows="{{ rows|default(8) }}"{% if required %} required{% endif %}></textarea>
+        {% if show_label %}</label>{% endif %}
+    </div>
+{% endmacro %}

dist/_patterns/00-atoms/05-forms/00-text-fields.twig

@@ -1,38 +1,13 @@
+{% import "forms.twig" as forms %}
 <fieldset>
-    <div class="field-container">
-        <label for="text">Text Input <abbr title="Required">*</abbr></label>
-        <input id="text" type="text" placeholder="Text Input">
-    </div>
-    <div class="field-container">
-        <label for="password">Password</label>
-        <input id="password" type="password" placeholder="Type your Password">
-    </div>
-    <div class="field-container">
-        <label for="webaddress">Web Address</label>
-        <input id="webaddress" type="url" placeholder="http://yoursite.com">
-    </div>
-    <div class="field-container">
-        <label for="emailaddress">Email Address</label>
-        <input id="emailaddress" type="email" placeholder="[email protected]">
-    </div>
-    <div class="field-container">
-        <label for="search">Search</label>
-        <input id="search" type="search" placeholder="Enter Search Term">
-    </div>
-    <div class="field-container">
-        <label for="text">Number Input <abbr title="Required">*</abbr></label>
-        <input id="text" type="number" placeholder="Enter a Number" pattern="[0-9]*">
-    </div>
-    <div class="field-container">
-        <label for="textarea">Textarea</label>
-        <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
-    </div>
-    <div class="field-container">
-        <label class="error">Error Input</label>
-        <input class="is-error" type="text" placeholder="Text Input">
-    </div>
-    <div class="field-container">
-        <label  class="valid">Valid</label>
-        <input  class="is-valid" type="text" placeholder="Text Input">
-    </div>
-</fieldset>
+    {{ forms.input('Text Input') }}
+    {{ forms.input('Password', 'password') }}
+    {{ forms.input('Web Address', 'url') }}
+    {{ forms.input('Email', 'email') }}
+    {{ forms.input('Search', 'search') }}
+    {{ forms.input('Number', 'number') }}
+    {{ forms.input('Number', 'number') }}
+    {{ forms.textarea('Textarea', 'Enter your message here') }}
+    {{ forms.input('Error Input', 'text', 'error') }}
+    {{ forms.input('Valid Input', 'text', 'valid') }}
+</fieldset>