@moreonion/foundist 2.1.1 → 3.0.0

package/src/html/includes/e2t-single-form.html

@@ -1,33 +1,35 @@
+{% from "./form-items/_macros.html" import button %}
+
 <div id="form">
-  <form method="post" accept-charset="UTF-8" novalidate="novalidate">
-    <include src="form-items/webform-steps.html"></include>
+    <form method="post" accept-charset="UTF-8" novalidate="novalidate">
+        {% include "./form-items/webform-steps.html" %}
 
-    <div class="form-item">
-      <div class="email-to-target-selector-wrapper webform-prefill-exclude form-wrapper">
-        <div class="email-to-target-target email-to-target-single form-wrapper">
-          <p class="target">Rt Hon Mary Field MP </p>
-          <div class="form-item">
-            <label for="subject">Subject</label>
-            <input type="text" id="subject" name="subject" value="Give cats a chance" size="60" maxlength="128" class="form-text">
-          </div>
-          <pre class="email-to-target-header">Dear Rt Hon Mary Field MP,</pre>
-          <div class="form-item">
-            <label for="message">Your message</label>
-            <div class="form-textarea-wrapper">
-              <textarea id="message" name="message" cols="60" rows="5" class="form-textarea"></textarea>
-            </div>
-          </div>
-          <!-- linthtml-configure preset="none" -->
-          <pre class="email-to-target-footer">I look forward to hearing from you.
+        <div class="form-item">
+            <div class="email-to-target-selector-wrapper webform-prefill-exclude form-wrapper">
+                <div class="email-to-target-target email-to-target-single form-wrapper">
+                    <p class="target">Rt Hon Mary Field MP </p>
+                    <div class="form-item">
+                        <label for="subject">Subject</label>
+                        <input type="text" id="subject" name="subject" value="Give cats a chance" size="60" maxlength="128" class="form-text">
+                    </div>
+                    <pre class="email-to-target-header">Dear Rt Hon Mary Field MP,</pre>
+                    <div class="form-item">
+                        <label for="message">Your message</label>
+                        <div class="form-textarea-wrapper">
+                            <textarea id="message" name="message" cols="60" rows="5" class="form-textarea"></textarea>
+                        </div>
+                    </div>
+                    <!-- linthtml-configure preset="none" -->
+                    <pre class="email-to-target-footer">I look forward to hearing from you.
 
-  Kind regards,
-  Jane Smith
-  100, Somewhere Road
-  A12 34B</pre>
+Kind regards,
+Jane Smith
+100, Somewhere Road
+A12 34B</pre>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
 
-    <include src="form-items/submit-button.html" locals='{"value": "Send message"}'></include>
-  </form>
+        {{ button("Send message", class="expanded primary button large") }}
+    </form>
 </div>

package/src/html/includes/form-items/_macros.html

