@biggive/components 0.0.5 → 0.0.8

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

@@ -6,68 +6,75 @@ import { CampaignGroupsService } from '../../util/campaign-groups';
 export class BiggiveCampaignCard {
   constructor() {
     /**
-     * @param {string} banner Full URL of a banner image.
+     * Full URL of a banner image.
      */
     this.banner = '';
     /**
-     * @param {string} number (Ceiling of) whole number of days until campaign end.
+     * (Ceiling of) whole number of days until campaign end.
      */
     this.daysRemaining = null;
     /**
-     * @param {number} totalFundsRaised Target for the campaign including matching but excluding any
-     *                                        tax relief, in major unit of currency e.g. pounds GBP.
+     * Target for the campaign including matching but excluding any
+     * tax relief, in major unit of currency e.g. pounds GBP.
      */
     this.target = null;
     /**
-     * @param {string} organisationName Display name of the charity or non-profit.
+     * Display name of the charity or non-profit.
      */
     this.organisationName = null;
     /**
-     * @param {string} organisationName Display name of the charity's specific time-bound fundraising campaign.
+     * Display name of the charity's specific time-bound fundraising campaign.
      */
     this.campaignTitle = null;
     /**
-     * @param {string} campaignType e.g. "Match Funded".
+     * e.g. "Match Funded".
      */
     this.campaignType = null;
     /**
-     * @param {string} beneficiaries Pipe (|) -separated list of full category labels.
+     * Array of full beneficiary labels.
      */
-    this.beneficiaries = '';
+    this.beneficiaries = [];
     /**
-     * @param {string} categories Pipe (|) -separated list of full category labels.
+     * Array of full category labels.
      */
-    this.categories = '';
+    this.categories = [];
     /**
-     * @param {number} totalFundsRaised Match funds not yet used or reserved, in major unit of currency
-     *                                        e.g. pounds GBP.
+     * Match funds not yet used or reserved, in major unit of currency e.g. pounds GBP.
      */
     this.matchFundsRemaining = null;
     /**
-     * @param {number} totalFundsRaised Total the campaign has raised so far including matching but excluding any
-     *                                  tax relief, in major unit of currency e.g. pounds GBP.
+     * Total the campaign has raised so far including matching but excluding any
+     * tax relief, in major unit of currency e.g. pounds GBP.
      */
     this.totalFundsRaised = null;
     /**
-     * @param {string} callToActionUrl Full URL of a call to action.
+     * Full URL of a call to action.
      */
     this.callToActionUrl = null;
     /**
-     * @param {string} callToActionLabel Text for the link to `callToActionUrl`.
+     * Text for the link to `callToActionUrl`.
      */
     this.callToActionLabel = null;
   }
   getBeneficiaryIcons() {
-    return this.beneficiaries.length > 0 ? this.beneficiaries.split('|').map(beneficiary => CampaignGroupsService.getBeneficiaryIcon(beneficiary)) : [];
+    return this.beneficiaries.map(beneficiary => CampaignGroupsService.getBeneficiaryIcon(beneficiary));
   }
   getCategoryIcons() {
-    return this.categories.length > 0 ? this.categories.split('|').map(category => CampaignGroupsService.getCategoryIcon(category)) : [];
+    return this.categories.map(category => CampaignGroupsService.getCategoryIcon(category));
   }
-  formatCurrency(num) {
-    if (!isNaN(num)) {
-      return parseInt(num).toLocaleString();
+  /**
+   * @returns Whole large currency units (e.g. pounds) formatted with symbol.
+   */
+  formatCurrency(currencyCode, amount) {
+    if (amount === null || isNaN(amount)) {
+      return '–';
     }
-    return num;
+    return Intl.NumberFormat('en-GB', {
+      style: 'currency',
+      currency: currencyCode,
+      currencyDisplay: 'symbol',
+      maximumFractionDigits: 0,
+    }).format(amount);
   }
   render() {
     return (h("div", { class: "container" },
@@ -85,9 +92,7 @@ export class BiggiveCampaignCard {
             h("div", { class: "meta-item" },
               h("span", { class: "label" }, "Target:"),
               " ",
-              h("span", { class: "text" },
-                "\u00A3",
-                this.formatCurrency(this.target)))),
+              h("span", { class: "text" }, this.formatCurrency(this.currencyCode, this.target)))),
           h("header", null,
             h("div", { class: "slug" }, this.organisationName),
             h("h3", null, this.campaignTitle)),
@@ -106,24 +111,20 @@ export class BiggiveCampaignCard {
                 "Match",
                 h("br", null),
                 "Funds Remaining"),
-              h("span", { class: "text" },
-                "\u00A3",
-                this.formatCurrency(this.matchFundsRemaining))),
+              h("span", { class: "text" }, this.formatCurrency(this.currencyCode, this.matchFundsRemaining))),
             h("div", { class: "meta-item" },
               h("span", { class: "label" },
                 "Total",
                 h("br", null),
                 "Funds Received"),
-              h("span", { class: "text" },
-                "\u00A3",
-                this.formatCurrency(this.totalFundsRaised)))),
+              h("span", { class: "text" }, this.formatCurrency(this.currencyCode, this.totalFundsRaised)))),
           h("div", { class: "button-wrap" },
             h("a", { href: this.callToActionUrl, class: "call-to-action" }, this.callToActionLabel))))));
   }
   static get is() { return "biggive-campaign-card"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["biggive-campaign-card.css"]
+    "$": ["biggive-campaign-card.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["biggive-campaign-card.css"]
@@ -140,11 +141,8 @@ export class BiggiveCampaignCard {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "banner Full URL of a banner image."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Full URL of a banner image."
       },
       "attribute": "banner",
       "reflect": false,
@@ -161,16 +159,30 @@ export class BiggiveCampaignCard {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "number (Ceiling of) whole number of days until campaign end."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "(Ceiling of) whole number of days until campaign end."
       },
       "attribute": "days-remaining",
       "reflect": false,
       "defaultValue": "null"
     },
+    "currencyCode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "e.g. 'GBP'."
+      },
+      "attribute": "currency-code",
+      "reflect": false
+    },
     "target": {
       "type": "number",
       "mutable": false,
@@ -182,11 +194,8 @@ export class BiggiveCampaignCard {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "totalFundsRaised Target for the campaign including matching but excluding any\n      tax relief, in major unit of currency e.g. pounds GBP."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Target for the campaign including matching but excluding any\ntax relief, in major unit of currency e.g. pounds GBP."
       },
       "attribute": "target",
       "reflect": false,
@@ -203,11 +212,8 @@ export class BiggiveCampaignCard {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "organisationName Display name of the charity or non-profit."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Display name of the charity or non-profit."
       },
       "attribute": "organisation-name",
       "reflect": false,
@@ -224,11 +230,8 @@ export class BiggiveCampaignCard {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "organisationName Display name of the charity's specific time-bound fundraising campaign."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Display name of the charity's specific time-bound fundraising campaign."
       },
       "attribute": "campaign-title",
       "reflect": false,
@@ -245,57 +248,44 @@ export class BiggiveCampaignCard {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "campaignType e.g. \"Match Funded\"."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "e.g. \"Match Funded\"."
       },
       "attribute": "campaign-type",
       "reflect": false,
       "defaultValue": "null"
     },
     "beneficiaries": {
-      "type": "string",
+      "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "string[]",
+        "resolved": "string[]",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "beneficiaries Pipe (|) -separated list of full category labels."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Array of full beneficiary labels."
       },
