@comicrelief/storybook 1.34.2 → 2.0.1

package/src/sass/themes/cr/2019/components/background-colours/_background-colours.scss

@@ -0,0 +1,340 @@
+// Background Colours
+//
+// To be used by paragraphs and body copy
+
+// CR Colours
+
+/* New stuff */
+
+// Primary backgrounds, will have dark text ('light' group)
+.bg--grey {
+  background-color: $colour-grey;
+}
+
+.bg--coral {
+  background-color: $colour-coral;
+}
+
+.bg--orange {
+  background-color: $colour-orange;
+}
+
+.bg--yellow {
+  background-color: $colour-yellow;
+}
+
+.bg--green {
+  background-color: $colour-green;
+}
+
+.bg--blue {
+  background-color: $colour-blue;
+}
+
+.bg--magenta {
+  background-color: $colour-magenta;
+}
+
+.bg--purple {
+  background-color: $colour-purple;
+}
+
+.bg--teal {
+  background-color: $colour-teal;
+}
+
+.bg--red {
+  background-color: $colour-red;
+}
+
+// Light backgrounds, will have deep-violet text ('light' group)
+.bg--white {
+  background-color: $colour-white;
+}
+
+.bg--light-grey {
+  background-color: $colour-light-grey;
+}
+
+.bg--light-coral {
+  background-color: $colour-light-coral;
+}
+
+.bg--light-orange {
+  background-color: $colour-light-orange;
+}
+
+.bg--light-yellow {
+  background-color: $colour-light-yellow;
+}
+
+.bg--light-green {
+  background-color: $colour-light-green;
+}
+
+.bg--light-blue {
+  background-color: $colour-light-blue;
+}
+
+.bg--light-magenta {
+  background-color: $colour-light-magenta;
+}
+
+.bg--light-purple {
+  background-color: $colour-light-purple;
+}
+
+.bg--light-teal {
+  background-color: $colour-light-teal;
+}
+
+// Dark backgrounds, will have white text ('dark' group)
+.bg--deep-violet {
+  background-color: $colour-deep-violet;
+}
+
+.bg--dark-grey {
+  background-color: $colour-dark-grey;
+}
+
+.bg--dark-coral {
+  background-color: $colour-dark-coral;
+}
+
+.bg--dark-orange {
+  background-color: $colour-dark-orange;
+}
+
+.bg--dark-yellow {
+  background-color: $colour-dark-yellow;
+}
+
+.bg--dark-green {
+  background-color: $colour-dark-green;
+}
+
+.bg--dark-blue {
+  background-color: $colour-dark-blue;
+}
+
+.bg--dark-magenta {
+  background-color: $colour-dark-magenta;
+}
+
+.bg--dark-purple {
+  background-color: $colour-dark-purple;
+}
+
+.bg--dark-teal {
+  background-color: $colour-dark-teal;
+}
+
+/**
+ * Needed to break-out these bg styles out a bit as the mutiple
+ * nested selectors were breaking the styles and/or getting them overridden? Weird. **/
+@mixin dark-backgrounds {
+
+  // Set fonts to white
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  p,
+  .link {
+    color: $colour-white;
+  }
+
+  // Ensure any light bg-colour'd children can override the above styles where neccessary
+  .bg--light-grey,
+  .bg--light-coral,
+  .bg--light-orange,
+  .bg--light-yellow,
+  .bg--light-green,
+  .bg--light-blue,
+  .bg--light-magenta,
+  .bg--light-purple,
+  .bg--light-teal,
+  .bg--white,
+  .bg--grey,
+  .bg--coral,
+  .bg--orange,
+  .bg--yellow,
+  .bg--green,
+  .bg--blue,
+  .bg--magenta,
+  .bg--purple,
+  .bg--teal {
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    p,
+    .link {
+      color: $colour-black;
+    }
+  }
+}
+
+@mixin light-backgrounds {
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  p,
+  .link {
+    color: $colour-black;
+  }
+
+  // Ensure any light bg-colour'd children can override the above styles where neccessary
+  .bg--dark-grey,
+  .bg--dark-coral,
+  .bg--dark-orange,
+  .bg--dark-yellow,
+  .bg--dark-green,
+  .bg--dark-blue,
+  .bg--dark-magenta,
+  .bg--dark-purple,
+  .bg--dark-teal,
+  .bg--deep-violet,
+  .bg--red {
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    p,
+    .link {
+      color: $colour-white;
+    }
+  }
+}
+
+
+// Standard backgrounds (dark text)
+.bg--grey {
+  @include light-backgrounds;
+}
+
+.bg--coral {
+  @include light-backgrounds;
+}
+
+.bg--orange {
+  @include light-backgrounds;
+}
+
+.bg--yellow {
+  @include light-backgrounds;
+}
+
+.bg--green {
+  @include light-backgrounds;
+}
+
+.bg--blue {
+  @include light-backgrounds;
+}
+
+.bg--magenta {
+  @include light-backgrounds;
+}
+
+.bg--purple {
+  @include light-backgrounds;
+}
+
+.bg--teal {
+  @include light-backgrounds;
+}
+
+// Light backgrounds (dark text)
+.bg--light-grey {
+  @include light-backgrounds;
+}
+
+.bg--light-coral {
+  @include light-backgrounds;
+}
+
+.bg--light-orange {
+  @include light-backgrounds;
+}
+
+.bg--light-yellow {
+  @include light-backgrounds;
+}
+
+.bg--light-green {
+  @include light-backgrounds;
+}
+
+.bg--light-blue {
+  @include light-backgrounds;
+}
+
+.bg--light-magenta {
+  @include light-backgrounds;
+}
+
+.bg--light-purple {
+  @include light-backgrounds;
+}
+
+.bg--light-teal {
+  @include light-backgrounds;
+}
+
+.bg--white {
+  @include light-backgrounds;
+}
+
+// Dark backgrounds (white text)
+.bg--deep-violet {
+  @include dark-backgrounds;
+}
+
+.bg--dark-grey {
+  @include dark-backgrounds;
+}
+
+.bg--dark-coral {
+  @include dark-backgrounds;
+}
+
+.bg--dark-orange {
+  @include dark-backgrounds;
+}
+
+.bg--dark-yellow {
+  @include dark-backgrounds;
+}
+
+.bg--dark-green {
+  @include dark-backgrounds;
+}
+
+.bg--dark-blue {
+  @include dark-backgrounds;
+}
+
+.bg--dark-magenta {
+  @include dark-backgrounds;
+}
+
+.bg--dark-purple {
+  @include dark-backgrounds;
+}
+
+.bg--dark-teal {
+  @include dark-backgrounds;
+}
+
+.bg--red {
+  @include dark-backgrounds;
+}

