@biggive/components 202307271559.0.0 → 202308021605.0.0

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

@@ -2,46 +2,40 @@ import { h } from '@stencil/core';
 export class BiggiveImageCard {
   constructor() {
     this.spaceBelow = 0;
-    this.backgroundColour = 'white';
+    this.backgroundColour = 'primary';
     this.backgroundImageUrl = '';
-    this.slug = undefined;
-    this.slugColour = 'black';
-    this.date = undefined;
-    this.dateColour = 'black';
-    this.mainTitle = undefined;
-    this.mainTitleColour = 'black';
+    this.cardColour = 'white';
+    this.textColour = '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.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.buttonColour = 'black';
+    this.buttonColourScheme = 'clear-primary';
     this.clipBottomLeftCorner = true;
     this.clipTopRightCorner = true;
+    this.headingLevel = 3;
+    this.addAnimation = false;
   }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: 'sleeve background-colour-' +
+    const HeadingTag = `h${this.headingLevel}`;
+    return (h("div", { class: 'container space-below-' +
+        this.spaceBelow +
+        ' 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))));
+        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"; }
@@ -101,7 +95,7 @@ export class BiggiveImageCard {
         },
         "attribute": "background-colour",
         "reflect": false,
-        "defaultValue": "'white'"
+        "defaultValue": "'primary'"
       },
       "backgroundImageUrl": {
         "type": "string",
@@ -121,24 +115,7 @@ export class BiggiveImageCard {
         "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": {
+      "cardColour": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -157,28 +134,11 @@ export class BiggiveImageCard {
           "tags": [],
           "text": ""
         },
-        "attribute": "slug-colour",
+        "attribute": "card-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
+        "defaultValue": "'white'"
       },
-      "dateColour": {
+      "textColour": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -197,11 +157,11 @@ export class BiggiveImageCard {
           "tags": [],
           "text": ""
         },
-        "attribute": "date-colour",
+        "attribute": "text-colour",
         "reflect": false,
         "defaultValue": "'black'"
       },
-      "mainTitle": {
+      "mainImageUrl": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -215,21 +175,16 @@ export class BiggiveImageCard {
           "tags": [],
           "text": ""
         },
-        "attribute": "main-title",
+        "attribute": "main-image-url",
         "reflect": false
       },
-      "mainTitleColour": {
+      "mainImageAltText": {
         "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"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": false,
@@ -237,16 +192,15 @@ export class BiggiveImageCard {
           "tags": [],
           "text": ""
         },
-        "attribute": "main-title-colour",
-        "reflect": false,
-        "defaultValue": "'black'"
+        "attribute": "main-image-alt-text",
+        "reflect": false
       },
-      "mainImageUrl": {
+      "textAlign": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "'left' | 'center' | 'right'",
+          "resolved": "\"center\" | \"left\" | \"right\"",
           "references": {}
         },
         "required": false,
@@ -255,10 +209,11 @@ export class BiggiveImageCard {
           "tags": [],
           "text": ""
         },
-        "attribute": "main-image-url",
-        "reflect": false
+        "attribute": "text-align",
+        "reflect": false,
+        "defaultValue": "'center'"
       },
-      "mainImageAltText": {
+      "mainTitle": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -272,10 +227,10 @@ export class BiggiveImageCard {
           "tags": [],
           "text": ""
         },
-        "attribute": "main-image-alt-text",
+        "attribute": "main-title",
         "reflect": false
       },
-      "image1Url": {
+      "subtitle": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -289,10 +244,10 @@ export class BiggiveImageCard {
           "tags": [],
           "text": ""
         },
-        "attribute": "image-1-url",
+        "attribute": "subtitle",
         "reflect": false
       },
-      "image1AltText": {
+      "teaser": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -306,15 +261,15 @@ export class BiggiveImageCard {
           "tags": [],
           "text": ""
         },
-        "attribute": "image-1-alt-text",
+        "attribute": "teaser",
         "reflect": false
       },
-      "image2Url": {
-        "type": "string",
+      "icon": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
@@ -323,16 +278,22 @@ export class BiggiveImageCard {
           "tags": [],
           "text": ""
         },
-        "attribute": "image-2-url",
-        "reflect": false
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "image2AltText": {
+      "iconColour": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "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,
@@ -340,10 +301,11 @@ export class BiggiveImageCard {
           "tags": [],
           "text": ""
         },
-        "attribute": "image-2-alt-text",
-        "reflect": false
+        "attribute": "icon-colour",
+        "reflect": false,
+        "defaultValue": "'primary'"
       },
-      "imageLabel": {
+      "buttonAlign": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -357,21 +319,17 @@ export class BiggiveImageCard {
           "tags": [],
           "text": ""
         },
-        "attribute": "image-label",
-        "reflect": false
+        "attribute": "button-align",
+        "reflect": false,
+        "defaultValue": "'center'"
       },
-      "imageLabelColour": {
+      "buttonStyle": {
         "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"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": false,
@@ -379,9 +337,9 @@ export class BiggiveImageCard {
           "tags": [],
           "text": ""
         },
-        "attribute": "image-label-colour",
+        "attribute": "button-style",
         "reflect": false,
-        "defaultValue": "'black'"
+        "defaultValue": "'standard'"
       },
       "buttonLabel": {
         "type": "string",
@@ -417,18 +375,13 @@ export class BiggiveImageCard {
         "attribute": "button-url",
         "reflect": false
       },
-      "buttonColour": {
+      "buttonColourScheme": {
         "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"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": false,
@@ -436,9 +389,9 @@ export class BiggiveImageCard {
           "tags": [],
           "text": ""
         },
-        "attribute": "button-colour",
+        "attribute": "button-colour-scheme",
         "reflect": false,
-        "defaultValue": "'black'"
+        "defaultValue": "'clear-primary'"
       },
       "clipBottomLeftCorner": {
         "type": "boolean",
@@ -475,6 +428,42 @@ export class BiggiveImageCard {
         "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

@@ -15,30 +15,65 @@ export default {
         options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black', 'transparent'],
       },
     },
-    backgroundColourHover: {
-      name: 'Hover background colour',
+    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'],
       },
     },
-    slug: {
-      name: 'Slug',
+    icon: {
+      name: 'Icon',
     },
-    date: {
-      name: 'Date',
+    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',
     },
-    imageUrl: {
-      name: 'Image URL',
-    },
-    imageAltText: {
-      name: 'Image alt text',
+    subtitle: {
+      name: 'Subtitle',
     },
-    imageLabel: {
-      name: 'Image Label',
+    teaser: {
+      name: 'Teaser',
     },
     buttonUrl: {
       name: 'Button URL',
@@ -46,35 +81,79 @@ export default {
     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-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}"
+                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',
-  backgroundColourHover: 'tertiary',
-  slug: '• Blog Post   • Mental Health',
-  date: 'September 2022',
+  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',
-  imageUrl: 'https://media.istockphoto.com/vectors/childish-seamless-dotted-pattern-with-colorful-doodle-letters-fun-vector-id1208462693',
-  imageAltText: 'Image description',
-  imageLabel: 'By Joe Bloggs',
+  subtitle: 'Sample subtitle',
+  teaser: 'teaser',
   buttonUrl: '#',
   buttonLabel: 'Click here',
+  buttonColourScheme: 'clear-primary',
+  clipBottomLeftCorner: true,
+  clipTopRightCorner: true,
 };

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: #F6F6F6;
+  color: #E8E8E8;
 }
 
 .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: #F6F6F6;
+  background-color: #E8E8E8;
 }
 
 .background-colour-hover-grey-medium:hover,
@@ -142,7 +142,7 @@ a:hover {
 }
 
 .fill-grey-light {
-  fill: #F6F6F6;
+  fill: #E8E8E8;
 }
 
 .fill-grey-medium {
@@ -243,10 +243,10 @@ a:hover {
   fill: #D7D7D7;
 }
 .misc-icon-item.colour-scheme-black {
-  background-color: #F6F6F6;
+  background-color: #E8E8E8;
 }
 .misc-icon-item.colour-scheme-black svg {
-  fill: #F6F6F6;
+  fill: #E8E8E8;
 }
 .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: #F6F6F6;
+    background-color: #E8E8E8;
   }
   .misc-icon-item.colour-scheme-black svg {
-    fill: #F6F6F6;
+    fill: #E8E8E8;
   }
   .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: #F6F6F6;
+  background-color: #E8E8E8;
   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: #F6F6F6;
+  background-color: #E8E8E8;
   border-radius: 4px;
 }
 .progress-bar .slider .progress {