-      "attribute": "beneficiaries",
-      "reflect": false,
-      "defaultValue": "''"
+      "defaultValue": "[]"
     },
     "categories": {
-      "type": "string",
+      "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "string[]",
+        "resolved": "string[]",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "categories Pipe (|) -separated list of full category labels."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Array of full category labels."
       },
-      "attribute": "categories",
-      "reflect": false,
-      "defaultValue": "''"
+      "defaultValue": "[]"
     },
     "matchFundsRemaining": {
       "type": "number",
@@ -308,11 +298,8 @@ export class BiggiveCampaignCard {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "totalFundsRaised Match funds not yet used or reserved, in major unit of currency\n      e.g. pounds GBP."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Match funds not yet used or reserved, in major unit of currency e.g. pounds GBP."
       },
       "attribute": "match-funds-remaining",
       "reflect": false,
@@ -329,11 +316,8 @@ export class BiggiveCampaignCard {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "totalFundsRaised Total the campaign has raised so far including matching but excluding any\ntax relief, in major unit of currency e.g. pounds GBP."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Total the campaign has raised so far including matching but excluding any\ntax relief, in major unit of currency e.g. pounds GBP."
       },
       "attribute": "total-funds-raised",
       "reflect": false,
@@ -350,11 +334,8 @@ export class BiggiveCampaignCard {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "callToActionUrl Full URL of a call to action."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Full URL of a call to action."
       },
       "attribute": "call-to-action-url",
       "reflect": false,
@@ -371,11 +352,8 @@ export class BiggiveCampaignCard {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "callToActionLabel Text for the link to `callToActionUrl`."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Text for the link to `callToActionUrl`."
       },
       "attribute": "call-to-action-label",
       "reflect": false,

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

@@ -3,12 +3,7 @@
 }
 
 .grid {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -webkit-flex;
   display: flex;
-  -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
-  -webkit-justify-content: space-between;
   justify-content: space-between; 
-} 
+}

