@biggive/components 202303201257.0.0 → 202303231047.0.0

package/dist/collection/components/biggive-article-card/biggive-article-card.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,
@@ -234,39 +234,53 @@ a:hover {
 }
 
 .container {
+  height: 100%;
+  width: 100%;
   font-family: "Euclid Triangle", sans-serif;
   font-size: 17px;
   line-height: 24px;
   position: relative;
   text-align: left;
-  padding: 30px;
 }
 .container .sleeve {
-  padding: 30px 30px 0 30px;
-  clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 0, 100% 100%, 100% 100%, 50px 100%, 0 calc(100% - 50px));
+  height: 100%;
+  box-sizing: border-box;
+  background-size: cover;
+  padding: 15px 15px 10px 15px;
 }
-.container .slug {
-  margin-bottom: 5px;
+.container .sleeve .content-wrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
-.container .date {
+.container .slug {
   font-size: 13px;
   line-height: 17px;
+}
+.container .date {
+  font-size: 11px;
+  line-height: 14px;
   margin-bottom: 15px;
 }
 .container h3 {
   font-size: 20px;
   line-height: 24px;
   font-weight: bold;
-  margin-bottom: 15px;
+  padding-bottom: 15px;
+  margin-bottom: auto;
 }
 .container h3 a,
 .container h3 a:hover {
   text-decoration: none;
 }
 .container .image-group {
+  display: flex;
   margin-bottom: 15px;
 }
-.container .image-group .image-wrap {
+.container .image-group .image-container {
+  margin-right: 15px;
+}
+.container .image-group .image-container .image-wrap {
   border-radius: 50%;
   width: 60px;
   height: 60px;
@@ -274,10 +288,19 @@ a:hover {
   background-position: center center;
   margin-bottom: 5px;
 }
-.container .image-group .image-wrap img {
+.container .image-group .image-container .image-wrap img {
   display: none;
 }
-.container .image-group .image-label {
-  font-size: 13px;
-  line-height: 17px;
+.container .image-label {
+  font-size: 11px;
+  line-height: 14px;
+}
+.container .clip-bottom-left-corner-false.clip-top-right-corner-true {
+  clip-path: polygon(0% 0%, 0% 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, 100% 100%, 0% 100%, 0 100%);
+}
+.container .clip-bottom-left-corner-true.clip-top-right-corner-false {
+  clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 0, 100% 100%, 100% 100%, 50px 100%, 0 calc(100% - 50px));
+}
+.container .clip-bottom-left-corner-true.clip-top-right-corner-true {
+  clip-path: polygon(0% 0%, 0% 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, 100% 100%, 50px 100%, 0 calc(100% - 50px));
 }

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

@@ -3,19 +3,45 @@ export class BiggiveArticleCard {
   constructor() {
     this.spaceBelow = 0;
     this.backgroundColour = 'white';
-    this.backgroundColourHover = 'tertiary';
+    this.backgroundImageUrl = '';
     this.textColour = 'black';
     this.slug = undefined;
+    this.slugColour = 'black';
     this.date = undefined;
+    this.dateColour = 'black';
     this.mainTitle = undefined;
-    this.imageUrl = undefined;
-    this.imageAltText = undefined;
+    this.mainTitleColour = 'black';
+    this.image1Url = undefined;
+    this.image1AltText = undefined;
+    this.image2Url = undefined;
+    this.image2AltText = undefined;
     this.imageLabel = undefined;
+    this.imageLabelColour = 'black';
     this.buttonLabel = undefined;
     this.buttonUrl = undefined;
+    this.buttonColour = 'black';
+    this.clipBottomLeftCorner = true;
+    this.clipTopRightCorner = true;
   }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: 'sleeve background-colour-' + this.backgroundColour + ' background-colour-hover-' + this.backgroundColourHover + ' text-colour-' + this.textColour }, h("div", { class: "content-wrap" }, this.slug != '' ? h("div", { class: "slug text-colour-primary" }, this.slug) : null, this.date != '' ? h("div", { class: "date" }, this.date) : null, h("h3", { class: "title" }, h("a", { href: this.buttonUrl }, this.mainTitle)), this.imageUrl != '' ? (h("div", { class: "image-group" }, h("div", { class: "image-wrap", style: { 'background-image': "url('" + this.imageUrl + "')" } }, h("img", { src: this.imageUrl, alt: this.imageAltText, title: this.imageAltText })), h("div", { class: "image-label" }, this.imageLabel))) : null, this.buttonLabel != null && this.buttonUrl != null ? (h("div", { class: "button-wrap align-right" }, h("biggive-button", { "colour-scheme": 'clear-primary', url: this.buttonUrl, label: this.buttonLabel }))) : null))));
+    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: 'sleeve background-colour-' +
+        this.backgroundColour +
+        ' text-colour-' +
+        this.textColour +
+        ' slug-colour-' +
+        this.slugColour +
+        ' date-colour-' +
+        this.dateColour +
+        ' main-title-colour-' +
+        this.mainTitleColour +
+        ' image-label-colour-' +
+        this.imageLabelColour +
+        ' button-colour' +
+        this.buttonColour +
+        ' clip-bottom-left-corner-' +
+        this.clipBottomLeftCorner +
+        ' clip-top-right-corner-' +
+        this.clipTopRightCorner, style: { 'background-image': "url('" + this.backgroundImageUrl + "')" } }, h("div", { class: "content-wrap" }, this.slug != '' ? h("div", { class: "slug text-colour-primary" }, this.slug) : null, this.date != '' ? h("div", { class: "date" }, this.date) : null, h("h3", { class: "title" }, h("a", { href: this.buttonUrl }, this.mainTitle)), this.image1Url != '' || this.image2Url != '' ? (h("div", { class: "image-group" }, this.image1Url != '' ? (h("div", { class: "image-container" }, h("div", { class: "image-wrap", style: { 'background-image': "url('" + this.image1Url + "')" } }, h("img", { src: this.image1Url, alt: this.image1AltText, title: this.image1AltText })))) : null, this.image2Url != '' ? (h("div", { class: "image-container" }, h("div", { class: "image-wrap", style: { 'background-image': "url('" + this.image2Url + "')" } }, h("img", { src: this.image2Url, alt: this.image2AltText, title: this.image2AltText })))) : null)) : null, this.imageLabel != '' ? h("div", { class: "image-label" }, this.imageLabel) : null, this.buttonLabel != null && this.buttonUrl != null ? (h("div", { class: "button-wrap align-right" }, h("biggive-button", { "colour-scheme": 'clear-' + this.buttonColour, url: this.buttonUrl, label: this.buttonLabel }))) : null))));
   }
   static get is() { return "biggive-article-card"; }
   static get encapsulation() { return "shadow"; }
