npm - @biggive/components - Versions diffs - 202307201413.0.0 → 202307271559.0.0 - Mend

@biggive/components 202307201413.0.0 → 202307271559.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 (106) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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-formatted-text/biggive-formatted-text.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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;