@comicrelief/storybook 1.34.2 → 2.0.0

package/src/sass/base/components/content-block/_content-block.scss

@@ -0,0 +1,67 @@
+.content-block {
+  position: relative;
+  overflow: hidden;
+  height: 450px;
+  text-align: center;
+  &:hover {
+    .content-block__image img {
+      @include opacity(1);
+    }
+  }
+}
+.content-block__link {
+  position: absolute;
+  z-index: 10;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  text-indent: -9999px;
+}
+.content-block__image {
+  height: 100%;
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    transition: opacity 0.2s;
+    @include opacity(0.9);
+
+    object-fit: cover;
+    .no-objectfit & {
+      position: absolute;
+      top: -100%;
+      right: -100%;
+      bottom: -100%;
+      left: -100%;
+      overflow: hidden;
+      width: auto;
+      max-width: none;
+      height: 100%!important;
+      max-height: none;
+      margin: auto;
+    }
+  }
+}
+.content-block__content-wrapper {
+  position: relative;
+}
+.content-block__content {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  padding: 40px 10px 20px;
+  background-image: linear-gradient(rgba(0,0,0,0), $colour-dark-blue);
+  @include breakpoint($screen-md) {
+    padding: 40px 40px 20px;
+  }
+  p, h4 {
+    color: $colour-white;
+  }
+}
+.content-block__tag {
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}

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

@@ -0,0 +1,20 @@
+<div class="cw-region">
+  <article class="contextual-region block-content block-content--type-content-reference-block {{ modifier_class }} content-block clearfix">
+    <div class="content-block__image">
+      <div class="media media--blazy  media--responsive media--image">
+        <picture>
+          <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/original-teaser-1170-658.jpg" alt="Red nose day" typeof="foaf:Image">
+        </picture>
+      </div>
+    </div>
+    <div class="content-block__content-wrapper">
+      <div class="content-block__content">
+        <span class="content-block__tag font--yellow font--font-black">News</span>
+        <h4>
+          Red Nose Day is coming soon to BBC One
+        </h4>
+      </div>
+    </div>
+    <a href="#" class="content-block__link" hreflang="en">Read more</a>
+  </article>
+</div>

package/src/sass/base/components/content-wall/_content-wall.scss

