@biggive/components 202303201542.0.0 → 202303231047.0.0

package/dist/collection/components/biggive-biography-card/biggive-biography-card.js

@@ -2,12 +2,40 @@ import { h } from '@stencil/core';
 export class BiggiveBiographyCard {
   constructor() {
     this.spaceBelow = 0;
+    this.borderWidth = 0;
     this.imageUrl = '';
+    this.imageStyle = 'cover';
+    this.textColour = 'black';
+    this.backgroundColour = 'white';
     this.fullName = '';
     this.jobTitle = '';
+    this.textAlign = 'left';
+    this.ratio = '1,1.5';
+    this.circle = false;
+    this.rounded = false;
+    this.url = '';
   }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow }, this.imageUrl != '' ? (h("div", { class: "image-wrap", style: { 'background-image': "url('" + this.imageUrl + "')" } }, h("img", { src: this.imageUrl, alt: this.fullName, title: this.fullName }))) : null, h("h3", { class: "full-name" }, this.fullName), h("div", { class: "job-title" }, this.jobTitle)));
+    if (this.url != '') {
+      return (h("div", { class: 'container space-below-' + this.spaceBelow + ' text-colour-' + this.textColour + ' text-align-' + this.textAlign }, h("a", { href: this.url }, h("div", { class: 'sleeve circle-' +
+          this.circle.toString() +
+          ' border-colour-' +
+          this.backgroundColour +
+          ' background-colour-' +
+          this.backgroundColour +
+          ' border-width-' +
+          this.borderWidth }, this.imageUrl != '' ? (h("div", { "data-ratio": this.ratio, class: 'image-wrap image-style-' + this.imageStyle + ' rounded-' + this.rounded.toString(), style: { 'background-image': "url('" + this.imageUrl + "')" } }, h("img", { src: this.imageUrl, alt: this.fullName, title: this.fullName }), h("div", { class: "circle" }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z" }))))) : null), h("h3", { class: "full-name" }, this.fullName), h("div", { class: "job-title" }, this.jobTitle))));
+    }
+    else {
+      return (h("div", { class: 'container space-below-' + this.spaceBelow + ' text-colour-' + this.textColour + ' text-align-' + this.textAlign }, h("div", { class: 'sleeve circle-' +
+          this.circle.toString() +
+          ' border-colour-' +
+          this.backgroundColour +
+          ' background-colour-' +
+          this.backgroundColour +
+          ' border-width-' +
+          this.borderWidth }, this.imageUrl != '' ? (h("div", { "data-ratio": this.ratio, class: 'image-wrap image-style-' + this.imageStyle + ' rounded-' + this.rounded.toString(), style: { 'background-image': "url('" + this.imageUrl + "')" } }, h("img", { src: this.imageUrl, alt: this.fullName, title: this.fullName }))) : null), h("h3", { class: "full-name" }, this.fullName), h("div", { class: "job-title" }, this.jobTitle)));
+    }
   }
   static get is() { return "biggive-biography-card"; }
   static get encapsulation() { return "shadow"; }
@@ -27,20 +55,48 @@ export class BiggiveBiographyCard {
         "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"
       },
+      "borderWidth": {
+        "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": "border-width",
+        "reflect": false,
+        "defaultValue": "0"
+      },
       "imageUrl": {
         "type": "string",
         "mutable": false,
@@ -53,12 +109,76 @@ export class BiggiveBiographyCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Full URL of the main image."
+          "text": ""
         },
         "attribute": "image-url",
         "reflect": false,
         "defaultValue": "''"
       },
+      "imageStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'cover' | 'contain'",
+          "resolved": "\"contain\" | \"cover\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-style",
+        "reflect": false,
+        "defaultValue": "'cover'"
+      },
+      "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'"
+      },
+      "backgroundColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "brandColour",
+          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "references": {
+            "brandColour": {
+              "location": "import",
+              "path": "../../globals/brand-colour"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "background-colour",
+        "reflect": false,
+        "defaultValue": "'white'"
+      },
       "fullName": {
         "type": "string",
         "mutable": false,
@@ -71,7 +191,7 @@ export class BiggiveBiographyCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Job title"
+          "text": ""
         },
         "attribute": "full-name",
         "reflect": false,
@@ -89,11 +209,101 @@ export class BiggiveBiographyCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Job title"
+          "text": ""
         },
         "attribute": "job-title",
         "reflect": false,
         "defaultValue": "''"
+      },
+      "textAlign": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'center' | 'left' | 'right'",
+          "resolved": "\"center\" | \"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text-align",
+        "reflect": false,
+        "defaultValue": "'left'"
+      },
+      "ratio": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'1,1' | '1,1.5' | '1,2'",
+          "resolved": "\"1,1\" | \"1,1.5\" | \"1,2\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "ratio",
+        "reflect": false,
+        "defaultValue": "'1,1.5'"
+      },
+      "circle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "circle",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "rounded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "rounded",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "url",
+        "reflect": false,
+        "defaultValue": "''"
       }
     };
   }

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

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

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

