@comicrelief/storybook 1.34.0 → 2.0.0

package/src/sass/themes/donate/success-page.twig

@@ -0,0 +1,83 @@
+<header class="header" role="banner">
+	<div class="header__inner-wrapper">
+    <div id="block-branding" class="block block-branding">
+      <a href="https://www.comicrelief.com" title="Home" rel="home noopener noreferrer" class="site-logo site-logo--crdonate">
+        <img src="./kss-assets/images/cr_logo.svg" alt="Home">
+      </a>
+    </div>
+  </div>
+</header>
+<main>
+<div class="kss-modifier__example promo-header promo-header--default promo-header--small" style="background: url('./kss-assets/images/single_donation_skate_girl.jpg') center top no-repeat transparent;">
+    <h1 class="font--xlarge"><span class="kss-image-dimension">Promo header <br/>1900 x 592</span></h1>
+  </div>
+   <div class="inner-content inner-content--success">
+      <h1>Thank you, deee!</h1>
+      <p class="success-transactionsid">Transaction ID: b8d1a3a2-8596-416d-b512-a8d4c0c7d891</p>
+      <div class="success-social-links">
+         <span>Let the world know!</span>
+         <ul>
+            <li>
+               <a href="#facebook-share" aria-label="Share on Facebook. (Opens in a new window)." target="_blank" class="icon__fb">
+                  <svg class="icon">
+                     <use xlink:href="#icon-facebook"></use>
+                  </svg>
+               </a>
+            </li>
+            <li>
+               <a href="#twitter-share" aria-label="Share on Twitter. (Opens in a new window)." target="_blank" class="icon__twitter">
+                  <svg class="icon">
+                     <use xlink:href="#icon-twitter"></use>
+                  </svg>
+               </a>
+            </li>
+         </ul>
+      </div>
+   </div>
+   <div class="form__row--upsell">
+      <div class="cards cards--three-grid-centre cards--three-grid-unit">
+         <div class="cards-header">
+            <h2>Your £1 goes a long way</h2>
+            <p>We currently support more than 2,000 projects in the UK and around the world, tackling issues like malaria, mental illness. These are some of the people we helped last year:</p>
+         </div>
+         <div class="cards__wrapper">
+            <div class="cards__item">
+               <div class="cards__image cards__item--kevin-story"></div>
+               <div class="cards__content-wrapper">
+                  <div class="cards__content">
+                     <p>" If it wasn't for this place, I would be dead."</p>
+                     <p><a href="https://www.sportrelief.com/where-your-money-goes/kevin" class="link link--black" target="_blank" rel="noopener noreferrer">Kevin's story<span class="visuallyhidden">(opens in a new window)</span></a></p>
+                  </div>
+               </div>
+            </div>
+            <div class="cards__item">
+               <div class="cards__image cards__item--aziza-story"></div>
+               <div class="cards__content-wrapper">
+                  <div class="cards__content">
+                     <p>" Malaria impacts my daily life."</p>
+                     <p><a href="https://www.sportrelief.com/where-your-money-goes/aziza/" class="link link--black" target="_blank" rel="noopener noreferrer">Aziza's story<span class="visuallyhidden">(opens in a new window)</span></a></p>
+                  </div>
+               </div>
+            </div>
+            <div class="cards__item">
+               <div class="cards__image cards__item--georgia-story"></div>
+               <div class="cards__content-wrapper">
+                  <div class="cards__content">
+                     <p>"I got really ill, I felt I was up to failure."</p>
+                     <p><a href="https://www.sportrelief.com/where-your-money-goes/georgia" class="link link--black" target="_blank" rel="noopener noreferrer">Georgia's story<span class="visuallyhidden">(opens in a new window)</span></a></p>
+                  </div>
+               </div>
+            </div>
+         </div>
+         <a href="https://www.comicrelief.com/your-impact" aria-label="See where your money goes" class="btn btn--red">More about your impact</a>
+      </div>
+   </div>
+</main>
+
+<div class="partners">
+   <section class="donate__partners">
+      <div class="donate__partners-fr"><img src="./kss-assets/images/frsb.png" alt="Registered with Fundraising Regulator - Logo"></div>
+      <div class="donate__partners-digicert"><img src="./kss-assets/images/logo_digicert_v1.jpg" alt="DigiCert Logo"></div>
+      <p class="donate__partners-copy font--xsmall">By working with the best partners like Braintree, DigiCert, Paypal, Stripe and WorldPay, we'll keep your data safe. <a class="hyperlink" href="https://www.cafonline.org/" aria-label="Click here to go to Charities Aid Foundation account">Donate using your Charities Aid Foundation account</a></p>
+   </section>
+</div>

