@biggive/components 202303031447.0.0 → 202303061752.0.0

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

@@ -120,12 +120,367 @@ 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;
 }
 
+::slotted(*) {
+  display: none;
+}
+
 .container {
   font-family: "Euclid Triangle", sans-serif;
   font-size: 17px;
   line-height: 24px;
+  position: relative;
+}
+.container .navigation {
+  padding: 0 40px;
+}
+.container .navigation .button {
+  position: absolute;
+  top: 5px;
+  display: block;
+  width: 30px;
+  height: 30px;
+  padding: 2.5px 10px;
+  box-sizing: border-box;
+  background-color: #FFFFFF;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+  border-radius: 50%;
+  cursor: pointer;
+  text-align: center;
+}
+.container .navigation .button.prev {
+  left: 0;
+}
+.container .navigation .button.next {
+  right: 0;
+}
+.container .navigation .button svg {
+  width: 10px;
+  height: 10px;
+}
+.container .navigation ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  border-bottom: 1px solid transparent;
+  display: flex;
+}
+.container .navigation ul li {
+  padding: 10px;
+  margin: 0;
+  width: calc(33.3% - 20px);
+  border-bottom: 3px solid transparent;
+  text-align: center;
+  cursor: pointer;
+}
+.container .navigation ul li.selected {
+  font-weight: bold;
+}
+.container.text-colour-primary .navigation li {
+  color: #2C089B;
+}
+.container.navigation-highlight-colour-primary .navigation ul {
+  border-color: #2C089B;
+}
+.container.selected-text-colour-primary .navigation li.selected {
+  color: #2C089B;
+  border-color: #2C089B;
+}
+.container.selected-navigation-highlight-colour-primary .navigation li.selected {
+  border-color: #2C089B;
+}
+.container.button-background-colour-primary .navigation .button {
+  background-color: #2C089B;
+}
+.container.button-icon-colour-primary .navigation .button svg path {
+  stroke: #2C089B;
+}
+.container.text-colour-secondary .navigation li {
+  color: #2AF135;
+}
+.container.navigation-highlight-colour-secondary .navigation ul {
+  border-color: #2AF135;
+}
+.container.selected-text-colour-secondary .navigation li.selected {
+  color: #2AF135;
+  border-color: #2AF135;
+}
+.container.selected-navigation-highlight-colour-secondary .navigation li.selected {
+  border-color: #2AF135;
+}
+.container.button-background-colour-secondary .navigation .button {
+  background-color: #2AF135;
+}
+.container.button-icon-colour-secondary .navigation .button svg path {
+  stroke: #2AF135;
+}
+.container.text-colour-tertiary .navigation li {
+  color: #FF7272;
+}
+.container.navigation-highlight-colour-tertiary .navigation ul {
+  border-color: #FF7272;
+}
+.container.selected-text-colour-tertiary .navigation li.selected {
+  color: #FF7272;
+  border-color: #FF7272;
+}
+.container.selected-navigation-highlight-colour-tertiary .navigation li.selected {
+  border-color: #FF7272;
+}
+.container.button-background-colour-tertiary .navigation .button {
+  background-color: #FF7272;
+}
+.container.button-icon-colour-tertiary .navigation .button svg path {
+  stroke: #FF7272;
+}
+.container.text-colour-brand-1 .navigation li {
+  color: #B30510;
+}
+.container.navigation-highlight-colour-brand-1 .navigation ul {
+  border-color: #B30510;
+}
+.container.selected-text-colour-brand-1 .navigation li.selected {
+  color: #B30510;
+  border-color: #B30510;
+}
+.container.selected-navigation-highlight-colour-brand-1 .navigation li.selected {
+  border-color: #B30510;
+}
+.container.button-background-colour-brand-1 .navigation .button {
+  background-color: #B30510;
+}
+.container.button-icon-colour-brand-1 .navigation .button svg path {
+  stroke: #B30510;
+}
+.container.text-colour-brand-2 .navigation li {
+  color: #6E0887;
+}
+.container.navigation-highlight-colour-brand-2 .navigation ul {
+  border-color: #6E0887;
+}
+.container.selected-text-colour-brand-2 .navigation li.selected {
+  color: #6E0887;
+  border-color: #6E0887;
+}
+.container.selected-navigation-highlight-colour-brand-2 .navigation li.selected {
+  border-color: #6E0887;
+}
+.container.button-background-colour-brand-2 .navigation .button {
+  background-color: #6E0887;
+}
+.container.button-icon-colour-brand-2 .navigation .button svg path {
+  stroke: #6E0887;
+}
+.container.text-colour-brand-3 .navigation li {
+  color: #50B400;
+}
+.container.navigation-highlight-colour-brand-3 .navigation ul {
+  border-color: #50B400;
+}
+.container.selected-text-colour-brand-3 .navigation li.selected {
+  color: #50B400;
+  border-color: #50B400;
+}
+.container.selected-navigation-highlight-colour-brand-3 .navigation li.selected {
+  border-color: #50B400;
+}
+.container.button-background-colour-brand-3 .navigation .button {
+  background-color: #50B400;
+}
+.container.button-icon-colour-brand-3 .navigation .button svg path {
+  stroke: #50B400;
+}
+.container.text-colour-brand-4 .navigation li {
+  color: #FFE500;
+}
+.container.navigation-highlight-colour-brand-4 .navigation ul {
+  border-color: #FFE500;
+}
+.container.selected-text-colour-brand-4 .navigation li.selected {
+  color: #FFE500;
+  border-color: #FFE500;
+}
+.container.selected-navigation-highlight-colour-brand-4 .navigation li.selected {
+  border-color: #FFE500;
+}
+.container.button-background-colour-brand-4 .navigation .button {
+  background-color: #FFE500;
+}
+.container.button-icon-colour-brand-4 .navigation .button svg path {
+  stroke: #FFE500;
+}
+.container.text-colour-brand-5 .navigation li {
+  color: #F07D00;
+}
+.container.navigation-highlight-colour-brand-5 .navigation ul {
+  border-color: #F07D00;
+}
+.container.selected-text-colour-brand-5 .navigation li.selected {
+  color: #F07D00;
+  border-color: #F07D00;
+}
+.container.selected-navigation-highlight-colour-brand-5 .navigation li.selected {
+  border-color: #F07D00;
+}
+.container.button-background-colour-brand-5 .navigation .button {
+  background-color: #F07D00;
+}
+.container.button-icon-colour-brand-5 .navigation .button svg path {
+  stroke: #F07D00;
+}
+.container.text-colour-brand-6 .navigation li {
+  color: #62CFC9;
+}
+.container.navigation-highlight-colour-brand-6 .navigation ul {
+  border-color: #62CFC9;
+}
+.container.selected-text-colour-brand-6 .navigation li.selected {
+  color: #62CFC9;
+  border-color: #62CFC9;
+}
+.container.selected-navigation-highlight-colour-brand-6 .navigation li.selected {
+  border-color: #62CFC9;
+}
+.container.button-background-colour-brand-6 .navigation .button {
+  background-color: #62CFC9;
+}
+.container.button-icon-colour-brand-6 .navigation .button svg path {
+  stroke: #62CFC9;
+}
+.container.text-colour-white .navigation li {
+  color: #FFFFFF;
+}
+.container.navigation-highlight-colour-white .navigation ul {
+  border-color: #FFFFFF;
+}
+.container.selected-text-colour-white .navigation li.selected {
+  color: #FFFFFF;
+  border-color: #FFFFFF;
+}
+.container.selected-navigation-highlight-colour-white .navigation li.selected {
+  border-color: #FFFFFF;
+}
+.container.button-background-colour-white .navigation .button {
+  background-color: #FFFFFF;
+}
+.container.button-icon-colour-white .navigation .button svg path {
+  stroke: #FFFFFF;
+}
+.container.text-colour-black .navigation li {
+  color: #000000;
+}
+.container.navigation-highlight-colour-black .navigation ul {
+  border-color: #000000;
+}
+.container.selected-text-colour-black .navigation li.selected {
+  color: #000000;
+  border-color: #000000;
+}
+.container.selected-navigation-highlight-colour-black .navigation li.selected {
+  border-color: #000000;
+}
+.container.button-background-colour-black .navigation .button {
+  background-color: #000000;
+}
+.container.button-icon-colour-black .navigation .button svg path {
+  stroke: #000000;
+}
+.container.text-colour-grey-extra-light .navigation li {
+  color: #D7D7D7;
+}
+.container.navigation-highlight-colour-grey-extra-light .navigation ul {
+  border-color: #D7D7D7;
+}
+.container.selected-text-colour-grey-extra-light .navigation li.selected {
+  color: #D7D7D7;
+  border-color: #D7D7D7;
+}
+.container.selected-navigation-highlight-colour-grey-extra-light .navigation li.selected {
+  border-color: #D7D7D7;
+}
+.container.button-background-colour-grey-extra-light .navigation .button {
+  background-color: #D7D7D7;
+}
+.container.button-icon-colour-grey-extra-light .navigation .button svg path {
+  stroke: #D7D7D7;
+}
+.container.text-colour-grey-light .navigation li {
+  color: #E8E8E8;
+}
+.container.navigation-highlight-colour-grey-light .navigation ul {
+  border-color: #E8E8E8;
+}
+.container.selected-text-colour-grey-light .navigation li.selected {
+  color: #E8E8E8;
+  border-color: #E8E8E8;
+}
+.container.selected-navigation-highlight-colour-grey-light .navigation li.selected {
+  border-color: #E8E8E8;
+}
+.container.button-background-colour-grey-light .navigation .button {
+  background-color: #E8E8E8;
+}
+.container.button-icon-colour-grey-light .navigation .button svg path {
+  stroke: #E8E8E8;
+}
+.container.text-colour-grey-medium .navigation li {
+  color: #8A8A8A;
+}
+.container.navigation-highlight-colour-grey-medium .navigation ul {
+  border-color: #8A8A8A;
+}
+.container.selected-text-colour-grey-medium .navigation li.selected {
+  color: #8A8A8A;
+  border-color: #8A8A8A;
+}
+.container.selected-navigation-highlight-colour-grey-medium .navigation li.selected {
+  border-color: #8A8A8A;
+}
+.container.button-background-colour-grey-medium .navigation .button {
+  background-color: #8A8A8A;
+}
+.container.button-icon-colour-grey-medium .navigation .button svg path {
+  stroke: #8A8A8A;
+}
+.container.text-colour-grey-dark .navigation li {
+  color: #4A4A4A;
+}
+.container.navigation-highlight-colour-grey-dark .navigation ul {
+  border-color: #4A4A4A;
+}
+.container.selected-text-colour-grey-dark .navigation li.selected {
+  color: #4A4A4A;
+  border-color: #4A4A4A;
+}
+.container.selected-navigation-highlight-colour-grey-dark .navigation li.selected {
+  border-color: #4A4A4A;
+}
+.container.button-background-colour-grey-dark .navigation .button {
+  background-color: #4A4A4A;
+}
+.container.button-icon-colour-grey-dark .navigation .button svg path {
+  stroke: #4A4A4A;
 }

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

