@biggive/components 0.0.1 → 0.0.4

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

@@ -0,0 +1,385 @@
+import { Component, Prop, h } from '@stencil/core';
+import { CampaignGroupsService } from '../../util/campaign-groups';
+/**
+ * @todo Currency code for the campaign must be passed as a `@Prop`, not localised to the prospective donor.
+ */
+export class BiggiveCampaignCard {
+  constructor() {
+    /**
+     * @param {string} banner Full URL of a banner image.
+     */
+    this.banner = '';
+    /**
+     * @param {string} number (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.
+     */
+    this.target = null;
+    /**
+     * @param {string} organisationName 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.
+     */
+    this.campaignTitle = null;
+    /**
+     * @param {string} campaignType e.g. "Match Funded".
+     */
+    this.campaignType = null;
+    /**
+     * @param {string} beneficiaries Pipe (|) -separated list of full category labels.
+     */
+    this.beneficiaries = '';
+    /**
+     * @param {string} categories Pipe (|) -separated list of full category labels.
+     */
+    this.categories = '';
+    /**
+     * @param {number} totalFundsRaised 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.
+     */
+    this.totalFundsRaised = null;
+    /**
+     * @param {string} callToActionUrl Full URL of a call to action.
+     */
+    this.callToActionUrl = null;
+    /**
+     * @param {string} callToActionLabel Text for the link to `callToActionUrl`.
+     */
+    this.callToActionLabel = null;
+  }
+  getBeneficiaryIcons() {
+    return this.beneficiaries.length > 0 ? this.beneficiaries.split('|').map(beneficiary => CampaignGroupsService.getBeneficiaryIcon(beneficiary)) : [];
+  }
+  getCategoryIcons() {
+    return this.categories.length > 0 ? this.categories.split('|').map(category => CampaignGroupsService.getCategoryIcon(category)) : [];
+  }
+  formatCurrency(num) {
+    if (!isNaN(num)) {
+      return parseInt(num).toLocaleString();
+    }
+    return num;
+  }
+  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))))));
+  }
+  static get is() { return "biggive-campaign-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["biggive-campaign-card.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["biggive-campaign-card.css"]
+  }; }
+  static get properties() { return {
+    "banner": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "param",
+            "text": "banner Full URL of a banner image."
+          }],
+        "text": ""
+      },
+      "attribute": "banner",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "daysRemaining": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "param",
+            "text": "number (Ceiling of) whole number of days until campaign end."
+          }],
+        "text": ""
+      },
+      "attribute": "days-remaining",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "target": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "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": ""
+      },
+      "attribute": "target",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "organisationName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "param",
+            "text": "organisationName Display name of the charity or non-profit."
+          }],
+        "text": ""
+      },
+      "attribute": "organisation-name",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "campaignTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "param",
+            "text": "organisationName Display name of the charity's specific time-bound fundraising campaign."
+          }],
+        "text": ""
+      },
+      "attribute": "campaign-title",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "campaignType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "param",
+            "text": "campaignType e.g. \"Match Funded\"."
+          }],
+        "text": ""
+      },
+      "attribute": "campaign-type",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "beneficiaries": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "param",
+            "text": "beneficiaries Pipe (|) -separated list of full category labels."
+          }],
+        "text": ""
+      },
+      "attribute": "beneficiaries",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "categories": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "param",
+            "text": "categories Pipe (|) -separated list of full category labels."
+          }],
+        "text": ""
+      },
+      "attribute": "categories",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "matchFundsRemaining": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "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": ""
+      },
+      "attribute": "match-funds-remaining",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "totalFundsRaised": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "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": ""
+      },
+      "attribute": "total-funds-raised",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "callToActionUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "param",
+            "text": "callToActionUrl Full URL of a call to action."
+          }],
+        "text": ""
+      },
+      "attribute": "call-to-action-url",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "callToActionLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "param",
+            "text": "callToActionLabel Text for the link to `callToActionUrl`."
+          }],
+        "text": ""
+      },
+      "attribute": "call-to-action-label",
+      "reflect": false,
+      "defaultValue": "null"
+    }
+  }; }
+}

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

@@ -0,0 +1,14 @@
+: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; 
+} 

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

@@ -0,0 +1,15 @@
+import { Component, h } from '@stencil/core';
+export class BiggiveGrid {
+  render() {
+    return (h("div", { class: "grid" },
+      h("slot", null)));
+  }
+  static get is() { return "biggive-grid"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["biggive-grid.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["biggive-grid.css"]
+  }; }
+}

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,14 @@
+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" })))));
+  }
+  static get is() { return "demo-campaign-cards"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["demo-campaign-cards.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["demo-campaign-cards.css"]
+  }; }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/util/campaign-groups.js