package/src/sass/themes/donate/variables/_colours.scss

@@ -0,0 +1,33 @@
+$colour-smoke-grey: #f0f0f0;
+$colour-mercury-grey: #e8e8e8;
+$colour-old-lavender: #806880;
+
+// 2020 Payin-Donate Update Colours:
+$colour--black: #222222;
+$colour--white: #FFFFFF;
+$colour--red: #e52730;
+$colour--blue: #024487;
+$colour--accent: #6489FC;
+
+$colour--error-msg-bg: #FFE0E1;
+
+$colour--btn-light: #BECCF9;
+$colour--btn-hover: #3B5FCD;
+$colour--btn-on-click: #2042AD;
+$colour--btn-selected: #6489FC;
+
+$colour--cta-hover: #890B11;
+$colour--cta-click: #530004;
+$colour--cta2-hover: #222222;
+$colour--cta2-on-click: #FFFFFF;
+
+$colour--cta2-disbled: #5d5d5d;
+
+
+$colour--bg-gradient-top-right: #004C99;
+$colour--bg-gradient-bottom-left: #003D7A;
+
+$colour--placeholder: #E0E0E0;
+$colour--field-border: #999999;
+
+$colour--system-blue: #80B2F7;

package/src/sass/themes/donate/variables/_mixins.scss

@@ -0,0 +1,36 @@
+@mixin clearfix {
+	content: "";
+	display: table;
+	clear:both;
+}
+
+@mixin clearfix-after {
+ 	clear: both;
+	content: " ";
+	display: block;
+	font-size: 0;
+	height: 0;
+	visibility: hidden; 
+}
+
+@mixin box-shadow-transition() {
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
+  transition: box-shadow 0.15s linear;
+  
+  &:hover,
+  &:active {
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
+  }
+
+  &:focus {
+    box-shadow: none;
+  }
+}
+
+@mixin colour-transition(){
+  transition: color 0.1s linear, background-color 0.1s linear;
+}
+
+@mixin colour-transition-2(){
+  transition: color 0.1s linear, border-color 0.1s linear;
+}

package/src/sass/themes/donate/variables/_typography.scss

@@ -0,0 +1,89 @@
+// Fonts
+$montserrat: "Montserrat", Helvetica, Arial, sans-serif;
+
+// Backwards compatibility to keep the base theme happy
+$body-font: $montserrat;
+
+// Font sizing
+$small-header-fontsize: 12px;
+$small-header-lineheight: 15px;
+
+$standard-headings-fontsize: 24px;
+$standards-headings-lineheight: 29px;
+
+$large-headings-fontsize: 36px;
+$large-headings-lineheight: 44px;
+
+$bold-36pt-fontsize: 36px;
+$bold-36pt-lineheight: 44px;
+
+$button-cta-fields-fontsize--sm: 18px;
+$button-cta-fields-lineheight--sm: 22px;
+
+/* Attempt to map to required vars */
+
+// 'Large' headings
+$h1-title-font-size: (
+  null: (36px, 44px),
+  $screen-md: (36px, 44px),
+  $screen-lg: (36px, 44px)
+);
+$h1-font-size: (
+  null: (36px, 44px),
+  $screen-md: (36px, 44px),
+  $screen-lg: (36px, 44px)
+);
+$h2-font-size: (
+  null: (36px, 44px),
+  $screen-md: (36px, 44px),
+  $screen-lg: (36px, 44px)
+);
+
+// 'Standard' headings
+$h3-font-size: (
+  null: (24px, 29px),
+  $screen-md: (24px, 29px),
+  $screen-lg: (26px, 29px)
+);
+$h4-font-size: (
+  null: (24px, 29px),
+  $screen-md: (24px, 29px),
+  $screen-lg: (24px, 29px)
+);
+
+// 'Small' headings
+$h5-font-size: (
+  null: (12px, 15px),
+  $screen-md: (12px, 15px),
+  $screen-lg: (12px, 15px)
+);
+$h6-font-size: (
+  null: (12px, 15px),
+  $screen-md: (12px, 15px),
+  $screen-lg: (12px, 15px)
+);
+
+// Labels
+$field-label-font-size: (
+  null: (14px, 17px),
+  $screen-md: (20px, 24px),
+  $screen-lg: (20px, 24px)
+);
+
+$field-font-size: (
+  null: (18px, 22px),
+  $screen-md: (20px, 24px),
+  $screen-lg: (20px, 24px)
+);
+
+$button-cta-font-size: (
+  null: (18px, 22px),
+  $screen-md: (20px, 24px),
+  $screen-lg: (20px, 24px)
+);
+
+$form-error-font-size: (
+  null: (14px, 17px),
+  $screen-md: (16px, 20px),
+  $screen-lg: (16px, 20px)
+);

