@moreonion/foundist 3.0.3 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moreonion/foundist",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "Foundation based default theme for Impact Stack landing pages.",
   "author": "More Onion <kontakt@more-onion.at>",
   "license": "MIT",
@@ -26,7 +26,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@moreonion/foundation-base": "^3.0.2",
+    "@moreonion/foundation-base": "^3.1.0",
     "vite-plugin-nunjucks": "^0.1.10"
   },
   "lint-staged": {

package/src/html/dev-index.html

@@ -9,6 +9,7 @@
         <li><a href="src/html/basic-action-page.html">Basic action page</a></li>
         <li><a href="src/html/e2t-action-page.html">Email to target page</a></li>
         <li><a href="src/html/donation-action-page.html">Donation page</a></li>
+        <li><a href="src/html/signup-action-page.html">Sign up page</a></li>
         <li><a href="src/html/thank-you-page.html">Thank you page</a></li>
         <li><a href="src/html/thank-you-page.html#overlay">Thank you page with overlay</a></li>
         <li><a href="src/html/login-page.html">Login page</a></li>

package/src/html/includes/basic-form-with-errors.html

@@ -25,6 +25,7 @@
         {{ input("Textfield", error="Some error message for this field.") }}
         {{ select("Country", error="That’s not right.", hide_label=true) }}
         {% include "./form-items/radios-with-error.html" %}
+        {% include "./form-items/opt-in-radios-with-error.html" %}
         {{ button("Take action now!", class="expanded primary button large")}}
     </form>
 </div>

package/src/html/includes/basic-form.html

@@ -5,8 +5,8 @@
         {{ input("First name", {size: 60, maxlength: 128, placeholder: "First name"}) }}
         {{ input("Last name", {size: 60, maxlength: 128}) }}
         {{ input("Email address", {type: "email", id: "email", size: 60, required: "required"}) }}
+        {% include "./form-items/radios.html" %}
         {{ select("Country", hide_label=true) }}
-        {% include "./form-items/opt-in-radios.html" %}
         {{ hidden("token") }}
         {{ button("Take action now!", class="expanded primary button large") }}
     </form>

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

@@ -4,9 +4,9 @@
     <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">
+        <fieldset class="fieldset">
+            <div class="email-to-target-selector-wrapper">
+                <div class="email-to-target-target email-to-target-single">
                     <p class="target">Rt Hon Mary Field MP </p>
                     <div class="form-item">
                         <label for="subject">Subject</label>
@@ -15,9 +15,7 @@
                     <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>
+                        <textarea id="message" name="message" cols="60" rows="5" class="form-textarea"></textarea>
                     </div>
                     <!-- linthtml-configure preset="none" -->
                     <pre class="email-to-target-footer">I look forward to hearing from you.
@@ -28,7 +26,7 @@ Jane Smith
 A12 34B</pre>
                 </div>
             </div>
-        </div>
+        </fieldset>
 
         {{ button("Send message", class="expanded primary button large") }}
     </form>

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

@@ -1,11 +1,9 @@
 {% from "./_macros.html" import input %}
 
-<div class="form-item">
-    <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>
+<fieldset class="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>

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

@@ -1,16 +1,14 @@
-<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 class="form-group giftaid">
+    <div class="group-item form-item">
+        <p><strong>Increase your donation by 25%</strong> without additional cost to you by ticking the box below</p>
+    </div>
+    <div class="group-item 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>
-</fieldset>
+    <div class="group-item 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>

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

@@ -1,7 +1,13 @@
-<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 class="form-group opt-in">
+    <div class="group-item intro-text">
+        <h4>Get updates</h4>
+        <p>A cat will come by your house every week with news. Make sure to provide delicious food!</p>
+    </div>
+    <div class="group-item 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 a regular cat. I swear to provide excellent food.</label>
+        </div>
     </div>
 </div>

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

@@ -0,0 +1,16 @@
+<div class="form-group opt-in">
+    <div class="group-item intro-text">
+        <h4>Stay connected</h4>
+        <p>Please subscribe to hear about other ways you can help. You will receive campaign and fundraising updates and cute cat content.</p>
+    </div>
+    <div class="group-item 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>
+    </div>
+    <label for="newsletter-opt-in" class="group-item error form-error is-visible">Newsletter field is required.</label>
+</div>

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

@@ -1,9 +1,19 @@
-<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 class="form-group opt-in">
+    <div class="group-item intro-text">
+        <h4>Stay connected</h4>
+        <p>Please subscribe to hear about other ways you can help. You will receive campaign and fundraising updates and cute cat content.</p>
     </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 class="group-item 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>
+    </div>
+    <div class="group-item checked-text no-change">
+        <h4 class="form-label">Are you sure?</h4>
+        <p>If you don’t choose ‘Yes’ you will not receive any cat content from us. You may <a>unsubscribe</a> any time!</p>
     </div>
 </div>

package/src/html/includes/signup-form.html

@@ -0,0 +1,11 @@
+{% from "./form-items/_macros.html" import hidden, button %}
+
+<div id="form">
+    <form method="post" accept-charset="UTF-8" novalidate="novalidate">
+        {% include "./form-items/opt-in-radios.html" %}
+        {% include "./form-items/opt-in-checkbox.html" %}
+        {% include "./form-items/checkboxes.html" %}
+        {{ hidden("token") }}
+        {{ button("Sign up now!", class="expanded primary button large") }}
+    </form>
+</div>

package/src/html/signup-action-page.html

@@ -0,0 +1,36 @@
+{% extends "src/html/templates/action-page.html" %}
+
+{% set layout = "default" %}
+
+{% block page_title %}Sign up now!{% endblock %}
+
+{% block top %}
+    <p>Reward the chosen human with a slow blink. Scratch stand in front of the computer screen run off table persian cat jump eat fish. Roll on the floor purring your whiskers off cat dog hate mouse eat string barf pillow no baths hate everything.</p>
+{% endblock %}
+
+{% block form_intro %}
+    <h2>Signup now!</h2>
+    <p>Abyssinian tiger american shorthair british shorthair puma and maine coon.</p>
+{% endblock %}
+
+{% block progress_bar %}
+    {% include "src/html/includes/pgbar.html" %}
+{% endblock %}
+
+{% block form %}
+    {% include "src/html/includes/signup-form.html" %}
+{% endblock %}
+
+{% block content_top %}
+    <div class="media-stretch">
+        <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
+    </div>
+{% endblock %}
+
+{% block content %}
+    <h2>Cougar British shorthair turkish angora</h2>
+    <p>Twitch tail in permanent irritation attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? Get my claw stuck in the dog's ear. Lick plastic bags ask to go outside and ask to come inside and ask to go outside and ask to come inside hell is other people, ignore the squirrels, you'll never catch them anyway or walk on car leaving trail of paw prints on hood and windshield.</p>
+    <p>A very wise cat once said:</p>
+    <blockquote><p>Always ensure to lay down in such a manner that tail can lightly brush human's nose sleep in the bathroom sink. Scratch catasstrophe and lick the curtain just to be annoying so your pillow is now my pet bed nya nya nyan so run up and down stairs curl up and sleep on the freshly laundered towels.</p></blockquote>
+    <p>Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human.</p>
+{% endblock %}

package/src/html/templates/action-page-cover-banner.html

@@ -7,7 +7,7 @@
 {% block banner_content %}
     <div class="grid-container with-sidebar">
         <header id="headline">{% block headline %}{% endblock %}</header>
-        <div id=form-wrapper class="flex-container align-middle">
+        <div id="form-wrapper" class="flex-container align-middle">
             <div id="form-outer">
                 <div class="intro">{% block form_intro %}{% endblock %}</div>
                 {% block progress_bar %}{% endblock %}

package/src/html/templates/action-page-reversed.html

@@ -6,7 +6,7 @@
 
 {% block sidebar_bottom %}
     <div id="sidebar">
-        <div id=form-wrapper class="flex-container align-middle">
+        <div id="form-wrapper" class="flex-container align-middle">
             <div id="form-outer">
                 <div class="intro">{% block form_intro %}{% endblock %}</div>
                 {% block progress_bar %}{% endblock %}

package/src/html/templates/action-page.html

@@ -10,7 +10,7 @@
 
 {% block sidebar %}
     <div id="sidebar">
-        <div id=form-wrapper class="flex-container align-middle">
+        <div id="form-wrapper" class="flex-container align-middle">
             <div id="form-outer">
                 <div class="intro">{% block form_intro %}{% endblock %}</div>
                 {% block progress_bar %}{% endblock %}

package/src/scss/components/_headline.scss

@@ -4,7 +4,7 @@
 
 /// Highlighting background of the headline.
 /// @type Color
-$headline-background: none !default;
+$headline-background: $body-background !default;
 
 /// Font family of the headline.
 /// @type String | List
@@ -27,10 +27,11 @@ $headline-font-size: 2 * $large-font-size !default;
 $headline-color: color-pick-contrast(
   if(
     $headline-background and $headline-background != none,
-    $headline-background,
-    $fallback-background
+    get-background-color($headline-background),
+    get-background-color($fallback-background)
   ),
-  ($body-font-color-alt, $body-font-color)
+  ($title-color, $body-font-color-alt, $body-font-color),
+  6
 ) !default;
 
 #headline {

package/src/scss/form/_fields.scss

@@ -13,8 +13,10 @@
 
 // More margin for form items that need extra space.
 .form-item.extra-spacing {
-  margin-top: $form-spacing * 2;
-  margin-bottom: $form-spacing * 2;
+  &:not(.group-item) {
+    margin-top: $form-spacing * 2;
+    margin-bottom: $form-spacing * 2;
+  }
 
   .help-text {
     margin-top: $form-spacing;
@@ -50,25 +52,6 @@ input.button.primary {
   margin-top: $form-spacing * 2;
 }
 
-// Margins for giftaid fields.
-.giftaid {
-  margin-top: $form-spacing * 2;
-  margin-bottom: $form-spacing * 2;
-
-  .extra-spacing {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  .form-item > div:first-child,
-  .form-item > label.show-for-sr + div,
-  .form-item > label.element-invisible + div {
-    input[type="checkbox"] + label {
-      margin-top: 0;
-    }
-  }
-}
-
 // Display radios, checkboxes etc. next to each other.
 .form-item.inline {
   &,

package/src/scss/form/_form-group.scss

@@ -0,0 +1,46 @@
+// Form group
+// - - - - - - - - - - - - - - -
+// Custom overrides for form groups
+
+.giftaid,
+.form-group {
+  // Override margins.
+  margin-top: $form-spacing * 2;
+  margin-bottom: $form-spacing * 2;
+
+  .form-item > div:first-child,
+  .form-item > label.show-for-sr + div,
+  .form-item > label.element-invisible + div {
+    input[type="checkbox"] + label {
+      margin-top: 0;
+    }
+  }
+
+  #{$text-tags} {
+    margin-bottom: $form-spacing * 2;
+    padding-#{$global-right}: 0;
+  }
+
+  // Override colors.
+  .checked-text {
+    h1,
+    .h1,
+    h2,
+    .h2,
+    h3,
+    .h3,
+    h4,
+    .h4,
+    h5,
+    .h5,
+    h6,
+    .h6,
+    a:not(.button),
+    blockquote {
+      &,
+      #form-outer & {
+        color: $form-group-checked-text-color;
+      }
+    }
+  }
+}

package/src/scss/form/_settings.scss

@@ -106,6 +106,7 @@ $select-line-height: $form-label-line-height !default;
 $radio-icon-color: $select-triangle-color !default;
 $radio-align: flex-start !default;
 $radio-label-font-weight: $global-weight-normal !default;
+$form-group-checkbox-size: rem-calc($base-line-height * 1.25) !default;
 
 // Files
 $file-upload-font-size: $small-font-size !default;
@@ -179,4 +180,3 @@ $loader-color: get-color(primary) !default;
 
 // Donation forms
 $payment-icon-color: $form-label-color !default;
-$giftaid-checkbox-size: rem-calc($base-line-height * 1.5) !default;

package/src/scss/main.scss

@@ -82,6 +82,7 @@
 // Custom components
 @include mo-button;
 @include mo-close-button;
+@include mo-form-group;
 @include mo-form-steps;
 @include mo-recent-supporters;
 @include mo-progress-bar;
@@ -94,6 +95,7 @@
 
 @import "form/forms";
 @import "form/fields";
+@import "form/form-group";
 @import "form/button";
 @import "form/donation-amount-button";
 @import "form/paymethod-select-button";