package/dist/collection/components/demo-campaign-cards/demo-campaign-cards.js

@@ -1,7 +1,7 @@
 import { Component, getAssetPath, h } from '@stencil/core';
 export class DemoCampaignCards {
   render() {
-    return (h("biggive-grid", null, [...Array(12)].map(() => (h("biggive-campaign-card", { banner: getAssetPath('/assets/images/banner.png'), "days-remaining": 50, target: 50000, "organisation-name": "Ardent Theatre Company", "campaign-type": "Match Funded", "campaign-title": "Strike! A play by Tracy Ryan", categories: "Arts/Culture/Heritage|Environment/Conservation|Health/Wellbeing", beneficiaries: "General Public/Humankind", "match-funds-remaining": 17424, "total-funds-raised": 15424, "call-to-action-url": "#", "call-to-action-label": "Donate" })))));
+    return (h("biggive-grid", null, [...Array(12)].map(() => (h("biggive-campaign-card", { banner: getAssetPath('/assets/images/banner.png'), daysRemaining: 50, currencyCode: "GBP", target: 50000, organisationName: "Ardent Theatre Company", campaignType: "Match Funded", campaignTitle: "Strike! A play by Tracy Ryan", categories: ['Arts/Culture/Heritage', 'Environment/Conservation', 'Health/Wellbeing'], beneficiaries: ['General Public/Humankind'], matchFundsRemaining: 17424, totalFundsRaised: 15424, callToActionUrl: "#", callToActionLabel: "Donate" })))));
   }
   static get is() { return "demo-campaign-cards"; }
   static get encapsulation() { return "shadow"; }

package/dist/components/biggive-campaign-card2.js

@@ -318,7 +318,7 @@ class CampaignGroupsService {
   }
 }
 
