@biggive/components 202302161705.0.0 → 202303021718.0.0

package/dist/collection/components/biggive-main-menu/biggive-main-menu.css

@@ -124,7 +124,7 @@ nav .navbar .nav-links .links li {
   align-items: center;
   justify-content: space-between;
   list-style: none;
-  padding: 0 20px;
+  padding: 0 30px;
 }
 nav .navbar .nav-links .links li a {
   height: 100%;

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

@@ -0,0 +1,324 @@
+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;
+}
+
+.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-red {
+  fill: red;
+}
+
+:host {
+  display: contents;
+  font-family: "Euclid Triangle", sans-serif;
+  font-size: 17px;
+  line-height: 24px;
+}
+
+.container.header-text-colour-primary thead {
+  color: #2C089B;
+}
+.container.header-background-colour-primary thead {
+  background-color: #2C089B;
+}
+.container.body-text-colour-primary tbody {
+  color: #2C089B;
+}
+.container.body-background-colour-primary tbody {
+  background-color: #2C089B;
+}
+.container.header-text-colour-secondary thead {
+  color: #2AF135;
+}
+.container.header-background-colour-secondary thead {
+  background-color: #2AF135;
+}
+.container.body-text-colour-secondary tbody {
+  color: #2AF135;
+}
+.container.body-background-colour-secondary tbody {
+  background-color: #2AF135;
+}
+.container.header-text-colour-tertiary thead {
+  color: #FF7272;
+}
+.container.header-background-colour-tertiary thead {
+  background-color: #FF7272;
+}
+.container.body-text-colour-tertiary tbody {
+  color: #FF7272;
+}
+.container.body-background-colour-tertiary tbody {
+  background-color: #FF7272;
+}
+.container.header-text-colour-brand-1 thead {
+  color: #62CFC9;
+}
+.container.header-background-colour-brand-1 thead {
+  background-color: #62CFC9;
+}
+.container.body-text-colour-brand-1 tbody {
+  color: #62CFC9;
+}
+.container.body-background-colour-brand-1 tbody {
+  background-color: #62CFC9;
+}
+.container.header-text-colour-brand-2 thead {
+  color: #B30510;
+}
+.container.header-background-colour-brand-2 thead {
+  background-color: #B30510;
+}
+.container.body-text-colour-brand-2 tbody {
+  color: #B30510;
+}
+.container.body-background-colour-brand-2 tbody {
+  background-color: #B30510;
+}
+.container.header-text-colour-brand-3 thead {
+  color: #6E0887;
+}
+.container.header-background-colour-brand-3 thead {
+  background-color: #6E0887;
+}
+.container.body-text-colour-brand-3 tbody {
+  color: #6E0887;
+}
+.container.body-background-colour-brand-3 tbody {
+  background-color: #6E0887;
+}
+.container.header-text-colour-brand-4 thead {
+  color: #50B400;
+}
+.container.header-background-colour-brand-4 thead {
+  background-color: #50B400;
+}
+.container.body-text-colour-brand-4 tbody {
+  color: #50B400;
+}
+.container.body-background-colour-brand-4 tbody {
+  background-color: #50B400;
+}
+.container.header-text-colour-brand-5 thead {
+  color: #FFE500;
+}
+.container.header-background-colour-brand-5 thead {
+  background-color: #FFE500;
+}
+.container.body-text-colour-brand-5 tbody {
+  color: #FFE500;
+}
+.container.body-background-colour-brand-5 tbody {
+  background-color: #FFE500;
+}
+.container.header-text-colour-brand-6 thead {
+  color: #F07D00;
+}
+.container.header-background-colour-brand-6 thead {
+  background-color: #F07D00;
+}
+.container.body-text-colour-brand-6 tbody {
+  color: #F07D00;
+}
+.container.body-background-colour-brand-6 tbody {
+  background-color: #F07D00;
+}
+.container.header-text-colour-white thead {
+  color: #FFFFFF;
+}
+.container.header-background-colour-white thead {
+  background-color: #FFFFFF;
+}
+.container.body-text-colour-white tbody {
+  color: #FFFFFF;
+}
+.container.body-background-colour-white tbody {
+  background-color: #FFFFFF;
+}
+.container.header-text-colour-black thead {
+  color: #000000;
+}
+.container.header-background-colour-black thead {
+  background-color: #000000;
+}
+.container.body-text-colour-black tbody {
+  color: #000000;
+}
+.container.body-background-colour-black tbody {
+  background-color: #000000;
+}
+.container.header-text-colour-grey-extra-light thead {
+  color: #D7D7D7;
+}
+.container.header-background-colour-grey-extra-light thead {
+  background-color: #D7D7D7;
+}
+.container.body-text-colour-grey-extra-light tbody {
+  color: #D7D7D7;
+}
+.container.body-background-colour-grey-extra-light tbody {
+  background-color: #D7D7D7;
+}
+.container.header-text-colour-grey-light thead {
+  color: #E8E8E8;
+}
+.container.header-background-colour-grey-light thead {
+  background-color: #E8E8E8;
+}
+.container.body-text-colour-grey-light tbody {
+  color: #E8E8E8;
+}
+.container.body-background-colour-grey-light tbody {
+  background-color: #E8E8E8;
+}
+.container.header-text-colour-grey-medium thead {
+  color: #8A8A8A;
+}
+.container.header-background-colour-grey-medium thead {
+  background-color: #8A8A8A;
+}
+.container.body-text-colour-grey-medium tbody {
+  color: #8A8A8A;
+}
+.container.body-background-colour-grey-medium tbody {
+  background-color: #8A8A8A;
+}
+.container.header-text-colour-grey-dark thead {
+  color: #4A4A4A;
+}
+.container.header-background-colour-grey-dark thead {
+  background-color: #4A4A4A;
+}
+.container.body-text-colour-grey-dark tbody {
+  color: #4A4A4A;
+}
+.container.body-background-colour-grey-dark tbody {
+  background-color: #4A4A4A;
+}
+.container table {
+  width: 100%;
+  border-collapse: collapse;
+  border: 0;
+}
+.container table td, .container table th {
+  padding: 10px 20px;
+  border: 0;
+  font-size: inherit;
+}
+.container table thead {
+  filter: drop-shadow(-1px 3px 12px rgba(0, 0, 0, 0.15));
+}
+.container table thead td, .container table thead th {
+  font-weight: bold;
+}
+.container table tbody tr.odd {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+.container table tbody td, .container table tbody th {
+  font-size: 80%;
+}

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

@@ -0,0 +1,147 @@
+import { h } from '@stencil/core';
+export class BiggiveTable {
+  constructor() {
+    this.spaceBelow = 0;
+    this.headerTextColour = 'primary';
+    this.headerBackgroundColour = 'white';
+    this.bodyTextColour = 'black';
+    this.bodyBackgroundColour = 'grey-light';
+  }
+  render() {
+    return (h("div", { class: 'container header-text-colour-' +
+        this.headerTextColour +
+        ' header-background-colour-' +
+        this.headerBackgroundColour +
+        ' body-text-colour-' +
+        this.bodyTextColour +
+        ' body-background-colour-' +
+        this.bodyBackgroundColour +
+        ' space-below-' +
+        this.spaceBelow }, h("slot", null)));
+  }
+  static get is() { return "biggive-table"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-table.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-table.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "spaceBelow": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "space-below",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "headerTextColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "brandColour",
+          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-light\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "references": {
+            "brandColour": {
+              "location": "import",
+              "path": "../../globals/brand-colour"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "header-text-colour",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      },
+      "headerBackgroundColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "brandColour",
+          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-light\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "references": {
+            "brandColour": {
+              "location": "import",
+              "path": "../../globals/brand-colour"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "header-background-colour",
+        "reflect": false,
+        "defaultValue": "'white'"
+      },
+      "bodyTextColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "brandColour",
+          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-light\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "references": {
+            "brandColour": {
+              "location": "import",
+              "path": "../../globals/brand-colour"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "body-text-colour",
+        "reflect": false,
+        "defaultValue": "'black'"
+      },
+      "bodyBackgroundColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "brandColour",
+          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-light\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "references": {
+            "brandColour": {
+              "location": "import",
+              "path": "../../globals/brand-colour"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "body-background-colour",
+        "reflect": false,
+        "defaultValue": "'grey-light'"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,76 @@
+export default {
+  title: 'Components/Content',
+  argTypes: {
+    spaceBelow: {
+      name: 'Space below',
+      control: {
+        type: 'select',
+        options: [0, 1, 2, 3, 4, 5, 6],
+      },
+    },
+    headerTextColour: {
+      name: 'Header text colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black'],
+      },
+    },
+    headerBackgroundColour: {
+      name: 'Header background colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black'],
+      },
+    },
+    bodyTextColour: {
+      name: 'Body text colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black'],
+      },
+    },
+    bodyBackgroundColour: {
+      name: 'Body background 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-table
+                space-below="${args.spaceBelow}"
+                header-text-colour="${args.headerTextColour}"
+                header-background-colour="${args.headerBackgroundColour}"
+                body-text-colour="${args.bodyTextColour}"
+                body-background-colour="${args.bodyBackgroundColour}"/>
+  
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Column 1</th>
+                            <th>Column 2</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>Cell 1</td>
+                            <td>Cell 2</td>
+                        </tr>
+                        <tr>
+                            <td>Cell 3</td>
+                            <td>Cell 4</td>
+                        </tr>
+                    </tbody>
+                </table>
+              </biggive-table>
+              `;
+export const TableComponent = Template.bind({});
+TableComponent.args = {
+  spaceBelow: 4,
+  headerTextColour: 'white',
+  headerBackgroundColour: 'primary',
+  bodyTextColour: 'black',
+  bodyBackgroundColour: 'white',
+};

package/dist/collection/globals/brand-colour.js

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

package/dist/components/biggive-main-menu.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './biggive-misc-icon2.js';
 
-const biggiveMainMenuCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:block}*{margin:0;padding:0;box-sizing:border-box;font-family:\"Euclid Triangle\", sans-serif}a[class^=icon-],a[class*=icon-]{padding-left:20px;background-repeat:no-repeat;background-size:auto 10px;background-position:left center}a.icon-green{background-image:url(/assets/images/triangles-combined.svg)}a.icon-children{background-image:url(/assets/images/triangles-combined-children.svg)}a.icon-christmas{background-image:url(/assets/images/triangles-combined-christmas-challenge.svg)}a.icon-green-match{background-image:url(/assets/images/triangles-combined-green-match.svg)}a.icon-women-girls{background-image:url(/assets/images/triangles-combined-women-girls.svg)}a.icon-mental-health{background-image:url(/assets/images/triangles-combined-mental-health.svg)}a.icon-anchor-match{background-image:url(/assets/images/triangles-combined-anchor.svg)}a.icon-emergency{background-image:url(/assets/images/triangles-combined-emergency.svg)}.mobile-only{display:none !important}.row-top{padding:10px 30px;background-color:#2C089B;display:flex}.row-top .social-icon-wrap{margin-right:15px}.row-top .nav-secondary{margin-left:auto;display:grid}.row-top .nav-secondary ul{list-style:none;display:inline-flex;margin:auto}.row-top .nav-secondary li{border-right:1px solid #FFFFFF;height:fit-content;padding:0 10px}.row-top .nav-secondary li:last-child{border-right:0;padding-right:0}.row-top .nav-secondary li a{color:#FFFFFF;text-decoration:none}.row-top .social-icon-wrap{display:flex}.row-top .social-icon-wrap .social-icon-item{margin-right:15px}nav{top:0;left:0;width:100%;height:100%;height:70px;background:white;z-index:99;box-shadow:0 1px 2px rgba(0, 0, 0, 0.2)}nav .navbar{height:100%;width:100%;display:flex;align-items:center;justify-content:space-between;margin:auto;padding:0 50px}nav .navbar .nav-links{line-height:70px;height:100%}nav .navbar .nav-links .sidebar-logo{display:none}nav .navbar .nav-links .links{display:flex}nav .navbar .nav-links .links li{position:relative;display:flex;align-items:center;justify-content:space-between;list-style:none;padding:0 20px}nav .navbar .nav-links .links li a{height:100%;text-decoration:none;white-space:nowrap;color:black;font-size:17px;font-weight:500}nav .navbar .nav-links .links li .sub-menu{position:absolute;top:70px;left:0;line-height:40px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);border-radius:0 0 4px 4px;display:none;z-index:2;background-color:inherit}nav .navbar .nav-links .links li .sub-menu li{padding:0 22px;border-bottom:1px solid rgba(255, 255, 255, 0.1)}nav .navbar .nav-links .links li .sub-menu a{color:black;font-size:15px;font-weight:500}nav .navbar .nav-links .links li .sub-menu .more .sub-sub-menu{position:absolute;top:0;left:100%;border-radius:0 4px 4px 4px;z-index:1;display:none}nav .navbar .nav-links .links li .arrow{margin-left:5px;text-align:center;display:inline-block;color:black;transition:all 0.3s ease}nav .navbar .nav-links .links li .arrow.transform-90{transform:rotate(90deg)}nav .navbar .logo{min-width:180px;width:180px}nav .navbar .logo a{font-size:30px;color:black;text-decoration:none;font-weight:600;display:grid}nav .navbar .bx-menu{display:none}@media (hover: hover){.row-top .nav-secondary li a:hover{border-bottom-color:#FFFFFF;color:#FFFFFF}nav .navbar .nav-links .links li .sub-menu .more:hover .sub-sub-menu{display:block}nav .navbar .nav-links .links li:hover .sub-menu-arrow{transform:rotate(90deg)}nav .navbar .nav-links .links li:hover .sub-menu{display:block;background-color:white}nav .navbar .nav-links .links li:hover .sub-menu .sub-sub-menu{background-color:white}}@media (max-width: 1200px){nav .navbar .logo{min-width:120px;width:120px}nav .navbar .nav-links .links li{padding:0 7px}nav .navbar .nav-links .links li a{font-size:15px}nav .navbar .nav-links .links li .sub-menu a{font-size:13px}}@media (max-width: 968px){.mobile-only{display:block !important}.row-top{display:none}nav{height:60px}nav .navbar{padding:0px 25px}nav .navbar .bx-menu{display:block;font-size:25px;color:black}nav .navbar .nav-links{position:fixed;top:0;left:-100%;display:block;max-width:450px;width:100%;background:white;line-height:40px;padding:20px;box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);transition:all 0.5s ease;z-index:1000;overflow-y:scroll}nav .navbar .nav-links .sidebar-logo{display:flex;align-items:center;justify-content:space-between}nav .navbar .nav-links .sidebar-logo a{display:contents}nav .navbar .nav-links .sidebar-logo a #mobileLogo{width:130px}nav .navbar .nav-links .sidebar-logo #x{margin-right:15px}nav .navbar .nav-links .sidebar-logo i{font-size:25px;color:black}nav .navbar .nav-links .mobile-social-icon-wrap{margin-top:20px}nav .navbar .nav-links .links{display:block;margin-top:20px}nav .navbar .nav-links .links li{display:block;border-bottom:1px solid #e6e6e6}nav .navbar .nav-links .links li a{width:100%;display:block}nav .navbar .nav-links .links li .display-sub-menu{display:block !important}nav .navbar .nav-links .links li .sub-menu{position:relative;top:0;box-shadow:none;display:none}nav .navbar .nav-links .links li .sub-menu li{border-bottom:none}nav .navbar .nav-links .links li .sub-menu .sub-sub-menu{display:none;position:relative;left:0}nav .navbar .nav-links .links li .sub-menu .sub-sub-menu li{display:flex;align-items:center;justify-content:space-between}nav .navbar .nav-links .links li .sub-menu .more span{display:flex;align-items:center}nav .navbar .nav-links .links li .sub-menu .more .sub-sub-menu.display-sub-menu{position:initial}}@media (max-width: 968px) and (max-width: 370px){nav .navbar .nav-links{max-width:100%}}";
+const biggiveMainMenuCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:block}*{margin:0;padding:0;box-sizing:border-box;font-family:\"Euclid Triangle\", sans-serif}a[class^=icon-],a[class*=icon-]{padding-left:20px;background-repeat:no-repeat;background-size:auto 10px;background-position:left center}a.icon-green{background-image:url(/assets/images/triangles-combined.svg)}a.icon-children{background-image:url(/assets/images/triangles-combined-children.svg)}a.icon-christmas{background-image:url(/assets/images/triangles-combined-christmas-challenge.svg)}a.icon-green-match{background-image:url(/assets/images/triangles-combined-green-match.svg)}a.icon-women-girls{background-image:url(/assets/images/triangles-combined-women-girls.svg)}a.icon-mental-health{background-image:url(/assets/images/triangles-combined-mental-health.svg)}a.icon-anchor-match{background-image:url(/assets/images/triangles-combined-anchor.svg)}a.icon-emergency{background-image:url(/assets/images/triangles-combined-emergency.svg)}.mobile-only{display:none !important}.row-top{padding:10px 30px;background-color:#2C089B;display:flex}.row-top .social-icon-wrap{margin-right:15px}.row-top .nav-secondary{margin-left:auto;display:grid}.row-top .nav-secondary ul{list-style:none;display:inline-flex;margin:auto}.row-top .nav-secondary li{border-right:1px solid #FFFFFF;height:fit-content;padding:0 10px}.row-top .nav-secondary li:last-child{border-right:0;padding-right:0}.row-top .nav-secondary li a{color:#FFFFFF;text-decoration:none}.row-top .social-icon-wrap{display:flex}.row-top .social-icon-wrap .social-icon-item{margin-right:15px}nav{top:0;left:0;width:100%;height:100%;height:70px;background:white;z-index:99;box-shadow:0 1px 2px rgba(0, 0, 0, 0.2)}nav .navbar{height:100%;width:100%;display:flex;align-items:center;justify-content:space-between;margin:auto;padding:0 50px}nav .navbar .nav-links{line-height:70px;height:100%}nav .navbar .nav-links .sidebar-logo{display:none}nav .navbar .nav-links .links{display:flex}nav .navbar .nav-links .links li{position:relative;display:flex;align-items:center;justify-content:space-between;list-style:none;padding:0 30px}nav .navbar .nav-links .links li a{height:100%;text-decoration:none;white-space:nowrap;color:black;font-size:17px;font-weight:500}nav .navbar .nav-links .links li .sub-menu{position:absolute;top:70px;left:0;line-height:40px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);border-radius:0 0 4px 4px;display:none;z-index:2;background-color:inherit}nav .navbar .nav-links .links li .sub-menu li{padding:0 22px;border-bottom:1px solid rgba(255, 255, 255, 0.1)}nav .navbar .nav-links .links li .sub-menu a{color:black;font-size:15px;font-weight:500}nav .navbar .nav-links .links li .sub-menu .more .sub-sub-menu{position:absolute;top:0;left:100%;border-radius:0 4px 4px 4px;z-index:1;display:none}nav .navbar .nav-links .links li .arrow{margin-left:5px;text-align:center;display:inline-block;color:black;transition:all 0.3s ease}nav .navbar .nav-links .links li .arrow.transform-90{transform:rotate(90deg)}nav .navbar .logo{min-width:180px;width:180px}nav .navbar .logo a{font-size:30px;color:black;text-decoration:none;font-weight:600;display:grid}nav .navbar .bx-menu{display:none}@media (hover: hover){.row-top .nav-secondary li a:hover{border-bottom-color:#FFFFFF;color:#FFFFFF}nav .navbar .nav-links .links li .sub-menu .more:hover .sub-sub-menu{display:block}nav .navbar .nav-links .links li:hover .sub-menu-arrow{transform:rotate(90deg)}nav .navbar .nav-links .links li:hover .sub-menu{display:block;background-color:white}nav .navbar .nav-links .links li:hover .sub-menu .sub-sub-menu{background-color:white}}@media (max-width: 1200px){nav .navbar .logo{min-width:120px;width:120px}nav .navbar .nav-links .links li{padding:0 7px}nav .navbar .nav-links .links li a{font-size:15px}nav .navbar .nav-links .links li .sub-menu a{font-size:13px}}@media (max-width: 968px){.mobile-only{display:block !important}.row-top{display:none}nav{height:60px}nav .navbar{padding:0px 25px}nav .navbar .bx-menu{display:block;font-size:25px;color:black}nav .navbar .nav-links{position:fixed;top:0;left:-100%;display:block;max-width:450px;width:100%;background:white;line-height:40px;padding:20px;box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);transition:all 0.5s ease;z-index:1000;overflow-y:scroll}nav .navbar .nav-links .sidebar-logo{display:flex;align-items:center;justify-content:space-between}nav .navbar .nav-links .sidebar-logo a{display:contents}nav .navbar .nav-links .sidebar-logo a #mobileLogo{width:130px}nav .navbar .nav-links .sidebar-logo #x{margin-right:15px}nav .navbar .nav-links .sidebar-logo i{font-size:25px;color:black}nav .navbar .nav-links .mobile-social-icon-wrap{margin-top:20px}nav .navbar .nav-links .links{display:block;margin-top:20px}nav .navbar .nav-links .links li{display:block;border-bottom:1px solid #e6e6e6}nav .navbar .nav-links .links li a{width:100%;display:block}nav .navbar .nav-links .links li .display-sub-menu{display:block !important}nav .navbar .nav-links .links li .sub-menu{position:relative;top:0;box-shadow:none;display:none}nav .navbar .nav-links .links li .sub-menu li{border-bottom:none}nav .navbar .nav-links .links li .sub-menu .sub-sub-menu{display:none;position:relative;left:0}nav .navbar .nav-links .links li .sub-menu .sub-sub-menu li{display:flex;align-items:center;justify-content:space-between}nav .navbar .nav-links .links li .sub-menu .more span{display:flex;align-items:center}nav .navbar .nav-links .links li .sub-menu .more .sub-sub-menu.display-sub-menu{position:initial}}@media (max-width: 968px) and (max-width: 370px){nav .navbar .nav-links{max-width:100%}}";
 
 const BiggiveMainMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

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

package/dist/components/biggive-table.js

@@ -0,0 +1,52 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const biggiveTableCss = "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}.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-red{fill:red}:host{display:contents;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}.container.header-text-colour-primary thead{color:#2C089B}.container.header-background-colour-primary thead{background-color:#2C089B}.container.body-text-colour-primary tbody{color:#2C089B}.container.body-background-colour-primary tbody{background-color:#2C089B}.container.header-text-colour-secondary thead{color:#2AF135}.container.header-background-colour-secondary thead{background-color:#2AF135}.container.body-text-colour-secondary tbody{color:#2AF135}.container.body-background-colour-secondary tbody{background-color:#2AF135}.container.header-text-colour-tertiary thead{color:#FF7272}.container.header-background-colour-tertiary thead{background-color:#FF7272}.container.body-text-colour-tertiary tbody{color:#FF7272}.container.body-background-colour-tertiary tbody{background-color:#FF7272}.container.header-text-colour-brand-1 thead{color:#62CFC9}.container.header-background-colour-brand-1 thead{background-color:#62CFC9}.container.body-text-colour-brand-1 tbody{color:#62CFC9}.container.body-background-colour-brand-1 tbody{background-color:#62CFC9}.container.header-text-colour-brand-2 thead{color:#B30510}.container.header-background-colour-brand-2 thead{background-color:#B30510}.container.body-text-colour-brand-2 tbody{color:#B30510}.container.body-background-colour-brand-2 tbody{background-color:#B30510}.container.header-text-colour-brand-3 thead{color:#6E0887}.container.header-background-colour-brand-3 thead{background-color:#6E0887}.container.body-text-colour-brand-3 tbody{color:#6E0887}.container.body-background-colour-brand-3 tbody{background-color:#6E0887}.container.header-text-colour-brand-4 thead{color:#50B400}.container.header-background-colour-brand-4 thead{background-color:#50B400}.container.body-text-colour-brand-4 tbody{color:#50B400}.container.body-background-colour-brand-4 tbody{background-color:#50B400}.container.header-text-colour-brand-5 thead{color:#FFE500}.container.header-background-colour-brand-5 thead{background-color:#FFE500}.container.body-text-colour-brand-5 tbody{color:#FFE500}.container.body-background-colour-brand-5 tbody{background-color:#FFE500}.container.header-text-colour-brand-6 thead{color:#F07D00}.container.header-background-colour-brand-6 thead{background-color:#F07D00}.container.body-text-colour-brand-6 tbody{color:#F07D00}.container.body-background-colour-brand-6 tbody{background-color:#F07D00}.container.header-text-colour-white thead{color:#FFFFFF}.container.header-background-colour-white thead{background-color:#FFFFFF}.container.body-text-colour-white tbody{color:#FFFFFF}.container.body-background-colour-white tbody{background-color:#FFFFFF}.container.header-text-colour-black thead{color:#000000}.container.header-background-colour-black thead{background-color:#000000}.container.body-text-colour-black tbody{color:#000000}.container.body-background-colour-black tbody{background-color:#000000}.container.header-text-colour-grey-extra-light thead{color:#D7D7D7}.container.header-background-colour-grey-extra-light thead{background-color:#D7D7D7}.container.body-text-colour-grey-extra-light tbody{color:#D7D7D7}.container.body-background-colour-grey-extra-light tbody{background-color:#D7D7D7}.container.header-text-colour-grey-light thead{color:#E8E8E8}.container.header-background-colour-grey-light thead{background-color:#E8E8E8}.container.body-text-colour-grey-light tbody{color:#E8E8E8}.container.body-background-colour-grey-light tbody{background-color:#E8E8E8}.container.header-text-colour-grey-medium thead{color:#8A8A8A}.container.header-background-colour-grey-medium thead{background-color:#8A8A8A}.container.body-text-colour-grey-medium tbody{color:#8A8A8A}.container.body-background-colour-grey-medium tbody{background-color:#8A8A8A}.container.header-text-colour-grey-dark thead{color:#4A4A4A}.container.header-background-colour-grey-dark thead{background-color:#4A4A4A}.container.body-text-colour-grey-dark tbody{color:#4A4A4A}.container.body-background-colour-grey-dark tbody{background-color:#4A4A4A}.container table{width:100%;border-collapse:collapse;border:0}.container table td,.container table th{padding:10px 20px;border:0;font-size:inherit}.container table thead{filter:drop-shadow(-1px 3px 12px rgba(0, 0, 0, 0.15))}.container table thead td,.container table thead th{font-weight:bold}.container table tbody tr.odd{background-color:rgba(255, 255, 255, 0.3)}.container table tbody td,.container table tbody th{font-size:80%}";
+
+const BiggiveTable$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.spaceBelow = 0;
+    this.headerTextColour = 'primary';
+    this.headerBackgroundColour = 'white';
+    this.bodyTextColour = 'black';
+    this.bodyBackgroundColour = 'grey-light';
+  }
+  render() {
+    return (h("div", { class: 'container header-text-colour-' +
+        this.headerTextColour +
+        ' header-background-colour-' +
+        this.headerBackgroundColour +
+        ' body-text-colour-' +
+        this.bodyTextColour +
+        ' body-background-colour-' +
+        this.bodyBackgroundColour +
+        ' space-below-' +
+        this.spaceBelow }, h("slot", null)));
+  }
+  static get style() { return biggiveTableCss; }
+}, [4, "biggive-table", {
+    "spaceBelow": [2, "space-below"],
+    "headerTextColour": [1, "header-text-colour"],
+    "headerBackgroundColour": [1, "header-background-colour"],
+    "bodyTextColour": [1, "body-text-colour"],
+    "bodyBackgroundColour": [1, "body-background-colour"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["biggive-table"];
+  components.forEach(tagName => { switch (tagName) {
+    case "biggive-table":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BiggiveTable$1);
+      }
+      break;
+  } });
+}
+
+const BiggiveTable = BiggiveTable$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BiggiveTable, defineCustomElement };

package/dist/components/index.d.ts

@@ -39,6 +39,7 @@ export { BigGiveSearch as BiggiveSearch } from '../types/components/biggive-sear
 export { BiggiveSocialIcon as BiggiveSocialIcon } from '../types/components/biggive-social-icon/biggive-social-icon';
 export { BiggiveTab as BiggiveTab } from '../types/components/biggive-tab/biggive-tab';
 export { BiggiveTabbedContent as BiggiveTabbedContent } from '../types/components/biggive-tabbed-content/biggive-tabbed-content';
+export { BiggiveTable as BiggiveTable } from '../types/components/biggive-table/biggive-table';
 export { BiggiveTextInput as BiggiveTextInput } from '../types/components/biggive-form-field-text-input/biggive-text-input';
 export { BiggiveTotalizer as BiggiveTotalizer } from '../types/components/biggive-totalizer/biggive-totalizer';
 export { BiggiveTotalizerTickerItem as BiggiveTotalizerTickerItem } from '../types/components/biggive-totalizer-ticker-item/biggive-totalizer-ticker-item';

package/dist/components/index.js

@@ -39,6 +39,7 @@ export { BiggiveSearch, defineCustomElement as defineCustomElementBiggiveSearch
 export { BiggiveSocialIcon, defineCustomElement as defineCustomElementBiggiveSocialIcon } from './biggive-social-icon.js';
 export { BiggiveTab, defineCustomElement as defineCustomElementBiggiveTab } from './biggive-tab.js';
 export { BiggiveTabbedContent, defineCustomElement as defineCustomElementBiggiveTabbedContent } from './biggive-tabbed-content.js';
+export { BiggiveTable, defineCustomElement as defineCustomElementBiggiveTable } from './biggive-table.js';
 export { BiggiveTextInput, defineCustomElement as defineCustomElementBiggiveTextInput } from './biggive-text-input.js';
 export { BiggiveTotalizer, defineCustomElement as defineCustomElementBiggiveTotalizer } from './biggive-totalizer.js';
 export { BiggiveTotalizerTickerItem, defineCustomElement as defineCustomElementBiggiveTotalizerTickerItem } from './biggive-totalizer-ticker-item.js';