@biggive/components 202304051358.0.0 → 202304111046.0.0

package/dist/collection/components/biggive-header/biggive-header.css

@@ -1,439 +0,0 @@
-/**
- * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
- */
-a {
-  color: inherit;
-  text-decoration: underline;
-}
-a:hover {
-  text-decoration: none;
-}
-
-.space-above-0 {
-  margin-top: 0;
-}
-
-.space-above-1 {
-  margin-top: 5px;
-}
-
-.space-above-2 {
-  margin-top: 10px;
-}
-
-.space-above-3 {
-  margin-top: 15px;
-}
-
-.space-above-4 {
-  margin-top: 30px;
-}
-
-.space-above-5 {
-  margin-top: 45px;
-}
-
-.space-above-6 {
-  margin-top: 60px;
-}
-
-.space-below-0 {
-  margin-bottom: 0;
-}
-
-.space-below-1 {
-  margin-bottom: 5px;
-}
-
-.space-below-2 {
-  margin-bottom: 10px;
-}
-
-.space-below-3 {
-  margin-bottom: 15px;
-}
-
-.space-below-4 {
-  margin-bottom: 30px;
-}
-
-.space-below-5 {
-  margin-bottom: 45px;
-}
-
-.space-below-6 {
-  margin-bottom: 60px;
-}
-
-:host {
-  display: contents;
-}
-
-.header {
-  font-family: "Euclid Triangle", sans-serif;
-  font-size: 17px;
-  line-height: 24px;
-  position: relative;
-  z-index: 99;
-}
-
-.nav {
-  margin: 0;
-  padding: 0;
-  text-align: right;
-  display: flex;
-  flex-direction: column;
-}
-.nav ul {
-  margin: auto 0;
-  padding: 0;
-}
-.nav ul li {
-  margin: 0 15px 0 0;
-  padding: 0 15px 0 0;
-  display: inline-block;
-  font-size: 18px;
-  line-height: 20px;
-}
-.nav ul li:last-child {
-  padding-right: 0;
-  margin-right: 0;
-}
-.nav ul li a {
-  color: #000000;
-  text-decoration: none;
-  display: inline-block;
-}
-.nav ul li a.icon-green {
-  padding-left: 20px;
-  background-image: url(/assets/images/triangles-combined-green-match.svg);
-  background-repeat: no-repeat;
-  background-size: auto 10px;
-  background-position: left center;
-}
-.nav ul li a.icon-children {
-  padding-left: 20px;
-  background-image: url(/assets/images/triangles-combined-children.svg);
-  background-repeat: no-repeat;
-  background-size: auto 10px;
-  background-position: left center;
-}
-.nav ul li a.icon-christmas {
-  padding-left: 20px;
-  background-image: url(/assets/images/triangles-combined-christmas-challenge.svg);
-  background-repeat: no-repeat;
-  background-size: auto 10px;
-  background-position: left center;
-}
-.nav ul li a.icon-green-match {
-  padding-left: 20px;
-  background-image: url(/assets/images/triangles-combined-green-match.svg);
-  background-repeat: no-repeat;
-  background-size: auto 10px;
-  background-position: left center;
-}
-.nav ul li a.icon-women-girls {
-  padding-left: 20px;
-  background-image: url(/assets/images/triangles-combined-women-girls.svg);
-  background-repeat: no-repeat;
-  background-size: auto 10px;
-  background-position: left center;
-}
-.nav ul li a.icon-mental-health {
-  padding-left: 20px;
-  background-image: url(/assets/images/triangles-combined-mental-health.svg);
-  background-repeat: no-repeat;
-  background-size: auto 10px;
-  background-position: left center;
-}
-.nav ul li a.icon-anchor-match {
-  padding-left: 20px;
-  background-image: url(/assets/images/triangles-combined-anchor.svg);
-  background-repeat: no-repeat;
-  background-size: auto 10px;
-  background-position: left center;
-}
-.nav ul li a.icon-emergency {
-  padding-left: 20px;
-  background-image: url(/assets/images/triangles-combined-emergency.svg);
-  background-repeat: no-repeat;
-  background-size: auto 10px;
-  background-position: left center;
-}
-
-.row-top {
-  padding: 10px 30px;
-  background-color: #2C089B;
-  display: flex;
-}
-.row-top .social-icon-wrap {
-  margin-right: 15px;
-}
-.row-top .nav-secondary {
-  margin-left: auto;
-}
-.row-top .nav-secondary ul li {
-  border-right: 1px solid #FFFFFF;
-}
-.row-top .nav-secondary ul li:last-child {
-  border-right: 0;
-}
-.row-top .nav-secondary ul li a {
-  color: #FFFFFF;
-}
-.row-top .nav-secondary ul li a:hover {
-  border-bottom-color: #FFFFFF;
-  color: #FFFFFF;
-}
-.row-top .social-icon-wrap {
-  display: flex;
-}
-.row-top .social-icon-wrap .social-icon-item {
-  margin-right: 15px;
-}
-
-.row-bottom {
-  padding: 15px 30px;
-  background-color: #FFFFFF;
-  display: flex;
-}
-.row-bottom .logo-wrap {
-  width: 200px;
-  margin-right: auto;
-  position: relative;
-  z-index: 101;
-}
-.row-bottom .logo-wrap a {
-  display: block;
-}
-.row-bottom .logo-wrap a svg {
-  height: 100%;
-  width: auto;
-}
-.row-bottom .nav-toggle {
-  display: none;
-}
-.row-bottom .nav-primary {
-  font-weight: 700;
-  margin: 5px 0;
-}
-.row-bottom .nav-primary li.icon-colour-primary a {
-  background-image: url("/assets/images/biggive-double-triangle-primary.svg");
-  background-position: left center;
-  background-size: 20px auto;
-  background-repeat: no-repeat;
-  padding-left: 25px;
-}
-.row-bottom .nav-primary li.icon-colour-secondary a {
-  background-image: url("/assets/images/biggive-double-triangle-secondary.svg");
-  background-position: left center;
-  background-size: 20px auto;
-  background-repeat: no-repeat;
-  padding-left: 25px;
-}
-.row-bottom .nav-primary li.icon-colour-tertiary a {
-  background-image: url("/assets/images/biggive-double-triangle-tertiary.svg");
-  background-position: left center;
-  background-size: 20px auto;
-  background-repeat: no-repeat;
-  padding-left: 25px;
-}
-.row-bottom .nav-primary li.icon-colour-brand-1 a {
-  background-image: url("/assets/images/biggive-double-triangle-brand-1.svg");
-  background-position: left center;
-  background-size: 20px auto;
-  background-repeat: no-repeat;
-  padding-left: 25px;
-}
-.row-bottom .nav-primary li.icon-colour-brand-2 a {
-  background-image: url("/assets/images/biggive-double-triangle-brand-2.svg");
-  background-position: left center;
-  background-size: 20px auto;
-  background-repeat: no-repeat;
-  padding-left: 25px;
-}
-.row-bottom .nav-primary li.icon-colour-brand-3 a {
-  background-image: url("/assets/images/biggive-double-triangle-brand-3.svg");
-  background-position: left center;
-  background-size: 20px auto;
-  background-repeat: no-repeat;
-  padding-left: 25px;
-}
-.row-bottom .nav-primary li.icon-colour-brand-4 a {
-  background-image: url("/assets/images/biggive-double-triangle-brand-4.svg");
-  background-position: left center;
-  background-size: 20px auto;
-  background-repeat: no-repeat;
-  padding-left: 25px;
-}
-.row-bottom .nav-primary li.icon-colour-brand-5 a {
-  background-image: url("/assets/images/biggive-double-triangle-brand-5.svg");
-  background-position: left center;
-  background-size: 20px auto;
-  background-repeat: no-repeat;
-  padding-left: 25px;
-}
-.row-bottom .nav-primary li.icon-colour-brand-6 a {
-  background-image: url("/assets/images/biggive-double-triangle-brand-6.svg");
-  background-position: left center;
-  background-size: 20px auto;
-  background-repeat: no-repeat;
-  padding-left: 25px;
-}
-
-@media screen and (min-width: 1051px) {
-  .nav ul li {
-    position: relative;
-  }
-  .nav ul li a[href=""]:hover {
-    cursor: default;
-  }
-  .nav ul li a:hover {
-    color: #2C089B;
-  }
-  .nav ul li ul {
-    display: none;
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    padding: 15px 45px 30px 45px;
-    background-color: #FFFFFF;
-    clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 0, 100% 100%, 100% 100%, 15px 100%, 0 calc(100% - 15px));
-  }
-  .nav ul li ul li {
-    display: block;
-    font-weight: normal;
-    padding: 0;
-    margin: 10px 0 10px 0;
-    white-space: nowrap;
-    text-align: left;
-    font-weight: normal;
-    font-size: 13px;
-    line-height: 17px;
-  }
-  .nav ul li:hover ul {
-    display: block;
-  }
-}
-@media screen and (max-width: 1050px) {
-  .row-top {
-    display: none;
-  }
-  .row-top[data-visible=true] {
-    display: block;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    flex-direction: column-reverse;
-    z-index: 100;
-    background-color: transparent;
-  }
-  .row-top[data-visible=true] .nav-secondary {
-    margin: 0;
-  }
-  .row-top[data-visible=true] .nav-secondary li {
-    border: 0;
-    margin: 0 0 10px 0;
-    padding: 0;
-    width: 100%;
-  }
-  .row-top[data-visible=true] .nav-secondary li a {
-    font-size: 17px;
-    line-height: 24px;
-    padding: 10px 30px;
-    border-radius: 5px;
-    border: 1px solid #000000;
-    background-color: #000000;
-    color: #FFFFFF;
-    display: inline-block;
-    text-decoration: none;
-    text-align: center;
-    transition: all ease-in-out 0.5s;
-    cursor: pointer;
-    color: #FFFFFF;
-    background-color: #2C089B;
-    border-color: #2C089B;
-    width: 100%;
-    box-sizing: border-box;
-  }
-  .row-top[data-visible=true] .nav-secondary li a:hover {
-    background-color: #FFFFFF;
-    color: #000000;
-  }
-  .row-top[data-visible=true] .nav-secondary li a:hover {
-    color: #2C089B;
-    background-color: #FFFFFF;
-  }
-  .row-top .social-icon-wrap {
-    margin: auto;
-  }
-
-  .row-bottom {
-    padding: 15px 15px;
-  }
-  .row-bottom .logo-wrap {
-    height: 30px;
-  }
-  .row-bottom .nav-toggle {
-    display: block;
-    margin-left: auto;
-    width: 45px;
-    height: 30px;
-    position: relative;
-    z-index: 101;
-    background-image: url(/assets/images/menu.svg);
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center center;
-    cursor: pointer;
-  }
-  .row-bottom .nav-toggle.active {
-    background-image: url(/assets/images/cross.svg?1);
-    display: block;
-    background-color: #2C089B;
-    background-size: 50% 50%;
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-  }
-  .row-bottom .nav-primary {
-    display: none;
-    position: fixed;
-    z-index: 99;
-    top: 0;
-    height: 100vh;
-    padding-top: 100px;
-    left: 0;
-    right: 0;
-    margin: 0;
-    background-color: #E8E8E8;
-  }
-  .row-bottom .nav-primary[data-visible=true] {
-    display: block;
-  }
-  .row-bottom .nav-primary ul li {
-    width: 100%;
-    box-sizing: border-box;
-    text-align: center;
-    padding-bottom: 15px;
-    margin-bottom: 10px;
-    border-bottom: 1px solid #D7D7D7;
-    padding-left: 30px;
-    padding-right: 30px;
-  }
-  .row-bottom .nav-primary ul li ul {
-    margin-top: 15px;
-    display: none;
-  }
-  .row-bottom .nav-primary ul li ul li {
-    font-weight: normal;
-    border-bottom: 0;
-    font-size: 13px;
-    line-height: 17px;
-  }
-  .row-bottom .nav-primary ul li:hover ul {
-    display: block;
-  }
-}

