@biggive/components 1.0.97 → 1.0.99

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

@@ -3,55 +3,90 @@ import { faMagnifyingGlass } from '@fortawesome/pro-solid-svg-icons';
 export class BiggiveCampaignCardFilterGrid {
   constructor() {
     this.searchText = null;
+    this.sortBy = null;
+    this.filterCategory = null;
+    this.filterBeneficary = null;
+    this.filterLocation = null;
+    this.filterFunding = null;
     this.spaceBelow = 0;
     this.intro = 'Find a charity or project';
     this.placeholderText = 'Search';
     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();
-    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]);
-        }
+    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>';
       }
-      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]);
-        }
+    }
+    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>';
       }
     }
-    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>';
+    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>';
+      }
     }
-    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>';
+    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: "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" })))));
+    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"; }
@@ -67,6 +102,114 @@ export class BiggiveCampaignCardFilterGrid {
   }
   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"
+      },
+      "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"
+      },
+      "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"
+      },
+      "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"
+      },
+      "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"
+      },
+      "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"
+      },
       "spaceBelow": {
         "type": "number",
         "mutable": false,
@@ -138,13 +281,107 @@ export class BiggiveCampaignCardFilterGrid {
         "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"
+      },
+      "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 states() {
-    return {
-      "searchText": {}
-    };
+  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,12 +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 
-          data-filter-categories="[&quot;Finance&quot;]"
-          data-filter-beneficiaries="[&quot;Children&quot;,&quot;Adults&quot;]"
+        <biggive-campaign-card
           campaign-type="Match Funded"
           campaign-title="Oxford Piano Festival Fundraising Campaign for LGBTQ+ community" 
           organisation-name="Oxford Philharmonic Orchestra"
@@ -46,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

@@ -535,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 {

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

@@ -9,6 +9,7 @@ export class BiggiveFormFieldSelect {
   doOptionSelectCompletedHandler(event) {
     this.selectedValue = event.detail.value;
     this.selectedLabel = event.detail.label;
+    this.doSelectChange.emit({ value: this.selectedValue, label: this.selectedLabel });
   }
   render() {
     return (h("div", { class: 'dropdown space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("span", { class: "placeholder" }, this.selectedLabel == null ? this.placeholder : this.selectedLabel)), h("div", { class: "options" }, h("slot", null))));
@@ -27,6 +28,42 @@ export class BiggiveFormFieldSelect {
   }
   static get properties() {
     return {
+      "selectedValue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected-value",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "selectedLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected-label",
+        "reflect": false,
+        "defaultValue": "null"
+      },
       "spaceBelow": {
         "type": "number",
         "mutable": false,
@@ -65,16 +102,10 @@ export class BiggiveFormFieldSelect {
       }
     };
   }
-  static get states() {
-    return {
-      "selectedValue": {},
-      "selectedLabel": {}
-    };
-  }
   static get events() {
     return [{
-        "method": "doChange",
-        "name": "doChange",
+        "method": "doSelectChange",
+        "name": "doSelectChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -83,8 +114,8 @@ export class BiggiveFormFieldSelect {
           "text": "This event `doChange` event is emitted and propogates to the parent\ncomponent which handles it"
         },
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "object",
+          "resolved": "object",
           "references": {}
         }
       }];

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

@@ -33,7 +33,7 @@ export class BiggiveHeader {
         navSecondary.push(h("li", null, h("a", { href: el.firstElementChild.getAttribute('href') }, el.innerText)));
       });
     }
-    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("ul", null, navSecondary))), h("div", { class: "row row-bottom" }, h("div", { class: "logo-wrap" }, h("a", { href: this.logoUrl }, h("svg", { width: "149", height: "30", viewBox: "0 0 149 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M59.9362 6.08031C58.258 6.08031 56.8195 4.70363 56.8195 3.04015C56.8195 1.37667 58.258 0 59.9362 0C61.7342 0 63.1127 1.37667 63.1127 3.04015C63.1127 4.70363 61.7342 6.08031 59.9362 6.08031ZM57.4189 23.805H62.4534V7.74379H57.4189V23.805ZM76.5981 7.74379V8.71893C75.8189 7.97323 74.2606 7.34226 72.4626 7.34226C67.9674 7.34226 64.3114 10.5545 64.3114 15.2008C64.3114 19.9044 67.9674 23.0593 72.4626 23.0593C74.2606 23.0593 75.8189 22.543 76.5981 21.6826V22.6004C76.5981 24.6654 74.6801 25.6979 72.1629 25.6979C70.0052 25.6979 68.1472 25.239 66.4091 24.2639V29.0249C68.5068 29.7706 70.8443 30 72.4026 30C77.4371 30 81.6326 27.9924 81.6326 22.7151V7.68643H76.5981V7.74379ZM76.5981 17.2084C75.8788 18.1836 74.6801 18.6424 73.3616 18.6424C71.2639 18.6424 69.5257 17.4379 69.5257 15.2008C69.5257 13.021 71.2639 11.7591 73.3616 11.7591C74.6801 11.7591 75.8788 12.3327 76.5981 13.2505V17.2084ZM96.1368 24.2065C100.093 24.2065 102.55 23.5182 104.588 22.2562V9.98088H93.6196V14.6845H99.4332V18.8145C98.5942 19.044 97.6352 19.2161 96.2567 19.2161C91.342 19.2161 88.9446 16.0612 88.9446 12.3901C88.9446 8.71893 91.7016 5.56405 96.916 5.56405C99.0736 5.56405 101.171 6.13767 102.73 6.94073V1.72084C101.231 1.14723 99.3134 0.630979 96.6163 0.630979C89.0046 0.630979 83.6104 5.90822 83.6104 12.4474C83.5505 19.1013 88.4652 24.2065 96.1368 24.2065ZM109.442 6.08031C107.764 6.08031 106.326 4.70363 106.326 3.04015C106.326 1.37667 107.764 0 109.442 0C111.24 0 112.619 1.37667 112.619 3.04015C112.619 4.70363 111.18 6.08031 109.442 6.08031ZM106.925 23.805H111.96V7.74379H106.925V23.805ZM123.227 14.9713L118.972 7.74379H113.098L123.167 24.1491L133.237 7.74379H127.483L123.227 14.9713ZM137.372 16.9216H148.999C149.059 9.92352 144.804 7.39962 140.549 7.39962C136.053 7.39962 132.038 9.98088 131.978 15.7744C131.978 21.3958 136.113 24.1491 141.088 24.1491C143.246 24.1491 145.523 23.8623 147.501 22.8872V18.4704C144.984 19.847 143.366 19.9044 141.927 19.9044C139.769 19.847 137.552 19.2161 137.372 16.9216ZM140.608 11.1281C142.107 11.1281 143.425 11.8164 143.605 13.8241H137.372C137.732 11.8738 139.11 11.1281 140.608 11.1281ZM51.5453 11.3576C52.744 10.325 53.3433 9.00574 53.3433 7.34226C53.3433 4.24474 50.3466 1.03251 46.0313 1.03251H38V23.8623H48.4287C52.5042 23.8623 55.6209 20.8795 55.6209 17.0937C55.6209 14.7992 54.542 12.3327 51.5453 11.3576ZM43.2743 5.67878H45.6717C47.1101 5.67878 48.129 6.76865 48.129 7.97324C48.129 9.17782 47.1101 10.2103 45.6717 10.2103H43.2743V5.67878ZM47.9492 19.1587H43.2743V14.5698H47.9492C49.3876 14.5698 50.4665 15.6023 50.4665 16.8643C50.4665 18.1262 49.3876 19.1587 47.9492 19.1587Z", fill: "black" }), h("path", { d: "M21.543 1.01514L35 23.9999H8.08594L21.543 1.01514Z", fill: "black" }), h("path", { d: "M9.36142 16.9564L0 1H18.7228L9.36142 16.9564Z", fill: "#2AF135" })))), h("div", { class: "nav-toggle", onClick: event => this.toggleNav(event) }), h("nav", { class: "nav nav-primary", "data-visible": "false" }, h("ul", null, navPrimary)))));
+    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("ul", null, navSecondary))), h("div", { class: "row row-bottom" }, h("div", { class: "logo-wrap" }, h("a", { href: this.logoUrl }, h("svg", { width: "149", height: "30", viewBox: "0 0 149 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "Big Give" }, h("title", null, "Big Give"), h("path", { d: "M59.9362 6.08031C58.258 6.08031 56.8195 4.70363 56.8195 3.04015C56.8195 1.37667 58.258 0 59.9362 0C61.7342 0 63.1127 1.37667 63.1127 3.04015C63.1127 4.70363 61.7342 6.08031 59.9362 6.08031ZM57.4189 23.805H62.4534V7.74379H57.4189V23.805ZM76.5981 7.74379V8.71893C75.8189 7.97323 74.2606 7.34226 72.4626 7.34226C67.9674 7.34226 64.3114 10.5545 64.3114 15.2008C64.3114 19.9044 67.9674 23.0593 72.4626 23.0593C74.2606 23.0593 75.8189 22.543 76.5981 21.6826V22.6004C76.5981 24.6654 74.6801 25.6979 72.1629 25.6979C70.0052 25.6979 68.1472 25.239 66.4091 24.2639V29.0249C68.5068 29.7706 70.8443 30 72.4026 30C77.4371 30 81.6326 27.9924 81.6326 22.7151V7.68643H76.5981V7.74379ZM76.5981 17.2084C75.8788 18.1836 74.6801 18.6424 73.3616 18.6424C71.2639 18.6424 69.5257 17.4379 69.5257 15.2008C69.5257 13.021 71.2639 11.7591 73.3616 11.7591C74.6801 11.7591 75.8788 12.3327 76.5981 13.2505V17.2084ZM96.1368 24.2065C100.093 24.2065 102.55 23.5182 104.588 22.2562V9.98088H93.6196V14.6845H99.4332V18.8145C98.5942 19.044 97.6352 19.2161 96.2567 19.2161C91.342 19.2161 88.9446 16.0612 88.9446 12.3901C88.9446 8.71893 91.7016 5.56405 96.916 5.56405C99.0736 5.56405 101.171 6.13767 102.73 6.94073V1.72084C101.231 1.14723 99.3134 0.630979 96.6163 0.630979C89.0046 0.630979 83.6104 5.90822 83.6104 12.4474C83.5505 19.1013 88.4652 24.2065 96.1368 24.2065ZM109.442 6.08031C107.764 6.08031 106.326 4.70363 106.326 3.04015C106.326 1.37667 107.764 0 109.442 0C111.24 0 112.619 1.37667 112.619 3.04015C112.619 4.70363 111.18 6.08031 109.442 6.08031ZM106.925 23.805H111.96V7.74379H106.925V23.805ZM123.227 14.9713L118.972 7.74379H113.098L123.167 24.1491L133.237 7.74379H127.483L123.227 14.9713ZM137.372 16.9216H148.999C149.059 9.92352 144.804 7.39962 140.549 7.39962C136.053 7.39962 132.038 9.98088 131.978 15.7744C131.978 21.3958 136.113 24.1491 141.088 24.1491C143.246 24.1491 145.523 23.8623 147.501 22.8872V18.4704C144.984 19.847 143.366 19.9044 141.927 19.9044C139.769 19.847 137.552 19.2161 137.372 16.9216ZM140.608 11.1281C142.107 11.1281 143.425 11.8164 143.605 13.8241H137.372C137.732 11.8738 139.11 11.1281 140.608 11.1281ZM51.5453 11.3576C52.744 10.325 53.3433 9.00574 53.3433 7.34226C53.3433 4.24474 50.3466 1.03251 46.0313 1.03251H38V23.8623H48.4287C52.5042 23.8623 55.6209 20.8795 55.6209 17.0937C55.6209 14.7992 54.542 12.3327 51.5453 11.3576ZM43.2743 5.67878H45.6717C47.1101 5.67878 48.129 6.76865 48.129 7.97324C48.129 9.17782 47.1101 10.2103 45.6717 10.2103H43.2743V5.67878ZM47.9492 19.1587H43.2743V14.5698H47.9492C49.3876 14.5698 50.4665 15.6023 50.4665 16.8643C50.4665 18.1262 49.3876 19.1587 47.9492 19.1587Z", fill: "black" }), h("path", { d: "M21.543 1.01514L35 23.9999H8.08594L21.543 1.01514Z", fill: "black" }), h("path", { d: "M9.36142 16.9564L0 1H18.7228L9.36142 16.9564Z", fill: "#2AF135" })))), h("div", { class: "nav-toggle", onClick: event => this.toggleNav(event) }), h("nav", { class: "nav nav-primary", "data-visible": "false" }, h("ul", null, navPrimary)))));
   }
   static get is() { return "biggive-header"; }
   static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,16 @@ const Template = args => `
         <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></li>
+        <li>
+          <a href="#">Match Funding</a>
+          <ul>
+            <li><a href="#">Sub menu 1</a></li>
+            <li><a href="#">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>

package/dist/collection/components/biggive-hero-image/biggive-hero-image.css

@@ -536,7 +536,7 @@ a:hover {
 .container .sleeve {
   display: flex;
   justify-content: space-between;
-  max-width: 1000px;
+  max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
 }
@@ -544,7 +544,7 @@ a:hover {
   width: 40%;
   position: relative;
   z-index: 1;
-  padding: 180px 60px 60px 60px;
+  padding: 180px 60px 60px 0;
 }
 .container .content-wrap .logo {
   height: 75px;

package/dist/collection/components/biggive-hero-image/biggive-hero-image.js

@@ -8,6 +8,8 @@ export class BiggiveHeroImage {
     this.slugColour = null;
     this.logo = '';
     this.mainImage = '';
+    this.mainImageAlignHorizontal = 'center';
+    this.mainImageAlignVertical = 'center';
     this.mainTitle = null;
     this.mainTitleColour = null;
     this.teaser = null;
@@ -19,7 +21,7 @@ export class BiggiveHeroImage {
   render() {
     return (h("div", { class: 'container colour-scheme-' + this.colourScheme + ' space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "content-wrap" }, this.logo.length > 0 ? (h("div", { class: "logo image-wrap", style: { 'background-image': 'url(' + this.logo + ')' } }, h("img", { src: this.logo }))) : null, h("div", { class: 'slug text-colour-' + this.slugColour }, this.slug), h("h1", { class: 'main-title text-colour-' + this.mainTitleColour }, this.mainTitle), h("div", { class: 'teaser text-colour-' + this.teaserColour }, this.teaser), this.buttonLabel != null && this.buttonUrl != null
       ? h("biggive-button", { "colour-scheme": this.buttonColourScheme, url: this.buttonUrl, label: this.buttonLabel })
-      : null), h("div", { class: "graphic-wrap" }, this.mainImage.length > 0 ? (h("div", { class: "image-wrap", style: { 'background-image': 'url(' + this.mainImage + ')' } }, h("img", { src: this.mainImage }))) : null))));
+      : null), h("div", { class: "graphic-wrap" }, this.mainImage.length > 0 ? (h("div", { class: "image-wrap", style: { 'background-image': 'url(' + this.mainImage + ')', 'background-position': this.mainImageAlignHorizontal + ' ' + this.mainImageAlignVertical } }, h("img", { src: this.mainImage }))) : null))));
   }
   static get is() { return "biggive-hero-image"; }
   static get encapsulation() { return "shadow"; }
@@ -143,6 +145,42 @@ export class BiggiveHeroImage {
         "reflect": false,
         "defaultValue": "''"
       },
+      "mainImageAlignHorizontal": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Horizontal alignment of image"
+        },
+        "attribute": "main-image-align-horizontal",
+        "reflect": false,
+        "defaultValue": "'center'"
+      },
+      "mainImageAlignVertical": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Vertical alignment of image"
+        },
+        "attribute": "main-image-align-vertical",
+        "reflect": false,
+        "defaultValue": "'center'"
+      },
       "mainTitle": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/biggive-hero-image/biggive-hero-image.stories.js

@@ -1,13 +1,25 @@
 export default {
   title: 'Components/Content',
+  argTypes: {
+    spaceBelow: {
+      name: 'Space below',
+      control: {
+        type: 'select',
+        options: [0, 1, 2, 3, 4, 5, 6],
+      },
+    },
+  },
 };
 const Template = args => `
     <biggive-hero-image
+      space-below="${args.spaceBelow}"
       colour-scheme="${args.colourScheme}"
       slug="${args.slug}"
       slugColour="${args.slugColour}"
       logo="${args.logo}"
       main-image="${args.mainImage}"
+      main-image-align-horizontal="${args.mainImageAlignHorizontal}"
+      main-image-align-vertical="${args.mainImageAlignVertical}"
       main-title="${args.mainTitle}"
       main-titleColour="${args.mainTitleColour}"
       teaser="${args.teaser}"
@@ -19,11 +31,14 @@ const Template = args => `
     `;
 export const HeroImageComponent = Template.bind({});
 HeroImageComponent.args = {
+  spaceBelow: 0,
   colourScheme: 'primary',
   slug: 'Test slug',
   slugColour: null,
   logo: 'https://media.istockphoto.com/vectors/childish-seamless-dotted-pattern-with-colorful-doodle-letters-fun-vector-id1208462693',
   mainImage: 'https://media.istockphoto.com/vectors/childish-seamless-dotted-pattern-with-colorful-doodle-letters-fun-vector-id1208462693',
+  mainImageAlignHorizontal: 'center',
+  mainImageAlignVertical: 'center',
   mainTitle: 'Test title',
   mainTitleColour: null,
   teaser: 'We run match funding campaigns to make an extraordinary difference to the world’s big challenges.',