@@ -1,11 +1,79 @@
 import { h } from '@stencil/core';
 export class BiggiveTabbedContent {
   constructor() {
+    this.currentTab = 0;
+    this.children = [];
     this.spaceBelow = 0;
-    this.defaultTextColour = 'black';
+    this.textColour = 'black';
+    this.selectedTextColour = 'primary';
+    this.navigationHighlightColour = 'grey-medium';
+    this.selectedNavigationHighlightColour = 'primary';
+    this.buttonBackgroundColour = 'white';
+    this.buttonIconColour = 'primary';
+  }
+  componentWillLoad() {
+    this.children = Array.from(this.host.children);
+  }
+  componentDidRender() {
+    this.showTab(0);
+  }
+  /*
+   * Shows the i'th tab, counting from zero. Does nothing if i out of range.
+   */
+  showTab(i) {
+    var _a;
+    const tabs = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.navigation ul li');
+    if (i >= 0 && i <= (tabs === null || tabs === void 0 ? void 0 : tabs.length) - 1) {
+      this.currentTab = i;
+      let j = 0;
+      tabs === null || tabs === void 0 ? void 0 : tabs.forEach(function (tab) {
+        if (i == j) {
+          tab.classList.add('selected');
+        }
+        else {
+          tab.classList.remove('selected');
+        }
+        j++;
+      });
+      j = 0;
+      this.host.querySelectorAll('biggive-tab').forEach(function (tab) {
+        tab.style.display = i == j ? 'block' : 'none';
+        j++;
+      });
+    }
+  }
+  clickTabHandler(e) {
+    let i = 0;
+    const parent = e.target.parentElement;
+    for (let el of Array.from(parent.children)) {
+      if (el == e.target) {
+        this.showTab(i);
+        return;
+      }
+      i++;
+    }
+  }
+  clickPrevHandler() {
+    this.showTab(this.currentTab - 1);
+  }
+  clickNextHandler() {
+    this.showTab(this.currentTab + 1);
   }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow + ' text-colour-' + this.defaultTextColour }, h("slot", null)));
