@biggive/components 1.0.149 → 1.0.151

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

@@ -15,6 +15,17 @@ export default {
         options: ['primary', 'secondary', 'tertiary', 'white', 'black'],
       },
     },
+    isPastCampaign: {
+      name: 'Is Past Campaign',
+      options: [true, false],
+    },
+    isFutureCampaign: {
+      name: 'Is Future Campaign',
+      options: [true, false],
+    },
+    datetime: {
+      name: 'Date Time',
+    },
     label: {
       name: 'Label',
     },
@@ -40,6 +51,9 @@ const Template = args => `
     <biggive-button
       space-below="${args.spaceBelow}"
       colour-scheme="${args.colourScheme}"
+      is-past-campaign="${args.isPastCampaign}"
+      is-future-campaign="${args.isFutureCampaign}"
+      datetime="${args.datetime}"
       label="${args.label}"
       url="${args.url}"
       full-width=${args.fullWidth}
@@ -51,6 +65,9 @@ export const ButtonComponent = Template.bind({});
 ButtonComponent.args = {
   spaceBelow: 0,
   colourScheme: 'primary',
+  isPastCampaign: false,
+  isFutureCampaign: false,
+  datetime: '29/11/2022, 12:00',
   label: 'Donate now',
   url: 'http://www.google.com',
   fullWidth: false,

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

@@ -514,6 +514,7 @@ a:hover {
   font-size: 17px;
   line-height: 24px;
   filter: drop-shadow(-1px 3px 12px rgba(0, 0, 0, 0.25));
+  cursor: pointer;
   position: relative;
   height: 100%;
   background-color: #FFFFFF;
@@ -592,20 +593,4 @@ a:hover {
   padding-bottom: 10px;
   margin-bottom: 10px;
   border-bottom: 1px solid #E8E8E8;
-}
-.container .button-wrap .msg-wrapper {
-  display: flex;
-  justify-content: center;
-}
-.container .button-wrap .msg-wrapper biggive-misc-icon {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-.container .button-wrap .msg-wrapper p {
-  text-align: center;
-}
-@media screen and (max-width: 1200px) {
-  .container .button-wrap .msg-wrapper p {
-    font-size: 15px;
-  }
 }

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

@@ -1,6 +1,9 @@
 import { h } from '@stencil/core';
 export class BiggiveCampaignCard {
   constructor() {
+    this.handleCardGeneralClick = (event) => {
+      this.doCardGeneralClick.emit({ event, url: this.moreInfoButtonUrl });
+    };
     this.spaceBelow = 4;
     this.campaignType = null;
     this.banner = null;
@@ -22,7 +25,7 @@ export class BiggiveCampaignCard {
     this.datetime = undefined;
   }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow.toString() }, h("div", { class: "sleeve" }, this.campaignType !== null ? (h("div", { class: "campaign-type" }, h("span", null, this.campaignType))) : null, this.banner !== null ? (h("div", { class: "image-wrap banner", role: "presentation", style: { 'background-image': 'url(' + this.banner + ')' } })) : (h("div", { class: "image-wrap banner" })), h("div", { class: "title-wrap" }, h("h3", null, this.campaignTitle), h("div", { class: "organisation-name" }, "By ", this.organisationName)), h("div", { class: "meta-wrap" }, h("div", { class: "meta-item" }, h("span", { class: "label" }, this.primaryFigureLabel), h("span", { class: "text" }, this.primaryFigureAmount)), h("div", { class: "meta-item" }, h("span", { class: "label" }, this.secondaryFigureLabel), h("span", { class: "text" }, this.secondaryFigureAmount))), h("div", { class: "progress-bar-wrap" }, h("biggive-progress-bar", { counter: this.progressBarCounter, "colour-scheme": "primary" })), h("div", { class: "button-wrap" }, this.isFutureCampaign || this.isPastCampaign ? (h("div", { class: "msg-wrapper" }, h("biggive-misc-icon", { "background-colour": "white", "icon-colour": "black", icon: "Timer" }), this.isFutureCampaign ? h("p", null, "Launches ", this.datetime) : h("p", null, "Closed ", this.datetime))) : (h("biggive-button", { "full-width": "true", "colour-scheme": this.donateButtonColourScheme, url: this.donateButtonUrl, label: this.donateButtonLabel })), h("biggive-button", { "full-width": "true", "colour-scheme": this.moreInfoButtonColourScheme, url: this.moreInfoButtonUrl, label: this.moreInfoButtonLabel })))));
+    return (h("div", { class: 'container space-below-' + this.spaceBelow.toString(), onClick: this.handleCardGeneralClick }, h("div", { class: "sleeve" }, this.campaignType !== null ? (h("div", { class: "campaign-type" }, h("span", null, this.campaignType))) : null, this.banner !== null ? (h("div", { class: "image-wrap banner", role: "presentation", style: { 'background-image': 'url(' + this.banner + ')' } })) : (h("div", { class: "image-wrap banner" })), h("div", { class: "title-wrap" }, h("h3", null, this.campaignTitle), h("div", { class: "organisation-name" }, "By ", this.organisationName)), h("div", { class: "meta-wrap" }, h("div", { class: "meta-item" }, h("span", { class: "label" }, this.primaryFigureLabel), h("span", { class: "text" }, this.primaryFigureAmount)), h("div", { class: "meta-item" }, h("span", { class: "label" }, this.secondaryFigureLabel), h("span", { class: "text" }, this.secondaryFigureAmount))), h("div", { class: "progress-bar-wrap" }, h("biggive-progress-bar", { counter: this.progressBarCounter, "colour-scheme": "primary" })), h("div", { class: "button-wrap" }, h("biggive-button", { "full-width": "true", "colour-scheme": this.donateButtonColourScheme, url: this.donateButtonUrl, label: this.donateButtonLabel, isFutureCampaign: this.isFutureCampaign, isPastCampaign: this.isPastCampaign, datetime: this.datetime }), h("biggive-button", { "full-width": "true", "colour-scheme": this.moreInfoButtonColourScheme, url: this.moreInfoButtonUrl, label: this.moreInfoButtonLabel })))));
   }
   static get is() { return "biggive-campaign-card"; }
   static get encapsulation() { return "shadow"; }
@@ -381,4 +384,22 @@ export class BiggiveCampaignCard {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "doCardGeneralClick",
+        "name": "doCardGeneralClick",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ event: object; url: string }",
+          "resolved": "{ event: object; url: string; }",
+          "references": {}
+        }
+      }];
+  }
 }

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

@@ -544,12 +544,13 @@ a:hover {
   justify-content: flex-end;
   margin-bottom: 30px;
   text-align: right;
+  display: flex;
 }
-.sort-filter-wrap #clearFilters {
-  margin: auto 0 auto auto;
-}
-.sort-filter-wrap #clearFilters:hover {
+.sort-filter-wrap .clear-all {
   cursor: pointer;
+  vertical-align: center;
+  margin-top: auto;
+  margin-bottom: auto;
 }
 .sort-filter-wrap .sort-wrap {
   margin-left: 15px;
@@ -578,10 +579,6 @@ a:hover {
 .sort-filter-wrap .filter-wrap .button.filter .filter-icon svg:hover {
   fill: #2C089B;
 }
-.sort-filter-wrap .filter-wrap #clearFilters {
-  position: absolute;
-  margin-top: 20px;
-}
 
 .icon {
   height: 1rem;
@@ -593,9 +590,17 @@ a:hover {
   fill: #2C089B;
 }
 
+.icon-clear-all > path {
+  fill: #000000;
+}
+
 @media screen and (max-width: 450px) {
-  .sort-filter-wrap .filter-wrap #clearFilters {
-    font-size: 15px;
+  .sort-filter-wrap {
+    flex-direction: column-reverse;
+  }
+  .sort-filter-wrap .sort-wrap {
+    margin-top: 20px;
+    margin-bottom: 20px;
   }
 }
 @media screen and (max-width: 350px) {
@@ -608,8 +613,4 @@ a:hover {
   .sort-filter-wrap .filter-wrap {
     margin-left: 3px;
   }
-  .sort-filter-wrap .filter-wrap #clearFilters {
-    margin-top: 0px;
-    max-width: 15px;
-  }
 }

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

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core';
-import { faMagnifyingGlass } from '@fortawesome/pro-solid-svg-icons';
+import { faMagnifyingGlass, faFilterSlash } from '@fortawesome/pro-solid-svg-icons';
 export class BiggiveCampaignCardFilterGrid {
   constructor() {
     this.sortBy = null;
@@ -27,7 +27,7 @@ export class BiggiveCampaignCardFilterGrid {
     this.handleFilterButtonClick = () => {
       this.el.shadowRoot.getElementById('filter-popup').openFromOutside();
     };
-    this.handleClearFiltersClicked = () => {
+    this.handleClearAll = () => {
       this.doClearFilters.emit(true);
     };
     this.spaceBelow = 0;
@@ -77,7 +77,7 @@ export class BiggiveCampaignCardFilterGrid {
     }
   }
   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: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), h("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), h("div", { class: "sort-filter-wrap" }, h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { placeholder: "Sort by", selectedLabel: this.selectedSortByOption, id: "sort-by" }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }))), h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", onClick: this.handleFilterButtonClick, label: "Filters", fullWidth: true }), 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", selectedLabel: this.selectedFilterCategory, id: "categories", "space-below": "2" }, this.categoryOptions.length === 0
+    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: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), h("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), h("div", { class: "sort-filter-wrap" }, h("div", { class: "clear-all" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon icon-clear-all", viewBox: "0 0 512 512" }, h("path", { d: faFilterSlash.icon[4].toString() })), h("a", { onClick: this.handleClearAll }, "Clear all")), h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { placeholder: "Sort by", selectedLabel: this.selectedSortByOption, id: "sort-by" }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }))), h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", onClick: this.handleFilterButtonClick, label: "Filters", fullWidth: true, "space-below": "0" }), 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", selectedLabel: this.selectedFilterCategory, id: "categories", "space-below": "2" }, this.categoryOptions.length === 0
       ? undefined
       : this.categoryOptions.map(option => h("biggive-form-field-select-option", { value: option, label: option }))), h("biggive-form-field-select", { placeholder: "Beneficiary", selectedLabel: this.selectedFilterBeneficiary, id: "beneficiaries", "space-below": "2" }, this.beneficiaryOptions.length === 0
       ? undefined
@@ -85,7 +85,7 @@ export class BiggiveCampaignCardFilterGrid {
       ? undefined
       : this.locationOptions.map(option => h("biggive-form-field-select-option", { value: option, label: option }))), h("biggive-form-field-select", { placeholder: "Funding", selectedLabel: this.selectedFilterFunding, id: "funding", "space-below": "2" }, this.fundingOptions.length === 0
       ? undefined
-      : this.fundingOptions.map(option => h("biggive-form-field-select-option", { value: option, label: option }))), h("a", { onClick: this.handleClearFiltersClicked, id: "clearFilters" }, "Clear Filters"), h("div", { class: "align-right" }, h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick }))))), h("div", { class: "campaign-grid" }, h("slot", { name: "campaign-grid" })))));
+      : this.fundingOptions.map(option => h("biggive-form-field-select-option", { value: option, label: option }))), h("div", { class: "align-right" }, h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick }))))), h("div", { class: "campaign-grid" }, h("slot", { name: "campaign-grid" })))));
   }
   static get is() { return "biggive-campaign-card-filter-grid"; }
   static get encapsulation() { return "shadow"; }

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

@@ -2,7 +2,7 @@ import { h } from '@stencil/core';
 export class BiggiveCampaignHighlights {
   constructor() {
     this.spaceBelow = 0;
-    this.banner = '';
+    this.banner = null;
     this.campaignTitle = null;
     this.primaryFigureLabel = null;
     this.primaryFigureAmount = null;
@@ -67,7 +67,7 @@ export class BiggiveCampaignHighlights {
         },
         "attribute": "banner",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "null"
       },
       "campaignTitle": {
         "type": "string",

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

@@ -545,7 +545,7 @@ a:hover {
 }
 .nav ul li a.icon-green {
   padding-left: 20px;
-  background-image: url(/assets/triangles-combined.svg);
+  background-image: url(/assets/images/triangles-combined.svg);
   background-repeat: no-repeat;
   background-size: auto 10px;
   background-position: left center;

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

@@ -26,7 +26,7 @@ export class BiggiveHeader {
     this.appendMenu('nav-secondary');
   }
   render() {
-    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("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: this.toggleNav }), h("nav", { class: "nav nav-primary", "data-visible": "false" }))));
+    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("div", { class: "row row-bottom" }, h("div", { class: "logo-wrap" }, h("a", { href: this.logoUrl }, h("svg", { version: "1.1", x: "0px", y: "0px", viewBox: "0 0 140.9 30" }, h("path", { d: "M51.9,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3C53.6,0,55,1.4,55,3S53.6,6.1,51.9,6.1z M49.3,23.8h5V7.7h-5V23.8z M68.5,7.7v1 c-0.8-0.7-2.3-1.4-4.1-1.4c-4.5,0-8.2,3.2-8.2,7.9c0,4.7,3.7,7.9,8.2,7.9c1.8,0,3.4-0.5,4.1-1.4v0.9c0,2.1-1.9,3.1-4.4,3.1 c-2.2,0-4-0.5-5.8-1.4V29c2.1,0.7,4.4,1,6,1c5,0,9.2-2,9.2-7.3v-15L68.5,7.7L68.5,7.7z M68.5,17.2c-0.7,1-1.9,1.4-3.2,1.4 c-2.1,0-3.8-1.2-3.8-3.4c0-2.2,1.7-3.4,3.8-3.4c1.3,0,2.5,0.6,3.2,1.5V17.2z M88.1,24.2c4,0,6.4-0.7,8.5-2V10h-11v4.7h5.8v4.1 c-0.8,0.2-1.8,0.4-3.2,0.4c-4.9,0-7.3-3.2-7.3-6.8c0-3.7,2.8-6.8,8-6.8c2.2,0,4.3,0.6,5.8,1.4V1.7c-1.5-0.6-3.4-1.1-6.1-1.1 c-7.6,0-13,5.3-13,11.8C75.5,19.1,80.4,24.2,88.1,24.2z M101.4,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3c1.8,0,3.2,1.4,3.2,3 S103.1,6.1,101.4,6.1z M98.8,23.8h5V7.7h-5V23.8z M115.1,15l-4.3-7.2H105l10.1,16.4l10.1-16.4h-5.8L115.1,15z M129.3,16.9h11.6 c0.1-7-4.2-9.5-8.4-9.5c-4.5,0-8.5,2.6-8.6,8.4c0,5.6,4.1,8.4,9.1,8.4c2.2,0,4.4-0.3,6.4-1.3v-4.4c-2.5,1.4-4.1,1.4-5.6,1.4 C131.7,19.8,129.5,19.2,129.3,16.9z M132.5,11.1c1.5,0,2.8,0.7,3,2.7h-6.2C129.6,11.9,131,11.1,132.5,11.1z M43.5,11.4 c1.2-1,1.8-2.4,1.8-4c0-3.1-3-6.3-7.3-6.3h-8v22.8h10.4c4.1,0,7.2-3,7.2-6.8C47.5,14.8,46.5,12.3,43.5,11.4z M35.2,5.7h2.4 C39,5.7,40,6.8,40,8c0,1.2-1,2.2-2.5,2.2h-2.4V5.7z M39.9,19.2h-4.7v-4.6h4.7c1.4,0,2.5,1,2.5,2.3C42.4,18.1,41.3,19.2,39.9,19.2z" }), h("path", { d: "M13.5,1l13.5,23H0L13.5,1z" })))), h("div", { class: "nav-toggle", onClick: this.toggleNav }), h("nav", { class: "nav nav-primary", "data-visible": "false" }))));
   }
   static get is() { return "biggive-header"; }
   static get encapsulation() { return "shadow"; }

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

@@ -557,7 +557,27 @@ a:hover {
   background-position: left center;
 }
 .container .content-wrap .logo img {
-  display: none;
+  width: 200px;
+  position: relative;
+  left: -20px;
+}
+@media (max-width: 1200px) {
+  .container .content-wrap .logo img {
+    top: 20px;
+    width: 180px;
+  }
+}
+@media (max-width: 768px) {
+  .container .content-wrap .logo img {
+    top: 40px;
+    width: 160px;
+  }
+}
+@media (max-width: 576px) {
+  .container .content-wrap .logo img {
+    top: 60px;
+    width: 140px;
+  }
 }
 .container .content-wrap .slug {
   font-size: 20px;
@@ -571,7 +591,7 @@ a:hover {
   font-size: 47px;
   line-height: 60px;
   font-weight: bold;
-  margin: 50px 0 15px 0;
+  margin: 0 0 15px 0;
   padding: 0;
 }
 @media (max-width: 1200px) {

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

@@ -20,7 +20,7 @@ export class BiggiveHeroImage {
     this.buttonColourScheme = 'primary';
   }
   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 !== undefined && this.logo !== null ? (h("div", { class: "logo image-wrap", style: { 'background-image': 'url(' + this.logo + ')' } }, h("img", { src: this.logo, alt: this.logoAltText, title: this.logoAltText }))) : h("div", { class: "logo-space" }), 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
+    return (h("div", { class: 'container colour-scheme-' + this.colourScheme + ' space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "content-wrap" }, this.logo !== undefined && this.logo !== null ? (h("div", { class: "logo image-wrap" }, h("img", { src: this.logo, alt: this.logoAltText, title: this.logoAltText }))) : h("div", { class: "logo-space" }), 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 !== null ? (h("div", { class: "image-wrap", role: "presentation", style: { 'background-image': 'url(' + this.mainImage + ')', 'background-position': this.mainImageAlignHorizontal + ' ' + this.mainImageAlignVertical } })) : null))));
   }

package/dist/collection/components/biggive-page-section/biggive-page-section.css

@@ -513,6 +513,7 @@ a:hover {
   line-height: 24px;
   overflow: hidden;
   position: relative;
+  text-align: center;
 }
 .container .sleeve {
   max-width: 1200px;
@@ -557,11 +558,121 @@ a:hover {
 
 .container .sleeve {
   position: relative;
+  text-align: left;
+}
+
+.container.max-width-10 .sleeve {
+  max-width: 10%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container.max-width-15 .sleeve {
+  max-width: 15%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container.max-width-20 .sleeve {
+  max-width: 20%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container.max-width-25 .sleeve {
+  max-width: 25%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container.max-width-30 .sleeve {
+  max-width: 30%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container.max-width-35 .sleeve {
+  max-width: 35%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container.max-width-40 .sleeve {
+  max-width: 40%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container.max-width-45 .sleeve {
+  max-width: 45%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container.max-width-50 .sleeve {
+  max-width: 50%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container.max-width-55 .sleeve {
+  max-width: 55%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container.max-width-60 .sleeve {
+  max-width: 60%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container.max-width-65 .sleeve {
+  max-width: 65%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container.max-width-70 .sleeve {
+  max-width: 70%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container.max-width-75 .sleeve {
+  max-width: 75%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container.max-width-80 .sleeve {
+  max-width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container.max-width-85 .sleeve {
+  max-width: 85%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container.max-width-90 .sleeve {
+  max-width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container.max-width-95 .sleeve {
+  max-width: 95%;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .container .sleeve:before {
   content: "";
   position: absolute;
+  z-index: -1;
   left: 50%;
   transform: translateX(-50%);
   width: 100vw;

package/dist/collection/components/biggive-page-section/biggive-page-section.js

@@ -5,9 +5,19 @@ export class BiggivePageSection {
     this.sectionStyleTop = 'straight';
     this.sectionStyleBottom = 'straight';
     this.colourScheme = null;
+    this.maxWidth = 100;
   }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow + ' background-color-' + this.colourScheme + ' style-top-' + this.sectionStyleTop + ' style-bottom-' + this.sectionStyleBottom }, h("div", { class: "sleeve" }, h("slot", null))));
+    return (h("div", { class: 'container max-width-' +
+        this.maxWidth +
+        ' space-below-' +
+        this.spaceBelow +
+        ' background-color-' +
+        this.colourScheme +
+        ' style-top-' +
+        this.sectionStyleTop +
+        ' style-bottom-' +
+        this.sectionStyleBottom }, h("div", { class: "sleeve" }, h("slot", null))));
   }
   static get is() { return "biggive-page-section"; }
   static get encapsulation() { return "shadow"; }
@@ -94,6 +104,24 @@ export class BiggivePageSection {
         "attribute": "colour-scheme",
         "reflect": false,
         "defaultValue": "null"
+      },
+      "maxWidth": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Width"
+        },
+        "attribute": "max-width",
+        "reflect": false,
+        "defaultValue": "100"
       }
     };
   }

package/dist/collection/components/biggive-page-section/biggive-page-section.stories.js

@@ -8,6 +8,13 @@ export default {
         options: [0, 1, 2, 3, 4, 5, 6],
       },
     },
+    maxWidth: {
+      name: 'Max width',
+      control: {
+        type: 'select',
+        options: [10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100],
+      },
+    },
     colourScheme: {
       name: 'Colour scheme',
       control: {
@@ -33,7 +40,8 @@ export default {
 };
 const Template = args => `
         <biggive-page-section
