@biggive/components 0.0.21 → 0.0.25

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

@@ -0,0 +1,380 @@
+import { Component, Prop, h } from '@stencil/core';
+export class BiggiveCallToAction {
+  constructor() {
+    /**
+     * Space below component
+     */
+    this.spaceBelow = 0;
+    /**
+     * Default text colour
+     */
+    this.defaultTextColour = 'primary';
+    /**
+     * Slug colour
+     */
+    this.slugColour = '';
+    /**
+     * Slug
+     */
+    this.slug = null;
+    /**
+     * Main title colour
+     */
+    this.mainTitleColour = '';
+    /**
+     * Main title
+     */
+    this.mainTitle = null;
+    /**
+     * Subtitle colour
+     */
+    this.subtitleColour = '';
+    /**
+     * Subtitle
+     */
+    this.subtitle = null;
+    /**
+     * Teaser colour
+     */
+    this.teaserColour = '';
+    /**
+     * Teaser
+     */
+    this.teaser = null;
+    /**
+     * Primary button Url
+     */
+    this.primaryButtonUrl = null;
+    /**
+     * Primary button Label
+     */
+    this.primaryButtonLabel = null;
+    /**
+     * Primary button Colour Scheme
+     */
+    this.primaryButtonColourScheme = 'primary';
+    /**
+     * Secondary button Url
+     */
+    this.secondaryButtonUrl = null;
+    /**
+     * Secondary button Label
+     */
+    this.secondaryButtonLabel = null;
+    /**
+     * Secondary button Colour Scheme
+     */
+    this.secondaryButtonColourScheme = 'primary';
+  }
+  render() {
+    return (h("div", { class: 'container text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow },
+      h("div", { class: "sleeve" },
+        h("div", { class: "content-wrap" },
+          h("div", { class: 'slug text-colour-' + this.slugColour }, this.slug),
+          h("h2", { class: 'title text-colour-' + this.mainTitleColour }, this.mainTitle),
+          h("div", { class: 'slug text-colour-' + this.subtitleColour }, this.subtitle),
+          h("div", { class: 'teaser text-colour-' + this.teaserColour }, this.teaser),
+          this.primaryButtonLabel != null && this.primaryButtonUrl != null ? (h("div", { class: "button-wrap" },
+            h("biggive-button", { "colour-scheme": this.primaryButtonColourScheme, url: this.primaryButtonUrl, label: this.primaryButtonLabel }))) : null,
+          this.secondaryButtonLabel != null && this.secondaryButtonUrl != null ? (h("div", { class: "button-wrap" },
+            h("biggive-button", { "colour-scheme": this.secondaryButtonColourScheme, url: this.secondaryButtonUrl, label: this.secondaryButtonLabel }))) : null))));
+  }
+  static get is() { return "biggive-call-to-action"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["biggive-call-to-action.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["biggive-call-to-action.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"
+    },
+    "defaultTextColour": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Default text colour"
+      },
+      "attribute": "default-text-colour",
+      "reflect": false,
+      "defaultValue": "'primary'"
+    },
+    "slugColour": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Slug colour"
+      },
+      "attribute": "slug-colour",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "slug": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Slug"
+      },
+      "attribute": "slug",
+      "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": "''"
+    },
+    "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"
+    },
+    "subtitleColour": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Subtitle colour"
+      },
+      "attribute": "subtitle-colour",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "subtitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Subtitle"
+      },
+      "attribute": "subtitle",
+      "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": "''"
+    },
+    "teaser": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Teaser"
+      },
+      "attribute": "teaser",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "primaryButtonUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Primary button Url"
+      },
+      "attribute": "primary-button-url",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "primaryButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Primary button Label"
+      },
+      "attribute": "primary-button-label",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "primaryButtonColourScheme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Primary button Colour Scheme"
+      },
+      "attribute": "primary-button-colour-scheme",
+      "reflect": false,
+      "defaultValue": "'primary'"
+    },
+    "secondaryButtonUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Secondary button Url"
+      },
+      "attribute": "secondary-button-url",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "secondaryButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Secondary button Label"
+      },
+      "attribute": "secondary-button-label",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "secondaryButtonColourScheme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Secondary button Colour Scheme"
+      },
+      "attribute": "secondary-button-colour-scheme",
+      "reflect": false,
+      "defaultValue": "'primary'"
+    }
+  }; }
+}