@@ -35,15 +61,20 @@ export class BiggiveArticleCard {
         "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,
@@ -53,21 +84,26 @@ export class BiggiveArticleCard {
         "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": "Card background colour"
+          "text": ""
         },
         "attribute": "background-colour",
         "reflect": false,
         "defaultValue": "'white'"
       },
-      "backgroundColourHover": {
+      "backgroundImageUrl": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -79,25 +115,30 @@ export class BiggiveArticleCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Card background colour hover"
+          "text": ""
         },
-        "attribute": "background-colour-hover",
+        "attribute": "background-image-url",
         "reflect": false,
-        "defaultValue": "'tertiary'"
+        "defaultValue": "''"
       },
       "textColour": {
         "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": "Text colour"
+          "text": ""
         },
         "attribute": "text-colour",
         "reflect": false,
@@ -115,11 +156,34 @@ export class BiggiveArticleCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Slug"
+          "text": ""
         },
         "attribute": "slug",
         "reflect": false
       },
+      "slugColour": {
+        "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": "slug-colour",
+        "reflect": false,
+        "defaultValue": "'black'"
+      },
       "date": {
         "type": "string",
         "mutable": false,
@@ -132,11 +196,34 @@ export class BiggiveArticleCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Date"
+          "text": ""
         },
         "attribute": "date",
         "reflect": false
       },
+      "dateColour": {
+        "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": "date-colour",
+        "reflect": false,
+        "defaultValue": "'black'"
+      },
       "mainTitle": {
         "type": "string",
         "mutable": false,
@@ -149,12 +236,35 @@ export class BiggiveArticleCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Main title"
+          "text": ""
         },
         "attribute": "main-title",
         "reflect": false
       },
-      "imageUrl": {
+      "mainTitleColour": {
+        "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": "main-title-colour",
+        "reflect": false,
+        "defaultValue": "'black'"
+      },
+      "image1Url": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -166,12 +276,12 @@ export class BiggiveArticleCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Image URL"
+          "text": ""
         },
-        "attribute": "image-url",
+        "attribute": "image-1-url",
         "reflect": false
       },
-      "imageAltText": {
+      "image1AltText": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -183,9 +293,43 @@ export class BiggiveArticleCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Image Alt Text"
+          "text": ""
         },
-        "attribute": "image-alt-text",
+        "attribute": "image-1-alt-text",
+        "reflect": false
+      },
+      "image2Url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-2-url",
+        "reflect": false
+      },
+      "image2AltText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-2-alt-text",
         "reflect": false
       },
       "imageLabel": {
@@ -200,11 +344,34 @@ export class BiggiveArticleCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Image Label"
+          "text": ""
         },
         "attribute": "image-label",
         "reflect": false
       },
+      "imageLabelColour": {
+        "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": "image-label-colour",
+        "reflect": false,
+        "defaultValue": "'black'"
+      },
       "buttonLabel": {
         "type": "string",
         "mutable": false,
@@ -217,7 +384,7 @@ export class BiggiveArticleCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Button label"
+          "text": ""
         },
         "attribute": "button-label",
         "reflect": false
@@ -234,10 +401,69 @@ export class BiggiveArticleCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Button URL"
+          "text": ""
         },
         "attribute": "button-url",
         "reflect": false
+      },
+      "buttonColour": {
+        "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-colour",
+        "reflect": false,
+        "defaultValue": "'black'"
+      },
+      "clipBottomLeftCorner": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "clip-bottom-left-corner",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "clipTopRightCorner": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "clip-top-right-corner",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }

package/dist/collection/components/biggive-basic-card/biggive-basic-card.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-beneficiary-icon/biggive-beneficiary-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,