@biggive/components 1.0.95 → 1.0.97

package/dist/collection/components/biggive-category-icon/biggive-category-icon.js

@@ -1,26 +1,11 @@
-import { Component, Prop, h } from '@stencil/core';
+import { h } from '@stencil/core';
 import { FontAwesomeIconsService } from '../../util/fontawesome-icons';
 export class BiggiveCategoryIcon {
   constructor() {
-    /**
-     * Background colour
-     */
     this.backgroundColour = 'primary';
-    /**
-     * Background colour
-     */
     this.iconColour = 'white';
-    /**
-     * Icon
-     */
     this.icon = null;
-    /**
-     * Label
-     */
     this.label = null;
-    /**
-     * Url
-     */
     this.url = '#';
   }
   getCategoryIcon() {
@@ -28,110 +13,111 @@ export class BiggiveCategoryIcon {
     return icon;
   }
   render() {
-    return (h("div", { class: "container" },
-      h("div", { class: 'category-icon-item background-colour-' + this.backgroundColour },
-        h("a", { href: this.url },
-          h("svg", { width: this.getCategoryIcon().icon[0], height: this.getCategoryIcon().icon[1], xmlns: "http://www.w3.org/2000/svg", class: 'fill-' + this.iconColour, viewBox: '0 0 ' + this.getCategoryIcon().icon[0] + ' ' + this.getCategoryIcon().icon[1] },
-            h("path", { d: this.getCategoryIcon().icon[4].toString() })))),
-      h("div", { class: "label" }, this.label)));
+    return (h("div", { class: "container" }, h("div", { class: 'category-icon-item background-colour-' + this.backgroundColour }, h("a", { href: this.url }, h("svg", { width: this.getCategoryIcon().icon[0], height: this.getCategoryIcon().icon[1], xmlns: "http://www.w3.org/2000/svg", class: 'fill-' + this.iconColour, viewBox: '0 0 ' + this.getCategoryIcon().icon[0] + ' ' + this.getCategoryIcon().icon[1] }, h("path", { d: this.getCategoryIcon().icon[4].toString() })))), h("div", { class: "label" }, this.label)));
   }
   static get is() { return "biggive-category-icon"; }
-  static get originalStyleUrls() { return {
-    "$": ["biggive-category-icon.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["biggive-category-icon.css"]
-  }; }
-  static get properties() { return {
-    "backgroundColour": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Background colour"
-      },
-      "attribute": "background-colour",
-      "reflect": false,
-      "defaultValue": "'primary'"
-    },
-    "iconColour": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Background colour"
-      },
-      "attribute": "icon-colour",
-      "reflect": false,
-      "defaultValue": "'white'"
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Icon"
-      },
-      "attribute": "icon",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-category-icon.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-category-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "backgroundColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Background colour"
+        },
+        "attribute": "background-colour",
+        "reflect": false,
+        "defaultValue": "'primary'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label"
+      "iconColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Background colour"
+        },
+        "attribute": "icon-colour",
+        "reflect": false,
+        "defaultValue": "'white'"
       },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "url": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon"
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Url"
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "attribute": "url",
-      "reflect": false,
-      "defaultValue": "'#'"
-    }
-  }; }
+      "url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Url"
+        },
+        "attribute": "url",
+        "reflect": false,
+        "defaultValue": "'#'"
+      }
+    };
+  }
 }

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

@@ -109,6 +109,10 @@ a:hover {
   fill: #000000;
 }
 