package/dist/collection/components/biggive-call-to-action/biggive-call-to-action.stories.js

@@ -0,0 +1,124 @@
+export default {
+  title: 'Components/Content',
+  argTypes: {
+    spaceBelow: {
+      name: 'Space below',
+      control: {
+        type: 'select',
+        options: [0, 1, 2, 3, 4, 5, 6],
+      },
+    },
+    defaultTextColour: {
+      name: 'Default text colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'white', 'black'],
+      },
+    },
+    slugColour: {
+      name: 'Slug colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'white', 'black'],
+      },
+    },
+    slug: {
+      name: 'Slug',
+    },
+    mainTitleColour: {
+      name: 'Main title colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'white', 'black'],
+      },
+    },
+    mainTitle: {
+      name: 'Main title',
+    },
+    subtitleColour: {
+      name: 'Subtitle colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'white', 'black'],
+      },
+    },
+    subtitle: {
+      name: 'Subtitle',
+    },
+    teaserColour: {
+      name: 'Teaser colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'white', 'black'],
+      },
+    },
+    teaser: {
+      name: 'Teaser',
+    },
+    primaryButtonUrl: {
+      name: 'Primary button url',
+    },
+    primaryButtonLabel: {
+      name: 'Primary button label',
+    },
+    primaryButtonColourScheme: {
+      name: 'Primary button colour scheme',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'white', 'black', 'clear-primary', 'clear-secondary', 'clear-tertiary', 'clear-white', 'clear-black'],
+      },
+    },
+    secondaryButtonUrl: {
+      name: 'Secondary button url',
+    },
+    secondaryButtonLabel: {
+      name: 'Secondary button label',
+    },
+    secondaryButtonColourScheme: {
+      name: 'Secondary button colour scheme',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'white', 'black', 'clear-primary', 'clear-secondary', 'clear-tertiary', 'clear-white', 'clear-black'],
+      },
+    },
+  },
+};
+const Template = args => `
+      <biggive-call-to-action
+        space-below=${args.spaceBelow}
+        default-text-colour="${args.defaultTextColour}"
+        slug-colour="${args.slugColour}"
+        slug="${args.slug}"
+        main-title-colour="${args.mainTitleColour}"
+        main-title="${args.mainTitle}"
+        subtitle-colour="${args.subtitleColour}"
+        subtitle="${args.subtitle}"
+        teaser-colour="${args.teaserColour}"
+        teaser="${args.teaser}"
+        primary-button-url="${args.primaryButtonUrl}"
+        primary-button-label="${args.primaryButtonLabel}"
+        primary-button-colour-scheme="${args.primaryButtonColourScheme}"
+        secondary-button-url="${args.secondaryButtonUrl}"
+        secondary-button-label="${args.secondaryButtonLabel}"
+        secondary-button-colour-scheme="${args.secondaryButtonColourScheme}"
+      </biggive-call-to-action>
+      `;
+export const CallToActionComponent = Template.bind({});
+CallToActionComponent.args = {
+  spaceBelow: 0,
+  defaultTextColour: 'primary',
+  slugColour: '',
+  slug: 'Test Slug',
+  mainTitleColour: '',
+  mainTitle: 'Test title',
+  subtitleColour: '',
+  subtitle: 'Test subtitle',
+  teaserColour: '',
+  teaser: 'Test teaser',
+  primaryButtonUrl: '#',
+  primaryButtonLabel: 'Click me',
+  primaryButtonColourScheme: 'primary',
+  secondaryButtonUrl: '#',
+  secondaryButtonLabel: 'Click me',
+  secondaryButtonColourScheme: 'clear-primary',
+};