@biggive/components 202303201542.0.0 → 202303231047.0.0

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

@@ -0,0 +1,379 @@
+/**
+ * @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: #62CFC9;
+}
+
+.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;
+}
+
+.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-brand-1:hover,
+.text-colour-brand-1 {
+  color: #B30510;
+}
+
+.text-colour-hover-brand-2:hover,
+.text-colour-brand-2 {
+  color: #6E0887;
+}
+
+.text-colour-hover-brand-3:hover,
+.text-colour-brand-3 {
+  color: #50B400;
+}
+
+.text-colour-hover-brand-4:hover,
+.text-colour-brand-4 {
+  color: #FFE500;
+}
+
+.text-colour-hover-brand-5:hover,
+.text-colour-brand-5 {
+  color: #F07D00;
+}
+
+.text-colour-hover-brand-6:hover,
+.text-colour-brand-6 {
+  color: #CBC8C8;
+}
+
+.text-colour-hover-white:hover,
+.text-colour-white {
+  color: #FFFFFF;
+}
+
+.text-colour-hover-black:hover,
+.text-colour-black {
+  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;
+}
+
+.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.active .popup {
+  transform: translateX(0);
+}
+.container.active .background {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 99;
+}
+.container .popup {
+  position: fixed;
+  transition: transform 1s ease-in-out;
+  transform: translateX(100%);
+  z-index: 999;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 66%;
+}
+.container .popup .header {
+  padding: 45px;
+  display: flex;
+  justify-content: space-between;
+}
+.container .popup .header .back-link {
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+}
+.container .popup .header .back-link .svg-wrap {
+  display: flex;
+  margin: 5px 15px auto 0;
+}
+.container .popup .header .back-link .svg-wrap.colour-primary svg path {
+  fill: #2C089B;
+}
+.container .popup .header .back-link .svg-wrap.colour-secondary svg path {
+  fill: #2AF135;
+}
+.container .popup .header .back-link .svg-wrap.colour-tertiary svg path {
+  fill: #FF7272;
+}
+.container .popup .header .back-link .svg-wrap.colour-brand-1 svg path {
+  fill: #B30510;
+}
+.container .popup .header .back-link .svg-wrap.colour-brand-2 svg path {
+  fill: #6E0887;
+}
+.container .popup .header .back-link .svg-wrap.colour-brand-3 svg path {
+  fill: #50B400;
+}
+.container .popup .header .back-link .svg-wrap.colour-brand-4 svg path {
+  fill: #FFE500;
+}
+.container .popup .header .back-link .svg-wrap.colour-brand-5 svg path {
+  fill: #F07D00;
+}
+.container .popup .header .back-link .svg-wrap.colour-brand-6 svg path {
+  fill: #62CFC9;
+}
+.container .popup .header .back-link .svg-wrap.colour-white svg path {
+  fill: #FFFFFF;
+}
+.container .popup .header .back-link .svg-wrap.colour-black svg path {
+  fill: #000000;
+}
+.container .popup .header .back-link .svg-wrap.colour-grey-extra-light svg path {
+  fill: #D7D7D7;
+}
+.container .popup .header .back-link .svg-wrap.colour-grey-light svg path {
+  fill: #E8E8E8;
+}
+.container .popup .header .back-link .svg-wrap.colour-grey-medium svg path {
+  fill: #8A8A8A;
+}
+.container .popup .header .back-link .svg-wrap.colour-grey-dark svg path {
+  fill: #4A4A4A;
+}
+.container .popup .header .back-link .svg-wrap svg {
+  height: 14px;
+  width: auto;
+}
+.container .popup .header .close-link {
+  margin-bottom: auto;
+  cursor: pointer;
+}
+.container .popup .header .close-link .svg-wrap {
+  display: block;
+  width: 30px;
+  height: 30px;
+  background-color: #FFFFFF;
+  border-radius: 50%;
+  text-align: center;
+  padding: 6.5px;
+  box-sizing: border-box;
+}
+.container .popup .header .close-link .svg-wrap svg {
+  height: 15px;
+  width: 15px;
+  transform: rotate(45deg);
+}
+.container .popup .content {
+  padding: 0 45px 90px 90px;
+  margin-right: 45px;
+  max-height: calc(100vh - 200px);
+  overflow-y: scroll;
+  box-sizing: border-box;
+}
+
+@media screen and (max-width: 768px) {
+  .container .header {
+    padding: 15px;
+  }
+  .container .content {
+    padding: 0 15px 30px 30px;
+    margin-right: 15px;
+    max-height: calc(100vh - 90px);
+  }
+  .container .popup {
+    width: 100%;
+  }
+}
+@media screen and (max-width: 576px) {
+  .container .header {
+    padding: 15px;
+  }
+  .container .content {
+    padding: 0 15px 30px 30px;
+    margin-right: 15px;
+    max-height: calc(100vh - 90px);
+  }
+  .container .popup {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,111 @@
+import { h } from '@stencil/core';
+export class BiggiveSheet {
+  constructor() {
+    this.sheetId = '';
+    this.backgroundColour = 'primary';
+    this.textColour = 'white';
+  }
+  openSheet(hash) {
+    var _a, _b;
+    if (hash != '' && hash == this.sheetId) {
+      (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.container')) === null || _b === void 0 ? void 0 : _b.classList.add('active');
+    }
+  }
+  componentWillLoad() {
+    window.onhashchange = () => {
+      this.openSheet(window.location.hash);
+    };
+  }
+  componentDidRender() {
+    this.openSheet(window.location.hash);
+  }
+  closeSheet() {
+    var _a, _b;
+    (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.container')) === null || _b === void 0 ? void 0 : _b.classList.remove('active');
+    history.pushState('', document.title, window.location.pathname);
+  }
+  render() {
+    return (h("div", { class: 'container' }, h("div", { class: "background" }), h("div", { class: 'popup background-colour-' + this.backgroundColour + ' text-colour-' + this.textColour }, h("div", { class: "header" }, h("div", { class: "back-link", onClick: () => this.closeSheet() }, h("span", { class: 'svg-wrap colour-' + this.textColour }, h("svg", { width: "33", height: "16", viewBox: "0 0 33 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.292892 7.29289C-0.0976295 7.68342 -0.0976295 8.31658 0.292892 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928932C7.68054 0.538408 7.04738 0.538408 6.65685 0.928932L0.292892 7.29289ZM33 7L1 7V9L33 9V7Z", fill: "black" }))), "Back"), h("div", { class: "close-link", onClick: () => this.closeSheet() }, h("span", { class: "svg-wrap" }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z" }))))), h("div", { class: "content" }, h("slot", null)))));
+  }
+  static get is() { return "biggive-sheet"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-sheet.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-sheet.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "sheetId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A string ID (no spaces) unique within the page context, used to trigger the opening of the sheet from an anchor hash."
+        },
+        "attribute": "sheet-id",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "backgroundColour": {
+        "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": "background-colour",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      },
+      "textColour": {
+        "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": "text-colour",
+        "reflect": false,
+        "defaultValue": "'white'"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/biggive-sheet/biggive-sheet.stories.js

@@ -0,0 +1,34 @@
+export default {
+  title: 'Components/Content',
+  argTypes: {
+    backgroundColour: {
+      name: 'Background colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black'],
+      },
+    },
+    textColour: {
+      name: 'Text colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black'],
+      },
+    },
+  },
+};
+const Template = args => `
+            <biggive-sheet
+                id="${args.id}"
+                background-colour="${args.backgroundColour}"
+                text-colour="${args.textColour}"            
+            >
+            </biggive-sheet>
+            <div><a href="#test-sheet">Click here to open</a></div>
+            `;
+export const SheetComponent = Template.bind({});
+SheetComponent.args = {
+  id: 'test-sheet',
+  backgroundColour: 'primary',
+  textColour: 'white',
+};

package/dist/collection/components/biggive-social-icon/biggive-social-icon.css

@@ -51,7 +51,7 @@ a:hover {
 
 .background-colour-hover-brand-6:hover,
 .background-colour-brand-6 {
-  background-color: #CBC8C8;
+  background-color: #62CFC9;
 }
 
 .background-colour-hover-white:hover,

package/dist/collection/components/biggive-tabbed-content/biggive-tabbed-content.css

@@ -181,22 +181,26 @@ a:hover {
   width: 10px;
   height: 10px;
 }
-.container .navigation ul {
+.container .navigation .sleeve {
+  border-bottom: 1px solid #E8E8E8;
+  overflow: hidden;
+}
+.container .navigation .sleeve ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
-  border-bottom: 1px solid transparent;
   display: flex;
 }
-.container .navigation ul li {
-  padding: 10px;
+.container .navigation .sleeve ul li {
+  flex-grow: 1;
+  padding: 10px 20px;
   margin: 0;
   width: calc(33.3% - 20px);
   border-bottom: 3px solid transparent;
   text-align: center;
   cursor: pointer;
 }
-.container .navigation ul li.selected {
+.container .navigation .sleeve ul li.selected {
   font-weight: bold;
 }
 .container.text-colour-primary .navigation li {

package/dist/collection/components/biggive-tabbed-content/biggive-tabbed-content.js

@@ -2,6 +2,7 @@ import { h } from '@stencil/core';
 export class BiggiveTabbedContent {
   constructor() {
     this.currentTab = 0;
+    this.scrollOffset = 0;
     this.children = [];
     this.spaceBelow = 0;
     this.textColour = 'black';
@@ -53,11 +54,40 @@ export class BiggiveTabbedContent {
       i++;
     }
   }
+  scrollTab(direction) {
+    var _a;
+    if (!this.scrollContextTab) {
+      return;
+    }
+    let sleeve = this.scrollContextTab.parentElement;
+    let max = sleeve.scrollWidth - ((_a = sleeve.parentElement) === null || _a === void 0 ? void 0 : _a.offsetWidth);
+    if (direction == 'PREV') {
+      if (this.scrollOffset + this.scrollContextTab.offsetWidth > 0) {
+        return;
+      }
+      this.scrollOffset = this.scrollOffset + this.scrollContextTab.offsetWidth;
+      if (this.scrollContextTab.previousElementSibling) {
+        this.scrollContextTab = this.scrollContextTab.previousElementSibling;
+      }
+    }
+    else if (direction == 'NEXT') {
+      if (0 - this.scrollOffset > max) {
+        return;
+      }
+      this.scrollOffset = this.scrollOffset - this.scrollContextTab.offsetWidth;
+      if (this.scrollContextTab.nextElementSibling) {
+        this.scrollContextTab = this.scrollContextTab.nextElementSibling;
+      }
+    }
+    sleeve.style.transitionDuration = '0.3s';
+    sleeve.style.transitionTimingFunction = 'ease-out';
+    sleeve.style.transform = 'translate3d(' + this.scrollOffset + 'px, 0, 0)';
+  }
   clickPrevHandler() {
-    this.showTab(this.currentTab - 1);
+    this.scrollTab('PREV');
   }
   clickNextHandler() {
-    this.showTab(this.currentTab + 1);
+    this.scrollTab('NEXT');
   }
   render() {
     return (h("div", { class: 'container space-below-' +
@@ -73,7 +103,7 @@ export class BiggiveTabbedContent {
         ' button-background-colour-' +
         this.buttonBackgroundColour +
         ' button-icon-colour-' +
-        this.buttonIconColour }, h("div", { class: "navigation" }, h("div", { class: "button prev", onClick: () => this.clickPrevHandler(), title: "Previous" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261", stroke: "#000000", "stroke-width": "2" }))), h("ul", null, this.children.map(child => (h("li", { onClick: event => this.clickTabHandler(event) }, child.tabTitle)))), h("div", { class: "button next", onClick: () => this.clickNextHandler(), title: "Next" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686", stroke: "#000000", "stroke-width": "2" })))), h("slot", null)));
+        this.buttonIconColour }, h("div", { class: "navigation" }, h("div", { class: "button prev", onClick: () => this.clickPrevHandler(), title: "Previous" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261", stroke: "#000000", "stroke-width": "2" }))), h("div", { class: "sleeve" }, h("ul", null, this.children.map(child => (h("li", { onClick: event => this.clickTabHandler(event) }, child.tabTitle))))), h("div", { class: "button next", onClick: () => this.clickNextHandler(), title: "Next" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686", stroke: "#000000", "stroke-width": "2" })))), h("slot", null)));
   }
   static get is() { return "biggive-tabbed-content"; }
   static get encapsulation() { return "shadow"; }

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

@@ -51,7 +51,7 @@ a:hover {
 
 .background-colour-hover-brand-6:hover,
 .background-colour-brand-6 {
-  background-color: #CBC8C8;
+  background-color: #62CFC9;
 }
 
 .background-colour-hover-white:hover,

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

@@ -181,22 +181,26 @@ a:hover {
   width: 10px;
   height: 10px;
 }
-.container .navigation ul {
+.container .navigation .sleeve {
+  border-bottom: 1px solid #E8E8E8;
+  overflow-x: hidden;
+}
+.container .navigation .sleeve ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
-  border-bottom: 1px solid transparent;
   display: flex;
 }
-.container .navigation ul li {
-  padding: 10px;
+.container .navigation .sleeve ul li {
+  flex-grow: 1;
+  padding: 10px 20px;
   margin: 0;
   width: calc(33.3% - 20px);
   border-bottom: 3px solid transparent;
   text-align: center;
   cursor: pointer;
 }
-.container .navigation ul li.selected {
+.container .navigation .sleeve ul li.selected {
   font-weight: bold;
 }
 .container .entry-wrap {
@@ -207,12 +211,6 @@ a:hover {
   border-left: 15px solid transparent;
   padding: 15px 40px 15px 40px;
 }
-.container .entry-wrap .entry .date {
-  font-size: 13px;
-  line-height: 17px;
-  font-weight: bold;
-  margin: 0 0 5px 0;
-}
 .container .entry-wrap .entry .title {
   font-weight: bold;
   margin: 0 0 5px 0;