@comicrelief/storybook 1.34.2 → 2.0.0

package/src/sass/themes/cr/2019/components/copy-copy/_copy-copy.scss

@@ -0,0 +1,57 @@
+.paragraph--copy-copy {
+  width: 100%;
+  .copy-copy {
+    &__text-wrapper {
+      padding: 15vw 5vw;
+      .copy-copy__text {
+        height: auto;
+      }
+    }
+
+    /* If this component is acting as our header */
+    header & {
+      &__text-wrapper {
+        padding: 10vw 5vw;
+      }
+    }
+  }
+
+  @include breakpoint($screen-md) {
+    display: flex;
+    .copy-copy {
+      &__text-wrapper {
+        display: inline-block;
+        vertical-align: top;
+        width: 50%;
+      }
+
+      // text should be at least the view height, but if the text doesn't fit increase height automatically
+      &__text-wrapper {
+        padding: 5vw;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+
+      header & {
+        &__text-wrapper {
+          padding: 5vw;
+        }
+      }
+    }
+
+    // Align top
+    &.paragraph--copy-copy--align-top {
+      .copy-copy__text-wrapper {
+        justify-content: flex-start;
+      }
+    }
+
+    // Align bottom
+    &.paragraph--copy-copy--align-bottom {
+      .copy-copy__text-wrapper {
+        justify-content: flex-end;
+      }
+    }
+  }
+}

package/src/sass/themes/cr/2019/components/copy-copy/copy-copy.twig

@@ -0,0 +1,22 @@
+<section class="paragraph--copy-copy {{modifier_class}} bg--coral">
+    <div class="copy-copy__text-wrapper bg--green">
+        <div class="copy-copy__text cr-body">
+            <h1 class="text--title">Red Nose Day</h1>
+            <p>On Friday 15 March, people across the UK will be coming together to do things big and small, that will add up to something massive. And we’d like you to join in.</p>
+            <p>On Friday 15 March, people across the UK will be coming together to do things big and small, that will add up to something massive. And we’d like you to join in.</p>
+            <p>On Friday 15 March, people across the UK will be coming together to do things big and small, that will add up to something massive. And we’d like you to join in.</p>
+            <p>
+                <a class="btn btn--light-coral" href="https://shop.comicrelief.com/" target="_blank">Order a fundraising pack</a>
+            </p>
+        </div>
+    </div>
+    <div class="copy-copy__text-wrapper bg--orange">
+        <div class="copy-copy__text cr-body">
+            <h1 class="text--title">Red Nose Day</h1>
+            <p>On Friday 15 March, people across the UK will be coming together to do things big and small, that will add up to something massive. And we’d like you to join in.</p>
+            <p>
+                <a class="btn btn--light-coral" href="https://shop.comicrelief.com/" target="_blank">Order a fundraising pack</a>
+            </p>
+        </div>
+    </div>
+</section>

package/src/sass/themes/cr/2019/components/copy-video/_copy-video.scss

@@ -0,0 +1,152 @@
+$ratio-16-9: 56.25%;
+
+.paragraph--copy-video {
+  display: flex;
+  flex-flow: column;
+  width: 100%;
+
+  img {
+    width: 100%;
+    display: block;
+  }
+  
+  .copy-video {
+    &__video-wrapper,
+    &__text-wrapper {
+      width: 100%;
+    }
+
+    &__text-wrapper {
+      padding: 15vw 5vw;
+    }
+
+    &__video-wrapper {
+      position: relative;
+      height: 0;
+      padding-bottom: $ratio-16-9;
+      padding-top: 0;
+
+      iframe,
+      img,
+      .copy-video__button {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        border: 0;
+      }
+
+      img {
+        z-index: 2;
+      }
+
+      .copy-video__button {
+        z-index: 3;
+        border-radius: 0;
+        background-position: center center;
+        transition: 0;
+
+        // Preload bg images
+        background: url($image-path + "loader.gif") no-repeat -9999px -9999px;
+        background: url($image-path + "loader.gif") no-repeat -9999px -9999px,
+                url($image-path + "copyvideo--play-icon.svg") no-repeat -9999px -9999px,
+                url($image-path + "copyvideo--play-icon__hover.svg") no-repeat -9999px -9999px;
+
+        &.js-loading {
+          background: rgba(0, 0, 0, 0.5) url($image-path + "loader.gif") center no-repeat;
+          background-position: center center;
+          background-size: 70px;
+          @include breakpoint($screen-lg) {
+            background-size: 100px;
+          }
+        }
+        
+        &.js-ready {
+          background: rgba(0, 0, 0, 0) url($image-path + "copyvideo--play-icon.svg") center no-repeat;
+          background-position: center center;
+          background-size: 70px;
+          @include breakpoint($screen-lg) {
+            background-size: 100px;
+          }
+
+          &:hover {
+            background: rgba(0, 0, 0, 0) url($image-path + "copyvideo--play-icon__hover.svg") center no-repeat;
+            background-position: center center;
+            background-size: 70px;
+            @include breakpoint($screen-lg) {
+              background-size: 100px;
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  @include breakpoint($screen-md) {
+    flex-flow: row;
+
+    img {
+      object-fit: cover;
+      height: 100%;
+    }
+
+    .copy-video {
+      &__video-wrapper,
+      &__text-wrapper {
+        width: 50%;
+      }
+
+      &__text-wrapper {
+        padding: 5vw;
+        display: flex;
+        flex-flow: column;
+        justify-content: center;
+      }
+
+      &__video-wrapper {
+        height: auto;
+        overflow: hidden;
+        // Divided by 2, as we're now at a width of 50%, not 100%;
+        padding-bottom: calc( #{$ratio-16-9} / 2);
+
+        iframe {
+          top: 50%;
+          left: 50%;
+          width: 100%;
+          height: 100%;
+          transform: translate(-50%, -50%);
+        }
+      }
+    }
+  }
+
+  &--portrait-50,
+  &--portrait-100 {
+    @include breakpoint($screen-md) {
+      height: 50vh;
+      
+      .copy-video__video-wrapper {
+        padding-bottom: 0;
+        
+        iframe {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  &--portrait-100 { 
+    @include breakpoint($screen-md) {
+      height: 100vh;
+    }
+  }
+
+  &--video-right {
+    @include breakpoint($screen-md) {
+      flex-flow: row-reverse;
+    }
+  }
+}

package/src/sass/themes/cr/2019/components/copy-video/copy-video.twig

@@ -0,0 +1,47 @@
+{% set thumbnail_img = "https://upload.wikimedia.org/wikipedia/commons/5/57/Cumulus_Clouds_over_Yellow_Prairie2.jpg" %}
+{% set video_id = "epDTcPgIKgU" %}
+{% set port_video_id = "rwlAhFaLzXg" %}
+
+<section class="paragraph--copy-video {{modifier_class}}">
+  <div class="copy-video__video-wrapper">
+    <iframe class="copy-video__video" src="https://www.youtube.com/embed/{{video_id}}?enablejsapi=1&rel=0&fs=0" modestbranding="1" showtitle="0"
+      showinfo="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
+    <button class="copy-video__button"></button>
+    <img src="{{thumbnail_img}}" class="copy-video__thumbnail" />
+  </div>
+  <div class="bg--teal copy-video__text-wrapper">
+    <h1>Copy-Video Component: 16:9</h1>
+  </div>
+</section>
+
+<p>&nbsp;</p>
+
+<section class="paragraph--copy-video paragraph--copy-video--portrait-50 {{modifier_class}}">
+  <div class="copy-video__video-wrapper">
+    <iframe class="copy-video__video" src="https://www.youtube.com/embed/{{port_video_id}}?enablejsapi=1&rel=0&fs=0" modestbranding="1" showtitle="0"
+      showinfo="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
+    </iframe>
+    <button class="copy-video__button"></button>
+    <img src="{{thumbnail_img}}" class="copy-video__thumbnail" />
+  </div>
+  <div class="bg--coral copy-video__text-wrapper">
+    <h1>Copy-Video Component: portrait 50vh</h1>
+  </div>
+</section>
+
+<p>&nbsp;</p>
+
+<section class="paragraph--copy-video paragraph--copy-video--portrait-100 {{modifier_class}}">
+  <div class="copy-video__video-wrapper">
+    <iframe class="copy-video__video" src="https://www.youtube.com/embed/{{port_video_id}}?enablejsapi=1&rel=0&fs=0" frameborder="0" showtitle="0"
+      showinfo="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
+    </iframe>
+    <button class="copy-video__button"></button>
+    <img src="{{thumbnail_img}}" class="copy-video__thumbnail" />
+  </div>
+  <div class="bg--yellow copy-video__text-wrapper">
+    <h1>Copy-Video Component: portrait 100vh</h1>
+  </div>
+</section>
+
+<p>&nbsp;</p>

package/src/sass/themes/cr/2019/components/copy-video/js/copy-video.js

@@ -0,0 +1,62 @@
+// To store each YT player object per video
+var players = {}
+
+jQuery(document).ready(function(){
+  // Only load the YT API if we've got a Copy-Video element on the page
+  if(jQuery(".paragraph--copy-video").length){
+    var tag = document.createElement('script')
+    tag.src = "//www.youtube.com/player_api";
+    jQuery('head').append(tag);
+
+    // Update all our our 'play' buttons to show loading state
+    jQuery('button.copy-video__button').addClass('js-loading');
+  }
+});
+
+// Only called on successful YT API load
+function onYouTubePlayerAPIReady() {
+  // Loop through each iframe video on the page
+  jQuery( "iframe.copy-video__video").each(function (index) {
+
+    // Create IDs dynamically
+    var iframeID = "js-copy-video-" + index;
+    var buttonID = "js-copy-video-" + index + "__button";
+
+    // Set IDs
+    jQuery(this).attr('id', iframeID);
+    jQuery(this).next('button.copy-video__button').attr('id', buttonID);
+
+    // Associate video player with button via index
+    players[buttonID] = { player: null, }
+
+    // Set-up a player object for each video
+    players[buttonID].player =  new YT.Player(iframeID, {
+      events: { 'onReady': onPlayerReady }
+    });
+  });
+}
+
+function onPlayerReady(event) {
+  // The iframe that's ready to be used
+  var readyIframeID = event.target.a.id;
+
+  // Construct button ID, pass to clickhandler
+  var readyButtonID = readyIframeID + "__button";
+
+  // Update state classes
+  jQuery('#'+readyButtonID).removeClass('js-loading').addClass('js-ready')
+
+  // Attach handler for this specific button      
+  clickHandler(readyButtonID);
+}
+
+function clickHandler(thisButtonID) {
+
+  jQuery('#'+thisButtonID).on('click', function() {
+    // Remove from DOM
+    jQuery(this).next('picture, img').remove().end().remove();
+
+    // Trigger YT player
+    players[thisButtonID].player.playVideo();
+  });
+}

package/src/sass/themes/cr/2019/components/email-signup/_email-signup-head.scss

@@ -0,0 +1,5 @@
+
+.block--cr-email-signup--head.cr-header-email-signup-form input.button[type=submit] {
+  @extend .btn--red;
+  margin: 0 0 40px 0 !important;
+}

package/src/sass/themes/cr/2019/components/fixed-ratio-image/_fixed-ratio-image.scss

@@ -0,0 +1,63 @@
+.paragraph--fixed-ratio-image {
+  display: flex;
+  flex-flow: column;
+  width: 100%;
+
+  img {
+    width: 100%;
+    display: block;
+  }
+  
+  .fixed-ratio-image {
+
+    &__image-wrapper,
+    &__text-wrapper {
+      width: 100%;
+    }
+
+    &__text-wrapper {
+      padding: 15vw 5vw;
+    }
+  }
+
+  header & {
+    .fixed-ratio-image__text-wrapper {
+      padding: 10vw 5vw;
+    }
+  }
+  
+  @include breakpoint($screen-md) {
+    flex-flow: row;
+
+    img {
+      object-fit: cover;
+      height: 100%;
+    }
+
+    .fixed-ratio-image {
+      &__image-wrapper,
+      &__text-wrapper {
+        width: 50%;
+      }
+
+      &__text-wrapper {
+        padding: 5vw;
+        display: flex;
+        flex-flow: column;
+        justify-content: center;
+      }
+    }
+
+    header & {
+      .fixed-ratio-image__text-wrapper {
+        padding: 5vw;
+      }
+    }
+  }
+
+  &--image-right {
+    @include breakpoint($screen-md) {
+      flex-flow: row-reverse;
+    }
+  }
+}

package/src/sass/themes/cr/2019/components/fixed-ratio-image/fixed-ratio-image.twig

@@ -0,0 +1,10 @@
+<section class="paragraph--fixed-ratio-image {{modifier_class}}">
+    <div class="fixed-ratio-image__image-wrapper">
+        <img src="kss-assets/images/4-3-img.jpg" />
+    </div>
+    <div class="bg--teal fixed-ratio-image__text-wrapper">
+        <h1>PREPARE FOR A SPECTACULAR NIGHT OF COMEDY</h1>
+        <p>28 February 2019. One night, one stage, eight giants of comedy live at The SSE Arena, Wembley</p>
+        <p><a class="btn btn--white" href="https://www.comicrelief.com/#newsletter" title="find out more about Spectacular">Sign up for pre-sale tickets</a></p>
+    </div>
+</section>

package/src/sass/themes/cr/2019/components/full-height-double-image-single-copy/_full-height-double-image-single-copy.scss

@@ -0,0 +1,107 @@
+.paragraph--full-height-double-image-single-copy {
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+
+  .fhdisc {
+    &__image-wrapper,
+    &__text-wrapper {
+      position: relative;
+      height: auto;
+      width: 100%;
+    }
+
+    &__text-wrapper {
+      padding: 15vw 5vw;
+    }
+
+    &__image img {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+
+    /* If this component is acting as our header */
+    header & {
+      &__text-wrapper {
+        padding: 10vw 5vw;
+      }
+    }
+  }
+
+    // Medium screen
+    @include breakpoint($screen-md) {
+      display: flex;
+      flex-direction: row;
+      min-height: 100vh;
+
+      .fhdisc {
+
+        &__text-wrapper,
+        &__image-wrapper {
+          min-height: 100vh;
+          width: 50%;
+          float: left;
+        }
+
+        &__text-wrapper {
+          padding: 5vw;
+          display: flex;
+          -webkit-box-align: center;
+          -webkit-align-items: center;
+          -ms-flex-align: center;
+          align-items: center;
+        }
+
+        &__image {
+          min-height: 50vh;
+          flex-grow: 1;
+          position: relative;
+
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
+        }
+
+        &__image-wrapper {
+          display: flex;
+          flex-direction: column;
+        }
+
+        &__text-3 {
+          width: calc(100% - 5vw);
+        }
+
+        header & {
+          &__text-wrapper {
+            padding: 5vw;
+          }
+        }
+      }
+    }
+
+    /* Image align left */
+    &--image-right {
+      display: flex;
+      flex-direction: column;
+
+      .fhdisc {
+
+        &__image-wrapper,
+        &__image,
+        &__text-wrapper {
+          flex-shrink: 0;
+        }
+      }
+
+        // Medium screen
+        @include breakpoint($screen-md) {
+          flex-direction: row-reverse;
+        }
+      }
+    }

package/src/sass/themes/cr/2019/components/full-height-double-image-single-copy/full-height-double-image-single-copy.twig

@@ -0,0 +1,23 @@
+<section class="paragraph--full-height-double-image-single-copy {{modifier_class}} bg--teal">
+    <div class="fhdisc__image-wrapper">
+        <div class="fhdisc__image">
+            <img src="https://www.comicrelief.com/sites/default/files/styles/bg_rich_text_wide/public/2018-12/spectacular_header_v5%402x.jpg?itok=Pr8MA0UX" />
+        </div>
+        <div class="fhdisc__image">
+            <img src="https://www.comicrelief.com/sites/default/files/styles/bg_rich_text_wide/public/2018-08/cr_your_impact_header_l_v2.jpg?itok=x6zA5nU0" />
+        </div>
+    </div>
+    <div class="bg--teal fhdisc__text-wrapper">
+        <div class="bg--magente fhdisc__text-3">
+        <h1 class="text-align-center"><strong>PREPARE FOR A SPECTACULAR NIGHT OF COMEDY</strong></h1>
+
+<p class="text-align-center">28 February 2019. One night, one stage, eight giants of comedy live at The SSE Arena, Wembley</p>
+
+
+<p class="text-align-center">Here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, </p>
+
+
+<p class="text-align-center"><a class="btn btn--white" href="https://www.comicrelief.com/#newsletter" title="find out more about Spectacular">Sign up for pre-sale tickets</a></p>
+         </div>
+    </div>
+</section>

package/src/sass/themes/cr/2019/components/full-height-single-image/_full-height-single-image.scss

@@ -0,0 +1,138 @@
+.paragraph--full-height-single-image {
+
+	img {
+		width: 100%;
+		display: block;
+		height: 100%;
+	}
+
+	.fhsi__text-wrapper {
+		padding: 5vw;
+	}
+
+	@include breakpoint ($screen-md) {
+		height: 100vh;
+		position: relative;
+
+		img {
+			object-fit: cover;
+		}
+
+		&.fhsi__fifty-vh {
+			height: 50vh;
+		}
+
+		.fhsi {
+
+			&__text-wrapper {
+				position: absolute;
+				width: 56.3%;
+				box-sizing: content-box;
+				height: auto;
+			}
+
+            // Align middle
+            &__middle-left,
+            &__text-wrapper,
+            &__middle-right {
+            	top: 50%;
+            }
+
+            &__text-wrapper {
+            	left: 50%;
+            	transform: translate(-50%, -50%);
+
+            }
+
+            &__middle-left {
+            	left: 0;
+            	transform: translateY(-50%);
+            }
+
+            &__middle-right {
+            	right: 0;
+            	transform: translateY(-50%);
+            }
+
+            // Align top
+            &__top-left,
+            &__top-centre,
+            &__top-right {
+            	top: 0;
+            	transform: translate(0);
+            }
+
+            &__top-left {
+            	left: 0;
+            }
+
+            &__top-centre {
+            	left: 50%;
+            	transform: translateX(-50%);
+            }
+
+            &__top-right {
+            	right: 0;
+            }
+
+            // Align bottom
+            &__bottom-left,
+            &__bottom-centre,
+            &__bottom-right {
+            	top: auto;
+            	transform: translate(0);
+                // To make position bottom more important over position top
+                bottom: 0;
+              }
+
+              &__bottom-left {
+              	left: 0;
+              }
+
+              &__bottom-centre {
+              	left: 50%;
+              	transform: translateX(-50%);
+              }
+
+              &__bottom-right {
+              	right: 0;
+              }
+
+            // To make position right more important over position left
+            &__top-right,
+            &__middle-right,
+            &__bottom-right {
+            	left: auto;
+            }
+          }
+        }
+
+        @include breakpoint($screen-lg) {
+        	.fhsi__text-wrapper {
+        		width: 41.7%;
+        		max-width: 600.75px;
+        	}
+        }
+
+        &--no-image {
+        	picture,
+        	img {
+        		display: none;
+        	}
+
+        	@include breakpoint($screen-md) {
+        		.fhsi__text-wrapper {
+        			width: 69.3%;
+        			box-sizing: content-box;
+        		}
+        	}
+
+        	@include breakpoint($screen-lg) {
+        		.fhsi__text-wrapper {
+        			width: 55.3%;
+        			max-width: 820px;
+
+        		}
+        	}
+        }
+      }