@biggive/components 1.0.96 → 1.0.98

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

@@ -218,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;
@@ -499,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;
@@ -516,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.filter {
+  padding-left: 60px;
+  padding-right: 30px;
+}
+.sort-filter-wrap .filter-wrap .button.filter .filter-icon {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 25px;
+  top: 17px;
+  width: 13px;
+  height: 13px;
+}
+.sort-filter-wrap .filter-wrap .button.filter .filter-icon svg {
+  width: 100%;
+  height: auto;
+  vertical-align: top;
+}
+.sort-filter-wrap .filter-wrap .button.filter .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,387 @@
-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.sortBy = null;
+    this.filterCategory = null;
+    this.filterBeneficary = null;
+    this.filterLocation = null;
+    this.filterFunding = null;
     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';
+    this.categoryOptions = null;
+    this.beneficaryOptions = null;
+    this.locationOptions = null;
+    this.fundingOptions = null;
+  }
+  getSearchAndFilterObject() {
+    var obj = {
+      searchText: this.searchText,
+      sortBy: this.sortBy,
+      filterCategory: this.filterCategory,
+      filterBeneficary: this.filterBeneficary,
+      filterLocation: this.filterLocation,
+      filterFunding: this.filterFunding,
+    };
+    return obj;
+  }
+  doOptionSelectCompletedHandler() {
+    this.sortBy = this.el.shadowRoot.getElementById('sort-by').selectedValue;
+    this.filterCategory = this.el.shadowRoot.getElementById('categories').selectedValue;
+    this.filterBeneficary = this.el.shadowRoot.getElementById('beneficiaries').selectedValue;
+    this.filterLocation = this.el.shadowRoot.getElementById('locations').selectedValue;
+    this.filterFunding = this.el.shadowRoot.getElementById('funding').selectedValue;
+  }
+  handleApplyFilterButtonClick() {
+    this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
   }
   handleSearchTextChanged(event) {
     this.searchText = event.target.value;
+    this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
   }
   handleSearchButtonPressed() {
-    this.doSearch.emit(this.searchText);
+    this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
   }
   handleEnterPressed(ev) {
     if (ev.key === 'Enter') {
-      this.doSearch.emit(this.searchText);
+      this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
+    }
+  }
+  handleFilterButtonClick() {
+    this.el.shadowRoot.getElementById('filter-popup').open();
+    if (this.categoryOptions != null) {
+      var options = JSON.parse(this.categoryOptions);
+      this.el.shadowRoot.getElementById('categories').innerHTML = '';
+      for (var prop in options) {
+        this.el.shadowRoot.getElementById('categories').innerHTML +=
+          '<biggive-form-field-select-option value="' + options[prop] + '" label="' + options[prop] + '"></biggive-form-field-select-option>';
+      }
+    }
+    if (this.beneficaryOptions != null) {
+      var options = JSON.parse(this.beneficaryOptions);
+      this.el.shadowRoot.getElementById('beneficaries').innerHTML = '';
+      for (var prop in options) {
+        this.el.shadowRoot.getElementById('beneficaries').innerHTML +=
+          '<biggive-form-field-select-option value="' + options[prop] + '" label="' + options[prop] + '"></biggive-form-field-select-option>';
+      }
+    }
+    if (this.locationOptions != null) {
+      var options = JSON.parse(this.locationOptions);
+      this.el.shadowRoot.getElementById('locations').innerHTML = '';
+      for (var prop in options) {
+        this.el.shadowRoot.getElementById('locations').innerHTML +=
+          '<biggive-form-field-select-option value="' + options[prop] + '" label="' + options[prop] + '"></biggive-form-field-select-option>';
+      }
+    }
+    if (this.fundingOptions != null) {
+      var options = JSON.parse(this.fundingOptions);
+      this.el.shadowRoot.getElementById('funding').innerHTML = '';
+      for (var prop in options) {
+        this.el.shadowRoot.getElementById('funding').innerHTML +=
+          '<biggive-form-field-select-option value="' + options[prop] + '" label="' + options[prop] + '"></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", id: "sort-by" }, h("biggive-form-field-select-option", { value: "most-raised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matched-funds-remaining", label: "Match funds remaining" }))), 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("biggive-form-field-select", { placeholder: "Location", id: "locations", "space-below": "2" }), h("biggive-form-field-select", { placeholder: "Funding", id: "funding", "space-below": "2" }), h("div", { class: "align-right" }, h("a", { href: "#", class: "button button-primary", onClick: () => this.handleApplyFilterButtonClick() }, "Apply filters"))))), 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": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-campaign-card-filter-grid.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-campaign-card-filter-grid.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "searchText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "search-text",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Space below component"
+      "sortBy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "sort-by",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "attribute": "space-below",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "intro": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "filterCategory": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "filter-category",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Intro"
+      "filterBeneficary": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "filter-beneficary",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "attribute": "intro",
-      "reflect": false,
-      "defaultValue": "'Find a charity or project'"
-    },
-    "placeholderText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "filterLocation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "filter-location",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the text displayed as the placeholder in the input field\nbefore the user types anything"
+      "filterFunding": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "filter-funding",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "attribute": "placeholder-text",
-      "reflect": false,
-      "defaultValue": "'Search'"
-    },
-    "buttonText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "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'"
+      },
+      "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'"
+      },
+      "categoryOptions": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "JSON array of category key/values"
+        },
+        "attribute": "category-options",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "beneficaryOptions": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "JSON array of beneficary key/values"
+        },
+        "attribute": "beneficary-options",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "locationOptions": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "JSON array of location key/values"
+        },
+        "attribute": "location-options",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "fundingOptions": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "JSON array of funding key/values"
+        },
+        "attribute": "funding-options",
+        "reflect": false,
+        "defaultValue": "null"
       }
