@moreonion/foundist 2.1.2 → 3.0.1

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>

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

@@ -0,0 +1,16 @@
+<fieldset class="form-wrapper fieldset giftaid">
+    <div class="fieldset-wrapper">
+        <div class="form-item">
+            <p><strong>Increase your donation by 25%</strong> without additional cost to you by ticking the box below</p>
+        </div>
+        <div class="form-item extra-spacing">
+            <div class="form-item form-type-checkbox">
+                <input type="checkbox" id="giftaid-checkbox" name="giftaid-checkbox" value="1" class="form-checkbox">
+                <label class="option" for="giftaid-checkbox"><span>I am a UK tax payer and I want you to claim Gift Aid on my donation*</span></label>
+            </div>
+        </div>
+        <div class="form-item">
+            <p class="small muted">* This is the small print that you may want to add to your giftaid field but it’s really optional.</p>
+        </div>
+    </div>
+</fieldset>

package/src/html/includes/form-items/inline-radios.html

@@ -1,17 +1,17 @@
 <div class="form-item inline extra-spacing">
-  <label for="radios-1">What is most important to you?</label>
-  <div id="radios" class="form-radios">
-    <div class="form-item form-type-radio">
-      <input type="radio" id="radios-1" name="radios" value="1" class="form-radio">
-      <label class="option" for="radios-1">Whales</label>
+    <label for="radios-1">What is most important to you?</label>
+    <div id="radios" class="form-radios">
+        <div class="form-item form-type-radio">
+            <input type="radio" id="radios-1" name="radios" value="1" class="form-radio">
+            <label class="option" for="radios-1">Whales</label>
+        </div>
+        <div class="form-item form-type-radio">
+            <input type="radio" id="radios-2" name="radios" value="2" class="form-radio">
+            <label class="option" for="radios-2">Pandas</label>
+        </div>
+        <div class="form-item form-type-radio">
+            <input type="radio" id="radios-3" name="radios" value="2" class="form-radio">
+            <label class="option" for="radios-3">Bees</label>
+        </div>
     </div>
-    <div class="form-item form-type-radio">
-      <input type="radio" id="radios-2" name="radios" value="2" class="form-radio">
-      <label class="option" for="radios-2">Pandas</label>
-    </div>
-    <div class="form-item form-type-radio">
-      <input type="radio" id="radios-3" name="radios" value="2" class="form-radio">
-      <label class="option" for="radios-3">Bees</label>
-    </div>
-  </div>
 </div>

package/src/html/includes/form-items/opt-in-checkbox.html

@@ -1,7 +1,7 @@
 <div class="form-item extra-spacing">
-  <label for="newsletter-checkbox" class="show-for-sr">Newsletter</label>
-  <div class="form-item form-type-checkbox">
-    <input type="checkbox" id="newsletter-checkbox" name="newsletter-checkbox" value="opt-in" class="form-checkbox">
-    <label class="option" for="newsletter-checkbox">Please keep me up to date and send me your regular newsletter about this topic</label>
-  </div>
+    <label for="newsletter-checkbox" class="show-for-sr">Newsletter</label>
+    <div class="form-item form-type-checkbox">
+        <input type="checkbox" id="newsletter-checkbox" name="newsletter-checkbox" value="opt-in" class="form-checkbox">
+        <label class="option" for="newsletter-checkbox">Please keep me up to date and send me your regular newsletter about this topic</label>
+    </div>
 </div>

package/src/html/includes/form-items/opt-in-radios.html

@@ -1,9 +1,9 @@
 <div class="form-item extra-spacing">
-  <label for="newsletter-opt-in">Would you like to get our newsletter? <span class="form-required" title="This field is required.">*</span></label>
-  <div class="form-item form-type-radio">
-    <input type="radio" id="newsletter-opt-in" name="newsletter" value="opt-in" class="form-radio">  <label class="option" for="newsletter-opt-in">Yes, I’d love to</label>
-  </div>
-  <div class="form-item form-type-radio">
-    <input type="radio" id="newsletter-no-change" name="newsletter" value="no-change" class="form-radio">  <label class="option" for="newsletter-no-change">No, thank you</label>
-  </div>
+    <label for="newsletter-opt-in">Would you like to get our newsletter? <span class="form-required" title="This field is required.">*</span></label>
+    <div class="form-item form-type-radio">
+        <input type="radio" id="newsletter-opt-in" name="newsletter" value="opt-in" class="form-radio">  <label class="option" for="newsletter-opt-in">Yes, I’d love to</label>
+    </div>
+    <div class="form-item form-type-radio">
+        <input type="radio" id="newsletter-no-change" name="newsletter" value="no-change" class="form-radio">  <label class="option" for="newsletter-no-change">No, thank you</label>
+    </div>
 </div>

