@comicrelief/storybook 1.34.2 → 2.0.0

package/src/sass/base/components/partners/_partners.scss

@@ -0,0 +1,62 @@
+
+/* Override global styles */
+.page-node-type-partner {
+  .bottom-region {
+    max-width: none;
+    margin: 0;
+  }
+  .cr-article {
+    max-width: none;
+    margin: 0;
+    padding: 0;
+    background-color: inherit;
+    .cr-article__header {
+      overflow: hidden;
+      width: 100%;
+      padding: 57px 0;
+      background-color: $colour-red;
+      .cr-article__title {
+        margin: 0;
+        text-align: center;
+        @include span(10);
+        @include push(1);
+        @include breakpoint($screen-md) {
+          @include span(8);
+          @include push(2);
+        }
+        @include breakpoint($screen-lg) {
+          @include span(6);
+          @include push(3);
+        }
+        span {
+          color: $colour-white !important;
+          @extend h1;
+        }
+      }
+    }
+    .cr-article__inner-wrapper {
+      @include container;
+      @include clearfix;
+    }
+    .cr-article__body {
+      margin: 60px auto;
+      padding: 0;
+      @include span(10);
+      @include push(1);
+      @include breakpoint($screen-md) {
+        @include span(8);
+        @include push(2);
+      }
+      @include breakpoint($screen-lg) {
+        @include span(6);
+        @include push(3);
+      }
+      img {
+        width: 100%;
+        height: auto;
+        margin: 0;
+      }
+    }
+  }
+}
+

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

@@ -0,0 +1,25 @@
+<div class="page-node-type-partner">
+<article class="cr-article">
+  <div class="cr-article__inner-wrapper">
+    <div class="cr-article__body">
+      
+        <div class="cr-body">
+          <article class="embedded-entity align-center">
+          <div class="media media-cr-image view-mode-large">
+            <img src="kss-assets/images/paypal-logo.png" alt="Paypal logo" title="Paypal logo" typeof="foaf:Image">
+            </div>
+          </article>
+          <p>A massive thank you to PayPal for supporting Sport Relief. They allow our supporters to donate quickly, 
+            easily and – most importantly – securely through PayPal donations. This is only possible thanks to the superb 
+            support their team gives us. Thank you, PayPal – you’re true pals!</p>
+        <p>&nbsp;</p>
+        </div>
+
+    <a href="http://home.bt.com/" class="link link--red" target="_blank">
+        Visit paypal.com
+    </a>
+    </div>
+  </div>
+</article>
+</div>
+

package/src/sass/base/components/partners-grid/_partners-grid.scss