@@ -0,0 +1,145 @@
+import { faAccessibleIcon } from '@fortawesome/free-brands-svg-icons';
+import { faBaby, faBalanceScale, faBlind, faBook, faCampground, faChild, faFutbol, faHeartbeat, faHospital, faInfoCircle, faMedal, faMicroscope, faMortarPestle, faParachuteBox, faPaw, faPeopleCarry, faPlaceOfWorship, faPlus, faRainbow, faRibbon, faSeedling, faTheaterMasks, faUniversalAccess, faUserGraduate, faVenus, } from '@fortawesome/free-solid-svg-icons';
+import { faUsers } from '@fortawesome/pro-duotone-svg-icons';
+import { faHeadSideMedical, faHomeHeart } from '@fortawesome/pro-solid-svg-icons';
+export class CampaignGroupsService {
+  static getBeneficiaries() {
+    return [
+      {
+        name: 'Children (3-18)',
+        icon: faChild,
+      },
+      {
+        name: 'General Public/Humankind',
+        icon: faUniversalAccess,
+      },
+      {
+        name: 'Infants (<2)',
+        icon: faBaby,
+      },
+      {
+        name: 'LGBTQAI',
+        icon: faRainbow,
+      },
+      {
+        name: 'Minority Groups',
+        icon: faUsers,
+      },
+      {
+        name: 'Older People',
+        icon: faBlind,
+      },
+      {
+        name: 'People With Disabilities',
+        icon: faAccessibleIcon,
+      },
+      {
+        name: 'Refugees/Asylum Seekers',
+        icon: faCampground,
+      },
+      {
+        name: 'Women & Girls',
+        icon: faVenus,
+      },
+      {
+        name: 'Young People (18-30)',
+        icon: faUserGraduate,
+      },
+      {
+        name: 'Other',
+        icon: faPlus,
+      },
+    ];
+  }
+  static getCategories() {
+    return [
+      {
+        name: 'Animals',
+        icon: faPaw,
+      },
+      {
+        name: 'Armed Forces/Emergency Services',
+        icon: faMedal,
+      },
+      {
+        name: 'Arts/Culture/Heritage',
+        icon: faTheaterMasks,
+      },
+      {
+        name: 'Cancer',
+        icon: faRibbon,
+      },
+      {
+        name: 'Community Support & Development',
+        icon: faPeopleCarry,
+      },
+      {
+        name: 'Disaster Relief',
+        icon: faParachuteBox,
+      },
+      {
+        name: 'Education/Training/Employment',
+        icon: faBook,
+      },
+      {
+        name: 'Environment/Conservation',
+        icon: faSeedling,
+      },
+      {
+        name: 'Health/Wellbeing',
+        icon: faHeartbeat,
+      },
+      {
+        name: 'Homeless/Refuge',
+        icon: faHomeHeart,
+      },
+      {
+        name: 'Hospitals/Hospices',
+        icon: faHospital,
+      },
+      {
+        name: 'Human Rights/Advocacy',
+        icon: faBalanceScale,
+      },
+      {
+        name: 'Information/Advice',
+        icon: faInfoCircle,
+      },
+      {
+        name: 'Medical Research',
+        icon: faMicroscope,
+      },
+      {
+        name: 'Mental Health',
+        icon: faHeadSideMedical,
+      },
+      {
+        name: 'Poverty Alleviation/Relief',
+        icon: faMortarPestle,
+      },
+      {
+        name: 'Religious',
+        icon: faPlaceOfWorship,
+      },
+      {
+        name: 'Sports/Recreation',
+        icon: faFutbol,
+      },
+      {
+        name: 'Other',
+        icon: faPlus,
+      },
+    ];
+  }
+  static getBeneficiaryIcon(beneficiary) {
+    const matchingItems = CampaignGroupsService.getBeneficiaries().filter(ii => ii.name === beneficiary);
+    // For an unknown/invalid beneficiary, show 'other' symbol.
+    return matchingItems[0].icon || faPlus;
+  }
+  static getCategoryIcon(category) {
+    var _a;
+    const matchingItems = CampaignGroupsService.getCategories().filter(ii => ii.name === category);
+    // For an unknown/invalid category, show 'other' symbol.
+    return ((_a = matchingItems[0]) === null || _a === void 0 ? void 0 : _a.icon) || faPlus;
+  }
+}

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BiggiveCampaignCard extends Components.BiggiveCampaignCard, HTMLElement {}
+export const BiggiveCampaignCard: {
+  prototype: BiggiveCampaignCard;
+  new (): BiggiveCampaignCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { B as BiggiveCampaignCard$1, d as defineCustomElement$1 } from './biggive-campaign-card2.js';
+
+const BiggiveCampaignCard = BiggiveCampaignCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BiggiveCampaignCard, defineCustomElement };