@moreonion/foundist 2.0.6 → 2.1.1

package/README.md

@@ -17,7 +17,7 @@ Foundist may also be used as module dependency for other themes.
 
 If you need any Foundation utilities in your custom settings file (imported
 before Foundist) import them via `@moreonion/foundation-base/scss/util;` and set
-`$base-font-size` as well as `$global-font-size: $base-font-size / 16 * 100%;`
+`$base-font-size` as well as `$global-font-size: $base-font-size * 6.25%;`
 before using any util functions (otherwise some calculations might not return
 the desired result)!
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moreonion/foundist",
-  "version": "2.0.6",
+  "version": "2.1.1",
   "description": "Foundation based default theme for Impact Stack landing pages.",
   "author": "More Onion <kontakt@more-onion.at>",
   "license": "MIT",
@@ -44,16 +44,12 @@
     "@linthtml/linthtml": "^0.8.0"
   },
   "dependencies": {
-    "@moreonion/foundation-base": "2.0.5",
+    "@moreonion/foundation-base": "2.1.1",
     "http-server": "^13.0.0",
     "posthtml": "^0.16.5",
-    "posthtml-expressions": "^1.8.1",
-    "posthtml-extend": "^0.6.0",
-    "posthtml-include": "^1.7.1"
-  },
-  "resolutions": {
-    "@babel/preset-env": "7.13.8",
-    "sass": "1.32.13"
+    "posthtml-expressions": "^1.9.0",
+    "posthtml-extend": "0.6.0",
+    "posthtml-include": "^1.7.2"
   },
   "lint-staged": {
     "*.scss": [

package/src/html/basic-action-page-cover-1col.html

@@ -3,7 +3,7 @@
   <block name="page-title">Take action now!</block>
 
   <block name="banner">
-    <img src="http://placekitten.com/1280/588" alt="test image with cats">
+    <img src="http://placekitten.com/1280/588" alt="test image with cats" crossorigin="">
   </block>
 
   <block name="top">
@@ -29,7 +29,7 @@
 
   <block name="content-top">
     <div class="media-stretch">
-      <img src="http://placekitten.com/860/455" alt="test image with cats">
+      <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
     </div>
   </block>
 

package/src/html/basic-action-page-cover-2col-reversed.html

@@ -3,7 +3,7 @@
   <block name="page-title">Take action now!</block>
 
   <block name="banner">
-    <img src="http://placekitten.com/1600/1000" alt="test image with cats">
+    <img src="http://placekitten.com/1600/1000" alt="test image with cats" crossorigin="">
   </block>
 
   <block name="top">
@@ -29,7 +29,7 @@
 
   <block name="content-top">
     <div class="media-stretch">
-      <img src="http://placekitten.com/860/455" alt="test image with cats">
+      <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
     </div>
   </block>
 

package/src/html/basic-action-page-cover-2col.html

@@ -3,7 +3,7 @@
   <block name="page-title">Take action now!</block>
 
   <block name="banner">
-    <img src="http://placekitten.com/1600/1000" alt="test image with cats">
+    <img src="http://placekitten.com/1600/1000" alt="test image with cats" crossorigin="">
   </block>
 
   <block name="top">
@@ -29,7 +29,7 @@
 
   <block name="content-top">
     <div class="media-stretch">
-      <img src="http://placekitten.com/860/455" alt="test image with cats">
+      <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
     </div>
   </block>
 

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

@@ -3,7 +3,7 @@
   <block name="page-title">Take action now!</block>
 
   <block name="banner">
-    <img src="http://placekitten.com/1280/588" alt="test image with cats">
+    <img src="http://placekitten.com/1280/588" alt="test image with cats" crossorigin="">
   </block>
 
   <block name="top">
@@ -29,7 +29,7 @@
 
   <block name="content-top">
     <div class="media-stretch">
-      <img src="http://placekitten.com/860/455" alt="test image with cats">
+      <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
     </div>
   </block>
 

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

@@ -25,7 +25,7 @@
 
   <block name="content-top">
     <div class="media-stretch">
-      <img src="http://placekitten.com/860/455" alt="test image with cats">
+      <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
     </div>
   </block>
 

package/src/html/basic-action-page-with-banner-reversed.html

@@ -3,7 +3,7 @@
   <block name="page-title">Take action now!</block>
 
   <block name="banner">
-    <img src="http://placekitten.com/1280/588" alt="test image with cats">
+    <img src="http://placekitten.com/1280/588" alt="test image with cats" crossorigin="">
   </block>
 
   <block name="top">
@@ -29,7 +29,7 @@
 
   <block name="content-top">
     <div class="media-stretch">
-      <img src="http://placekitten.com/860/455" alt="test image with cats">
+      <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
     </div>
   </block>
 

package/src/html/basic-action-page-with-banner.html

@@ -3,7 +3,7 @@
   <block name="page-title">Take action now!</block>
 
   <block name="banner">
-    <img src="http://placekitten.com/1280/588" alt="test image with cats">
+    <img src="http://placekitten.com/1280/588" alt="test image with cats" crossorigin="">
   </block>
 
   <block name="top">
@@ -29,7 +29,7 @@
 
   <block name="content-top">
     <div class="media-stretch">
-      <img src="http://placekitten.com/860/455" alt="test image with cats">
+      <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
     </div>
   </block>
 

package/src/html/basic-action-page-with-callouts.html

@@ -33,7 +33,7 @@
 
   <block name="content-top">
     <div class="media-stretch">
-      <img src="http://placekitten.com/860/455" alt="test image with cats">
+      <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
     </div>
   </block>
 

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

@@ -25,7 +25,7 @@
 
   <block name="content-top">
     <div class="media-stretch">
-      <img src="http://placekitten.com/860/455" alt="test image with cats">
+      <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
     </div>
   </block>
 

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

@@ -21,7 +21,7 @@
 
   <block name="content-top">
     <div class="media-stretch">
-      <img src="http://placekitten.com/860/460" alt="test image with cats">
+      <img src="http://placekitten.com/860/460" alt="test image with cats" crossorigin="">
     </div>
   </block>
 

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

@@ -24,7 +24,7 @@
 
   <block name="content-top">
     <div class="media-stretch">
-      <img src="http://placekitten.com/860/460" alt="test image with cats">
+      <img src="http://placekitten.com/860/460" alt="test image with cats" crossorigin="">
     </div>
   </block>
 

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

@@ -0,0 +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>
+    </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/payment-icons.html

@@ -0,0 +1,19 @@
+<div class="form-item">
+  <div class="payment-icons">
+    <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/teaser.html

@@ -1,6 +1,6 @@
 <article class="card">
   <div class="card-image">
-    <img src="http://placekitten.com/480/270" alt="test image with cats">
+    <img src="http://placekitten.com/480/270" alt="test image with cats" crossorigin="">
   </div>
   <div class="card-section">
     <div class="progress-wrapper" data-pgbar-current="140" data-pgbar-target="200">

package/src/html/templates/action-page-cover-1col.html

@@ -17,7 +17,7 @@
         <div class="top-bar grid-container">
           <div class="top-bar-left">
             <a class="logo" href="#" rel="home">
-              <img src="{{ logo }}" alt="Logo" />
+              <img src="{{ logo }}" alt="Logo" crossorigin="" />
             </a>
           </div>
           <div class="top-bar-right">
@@ -83,6 +83,6 @@
       </div>
     </section>
 
-    <script src="{{ js }}"></script>
+    <script type="module" src="{{ js }}"></script>
   </body>
 </html>

package/src/html/templates/action-page-cover-2col-reversed.html

@@ -17,7 +17,7 @@
         <div class="top-bar grid-container">
           <div class="top-bar-left">
             <a class="logo" href="#" rel="home">
-              <img src="{{ logo }}" alt="Logo" />
+              <img src="{{ logo }}" alt="Logo" crossorigin="" />
             </a>
           </div>
           <div class="top-bar-right">
@@ -92,6 +92,6 @@
       </div>
     </section>
 
-    <script src="{{ js }}"></script>
+    <script type="module" src="{{ js }}"></script>
   </body>
 </html>

package/src/html/templates/action-page-cover-2col.html

@@ -17,7 +17,7 @@
         <div class="top-bar grid-container">
           <div class="top-bar-left">
             <a class="logo" href="#" rel="home">
-              <img src="{{ logo }}" alt="Logo" />
+              <img src="{{ logo }}" alt="Logo" crossorigin="" />
             </a>
           </div>
           <div class="top-bar-right">
@@ -92,6 +92,6 @@
       </div>
     </section>
 
-    <script src="{{ js }}"></script>
+    <script type="module" src="{{ js }}"></script>
   </body>
 </html>

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

@@ -17,7 +17,7 @@
         <div class="top-bar grid-container">
           <div class="top-bar-left">
             <a class="logo" href="#" rel="home">
-              <img src="{{ logo }}" alt="Logo" />
+              <img src="{{ logo }}" alt="Logo" crossorigin="" />
             </a>
           </div>
           <div class="top-bar-right">
@@ -88,6 +88,6 @@
       </div>
     </section>
 
-    <script src="{{ js }}"></script>
+    <script type="module" src="{{ js }}"></script>
   </body>
 </html>

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

@@ -17,7 +17,7 @@
         <div class="top-bar grid-container">
           <div class="top-bar-left">
             <a class="logo" href="#" rel="home">
-              <img src="{{ logo }}" alt="Logo" />
+              <img src="{{ logo }}" alt="Logo" crossorigin="" />
             </a>
           </div>
           <div class="top-bar-right">
@@ -83,6 +83,6 @@
       </div>
     </section>
 
-    <script src="{{ js }}"></script>
+    <script type="module" src="{{ js }}"></script>
   </body>
 </html>

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

@@ -17,7 +17,7 @@
         <div class="top-bar grid-container">
           <div class="top-bar-left">
             <a class="logo" href="#" rel="home">
-              <img src="{{ logo }}" alt="Logo" />
+              <img src="{{ logo }}" alt="Logo" crossorigin="" />
             </a>
           </div>
           <div class="top-bar-right">
@@ -86,6 +86,6 @@
       </div>
     </section>
 
-    <script src="{{ js }}"></script>
+    <script type="module" src="{{ js }}"></script>
   </body>
 </html>

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

@@ -17,7 +17,7 @@
         <div class="top-bar grid-container">
           <div class="top-bar-left">
             <a class="logo" href="#" rel="home">
-              <img src="{{ logo }}" alt="Logo" />
+              <img src="{{ logo }}" alt="Logo" crossorigin="" />
             </a>
           </div>
           <div class="top-bar-right">
@@ -86,6 +86,6 @@
       </div>
     </section>
 
-    <script src="{{ js }}"></script>
+    <script type="module" src="{{ js }}"></script>
   </body>
 </html>

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

@@ -17,7 +17,7 @@
         <div class="top-bar grid-container">
           <div class="top-bar-left">
             <a class="logo" href="#" rel="home">
-              <img src="{{ logo }}" alt="Logo" />
+              <img src="{{ logo }}" alt="Logo" crossorigin="" />
             </a>
           </div>
           <div class="top-bar-right">
@@ -83,6 +83,6 @@
       </div>
     </section>
 
-    <script src="{{ js }}"></script>
+    <script type="module" src="{{ js }}"></script>
   </body>
 </html>

package/src/html/templates/static-page-cover-1col.html

@@ -17,7 +17,7 @@
         <div class="top-bar grid-container">
           <div class="top-bar-left">
             <a class="logo" href="#" rel="home">
-              <img src="{{ logo }}" alt="Logo" />
+              <img src="{{ logo }}" alt="Logo" crossorigin="" />
             </a>
           </div>
           <div class="top-bar-right">
@@ -75,6 +75,6 @@
       </div>
     </section>
 
-    <script src="{{ js }}"></script>
+    <script type="module" src="{{ js }}"></script>
   </body>
 </html>

package/src/html/templates/static-page-cover-2col.html

@@ -17,7 +17,7 @@
         <div class="top-bar grid-container">
           <div class="top-bar-left">
             <a class="logo" href="#" rel="home">
-              <img src="{{ logo }}" alt="Logo" />
+              <img src="{{ logo }}" alt="Logo" crossorigin="" />
             </a>
           </div>
           <div class="top-bar-right">
@@ -83,6 +83,6 @@
       </div>
     </section>
 
-    <script src="{{ js }}"></script>
+    <script type="module" src="{{ js }}"></script>
   </body>
 </html>

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

@@ -17,7 +17,7 @@
         <div class="top-bar grid-container">
           <div class="top-bar-left">
             <a class="logo" href="#" rel="home">
-              <img src="{{ logo }}" alt="Logo" />
+              <img src="{{ logo }}" alt="Logo" crossorigin="" />
             </a>
           </div>
           <div class="top-bar-right">
@@ -76,6 +76,6 @@
       </div>
     </section>
 
-    <script src="{{ js }}"></script>
+    <script type="module" src="{{ js }}"></script>
   </body>
 </html>

package/src/html/templates/static-page-with-banner.html

@@ -17,7 +17,7 @@
         <div class="top-bar grid-container">
           <div class="top-bar-left">
             <a class="logo" href="#" rel="home">
-              <img src="{{ logo }}" alt="Logo" />
+              <img src="{{ logo }}" alt="Logo" crossorigin="" />
             </a>
           </div>
           <div class="top-bar-right">
@@ -72,6 +72,6 @@
       </div>
     </section>
 
-    <script src="{{ js }}"></script>
+    <script type="module" src="{{ js }}"></script>
   </body>
 </html>

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

@@ -17,7 +17,7 @@
         <div class="top-bar grid-container">
           <div class="top-bar-left">
             <a class="logo" href="#" rel="home">
-              <img src="{{ logo }}" alt="Logo" />
+              <img src="{{ logo }}" alt="Logo" crossorigin="" />
             </a>
           </div>
           <div class="top-bar-right">
@@ -68,6 +68,6 @@
       </div>
     </section>
 
-    <script src="{{ js }}"></script>
+    <script type="module" src="{{ js }}"></script>
   </body>
 </html>

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

@@ -17,7 +17,7 @@
         <div class="top-bar grid-container">
           <div class="top-bar-left">
             <a class="logo" href="#" rel="home">
-              <img src="{{ logo }}" alt="Logo" />
+              <img src="{{ logo }}" alt="Logo" crossorigin="" />
             </a>
           </div>
           <div class="top-bar-right">
@@ -68,6 +68,6 @@
       </div>
     </section>
 
-    <script src="{{ js }}"></script>
+    <script type="module" src="{{ js }}"></script>
   </body>
 </html>

package/src/html/thank-you-page-cover-1col.html

@@ -3,7 +3,7 @@
   <block name="page-title">Thank you for taking action. You’re awesome!</block>
 
   <block name="banner">
-    <img src="http://placekitten.com/1600/735" alt="test image with cats">
+    <img src="http://placekitten.com/1600/735" alt="test image with cats" crossorigin="">
   </block>
 
   <block name="content">

package/src/html/thank-you-page-cover-2col.html

@@ -3,7 +3,7 @@
   <block name="page-title">Thank you for taking action. You’re awesome!</block>
 
   <block name="banner">
-    <img src="http://placekitten.com/1600/800" alt="test image with cats">
+    <img src="http://placekitten.com/1600/800" alt="test image with cats" crossorigin="">
   </block>
 
   <block name="content">

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

@@ -3,7 +3,7 @@
   <block name="page-title">Thank you for taking action. You’re awesome!</block>
 
   <block name="banner">
-    <img src="http://placekitten.com/1600/735" alt="test image with cats">
+    <img src="http://placekitten.com/1600/735" alt="test image with cats" crossorigin="">
   </block>
 
   <block name="content">

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

@@ -3,7 +3,7 @@
   <block name="page-title">Thank you for taking action. You’re awesome!</block>
 
   <block name="banner">
-    <img src="http://placekitten.com/1600/735" alt="test image with cats">
+    <img src="http://placekitten.com/1600/735" alt="test image with cats" crossorigin="">
   </block>
 
   <block name="content">

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

@@ -4,7 +4,7 @@
 
   <block name="content-top">
     <div class="media-stretch">
-      <img src="http://placekitten.com/625/400" alt="test image with cats">
+      <img src="http://placekitten.com/625/400" alt="test image with cats" crossorigin="">
     </div>
   </block>
 

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

@@ -8,7 +8,7 @@
 
   <block name="content-top">
     <div class="media-stretch">
-      <img src="http://placekitten.com/800/400" alt="test image with cats">
+      <img src="http://placekitten.com/800/400" alt="test image with cats" crossorigin="">
     </div>
   </block>
 

package/src/js/foundist.js

@@ -4,9 +4,23 @@
 import $ from 'jquery'
 import select2 from 'select2'
 
-import { Accordion, Foundation, Reveal, SmoothScroll, Toggler } from 'foundation-sites/js/foundation'
-import { SelectTwo, AdaptiveSticky, CookieBar, FileUpload, StickyButton, ToggleElement } from '@moreonion/foundation-base'
-import { storageAvailable } from '@moreonion/js-utils/src/utils'
+import {
+  Accordion,
+  Foundation,
+  Reveal,
+  SmoothScroll,
+  Toggler
+} from 'foundation-sites/js/foundation'
+
+import {
+  initEventBridge,
+  AdaptiveSticky,
+  CookieBar,
+  FileUpload,
+  SelectTwo,
+  StickyButton,
+  ToggleElement
+} from '@moreonion/foundation-base'
 
 // Add the select2 to jQuery
 // Needed for SelectTwo plugin
@@ -16,16 +30,17 @@ select2($)
 Foundation.addToJquery($)
 
 // Configure Foundation
-Foundation.plugin(ToggleElement, 'ToggleElement')
-Foundation.plugin(SelectTwo, 'SelectTwo')
 Foundation.plugin(AdaptiveSticky, 'AdaptiveSticky')
 Foundation.plugin(CookieBar, 'CookieBar')
 Foundation.plugin(FileUpload, 'FileUpload')
+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)
 export function initFoundation () {
+  initEventBridge($)
   if (typeof Drupal !== 'undefined') {
     Drupal.behaviors.foundist_initialize = {}
     Drupal.behaviors.foundist_initialize.attach = (context, settings) => {

package/src/scss/_settings.scss

@@ -16,7 +16,10 @@ $breakpoints: (
 // Global Typography
 $base-font-size: 18 !default;
 $base-line-height: 24 !default;
-$global-font-size: $base-font-size / 16 * 100% !default;
+
+// Set font size and breakpoint variables *before* importing utils!
+// 6.25% = 100% / 16 (assumed browser default value)
+$global-font-size: $base-font-size * 6.25% !default;
 
 // Global Colors
 $foundation-palette: (