-    }]; }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "doSearchAndFilterUpdate",
+        "name": "doSearchAndFilterUpdate",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "This event `doChange` event is emitted and propogates to the parent\ncomponent which handles it"
+        },
+        "complexType": {
+          "original": "object",
+          "resolved": "object",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "doSelectChange",
+        "method": "doOptionSelectCompletedHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -3,10 +3,10 @@ export default {
   title: 'Components/Campaign Features',
   //subcomponents: {BiggiveCampaignCard}
 };
-const Template = () => `
-      <biggive-campaign-card-filter-grid>
+const Template = args => `
+      <biggive-campaign-card-filter-grid category-options="${args.categoryOptions}" beneficiary-options="${args.beneficaryOptions}" location-options="${args.locationOptions}" funding-options="${args.fundingOptions}">
       <biggive-grid slot="campaign-grid" column-count="3">
-        <biggive-campaign-card 
+        <biggive-campaign-card
           campaign-type="Match Funded"
           campaign-title="Oxford Piano Festival Fundraising Campaign for LGBTQ+ community" 
           organisation-name="Oxford Philharmonic Orchestra"
@@ -18,6 +18,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 +30,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"
@@ -40,4 +44,11 @@ const Template = () => `
       </biggive-grid>
       </biggive-campaign-card-filter-grid>
       `;
+document.addEventListener('doSearchAndFilterUpdate', () => alert('doSearchAndFilterUpdate event emitted!'));
 export const CampaignCardFilterGridComponent = Template.bind({});
+CampaignCardFilterGridComponent.args = {
+  categoryOptions: '[&quot;Children&quot;,&quot;Adults&quot;]',
+  beneficiaryOptions: '[&quot;Children&quot;,&quot;Adults&quot;]',
+  locationOptions: '[&quot;Children&quot;,&quot;Adults&quot;]',
+  fundingOptions: '[&quot;ABC&quot;,&quot;Adults&quot;]',
+};

package/dist/collection/components/biggive-campaign-highlights/biggive-campaign-highlights.css

@@ -218,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;
@@ -515,6 +535,8 @@ a:hover {
   margin-top: 2px;
   padding-bottom: 33.3%;
   background-color: #F1F1F1;
+  background-size: cover;
+  background-repeat: no-repeat;
   margin-bottom: 30px;
 }
 .container .banner img {