@biggive/components 1.0.157 → 1.0.159

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

@@ -1,5 +1,14 @@
 body {
-  background-color: #D7D7D7;
+  background-color: #FFFFFF;
+}
+body.background-primary {
+  background-color: #2C089B;
+}
+body.background-secondary {
+  background-color: #2C089B;
+}
+body.background-tertiary {
+  background-color: #2C089B;
 }
 
 h1, h3, h3, h4, h5, h6 {
@@ -166,7 +175,6 @@ a:hover {
   border-radius: 5px;
   border: 1px solid #000000;
   background-color: #000000;
-  filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.22));
   color: #FFFFFF;
   display: inline-block;
   text-decoration: none;
@@ -243,7 +251,6 @@ a:hover {
   color: #2C089B;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -257,7 +264,6 @@ a:hover {
   color: #2AF135;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -271,7 +277,6 @@ a:hover {
   color: #FF7272;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -285,7 +290,6 @@ a:hover {
   color: #FFFFFF;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;

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

@@ -1,5 +1,14 @@
 body {
-  background-color: #D7D7D7;
+  background-color: #FFFFFF;
+}
+body.background-primary {
+  background-color: #2C089B;
+}
+body.background-secondary {
+  background-color: #2C089B;
+}
+body.background-tertiary {
+  background-color: #2C089B;
 }
 
 h1, h3, h3, h4, h5, h6 {
@@ -166,7 +175,6 @@ a:hover {
   border-radius: 5px;
   border: 1px solid #000000;
   background-color: #000000;
-  filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.22));
   color: #FFFFFF;
   display: inline-block;
   text-decoration: none;
@@ -243,7 +251,6 @@ a:hover {
   color: #2C089B;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -257,7 +264,6 @@ a:hover {
   color: #2AF135;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -271,7 +277,6 @@ a:hover {
   color: #FF7272;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -285,7 +290,6 @@ a:hover {
   color: #FFFFFF;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -512,7 +516,4 @@ a:hover {
   font-family: "Euclid Triangle", sans-serif;
   font-size: 17px;
   line-height: 24px;
-}
-.container.shadow-true {
-  filter: drop-shadow(-1px 3px 12px rgba(0, 0, 0, 0.25));
 }

package/dist/collection/components/biggive-branded-image/biggive-branded-image.css

@@ -1,5 +1,14 @@
 body {
-  background-color: #D7D7D7;
+  background-color: #FFFFFF;
+}
+body.background-primary {
+  background-color: #2C089B;
+}
+body.background-secondary {
+  background-color: #2C089B;
+}
+body.background-tertiary {
+  background-color: #2C089B;
 }
 
 h1, h3, h3, h4, h5, h6 {
@@ -166,7 +175,6 @@ a:hover {
   border-radius: 5px;
   border: 1px solid #000000;
   background-color: #000000;
-  filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.22));
   color: #FFFFFF;
   display: inline-block;
   text-decoration: none;
@@ -243,7 +251,6 @@ a:hover {
   color: #2C089B;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -257,7 +264,6 @@ a:hover {
   color: #2AF135;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -271,7 +277,6 @@ a:hover {
   color: #FF7272;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -285,7 +290,6 @@ a:hover {
   color: #FFFFFF;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;

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

@@ -1,5 +1,14 @@
 body {
-  background-color: #D7D7D7;
+  background-color: #FFFFFF;
+}
+body.background-primary {
+  background-color: #2C089B;
+}
+body.background-secondary {
+  background-color: #2C089B;
+}
+body.background-tertiary {
+  background-color: #2C089B;
 }
 
 h1, h3, h3, h4, h5, h6 {
@@ -166,7 +175,6 @@ a:hover {
   border-radius: 5px;
   border: 1px solid #000000;
   background-color: #000000;
-  filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.22));
   color: #FFFFFF;
   display: inline-block;
   text-decoration: none;
@@ -243,7 +251,6 @@ a:hover {
   color: #2C089B;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -257,7 +264,6 @@ a:hover {
   color: #2AF135;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -271,7 +277,6 @@ a:hover {
   color: #FF7272;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -285,7 +290,6 @@ a:hover {
   color: #FFFFFF;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -519,6 +523,9 @@ a:hover {
 .container a.full-width-true {
   display: block;
 }
+.container.centered-true {
+  text-align: center;
+}
 .container .msg-wrapper {
   display: flex;
   justify-content: center;

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

@@ -8,15 +8,17 @@ export class BiggiveButton {
     this.colourScheme = 'primary';
     this.label = 'Click me';
     this.url = undefined;
+    this.openInNewTab = false;
     this.fullWidth = false;
     this.size = 'medium';
     this.rounded = false;
+    this.centered = false;
     this.isFutureCampaign = false;
     this.isPastCampaign = false;
     this.datetime = undefined;
   }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow }, this.isFutureCampaign || this.isPastCampaign ? (h("div", { class: "msg-wrapper" }, h("biggive-misc-icon", { "background-colour": "white", "icon-colour": "black", icon: "Timer" }), this.isFutureCampaign ? h("p", null, "Launches ", this.datetime) : h("p", null, "Closed ", this.datetime))) : (h("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, h("span", { onClick: this.handleButtonClick }, this.label)))));
+    return (h("div", { class: 'container space-below-' + this.spaceBelow + ' centered-' + this.centered }, this.isFutureCampaign || this.isPastCampaign ? (h("div", { class: "msg-wrapper" }, h("biggive-misc-icon", { "background-colour": "white", "icon-colour": "black", icon: "Timer" }), this.isFutureCampaign ? h("p", null, "Launches ", this.datetime) : h("p", null, "Closed ", this.datetime))) : (h("a", { href: this.url, target: this.openInNewTab ? '_blank' : '_self', class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, h("span", { onClick: this.handleButtonClick }, this.label)))));
   }
   static get is() { return "biggive-button"; }
   static get encapsulation() { return "shadow"; }
@@ -104,6 +106,24 @@ export class BiggiveButton {
         "reflect": false,
         "defaultValue": "undefined"
       },
+      "openInNewTab": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "New Tab"
+        },
+        "attribute": "open-in-new-tab",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "fullWidth": {
         "type": "boolean",
         "mutable": false,
@@ -158,6 +178,24 @@ export class BiggiveButton {
         "reflect": false,
         "defaultValue": "false"
       },
+      "centered": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Centered"
+        },
+        "attribute": "centered",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "isFutureCampaign": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/biggive-button/biggive-button.stories.js

@@ -32,6 +32,9 @@ export default {
     url: {
       name: 'Url',
     },
+    openInNewTab: {
+      name: 'Open in new tab',
+    },
     fullWidth: {
       name: 'Full width',
     },
@@ -45,6 +48,9 @@ export default {
     rounded: {
       name: 'Rounded',
     },
+    centered: {
+      name: 'Centered',
+    },
   },
 };
 const Template = args => `
@@ -56,9 +62,11 @@ const Template = args => `
       datetime="${args.datetime}"
       label="${args.label}"
       url="${args.url}"
+      open-in-new-tab="${args.openInNewTab}"
       full-width=${args.fullWidth}
       size=${args.size}
       rounded=${args.rounded}
+      centered=${args.centered}
     </biggive-button>
     `;
 export const ButtonComponent = Template.bind({});
@@ -70,7 +78,9 @@ ButtonComponent.args = {
   datetime: '29/11/2022, 12:00',
   label: 'Donate now',
   url: 'http://www.google.com',
+  openInNewTab: false,
   fullWidth: false,
   size: 'medium',
   rounded: false,
+  centered: false,
 };

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

@@ -1,5 +1,14 @@
 body {
-  background-color: #D7D7D7;
+  background-color: #FFFFFF;
+}
+body.background-primary {
+  background-color: #2C089B;
+}
+body.background-secondary {
+  background-color: #2C089B;
+}
+body.background-tertiary {
+  background-color: #2C089B;
 }
 
 h1, h3, h3, h4, h5, h6 {
@@ -166,7 +175,6 @@ a:hover {
   border-radius: 5px;
   border: 1px solid #000000;
   background-color: #000000;
-  filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.22));
   color: #FFFFFF;
   display: inline-block;
   text-decoration: none;
@@ -243,7 +251,6 @@ a:hover {
   color: #2C089B;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -257,7 +264,6 @@ a:hover {
   color: #2AF135;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -271,7 +277,6 @@ a:hover {
   color: #FF7272;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -285,7 +290,6 @@ a:hover {
   color: #FFFFFF;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;

package/dist/collection/components/biggive-campaign-card/biggive-campaign-card.css

@@ -1,5 +1,14 @@
 body {
-  background-color: #D7D7D7;
+  background-color: #FFFFFF;
+}
+body.background-primary {
+  background-color: #2C089B;
+}
+body.background-secondary {
+  background-color: #2C089B;
+}
+body.background-tertiary {
+  background-color: #2C089B;
 }
 
 h1, h3, h3, h4, h5, h6 {
@@ -166,7 +175,6 @@ a:hover {
   border-radius: 5px;
   border: 1px solid #000000;
   background-color: #000000;
-  filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.22));
   color: #FFFFFF;
   display: inline-block;
   text-decoration: none;
@@ -243,7 +251,6 @@ a:hover {
   color: #2C089B;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -257,7 +264,6 @@ a:hover {
   color: #2AF135;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -271,7 +277,6 @@ a:hover {
   color: #FF7272;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -285,7 +290,6 @@ a:hover {
   color: #FFFFFF;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -514,7 +518,6 @@ a:hover {
   font-family: "Euclid Triangle", sans-serif;
   font-size: 17px;
   line-height: 24px;
-  filter: drop-shadow(-1px 3px 12px rgba(0, 0, 0, 0.25));
   cursor: pointer;
   position: relative;
   height: 100%;

package/dist/collection/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.css

@@ -1,5 +1,14 @@
 body {
-  background-color: #D7D7D7;
+  background-color: #FFFFFF;
+}
+body.background-primary {
+  background-color: #2C089B;
+}
+body.background-secondary {
+  background-color: #2C089B;
+}
+body.background-tertiary {
+  background-color: #2C089B;
 }
 
 h1, h3, h3, h4, h5, h6 {
@@ -166,7 +175,6 @@ a:hover {
   border-radius: 5px;
   border: 1px solid #000000;
   background-color: #000000;
-  filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.22));
   color: #FFFFFF;
   display: inline-block;
   text-decoration: none;
@@ -243,7 +251,6 @@ a:hover {
   color: #2C089B;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -257,7 +264,6 @@ a:hover {
   color: #2AF135;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -271,7 +277,6 @@ a:hover {
   color: #FF7272;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -285,7 +290,6 @@ a:hover {
   color: #FFFFFF;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -515,7 +519,6 @@ a:hover {
   position: relative;
 }
 .container .search-wrap {
-  filter: drop-shadow(-1px 3px 12px rgba(0, 0, 0, 0.25));
   background-color: #FFFFFF;
   padding: 15px 30px;
   margin-bottom: 60px;

package/dist/collection/components/biggive-campaign-highlights/biggive-campaign-highlights.css

@@ -1,5 +1,14 @@
 body {
-  background-color: #D7D7D7;
+  background-color: #FFFFFF;
+}
+body.background-primary {
+  background-color: #2C089B;
+}
+body.background-secondary {
+  background-color: #2C089B;
+}
+body.background-tertiary {
+  background-color: #2C089B;
 }
 
 h1, h3, h3, h4, h5, h6 {
@@ -166,7 +175,6 @@ a:hover {
   border-radius: 5px;
   border: 1px solid #000000;
   background-color: #000000;
-  filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.22));
   color: #FFFFFF;
   display: inline-block;
   text-decoration: none;
@@ -243,7 +251,6 @@ a:hover {
   color: #2C089B;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -257,7 +264,6 @@ a:hover {
   color: #2AF135;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -271,7 +277,6 @@ a:hover {
   color: #FF7272;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -285,7 +290,6 @@ a:hover {
   color: #FFFFFF;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -512,7 +516,6 @@ a:hover {
   font-family: "Euclid Triangle", sans-serif;
   font-size: 17px;
   line-height: 24px;
-  filter: drop-shadow(-1px 3px 12px rgba(0, 0, 0, 0.25));
   background-color: #FFFFFF;
   padding: 25px;
   box-sizing: border-box;

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

@@ -1,5 +1,14 @@
 body {
-  background-color: #D7D7D7;
+  background-color: #FFFFFF;
+}
+body.background-primary {
+  background-color: #2C089B;
+}
+body.background-secondary {
+  background-color: #2C089B;
+}
+body.background-tertiary {
+  background-color: #2C089B;
 }
 
 h1, h3, h3, h4, h5, h6 {
@@ -166,7 +175,6 @@ a:hover {
   border-radius: 5px;
   border: 1px solid #000000;
   background-color: #000000;
-  filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.22));
   color: #FFFFFF;
   display: inline-block;
   text-decoration: none;
@@ -243,7 +251,6 @@ a:hover {
   color: #2C089B;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -257,7 +264,6 @@ a:hover {
   color: #2AF135;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -271,7 +277,6 @@ a:hover {
   color: #FF7272;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -285,7 +290,6 @@ a:hover {
   color: #FFFFFF;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;

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

@@ -1,5 +1,14 @@
 body {
-  background-color: #D7D7D7;
+  background-color: #FFFFFF;
+}
+body.background-primary {
+  background-color: #2C089B;
+}
+body.background-secondary {
+  background-color: #2C089B;
+}
+body.background-tertiary {
+  background-color: #2C089B;
 }
 
 h1, h3, h3, h4, h5, h6 {
@@ -166,7 +175,6 @@ a:hover {
   border-radius: 5px;
   border: 1px solid #000000;
   background-color: #000000;
-  filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.22));
   color: #FFFFFF;
   display: inline-block;
   text-decoration: none;
@@ -243,7 +251,6 @@ a:hover {
   color: #2C089B;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -257,7 +264,6 @@ a:hover {
   color: #2AF135;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -271,7 +277,6 @@ a:hover {
   color: #FF7272;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;
@@ -285,7 +290,6 @@ a:hover {
   color: #FFFFFF;
   background-color: transparent;
   text-decoration: underline;
-  box-shadow: none;
   border: 0;
   padding-left: 0;
   padding-right: 0;