@biggive/components 202303201542.0.0 → 202303231047.0.0

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

@@ -0,0 +1,401 @@
+import { h } from '@stencil/core';
+export class BiggiveImageButton {
+  constructor() {
+    this.handleButtonClick = (event) => {
+      this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
+    };
+    this.spaceBelow = 1;
+    this.backgroundColour = 'white';
+    this.backgroundPadding = 0;
+    this.text = undefined;
+    this.textColour = 'black';
+    this.imageUrl = undefined;
+    this.imageStyle = 'cover';
+    this.url = undefined;
+    this.openInNewTab = false;
+    this.size = 'medium';
+    this.arrow = false;
+    this.arrowColour = 'black';
+    this.circle = false;
+    this.shadow = false;
+    this.centered = false;
+    this.rounded = false;
+    this.buttonId = undefined;
+  }
+  render() {
+    return (h("div", { class: 'container space-below-' +
+        this.spaceBelow +
+        ' background-colour-' +
+        this.backgroundColour +
+        ' background-padding-' +
+        this.backgroundPadding +
+        ' centered-' +
+        this.centered +
+        ' rounded-' +
+        this.rounded +
+        ' shadow-' +
+        this.shadow }, h("a", { href: this.url, target: this.openInNewTab ? '_blank' : '_self', id: this.buttonId }, h("div", { class: "sleeve", onClick: this.handleButtonClick }, h("div", { class: 'image-wrap ' + ' image-style-' + this.imageStyle + ' size-' + this.size + ' circle-' + this.circle.toString(), style: { backgroundImage: 'url(' + this.imageUrl + ')' } }), this.text != '' ? h("div", { class: 'text-wrap text-colour-' + this.textColour + ' text-padding-' + this.backgroundPadding }, this.text) : null, this.arrow ? (h("div", { class: 'arrow-wrap arrow-colour-' + this.arrowColour }, h("svg", { width: "8", height: "12", viewBox: "0 0 8 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.76912 1.0791L5.73828 6.04826L0.769121 11.0174", stroke: "black", "stroke-width": "2" })))) : null))));
+  }
+  static get is() { return "biggive-image-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-image-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-image-button.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": "1"
+      },
+      "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": "'white'"
+      },
+      "backgroundPadding": {
+        "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": "background-padding",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text",
+        "reflect": false
+      },
+      "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'"
+      },
+      "imageUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-url",
+        "reflect": false
+      },
+      "imageStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-style",
+        "reflect": false,
+        "defaultValue": "'cover'"
+      },
+      "url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "url",
+        "reflect": false
+      },
+      "openInNewTab": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open-in-new-tab",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'medium' | 'large' | 'x-large' | 'xx-large'",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"xx-large\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'medium'"
+      },
+      "arrow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "arrow",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "arrowColour": {
+        "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": "arrow-colour",
+        "reflect": false,
+        "defaultValue": "'black'"
+      },
+      "circle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "circle",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "shadow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "shadow",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "centered": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "centered",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "rounded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "rounded",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "buttonId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "undefined | string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-id",
+        "reflect": false,
+        "defaultValue": "undefined"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "doButtonClick",
+        "name": "doButtonClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ event: object; url: string }",
+          "resolved": "{ event: object; url: string; }",
+          "references": {}
+        }
+      }];
+  }
+}

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

@@ -0,0 +1,115 @@
+export default {
+  title: 'Components/Buttons',
+  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'],
+      },
+    },
+    imageUrl: {
+      name: 'Image URL',
+    },
+    imageStyle: {
+      name: 'Image style',
+      options: ['cover', 'contain'],
+    },
+    text: {
+      name: 'Text',
+    },
+    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'],
+      },
+    },
+    url: {
+      name: 'Url',
+    },
+    openInNewTab: {
+      name: 'Open in new tab',
+    },
+    size: {
+      name: 'Size',
+      control: {
+        type: 'select',
+        options: ['small', 'medium', 'large', 'x-large', 'xx-large'],
+      },
+    },
+    arrow: {
+      name: 'Arrow',
+      options: [true, false],
+    },
+    arrowColour: {
+      name: 'Arrow colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black'],
+      },
+    },
+    circle: {
+      name: 'Circle',
+      options: [true, false],
+    },
+    shadow: {
+      name: 'Shadow',
+      options: [true, false],
+    },
+    centered: {
+      name: 'Centered',
+      options: [true, false],
+    },
+    rounded: {
+      name: 'Rounded',
+      options: [true, false],
+    },
+  },
+};
+const Template = args => `
+      <biggive-image-button
+        space-below="${args.spaceBelow}"
+        background-colour="${args.backgroundColour}"
+        background-padding="${args.backgroundPadding}"
+        text=${args.text}
+        textColour=${args.textColour}
+        image-url="${args.imageUrl}"
+        image-style="${args.imageStyle}"
+        url="${args.url}"
+        open-in-new-tab="${args.openInNewTab}"
+        size=${args.size}
+        arrow=${args.arrow}
+        arrowColour=${args.arrowColour}
+        circle=${args.circle}
+        shadow=${args.shadow}
+        centered=${args.centered}
+        rounded=${args.rounded}
+      </biggive-image-button>
+      `;
+export const ImageButtonComponent = Template.bind({});
+ImageButtonComponent.args = {
+  spaceBelow: 0,
+  backgroundColour: 'white',
+  backgroundPadding: 3,
+  text: 'This is the button text',
+  textColour: 'black',
+  imageUrl: '',
+  imageStyle: 'cover',
+  url: 'http://www.google.com',
+  openInNewTab: false,
+  size: 'medium',
+  arrow: true,
+  arrowColour: 'black',
+  circle: false,
+  shadow: false,
+  centered: false,
+  rounded: false,
+};

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

@@ -51,7 +51,7 @@ a:hover {
 
 .background-colour-hover-brand-6:hover,
 .background-colour-brand-6 {
-  background-color: #CBC8C8;
+  background-color: #62CFC9;
 }
 
 .background-colour-hover-white:hover,

package/dist/collection/components/biggive-page-section/biggive-page-section.css

@@ -315,7 +315,7 @@ a:hover {
 .container.background-color-brand-6:after,
 .container.background-color-brand-6 .sleeve:before,
 .container.background-color-brand-6 .sleeve {
-  background-color: #CBC8C8;
+  background-color: #62CFC9;
   color: #FFFFFF;
 }
 
@@ -333,4 +333,36 @@ a:hover {
 .container.background-color-black .sleeve {
   background-color: #000000;
   color: #FFFFFF;
+}
+
+.container.background-color-grey-extra-light:before,
+.container.background-color-grey-extra-light:after,
+.container.background-color-grey-extra-light .sleeve:before,
+.container.background-color-grey-extra-light .sleeve {
+  background-color: #D7D7D7;
+  color: #000000;
+}
+
+.container.background-color-grey-light:before,
+.container.background-color-grey-light:after,
+.container.background-color-grey-light .sleeve:before,
+.container.background-color-grey-light .sleeve {
+  background-color: #E8E8E8;
+  color: #000000;
+}
+
+.container.background-color-grey-medium:before,
+.container.background-color-grey-medium:after,
+.container.background-color-grey-medium .sleeve:before,
+.container.background-color-grey-medium .sleeve {
+  background-color: #8A8A8A;
+  color: #FFFFFF;
+}
+
+.container.background-color-grey-dark:before,
+.container.background-color-grey-dark:after,
+.container.background-color-grey-dark .sleeve:before,
+.container.background-color-grey-dark .sleeve {
+  background-color: #4A4A4A;
+  color: #FFFFFF;
 }