@biggive/components 202303031447.0.0 → 202303061752.0.0

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

@@ -0,0 +1,161 @@
+import { h } from '@stencil/core';
+export class BiggiveCarousel {
+  constructor() {
+    this.currentTab = 0;
+    this.itemCount = 0;
+    this.itemWidthPx = 0;
+    this.spaceBelow = 4;
+    this.columnCount = 3;
+    this.buttonBackgroundColour = 'white';
+    this.buttonIconColour = 'primary';
+  }
+  componentDidRender() {
+    var _a;
+    this.sleeve = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.sleeve');
+    let children = Array.from(this.host.children);
+    this.itemCount = children.length;
+    if (children.length > 0) {
+      // Item widths are set in CSS so we know they will all be the same.
+      this.itemWidthPx = children[0].offsetWidth;
+      this.sleeve.style.width = this.itemWidthPx * children.length + 'px';
+      children.forEach(function (el) {
+        el.style.width = 'calc( 100% / ' + children.length + ' )';
+      });
+    }
+  }
+  /*
+   * Animates a transition to show the NEXT or PREVIOUS element in the carousel.
+   * Does nothing if there is no next or previous element.
+   */
+  showTab(direction) {
+    const newTab = this.currentTab + (direction === 'PREV' ? -1 : 1);
+    if (newTab < 0 || newTab > this.itemCount - 1) {
+      return;
+    }
+    const pos = 0 - this.itemWidthPx * newTab;
+    this.sleeve.style.transitionDuration = '0.3s';
+    this.sleeve.style.transitionTimingFunction = 'ease-out';
+    this.sleeve.style.transform = 'translate3d(' + pos + 'px, 0, 0)';
+    this.currentTab = newTab;
+  }
+  clickPrevHandler() {
+    this.showTab('PREV');
+  }
+  clickNextHandler() {
+    this.showTab('NEXT');
+  }
+  render() {
+    return (h("div", { class: 'container column-count-' +
+        this.columnCount +
+        ' space-below-' +
+        this.spaceBelow +
+        ' button-background-colour-' +
+        this.buttonBackgroundColour +
+        ' button-icon-colour-' +
+        this.buttonIconColour }, h("div", { class: "items" }, h("div", { class: "sleeve" }, h("slot", null))), 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: "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" }))))));
+  }
+  static get is() { return "biggive-carousel"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-carousel.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-carousel.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": "4"
+      },
+      "columnCount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "column-count",
+        "reflect": false,
+        "defaultValue": "3"
+      },
+      "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-carousel/biggive-carousel.stories.js