+.fill-red {
+  fill: red;
+}
+
 .background-colour-hover-primary:hover,
 .background-colour-primary {
   background-color: #2C089B;
@@ -214,6 +218,26 @@ a:hover {
   background-color: #FFFFFF;
 }
 
+.button-white {
+  color: #2C089B;
+  background-color: #FFFFFF;
+  border-color: #FFFFFF;
+}
+.button-white:hover {
+  color: #FFFFFF;
+  background-color: #2C089B;
+}
+
+.button-black {
+  color: #FFFFFF;
+  background-color: #000000;
+  border-color: #000000;
+}
+.button-black:hover {
+  color: #000000;
+  background-color: #FFFFFF;
+}
+
 .button-clear-primary {
   color: #2C089B;
   background-color: transparent;
@@ -496,9 +520,14 @@ nav ul li a {
 }
 
 .row-top {
+  background-image: url(assets/images/biggive-triangle-green.svg);
+  background-repeat: no-repeat;
+  background-size: auto 75px;
+  background-position: 60px 30px;
   background-color: #2C089B;
-  padding: 60px;
+  padding: 100px 60px 60px 60px;
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
 }
 .row-top nav {
@@ -523,10 +552,18 @@ nav ul li a {
   padding: 0;
   list-style-type: none;
 }
+.row-top .button-wrap {
+  margin-top: 15px;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
 
 .row-bottom {
   background-color: #000000;
   padding: 60px 60px 15px 60px;
+  border-top: 1px solid #FFFFFF;
   text-align: center;
 }
 .row-bottom .social-icon-wrap {
@@ -540,4 +577,24 @@ nav ul li a {
 }
 .row-bottom .social-icon-wrap .social-icon-item {
   margin: 0 10px;
+}
+@media screen and (max-width: 768px) {
+  .row-top {
+    padding: 15px;
+  }
+}
+@media screen and (max-width: 576px) {
+  .row-top {
+    background-size: auto 50px;
+    padding-top: 80px;
+    padding-left: 15px;
+  }
+  .row-top nav {
+    width: 100%;
+    margin-right: 0;
+    margin-bottom: 30px;
+  }
+  .row-top .button-wrap * {
+    width: 100% !important;
+  }
 }

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

@@ -1,4 +1,4 @@
-import { Component, Element, h } from '@stencil/core';
+import { h } from '@stencil/core';
 export class BiggiveFooter {
   render() {
     var node = null;
@@ -9,60 +9,36 @@ export class BiggiveFooter {
     if (node != null) {
       navPrimary = [];
       node.querySelectorAll('li').forEach(el => {
-        navPrimary.push(h("li", null,
-          h("a", { href: el.firstElementChild.getAttribute('href') }, el.innerText)));
+        navPrimary.push(h("li", null, h("a", { href: el.firstElementChild.getAttribute('href') }, el.innerText)));
       });
     }
     node = this.host.querySelector('[slot="nav-secondary"]');
     if (node != null) {
       navSecondary = [];
       node.querySelectorAll('li').forEach(el => {
-        navSecondary.push(h("li", null,
-          h("a", { href: el.firstElementChild.getAttribute('href') }, el.innerText)));
+        navSecondary.push(h("li", null, h("a", { href: el.firstElementChild.getAttribute('href') }, el.innerText)));
       });
     }
     node = this.host.querySelector('[slot="nav-tertiary"]');
     if (node != null) {
       navTertiary = [];
       node.querySelectorAll('li').forEach(el => {
-        navTertiary.push(h("li", null,
-          h("a", { href: el.firstElementChild.getAttribute('href') }, el.innerText)));
+        navTertiary.push(h("li", null, h("a", { href: el.firstElementChild.getAttribute('href') }, el.innerText)));
       });
     }
-    return (h("footer", { class: "footer" },
-      h("div", { class: "row row-top" },
-        h("nav", { class: "nav nav-primary" },
-          h("h5", null,
-            h("slot", { name: "nav-primary-title" })),
-          h("ul", null, navPrimary)),
-        h("nav", { class: "nav nav-secondary" },
-          h("h5", null,
-            h("slot", { name: "nav-secondary-title" })),
-          h("ul", null, navSecondary)),
-        h("nav", { class: "nav nav-tertiary" },
-          h("h5", null,
-            h("slot", { name: "nav-tertiary-title" })),
-          h("ul", null, navTertiary)),
-        h("div", { class: "button-wrap" },
-          h("biggive-button", { "colour-scheme": "white", url: "#", label: "Donor login" }),
-          h("biggive-button", { "colour-scheme": "white", url: "#", label: "For charities" }),
-          h("biggive-button", { "colour-scheme": "white", url: "#", label: "For funders" }))),
-      h("div", { class: "row row-bottom" },
-        h("div", { class: "social-icon-wrap" },
-          h("biggive-social-icon", { service: "Facebook", url: "https://www.facebook.com" }),
-          h("biggive-social-icon", { service: "Twitter", url: "https://www.twitter.com" }),
-          h("biggive-social-icon", { service: "LinkedIn", url: "https://www.linkedin.com" }),
-          h("biggive-social-icon", { service: "YouTube", url: "https://www.youtube.com" }),
-          h("biggive-social-icon", { service: "Instagram", url: "https://www.instagram.com" })),
-        h("p", null, "\u00A9 2007 \u2013 2022 The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom"))));
+    return (h("footer", { class: "footer" }, h("div", { class: "row row-top" }, h("nav", { class: "nav nav-primary" }, h("h5", null, h("slot", { name: "nav-primary-title" })), h("ul", null, navPrimary)), h("nav", { class: "nav nav-secondary" }, h("h5", null, h("slot", { name: "nav-secondary-title" })), h("ul", null, navSecondary)), h("nav", { class: "nav nav-tertiary" }, h("h5", null, h("slot", { name: "nav-tertiary-title" })), h("ul", null, navTertiary)), h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": "white", url: "#", label: "Donor login" }), h("biggive-button", { "colour-scheme": "white", url: "#", label: "For charities" }), h("biggive-button", { "colour-scheme": "white", url: "#", label: "For funders" }))), h("div", { class: "row row-bottom" }, h("div", { class: "social-icon-wrap" }, h("slot", { name: "social-icons" })), h("p", null, "\u00A9 2007 \u2013 2022 The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom"))));
   }
   static get is() { return "biggive-footer"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["biggive-footer.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["biggive-footer.css"]
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-footer.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-footer.css"]
+    };
+  }
   static get elementRef() { return "host"; }
 }

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

@@ -6,7 +6,7 @@ const Template = () => `
         <div slot="nav-primary-title">Match Funding Opportunities</div>
         <ul slot="nav-primary">
           <li><a href="#">Explore Campaigns</a></li>
-          <li><a href="#">For Charities</a></li>
+          <li data-icon=""><a href="#">For Charities</a></li>
           <li><a href="#">For Funders</a></li>
           <li><a href="#">Match Funding</a></li>
           <li><a href="#">About Us</a></li>
@@ -22,6 +22,13 @@ const Template = () => `
           <li><a href="#">Contact us</a></li>
           <li><a href="#">Charity login</a></li>
         </ul>
+        <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>
       </biggive-footer>
       `;
 export const FooterComponent = Template.bind({});

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

@@ -1,15 +1,18 @@
-import { Component, Host, h } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 export class BiggiveForm {
   render() {
-    return (h(Host, null,
-      h("slot", null)));
+    return (h(Host, null, h("slot", null)));
   }
   static get is() { return "biggive-form"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["biggive-form.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["biggive-form.css"]
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-form.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-form.css"]
+    };
+  }
 }