@comicrelief/storybook 1.34.0 → 2.0.0

package/src/sass/base/components/news-overview/news_press-releases.twig

@@ -0,0 +1,148 @@
+<section class="news-landing__wrapper">
+  <div class="news-landing__content-wrapper">
+    <div>
+      <div class="contextual-region view view-what-s-going-on view-id-what_s_going_on view-display-id-block_1 js-view-dom-id-6b20195c6178d9d04bccf4bba56ffa7ef7be375d3e64bb783ee2e74ce60ca95c">
+        <div class="news-landing__filter">
+          <form class="views-exposed-form bef-exposed-form" data-bef-auto-submit-full-form="" data-drupal-selector="views-exposed-form-what-s-going-on-block-1" action="/web/whats-going-on" method="get" id="views-exposed-form-what-s-going-on-block-1" accept-charset="UTF-8" data-drupal-form-fields="edit-field-article-category-target-id">
+            <div class="js-form-item form-item js-form-type-select form-type-select js-form-item-field-article-category-target-id form-item-field-article-category-target-id">
+              <label for="edit-field-article-category-target-id-button">Filter by category:</label>
+              <select data-drupal-selector="edit-field-article-category-target-id" id="edit-field-article-category-target-id" name="field_article_category_target_id" class="form-select" style="display: none;">
+                <option value="All" selected="selected">All</option>
+                <option value="16">Rednoseday</option>
+                <option value="17">Comicrelief</option>
+                <option value="19">Red Nose Day Partners</option>
+                <option value="14">The difference you make</option>
+              </select>
+              <span class="ui-selectmenu-button ui-widget ui-state-default ui-corner-all" tabindex="0" id="edit-field-article-category-target-id-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="edit-field-article-category-target-id-menu" aria-haspopup="true" aria-activedescendant="ui-id-1" aria-labelledby="ui-id-1" aria-disabled="false" style="width: 160px;"><span class="ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">All</span></span>
+            </div>
+            <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions"><input data-bef-auto-submit-click="" class="js-hide button js-form-submit form-submit" data-drupal-selector="edit-submit-what-s-going-on" type="submit" id="edit-submit-what-s-going-on" value="Apply"></div>
+          </form>
+        </div>
+        <div class="news-landing__content">
+          <div class="news-landing__item news-landing__item--press-release">
+            <article class="article-teaser article-teaser--rednoseday">
+              <a class="article-teaser__link" href="#">
+                <div class="article-teaser__image">
+                  <picture>
+                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
+                  </picture>
+                </div>
+                <div class="article-teaser__content-wrapper">
+                  <div class="article-teaser__content">
+                    <span class="article-teaser__date"> 
+                    28 October 2016
+                    </span>
+                    <h2>News article</h2>
+                  </div>
+                  <div></div>
+                </div>
+              </a>
+            </article>
+          </div>
+          <div class="news-landing__item news-landing__item--press-release">
+            <article class="article-teaser article-teaser--comicrelief">
+              <a class="article-teaser__link" href="#">
+                <div class="article-teaser__image">
+                  <picture>
+                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
+                  </picture>
+                </div>
+                <div class="article-teaser__content-wrapper">
+                  <div class="article-teaser__content">
+                    <span class="article-teaser__date"> 
+                    28 October 2016
+                    </span>
+                    <h2>News article</h2>
+                  </div>
+                  <div></div>
+                </div>
+              </a>
+            </article>
+          </div>
+          <div class="news-landing__item news-landing__item--press-release">
+            <article class="article-teaser article-teaser--comicrelief">
+              <a class="article-teaser__link" href="#">
+                <div class="article-teaser__image">
+                  <picture>
+                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
+                  </picture>
+                </div>
+                <div class="article-teaser__content-wrapper">
+                  <div class="article-teaser__content">
+                    <span class="article-teaser__date"> 
+                    28 October 2016
+                    </span>
+                    <h2>News article</h2>
+                  </div>
+                  <div></div>
+                </div>
+              </a>
+            </article>
+          </div>
+          <div class="news-landing__item news-landing__item--press-release">
+            <article class="article-teaser article-teaser--sportrelief">
+              <a class="article-teaser__link" href="#">
+                <div class="article-teaser__image">
+                  <picture>
+                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
+                  </picture>
+                </div>
+                <div class="article-teaser__content-wrapper">
+                  <div class="article-teaser__content">
+                    <span class="article-teaser__date"> 
+                    28 October 2016
+                    </span>
+                    <h2>News article</h2>
+                  </div>
+                  <div></div>
+                </div>
+              </a>
+            </article>
+          </div>
+          <div class="news-landing__item news-landing__item--press-release">
+            <article class="article-teaser article-teaser--rednoseday">
+              <a class="article-teaser__link" href="#">
+                <div class="article-teaser__image">
+                  <picture>
+                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
+                  </picture>
+                </div>
+                <div class="article-teaser__content-wrapper">
+                  <div class="article-teaser__content">
+                    <span class="article-teaser__date"> 
+                    28 October 2016
+                    </span>
+                    <h2>News article</h2>
+                  </div>
+                  <div></div>
+                </div>
+              </a>
+            </article>
+          </div>
+          <div class="news-landing__item news-landing__item--press-release">
+            <article class="article-teaser article-teaser--rednoseday">
+              <a class="article-teaser__link" href="#">
+                <div class="article-teaser__image">
+                  <picture>
+                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
+                  </picture>
+                </div>
+                <div class="article-teaser__content-wrapper">
+                  <div class="article-teaser__content">
+                    <span class="article-teaser__date"> 
+                    28 October 2016
+                    </span>
+                    <h2>News article</h2>
+                  </div>
+                  <div></div>
+                </div>
+              </a>
+            </article>
+          </div>
+        </div>
+        {# pagination #}
+        {% include directory ~ '../pagination/pagination.twig' %}
+      </div>
+    </div>
+  </div>
+</section>

package/src/sass/base/components/news-teaser/_news-article-teaser.scss

@@ -0,0 +1,132 @@
+.article-teaser {
+	background-color: $colour-white;
+	height: 100%;
+	.article-teaser__link {
+		display: block;
+		height: 100%;
+		text-decoration: none;
+	}
+	.article-teaser__video {
+		position:relative;
+		img { 
+			width: 100%;
+		}
+	}
+	//play-icon. Instead of using a mask, colour is given in svg itself to support all browsers.
+	.article-teaser__video a::after {
+		position: absolute;
+		width: 100%;
+		height: 50px;
+		top: calc(50% - 25px);
+		content: "";
+		background: url($image-path + "play-icon.svg") center no-repeat;
+	}
+	.article-teaser__content-wrapper {
+		padding: calc(4 * #{gutter()});
+		background-color: $colour-white;
+		.article-teaser__date {
+			text-transform: uppercase;
+			font-family: $font-black;
+			color: $colour-black;
+		}
+		h2 {
+			margin-top: calc(4 * #{gutter()});
+			font-family: $font-regular;
+			@include font-size($p-xlarge-font-size);
+			text-align: left;
+			color: $colour-black;
+			margin-bottom: 0;
+		}
+	}
+	@include breakpoint($screen-md) {
+		.article-teaser__image, 
+		.article-teaser__video {
+			@include span(5);
+			margin: 0px;
+		}
+		.article-teaser__content-wrapper {
+			@include span(7);
+			margin: 0px;
+			padding: 0px;
+			background-color: $colour-white; 
+			.article-teaser__content {
+				position: absolute;
+				padding: calc(4 * #{gutter()});
+				top: 50%;
+				transform: translateY(-50%);
+			}
+		}
+	}
+	@include breakpoint($screen-lg) {
+		.article-teaser__image, 
+		.article-teaser__video {
+			width:100%;
+		}
+		.article-teaser__content-wrapper {
+			position: relative;
+			width: 100%;
+			padding: calc(4 * #{gutter()});
+			.article-teaser__content {
+				position: relative;
+				top: 0;
+				transform: translateY(0);
+			}
+		}
+	}
+}
+.article-teaser__image, 
+.article-teaser__video {
+	img {
+		display: block;
+		width: 100%;
+		height: auto;
+	}
+}
+// Press release teaser
+.news-landing__item--press-release {
+	.article-teaser {
+		.article-teaser__content-wrapper {
+			padding: 30px 30px 30px 100px;
+			width: 100%;
+			position: relative;
+			&:before {
+				background: url($image-path + "press-logos.png") no-repeat 0 0;
+				background-size: 70px;
+				content: " ";
+				display: block;
+				width: 70px;
+				height: 70px;
+				position: absolute;
+				left: 10px;
+				top: 50%;
+				transform: translateY(-50%);
+			}
+		}
+		&--comicrelief {
+			.article-teaser__content-wrapper {
+				&:before {
+					background-position: 0 -77px;
+				}
+			}
+		}
+		&--sportrelief {
+			.article-teaser__content-wrapper {
+				&:before {
+					background-position: 0 -157px;
+				}
+			}
+		}
+		.article-teaser__image {
+			display: none;
+		}
+		.article-teaser__content {
+			position: relative;
+			padding: 0;
+			top: 0;
+			transform: translateY(0);
+			h2 {
+				margin: 0;
+			}
+		}
+	}
+}

package/src/sass/base/components/news-teaser/_news-teaser.scss

@@ -0,0 +1,42 @@
+
+.node--type-article.node--view-mode-teaser {
+  position: relative;
+  h2 {
+    position: absolute;
+    right: 0;
+    bottom: 1px;
+    left: 0;
+    margin-bottom: 0;
+    padding: 80px 10px 10px;
+    box-shadow: inset 10px -140px 81px -97px $colour-black;
+    a {
+      text-decoration: none;
+      color: $colour-white;
+      font-size: 16px;
+      font-weight: bold;
+    }
+  }
+  .node__links {
+    @include opacity(0);
+    transition: opacity 0.5s;
+    a {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      padding-top: 27%;
+      text-align: center;
+      text-decoration: none;
+      color: $colour-white;
+      background: $colour-red;
+    }
+  }
+  &:hover {
+    .node__links {
+      @include opacity(1);
+    }
+  }
+}

package/src/sass/base/components/news-teaser/images/copyvideo--play-icon.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="play_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#2C0230;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g id="bg">
+	<circle class="st0" cx="50" cy="50" r="50"/>
+</g>
+<polygon id="play" class="st1" points="37,35 37,65 66,50 "/>
+</svg>

package/src/sass/base/components/news-teaser/images/copyvideo--play-icon__hover.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="play_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#2C0230;}
+</style>
+<g id="bg">
+	<circle class="st0" cx="50" cy="50" r="50"/>
+</g>
+<g id="play">
+	<polygon class="st1" points="37,35 37,65 66,50 	"/>
+</g>
+</svg>

package/src/sass/base/components/news-teaser/images/play-icon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="play-icon" viewBox="0 0 40 40" xml:space="preserve">
+	<path fill="#fbef51" d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2 M20,0C9,0,0,9,0,20s9,20,20,20
+		s20-9,20-20S31,0,20,0L20,0z"/>
+	<path fill="#fbef51" d="M15.8,14l10.3,6l-10.3,6V14 M13.8,10.6v18.8L30.1,20L13.8,10.6L13.8,10.6z"/>
+</svg>

package/src/sass/base/components/news-teaser/news-teaser.twig

@@ -0,0 +1,15 @@
+<article class="article-teaser">
+  <a href="#" class="article-teaser__link">
+    <div class="article-teaser__image">
+      <picture>
+        <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
+      </picture>
+    </div>
+    <div class="article-teaser__content-wrapper">
+      <div class="article-teaser__content">
+        <span class="article-teaser__date">28 October 2016</span>
+        <h2>News article</h2>
+      </div>
+    </div>
+  </a>
+</article>

package/src/sass/base/components/pagination/_pagination.scss

@@ -0,0 +1,50 @@
+
+.pager {
+  margin: 40px auto;
+  .pager__items {
+    padding: 10px;
+    text-align: center;
+    background-color: $colour-white;
+  }
+  li {
+    display: inline-block;
+    padding: 0;
+    @include breakpoint($screen-md) {
+      padding: 8px;
+    }
+    a {
+      display: block;
+      width: 40px;
+      height: 40px;
+      padding: 10px;
+      text-decoration: none;
+      color: $colour-black;
+      font-size: 22px;
+      @include border-radius(50%);
+      &:hover {
+        color: $colour-white;
+        background-color: $colour-red;
+      }
+    }
+    &.pager__item--previous,
+    &.pager__item--next {
+      a {
+        padding: 8px;
+        &:hover {
+          color: $colour-black;
+          background-color: transparent;
+        }
+      }
+    }
+    &.is-active {
+      a {
+        color: $colour-white;
+        background-color: $colour-red;
+      }
+    }
+    &.pager__item--first,
+    &.pager__item--last {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
+  <h4 id="pagination-heading" class="visuallyhidden">Pagination</h4>
+  <ul class="pager__items">
+    <li class="pager__item is-active">
+      <a href="#">
+          <span class="visuallyhidden">
+           Current Page
+          </span>1</a>
+      </li>
+    <li class="pager__item">
+      <a href="#">
+        <span class="visuallyhidden">
+          Page
+        </span>2</a>
+    </li>
+    <li class="pager__item">
+      <a href="" title="Current page">
+        <span class="visuallyhidden">
+          Page
+        </span>3</a>
+    </li>
+    <li class="pager__item pager__item--next">
+      <a href="#" title="Go to next page" rel="next">
+        <span class="visuallyhidden">Next page</span>
+        <span aria-hidden="true">››</span>
+      </a>
+    </li>
+  </ul>
+</nav>

package/src/sass/base/components/paragraph--cr-single-message-row/_paragraph--cr-single-message-row.scss

@@ -0,0 +1,170 @@
+// Single Message (deprecated)
+//
+// This is a Single Message row (deprecated)
+//
+// Markup: _paragraph--cr-single-message-row.twig
+//
+// .paragraph--cr-single-message-row--title-above-image-right  - Title above, image on right
+// .paragraph--cr-single-message-row--centre-text-only  - Centred, Text only, image optional
+// .paragraph--cr-single-message-row--centre-image-above - Centred, image above copy
+// .paragraph--cr-single-message-row--centre-image-below - Centred, image below copy
+//
+// No Style guide: Single Message variants
+
+/* Global styles */
+.paragraph--cr-single-message-row {
+  position: relative;
+  /* Placeholder styles */
+  margin-top: 50px;
+  margin-bottom: 50px;
+  @include container;
+  @include breakpoint($screen-lg) {
+    margin-top: 70px;
+    margin-bottom: 70px;
+  }
+  h2 {
+    text-align: center;
+  }
+  a.btn {
+    display: block;
+    width: 100%;
+    margin: 0 auto;
+    @include breakpoint($screen-md) {
+      width: 280px;
+    }
+  }
+}
+.paragraph--cr-single-message-row {
+  &.paragraph--cr-single-message-row--title-inside-image-right {
+    max-width: 100%;
+    margin: 0;
+    margin-top: 55px;
+    padding: 50px 0;
+    background: #f5f2ed;
+    @include breakpoint($screen-lg) {
+      margin-top: 75px;
+      padding: 70px 0;
+    }
+    .paragraph--cr-single-message-row__inner-wrapper {
+      position: relative;
+      @include container;
+    }
+  }
+}
+.paragraph--cr-single-message-row__body {
+  p {
+    font-size: 18px;
+  }
+  h2 {
+    // fix for june (heading only in the body no margin)
+    margin-bottom: 0;
+  }
+}
+.paragraph--cr-single-message-row__title,
+.paragraph--cr-single-message-row__image,
+.paragraph--cr-single-message-row__copy_wrapper {
+  @include span(12);
+}
+/* Image Below variant */
+.paragraph--cr-single-message-row--centre-image-below {
+  display: table;
+  .paragraph--cr-single-message-row__copy_wrapper {
+    display: table-header-group;
+    float: none;
+    .paragraph--cr-single-message-row__title,
+    .paragraph--cr-single-message-row__body {
+      @include span(12);
+    }
+  }
+  .paragraph--cr-single-message-row__image {
+    @include span(12);
+  }
+}
+/* Centred, Text only, image optional */
+.paragraph--cr-single-message-row--centre-text-only {
+  .paragraph--cr-single-message-row__copy_wrapper {
+    text-align: center;
+  }
+}
+.paragraph--cr-single-message-row__image {
+  margin-bottom: 20px;
+  @include breakpoint($screen-lg) {
+    margin-bottom: 0;
+  }
+}
+
+@include breakpoint($screen-lg) {
+  /* General styles */
+  .paragraph--cr-single-message-row {
+    .paragraph--cr-single-message-row__image,
+    .paragraph--cr-single-message-row__copy_wrapper {
+      @include span(6);
+    }
+  }
+  .paragraph--cr-single-message-row--title-inside-image-right,
+  .paragraph--cr-single-message-row--title-inside-image-left {
+    .paragraph--cr-single-message-row__copy_wrapper {
+      @include span(6);
+      @include push(6);
+      position: absolute;
+      top: 50%;
+      text-align: center;
+      transform: translateY(-50%);
+    }
+  }
+  .paragraph--cr-single-message-row--title-inside-image-right {
+    .paragraph--cr-single-message-row__copy_wrapper {
+      @include span(6);
+    }
+  }
+  /* Reposition image and text for 'image right' */
+  .paragraph--cr-single-message-row--title-above-image-right,
+  .paragraph--cr-single-message-row--title-inside-image-right {
+    .paragraph--cr-single-message-row__copy_wrapper {
+      @include span(6 first);
+    }
+    .paragraph--cr-single-message-row__image {
+      @include span(6 last);
+    }
+  }
+  /* Image above variations */
+  .paragraph--cr-single-message-row--centre-image-above {
+    .paragraph--cr-single-message-row__image {
+      @include span(6);
+      @include push(3);
+      margin-bottom: 20px;
+    }
+    .paragraph--cr-single-message-row__copy_wrapper {
+      @include span(8);
+      @include push(2);
+    }
+  }
+  /* Image Below variant specific */
+  .paragraph--cr-single-message-row--centre-image-below {
+    .paragraph--cr-single-message-row__copy_wrapper {
+      float: none;
+      .paragraph--cr-single-message-row__title,
+      .paragraph--cr-single-message-row__body {
+        @include span(8);
+        @include push(2);
+        float: none;
+        margin: auto;
+      }
+    }
+    .paragraph--cr-single-message-row__image {
+      @include span(6);
+      @include push(3);
+      float: none;
+      margin: auto;
+      margin-bottom: 20px;
+    }
+  }
+  /* Centred, Text only, image optional*/
+  .paragraph--cr-single-message-row--centre-text-only {
+    .paragraph--cr-single-message-row__copy_wrapper {
+      @include span(6);
+      @include push(3);
+      float: none;
+    }
+  }
+}