@biggive/components 1.0.96 → 1.0.98

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

@@ -1,317 +1,312 @@
 /* eslint-disable prettier/prettier */
-import { Component, Prop, h } from '@stencil/core';
+import { h } from '@stencil/core';
 export class BiggiveHeroImage {
   constructor() {
-    /**
-* Space below component
-*/
     this.spaceBelow = 0;
-    /**
-     * Colour Scheme
-     */
     this.colourScheme = 'primary';
-    /**
-     * Header slug
-     */
     this.slug = null;
-    /**
-     * Header slug colour
-     */
     this.slugColour = null;
-    /**
-     * Full URL of a logo image.
-     */
     this.logo = '';
-    /**
-     * Full URL of a main hero image.
-     */
     this.mainImage = '';
-    /**
-     * Hero image title, typically the page.
-     */
+    this.mainImageAlignHorizontal = 'center';
+    this.mainImageAlignVertical = 'center';
     this.mainTitle = null;
-    /**
-     * Main title colour
-     */
     this.mainTitleColour = null;
-    /**
-     * Introductory teaser text
-     */
     this.teaser = null;
-    /**
-     * Teaser colour
-     */
     this.teaserColour = null;
-    /**
-     * Button Url
-     */
     this.buttonUrl = null;
-    /**
-     * Button Label
-     */
     this.buttonLabel = null;
-    /**
-     * Button Colour Scheme
-     */
     this.buttonColourScheme = 'primary';
   }
   render() {
-    return (h("div", { class: 'container colour-scheme-' + this.colourScheme + ' space-below-' + this.spaceBelow },
-      h("div", { class: "sleeve" },
-        h("div", { class: "content-wrap" },
-          this.logo.length > 0 ? (h("div", { class: "logo image-wrap", style: { 'background-image': 'url(' + this.logo + ')' } },
-            h("img", { src: this.logo }))) : null,
-          h("div", { class: 'slug text-colour-' + this.slugColour }, this.slug),
-          h("h1", { class: 'main-title text-colour-' + this.mainTitleColour }, this.mainTitle),
-          h("div", { class: 'teaser text-colour-' + this.teaserColour }, this.teaser),
-          this.buttonLabel != null && this.buttonUrl != null
-            ? h("biggive-button", { "colour-scheme": this.buttonColourScheme, url: this.buttonUrl, label: this.buttonLabel })
-            : null),
-        h("div", { class: "graphic-wrap" }, this.mainImage.length > 0 ? (h("div", { class: "image-wrap", style: { 'background-image': 'url(' + this.mainImage + ')' } },
-          h("img", { src: this.mainImage }))) : null))));
+    return (h("div", { class: 'container colour-scheme-' + this.colourScheme + ' space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "content-wrap" }, this.logo.length > 0 ? (h("div", { class: "logo image-wrap", style: { 'background-image': 'url(' + this.logo + ')' } }, h("img", { src: this.logo }))) : null, h("div", { class: 'slug text-colour-' + this.slugColour }, this.slug), h("h1", { class: 'main-title text-colour-' + this.mainTitleColour }, this.mainTitle), h("div", { class: 'teaser text-colour-' + this.teaserColour }, this.teaser), this.buttonLabel != null && this.buttonUrl != null
+      ? h("biggive-button", { "colour-scheme": this.buttonColourScheme, url: this.buttonUrl, label: this.buttonLabel })
+      : null), h("div", { class: "graphic-wrap" }, this.mainImage.length > 0 ? (h("div", { class: "image-wrap", style: { 'background-image': 'url(' + this.mainImage + ')', 'background-position': this.mainImageAlignHorizontal + ' ' + this.mainImageAlignVertical } }, h("img", { src: this.mainImage }))) : null))));
   }
   static get is() { return "biggive-hero-image"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["biggive-hero-image.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["biggive-hero-image.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"
-    },
-    "colourScheme": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Colour Scheme"
-      },
-      "attribute": "colour-scheme",
-      "reflect": false,
-      "defaultValue": "'primary'"
-    },
-    "slug": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Header slug"
-      },
-      "attribute": "slug",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "slugColour": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Header slug colour"
-      },
-      "attribute": "slug-colour",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "logo": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Full URL of a logo image."
-      },
-      "attribute": "logo",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "mainImage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Full URL of a main hero image."
-      },
-      "attribute": "main-image",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "mainTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-hero-image.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-hero-image.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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Hero image title, typically the page."
+      "colourScheme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Colour Scheme"
+        },
+        "attribute": "colour-scheme",
+        "reflect": false,
+        "defaultValue": "'primary'"
       },