package/src/sass/themes/frost/_frost-styleguide.scss

@@ -0,0 +1,150 @@
+//==========================================================================
+// Elements
+// ==========================================================================
+
+// Elements
+//
+// Style guide: 10
+
+// Typography
+//
+// Markup: typography.twig
+//
+// Style guide: 10.1
+
+// Links
+//
+// Markup: links.twig
+//
+// Style guide: 10.2
+
+// Buttons
+//
+// Buttons are normally used for key messages, or key call-to-actions. For less important messages, a link may be more appropriate. Buttons text uses the Founders Grotesk Semibold font.
+//
+// Markup: buttons.twig
+//
+// Style guide: 10.3
+
+// Colours
+//
+// Markup: colour.twig
+//
+// Style guide: 10.5
+
+// Background Colours
+//
+// To be used by row components
+//
+// Markup: background-colours.twig
+//
+// Style guide: 10.6
+
+// External Link
+//
+// Markup:
+// <a href="#" class="external-link">External Link</a>
+//
+// Style guide: 10.7
+
+// Lists
+//
+// These are the list items
+//
+// Markup:
+// <div class="cr-body">
+//  <ul>
+//    <li>Item 1</li>
+// 	  <li>Item 2</li>
+// 	  <li>Item 3</li>
+// 	  <li>Item 4</li>
+//  </ul> 
+// </div> 
+//
+// Style guide: 10.8
+
+// Table
+//
+// Standard Table
+//
+// Markup: table.twig
+//
+// Style guide: 10.9
+
+// Forms
+//
+// Markup: form--frost.twig
+//
+// Style guide: 10.90
+
+// ==========================================================================
+// Components
+// ==========================================================================
+
+// Components
+//
+// Style guide: 20
+
+// Progress indicator
+//
+// This is Progress indicator
+//
+// Markup: progress-indicator.twig
+//
+// Style guide: 20.1001
+
+// Fundraising target
+//
+// Markup: fundraising-target.twig
+//
+// Style guide: 20.1002
+
+// Just-in-time block
+//
+// Markup: just-in-time-block.twig
+//
+// Style guide: 20.1004
+
+// ==========================================================================
+// Navigation
+// ==========================================================================
+
+// Navigation
+//
+// Different types of navigation
+// 
+// Style guide: 185
+
+// Footer Nav
+//
+// Markup: footer-nav.twig
+//
+// Style guide: 185.3
+
+// ==========================================================================
+// Icons
+// ==========================================================================
+
+// Icons
+//
+// Social sharing icons currently only contain twitter and facebook.
+//
+// Style guide: 140
+
+// Social sharing icons
+//
+// Markup: social-sharing.twig
+//
+// Style guide: 140.1 
+
+// Social media follow icons
+// 
+// Markup: social-following.twig
+//
+// Style guide: 140.2
+
+// Meta icons
+// 
+// Markup: meta-icons.twig
+//
+// Style guide: 140.3

package/src/sass/themes/frost/core/components/_background-images.scss

@@ -0,0 +1,29 @@
+
+// ==========================================================================
+// Background images
+// ==========================================================================
+
+$bg-image-path: '../images/landing/';
+$bg-image-name: 'construction', 'fabrics', 'football', 'rooftop', 'rubbish-dump-01', 'rubbish-dump-02', 'sack-race';
+$bg-image-position: 'center center', 'center center', 'center bottom', 'center center', 'center center', 'center center', 'center center';  
+$i: 1;
+
+main {
+  display: block;
+  background-repeat: no-repeat;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+@for $i from 1 through length($bg-image-name) {
+  .background-image--#{$i} main {
+    background-position: #{nth($bg-image-position, $i)};
+    background-image: url($bg-image-path + nth($bg-image-name, $i) + '_bg.jpg');
+
+    @include breakpoint($screen-md) {
+      background-image: url($bg-image-path + nth($bg-image-name, $i) + '_bg@2x.jpg');
+    }
+  }
+}

