npm - @biggive/components - Versions diffs - 202303031447.0.0 → 202303171148.0.0 - Mend

@biggive/components 202303031447.0.0 → 202303171148.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (169) hide show

package/dist/collection/components/biggive-hero-image/biggive-hero-image.stories.js CHANGED Viewed

@@ -17,6 +17,7 @@ const Template = args => `
       slug="${args.slug}"
       slug-colour="${args.slugColour}"
       logo="${args.logo}"
+      logo-height="${args.logoHeight}"
       logo-alt-text="${args.logoAltText}"
       main-image="${args.mainImage}"
       main-image-align-horizontal="${args.mainImageAlignHorizontal}"
@@ -37,6 +38,7 @@ HeroImageComponent.args = {
   slug: 'Test slug',
   slugColour: null,
   logo: 'https://media.istockphoto.com/vectors/childish-seamless-dotted-pattern-with-colorful-doodle-letters-fun-vector-id1208462693',
+  logoHeight: 'medium',
   logoAltText: 'Logo description',
   mainImage: 'https://media.istockphoto.com/vectors/childish-seamless-dotted-pattern-with-colorful-doodle-letters-fun-vector-id1208462693',
   mainImageAlignHorizontal: 'center',

package/dist/collection/components/biggive-image-feature/biggive-image-feature.css CHANGED Viewed

@@ -69,6 +69,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;
 }

package/dist/collection/components/biggive-misc-icon/biggive-misc-icon.css CHANGED Viewed

@@ -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;
 }
@@ -195,6 +236,30 @@ a:hover {
 .misc-icon-item.colour-scheme-black svg {
   fill: #FFFFFF;
 }
+.misc-icon-item.colour-scheme-black {
+  background-color: #D7D7D7;
+}
+.misc-icon-item.colour-scheme-black svg {
+  fill: #D7D7D7;
+}
+.misc-icon-item.colour-scheme-black {
+  background-color: #E8E8E8;
+}
+.misc-icon-item.colour-scheme-black svg {
+  fill: #E8E8E8;
+}
+.misc-icon-item.colour-scheme-black {
+  background-color: #8A8A8A;
+}
+.misc-icon-item.colour-scheme-black svg {
+  fill: #8A8A8A;
+}
+.misc-icon-item.colour-scheme-black {
+  background-color: #4A4A4A;
+}
+.misc-icon-item.colour-scheme-black svg {
+  fill: #4A4A4A;
+}
 .misc-icon-item:hover {
   background-color: #FFFFFF;
 }
@@ -291,6 +356,30 @@ a:hover {
   .misc-icon-item.colour-scheme-black svg {
     fill: #FFFFFF;
   }
+  .misc-icon-item.colour-scheme-black {
+    background-color: #D7D7D7;
+  }
+  .misc-icon-item.colour-scheme-black svg {
+    fill: #D7D7D7;
+  }
+  .misc-icon-item.colour-scheme-black {
+    background-color: #E8E8E8;
+  }
+  .misc-icon-item.colour-scheme-black svg {
+    fill: #E8E8E8;
+  }
+  .misc-icon-item.colour-scheme-black {
+    background-color: #8A8A8A;
+  }
+  .misc-icon-item.colour-scheme-black svg {
+    fill: #8A8A8A;
+  }
+  .misc-icon-item.colour-scheme-black {
+    background-color: #4A4A4A;
+  }
+  .misc-icon-item.colour-scheme-black svg {
+    fill: #4A4A4A;
+  }
   .misc-icon-item:hover {
     background-color: #FFFFFF;
   }

package/dist/collection/components/biggive-quote/biggive-quote.css CHANGED Viewed

@@ -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;
 }
@@ -153,6 +173,51 @@ a:hover {
 .container .quote {
   margin-bottom: 30px;
 }
+.container.quote-icon-colour-primary .image-wrap path {
+  fill: #2C089B;
+}
+.container.quote-icon-colour-secondary .image-wrap path {
+  fill: #2AF135;
+}
+.container.quote-icon-colour-tertiary .image-wrap path {
+  fill: #FF7272;
+}
+.container.quote-icon-colour-brand-1 .image-wrap path {
+  fill: #B30510;
+}
+.container.quote-icon-colour-brand-2 .image-wrap path {
+  fill: #6E0887;
+}
+.container.quote-icon-colour-brand-3 .image-wrap path {
+  fill: #50B400;
+}
+.container.quote-icon-colour-brand-4 .image-wrap path {
+  fill: #FFE500;
+}
+.container.quote-icon-colour-brand-5 .image-wrap path {
+  fill: #F07D00;
+}
+.container.quote-icon-colour-brand-6 .image-wrap path {
+  fill: #62CFC9;
+}
+.container.quote-icon-colour-white .image-wrap path {
+  fill: #FFFFFF;
+}
+.container.quote-icon-colour-black .image-wrap path {
+  fill: #000000;
+}
+.container.quote-icon-colour-grey-extra-light .image-wrap path {
+  fill: #D7D7D7;
+}
+.container.quote-icon-colour-grey-light .image-wrap path {
+  fill: #E8E8E8;
+}
+.container.quote-icon-colour-grey-medium .image-wrap path {
+  fill: #8A8A8A;
+}
+.container.quote-icon-colour-grey-dark .image-wrap path {
+  fill: #4A4A4A;
+}
 @media screen and (max-width: 768px) {
   .container {
     padding: 45px;

package/dist/collection/components/biggive-quote/biggive-quote.js CHANGED Viewed

@@ -5,9 +5,10 @@ export class BiggiveQuote {
     this.defaultTextColour = 'black';
     this.quote = '';
     this.attribution = '';
+    this.quoteIconColour = 'primary';
   }
   render() {
-    return (h("div", { class: 'container text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow }, h("div", { class: "image-wrap" }, h("svg", { width: "34", height: "24", viewBox: "0 0 34 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M16.1245 0L13.7167 24H0L11.0901 0H16.1245ZM34 0L31.5923 24H17.8755L28.9657 0H34Z", fill: "#2C089B" }))), h("div", { class: "quote" }, "\u201C", this.quote, "\u201D"), h("div", { class: "attribution" }, " - ", this.attribution)));
+    return (h("div", { class: 'container text-colour-' + this.defaultTextColour + ' quote-icon-colour-' + this.quoteIconColour + ' space-below-' + this.spaceBelow }, h("div", { class: "image-wrap" }, h("svg", { width: "34", height: "24", viewBox: "0 0 34 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M16.1245 0L13.7167 24H0L11.0901 0H16.1245ZM34 0L31.5923 24H17.8755L28.9657 0H34Z", fill: "#2C089B" }))), h("div", { class: "quote" }, "\u201C", this.quote, "\u201D"), h("div", { class: "attribution" }, " - ", this.attribution)));
   }
   static get is() { return "biggive-quote"; }
   static get encapsulation() { return "shadow"; }
@@ -27,15 +28,20 @@ export class BiggiveQuote {
         "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,
@@ -45,15 +51,20 @@ export class BiggiveQuote {
         "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",
         "reflect": false,
@@ -71,7 +82,7 @@ export class BiggiveQuote {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Quote text"
+          "text": ""
         },
         "attribute": "quote",
         "reflect": false,
@@ -89,11 +100,34 @@ export class BiggiveQuote {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Attribution text"
+          "text": ""
         },
         "attribute": "attribution",
         "reflect": false,
         "defaultValue": "''"
+      },
+      "quoteIconColour": {
+        "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": "quote-icon-colour",
+        "reflect": false,
+        "defaultValue": "'primary'"
       }
     };
   }

package/dist/collection/components/biggive-social-icon/biggive-social-icon.css CHANGED Viewed

@@ -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;
 }
@@ -196,6 +237,30 @@ a:hover {
 .social-icon-item.colour-scheme-black svg {
   fill: #FFFFFF;
 }
+.social-icon-item.colour-scheme-black {
+  background-color: #D7D7D7;
+}
+.social-icon-item.colour-scheme-black svg {
+  fill: #D7D7D7;
+}
+.social-icon-item.colour-scheme-black {
+  background-color: #E8E8E8;
+}
+.social-icon-item.colour-scheme-black svg {
+  fill: #E8E8E8;
+}
+.social-icon-item.colour-scheme-black {
+  background-color: #8A8A8A;
+}
+.social-icon-item.colour-scheme-black svg {
+  fill: #8A8A8A;
+}
+.social-icon-item.colour-scheme-black {
+  background-color: #4A4A4A;
+}
+.social-icon-item.colour-scheme-black svg {
+  fill: #4A4A4A;
+}
 .social-icon-item:hover {
   background-color: #FFFFFF;
 }
@@ -294,6 +359,30 @@ a:hover {
   .social-icon-item.colour-scheme-black svg {
     fill: #FFFFFF;
   }
+  .social-icon-item.colour-scheme-black {
+    background-color: #D7D7D7;
+  }
+  .social-icon-item.colour-scheme-black svg {
+    fill: #D7D7D7;
+  }
+  .social-icon-item.colour-scheme-black {
+    background-color: #E8E8E8;
+  }
+  .social-icon-item.colour-scheme-black svg {
+    fill: #E8E8E8;
+  }
+  .social-icon-item.colour-scheme-black {
+    background-color: #8A8A8A;
+  }
+  .social-icon-item.colour-scheme-black svg {
+    fill: #8A8A8A;
+  }
+  .social-icon-item.colour-scheme-black {
+    background-color: #4A4A4A;
+  }
+  .social-icon-item.colour-scheme-black svg {
+    fill: #4A4A4A;
+  }
   .social-icon-item:hover {
     background-color: #FFFFFF;
   }
@@ -391,6 +480,30 @@ a:hover {
   .social-icon-item.wide.colour-scheme-black svg {
     fill: #FFFFFF;
   }
+  .social-icon-item.wide.colour-scheme-black {
+    background-color: #D7D7D7;
+  }
+  .social-icon-item.wide.colour-scheme-black svg {
+    fill: #D7D7D7;
+  }
+  .social-icon-item.wide.colour-scheme-black {
+    background-color: #E8E8E8;
+  }
+  .social-icon-item.wide.colour-scheme-black svg {
+    fill: #E8E8E8;
+  }
+  .social-icon-item.wide.colour-scheme-black {
+    background-color: #8A8A8A;
+  }
+  .social-icon-item.wide.colour-scheme-black svg {
+    fill: #8A8A8A;
+  }
+  .social-icon-item.wide.colour-scheme-black {
+    background-color: #4A4A4A;
+  }
+  .social-icon-item.wide.colour-scheme-black svg {
+    fill: #4A4A4A;
+  }
   .social-icon-item.wide:hover {
     background-color: #FFFFFF;
   }

package/dist/collection/components/biggive-tab/biggive-tab.js CHANGED Viewed

@@ -4,7 +4,7 @@ export class BiggiveTab {
     this.tabTitle = '';
   }
   render() {
-    return (h("div", { class: "container" }, h("div", { class: "title" }, this.tabTitle), h("div", { class: "content" }, h("slot", null))));
+    return (h("div", { class: "container" }, h("slot", null)));
   }
   static get is() { return "biggive-tab"; }
   static get encapsulation() { return "shadow"; }
@@ -32,7 +32,7 @@ export class BiggiveTab {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Title"
+          "text": ""
         },
         "attribute": "tab-title",
         "reflect": false,