@biggive/components 1.0.150 → 1.0.152

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

@@ -0,0 +1,513 @@
+body {
+  background-color: #D7D7D7;
+}
+
+h1, h3, h3, h4, h5, h6 {
+  margin-bottom: 0;
+}
+
+h1, .heading-1 {
+  font-size: 47px;
+  line-height: 60px;
+  font-weight: bold;
+}
+
+h2, .heading-2 {
+  font-size: 38px;
+  line-height: 45px;
+  font-weight: bold;
+}
+
+h3, .heading-3 {
+  font-size: 25px;
+  line-height: 32px;
+  font-weight: bold;
+}
+
+h4, .heading-4 {
+  font-size: 20px;
+  line-height: 24px;
+  font-weight: bold;
+}
+
+h5, .heading-5 {
+  font-size: 17px;
+  line-height: 24px;
+  font-weight: bold;
+}
+
+a {
+  color: inherit;
+  text-decoration: underline;
+}
+a:hover {
+  text-decoration: none;
+}
+
+.colour-primary {
+  color: #2C089B;
+}
+
+.colour-secondary {
+  color: #2AF135;
+}
+
+.colour-tertiary {
+  color: #FF7272;
+}
+
+.colour-white {
+  color: #FFFFFF;
+}
+
+.colour-black {
+  color: #000000;
+}
+
+.text-colour-hover-primary:hover,
+.text-colour-primary {
+  color: #2C089B;
+}
+
+.text-colour-hover-secondary:hover,
+.text-colour-secondary {
+  color: #2AF135;
+}
+
+.text-colour-hover-tertiary:hover,
+.text-colour-tertiary {
+  color: #FF7272;
+}
+
+.text-colour-hover-white:hover,
+.text-colour-white {
+  color: #FFFFFF;
+}
+
+.text-colour-hover-black:hover,
+.text-colour-black {
+  color: #000000;
+}
+
+.fill-primary {
+  fill: #2C089B;
+}
+
+.fill-secondary {
+  fill: #2AF135;
+}
+
+.fill-tertiary {
+  fill: #FF7272;
+}
+
+.fill-white {
+  fill: #FFFFFF;
+}
+
+.fill-black {
+  fill: #000000;
+}
+
+.fill-red {
+  fill: red;
+}
+
+.background-colour-hover-primary:hover,
+.background-colour-primary {
+  background-color: #2C089B;
+}
+
+.background-colour-hover-secondary:hover,
+.background-colour-secondary {
+  background-color: #2AF135;
+}
+
+.background-colour-hover-tertiary:hover,
+.background-colour-tertiary {
+  background-color: #FF7272;
+}
+
+.background-colour-hover-white:hover,
+.background-colour-white {
+  background-color: #FFFFFF;
+}
+
+.background-colour-hover-black:hover,
+.background-colour-black {
+  background-color: #000000;
+}
+
+.input-wrap {
+  display: flex;
+  justify-content: space-between;
+}
+
+.input-text {
+  font-family: "Euclid Triangle", sans-serif;
+  font-size: 17px;
+  line-height: 24px;
+  color: #000000;
+  padding: 5px 10px;
+  box-sizing: border-box;
+  width: 100%;
+}
+.input-text:focus {
+  outline: 0;
+}
+.input-text:placeholder {
+  color: #4A4A4A;
+}
+
+.button {
+  font-size: 17px;
+  line-height: 24px;
+  padding: 10px 30px;
+  border-radius: 5px;
+  border: 1px solid #000000;
+  background-color: #000000;
+  filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.22));
+  color: #FFFFFF;
+  display: inline-block;
+  text-decoration: none;
+  text-align: center;
+  transition: all ease-in-out 0.5s;
+  cursor: pointer;
+}
+.button:hover {
+  background-color: #FFFFFF;
+  color: #000000;
+}
+.button.size-small {
+  font-size: 13px;
+  line-height: 17px;
+  padding: 5px 15px;
+}
+.button.button.rounded-true {
+  border-radius: 27.5px;
+}
+.button.button.rounded-true.size-small {
+  border-radius: 20px;
+}
+
+.button-primary {
+  color: #FFFFFF;
+  background-color: #2C089B;
+  border-color: #2C089B;
+}
+.button-primary:hover {
+  color: #2C089B;
+  background-color: #FFFFFF;
+}
+
+.button-secondary {
+  color: #2C089B;
+  background-color: #2AF135;
+  border-color: #2AF135;
+}
+.button-secondary:hover {
+  background-color: #FFFFFF;
+}
+
+.button-tertiary {
+  color: #FFFFFF;
+  background-color: #FF7272;
+  border-color: #FF7272;
+}
+.button-tertiary:hover {
+  background-color: #FFFFFF;
+}
+
+.button-white {
+  color: #2C089B;
+  background-color: #FFFFFF;
+  border-color: #FFFFFF;
+}
+.button-white:hover {
+  color: #FFFFFF;
+  background-color: #2C089B;
+}
+
+.button-black {
+  color: #FFFFFF;
+  background-color: #000000;
+  border-color: #000000;
+}
+.button-black:hover {
+  color: #000000;
+  background-color: #FFFFFF;
+}
+
+.button-clear-primary {
+  color: #2C089B;
+  background-color: transparent;
+  text-decoration: underline;
+  box-shadow: none;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-primary:hover {
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-secondary {
+  color: #2AF135;
+  background-color: transparent;
+  text-decoration: underline;
+  box-shadow: none;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-secondary:hover {
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-tertiary {
+  color: #FF7272;
+  background-color: transparent;
+  text-decoration: underline;
+  box-shadow: none;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-tertiary:hover {
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-white {
+  color: #FFFFFF;
+  background-color: transparent;
+  text-decoration: underline;
+  box-shadow: none;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-white:hover {
+  color: #FFFFFF;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-rounded {
+  border-radius: 27.5px;
+}
+.button-rounded.size-small {
+  border-radius: 20px;
+}
+
+.progress-bar {
+  display: flex;
+}
+.progress-bar .slider {
+  margin: auto 15px auto 0;
+  position: relative;
+  flex-grow: 1;
+}
+.progress-bar .slider:before {
+  content: "";
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: #E8E8E8;
+  border-radius: 4px;
+}
+.progress-bar .slider .progress {
+  position: relative;
+  border-radius: 4px;
+  background-color: #000000;
+  height: 8px;
+}
+.progress-bar .counter {
+  font-weight: 700;
+  color: #000000;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+.progress-bar-primary .slider .progress {
+  background-color: #2C089B;
+}
+.progress-bar-primary .counter {
+  color: #2C089B;
+}
+
+.progress-bar-secondary .slider .progress {
+  background-color: #2AF135;
+}
+.progress-bar-secondary .counter {
+  color: #2AF135;
+}
+
+.video-wrap {
+  position: relative;
+  padding-bottom: 56.25%;
+}
+
+.video-wrap iframe,
+.video-wrap video {
+  position: absolute;
+  border: 0;
+  display: block;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.image-wrap img {
+  width: 100%;
+  height: auto;
+}
+
+.align-left {
+  text-align: left;
+}
+
+.align-right {
+  text-align: right;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.align-justify {
+  text-align: justify;
+}
+
+.space-below-0 {
+  margin-bottom: 0;
+}
+
+.space-below-1 {
+  margin-bottom: 5px;
+}
+
+.space-below-2 {
+  margin-bottom: 10px;
+}
+
+.space-below-3 {
+  margin-bottom: 15px;
+}
+
+.space-below-4 {
+  margin-bottom: 30px;
+}
+
+.space-below-5 {
+  margin-bottom: 45px;
+}
+
+.space-below-6 {
+  margin-bottom: 60px;
+}
+
+.space-above-0 {
+  margin-top: 0;
+}
+
+.space-above-1 {
+  margin-top: 5px;
+}
+
+.space-above-2 {
+  margin-top: 10px;
+}
+
+.space-above-3 {
+  margin-top: 15px;
+}
+
+.space-above-4 {
+  margin-top: 30px;
+}
+
+.space-above-5 {
+  margin-top: 45px;
+}
+
+.space-above-6 {
+  margin-top: 60px;
+}
+
+.horizontal-padding-1 {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.horizontal-padding-2 {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.horizontal-padding-3 {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.horizontal-padding-4 {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+.horizontal-padding-5 {
+  padding-left: 45px;
+  padding-right: 45px;
+}
+
+.horizontal-padding-6 {
+  padding-left: 60px;
+  padding-right: 60px;
+}
+
+.vertical-padding-1 {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.vertical-padding-2 {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.vertical-padding-3 {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
+.vertical-padding-4 {
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+
+.vertical-padding-5 {
+  padding-top: 45px;
+  padding-bottom: 45px;
+}
+
+.vertical-padding-6 {
+  padding-top: 60px;
+  padding-bottom: 60px;
+}
+
+:host {
+  display: block;
+}
+
+.container {
+  background-size: contain;
+  background-position: center center;
+}

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

@@ -0,0 +1,100 @@
+import { h } from '@stencil/core';
+export class BiggiveBiographyCard {
+  constructor() {
+    this.spaceBelow = 0;
+    this.imageUrl = '';
+    this.fullName = '';
+    this.jobTitle = '';
+  }
+  render() {
+    return (h("div", { class: 'container space-below-' + this.spaceBelow }, this.imageUrl != '' ? (h("div", { class: "image-wrap", style: { 'background-image': "url('" + this.imageUrl + "')" } }, h("img", { src: this.imageUrl, alt: this.fullName, title: this.fullName }))) : null, h("h3", { class: "full-name" }, this.fullName), h("div", { class: "job-title" }, this.jobTitle)));
+  }
+  static get is() { return "biggive-biography-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-biography-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-biography-card.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"
+      },
+      "imageUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Full URL of the main image."
+        },
+        "attribute": "image-url",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "fullName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Job title"
+        },
+        "attribute": "full-name",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "jobTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Job title"
+        },
+        "attribute": "job-title",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+}

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

@@ -2,6 +2,8 @@ import { h } from '@stencil/core';
 export class BiggiveButton {
   constructor() {
     this.handleButtonClick = (event) => {
+      // Don't also fire e.g. `<biggive-campaign-card>` click event.
+      event.stopPropagation();
       this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
     };
     this.spaceBelow = 1;

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

@@ -514,6 +514,7 @@ a:hover {
   font-size: 17px;
   line-height: 24px;
   filter: drop-shadow(-1px 3px 12px rgba(0, 0, 0, 0.25));
+  cursor: pointer;
   position: relative;
   height: 100%;
   background-color: #FFFFFF;

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

@@ -1,6 +1,9 @@
 import { h } from '@stencil/core';
 export class BiggiveCampaignCard {
   constructor() {
+    this.handleCardGeneralClick = (event) => {
+      this.doCardGeneralClick.emit({ event, url: this.moreInfoButtonUrl });
+    };
     this.spaceBelow = 4;
     this.campaignType = null;
     this.banner = null;
@@ -22,7 +25,7 @@ export class BiggiveCampaignCard {
     this.datetime = undefined;
   }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow.toString() }, h("div", { class: "sleeve" }, this.campaignType !== null ? (h("div", { class: "campaign-type" }, h("span", null, this.campaignType))) : null, this.banner !== null ? (h("div", { class: "image-wrap banner", role: "presentation", style: { 'background-image': 'url(' + this.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.primaryFigureAmount)), h("div", { class: "meta-item" }, h("span", { class: "label" }, this.secondaryFigureLabel), h("span", { class: "text" }, 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, isFutureCampaign: this.isFutureCampaign, isPastCampaign: this.isPastCampaign, datetime: this.datetime }), h("biggive-button", { "full-width": "true", "colour-scheme": this.moreInfoButtonColourScheme, url: this.moreInfoButtonUrl, label: this.moreInfoButtonLabel })))));
+    return (h("div", { class: 'container space-below-' + this.spaceBelow.toString(), onClick: this.handleCardGeneralClick }, h("div", { class: "sleeve" }, this.campaignType !== null ? (h("div", { class: "campaign-type" }, h("span", null, this.campaignType))) : null, this.banner !== null ? (h("div", { class: "image-wrap banner", role: "presentation", style: { 'background-image': 'url(' + this.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.primaryFigureAmount)), h("div", { class: "meta-item" }, h("span", { class: "label" }, this.secondaryFigureLabel), h("span", { class: "text" }, 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, isFutureCampaign: this.isFutureCampaign, isPastCampaign: this.isPastCampaign, datetime: this.datetime }), 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"; }
@@ -381,4 +384,22 @@ export class BiggiveCampaignCard {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "doCardGeneralClick",
+        "name": "doCardGeneralClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ event: object; url: string }",
+          "resolved": "{ event: object; url: string; }",
+          "references": {}
+        }
+      }];
+  }
 }