@biggive/components 202303201542.0.0 → 202303301223.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-main-menu/biggive-main-menu.js

@@ -1,4 +1,5 @@
 import { h, Host } from '@stencil/core';
+import { makeURL } from '../../util/helper-methods';
 export class BiggiveMainMenu {
   constructor() {
     this.openMobileMenu = () => {
@@ -92,20 +93,8 @@ export class BiggiveMainMenu {
   render() {
     const slotBasedMenu = () => (h(Host, null, h("div", { class: "row row-top" }, h("div", { class: "social-icon-wrap" }, h("slot", { name: "social-icons" })), h("div", { class: "nav-secondary" })), h("nav", { role: "navigation", "aria-label": "Main Menu" }, h("div", { class: "navbar" }, h("div", { class: "logo" }, h("a", { href: this.logoUrl, "aria-label": "Home" }, h("svg", { version: "1.1", x: "0px", y: "0px", viewBox: "0 0 140.9 30" }, h("path", { d: "M51.9,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3C53.6,0,55,1.4,55,3S53.6,6.1,51.9,6.1z M49.3,23.8h5V7.7h-5V23.8z M68.5,7.7v1 c-0.8-0.7-2.3-1.4-4.1-1.4c-4.5,0-8.2,3.2-8.2,7.9c0,4.7,3.7,7.9,8.2,7.9c1.8,0,3.4-0.5,4.1-1.4v0.9c0,2.1-1.9,3.1-4.4,3.1 c-2.2,0-4-0.5-5.8-1.4V29c2.1,0.7,4.4,1,6,1c5,0,9.2-2,9.2-7.3v-15L68.5,7.7L68.5,7.7z M68.5,17.2c-0.7,1-1.9,1.4-3.2,1.4 c-2.1,0-3.8-1.2-3.8-3.4c0-2.2,1.7-3.4,3.8-3.4c1.3,0,2.5,0.6,3.2,1.5V17.2z M88.1,24.2c4,0,6.4-0.7,8.5-2V10h-11v4.7h5.8v4.1 c-0.8,0.2-1.8,0.4-3.2,0.4c-4.9,0-7.3-3.2-7.3-6.8c0-3.7,2.8-6.8,8-6.8c2.2,0,4.3,0.6,5.8,1.4V1.7c-1.5-0.6-3.4-1.1-6.1-1.1 c-7.6,0-13,5.3-13,11.8C75.5,19.1,80.4,24.2,88.1,24.2z M101.4,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3c1.8,0,3.2,1.4,3.2,3 S103.1,6.1,101.4,6.1z M98.8,23.8h5V7.7h-5V23.8z M115.1,15l-4.3-7.2H105l10.1,16.4l10.1-16.4h-5.8L115.1,15z M129.3,16.9h11.6 c0.1-7-4.2-9.5-8.4-9.5c-4.5,0-8.5,2.6-8.6,8.4c0,5.6,4.1,8.4,9.1,8.4c2.2,0,4.4-0.3,6.4-1.3v-4.4c-2.5,1.4-4.1,1.4-5.6,1.4 C131.7,19.8,129.5,19.2,129.3,16.9z M132.5,11.1c1.5,0,2.8,0.7,3,2.7h-6.2C129.6,11.9,131,11.1,132.5,11.1z M43.5,11.4 c1.2-1,1.8-2.4,1.8-4c0-3.1-3-6.3-7.3-6.3h-8v22.8h10.4c4.1,0,7.2-3,7.2-6.8C47.5,14.8,46.5,12.3,43.5,11.4z M35.2,5.7h2.4 C39,5.7,40,6.8,40,8c0,1.2-1,2.2-2.5,2.2h-2.4V5.7z M39.9,19.2h-4.7v-4.6h4.7c1.4,0,2.5,1,2.5,2.3C42.4,18.1,41.3,19.2,39.9,19.2z" }), h("path", { d: "M13.5,1l13.5,23H0L13.5,1z" })))), h("biggive-misc-icon", { class: "bx bx-menu", "background-colour": "white", "icon-colour": "black", icon: "MenuOpen", onClick: this.openMobileMenu }), h("div", { class: "nav-links" }, h("div", { class: "sidebar-logo" }, h("a", { href: this.logoUrl, "aria-label": "Home" }, h("svg", { version: "1.1", x: "0px", y: "0px", viewBox: "0 0 140.9 30", id: "mobileLogo" }, h("path", { d: "M51.9,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3C53.6,0,55,1.4,55,3S53.6,6.1,51.9,6.1z M49.3,23.8h5V7.7h-5V23.8z M68.5,7.7v1 c-0.8-0.7-2.3-1.4-4.1-1.4c-4.5,0-8.2,3.2-8.2,7.9c0,4.7,3.7,7.9,8.2,7.9c1.8,0,3.4-0.5,4.1-1.4v0.9c0,2.1-1.9,3.1-4.4,3.1 c-2.2,0-4-0.5-5.8-1.4V29c2.1,0.7,4.4,1,6,1c5,0,9.2-2,9.2-7.3v-15L68.5,7.7L68.5,7.7z M68.5,17.2c-0.7,1-1.9,1.4-3.2,1.4 c-2.1,0-3.8-1.2-3.8-3.4c0-2.2,1.7-3.4,3.8-3.4c1.3,0,2.5,0.6,3.2,1.5V17.2z M88.1,24.2c4,0,6.4-0.7,8.5-2V10h-11v4.7h5.8v4.1 c-0.8,0.2-1.8,0.4-3.2,0.4c-4.9,0-7.3-3.2-7.3-6.8c0-3.7,2.8-6.8,8-6.8c2.2,0,4.3,0.6,5.8,1.4V1.7c-1.5-0.6-3.4-1.1-6.1-1.1 c-7.6,0-13,5.3-13,11.8C75.5,19.1,80.4,24.2,88.1,24.2z M101.4,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3c1.8,0,3.2,1.4,3.2,3 S103.1,6.1,101.4,6.1z M98.8,23.8h5V7.7h-5V23.8z M115.1,15l-4.3-7.2H105l10.1,16.4l10.1-16.4h-5.8L115.1,15z M129.3,16.9h11.6 c0.1-7-4.2-9.5-8.4-9.5c-4.5,0-8.5,2.6-8.6,8.4c0,5.6,4.1,8.4,9.1,8.4c2.2,0,4.4-0.3,6.4-1.3v-4.4c-2.5,1.4-4.1,1.4-5.6,1.4 C131.7,19.8,129.5,19.2,129.3,16.9z M132.5,11.1c1.5,0,2.8,0.7,3,2.7h-6.2C129.6,11.9,131,11.1,132.5,11.1z M43.5,11.4 c1.2-1,1.8-2.4,1.8-4c0-3.1-3-6.3-7.3-6.3h-8v22.8h10.4c4.1,0,7.2-3,7.2-6.8C47.5,14.8,46.5,12.3,43.5,11.4z M35.2,5.7h2.4 C39,5.7,40,6.8,40,8c0,1.2-1,2.2-2.5,2.2h-2.4V5.7z M39.9,19.2h-4.7v-4.6h4.7c1.4,0,2.5,1,2.5,2.3C42.4,18.1,41.3,19.2,39.9,19.2z" }), h("path", { d: "M13.5,1l13.5,23H0L13.5,1z" }))), h("biggive-misc-icon", { class: "bx bx-x", "background-colour": "transparent", "icon-colour": "black", icon: "MenuClose", onClick: this.closeMobileMenu })), h("div", { id: "nav-primary" }), h("div", { class: "mobile-social-icon-wrap mobile-only" }, h("slot", { name: "mobile-social-icons" })))))));
     const presetContentMenu = () => {
-      if (!this.blogUrlPrefix || !this.blogUrlPrefix.startsWith('http')) {
-        throw new Error('Blog URL prefix must be set and start with http');
-      }
-      if (!this.donateUrlPrefix || !this.donateUrlPrefix.startsWith('http')) {
-        throw new Error('Donate URL prefix must set and start with http');
-      }
-      if (!this.experienceUrlPrefix || !this.experienceUrlPrefix.startsWith('http')) {
-        throw new Error('Experience URL prefix must be set set and start with http');
-      }
-      const blogUrl = (relativeUrl) => this.blogUrlPrefix + '/' + relativeUrl;
-      const donateUrl = (relativeUrl) => this.donateUrlPrefix + '/' + relativeUrl;
-      const experienceUrl = (relativeUrl) => this.experienceUrlPrefix + '/' + relativeUrl;
-      const secondaryNavLinks = (h("ul", null, this.isLoggedIn && (h("li", null, h("a", { href: donateUrl('my-account') }, "My Account"))), h("li", null, h("a", { href: experienceUrl('s/contact-us') }, "Contact Us")), h("li", null, h("a", { href: experienceUrl('charities/s/login') }, "Charity Login"))));
-      return (h(Host, null, h("div", { class: "row row-top" }, h("div", { class: "social-icon-wrap" }, h("biggive-social-icon", { service: "Facebook", url: "https://www.facebook.com/BigGive.org", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "Twitter", url: "https://twitter.com/BigGive", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "LinkedIn", url: "https://uk.linkedin.com/company/big-give", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "YouTube", url: "https://www.youtube.com/channel/UC9_wH1aaTuZurJ-F9R8GDcA", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "Instagram", url: "https://www.instagram.com/biggiveorg", "background-colour": "tertiary", "icon-colour": "black" })), h("div", { class: "nav-secondary" }, secondaryNavLinks)), h("nav", { role: "navigation", "aria-label": "Main Menu" }, h("div", { class: "navbar" }, h("div", { class: "logo" }, h("a", { href: this.donateUrlPrefix, "aria-label": "Home" }, h("svg", { version: "1.1", x: "0px", y: "0px", viewBox: "0 0 140.9 30" }, h("path", { d: "M51.9,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3C53.6,0,55,1.4,55,3S53.6,6.1,51.9,6.1z M49.3,23.8h5V7.7h-5V23.8z M68.5,7.7v1 c-0.8-0.7-2.3-1.4-4.1-1.4c-4.5,0-8.2,3.2-8.2,7.9c0,4.7,3.7,7.9,8.2,7.9c1.8,0,3.4-0.5,4.1-1.4v0.9c0,2.1-1.9,3.1-4.4,3.1 c-2.2,0-4-0.5-5.8-1.4V29c2.1,0.7,4.4,1,6,1c5,0,9.2-2,9.2-7.3v-15L68.5,7.7L68.5,7.7z M68.5,17.2c-0.7,1-1.9,1.4-3.2,1.4 c-2.1,0-3.8-1.2-3.8-3.4c0-2.2,1.7-3.4,3.8-3.4c1.3,0,2.5,0.6,3.2,1.5V17.2z M88.1,24.2c4,0,6.4-0.7,8.5-2V10h-11v4.7h5.8v4.1 c-0.8,0.2-1.8,0.4-3.2,0.4c-4.9,0-7.3-3.2-7.3-6.8c0-3.7,2.8-6.8,8-6.8c2.2,0,4.3,0.6,5.8,1.4V1.7c-1.5-0.6-3.4-1.1-6.1-1.1 c-7.6,0-13,5.3-13,11.8C75.5,19.1,80.4,24.2,88.1,24.2z M101.4,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3c1.8,0,3.2,1.4,3.2,3 S103.1,6.1,101.4,6.1z M98.8,23.8h5V7.7h-5V23.8z M115.1,15l-4.3-7.2H105l10.1,16.4l10.1-16.4h-5.8L115.1,15z M129.3,16.9h11.6 c0.1-7-4.2-9.5-8.4-9.5c-4.5,0-8.5,2.6-8.6,8.4c0,5.6,4.1,8.4,9.1,8.4c2.2,0,4.4-0.3,6.4-1.3v-4.4c-2.5,1.4-4.1,1.4-5.6,1.4 C131.7,19.8,129.5,19.2,129.3,16.9z M132.5,11.1c1.5,0,2.8,0.7,3,2.7h-6.2C129.6,11.9,131,11.1,132.5,11.1z M43.5,11.4 c1.2-1,1.8-2.4,1.8-4c0-3.1-3-6.3-7.3-6.3h-8v22.8h10.4c4.1,0,7.2-3,7.2-6.8C47.5,14.8,46.5,12.3,43.5,11.4z M35.2,5.7h2.4 C39,5.7,40,6.8,40,8c0,1.2-1,2.2-2.5,2.2h-2.4V5.7z M39.9,19.2h-4.7v-4.6h4.7c1.4,0,2.5,1,2.5,2.3C42.4,18.1,41.3,19.2,39.9,19.2z" }), h("path", { d: "M13.5,1l13.5,23H0L13.5,1z" })))), h("biggive-misc-icon", { class: "bx bx-menu", "background-colour": "white", "icon-colour": "black", icon: "MenuOpen", onClick: this.openMobileMenu }), h("div", { class: "nav-links" }, h("div", { class: "sidebar-logo" }, h("a", { href: this.donateUrlPrefix, "aria-label": "Home" }, h("svg", { version: "1.1", x: "0px", y: "0px", viewBox: "0 0 140.9 30", id: "mobileLogo" }, h("path", { d: "M51.9,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3C53.6,0,55,1.4,55,3S53.6,6.1,51.9,6.1z M49.3,23.8h5V7.7h-5V23.8z M68.5,7.7v1 c-0.8-0.7-2.3-1.4-4.1-1.4c-4.5,0-8.2,3.2-8.2,7.9c0,4.7,3.7,7.9,8.2,7.9c1.8,0,3.4-0.5,4.1-1.4v0.9c0,2.1-1.9,3.1-4.4,3.1 c-2.2,0-4-0.5-5.8-1.4V29c2.1,0.7,4.4,1,6,1c5,0,9.2-2,9.2-7.3v-15L68.5,7.7L68.5,7.7z M68.5,17.2c-0.7,1-1.9,1.4-3.2,1.4 c-2.1,0-3.8-1.2-3.8-3.4c0-2.2,1.7-3.4,3.8-3.4c1.3,0,2.5,0.6,3.2,1.5V17.2z M88.1,24.2c4,0,6.4-0.7,8.5-2V10h-11v4.7h5.8v4.1 c-0.8,0.2-1.8,0.4-3.2,0.4c-4.9,0-7.3-3.2-7.3-6.8c0-3.7,2.8-6.8,8-6.8c2.2,0,4.3,0.6,5.8,1.4V1.7c-1.5-0.6-3.4-1.1-6.1-1.1 c-7.6,0-13,5.3-13,11.8C75.5,19.1,80.4,24.2,88.1,24.2z M101.4,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3c1.8,0,3.2,1.4,3.2,3 S103.1,6.1,101.4,6.1z M98.8,23.8h5V7.7h-5V23.8z M115.1,15l-4.3-7.2H105l10.1,16.4l10.1-16.4h-5.8L115.1,15z M129.3,16.9h11.6 c0.1-7-4.2-9.5-8.4-9.5c-4.5,0-8.5,2.6-8.6,8.4c0,5.6,4.1,8.4,9.1,8.4c2.2,0,4.4-0.3,6.4-1.3v-4.4c-2.5,1.4-4.1,1.4-5.6,1.4 C131.7,19.8,129.5,19.2,129.3,16.9z M132.5,11.1c1.5,0,2.8,0.7,3,2.7h-6.2C129.6,11.9,131,11.1,132.5,11.1z M43.5,11.4 c1.2-1,1.8-2.4,1.8-4c0-3.1-3-6.3-7.3-6.3h-8v22.8h10.4c4.1,0,7.2-3,7.2-6.8C47.5,14.8,46.5,12.3,43.5,11.4z M35.2,5.7h2.4 C39,5.7,40,6.8,40,8c0,1.2-1,2.2-2.5,2.2h-2.4V5.7z M39.9,19.2h-4.7v-4.6h4.7c1.4,0,2.5,1,2.5,2.3C42.4,18.1,41.3,19.2,39.9,19.2z" }), h("path", { d: "M13.5,1l13.5,23H0L13.5,1z" }))), h("biggive-misc-icon", { class: "bx bx-x", "background-colour": "transparent", "icon-colour": "black", icon: "MenuClose", onClick: this.closeMobileMenu })), h("div", { id: "nav-primary" }, h("ul", { class: "links", slot: "nav-primary" }, h("li", null, h("a", { href: donateUrl('explore') }, "Explore Campaigns")), h("li", null, h("a", { href: blogUrl('charities') }, "For Charities")), h("li", null, h("a", { href: blogUrl('funders') }, "For Funders")), h("li", null, h("a", { onClick: this.noNav }, "Match Funding", h("biggive-misc-icon", { class: "bx bxs-chevron-down sub-menu-arrow arrow", "background-colour": "white", "icon-colour": "black", icon: "CaretRight" })), h("ul", { class: "sub-menu" }, h("li", null, h("a", { href: blogUrl('match-funding-explained') }, "Match Funding Explained")), h("li", null, h("a", { href: blogUrl('impact') }, "Match Funding Impact")), h("li", { class: "more" }, h("a", { onClick: this.noNav }, "Match Funding Opportunities", h("biggive-misc-icon", { class: "bx bxs-chevron-down sub-sub-menu-arrow arrow", "background-colour": "white", "icon-colour": "black", icon: "CaretRight" })), h("ul", { class: "sub-sub-menu" }, h("li", null, h("a", { href: blogUrl('christmas-challenge'), class: "icon-christmas" }, "Christmas Challenge")), h("li", null, h("a", { href: blogUrl('champions-for-children'), class: "icon-children" }, "Champions for Children")), h("li", null, h("a", { href: blogUrl('green-match-fund'), class: "icon-green-match" }, "Green Match Fund")), h("li", null, h("a", { href: blogUrl('women-girls-match-fund'), class: "icon-women-girls" }, "Women & Girls Match Fund")), h("li", null, h("a", { href: blogUrl('mental-health-match-fund/'), class: "icon-mental-health" }, "Mental Health Match Fund")), h("li", null, h("a", { href: blogUrl('anchor-match-fund/'), class: "icon-anchor-match" }, "Anchor Match Fund")), h("li", null, h("a", { href: blogUrl('emergency-campaigns/'), class: "icon-emergency" }, "Emergency Match Fund")))), h("li", null, h("a", { href: blogUrl('run-your-own-campaign/)') }, "Run your match funding campaign")))), h("li", null, h("a", { onClick: this.noNav }, "About Us", h("biggive-misc-icon", { class: "bx bxs-chevron-down sub-menu-arrow arrow", "background-colour": "white", "icon-colour": "black", icon: "CaretRight" })), h("ul", { class: "sub-menu" }, h("li", null, h("a", { href: blogUrl('our-people') }, "Our People")), h("li", null, h("a", { href: blogUrl('our-story') }, "Our Story")), h("li", null, h("a", { href: blogUrl('our-community') }, "Our Community")), h("li", null, h("a", { href: blogUrl('our-fees') }, "Our Fees")), h("li", null, h("a", { href: blogUrl('faqs') }, "FAQs")))), h("li", null, h("a", { onClick: this.noNav }, "Resources", h("biggive-misc-icon", { class: "bx bxs-chevron-down sub-menu-arrow arrow", "background-colour": "white", "icon-colour": "black", icon: "CaretRight" })), h("ul", { class: "sub-menu" }, h("li", null, h("a", { href: blogUrl('case-studies') }, "Case Studies")), h("li", null, h("a", { href: blogUrl('blog') }, "Blog")), h("li", null, h("a", { href: blogUrl('reports-insights') }, "Reports & Insights")), h("li", null, h("a", { href: blogUrl('press') }, "Press"))))), h("div", { class: "mobile-only" }, secondaryNavLinks)), h("div", { class: "mobile-social-icon-wrap mobile-only" }, h("biggive-social-icon", { service: "Facebook", url: "https://www.facebook.com/BigGive.org", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "Twitter", url: "https://twitter.com/BigGive", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "LinkedIn", url: "https://uk.linkedin.com/company/big-give", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "YouTube", url: "https://www.youtube.com/channel/UC9_wH1aaTuZurJ-F9R8GDcA", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "Instagram", url: "https://www.instagram.com/biggiveorg", "background-colour": "tertiary", "icon-colour": "black" })))))));
+      const secondaryNavLinks = (h("ul", null, this.isLoggedIn && (h("li", null, h("a", { href: makeURL('Donate', this.donateUrlPrefix, 'my-account') }, "My Account"))), h("li", null, h("a", { href: makeURL('Experience', this.experienceUrlPrefix, 's/contact-us') }, "Contact Us")), h("li", null, h("a", { href: makeURL('Experience', this.experienceUrlPrefix, 'charities/s/login') }, "Charity Login"))));
+      return (h(Host, null, h("div", { class: "row row-top" }, h("div", { class: "social-icon-wrap" }, h("biggive-social-icon", { service: "Facebook", url: "https://www.facebook.com/BigGive.org", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "Twitter", url: "https://twitter.com/BigGive", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "LinkedIn", url: "https://uk.linkedin.com/company/big-give", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "YouTube", url: "https://www.youtube.com/channel/UC9_wH1aaTuZurJ-F9R8GDcA", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "Instagram", url: "https://www.instagram.com/biggiveorg", "background-colour": "tertiary", "icon-colour": "black" })), h("div", { class: "nav-secondary" }, secondaryNavLinks)), h("nav", { role: "navigation", "aria-label": "Main Menu" }, h("div", { class: "navbar" }, h("div", { class: "logo" }, h("a", { href: this.donateUrlPrefix, "aria-label": "Home" }, h("svg", { version: "1.1", x: "0px", y: "0px", viewBox: "0 0 140.9 30" }, h("path", { d: "M51.9,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3C53.6,0,55,1.4,55,3S53.6,6.1,51.9,6.1z M49.3,23.8h5V7.7h-5V23.8z M68.5,7.7v1 c-0.8-0.7-2.3-1.4-4.1-1.4c-4.5,0-8.2,3.2-8.2,7.9c0,4.7,3.7,7.9,8.2,7.9c1.8,0,3.4-0.5,4.1-1.4v0.9c0,2.1-1.9,3.1-4.4,3.1 c-2.2,0-4-0.5-5.8-1.4V29c2.1,0.7,4.4,1,6,1c5,0,9.2-2,9.2-7.3v-15L68.5,7.7L68.5,7.7z M68.5,17.2c-0.7,1-1.9,1.4-3.2,1.4 c-2.1,0-3.8-1.2-3.8-3.4c0-2.2,1.7-3.4,3.8-3.4c1.3,0,2.5,0.6,3.2,1.5V17.2z M88.1,24.2c4,0,6.4-0.7,8.5-2V10h-11v4.7h5.8v4.1 c-0.8,0.2-1.8,0.4-3.2,0.4c-4.9,0-7.3-3.2-7.3-6.8c0-3.7,2.8-6.8,8-6.8c2.2,0,4.3,0.6,5.8,1.4V1.7c-1.5-0.6-3.4-1.1-6.1-1.1 c-7.6,0-13,5.3-13,11.8C75.5,19.1,80.4,24.2,88.1,24.2z M101.4,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3c1.8,0,3.2,1.4,3.2,3 S103.1,6.1,101.4,6.1z M98.8,23.8h5V7.7h-5V23.8z M115.1,15l-4.3-7.2H105l10.1,16.4l10.1-16.4h-5.8L115.1,15z M129.3,16.9h11.6 c0.1-7-4.2-9.5-8.4-9.5c-4.5,0-8.5,2.6-8.6,8.4c0,5.6,4.1,8.4,9.1,8.4c2.2,0,4.4-0.3,6.4-1.3v-4.4c-2.5,1.4-4.1,1.4-5.6,1.4 C131.7,19.8,129.5,19.2,129.3,16.9z M132.5,11.1c1.5,0,2.8,0.7,3,2.7h-6.2C129.6,11.9,131,11.1,132.5,11.1z M43.5,11.4 c1.2-1,1.8-2.4,1.8-4c0-3.1-3-6.3-7.3-6.3h-8v22.8h10.4c4.1,0,7.2-3,7.2-6.8C47.5,14.8,46.5,12.3,43.5,11.4z M35.2,5.7h2.4 C39,5.7,40,6.8,40,8c0,1.2-1,2.2-2.5,2.2h-2.4V5.7z M39.9,19.2h-4.7v-4.6h4.7c1.4,0,2.5,1,2.5,2.3C42.4,18.1,41.3,19.2,39.9,19.2z" }), h("path", { d: "M13.5,1l13.5,23H0L13.5,1z" })))), h("biggive-misc-icon", { class: "bx bx-menu", "background-colour": "white", "icon-colour": "black", icon: "MenuOpen", onClick: this.openMobileMenu }), h("div", { class: "nav-links" }, h("div", { class: "sidebar-logo" }, h("a", { href: this.donateUrlPrefix, "aria-label": "Home" }, h("svg", { version: "1.1", x: "0px", y: "0px", viewBox: "0 0 140.9 30", id: "mobileLogo" }, h("path", { d: "M51.9,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3C53.6,0,55,1.4,55,3S53.6,6.1,51.9,6.1z M49.3,23.8h5V7.7h-5V23.8z M68.5,7.7v1 c-0.8-0.7-2.3-1.4-4.1-1.4c-4.5,0-8.2,3.2-8.2,7.9c0,4.7,3.7,7.9,8.2,7.9c1.8,0,3.4-0.5,4.1-1.4v0.9c0,2.1-1.9,3.1-4.4,3.1 c-2.2,0-4-0.5-5.8-1.4V29c2.1,0.7,4.4,1,6,1c5,0,9.2-2,9.2-7.3v-15L68.5,7.7L68.5,7.7z M68.5,17.2c-0.7,1-1.9,1.4-3.2,1.4 c-2.1,0-3.8-1.2-3.8-3.4c0-2.2,1.7-3.4,3.8-3.4c1.3,0,2.5,0.6,3.2,1.5V17.2z M88.1,24.2c4,0,6.4-0.7,8.5-2V10h-11v4.7h5.8v4.1 c-0.8,0.2-1.8,0.4-3.2,0.4c-4.9,0-7.3-3.2-7.3-6.8c0-3.7,2.8-6.8,8-6.8c2.2,0,4.3,0.6,5.8,1.4V1.7c-1.5-0.6-3.4-1.1-6.1-1.1 c-7.6,0-13,5.3-13,11.8C75.5,19.1,80.4,24.2,88.1,24.2z M101.4,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3c1.8,0,3.2,1.4,3.2,3 S103.1,6.1,101.4,6.1z M98.8,23.8h5V7.7h-5V23.8z M115.1,15l-4.3-7.2H105l10.1,16.4l10.1-16.4h-5.8L115.1,15z M129.3,16.9h11.6 c0.1-7-4.2-9.5-8.4-9.5c-4.5,0-8.5,2.6-8.6,8.4c0,5.6,4.1,8.4,9.1,8.4c2.2,0,4.4-0.3,6.4-1.3v-4.4c-2.5,1.4-4.1,1.4-5.6,1.4 C131.7,19.8,129.5,19.2,129.3,16.9z M132.5,11.1c1.5,0,2.8,0.7,3,2.7h-6.2C129.6,11.9,131,11.1,132.5,11.1z M43.5,11.4 c1.2-1,1.8-2.4,1.8-4c0-3.1-3-6.3-7.3-6.3h-8v22.8h10.4c4.1,0,7.2-3,7.2-6.8C47.5,14.8,46.5,12.3,43.5,11.4z M35.2,5.7h2.4 C39,5.7,40,6.8,40,8c0,1.2-1,2.2-2.5,2.2h-2.4V5.7z M39.9,19.2h-4.7v-4.6h4.7c1.4,0,2.5,1,2.5,2.3C42.4,18.1,41.3,19.2,39.9,19.2z" }), h("path", { d: "M13.5,1l13.5,23H0L13.5,1z" }))), h("biggive-misc-icon", { class: "bx bx-x", "background-colour": "transparent", "icon-colour": "black", icon: "MenuClose", onClick: this.closeMobileMenu })), h("div", { id: "nav-primary" }, h("ul", { class: "links", slot: "nav-primary" }, h("li", null, h("a", { href: makeURL('Donate', this.donateUrlPrefix, 'explore') }, "Explore Campaigns")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'charities') }, "For Charities")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'funders') }, "For Funders")), h("li", null, h("a", { onClick: this.noNav }, "Match Funding", h("biggive-misc-icon", { class: "bx bxs-chevron-down sub-menu-arrow arrow", "background-colour": "white", "icon-colour": "black", icon: "CaretRight" })), h("ul", { class: "sub-menu" }, h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'match-funding-explained') }, "Match Funding Explained")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'impact') }, "Match Funding Impact")), h("li", { class: "more" }, h("a", { onClick: this.noNav }, "Match Funding Opportunities", h("biggive-misc-icon", { class: "bx bxs-chevron-down sub-sub-menu-arrow arrow", "background-colour": "white", "icon-colour": "black", icon: "CaretRight" })), h("ul", { class: "sub-sub-menu" }, h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'christmas-challenge'), class: "icon-christmas" }, "Christmas Challenge")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'champions-for-children'), class: "icon-children" }, "Champions for Children")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'green-match-fund'), class: "icon-green-match" }, "Green Match Fund")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'women-girls-match-fund'), class: "icon-women-girls" }, "Women & Girls Match Fund")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'kind2mind/'), class: "icon-mental-health" }, "Kind\u00B2Mind")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'anchor-match-fund/'), class: "icon-anchor-match" }, "Anchor Match Fund")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'emergency-campaigns/'), class: "icon-emergency" }, "Emergency Match Fund")))), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'run-your-own-campaign/)') }, "Run your match funding campaign")))), h("li", null, h("a", { onClick: this.noNav }, "About Us", h("biggive-misc-icon", { class: "bx bxs-chevron-down sub-menu-arrow arrow", "background-colour": "white", "icon-colour": "black", icon: "CaretRight" })), h("ul", { class: "sub-menu" }, h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-people') }, "Our People")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-story') }, "Our Story")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-community') }, "Our Community")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-fees') }, "Our Fees")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'faqs') }, "FAQs")))), h("li", null, h("a", { onClick: this.noNav }, "Resources", h("biggive-misc-icon", { class: "bx bxs-chevron-down sub-menu-arrow arrow", "background-colour": "white", "icon-colour": "black", icon: "CaretRight" })), h("ul", { class: "sub-menu" }, h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'case-studies') }, "Case Studies")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'blog') }, "Blog")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'reports-insights') }, "Reports & Insights")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'press') }, "Press"))))), h("div", { class: "mobile-only" }, secondaryNavLinks)), h("div", { class: "mobile-social-icon-wrap mobile-only" }, h("biggive-social-icon", { service: "Facebook", url: "https://www.facebook.com/BigGive.org", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "Twitter", url: "https://twitter.com/BigGive", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "LinkedIn", url: "https://uk.linkedin.com/company/big-give", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "YouTube", url: "https://www.youtube.com/channel/UC9_wH1aaTuZurJ-F9R8GDcA", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "Instagram", url: "https://www.instagram.com/biggiveorg", "background-colour": "tertiary", "icon-colour": "black" })))))));
     };
     return this.usePresetMenuContent ? presetContentMenu() : slotBasedMenu();
   }

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;
 }