-const biggiveCampaignCardCss = ":host{display:block;margin-bottom:30px}:host([column='1-5']){width:100%}:host([column='1-2']){width:calc(50% - (30px / 2))}:host([column='1-3']){width:calc(33.3% - (60px / 3))}:host([column='1-4']){width:calc(25% - (90px / 4))}:host([column='1-5']){width:calc(20% - (120px / 5))}.container{font-family:'Euclid Triangle', sans-serif;filter:drop-shadow(-1px 6px 3px rgba(0,0,0,0.25))}.sleeve{clip-path:polygon(\n      0% 0%,     \n      0% 0%,     \n      100% 0%,    \n      100% 0%,   \n      100% 100%,  \n      100% 100%,  \n      10% 100%,   \n      0 90%      \n    )}.content{padding:15px;background-color:#FFFFFF}.campaign-type{margin-left:15px;width:0;height:0;border-style:inset;border-width:86.6px 50px 0 50px;border-color:#2AF135 transparent transparent transparent;float:left;transform:rotate(360deg)}.campaign-type span{display:block;text-align:center;top:-75px;left:-25px;position:relative;width:46.5px;height:46.5px;margin:0;color:#2C089B;font-size:12px}.banner{padding-bottom:30%;background-repeat:no-repeat;background-position:center center;background-size:cover}.banner img{display:none}.meta-wrap.style-1{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-1 .meta-item{width:50%}.meta-wrap.style-1 .meta-item .label{font-weight:bold}.meta-wrap.style-1 .meta-item .text{color:#2C089B}header{margin-bottom:20px}header .slug{text-transform:uppercase;font-size:12px;line-height:14px}header h3{margin:0;padding:0;font-size:24px;line-height:28px}.meta-wrap.style-2{display:flex;font-size:12px;line-height:14px;margin-bottom:40px}.meta-wrap.style-2 .meta-item{width:50%}.meta-wrap.style-2 .meta-item .label{font-weight:bold;display:block;margin-bottom:10px}.meta-wrap.style-2 .meta-item .text{display:block;font-size:16px;line-height:18px}.meta-wrap.style-2 .meta-item .text i{margin-right:10px}.meta-wrap.style-3{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-3 .meta-item{margin-right:60px}.meta-wrap.style-3 .meta-item .label{font-weight:bold;display:block;font-size:12px;line-height:14px;margin-bottom:10px}.meta-wrap.style-3 .meta-item .text{display:block;font-size:36px;line-height:40px;font-weight:bold}.meta-wrap.style-3 .meta-item:last-child .text{color:#2C089B}.button-wrap{text-align:right}.button-wrap a{display:inline-block;padding:15px 30px;color:#FFFFFF;background-color:#2C089B;cursor:pointer;text-transform:uppercase;font-size:12px;text-decoration:none}.icon{height:1rem;width:2rem;vertical-align:-.125rem}";
+const biggiveCampaignCardCss = ":host{display:block;margin-bottom:30px}.container{font-family:\"Euclid Triangle\", sans-serif;filter:drop-shadow(-1px 6px 3px rgba(0, 0, 0, 0.25))}.sleeve{clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 10% 100%, 0 90%)}.content{padding:15px;background-color:#FFFFFF}.campaign-type{margin-left:15px;width:0;height:0;border-style:inset;border-width:85px 45px 0 45px;border-color:#2AF135 transparent transparent transparent;float:left;transform:rotate(360deg)}.campaign-type span{display:block;text-align:center;top:-85px;left:-25px;position:relative;width:45px;height:45px;margin:0;color:#2C089B;font-size:0.9rem}.banner{padding-bottom:30%;background-repeat:no-repeat;background-position:center center;background-size:cover}.banner img{display:none}.meta-wrap.style-1{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-1 .meta-item{width:50%}.meta-wrap.style-1 .meta-item .label{font-weight:bold}.meta-wrap.style-1 .meta-item .text{color:#2C089B}header{margin-bottom:20px}header .slug{text-transform:uppercase;font-size:12px;line-height:14px}header h3{margin:0;padding:0;font-size:24px;line-height:28px}.meta-wrap.style-2{display:flex;font-size:12px;line-height:14px;margin-bottom:40px}.meta-wrap.style-2 .meta-item{width:50%}.meta-wrap.style-2 .meta-item .label{font-weight:bold;display:block;margin-bottom:10px}.meta-wrap.style-2 .meta-item .text{display:block;font-size:16px;line-height:18px}.meta-wrap.style-2 .meta-item .text i{margin-right:10px}.meta-wrap.style-3{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-3 .meta-item{margin-right:60px}.meta-wrap.style-3 .meta-item .label{font-weight:bold;display:block;font-size:12px;line-height:14px;margin-bottom:10px}.meta-wrap.style-3 .meta-item .text{display:block;font-size:36px;line-height:40px;font-weight:bold}.meta-wrap.style-3 .meta-item:last-child .text{color:#2C089B}.button-wrap{text-align:right}.button-wrap a{display:inline-block;padding:15px 30px;color:#FFFFFF;background-color:#2C089B;cursor:pointer;text-transform:uppercase;font-size:12px;text-decoration:none}.icon{height:1rem;width:2rem;vertical-align:-0.125rem}";
 
 const BiggiveCampaignCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -326,82 +326,90 @@ const BiggiveCampaignCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     this.__registerHost();
     this.__attachShadow();
     /**
-     * @param {string} banner Full URL of a banner image.
+     * Full URL of a banner image.
      */
     this.banner = '';
     /**
-     * @param {string} number (Ceiling of) whole number of days until campaign end.
+     * (Ceiling of) whole number of days until campaign end.
      */
     this.daysRemaining = null;
     /**
-     * @param {number} totalFundsRaised Target for the campaign including matching but excluding any
-     *                                        tax relief, in major unit of currency e.g. pounds GBP.
+     * Target for the campaign including matching but excluding any
+     * tax relief, in major unit of currency e.g. pounds GBP.
      */
     this.target = null;
     /**
-     * @param {string} organisationName Display name of the charity or non-profit.
+     * Display name of the charity or non-profit.
      */
     this.organisationName = null;
     /**
-     * @param {string} organisationName Display name of the charity's specific time-bound fundraising campaign.
+     * Display name of the charity's specific time-bound fundraising campaign.
      */
     this.campaignTitle = null;
     /**
-     * @param {string} campaignType e.g. "Match Funded".
+     * e.g. "Match Funded".
      */
     this.campaignType = null;
     /**
-     * @param {string} beneficiaries Pipe (|) -separated list of full category labels.
+     * Array of full beneficiary labels.
      */
