@moreonion/foundist 2.1.2 → 3.0.1

package/src/html/thank-you-page-cover-banner.html

@@ -1,21 +1,21 @@
-<extends src="templates/static-page-cover-banner.html">
+{% extends "src/html/templates/share-page.html" %}
 
-  <block name="page-title">Thank you for taking action. You’re awesome!</block>
+{% set layout = "cover-banner" %}
 
-  <block name="banner">
+{% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
+
+{% block background %}
     <img src="http://placekitten.com/1600/735" alt="test image with cats" crossorigin="">
-  </block>
+{% endblock %}
 
-  <block name="content">
+{% block content %}
     <p>Cat ipsum dolor sit amet, mewl for food at 4am. Meeeeouw spill litter box, scratch at owner, destroy all furniture, especially couch. Sleep on dog bed, force dog to sleep on floor stinky cat spend all night ensuring people don't sleep sleep all day yet spread kitty litter all over house.</p>
-  </block>
-
-  <block name="content-bottom">
-    <include src="share-buttons.html"></include>
-  </block>
+{% endblock %}
 
-  <block name="footer">
-    <include src="menu.html"></include>
-  </block>
+{% block content_bottom %}
+    {% include "src/html/includes/share-buttons.html" %}
+{% endblock %}
 
-</extends>
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}

package/src/html/thank-you-page-with-banner-and-headline.html

@@ -0,0 +1,27 @@
+{% extends "src/html/templates/share-page.html" %}
+
+{% set layout = "banner" %}
+
+{% block page_class %}{{ super() }} with-headline{% endblock %}
+
+{% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
+
+{% block banner %}
+    <img src="http://placekitten.com/1600/735" alt="test image with cats" crossorigin="">
+{% endblock %}
+
+{% block headline %}
+    <p>A huge thank you!</p>
+{% endblock %}
+
+{% block content %}
+    <p>Cat ipsum dolor sit amet, mewl for food at 4am. Meeeeouw spill litter box, scratch at owner, destroy all furniture, especially couch. Sleep on dog bed, force dog to sleep on floor stinky cat spend all night ensuring people don't sleep sleep all day yet spread kitty litter all over house.</p>
+{% endblock %}
+
+{% block content_bottom %}
+    {% include "src/html/includes/share-buttons.html" %}
+{% endblock %}
+
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}

package/src/html/thank-you-page-with-banner.html

@@ -1,21 +1,21 @@
-<extends src="templates/static-page-with-banner.html">
+{% extends "src/html/templates/share-page.html" %}
 
-  <block name="page-title">Thank you for taking action. You’re awesome!</block>
+{% set layout = "banner" %}
 
-  <block name="banner">
+{% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
+
+{% block banner %}
     <img src="http://placekitten.com/1600/735" alt="test image with cats" crossorigin="">
-  </block>
+{% endblock %}
 
-  <block name="content">
+{% block content %}
     <p>Cat ipsum dolor sit amet, mewl for food at 4am. Meeeeouw spill litter box, scratch at owner, destroy all furniture, especially couch. Sleep on dog bed, force dog to sleep on floor stinky cat spend all night ensuring people don't sleep sleep all day yet spread kitty litter all over house.</p>
-  </block>
-
-  <block name="content-bottom">
-    <include src="share-buttons.html"></include>
-  </block>
+{% endblock %}
 
-  <block name="footer">
-    <include src="menu.html"></include>
-  </block>
+{% block content_bottom %}
+    {% include "src/html/includes/share-buttons.html" %}
+{% endblock %}
 
-</extends>
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}

package/src/html/thank-you-page.html

@@ -1,24 +1,24 @@
-<extends src="templates/static-page.html">
+{% extends "src/html/templates/page.html" %}
 
-  <block name="page-title">Thank you for taking action. You’re awesome!</block>
+{% set layout = "default" %}
 
