@comicrelief/storybook 1.34.2 → 2.0.1

package/src/sass/themes/sr/2018/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;
+
+        		}
+        	}
+        }
+      }

package/src/sass/themes/sr/2018/components/full-height-single-image/full-height-single-image.twig

@@ -0,0 +1,12 @@
+<section class="paragraph--full-height-single-image {{modifier_class}} bg--purple">
+    <picture>
+        <source srcset="kss-assets/images/16-9-img.jpg" media="all and (min-width: 1024px)" type="image/jpeg"/>
+        <source srcset="kss-assets/images/16-9-img.jpg" media="all and (min-width: 740px)" type="image/jpeg"/>
+        <source srcset="kss-assets/images/4-3-img.jpg" media="(min-width: 0px)" type="image/jpeg"/>
+        <img src="kss-assets/images/16-9-img.jpg" alt="boring" typeof="foaf:Image" />
+    </picture>
+    <div class="fhsi__text-wrapper text-align-center">
+        <h1>FHSI - 4:3 img on mobile</h1>
+        <p><a class="btn btn--white" href="https://www.comicrelief.com/#newsletter" title="find out more about Spectacular">Button</a></p>
+    </div>
+</section>

package/src/sass/themes/sr/2018/components/full-height-single-image-single-copy/_full-height-single-image-single-copy.scss

@@ -0,0 +1,73 @@
+.paragraph--full-height-single-image-single-copy {
+  width: 100%;
+
+  .fhsisc {
+    &__image-wrapper {
+      img {
+        display: block;
+        width: 100%;
+      }
+    }
+    &__text-wrapper {
+      padding: 15vw 5vw;
+      position: relative;
+
+      .fhsisc__text {
+        height: auto;
+      }
+    }
+
+    /* If this component is acting as our header */
+    header & {
+      &__text-wrapper {
+        padding: 10vw 5vw;
+      }
+    }
+  }
+  
+  @include breakpoint($screen-md) {
+    display: flex;
+    .fhsisc {
+      &__image-wrapper,
+      &__text-wrapper {
+        display: inline-block;
+        vertical-align: top;
+        width: 50%;
+      }
+      &__image-wrapper {
+        position: relative;
+        overflow: hidden;
+        height: inherit;
+        // position image absolutely so height of section will be based on the text
+        img {
+          @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;
+        }
+      }
+    }
+
+    &.paragraph--full-height-single-image-single-copy--image-right {
+      flex-basis: auto; // IE10
+      flex-direction: row-reverse;
+      -ms-flex-direction: row-reverse; // IE10
+    }
+  }
+}

package/src/sass/themes/sr/2018/components/full-height-single-image-single-copy/full-height-single-image-single-copy.twig

@@ -0,0 +1,14 @@
+<section class="paragraph--full-height-single-image-single-copy {{modifier_class}} bg--dark-blue">
+  <div class="fhsisc__image-wrapper objectfit">
+     <img src="kss-assets/images/spice_3-4_2x.jpg">
+  </div>
+  <div class="fhsisc__text-wrapper">
+    <div class="fhsisc__text cr-body">
+      <h1 class="font--white text-align-center">
+        PREPARE FOR A SPECTACULAR NIGHT OF COMEDY
+      </h1>
+      <p class="text-align-center font--white">On website image will be 4:3 on mobile</p>
+      <p class="text-align-center"><a class="btn btn--ruby" 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/sr/2018/components/full-height-single-image-triple-copy/_full-height-single-image-triple-copy.scss

