@biggive/components 202303031121.0.0 → 202303061752.0.0

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

@@ -17,6 +17,7 @@ export class BiggiveBasicCard {
     this.clipBottomLeftCorner = true;
     this.clipTopRightCorner = true;
     this.headingLevel = 3;
+    this.addAnimation = false;
   }
   render() {
     const HeadingTag = `h${this.headingLevel}`;
@@ -27,7 +28,9 @@ export class BiggiveBasicCard {
         ' clip-bottom-left-corner-' +
         this.clipBottomLeftCorner +
         ' clip-top-right-corner-' +
-        this.clipTopRightCorner, style: { 'background-image': "url('" + this.backgroundImageUrl + "')" } }, h("div", { class: 'sleeve background-colour-' + this.cardColour + ' text-colour-' + this.textColour }, h("div", { class: "content-wrap" }, this.icon == true ? (h("div", { class: "icon" }, h("svg", { width: "53", height: "39", viewBox: "0 0 53 39", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M38.7009 13.6572L52.3535 38.6959H25.0386L38.7009 13.6572Z", class: "fill-black" }), h("path", { d: "M20.4789 36.4199L6.36785e-06 5.89713e-05L40.9724 6.61352e-05L20.4789 36.4199Z", class: 'fill-' + this.iconColour })))) : null, h(HeadingTag, { class: "title" }, this.mainTitle), h("div", { class: "subtitle" }, this.subtitle), h("div", { class: "teaser" }, this.teaser), this.buttonLabel != null && this.buttonUrl != null && this.buttonUrl != '' ? (h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": this.buttonColourScheme, url: this.buttonUrl, label: this.buttonLabel }))) : null))));
+        this.clipTopRightCorner +
+        ' add-animation-' +
+        this.addAnimation, style: { 'background-image': "url('" + this.backgroundImageUrl + "')" } }, h("a", { href: this.buttonUrl }, h("div", { class: 'sleeve background-colour-' + this.cardColour + ' text-colour-' + this.textColour }, h("div", { class: "content-wrap" }, this.icon == true ? (h("div", { class: "icon" }, h("svg", { width: "53", height: "39", viewBox: "0 0 53 39", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M38.7009 13.6572L52.3535 38.6959H25.0386L38.7009 13.6572Z", class: "fill-black" }), h("path", { d: "M20.4789 36.4199L6.36785e-06 5.89713e-05L40.9724 6.61352e-05L20.4789 36.4199Z", class: 'fill-' + this.iconColour })))) : null, h(HeadingTag, { class: "title" }, this.mainTitle), h("div", { class: "subtitle" }, this.subtitle), h("div", { class: "teaser" }, this.teaser), this.buttonLabel != null && this.buttonUrl != null && this.buttonUrl != '' ? (h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": this.buttonColourScheme, label: this.buttonLabel }))) : null)))));
   }
   static get is() { return "biggive-basic-card"; }
   static get encapsulation() { return "shadow"; }
@@ -47,15 +50,20 @@ export class BiggiveBasicCard {
         "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,
@@ -65,15 +73,20 @@ export class BiggiveBasicCard {
         "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": "Background colour."
+          "text": ""
         },
         "attribute": "background-colour",
         "reflect": false,
@@ -91,7 +104,7 @@ export class BiggiveBasicCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Full URL of the background image."
+          "text": ""
         },
         "attribute": "background-image-url",
         "reflect": false,
@@ -101,15 +114,20 @@ export class BiggiveBasicCard {
         "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 colour"
+          "text": ""
         },
         "attribute": "card-colour",
         "reflect": false,
@@ -119,15 +137,20 @@ export class BiggiveBasicCard {
         "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,
@@ -145,7 +168,7 @@ export class BiggiveBasicCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Main title"
+          "text": ""
         },
         "attribute": "main-title",
         "reflect": false
@@ -162,7 +185,7 @@ export class BiggiveBasicCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Subtitle title"
+          "text": ""
         },
         "attribute": "subtitle",
         "reflect": false
@@ -179,7 +202,7 @@ export class BiggiveBasicCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Teaser"
+          "text": ""
         },
         "attribute": "teaser",
         "reflect": false
@@ -196,7 +219,7 @@ export class BiggiveBasicCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Icon"
+          "text": ""
         },
         "attribute": "icon",
         "reflect": false,
@@ -206,15 +229,20 @@ export class BiggiveBasicCard {
         "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": "Icon colour"
+          "text": ""
         },
         "attribute": "icon-colour",
         "reflect": false,
@@ -232,7 +260,7 @@ export class BiggiveBasicCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Button label"
+          "text": ""
         },
         "attribute": "button-label",
         "reflect": false
@@ -249,7 +277,7 @@ export class BiggiveBasicCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Button URL"
+          "text": ""
         },
         "attribute": "button-url",
         "reflect": false
@@ -266,7 +294,7 @@ export class BiggiveBasicCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Button Colour Scheme"
+          "text": ""
         },
         "attribute": "button-colour-scheme",
         "reflect": false,
@@ -284,7 +312,7 @@ export class BiggiveBasicCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Clip bottom left corner"
+          "text": ""
         },
         "attribute": "clip-bottom-left-corner",
         "reflect": false,
@@ -302,7 +330,7 @@ export class BiggiveBasicCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Clip top right corner"
+          "text": ""
         },
         "attribute": "clip-top-right-corner",
         "reflect": false,
