@comicrelief/storybook 1.34.2 → 2.0.0

package/src/sass/base/components/grants-near-you/__grants-near-you.scss

@@ -0,0 +1,111 @@
+/* 
+ * Self-contained styles for the Storybook-based Grants Near You component,
+ * primarly to be imported by other applications.
+ *
+ * This component isn't built or shown within the Pattern Lab itself
+ */
+
+@import "../../../base/_core.scss";
+@import "../../../base/variables/_colours.scss";
+@import "../../../base/variables/_lists.scss";
+@import "../../../base/variables/_grid.scss";
+@import "../../../base/variables/_typography.scss";
+@import "../../../base/components/background-colours/_background-colours.scss";
+@import "../../../base/components/typography/_typography.scss";
+@import "../../../base/components/single-msg/_single-msg.scss";
+@import "../../../base/components/promo-header/_promo-header.scss";
+
+.funded-projects {
+  header {
+    position: relative;
+    overflow: hidden;
+
+    .promo-header__content .promo-header__content-inner {
+      margin: 25px auto 15px;
+
+      @include breakpoint($screen-md) {
+        margin: 40px auto;
+      }
+    }
+  }
+
+  .paging-information {
+    float: right;
+    padding: 1em ;
+  }
+
+  .search-container {
+    padding: 20px 0;
+
+    form {
+      margin: 0 auto;
+      width: 350px;
+    }
+
+
+    input {
+      width: 100%;
+      background: $colour-light-grey;
+      padding: 10px 15px;
+      font-size: 21px;
+      border: 0;
+    }
+
+  }
+
+  .result {
+    &:nth-of-type(even) {
+      background: $colour-light-grey;
+
+    }
+
+    .result__inner {
+      @include container();
+    }
+
+    .paragraph.single-msg .single-msg__copy_wrapper .single-msg__copy {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .single-msg__image {
+      @include span(12);
+
+      @include breakpoint($screen-md) {
+        @include span(6);
+      }
+
+      @include breakpoint($screen-lg) {
+        @include span(3);
+      }
+    }
+
+    .single-msg__copy_wrapper {
+      @include span(12);
+
+      @include breakpoint($screen-md) {
+        @include span(6);
+      }
+
+      @include breakpoint($screen-lg) {
+        @include span(9 wide);
+      }
+    }
+  }
+}
+
+.geo-info {
+  text-align: center;
+
+  p {
+    margin: 20px 0 0;
+  }
+
+  span.geo-info--spinner {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    background: url(/assets/lg.fidget-spinner.gif);
+    background-size: 50px 50px;
+  }
+}

package/src/sass/base/components/grid/_grid.scss

@@ -0,0 +1,73 @@
+
+/* Style for grid demo only */
+.pl-grid {
+	@include container;
+	background: rgba(128, 128, 128, 0.2);
+	pre {
+		font-weight: bold;
+		margin: 0;
+		padding: 10px 10px 0;
+		background: white;
+	}
+}
+.pl-item {
+	height: 100px;
+}
+.pl--red {
+	background-color: red;
+}
+.pl--yellow {
+	background-color: #ffee00;
+}
+.pl-example {
+	background-color: #0071ea;
+	overflow: hidden;
+}
+.pl-copy {
+	padding: 20px;
+}
+.pl-one-col {
+	.pl-item {
+		@include span(12);
+	}
+}
+.pl-twelve-cols {
+	.pl-item {
+		@include span(1);
+	}
+}
+.pl-six-by-six-normal {
+	.pl-item:first-child {
+		@include span(6);
+	}
+	.pl-item:last-child {
+		@include span(6);
+	}
+}
+.pl-six-by-six {
+	.pl-item {
+		@include span(6 no-gutters wide);
+	}
+}
+.pl-eight-by-four {
+	.pl-item:first-child {
+		@include span(8 no-gutters);
+	}
+	.pl-item:last-child {
+		@include span(4 no-gutters wider);
+	}
+}
+.pl-breakpoints {
+	.pl-item {
+		// Mobile-first
+		@include span(12);
+
+		@include breakpoint($screen-md) {
+		 	@include span(6);
+		}
+		
+		@include breakpoint($screen-lg) {
+			@include span(3);
+		}
+	}
+}

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

@@ -0,0 +1,108 @@
+
+<div class="pl-grid kss-style">
+  <div class="pl-copy">
+    <h3>Grid</h3>
+    <p>The grid used across all our products uses the <strong>Susy</strong> grid-layout engine, to size and position content in a responsive manner based around percentages within a 12 column grid.</p>
+    <p>This grey wrapper represents our Susy Grid 'container'; 100% width of the available space, with a max-width of 1200px.
+      The grid uses a 12-column layout, with a gutter (margin) down either side of each column. 	
+    </p>
+    <p>Here's 12 different items, each set to be 1 column wide (shown in red) using the 'span' mixin, with their associated gutters (blue):</p>
+  </div>
+  <div class="pl-twelve-cols pl-example">
+    <div class="pl-item pl--red">.pl-item</div>
+    <div class="pl-item pl--red">.pl-item</div>
+    <div class="pl-item pl--red">.pl-item</div>
+    <div class="pl-item pl--red">.pl-item</div>
+    <div class="pl-item pl--red">.pl-item</div>
+    <div class="pl-item pl--red">.pl-item</div>
+    <div class="pl-item pl--red">.pl-item</div>
+    <div class="pl-item pl--red">.pl-item</div>
+    <div class="pl-item pl--red">.pl-item</div>
+    <div class="pl-item pl--red">.pl-item</div>
+    <div class="pl-item pl--red">.pl-item</div>
+    <div class="pl-item pl--red">.pl-item</div>
+  </div>
+  <div class="pl-copy">
+    <p>And the code we use to lay it out in this way:</p>
+    <pre>
+    	.pl-item {
+    		@include span(1);
+    }
+	</pre>
+	<p></p>
+    <p>Here's 2 items, both set to be 6 columns wide:</p>
+  </div>
+  <div class="pl-six-by-six-normal pl-example">
+    <div class="pl-item pl--red">.pl-item</div>
+    <div class="pl-item pl--yellow">.pl-item</div>
+  </div>
+  <div class="pl-copy">
+    <pre>
+.pl-item {
+	@include span(6);
+}
+	</pre>
+    <p></p>
+    <p>Here's 2 items- both set to be 6 columns wide again, but using the 'no-gutters' and 'wide' options, which removes both gutters, and adjusts the width on both sides to compensate.</p>
+  </div>
+  <div class="pl-six-by-six pl-example">
+    <div class="pl-item pl--red">.pl-item</div>
+    <div class="pl-item pl--yellow">.pl-item</div>
+  </div>
+  <div class="pl-copy">
+    <pre>
+.pl-item {
+	@include span(6 no-gutters wide);
+}
+	</pre>
+    <p></p>
+    <p>Finally, here's a 8 and 4 layout, but adding the extra space produced by 'no-gutters' to only the 2nd item, using the 'wider' mixin option on that item:</p>
+  </div>
+  <div class="pl-eight-by-four pl-example">
+    <div class="pl-item pl--red">.pl-item</div>
+    <div class="pl-item pl--yellow">.pl-item</div>
+  </div>
+  <div class="pl-copy">
+    <pre>
+.pl-item:first-child {
+	@include span(8 no-gutters);
+}
+.pl-item:last-child {
+	@include span(4 no-gutters wider);
+}
+	</pre>
+    <h3>Breakpoints</h3>
+    <p>In addition to the grid, all sites also use the same three main breakpoints</br>
+      - <strong>SM</strong>: 0-739px</br>
+      - <strong>MD</strong>: 740-1023px</br>
+      - <strong>LG</strong>: 1024+px</br>
+    </p>
+
+    <p class="font--xsmall">(plus 'Desktop Nav' (1150+px), only used to change our touch-friendly header nav for the mouse-centric version, once we're past "landscape tablet" kind of sizes)</p>
+
+    <p>We're able to change our items are laid-out per breakpoint, using media queries in conjunction with the 'span' mixin. Here's 3 different way to layout a 4 item row, resize your browser to see it in action:
+    </p>
+  </div>
+  <div class="pl-breakpoints pl-example">
+    <div class="pl-item pl--red">.pl-item</div>
+    <div class="pl-item pl--yellow">.pl-item</div>
+    <div class="pl-item pl--red">.pl-item</div>
+    <div class="pl-item pl--yellow">.pl-item</div>
+  </div>
+  <div class="pl-copy">
+    <pre>
+.pl-item {
+	// Mobile-first
+	@include span(12);
+
+	@include breakpoint($screen-md) {
+		@include span(6);
+	}
+
+	@include breakpoint($screen-lg) {
+		@include span(3);
+	}
+}
+	</pre>
+  </div>
+</div>

package/src/sass/base/components/header/_base-header.scss

@@ -0,0 +1,52 @@
+header[role=banner] {
+  border-bottom: 4px solid #E6E6E6;
+  padding-bottom: 10px;
+  overflow: visible;
+  background-color: $colour-white;
+}
+.header__top-wrapper {
+  background: $colour-black;
+  height: 49px;
+}
+.header__inner-wrapper {
+  @include container;
+  position: relative;
+  cursor: pointer;
+
+  @include breakpoint($desktop-nav-breakpoint) {
+    display: flex;
+    justify-content: space-between;
+
+    .main-nav__wrapper {
+      margin-right: 40px;
+    }
+  }
+  .block-cr-meta-icons {
+    float: right;
+  }
+}
+.block-system-branding-block {
+  margin-right: auto;
+}
+.site-logo {
+  float: left;
+  min-width: 104px;
+  width: 104px;
+  height: 60px;
+  display: block;    
+  margin-top: -38px;
+  margin-left: 13px;
+
+  img {
+    width: inherit;
+  }
+
+  @include breakpoint(md) {
+    position: relative;
+    z-index: 101;
+    width: 124px;
+    height: 50px;
+    margin-top: 12px;
+    margin-left: 15px;
+  }
+}

package/src/sass/base/components/header/base_header.twig

@@ -0,0 +1,8 @@
+<header role="banner">
+  <div class="header__top-wrapper">
+  </div>
+  <div class="header__inner-wrapper">
+  	{% include directory ~ '../navigation/main-nav.twig' %}
+  	{% include directory ~ '../meta-icons/meta-icons.twig' %}
+  </div>
+</header>

package/src/sass/base/components/iframe-block/_iframe-block.scss

@@ -0,0 +1,64 @@
+// Iframe block
+
+.iframe-block {
+  padding: 0;
+  @include breakpoint($screen-md) {
+    padding: 60px 0;
+  }
+  &.full-width {
+    padding: 0;
+    .iframe-block__wrapper {
+      @include breakpoint($screen-md) {
+        max-width: 100%;
+      }
+    }
+  }
+  &.eight-column {
+    .iframe-block__wrapper {
+      @include breakpoint($screen-md) {
+        max-width: span(8);
+      }
+    }
+  }
+  &.ten-column {
+    .iframe-block__wrapper {
+      @include breakpoint($screen-md) {
+        max-width: span(10);
+      }
+    }
+  }
+}
+.iframe-block__wrapper {
+  width: 100%;
+  margin: 0 auto;
+  cursor: pointer;
+}
+.iframe-block__wrapper-outer {
+  width: 100%;
+  max-width: $max-width;
+  margin: 0 auto -5px;
+  .full-width & {
+    width: 100%;
+    max-width: 100%;
+  }
+}
+.iframe-block__body {
+  margin-top: 40px;
+  padding: 0 30px;
+}
+.iframe-block__image {
+  img {
+    width: 100%;
+    height: auto;
+  }
+}
+.iframe-block__embedded {
+  display: none;
+  min-height: 480px;
+  .iframe-block__load-now & {
+    display: block;
+  }
+  .iframe-block__wrapper--on & {
+    display: block;
+  }
+}

package/src/sass/base/components/just-in-time-block/_just-in-time.scss

@@ -0,0 +1,90 @@
+$colour-scorpion: #595959;
+
+.form__row--just-in-time-block {
+
+  .toggle-link {
+    position: relative;
+    font-size: 18px;
+    border-bottom: 4px solid $colour-scorpion;
+    font-family: $font-bold;
+    color: $colour-scorpion;
+    text-decoration: none;
+
+    &:focus,
+    &:hover {
+      border-bottom: 4px solid $colour-scorpion;
+    }
+
+    &:after {
+      content:'\2303';
+      position:absolute;
+      font-family:Arial;
+      margin-left: 4px;
+      overflow: hidden;
+      line-height: 19px;
+      font-size: 25px;
+      color: inherit;
+      font-weight: bold;
+    }
+
+
+    &.show-link {
+      &:after {
+        transform: rotate(180deg);
+        bottom: 5px;
+      }
+    }
+    
+
+    &.close-link {
+      &:after {
+        transform: rotate(0);
+        bottom: -4px;
+      }
+    }
+  }
+
+  .just-in-time--content {
+    display: block;
+    margin-top:15px;
+    overflow: hidden;
+    transition: max-height 0.5s ease-in-out; 
+    height: auto;
+    max-height: 0;
+
+    p {
+        color: $colour-scorpion;
+    }
+
+    &.just-in-time--content-close{
+      a, .link {
+        display: none; // hack to hide links from screen readers butnkeep animation
+      }
+    }
+  }
+
+  .close-link {
+    display:none;
+  }
+
+  .show-link:target + .close-link {
+    display: inline;
+  }
+
+  .show-link:target {
+    display:none;
+  }
+  .show-link:target ~ .just-in-time--content,
+  .just-in-time--content.just-in-time--content-show {
+    /* Need to provide a hard value here for max-height to animate to;
+     * supplied copy seems to be about 300px height on SM breakpoint, 
+     * have left a bit of wiggle room here for good measure */
+    max-height: 450px;
+  }
+
+  .close-link:target ~ .just-in-time--content {
+    a {
+      display: none; // hack to hide links from screen readers but keep animation
+    }
+  }
+}

package/src/sass/base/components/just-in-time-block/just-in-time-block.twig

@@ -0,0 +1,11 @@
+<div class="form__row form__row--just-in-time-block">
+ <div class="form__fieldset">
+  <a href="#show" aria-expanded="true" class="link toggle-link show-link" aria-label="click to open" id="show">What you can expect to receive from us</a>
+  <a href="#hide" class="link toggle-link close-link" aria-label="click to close" aria-expanded="false" id="hide">What you can expect to receive from us</a>
+  <div class="just-in-time--content">
+    <p><strong>Name, email and billing address:</strong> we need it to create a receipt for your payment nd send it to you.</p>
+    <p><strong>Phone number:</strong> we collect it in case there is an issue with donation</p>
+    <p><strong>Establishment information:</strong> we use this information to understand better which institutions raise money for us.</p>
+  </div>
+</div>
+</div>