@biggive/components 202303031447.0.0 → 202303171148.0.0

package/dist/collection/components/biggive-tipping-slider/biggive-tipping-slider.css

@@ -0,0 +1,224 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
+a {
+  color: inherit;
+  text-decoration: underline;
+}
+a:hover {
+  text-decoration: none;
+}
+
+.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-brand-1:hover,
+.background-colour-brand-1 {
+  background-color: #B30510;
+}
+
+.background-colour-hover-brand-2:hover,
+.background-colour-brand-2 {
+  background-color: #6E0887;
+}
+
+.background-colour-hover-brand-3:hover,
+.background-colour-brand-3 {
+  background-color: #50B400;
+}
+
+.background-colour-hover-brand-4:hover,
+.background-colour-brand-4 {
+  background-color: #FFE500;
+}
+
+.background-colour-hover-brand-5:hover,
+.background-colour-brand-5 {
+  background-color: #F07D00;
+}
+
+.background-colour-hover-brand-6:hover,
+.background-colour-brand-6 {
+  background-color: #CBC8C8;
+}
+
+.background-colour-hover-white:hover,
+.background-colour-white {
+  background-color: #FFFFFF;
+}
+
+.background-colour-hover-black:hover,
+.background-colour-black {
+  background-color: #000000;
+}
+
+.background-colour-hover-white:hover,
+.background-colour-white {
+  background-color: #FFFFFF;
+}
+
+.background-colour-hover-grey-extra-light:hover,
+.background-colour-grey-extra-light {
+  background-color: #D7D7D7;
+}
+
+.background-colour-hover-grey-light:hover,
+.background-colour-grey-light {
+  background-color: #E8E8E8;
+}
+
+.background-colour-hover-grey-medium:hover,
+.background-colour-grey-medium {
+  background-color: #8A8A8A;
+}
+
+.background-colour-hover-grey-dark:hover,
+.background-colour-grey-dark {
+  background-color: #4A4A4A;
+}
+
+.fill-primary {
+  fill: #2C089B;
+}
+
+.fill-secondary {
+  fill: #2AF135;
+}
+
+.fill-tertiary {
+  fill: #FF7272;
+}
+
+.fill-brand-1 {
+  fill: #B30510;
+}
+
+.fill-brand-2 {
+  fill: #6E0887;
+}
+
+.fill-brand-3 {
+  fill: #50B400;
+}
+
+.fill-brand-4 {
+  fill: #FFE500;
+}
+
+.fill-brand-5 {
+  fill: #F07D00;
+}
+
+.fill-brand-6 {
+  fill: #CBC8C8;
+}
+
+.fill-brand-mhf-turquoise {
+  fill: #62CFC9;
+}
+
+.fill-white {
+  fill: #FFFFFF;
+}
+
+.fill-black {
+  fill: #000000;
+}
+
+.fill-grey-extra-light {
+  fill: #D7D7D7;
+}
+
+.fill-grey-light {
+  fill: #E8E8E8;
+}
+
+.fill-grey-medium {
+  fill: #8A8A8A;
+}
+
+.fill-grey-dark {
+  fill: #4A4A4A;
+}
+
+.fill-red {
+  fill: red;
+}
+
+:host {
+  display: contents;
+  font-family: "Euclid Triangle", sans-serif;
+  font-size: 17px;
+  line-height: 24px;
+}
+
+.container {
+  overflow: hidden;
+  padding: 50px 30px 0 30px;
+}
+.container .bar {
+  position: relative;
+  margin: 25px 0 15px 0;
+  background-color: #8A8A8A;
+  border-radius: 5px;
+  height: 10px;
+}
+.container .bar .handle {
+  border-radius: 50%;
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  background-color: #2C089B;
+  transform: translate(0, -15px);
+  cursor: pointer;
+}
+.container .bar .handle .tooltip {
+  display: block;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -110%);
+  white-space: nowrap;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+  padding: 2px 10px;
+}
+.container .bar .handle .tooltip .donation {
+  font-weight: bold;
+}
+.container .bar .handle .tooltip .percentage {
+  font-size: 75%;
+}
+.container .labels {
+  display: flex;
+  justify-content: space-around;
+  margin: 20px 15px 15px 15px;
+  font-weight: 600;
+}
+.container .labels .label-start {
+  text-align: left;
+  margin-right: auto;
+}
+.container .labels .label-end {
+  text-align: right;
+  margin-left: auto;
+}
+.container .reset {
+  margin-bottom: 15px;
+  display: flex;
+}
+.container .reset .button {
+  margin-left: auto;
+  cursor: pointer;
+  text-decoration: underline;
+}

package/dist/collection/components/biggive-tipping-slider/biggive-tipping-slider.js