@@ -325,6 +353,24 @@ export class BiggiveBasicCard {
         "attribute": "heading-level",
         "reflect": false,
         "defaultValue": "3"
+      },
+      "addAnimation": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "add-animation",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/biggive-beneficiary-icon/biggive-beneficiary-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 {
 .beneficiary-icon-item.colour-scheme-black svg {
   fill: #FFFFFF;
 }
+.beneficiary-icon-item.colour-scheme-black {
+  background-color: #D7D7D7;
+}
+.beneficiary-icon-item.colour-scheme-black svg {
+  fill: #D7D7D7;
+}
+.beneficiary-icon-item.colour-scheme-black {
+  background-color: #E8E8E8;
+}
+.beneficiary-icon-item.colour-scheme-black svg {
+  fill: #E8E8E8;
+}
+.beneficiary-icon-item.colour-scheme-black {
+  background-color: #8A8A8A;
+}
+.beneficiary-icon-item.colour-scheme-black svg {
+  fill: #8A8A8A;
+}
+.beneficiary-icon-item.colour-scheme-black {
+  background-color: #4A4A4A;
+}
+.beneficiary-icon-item.colour-scheme-black svg {
+  fill: #4A4A4A;
+}
 .beneficiary-icon-item:hover {
   background-color: #FFFFFF;
 }

package/dist/collection/components/biggive-boxed-content/biggive-boxed-content.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;
+}
+
 :host {
   display: content;
 }

package/dist/collection/components/biggive-call-to-action/biggive-call-to-action.css

@@ -150,6 +150,26 @@ h5, .heading-5 {
   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;

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

@@ -0,0 +1,223 @@
+/**
+ * @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;
+}
+
+.space-above-0 {
+  margin-top: 0;
+}
+
+.space-above-1 {
+  margin-top: 5px;
+}
+
+.space-above-2 {
+  margin-top: 10px;
+}
+
+.space-above-3 {
+  margin-top: 15px;
+}
+
+.space-above-4 {
+  margin-top: 30px;
+}
+
+.space-above-5 {
+  margin-top: 45px;
+}
+
+.space-above-6 {
+  margin-top: 60px;
+}
+
+.space-below-0 {
+  margin-bottom: 0;
+}
+
+.space-below-1 {
+  margin-bottom: 5px;
+}
+
+.space-below-2 {
+  margin-bottom: 10px;
+}
+
+.space-below-3 {
+  margin-bottom: 15px;
+}
+
+.space-below-4 {
+  margin-bottom: 30px;
+}
+
+.space-below-5 {
+  margin-bottom: 45px;
+}
+
+.space-below-6 {
+  margin-bottom: 60px;
+}
+
+.text-colour-hover-primary:hover,
+.text-colour-primary {
+  color: #2C089B;
+}
+
+.text-colour-hover-secondary:hover,
+.text-colour-secondary {
+  color: #2AF135;
+}
+
+.text-colour-hover-tertiary:hover,
+.text-colour-tertiary {
+  color: #FF7272;
+}
+
+.text-colour-hover-brand-1:hover,
+.text-colour-brand-1 {
+  color: #B30510;
+}
+
+.text-colour-hover-brand-2:hover,
+.text-colour-brand-2 {
+  color: #6E0887;
+}
+
+.text-colour-hover-brand-3:hover,
+.text-colour-brand-3 {
+  color: #50B400;
+}
+
+.text-colour-hover-brand-4:hover,
+.text-colour-brand-4 {
+  color: #FFE500;
+}
+
+.text-colour-hover-brand-5:hover,
+.text-colour-brand-5 {
+  color: #F07D00;
+}
+
+.text-colour-hover-brand-6:hover,
+.text-colour-brand-6 {
+  color: #CBC8C8;
+}
+
+.text-colour-hover-white:hover,
+.text-colour-white {
+  color: #FFFFFF;
+}
+
+.text-colour-hover-black:hover,
+.text-colour-black {
+  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;
+}
+
+.container {
+  font-family: "Euclid Triangle", sans-serif;
+  font-size: 17px;
+  line-height: 24px;
+  position: relative;
+}
+.container .items {
+  overflow: hidden;
+}
+.container .items .sleeve {
+  display: flex;
+  flex-flow: row wrap;
+}
+.container .navigation {
+  padding: 10px 0;
+  text-align: right;
+  display: flex;
+  justify-content: end;
+  position: relative;
+  z-index: 1;
+}
+.container .navigation .button {
+  margin-left: 15px;
+  display: block;
+  width: 30px;
+  height: 30px;
+  padding: 2.5px 10px;
+  box-sizing: border-box;
+  background-color: #FFFFFF;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+  border-radius: 50%;
+  cursor: pointer;
+  text-align: center;
+}
+.container .navigation .button.prev {
+  left: 0;
+}
+.container .navigation .button.next {
+  right: 0;
+}
+.container .navigation .button svg {
+  width: 10px;
+  height: 10px;
+}
+
+.column-count-4 ::slotted(*) {
+  width: 25%;
+  display: flex;
+  flex-direction: column;
+}
+
+.column-count-3 ::slotted(*) {
+  width: 33.3333333333%;
+  display: flex;
+  flex-direction: column;
+}
+
+.column-count-2 ::slotted(*) {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+}
+
+@media screen and (max-width: 768px) {
+  .column-count-2 ::slotted(*),
+.column-count-3 ::slotted(*),
+.column-count-4 ::slotted(*) {
+    width: calc(50% - 15px);
+  }
+}
+@media screen and (max-width: 576px) {
+  .column-count-2 ::slotted(*),
+.column-count-3 ::slotted(*),
+.column-count-4 ::slotted(*) {
+    width: 100%;
+  }
+}