+    return (h("div", { class: 'container space-below-' +
+        this.spaceBelow +
+        ' text-colour-' +
+        this.textColour +
+        ' selected-text-colour-' +
+        this.selectedTextColour +
+        ' navigation-highlight-colour-' +
+        this.navigationHighlightColour +
+        ' selected-navigation-highlight-colour-' +
+        this.selectedNavigationHighlightColour +
+        ' 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)));
   }
   static get is() { return "biggive-tabbed-content"; }
   static get encapsulation() { return "shadow"; }
@@ -25,38 +93,164 @@ export class BiggiveTabbedContent {
         "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
+          "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": "Space below component"
+          "text": ""
         },
         "attribute": "space-below",
         "reflect": false,
         "defaultValue": "0"
       },
-      "defaultTextColour": {
+      "textColour": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "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": "Default text colour"
+          "text": ""
         },
-        "attribute": "default-text-colour",
+        "attribute": "text-colour",
         "reflect": false,
         "defaultValue": "'black'"
+      },
+      "selectedTextColour": {
+        "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": "selected-text-colour",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      },
+      "navigationHighlightColour": {
+        "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": "navigation-highlight-colour",
+        "reflect": false,
+        "defaultValue": "'grey-medium'"
+      },
+      "selectedNavigationHighlightColour": {
+        "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": "selected-navigation-highlight-colour",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      },
+      "buttonBackgroundColour": {
+        "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": "button-background-colour",
+        "reflect": false,
+        "defaultValue": "'white'"
+      },
+      "buttonIconColour": {
+        "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": "button-icon-colour",
+        "reflect": false,
+        "defaultValue": "'primary'"
       }
     };
   }
