@biggive/components 202307200905.0.0 → 202307271559.0.0

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

@@ -0,0 +1,481 @@
+import { h } from '@stencil/core';
+export class BiggiveImageCard {
+  constructor() {
+    this.spaceBelow = 0;
+    this.backgroundColour = 'white';
+    this.backgroundImageUrl = '';
+    this.slug = undefined;
+    this.slugColour = 'black';
+    this.date = undefined;
+    this.dateColour = 'black';
+    this.mainTitle = undefined;
+    this.mainTitleColour = 'black';
+    this.mainImageUrl = undefined;
+    this.mainImageAltText = undefined;
+    this.image1Url = undefined;
+    this.image1AltText = undefined;
+    this.image2Url = undefined;
+    this.image2AltText = undefined;
+    this.imageLabel = undefined;
+    this.imageLabelColour = 'black';
+    this.buttonLabel = undefined;
+    this.buttonUrl = undefined;
+    this.buttonColour = 'black';
+    this.clipBottomLeftCorner = true;
+    this.clipTopRightCorner = true;
+  }
+  render() {
+    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: 'sleeve background-colour-' +
+        this.backgroundColour +
+        ' text-colour-black ' +
+        ' slug-colour-' +
+        this.slugColour +
+        ' date-colour-' +
+        this.dateColour +
+        ' main-title-colour-' +
+        this.mainTitleColour +
+        ' image-label-colour-' +
+        this.imageLabelColour +
+        ' button-colour' +
+        this.buttonColour +
+        ' clip-bottom-left-corner-' +
+        this.clipBottomLeftCorner +
+        ' clip-top-right-corner-' +
+        this.clipTopRightCorner, style: { 'background-image': "url('" + this.backgroundImageUrl + "')" } }, h("div", { class: "content-wrap" }, h("div", { class: "meta" }, this.slug != '' ? h("div", { class: "slug text-colour-primary" }, this.slug) : null, this.date != '' ? h("div", { class: "date" }, this.date) : null), this.mainImageUrl != '' ? (h("div", { class: "main-image-container" }, h("div", { class: "image-wrap" }, h("img", { src: this.mainImageUrl, alt: this.mainImageAltText })))) : null, h("h3", { class: "title" }, h("a", { href: this.buttonUrl }, this.mainTitle)), this.image1Url != '' || this.image2Url != '' ? (h("div", { class: "image-group" }, this.image1Url != '' ? (h("div", { class: "image-container" }, h("div", { class: "image-wrap", style: { 'background-image': "url('" + this.image1Url + "')" } }, h("img", { src: this.image1Url, alt: this.image1AltText })))) : null, this.image2Url != '' ? (h("div", { class: "image-container" }, h("div", { class: "image-wrap", style: { 'background-image': "url('" + this.image2Url + "')" } }, h("img", { src: this.image2Url, alt: this.image2AltText })))) : null)) : null, this.imageLabel != '' ? h("div", { class: "image-label" }, this.imageLabel) : null, this.buttonLabel != null && this.buttonUrl != null ? (h("div", { class: "button-wrap align-right" }, h("biggive-button", { "colour-scheme": 'clear-' + this.buttonColour, url: this.buttonUrl, 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": "'white'"
+      },
+      "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": "''"
+      },
+      "slug": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "slug",
+        "reflect": false
+      },
+      "slugColour": {
+        "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": "slug-colour",
+        "reflect": false,
+        "defaultValue": "'black'"
+      },
+      "date": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "date",
+        "reflect": false
+      },
+      "dateColour": {
+        "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": "date-colour",
+        "reflect": false,
+        "defaultValue": "'black'"
+      },
+      "mainTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "main-title",
+        "reflect": false
+      },
+      "mainTitleColour": {
+        "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": "main-title-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
+      },
+      "image1Url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-1-url",
+        "reflect": false
+      },
+      "image1AltText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-1-alt-text",
+        "reflect": false
+      },
+      "image2Url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-2-url",
+        "reflect": false
+      },
+      "image2AltText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-2-alt-text",
+        "reflect": false
+      },
+      "imageLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-label",
+        "reflect": false
+      },
+      "imageLabelColour": {
+        "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": "image-label-colour",
+        "reflect": false,
+        "defaultValue": "'black'"
+      },
+      "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
+      },
+      "buttonColour": {
+        "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": "button-colour",
+        "reflect": false,
+        "defaultValue": "'black'"
+      },
+      "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"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,80 @@
+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'],
+      },
+    },
+    backgroundColourHover: {
+      name: 'Hover background colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black', 'transparent'],
+      },
+    },
+    slug: {
+      name: 'Slug',
+    },
+    date: {
+      name: 'Date',
+    },
+    mainTitle: {
+      name: 'Title',
+    },
+    imageUrl: {
+      name: 'Image URL',
+    },
+    imageAltText: {
+      name: 'Image alt text',
+    },
+    imageLabel: {
+      name: 'Image Label',
+    },
+    buttonUrl: {
+      name: 'Button URL',
+    },
+    buttonLabel: {
+      name: 'Button label',
+    },
+  },
+};
+const Template = (args) => `
+              <biggive-image-card
+                space-below="${args.spaceBelow}"
+                background-colour="${args.backgroundColour}"
+                background-colour-hover="${args.backgroundColourHover}"
+                slug="${args.slug}"
+                date="${args.date}"
+                main-title="${args.mainTitle}"
+                image-url="${args.imageUrl}"
+                image-alt-text="${args.imageAltText}"
+                image-label="${args.imageLabel}"
+                button-label="${args.buttonLabel}"
+                button-url="${args.buttonUrl}"
+                >
+              </biggive-image-card>
+              `;
+export const ImageCardComponent = Template.bind({});
+ImageCardComponent.args = {
+  spaceBelow: 4,
+  backgroundColour: 'white',
+  backgroundColourHover: 'tertiary',
+  slug: '• Blog Post   • Mental Health',
+  date: 'September 2022',
+  mainTitle: 'Sample main title',
+  imageUrl: 'https://media.istockphoto.com/vectors/childish-seamless-dotted-pattern-with-colorful-doodle-letters-fun-vector-id1208462693',
+  imageAltText: 'Image description',
+  imageLabel: 'By Joe Bloggs',
+  buttonUrl: '#',
+  buttonLabel: 'Click here',
+};