package/src/sass/themes/cr/2019/components/background-colours/background-colours.twig

@@ -0,0 +1,100 @@
+
+<br/>
+<br/>
+
+<h3>Primary colour backgrounds</h3>
+<div class="bg--white" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--white</p>
+
+<div class="bg--red" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--red</p>
+
+<div class="bg--deep-violet" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--deep-violet</p>
+
+
+<h3>Secondary colour backgrounds</h3>
+<div class="bg--grey" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--grey</p>
+
+<div class="bg--coral" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--coral</p>
+
+<div class="bg--orange" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--orange</p>
+
+<div class="bg--yellow" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--yellow</p>
+
+<div class="bg--green" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--green</p>
+
+<div class="bg--blue" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--blue</p>
+
+<div class="bg--magenta" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--magenta</p>
+
+<div class="bg--purple" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--purple</p>
+
+<div class="bg--teal" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--teal</p>
+
+
+<h3>Secondary light colour backgrounds</h3>
+<div class="bg--light-grey" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--light-grey</p>
+
+<div class="bg--light-coral" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--light-coral</p>
+
+<div class="bg--light-orange" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--light-orange</p>
+
+<div class="bg--light-yellow" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--light-yellow</p>
+
+<div class="bg--light-green" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--light-green</p>
+
+<div class="bg--light-blue" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--light-blue</p>
+
+<div class="bg--light-magenta" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--light-magenta</p>
+
+<div class="bg--light-purple" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--light-purple</p>
+
+<div class="bg--light-teal" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--light-teal</p>
+
+
+<h3>Secondary dark colour backgrounds</h3>
+<div class="bg--dark-grey" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--dark-grey</p>
+
+<div class="bg--dark-coral" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--dark-coral</p>
+
+<div class="bg--dark-orange" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--orange</p>
+
+<div class="bg--dark-yellow" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--dark-yellow</p>
+
+<div class="bg--dark-green" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--dark-green</p>
+
+<div class="bg--dark-blue" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--dark-blue</p>
+
+<div class="bg--dark-magenta" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--dark-magenta</p>
+
+<div class="bg--dark-purple" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--dark-purple</p>
+
+<div class="bg--dark-teal" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--dark-teal</p>

package/src/sass/themes/cr/2019/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/cr/2019/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>