@@ -0,0 +1,213 @@
+import { h } from '@stencil/core';
+export class BiggiveTippingSlider {
+  constructor() {
+    this.resetSlider = () => {
+      var _a;
+      const handle = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.handle');
+      const percentageWrap = handle === null || handle === void 0 ? void 0 : handle.querySelector('.percentage-value');
+      const donationWrap = handle === null || handle === void 0 ? void 0 : handle.querySelector('.donation-value');
+      handle.style.marginLeft = '0px';
+      percentageWrap.innerHTML = '0';
+      donationWrap.innerHTML = '0';
+    };
+    this.spaceBelow = 0;
+    this.colourScheme = 'primary';
+    this.percentageStart = undefined;
+    this.percentageEnd = undefined;
+    this.donationAmount = undefined;
+    this.donationCurrency = undefined;
+  }
+  format(currencyCode, amount) {
+    return Intl.NumberFormat('en-GB', {
+      style: 'currency',
+      currency: currencyCode,
+    }).format(amount);
+  }
+  componentDidRender() {
+    var _a, _b;
+    var isMoving = false;
+    const handle = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.handle');
+    const bar = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.bar');
+    const percentageWrap = handle === null || handle === void 0 ? void 0 : handle.querySelector('.percentage-value');
+    const donationWrap = handle === null || handle === void 0 ? void 0 : handle.querySelector('.donation-value');
+    var move = (e) => {
+      var _a;
+      if (isMoving) {
+        const max = bar.offsetWidth - handle.offsetWidth;
+        let pageX;
+        if (window.TouchEvent && e instanceof TouchEvent) {
+          pageX = (_a = e.touches[0]) === null || _a === void 0 ? void 0 : _a.pageX;
+        }
+        else {
+          // we Know e is a MouseEvent because all platforms that supports TouchEvent would also have
+          // a truthy window.TouchEvent - see https://stackoverflow.com/a/32882849/2803757
+          pageX = e.pageX;
+        }
+        if (typeof pageX != 'undefined') {
+          const mousePos = pageX - bar.offsetLeft - handle.offsetWidth / 2;
+          const position = mousePos > max ? max : mousePos < 0 ? 0 : mousePos;
+          const percentage = (position / max) * this.percentageEnd;
+          const donation = Math.round(this.donationAmount * (percentage / 100));
+          percentageWrap.innerHTML = Math.round(percentage).toString();
+          donationWrap.innerHTML = this.format(this.donationCurrency, donation);
+          handle.style.marginLeft = position + 'px';
+        }
+      }
+    };
+    bar.addEventListener('mousedown', function (e) {
+      isMoving = true;
+      move(e);
+    });
+    document.addEventListener('mouseup', function () {
+      isMoving = false;
+    });
+    document.addEventListener('mousemove', function (e) {
+      move(e);
+    });
+    bar.addEventListener('touchstart', function (e) {
+      isMoving = true;
+      move(e);
+    });
+    bar.addEventListener('touchend', function () {
+      isMoving = false;
+    });
+    document.addEventListener('touchmove', function (e) {
+      move(e);
+    });
+  }
+  render() {
+    const currencyFormatted = this.format(this.donationCurrency, 0);
+    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "bar" }, h("div", { class: "handle", id: "handle" }, h("div", { class: "tooltip" }, h("span", { class: "donation" }, h("span", { class: "donation-value" }, currencyFormatted)), "\u00A0", h("span", { class: "percentage" }, "(", h("span", { class: "percentage-value" }, "0"), "%)")))), h("div", { class: "labels" }, h("div", { class: "label-start" }, this.percentageStart, "%"), h("div", { class: "label-end" }, this.percentageEnd, "%")), h("div", { class: "reset" }, h("span", { class: "button", onClick: this.resetSlider }, "Back to default"))));
+  }
+  static get is() { return "biggive-tipping-slider"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-tipping-slider.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-tipping-slider.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "spaceBelow": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "spacingOption",
+          "resolved": "0 | 1 | 2 | 3 | 4 | 5 | 6",
+          "references": {
+            "spacingOption": {
+              "location": "import",
+              "path": "../../globals/spacing-option"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "space-below",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "colourScheme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "brandColour",
+          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "references": {
+            "brandColour": {
+              "location": "import",
+              "path": "../../globals/brand-colour"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "colour-scheme",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      },
+      "percentageStart": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "percentage-start",
+        "reflect": false
+      },
+      "percentageEnd": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "percentage-end",
+        "reflect": false
+      },
+      "donationAmount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "donation-amount",
+        "reflect": false
+      },
+      "donationCurrency": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'GBP' | 'USD'",
+          "resolved": "\"GBP\" | \"USD\"",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ISO-4217 currency code (e.g. GBP, USD)"
+        },
+        "attribute": "donation-currency",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/biggive-tipping-slider/biggive-tipping-slider.stories.js

