@biggive/components 202307200905.0.0 → 202307271559.0.0

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

@@ -76,7 +76,7 @@ a:hover {
 
 .background-colour-hover-grey-light:hover,
 .background-colour-grey-light {
-  background-color: #E8E8E8;
+  background-color: #F6F6F6;
 }
 
 .background-colour-hover-grey-medium:hover,
@@ -142,7 +142,7 @@ a:hover {
 }
 
 .fill-grey-light {
-  fill: #E8E8E8;
+  fill: #F6F6F6;
 }
 
 .fill-grey-medium {
@@ -275,7 +275,7 @@ a:hover {
 
 .text-colour-hover-grey-light:hover,
 .text-colour-grey-light {
-  color: #E8E8E8;
+  color: #F6F6F6;
 }
 
 .text-colour-hover-grey-medium:hover,
@@ -300,7 +300,7 @@ a:hover {
   text-align: center;
   background-size: cover;
   background-position: center center;
-  padding: 10px;
+  padding: 30px;
   height: 100%;
   white-space: pre-wrap;
 }
@@ -309,7 +309,7 @@ a:hover {
   text-decoration: none;
 }
 .container .sleeve {
-  padding: 10px;
+  padding: 30px;
   height: 100%;
   box-sizing: border-box;
   transition: all 1s ease-in-out;
@@ -356,13 +356,4 @@ a:hover {
 }
 .container .button-wrap.align-right {
   text-align: right;
-}
-.container .text-align-left {
-  text-align: left;
-}
-.container .text-align-center {
-  text-align: center;
-}
-.container .text-align-right {
-  text-align: right;
 }

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

@@ -8,7 +8,6 @@ export class BiggiveBasicCard {
     this.textColour = 'black';
     this.mainImageUrl = undefined;
     this.mainImageAltText = undefined;
-    this.textAlign = 'center';
     this.mainTitle = undefined;
     this.subtitle = undefined;
     this.teaser = undefined;
@@ -35,7 +34,7 @@ export class BiggiveBasicCard {
         ' clip-top-right-corner-' +
         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 + ' text-align-' + this.textAlign }, 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, this.mainImageUrl != '' ? (h("div", { class: "main-image-container" }, h("div", { class: "image-wrap" }, h("img", { src: this.mainImageUrl, alt: this.mainImageAltText, title: this.mainImageAltText })))) : 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 align-' + this.buttonAlign }, h("biggive-button", { "colour-scheme": this.buttonColourScheme, label: this.buttonLabel }))) : null)))));
+        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, this.mainImageUrl != '' ? (h("div", { class: "main-image-container" }, h("div", { class: "image-wrap" }, h("img", { src: this.mainImageUrl, alt: this.mainImageAltText, title: this.mainImageAltText })))) : 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 align-' + this.buttonAlign }, h("biggive-button", { "colour-scheme": this.buttonColourScheme, label: this.buttonLabel }))) : null)))));
   }
   static get is() { return "biggive-basic-card"; }
   static get encapsulation() { return "shadow"; }
@@ -195,24 +194,6 @@ export class BiggiveBasicCard {
         "attribute": "main-image-alt-text",
         "reflect": false
       },
-      "textAlign": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'left' | 'center' | 'right'",
-          "resolved": "\"center\" | \"left\" | \"right\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "text-align",
-        "reflect": false,
-        "defaultValue": "'center'"
-      },
       "mainTitle": {
         "type": "string",
         "mutable": false,

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

@@ -76,7 +76,7 @@ a:hover {
 
 .background-colour-hover-grey-light:hover,
 .background-colour-grey-light {
-  background-color: #E8E8E8;
+  background-color: #F6F6F6;
 }
 
 .background-colour-hover-grey-medium:hover,
@@ -142,7 +142,7 @@ a:hover {
 }
 
 .fill-grey-light {
-  fill: #E8E8E8;
+  fill: #F6F6F6;
 }
 
 .fill-grey-medium {
@@ -261,10 +261,10 @@ a:hover {
   fill: #D7D7D7;
 }
 .beneficiary-icon-item.colour-scheme-black {
-  background-color: #E8E8E8;
+  background-color: #F6F6F6;
 }
 .beneficiary-icon-item.colour-scheme-black svg {
-  fill: #E8E8E8;
+  fill: #F6F6F6;
 }
 .beneficiary-icon-item.colour-scheme-black {
   background-color: #8A8A8A;

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

@@ -137,7 +137,7 @@ a:hover {
 
 .background-colour-hover-grey-light:hover,
 .background-colour-grey-light {
-  background-color: #E8E8E8;
+  background-color: #F6F6F6;
 }
 
 .background-colour-hover-grey-medium:hover,
@@ -212,7 +212,7 @@ a:hover {
 
 .text-colour-hover-grey-light:hover,
 .text-colour-grey-light {
-  color: #E8E8E8;
+  color: #F6F6F6;
 }
 
 .text-colour-hover-grey-medium:hover,
@@ -269,7 +269,7 @@ a:hover {
   background-color: #D7D7D7;
 }
 .container.background-colour-grey-light .image-wrap {
-  background-color: #E8E8E8;
+  background-color: #F6F6F6;
 }
 .container.background-colour-grey-medium .image-wrap {
   background-color: #8A8A8A;
@@ -514,22 +514,22 @@ a:hover {
   border: 60px solid #D7D7D7;
 }
 .container .sleeve.border-width-1.border-colour-grey-light {
-  border: 5px solid #E8E8E8;
+  border: 5px solid #F6F6F6;
 }
 .container .sleeve.border-width-2.border-colour-grey-light {
-  border: 10px solid #E8E8E8;
+  border: 10px solid #F6F6F6;
 }
 .container .sleeve.border-width-3.border-colour-grey-light {
-  border: 15px solid #E8E8E8;
+  border: 15px solid #F6F6F6;
 }
 .container .sleeve.border-width-4.border-colour-grey-light {
-  border: 30px solid #E8E8E8;
+  border: 30px solid #F6F6F6;
 }
 .container .sleeve.border-width-5.border-colour-grey-light {
-  border: 45px solid #E8E8E8;
+  border: 45px solid #F6F6F6;
 }
 .container .sleeve.border-width-6.border-colour-grey-light {
-  border: 60px solid #E8E8E8;
+  border: 60px solid #F6F6F6;
 }
 .container .sleeve.border-width-1.border-colour-grey-medium {
   border: 5px solid #8A8A8A;

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

@@ -76,7 +76,7 @@ a:hover {
 
 .background-colour-hover-grey-light:hover,
 .background-colour-grey-light {
-  background-color: #E8E8E8;
+  background-color: #F6F6F6;
 }
 
 .background-colour-hover-grey-medium:hover,

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

@@ -238,11 +238,11 @@ a:hover {
 
 .button-grey-light {
   color: #000000;
-  background-color: #E8E8E8;
-  border-color: #E8E8E8;
+  background-color: #F6F6F6;
+  border-color: #F6F6F6;
 }
 .button-grey-light:hover {
-  color: #E8E8E8;
+  color: #F6F6F6;
   background-color: #000000;
 }
 
@@ -426,7 +426,7 @@ a:hover {
 }
 
 .button-clear-grey-light {
-  color: #E8E8E8;
+  color: #F6F6F6;
   background-color: transparent;
   text-decoration: underline;
   border: 0;
@@ -434,7 +434,7 @@ a:hover {
   padding-right: 0;
 }
 .button-clear-grey-light:hover {
-  color: #E8E8E8;
+  color: #F6F6F6;
   text-decoration: none;
   background-color: transparent;
 }

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

@@ -157,7 +157,7 @@ h5, .heading-5 {
 
 .text-colour-hover-grey-light:hover,
 .text-colour-grey-light {
-  color: #E8E8E8;
+  color: #F6F6F6;
 }
 
 .text-colour-hover-grey-medium:hover,

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

@@ -160,7 +160,7 @@ a:hover {
 .container .progress-bar-wrap {
   padding-bottom: 10px;
   margin-bottom: 10px;
-  border-bottom: 1px solid #E8E8E8;
+  border-bottom: 1px solid #F6F6F6;
 }
 .container .msg-wrapper {
   display: flex;

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

@@ -153,7 +153,7 @@ a:hover {
 .container .progress-bar-wrap {
   padding-bottom: 10px;
   margin-bottom: 10px;
-  border-bottom: 1px solid #E8E8E8;
+  border-bottom: 1px solid #F6F6F6;
 }
 .container .stat-wrap {
   display: flex;

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

@@ -127,7 +127,7 @@ a:hover {
 
 .text-colour-hover-grey-light:hover,
 .text-colour-grey-light {
-  color: #E8E8E8;
+  color: #F6F6F6;
 }
 
 .text-colour-hover-grey-medium:hover,

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

@@ -76,7 +76,7 @@ a:hover {
 
 .background-colour-hover-grey-light:hover,
 .background-colour-grey-light {
-  background-color: #E8E8E8;
+  background-color: #F6F6F6;
 }
 
 .background-colour-hover-grey-medium:hover,
@@ -142,7 +142,7 @@ a:hover {
 }
 
 .fill-grey-light {
-  fill: #E8E8E8;
+  fill: #F6F6F6;
 }
 
 .fill-grey-medium {
@@ -261,10 +261,10 @@ a:hover {
   fill: #D7D7D7;
 }
 .category-icon-item.colour-scheme-black {
-  background-color: #E8E8E8;
+  background-color: #F6F6F6;
 }
 .category-icon-item.colour-scheme-black svg {
-  fill: #E8E8E8;
+  fill: #F6F6F6;
 }
 .category-icon-item.colour-scheme-black {
   background-color: #8A8A8A;

package/dist/collection/components/biggive-form-field-text-input/biggive-text-input.js

@@ -11,11 +11,10 @@ export class BiggiveTextInput {
     this.currency = undefined;
     this.spaceBelow = 0;
     this.selectStyle = 'bordered';
-    this.prompt = undefined;
   }
   render() {
     const currencySymbol = this.currency === 'GBP' ? '£' : this.currency === 'USD' ? '$' : undefined;
-    return (h("div", { class: 'text-input space-below-' + this.spaceBelow + ' select-style-' + this.selectStyle }, h("div", { class: "sleeve" }, h("div", { class: "inner-sleave" }, currencySymbol && h("span", { class: "currency-symbol" }, currencySymbol), h("slot", { name: "input" }), h("div", { style: { clear: 'both' } }))), h("div", { class: "prompt" }, this.prompt)));
+    return (h("div", { class: 'text-input space-below-' + this.spaceBelow + ' select-style-' + this.selectStyle }, h("div", { class: "sleeve" }, h("div", { class: "inner-sleave" }, currencySymbol && h("span", { class: "currency-symbol" }, currencySymbol), h("slot", { name: "input" }), h("div", { style: { clear: 'both' } }))), h("div", { class: "prompt" }, h("slot", { name: "label" }))));
   }
   static get is() { return "biggive-text-input"; }
   static get encapsulation() { return "shadow"; }
@@ -100,23 +99,6 @@ export class BiggiveTextInput {
         "attribute": "select-style",
         "reflect": false,
         "defaultValue": "'bordered'"
-      },
-      "prompt": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Displayed as 'eyebrow' label over the top border of the box."
-        },
-        "attribute": "prompt",
-        "reflect": false
       }
     };
   }

package/dist/collection/components/biggive-form-field-text-input/biggive-text-input.stories.js

@@ -0,0 +1,25 @@
+export default {
+  title: 'Components/Forms',
+};
+const Template = (args) => `
+<p></p>
+<biggive-text-input
+ currency="${args.currency}"
+ space-below="${args.spaceBelow}"
+ select-style="${args.selectStyle}"
+ >
+    ${args.label}
+    ${args.input}
+</biggive-text-input>`;
+export const TextInput = Template.bind({});
+TextInput.args = {
+  currency: 'GBP',
+  spaceBelow: 0,
+  selectStyle: 'bordered',
+  input: `<input
+    id="enter-donation-amount"
+    slot="input"
+    value="60.00"
+    />`,
+  label: `<label for="enter-donation-amount" slot="label">Enter your donation amount</label>`,
+};

package/dist/collection/components/biggive-formatted-text/biggive-formatted-text.css

@@ -127,7 +127,7 @@ a:hover {
 
 .text-colour-hover-grey-light:hover,
 .text-colour-grey-light {
-  color: #E8E8E8;
+  color: #F6F6F6;
 }
 
 .text-colour-hover-grey-medium:hover,
@@ -157,9 +157,6 @@ a:hover {
   color: inherit;
   text-decoration: underline;
 }
-.container a:hover {
-  text-decoration: none;
-}
 .container.max-width-10 .sleeve {
   max-width: 10%;
   margin-left: auto;

package/dist/collection/components/biggive-formatted-text/biggive-formatted-text.js

@@ -6,7 +6,7 @@ export class BiggiveFormattedText {
     this.maxWidth = 100;
   }
   render() {
-    return (h("div", { class: 'container max-width-' + this.maxWidth + ' text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow }, h("slot", null)));
+    return h("div", { class: 'container max-width-' + this.maxWidth + ' text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow });
   }
   static get is() { return "biggive-formatted-text"; }
   static get encapsulation() { return "shadow"; }

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

@@ -76,7 +76,7 @@ a:hover {
 
 .background-colour-hover-grey-light:hover,
 .background-colour-grey-light {
-  background-color: #E8E8E8;
+  background-color: #F6F6F6;
 }
 
 .background-colour-hover-grey-medium:hover,
@@ -142,7 +142,7 @@ a:hover {
 }
 
 .fill-grey-light {
-  fill: #E8E8E8;
+  fill: #F6F6F6;
 }
 
 .fill-grey-medium {
@@ -243,10 +243,10 @@ a:hover {
   fill: #D7D7D7;
 }
 .generic-icon-item.colour-scheme-black {
-  background-color: #E8E8E8;
+  background-color: #F6F6F6;
 }
 .generic-icon-item.colour-scheme-black svg {
-  fill: #E8E8E8;
+  fill: #F6F6F6;
 }
 .generic-icon-item.colour-scheme-black {
   background-color: #8A8A8A;
@@ -363,10 +363,10 @@ a:hover {
     fill: #D7D7D7;
   }
   .generic-icon-item.colour-scheme-black {
-    background-color: #E8E8E8;
+    background-color: #F6F6F6;
   }
   .generic-icon-item.colour-scheme-black svg {
-    fill: #E8E8E8;
+    fill: #F6F6F6;
   }
   .generic-icon-item.colour-scheme-black {
     background-color: #8A8A8A;

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

@@ -158,7 +158,7 @@ h5, .heading-5 {
   color: #D7D7D7;
 }
 .container .heading-colour-grey-light {
-  color: #E8E8E8;
+  color: #F6F6F6;
 }
 .container .heading-colour-grey-medium {
   color: #8A8A8A;
@@ -212,7 +212,7 @@ h5, .heading-5 {
   fill: #D7D7D7;
 }
 .container .icon-colour-grey-light svg path {
-  fill: #E8E8E8;
+  fill: #F6F6F6;
 }
 .container .icon-colour-grey-medium svg path {
   fill: #8A8A8A;

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

@@ -132,7 +132,7 @@ a:hover {
 
 .text-colour-hover-grey-light:hover,
 .text-colour-grey-light {
-  color: #E8E8E8;
+  color: #F6F6F6;
 }
 
 .text-colour-hover-grey-medium:hover,
@@ -198,7 +198,7 @@ a:hover {
   color: #D7D7D7;
 }
 .container.colour-scheme-grey-light {
-  color: #E8E8E8;
+  color: #F6F6F6;
 }
 .container.colour-scheme-grey-medium {
   color: #8A8A8A;

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

@@ -76,7 +76,7 @@ a:hover {
 
 .background-colour-hover-grey-light:hover,
 .background-colour-grey-light {
-  background-color: #E8E8E8;
+  background-color: #F6F6F6;
 }
 
 .background-colour-hover-grey-medium:hover,
@@ -207,7 +207,7 @@ a:hover {
 
 .text-colour-hover-grey-light:hover,
 .text-colour-grey-light {
-  color: #E8E8E8;
+  color: #F6F6F6;
 }
 
 .text-colour-hover-grey-medium:hover,
@@ -328,7 +328,7 @@ a:hover {
   stroke: #D7D7D7;
 }
 .container .sleeve .arrow-wrap.arrow-colour-grey-light .arrow-wrap svg path {
-  stroke: #E8E8E8;
+  stroke: #F6F6F6;
 }
 .container .sleeve .arrow-wrap.arrow-colour-grey-medium .arrow-wrap svg path {
   stroke: #8A8A8A;
@@ -408,7 +408,7 @@ a:hover {
   stroke: #D7D7D7;
 }
 .container.arrow-colour-grey-light .arrow-wrap svg path {
-  stroke: #E8E8E8;
+  stroke: #F6F6F6;
 }
 .container.arrow-colour-grey-medium .arrow-wrap svg path {
   stroke: #8A8A8A;

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

@@ -76,7 +76,7 @@ a:hover {
 
 .background-colour-hover-grey-light:hover,
 .background-colour-grey-light {
-  background-color: #E8E8E8;
+  background-color: #F6F6F6;
 }
 
 .background-colour-hover-grey-medium:hover,
@@ -151,7 +151,7 @@ a:hover {
 
 .text-colour-hover-grey-light:hover,
 .text-colour-grey-light {
-  color: #E8E8E8;
+  color: #F6F6F6;
 }
 
 .text-colour-hover-grey-medium:hover,
@@ -328,7 +328,7 @@ a:hover {
   stroke: #D7D7D7;
 }
 .container .sleeve .arrow-wrap.arrow-colour-grey-light .arrow-wrap svg path {
-  stroke: #E8E8E8;
+  stroke: #F6F6F6;
 }
 .container .sleeve .arrow-wrap.arrow-colour-grey-medium .arrow-wrap svg path {
   stroke: #8A8A8A;