@biggive/components 1.0.95 → 1.0.97

package/dist/collection/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.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;
@@ -495,6 +519,9 @@ a:hover {
   padding: 15px 30px;
   margin-bottom: 60px;
 }
+.container .search-wrap h4 {
+  margin-bottom: 15px;
+}
 .container .search-wrap .field-wrap {
   display: flex;
   justify-content: space-between;
@@ -512,6 +539,40 @@ a:hover {
   padding: 5px 30px;
 }
 
+.sort-filter-wrap {
+  display: flex;
+  align-items: flex-end;
+  margin-bottom: 30px;
+  text-align: right;
+}
+.sort-filter-wrap .sort-wrap {
+  margin-left: auto;
+}
+.sort-filter-wrap .filter-wrap {
+  margin-left: 15px;
+}
+.sort-filter-wrap .filter-wrap .button {
+  padding-left: 60px;
+  padding-right: 30px;
+}
+.sort-filter-wrap .filter-wrap .button .filter-icon {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 25px;
+  top: 17px;
+  width: 13px;
+  height: 13px;
+}
+.sort-filter-wrap .filter-wrap .button .filter-icon svg {
+  width: 100%;
+  height: auto;
+  vertical-align: top;
+}
+.sort-filter-wrap .filter-wrap .button .filter-icon svg:hover {
+  fill: #2C089B;
+}
+
 .icon {
   height: 1rem;
   width: 2rem;

package/dist/collection/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.js

@@ -1,151 +1,150 @@
-import { Component, h, Prop, State, Event } from '@stencil/core';
+import { h } from '@stencil/core';
 import { faMagnifyingGlass } from '@fortawesome/pro-solid-svg-icons';
 export class BiggiveCampaignCardFilterGrid {
   constructor() {
     this.searchText = null;
-    /**
-     * Space below component
-     */
     this.spaceBelow = 0;
-    /**
-     * Intro
-     */
     this.intro = 'Find a charity or project';
-    /**
-     * Defines the text displayed as the placeholder in the input field
-     * before the user types anything
-     */
     this.placeholderText = 'Search';
-    /**
-     * Defines the text on the search button
-     */
     this.buttonText = 'Search';
   }
   handleSearchTextChanged(event) {
     this.searchText = event.target.value;
   }
   handleSearchButtonPressed() {
-    this.doSearch.emit(this.searchText);
+    //this.doSearch.emit(this.searchText);
   }
   handleEnterPressed(ev) {
     if (ev.key === 'Enter') {
-      this.doSearch.emit(this.searchText);
+      //this.doSearch.emit(this.searchText);
+    }
+  }
+  handleFilterButtonClick() {
+    this.el.shadowRoot.getElementById('filter-popup').open();
+    var filters = { categories: [], beneficiaries: [] };
+    var cards = this.el.querySelectorAll('biggive-campaign-card');
+    for (var i = 0; i < cards.length; i++) {
+      var categories = JSON.parse(cards[i].getAttribute('data-filter-categories'));
+      for (var p in categories) {
+        if (!filters.categories.includes(categories[p])) {
+          filters.categories.push(categories[p]);
+        }
+      }
+      var beneficiaries = JSON.parse(cards[i].getAttribute('data-filter-beneficiaries'));
+      for (var p in beneficiaries) {
+        if (!filters.beneficiaries.includes(beneficiaries[p])) {
+          filters.beneficiaries.push(beneficiaries[p]);
+        }
+      }
+    }
+    categories.sort();
+    this.el.shadowRoot.getElementById('categories').innerHTML = '';
+    for (var i = 0; i < filters.categories.length; i++) {
+      this.el.shadowRoot.getElementById('categories').innerHTML +=
+        '<biggive-form-field-select-option value="' + filters.categories[i] + '" label="' + filters.categories[i] + '"></biggive-form-field-select-option>';
+    }
+    beneficiaries.sort();
+    this.el.shadowRoot.getElementById('beneficiaries').innerHTML = '';
+    for (var i = 0; i < filters.beneficiaries.length; i++) {
+      this.el.shadowRoot.getElementById('beneficiaries').innerHTML +=
+        '<biggive-form-field-select-option value="' + filters.beneficiaries[i] + '" label="' + filters.beneficiaries[i] + '"></biggive-form-field-select-option>';
     }
   }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow },
-      h("div", { class: "sleeve" },
-        h("div", { class: "search-wrap" },
-          h("h4", null, this.intro),
-          h("div", { class: "field-wrap" },
-            h("div", { class: "input-wrap" },
-              h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" },
-                h("path", { d: faMagnifyingGlass.icon[4].toString() })),
-              h("input", { type: "text", value: this.searchText, class: "input-text", placeholder: this.placeholderText, onInput: event => this.handleSearchTextChanged(event), onKeyDown: event => this.handleEnterPressed(event) })),
-            h("button", { onClick: () => this.handleSearchButtonPressed(), class: "button button-primary" }, this.buttonText))),
-        h("div", { class: "filter-wrap" }),
-        h("div", { class: "campaign-grid" },
-          h("slot", { name: "campaign-grid" })))));
+    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "search-wrap" }, h("h4", null, this.intro), h("div", { class: "field-wrap" }, h("div", { class: "input-wrap" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { d: faMagnifyingGlass.icon[4].toString() })), h("input", { type: "text", value: this.searchText, class: "input-text", placeholder: this.placeholderText, onInput: event => this.handleSearchTextChanged(event), onKeyDown: event => this.handleEnterPressed(event) })), h("button", { onClick: () => this.handleSearchButtonPressed(), class: "button button-primary" }, this.buttonText))), h("div", { class: "sort-filter-wrap" }, h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { placeholder: "Sort by" }, h("biggive-form-field-select-option", { value: "name", label: "Name" }))), h("div", { class: "filter-wrap" }, h("div", { class: "button button-primary filter", onClick: () => this.handleFilterButtonClick() }, h("span", { class: "filter-icon" }, h("svg", { width: "16", height: "15", viewBox: "0 0 16 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.12042 0.76576C0.327224 0.298 0.766961 0 1.25014 0H14.7517C15.2361 0 15.6736 0.298 15.8799 0.76576C16.0893 1.23352 16.0237 1.787 15.6924 2.18745L10.0011 9.67328V13.929C10.0011 14.3341 9.7886 14.7058 9.44793 14.8866C9.1104 15.0674 8.7041 15.0306 8.40094 14.7862L6.40072 13.179C6.14756 12.9781 6.00067 12.66 6.00067 12.3218V9.67328L0.282594 2.18745C-0.023284 1.787 -0.0864161 1.23352 0.120451 0.76576H0.12042Z", fill: "white" }))), "Filters"), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 colour-primary" }, "Filters"), h("biggive-form-field-select", { placeholder: "Category", id: "categories", "space-below": "2" }), h("biggive-form-field-select", { placeholder: "Beneficiary", id: "beneficiaries", "space-below": "2" })))), h("div", { class: "campaign-grid" }, h("slot", { name: "campaign-grid" })))));
   }
   static get is() { return "biggive-campaign-card-filter-grid"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["biggive-campaign-card-filter-grid.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["biggive-campaign-card-filter-grid.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"
-    },
-    "intro": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Intro"
-      },
-      "attribute": "intro",
-      "reflect": false,
-      "defaultValue": "'Find a charity or project'"
-    },
-    "placeholderText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the text displayed as the placeholder in the input field\nbefore the user types anything"
-      },
-      "attribute": "placeholder-text",
-      "reflect": false,
-      "defaultValue": "'Search'"
-    },
-    "buttonText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-campaign-card-filter-grid.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-campaign-card-filter-grid.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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the text on the search button"
+      "intro": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Intro"
+        },
+        "attribute": "intro",
+        "reflect": false,
+        "defaultValue": "'Find a charity or project'"
       },
