@biggive/components 0.0.5 → 0.0.8

package/dist/esm/biggive-campaign-card_3.entry.js

@@ -318,82 +318,89 @@ 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 = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     /**
-     * @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))))));
   }
 };
 BiggiveCampaignCard.style = biggiveCampaignCardCss;
 
-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 = class {
   constructor(hostRef) {
@@ -412,7 +419,7 @@ const DemoCampaignCards = class {
     registerInstance(this, hostRef);
   }
   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" })))));
   }
 };
 DemoCampaignCards.style = demoCampaignCardsCss;

package/dist/esm/biggive.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["biggive-campaign-card_3",[[1,"demo-campaign-cards"],[1,"biggive-campaign-card",{"banner":[1],"daysRemaining":[2,"days-remaining"],"target":[2],"organisationName":[1,"organisation-name"],"campaignTitle":[1,"campaign-title"],"campaignType":[1,"campaign-type"],"beneficiaries":[1],"categories":[1],"matchFundsRemaining":[2,"match-funds-remaining"],"totalFundsRaised":[2,"total-funds-raised"],"callToActionUrl":[1,"call-to-action-url"],"callToActionLabel":[1,"call-to-action-label"]}],[1,"biggive-grid"]]]], options);
+  return bootstrapLazy([["biggive-campaign-card_3",[[1,"demo-campaign-cards"],[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":[16],"categories":[16],"matchFundsRemaining":[2,"match-funds-remaining"],"totalFundsRaised":[2,"total-funds-raised"],"callToActionUrl":[1,"call-to-action-url"],"callToActionLabel":[1,"call-to-action-label"]}],[1,"biggive-grid"]]]], options);
 });

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["biggive-campaign-card_3",[[1,"demo-campaign-cards"],[1,"biggive-campaign-card",{"banner":[1],"daysRemaining":[2,"days-remaining"],"target":[2],"organisationName":[1,"organisation-name"],"campaignTitle":[1,"campaign-title"],"campaignType":[1,"campaign-type"],"beneficiaries":[1],"categories":[1],"matchFundsRemaining":[2,"match-funds-remaining"],"totalFundsRaised":[2,"total-funds-raised"],"callToActionUrl":[1,"call-to-action-url"],"callToActionLabel":[1,"call-to-action-label"]}],[1,"biggive-grid"]]]], options);
+  return bootstrapLazy([["biggive-campaign-card_3",[[1,"demo-campaign-cards"],[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":[16],"categories":[16],"matchFundsRemaining":[2,"match-funds-remaining"],"totalFundsRaised":[2,"total-funds-raised"],"callToActionUrl":[1,"call-to-action-url"],"callToActionLabel":[1,"call-to-action-label"]}],[1,"biggive-grid"]]]], options);
   });
 };
 

package/dist/types/components/biggive-campaign-card/biggive-campaign-card.d.ts

@@ -3,58 +3,64 @@
  */
 export declare class BiggiveCampaignCard {
   /**
-   * @param {string} banner Full URL of a banner image.
+   * Full URL of a banner image.
    */
   banner: string;
   /**
-   * @param {string} number (Ceiling of) whole number of days until campaign end.
+   * (Ceiling of) whole number of days until campaign end.
    */
   daysRemaining: number;
   /**
-   * @param {number} totalFundsRaised Target for the campaign including matching but excluding any
-   *                                        tax relief, in major unit of currency e.g. pounds GBP.
+   * e.g. 'GBP'.
+   */
+  currencyCode: string;
+  /**
+   * Target for the campaign including matching but excluding any
+   * tax relief, in major unit of currency e.g. pounds GBP.
    */
   target: number;
   /**
-   * @param {string} organisationName Display name of the charity or non-profit.
+   * Display name of the charity or non-profit.
    */
   organisationName: string;
   /**
-   * @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.
    */
   campaignTitle: string;
   /**
-   * @param {string} campaignType e.g. "Match Funded".
+   * e.g. "Match Funded".
    */
   campaignType: string;
   /**
-   * @param {string} beneficiaries Pipe (|) -separated list of full category labels.
+   * Array of full beneficiary labels.
    */
-  beneficiaries: string;
+  beneficiaries: string[];
   /**
-   * @param {string} categories Pipe (|) -separated list of full category labels.
+   * Array of full category labels.
    */
-  categories: string;
+  categories: string[];
   /**
-   * @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.
    */
   matchFundsRemaining: number;
   /**
-   * @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.
    */
   totalFundsRaised: number;
   /**
-   * @param {string} callToActionUrl Full URL of a call to action.
+   * Full URL of a call to action.
    */
   callToActionUrl: string;
   /**
-   * @param {string} callToActionLabel Text for the link to `callToActionUrl`.
+   * Text for the link to `callToActionUrl`.
    */
   callToActionLabel: string;
   private getBeneficiaryIcons;
   private getCategoryIcons;
+  /**
+   * @returns Whole large currency units (e.g. pounds) formatted with symbol.
+   */
   private formatCurrency;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -8,51 +8,55 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 export namespace Components {
     interface BiggiveCampaignCard {
         /**
-          * @param banner Full URL of a banner image.
+          * Full URL of a banner image.
          */
         "banner": string;
         /**
-          * @param beneficiaries Pipe (|) -separated list of full category labels.
+          * Array of full beneficiary labels.
          */
-        "beneficiaries": string;
+        "beneficiaries": string[];
         /**
-          * @param callToActionLabel Text for the link to `callToActionUrl`.
+          * Text for the link to `callToActionUrl`.
          */
         "callToActionLabel": string;
         /**
-          * @param callToActionUrl Full URL of a call to action.
+          * Full URL of a call to action.
          */
         "callToActionUrl": string;
         /**
-          * @param organisationName Display name of the charity's specific time-bound fundraising campaign.
+          * Display name of the charity's specific time-bound fundraising campaign.
          */
         "campaignTitle": string;
         /**
-          * @param campaignType e.g. "Match Funded".
+          * e.g. "Match Funded".
          */
         "campaignType": string;
         /**
-          * @param categories Pipe (|) -separated list of full category labels.
+          * Array of full category labels.
          */
-        "categories": string;
+        "categories": string[];
         /**
-          * @param number (Ceiling of) whole number of days until campaign end.
+          * e.g. 'GBP'.
+         */
+        "currencyCode": string;
+        /**
+          * (Ceiling of) whole number of days until campaign end.
          */
         "daysRemaining": number;
         /**
-          * @param 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.
          */
         "matchFundsRemaining": number;
         /**
-          * @param organisationName Display name of the charity or non-profit.
+          * Display name of the charity or non-profit.
          */
         "organisationName": string;
         /**
-          * @param 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.
          */
         "target": number;
         /**
-          * @param 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.
          */
         "totalFundsRaised": number;
     }
@@ -89,51 +93,55 @@ declare global {
 declare namespace LocalJSX {
     interface BiggiveCampaignCard {
         /**
-          * @param banner Full URL of a banner image.
+          * Full URL of a banner image.
          */
         "banner"?: string;
         /**
-          * @param beneficiaries Pipe (|) -separated list of full category labels.
+          * Array of full beneficiary labels.
          */
-        "beneficiaries"?: string;
+        "beneficiaries"?: string[];
         /**
-          * @param callToActionLabel Text for the link to `callToActionUrl`.
+          * Text for the link to `callToActionUrl`.
          */
         "callToActionLabel"?: string;
         /**
-          * @param callToActionUrl Full URL of a call to action.
+          * Full URL of a call to action.
          */
         "callToActionUrl"?: string;
         /**
-          * @param organisationName Display name of the charity's specific time-bound fundraising campaign.
+          * Display name of the charity's specific time-bound fundraising campaign.
          */
         "campaignTitle"?: string;
         /**
-          * @param campaignType e.g. "Match Funded".
+          * e.g. "Match Funded".
          */
         "campaignType"?: string;
         /**
-          * @param categories Pipe (|) -separated list of full category labels.
+          * Array of full category labels.
+         */
+        "categories"?: string[];
+        /**
+          * e.g. 'GBP'.
          */
-        "categories"?: string;
+        "currencyCode"?: string;
         /**
-          * @param number (Ceiling of) whole number of days until campaign end.
+          * (Ceiling of) whole number of days until campaign end.
          */
         "daysRemaining"?: number;
         /**
-          * @param 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.
          */
         "matchFundsRemaining"?: number;
         /**
-          * @param organisationName Display name of the charity or non-profit.
+          * Display name of the charity or non-profit.
          */
         "organisationName"?: string;
         /**
-          * @param 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.
          */
         "target"?: number;
         /**
-          * @param 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.
          */
         "totalFundsRaised"?: number;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biggive/components",
-  "version": "0.0.5",
+  "version": "0.0.8",
   "description": "Big Give Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -20,11 +20,11 @@
   ],
   "scripts": {
     "build": "stencil build --docs",
-    "start": "stencil build --dev --watch --serve --port 3939",
+    "start": "stencil build --dev --watch --serve",
     "lint": "eslint src/**/*{.ts,.tsx}",
     "lint:fix": "eslint --fix src/**/*{.ts,.tsx}",
-    "test": "stencil test --spec --e2e --port 3939",
-    "test.watch": "stencil test --spec --e2e --watchAll --port 3939",
+    "test": "stencil test --spec --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
     "prepare": "husky install",
     "pre-commit": "lint-staged"
@@ -39,6 +39,7 @@
   },
   "devDependencies": {
     "@stencil/eslint-plugin": "^0.4.0",
+    "@stencil/sass": "^1.5.2",
     "@types/jest": "^27.0.3",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",

package/readme.md

@@ -66,7 +66,9 @@ For now:
   folder as the app's own images. This is the approach taken on [this proof of concept branch](https://github.com/thebiggive/donate-frontend/tree/COM-5-proof-of-concept).
   Should we find managing image assets messy in apps generally, an alternative approach we might
   try is importing images to component style and adding [`@rollup/plugin-image`](https://github.com/rollup/plugins/tree/master/packages/image/#readme)
-  to Stencil's build config.
+  to Stencil's build config. Or if there are only a few, we could also investigate
+  whether `assetsDirs` on a `@Component` folds in what's needed in a way that works
+  in Angular et al.
 
 ### Make any required changes to the sample web components