@biggive/components 202303031447.0.0 → 202303061752.0.0

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

@@ -0,0 +1,394 @@
+import { h } from '@stencil/core';
+export class BiggiveTimeline {
+  constructor() {
+    this.currentTab = 0;
+    this.tabHeadings = [];
+    this.children = [];
+    this.spaceBelow = 0;
+    this.textColour = 'black';
+    this.selectedTextColour = 'primary';
+    this.navigationHighlightColour = 'grey-medium';
+    this.selectedNavigationHighlightColour = 'primary';
+    this.buttonBackgroundColour = 'white';
+    this.buttonIconColour = 'primary';
+    this.entryBackgroundColour = 'white';
+    this.entryHighlightColour = 'secondary';
+    this.entryDateColour = 'black';
+    this.entryTitleColour = 'primary';
+    this.entryTextColour = 'black';
+  }
+  componentWillLoad() {
+    this.children = Array.from(this.host.children);
+    let tabHeadings = this.tabHeadings;
+    this.children.forEach(function (entry) {
+      let tab = entry.date.substring(0, 4);
+      if (!tabHeadings.includes(tab)) {
+        tabHeadings.push(tab);
+      }
+    });
+  }
+  componentDidRender() {
+    this.showTab(0);
+  }
+  /*
+   * Shows the i'th element in the timeline, counting from zero. Does nothing if i out of range.
+   */
+  showTab(i) {
+    var _a, _b, _c;
+    const tabs = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.navigation ul li');
+    const entries = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.entry');
+    if (i >= 0 && i <= (tabs === null || tabs === void 0 ? void 0 : tabs.length) - 1) {
+      this.currentTab = i;
+      let currentTabTitle = (_c = tabs[i]) === null || _c === void 0 ? void 0 : _c.innerHTML;
+      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++;
+      });
+      entries.forEach(function (entry) {
+        var _a;
+        entry.style.display = ((_a = entry.getAttribute('data-date')) === null || _a === void 0 ? void 0 : _a.substring(0, 4)) == currentTabTitle ? 'block' : 'none';
+      });
+    }
+  }
+  clickTabHandler(e) {
+    let i = 0;
+    for (let el of e.target.parentElement.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.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 +
+        ' entry-background-colour-' +
+        this.entryBackgroundColour +
+        ' entry-highlight-colour-' +
+        this.entryHighlightColour +
+        ' entry-date-colour-' +
+        this.entryDateColour +
+        ' entry-title-colour-' +
+        this.entryTitleColour +
+        ' entry-text-colour-' +
+        this.entryTextColour }, 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.tabHeadings.map(tab => (h("li", { onClick: event => this.clickTabHandler(event) }, tab)))), 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("div", { class: "entry-wrap" }, this.children.map(entry => (h("div", { class: "entry", "data-date": entry.date }, h("div", { class: "date" }, entry.date), h("h4", { class: "title" }, entry.heading), h("div", { class: "content", innerHTML: entry.innerHTML })))))));
+  }
+  static get is() { return "biggive-timeline"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-timeline.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-timeline.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"
+      },
+      "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": "'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'"
+      },
+      "entryBackgroundColour": {
+        "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": "entry-background-colour",
+        "reflect": false,
+        "defaultValue": "'white'"
+      },
+      "entryHighlightColour": {
+        "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": "entry-highlight-colour",
+        "reflect": false,
+        "defaultValue": "'secondary'"
+      },
+      "entryDateColour": {
+        "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": "entry-date-colour",
+        "reflect": false,
+        "defaultValue": "'black'"
+      },
+      "entryTitleColour": {
+        "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": "entry-title-colour",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      },
+      "entryTextColour": {
+        "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": "entry-text-colour",
+        "reflect": false,
+        "defaultValue": "'black'"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,133 @@
+export default {
+  title: 'Components/Layout',
+  argTypes: {
+    spaceBelow: {
+      name: 'Space below',
+      control: {
+        type: 'select',
+        options: [0, 1, 2, 3, 4, 5, 6],
+      },
+    },
+    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'],
+      },
+    },
+    entryBackgroundColour: {
+      name: 'Entry background colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black'],
+      },
+    },
+    entryHighlightColour: {
+      name: 'Entry highlight colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black'],
+      },
+    },
+    entryDateColour: {
+      name: 'Entry date colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black'],
+      },
+    },
+    entryTitleColour: {
+      name: 'Entry title colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black'],
+      },
+    },
+    entryTextColour: {
+      name: 'Entry 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-timeline
+                        space-below="${args.spaceBelow}"  
+                        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}"
+                        entry-background-colour="${args.entryBackgroundColour}"
+                        entry-highlight-colour="${args.entryHighlightColour}"
+                        entry-date-colour="${args.entryDateColour}"
+                        entry-title-colour="${args.entryTitleColour}"
+                        entry-content-colour="${args.entryContentColour}"
+                        >
+                          <biggive-timeline-entry heading="Heading 1" date="2023-01-01">
+                          <p>1 Lorem ipsum dolor sit amet, fabulas appetere no sed. Per ea partem pertinacia, modo mollis usu ut. Audire eruditi ex his, ut imperdiet constituam ullamcorper nam. Sed cu etiam iudico qualisque. Dicam alienum ei vel.</p>
+                          <p>Quo ex mutat malorum conceptam, at usu dicta perfecto deserunt. An prompta offendit mel, sit regione constituto ei. Ludus possim hendrerit id vis, cu vim sonet dolorem mnesarchum, sit soleat aliquid eu. Ancillae appellantur cum ea. Agam delenit id qui, est summo corpora an.</p>
+                          </biggive-timeline-entry>
+                          <biggive-timeline-entry heading="Heading 2" date="2023-01-01">
+                          <p>1 Lorem ipsum dolor sit amet, fabulas appetere no sed. Per ea partem pertinacia, modo mollis usu ut. Audire eruditi ex his, ut imperdiet constituam ullamcorper nam. Sed cu etiam iudico qualisque. Dicam alienum ei vel.</p>
+                          <p>Quo ex mutat malorum conceptam, at usu dicta perfecto deserunt. An prompta offendit mel, sit regione constituto ei. Ludus possim hendrerit id vis, cu vim sonet dolorem mnesarchum, sit soleat aliquid eu. Ancillae appellantur cum ea. Agam delenit id qui, est summo corpora an.</p>
+                          </biggive-timeline-entry>
+                          <biggive-timeline-entry heading="Heading 3" date="2022-01-01">
+                          <p>1 Lorem ipsum dolor sit amet, fabulas appetere no sed. Per ea partem pertinacia, modo mollis usu ut. Audire eruditi ex his, ut imperdiet constituam ullamcorper nam. Sed cu etiam iudico qualisque. Dicam alienum ei vel.</p>
+                          <p>Quo ex mutat malorum conceptam, at usu dicta perfecto deserunt. An prompta offendit mel, sit regione constituto ei. Ludus possim hendrerit id vis, cu vim sonet dolorem mnesarchum, sit soleat aliquid eu. Ancillae appellantur cum ea. Agam delenit id qui, est summo corpora an.</p>
+                          </biggive-timeline-entry>
+                      </biggive-timeline>
+                      `;
+export const TimelineComponent = Template.bind({});
+TimelineComponent.args = {
+  spaceBelow: 4,
+  textColour: 'black',
+  selectedTextColour: 'primary',
+  navigationHighlightColour: 'grey-medium',
+  selectedNavigationHighlightColour: 'primary',
+  buttonBackgroundColour: 'white',
+  buttonIconColour: 'primary',
+  entryBackgroundColour: 'white',
+  entryHighlightColour: 'tertiary',
+  entryDateColour: 'black',
+  entryTitleColour: 'primary',
+  entryContentColour: 'black',
+};

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

@@ -0,0 +1,14 @@
+/**
+ * @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;
+}
+
+:host {
+  display: block;
+}

package/dist/collection/components/biggive-timeline-entry/biggive-timeline-entry.js

@@ -0,0 +1,59 @@
+export class BiggiveTimelineEntry {
+  constructor() {
+    this.date = undefined;
+    this.heading = undefined;
+  }
+  render() {
+    return null;
+  }
+  static get is() { return "biggive-timeline-entry"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-timeline-entry.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-timeline-entry.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "date": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Should be in the format 'YYYY-mm-dd', for example '2023-01-01'"
+        },
+        "attribute": "date",
+        "reflect": false
+      },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "heading",
+        "reflect": false
+      }
+    };
+  }
+}