-          space-below="${args.spaceBelow}"  
+          space-below="${args.spaceBelow}" 
+          max-width="${args.maxWidth}"  
           colour-scheme="${args.colourScheme}"    
           section-style-top="${args.sectionStyleTop}"
           section-style-bottom="${args.sectionStyleBottom}">
@@ -43,6 +51,7 @@ export const PageSectionComponent = Template.bind({});
 PageSectionComponent.args = {
   colourScheme: 'primary',
   spaceBelow: 4,
+  maxWidth: 100,
   sectionStyleTop: 'straight',
   sectionStyleBottom: 'straight',
 };

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

@@ -523,7 +523,7 @@ a:hover {
   margin-bottom: 15px;
 }
 .container .quote {
-  background-image: url(/assets/quote.svg);
+  background-image: url(/assets/images/quote.svg);
   background-position: center top;
   background-size: auto 45px;
   background-repeat: no-repeat;

package/dist/components/biggive-article-card.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './biggive-button2.js';
+import { d as defineCustomElement$3 } from './biggive-button2.js';
+import { d as defineCustomElement$2 } from './biggive-misc-icon2.js';
 
 const biggiveArticleCardCss = "body{background-color:#D7D7D7}h1,h3,h4,h5,h6{margin-bottom:0}h1,.heading-1{font-size:47px;line-height:60px;font-weight:bold}h2,.heading-2{font-size:38px;line-height:45px;font-weight:bold}h3,.heading-3{font-size:25px;line-height:32px;font-weight:bold}h4,.heading-4{font-size:20px;line-height:24px;font-weight:bold}h5,.heading-5{font-size:17px;line-height:24px;font-weight:bold}a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.colour-primary{color:#2C089B}.colour-secondary{color:#2AF135}.colour-tertiary{color:#FF7272}.colour-white{color:#FFFFFF}.colour-black{color:#000000}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.fill-primary{fill:#2C089B}.fill-secondary{fill:#2AF135}.fill-tertiary{fill:#FF7272}.fill-white{fill:#FFFFFF}.fill-black{fill:#000000}.fill-red{fill:red}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.input-wrap{display:flex;justify-content:space-between}.input-text{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;color:#000000;padding:5px 10px;box-sizing:border-box;width:100%}.input-text:focus{outline:0}.input-text:placeholder{color:#4A4A4A}.button{font-size:17px;line-height:24px;padding:10px 30px;border-radius:5px;border:1px solid #000000;background-color:#000000;filter:drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.22));color:#FFFFFF;display:inline-block;text-decoration:none;text-align:center;transition:all ease-in-out 0.5s;cursor:pointer}.button:hover{background-color:#FFFFFF;color:#000000}.button.size-small{font-size:13px;line-height:17px;padding:5px 15px}.button.button.rounded-true{border-radius:27.5px}.button.button.rounded-true.size-small{border-radius:20px}.button-primary{color:#FFFFFF;background-color:#2C089B;border-color:#2C089B}.button-primary:hover{color:#2C089B;background-color:#FFFFFF}.button-secondary{color:#2C089B;background-color:#2AF135;border-color:#2AF135}.button-secondary:hover{background-color:#FFFFFF}.button-tertiary{color:#FFFFFF;background-color:#FF7272;border-color:#FF7272}.button-tertiary: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;text-decoration:underline;box-shadow:none;border:0;padding-left:0;padding-right:0}.button-clear-primary:hover{text-decoration:none;background-color:transparent}.button-clear-secondary{color:#2AF135;background-color:transparent;text-decoration:underline;box-shadow:none;border:0;padding-left:0;padding-right:0}.button-clear-secondary:hover{text-decoration:none;background-color:transparent}.button-clear-tertiary{color:#FF7272;background-color:transparent;text-decoration:underline;box-shadow:none;border:0;padding-left:0;padding-right:0}.button-clear-tertiary:hover{text-decoration:none;background-color:transparent}.button-clear-white{color:#FFFFFF;background-color:transparent;text-decoration:underline;box-shadow:none;border:0;padding-left:0;padding-right:0}.button-clear-white:hover{color:#FFFFFF;text-decoration:none;background-color:transparent}.button-rounded{border-radius:27.5px}.button-rounded.size-small{border-radius:20px}.progress-bar{display:flex}.progress-bar .slider{margin:auto 15px auto 0;position:relative;flex-grow:1}.progress-bar .slider:before{content:\"\";position:absolute;display:block;top:0;left:0;bottom:0;right:0;background-color:#E8E8E8;border-radius:4px}.progress-bar .slider .progress{position:relative;border-radius:4px;background-color:#000000;height:8px}.progress-bar .counter{font-weight:700;color:#000000;font-size:14px;line-height:18px}.progress-bar-primary .slider .progress{background-color:#2C089B}.progress-bar-primary .counter{color:#2C089B}.progress-bar-secondary .slider .progress{background-color:#2AF135}.progress-bar-secondary .counter{color:#2AF135}.video-wrap{position:relative;padding-bottom:56.25%}.video-wrap iframe,.video-wrap video{position:absolute;border:0;display:block;left:0;right:0;top:0;bottom:0;width:100%;height:100%}.image-wrap img{width:100%;height:auto}.align-left{text-align:left}.align-right{text-align:right}.align-center{text-align:center}.align-justify{text-align:justify}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.horizontal-padding-1{padding-left:5px;padding-right:5px}.horizontal-padding-2{padding-left:10px;padding-right:10px}.horizontal-padding-3{padding-left:15px;padding-right:15px}.horizontal-padding-4{padding-left:30px;padding-right:30px}.horizontal-padding-5{padding-left:45px;padding-right:45px}.horizontal-padding-6{padding-left:60px;padding-right:60px}.vertical-padding-1{padding-top:5px;padding-bottom:5px}.vertical-padding-2{padding-top:10px;padding-bottom:10px}.vertical-padding-3{padding-top:15px;padding-bottom:15px}.vertical-padding-4{padding-top:30px;padding-bottom:30px}.vertical-padding-5{padding-top:45px;padding-bottom:45px}.vertical-padding-6{padding-top:60px;padding-bottom:60px}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left;padding:30px;filter:drop-shadow(-1px 3px 12px rgba(0, 0, 0, 0.25))}.container .sleeve{padding:30px 30px 0 30px;clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0, 100% 100%, 100% 100%, 50px 100%, 0 calc(100% - 50px))}.container .slug{margin-bottom:5px}.container .date{font-size:13px;line-height:17px;margin-bottom:15px}.container h3{font-size:20px;line-height:24px;font-weight:bold;margin-bottom:15px}.container h3 a,.container h3 a:hover{text-decoration:none}.container .image-group{margin-bottom:15px}.container .image-group .image-wrap{border-radius:50%;width:60px;height:60px;background-size:cover;background-position:center center;margin-bottom:5px}.container .image-group .image-wrap img{display:none}.container .image-group .image-label{font-size:13px;line-height:17px}";
 
@@ -43,7 +44,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["biggive-article-card", "biggive-button"];
+  const components = ["biggive-article-card", "biggive-button", "biggive-misc-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "biggive-article-card":
       if (!customElements.get(tagName)) {
@@ -51,6 +52,11 @@ function defineCustomElement$1() {
       }
       break;
     case "biggive-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "biggive-misc-icon":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }