@comicrelief/storybook 1.34.2 → 2.0.0

package/src/sass/themes/payin/sportrelief/pages/success-page.twig

@@ -0,0 +1,77 @@
+<section id="payin-step-four" class="content success-content">
+  <div class="bg--gradient-purple-ruby promo-header promo-header--default  promo-header--no-image">
+    <div class="promo-header__content">
+    	<div class="promo-header__content-inner promo-header__content-inner--centre">
+       	<h1 class="text-align-center font--white">Thank you</h1>
+        <p>Your payment has been processed.</p>
+      </div>
+    </div>
+  </div>
+  <div class="form__row form__row--title">
+    <div class="form__fieldset">
+      <p>Transaction ID: <strong> 371d3265-efcd-11e7-89992-0e0f567937ca</strong>
+      </p>
+    </div>
+  </div>
+  <div class="form__row--user-generate-content">
+    <div class="form__fieldset">
+      <div class="form-error"></div>
+        <div class="form-user-content">
+          <div class="form-user-content--copy-">
+            <div class="form__field--wrapper form__text form__field--whatyoudid has-error form__field--help">
+              <label for="comicrelief_payin_success_whatYouDid">
+                Tell us about your fundraising activities and you could feature in our next campaign!
+              </label>
+              <span class="form__field--help-info">Don’t forget to tick the box if you want your story to have a chance to be featured.</span>
+              <textarea id="comicrelief_payin_success_whatYouDid" name="comicrelief_payin_success[whatYouDid]" required="required" maxlength="400" placeholder="Enter your Sport Relief 2018 story..." class="form__field form__field--whatYouDid" data-validation="required length" data-validation-length="max400"></textarea>
+              <div class="form__field--error"></div>
+              <span class="help-block form-error">This is a required field</span>
+            </div>
+            <div class="form__field--wrapper form__checkbox form__field--permission has-error">
+              <label class="form__checkbox required" for="comicrelief_payin_success_permission">
+                I am happy for Comic Relief to contact me about my fundraising
+              </label>
+              <input type="checkbox" id="comicrelief_payin_success_permission" name="comicrelief_payin_success[permission]" required="required" value="1" data-validation="required" class="valid" style="">
+              <span></span>
+              <span class="help-block form-error">This is a required field</span>
+            </div>
+            <div class="form__row form__nav">
+              <div class="form__fieldset">
+                <div class="form__field--wrapper form__submit form__field--submit">
+                  <button type="submit" id="comicrelief_payin_success_submit" name="comicrelief_payin_success[submit]" class="btn btn--ruby" disabled="true">Submit story</button>
+                </div>
+              </div>
+            </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="cards cards--three-grid-centre">
+    <div class="cards__wrapper">
+      <div class="card">
+          <div class="card__image">
+              <img src="kss-assets/images/1-1-img.jpg" alt="Where does the money go" />
+          </div>
+          <div class="card__content-wrapper">
+            <div class="cards__content">
+              <h3>Where your money goes</h3>
+              <p>Sport Relief uses the money you give to fund incredible projects, in the UK and around the world, that tackle important social issues and ensure people are safe, happy and healthy.</p>
+              <p><a href="https://www.sportrelief.com/where-your-money-goes" title="Where your money goes">Find out more</a></p>
+            </div>
+          </div>
+      </div>
+      <div class="card">
+          <div class="card__image">
+            <img src="kss-assets/images/1-1-img.jpg" alt="Team sports relief" />
+          </div>
+          <div class="card__content-wrapper">
+            <div class="cards__content">
+              <h3>#teamsportrelief</h3>
+              <p>Show that you're part of a nation-wide team of awesome fundraisers, by sharing photos of your Sport Relief activites on your social channels. Don't forget to tag us with #teamsportrelief!</p>
+              <p><a href="https://www.instagram.com/explore/tags/teamsportrelief/" title="Instagram Team Sport Relief">See the team</a></p>
+            </div>
+          </div>
+      </div>
+    </div>
+  </div>
+</section>

package/src/sass/themes/payin/sportrelief/payin-sportrelief.scss

