@biggive/components 1.0.97 → 1.0.98

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.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.',