@@ -0,0 +1,158 @@
+.paragraph--full-height-sing-img-triple-copy {
+  width: 100%;
+  height: auto;
+
+  .fhsitc {
+    &__image-text-wrapper,
+    &__text-1,
+    &__text-2,
+    &__text-3,
+    &__image,
+    &__text-wrapper {
+      position: relative;
+      height: auto;
+      width: 100%;
+    } 
+
+    &__text-wrapper {
+      padding: 15vw 5vw;
+    }
+
+    header & {
+      &__text-wrapper {
+        padding: 10vw 5vw;
+      }
+    }
+  }
+
+  .fhsitc__text-1,
+  .fhsitc__text-2 {
+    padding: 15vw 5vw;
+    
+    img {
+      width: 50%;
+      margin: 0 auto;
+      display: block;
+    }
+    
+    .cr-body, p {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .fhsitc__image img {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+    // Medium screen
+    @include breakpoint($screen-md) {
+      display: flex;
+      flex-direction: row;
+      min-height: 100vh;
+      
+        // Inner containers
+        .fhsitc__text-wrapper,
+        .fhsitc__image-text-wrapper {
+          min-height: 100vh;
+          width: 50%;
+          float: left;
+        }
+
+        .fhsitc__image-text-wrapper {
+          display: flex;
+          flex-direction: column;
+        }
+
+        .fhsitc__text-wrapper {
+          padding: 5vw;
+          display: flex;
+          -webkit-box-align: center;
+          -webkit-align-items: center;
+          -ms-flex-align: center;
+          align-items: center;
+        }
+
+        .fhsitc__image {
+          min-height: 50vh;
+          position: relative;
+
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
+        }
+
+        .fhsitc__text-1,
+        .fhsitc__text-2 {
+          min-height: 25vh;
+          width: 100%;
+          padding: 2vh 10vw;
+          flex-grow: 1;
+          position: relative;
+
+          img {
+            position: absolute;
+            top: 8%;
+            left: 50%;
+            height: 84%;
+            width: auto;
+            transform: translateX(-50%);
+          }
+        }
+
+        .fhsitc__text-3 {
+          width: calc(100% - 5vw);
+        }
+
+        header & {
+          .fhsitc__text-wrapper {
+            padding: 5vw;
+          }
+        }
+      }
+
+      &--image-right {
+        display: flex;
+        flex-direction: column;
+
+        .fhsitc__text-wrapper {
+          order: 2;
+        }
+
+        .fhsitc__image-text-wrapper {
+          order: 1;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .fhsitc {
+          &__image-text-wrapper,
+          &__text-1,
+          &__text-2,
+          &__text-3,
+          &__image,
+          &__text-wrapper {
+            flex-shrink: 0;
+          }
+        }
+
+        @include breakpoint($screen-md) {
+          flex-direction: row;
+
+          .fhsitc__text-wrapper {
+            order: 1;
+          }
+          
+          .fhsitc__image-text-wrapper {
+            order: 2;
+          }
+        }
+      }
+    }

package/src/sass/themes/sr/2018/components/full-height-single-image-triple-copy/full-height-single-image-triple-copy.twig

@@ -0,0 +1,24 @@
+<section class="paragraph--full-height-sing-img-triple-copy {{modifier_class}} bg--dark-blue">
+    <div class="fhsitc__image-text-wrapper">
+        <div class="fhsitc__text-1 bg--red "> 
+            <img src="kss-assets/images/example-emoji.png">
+        </div>
+        <div class="fhsitc__image bg--yellow">
+         <img src="kss-assets/images/london4-3.jpg">
+         </div>
+        <div class="bg--green fhsitc__text-2 "> 
+            <img src="kss-assets/images/example-emoji.png">
+        </div>
+    </div>
+    <div class="bg--teal fhsitc__text-wrapper">
+        <div class="fhsitc__text-3">
+        <h1 class="text-align-center font--white">PREPARE FOR A SPECTACULAR NIGHT OF COMEDY</h1>
+
+<p class="text-align-center font--white">28 February 2019. One night, one stage, eight giants of comedy live at The SSE Arena, Wembley</p>
+
+<p class="text-align-center font--white">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--ruby" 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/sr/2018/components/just-in-time-block/_just-in-time-block.scss

@@ -0,0 +1,24 @@
+// ==========================================================================
+// Just-In-Time msg block overrides for SR18
+// ==========================================================================
+
+.form__row--just-in-time-block {
+  
+  .toggle-link {
+    font-family: $font-bold;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 22px;
+    border-bottom: 4px solid $colour-red;
+    color: $colour-black;
+
+    &:hover {
+      border-bottom: 4px solid $colour-yellow;
+    }
+    
+    @include breakpoint($screen-md) {
+      font-size: 16px;
+      line-height: 23px;
+    }
+  }
+}

package/src/sass/themes/sr/2018/components/just-in-time-block/just-in-time-block.twig

@@ -0,0 +1,11 @@
+<div class="form__row form__row--just-in-time-block">
+  <div class="form__fieldset">
+    <a href="#show" aria-expanded="true" class="link toggle-link show-link" aria-label="click to open" id="show">What you can expect to receive from us</a>
+    <a href="#hide" class="link toggle-link close-link" aria-label="click to close" aria-expanded="false" id="hide">What you can expect to receive from us</a>
+    <div class="just-in-time--content">
+      <p><strong>Name, email and billing address:</strong> we need it to create a receipt for your payment nd send it to you.</p>
+      <p><strong>Phone number:</strong> we collect it in case there is an issue with donation</p>
+      <p><strong>Establishment information:</strong> we use this information to understand better which institutions raise money for us.</p>
+    </div>
+  </div>
+</div>

package/src/sass/themes/sr/2018/components/links/_links.scss

@@ -0,0 +1,86 @@
+
+.link {
+  text-decoration: none;
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  padding-bottom: 0.18em;
+  font-family: $font-bold--sr18;
+  font-size: inherit;
+  line-height: inherit;
+  transition-property: border;
+  transition-duration: 180ms;
+  @include font-size($p-font-size);
+  @include link_colour($colour-SR20-deep-violet);
+  
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 & {
+    @include link_colour($colour-dark-blue);
+  }
+  &.inline {
+    display: inline;
+    padding-bottom: 0.06em;
+    font-family: inherit;
+    font-size:inherit;
+  }
+  &.link--black {
+    @include link_colour($colour-black);
+  }
+  &.link--dark-blue {
+    @include link_colour($colour-dark-blue);
+  }
+  &.link--dark-blue-lighter {
+    @include link_colour($colour-dark-blue-lighter);
+  }
+  &.link--ruby {
+    @include link_colour($colour-ruby);
+  }
+  &.link--white-smoke {
+    @include link_colour($colour-white-smoke);
+  }
+  &.link--white {
+    @include link_colour($colour-white);
+  }
+
+  // SR20
+  &.link--SR20-red {
+    @include link_colour($colour-SR20-red);
+  }
+
+  &.link--SR20-dark-blue {
+    @include link_colour($colour-SR20-dark-blue);
+  }
+
+  &.link--SR20-deep-violet {
+    @include link_colour($colour-SR20-deep-violet);
+  }
+
+  &.link--SR20-white {
+    @include link_colour($colour-SR20-white);
+  }
+
+  &.link--SR20-yellow {
+    @include link_colour($colour-SR20-yellow);
+  }
+
+  &.link--SR20-green {
+    @include link_colour($colour-SR20-green);
+  }
+
+  &.link--SR20-cyan-blue {
+    @include link_colour($colour-SR20-cyan-blue);
+  }
+
+  &.link--SR20-purple {
+    @include link_colour($colour-SR20-purple);
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    border-bottom: 1px solid transparent;
+  }
+}

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

@@ -0,0 +1,94 @@
+<h3> Default link styling </h3>
+<a class="link" href="#">
+  Link
+</a>
+<p> Link has the class <i>link</i></p>
+
+<p>
+  This is <a class="link inline" href="#">an example</a> of an inline link.
+</p>
+<p>Inline link has an extra class <i>inline</i></p>
+
+<h3> Coloured link styling </h3>
+
+<p>
+  <a class="link link--SR20-red" href="#">
+     SR20-red link
+  </a>
+</p>
+<p>
+   <a class="link link--SR20-red inline" href="#">SR20-red link</a> inline.
+</p>
+
+
+<p>
+  <a class="link link--SR20-dark-blue " href="#">
+     SR20-dark-blue link
+  </a>
+</p>
+<p>
+   <a class="link link--SR20-dark-blue  inline" href="#">SR20-dark-blue link</a> inline.
+</p>
+
+
+<p>
+  <a class="link link--SR20-deep-violet" href="#">
+     SR20-deep-violet link
+  </a>
+</p>
+<p>
+   <a class="link link--SR20-deep-violet inline" href="#">SR20-deep-violet link</a> inline.
+</p>
+
+
+<p>
+  <a class="link link--SR20-yellow " href="#">
+     SR20-yellow link
+  </a>
+</p>
+<p>
+   <a class="link link--SR20-yellow inline" href="#">SR20-yellow link</a> inline.
+</p>
+
+
+<p>
+  <a class="link link--SR20-green" href="#">
+     SR20-green link
+  </a>
+</p>
+<p>
+   <a class="link link--SR20-green inline" href="#">SR20-green link</a> inline.
+</p>
+</div>
+
+<p>
+  <a class="link link--SR20-cyan-blue" href="#">
+     SR20-cyan-blue link
+  </a>
+</p>
+<p>
+   <a class="link link--SR20-cyan-blue inline" href="#">SR20-cyan-blue link</a> inline.
+</p>
+</div>
+
+<p>
+  <a class="link link--SR20-purple" href="#">
+     SR20-purple link
+  </a>
+</p>
+<p>
+   <a class="link link--SR20-purple inline" href="#">SR20-purple link</a> inline.
+</p>
+</div>
+
+
+<div style="background: black; padding: 20px;">
+<p>
+  <a class="link link--SR20-white" href="#">
+     SR20-white link
+  </a>
+</p>
+<p>
+   <a class="link link--SR20-white inline" href="#">SR20-whitelink</a> inline.
+</p>
+</div>

package/src/sass/themes/sr/2018/components/lists/_lists.scss

@@ -0,0 +1,43 @@
+
+.cr-body {
+  ul,
+  ol {
+    font-family: $font-regular--sr18;
+    font-weight: 500;
+    @include font-size($p-font-size);
+    li {
+      font-size: inherit;
+      color: inherit;
+      &:before {
+      color: inherit;
+      }
+    }
+  }
+  // font size classes 
+  ul,
+  ol,
+  li {
+    &.font--xxlarge {
+      margin-bottom: 20px;
+      @include font-size($p-xxlarge-font-size);
+    }
+    &.font--xlarge {
+      margin-bottom: 20px;
+      @include font-size($p-xlarge-font-size);
+    }
+    &.font--large {
+      @include font-size($p-large-font-size);
+    }
+    &.font--small {
+      @include font-size($p-small-font-size);
+    }
+    &.font--xsmall {
+      @include font-size($p-xsmall-font-size);
+    }
+    &.font--xxsmall {
+      @include font-size($p-xxsmall-font-size);
+    }
+  }
+}
+
+