@@ -0,0 +1,82 @@
+// ==========================================================================
+// Core variables * comment files you want to override
+// ==========================================================================
+
+@import "../../../base/variables/_colours.scss";
+@import "../../../base/variables/_grid.scss";
+@import "../../../base/variables/_lists.scss";
+@import "../../../base/variables/_theme.scss";
+@import "../../../base/variables/_typography.scss";
+
+// ==========================================================================
+// Core components
+// ==========================================================================
+
+@import "../../../base/_core";
+
+// ==========================================================================
+// CR variables
+// ==========================================================================
+@import "../../cr/2017/variables/_colours.scss";
+
+// ==========================================================================
+// SR18 variables
+// ==========================================================================
+@import "../../sr/2018/variables/_colours.scss";
+@import "../../sr/2018/variables/_typography.scss";
+@import "../../sr/2018/variables/_mixins.scss";
+@import "../../sr/2018/variables/_main-nav.scss";
+
+// ==========================================================================
+// Base UI components
+// ==========================================================================
+
+// choose components one by one
+@import "../../../base/components/typography/typography";
+@import "../../../base/components/selectbox/selectbox";
+@import "../../../base/components/header/base-header";
+@import "../../../base/components/navigation/hamburger-menu-button";
+@import "../../../base/components/meta-icons/meta-icons";
+@import "../../../base/components/navigation/main-nav";
+@import "../../../base/components/social/social";
+@import "../../../base/components/navigation/footer-nav";
+@import "../../../base/components/footer/footer";
+@import "../../../base/components/promo-header/promo-header";
+@import "../../../base/components/card-block/card";
+@import "../../../base/components/cards/cards";
+@import "../../../base/components/just-in-time-block/just-in-time";
+@import "../../../base/components/form/standard-form";
+
+// ==========================================================================
+// SR18 UI components
+// ==========================================================================
+@import "../../sr/2018/components/typography/fonts";
+@import "../../sr/2018/components/typography/typography";
+@import "../../sr/2018/components/background-colours/background-colours";
+@import "../../sr/2018/components/buttons/buttons";
+@import "../../sr/2018/components/links/links";
+@import "../../sr/2018/components/navigation/main-nav";
+@import "../../sr/2018/components/promo-header/promo-header";
+
+// ==========================================================================
+// Payin variables
+// ==========================================================================
+@import "../default/variables/_payin-mixins";
+@import "../default/variables/_payin-colours";
+
+// Payin UI components
+// ==========================================================================
+@import "../default/components/_payin-form";
+@import "../default/components/checkbox/checkbox";
+// ==========================================================================
+
+// ==========================================================================
+// Payin Sportrelief components
+// ==========================================================================
+@import "components/header/_header.scss";
+@import "components/promo-header/_promo-header.scss";
+@import "components/cards/_cards.scss";
+@import "components/form/_form";
+@import "components/success/_success.scss";
+@import "components/failure/_failure.scss";
+@import "components/footer/_footer.scss";

package/src/sass/themes/rnd/2017/_rnd17-styleguide.scss

