@comicrelief/storybook 1.34.2 → 2.0.0

package/src/sass/base/components/background-colours/_background-colours.scss

@@ -0,0 +1,105 @@
+.bg--cream-grey {
+  background-color: $cream-grey;
+}
+
+/* default font colours can be overridden as follows */
+.bg--red {
+  .font--yellow {
+    color: $colour-yellow;
+  }
+}
+.bg--purple {
+  .font--pink {
+    color: $colour-pink;
+  }
+}
+.bg--yellow {
+  .font--red {
+    color: $colour-red;
+  }
+}
+.bg--pink {
+  .font--royal-blue {
+    color: $colour-royal-blue;
+  }
+}
+.bg--blue {
+  .font--dark-purple {
+    color: $colour-dark-purple;
+  }
+}
+
+@for $color from 1 to (length($colorList)+1) {
+  @include bg-variation(nth($colorList, $color));
+}
+
+/**
+ * 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 light-backgrounds {
+  h2,
+  h3,
+  h4,
+  h5,
+  p,
+  .link {
+    color: $colour-white,;
+  }
+  .bg--white,
+  .bg--smoke-grey,
+  .bg--light-grey,
+  .bg--gainsboro-grey,
+  .bg--green,
+  .bg--yellow,
+  .bg--pink,
+  .bg--blue {
+    h2,
+    h3,
+    h4,
+    h5,
+    p,
+    .link {
+      color: $colour-black;
+    }
+  }
+}
+@mixin dark-backgrounds {
+  h2,
+  h3,
+  h4,
+  h5,
+  p,
+  .link {
+    color: $colour-black;
+  }
+  .bg--black,
+  .bg--jasper-grey,
+  .bg--dark-blue,
+  .bg--royal-blue,
+  .bg--red,
+  .bg--purple {
+    h2,
+    h3,
+    h4,
+    h5,
+    p,
+    .link {
+      color: $colour-white;
+    }
+  }
+}
+.bg--black { @include light-backgrounds };
+.bg--jasper-grey { @include light-backgrounds };
+.bg--dark-blue { @include light-backgrounds };
+.bg--royal-blue { @include light-backgrounds };
+.bg--red { @include light-backgrounds };
+.bg--purple { @include light-backgrounds };
+
+.bg--white { @include dark-backgrounds };
+.bg--smoke-grey { @include dark-backgrounds };
+.bg--light-grey { @include dark-backgrounds };
+.bg--gainsboro-grey { @include dark-backgrounds };
+.bg--green { @include dark-backgrounds };
+.bg--yellow { @include dark-backgrounds };
+.bg--pink { @include dark-backgrounds };
+.bg--blue { @include dark-backgrounds };

package/src/sass/base/components/background-colours/background-colours.twig

@@ -0,0 +1,28 @@
+<div class="bg--red" style="height: 100px; width: 100%;"></div>
+<p><br/>$colour-red: #f04257;</p>
+<div class="bg--blue" style="height: 100px; width: 100%;"></div>
+<p><br/>$colour-blue: #22d2dc;</p>
+<div class="bg--yellow" style="height: 100px; width: 100%;"></div>
+<p><br/>$colour-yellow: #fbef51;</p>
+<div class="bg--green" style="height: 100px; width: 100%;"></div>
+<p><br/>$colour-green: #b2e55e;</p>
+<div class="bg--teal"  style="height: 100px; width: 100%;"></div>
+<p><br/>$colour-teal: #00beca;</p>
+<div class="bg--royal-blue" style="height: 100px; width: 100%;"></div>
+<p><br/>$colour-royal-blue: #0565d1;</p>
+<div class="bg--purple" style="height: 100px; width: 100%;"></div>
+<p><br/>$colour-purple: #7d2ca9;</p>
+<div class="bg--pink" style="height: 100px; width: 100%;"></div>
+<p><br/>$colour-pink: #fc9eb9;</p>
+<div class="bg--black" style="height: 100px; width: 100%;"></div>
+<p><br/>$colour-black: #030e1a;</p>
+<div class="bg--dark-blue" style="height: 100px; width: 100%;"></div>
+<p><br/>$colour-dark-blue #061d38;</p>
+<div class="bg--jasper-grey" style="height: 100px; width: 100%;"></div>
+<p><br/>$colour-jasper-grey: #666;</p>
+<div class="bg--gainsboro-grey" style="height: 100px; width: 100%;"></div>
+<p><br/>$colour-gainsboro-grey: #c7c7c7;</p>
+<div class="bg--light-grey" style="height: 100px; width: 100%;"></div>
+<p><br/>$colour-light-grey: #e6e3dc;</p>
+<div class="bg--smoke-grey" style="height: 100px; width: 100%;"></div>
+<p><br/>$colour-smoke-grey: #f0f0f0;</p>

package/src/sass/base/components/background-single-msg/_background-single-msg.scss

@@ -0,0 +1,69 @@
+// .bg--centre - Centre layout
+// .bg--right - Right layout
+
+.background-single-msg {
+  position: relative;
+  clear: both;
+  margin: 0;
+  @include clearfix;
+  @extend .bg--black;
+  width: 100%;
+  @include breakpoint($screen-md) {
+    margin: 0 0 -6px;
+  }
+  @include breakpoint($screen-lg) {
+    min-height: 500px;
+  }
+}
+.background-single-msg__inner-wrap {
+  max-width: 1200px;
+  @include breakpoint($screen-md-max) {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 0;
+    width: 100%;
+    margin: auto;
+    transform: translateY(-50%);
+  }
+}
+.background-single-msg__image {
+  @include breakpoint($screen-md-max) {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+
+      object-fit: cover;
+      object-position: top;
+      @include no-objectfit;
+    }
+  }
+  img {
+    margin-bottom: -6px;
+  }
+}
+.background-single-msg__body {
+  width: 100%;
+  padding: 30px;
+  @include breakpoint($screen-md) {
+    padding: 30px calc( 8 * #{gutter()});
+  }
+  @include breakpoint($screen-md-max) {
+    @include span(5 of 12);
+    padding: 30px;
+  }
+  &.bg--centre {
+    float: none;
+    margin: auto;
+    @include breakpoint($screen-md-max) {
+      width: span(8);
+    }
+  }
+  &.bg--right {
+    float: right;
+  }
+}

package/src/sass/base/components/background-single-msg/background-single-msg.twig

@@ -0,0 +1,16 @@
+<section class="paragraph background-single-msg paragraph--cr-rich-text-paragraph">
+	<div class="background-single-msg__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>
+	<div class="background-single-msg__inner-wrap">	
+    <div data-quickedit-entity-id="paragraph/1" class="bg--white background-single-msg__body {{modifier_class}}">
+    	<h2>Rich text bg title</h2>
+			<p>Dynamically enhance fully researched metrics and e-business architectures. Synergistically productize impactful synergy rather than.</p>    
+    </div>
+	</div>
+</section>

package/src/sass/base/components/banners/_card-banner.scss

@@ -0,0 +1,87 @@
+.card-banner {
+  position: relative;
+  min-height: 95px;
+}
+.card-banner__inner-wrapper {
+  width: span(12);
+  max-width: $max-width;
+  margin: 0 auto;
+  overflow: hidden;
+  position: relative;
+  min-height: 95px;
+}
+.card-banner__image {
+  display: none;
+  @include breakpoint($screen-md) {
+    @include span(2);
+    display: block;
+    img {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+  }
+}
+.card-banner__content {
+  padding: 20px 0;
+  
+  p {
+    text-align: center;
+  }
+
+  .btn {
+    padding: 21px 30px;
+    width: 100%;
+  }
+
+  @include breakpoint($screen-md) {
+    @include span(10);
+    @include push(2);
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+
+    .cr-body {
+      margin-left: calc( (#{span(2)} + 5.5%) * -1 );
+
+      > * {
+        margin-bottom: 0;
+      }
+    }
+
+    .btn {
+      width: auto;
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    .two-buttons {
+      @include span(10);
+      margin-left: 0;
+      padding-left: 30%;
+      width: auto;
+      position: absolute;
+
+      .btn {
+        position: relative;
+        display: inline-block;
+        top: auto;
+        left: auto;
+        right: auto;
+        margin-left: 0;
+      }
+
+      .btn + .btn {
+        margin-left: 25px;
+      }
+    }
+  }
+
+  @include breakpoint($screen-lg) {
+    .two-buttons {
+      padding-left: 35%;
+    }
+  }
+}

package/src/sass/base/components/banners/card-banner.json

@@ -0,0 +1,5 @@
+{
+	"bg_colour": "bg--black",
+	"field_cr_card_image": "<img src='kss-assets/images/1-1-img.jpg'>",
+	"field_cr_card_body": "<h4>Donate now and transform<br> lives in the UK and across Africa</h4><a class='btn btn--white' href='#'>Donate now</a>"
+}

package/src/sass/base/components/banners/card-banner.twig

@@ -0,0 +1,13 @@
+<div class="card-banner {{ bg_colour }}">
+	{{ title_suffix.contextual_links }}
+	<div class="card-banner__inner-wrapper">
+		{# {% if field_cr_card_image['#items'].value %} #}
+		<div class="card-banner__image">
+			{{ field_cr_card_image }}
+		</div>
+		{# {% endif %} #}
+		<div class="card-banner__content">
+			{{ field_cr_card_body }}
+		</div>
+	</div>
+</div>

package/src/sass/base/components/buttons/_buttons.scss

@@ -0,0 +1,158 @@
+.btn {
+  display: inline-block;
+  width: auto;
+  margin: 0 auto;
+  padding: 21px 40px;
+  cursor: pointer;
+  text-align: center;
+  vertical-align: middle;
+  text-decoration: none;
+  font-family: $font-bold;
+  font-size: 18px;
+  line-height: 18px;
+  background-color: $colour-red;
+  color: $colour-white;
+  @include border-radius(30px);
+  span {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  &:hover {
+    background-color: $colour-purple;
+  }
+  // Full width on SM breakpoint only
+  &.btn--full-width {
+    display: block;
+    width: 100%;
+    @include breakpoint($screen-md) {
+      display: inline-block;
+      width: auto;
+    }
+  }
+}
+
+/* Process $buttonList colour variations through our btn-variation mixin. */
+@each $button in $buttonList {
+  @include btn-variation( $button );
+}
+
+/* Force white colour on black bg hover and focus state */
+.btn.btn--white {
+  &:hover,
+  &:focus {
+    color: $colour-white;
+  }
+}
+
+/**
+ * Buttons display as stack block for xs
+ */
+.btn + .btn {
+  margin-top: 30px;
+}
+
+/**
+ * Buttons display as inline block for md and large breakpoints.
+ */
+.btn {
+  &.btn--fixed-width {
+    width: 100%;
+  }
+}
+@include breakpoint($screen-md) {
+  .btn {
+    display: inline-block;
+    width: auto;
+    font-size: 18px;
+    &.btn--fixed-width {
+      width: 100%;
+      min-width: 290px;
+    }
+  }
+  .btn + .btn {
+    margin-top: 0;
+    margin-left: 25px;
+  }
+}
+
+/*
+ * Add icon to btn
+ */
+.btn {
+  .icon {
+    height: 20px;
+    font-weight: normal;
+    line-height: 20px;
+    &:before {
+      position: relative;
+      top: 9px;
+      line-height: 0;
+    }
+  }
+  .icon + span,
+  span + .icon {
+    margin-left: 5px;
+  }
+}
+
+/**
+ * Adds large buttons.
+ */
+.btn--lg {
+  padding-top: 19px;
+  padding-bottom: 19px;
+  font-size: 18px;
+  line-height: 22px;
+}
+
+/**
+ * Large button styles for >= md breakpoint.
+ */
+@include breakpoint($screen-md) {
+  .btn--lg {
+    height: 70px;
+    padding: 24px 70px;
+    @include border-radius(35px);
+  }
+}
+
+/* for a large group of buttons */
+@include breakpoint($screen-md) {
+  .btn:first-child:not(:only-child) {
+    margin-bottom: 20px;
+  }
+  .btn + .btn {
+    margin-bottom: 20px;
+  }
+}
+
+/* Ghost button 
+less padding because ghost buttons have borders */
+.btn--white-ghost,
+.btn--black-ghost {
+  padding: 19px 38px;
+}
+.btn--black-ghost {
+  border: 2px solid $colour-dark-blue;
+  &:hover {
+    color: $colour-white;
+  }
+}
+.btn--white-ghost {
+  border: 2px solid $colour-white;
+  &:hover {
+    color: $colour-dark-blue;
+  }
+}
+
+/* small buttons for content wall */
+.content-wall {
+  .btn {
+    padding: 16px 32px;
+    font-size: 16px;
+  }
+  .btn--white-ghost,
+  .btn--black-ghost {
+    padding: 14px 30px;
+  }
+}