-      "attribute": "main-title",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "mainTitleColour": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "slug": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Header slug"
+        },
+        "attribute": "slug",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Main title colour"
+      "slugColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Header slug colour"
+        },
+        "attribute": "slug-colour",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "attribute": "main-title-colour",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "teaser": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "logo": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Full URL of a logo image."
+        },
+        "attribute": "logo",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Introductory teaser text"
+      "mainImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Full URL of a main hero image."
+        },
+        "attribute": "main-image",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "attribute": "teaser",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "teaserColour": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "mainImageAlignHorizontal": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Horizontal alignment of image"
+        },
+        "attribute": "main-image-align-horizontal",
+        "reflect": false,
+        "defaultValue": "'center'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Teaser colour"
+      "mainImageAlignVertical": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Vertical alignment of image"
+        },
+        "attribute": "main-image-align-vertical",
+        "reflect": false,
+        "defaultValue": "'center'"
       },
-      "attribute": "teaser-colour",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "buttonUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "mainTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hero image title, typically the page."
+        },
+        "attribute": "main-title",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Button Url"
+      "mainTitleColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Main title colour"
+        },
+        "attribute": "main-title-colour",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "attribute": "button-url",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "buttonLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "teaser": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Introductory teaser text"
+        },
+        "attribute": "teaser",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Button Label"
+      "teaserColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Teaser colour"
+        },
+        "attribute": "teaser-colour",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "attribute": "button-label",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "buttonColourScheme": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Button Colour Scheme"
+      "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"
       },
-      "attribute": "button-colour-scheme",
-      "reflect": false,
-      "defaultValue": "'primary'"
-    }
-  }; }
+      "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": "'primary'"
+      }
+    };
+  }
 }

package/dist/collection/components/biggive-hero-image/biggive-hero-image.stories.js

@@ -1,13 +1,25 @@
 export default {
   title: 'Components/Content',
+  argTypes: {
+    spaceBelow: {
+      name: 'Space below',
+      control: {
+        type: 'select',
+        options: [0, 1, 2, 3, 4, 5, 6],
+      },
+    },
+  },
 };
 const Template = args => `
     <biggive-hero-image
+      space-below="${args.spaceBelow}"
       colour-scheme="${args.colourScheme}"
       slug="${args.slug}"
       slugColour="${args.slugColour}"
       logo="${args.logo}"
       main-image="${args.mainImage}"
+      main-image-align-horizontal="${args.mainImageAlignHorizontal}"
+      main-image-align-vertical="${args.mainImageAlignVertical}"
       main-title="${args.mainTitle}"
       main-titleColour="${args.mainTitleColour}"
       teaser="${args.teaser}"
@@ -19,11 +31,14 @@ const Template = args => `
     `;
 export const HeroImageComponent = Template.bind({});
 HeroImageComponent.args = {
+  spaceBelow: 0,
   colourScheme: 'primary',
   slug: 'Test slug',
   slugColour: null,
   logo: 'https://media.istockphoto.com/vectors/childish-seamless-dotted-pattern-with-colorful-doodle-letters-fun-vector-id1208462693',
   mainImage: 'https://media.istockphoto.com/vectors/childish-seamless-dotted-pattern-with-colorful-doodle-letters-fun-vector-id1208462693',
+  mainImageAlignHorizontal: 'center',
+  mainImageAlignVertical: 'center',
   mainTitle: 'Test title',
   mainTitleColour: null,
   teaser: 'We run match funding campaigns to make an extraordinary difference to the world’s big challenges.',

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

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