@biggive/components 202307271726.0.0 → 202308021605.0.0

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

@@ -0,0 +1,470 @@
+import { h } from '@stencil/core';
+export class BiggiveImageCard {
+  constructor() {
+    this.spaceBelow = 0;
+    this.backgroundColour = 'primary';
+    this.backgroundImageUrl = '';
+    this.cardColour = 'white';
+    this.textColour = 'black';
+    this.mainImageUrl = undefined;
+    this.mainImageAltText = undefined;
+    this.textAlign = 'center';
+    this.mainTitle = undefined;
+    this.subtitle = undefined;
+    this.teaser = undefined;
+    this.icon = true;
+    this.iconColour = 'primary';
+    this.buttonAlign = 'center';
+    this.buttonStyle = 'standard';
+    this.buttonLabel = undefined;
+    this.buttonUrl = undefined;
+    this.buttonColourScheme = 'clear-primary';
+    this.clipBottomLeftCorner = true;
+    this.clipTopRightCorner = true;
+    this.headingLevel = 3;
+    this.addAnimation = false;
+  }
+  render() {
+    const HeadingTag = `h${this.headingLevel}`;
+    return (h("div", { class: 'container space-below-' +
+        this.spaceBelow +
+        ' background-colour-' +
+        this.backgroundColour +
+        ' clip-bottom-left-corner-' +
+        this.clipBottomLeftCorner +
+        ' clip-top-right-corner-' +
+        this.clipTopRightCorner +
+        ' add-animation-' +
+        this.addAnimation, style: { 'background-image': "url('" + this.backgroundImageUrl + "')" } }, h("a", { href: this.buttonUrl }, h("div", { class: 'sleeve background-colour-' + this.cardColour + ' text-colour-' + this.textColour + ' text-align-' + this.textAlign }, h("div", { class: "content-wrap" }, this.icon == true ? (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 })))) : null, this.mainImageUrl != '' ? (h("div", { class: "main-image-container" }, h("div", { class: "image-wrap" }, h("img", { src: this.mainImageUrl, alt: this.mainImageAltText, title: this.mainImageAltText })))) : null, h(HeadingTag, { class: "title" }, this.mainTitle), h("div", { class: "subtitle" }, this.subtitle), h("div", { class: "teaser" }, this.teaser), this.buttonLabel != null && this.buttonUrl != null && this.buttonUrl != '' ? (h("div", { class: 'button-wrap align-' + this.buttonAlign }, h("biggive-button", { "colour-scheme": this.buttonColourScheme, label: this.buttonLabel }))) : null)))));
+  }
+  static get is() { return "biggive-image-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-image-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-image-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "spaceBelow": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "spacingOption",
+          "resolved": "0 | 1 | 2 | 3 | 4 | 5 | 6",
+          "references": {
+            "spacingOption": {
+              "location": "import",
+              "path": "../../globals/spacing-option"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "space-below",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "backgroundColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "brandColour",
+          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "references": {
+            "brandColour": {
+              "location": "import",
+              "path": "../../globals/brand-colour"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "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": ""
+        },
+        "attribute": "background-image-url",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "cardColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "brandColour",
+          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "references": {
+            "brandColour": {
+              "location": "import",
+              "path": "../../globals/brand-colour"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "card-colour",
+        "reflect": false,
+        "defaultValue": "'white'"
+      },
+      "textColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "brandColour",
+          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "references": {
+            "brandColour": {
+              "location": "import",
+              "path": "../../globals/brand-colour"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text-colour",
+        "reflect": false,
+        "defaultValue": "'black'"
+      },
+      "mainImageUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "main-image-url",
+        "reflect": false
+      },
+      "mainImageAltText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "main-image-alt-text",
+        "reflect": false
+      },
+      "textAlign": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'center' | 'right'",
+          "resolved": "\"center\" | \"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text-align",
+        "reflect": false,
+        "defaultValue": "'center'"
+      },
+      "mainTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "main-title",
+        "reflect": false
+      },
+      "subtitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "subtitle",
+        "reflect": false
+      },
+      "teaser": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "teaser",
+        "reflect": false
+      },
+      "icon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "iconColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "brandColour",
+          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "references": {
+            "brandColour": {
+              "location": "import",
+              "path": "../../globals/brand-colour"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon-colour",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      },
+      "buttonAlign": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-align",
+        "reflect": false,
+        "defaultValue": "'center'"
+      },
+      "buttonStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-style",
+        "reflect": false,
+        "defaultValue": "'standard'"
+      },
+      "buttonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-label",
+        "reflect": false
+      },
+      "buttonUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-url",
+        "reflect": false
+      },
+      "buttonColourScheme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-colour-scheme",
+        "reflect": false,
+        "defaultValue": "'clear-primary'"
+      },
+      "clipBottomLeftCorner": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "clip-bottom-left-corner",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "clipTopRightCorner": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "clip-top-right-corner",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "headingLevel": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "1 | 2 | 3 | 4 | 5 | 6",
+          "resolved": "1 | 2 | 3 | 4 | 5 | 6",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "heading-level",
+        "reflect": false,
+        "defaultValue": "3"
+      },
+      "addAnimation": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "add-animation",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,159 @@
+export default {
+  title: 'Components/Content',
+  argTypes: {
+    spaceBelow: {
+      name: 'Space below',
+      control: {
+        type: 'select',
+        options: [0, 1, 2, 3, 4, 5, 6],
+      },
+    },
+    backgroundColour: {
+      name: 'Background colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black', 'transparent'],
+      },
+    },
+    backgroundImageUrl: {
+      name: 'Background image URL',
+    },
+    cardColour: {
+      name: 'Card colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black', 'transparent'],
+      },
+    },
+    textColour: {
+      name: 'Text colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black', 'transparent'],
+      },
+    },
+    icon: {
+      name: 'Icon',
+    },
+    iconColour: {
+      name: 'Icon colour',
+      control: {
+        type: 'select',
+        options: [
+          'primary',
+          'secondary',
+          'tertiary',
+          'brand-1',
+          'brand-2',
+          'brand-3',
+          'brand-4',
+          'brand-5',
+          'brand-6',
+          'white',
+          'black',
+          'red',
+          'clear-primary',
+          'clear-secondary',
+          'clear-tertiary',
+          'clear-brand-1',
+          'clear-brand-2',
+          'clear-brand-3',
+          'clear-brand-4',
+          'clear-brand-5',
+          'clear-brand-6',
+          'clear-white',
+          'clear-black',
+        ],
+      },
+    },
+    mainTitle: {
+      name: 'Title',
+    },
+    subtitle: {
+      name: 'Subtitle',
+    },
+    teaser: {
+      name: 'Teaser',
+    },
+    buttonUrl: {
+      name: 'Button URL',
+    },
+    buttonLabel: {
+      name: 'Button label',
+    },
+    buttonColourScheme: {
+      name: 'Button colour scheme',
+      control: {
+        type: 'select',
+        options: [
+          'primary',
+          'secondary',
+          'tertiary',
+          'brand-1',
+          'brand-2',
+          'brand-3',
+          'brand-4',
+          'brand-5',
+          'brand-6',
+          'white',
+          'black',
+          'clear-primary',
+          'clear-secondary',
+          'clear-tertiary',
+          'clear-brand-1',
+          'clear-brand-2',
+          'clear-brand-3',
+          'clear-brand-4',
+          'clear-brand-5',
+          'clear-brand-6',
+          'clear-white',
+          'clear-black',
+        ],
+      },
+    },
+    clipBottomLeftCorner: {
+      name: 'Clip bottom left corner',
+    },
+    clipTopRight: {
+      name: 'Clip top right corner',
+    },
+  },
+};
+const Template = (args) => `
+              <biggive-image-card
+                space-below="${args.spaceBelow}"
+                background-colour="${args.backgroundColour}"
+                background-image-url="${args.backgroundImageUrl}"
+                card-colour="${args.cardColour}"
+                text-colour="${args.textColour}"
+                icon="${args.icon}"
+                icon-colour="${args.iconColour}"
+                mainTitle="${args.mainTitle}"
+                subtitle="${args.subtitle}"
+                teaser="${args.teaser}"
+                button-label="${args.buttonLabel}"
+                button-url="${args.buttonUrl}"
+                button-colour-ccheme="${args.buttonColourScheme}"
+                clip-bottom-left-corner="${args.clipBottomLeftCorner}"
+                clip-top-right-corner="${args.clipTopRightCorner}"
+                >
+              </biggive-image-card>
+              `;
+export const ImageCardComponent = Template.bind({});
+ImageCardComponent.args = {
+  spaceBelow: 4,
+  icon: true,
+  iconColour: 'primary',
+  backgroundColour: 'white',
+  backgroundImageUrl: 'https://media.istockphoto.com/vectors/childish-seamless-dotted-pattern-with-colorful-doodle-letters-fun-vector-id1208462693',
+  cardColour: 'white',
+  textColour: 'white',
+  mainTitle: 'Sample main title',
+  subtitle: 'Sample subtitle',
+  teaser: 'teaser',
+  buttonUrl: '#',
+  buttonLabel: 'Click here',
+  buttonColourScheme: 'clear-primary',
+  clipBottomLeftCorner: true,
+  clipTopRightCorner: true,
+};

package/dist/components/biggive-image-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BiggiveImageCard extends Components.BiggiveImageCard, HTMLElement {}
+export const BiggiveImageCard: {
+  prototype: BiggiveImageCard;
+  new (): BiggiveImageCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;