@comicrelief/storybook 1.34.2 → 2.0.0

package/src/sass/base/components/search/_search-block.scss

@@ -0,0 +1,182 @@
+.search-block__wrapper {
+  overflow: auto;
+}
+.search-block {
+  @include clearfix;
+  display: none;
+  text-align: center;
+  background: $colour-white;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 98;
+  &.show {
+    display: block;
+  }
+  //IE fix
+  .no-object-fit & {
+    position: relative;
+  }
+  .path-search & {
+    display: block;
+    position: relative;
+  }
+  label {
+    @include visuallyhidden;
+  }
+  input[type=submit] {
+    border: none;
+    width: 100%;
+    max-width: 100%;
+    height: 40px;
+    padding: 0;
+    text-indent: -9999px;
+    background-color: $colour-gainsboro-grey;
+    mask: url($image-path + "magnify.svg") no-repeat right center;
+    mask-size: 30px;
+    -webkit-mask: url($image-path + "magnify.svg") no-repeat right center;
+    -webkit-mask-size: 30px;
+    -webkit-appearance: none;
+    @include breakpoint($screen-md) {
+      height: 100px;
+      mask-size: 70px;
+      -webkit-mask-size: 70px;
+    }
+    .no-cssmask & {
+      background: transparent url($image-path + "search_page_icon.png") center right no-repeat;
+      background-size: 35px;
+      @include breakpoint($screen-md) {
+        background-size: 55px;
+      }
+      &:focus,
+      &:hover {
+        background-image: url($image-path + "search_page_icon_hover.png");
+        background-color: transparent;
+      }
+    }
+    &:focus,
+    &:hover {
+      background-color: $colour-black;
+    }
+  }
+  input[type=text] {
+    width: 100%;
+    max-width: 100%;
+    height: 40px;
+    border: none;
+    font-size: 24px;
+    font-family: $body-font;
+    @include breakpoint($screen-md) {
+      height: 100px;
+      font-size: 70px;
+    }
+    &::-ms-clear {
+      display: none;
+    }
+  }
+  .form-item {
+    @include span(10);
+    margin-bottom: 0;
+  }
+  .form-actions {
+    @include span(2);
+  }
+
+   a.close-button {
+    height: 30px;
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    width: 30px;
+
+    .icon {
+      fill: $colour-black;
+      height: 30px;
+      position: relative;
+      width: 30px;
+      cursor: pointer;
+    }
+
+    &:hover, 
+    &:focus {
+      .icon {
+        fill: $colour-jasper-grey;
+      }
+    }
+  }
+
+  .icon {
+    .path-search & {
+      display: none;
+    }
+  }
+}
+
+.search-block__form {
+  margin: 20px auto;
+  max-width: 1200px;
+  padding: 0 calc((4 * 1.25%));
+  @include breakpoint($screen-md) {
+    padding: 0 calc((2 * 1.25%));
+  }
+  @include breakpoint($screen-lg) {
+    width: span(8);
+    padding: 0 calc((0.5 * 1.25%));
+  }
+  form {
+    margin: 39px auto 40px;
+    width: 100%;
+    border-bottom: $colour-red 4px solid;
+    @include clearfix;
+  }
+}
+nav.menu--main {
+  .main-menu__icons-magnify {
+    background-color: transparent;
+    border: none;
+    height: 50px;
+    margin: 0;
+    padding: 0;
+    width: 85px;
+    height: 78px;
+    outline: 0;
+    @include breakpoint($desktop-nav-breakpoint) {
+      height: 100%;
+    }
+    .path-search &,
+    &:focus,
+    &:hover,
+    &.active {
+      .icon {
+        fill: $colour-black;
+      }
+    }
+    .icon {
+      fill: $colour-jasper-grey;
+      width: 46px;
+      height: 46px;
+    }
+    .path-search & {
+      background-color: #f9f9f9;
+    }
+  }
+}
+.search-overlay {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(3, 14, 26, 0.7);
+  z-index: 90;
+  display: none;
+  &.show {
+    display: block;
+  }
+  .path-search & {
+    display: none;
+  }
+}

package/src/sass/base/components/search/images/magnify.svg