@@ -0,0 +1,76 @@
+{# Macros for re-use accross templates %}
+
+{# Macro for buttons #}
+{% macro button(value, type="submit", class="button") %}
+    <input type="{{ type }}" value="{{ value }}" class="{{ class }}" />
+{% endmacro %}
+
+{# Macro for generating labels #}
+{% macro label(label, id, required=false, error=false, hide_label=false) %}
+    <label
+        for="{{ id }}"
+        {% if hide_label %}
+            class="show-for-sr"
+        {% elif error %}
+            class="is-invalid-label"
+        {% endif %}
+    >
+        {{ label }}
+        {% if props.required %}
+            <span class="form-required" title="This field is required.">*</span>
+        {% endif %}
+    </label>
+{% endmacro %}
+
+{# Macro for simple inputs #}
+{% macro input(label_text, props={}, description="", error="", hide_label=false) %}
+    {% set id = props.id | default(label_text | lower | replace(" ", "-")) %}
+    <div class="form-item">
+        {{ label(label_text, id, props.required, error, hide_label) }}
+        <input
+            {% if not props.id %}id="{{ id }}"{% endif %}
+            {% if not props.name %}name="{{ id | replace('-', '_') }}"{% endif %}
+            {% if not props.type %}type="text"{% endif %}
+            {% for property, value in props %}
+                {{ property }}="{{ value }}"
+            {% endfor %}
+            {% if error %}class="is-invalid-input"{% endif %}
+        />
+        {% if error %}
+            <label for="{{ id }}" class="form-error is-visible">{{ error }}</label>
+        {% endif %}
+        {% if description %}
+            <div class="help-text">{{ description }}</div>
+        {% endif %}
+    </div>
+{% endmacro %}
+
+{# Macro for example select #}
+{% macro select(label_text, props={}, description="", error="", hide_label=false) %}
+    {% set id = props.id | default(label_text | lower | replace(" ", "-")) %}
+    <div class="form-item">
+        {{ label(label_text, id, props.required, error, hide_label) }}
+        <select
+            data-select-two="select-two"
+            {% if not props.id %}id="{{ id }}"{% endif %}
+            {% if not props.name %}name="{{ id | replace('-', '_') }}"{% endif %}
+            {% for property, value in props %}
+                {{ property }}="{{ value }}"
+            {% endfor %}
+            {% if error %}class="is-invalid-input"{% endif %}
+        >
+            {% include "./country-select-options.html" %}
+        </select>
+        {% if error %}
+            <label for="{{ id }}" class="form-error is-visible">{{ error }}</label>
+        {% endif %}
+        {% if description %}
+            <div class="help-text">{{ description }}</div>
+        {% endif %}
+    </div>
+{% endmacro %}
+
+{# Macro for hidden input #}
+{% macro hidden(value) %}
+    <input type="hidden" value="{{ value }}" />
+{% endmacro %}

package/src/html/includes/form-items/checkboxes.html

@@ -1,21 +1,21 @@
 <div class="form-item extra-spacing">
-  <label for="checkboxes-1">Which topics would interest you?</label>
-  <div id="checkboxes" class="form-checkboxes">
-    <div class="form-item form-type-checkbox">
-      <input type="checkbox" id="checkboxes-1" name="checkboxes-1" value="1" class="form-checkbox">
-      <label class="option" for="checkboxes-1">Global warming</label>
+    <label for="checkboxes-1">Which topics would interest you?</label>
+    <div id="checkboxes" class="form-checkboxes">
+        <div class="form-item form-type-checkbox">
+            <input type="checkbox" id="checkboxes-1" name="checkboxes-1" value="1" class="form-checkbox">
+            <label class="option" for="checkboxes-1">Global warming</label>
+        </div>
+        <div class="form-item form-type-checkbox">
+            <input type="checkbox" id="checkboxes-2" name="checkboxes-2" value="2" class="form-checkbox">
+            <label class="option" for="checkboxes-2">Biodiversity</label>
+        </div>
+        <div class="form-item form-type-checkbox">
+            <input type="checkbox" id="checkboxes-3" name="checkboxes-3" value="3" class="form-checkbox">
+            <label class="option" for="checkboxes-3">Fair trade</label>
+        </div>
+        <div class="form-item form-type-checkbox">
+            <input type="checkbox" id="checkboxes-4" name="checkboxes-4" value="4" class="form-checkbox">
+            <label class="option" for="checkboxes-4">Something quite complicated with a very long label</label>
+        </div>
     </div>
-    <div class="form-item form-type-checkbox">
-      <input type="checkbox" id="checkboxes-2" name="checkboxes-2" value="2" class="form-checkbox">
-      <label class="option" for="checkboxes-2">Biodiversity</label>
-    </div>
-    <div class="form-item form-type-checkbox">
-      <input type="checkbox" id="checkboxes-3" name="checkboxes-3" value="3" class="form-checkbox">
-      <label class="option" for="checkboxes-3">Fair trade</label>
-    </div>
-    <div class="form-item form-type-checkbox">
-      <input type="checkbox" id="checkboxes-4" name="checkboxes-4" value="4" class="form-checkbox">
-      <label class="option" for="checkboxes-4">Something quite complicated with a very long label</label>
-    </div>
-  </div>
 </div>

package/src/html/includes/form-items/country-select-options.html

@@ -0,0 +1,253 @@
+<option value="no_selection" selected="selected">—Select a country—</option>
+<option value="AF">Afghanistan</option>
+<option value="AX">Aland Islands</option>
+<option value="AL">Albania</option>
+<option value="DZ">Algeria</option>
+<option value="AS">American Samoa</option>
+<option value="AD">Andorra</option>
+<option value="AO">Angola</option>
+<option value="AI">Anguilla</option>
+<option value="AQ">Antarctica</option>
+<option value="AG">Antigua and Barbuda</option>
+<option value="AR">Argentina</option>
+<option value="AM">Armenia</option>
+<option value="AW">Aruba</option>
+<option value="AU">Australia</option>
+<option value="AT">Austria</option>
+<option value="AZ">Azerbaijan</option>
+<option value="BS">Bahamas</option>
+<option value="BH">Bahrain</option>
+<option value="BD">Bangladesh</option>
+<option value="BB">Barbados</option>
+<option value="BY">Belarus</option>
+<option value="BE">Belgium</option>
+<option value="BZ">Belize</option>
+<option value="BJ">Benin</option>
+<option value="BM">Bermuda</option>
+<option value="BT">Bhutan</option>
+<option value="BO">Bolivia</option>
+<option value="BA">Bosnia and Herzegovina</option>
+<option value="BW">Botswana</option>
+<option value="BV">Bouvet Island</option>
+<option value="BR">Brazil</option>
+<option value="IO">British Indian Ocean Territory</option>
+<option value="VG">British Virgin Islands</option>
+<option value="BN">Brunei</option>
+<option value="BG">Bulgaria</option>
+<option value="BF">Burkina Faso</option>
+<option value="BI">Burundi</option>
+<option value="KH">Cambodia</option>
+<option value="CM">Cameroon</option>
+<option value="CA">Canada</option>
+<option value="CV">Cape Verde</option>
+<option value="BQ">Caribbean Netherlands</option>
+<option value="KY">Cayman Islands</option>
+<option value="CF">Central African Republic</option>
+<option value="TD">Chad</option>
+<option value="CL">Chile</option>
+<option value="CN">China</option>
+<option value="CX">Christmas Island</option>
+<option value="CC">Cocos (Keeling) Islands</option>
+<option value="CO">Colombia</option>
+<option value="KM">Comoros</option>
+<option value="CG">Congo (Brazzaville)</option>
+<option value="CD">Congo (Kinshasa)</option>
+<option value="CK">Cook Islands</option>
+<option value="CR">Costa Rica</option>
+<option value="HR">Croatia</option>
+<option value="CU">Cuba</option>
+<option value="CW">Curaçao</option>
+<option value="CY">Cyprus</option>
+<option value="CZ">Czech Republic</option>
+<option value="DK">Denmark</option>
+<option value="DJ">Djibouti</option>
+<option value="DM">Dominica</option>
+<option value="DO">Dominican Republic</option>
+<option value="EC">Ecuador</option>
+<option value="EG">Egypt</option>
+<option value="SV">El Salvador</option>
+<option value="GQ">Equatorial Guinea</option>
+<option value="ER">Eritrea</option>
+<option value="EE">Estonia</option>
+<option value="ET">Ethiopia</option>
+<option value="FK">Falkland Islands</option>
+<option value="FO">Faroe Islands</option>
+<option value="FJ">Fiji</option>
+<option value="FI">Finland</option>
+<option value="FR">France</option>
+<option value="GF">French Guiana</option>
+<option value="PF">French Polynesia</option>
+<option value="TF">French Southern Territories</option>
+<option value="GA">Gabon</option>
+<option value="GM">Gambia</option>
+<option value="GE">Georgia</option>
+<option value="DE">Germany</option>
+<option value="GH">Ghana</option>
+<option value="GI">Gibraltar</option>
+<option value="GR">Greece</option>
+<option value="GL">Greenland</option>
+<option value="GD">Grenada</option>
+<option value="GP">Guadeloupe</option>
+<option value="GU">Guam</option>
+<option value="GT">Guatemala</option>
+<option value="GG">Guernsey</option>
+<option value="GN">Guinea</option>
+<option value="GW">Guinea-Bissau</option>
+<option value="GY">Guyana</option>
+<option value="HT">Haiti</option>
+<option value="HM">Heard Island and McDonald Islands</option>
+<option value="HN">Honduras</option>
+<option value="HK">Hong Kong S.A.R., China</option>
+<option value="HU">Hungary</option>
+<option value="IS">Iceland</option>
+<option value="IN">India</option>
+<option value="ID">Indonesia</option>
+<option value="IR">Iran</option>
+<option value="IQ">Iraq</option>
+<option value="IE">Ireland</option>
+<option value="IM">Isle of Man</option>
+<option value="IL">Israel</option>
+<option value="IT">Italy</option>
+<option value="CI">Ivory Coast</option>
+<option value="JM">Jamaica</option>
+<option value="JP">Japan</option>
+<option value="JE">Jersey</option>
+<option value="JO">Jordan</option>
+<option value="KZ">Kazakhstan</option>
+<option value="KE">Kenya</option>
+<option value="KI">Kiribati</option>
+<option value="XK">Kosovo</option>
+<option value="KW">Kuwait</option>
+<option value="KG">Kyrgyzstan</option>
+<option value="LA">Laos</option>
+<option value="LV">Latvia</option>
+<option value="LB">Lebanon</option>
+<option value="LS">Lesotho</option>
+<option value="LR">Liberia</option>
+<option value="LY">Libya</option>
+<option value="LI">Liechtenstein</option>
+<option value="LT">Lithuania</option>
+<option value="LU">Luxembourg</option>
+<option value="MO">Macao S.A.R., China</option>
+<option value="MK">Macedonia</option>
+<option value="MG">Madagascar</option>
+<option value="MW">Malawi</option>
+<option value="MY">Malaysia</option>
+<option value="MV">Maldives</option>
+<option value="ML">Mali</option>
+<option value="MT">Malta</option>
+<option value="MH">Marshall Islands</option>
+<option value="MQ">Martinique</option>
+<option value="MR">Mauritania</option>
+<option value="MU">Mauritius</option>
+<option value="YT">Mayotte</option>
+<option value="MX">Mexico</option>
+<option value="FM">Micronesia</option>
+<option value="MD">Moldova</option>
+<option value="MC">Monaco</option>
+<option value="MN">Mongolia</option>
+<option value="ME">Montenegro</option>
+<option value="MS">Montserrat</option>
+<option value="MA">Morocco</option>
+<option value="MZ">Mozambique</option>
+<option value="MM">Myanmar</option>
+<option value="NA">Namibia</option>
+<option value="NR">Nauru</option>
+<option value="NP">Nepal</option>
+<option value="NL">Netherlands</option>
+<option value="AN">Netherlands Antilles</option>
+<option value="NC">New Caledonia</option>
+<option value="NZ">New Zealand</option>
+<option value="NI">Nicaragua</option>
+<option value="NE">Niger</option>
+<option value="NG">Nigeria</option>
+<option value="NU">Niue</option>
+<option value="NF">Norfolk Island</option>
+<option value="MP">Northern Mariana Islands</option>
+<option value="KP">North Korea</option>
+<option value="NO">Norway</option>
+<option value="OM">Oman</option>
+<option value="PK">Pakistan</option>
+<option value="PW">Palau</option>
+<option value="PS">Palestinian Territory</option>
+<option value="PA">Panama</option>
+<option value="PG">Papua New Guinea</option>
+<option value="PY">Paraguay</option>
+<option value="PE">Peru</option>
+<option value="PH">Philippines</option>
+<option value="PN">Pitcairn</option>
+<option value="PL">Poland</option>
+<option value="PT">Portugal</option>
+<option value="PR">Puerto Rico</option>
+<option value="QA">Qatar</option>
+<option value="RE">Reunion</option>
+<option value="RO">Romania</option>
+<option value="RU">Russia</option>
+<option value="RW">Rwanda</option>
+<option value="BL">Saint Barthélemy</option>
+<option value="SH">Saint Helena</option>
+<option value="KN">Saint Kitts and Nevis</option>
+<option value="LC">Saint Lucia</option>
+<option value="MF">Saint Martin (French part)</option>
+<option value="PM">Saint Pierre and Miquelon</option>
+<option value="VC">Saint Vincent and the Grenadines</option>
+<option value="WS">Samoa</option>
+<option value="SM">San Marino</option>
+<option value="ST">Sao Tome and Principe</option>
+<option value="SA">Saudi Arabia</option>
+<option value="SN">Senegal</option>
+<option value="RS">Serbia</option>
+<option value="SC">Seychelles</option>
+<option value="SL">Sierra Leone</option>
+<option value="SG">Singapore</option>
+<option value="SX">Sint Maarten</option>
+<option value="SK">Slovakia</option>
+<option value="SI">Slovenia</option>
+<option value="SB">Solomon Islands</option>
+<option value="SO">Somalia</option>
+<option value="ZA">South Africa</option>
+<option value="GS">South Georgia and the South Sandwich Islands</option>
+<option value="KR">South Korea</option>
+<option value="SS">South Sudan</option>
+<option value="ES">Spain</option>
+<option value="LK">Sri Lanka</option>
+<option value="SD">Sudan</option>
+<option value="SR">Suriname</option>
+<option value="SJ">Svalbard and Jan Mayen</option>
+<option value="SZ">Swaziland</option>
+<option value="SE">Sweden</option>
+<option value="CH">Switzerland</option>
+<option value="SY">Syria</option>
+<option value="TW">Taiwan</option>
+<option value="TJ">Tajikistan</option>
+<option value="TZ">Tanzania</option>
+<option value="TH">Thailand</option>
+<option value="TB">Tibet</option>
+<option value="TL">Timor-Leste</option>
+<option value="TG">Togo</option>
+<option value="TK">Tokelau</option>
+<option value="TO">Tonga</option>
+<option value="TT">Trinidad and Tobago</option>
+<option value="TN">Tunisia</option>
+<option value="TR">Turkey</option>
+<option value="TM">Turkmenistan</option>
+<option value="TC">Turks and Caicos Islands</option>
+<option value="TV">Tuvalu</option>
+<option value="VI">U.S. Virgin Islands</option>
+<option value="UG">Uganda</option>
+<option value="UA">Ukraine</option>
+<option value="AE">United Arab Emirates</option>
+<option value="GB">United Kingdom</option>
+<option value="US">United States</option>
+<option value="UM">United States Minor Outlying Islands</option>
+<option value="UY">Uruguay</option>
+<option value="UZ">Uzbekistan</option>
+<option value="VU">Vanuatu</option>
+<option value="VA">Vatican</option>
+<option value="VE">Venezuela</option>
+<option value="VN">Vietnam</option>
+<option value="WF">Wallis and Futuna</option>
+<option value="EH">Western Sahara</option>
+<option value="YE">Yemen</option>
+<option value="ZM">Zambia</option>
+<option value="ZW">Zimbabwe</option>

package/src/html/includes/form-items/donation-amount.html

@@ -1,69 +1,68 @@
 <div class="donation-amount form-item">
-  <div class="select-or-other donation-amount-buttons">
-    <div class="form-item form-type-radios">
-      <div
-        id="donation-amount-select"
-        class="form-radios donation-amount-buttons select-or-other-select"
-      >
-        <div class="form-item form-type-radio">
-          <input
-            required="required"
-            class="donation-amount-buttons select-or-other-select form-radio"
-            type="radio"
-            id="donation-amount-select-1"
-            name="donation_amount[select]"
-            value="5"
-          />
-          <label class="option" for="donation-amount-select-1">£5 </label>
+    <div class="select-or-other donation-amount-buttons">
+        <div class="form-item form-type-radios">
+            <div
+              id="donation-amount-select"
+              class="form-radios donation-amount-buttons select-or-other-select"
+            >
+                <div class="form-item form-type-radio">
+                    <input
+                        required="required"
+                        class="donation-amount-buttons select-or-other-select form-radio"
+                        type="radio"
+                        id="donation-amount-select-1"
+                        name="donation_amount[select]"
+                        value="5"
+                    />
+                    <label class="option" for="donation-amount-select-1">£5 </label>
+                </div>
+                <div class="form-item form-type-radio">
+                    <input
+                        required="required"
+                        class="donation-amount-buttons select-or-other-select form-radio"
+                        type="radio"
+                        id="donation-amount-select-2"
+                        name="donation_amount[select]"
+                        value="10"
+                        checked="checked"
+                    />
+                    <label class="option" for="donation-amount-select-2">£10 </label>
+                </div>
+                <div class="form-item form-type-radio">
+                    <input
+                        required="required"
+                        class="donation-amount-buttons select-or-other-select form-radio"
+                        type="radio"
+                        id="donation-amount-select-3"
+                        name="donation_amount[select]"
+                        value="20"
+                    />
+                    <label class="option" for="donation-amount-select-3">£20 </label>
+                </div>
+                <div class="form-item form-type-radio">
+                    <input
+                        required="required"
+                        class="donation-amount-buttons select-or-other-select form-radio"
+                        type="radio"
+                        id="donation-amount-select-4"
+                        name="donation_amount[select]"
+                        value="select_or_other"
+                    />
+                    <label class="option" for="donation-amount-select-4">Other amount </label>
+                </div>
+            </div>
         </div>
-        <div class="form-item form-type-radio">
-          <input
-            required="required"
-            class="donation-amount-buttons select-or-other-select form-radio"
-            type="radio"
-            id="donation-amount-select-2"
-            name="donation_amount[select]"
-            value="10"
-            checked="checked"
-          />
-          <label class="option" for="donation-amount-select-2">£10 </label>
+        <div class="form-item form-type-textfield">
+            <label for="donation-amount-other">£ </label>
+            <input
+                class="donation-amount-buttons select-or-other-other form-text"
+                type="text"
+                id="donation-amount-other"
+                name="donation_amount[other]"
+                value=""
+                size="60"
+                maxlength="128"
+            />
         </div>
-        <div class="form-item form-type-radio">
-          <input
-            required="required"
-            class="donation-amount-buttons select-or-other-select form-radio"
-            type="radio"
-            id="donation-amount-select-3"
-            name="donation_amount[select]"
-            value="20"
-          />
-          <label class="option" for="donation-amount-select-3">£20 </label>
-        </div>
-        <div class="form-item form-type-radio">
-          <input
-            required="required"
-            class="donation-amount-buttons select-or-other-select form-radio"
-            type="radio"
-            id="donation-amount-select-4"
-            name="donation_amount[select]"
-            value="select_or_other"
-          />
-          <label class="option" for="donation-amount-select-4">Other amount </label>
-        </div>
-      </div>
-    </div>
-
-    <div class="form-item form-type-textfield">
-      <label for="donation-amount-other">£ </label>
-      <input
-        class="donation-amount-buttons select-or-other-other form-text"
-        type="text"
-        id="donation-amount-other"
-        name="donation_amount[other]"
-        value=""
-        size="60"
-        maxlength="128"
-      />
     </div>
-  </div>
 </div>

package/src/html/includes/form-items/donation-interval.html

@@ -1,15 +1,16 @@
 <div class="form-item">
-  <label for="edit-submitted-donation-interval"
-    >Donation interval <span class="form-required" title="This field is required.">*</span></label
-  >
-  <select
-    required="required"
-    data-select-two="select-two"
-    id="donation-interval"
-    name="donation_interval"
-    class="form-select"
-    ><option value="1">only once</option
-    ><option value="m" selected="selected">monthly</option
-    ><option value="y">yearly</option></select
-  >
+    <label for="edit-submitted-donation-interval">
+        Donation interval <span class="form-required" title="This field is required.">*</span>
+    </label>
+    <select
+        required="required"
+        data-select-two="select-two"
+        id="donation-interval"
+        name="donation_interval"
+        class="form-select"
+    >
+        <option value="1">only once</option>
+        <option value="m" selected="selected">monthly</option>
+        <option value="y">yearly</option>
+    </select>
 </div>

package/src/html/includes/form-items/fake-field.html

@@ -1,4 +1,4 @@
 <div class="form-item">
-  <span class="form-label">Fake field</span>
-  <div class="text-input"></div>
+    <span class="form-label">Fake field</span>
+    <div class="text-input"></div>
 </div>

package/src/html/includes/form-items/fieldset.html

@@ -1,9 +1,11 @@
+{% from "./_macros.html" import input %}
+
 <div class="form-item">
-  <fieldset class="form-wrapper fieldset">
-    <legend>Your Name</legend>
-    <div class="fieldset-wrapper">
-      <include src="form-items/first-name.html"></include>
-      <include src="form-items/last-name.html"></include>
-    </div>
-  </fieldset>
+    <fieldset class="form-wrapper fieldset">
+        <legend>Your Name</legend>
+        <div class="fieldset-wrapper">
+            {{ input("First name", {size: 60, maxlength: 128}) }}
+            {{ input("Last name", {size: 60, maxlength: 128}) }}
+        </div>
+    </fieldset>
 </div>

package/src/html/includes/form-items/file-upload.html

@@ -1,9 +1,9 @@
 <div class="form-item">
-  <label for="upload">Upload an image</label>
-  <div data-file-upload class="file-upload">
-    <input class="show-for-sr form-file" type="file" id="upload" name="upload">
-    <label data-upload for="upload" class="small secondary button">Choose file</label>
-    <button data-reset type="button" class="small secondary button">Remove</button>
-  </div>
-  <div class="help-text">or drop files here.<br>Allowed file types: gif jpg png.</div>
+    <label for="upload">Upload an image</label>
+    <div data-file-upload class="file-upload">
+        <input class="show-for-sr form-file" type="file" id="upload" name="upload">
+        <label data-upload for="upload" class="small secondary button">Choose file</label>
+        <button data-reset type="button" class="small secondary button">Remove</button>
+    </div>
+    <div class="help-text">or drop files here.<br>Allowed file types: gif jpg png.</div>
 </div>