@moreonion/foundist 2.1.2 → 2.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moreonion/foundist",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "Foundation based default theme for Impact Stack landing pages.",
   "author": "More Onion <kontakt@more-onion.at>",
   "license": "MIT",
@@ -44,13 +44,16 @@
     "@linthtml/linthtml": "^0.8.0"
   },
   "dependencies": {
-    "@moreonion/foundation-base": "2.1.2",
-    "http-server": "^14.0.0",
+    "@moreonion/foundation-base": "2.1.3",
+    "http-server": "^14.1.0",
     "posthtml": "^0.16.5",
     "posthtml-expressions": "^1.9.0",
     "posthtml-extend": "0.6.0",
     "posthtml-include": "^1.7.2"
   },
+  "resolutions": {
+    "@parcel/transformer-css": "2.1.1"
+  },
   "lint-staged": {
     "*.scss": [
       "stylelint",

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

@@ -2,6 +2,7 @@
   <form method="post" accept-charset="UTF-8" novalidate="novalidate">
     <include src="form-items/donation-interval.html"></include>
     <include src="form-items/donation-amount.html"></include>
+    <include src="form-items/giftaid.html"></include>
     <br>
     <include src="form-items/paymethod-selector.html"></include>
 

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/js/foundist.js

@@ -37,8 +37,10 @@ Foundation.plugin(SelectTwo, 'SelectTwo')
 Foundation.plugin(StickyButton, 'StickyButton')
 Foundation.plugin(ToggleElement, 'ToggleElement')
 
-// Let foundation initialize the initial markup
-// This needs to be done for dynamically loaded markup too (e.g. AJAX markup)
+/**
+ * Let foundation initialize the initial markup.
+ * This needs to be done for dynamically loaded markup too (e.g. AJAX markup)
+ */
 export function initFoundation () {
   initEventBridge($)
   if (typeof Drupal !== 'undefined') {
@@ -56,8 +58,12 @@ export function initFoundation () {
   }
 }
 
-// Activate AdaptiveSticky on forms in the sidebar.
-export function stickyForm () {
+/**
+ * Activate AdaptiveSticky on forms in the sidebar.
+ * @param {object} options - Overrides to the AdaptiveSticky plugin settings.
+ * @returns {AdaptiveSticky|undefined} The initialized AdaptiveSticky plugin
+ */
+export function stickyForm (options = {}) {
   const $form = $('#sidebar form, #sidebar .share-buttons')
   if (!$form.length) {
     return
@@ -69,12 +75,17 @@ export function stickyForm () {
   return new Foundation.AdaptiveSticky($sidebar.children('.sticky'), {
     target: '#form-outer form, #form-outer .share-buttons ul',
     offset: $('#form-outer').css('padding-top'),
-    mediaQuery: 'large'
+    mediaQuery: 'large',
+    ...options
   })
 }
 
-// Activate StickyButton on CTA markup snippet.
-export function stickyButton () {
+/**
+ * Activate StickyButton on CTA markup snippet.
+ * @param {object} options - Overrides to the StickyButton plugin settings.
+ * @returns {StickyButton[]|undefined} Array of initialized StickyButton plugins
+ */
+export function stickyButton (options = {}) {
   let $cta = $('.sticky-cta')
   if (!$cta.length) {
     return
@@ -97,13 +108,18 @@ export function stickyButton () {
   return $cta.map((i, el) => {
     return new Foundation.StickyButton($(el), {
       blocker: target,
-      topOverlap: 0.3
+      topOverlap: 0.3,
+      ...options
     })
   })
 }
 
-// Activate cookiebar on cookiebar id.
-export function cookiebar () {
+/**
+ * Activate cookiebar on cookiebar id.
+ * @param {object} options - Overrides to the Cookiebar plugin settings.
+ * @returns {Cookiebar|undefined} The initialized Cookiebar plugin
+ */
+export function cookiebar (options = {}) {
   const $cookiebar = $('#cookiebar')
   if (!$cookiebar.length) {
     return
@@ -111,5 +127,5 @@ export function cookiebar () {
   // Put cookiebar in right position.
   $cookiebar.detach().appendTo('body')
   // Initialize plugin
-  return new Foundation.CookieBar($cookiebar)
+  return new Foundation.CookieBar($cookiebar, options)
 }

package/src/scss/components/_settings.scss

@@ -4,7 +4,7 @@
 @use "sass:color";
 
 // Card
-$card-border: none;
+$card-border: none !default;
 $card-padding: rem-calc($base-line-height * 0.75) 6% !default;
 $card-margin-bottom: rem-calc($base-line-height * 1.5) !default;
 
@@ -24,6 +24,7 @@ $recent-supporter-color: color-pick-contrast(
   get-background-color($body-background),
   ($dark-gray, $light-gray)
 ) !default;
+$recent-supporter-time-color: $muted-font-color !default;
 $recent-supporter-border-color: if(
   color.lightness(get-background-color($body-background)) < 50,
   $dark-gray,
@@ -170,5 +171,8 @@ $cookiebar-color: color-pick-contrast(
   get-background-color($cookiebar-background),
   ($body-font-color, $body-font-color-alt)
 ) !default;
-$cookiebar-padding: rem-calc($base-line-height) 0 0;
+$cookiebar-padding: rem-calc($base-line-height) 0 0 !default;
 $cookiebar-flex-breakpoint: medium !default;
+
+// Pagination
+$pagination-item-color-disabled: $muted-font-color !default;

package/src/scss/form/_fields.scss

@@ -50,6 +50,25 @@ 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/_settings.scss

@@ -89,7 +89,7 @@ $input-height: rem-calc(2 * $base-line-height) !default;
 $input-padding: (
   rem-calc(($input-height - $input-line-height * $input-font-size) * 0.5) - $input-border-width
 ) 1rem !default;
-$input-placeholder-color: $medium-gray !default;
+$input-placeholder-color: $muted-font-color !default;
 $input-prefix-color: $form-label-color !default;
 $input-prefix-padding: 1em !default;
 
@@ -110,7 +110,7 @@ $radio-label-font-weight: $global-weight-normal !default;
 // Files
 $file-upload-font-size: $small-font-size !default;
 $file-upload-padding: $form-spacing * 2 !default;
-$file-upload-help-color: $medium-gray !default;
+$file-upload-help-color: $muted-font-color !default;
 
 // Help texts
 $helptext-color: $form-label-color !default;
@@ -177,5 +177,6 @@ $form-steps-previous-background-color: color.scale(
 // AJAX loading throbber
 $loader-color: get-color(primary) !default;
 
-// Payment icons
+// Donation forms
 $payment-icon-color: $form-label-color !default;
+$giftaid-checkbox-size: rem-calc($base-line-height * 1.5) !default;

package/src/scss/layout/_cover.scss

@@ -52,7 +52,8 @@ $cover-2col-offset: $global-margin * 5;
     right: 0;
     bottom: 0;
     left: 0;
-    height: auto;
+    // Required to keep a constant height in mobile browsers with (dis)appearing menus
+    height: 100vh;
   }
 
   // Remove title padding

package/src/scss/main.scss

@@ -89,6 +89,7 @@
 @include mo-share-button;
 @include mo-drupal-ajax-loading;
 @include mo-payment-icons;
+@include mo-giftaid;
 @include mo-cookiebar;
 
 @import "form/forms";

package/src/scss/typography/_settings.scss

@@ -15,6 +15,7 @@ $global-weight-bold: bold !default;
 // Colors
 $body-font-color: $black !default;
 $body-font-color-alt: $white !default;
+$muted-font-color: $medium-gray !default;
 $title-color: get-color(primary) !default;
 $header-color-even: if(
   meta.variable-exists("header-color"),
@@ -27,6 +28,7 @@ $header-color-odd: if(
   get-color(secondary)
 ) !default;
 $header-color-alt: $body-font-color-alt !default;
+$header-small-font-color: $muted-font-color !default;
 $anchor-color: get-color(primary) !default;
 $blockquote-color: get-color(primary) !default;