package/src/sass/base/components/buttons/buttons.twig

@@ -0,0 +1,4 @@
+<a class="btn {{modifier_class}}" href="#">
+  Primary buttons
+</a>
+<button class="btn {{modifier_class}}">Native button</button>

package/src/sass/base/components/card-block/_card.scss

@@ -0,0 +1,85 @@
+.card {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  text-align: left;
+  width: calc(100% - (4 * #{gutter()}));
+  margin: #{gutter()} calc(2 * #{gutter()});
+  @include breakpoint($screen-md) {
+    margin: 0 gutter() 30px;
+  }
+  &[class*="bg--"] {
+    .card__content-wrapper {
+      padding: 30px;
+    }  
+  }
+}
+.card__title {
+  text-align: center;
+  margin: 0 calc(4 * #{gutter()}) 30px;
+  @include breakpoint($screen-md) {
+    margin: 0 calc(2 * #{gutter()}) 30px;
+  }
+  .bg--dark-orchid & {
+    color: $colour-white;
+  }
+}
+.card__content-wrapper {
+  position: relative;
+  height: 100%;
+  padding: 30px 0;
+  @include breakpoint($screen-md-only) {
+    @include span(7 wider);
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: calc(2*#{gutter()});
+    height: 100%;
+    margin-right: 0;
+    &.card__content-wrapper--no-image {
+      @include span(12);
+      position: relative;
+      .card__content {
+        position: relative;
+        top: 0;
+        transform: translateY(0);
+      }
+    }
+  }
+  
+  .cards--feature-layout & {
+    z-index: 10;
+    margin: calc(4*#{gutter()});
+    margin-top: calc(-6*#{gutter()});
+    text-align: center;
+    background-color: $colour-white;
+    @include breakpoint($screen-md-only) {
+      @include span(9);
+      @include push(3);
+      margin: 25px 0;
+      height: calc(100% - 50px);
+    }
+  }
+}
+.card__image {
+  @include breakpoint($screen-md-only) {
+    @include span(5);
+    margin-left: 0;
+  }
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+.card__content {
+  @include breakpoint($screen-md-only) {
+    position: absolute;
+    width: calc(100% - 20px);
+    top: 50%;
+    right: 0;
+    left: 0;
+    margin: auto;
+    transform: translateY(-50%);
+  }
+}

package/src/sass/base/components/card-block/card.json

@@ -0,0 +1,5 @@
+{
+	"bg_colour": "none",
+	"field_cr_card_image": "kss-assets/images/1-1-img.jpg",
+	"field_cr_card_body": "<h4 class='font--royal-blue text-align-center'>Follow in Dermont's footsteps</h4><p class='text-align-center'>If Dermot's hip-swivelling heroics have inspired you, why not do your bit for Red Nose Day and put on your own dance event?</p><p class='text-align-center'><a class='link link--inline-red' href='#'>Get your Dancing Kit</a></p>"
+}

package/src/sass/base/components/card-block/card.twig

@@ -0,0 +1,13 @@
+<div class="card">
+	{{ title_suffix.contextual_links }}
+	{# {% if field_cr_card_image['#items'].value %} #}
+	<div class="card__image">
+		<img src="{{ field_cr_card_image }}" alt="">
+	</div>
+	{# {% endif %} #}
+	<div class="card__content-wrapper">
+		<div class="card__content">
+			{{ field_cr_card_body }}
+		</div>
+	</div>
+</div>

package/src/sass/base/components/cards/_cards.scss

@@ -0,0 +1,55 @@
+.cards {
+  width: 100%;
+  padding: 30px 0;
+  @include breakpoint($screen-md) {
+    padding: 60px 0;
+  }
+  &.cards--four-grid {
+    .cards__wrapper {
+      justify-content: flex-start;
+    }
+  }
+  &.cards--three-grid {
+    .cards__wrapper {
+      justify-content: flex-start;
+      .card {
+        @include breakpoint($screen-md-max) {
+          @include span(4);
+        }
+      }
+    }
+    &-centre {
+      .cards__wrapper {
+        .card {
+          @include breakpoint($screen-md-max) {
+            @include span(4);
+          }
+        }
+      }
+    }
+  }
+  // New for Membership page
+  &.cards--two-grid {
+    .cards__wrapper {
+      .card {
+        @include breakpoint($screen-md-max) {
+          @include span(6);
+        }
+      }
+    }
+  }
+}
+.cards__wrapper {
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+.card {
+  @include breakpoint($screen-md) {
+    @include span(6);
+  }
+  @include breakpoint($screen-md-max) {
+    @include span(3);
+  }
+}

package/src/sass/base/components/cards/cards.twig

@@ -0,0 +1,19 @@
+<section class="cards {{modifier_class}}">
+	<h2 class="cards__title">Cards title</h2>
+	<div class="cards__wrapper">
+		{% for i in 0..8 %}
+		<div class="card bg--light-grey">
+			<div class="card__image">
+				<img src="kss-assets/images/1-1-img.jpg" alt="card image">
+			</div>
+			<div class="card__content-wrapper ">
+				<div class="card__content">
+					<h3>Follow in Dermont's footsteps</h3>
+					<p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
+					<a class="card__link link link--inline-redlink link--inline-red" href="#">Get your Dancing Kit</a>
+				</div>
+			</div>
+		</div>
+		{% endfor %}
+	</div>
+</section>