@comicrelief/storybook 1.34.0 → 2.0.0

package/src/sass/base/components/progress-indicator/_progress-indicator.scss

@@ -0,0 +1,119 @@
+$circle-size: 15px !default;
+$circle-line-thickness: 3px !default;
+$indicator-thickness: 2px !default;
+
+.progress-indicator {
+  margin: 0;
+  padding: 0;
+  text-transform: capitalize;
+  padding-bottom: 20px;
+
+  li {
+    list-style: none;
+    text-align: center;
+    width: auto;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    text-overflow: ellipsis;
+    color: $colour-black;
+    display: inline-block;
+    vertical-align: top;
+
+    &:last-child {
+      .progress-indicator__circle {
+        &:after {
+          display: none;
+        }
+      }  
+    }
+  }
+}
+
+.progress-indicator__steps-1 li {
+  width: 100%;
+}
+
+.progress-indicator__steps-2 li {
+  width: 50%;
+}
+
+.progress-indicator__steps-3 li {
+  width: 33%;
+}
+
+.progress-indicator__steps-4 li {
+  width: 25%;
+}
+
+.progress-indicator__steps-5 li {
+  width: 20%;
+}
+
+.progress-indicator__circle {
+  @include border-radius(50%);
+  width: $circle-size;
+  height: $circle-size;
+  background-color: $colour-white;
+  display: block;
+  margin: 0 auto 0.5em auto;
+  border: $indicator-thickness solid $colour-black;
+  text-indent: -999px;
+
+  &:after {
+    display: block;
+    position: absolute;
+    top: $circle-size / 2 - $indicator-thickness;
+    width: 100%;
+    height: $circle-line-thickness;
+    content: '';
+    background-color: transparent;
+    border-bottom: 2px dotted $colour-black;
+    left: 50%;
+    margin-left: 7px;
+    width: 98%;
+  }
+}
+
+.progress-indicator--done .progress-indicator__circle {
+  border: $indicator-thickness solid $colour-blue;
+  background-color: $colour-blue;
+
+  &:after {
+    border-bottom: $circle-line-thickness solid $colour-blue; 
+  }
+} 
+
+.progress-indicator--active .progress-indicator__circle {
+  border: $indicator-thickness solid $colour-blue;
+
+  &:before {
+    @include border-radius(50%);
+    display: block;
+    position: relative;
+    content: '';
+    z-index: 1;
+    width: $circle-size / 3 + $indicator-thickness;
+    height: $circle-size / 3 + $indicator-thickness;
+    top: $indicator-thickness;
+    left: $indicator-thickness;
+    background-color: $colour-blue;
+  }
+}
+
+// ==========================================================================
+// Progress indicator AB test override
+// ==========================================================================
+
+.form__group--progress_bar_for_ab_test {
+  
+  .progress-indicator--active {
+    color: $colour-black;
+    width: 100%;
+  }
+  .progress-bar__step {
+    text-transform: initial;
+    display: block;
+    font-weight: bold;
+  }
+}

package/src/sass/base/components/progress-indicator/progress-indicator.twig

@@ -0,0 +1,28 @@
+<div>
+  <ul class="progress-indicator__steps-3 progress-indicator">
+    <li class="progress-indicator--done">
+      <span class="progress-indicator__step-link">
+      <span class="progress-indicator__step progress-indicator__circle"></span>
+        <span class="progress-bar__title">
+          Email
+        </span>
+      </span>
+    </li>
+    <li class="progress-indicator--active">
+      <span class="progress-indicator__step-link">
+      <span class="progress-indicator__step progress-indicator__circle"></span>
+        <span class="progress-bar__title">
+          Account
+        </span>
+      </span>
+    </li>
+    <li class="progress-indicator--todo">
+      <span class="progress-indicator__step-link">
+      <span class="progress-indicator__step progress-indicator__circle"></span>
+        <span class="progress-bar__title">
+          Giving Page
+        </span>
+      </span>
+    </li>
+  </ul>
+</div>

package/src/sass/base/components/promo-header/_promo-header.scss

