@biggive/components 0.0.21 → 0.0.23

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

@@ -0,0 +1,339 @@
+import { Component, Prop, h } from '@stencil/core';
+export class BiggiveCampaignHighlights {
+  constructor() {
+    /**
+     * Space below component
+     */
+    this.spaceBelow = 0;
+    /**
+     * Full URL of a banner image.
+     */
+    this.banner = '';
+    /**
+     * Display name of the charity's specific time-bound fundraising campaign.
+     */
+    this.campaignTitle = null;
+    /**
+     * e.g. 'GBP'.
+     */
+    this.currencyCode = 'GBP';
+    /**
+     * Label for the primary figure
+     */
+    this.primaryFigureLabel = null;
+    /**
+     * Amount for the primary figure
+     */
+    this.primaryFigureAmount = null;
+    /**
+     * Label for the secondary figure
+     */
+    this.secondaryFigureLabel = null;
+    /**
+     * Amount for the secondary figure
+     */
+    this.secondaryFigureAmount = null;
+    /**
+     * Progress bar percentage
+     */
+    this.progressBarCounter = 100;
+    /**
+     * Primary stat icon
+     */
+    this.primaryStatIcon = null;
+    /**
+     * Primary stat text
+     */
+    this.primaryStatText = null;
+    /**
+     * Secondary stat icon
+     */
+    this.secondaryStatIcon = null;
+    /**
+     * Secondary stat text
+     */
+    this.secondaryStatText = null;
+  }
+  /**
+   * @returns Whole large currency units (e.g. pounds) formatted with symbol.
+   */
+  formatCurrency(currencyCode, amount) {
+    if (amount === null || isNaN(amount)) {
+      return '–';
+    }
+    return Intl.NumberFormat('en-GB', {
+      style: 'currency',
+      currency: currencyCode,
+      currencyDisplay: 'symbol',
+      maximumFractionDigits: 0,
+    }).format(amount);
+  }
+  render() {
+    return (h("div", { class: 'container space-below-' + this.spaceBelow },
+      h("div", { class: "sleeve" },
+        this.campaignTitle != null ? (h("div", { class: "campaign-title" },
+          h("span", null, this.campaignTitle))) : 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: "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: "stat-wrap" },
+          this.primaryStatIcon != null ? (h("div", { class: "stat-item" },
+            h("biggive-misc-icon", { icon: this.primaryStatIcon, "background-colour": "white", "icon-colour": "tertiary" }),
+            h("span", { class: "label" }, this.primaryStatText))) : null,
+          this.secondaryStatIcon != null ? (h("div", { class: "stat-item" },
+            h("biggive-misc-icon", { icon: this.secondaryStatIcon, "background-colour": "white", "icon-colour": "tertiary" }),
+            h("span", { class: "label" }, this.secondaryStatText))) : null))));
+  }
+  static get is() { return "biggive-campaign-highlights"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["biggive-campaign-highlights.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["biggive-campaign-highlights.css"]
+  }; }
+  static get properties() { return {
+    "spaceBelow": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Space below component"
+      },
+      "attribute": "space-below",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "banner": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Full URL of a banner image."
+      },
+      "attribute": "banner",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "campaignTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Display name of the charity's specific time-bound fundraising campaign."
+      },
+      "attribute": "campaign-title",
+      "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,
+      "defaultValue": "'GBP'"
+    },
+    "primaryFigureLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label for the primary figure"
+      },
+      "attribute": "primary-figure-label",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "primaryFigureAmount": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Amount for the primary figure"
+      },
+      "attribute": "primary-figure-amount",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "secondaryFigureLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label for the secondary figure"
+      },
+      "attribute": "secondary-figure-label",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "secondaryFigureAmount": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Amount for the secondary figure"
+      },
+      "attribute": "secondary-figure-amount",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "progressBarCounter": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Progress bar percentage"
+      },
+      "attribute": "progress-bar-counter",
+      "reflect": false,
+      "defaultValue": "100"
+    },
+    "primaryStatIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Primary stat icon"
+      },
+      "attribute": "primary-stat-icon",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "primaryStatText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Primary stat text"
+      },
+      "attribute": "primary-stat-text",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "secondaryStatIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Secondary stat icon"
+      },
+      "attribute": "secondary-stat-icon",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "secondaryStatText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Secondary stat text"
+      },
+      "attribute": "secondary-stat-text",
+      "reflect": false,
+      "defaultValue": "null"
+    }
+  }; }
+}

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

@@ -0,0 +1,89 @@
+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',
+    },
+    campaignTitle: {
+      name: 'Camapign title',
+    },
+    currencyCode: {
+      name: 'Currency code',
+    },
+    primaryFigureLabel: {
+      name: 'Primary figure label',
+    },
+    primaryFigureAmount: {
+      name: 'Primary figure amount',
+    },
+    secondaryFigureLabel: {
+      name: 'Secondary figure label',
+    },
+    secondaryFigureAmount: {
+      name: 'Secondary figure amount',
+    },
+    progressBarCounter: {
+      name: 'Progress bar counter',
+    },
+    primaryStatIcon: {
+      name: 'Primary stat icon',
+      control: {
+        type: 'select',
+        options: ['heart', 'AlarmClock'],
+      },
+    },
+    primaryStatText: {
+      name: 'Primary stat text',
+    },
+    secondaryStatIcon: {
+      name: 'Secondary stat icon',
+      control: {
+        type: 'select',
+        options: ['heart', 'AlarmClock'],
+      },
+    },
+    secondaryStatText: {
+      name: 'Secondary stat text',
+    },
+  },
+};
+const Template = args => `
+        <biggive-campaign-highlights
+          space-below=${args.spaceBelow}
+          banner="${args.banner}"
+          campaign-title="${args.campaignTitle}"
+          currency-code="${args.currencyCode}"
+          primary-figure-label=${args.primaryFigureLabel}
+          primary-figure-amount=${args.primaryFigureAmount}
+          secondary-figure-label=${args.secondaryFigureLabel}
+          secondary-figure-amount=${args.secondaryFigureAmount}
+          progress-bar-counter=${args.progressBarCounter}
+          primary-stat-icon=${args.primaryStatIcon}
+          primary-stat-text=${args.primaryStatText}
+          secondary-stat-icon=${args.secondaryStatIcon}
+          secondary-stat-text=${args.secondaryStatText}
+        </biggive-campaign-highlights>
+        `;
+export const CampaignHighlightsComponent = Template.bind({});
+CampaignHighlightsComponent.args = {
+  spaceBelow: 0,
+  banner: 'https://media.istockphoto.com/vectors/childish-seamless-dotted-pattern-with-colorful-doodle-letters-fun-vector-id1208462693',
+  campaignTitle: 'this is my sample title',
+  currencyCode: 'GBP',
+  primaryFigureLabel: 'Total raised',
+  primaryFigureAmount: 1000,
+  secondaryFigureLabel: 'Total remaining',
+  secondaryFigureAmount: 1000,
+  progressBarCounter: 100,
+  primaryStatIcon: 'AlarmClock',
+  primaryStatText: 'this is the text',
+  secondaryStatIcon: 'Heart',
+  secondaryStatText: 'this is the text',
+};