@comicrelief/storybook 1.34.0 → 2.0.0

package/src/sass/themes/sr/2018/_sr18-styleguide.scss

@@ -0,0 +1,637 @@
+
+//==========================================================================
+// 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
+//
+// New Standard Forms
+//
+// Markup: form.twig
+//
+// Style guide: 10.10
+
+// ==========================================================================
+// Components
+// ==========================================================================
+
+// Components
+//
+// Style guide: 20
+
+// Full Height Single Image
+//
+// Markup: full-height-single-image.twig
+//
+// .paragraph--full-height-single-image--no-image - no image
+// .fhsi__middle-left  -  middle left
+// .paragraph--full-height-single-image--no-image.fhsi__middle-left - no image middle left
+// .paragraph--full-height-single-image--no-image.fhsi__middle-left - no image, middle left
+// .fhsi__middle-right  -  middle right
+// .paragraph--full-height-single-image--no-image.fhsi__middle-right - no image, middle right
+// .fhsi__top-left  - top left
+// .paragraph--full-height-single-image--no-image.fhsi__top-left - no image top left
+// .paragraph--full-height-single-image--no-image.fhsi__top-left - no image, top left
+// .fhsi__top-centre  -  top centre
+// .paragraph--full-height-single-image--no-image.fhsi__top-centre - no image, top centre
+// .fhsi__top-right  -  top right
+// .paragraph--full-height-single-image--no-image.fhsi__top-right - no image top right
+// .fhsi__bottom-left  -  bottom left
+// .paragraph--full-height-single-image--no-image.fhsi__bottom-left - no image bottom left
+// .fhsi__bottom-centre  -  bottom centre
+// .paragraph--full-height-single-image--no-image.fhsi__bottom-centre - no image bottom centre
+// .fhsi__bottom-right  -  bottom right
+// .paragraph--full-height-single-image--no-image.fhsi__bottom-right - no image bottom right
+//
+// .paragraph--full-height-single-image--no-image.fhsi__top-right - no image, top right
+// .fhsi__bottom-left  -  bottom left
+// .paragraph--full-height-single-image--no-image.fhsi__bottom-left - no image, bottom left
+// .fhsi__bottom-centre  -  bottom centre
+// .paragraph--full-height-single-image--no-image.fhsi__bottom-centre - no image, bottom centre
+// .fhsi__bottom-right  -  bottom right
+// .paragraph--full-height-single-image--no-image.fhsi__bottom-right - no image, bottom right
+// .paragraph--full-height-single-image--no-image.fhsi__fifty-vh - no image, 50vh variant
+// .fhsi__middle-left.fhsi__fifty-vh  -  middle left, 50vh variant
+// .paragraph--full-height-single-image--no-image.fhsi__middle-left.fhsi__fifty-vh - no image, middle left, 50vh variant
+// .fhsi__middle-right.fhsi__fifty-vh  -  middle right, 50vh variant
+// .paragraph--full-height-single-image--no-image.fhsi__middle-right.fhsi__fifty-vh - no image, middle right, 50vh variant
+// .fhsi__top-left.fhsi__fifty-vh  - top left, 50vh variant
+// .paragraph--full-height-single-image--no-image.fhsi__top-left.fhsi__fifty-vh - no image, top left, 50vh variant
+// .fhsi__top-centre.fhsi__fifty-vh  -  top centre, 50vh variant
+// .paragraph--full-height-single-image--no-image.fhsi__top-centre.fhsi__fifty-vh - no image, top centre, 50vh variant
+// .fhsi__top-right.fhsi__fifty-vh  -  top right, 50vh variant
+// .paragraph--full-height-single-image--no-image.fhsi__top-right.fhsi__fifty-vh - no image, top right, 50vh variant
+// .fhsi__bottom-left.fhsi__fifty-vh  -  bottom left, 50vh variant
+// .paragraph--full-height-single-image--no-image.fhsi__bottom-left.fhsi__fifty-vh - no image, bottom left, 50vh variant
+// .fhsi__bottom-centre.fhsi__fifty-vh  -  bottom centre, 50vh variant
+// .paragraph--full-height-single-image--no-image.fhsi__bottom-centre.fhsi__fifty-vh - no image, bottom centre, 50vh variant
+// .fhsi__bottom-right.fhsi__fifty-vh  -  bottom right, 50vh variant
+// .paragraph--full-height-single-image--no-image.fhsi__bottom-right.fhsi__fifty-vh - no image, bottom right, 50vh variant
+//
+// Style guide: 20.10
+
+// Full Height - Single Image / Single Copy
+//
+// Markup: full-height-single-image-single-copy.twig
+//
+// .paragraph--full-height-single-image-single-copy--image-right - image right
+//
+// Style guide: 20.11
+
+// Full Height - Double Image / Single Copy
+//
+// Markup: full-height-double-image-single-copy.twig
+//
+// .paragraph--full-height-double-image-single-copy--image-right - image right
+//
+// Style guide: 20.12
+
+// Full Height - Single Image / Triple Copy
+//
+// Markup: full-height-single-image-triple-copy.twig
+//
+// .paragraph--full-height-sing-img-triple-copy--image-right - image right
+//
+// Style guide: 20.13
+
+// Copy - Copy
+//
+// Markup: copy-copy.twig
+//
+// .paragraph--copy-copy--align-top  - Align top
+// .paragraph--copy-copy--align-bottom - Align bottom
+//
+// Style guide: 20.14
+
+// Copy-Video
+//
+// Markup: copy-video.twig
+//
+// .paragraph--copy-video--video-right - video right 
+//
+// Style guide: 20.15
+
+// Background Video - Copy
+//
+// Markup: bg-video-copy.twig
+//
+// .paragraph--background-video-copy--video-right - Video right
+// .paragraph--background-video-copy--fullscreen.middle-centre - Fullscreen BG video middle centre
+// .paragraph--background-video-copy--fullscreen.top-left - Fullscreen BG video top-left
+// .paragraph--background-video-copy--fullscreen.top-centre - Fullscreen BG video top-centre
+// .paragraph--background-video-copy--fullscreen.top-right - Fullscreen BG video top-right
+// .paragraph--background-video-copy--fullscreen.middle-left - Fullscreen BG video middle-left
+// .paragraph--background-video-copy--fullscreen.middle-right - Fullscreen BG video middle-right
+// .paragraph--background-video-copy--fullscreen.bottom-left - Fullscreen BG video bottom-left
+// .paragraph--background-video-copy--fullscreen.bottom-centre - Fullscreen BG video bottom-centre
+// .paragraph--background-video-copy--fullscreen.bottom-right - Fullscreen BG video bottom-right
+//
+// Style guide: 20.16
+
+// Fixed-ratio-image
+//
+// Markup: fixed-ratio-image.twig
+//
+// .paragraph--fixed-ratio-image--image-right - image right 
+//
+// Style guide: 20.17
+
+// 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
+// .cards--two-grid - Grid of two cards centre-aligned
+//
+// 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
+
+// Cookie consent
+//
+// Markup: cookie-consent.twig
+//
+// Style guide: 20.115
+
+// Footer App Links Block
+//
+// Markup: footer-app-links-block.twig
+//
+// Style guide: 20.1006
+
+// Live Total Block
+//
+// Markup: live-total-block.twig
+//
+// Style guide: 20.1007
+
+// App Link Block
+//
+// Markup: app-link-block.twig
+//
+// Style guide: 20.1003
+
+// Membership Donate Widget
+//
+// Markup: membership-signup.twig
+//
+// .paragraph--membership-signup--copy-centre - Copy centre
+// .paragraph--membership-signup--copy-left - Copy left
+//
+// Style guide: 20.1111
+
+// ==========================================================================
+// 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

package/src/sass/themes/sr/2018/base_header.twig

@@ -0,0 +1,10 @@
+<header role="banner" class="sticky-nav__header">
+  <div class="header__inner-wrapper">
+    <div id="block-comicrelief-branding" class="block block-system block-system-branding-block">
+      <a href="/" title="Home" rel="home" class="site-logo" tabindex="2">
+        <img src="/kss-assets/images/sr18-logo-2018.svg" alt="Home"></a>
+    </div>
+    {% include directory ~ 'main-nav.twig' %}
+    {% include directory ~ '../../../base/components/meta-icons/meta-icons.twig' %}
+  </div>
+</header>