@@ -0,0 +1,244 @@
+
+// .promo-header--feature   - Body copy overlap bg image
+// .promo-header--no-image   - Body copy overlap bg image
+
+.promo-header {
+  position: relative;
+  clear: both;
+  overflow: hidden;
+  @include breakpoint($screen-md-max) {
+    min-height: 600px;
+  }
+  &.promo-header--no-image {
+    min-height: auto; // fallback IE
+    min-height: initial;
+  }
+  &.promo-header--small {
+    @include breakpoint($screen-md-max) {
+      min-height: 400px;
+    }
+  }
+}
+.promo-header {
+  &.promo-header--feature {
+    width: 100%;
+    min-height: initial;
+    background: transparent;
+    display: flex;
+    flex-direction: column;
+
+    .bg_video {
+      position: relative !important;
+      height: 400px;
+    }
+
+    .promo-header__content {
+      order: 2;
+    }
+
+    .promo-header__bg-image {
+      // Reorder markup to show image first on this feature variant
+      order: 1;
+      display: block;
+    }
+  }
+}
+.promo-header--default {
+  .promo-header__bg-image {
+    img {
+      @include no-objectfit;
+
+      object-fit: cover;
+      object-position: top;
+    }
+  }
+}
+.promo-header--video {
+  min-height: 200px;
+  @include breakpoint($screen-md) {
+    min-height: 300px;
+  }
+  @include breakpoint($screen-lg) {
+    min-height: 600px;
+  }
+  //override styling set by vide library
+  .bg_video {
+    position: absolute !important;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.7;
+  }
+  .video {
+    position: relative !important;
+    height: 100%;
+
+    video {
+      visibility: visible !important;
+    }
+  }
+  &.promo-header--small {
+    height: 400px;
+  }
+}
+.bg--none {
+  .bg_video {
+    opacity: 1;
+  }
+}
+.promo-header__bg-image {
+  width: 100%;
+  margin-bottom: -7px;
+  @include breakpoint($screen-md-max) {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    margin-top: 0;
+    margin-right: auto;
+    margin-left: auto;
+  }
+  .promo-header--feature & {
+    position: relative;
+    float: none;
+  }
+  img {
+    @include breakpoint($screen-md-max) {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+.promo-header__content {
+  position: relative;
+  z-index: 10;
+  max-width: 1200px;
+  margin: auto;
+  @include breakpoint($screen-md-max) {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 0;
+    width: 100%;
+    transform: translateY(-50%);
+  }
+  .promo-header--feature & {
+    position: relative;
+    top: 0;
+    margin: -50px auto 0;
+    padding: 1px 0;
+    background: $colour-white;
+    transform: translateY(0);
+    @include breakpoint-gutters;
+  }
+  .promo-header--no-image & {
+    position: relative;
+    top: 0;
+    transform: translateY(0);
+  }
+  .promo-header__content-inner {
+    width: 100%;
+    margin: 25px auto 15px;
+    padding: 15px;
+    text-align: center;
+    word-break: break-word;
+    @include breakpoint($screen-md) {
+      width: span(10);
+      margin: 50px auto 40px;
+      padding: 0;
+    }
+    @include breakpoint($screen-md-max) {
+      width: 50%;
+      text-align: left;
+      .promo-header--feature & {
+        width: 100%;
+        max-width: span(8);
+        margin: 55px auto 45px;
+        text-align: center;
+      }
+    }
+    &--centre {
+      @include breakpoint($screen-md-max) {
+        margin-right: auto;
+        margin-left: auto;
+        text-align: center;
+        .promo-header--no-image & {
+          width: 100%;
+          max-width: span(8);
+          margin: 55px auto 45px;
+        }
+        .promo-header--small & {
+          width: 100%;
+          max-width: span(8);
+        }
+      }
+    }
+    &--left {
+      @include breakpoint($screen-md-max) {
+        margin-left: gutter();
+      }
+    }
+    &--right {
+      @include breakpoint($screen-md-max) {
+        margin-right: gutter();
+      }
+    }
+    .promo-header--feature & {
+      @include breakpoint($screen-md-max) {
+        max-width: span(8);
+      }
+    }
+  }
+  p {
+    .promo-header--feature & {
+      color: $colour-black;
+    }
+  }
+  img {
+    width: 100%;
+    height: auto;
+    margin: 0 0 40px;
+  }
+}
+.promo-header__svg-title {
+  svg {
+    width: 100%;
+    .promo-header--feature & {
+      path {
+        fill: $colour-black;
+      }
+    }
+  }
+}
+.promo-header__link {
+  a {
+    display: inline-block;
+    height: 50px;
+    padding: 14px 35px;
+    text-align: center;
+    text-decoration: none;
+    color: #1e1e1e;
+    background-color: #fff;
+    font-size: 16px;
+    line-height: 22px;
+    @include border-radius(30px);
+    transition: background-color 300ms;
+    &:hover {
+      background-color: rgba(255,255,255,0.8);
+    }
+  }
+}
+
+// Offset content to make sure copy doesn't overlap transaprent nav at top of screen
+header[role=banner].sticky-nav__header ~ main .promo-header__content .promo-header__content-inner {
+  padding-top: 30px;
+
+  @include breakpoint($screen-md) {
+    margin-top: 60px;
+  }
+
+  @include breakpoint($screen-lg) {
+    margin-top: 50px;
+  }
+}

package/src/sass/base/components/promo-header/promo-header.twig

@@ -0,0 +1,16 @@
+<header class="bg--black promo-header promo-header__header promo-header--default {{modifier_class}}">
+   <div class="promo-header__content">
+      <div class="promo-header__content-inner promo-header__content-inner--left">
+         <h1 class="font--yellow">The difference you make</h1>
+         <p class="font--xlarge">There are some incredible projects, in the UK and Africa, that have found effective ways to tackle poverty and injustice. Your money means we can choose the best and then fund them.</p>
+      </div>
+   </div>
+   <div class="promo-header__bg-image">
+      <picture>
+         <source srcset="kss-assets/images/promo-header-1170-450.jpg" media="all and (min-width: 1024px)" type="image/jpeg">
+         <source srcset="kss-assets/images/promo-header-740-450.jpg" media="all and (min-width: 740px)" type="image/jpeg">
+         <source srcset="kss-assets/images/promo-header-740-450.jpg" media="(min-width: 0px)" type="image/jpeg">
+         <img srcset="kss-assets/images/promo-header-1170-450.jpg" alt="Africa" typeof="foaf:Image">
+     </picture>
+   </div>
+</header>

package/src/sass/base/components/quote-block/_content-wall-quote.scss

@@ -0,0 +1,109 @@
+.cw-quote__bg-image {
+  position: relative;
+  width: 100%;
+  height: 450px;
+  background-repeat: repeat;
+  background-position: 50% 50%;
+}
+.cw-quote__outer-wrapper {
+  position: relative;
+  overflow: hidden;
+}
+.cw-quote__inner-wrapper {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: auto;
+  transform: translateY(-50%);
+}
+.cw-quote__body {
+  @include span(10);
+  @include push(1);
+}
+.cw-quote__image {
+  overflow: hidden;
+  width: 85px;
+  height: 85px;
+  margin: 10px auto 30px;
+  @include border-radius(50px);
+  img {
+    display: block;
+    height: auto;
+    background-color: inherit;
+    @include border-radius(inherit);
+  }
+}
+
+/* CW L and MP viewmodes */
+.view-mode-cw_l,
+.view-mode-cw_mp {
+  .cw-quote__inner-wrapper {
+    @include breakpoint($screen-lg) {
+      top: 0;
+      height: 100%;
+      transform: translateY(0);
+    }
+  }
+  .cw-quote__body {
+    @include breakpoint($screen-lg) {
+      @include span(7);
+      position: absolute;
+      top: 50%;
+      left: span(1);
+      transform: translateY(-50%);
+    }
+  }
+  .cw-quote__image {
+    @include breakpoint($screen-lg) {
+      @include span(3);
+      position: absolute;
+      top: auto;
+      bottom: 0;
+      left: span(8);
+      height: auto;
+      margin-bottom: 0;
+      // Override the background colour option on this breakpoint
+      background-color: transparent;
+      @include border-radius(0);
+      transform: translateY(0);
+      img {
+        width: 100%;
+        height: auto;
+        background-color: inherit;
+        @include border-radius(0);
+      }
+    }
+  }
+}
+
+/* CW L viewmode only */
+.cw-region article.cw-quote.view-mode-cw_l {
+  @include breakpoint($screen-lg) {
+    .cw-quote__image {
+      width: 35%;
+      left: auto;
+      top: 0;
+      right: 0;
+      margin: 0;
+    }
+  }
+}
+
+/* Medium & Small viewmode */
+.cw-region article.cw-quote.view-mode-cw_mp {
+  @include breakpoint($screen-lg) {
+    @include span(8);
+    .cw-quote__body {
+      @include span(6);
+    }
+    .cw-quote__image {
+      width: 50%;
+      top: 0;
+      bottom: auto;
+      left: auto;
+      margin: 0;
+      right: 0;
+    }
+  }
+}

package/src/sass/base/components/quote-block/content-wall-quote.twig

@@ -0,0 +1,18 @@
+<div class="cw-region">
+  <article class="{{ modifier_class }} clearfix">
+    <div class="cw-quote__outer-wrapper">
+      <div class="cw-quote__bg-image">
+        <img src="kss-assets/images/pattern.gif" alt="test" typeof="foaf:Image">
+      </div>
+      <div class="cw-quote__inner-wrapper">
+        <div class="cw-quote__image bg--purple">
+          <img src="kss-assets/images/silhouette.png" alt="test" typeof="foaf:Image">
+        </div>
+        <div class="cw-quote__body">
+          <h3 class="font--yellow">Jo's Top Tip</h3>
+          <h4 class="font--yellow">Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.</h4>
+        </div>
+      </div>
+    </div>
+  </article>
+</div>

package/src/sass/base/components/related-articles/_related-articles.scss

@@ -0,0 +1,34 @@
+.related-articles__wrapper {
+	max-width: 1200px;
+	margin: auto;
+	padding: 30px;
+	h2 {
+		color: $colour-white;
+		text-align: center;
+	}
+	.related-articles__content {
+		margin: calc(4 * #{gutter()}) 0px 0px;
+		.related-articles__item {
+			display: inline-block;
+			margin-bottom: calc(4 * #{gutter()});
+			width: 100%;
+		}
+	}
+	@include breakpoint($screen-md) {
+		.related-articles__item {
+			position:relative;
+			background-color: $colour-white;
+		}
+	}
+	@include breakpoint($screen-lg) {
+		padding: 60px;
+		.related-articles__content { 
+			@include clearfix;
+			display: flex;
+			margin-top: calc(2 * #{gutter()});
+			.related-articles__item {
+				@include span(4);
+			}
+		}
+	}
+}

package/src/sass/base/components/schools-look-up/_schools-look-up.scss

@@ -0,0 +1,93 @@
+// Schools Look Up
+
+.SchoolsLookUp {
+  @include span(8);
+  margin: gutter();
+
+  label {
+    @include font-size($p-font-size);
+    margin: 20px 0px 0px 0px;
+
+    @include breakpoint($screen-md) {
+      margin: 30px 0px 0px 0px;
+    }
+  }
+  input {
+    @include font-size($p-small-font-size);
+
+  }
+}
+.SchoolsLookUp-link {
+  @extend .link;
+  @extend .link--blue;
+  border-top: 0px;
+  border-right: 0px;
+  border-left: 0px;
+  background-color: transparent;
+  padding: 0px;
+  display: block;
+  margin-top: 10px;
+}
+.SchoolsLookUp-maunal {
+  margin-top: 10px;
+}
+.SchoolsLookUp-title {
+  @include font-size($p-font-size);
+}
+.schoolsLookUpForm {
+  max-width: 100%;
+  @extend input[type="text"];
+
+  .rbt-input {
+    position: absolute;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    padding: 0px 13px;
+    
+    input,
+    div {
+      width: 100%;
+      max-width: 100%; 
+    }
+  }
+  .rbt-menu {
+    top: 36px;
+    position: relative;
+    z-index: 1;
+    background: $colour-white;
+    cursor: pointer;
+    outline: 0 none;
+    text-decoration: none;
+    font-size: 16px;
+    margin: 0px -14px;
+  }
+  .rbt-input-hint {
+    display: none;
+  }
+  a {
+    color: $colour-black;
+    text-decoration: none;
+    &.disabled {
+      color: $colour-red;
+    }
+  }
+  li {
+    padding: 12px 50px 14px 10px;
+    border: 1px solid $item-grey;
+    border-top: 0px;
+
+    &:hover,
+    &.default-selection {
+      background-color: $item-grey;
+    }
+
+    &.disabled {
+      border: 0px;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+}