@@ -0,0 +1,11 @@
+<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
+ <g>
+  <title>background</title>
+  <rect x="-1" y="-1" width="22" height="22" id="canvas_background" fill="none"/>
+ </g>
+
+ <g>
+  <title>Layer 1</title>
+  <path d="m19.7,18.3l-6.2,-6.3c1,-1.3 1.5,-2.8 1.5,-4.5c0,-4.1 -3.4,-7.5 -7.5,-7.5s-7.5,3.4 -7.5,7.5s3.4,7.5 7.5,7.5c1.7,0 3.3,-0.6 4.5,-1.5l6.3,6.3l1.4,-1.5zm-17.7,-10.8c0,-3 2.5,-5.5 5.5,-5.5s5.5,2.5 5.5,5.5s-2.5,5.5 -5.5,5.5s-5.5,-2.5 -5.5,-5.5z" id="svg_1"/>
+ </g>
+</svg>

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

@@ -0,0 +1,26 @@
+<div class="views-exposed-form contextual-region block search-block show" data-drupal-selector="views-exposed-form-search-page-1" id="block-exposedformsearchpage-1">
+  <div data-contextual-id="block:block=exposedformsearchpage_1:langcode=en|entity.view.edit_form:view=search:location=exposed_filter&amp;name=search&amp;display_id=page_1&amp;langcode=en" class="contextual" role="form">
+    <button class="trigger focusable visually-hidden" type="button" aria-pressed="false">Open  configuration options</button>
+    <ul class="contextual-links" hidden="">
+      <li class="block-configure"><a href="/web/admin/structure/block/manage/exposedformsearchpage_1?destination=test/esu">Configure block</a></li>
+      <li class="entityviewedit-form"><a href="/web/admin/structure/views/view/search/edit/page_1?destination=test/esu">Edit view</a></li>
+    </ul>
+  </div>
+
+  <div class="search-block__wrapper">
+    <div class="search-block__form">
+      <form action="/web/search" method="get" id="views-exposed-form-search-page-1" accept-charset="UTF-8" data-drupal-form-fields="edit-text">
+        <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-text form-item-text">
+          <label for="edit-text">Search</label>
+          <input data-drupal-selector="edit-text" type="text" id="edit-text" name="text" value="" size="30" maxlength="128" class="form-text">
+        </div>
+        <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions"><input data-drupal-selector="edit-submit-search" type="submit" id="edit-submit-search" value="Apply" class="button js-form-submit form-submit"></div>
+      </form>
+    </div>
+  </div>
+  <a role="button" class="close-button" href="#">
+    <svg class="icon">
+      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close-cross"></use>
+    </svg>
+  </a>
+</div>

package/src/sass/base/components/search-results/_search-result.scss