-      "attribute": "button-text",
-      "reflect": false,
-      "defaultValue": "'Search'"
-    }
-  }; }
-  static get states() { return {
-    "searchText": {}
-  }; }
-  static get events() { return [{
-      "method": "doSearch",
-      "name": "doTextSearch",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "This event `doTextSearch` event is emitted and propogates to the parent\ncomponent which handles it"
+      "placeholderText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the text displayed as the placeholder in the input field\nbefore the user types anything"
+        },
+        "attribute": "placeholder-text",
+        "reflect": false,
+        "defaultValue": "'Search'"
       },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "buttonText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the text on the search button"
+        },
+        "attribute": "button-text",
+        "reflect": false,
+        "defaultValue": "'Search'"
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "searchText": {}
+    };
+  }
+  static get elementRef() { return "el"; }
 }

package/dist/collection/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.stories.js

@@ -7,6 +7,8 @@ const Template = () => `
       <biggive-campaign-card-filter-grid>
       <biggive-grid slot="campaign-grid" column-count="3">
         <biggive-campaign-card 
+          data-filter-categories="[&quot;Finance&quot;]"
+          data-filter-beneficiaries="[&quot;Children&quot;,&quot;Adults&quot;]"
           campaign-type="Match Funded"
           campaign-title="Oxford Piano Festival Fundraising Campaign for LGBTQ+ community" 
           organisation-name="Oxford Philharmonic Orchestra"
@@ -18,6 +20,8 @@ const Template = () => `
           progress-bar-counter="75">
         </biggive-campaign-card>
         <biggive-campaign-card 
+          data-filter-categories="[&quot;Healthcare&quot;]"
+          data-filter-beneficiaries="[&quot;Children&quot;]"
           campaign-type="Match Funded" 
           campaign-title="Oxford Piano Festival Fundraising Campaign for LGBTQ+ community" 
           organisation-name="Oxford Philharmonic Orchestra"
@@ -28,6 +32,8 @@ const Template = () => `
           secondary-figure-amount="76543">
         </biggive-campaign-card>
         <biggive-campaign-card 
+          data-filter-categories="[&quot;Healthcare&quot;]"
+          data-filter-beneficiaries="[&quot;Children&quot;]"
           campaign-type="Match Funded" 
           campaign-title="Oxford Piano Festival Fundraising Campaign for LGBTQ+ community" 
           organisation-name="Oxford Philharmonic Orchestra"

package/dist/collection/components/biggive-campaign-highlights/biggive-campaign-highlights.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;