-    this.beneficiaries = '';
+    this.beneficiaries = [];
     /**
-     * @param {string} categories Pipe (|) -separated list of full category labels.
+     * Array of full category labels.
      */
-    this.categories = '';
+    this.categories = [];
     /**
-     * @param {number} totalFundsRaised Match funds not yet used or reserved, in major unit of currency
-     *                                        e.g. pounds GBP.
+     * Match funds not yet used or reserved, in major unit of currency e.g. pounds GBP.
      */
     this.matchFundsRemaining = null;
     /**
-     * @param {number} totalFundsRaised Total the campaign has raised so far including matching but excluding any
-     *                                  tax relief, in major unit of currency e.g. pounds GBP.
+     * Total the campaign has raised so far including matching but excluding any
+     * tax relief, in major unit of currency e.g. pounds GBP.
      */
     this.totalFundsRaised = null;
     /**
-     * @param {string} callToActionUrl Full URL of a call to action.
+     * Full URL of a call to action.
      */
     this.callToActionUrl = null;
     /**
-     * @param {string} callToActionLabel Text for the link to `callToActionUrl`.
+     * Text for the link to `callToActionUrl`.
      */
     this.callToActionLabel = null;
   }
   getBeneficiaryIcons() {
-    return this.beneficiaries.length > 0 ? this.beneficiaries.split('|').map(beneficiary => CampaignGroupsService.getBeneficiaryIcon(beneficiary)) : [];
+    return this.beneficiaries.map(beneficiary => CampaignGroupsService.getBeneficiaryIcon(beneficiary));
   }
   getCategoryIcons() {
-    return this.categories.length > 0 ? this.categories.split('|').map(category => CampaignGroupsService.getCategoryIcon(category)) : [];
+    return this.categories.map(category => CampaignGroupsService.getCategoryIcon(category));
   }