@@ -0,0 +1,496 @@
+
+//==========================================================================
+// Elements
+// ==========================================================================
+
+// Elements
+//
+// Style guide: 10
+
+// Typography
+//
+// Markup: typography.twig
+//
+// Style guide: 10.1
+
+// Links
+//
+// 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 Bold weight of the Proxima Nova font. All buttons
+// 
+// .link--large - Large - The font size is 18px and line height is 28px. Border / underline is 4px.
+// .link--small - Small - The font size is 16px and line height is 26px. Border / underline is 4px.
+// :hover - Link hover state
+// :active - Link active state
+// :focus - Link focus state
+//
+// Markup: links.twig
+//
+// Style guide: 10.2
+
+// Buttons
+// 
+// .btn--black-ghost - Black ghost button
+// .btn--white-ghost - White ghost button
+// .btn--red - Red button
+// .btn--blue - Blue button
+// .btn--purple - Purple button
+// .btn--white - White button
+// :hover - Button hover state 
+// :active - Button active state
+// :focus - Button focus state
+//
+// Markup: buttons.twig
+//
+// Style guide: 10.3
+
+// 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
+//
+// New Standard Forms
+//
+// Markup: form.twig
+//
+// Style guide: 10.10
+
+// ==========================================================================
+// Components
+// ==========================================================================
+
+// Components
+//
+// Style guide: 20
+
+// Background Single Message
+//
+// This is Paragraph Background Single Message type with an image as background
+//
+// Markup: background-single-msg.twig
+//
+// Style guide: 20.80
+
+// Card banner
+//
+// Uses card block.
+//
+// Markup: card-banner.twig
+//
+// Style guide: 20.197
+
+// Card Block
+//
+// Standard Card Block
+//
+// When no card background colour is selected the card content will have no left and right padding.
+// When a background colour is selected the card content will have padding all around (see cards grid below).
+//
+// Markup: card.twig
+//
+// Style guide: 20.60
+
+// Cards
+//
+// Markup: cards.twig
+//
+// .cards--four-grid.cards--feature-layout - Feature Layout
+// .cards--four-grid - Grid of four cards left aligned (default)
+// .cards--four-grid-centre - Grid of four cards centre align
+// .cards--three-grid - Grid of three cards left aligned
+// .cards--three-grid-centre - Grid of three cards centre align
+//
+// Style guide: 20.61
+
+// Content Reference Block 
+//
+// Comes in 4 sizes.
+//
+// Markup: content-block.twig
+//
+// .block-content--view-mode-cw-s -  Small
+// .block-content--view-mode-cw-m  -  Medium
+// .block-content--view-mode-cw-mp -  Medium Plus
+// .block-content--view-mode-cw-l  -  Large 
+//
+// Style guide: 20.40
+
+// Story
+//
+// This is the Story row component (aka fundraising journey)
+//
+// Markup: _story.twig
+//
+// Style guide: 20.90
+
+// Teaser Block
+//
+// Comes in 4 sizes and in a background-image and no-image versions (the latter not displayed here). 
+// Content is editable.
+// 
+// Markup: teaser-block.twig
+//
+// .block-content--view-mode-cw-s.teaser-block  -  Small
+// .block-content--view-mode-cw-m.teaser-block  -  Medium
+// .block-content--view-mode-cw-mp.teaser-block -  Medium Plus
+// .block-content--view-mode-cw-l.teaser-block  -  Large 
+// .block-content--view-mode-cw-s.teaser-block.teaser-block--bg-image  -  Small Background image
+// .block-content--view-mode-cw-m.teaser-block.teaser-block--bg-image  -  Medium Background image
+// .block-content--view-mode-cw-mp.teaser-block.teaser-block--bg-image -  Medium Plus Background image
+// .block-content--view-mode-cw-l.teaser-block.teaser-block--bg-image  -  Large Background image
+//
+// Style guide: 20.20
+
+// Single Message 
+//
+// Markup: single-msg.twig
+//
+// .single-msg--copy-right - Copy right
+// .single-msg--copy-left - Copy left
+// .single-msg--feature-copy-right - Feature copy right
+// .single-msg--feature-copy-left - Feature copy left
+// .single-msg--copy-only - Copy only 8 columns
+// .single-msg--copy-only-large - Copy only 10 columns
+// .single-msg--default-padding - Default
+// .single-msg--negative-top - Reduce top padding
+// .single-msg--negative-bottom - Reduce bottom padding
+// .single-msg--no-top-padding - Remove top padding
+// .single-msg--no-bottom-padding - Remove bottom padding
+// .single-msg--no-padding - Remove top and bottom padding
+//
+// Style guide: 20.70
+
+// Partners row
+//
+// This is the Partners Row
+//
+// Markup: partners-row.twig
+//
+// Style guide: 20.102
+
+// Partners Grid
+//
+// This is the Partners Grid 
+//
+// Markup: partners-grid.twig
+//
+// Style guide: 20.101
+
+// Postcode lookup
+//
+// This is postcode lookup
+//
+// Markup: postcode-lookup.twig
+//
+// Style guide: 20.1005
+
+// Progress bar
+//
+// This is Progress bar
+//
+// Markup: progress-bar.twig
+//
+// Style guide: 20.1000
+
+// Progress indicator
+//
+// This is Progress indicator
+//
+// Markup: progress-indicator.twig
+//
+// Style guide: 20.1001
+
+// Quote Block
+//
+// Comes in 4 sizes.
+//
+// Markup: content-wall-quote.twig
+//
+// .block-content--view-mode-cw-s.cw-quote  -  Small
+// .block-content--view-mode-cw-m.cw-quote  -  Medium
+// .block-content--view-mode-cw-mp.cw-quote -  Medium Plus
+// .block-content--view-mode-cw-l.cw-quote  -  Large 
+//
+// Style guide: 20.30
+
+// Search block
+//
+// Markup: search.twig
+//
+// Style guide: 20.195
+
+// News teaser
+//
+// Markup: news-teaser.twig
+//
+// Style guide: 20.23
+
+// Pagination
+//
+// Markup: pagination.twig
+//
+// Style guide: 20.150
+
+// Feature Articles block
+//
+// Feature Articles by category block
+//
+// Markup: feature-articles-block.twig
+//
+// Style guide: 20.48
+
+// Fundraising target
+//
+// Markup: fundraising-target.twig
+//
+// Style guide: 20.1002
+
+// Header
+//
+// Markup: base_header.twig
+//
+// Style guide: 20.180
+
+// Just-in-time block
+//
+// Markup: just-in-time-block.twig
+//
+// Style guide: 20.1004
+
+// Media Reference Block 
+//
+// Comes in 4 sizes.
+//
+// Markup: media-block.twig
+//
+// .block-content--view-mode-cw-s -  Small
+// .block-content--view-mode-cw-m  -  Medium
+// .block-content--view-mode-cw-mp -  Medium Plus
+// .block-content--view-mode-cw-l  -  Large 
+//
+// Style guide: 20.50
+
+// ==========================================================================
+// Pages
+// ==========================================================================
+
+// Pages
+//
+// Style guide: 300
+
+// Content Wall
+//
+// Can include Teaser, Quote, Content Reference and Media Reference blocks.
+// Title can be hidden.
+//
+// Markup: content-wall.twig
+//
+// Style guide: 300.1
+
+// News article
+//
+// News article page
+//
+// Markup: news-article.twig
+//
+// Style guide: 300.5
+
+// Press release article page
+//
+// Markup: press-release-article.twig
+//
+// Style guide: 300.6
+
+// News overview page
+//
+// Overview for news landing page with filter
+//
+// Markup: news.twig
+//
+// Style guide: 300.20
+
+// Press releases overview page
+//
+// Markup: news_press-releases.twig
+//
+// Style guide: 300.25
+
+// Partner Page
+//
+// Individual Partner page
+//
+// Markup: partners.twig
+//
+// Style guide: 300.26
+
+// Search results page
+//
+// Markup: search-results.twig
+//
+// Style guide: 300.30
+
+// ==========================================================================
+// Email Sign Up
+// ==========================================================================
+
+// Email sign up 
+//
+// Style guide: 120
+
+// Email sign up header
+//
+// Markup: email-signup-header.twig
+//
+// Style guide: 120.1
+
+// Email sign up standard
+//
+// Has a second message for school resources
+//
+// Markup: email-signup-standard.twig
+//
+// Style guide: 120.2
+
+// Email sign up fundraise
+//
+// Markup: email-signup-fundraise.twig
+//
+// Style guide: 120.3
+
+// Email sign up workplace
+//
+// Markup: email-signup-workplace.twig
+//
+// Style guide: 120.4
+
+// Email sign up register interest
+//
+// Markup: email-signup-interest.twig
+//
+// Style guide: 120.5
+
+// ==========================================================================
+// Miscellaneous
+// ==========================================================================
+
+// Miscellaneous
+//
+// Style guide 160
+
+// Animations
+//
+// Markup: animations.twig
+//
+// Style guide: 160.1
+
+// Demo
+//
+// Markup: demo.twig
+//
+// Style guide: 160.2
+
+// ==========================================================================
+// Grid & Breakpoints
+// ==========================================================================
+
+// Grid & Breakpoints
+//
+// Markup: grid.twig
+//
+// Style guide: 1.0
+
+// ==========================================================================
+// Navigation
+// ==========================================================================
+
+// Navigation
+//
+// Different types of navigation
+// 
+// Style guide: 185
+
+// Main Nav
+//
+// This is the Main Nav
+//
+// The main nav relies on the smartmenus plugin which is added as a dependency to the pattern-lab. 
+// This plugin will need to be included to any environment in which the main nav component is used.
+//
+// Markup: main-nav.twig
+//
+// Style guide: 185.1
+
+// Feature Nav
+//
+// Markup: feature-nav.twig
+//
+// Style guide: 185.2
+
+// 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