@biggive/components 0.0.21 → 0.0.23

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

@@ -0,0 +1,317 @@
+/* eslint-disable prettier/prettier */
+import { Component, Prop, 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.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))));
+  }
+  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": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Hero image title, typically the page."
+      },
+      "attribute": "main-title",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "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"
+    },
+    "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"
+    },
+    "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"
+    },
+    "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"
+    },
+    "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"
+    },
+    "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

@@ -0,0 +1,34 @@
+export default {
+  title: 'Components/Content',
+};
+const Template = args => `
+    <biggive-hero-image
+      colour-scheme="${args.colourScheme}"
+      slug="${args.slug}"
+      slugColour="${args.slugColour}"
+      logo="${args.logo}"
+      main-image="${args.mainImage}"
+      main-title="${args.mainTitle}"
+      main-titleColour="${args.mainTitleColour}"
+      teaser="${args.teaser}"
+      teaserColour="${args.teaserColour}"
+      button-url="${args.buttonUrl}"
+      button-label="${args.buttonLabel}"
+      button-colour-scheme="${args.buttonColourScheme}"
+    </biggive-hero-image>
+    `;
+export const HeroImageComponent = Template.bind({});
+HeroImageComponent.args = {
+  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',
+  mainTitle: 'Test title',
+  mainTitleColour: null,
+  teaser: 'We run match funding campaigns to make an extraordinary difference to the world’s big challenges.',
+  teaserColour: null,
+  buttonUrl: '#',
+  buttonLabel: 'Donate now',
+  buttonColourScheme: 'primary',
+};