@@ -0,0 +1,84 @@
+export default {
+  title: 'Components/Layout',
+  argTypes: {
+    spaceBelow: {
+      name: 'Space below',
+      control: {
+        type: 'select',
+        options: [0, 1, 2, 3, 4, 5, 6],
+      },
+    },
+    columnCount: {
+      name: 'Column Count',
+      control: {
+        type: 'select',
+        options: [1, 2, 3, 4],
+      },
+    },
+    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}"  
+                    column-count="${args.columnCount}"
+                    button-background-colour="${args.buttonBackgroundColour}"
+                    button-icon-colour="${args.buttonIconColour}"
+                    >
+                    <biggive-quote
+                    space-below="0"
+                    default-text-colour="primary"
+                    quote="1 Lorem ipsum dolor sit amet, has quod diam dolore cu, at solet interesset eam, cu nec affert quando legendos. Ut libris aperiam quo. Et tollit intellegebat mea. Dico nostrud vivendum no his, nam ne sumo illum iudicabit. Cu nec velit argumentum, no quando offendit neglegentur ius.  "
+                    attribution="this is the attribution"
+                    >
+                    </biggive-quote>
+                    <biggive-quote
+                    space-below="0"
+                    default-text-colour="secondary"
+                    quote="2 Lorem ipsum dolor sit amet, has quod diam dolore cu, at solet interesset eam, cu nec affert quando legendos. Ut libris aperiam quo. Et tollit intellegebat mea. Dico nostrud vivendum no his, nam ne sumo illum iudicabit. Cu nec velit argumentum, no quando offendit neglegentur ius.  "
+                    attribution="this is the attribution"
+                    >
+                    </biggive-quote>
+                    <biggive-quote
+                    space-below="0"
+                    default-text-colour="tertiary"
+                    quote="3 Lorem ipsum dolor sit amet, has quod diam dolore cu, at solet interesset eam, cu nec affert quando legendos. Ut libris aperiam quo. Et tollit intellegebat mea. Dico nostrud vivendum no his, nam ne sumo illum iudicabit. Cu nec velit argumentum, no quando offendit neglegentur ius.  "
+                    attribution="this is the attribution"
+                    >
+                    </biggive-quote>
+                    <biggive-quote
+                    space-below="0"
+                    default-text-colour="brand-1"
+                    quote="4 Lorem ipsum dolor sit amet, has quod diam dolore cu, at solet interesset eam, cu nec affert quando legendos. Ut libris aperiam quo. Et tollit intellegebat mea. Dico nostrud vivendum no his, nam ne sumo illum iudicabit. Cu nec velit argumentum, no quando offendit neglegentur ius.  "
+                    attribution="this is the attribution"
+                    >
+                    </biggive-quote>
+                    <biggive-quote
+                    space-below="0"
+                    default-text-colour="brand-2"
+                    quote="5 Lorem ipsum dolor sit amet, has quod diam dolore cu, at solet interesset eam, cu nec affert quando legendos. Ut libris aperiam quo. Et tollit intellegebat mea. Dico nostrud vivendum no his, nam ne sumo illum iudicabit. Cu nec velit argumentum, no quando offendit neglegentur ius.  "
+                    attribution="this is the attribution"
+                    >
+                    </biggive-quote>
+                  </biggive-tabbed-content>
+                  `;
+export const CarouselComponent = Template.bind({});
+CarouselComponent.args = {
+  spaceBelow: 4,
+  columnCount: 3,
+  buttonBackgroundColour: 'white',
+  buttonIconColour: 'primary',
+};

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

@@ -64,6 +64,31 @@ a:hover {
   background-color: #000000;
 }
 
+.background-colour-hover-white:hover,
+.background-colour-white {
+  background-color: #FFFFFF;
+}
+
+.background-colour-hover-grey-extra-light:hover,
+.background-colour-grey-extra-light {
+  background-color: #D7D7D7;
+}
+
+.background-colour-hover-grey-light:hover,
+.background-colour-grey-light {
+  background-color: #E8E8E8;
+}
+
+.background-colour-hover-grey-medium:hover,
+.background-colour-grey-medium {
+  background-color: #8A8A8A;
+}
+
+.background-colour-hover-grey-dark:hover,
+.background-colour-grey-dark {
+  background-color: #4A4A4A;
+}
+
 .fill-primary {
   fill: #2C089B;
 }
@@ -112,6 +137,22 @@ a:hover {
   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;
 }
@@ -213,6 +254,30 @@ a:hover {
 .category-icon-item.colour-scheme-black svg {
   fill: #FFFFFF;
 }
+.category-icon-item.colour-scheme-black {
+  background-color: #D7D7D7;
+}
+.category-icon-item.colour-scheme-black svg {
+  fill: #D7D7D7;
+}
+.category-icon-item.colour-scheme-black {
+  background-color: #E8E8E8;
+}
+.category-icon-item.colour-scheme-black svg {
+  fill: #E8E8E8;
+}
+.category-icon-item.colour-scheme-black {
+  background-color: #8A8A8A;
+}
+.category-icon-item.colour-scheme-black svg {
+  fill: #8A8A8A;
+}
+.category-icon-item.colour-scheme-black {
+  background-color: #4A4A4A;
+}
+.category-icon-item.colour-scheme-black svg {
+  fill: #4A4A4A;
+}
 .category-icon-item:hover {
   background-color: #FFFFFF;
 }

package/dist/collection/components/biggive-formatted-text/biggive-formatted-text.css

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

package/dist/collection/components/biggive-hero-image/biggive-hero-image.css

@@ -125,6 +125,26 @@ a:hover {
   color: #000000;
 }
 
+.text-colour-hover-grey-extra-light:hover,
+.text-colour-grey-extra-light {
+  color: #D7D7D7;
+}
+
+.text-colour-hover-grey-light:hover,
+.text-colour-grey-light {
+  color: #E8E8E8;
+}
+
+.text-colour-hover-grey-medium:hover,
+.text-colour-grey-medium {
+  color: #8A8A8A;
+}
+
+.text-colour-hover-grey-dark:hover,
+.text-colour-grey-dark {
+  color: #4A4A4A;
+}
+
 :host {
   display: contents;
   font-family: "Euclid Triangle", sans-serif;
@@ -139,6 +159,7 @@ a:hover {
   overflow: hidden;
   position: relative;
   margin-bottom: 30px;
+  min-height: 32.5vw;
 }
 .container.colour-scheme-primary {
   color: #2C089B;
@@ -149,12 +170,42 @@ a:hover {
 .container.colour-scheme-tertiary {
   color: #FF7272;
 }
+.container.colour-scheme-brand-1 {
+  color: #B30510;
+}
+.container.colour-scheme-brand-2 {
+  color: #6E0887;
+}
+.container.colour-scheme-brand-3 {
+  color: #50B400;
+}
+.container.colour-scheme-brand-4 {
+  color: #FFE500;
+}
+.container.colour-scheme-brand-5 {
+  color: #F07D00;
+}
+.container.colour-scheme-brand-6 {
+  color: #62CFC9;
+}
 .container.colour-scheme-white {
   color: #FFFFFF;
 }
 .container.colour-scheme-black {
   color: #000000;
 }
+.container.colour-scheme-grey-extra-light {
+  color: #D7D7D7;
+}
+.container.colour-scheme-grey-light {
+  color: #E8E8E8;
+}
+.container.colour-scheme-grey-medium {
+  color: #8A8A8A;
+}
+.container.colour-scheme-grey-dark {
+  color: #4A4A4A;
+}
 .container .sleeve {
   display: flex;
   justify-content: space-between;
@@ -172,30 +223,46 @@ a:hover {
 .container .content-wrap .logo, .container .content-wrap .logo-space {
   height: 75px;
 }
+.container .content-wrap .logo.logo-height-1, .container .content-wrap .logo-space.logo-height-1 {
+  height: 50px;
+}
+.container .content-wrap .logo.logo-height-2, .container .content-wrap .logo-space.logo-height-2 {
+  height: 75px;
+}
+.container .content-wrap .logo.logo-height-3, .container .content-wrap .logo-space.logo-height-3 {
+  height: 100px;
+}
+.container .content-wrap .logo.logo-height-4, .container .content-wrap .logo-space.logo-height-4 {
+  height: 125px;
+}
+.container .content-wrap .logo.logo-height-5, .container .content-wrap .logo-space.logo-height-5 {
+  height: 150px;
+}
+.container .content-wrap .logo.logo-height-6, .container .content-wrap .logo-space.logo-height-6 {
+  height: 175px;
+}
+.container .content-wrap .logo.logo-height-7, .container .content-wrap .logo-space.logo-height-7 {
+  height: 200px;
+}
+.container .content-wrap .logo.logo-height-8, .container .content-wrap .logo-space.logo-height-8 {
+  height: 225px;
+}
+.container .content-wrap .logo.logo-height-9, .container .content-wrap .logo-space.logo-height-9 {
+  height: 250px;
+}
+.container .content-wrap .logo.logo-height-10, .container .content-wrap .logo-space.logo-height-10 {
+  height: 275px;
+}
 .container .content-wrap .logo {
   background-size: contain;
   background-repeat: no-repeat;
   background-position: left center;
 }
 .container .content-wrap .logo img {
-  width: 250px;
+  width: auto;
+  height: 100%;
   position: relative;
 }
-@media (max-width: 1200px) {
-  .container .content-wrap .logo img {
-    width: 210px;
-  }
-}
-@media (max-width: 768px) {
-  .container .content-wrap .logo img {
-    width: 200px;
-  }
-}
-@media (max-width: 576px) {
-  .container .content-wrap .logo img {
-    width: 180px;
-  }
-}
 .container .content-wrap .slug {
   font-size: 20px;
   line-height: 24px;
@@ -227,8 +294,8 @@ a:hover {
   display: block;
   top: 0;
   left: 0;
-  bottom: 0;
   right: 0;
+  padding-bottom: 32.5vw;
   background-color: #F1F1F1;
   margin-left: 20vw;
   clip-path: polygon(0 0, 100% 0, 100% 100%);
@@ -247,6 +314,9 @@ a:hover {
 }
 
 @media screen and (max-width: 1200px) {
+  .container {
+    min-height: 50vw;
+  }
   .container .sleeve {
     flex-wrap: wrap;
   }
@@ -258,7 +328,7 @@ a:hover {
   .container .sleeve .graphic-wrap {
     margin-left: 0;
     bottom: auto;
-    padding-bottom: 50%;
+    padding-bottom: 50vw;
   }
 }
 @media screen and (max-width: 768px) {

package/dist/collection/components/biggive-hero-image/biggive-hero-image.js

@@ -7,6 +7,7 @@ export class BiggiveHeroImage {
     this.slug = undefined;
     this.slugColour = undefined;
     this.logo = '';
+    this.logoHeight = 3;
     this.logoAltText = '';
     this.mainImage = null;
     this.mainImageAlignHorizontal = 'center';
@@ -22,7 +23,7 @@ export class BiggiveHeroImage {
   render() {
     const mainTitleClasses = 'main-title ' + (typeof this.mainTitleColour === 'string' && this.mainTitleColour.length > 0 ? `text-colour-${this.mainTitleColour}` : '');
     const teaserClasses = 'teaser ' + (typeof this.teaserColour === 'string' && this.teaserColour.length > 0 ? `text-colour-${this.teaserColour}` : '');
-    return (h("div", { class: 'container colour-scheme-' + this.colourScheme + ' space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "content-wrap" }, this.logo !== undefined && this.logo !== null ? (h("div", { class: "logo image-wrap" }, h("img", { src: this.logo, alt: this.logoAltText, title: this.logoAltText }))) : h("div", { class: "logo-space" }), h("div", { class: 'slug text-colour-' + this.slugColour }, this.slug), h("h1", { class: mainTitleClasses }, this.mainTitle), h("div", { class: teaserClasses }, this.teaser), this.buttonLabel != null && this.buttonUrl != null
+    return (h("div", { class: 'container colour-scheme-' + this.colourScheme + ' space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "content-wrap" }, this.logo !== undefined && this.logo !== null ? (h("div", { class: 'logo image-wrap logo-height-' + this.logoHeight }, h("img", { src: this.logo, alt: this.logoAltText, title: this.logoAltText }))) : h("div", { class: 'logo-space logo-height-' + this.logoHeight }), h("div", { class: 'slug text-colour-' + this.slugColour }, this.slug), h("h1", { class: mainTitleClasses }, this.mainTitle), h("div", { class: teaserClasses }, this.teaser), this.buttonLabel != null && this.buttonUrl != null
       ? h("biggive-button", { "colour-scheme": this.buttonColourScheme, url: this.buttonUrl, label: this.buttonLabel })
       : null), h("div", { class: "graphic-wrap" }, this.mainImage !== null ? (h("div", { class: "image-wrap", role: "presentation", style: { 'background-image': 'url(' + this.mainImage + ')', 'background-position': this.mainImageAlignHorizontal + ' ' + this.mainImageAlignVertical } })) : null))));
   }
@@ -44,9 +45,14 @@ export class BiggiveHeroImage {
         "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,
@@ -62,9 +68,14 @@ export class BiggiveHeroImage {
         "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,
@@ -97,9 +108,14 @@ export class BiggiveHeroImage {
         "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,
@@ -128,6 +144,24 @@ export class BiggiveHeroImage {
         "reflect": false,
         "defaultValue": "''"
       },
+      "logoHeight": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "1|2|3|4|5|6|7|8|9|10",
+          "resolved": "1 | 10 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Logo container height selection. Numbers are not measurements."
+        },
+        "attribute": "logo-height",
+        "reflect": false,
+        "defaultValue": "3"
+      },
       "logoAltText": {
         "type": "string",
         "mutable": false,
@@ -221,9 +255,14 @@ export class BiggiveHeroImage {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "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\" | undefined",
+          "references": {
+            "brandColour": {
+              "location": "import",
+              "path": "../../globals/brand-colour"
+            }
+          }
         },
         "required": false,
         "optional": true,
@@ -255,9 +294,14 @@ export class BiggiveHeroImage {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "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\" | undefined",
+          "references": {
+            "brandColour": {
+              "location": "import",
+              "path": "../../globals/brand-colour"
+            }
+          }
         },
         "required": false,
         "optional": true,
@@ -306,9 +350,14 @@ export class BiggiveHeroImage {
         "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,