package/src/html/includes/form-items/payment-icons.html

@@ -1,19 +1,19 @@
 <div class="form-item">
-  <div class="payment-icons muted">
-    <span class="secure-payment-icon"><span class="show-for-sr">Your payment is secure</span></span>
-    <span class="apple-pay-icon"><span class="show-for-sr">Apple Pay</span></span>
-    <span class="credit-card-icon"><span class="show-for-sr">Credit Card</span></span>
-    <span class="direct-debit-icon"><span class="show-for-sr">Direct Debit</span></span>
-    <span class="google-pay-icon"><span class="show-for-sr">Google Pay</span></span>
-    <span class="mastercard-icon"><span class="show-for-sr">Master Card</span></span>
-    <span class="paypal-icon"><span class="show-for-sr">PayPal</span></span>
-    <span class="paypal-pp-icon"><span class="show-for-sr">PayPal</span></span>
-    <span class="sage-pay-icon"><span class="show-for-sr">SagePay</span></span>
-    <span class="sepa-icon"><span class="show-for-sr">SEPA</span></span>
-    <span class="stripe-icon"><span class="show-for-sr">Stripe</span></span>
-    <span class="visa-icon"><span class="show-for-sr">VISA</span></span>
-    <span class="direct-debit-logo"><span class="show-for-sr">Direct Debit</span></span>
-    <span class="giftaid-logo"><span class="show-for-sr">Giftaid</span></span>
-    <span class="fr-regulator-logo"><span class="show-for-sr">Fundraising Regulator</span></span>
-  </div>
+    <div class="payment-icons muted">
+        <span class="secure-payment-icon"><span class="show-for-sr">Your payment is secure</span></span>
+        <span class="apple-pay-icon"><span class="show-for-sr">Apple Pay</span></span>
+        <span class="credit-card-icon"><span class="show-for-sr">Credit Card</span></span>
+        <span class="direct-debit-icon"><span class="show-for-sr">Direct Debit</span></span>
+        <span class="google-pay-icon"><span class="show-for-sr">Google Pay</span></span>
+        <span class="mastercard-icon"><span class="show-for-sr">Master Card</span></span>
+        <span class="paypal-icon"><span class="show-for-sr">PayPal</span></span>
+        <span class="paypal-pp-icon"><span class="show-for-sr">PayPal</span></span>
+        <span class="sage-pay-icon"><span class="show-for-sr">SagePay</span></span>
+        <span class="sepa-icon"><span class="show-for-sr">SEPA</span></span>
+        <span class="stripe-icon"><span class="show-for-sr">Stripe</span></span>
+        <span class="visa-icon"><span class="show-for-sr">VISA</span></span>
+        <span class="direct-debit-logo"><span class="show-for-sr">Direct Debit</span></span>
+        <span class="giftaid-logo"><span class="show-for-sr">Giftaid</span></span>
+        <span class="fr-regulator-logo"><span class="show-for-sr">Fundraising Regulator</span></span>
+    </div>
 </div>

package/src/html/includes/form-items/paymethod-selector.html

@@ -1,29 +1,29 @@
 <h3>Pay via</h3>
 <p>There might be an introductory sentence here meow.</p>
 <div class="paymethod-select-wrapper form-item">
