@comicrelief/storybook 1.34.2 → 2.0.0

package/src/sass/themes/payin/rednoseday/pages/success-page.twig

@@ -0,0 +1,77 @@
+<section id="payin-step-four" class="content success-content">
+  <div class="bg--gradient-purple-ruby promo-header promo-header--default  promo-header--no-image">
+    <div class="promo-header__content">
+    	<div class="promo-header__content-inner promo-header__content-inner--centre">
+       	<h1 class="text-align-center font--white">Thank you</h1>
+        <p>Your payment has been processed.</p>
+      </div>
+    </div>
+  </div>
+  <div class="form__row form__row--title">
+    <div class="form__fieldset">
+      <p>Transaction ID: <strong> 371d3265-efcd-11e7-89992-0e0f567937ca</strong>
+      </p>
+    </div>
+  </div>
+  <div class="form__row--user-generate-content">
+    <div class="form__fieldset">
+      <div class="form-error"></div>
+        <div class="form-user-content">
+          <div class="form-user-content--copy-">
+            <div class="form__field--wrapper form__text form__field--whatyoudid has-error form__field--help">
+              <label for="comicrelief_payin_success_whatYouDid">
+                Tell us about your fundraising activities and you could feature in our next campaign!
+              </label>
+              <span class="form__field--help-info">Don’t forget to tick the box if you want your story to have a chance to be featured.</span>
+              <textarea id="comicrelief_payin_success_whatYouDid" name="comicrelief_payin_success[whatYouDid]" required="required" maxlength="400" placeholder="Enter your Sport Relief 2018 story..." class="form__field form__field--whatYouDid" data-validation="required length" data-validation-length="max400"></textarea>
+              <div class="form__field--error"></div>
+              <span class="help-block form-error">This is a required field</span>
+            </div>
+            <div class="form__field--wrapper form__checkbox form__field--permission has-error">
+              <label class="form__checkbox required" for="comicrelief_payin_success_permission">
+                I am happy for Comic Relief to contact me about my fundraising
+              </label>
+              <input type="checkbox" id="comicrelief_payin_success_permission" name="comicrelief_payin_success[permission]" required="required" value="1" data-validation="required" class="valid" style="">
+              <span></span>
+              <span class="help-block form-error">This is a required field</span>
+            </div>
+            <div class="form__row form__nav">
+              <div class="form__fieldset">
+                <div class="form__field--wrapper form__submit form__field--submit">
+                  <button type="submit" id="comicrelief_payin_success_submit" name="comicrelief_payin_success[submit]" class="btn btn--ruby" disabled="true">Submit story</button>
+                </div>
+              </div>
+            </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="cards cards--three-grid-centre">
+    <div class="cards__wrapper">
+      <div class="card">
+          <div class="card__image">
+              <img src="kss-assets/images/1-1-img.jpg" alt="Where does the money go" />
+          </div>
+          <div class="card__content-wrapper">
+            <div class="cards__content">
+              <h3>Where your money goes</h3>
+              <p>Sport Relief uses the money you give to fund incredible projects, in the UK and around the world, that tackle important social issues and ensure people are safe, happy and healthy.</p>
+              <p><a href="https://www.sportrelief.com/where-your-money-goes" title="Where your money goes">Find out more</a></p>
+            </div>
+          </div>
+      </div>
+      <div class="card">
+          <div class="card__image">
+            <img src="kss-assets/images/1-1-img.jpg" alt="Team sports relief" />
+          </div>
+          <div class="card__content-wrapper">
+            <div class="cards__content">
+              <h3>#teamsportrelief</h3>
+              <p>Show that you're part of a nation-wide team of awesome fundraisers, by sharing photos of your Sport Relief activites on your social channels. Don't forget to tag us with #teamsportrelief!</p>
+              <p><a href="https://www.instagram.com/explore/tags/teamsportrelief/" title="Instagram Team Sport Relief">See the team</a></p>
+            </div>
+          </div>
+      </div>
+    </div>
+  </div>
+</section>

package/src/sass/themes/payin/rednoseday/payin-rednoseday.scss