@@ -0,0 +1,63 @@
+export default {
+  title: 'Components/Content',
+  argTypes: {
+    spaceBelow: {
+      name: 'Space below',
+      control: {
+        type: 'select',
+        options: [0, 1, 2, 3, 4, 5, 6],
+      },
+    },
+    colourScheme: {
+      name: 'Colour Scheme',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black'],
+      },
+    },
+    percentageStart: {
+      name: 'Percentage Start',
+      control: {
+        type: 'number',
+      },
+    },
+    percentageEnd: {
+      name: 'Percentage End',
+      control: {
+        type: 'number',
+      },
+    },
+    donationAmount: {
+      name: 'Donation Amount',
+      control: {
+        type: 'number',
+      },
+    },
+    donationCurrency: {
+      name: 'Donation Currency',
+      control: {
+        type: 'select',
+        options: ['GBP', 'USD'],
+      },
+    },
+  },
+};
+const Template = args => `
+              <biggive-tipping-slider
+                space-below="${args.spaceBelow}"
+                colour-scheme="${args.colourScheme}"
+                percentage-start="${args.percentageStart}"
+                percentage-end="${args.percentageEnd}"
+                donation-amount="${args.donationAmount}"
+                donation-currency="${args.donationCurrency}"
+              ></biggive-tipping-slider>
+              `;
+export const TippingSliderComponent = Template.bind({});
+TippingSliderComponent.args = {
+  spaceBelow: 4,
+  colourScheme: 'primary',
+  percentageStart: 0,
+  percentageEnd: 30,
+  donationAmount: 200,
+  donationCurrency: 'GBP',
+};

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

@@ -64,6 +64,31 @@ a:hover {
   background-color: #000000;
 }
 
+.background-colour-hover-white:hover,
+.background-colour-white {
+  background-color: #FFFFFF;
+}
+
+.background-colour-hover-grey-extra-light:hover,
+.background-colour-grey-extra-light {
+  background-color: #D7D7D7;
+}
+
+.background-colour-hover-grey-light:hover,
+.background-colour-grey-light {
+  background-color: #E8E8E8;
+}
+
+.background-colour-hover-grey-medium:hover,
+.background-colour-grey-medium {
+  background-color: #8A8A8A;
+}
+
+.background-colour-hover-grey-dark:hover,
+.background-colour-grey-dark {
+  background-color: #4A4A4A;
+}
+
 .space-above-0 {
   margin-top: 0;
 }
@@ -175,6 +200,26 @@ a:hover {
   color: #000000;
 }
 
+.text-colour-hover-grey-extra-light:hover,
+.text-colour-grey-extra-light {
+  color: #D7D7D7;
+}
+
+.text-colour-hover-grey-light:hover,
+.text-colour-grey-light {
+  color: #E8E8E8;
+}
+
+.text-colour-hover-grey-medium:hover,
+.text-colour-grey-medium {
+  color: #8A8A8A;
+}
+
+.text-colour-hover-grey-dark:hover,
+.text-colour-grey-dark {
+  color: #4A4A4A;
+}
+
 :host {
   display: contents;
   font-family: "Euclid Triangle", sans-serif;

package/dist/collection/components/biggive-video-feature/biggive-video-feature.css

@@ -120,6 +120,26 @@ a:hover {
   color: #000000;
 }
 
+.text-colour-hover-grey-extra-light:hover,
+.text-colour-grey-extra-light {
+  color: #D7D7D7;
+}
+
+.text-colour-hover-grey-light:hover,
+.text-colour-grey-light {
+  color: #E8E8E8;
+}
+
+.text-colour-hover-grey-medium:hover,
+.text-colour-grey-medium {
+  color: #8A8A8A;
+}
+
+.text-colour-hover-grey-dark:hover,
+.text-colour-grey-dark {
+  color: #4A4A4A;
+}
+
 :host {
   display: contents;
 }

package/dist/components/biggive-accordion-entry.d.ts

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

package/dist/components/biggive-accordion-entry.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+
+const biggiveAccordionEntryCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:block}";
+
+const BiggiveAccordionEntry$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.heading = '';
+  }
+  render() {
+    return null;
+  }
+  get host() { return this; }
+  static get style() { return biggiveAccordionEntryCss; }
+}, [1, "biggive-accordion-entry", {
+    "heading": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["biggive-accordion-entry"];
+  components.forEach(tagName => { switch (tagName) {
+    case "biggive-accordion-entry":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BiggiveAccordionEntry$1);
+      }
+      break;
+  } });
+}
+
+const BiggiveAccordionEntry = BiggiveAccordionEntry$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BiggiveAccordionEntry, defineCustomElement };

package/dist/components/biggive-accordion.d.ts

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