-  <block name="content-top">
+{% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
+
+{% block content_top %}
     <div class="media-stretch">
-      <img src="http://placekitten.com/625/400" alt="test image with cats" crossorigin="">
+        <img src="http://placekitten.com/625/400" alt="test image with cats" crossorigin="">
     </div>
-  </block>
+{% endblock %}
 
-  <block name="content">
+{% block content %}
     <h2>Lies down sleep on dog bed, force dog to sleep on floor</h2>
     <p>Cat ipsum dolor sit amet, mewl for food at 4am. Meeeeouw spill litter box, scratch at owner, destroy all furniture, especially couch. Sleep on dog bed, force dog to sleep on floor stinky cat spend all night ensuring people don't sleep sleep all day yet spread kitty litter all over house.</p>
-  </block>
-
-  <block name="content-bottom">
-    <include src="share-buttons.html"></include>
-  </block>
+{% endblock %}
 
-  <block name="footer">
-    <include src="overlay.html"></include>
-  </block>
+{% block content_bottom %}
+    {% include "src/html/includes/share-buttons.html" %}
+{% endblock %}
 
-</extends>
+{% block footer %}
+    {% include "src/html/includes/overlay.html" %}
+{% endblock %}

package/src/html/typography-static-page.html

@@ -1,23 +1,23 @@
-<extends src="templates/static-page.html">
+{% extends "src/html/templates/page.html" %}
 
-  <block name="page-title">This is the main headline</block>
+{% block page_title %}This is the main headline{% endblock %}
 
-  <block name="top">
+{% block top %}
     <p>Experiences short bursts of poo-phoria after going to the loo chirp at birds, destroy the blinds. Spend all night ensuring people don't sleep sleep all day climb leg, so i show my fluffy belly but it's a trap! if you pet it i will tear up your hand yet steal the warm chair right after you get up get video posted to internet for chasing red dot.</p><p>Texts have been generated on <a href="http://www.catipsum.com/">Cat Ipsum</a>, images provided by <a href="http://placekitten.com/">placekitten</a>.</p>
-  </block>
+{% endblock %}
 
-  <block name="content-top">
+{% block content_top %}
     <div class="media-stretch">
-      <img src="http://placekitten.com/800/400" alt="test image with cats" crossorigin="">
+        <img src="http://placekitten.com/800/400" alt="test image with cats" crossorigin="">
     </div>
-  </block>
+{% endblock %}
 
-  <block name="content">
+{% block content %}
     <h2>Meow meow mama hell is other people but i love cuddles</h2>
     <p>Cat fur is the new black burrow under covers, so push your water glass on the floor bathe private parts with tongue then lick owner's face sugar, my siamese, stalks me (in a good way), day and night and hiss at vacuum cleaner flee in terror at cucumber discovered on floor. Make meme, make cute face freak human out make funny noise mow mow mow mow mow mow success now attack human.</p>
     <blockquote>
-      <p>Mark territory peer out window, chatter at birds, lure them to mouth vommit food and eat it again. Crusty butthole need to chase tail licks paws sit in box make meme, make cute face. Nap all day eat and than sleep on your face so catto munch salmono so find a way to fit in tiny box cats making all the muffins my left donut is missing, as is my right.</p>
-      <cite>Famous Cat</cite>
+        <p>Mark territory peer out window, chatter at birds, lure them to mouth vommit food and eat it again. Crusty butthole need to chase tail licks paws sit in box make meme, make cute face. Nap all day eat and than sleep on your face so catto munch salmono so find a way to fit in tiny box cats making all the muffins my left donut is missing, as is my right.</p>
+        <cite>Famous Cat</cite>
     </blockquote>
     <p>I want to go outside let me go outside nevermind inside is better pee in the shoe but eat a rug and furry furry hairs everywhere oh no human coming lie on counter don't get off counter. Plays league of legends kitty loves pigs intrigued by the shower, or play with twist ties.
     </p>
@@ -30,21 +30,19 @@
 
     <h5>And some lists, lists are so amazing</h5>
     <ol>
-      <li>Jump on human and sleep on her all night long be long in the bed, purr in the morning and then give a bite to every human around for not waking up request food.</li>
-      <li>Peer out window, chatter at birds, lure them to mouth no, you can't close the door, i haven't decided whether or not i wanna go out.</li>
-      <li>Claw at curtains stretch and yawn nibble on tuna ignore human bite human hand cough hairball, eat toilet paper, and purr when being pet and walk on a keyboard.</li>
+        <li>Jump on human and sleep on her all night long be long in the bed, purr in the morning and then give a bite to every human around for not waking up request food.</li>
+        <li>Peer out window, chatter at birds, lure them to mouth no, you can't close the door, i haven't decided whether or not i wanna go out.</li>
+        <li>Claw at curtains stretch and yawn nibble on tuna ignore human bite human hand cough hairball, eat toilet paper, and purr when being pet and walk on a keyboard.</li>
     </ol>
     <p>I like cats because they are fat and fluffy drink water out of the faucet purr when being pet i want to go outside let me go outside nevermind inside is better purr when give birth for hopped up on catnip i just saw other cats inside the house and nobody ask me before using my litter box.</p>
     <ul>
-      <li>Balinese donskoy</li>
-      <li>British shorthair munchkin cornish rex</li>
-      <li>Cheetah bombay ragdoll</li>
-      <li>Russian blue tomcat</li>
+        <li>Balinese donskoy</li>
+        <li>British shorthair munchkin cornish rex</li>
+        <li>Cheetah bombay ragdoll</li>
+        <li>Russian blue tomcat</li>
     </ul>
 
     <h6>Pet my belly, you know you want to</h6>
     <p>Hiss at vacuum cleaner eat a rug and furry furry hairs everywhere oh no human coming lie on counter don't get off counter cat mojo so get scared by sudden appearance of cucumber. Flee in terror at cucumber discovered on floor.
     </p>
-  </block>
-
-</extends>
+{% endblock %}

package/src/js/foundist.js

@@ -4,6 +4,7 @@
 import $ from 'jquery'
 import select2 from 'select2'
 
+/* eslint-disable no-unused-vars */
 import {
   Accordion,
   Foundation,
@@ -11,6 +12,7 @@ import {
   SmoothScroll,
   Toggler
 } from 'foundation-sites/js/foundation'
+/* eslint-enable no-unused-vars */
 
 import {
   initEventBridge,
@@ -37,8 +39,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') {
@@ -53,11 +57,18 @@ export function initFoundation () {
     }
   } else {
     $(window.document).foundation()
+    $(window.document).on('dom-inserted', (event) => {
+      $(event.target).foundation()
+    })
   }
 }
 
-// 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,20 +80,32 @@ 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
   }