package/dist/collection/components/biggive-image-feature/biggive-image-feature.css

@@ -76,7 +76,7 @@ a:hover {
 
 .text-colour-hover-grey-light:hover,
 .text-colour-grey-light {
-  color: #E8E8E8;
+  color: #F6F6F6;
 }
 
 .text-colour-hover-grey-medium:hover,

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

@@ -76,7 +76,7 @@ a:hover {
 
 .background-colour-hover-grey-light:hover,
 .background-colour-grey-light {
-  background-color: #E8E8E8;
+  background-color: #F6F6F6;
 }
 
 .background-colour-hover-grey-medium:hover,
@@ -142,7 +142,7 @@ a:hover {
 }
 
 .fill-grey-light {
-  fill: #E8E8E8;
+  fill: #F6F6F6;
 }
 
 .fill-grey-medium {
@@ -243,10 +243,10 @@ a:hover {
   fill: #D7D7D7;
 }
 .misc-icon-item.colour-scheme-black {
-  background-color: #E8E8E8;
+  background-color: #F6F6F6;
 }
 .misc-icon-item.colour-scheme-black svg {
-  fill: #E8E8E8;
+  fill: #F6F6F6;
 }
 .misc-icon-item.colour-scheme-black {
   background-color: #8A8A8A;
@@ -363,10 +363,10 @@ a:hover {
     fill: #D7D7D7;
   }
   .misc-icon-item.colour-scheme-black {
-    background-color: #E8E8E8;
+    background-color: #F6F6F6;
   }
   .misc-icon-item.colour-scheme-black svg {
-    fill: #E8E8E8;
+    fill: #F6F6F6;
   }
   .misc-icon-item.colour-scheme-black {
     background-color: #8A8A8A;

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

@@ -347,7 +347,7 @@ a:hover {
 .container.background-color-grey-light:after,
 .container.background-color-grey-light .sleeve:before,
 .container.background-color-grey-light .sleeve {
-  background-color: #E8E8E8;
+  background-color: #F6F6F6;
   color: #000000;
 }
 

package/dist/collection/components/biggive-progress-bar/biggive-progress-bar.css

@@ -89,7 +89,7 @@ a:hover {
   left: 0;
   bottom: 0;
   right: 0;
-  background-color: #E8E8E8;
+  background-color: #F6F6F6;
   border-radius: 4px;
 }
 .progress-bar .slider .progress {

package/dist/collection/components/biggive-quote/biggive-quote.css

@@ -132,7 +132,7 @@ a:hover {
 
 .text-colour-hover-grey-light:hover,
 .text-colour-grey-light {
-  color: #E8E8E8;
+  color: #F6F6F6;
 }
 
 .text-colour-hover-grey-medium:hover,
@@ -210,7 +210,7 @@ a:hover {
   fill: #D7D7D7;
 }
 .container.quote-icon-colour-grey-light .image-wrap path {
-  fill: #E8E8E8;
+  fill: #F6F6F6;
 }
 .container.quote-icon-colour-grey-medium .image-wrap path {
   fill: #8A8A8A;

package/dist/collection/components/biggive-sheet/biggive-sheet.css

@@ -76,7 +76,7 @@ a:hover {
 
 .background-colour-hover-grey-light:hover,
 .background-colour-grey-light {
-  background-color: #E8E8E8;
+  background-color: #F6F6F6;
 }
 
 .background-colour-hover-grey-medium:hover,
@@ -151,7 +151,7 @@ a:hover {
 
 .text-colour-hover-grey-light:hover,
 .text-colour-grey-light {
-  color: #E8E8E8;
+  color: #F6F6F6;
 }
 
 .text-colour-hover-grey-medium:hover,
@@ -217,7 +217,7 @@ a:hover {
 }
 
 .fill-grey-light {
-  fill: #E8E8E8;
+  fill: #F6F6F6;
 }
 
 .fill-grey-medium {
@@ -312,7 +312,7 @@ a:hover {
   fill: #D7D7D7;
 }
 .container .popup .header .back-link .svg-wrap.colour-grey-light svg path {
-  fill: #E8E8E8;
+  fill: #F6F6F6;
 }
 .container .popup .header .back-link .svg-wrap.colour-grey-medium svg path {
   fill: #8A8A8A;