@biggive/components 0.0.21 → 0.0.23

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

@@ -1,63 +1,70 @@
 import { Component, Prop, h } from '@stencil/core';
-import { CampaignGroupsService } from '../../util/campaign-groups';
 export class BiggiveCampaignCard {
   constructor() {
     /**
-     * Full URL of a banner image.
+     * Space below component
      */
-    this.banner = '';
+    this.spaceBelow = 4;
     /**
-     * (Ceiling of) whole number of days until campaign end.
+     * e.g. "Match Funded".
      */
-    this.daysRemaining = null;
+    this.campaignType = null;
     /**
-     * Target for the campaign including matching but excluding any
-     * tax relief, in major unit of currency e.g. pounds GBP.
+     * Full URL of a banner image.
+     */
+    this.banner = '';
+    /**
+     * Display name of the charity's specific time-bound fundraising campaign.
      */
-    this.target = null;
+    this.campaignTitle = null;
     /**
      * Display name of the charity or non-profit.
      */
     this.organisationName = null;
     /**
-     * Display name of the charity's specific time-bound fundraising campaign.
+     * Label for the primary figure
      */
-    this.campaignTitle = null;
+    this.primaryFigureLabel = null;
     /**
-     * e.g. "Match Funded".
+     * Amount for the primary figure
      */
-    this.campaignType = null;
+    this.primaryFigureAmount = null;
     /**
-     * Array of full beneficiary labels.
+     * Label for the secondary figure
      */
-    this.beneficiaries = [];
+    this.secondaryFigureLabel = null;
     /**
-     * Array of full category labels.
+     * Amount for the secondary figure
      */
-    this.categories = [];
+    this.secondaryFigureAmount = null;
     /**
-     * Match funds not yet used or reserved, in major unit of currency e.g. pounds GBP.
+     * Progress bar percentage
      */
-    this.matchFundsRemaining = null;
+    this.progressBarCounter = 100;
     /**
-     * Total the campaign has raised so far including matching but excluding any
-     * tax relief, in major unit of currency e.g. pounds GBP.
+     * Donate button label
      */
-    this.totalFundsRaised = null;
+    this.donateButtonLabel = 'Donate now';
     /**
-     * Full URL of a call to action.
+     * Donate button url
      */
-    this.callToActionUrl = null;
+    this.donateButtonUrl = null;
     /**
-     * Text for the link to `callToActionUrl`.
+     * Donate button colour scheme
      */
-    this.callToActionLabel = null;
-  }
-  getBeneficiaryIcons() {
-    return this.beneficiaries.map(beneficiary => CampaignGroupsService.getBeneficiaryIcon(beneficiary));
-  }
-  getCategoryIcons() {
-    return this.categories.map(category => CampaignGroupsService.getCategoryIcon(category));
+    this.donateButtonColourScheme = 'primary';
+    /**
+     * More information button label
+     */
+    this.moreInfoButtonLabel = 'Find out more';
+    /**
+     * More information button url
+     */
+    this.moreInfoButtonUrl = null;
+    /**
+     * Donate button colour scheme
+     */
+    this.moreInfoButtonColourScheme = 'clear-primary';
   }
   /**
    * @returns Whole large currency units (e.g. pounds) formatted with symbol.
@@ -74,49 +81,29 @@ export class BiggiveCampaignCard {
     }).format(amount);
   }
   render() {
-    return (h("div", { class: "container" },
+    return (h("div", { class: 'container space-below-' + this.spaceBelow.toString() },
       h("div", { class: "sleeve" },
-        h("div", { class: "campaign-type" },
-          h("span", null, this.campaignType)),
+        this.campaignType.length > 0 ? (h("div", { class: "campaign-type" },
+          h("span", null, this.campaignType))) : null,
         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))))));
+          h("img", { src: this.banner, class: "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.formatCurrency(this.currencyCode, this.primaryFigureAmount))),
+          h("div", { class: "meta-item" },
+            h("span", { class: "label" }, this.secondaryFigureLabel),
+            h("span", { class: "text" }, this.formatCurrency(this.currencyCode, 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 }),
+          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"; }
@@ -127,43 +114,43 @@ export class BiggiveCampaignCard {
     "$": ["biggive-campaign-card.css"]
   }; }
   static get properties() { return {
-    "banner": {
-      "type": "string",
+    "spaceBelow": {
+      "type": "number",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "number",
+        "resolved": "number",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Full URL of a banner image."
+        "text": "Space below component"
       },
-      "attribute": "banner",
+      "attribute": "space-below",
       "reflect": false,
-      "defaultValue": "''"
+      "defaultValue": "4"
     },
-    "daysRemaining": {
-      "type": "number",
+    "campaignType": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "number",
-        "resolved": "number",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "(Ceiling of) whole number of days until campaign end."
+        "text": "e.g. \"Match Funded\"."
       },
-      "attribute": "days-remaining",
+      "attribute": "campaign-type",
       "reflect": false,
       "defaultValue": "null"
     },
-    "currencyCode": {
+    "banner": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -175,26 +162,27 @@ export class BiggiveCampaignCard {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "e.g. 'GBP'."
+        "text": "Full URL of a banner image."
       },
-      "attribute": "currency-code",
-      "reflect": false
+      "attribute": "banner",
+      "reflect": false,
+      "defaultValue": "''"
     },
-    "target": {
-      "type": "number",
+    "campaignTitle": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "number",
-        "resolved": "number",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Target for the campaign including matching but excluding any\ntax relief, in major unit of currency e.g. pounds GBP."
+        "text": "Display name of the charity's specific time-bound fundraising campaign."
       },
-      "attribute": "target",
+      "attribute": "campaign-title",
       "reflect": false,
       "defaultValue": "null"
     },
@@ -216,7 +204,7 @@ export class BiggiveCampaignCard {
       "reflect": false,
       "defaultValue": "null"
     },
-    "campaignTitle": {
+    "currencyCode": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -228,13 +216,12 @@ export class BiggiveCampaignCard {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Display name of the charity's specific time-bound fundraising campaign."
+        "text": "e.g. 'GBP'."
       },
-      "attribute": "campaign-title",
-      "reflect": false,
-      "defaultValue": "null"
+      "attribute": "currency-code",
+      "reflect": false
     },
-    "campaignType": {
+    "primaryFigureLabel": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -246,45 +233,49 @@ export class BiggiveCampaignCard {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "e.g. \"Match Funded\"."
+        "text": "Label for the primary figure"
       },
-      "attribute": "campaign-type",
+      "attribute": "primary-figure-label",
       "reflect": false,
       "defaultValue": "null"
     },
-    "beneficiaries": {
-      "type": "unknown",
+    "primaryFigureAmount": {
+      "type": "number",
       "mutable": false,
       "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
+        "original": "number",
+        "resolved": "number",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Array of full beneficiary labels."
+        "text": "Amount for the primary figure"
       },
-      "defaultValue": "[]"
+      "attribute": "primary-figure-amount",
+      "reflect": false,
+      "defaultValue": "null"
     },
-    "categories": {
-      "type": "unknown",
+    "secondaryFigureLabel": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Array of full category labels."
+        "text": "Label for the secondary figure"
       },
-      "defaultValue": "[]"
+      "attribute": "secondary-figure-label",
+      "reflect": false,
+      "defaultValue": "null"
     },
-    "matchFundsRemaining": {
+    "secondaryFigureAmount": {
       "type": "number",
       "mutable": false,
       "complexType": {
@@ -296,13 +287,13 @@ export class BiggiveCampaignCard {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Match funds not yet used or reserved, in major unit of currency e.g. pounds GBP."
+        "text": "Amount for the secondary figure"
       },
-      "attribute": "match-funds-remaining",
+      "attribute": "secondary-figure-amount",
       "reflect": false,
       "defaultValue": "null"
     },
-    "totalFundsRaised": {
+    "progressBarCounter": {
       "type": "number",
       "mutable": false,
       "complexType": {
@@ -314,13 +305,13 @@ export class BiggiveCampaignCard {
       "optional": false,
       "docs": {
         "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."
+        "text": "Progress bar percentage"
       },
-      "attribute": "total-funds-raised",
+      "attribute": "progress-bar-counter",
       "reflect": false,
-      "defaultValue": "null"
+      "defaultValue": "100"
     },
-    "callToActionUrl": {
+    "donateButtonLabel": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -332,13 +323,31 @@ export class BiggiveCampaignCard {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Full URL of a call to action."
+        "text": "Donate button label"
       },
-      "attribute": "call-to-action-url",
+      "attribute": "donate-button-label",
+      "reflect": false,
+      "defaultValue": "'Donate now'"
+    },
+    "donateButtonUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Donate button url"
+      },
+      "attribute": "donate-button-url",
       "reflect": false,
       "defaultValue": "null"
     },
-    "callToActionLabel": {
+    "donateButtonColourScheme": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -350,11 +359,65 @@ export class BiggiveCampaignCard {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Text for the link to `callToActionUrl`."
+        "text": "Donate button colour scheme"
       },
-      "attribute": "call-to-action-label",
+      "attribute": "donate-button-colour-scheme",
+      "reflect": false,
+      "defaultValue": "'primary'"
+    },
+    "moreInfoButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "More information button label"
+      },
+      "attribute": "more-info-button-label",
+      "reflect": false,
+      "defaultValue": "'Find out more'"
+    },
+    "moreInfoButtonUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "More information button url"
+      },
+      "attribute": "more-info-button-url",
       "reflect": false,
       "defaultValue": "null"
+    },
+    "moreInfoButtonColourScheme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Donate button colour scheme"
+      },
+      "attribute": "more-info-button-colour-scheme",
+      "reflect": false,
+      "defaultValue": "'clear-primary'"
     }
   }; }
 }

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

@@ -0,0 +1,105 @@
+export default {
+  title: 'Components/Campaign Features',
+  argTypes: {
+    spaceBelow: {
+      name: 'Space below',
+      control: {
+        type: 'select',
+        options: [0, 1, 2, 3, 4, 5, 6],
+      },
+    },
+    banner: {
+      name: 'Banner image url',
+    },
+    currencyCode: {
+      name: 'Currency code',
+    },
+    primaryFigureLabel: {
+      name: 'Primary figure label',
+    },
+    primaryFigureAmount: {
+      name: 'Primary figure amount',
+    },
+    secondaryFigureLabel: {
+      name: 'Secondary figure label',
+    },
+    secondaryFigureAmount: {
+      name: 'Secondary figure amount',
+    },
+    campaignTitle: {
+      name: 'Campaign title',
+    },
+    campaignType: {
+      name: 'Campaign type',
+    },
+    organisationName: {
+      name: 'Organisation name',
+    },
+    progressBarCounter: {
+      name: 'Progress bar counter',
+    },
+    donateButtonUrl: {
+      name: 'Donate button url',
+    },
+    donateButtonLabel: {
+      name: 'Donate button label',
+    },
+    donateButtonColourScheme: {
+      name: 'Donate button colour scheme',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'white', 'black', 'clear-primary', 'clear-secondary', 'clear-tertiary', 'clear-white', 'clear-black'],
+      },
+    },
+    moreInfoButtonUrl: {
+      name: 'More info button url',
+    },
+    moreInfoButtonLabel: {
+      name: 'More info button label',
+    },
+    moreInfoButtonColourScheme: {
+      name: 'More info button colour scheme',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'white', 'black', 'clear-primary', 'clear-secondary', 'clear-tertiary', 'clear-white', 'clear-black'],
+      },
+    },
+  },
+};
+const Template = args => `
+      <biggive-campaign-card
+        space-below=${args.spaceBelow}
+        banner="${args.banner}"
+        currency-code="${args.currencyCode}"
+        primary-figure-label=${args.primaryFigureLabel}
+        primary-figure-amount=${args.primaryFigureAmount}
+        secondary-figure-label=${args.secondaryFigureLabel}
+        secondary-figure-amount=${args.secondaryFigureAmount}
+        campaign-title=${args.campaignTitle}
+        campaign-type=${args.campaignType}
+        organisation-name=${args.organisationName}
+        progress-bar-counter=${args.progressBarCounter}
+        donate-button-label=${args.donateButtonLabel}
+        donate-button-url=${args.donateButtonUrl}
+        more-info-button-label=${args.moreInfoButtonLabel}
+        more-info-button-url=${args.moreInfoButtonUrl}
+      </biggive-campaign-card>
+      `;
+export const CampaignCardComponent = Template.bind({});
+CampaignCardComponent.args = {
+  spaceBelow: 0,
+  banner: 'https://media.istockphoto.com/vectors/childish-seamless-dotted-pattern-with-colorful-doodle-letters-fun-vector-id1208462693',
+  currencyCode: 'GBP',
+  primaryFigureLabel: 'Total raised',
+  primaryFigureAmount: 1000,
+  secondaryFigureLabel: 'Total remaining',
+  secondaryFigureAmount: 1000,
+  campaignTitle: 'My Campaign Title',
+  campaignType: 'Match funding',
+  organisationName: 'My Test Organisation',
+  progressBarCounter: 100,
+  donateButtonLabel: 'Donate now',
+  donateButtonUrl: '#',
+  moreInfoButtonLabel: 'More information',
+  moreInfoButtonUrl: '#',
+};