+  const defaults = {
+    topOverlap: 0.3
+  }
+  // Find blocking element
+  const target = $cta.find('a').attr('href')
+  if (target && !target.includes('/')) {
+    defaults.blocker = target
+  }
   // Put button(s) in right position.
   // Depending on the layout, the button should be on the bottom of the page,
   // the sidebar or the main wrapper for large screen sizes.
-  const target = $cta.find('a').attr('href')
   const $newParent = $('#sidebar, #main > .grid-container > .inner-wrapper')
   if ($newParent.length) {
     const $clone = $cta.clone().appendTo($newParent).addClass('bottom show-for-large')
@@ -92,18 +115,22 @@ export function stickyButton () {
     $cta.appendTo('#page').addClass('bottom')
   }
   // Add SmoothScroll
-  const scroll = new SmoothScroll($cta.find('a'))
+  new SmoothScroll($cta.find('a')) // eslint-disable-line no-new
   // Initialize plugin
   return $cta.map((i, el) => {
     return new Foundation.StickyButton($(el), {
-      blocker: target,
-      topOverlap: 0.3
+      ...defaults,
+      ...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 +138,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/_settings.scss

@@ -24,14 +24,14 @@ $global-font-size: $base-font-size * 6.25% !default;
 // Global Colors
 $foundation-palette: (
   primary: #13505b,
-  secondary: #00a980,
-  success: #00a980,
+  secondary: #009f78,
+  success: #009f78,
   warning: #a82403,
   alert: #a82403,
 ) !default;
 $white: #ffffff !default;
 $light-gray: #f5f5f5 !default;
-$medium-gray: #a6a6a6 !default;
+$medium-gray: #949494 !default;
 $dark-gray: #595959 !default;
 $black: #222222 !default;
 $global-color-pick-contrast-tolerance: 3.5 !default;

package/src/scss/components/_accordion.scss

@@ -60,12 +60,10 @@
   }
 }
 
-.accordion-content {
-  // Assuming accordions contain either text or paragraphs or a list.
-  #{$text-tags} {
-    > &:last-child {
-      margin-bottom: 0;
-    }
+// Assuming accordions contain either text or paragraphs or a list.
+#{$text-tags} {
+  .accordion-content > &:last-child {
+    margin-bottom: 0;
   }
 }
 

package/src/scss/components/_headline.scss

@@ -0,0 +1,118 @@
+// Headline
+// - - - - - - - - - - - - - - -
+// Displays a huge headline on a background image or banner
+
+/// Highlighting background of the headline.
+/// @type Color
+$headline-background: none !default;
+
+/// Font family of the headline.
+/// @type String | List
+$headline-font-family: $header-font-family !default;
+
+/// Font weight of the headline.
+/// @type Number | String
+$headline-font-weight: $header-font-weight !default;
+
+/// Font style of the headline.
+/// @type String
+$headline-font-style: $header-font-style !default;
+
+/// Font size of the headline.
+/// @type Number
+$headline-font-size: 2 * $large-font-size !default;
+
+/// Font color of the headline.
+/// @type Color
+$headline-color: color-pick-contrast(
+  if(
+    $headline-background and $headline-background != none,
+    $headline-background,
+    $fallback-background
+  ),
+  ($body-font-color-alt, $body-font-color)
+) !default;
+
+#headline {
+  color: $headline-color;
+  align-self: end;
+
+  #{$text-tags} {
+    font-family: $headline-font-family;
+    font-weight: $headline-font-weight;
+    font-style: $headline-font-style;
+    font-size: $headline-font-size;
+    line-height: grid-lineheight($headline-font-size);
+
+    @include breakpoint(small down) {
+      font-size: $headline-font-size * 0.75;
+      line-height: grid-lineheight(0.75 * $headline-font-size);
+    }
+
+    @include breakpoint(xxlarge) {
+      font-size: $headline-font-size * 1.25;
+      line-height: grid-lineheight(1.25 * $headline-font-size);
+    }
+
+    #page.banner-layout & {
+      // Reduce font-size because there is less space for the headline.
+      @include breakpoint(25em down) {
+        font-size: $headline-font-size * 0.5;
+        line-height: grid-lineheight(0.5 * $headline-font-size);
+      }
+      @include breakpoint(medium) {
+        font-size: $headline-font-size * 0.75;
+        line-height: grid-lineheight(0.75 * $headline-font-size);
+      }
+      @include breakpoint(xlarge) {
+        font-size: $headline-font-size;
+        line-height: grid-lineheight($headline-font-size);
+      }
+      @include breakpoint(xxlarge) {
+        font-size: $headline-font-size * 1.25;
+        line-height: grid-lineheight(1.25 * $headline-font-size);
+      }
+    }
+  }
+
+  @if $headline-background and $headline-background != none {
+    #{$text-tags} {
+      background: $headline-background;
+      display: inline;
+      box-decoration-break: clone;
+      padding: 0.05em 0.25em;
+      // Adjust line-height for 0.5em of vertical padding.
+      line-height: 1.5 * grid-lineheight(1.5 * $headline-font-size);
+
+      @include breakpoint(small down) {
+        line-height: 1.5 * grid-lineheight(1.5 * 0.75 * $headline-font-size);
+      }
+
+      @include breakpoint(xxlarge) {
+        line-height: 1.5 * grid-lineheight(1.5 * 1.25 * $headline-font-size);
+      }
+
+      #page.banner-layout & {
+        @include breakpoint(25em down, medium) {
+          line-height: 1.5 * grid-lineheight(1.5 * 0.5 * $headline-font-size);
+        }
+        @include breakpoint(medium) {
+          line-height: 1.5 * grid-lineheight(1.5 * 0.75 * $headline-font-size);
+        }
+        @include breakpoint(xlarge) {
+          line-height: 1.5 * grid-lineheight(1.5 * $headline-font-size);
+        }
+        @include breakpoint(xxlarge) {
+          line-height: 1.5 * grid-lineheight(1.5 * 1.25 * $headline-font-size);
+        }
+      }
+    }
+
+    // Fake the usual margin (missing because of display: inline)
+    &:after {
+      content: "";
+      display: block;
+      height: $global-margin;
+    }
+  }
+}

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/_banner.scss