@@ -0,0 +1,97 @@
+
+.partners-grid {
+    padding: 30px 0 65px;
+    text-align: center;
+    background-color: $colour-smoke-grey;
+    .view-content {
+      @include container;
+      .item-list + .item-list {
+        margin-top: 40px;
+      }
+      h2 {
+        width: 97.5%;
+        margin-right: 1.25%;
+        margin-left: 1.25%;
+        margin-top: calc(6 * #{gutter()});
+        @include breakpoint($screen-md) {
+          margin-top: calc(2 * #{gutter()});
+        }
+      }
+      ul {
+        padding: 0 gutter();
+        @include clearfix;
+        li {
+          @include span(6);
+          margin-top: gutter();
+          margin-bottom: gutter();
+          @include breakpoint($screen-md) {
+            @include span(3);
+          }
+          .node__content {
+            position: relative;
+  
+            .partner__link a {
+              display: block;
+  
+              img {
+                position: relative;
+                display: block;
+                max-width: 100%;
+                height: auto;
+              }
+  
+              span {
+                position: absolute;
+                clip: rect(1px, 1px, 1px, 1px);
+                display: none;
+              }
+              
+              &:hover {
+                span {
+                  display: block;
+                  top: 50%;
+                  left: 0;
+                  width: 100%;
+                  color: $colour-white;
+                  font-family: "GT-Walsheim-Bold",helvetica,arial,sans-serif;
+                  font-size: 18px;
+                  line-height: 18px;
+                  text-align: center;
+                  transform: translateY(-50%);
+                  clip: auto;
+                  z-index: 5;
+                }
+  
+                &:after {
+                  position: absolute;
+                  display: block;
+                  content: '';
+                  top: 0;
+                  right: 0;
+                  bottom: 0;
+                  left: 0;
+                  width: 100%;
+                  height: 100%;
+                  background-color: $colour-red;
+                }
+  
+              }  
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  /* 
+   * Removing the 'hover' state for touch devices,
+   * to be handled by JS to deal with proper events to only change on tap, not scroll
+   * Needing to check both classes to get around Chrome bug (returning both as true)
+   */
+  .touchevents:not(.no-touchevents) {
+    .partners-grid ul li .node__content {
+      &.active .partner__link a {
+        display: block;
+      }
+    }
+}

package/src/sass/base/components/partners-grid/partners-grid.twig

@@ -0,0 +1,121 @@
+<div class="view view-partners view-id-partners view-display-id-block_1 js-view-dom-id-7758a0e48e90dbaf2402acc9049443bff5572cab14c43ed56a1d0ea495cf197c clearfix partners-grid">
+    <div class="view-content clearfix">
+        <div class="item-list">
+            <h2>Technology partners</h2>
+            <ul>
+                <li>
+                    <article role="article" about="/partners/paypal" class="node node--type-partner node--view-mode-teaser">
+                        <span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">PayPal</span>
+                        </span>
+                        <div class="node__content">
+                            <div class="partner__link">
+                                <a href="http://www.paypal.com" title="find out more">
+                                    <img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
+                                    <span>Find out more</span>
+                                </a>
+                            </div>
+                        </div>
+                    </article>
+                </li>
+                <li>
+                    <article role="article" about="/partners/amazon-web-services" class="node node--type-partner node--view-mode-teaser">
+                        <span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">Amazon Web Services</span>
+                        </span>
+                        <div class="node__content">
+                            <div class="partner__link">
+                                <a href="#" title="find out more">
+                                    <img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
+                                    <span>Find out more</span>
+                                </a>
+                            </div>
+                        </div>
+                    </article>
+                </li>
+                <li>
+                    <article role="article" about="/partners/trillium" class="node node--type-partner node--view-mode-teaser">
+                        <span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">Trillium</span>
+                        </span>
+                        <div class="node__content">
+                            <div class="partner__link">
+                                <a href="#">
+                                    <img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
+                                    <span>Find out more</span>
+                                </a>
+                            </div>
+                        </div>
+                    </article>
+                </li>
+                <li>
+                    <article role="article" about="/partners/armakuni" class="node node--type-partner node--view-mode-teaser">
+                        <span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">Armakuni</span>
+                        </span>
+                        <div class="node__content">
+                            <div class="partner__link">
+                                <a href="#">
+                                    <img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
+                                    <span>Find out more</span>
+                                </a>
+                            </div>
+                        </div>
+                    </article>
+                </li>
+                <li>
+                    <article role="article" about="/partners/ncc-group" class="node node--type-partner node--view-mode-teaser">
+                        <span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">NCC Group</span>
+                        </span>
+                        <div class="node__content">
+                            <div class="partner__link">
+                                <a href="#">
+                                    <img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
+                                    <span>Find out more</span>
+                                </a>
+                            </div>
+                        </div>
+                    </article>
+                </li>
+                <li>
+                    <article role="article" about="/partners/cisco" class="node node--type-partner node--view-mode-teaser">
+                        <span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">Cisco</span>
+                        </span>
+                        <div class="node__content">
+                            <div class="partner__link">
+                                <a href="#">
+                                    <img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
+                                    <span>Find out more</span>
+                                </a>
+                            </div>
+                        </div>
+                    </article>
+                </li>
+                <li>
+                    <article role="article" about="/partners/bt-mydonate" class="node node--type-partner node--view-mode-teaser">
+                        <span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">BT MyDonate</span>
+                        </span>
+                        <div class="node__content">
+                            <div class="partner__link">
+                                <a href="#">
+                                    <img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
+                                    <span>Find out more</span>
+                                </a>
+                            </div>
+                        </div>
+                    </article>
+                </li>
+                <li>
+                    <article role="article" about="/partners/worldpay" class="node node--type-partner node--view-mode-teaser">
+                        <span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">Worldpay</span>
+                        </span>
+                        <div class="node__content">
+                            <div class="partner__link">
+                                <a href="#">
+                                    <img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
+                                    <span>Find out more</span>
+                                </a>
+                            </div>
+                        </div>
+                    </article>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>

package/src/sass/base/components/partners-row/_partners-row.scss

@@ -0,0 +1,54 @@
+.partners-row {
+  .partners-row-wrapper {
+    display: block;
+    padding: 60px 0;
+    margin: auto;
+    max-width: 1200px;
+  }
+  .partners-row__body {
+    text-align: center;
+  }
+  .partners-row__logos-list {
+    text-align: center; // ie
+    ul {
+      display: flex;
+      text-align: center;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      align-content: flex-end;
+      flex-flow: row wrap;
+      margin: auto;
+      // make this guttering into a mixin
+      max-width: calc(100% - (#{gutter()} * 4) );
+      @include breakpoint($screen-md) {
+        max-width: calc(100% - (#{gutter()} * 2));
+      }
+      @include breakpoint($screen-md-max) {
+        max-width: calc(#{$max-width} - (#{gutter()} * 1));
+      }
+      //
+    }
+    li {
+      @include span(6);
+      margin-bottom: gutter();
+      @include breakpoint($screen-md) {
+        @include span(3);
+        display: inline-block;
+        float: none;
+      }
+      @include breakpoint($screen-lg) {
+        @include span(2);
+        display: inline-block;
+        float: none;
+      }
+      display: inline-block;
+      float: none;
+    }
+    img {
+      height: auto;
+      float: none;
+      width: 100%;
+    }
+  }
+}

package/src/sass/base/components/partners-row/partners-row.twig

@@ -0,0 +1,18 @@
+<div class="partners-row paragraph">
+	<div class="partners-row-wrapper">
+			<div class="partners-row__body">
+				<h2>Our wonderful partners</h2>
+				<p><a class="link link--inline-black" href="#" title="See all our partners">See all our partners</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class="link link--inline-black" href="#" target="_blank">Download partners shopping list</a></p>
+			</div>
+			<div class="partners-row__logos-list">
+				<ul>
+					<li><img alt="Sainsbury's" src="kss-assets/images/sainsburys_logo.png" width="210" height="118" typeof="foaf:Image"></li>
+					<li><img alt="Sainsbury's" src="kss-assets/images/sainsburys_logo.png" width="210" height="118" typeof="foaf:Image"></li>
+					<li><img alt="Sainsbury's" src="kss-assets/images/sainsburys_logo.png" width="210" height="118" typeof="foaf:Image"></li>
+					<li><img alt="Sainsbury's" src="kss-assets/images/sainsburys_logo.png" width="210" height="118" typeof="foaf:Image"></li>
+					<li><img alt="Sainsbury's" src="kss-assets/images/sainsburys_logo.png" width="210" height="118" typeof="foaf:Image"></li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</div>

package/src/sass/base/components/postcode-lookup/_postcode-lookup.scss

@@ -0,0 +1,74 @@
+.form__row--address-lookup {
+
+  #field-wrapper--addressSelect,
+  .search-box {
+    width: auto;
+  }
+  
+  .search-box {
+    .form__field--postcode {
+      margin-left: 0;
+      width: 100%;
+
+      .form__field--text {
+        @include span(6 no-gutters);
+
+        @include breakpoint($screen-md) {
+          @include span(7 no-gutters);
+        }
+      }
+
+      .form__btn {
+        @include span(6 wider no-gutters);
+
+        @include breakpoint($screen-md) {
+          @include span(5 wider no-gutters);
+        }
+
+        .form__btn--postcode {
+          @extend .btn;
+          @include border-radius(0);
+          font-size: 16px;
+          margin: 0 !important;
+          padding: 15px 0;
+          width: 100%;
+          height: 50px;
+          border: 0;
+          color: $colour-white;
+          background:$colour-persian-purple;
+          -webkit-appearance: none;
+
+          @include breakpoint($screen-md) {
+            font-size: 18px;
+            width: auto;
+            padding-left: 15px;
+            padding-right: 15px;
+          }
+
+          &:hover {
+            background:$colour-persian-purple;
+          }
+
+          &.button-inactive {
+            @extend .disable-button;
+          }
+        }
+      }
+      &:after {
+        clear: both;
+        content: " ";
+        display: block;
+        font-size: 0;
+        height: 0;
+        visibility: hidden;
+      }
+    }
+  }
+  a.link {
+    @extend .link--purple;
+  }
+}
+
+.form__fieldset form__field--address-detail {
+  @include span(12);
+}

package/src/sass/base/components/postcode-lookup/postcode-lookup.twig

@@ -0,0 +1,56 @@
+<div class="form__row--address-lookup">
+    <div class="form__field--wrapper form__text form__field--postcode">
+      <div class="search-box form__field--wrapper">
+            <label class="form__field form__field--postcode form__text required" id="postcode-label" for="comicrelief_payinbundle_payment_postcode">Postcode</label>
+            <div class="form__field--postcode">
+                <input 
+                    type="text"
+                    id="comicrelief_payinbundle_payment_postcode"
+                    name="comicrelief_payinbundle_payment[postcode]"
+                    required="required" 
+                    placeholder="SE1 7TP"
+                    class="form__field form__field--text"
+                />
+                <div class="form__btn">
+                    <input 
+                        type="button"
+                        id="postcode_button"
+                        name="btnPostcodeSearch"
+                        class="btnPostcodeSearch btn form__btn--postcode"
+                        value="FIND ADDRESS"
+                    />
+                </div>
+            </div>
+        </div>
+        <a role="button" href="" class="form__btn--address-detail link">Or enter your address manually</a>
+    </div>
+
+    <div class="form__field--wrapper form__text form__field--postcode">
+      <div class="search-box form__field--wrapper">
+            <label class="form__field form__field--postcode form__text required" id="postcode-label" for="comicrelief_payinbundle_payment_postcode">Postcode</label>
+            <div class="form__field--postcode">
+                <input 
+                    type="text" 
+                    id="comicrelief_payinbundle_payment_postcode" 
+                    name="comicrelief_payinbundle_payment[postcode]"
+                    required="required" 
+                    placeholder="SE1 7TP"
+                    class="form__field form__field--text form__field--error-outline"
+                />
+                <div class="form__btn">
+                    <input 
+                        type="button" 
+                        id="postcode_button" 
+                        name="btnPostcodeSearch" 
+                        class="btnPostcodeSearch btn form__btn--postcode"
+                        value="FIND ADDRESS"
+                    />
+                </div>
+            </div>
+            <div id="postcode-error" class="error-container js-error has-error" aria-live="assertive" role="status">
+                <span class="help-block form-error">Please enter a valid postcode</span>
+            </div>
+        </div>
+        <a role="button" href="" class="form__btn--address-detail link">Or enter your address manually</a>
+    </div>
+</div>

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

@@ -0,0 +1,120 @@
+
+
+.progress-bar {
+  position: relative;
+  border-top: 4px solid $colour-blue;
+  background-color: #00BEC9; 
+
+  @include breakpoint($screen-md) {    
+    .progress-bar__steps-1 li {
+      width: 100%;
+    }
+  
+    .progress-bar__steps-2 li {
+      width: 50%;
+    }
+  
+    .progress-bar__steps-3 li {
+      width: 33.3%;
+    }
+  
+    .progress-bar__steps-4 li {
+      width: 25%;
+    }
+  
+    .progress-bar__steps-5 li {
+      width: 20%;
+    }
+  }
+
+  ul {
+    overflow: hidden; 
+  }
+
+  li {
+    display: none;
+    margin-bottom: 0px; 
+
+    @include breakpoint($screen-md) {
+      height: 120px;
+      display: block;
+      float: left;
+    }
+
+    &.progress-bar--active {
+      display: block;
+      background-color: #009DB1;
+      font-family: 'GT-Walsheim-Medium';
+
+      .progress-bar__title {
+        @include breakpoint($screen-md) {
+          background: transparent url($image-path + "navbar-sprite.png") right 5px no-repeat;
+          margin-left: 25px;
+          padding-right: 25px;
+        }
+      }
+    }
+    
+    &.progress-bar--done {
+      display: none;
+      
+      @include breakpoint($screen-md) {
+        display: block;
+      }
+      .progress-bar__title {
+        @include breakpoint($screen-md) {
+          background: transparent url($image-path + "navbar-sprite.png") right 5px no-repeat;
+          margin-left: 25px;
+          padding-right: 25px;
+        }
+      }
+    }
+  }
+}
+
+.progress-bar--active {
+  @include breakpoint($screen-md) {
+    background: rgb(51, 51, 51);
+    background: rgba(51, 51, 51, 0.25);
+  }
+}
+
+.progress-bar__inner {
+  @include container; 
+  margin: 0px auto;
+  max-width: 1200px;
+}
+
+.progress-bar__back-link {
+  background: transparent url($image-path + "navbar-sprite.png") 0 -77px no-repeat;
+  position: absolute;
+  top: 16px;
+  left: 10px;
+  text-indent: -9999px;
+  height: 20px;
+  width: 40px;
+
+  @include breakpoint($screen-md) {
+    display: none;
+  }
+}
+
+.progress-bar__step-link {
+  color: $colour-white;
+  display: block;
+  height: 100%;
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+  padding: 15px 0;
+
+  @include breakpoint($screen-md) {
+    padding: 25px 0;
+  }
+}
+
+.progress-bar__step {
+  @include breakpoint($screen-md) {
+    display: none;
+  }
+}

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

@@ -0,0 +1,23 @@
+<div class="progress-bar">
+<a class="progress-bar__back-link">back</a>
+<ul class="progress-bar__steps-3">
+ <li class="progress-bar--done">
+  <a class="progress-bar__step-link" href="#">
+   <span class="progress-bar__step">1/3 :</span>
+   <span class="progress-bar__title">Login Details</span>
+  </a>
+ </li>
+ <li class="progress-bar--active">
+   <a class="progress-bar__step-link" href="#">
+    <span class="progress-bar__step">2/3 :</span>
+    <span class="progress-bar__title">Contact Details</span>
+   </a>
+ </li>
+ <li class="progress-bar--todo">
+   <a class="progress-bar__step-link" href="#">
+    <span class="progress-bar__step">3/3 :</span>
+    <span class="progress-bar__title">Complete Your Giving Page</span>
+   </a>
+ </li>
+</ul>
+</div>