@biggive/components 0.0.1 → 0.0.2

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c50e2a76.js');
+
+/*
+ Stencil Client Patch Esm v2.17.1 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["biggive-campaign-card_3.cjs",[[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);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,14 @@
+{
+  "entries": [
+    "./components/biggive-campaign-card/biggive-campaign-card.js",
+    "./components/biggive-grid/biggive-grid.js",
+    "./components/demo-campaign-cards/demo-campaign-cards.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.17.1",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,199 @@
+: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(
+      0% 0%,     /* top left */
+      0% 0%,     /* top left */
+      100% 0%,    /* top right */
+      100% 0%,   /* top right */
+      100% 100%,  /* bottom right */
+      100% 100%,  /* bottom right */
+      10% 100%,   /* bottom left */
+      0 90%      /* bottom left */
+    );
+}
+
+.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;
+}

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, h } from '@stencil/core';
+export class DemoCampaignCards {
+  render() {
+    return (h("biggive-grid", null, [...Array(12)].map(() => (h("biggive-campaign-card", { banner: "/assets/img/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 {};