@@ -6,6 +6,7 @@ $banner-height: 46vw !default;
 $banner-background: $fallback-background !default;
 
 #banner {
+  position: absolute;
   width: 100%;
   height: $banner-height;
   background: $banner-background;
@@ -16,28 +17,64 @@ $banner-background: $fallback-background !default;
     height: 100%;
     object-fit: cover;
   }
-}
 
-#banner ~ #main {
-  #page-title {
-    padding-top: 0;
-  }
-}
+  ~ #main {
+    #page-title {
+      padding-top: 0;
+    }
 
-@include breakpoint(large) {
-  #banner {
-    position: absolute;
+    .grid-container {
+      grid-template-rows: minmax($banner-height, auto) auto;
 
-    ~ #main {
-      @include clearfix;
+      // Ensure the first row is blocked when there is no #headline.
+      #page:not(.with-headline) &:before {
+        content: "";
+      }
+    }
 
-      #top {
-        margin-top: $banner-height;
+    @include breakpoint(large) {
+      .grid-container.with-sidebar {
+        grid-template-rows: minmax($banner-height, auto) auto 1fr auto;
       }
 
       #form-wrapper {
         min-height: $banner-height;
       }
     }
+
+    #page.with-headline & #headline {
+      // Same as #main padding-top
+      margin-bottom: 1.5 * $global-padding;
+
+      @include breakpoint(large) {
+        margin-bottom: 2 * $global-padding;
+      }
+
+      // Extra padding for headlines on larger screens.
+      @include breakpoint(xlarge) {
+        padding-bottom: $global-padding;
+      }
+
+      @include breakpoint(xxlarge) {
+        padding-bottom: 2 * $global-padding;
+      }
+    }
+  }
+
+  // On small screens when there is a headline double the banner height
+  // to increase the chance that the headline will fit on the banner.
+  @include breakpoint(small down) {
+    #page.with-headline & {
+      height: 2 * $banner-height;
+
+      ~ #main .grid-container {
+        grid-template-rows: minmax(2 * $banner-height, auto) auto;
+      }
+    }
   }
 }
+
+// Give callouts some margin (assuming #messages are placed before #banner)
+#page.banner-layout #messages .callout {
+  margin-bottom: $global-margin;
+}