@@ -0,0 +1,33 @@
+// ==========================================================================
+// CR19
+// ==========================================================================
+@import "../../cr/2019/cr19";
+@import "../../../base/components/just-in-time-block/just-in-time";
+
+// ==========================================================================
+// Payin variables
+// ==========================================================================
+@import "../default/variables/_payin-mixins";
+@import "../default/variables/_payin-colours";
+
+// Payin UI components
+// ==========================================================================
+@import "../default/components/_payin-form";
+@import "../default/components/checkbox/checkbox";
+// ==========================================================================
+
+// ==========================================================================
+// Payin Rednoseday components
+// ==========================================================================
+@import "components/header/_header.scss";
+@import "components/form/_form";
+@import "components/just-in-time-block/just-in-time";
+@import "components/failure/_failure.scss";
+@import "components/footer/_footer.scss";
+
+.cards {
+  a {
+    text-decoration: none;
+  }
+}
+

package/src/sass/themes/payin/sportrelief/components/cards/_cards.scss

@@ -0,0 +1,74 @@
+.cards__wrapper {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.cards-wall {
+
+  &.cards {
+    padding: 0 0 80px;
+
+  }
+
+  .card {
+    height: 350px;
+    margin: 0 5% 20px;
+    border-radius: 4%;
+
+    @include breakpoint($screen-md) {
+      max-width: span(4 of 12);
+      margin: 0 1.25% 20px;
+    }
+
+    &--family {
+      background: url($image-path + "myself-friends-family.jpg") center/cover no-repeat;
+    }
+
+    &--school {
+      background: url($image-path + "nursery-school.jpg") 0 0/cover no-repeat;
+    }
+
+    &--work {
+      background: url($image-path + "workplace-organisation.jpg") 0 0/cover no-repeat;
+    }
+
+    &--youth {
+      background: url($image-path + "youth-university.jpg") 0 0/cover no-repeat;
+    }
+
+    a {
+      display: block;
+      height: 100%;
+      width:100%;
+
+      &:hover {
+        transition: background-color 0.2s linear;
+        background-color: rgba(6,29,56,0.5);
+      }
+    }
+
+    .cards__content {
+
+      .cards__title {
+        background-color: $colour-white;
+        opacity: 0.9;
+        position: absolute;
+        bottom: -15px;
+        width:100%;
+      }
+      h3 {
+        color: $colour-black;
+        font-family: $montserrat;
+        @include font-size($h4-font-size);
+        font-weight: bold;
+        left: auto;
+        right: auto;
+        padding:20px 30px 20px;
+        text-align: center;
+      }
+
+    }
+  }
+
+}

package/src/sass/themes/payin/sportrelief/components/failure/_failure.scss

@@ -0,0 +1,41 @@
+.promo-header {
+  &--failure {
+    min-height: 308px;
+  }
+
+  .promo-header__content {
+    .promo-header__content-inner {
+      @include breakpoint($screen-md) {
+        width: 70%;
+      }
+    }
+  }
+}
+
+.inner-content {
+  margin: 40px auto;
+  width: span(10);
+
+  @include breakpoint($screen-md) {
+    width: span(7);
+    margin-top: 80px;
+  }
+
+  @include breakpoint($screen-lg) {
+    width: span(5);
+  }
+
+  p {
+    color: $colour-black-pearl;
+  }
+
+  .contact-information {
+    margin-top: 35px;
+    @include font-size($p-xsmall-font-size);
+
+    a {
+      text-decoration: underline;
+      color: $colour-black-pearl;
+    }
+  }
+}

package/src/sass/themes/payin/sportrelief/components/footer/_footer.scss

@@ -0,0 +1,3 @@
+footer[role=contentinfo] {
+  background-color: $colour-SR20-light-blue;
+}

package/src/sass/themes/payin/sportrelief/components/form/_form.scss

@@ -0,0 +1,216 @@
+.form__row--title {
+  width: 100%;
+  background-color: $colour-white-smoke;
+
+  h3 {
+    font-size:28px;
+    font-family: $font-regular;
+    color: $colour-dark-blue-lighter;
+  }
+}
+
+.form-row {
+  background-color: transparent;
+}
+
+.form__step {
+  max-width: none;
+}
+
+.form__row {
+  @include container;
+
+  &.form__row--title {
+    width: 100%;
+    max-width: none;
+  }
+}
+
+// hide address fields until shown
+.form__field--address,
+.form__row--billing-detail {
+  display: block;
+   &.hide {
+    display: none;
+   }
+}
+.form__row--your-detail,
+.form__row--payment {
+  padding: 30px 0 0;
+}
+
+.form__row--address-detail,
+.form__row--billing-detail {
+  padding: 0;
+}
+
+.form__subtitle {
+  @extend h2;
+  text-align: center;
+  color: $colour-dark-blue-lighter;
+}
+
+label,
+input {
+  color: $colour-dark-purple;
+}
+
+input[type="email"],
+input[type="number"],
+input[type="text"],
+textarea {
+  border: 1px solid $colour-dark-purple;
+  background-color: $colour-light-grey;
+}
+select {
+  border: 1px solid $colour-royal-blue;
+  background: transparent url($image-path + "drop-down.svg") calc(100% - 20px) 20px/20px 10px no-repeat;
+}
+
+// after element to put loading gif in on top of postcode find address button
+.search-box {
+  .search-box-button.loading {
+    &:after {
+      position: absolute;
+      content:'';
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: calc(100% + 3px); // cover button as it's not hovered anymore
+      border: 1px solid $colour-black;
+      box-shadow:inset 0 0 0 3px $colour-black;
+      background: $colour-white url($image-path + "loader.gif") center no-repeat;
+      transform: translateY(-3px); // place at same position as hovered button
+    }
+  }
+  #postcode_button {
+    @extend .btn--black-ghost;
+    border-radius: 0;
+  }
+}
+
+.form__row--your-detail,
+.form__row--keep-touch,
+.form__row--billing-detail,
+.form__row--user-generate-content,
+.form__row--just-in-time-block {
+  p,
+  strong {
+    font-size: 18px;
+    color: $colour-dark-purple;
+  }
+
+  input[type="checkbox"]:focus+span {
+    border-color: $colour-dark-purple;
+  }
+}
+.form__row--keep-touch {
+  .form__subcopy--privacy-policy {
+    font-size: 16px;
+  }
+
+  .form__subcopy--certificate,
+  .form__subcopy--contact {
+    @extend p;
+    font-weight: bold;
+  }
+}
+
+button.payment-button {
+  @extend .btn--black-ghost;
+}
+#comicrelief_payinbundle_payment_card.clicked {
+  color: $colour-white;
+  background-color: $colour-black;
+
+  &:focus,
+  &:hover {
+    transform: translateY(0);
+  }
+}
+
+.form__field--wrapper.form__submit {
+  text-align: center;
+}
+button[type=submit] {
+  @extend .btn--ruby;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+}
+
+//specificity needed for form error
+.help-block,
+.help-block.form-error {
+  position: relative;
+  top: 0;
+  left: 0;
+  padding: 0 0 5px 25px;
+}
+
+.form__row--payment {
+  .form__subcopy {
+    text-align: center;
+  }
+}
+.form__row--billing-detail {
+  .form__subcopy {
+    font-weight: bold;
+  }
+}
+
+@include breakpoint($screen-md) {
+  .form__row--your-detail,
+  .form__row--payment {
+    padding: 80px 0 0;
+  }
+
+  // center buttons
+  .search-box {
+    .search-box-button.loading:after {
+      left: 25%;
+      width: 50%;
+    }
+    #postcode_button {
+      margin: 30px auto 20px;
+      width: 50%;
+    }
+  }
+  .form__checkbox-text-only label.form__checkbox {
+    margin-left: auto;
+    margin-right: auto;
+    width: auto;
+    text-align: center;
+  }
+  .form__checkbox--same-address {
+    label.form__checkbox {
+      margin: 0 0 3%;
+      text-align: left;
+    }
+  }
+  button.payment-button,
+  button[type=submit] {
+    width: auto;
+  }
+}
+.form__field--address-detail {
+  label.form__checkbox{
+    padding: 0;
+  }
+}
+
+.form__row {
+  &.form__nav {
+    padding: 40px 0 80px;
+
+    .form__field--wrapper {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.form__field--wrapper {
+  &.form__field--paymentType {
+    margin-bottom: 80px;
+  }
+}

package/src/sass/themes/payin/sportrelief/components/form/images/drop-down.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 9" style="enable-background:new 0 0 16 9;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#4032FE;}
+</style>
+<polygon class="st0" points="14.4,0.3 8,6.7 1.6,0.3 0.9,1 8,8.1 8.7,7.4 15.1,1 "/>
+</svg>

package/src/sass/themes/payin/sportrelief/components/header/_header.scss

@@ -0,0 +1,33 @@
+header[role=banner] {
+  height: 90px;
+}
+
+.header__inner-home {
+  float: right;
+  margin: 28px 15px 0 0;
+  font-family: $font-bold--sr18;
+
+  a {
+    border-bottom:2px solid transparent;
+
+    &:hover {
+      border-color:inherit;
+    }
+    span {
+      color: $colour-black;
+    }
+  }
+}
+
+.header__inner-wrapper {
+  padding: 0 15px 0;
+}
+
+.block-branding {
+  float: left;
+
+  .site-logo {
+    min-width: 0;
+    margin: 18px 15px 15px;
+  }
+}

package/src/sass/themes/payin/sportrelief/components/promo-header/_promo-header.scss

@@ -0,0 +1,28 @@
+.promo-header {
+  background-color: $colour-SR20-light-blue;
+
+  .promo-header__content {
+    top: 0;
+    transform: translate(0);
+
+    .promo-header__content-inner {
+      @include breakpoint($screen-md) {
+        margin-top:100px;
+      }
+    }
+  }
+
+  &.promo-header--small {
+    min-height: 325px;
+  }
+
+  h1 {
+    color: $colour-white;
+    margin-bottom: 36px;
+  }
+
+  p {
+    @include font-size($p-large-font-size);
+    color: $colour-white;
+  }
+}

package/src/sass/themes/payin/sportrelief/components/success/_success.scss

@@ -0,0 +1,70 @@
+#payin-step-four {
+
+  .form__field--permission {
+    margin: 0 auto 40px;
+    width: 90%;
+    text-align: left;
+
+    @include breakpoint($screen-md) {
+      width: auto;
+      text-align: center;
+    }
+  }
+
+  .form__field--whatyoudid label {
+    text-align: left;
+    margin: 0;
+  }
+
+  .form__field--whatyoudid {
+    padding:0 15px;
+
+    @include breakpoint($screen-md) {
+      padding: 0;
+    }
+  }
+
+  .form__field--help-info{
+    margin-bottom: 40px;
+    color:$colour-black;
+    font-family: $font-regular--sr18;
+    font-size: 18px;
+  }
+
+  .form__row--user-generate-content {
+    margin-top: 83px;
+
+    >.form__fieldset {
+      margin-bottom: 85px;
+    }
+
+    .form__field--submit {
+      margin-bottom: 0;
+
+      @include breakpoint($screen-md) {
+        width: span(12);
+      }
+    }
+  }
+
+  .cards {
+    clear: both;
+    background-color: $colour-white-smoke;
+
+    a {
+      color: $colour-black-pearl;
+      text-align: center;
+    }
+
+    h3 {
+      color: $colour-black-pearl;
+      text-align: center;
+    }
+
+    p {
+        color: $colour-black-pearl;
+        text-align: center;
+        padding:0 15px;
+    }
+  }
+}

package/src/sass/themes/payin/sportrelief/pages/failure-page.twig

@@ -0,0 +1,14 @@
+<section id="payin-step-four" class="content">
+  <div class="promo-header promo-header--default promo-header--failure">
+    <div class="promo-header__content">
+      <div class="promo-header__content-inner promo-header__content-inner--centre">
+        <h1>Payment Failed</h1>
+      </div>
+    </div>
+  </div>
+  <div class="inner-content">
+    <p>Sorry, your payment has failed. Please try again to pay in your fundraising money.</p>
+    <a href="/" class="btn btn--ruby">Try again</a>
+    <p class="contact-information">If you continue to experience issues, please <a href="http://www.comicrelief.com/contact-us?_ga=2.216239263.884518803.1517826958-841508478.1506692348">contact us.</a>
+  </div>
+</section>