@@ -226,6 +226,46 @@ a:hover {
   background-color: #FFFFFF;
 }
 
+.button-grey-extra-light {
+  color: #000000;
+  background-color: #D7D7D7;
+  border-color: #D7D7D7;
+}
+.button-grey-extra-light:hover {
+  color: #D7D7D7;
+  background-color: #000000;
+}
+
+.button-grey-light {
+  color: #000000;
+  background-color: #E8E8E8;
+  border-color: #E8E8E8;
+}
+.button-grey-light:hover {
+  color: #E8E8E8;
+  background-color: #000000;
+}
+
+.button-grey-medium {
+  color: #FFFFFF;
+  background-color: #8A8A8A;
+  border-color: #8A8A8A;
+}
+.button-grey-medium:hover {
+  color: #8A8A8A;
+  background-color: #FFFFFF;
+}
+
+.button-grey-dark {
+  color: #FFFFFF;
+  background-color: #4A4A4A;
+  border-color: #4A4A4A;
+}
+.button-grey-dark:hover {
+  color: #4A4A4A;
+  background-color: #FFFFFF;
+}
+
 .button-clear-primary {
   color: #2C089B;
   background-color: transparent;
@@ -357,6 +397,76 @@ a:hover {
   background-color: transparent;
 }
 
+.button-clear-black {
+  color: #000000;
+  background-color: transparent;
+  text-decoration: underline;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-black:hover {
+  color: #000000;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-grey-extra-light {
+  color: #D7D7D7;
+  background-color: transparent;
+  text-decoration: underline;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-grey-extra-light:hover {
+  color: #D7D7D7;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-grey-light {
+  color: #E8E8E8;
+  background-color: transparent;
+  text-decoration: underline;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-grey-light:hover {
+  color: #E8E8E8;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-grey-medium {
+  color: #8A8A8A;
+  background-color: transparent;
+  text-decoration: underline;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-grey-medium:hover {
+  color: #8A8A8A;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-grey-dark {
+  color: #4A4A4A;
+  background-color: transparent;
+  text-decoration: underline;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-grey-dark:hover {
+  color: #4A4A4A;
+  text-decoration: none;
+  background-color: transparent;
+}
+
 .button-rounded {
   border-radius: 27.5px;
 }

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

@@ -156,6 +156,7 @@ a:hover {
 .container .items .sleeve {
   display: flex;
   flex-flow: row wrap;
+  min-width: 100%;
 }
 .container .navigation {
   padding: 10px 0;
@@ -189,20 +190,30 @@ a:hover {
   height: 10px;
 }
 
+.container ::slotted(.hidden) {
+  display: none;
+}
+
+.column-count-5 ::slotted(*) {
+  width: calc(20% - 24px);
+  display: flex;
+  flex-direction: column;
+}
+
 .column-count-4 ::slotted(*) {
-  width: 25%;
+  width: calc(25% - 22.5px);
   display: flex;
   flex-direction: column;
 }
 
 .column-count-3 ::slotted(*) {
-  width: 33.3333333333%;
+  width: calc(33.3333333333% - 20px);
   display: flex;
   flex-direction: column;
 }
 
 .column-count-2 ::slotted(*) {
-  width: 50%;
+  width: calc(50% - 15px);
   display: flex;
   flex-direction: column;
 }
@@ -210,14 +221,16 @@ a:hover {
 @media screen and (max-width: 768px) {
   .column-count-2 ::slotted(*),
 .column-count-3 ::slotted(*),
-.column-count-4 ::slotted(*) {
+.column-count-4 ::slotted(*),
+.column-count-5 ::slotted(*) {
     width: calc(50% - 15px);
   }
 }
 @media screen and (max-width: 576px) {
   .column-count-2 ::slotted(*),
 .column-count-3 ::slotted(*),
-.column-count-4 ::slotted(*) {
+.column-count-4 ::slotted(*),
+.column-count-5 ::slotted(*) {
     width: 100%;
   }
 }

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

@@ -4,22 +4,29 @@ export class BiggiveCarousel {
     this.currentTab = 0;
     this.itemCount = 0;
     this.itemWidthPx = 0;
+    this.columnGapPx = 0;
     this.spaceBelow = 4;
     this.columnCount = 3;
     this.buttonBackgroundColour = 'white';
     this.buttonIconColour = 'primary';
   }
   componentDidRender() {
-    var _a;
+    var _a, _b;
     this.sleeve = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.sleeve');
-    let children = Array.from(this.host.children);
+    let children = new Array();
+    Array.from(this.host.children).forEach(item => {
+      if (!item.classList.contains('hidden')) {
+        children.push(item);
+      }
+    });
     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 + ' )';
+      this.columnGapPx = 30;
+      this.itemWidthPx = (((_b = this.sleeve.parentElement) === null || _b === void 0 ? void 0 : _b.offsetWidth) - (this.columnCount - 1) * this.columnGapPx) / this.columnCount;
+      this.sleeve.style.width = (this.itemWidthPx + this.columnGapPx) * children.length + 'px';
+      children.forEach(el => {
+        el.style.width = this.itemWidthPx + 'px';
+        el.style.marginRight = this.columnGapPx + 'px';
       });
     }
   }
@@ -29,10 +36,10 @@ export class BiggiveCarousel {
    */
   showTab(direction) {
     const newTab = this.currentTab + (direction === 'PREV' ? -1 : 1);
-    if (newTab < 0 || newTab > this.itemCount - 1) {
+    if (newTab < 0 || newTab > this.itemCount - this.columnCount) {
       return;
     }
-    const pos = 0 - this.itemWidthPx * newTab;
+    const pos = 0 - (this.itemWidthPx + this.columnGapPx) * newTab;
     this.sleeve.style.transitionDuration = '0.3s';
     this.sleeve.style.transitionTimingFunction = 'ease-out';
     this.sleeve.style.transform = 'translate3d(' + pos + 'px, 0, 0)';
@@ -95,8 +102,8 @@ export class BiggiveCarousel {
         "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "1 | 2 | 3 | 4 | 5",
+          "resolved": "1 | 2 | 3 | 4 | 5",
           "references": {}
         },
         "required": false,

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

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

package/dist/collection/components/biggive-filtered-carousel/biggive-filtered-carousel.css

@@ -0,0 +1,34 @@
+/**
+ * @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;
+}
+
+.filters {
+  margin-bottom: 15px;
+}
+.filters .button {
+  cursor: pointer;
+  border-radius: 20px;
+  padding: 5px 20px;
+  margin-right: 15px;
+  font-size: 13px;
+  line-height: 17px;
+  background-color: #FF7272;
+  color: #000000;
+  border-color: #FF7272;
+}
+.filters .button.active {
+  background-color: #000000;
+  border-color: #000000;
+  color: #FFFFFF;
+}