package/src/sass/themes/frost/core/components/_buttons.scss

@@ -0,0 +1,57 @@
+// ==========================================================================
+// Button
+// ==========================================================================
+
+.btn {
+  background-color: $colour-blue;
+  text-transform: uppercase;
+  border: 0px;
+  padding: 18px 40px 17px;
+  letter-spacing: 1px;
+  outline: 0;
+
+  &:hover {
+    background-color: $colour-dark-blue;
+    
+  }
+}
+.btn--rectangle {
+  padding: 23px 40px 19px;
+  @include border-radius(0px);
+
+  &:hover {
+    @include border-radius(0px);
+    transform: translateY(0px); // override subtheme
+  }
+}
+.btn--full-width {
+  @include breakpoint($screen-md) {
+    width: 100%;
+  }
+}
+
+/* Ghost button 
+less padding because ghost buttons have borders */
+.btn--ghost,
+.btn--blue-ghost {
+  padding: 21px 40px 17px;
+  border: 2px solid $colour-blue;
+  background-color: $colour-white;
+  color: $colour-blue;
+
+  &:hover {
+    border: 0px;
+    padding: 23px 40px 19px;
+    background-color: $colour-dark-blue;
+    color: $colour-white;
+  }
+}
+.btn--white-ghost {
+  background-color: $colour-black;
+  border: 2px solid $colour-white;
+
+  &:hover {
+    color: $colour-black;
+    background-color: $colour-white;
+  }
+}

package/src/sass/themes/frost/core/components/_campaign-images.scss

@@ -0,0 +1,54 @@
+
+// ==========================================================================
+// Campaign images
+// ==========================================================================
+
+$campaign-image-path: '../images/campaigns/';
+$campaign-image-name: '17', '19', '21';
+
+.campaign_selection {
+	clear: both;
+
+	.campaign {
+		width: 50%;
+		text-align: center;
+		float: left;
+	}
+	.campaign-image {
+		display: block;
+		width: 125px;
+		height: 125px;
+		margin: 0px auto 15px auto;
+		cursor: pointer;
+		background-repeat: no-repeat;
+		-webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+	}
+	.campaign-name {
+		width: 95%;
+		margin: auto;
+
+		h6, p {
+			color: $colour-blue;
+		}
+		h6 {
+			@include font-size($p-small-font-size);
+		}
+		p {
+			@include font-size($p-xxsmall-font-size);
+		}
+	}
+}
+
+@for $i from 1 through length($campaign-image-name) {
+  .campaign-image--#{nth($campaign-image-name, $i)} {
+    background-image: url($campaign-image-path + nth($campaign-image-name, $i) + '.png');
+
+    &.active,
+    &:hover {
+    	background-image: url($campaign-image-path + nth($campaign-image-name, $i) + '-selected.png');
+    }
+  }
+}

package/src/sass/themes/frost/core/components/_cookie-consent.scss

@@ -0,0 +1,55 @@
+// ==========================================================================
+// Cookie consent
+// ==========================================================================
+
+.cookie-consent {
+  position: fixed;
+  bottom: 0px;
+  width: 100%;
+  padding: 10px;
+  text-align: center;
+  background: $colour-black;
+  z-index: 10;
+  
+  @include breakpoint($screen-lg) {
+    display: block;
+    padding: 15px 20px 15px;
+  }
+
+  p,
+  a {
+    color: $colour-white;
+    font-family: $body-font;
+    @include font-size($p-small-font-size);
+  }
+  p {
+    margin-top: 15px;
+  }
+  .cc_message {
+    display: inline-block;
+    margin-top: 0;
+    width: calc(100% - 50px);
+    text-align: left;
+    
+    @include breakpoint($screen-md) {
+      width: auto;
+      margin-top: 15px;
+    }
+    span {
+      margin: 0px 5px;
+    }
+  }
+
+  .cc_more_info {
+    @extend .link;
+    @extend .link--smoke-grey;
+    color: $colour-white;
+    @include font-size($p-small-font-size);
+  }
+
+  .cc_button {
+    @extend .btn;
+    @extend .btn--white-ghost;
+    width: auto !important;
+  }
+}