package/dist/collection/components/biggive-header/biggive-header.js

@@ -1,116 +0,0 @@
-import { h } from '@stencil/core';
-/**
- * @deprecated
- * @see BiggiveMainMenu
- */
-export class BiggiveHeader {
-  constructor() {
-    this.toggleNav = (event) => {
-      var nav = this.host.shadowRoot.querySelector('.nav-primary');
-      var navFooter = this.host.shadowRoot.querySelector('.row-top');
-      if (nav.getAttribute('data-visible') == 'true') {
-        event.target.classList.remove('active');
-        nav.setAttribute('data-visible', 'false');
-        navFooter.setAttribute('data-visible', 'false');
-      }
-      else {
-        event.target.classList.add('active');
-        nav.setAttribute('data-visible', 'true');
-        navFooter.setAttribute('data-visible', 'true');
-      }
-    };
-    this.spaceBelow = 0;
-    this.logoUrl = '/';
-  }
-  async closeMenuFromOutside() {
-    this.host.shadowRoot.querySelector('.nav-primary').setAttribute('data-visible', 'false');
-    this.host.shadowRoot.querySelector('.nav-toggle').classList.remove('active');
-    this.host.shadowRoot.querySelector('.row-top').setAttribute('data-visible', 'false');
-  }
-  appendMenu(menuName) {
-    var node = this.host.querySelector(`[slot="${menuName}"]`);
-    if (node !== null) {
-      this.host.shadowRoot.querySelector(`nav.${menuName}`).appendChild(node);
-    }
-  }
-  componentDidRender() {
-    this.appendMenu('nav-primary');
-    this.appendMenu('nav-secondary');
-  }
-  render() {
-    return (h("header", { class: 'header space-below' + this.spaceBelow }, h("div", { class: "row row-top" }, h("div", { class: "social-icon-wrap" }, h("slot", { name: "social-icons" })), h("nav", { class: "nav nav-secondary" })), h("div", { class: "row row-bottom" }, h("div", { class: "logo-wrap" }, h("a", { href: this.logoUrl, "aria-label": "Home" }, h("svg", { version: "1.1", x: "0px", y: "0px", viewBox: "0 0 140.9 30" }, h("path", { d: "M51.9,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3C53.6,0,55,1.4,55,3S53.6,6.1,51.9,6.1z M49.3,23.8h5V7.7h-5V23.8z M68.5,7.7v1 c-0.8-0.7-2.3-1.4-4.1-1.4c-4.5,0-8.2,3.2-8.2,7.9c0,4.7,3.7,7.9,8.2,7.9c1.8,0,3.4-0.5,4.1-1.4v0.9c0,2.1-1.9,3.1-4.4,3.1 c-2.2,0-4-0.5-5.8-1.4V29c2.1,0.7,4.4,1,6,1c5,0,9.2-2,9.2-7.3v-15L68.5,7.7L68.5,7.7z M68.5,17.2c-0.7,1-1.9,1.4-3.2,1.4 c-2.1,0-3.8-1.2-3.8-3.4c0-2.2,1.7-3.4,3.8-3.4c1.3,0,2.5,0.6,3.2,1.5V17.2z M88.1,24.2c4,0,6.4-0.7,8.5-2V10h-11v4.7h5.8v4.1 c-0.8,0.2-1.8,0.4-3.2,0.4c-4.9,0-7.3-3.2-7.3-6.8c0-3.7,2.8-6.8,8-6.8c2.2,0,4.3,0.6,5.8,1.4V1.7c-1.5-0.6-3.4-1.1-6.1-1.1 c-7.6,0-13,5.3-13,11.8C75.5,19.1,80.4,24.2,88.1,24.2z M101.4,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3c1.8,0,3.2,1.4,3.2,3 S103.1,6.1,101.4,6.1z M98.8,23.8h5V7.7h-5V23.8z M115.1,15l-4.3-7.2H105l10.1,16.4l10.1-16.4h-5.8L115.1,15z M129.3,16.9h11.6 c0.1-7-4.2-9.5-8.4-9.5c-4.5,0-8.5,2.6-8.6,8.4c0,5.6,4.1,8.4,9.1,8.4c2.2,0,4.4-0.3,6.4-1.3v-4.4c-2.5,1.4-4.1,1.4-5.6,1.4 C131.7,19.8,129.5,19.2,129.3,16.9z M132.5,11.1c1.5,0,2.8,0.7,3,2.7h-6.2C129.6,11.9,131,11.1,132.5,11.1z M43.5,11.4 c1.2-1,1.8-2.4,1.8-4c0-3.1-3-6.3-7.3-6.3h-8v22.8h10.4c4.1,0,7.2-3,7.2-6.8C47.5,14.8,46.5,12.3,43.5,11.4z M35.2,5.7h2.4 C39,5.7,40,6.8,40,8c0,1.2-1,2.2-2.5,2.2h-2.4V5.7z M39.9,19.2h-4.7v-4.6h4.7c1.4,0,2.5,1,2.5,2.3C42.4,18.1,41.3,19.2,39.9,19.2z" }), h("path", { d: "M13.5,1l13.5,23H0L13.5,1z" })))), h("div", { class: "nav-toggle", onClick: this.toggleNav }), h("nav", { class: "nav nav-primary", "data-visible": "false" }))));
-  }
-  static get is() { return "biggive-header"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["biggive-header.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["biggive-header.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "spaceBelow": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Space below component"
-        },
-        "attribute": "space-below",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "logoUrl": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Logo hyperlink URL"
-        },
-        "attribute": "logo-url",
-        "reflect": false,
-        "defaultValue": "'/'"
-      }
-    };
-  }
-  static get methods() {
-    return {
-      "closeMenuFromOutside": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-}

package/dist/collection/components/biggive-header/biggive-header.stories.js

@@ -1,44 +0,0 @@
-export default {
-  title: 'Components/Header and Footer',
-};
-const Template = args => `
-    <biggive-header
-      space-below="${args.spaceBelow}"
-      >
-      <div slot="social-icons">
-        <biggive-social-icon service="Facebook" url="https://www.facebook.com" background-colour="tertiary" icon-colour="black"></biggive-social-icon>
-        <biggive-social-icon service="Twitter" url="https://www.twitter.com" background-colour="tertiary" icon-colour="black"></biggive-social-icon>
-        <biggive-social-icon service="LinkedIn" url="https://www.linkedin.com" background-colour="tertiary" icon-colour="black"></biggive-social-icon>
-        <biggive-social-icon service="YouTube" url="https://www.youtube.com" background-colour="tertiary" icon-colour="black"></biggive-social-icon>
-        <biggive-social-icon service="Instagram" url="https://www.instagram.com" background-colour="tertiary" icon-colour="black"></biggive-social-icon>
-      </div>
-      <div class="nav-toggle"></div>
-      <ul slot="nav-primary">
-          <li><a href="#">Explore Campaigns</a></li>
-          <li><a href="#">For Charities</a></li>
-          <li><a href="#">For Funders</a></li>
-          <li>
-            <a href="">Match Funding</a>
-            <ul>
-              <li><a href="#">Sub menu 1</a></li>
-              <li><a href="# class="icon-green">Sub menu 2</a></li>
-              <li><a href="#">Sub menu 3</a></li>
-              <li><a href="#">Sub menu 4</a></li>
-              <li><a href="#">Sub menu 5</a></li>
-            </ul>
-          </li>
-          <li><a href="#">About Us</a></li>
-          <li><a href="#">Resources</a></li>
-      </ul>
-
-      <ul slot="nav-secondary">
-        <li><a href="#">Contact us</a></li>
-        <li><a href="#">Charity login</a></li>
-      </ul>
-    </biggive-header>
-    `;
-export const HeaderComponent = Template.bind({});
-HeaderComponent.args = {
-  spaceBelow: '0',
-  logoUrl: '/',
-};

package/dist/collection/components/biggive-search/biggive-search.css

@@ -1,107 +0,0 @@
-/**
- * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
- */
-a {
-  color: inherit;
-  text-decoration: underline;
-}
-a:hover {
-  text-decoration: none;
-}
-
-.padding-enclosure {
-  width: 100%;
-  padding: 20px 30px 20px 10px;
-  box-sizing: border-box;
-}
-.padding-enclosure .outer-container {
-  width: calc(100% - 50px);
-  position: absolute;
-  background-color: white;
-}
-.padding-enclosure .outer-container .triangle {
-  width: 0;
-  height: 0;
-  position: absolute;
-  border-right: 50px solid transparent;
-  border-left: 50px solid transparent;
-  border-bottom: 86.60254px solid #2AF135;
-}
-.padding-enclosure .outer-container .triangle-before {
-  top: -35px;
-  left: -40px;
-  z-index: -1;
-  rotate: -23deg;
-}
-.padding-enclosure .outer-container .triangle-after {
-  bottom: -15px;
-  right: -20px;
-  z-index: -1;
-  rotate: -15deg;
-}
-.padding-enclosure .outer-container .inner-container {
-  font-family: "Euclid Triangle", sans-serif;
-  font-size: 17px;
-  line-height: 24px;
-  padding: 1.5rem;
-  box-sizing: border-box;
-}
-.padding-enclosure .outer-container .inner-container h2 {
-  width: 100%;
-  font-weight: 500;
-  margin-top: 0px;
-  margin-bottom: 0px;
-  font-size: 1.2rem;
-}
-.padding-enclosure .outer-container .inner-container .search-box {
-  display: flex;
-  padding: 10px 10px 5px 10px;
-  margin-top: 1rem;
-  margin-bottom: 1.25rem;
-  border-bottom: 1px solid black;
-}
-.padding-enclosure .outer-container .inner-container .search-box .icon {
-  height: 1rem;
-  width: 2rem;
-  vertical-align: -0.125rem;
-  margin: auto;
-}
-.padding-enclosure .outer-container .inner-container .search-box .icon > path {
-  fill: #2C089B;
-}
-.padding-enclosure .outer-container .inner-container .search-box #x-icon:hover {
-  cursor: pointer;
-}
-.padding-enclosure .outer-container .inner-container .search-box input {
-  font-family: "Euclid Triangle", sans-serif;
-  font-size: 17px;
-  line-height: 24px;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  border-radius: 3px;
-  font-size: 1.1rem;
-}
-.padding-enclosure .outer-container .inner-container .search-box input::placeholder {
-  color: #969696;
-}
-.padding-enclosure .outer-container .inner-container .search-box input:focus {
-  outline: none;
-}
-.padding-enclosure .outer-container .inner-container button {
-  font-family: "Euclid Triangle", sans-serif;
-  font-size: 17px;
-  line-height: 24px;
-  width: 100%;
-  padding: 0.75rem;
-  box-sizing: border-box;
-  background-color: #2C089B;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  font-size: 1rem;
-}
-.padding-enclosure .outer-container .inner-container button:hover {
-  cursor: pointer;
-  background-color: navy;
-}