@comicrelief/storybook 1.34.2 → 2.0.1

package/src/sass/themes/sr/2018/components/bg-video-copy/_bg-video-copy.scss

@@ -0,0 +1,206 @@
+.paragraph--background-video-copy {
+  width: 100%;
+
+  .bgvc {
+    &__video-wrapper {
+
+      position: relative;
+      height: 0;
+      // Will give us a height-width ratio of 4:3
+      padding-bottom: 75%;
+
+      video {
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        object-fit: cover;
+      }
+    }
+
+    &__text-wrapper {
+      padding: 15vw 5vw;
+      .bgvc__text {
+        height: auto;
+      }
+    }
+
+    /* If this component is acting as our header */
+    header & {
+      &__text-wrapper {
+        padding: 10vw 5vw;
+      }
+    }
+  }
+
+  @include breakpoint($screen-md) {
+    display: flex;
+
+    .bgvc {
+      &__video-wrapper,
+      &__text-wrapper {
+        display: inline-block;
+        vertical-align: top;
+        width: 50%;
+      }
+
+      &__video-wrapper {
+        position: relative;
+        overflow: hidden;
+        height: inherit;
+        padding-bottom: 0;
+
+        // position image absolutely so height of section will be based on the text
+        video {
+          @include no-objectfit; // IE11
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+
+      // text should be at least the viewheight, but if the text doesn't fit increase height automatically
+      &__text-wrapper {
+        padding: 5vw;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-height: 100vh;
+      }
+
+      header & {
+        &__text-wrapper {
+          padding: 5vw;
+        }
+      }
+    }
+
+    &--video-right {
+      flex-basis: auto; // IE10
+      flex-direction: row-reverse;
+      -ms-flex-direction: row-reverse; // IE10
+    }
+
+    &--video-left,
+    &--video-right {
+      .bgvc__video-wrapper video {
+        @supports (-ms-ime-align: auto) {
+          height: 100%;
+          width: auto;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%,-50%);
+        }
+      }
+    }
+  }
+
+  // Fullscreen version, simulating the Full Height Single Image component
+  &--fullscreen {
+    @include breakpoint ($screen-md) {
+      display: block;
+      position: relative;
+      height: 100vh;
+
+      .bgvc {
+        &__video-wrapper {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          video {
+            object-fit: cover;
+            
+            @supports (-ms-ime-align: auto) {
+              height: auto;
+              width: 100%;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%,-50%);
+            }
+          }
+        }
+
+        &__text-wrapper  {
+          min-height: 0;
+          padding: 5vw;
+          position: absolute;
+          width: 56.3%;
+          height: auto;
+          box-sizing: content-box;
+        }
+      }
+
+      &.top-left,
+      &.middle-left,
+      &.bottom-left {
+        .bgvc__text-wrapper {
+          transform: translateX(0);
+          left: 0;
+        }
+      }
+
+      &.top-right,
+      &.middle-right,
+      &.bottom-right {
+        .bgvc__text-wrapper {
+          transform: translateX(0);
+          right: 0;
+        }
+      }
+
+      &.top-left,
+      &.top-right {
+        .bgvc__text-wrapper {
+          transform: translateY(0);
+          top: 0;
+        }
+      }
+
+      &.middle-left,
+      &.middle-right {
+        .bgvc__text-wrapper {
+          transform: translateY(-50%);
+          top: 50%;
+        }
+      }
+
+      &.bottom-left,
+      &.bottom-right {
+        .bgvc__text-wrapper {
+          transform: translateY(0);
+          top: auto;
+          bottom: 0;
+        }
+      }
+
+      &.middle-centre .bgvc__text-wrapper {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      &.bottom-centre .bgvc__text-wrapper {
+        top: auto;
+        bottom: 0;
+        left: 50%;
+        transform: translate(-50%, 0%);
+      }
+
+      &.top-centre .bgvc__text-wrapper {
+        top: 0;
+        left: 50%;
+        transform: translate(-50%, 0);
+      }
+    }
+
+    @include breakpoint($screen-lg) {
+      .bgvc__text-wrapper {
+        width: 41.7%;
+        max-width: 600.75px;
+      }
+    }
+  }
+}

package/src/sass/themes/sr/2018/components/bg-video-copy/bg-video-copy.twig

@@ -0,0 +1,16 @@
+<section class="paragraph--background-video-copy {{modifier_class}} bg--dark-teal">
+  <div class="bgvc__video-wrapper objectfit">
+
+    <video muted="true" preload="none" poster="https://upload.wikimedia.org/wikipedia/commons/5/57/Cumulus_Clouds_over_Yellow_Prairie2.jpg">
+      <source src="videos/SR18-promo.mp4" type="video/mp4">
+    </video>
+
+  </div>
+  <div class="bgvc__text-wrapper">
+    <div class="bgvc__text cr-body">
+      <h1 style="text-align: center;">
+        Background Video - Copy component
+      </h1>
+    </div> 
+  </div>
+</section>

package/src/sass/themes/sr/2018/components/bg-video-copy/js/bg-video-copy.js

@@ -0,0 +1,72 @@
+(function($) {
+
+  var allVideos = [],
+      thisID = "",
+      thisSrc = "";
+
+  $(document).ready(function() {
+
+    var isIOS = navigator.userAgent.match(/iPhone|iPad|iPod/i);
+    var isSMBreakpoint = $('span.md-breakpoint').is(":not(:visible)");
+
+    // Stop any video functionality if we're using iOS and/or on the SM breakpoint
+    if (isIOS !== null || isSMBreakpoint) { 
+      return;
+    }
+
+    // Otherwise, do cool video stuff
+    $('.paragraph--background-video-copy').each(function(index) {
+
+      $this = $(this);
+      $thisVideo = $this.find('video');
+
+      // Dynamically create an ID and add it to the video for triggering purposes
+      thisID = 'background-video-copy__video-' + index;
+
+      $thisVideo.attr('id', thisID);
+
+      // Store a ref to this video and its offset bottom position
+      allVideos[index] = {
+        top: $this.offset().top,
+        id: thisID
+      };
+    });
+
+    // Only attach the handler if we've got vids in the current page
+    if (allVideos.length) {
+      handleScroll();
+    }
+  });
+
+
+  function handleScroll() {
+    // Won't recalculate this *every* scroll; resizes be damned
+    var winHeight = window.innerHeight,
+      winBottom = winHeight,
+      thisVideo = null,
+      videoCounter = 0;
+
+    // Initial check to trigger any videos that are already on-screen
+    if (winBottom >= allVideos[videoCounter].top) {
+      document.getElementById(allVideos[videoCounter].id).play();
+      videoCounter++;
+    }
+
+    $(window).on("scroll", function() {
+
+      // Figure out the current bottom position of the window
+      winBottom = window.pageYOffset + winHeight;
+
+      // Unbind the scroll handler if we've reached our total video number
+      if (videoCounter >= allVideos.length) {
+        $(window).off("scroll");
+      }
+
+      // If we've scrolled a video into view, trigger play
+      else if (winBottom >= allVideos[videoCounter].top && videoCounter < allVideos.length ) {
+        document.getElementById(allVideos[videoCounter].id).play();
+        videoCounter++;
+      }
+    });
+  }
+})(jQuery);

package/src/sass/themes/sr/2018/components/buttons/_buttons.scss

@@ -0,0 +1,169 @@
+// Buttons
+//
+// Buttons are normally used for key messages, or key call-to-actions. For less important messages, a link may be more appropriate (see Links). Buttons text uses the Black weight of the Sailec font.
+
+.btn {
+  display: block;
+  width: 100%;
+  height: auto;
+  min-height: 60px;
+  margin: 0 auto;
+  padding: 20px 40px;
+  cursor: pointer;
+  text-align: center;
+  vertical-align: middle;
+  text-decoration: none;
+  border: none;
+  font-family: $font-bold--sr18;
+  font-size: 18px;
+  line-height: 18px;
+  transition: background-color .1s linear;
+  box-sizing: border-box;
+
+  @include border-radius(30px);
+  span {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  @include breakpoint($screen-md) {
+    width: auto;
+    display: inline-block;
+    padding: 21px 30px;
+    font-size: 18px;
+    line-height: 18px;
+  }
+
+  &.btn--full-width {
+    @include breakpoint($screen-md) {
+      display: block;
+      width: 100%;
+    }
+  }
+  + .btn {
+    margin-top: 30px;
+    @include breakpoint($screen-md) {
+      margin-top: 0;
+      margin-left: 25px;
+    }
+  }
+  &--fixed-width {
+    width: 100%;
+  }
+}
+
+p + p {
+  .btn {
+    margin-top: 10px;
+  }
+} 
+
+
+//button types (font_colour, bg_colour)
+.btn--black {
+  @include sr_button_types($colour-white, $colour-black);
+}
+.btn--dark-blue {
+  @include sr_button_types($colour-white, $colour-dark-blue);
+}
+.btn--dark-blue-lighter {
+  @include sr_button_types($colour-white, $colour-dark-blue-lighter);
+}
+.btn--white-smoke {
+  @include sr_button_types($colour-dark-blue, $colour-white-smoke);
+}
+.btn--white {
+  @include sr_button_types($colour-dark-blue, $colour-white);
+}
+
+/* This variation has a custom hover state, so we'll just add it here
+rather than including it in a common mixin */
+.btn--ruby {
+  @include sr_button_types($colour-white, $colour-ruby);
+
+  // Psuedo-element that's faded-in to act as our new hoverstate
+  &:before {    
+    background-image: linear-gradient(90deg, $colour-purple, $colour-ruby);
+    content: '';    
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    z-index: -100;
+    transition: opacity 0.8s;
+    display: block;
+  }
+
+  // Fade in custom psuedo-element
+  &:hover {
+    &:before {
+      opacity: 1;
+    }
+  }
+}
+
+// Bespoke for SR18 OTN
+.btn.btn--alternate {
+  @extend .btn--ruby;
+  margin-top: 10px;
+  font-size: 24px;
+  line-height: 24px;
+  padding: 28px 26px;
+
+  @include breakpoint($screen-md) {
+    padding: 28px 36px;
+  }
+}
+
+// SR19 buttons type (font_colour, bg_colour)
+.btn--SR19-light-blue {
+  @include sr19_button_types($colour-SR19-black, $colour-SR19-light-blue, $colour-SR19-white, $colour-SR19-dark-blue);
+}
+
+.btn--SR19-black{
+  @include sr19_button_types($colour-SR19-white, $colour-SR19-black, $colour-SR19-black, $colour-SR19-white);
+}
+
+.btn--SR19-white{
+  @include sr19_button_types($colour-SR19-black, $colour-SR19-white, $colour-SR19-white, $colour-SR19-black);
+}
+
+// SR20 buttons type (font_colour, bg_colour)
+.btn--SR20-red {
+  @include sr20_button_types($colour-SR20-white, $colour-SR20-red);
+}
+
+.btn--SR20-dark-blue {
+  @include sr20_button_types($colour-SR20-white, $colour-SR20-dark-blue);
+}
+
+.btn--SR20-deep-violet {
+  @include sr20_button_types($colour-SR20-white, $colour-SR20-deep-violet);
+}
+
+.btn--SR20-white {
+  @include sr20_button_types($colour-SR20-deep-violet, $colour-SR20-white);
+}
+
+.btn--SR20-yellow {
+  @include sr20_button_types($colour-SR20-deep-violet, $colour-SR20-yellow);
+}
+
+.btn--SR20-green {
+  @include sr20_button_types($colour-SR20-deep-violet, $colour-SR20-green);
+}
+
+.btn--SR20-cyan-blue {
+  @include sr20_button_types($colour-SR20-deep-violet, $colour-SR20-cyan-blue);
+}
+
+.btn--SR20-purple {
+  @include sr20_button_types($colour-SR20-white, $colour-SR20-purple);
+}
+
+ .cookie-consent.cc_container.cc_banner--drupal .cc_message .btn:first-child:not(:only-child) {
+  height: auto;
+  min-height: 0;
+}

package/src/sass/themes/sr/2018/components/buttons/buttons.twig

@@ -0,0 +1,27 @@
+<h3>SR20 BUTTONS!</h3>
+
+<a class="btn btn--SR20-red" href="#">Link</a>
+<button class="btn btn--SR20-red">Button</button>
+
+<a class="btn btn--SR20-dark-blue" href="#">Link</a>
+<button class="btn btn--SR20-dark-blue">Button</button>
+
+<a class="btn btn--SR20-deep-violet" href="#">Link</a>
+<button class="btn btn--SR20-deep-violet">Button</button>
+
+<a class="btn btn--SR20-yellow" href="#">Link</a>
+<button class="btn btn--SR20-yellow">Button</button>
+
+<a class="btn btn--SR20-green" href="#">Link</a>
+<button class="btn btn--SR20-green">Button</button>
+
+<a class="btn btn--SR20-cyan-blue" href="#">Link</a>
+<button class="btn btn--SR20-cyan-blue">Button</button>
+
+<a class="btn btn--SR20-purple" href="#">Link</a>
+<button class="btn btn--SR20-purple">Button</button>
+
+<div style="background: black;padding: 20px;">
+<a class="btn btn--SR20-white" href="#">Link</a>
+<button class="btn btn--SR20-white ">Button</button>
+</div>

package/src/sass/themes/sr/2018/components/cookie-consent/cookie-consent.json

@@ -0,0 +1,7 @@
+{
+	"message": "We use cookies. By continuing to use this site you are agreeing to our terms of use. ",
+	"target":"_blank",
+	"link":"https://www.rednoseday.com/legal#terms",
+	"learn_more": "Learn more",
+	"dismiss": "Close"
+}

package/src/sass/themes/sr/2018/components/cookie-consent/cookie-consent.twig

@@ -0,0 +1,7 @@
+<div class="cookie-consent cc_banner cc_container cc_container--open cc_banner--drupal">
+  <p class="cc_message">Hello! Comic Relief uses cookies to help make this website better and improve our services. You can learn more about our use of cookies <a target="_blank" class="cc_more_info link link--white inline" href="/cookies-policy">here</a>. We also use optional cookies for marketing purposes:
+  </p>
+  <p class="cc_message">
+    <a href="#null" class="btn btn--white accept-cookies">Accept</a> Or click <a href="#" class="link deny-cookies link--white inline">here</a> to deny these.
+  </p>
+</div>

package/src/sass/themes/sr/2018/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/sr/2018/components/copy-copy/copy-copy.twig

@@ -0,0 +1,22 @@
+<section class="paragraph--copy-copy {{modifier_class}}">
+    <div class="copy-copy__text-wrapper bg--ruby">
+        <div class="copy-copy__text cr-body">
+            <h1 class="text--title font--white">Red Nose Day</h1>
+            <p class="font--white">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 class="font--white">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 class="font--white">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--dark-blue" href="https://shop.comicrelief.com/" target="_blank">Order a fundraising pack</a>
+            </p>
+        </div>
+    </div>
+    <div class="copy-copy__text-wrapper bg--dark-blue">
+        <div class="copy-copy__text cr-body">
+            <h1 class="text--title font--white">Red Nose Day</h1>
+            <p class="font--white">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--ruby" href="https://shop.comicrelief.com/" target="_blank">Order a fundraising pack</a>
+            </p>
+        </div>
+    </div>
+</section>