-  formatCurrency(num) {
-    if (!isNaN(num)) {
-      return parseInt(num).toLocaleString();
+  /**
+   * @returns Whole large currency units (e.g. pounds) formatted with symbol.
+   */
+  formatCurrency(currencyCode, amount) {
+    if (amount === null || isNaN(amount)) {
+      return '–';
     }
-    return num;
+    return Intl.NumberFormat('en-GB', {
+      style: 'currency',
+      currency: currencyCode,
+      currencyDisplay: 'symbol',
+      maximumFractionDigits: 0,
+    }).format(amount);
   }
   render() {
-    return (h("div", { class: "container" }, h("div", { class: "sleeve" }, h("div", { class: "campaign-type" }, h("span", null, this.campaignType)), this.banner.length > 0 ? (h("div", { class: "image-wrap banner", style: { 'background-image': 'url(' + this.banner + ')' } }, h("img", { src: this.banner, class: "banner" }))) : null, h("div", { class: "content" }, h("div", { class: "meta-wrap style-1" }, h("div", { class: "meta-item" }, h("span", { class: "label" }, "Days Remaining:"), " ", h("span", { class: "text" }, this.daysRemaining)), h("div", { class: "meta-item" }, h("span", { class: "label" }, "Target:"), " ", h("span", { class: "text" }, "\u00A3", this.formatCurrency(this.target)))), h("header", null, h("div", { class: "slug" }, this.organisationName), h("h3", null, this.campaignTitle)), h("div", { class: "meta-wrap style-2" }, h("div", { class: "meta-item" }, h("span", { class: "label" }, "Categories"), h("span", { class: "text" }, this.getCategoryIcons().map((iconDefinition) => (h("svg", { width: "512", height: "512", xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { d: iconDefinition.icon[4].toString() })))))), h("div", { class: "meta-item" }, h("span", { class: "label" }, "Helping"), h("span", { class: "text" }, this.getBeneficiaryIcons().map(iconDefinition => (h("svg", { width: "512", height: "512", xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { d: iconDefinition.icon[4].toString() }))))))), h("div", { class: "meta-wrap style-3" }, h("div", { class: "meta-item" }, h("span", { class: "label" }, "Match", h("br", null), "Funds Remaining"), h("span", { class: "text" }, "\u00A3", this.formatCurrency(this.matchFundsRemaining))), h("div", { class: "meta-item" }, h("span", { class: "label" }, "Total", h("br", null), "Funds Received"), h("span", { class: "text" }, "\u00A3", this.formatCurrency(this.totalFundsRaised)))), h("div", { class: "button-wrap" }, h("a", { href: this.callToActionUrl, class: "call-to-action" }, this.callToActionLabel))))));
+    return (h("div", { class: "container" }, h("div", { class: "sleeve" }, h("div", { class: "campaign-type" }, h("span", null, this.campaignType)), this.banner.length > 0 ? (h("div", { class: "image-wrap banner", style: { 'background-image': 'url(' + this.banner + ')' } }, h("img", { src: this.banner, class: "banner" }))) : null, h("div", { class: "content" }, h("div", { class: "meta-wrap style-1" }, h("div", { class: "meta-item" }, h("span", { class: "label" }, "Days Remaining:"), " ", h("span", { class: "text" }, this.daysRemaining)), h("div", { class: "meta-item" }, h("span", { class: "label" }, "Target:"), " ", h("span", { class: "text" }, this.formatCurrency(this.currencyCode, this.target)))), h("header", null, h("div", { class: "slug" }, this.organisationName), h("h3", null, this.campaignTitle)), h("div", { class: "meta-wrap style-2" }, h("div", { class: "meta-item" }, h("span", { class: "label" }, "Categories"), h("span", { class: "text" }, this.getCategoryIcons().map((iconDefinition) => (h("svg", { width: "512", height: "512", xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { d: iconDefinition.icon[4].toString() })))))), h("div", { class: "meta-item" }, h("span", { class: "label" }, "Helping"), h("span", { class: "text" }, this.getBeneficiaryIcons().map(iconDefinition => (h("svg", { width: "512", height: "512", xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { d: iconDefinition.icon[4].toString() }))))))), h("div", { class: "meta-wrap style-3" }, h("div", { class: "meta-item" }, h("span", { class: "label" }, "Match", h("br", null), "Funds Remaining"), h("span", { class: "text" }, this.formatCurrency(this.currencyCode, this.matchFundsRemaining))), h("div", { class: "meta-item" }, h("span", { class: "label" }, "Total", h("br", null), "Funds Received"), h("span", { class: "text" }, this.formatCurrency(this.currencyCode, this.totalFundsRaised)))), h("div", { class: "button-wrap" }, h("a", { href: this.callToActionUrl, class: "call-to-action" }, this.callToActionLabel))))));
   }
   static get style() { return biggiveCampaignCardCss; }
 }, [1, "biggive-campaign-card", {
     "banner": [1],
     "daysRemaining": [2, "days-remaining"],
+    "currencyCode": [1, "currency-code"],
     "target": [2],
     "organisationName": [1, "organisation-name"],
     "campaignTitle": [1, "campaign-title"],
     "campaignType": [1, "campaign-type"],
-    "beneficiaries": [1],
-    "categories": [1],
+    "beneficiaries": [16],
+    "categories": [16],
     "matchFundsRemaining": [2, "match-funds-remaining"],
     "totalFundsRaised": [2, "total-funds-raised"],
     "callToActionUrl": [1, "call-to-action-url"],

package/dist/components/biggive-grid2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const biggiveGridCss = ":host{display:block}.grid{display:-webkit-box;display:-moz-box;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-justify-content:space-between;justify-content:space-between}";
+const biggiveGridCss = ":host{display:block}.grid{display:flex;flex-flow:row wrap;justify-content:space-between}";
 
 const BiggiveGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/demo-campaign-cards.js

@@ -11,7 +11,7 @@ const DemoCampaignCards$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     this.__attachShadow();
   }
   render() {
-    return (h("biggive-grid", null, [...Array(12)].map(() => (h("biggive-campaign-card", { banner: getAssetPath('/assets/images/banner.png'), "days-remaining": 50, target: 50000, "organisation-name": "Ardent Theatre Company", "campaign-type": "Match Funded", "campaign-title": "Strike! A play by Tracy Ryan", categories: "Arts/Culture/Heritage|Environment/Conservation|Health/Wellbeing", beneficiaries: "General Public/Humankind", "match-funds-remaining": 17424, "total-funds-raised": 15424, "call-to-action-url": "#", "call-to-action-label": "Donate" })))));
+    return (h("biggive-grid", null, [...Array(12)].map(() => (h("biggive-campaign-card", { banner: getAssetPath('/assets/images/banner.png'), daysRemaining: 50, currencyCode: "GBP", target: 50000, organisationName: "Ardent Theatre Company", campaignType: "Match Funded", campaignTitle: "Strike! A play by Tracy Ryan", categories: ['Arts/Culture/Heritage', 'Environment/Conservation', 'Health/Wellbeing'], beneficiaries: ['General Public/Humankind'], matchFundsRemaining: 17424, totalFundsRaised: 15424, callToActionUrl: "#", callToActionLabel: "Donate" })))));
   }
   static get style() { return demoCampaignCardsCss; }
 }, [1, "demo-campaign-cards"]);