@@ -0,0 +1,57 @@
+.content-wall {
+  width: 100%;
+  padding: 30px 0;
+  @include breakpoint($screen-md) {
+    padding: 60px 0;
+  }
+}
+.content-wall__title {
+  margin-bottom: 30px;
+  text-align: center;
+}
+.cw-region {
+  width: 100%;
+  margin: 0 auto;
+  @include breakpoint($screen-md) {
+    padding: 0 gutter();
+  }
+  @include breakpoint($screen-lg) {
+    padding: 0;
+  }
+}
+.cw-region {
+  article {
+    @media (max-width: $screen-sm-max) {
+      margin: 0 calc(4 * #{gutter()}) calc(4 * #{gutter()});
+      width: calc(100% - (8 * #{gutter()}));
+    }
+    @include breakpoint($screen-md) {
+      margin-bottom: calc(2 * #{gutter()});
+      width: 100%;
+    }
+    &.block-content--view-mode-cw-s,
+    &.view-mode-cw_s {
+      @include breakpoint($screen-md) {
+        @include span(4);
+      }
+    }
+    &.block-content--view-mode-cw-m,
+    &.view-mode-cw_m {
+      @include breakpoint($screen-md) {
+        @include span(6);
+      }
+    }
+    &.block-content--view-mode-cw-mp,
+    &.view-mode-cw_mp {
+      @include breakpoint($screen-md) {
+        @include span(8);
+      }
+    }
+    &.block-content--view-mode-cw-l,
+    &.view-mode-cw_l {
+      @include breakpoint($screen-md) {
+        @include span(12);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,211 @@
+<section class="view-mode-default content-wall paragraph">
+  <h2 class="content-wall__title visuallyhidden">
+    Row's title visually hidden
+  </h2>
+  <div class="clearfix cw-region">
+    <div class="item-list">
+      <ul>
+        <li>
+          <article class="block-content--view-mode-cw-l teaser-block teaser-block--bg-image clearfix">
+            <a class="teaser-block__link" href="#">
+              <div class="teaser-block__image">
+                <img src="kss-assets/images/original-teaser-1170-658.jpg" alt="test">
+              </div>
+              <div class="teaser-block__body bg--white">
+                <div class="cr-body">
+                  <h4>Get ideas, tips and tools to help you fundraise</h4>
+                  <div class="teaser-block__cta">
+                    <span class="btn btn--red">Pre-order a Kit</span>
+                  </div>
+                </div>
+              </div>
+            </a>
+          </article>
+        </li>
+      </ul>
+    </div>
+  </div>
+</section>
+<section class="view-mode-default content-wall paragraph">
+  <h2 class="content-wall__title visuallyhidden">
+    Row's title visually hidden
+  </h2>
+  <div class="clearfix cw-region">
+    <div class="item-list">
+      <ul>
+        <li>
+          <article class="contextual-region block-content block-content--type-content-reference-block block-content--view-mode-cw-m content-block clearfix">
+            <div class="content-block__image">
+              <div class="media media--blazy  media--responsive media--image">
+                <picture>
+                  <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/original-teaser-1170-658.jpg" alt="Red nose day" typeof="foaf:Image">
+                </picture>
+              </div>
+            </div>
+            <div class="content-block__content-wrapper">
+              <div class="content-block__content">
+                <span class="content-block__tag font--yellow font--font-black">News</span>
+                <h4>
+                  Red Nose Day is coming soon to BBC One
+                </h4>
+              </div>
+            </div>
+            <a href="#" class="content-block__link" hreflang="en">Read more</a>
+          </article>
+        </li>
+        <li>
+          <article class="block-content--view-mode-cw-m teaser-block clearfix">
+            <a class="teaser-block__link" href="#">
+              <div class="teaser-block__image">
+                <img src="kss-assets/images/original-teaser-1170-658.jpg" alt="test">
+              </div>
+              <div class="teaser-block__body bg--white">
+                <div class="cr-body">
+                  <h4>Get ideas, tips and tools to help you fundraise</h4>
+                  <div class="teaser-block__cta">
+                    <span class="btn btn--red">Pre-order a Kit</span>
+                  </div>
+                </div>
+              </div>
+            </a>
+          </article>
+        </li>
+      </ul>
+    </div>
+  </div>
+</section>
+<section class="view-mode-default content-wall paragraph">
+  <h2 class="content-wall__title visuallyhidden">
+    Row's title visually hidden
+  </h2>
+  <div class="clearfix cw-region">
+    <div class="item-list">
+      <ul>
+        <li>
+          <article class="block-content--view-mode-cw-s cw-quote 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>
+        </li>
+        <li>
+          <article class="contextual-region block-content block-content--type-media-reference block-content--view-mode-cw-mp media-block clearfix">
+            <div class="media-block__image">
+              <div class="media media--blazy  media--responsive media--image">
+                <picture>
+                  <img class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/original-teaser-1170-658.jpg" alt="Video background" typeof="foaf:Image">
+                </picture>
+              </div>
+            </div>
+            <div class="media-block__content-wrapper">
+              <div class="media-block__content">
+                <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 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>
+                  <path d="M15.8,14l10.3,6l-10.3,6V14 M13.8,10.6v18.8L30.1,20L13.8,10.6L13.8,10.6z"></path>
+                </svg>
+                <div class="cr-body">
+                  <h4>Relive all the best bits of last Red Nose Day</h4>
+                  <p class="font--yellow"><strong>20:20</strong></p>
+                </div>
+              </div>
+            </div>
+            <a class="media-block__link" data-rel="lightcase" href="https://www.youtube.com/embed/NW12S4-KB1I?autoplay=1">media block</a>
+            <div class="media-block__caption">
+              <div class="cr-body">
+                <p>Raymond used to work in a mine, with no time to go to school. Now, thanks to you, he’s getting an education. To help us change more lives, simply raise cash by having fun.</p>
+                <p><a class="btn btn--red" href="#">See how to join in</a></p>
+              </div>
+            </div>
+          </article>
+        </li>
+      </ul>
+    </div>
+  </div>
+</section>
+<section class="view-mode-default content-wall paragraph">
+  <h2 class="content-wall__title">
+    Row's title can be hidden
+  </h2>
+  <div class="clearfix cw-region">
+    <div class="item-list">
+      <ul>
+        <li>
+          <article class="block-content--view-mode-cw-s teaser-block clearfix">
+            <a class="teaser-block__link" href="#">
+              <div class="teaser-block__image">
+                <img src="kss-assets/images/original-teaser-1170-658.jpg" alt="test">
+              </div>
+              <div class="teaser-block__body bg--white">
+                <h4>Get ideas, tips and tools to help you fundraise</h4>
+                <div class="teaser-block__cta">
+                  <span class="btn btn--red">Pre-order a Kit</span>
+                </div>
+              </div>
+            </a>
+          </article>
+        </li>
+        <li>
+          <article class="contextual-region block-content block-content--type-media-reference block-content--view-mode-cw-s media-block clearfix">
+            <div class="media-block__image">
+              <div class="media media--blazy  media--responsive media--image">
+                <picture>
+                  <img class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/original-teaser-1170-658.jpg" alt="Video background" typeof="foaf:Image">
+                </picture>
+              </div>
+            </div>
+            <div class="media-block__content-wrapper">
+              <div class="media-block__content">
+                <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 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>
+                  <path d="M15.8,14l10.3,6l-10.3,6V14 M13.8,10.6v18.8L30.1,20L13.8,10.6L13.8,10.6z"></path>
+                </svg>
+                <div class="cr-body">
+                  <h4>Relive all the best bits of last Red Nose Day</h4>
+                  <p class="font--yellow"><strong>20:20</strong></p>
+                </div>
+              </div>
+            </div>
+            <a class="media-block__link" data-rel="lightcase" href="https://www.youtube.com/embed/NW12S4-KB1I?autoplay=1">media block</a>
+            <div class="media-block__caption">
+              <div class="cr-body">
+                <p>Raymond used to work in a mine, with no time to go to school. Now, thanks to you, he’s getting an education. To help us change more lives, simply raise cash by having fun.</p>
+                <p><a class="btn btn--red" href="#">See how to join in</a></p>
+              </div>
+            </div>
+          </article>
+        </li>
+        <li>
+          <article class="block-content--view-mode-cw-s cw-quote 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>
+        </li>
+      </ul>
+    </div>
+  </div>
+</section>

package/src/sass/base/components/cookie-consent/_cookie-consent.scss

@@ -0,0 +1,116 @@
+
+.cookie-consent.cc_container {
+  display: flex;
+  position: relative;
+  padding: 10px;
+  text-align: center;
+  background: $colour-black;
+  justify-content: space-between;
+  @include breakpoint($screen-lg) {
+    padding: 15px 20px 15px;
+  }
+  .btn,
+  p,
+  a { 
+    color: $colour-white;
+    font-family: $body-font;
+  }
+  p {
+    margin-top: 15px;
+  }
+  .cc_message {
+    margin: 0 auto;
+    width: calc(100% - 50px);
+    font-size: 14px;
+    line-height: 16px;
+    text-align: left;
+    @include breakpoint($screen-md) {
+      width: auto;
+      margin-top: 15px;
+      font-size: 18px;
+      line-height: 20px;
+    }
+  }
+
+  .btn {
+    margin: 0;
+    padding: 12px 20px;
+    width: 40px;
+    height: 44px;
+    text-indent: -9999px;
+    background-image: url( $image-path + "cross-close.svg");
+    background-repeat: no-repeat;
+    background-position: center;
+    // no hover because touchscreen and lack of svg mask support, but override default hover colours on buttons 
+    &:hover {
+      background-color: transparent;
+    }
+    
+    @include breakpoint($screen-lg) {
+      min-width: 128px;
+      text-indent: 0;
+      color: $colour-black;
+      background-image: none;
+      background-color: $colour-white;
+      border: 2px solid $colour-white;
+      &:hover {
+        color: $colour-white;
+        background-color: transparent;
+      }
+    }
+  }
+
+  /*  Required a modifier class so we're not affecting the simpler 
+  *   CC banner (w/different markup) currently used in Donate etc. */
+  &.cc_banner--drupal {
+    display: block;
+    padding: 20px;
+
+    .cc_more_info {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
+    .cc_message {
+      margin: 0 0 10px;
+      width: 100%;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      font-size: 14px;
+      line-height: 20px;
+
+      @include breakpoint($screen-md){
+        font-size: 14px;
+        line-height: 20px;
+        width: 75%;
+        margin: 0 auto 15px;
+      }
+
+      .btn:first-child:not(:only-child) {
+        @extend .btn;
+        @extend .btn--white;
+        background-image: none;
+        height: auto;
+        text-indent: 0;
+        margin-top: 0;
+        margin-bottom: 10px !important;
+        padding: 8px 20px !important;
+        width: 100%;
+        color: $colour-black;
+
+        &:hover {
+          color: $colour-white;
+        }
+        
+        @include breakpoint($screen-md) {
+          width: auto;
+          margin-right: 8px !important;
+          margin-bottom: 0 !important;
+        }
+      }
+    }
+  }
+}

package/src/sass/base/components/cookie-consent/cookie-consent.json

@@ -0,0 +1,7 @@
+{
+	"message": "We use cookies. By continuing to use this site you are agreeing to our terms of use. ",
+	"target":"_blank",
+	"link":"https://www.rednoseday.com/legal#terms",
+	"learn_more": "Learn more",
+	"dismiss": "Close"
+}

package/src/sass/base/components/cookie-consent/cookie-consent.twig

@@ -0,0 +1,7 @@
+<div class="cookie-consent cc_banner cc_container cc_container--open cc_banner--drupal">
+  <p class="cc_message">Hello! Comic Relief uses cookies to help make this website better and improve our services. You can learn more about our use of cookies <a target="_blank" class="cc_more_info link link--white inline" href="/cookies-policy">here</a>. We also use optional cookies for marketing purposes:
+  </p>
+  <p class="cc_message">
+    <a href="#null" class="btn btn--white accept-cookies">Accept</a> Or click <a href="#" class="link deny-cookies link--white inline">here</a> to deny these.
+  </p>
+</div>

package/src/sass/base/components/custom-block/_custom-block.scss

@@ -0,0 +1,16 @@
+.paragraph--type--cr-block-reference {
+  .block-block-content {
+    max-width: $max-width;
+    margin: auto;
+    padding: 60px 0;
+    padding: 0 calc((4 * #{gutter()}));
+    @include breakpoint($screen-md) {
+      width: span(10);
+      padding: 0 calc((2 * #{gutter()}));
+    }
+    @include breakpoint($screen-lg) {
+      width: span(8);
+      padding: 0 calc((0.5 * #{gutter()}));
+    }
+  }
+}

package/src/sass/base/components/demo/_demo.scss

@@ -0,0 +1,5 @@
+
+.demo {
+	width: calc(100%/3);
+	float: left;
+}

package/src/sass/base/components/demo/demo.json

@@ -0,0 +1,5 @@
+{
+  "classes": "demo",
+  "label": "This is the item title",
+  "body": "JSON Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque doloremque eligendi, fugiat fugit laudantium mollitia obcaecati perspiciatis quasi rem rerum saepe sint voluptate? Ab dicta eius harum magnam praesentium."
+}

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

@@ -0,0 +1,14 @@
+{% for i in 0..2 %}
+  <article 
+    {% if attributes %}
+      {{ attributes.addClass('demo') }}
+    {% else %}
+      class="{{ classes }} {{ modifier_class }}"
+    {% endif %}
+  >
+    <h2>{{ label }}</h2>
+    {% if body %}
+      <p>{{ body }}</p>
+    {% endif %}
+  </article>
+{% endfor %}