-  <div class="form-item form-type-radios">
-    <div id="payment-method-selector" class="form-radios paymethod-select-radios">
-      <div class="form-item form-type-radio">
-        <input
-          class="paymethod-select-radios form-radio"
-          type="radio"
-          id="paymethod-select-payment-method-selector-2"
-          name="paymethod_select[payment_method_selector]"
-          value="2"
-          checked="checked"
-        />
-        <label class="option" for="paymethod-select-payment-method-selector-2">Direct debit</label>
-      </div>
-      <div class="form-item form-type-radio">
-        <input
-          class="paymethod-select-radios form-radio"
-          type="radio"
-          id="paymethod-select-payment-method-selector-3"
-          name="paymethod_select[payment_method_selector]"
-          value="3"
-        />
-        <label class="option" for="paymethod-select-payment-method-selector-3">SEPA</label>
-      </div>
+    <div class="form-item form-type-radios">
+        <div id="payment-method-selector" class="form-radios paymethod-select-radios">
+            <div class="form-item form-type-radio">
+                <input
+                  class="paymethod-select-radios form-radio"
+                  type="radio"
+                  id="paymethod-select-payment-method-selector-2"
+                  name="paymethod_select[payment_method_selector]"
+                  value="2"
+                  checked="checked"
+                />
+                <label class="option" for="paymethod-select-payment-method-selector-2">Direct debit</label>
+            </div>
+            <div class="form-item form-type-radio">
+                <input
+                  class="paymethod-select-radios form-radio"
+                  type="radio"
+                  id="paymethod-select-payment-method-selector-3"
+                  name="paymethod_select[payment_method_selector]"
+                  value="3"
+                />
+                <label class="option" for="paymethod-select-payment-method-selector-3">SEPA</label>
+            </div>
+        </div>
     </div>
-  </div>
 </div>

package/src/html/includes/form-items/radios-with-error.html

@@ -1,10 +1,10 @@
 <div class="form-item extra-spacing">
-  <label for="radios-error" class="is-invalid-label">Would you like to get our newsletter? <span class="form-required" title="This field is required.">*</span></label>
-  <div class="form-item form-type-radio">
-    <input type="radio" id="radios-error" name="newsletter" value="opt-in" class="form-radio is-invalid-input">  <label class="option" for="radios-error">Yes, I’d love to</label>
-  </div>
-  <div class="form-item form-type-radio">
-    <input type="radio" id="radios-error-2" name="newsletter" value="no-change" class="form-radio">  <label class="option" for="radios-error-2">No, thank you</label>
-  </div>
-  <label for="radios-error" generated="true" class="error form-error is-visible">Do you want to receive our newsletter? field is required.</label>
+    <label for="radios-error" class="is-invalid-label">Would you like to get our newsletter? <span class="form-required" title="This field is required.">*</span></label>
+    <div class="form-item form-type-radio">
+        <input type="radio" id="radios-error" name="newsletter" value="opt-in" class="form-radio is-invalid-input">  <label class="option" for="radios-error">Yes, I’d love to</label>
+    </div>
+    <div class="form-item form-type-radio">
+        <input type="radio" id="radios-error-2" name="newsletter" value="no-change" class="form-radio">  <label class="option" for="radios-error-2">No, thank you</label>
+    </div>
+    <label for="radios-error" generated="true" class="error form-error is-visible">Do you want to receive our newsletter? field is required.</label>
 </div>

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

@@ -1,17 +1,17 @@
 <div class="form-item extra-spacing">
-  <label for="radios-1">What is most important to you?</label>
-  <div id="radios" class="form-radios">
-    <div class="form-item form-type-radio">
-      <input type="radio" id="radios-1" name="radios" value="1" class="form-radio">
-      <label class="option" for="radios-1">Whales</label>
+    <label for="radios-1">What is most important to you?</label>
+    <div id="radios" class="form-radios">
+        <div class="form-item form-type-radio">
+            <input type="radio" id="radios-1" name="radios" value="1" class="form-radio">
+            <label class="option" for="radios-1">Whales</label>
+        </div>
+        <div class="form-item form-type-radio">
+            <input type="radio" id="radios-2" name="radios" value="2" class="form-radio">
+            <label class="option" for="radios-2">Pandas</label>
+        </div>
+        <div class="form-item form-type-radio">
+            <input type="radio" id="radios-3" name="radios" value="2" class="form-radio">
+            <label class="option" for="radios-3">Bees</label>
+        </div>
     </div>
-    <div class="form-item form-type-radio">
-      <input type="radio" id="radios-2" name="radios" value="2" class="form-radio">
-      <label class="option" for="radios-2">Pandas</label>
-    </div>
-    <div class="form-item form-type-radio">
-      <input type="radio" id="radios-3" name="radios" value="2" class="form-radio">
-      <label class="option" for="radios-3">Bees</label>
-    </div>
-  </div>
 </div>