@biggive/components 202302161725.0.0 → 202303031057.0.0

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

@@ -116,6 +116,7 @@ h5, .heading-5 {
   font-family: "Euclid Triangle", sans-serif;
   font-size: 17px;
   line-height: 24px;
+  display: flex;
 }
 .container .heading-colour-primary {
   color: #2C089B;
@@ -126,9 +127,92 @@ h5, .heading-5 {
 .container .heading-colour-tertiary {
   color: #FF7272;
 }
+.container .heading-colour-brand-1 {
+  color: #B30510;
+}
+.container .heading-colour-brand-2 {
+  color: #6E0887;
+}
+.container .heading-colour-brand-3 {
+  color: #50B400;
+}
+.container .heading-colour-brand-4 {
+  color: #FFE500;
+}
+.container .heading-colour-brand-5 {
+  color: #F07D00;
+}
+.container .heading-colour-brand-6 {
+  color: #62CFC9;
+}
 .container .heading-colour-white {
   color: #FFFFFF;
 }
 .container .heading-colour-black {
   color: #000000;
+}
+.container .heading-colour-grey-extra-light {
+  color: #D7D7D7;
+}
+.container .heading-colour-grey-light {
+  color: #E8E8E8;
+}
+.container .heading-colour-grey-medium {
+  color: #8A8A8A;
+}
+.container .heading-colour-grey-dark {
+  color: #4A4A4A;
+}
+.container h1, .container h2, .container h3, .container h4, .container h5 {
+  margin: 0;
+  padding: 0;
+}
+.container h1 svg, .container h2 svg, .container h3 svg, .container h4 svg, .container h5 svg {
+  height: 0.7em;
+  margin-right: 0.2em;
+}
+.container .icon-colour-primary svg path {
+  fill: #2C089B;
+}
+.container .icon-colour-secondary svg path {
+  fill: #2AF135;
+}
+.container .icon-colour-tertiary svg path {
+  fill: #FF7272;
+}
+.container .icon-colour-brand-1 svg path {
+  fill: #B30510;
+}
+.container .icon-colour-brand-2 svg path {
+  fill: #6E0887;
+}
+.container .icon-colour-brand-3 svg path {
+  fill: #50B400;
+}
+.container .icon-colour-brand-4 svg path {
+  fill: #FFE500;
+}
+.container .icon-colour-brand-5 svg path {
+  fill: #F07D00;
+}
+.container .icon-colour-brand-6 svg path {
+  fill: #62CFC9;
+}
+.container .icon-colour-white svg path {
+  fill: #FFFFFF;
+}
+.container .icon-colour-black svg path {
+  fill: #000000;
+}
+.container .icon-colour-grey-extra-light svg path {
+  fill: #D7D7D7;
+}
+.container .icon-colour-grey-light svg path {
+  fill: #E8E8E8;
+}
+.container .icon-colour-grey-medium svg path {
+  fill: #8A8A8A;
+}
+.container .icon-colour-grey-dark svg path {
+  fill: #4A4A4A;
 }

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

@@ -1,8 +1,8 @@
 import { h } from '@stencil/core';
 export class BiggiveHeading {
   constructor() {
-    this.spaceAbove = 0;
-    this.spaceBelow = 0;
+    this.spaceAbove = 2;
+    this.spaceBelow = 4;
     this.colour = 'primary';
     this.htmlElement = 'h1';
     this.size = 1;
@@ -13,7 +13,7 @@ export class BiggiveHeading {
   }
   render() {
     const Tag = this.htmlElement;
-    return (h("div", { class: 'container align-' + this.align + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow }, this.icon ? (h("svg", { viewBox: "0 0 102 88" }, h("path", { class: "st0", d: "M51.2,0l-51,88h102L51.2,0z" }), h("path", { d: "M31,68.3c-1,0-1.9-0.9-1.9-1.9c0-1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9C32.9,67.5,32.1,68.3,31,68.3z M29.5,79.4h3v-10\n         h-3V79.4z M41,69.4V70c-0.5-0.5-1.4-0.9-2.5-0.9c-2.7,0-4.9,2-4.9,4.9c0,2.9,2.2,4.9,4.9,4.9c1.1,0,2-0.3,2.5-0.9v0.6\n         c0,1.3-1.2,1.9-2.7,1.9c-1.3,0-2.4-0.3-3.5-0.9v3c1.3,0.5,2.7,0.6,3.6,0.6c3,0,5.5-1.3,5.5-4.6v-9.4L41,69.4L41,69.4z M41,75.3\n         c-0.4,0.6-1.2,0.9-1.9,0.9c-1.3,0-2.3-0.8-2.3-2.2c0-1.4,1-2.2,2.3-2.2c0.8,0,1.5,0.4,1.9,0.9V75.3z M52.8,79.7\n         c2.4,0,3.8-0.4,5.1-1.2v-7.7h-6.6v2.9h3.5v2.6c-0.5,0.1-1.1,0.3-1.9,0.3c-3,0-4.4-2-4.4-4.3c0-2.3,1.7-4.3,4.8-4.3\n         c1.3,0,2.6,0.4,3.5,0.9v-3.3c-0.9-0.4-2.1-0.7-3.7-0.7c-4.6,0-7.8,3.3-7.8,7.4C45.2,76.5,48.1,79.7,52.8,79.7z M60.7,68.3\n         c-1,0-1.9-0.9-1.9-1.9c0-1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9C62.6,67.5,61.8,68.3,60.7,68.3z M59.2,79.4h3v-10h-3V79.4z\n          M69,73.9l-2.6-4.5h-3.5l6,10.3l6-10.3h-3.5L69,73.9z M77.5,75.1h7c0-4.4-2.5-6-5.1-6c-2.7,0-5.1,1.6-5.1,5.2c0,3.5,2.5,5.2,5.5,5.2\n         c1.3,0,2.7-0.2,3.8-0.8v-2.8c-1.5,0.9-2.5,0.9-3.3,0.9C78.9,76.9,77.6,76.5,77.5,75.1z M79.4,71.5c0.9,0,1.7,0.4,1.8,1.7h-3.7\n         C77.7,72,78.6,71.5,79.4,71.5z M26,71.6c0.7-0.6,1.1-1.5,1.1-2.5c0-1.9-1.8-3.9-4.4-3.9h-4.8v14.3h6.3c2.4,0,4.3-1.9,4.3-4.2\n         C28.4,73.8,27.8,72.2,26,71.6z M21,68.1h1.4c0.9,0,1.5,0.7,1.5,1.4c0,0.8-0.6,1.4-1.5,1.4H21V68.1z M23.8,76.5H21v-2.9h2.8\n         c0.9,0,1.5,0.6,1.5,1.4C25.3,75.9,24.7,76.5,23.8,76.5z" }))) : null, h(Tag, { class: 'heading-colour-' + this.colour + ' heading-' + this.size }, this.text)));
+    return (h("div", { class: 'container align-' + this.align + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow }, h(Tag, { class: 'heading-colour-' + this.colour + ' icon-colour-' + this.iconColour + ' heading-' + this.size }, this.icon ? (h("svg", { viewBox: "0 0 102 88" }, h("path", { class: "st0", d: "M51.2,0l-51,88h102L51.2,0z" }), h("path", { d: "M31,68.3c-1,0-1.9-0.9-1.9-1.9c0-1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9C32.9,67.5,32.1,68.3,31,68.3z M29.5,79.4h3v-10\n         h-3V79.4z M41,69.4V70c-0.5-0.5-1.4-0.9-2.5-0.9c-2.7,0-4.9,2-4.9,4.9c0,2.9,2.2,4.9,4.9,4.9c1.1,0,2-0.3,2.5-0.9v0.6\n         c0,1.3-1.2,1.9-2.7,1.9c-1.3,0-2.4-0.3-3.5-0.9v3c1.3,0.5,2.7,0.6,3.6,0.6c3,0,5.5-1.3,5.5-4.6v-9.4L41,69.4L41,69.4z M41,75.3\n         c-0.4,0.6-1.2,0.9-1.9,0.9c-1.3,0-2.3-0.8-2.3-2.2c0-1.4,1-2.2,2.3-2.2c0.8,0,1.5,0.4,1.9,0.9V75.3z M52.8,79.7\n         c2.4,0,3.8-0.4,5.1-1.2v-7.7h-6.6v2.9h3.5v2.6c-0.5,0.1-1.1,0.3-1.9,0.3c-3,0-4.4-2-4.4-4.3c0-2.3,1.7-4.3,4.8-4.3\n         c1.3,0,2.6,0.4,3.5,0.9v-3.3c-0.9-0.4-2.1-0.7-3.7-0.7c-4.6,0-7.8,3.3-7.8,7.4C45.2,76.5,48.1,79.7,52.8,79.7z M60.7,68.3\n         c-1,0-1.9-0.9-1.9-1.9c0-1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9C62.6,67.5,61.8,68.3,60.7,68.3z M59.2,79.4h3v-10h-3V79.4z\n          M69,73.9l-2.6-4.5h-3.5l6,10.3l6-10.3h-3.5L69,73.9z M77.5,75.1h7c0-4.4-2.5-6-5.1-6c-2.7,0-5.1,1.6-5.1,5.2c0,3.5,2.5,5.2,5.5,5.2\n         c1.3,0,2.7-0.2,3.8-0.8v-2.8c-1.5,0.9-2.5,0.9-3.3,0.9C78.9,76.9,77.6,76.5,77.5,75.1z M79.4,71.5c0.9,0,1.7,0.4,1.8,1.7h-3.7\n         C77.7,72,78.6,71.5,79.4,71.5z M26,71.6c0.7-0.6,1.1-1.5,1.1-2.5c0-1.9-1.8-3.9-4.4-3.9h-4.8v14.3h6.3c2.4,0,4.3-1.9,4.3-4.2\n         C28.4,73.8,27.8,72.2,26,71.6z M21,68.1h1.4c0.9,0,1.5,0.7,1.5,1.4c0,0.8-0.6,1.4-1.5,1.4H21V68.1z M23.8,76.5H21v-2.9h2.8\n         c0.9,0,1.5,0.6,1.5,1.4C25.3,75.9,24.7,76.5,23.8,76.5z" }))) : null, this.text)));
   }
   static get is() { return "biggive-heading"; }
   static get encapsulation() { return "shadow"; }
@@ -33,51 +33,66 @@ export class BiggiveHeading {
         "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 above component"
+          "text": ""
         },
         "attribute": "space-above",
         "reflect": false,
-        "defaultValue": "0"
+        "defaultValue": "2"
       },
       "spaceBelow": {
         "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"
+        "defaultValue": "4"
       },
       "colour": {
         "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-light\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "references": {
+            "brandColour": {
+              "location": "import",
+              "path": "../../globals/brand-colour"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Colour Scheme"
+          "text": ""
         },
         "attribute": "colour",
         "reflect": false,
@@ -87,15 +102,20 @@ export class BiggiveHeading {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "headingTag",
+          "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+          "references": {
+            "headingTag": {
+              "location": "import",
+              "path": "../../globals/heading-tag"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "HTML element"
+          "text": ""
         },
         "attribute": "html-element",
         "reflect": false,
@@ -105,15 +125,20 @@ export class BiggiveHeading {
         "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
+          "original": "headingSize",
+          "resolved": "1 | 2 | 3 | 4 | 5",
+          "references": {
+            "headingSize": {
+              "location": "import",
+              "path": "../../globals/heading-size"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Heading size"
+          "text": ""
         },
         "attribute": "size",
         "reflect": false,
@@ -131,7 +156,7 @@ export class BiggiveHeading {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Text alignment"
+          "text": ""
         },
         "attribute": "align",
         "reflect": false,
@@ -149,7 +174,7 @@ export class BiggiveHeading {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Heading text"
+          "text": ""
         },
         "attribute": "text",
         "reflect": false,
@@ -167,7 +192,7 @@ export class BiggiveHeading {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Icon"
+          "text": ""
         },
         "attribute": "icon",
         "reflect": false,
@@ -177,15 +202,20 @@ export class BiggiveHeading {
         "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-light\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "references": {
+            "brandColour": {
+              "location": "import",
+              "path": "../../globals/brand-colour"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Icon colour"
+          "text": ""
         },
         "attribute": "icon-colour",
         "reflect": false,

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: #B30510;
+}
+.container.header-background-colour-brand-1 thead {
+  background-color: #B30510;
+}
+.container.body-text-colour-brand-1 tbody {
+  color: #B30510;
+}
+.container.body-background-colour-brand-1 tbody {
+  background-color: #B30510;
+}
+.container.header-text-colour-brand-2 thead {
+  color: #6E0887;
+}
+.container.header-background-colour-brand-2 thead {
+  background-color: #6E0887;
+}
+.container.body-text-colour-brand-2 tbody {
+  color: #6E0887;
+}
+.container.body-background-colour-brand-2 tbody {
+  background-color: #6E0887;
+}
+.container.header-text-colour-brand-3 thead {
+  color: #50B400;
+}
+.container.header-background-colour-brand-3 thead {
+  background-color: #50B400;
+}
+.container.body-text-colour-brand-3 tbody {
+  color: #50B400;
+}
+.container.body-background-colour-brand-3 tbody {
+  background-color: #50B400;
+}
+.container.header-text-colour-brand-4 thead {
+  color: #FFE500;
+}
+.container.header-background-colour-brand-4 thead {
+  background-color: #FFE500;
+}
+.container.body-text-colour-brand-4 tbody {
+  color: #FFE500;
+}
+.container.body-background-colour-brand-4 tbody {
+  background-color: #FFE500;
+}
+.container.header-text-colour-brand-5 thead {
+  color: #F07D00;
+}
+.container.header-background-colour-brand-5 thead {
+  background-color: #F07D00;
+}
+.container.body-text-colour-brand-5 tbody {
+  color: #F07D00;
+}
+.container.body-background-colour-brand-5 tbody {
+  background-color: #F07D00;
+}
+.container.header-text-colour-brand-6 thead {
+  color: #62CFC9;
+}
+.container.header-background-colour-brand-6 thead {
+  background-color: #62CFC9;
+}
+.container.body-text-colour-brand-6 tbody {
+  color: #62CFC9;
+}
+.container.body-background-colour-brand-6 tbody {
+  background-color: #62CFC9;
+}
+.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%;
+}