@biggive/components 1.0.95 → 1.0.97

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

@@ -1,270 +1,233 @@
-import { Component, Prop, h } from '@stencil/core';
+import { h } from '@stencil/core';
 export class BiggiveBasicCard {
   constructor() {
-    /**
-     * Space below component
-     */
     this.spaceBelow = 0;
-    /**
-     * Background colour.
-     */
     this.backgroundColour = 'primary';
-    /**
-     * Full URL of the background image.
-     */
     this.backgroundImageUrl = '';
-    /**
-     * Card colour
-     */
     this.cardColour = 'white';
-    /**
-     * Text colour
-     */
     this.textColour = 'black';
-    /**
-     * Main title
-     */
     this.mainTitle = null;
-    /**
-     * Subtitle title
-     */
     this.subtitle = null;
-    /**
-     * Icon colour
-     */
     this.iconColour = 'primary';
-    /**
-     * Button label
-     */
     this.buttonLabel = null;
-    /**
-     * Button URL
-     */
     this.buttonUrl = null;
-    /**
-     * Button Colour Scheme
-     */
     this.buttonColourScheme = 'clear-primary';
   }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow + ' background-colour-' + this.backgroundColour, style: { 'background-image': "url('" + this.backgroundImageUrl + "')" } },
-      h("div", { class: 'sleeve background-colour-' + this.cardColour + ' text-colour-' + this.textColour },
-        h("div", { class: "content-wrap" },
-          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 }))),
-          h("h3", { class: "title" }, this.mainTitle),
-          h("div", { class: "subtitle" }, this.subtitle),
-          this.buttonLabel != null && this.buttonUrl != null ? (h("div", { class: "button-wrap" },
-            h("biggive-button", { "colour-scheme": this.buttonColourScheme, url: this.buttonUrl, label: this.buttonLabel }))) : null))));
+    return (h("div", { class: 'container space-below-' + this.spaceBelow + ' background-colour-' + this.backgroundColour, style: { 'background-image': "url('" + this.backgroundImageUrl + "')" } }, h("div", { class: 'sleeve background-colour-' + this.cardColour + ' text-colour-' + this.textColour }, h("div", { class: "content-wrap" }, 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 }))), h("h3", { class: "title" }, this.mainTitle), h("div", { class: "subtitle" }, this.subtitle), this.buttonLabel != null && this.buttonUrl != null ? (h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": this.buttonColourScheme, url: this.buttonUrl, label: this.buttonLabel }))) : null))));
   }
   static get is() { return "biggive-basic-card"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["biggive-basic-card.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["biggive-basic-card.css"]
-  }; }
-  static get properties() { return {
-    "spaceBelow": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Space below component"
-      },
-      "attribute": "space-below",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "backgroundColour": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Background colour."
-      },
-      "attribute": "background-colour",
-      "reflect": false,
-      "defaultValue": "'primary'"
-    },
-    "backgroundImageUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Full URL of the background image."
-      },
-      "attribute": "background-image-url",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "cardColour": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Card colour"
-      },
-      "attribute": "card-colour",
-      "reflect": false,
-      "defaultValue": "'white'"
-    },
-    "textColour": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Text colour"
-      },
-      "attribute": "text-colour",
-      "reflect": false,
-      "defaultValue": "'black'"
-    },
-    "mainTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Main title"
-      },
-      "attribute": "main-title",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "subtitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Subtitle title"
-      },
-      "attribute": "subtitle",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "iconColour": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Icon colour"
-      },
-      "attribute": "icon-colour",
-      "reflect": false,
-      "defaultValue": "'primary'"
-    },
-    "buttonLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Button label"
-      },
-      "attribute": "button-label",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "buttonUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Button URL"
-      },
-      "attribute": "button-url",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "buttonColourScheme": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Button Colour Scheme"
-      },
-      "attribute": "button-colour-scheme",
-      "reflect": false,
-      "defaultValue": "'clear-primary'"
-    }
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-basic-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-basic-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "spaceBelow": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Space below component"
+        },
+        "attribute": "space-below",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "backgroundColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Background colour."
+        },
+        "attribute": "background-colour",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      },
+      "backgroundImageUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Full URL of the background image."
+        },
+        "attribute": "background-image-url",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "cardColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Card colour"
+        },
+        "attribute": "card-colour",
+        "reflect": false,
+        "defaultValue": "'white'"
+      },
+      "textColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text colour"
+        },
+        "attribute": "text-colour",
+        "reflect": false,
+        "defaultValue": "'black'"
+      },
+      "mainTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Main title"
+        },
+        "attribute": "main-title",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "subtitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Subtitle title"
+        },
+        "attribute": "subtitle",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "iconColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon colour"
+        },
+        "attribute": "icon-colour",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      },
+      "buttonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button label"
+        },
+        "attribute": "button-label",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "buttonUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button URL"
+        },
+        "attribute": "button-url",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "buttonColourScheme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button Colour Scheme"
+        },
+        "attribute": "button-colour-scheme",
+        "reflect": false,
+        "defaultValue": "'clear-primary'"
+      }
+    };
+  }
 }

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

@@ -36,7 +36,7 @@ export default {
       name: 'Icon colour',
       control: {
         type: 'select',
-        options: ['primary', 'secondary', 'tertiary', 'white', 'black', 'clear-primary', 'clear-secondary', 'clear-tertiary', 'clear-white', 'clear-black'],
+        options: ['primary', 'secondary', 'tertiary', 'white', 'black', 'red', 'clear-primary', 'clear-secondary', 'clear-tertiary', 'clear-white', 'clear-black'],
       },
     },
     mainTitle: {

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

@@ -109,6 +109,10 @@ a:hover {
   fill: #000000;
 }
 
+.fill-red {
+  fill: red;
+}
+
 .background-colour-hover-primary:hover,
 .background-colour-primary {
   background-color: #2C089B;
@@ -214,6 +218,26 @@ a:hover {
   background-color: #FFFFFF;
 }
 
+.button-white {
+  color: #2C089B;
+  background-color: #FFFFFF;
+  border-color: #FFFFFF;
+}
+.button-white:hover {
+  color: #FFFFFF;
+  background-color: #2C089B;
+}
+
+.button-black {
+  color: #FFFFFF;
+  background-color: #000000;
+  border-color: #000000;
+}
+.button-black:hover {
+  color: #000000;
+  background-color: #FFFFFF;
+}
+
 .button-clear-primary {
   color: #2C089B;
   background-color: transparent;