@comicrelief/storybook 1.34.0 → 2.0.0

package/src/sass/themes/sr/2018/components/app-link-block/_app-link-block.scss

@@ -0,0 +1,209 @@
+// remove ios default form styles
+%disable-default {
+  -webkit-appearance: none;
+  border-radius: 0;
+}
+
+.app-link-block__wrapper {
+  @include container();
+   padding: 30px calc(4 * #{gutter()});
+
+   @include breakpoint($screen-md) {
+    padding: 30px gutter();
+   }
+
+   @include breakpoint($screen-lg) {
+    padding: 30px 0;
+   }
+}
+
+.app-link-block-outerwrapper {
+  background-color: $colour-black;
+  width: 100%;
+}
+
+.app-link-block__innerwrapper {
+  @include span(12);
+
+  @include breakpoint($screen-md) {
+    @include span(10);
+    @include push(1);
+  }
+
+  @include breakpoint($screen-lg) {
+    @include span(6);
+    @include push(3);
+  }
+
+  .app-link-block__form {
+    @include span(12);
+    position: relative;
+    padding: 20px 0 30px;
+
+    .app-link-block__label {
+      @extend label;
+      @include span(12);
+      position: absolute;
+      left: auto;
+      right: auto;
+      top: 0;
+      text-align: center;
+      font-family: $body-font;
+      font-weight: 500;
+      color: $colour-white;
+    }
+
+    .form-item {
+      @include span(12 of 12 no-gutters);
+      margin-bottom: 0;
+      margin-top: 10px;
+
+      @include breakpoint($screen-md) {
+        @include span(7 of 12 0);
+      }
+
+      label {
+        @extend .visuallyhidden;
+      }
+    }
+
+    .form-tel {
+      @extend %disable-default;
+      @include font-size($p-small-font-size);
+      @include placeholder ($colour-dark-blue-lighter, 18px, $body-font);
+      max-width: 100%;
+      height: 60px;
+      padding: 12px 0 15px 20px;
+      border: 0;
+    }
+
+    .form-submit {
+      @extend %disable-default;
+      @extend .btn;
+      @extend .btn--ruby;
+      @include span(12 of 12 no-gutters);
+      padding: 21px; // Reduce l-r padding a little here to ensure copy is always centred on smaller breakpoints
+
+      @include breakpoint($screen-md) {
+        @include span(5 of 12 0);
+        margin-top: 10px;
+      }
+      &:hover, &:focus {
+        transform: translateY(0px);
+      }
+    }
+
+    .phone-number-valid-message {
+      padding-left: 10px;
+      &:before {
+        content: '';
+        display: inline-block;
+        font-size: inherit;
+        position: relative;
+        width: 20px;
+        height: 20px;
+        top: 2px;
+        margin-right: 3px
+      }
+    }
+
+    .phone-number-valid-message {
+      @include font-size($p-small-font-size);
+      @include span(12);
+      position: relative;
+      font-family: $body-font;
+      color: $colour-white;
+      text-align: center;
+      top:20px;
+
+      > div {
+         display: inline-block;
+       }
+    }
+  }
+
+  .error {
+    .form-tel {
+        border: 3px solid $colour-ruby;
+    }
+
+    .phone-number-valid-message {
+      &:before {
+        background:url( $image-path + "error-red-cross.svg") -10px -8px no-repeat;
+      }
+    }
+   }
+
+   .valid {
+     .form-tel {
+       border: 3px solid $colour-green;
+     }
+     .phone-number-valid-message {
+       &:before {
+         content: "\2713";
+         color:$colour-green;
+         text-align: center;
+       }
+     }
+   }
+
+  .sr-app-link-success-message {
+      display: none;
+  }
+
+  .success {
+    .sr-app-link-success-message {
+      display: block;
+      font-family: $body-font;
+      color: $colour-white;
+      text-align: center;
+
+      h3 {
+        position:relative;
+        color: $colour-white;
+
+        &:before {
+          content: '';
+          position: absolute;
+          display: inline-block;
+          background:url( $image-path + "success-tick.svg") left center/28px no-repeat;
+          width: 100%;
+          height: 40px;
+          top: -5px;
+          margin-left: -35px;
+        }
+      }
+
+      p {
+        color: $colour-white;
+       }
+    }
+  }
+
+  .ajax-progress.ajax-progress-throbber {
+    position: absolute;
+    bottom: 29px;
+    left: 7px;
+    width: 100%;
+    text-align: center;
+
+    .message {
+      color: $colour-white;
+    }
+  }
+}
+
+.app-link__download {
+  @include span(12);
+  text-align: center;
+
+  a {
+    display:inline-block;
+    vertical-align: top;
+  }
+
+  img {
+    width:135px;
+    display: block;
+  }
+}

package/src/sass/themes/sr/2018/components/app-link-block/app-link-block.twig

@@ -0,0 +1,90 @@
+<div class="paragraph paragraph--type--cr-block-reference paragraph--view-mode--default app-link-block-outerwrapper">
+	<div class="app-phone-number-form block block-sr-app-link block-sr-app-link-block-app-phone-number app-link-block__wrapper" id="block-sr18appphonenumberentry">
+	<div class="app-link-block__innerwrapper">
+		<form action="/" method="post" id="app-phone-number-form" class="app-link-block__form" accept-charset="UTF-8">
+		<div class="app-link-block__form">
+	    <span class="app-link-block__label">Enter mobile number</span>
+			<div class="js-form-item form-item js-form-type-tel form-type-tel js-form-item-phone-number form-item-phone-number">
+				<label for="edit-phone-number" class="visually-hidden">Enter mobile number</label>
+				<input class="–metrika-nokeys form-tel" type="tel" id="edit-phone-number" name="phone_number" value="" size="30" maxlength="128" placeholder="E.g +447012345678">
+			</div>
+			<input type="submit" id="edit-submit" name="submit" value="Send me link" class="button js-form-submit form-submit btn btn--ruby">
+			<span class="phone-number-valid-message app-link-block__error-message"></span>
+			<input autocomplete="off" type="hidden" name="form_build_id" value="form-SgdKr14X1FDjbIEqMeDijGzv1pEl-ERAD0pvT92SNSE">
+			<input type="hidden" name="form_id" value="app_phone_number_form">
+		</div>
+		</form>
+		<div class="app-link__download">
+			<a href="https://itunes.apple.com/us/app/sport-relief/id1322989652?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/assets/shared/badges/en-us/appstore-lrg.svg) no-repeat center ;width:135px;height:35px;background-size:contain;margin-top:8px;"></a>
+			<a href='https://play.google.com/store/apps/details?id=com.sportrelief.app2018&hl=en'><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png'/></a>
+		</div>
+	</div>
+	</div>
+</div>
+
+<div class="paragraph paragraph--type--cr-block-reference paragraph--view-mode--default app-link-block-outerwrapper">
+	<div class="app-phone-number-form block block-sr-app-link block-sr-app-link-block-app-phone-number app-link-block__wrapper" id="block-sr18appphonenumberentry">
+	<div class="app-link-block__innerwrapper">
+		<form action="/" method="post" id="app-phone-number-form" class="error" accept-charset="UTF-8">
+			<div class="app-link-block__form">
+	    <span class="app-link-block__label">Enter mobile number</span>
+			<div class="js-form-item form-item js-form-type-tel form-type-tel js-form-item-phone-number form-item-phone-number">
+				<label for="edit-phone-number" class="visually-hidden">Enter mobile number</label>
+				<input class="–metrika-nokeys form-tel" type="tel" id="edit-phone-number" name="phone_number" value="" size="30" maxlength="128" placeholder="E.g +447012345678">
+			</div>
+			<input type="submit" id="edit-submit" name="submit" value="Send me link" class="button js-form-submit form-submit btn btn--ruby">
+			<span class="phone-number-valid-message app-link-block__error-message"><div>Phone number not valid.</div></span>
+			<input autocomplete="off" type="hidden" name="form_build_id" value="form-SgdKr14X1FDjbIEqMeDijGzv1pEl-ERAD0pvT92SNSE">
+			<input type="hidden" name="form_id" value="app_phone_number_form">
+		</div>
+		</form>
+		<div class="app-link__download">
+			<a href="https://itunes.apple.com/us/app/sport-relief/id1322989652?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/assets/shared/badges/en-us/appstore-lrg.svg) no-repeat center ;width:135px;height:35px;background-size:contain;margin-top:8px;"></a>
+			<a href='http://play.google.com/store/?pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png'/></a>
+		</div>
+	</div>
+	</div>
+</div>
+
+<div class="paragraph paragraph--type--cr-block-reference paragraph--view-mode--default app-link-block-outerwrapper">
+	<div class="app-phone-number-form block block-sr-app-link block-sr-app-link-block-app-phone-number app-link-block__wrapper" id="block-sr18appphonenumberentry">
+	<div class="app-link-block__innerwrapper">
+		<form action="/" method="post" id="app-phone-number-form" class="valid" accept-charset="UTF-8">
+		 <div class="app-link-block__form">
+	    <span class="app-link-block__label">Enter mobile number</span>
+			<div class="js-form-item form-item js-form-type-tel form-type-tel js-form-item-phone-number form-item-phone-number">
+				<label for="edit-phone-number" class="visually-hidden">Enter mobile number</label>
+				<input class="–metrika-nokeys form-tel" type="tel" id="edit-phone-number" name="phone_number" value="" size="30" maxlength="128" placeholder="E.g +447012345678">
+			</div>
+			<input type="submit" id="edit-submit" name="submit" value="Send me link" class="button js-form-submit form-submit">
+			<span class="phone-number-valid-message app-link-block__error-message"><div>Phone number is valid</div></span>
+			<input autocomplete="off" type="hidden" name="form_build_id" value="form-SgdKr14X1FDjbIEqMeDijGzv1pEl-ERAD0pvT92SNSE">
+			<input type="hidden" name="form_id" value="app_phone_number_form">
+		</div>
+		</form>
+		<div class="app-link__download">
+			<a href="https://itunes.apple.com/us/app/sport-relief/id1322989652?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/assets/shared/badges/en-us/appstore-lrg.svg) no-repeat center ;width:135px;height:35px;background-size:contain;margin-top:8px;"></a>
+			<a href='http://play.google.com/store/?pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png'/></a>
+		</div>
+	</div>
+	</div>
+</div>
+
+<div class="paragraph paragraph--type--cr-block-reference paragraph--view-mode--default app-link-block-outerwrapper">
+	<div class="app-phone-number-form block block-sr-app-link block-sr-app-link-block-app-phone-number app-link-block__wrapper" id="block-sr18appphonenumberentry">
+	<div class="app-link-block__innerwrapper success">
+		<form action="/" method="post" id="app-phone-number-form" class="success" accept-charset="UTF-8">
+		 <div class="app-link-block__form">
+				<div class='sr-app-link-success-message'>
+					<h3>All done....</h3>
+					<p>Thank you, we've text you a link to download the app. So once downloaded you're all set get stepping and make difference.
+				</div>
+			</div>
+		</form>
+		<div class="app-link__download">
+			<a href="https://itunes.apple.com/us/app/sport-relief/id1322989652?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/assets/shared/badges/en-us/appstore-lrg.svg) no-repeat center ;width:135px;height:35px;background-size:contain;margin-top:8px;"></a>
+			<a href='http://play.google.com/store/?pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png'/></a>
+		</div>
+	</div>
+	</div>
+</div>

package/src/sass/themes/sr/2018/components/app-link-block/images/success-tick.svg

@@ -0,0 +1,13 @@
+<svg width="29px" height="29px" viewBox="0 0 29 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+  <desc>Created with Sketch.</desc>
+  <defs></defs>
+  <g id="Pages" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g id="Get-active-ideas-Copy" transform="translate(-593.000000, -2689.000000)">
+          <g id="Group-4" transform="translate(593.000000, 2689.000000)">
+              <circle id="Oval" fill="#E81962" cx="14.5" cy="14.5" r="14.5"></circle>
+              <polyline id="Path-4" stroke="#FFFFFF" points="7.8145484 16.5518081 13.6887909 21.0442885 22.2906108 8.39800877"></polyline>
+          </g>
+      </g>
+  </g>
+</svg>

package/src/sass/themes/sr/2018/components/background-colours/_background-colours.scss

@@ -0,0 +1,201 @@
+.bg--no-colour {
+  background-color: transparent;
+}
+.bg--black {
+  background-color: $colour-black;
+}
+.bg--dark-blue {
+  background-color: $colour-dark-blue;
+}
+.bg--dark-blue-lighter {
+  background-color: $colour-dark-blue-lighter;
+}
+.bg--ruby {
+  background-color: $colour-ruby;
+}
+.bg--white-smoke {
+  background-color: $colour-white-smoke;
+}
+.bg--white {
+  background-color: $colour-white;
+}
+
+// Background gradients
+.bg--gradient-ruby-purple {
+  @include gradient-background($colour-ruby, $colour-purple);
+}
+.bg--gradient-purple-ruby {
+  @include gradient-background($colour-purple, $colour-ruby);
+}
+
+// SR19 background
+.bg--SR19-light-blue {
+  background-color: $colour-SR19-light-blue;
+}
+
+.bg--SR19-dark-blue {
+  background-color: $colour-SR19-dark-blue;
+}
+
+.bg--SR19-coral {
+  background-color: $colour-SR19-coral;
+}
+
+.bg--SR19-red {
+  background-color: $colour-SR19-red;
+}
+
+.bg--SR19-black {
+  background-color: $colour-SR19-black;
+}
+
+.bg--SR19-white {
+  background-color: $colour-SR19-white;
+}
+
+/* SR20 backgrounds */
+.bg--SR20-deep-violet {
+  background-color: $colour-SR20-deep-violet;
+}
+
+.bg--SR20-red {
+  background-color: $colour-SR19-red;
+}
+
+.bg--SR20-dark-blue {
+  background-color: $colour-SR20-dark-blue;
+}
+
+.bg--SR20-light-blue {
+  background-color: $colour-SR20-light-blue;
+}
+
+.bg--SR20-white {
+  background-color: $colour-SR20-white;
+}
+
+.bg--SR20-yellow {
+  background-color: $colour-SR20-yellow;
+}
+
+.bg--SR20-green {
+  background-color: $colour-SR20-green;
+}
+
+.bg--SR20-cyan-blue {
+  background-color: $colour-SR20-cyan-blue;
+}
+
+.bg--SR20-light-grey {
+  background-color: $colour-SR20-light-grey;
+}
+
+.bg--SR20-purple {
+  background-color: $colour-SR20-purple;
+}
+
+
+
+
+/**
+ * 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-SR20-white;
+  }
+
+  // Ensure any light bg-colour'd children can override the above styles where neccessary
+  .bg--SR20-white,
+  .bg--SR20-yellow,
+  .bg--SR20-green,
+  .bg--SR20-cyan-blue,
+  .bg--SR20-light-grey {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    p,
+    .link {
+      color: $colour-SR20-deep-violet;
+    }
+  }
+}
+
+@mixin light-backgrounds {
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  p,
+  .link {
+    color: $colour-SR20-deep-violet;
+  }
+
+  // Ensure any light bg-colour'd children can override the above styles where neccessary
+  .bg--SR20-deep-violet,
+  .bg--SR20-red,
+  .bg--SR20-dark-blue,
+  .bg--SR20-purple {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    p,
+    .link {
+      color: $colour-SR20-white;
+    }
+  }
+}
+
+
+/* SR20 DARK backgrounds */
+.bg--SR20-deep-violet {
+  @include dark-backgrounds;
+}
+
+.bg--SR20-red {
+  @include dark-backgrounds;
+}
+
+.bg--SR20-dark-blue {
+  @include dark-backgrounds;
+}
+
+.bg--SR20-purple {
+  @include dark-backgrounds;
+}
+
+
+/* SR20 LIGHT backgrounds */
+.bg--SR20-white {
+  @include light-backgrounds;
+}
+
+.bg--SR20-yellow {
+  @include light-backgrounds;
+}
+
+.bg--SR20-green {
+  @include light-backgrounds;
+}
+
+.bg--SR20-cyan-blue {
+  @include light-backgrounds;
+}
+
+.bg--SR20-light-grey {
+  @include light-backgrounds;
+}

package/src/sass/themes/sr/2018/components/background-colours/background-colours.twig

@@ -0,0 +1,46 @@
+<h3>Plain background colours</h3>
+<div class="bg--SR20-deep-violet" style="height: 100px; width: 100%;">
+<p>Illustrating bg color - font rules </p>
+</div>
+
+<p><br/><b>bg--SR20-deep-violet  </b> $colour-SR20-deep-violet : #2c0230</p>
+
+<div class="bg--SR20-red " style="height: 100px; width: 100%;">
+<p style="margin: 10px;">Illustrating bg color - font rules </p>
+</div>
+<p><br/><b>bg--SR20-red </b> $colour-SR20-red  : #e52530</p>
+
+<div class="bg--SR20-dark-blue" style="height: 100px; width: 100%;">
+<p style="margin: 10px;">Illustrating bg color - font rules </p>
+</div>
+<p><br/><b>bg--SR20-dark-blue  </b> $colour-SR20-dark-blue : #3a4972</p>
+
+<div class="bg--SR20-white" style="border: 1px solid black; height: 100px; width: 100%;">
+<p style="margin: 10px;">Illustrating bg color - font rules </p>
+</div>
+<p><br/><b>bg--SR20-white  </b> $colour-SR20-white : #ffffff</p>
+
+<div class="bg--SR20-yellow" style="height: 100px; width: 100%;">
+<p style="margin: 10px;">Illustrating bg color - font rules </p>
+</div>
+<p><br/><b>bg--SR20-yellow  </b> $colour-SR20-yellow : #FFE400</p>
+
+<div class="bg--SR20-green" style="height: 100px; width: 100%;">
+<p style="margin: 10px;">Illustrating bg color - font rules </p>
+</div>
+<p><br/><b>bg--SR20-green  </b> $colour-SR20-green : #4ecd57</p>
+
+<div class="bg--SR20-cyan-blue" style="height: 100px; width: 100%;">
+<p style="margin: 10px;">Illustrating bg color - font rules </p>
+</div>
+<p><br/><b>bg--SR20-cyan-blue  </b> $colour-SR20-cyan-blue : #22CFD8</p>
+
+<div class="bg--SR20-light-grey" style="height: 100px; width: 100%;">
+<p style="margin: 10px;">Illustrating bg color - font rules </p>
+</div>
+<p><br/><b>bg--SR20-light-grey  </b> $colour-SR20-light-grey : #f4f2f4</p>
+
+<div class="bg--SR20-purple" style="height: 100px; width: 100%;">
+<p style="margin: 10px;">Illustrating bg color - font rules </p>
+</div>
+<p><br/><b>bg--SR20-purple  </b> $colour-SR20-purple : #7F58A5</p>

package/src/sass/themes/sr/2018/components/background-single-msg/_background-single-msg.scss

@@ -0,0 +1,3 @@
+.background-single-msg {
+  @extend .bg--white;
+}

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

@@ -0,0 +1,126 @@
+// Base styles
+$image-width--md: 362px;
+$image-width--lg: 500px;
+
+.bg-graphics {
+  display: none;
+
+  @include breakpoint($screen-md) {
+    display: block;
+    position: absolute;
+    z-index: 1;
+
+    img, picture {
+      margin: 0;
+      display: block;
+      height: inherit;
+      width: inherit;
+    }
+  }
+}
+
+.cr-body {
+  p, span, h1, h2, h3, h4, h5, a, button {
+    position: relative;
+    z-index: 2;
+  }
+
+  .view-mode-bg-graphic-{
+    &bottom-left,
+    &bottom-right,
+    &top-left,
+    &top-right {
+      @extend .bg-graphics;
+      height: auto;
+      width: $image-width--md;
+    
+      @include breakpoint($screen-lg) {
+        width: $image-width--lg;
+      }
+    }
+
+    &bottom-left {
+      bottom: 0;
+      left: 0;
+    }
+
+    &bottom-right {
+      bottom: 0;
+      right: 0;
+    }
+
+     &top-left {
+      top: 0;
+      left: 0;
+     }
+
+    &top-right {
+      top: 0;
+      right: 0;
+    }
+
+    &fullheight-fullwidth {
+      @extend .bg-graphics;
+      width: 100%;
+      height: auto;
+      top: 0;
+      left: 0;
+    }
+  }
+}
+
+.single-msg {
+  .single-msg__copy_wrapper {
+    position: relative;
+    @include breakpoint($screen-md) {
+      position: absolute;
+      overflow: hidden;
+    }
+  }
+  
+  /* Tweaks for fullwidth layouts to ensure graphic can extend to edge */
+  &.single-msg--copy-only,
+  &.single-msg--copy-only-large {
+    .single-msg__copy_wrapper {
+      overflow: visible;
+
+      @include breakpoint($screen-md) {
+        .view-mode-bg-graphic-fullheight-fullwidth {
+          top: -60px;
+          width: 100vw;
+          transform: translateX(-50%);
+          left: 50%;
+        }
+
+        .view-mode-bg-graphic-top-right {
+          top: -60px;
+          left: calc(100% + calc((100vw - 100%) / 2) - #{$image-width--lg});
+        }
+
+        .view-mode-bg-graphic-top-left {
+          top: -60px;
+          left: auto;
+          right: calc(100% + calc((100vw - 100%) / 2) - #{$image-width--lg});
+        }
+
+        .view-mode-bg-graphic-bottom-right {
+          bottom: -60px;
+          left: calc(100% + calc((100vw - 100%) / 2) - #{$image-width--lg});
+        }
+
+        .view-mode-bg-graphic-bottom-left {
+          bottom: -60px;
+          left: auto;
+          right: calc(100% + calc((100vw - 100%) / 2) - #{$image-width--lg});
+        }
+      }
+    }
+  }
+}
+
+.paragraph--full-height-single-image-single-copy .fhsisc__text-wrapper,
+.paragraph--fixed-ratio-image .fixed-ratio-image__text-wrapper,
+.paragraph--copy-video .copy-video__text-wrapper,
+.paragraph--copy-copy .copy-copy__text-wrapper {
+  position: relative;
+}