+  static get elementRef() { return "host"; }
 }

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

@@ -8,19 +8,59 @@ export default {
         options: [0, 1, 2, 3, 4, 5, 6],
       },
     },
-    defaultTextColour: {
+    textColour: {
       name: 'Default text colour',
       control: {
         type: 'select',
         options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black'],
       },
     },
+    selectedTextColour: {
+      name: 'Selected text colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black'],
+      },
+    },
+    navigationHighlightColour: {
+      name: 'Navigation highlight colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black'],
+      },
+    },
+    selectedNavigationHighlightColour: {
+      name: 'Selected navigation highlight colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black'],
+      },
+    },
+    buttonBackgroundColour: {
+      name: 'Button background colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black'],
+      },
+    },
+    buttonIconColour: {
+      name: 'Button icon 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-tabbed-content
                   space-below="${args.spaceBelow}"  
-                  default-text-colour="${args.defaultTextColour}"
+                  text-colour="${args.textColour}"
+                  selected-text-colour="${args.selectedTextColour}"
+                  navigation-highlight-colour="${args.navigationHighlightColour}"
+                  selected-navigation-highlight-colour="${args.selectedNavigationHighlightColour}"
+                  button-background-colour="${args.buttonBackgroundColour}"
+                  button-icon-colour="${args.buttonIconColour}"
                   >
                   <biggive-tab tab-title="this is my title">
                     This is the content for the first item
@@ -33,5 +73,10 @@ const Template = args => `
 export const TabbedContentComponent = Template.bind({});
 TabbedContentComponent.args = {
   spaceBelow: 4,
-  defaultTextColour: 'black',
+  textColour: 'black',
+  selectedTextColour: 'primary',
+  navigationHighlightColour: 'grey-medium',
+  selectedNavigationHighlightColour: 'primary',
+  buttonBackgroundColour: 'white',
+  buttonIconColour: 'primary',
 };