@@ -0,0 +1,163 @@
+.node--type-page.search-result {
+  @include breakpoint($screen-md) {
+    padding-bottom: 0;
+  }
+}
+.path-search {
+  background-color: $colour-smoke-grey;
+}
+.search-result {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  width: 100%;
+  margin-bottom: 20px;
+  text-align: left;
+  a {
+    text-decoration: none;
+    color: $colour-black;
+  }
+  &.node--type-page {
+    padding-bottom: 0;
+  }
+}
+.search-result__node-link a {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  text-indent: -9999px;
+}
+.search-result__image {
+  @include span(5);
+  position: relative;
+  margin-left: 0;
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+.search-result__content-wrapper {
+  @include span(7 wider);
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  padding: calc(2 * #{gutter()});
+  margin-right: 0;
+  padding: 30px;
+  &.search-result__content-wrapper--no-image {
+    position: relative;
+    @include span(12);
+    .search-result__content {
+      position: relative;
+      top: 0;
+      transform: translateY(0);
+    }
+  }
+}
+.search-result__content {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  width: calc(100% - 30px);
+  margin: auto;
+  transform: translateY(-50%);
+  @include breakpoint($screen-md) {
+    width: calc(100% - 40px);
+  }
+  span {
+    font-family: $body-font;
+  }
+  h3 {
+    font-size: 18px;
+    line-height: 18px;
+    margin-bottom: 0;
+    @include breakpoint($screen-md) {
+      font-size: 30px;
+      line-height: 34px;
+      margin-bottom: 15px;
+    }
+  }
+}
+.search-result__body {
+  display: none;
+  color: $colour-black;
+  @include breakpoint($screen-md) {
+    display: block;
+  }
+}
+.search-result__tag {
+  margin-right: 10px;
+  text-transform: capitalize;
+  color: $colour-red;
+  line-height: 18px;
+  display: none;
+  @include breakpoint($screen-md) {
+    display: inline-block;
+  }
+}
+.search-result__published-date {
+  display: inline-block;
+  line-height: 18px;
+  @include breakpoint($screen-md) {
+    padding-left: 12px;
+    border-left: 2px solid $colour-black;
+  }
+}
+// Search views details
+.view-search {
+  .search__total,
+  .search__start-end {
+    @extend p;
+    @extend .font--xlarge;
+    .path-search & {
+      display: block;
+      float: none;
+      width: 100%;
+      margin-bottom: 0;
+      text-align: left;
+      @include breakpoint($screen-md) {
+        width: auto;
+      }
+    }
+  }
+  .search__total {
+    margin-bottom: 5px;
+    .path-search & {
+      @include breakpoint($screen-md) {
+        display: inline-block;
+      }
+    }
+  }
+  .search__start-end {
+    .path-search & {
+      @include breakpoint($screen-md) {
+        float: right;
+      }
+    }
+  }
+}
+.view-header {
+  margin: 20px 0;
+}
+
+/* Partner-specific search result to suit rectangular image style */
+.node--type-partner.search-result {
+  .search-result__image {
+    height: 0;
+    padding-bottom: 39%;
+    background-color: $colour-white;
+    img {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      height: auto;
+      transform: translateY(-50%);
+    }
+  }
+}

package/src/sass/base/components/search-results/search-results.twig

@@ -0,0 +1,211 @@
+<div class="path-search" style="padding-bottom:1px;">
+  {# search banner #}
+  {% include directory ~ '../search/search.twig' %}
+  {# search results #}
+  <div class="views-element-container contextual-region">
+    <div class="contextual-region view view-search view-id-search view-display-id-page_1 js-view-dom-id-2051ec469cdfea1417fab1e08bbff05d1a6dab8378b5ef114a995f3fa45251a4">
+      <div class="view-header">
+        <div class="search__total">We found 33 results!</div>
+        <div class="search__start-end">Displaying 1 - 10</div>
+      </div>
+      <div class="view-content">
+        <div class="item-list">
+          <ul>
+            <li>
+              <div class="search-result search-result--article">
+                <a class="search-result__link" href="#">
+                  <div class="search-result__image">
+                    <a href="#">
+                      <img src="kss-assets/images/1-1-img.jpg" alt="search result image">
+                    </a>
+                  </div>
+                  <div class="search-result__content-wrapper bg--white">
+                    <div class="search-result__content">
+                      <span class="search-result__tag">Video</span>
+                      <span class="search-result__published-date">1st Feb 2016</span>
+                      <h3><a href="#">Follow in Dermont's footsteps</a></h3>
+                      <p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </li>
+            <li>
+              <div class="search-result search-result--article">
+                <a class="search-result__link" href="#">
+                  <div class="search-result__image">
+                    <a href="#">
+                      <img src="kss-assets/images/1-1-img.jpg" alt="search result image">
+                    </a>
+                  </div>
+                  <div class="search-result__content-wrapper bg--white">
+                    <div class="search-result__content">
+                      <span class="search-result__tag">Video</span>
+                      <span class="search-result__published-date">1st Feb 2016</span>
+                      <h3><a href="#">Follow in Dermont's footsteps</a></h3>
+                      <p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </li>
+            <li>
+              <div class="search-result search-result--article">
+                <a class="search-result__link" href="#">
+                  <div class="search-result__image">
+                    <a href="#">
+                      <img src="kss-assets/images/1-1-img.jpg" alt="search result image">
+                    </a>
+                  </div>
+                  <div class="search-result__content-wrapper bg--white">
+                    <div class="search-result__content">
+                      <span class="search-result__tag">Video</span>
+                      <span class="search-result__published-date">1st Feb 2016</span>
+                      <h3><a href="#">Follow in Dermont's footsteps</a></h3>
+                      <p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </li>
+            <li>
+              <div class="search-result search-result--article">
+                <a class="search-result__link" href="#">
+                  <div class="search-result__image">
+                    <a href="#">
+                      <img src="kss-assets/images/1-1-img.jpg" alt="search result image">
+                    </a>
+                  </div>
+                  <div class="search-result__content-wrapper bg--white">
+                    <div class="search-result__content">
+                      <span class="search-result__tag">Video</span>
+                      <span class="search-result__published-date">1st Feb 2016</span>
+                      <h3><a href="#">Follow in Dermont's footsteps</a></h3>
+                      <p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </li>
+            <li>
+              <div class="search-result search-result--article">
+                <a class="search-result__link" href="#">
+                  <div class="search-result__image">
+                    <a href="#">
+                      <img src="kss-assets/images/1-1-img.jpg" alt="search result image">
+                    </a>
+                  </div>
+                  <div class="search-result__content-wrapper bg--white">
+                    <div class="search-result__content">
+                      <span class="search-result__tag">Video</span>
+                      <span class="search-result__published-date">1st Feb 2016</span>
+                      <h3><a href="#">Follow in Dermont's footsteps</a></h3>
+                      <p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </li>
+            <li>
+              <div class="search-result search-result--article">
+                <a class="search-result__link" href="#">
+                  <div class="search-result__image">
+                    <a href="#">
+                      <img src="kss-assets/images/1-1-img.jpg" alt="search result image">
+                    </a>
+                  </div>
+                  <div class="search-result__content-wrapper bg--white">
+                    <div class="search-result__content">
+                      <span class="search-result__tag">Video</span>
+                      <span class="search-result__published-date">1st Feb 2016</span>
+                      <h3><a href="#">Follow in Dermont's footsteps</a></h3>
+                      <p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </li>
+            <li>
+              <div class="search-result search-result--article">
+                <a class="search-result__link" href="#">
+                  <div class="search-result__image">
+                    <a href="#">
+                      <img src="kss-assets/images/1-1-img.jpg" alt="search result image">
+                    </a>
+                  </div>
+                  <div class="search-result__content-wrapper bg--white">
+                    <div class="search-result__content">
+                      <span class="search-result__tag">Video</span>
+                      <span class="search-result__published-date">1st Feb 2016</span>
+                      <h3><a href="#">Follow in Dermont's footsteps</a></h3>
+                      <p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </li>
+            <li>
+              <div class="search-result search-result--article">
+                <a class="search-result__link" href="#">
+                  <div class="search-result__image">
+                    <a href="#">
+                      <img src="kss-assets/images/1-1-img.jpg" alt="search result image">
+                    </a>
+                  </div>
+                  <div class="search-result__content-wrapper bg--white">
+                    <div class="search-result__content">
+                      <span class="search-result__tag">Video</span>
+                      <span class="search-result__published-date">1st Feb 2016</span>
+                      <h3><a href="#">Follow in Dermont's footsteps</a></h3>
+                      <p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </li>
+            <li>
+              <div class="search-result search-result--article">
+                <a class="search-result__link" href="#">
+                  <div class="search-result__image">
+                    <a href="#">
+                      <img src="kss-assets/images/1-1-img.jpg" alt="search result image">
+                    </a>
+                  </div>
+                  <div class="search-result__content-wrapper bg--white">
+                    <div class="search-result__content">
+                      <span class="search-result__tag">Video</span>
+                      <span class="search-result__published-date">1st Feb 2016</span>
+                      <h3><a href="#">Follow in Dermont's footsteps</a></h3>
+                      <p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </li>
+            <li>
+              <div class="search-result search-result--article">
+                <a class="search-result__link" href="#">
+                  <div class="search-result__image">
+                    <a href="#">
+                      <img src="kss-assets/images/1-1-img.jpg" alt="search result image">
+                    </a>
+                  </div>
+                  <div class="search-result__content-wrapper bg--white">
+                    <div class="search-result__content">
+                      <span class="search-result__tag">Video</span>
+                      <span class="search-result__published-date">1st Feb 2016</span>
+                      <h3><a href="#">Follow in Dermont's footsteps</a></h3>
+                      <p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    {# pagination #}
+    {% include directory ~ '../pagination/pagination.twig' %}
+  </div>
+</div>