@biggive/components 202303201542.0.0 → 202303301223.0.0

package/dist/collection/components/biggive-filtered-carousel/biggive-filtered-carousel.js

@@ -0,0 +1,166 @@
+import { h } from '@stencil/core';
+export class BiggiveFilteredCarousel {
+  constructor() {
+    this.spaceBelow = 4;
+    this.columnCount = 3;
+    this.buttonBackgroundColour = 'white';
+    this.buttonIconColour = 'primary';
+  }
+  componentDidLoad() {
+    var _a, _b;
+    const carousel = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('biggive-carousel');
+    const filterWrap = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.filters');
+    this.children = new Array();
+    Array.from(this.host.children).forEach(item => {
+      this.children.push(item);
+    });
+    let filters = [];
+    this.children.forEach(item => {
+      var _a, _b;
+      carousel.appendChild(item);
+      let itemFilters = [];
+      if (item.getAttribute('filters') != null) {
+        itemFilters = (_b = (_a = item.getAttribute('filters')) === null || _a === void 0 ? void 0 : _a.split('|')) !== null && _b !== void 0 ? _b : [];
+        filters.push(...itemFilters);
+      }
+      item.dataset['filters'] = JSON.stringify(itemFilters);
+    });
+    filters = [...new Set(filters)];
+    filters.forEach(filter => {
+      var button = document.createElement('span');
+      button.innerHTML = filter;
+      button.classList.add('button');
+      button.setAttribute('data-filter', filter);
+      button.addEventListener('click', e => {
+        var _a;
+        const button = e.target;
+        button.classList.toggle('active');
+        let appliedFilters = [];
+        let buttons = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.filters span.button.active');
+        buttons === null || buttons === void 0 ? void 0 : buttons.forEach(button => {
+          appliedFilters.push(button.getAttribute('data-filter'));
+        });
+        this.children.forEach(item => {
+          let itemFilters = JSON.parse(item.dataset['filters']);
+          if (appliedFilters.length == 0 || appliedFilters.filter(x => itemFilters.includes(x)).length > 0) {
+            item.classList.remove('hidden');
+          }
+          else {
+            item.classList.add('hidden');
+          }
+        });
+        carousel.setAttribute('space-below', '0');
+        carousel.setAttribute('space-below', '1');
+      });
+      filterWrap.appendChild(button);
+    });
+    carousel.setAttribute('space-below', '0');
+  }
+  render() {
+    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "filters" }), h("biggive-carousel", { "space-below": "1", "column-count": this.columnCount, "button-background-colour": this.buttonBackgroundColour, "button-icon-colour": this.buttonIconColour })));
+  }
+  static get is() { return "biggive-filtered-carousel"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-filtered-carousel.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-filtered-carousel.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": "4"
+      },
+      "columnCount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "1 | 2 | 3 | 4 | 5",
+          "resolved": "1 | 2 | 3 | 4 | 5",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "column-count",
+        "reflect": false,
+        "defaultValue": "3"
+      },
+      "buttonBackgroundColour": {
+        "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-background-colour",
+        "reflect": false,
+        "defaultValue": "'white'"
+      },
+      "buttonIconColour": {
+        "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-icon-colour",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/biggive-footer/biggive-footer.js

@@ -1,7 +1,11 @@
 import { getAssetPath, h } from '@stencil/core';
+import { makeURL } from '../../util/helper-methods';
 export class BiggiveFooter {
   constructor() {
     this.headingLevel = 5;
+    this.blogUrlPrefix = undefined;
+    this.experienceUrlPrefix = undefined;
+    this.usePresetFooter = false;
   }
   appendMenu(menuName) {
     var node = this.host.querySelector(`[slot="${menuName}"]`);
@@ -10,14 +14,22 @@ export class BiggiveFooter {
     }
   }
   componentDidRender() {
-    this.appendMenu('nav-primary');
-    this.appendMenu('nav-secondary');
-    this.appendMenu('nav-tertiary');
-    this.appendMenu('nav-postscript');
+    if (!this.usePresetFooter) {
+      this.appendMenu('nav-primary');
+      this.appendMenu('nav-secondary');
+      this.appendMenu('nav-tertiary');
+      this.appendMenu('nav-postscript');
+    }
   }
   render() {
     const HeadingTag = `h${this.headingLevel}`;
-    return (h("footer", { class: "footer" }, h("div", { class: "row row-top" }, h("nav", { class: "nav nav-primary", "aria-labelledby": "footer-primary-heading" }, h(HeadingTag, { class: "heading", id: "footer-primary-heading" }, h("slot", { name: "nav-primary-title" }))), h("nav", { class: "nav nav-secondary", "aria-labelledby": "footer-secondary-heading-heading" }, h(HeadingTag, { class: "heading", id: "footer-secondary-heading" }, h("slot", { name: "nav-secondary-title" }))), h("nav", { class: "nav nav-tertiary", "aria-labelledby": "footer-tertiary-heading" }, h(HeadingTag, { class: "heading", id: "footer-tertiary-heading" }, h("slot", { name: "nav-tertiary-title" }))), h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": "white", url: "https://blog.thebiggive.org.uk/charities", label: "For charities" }), h("biggive-button", { "colour-scheme": "white", url: "https://blog.thebiggive.org.uk/funders", label: "For funders" }))), h("div", { class: "row row-bottom" }, h("div", { class: "postscript-wrap" }, h("img", { class: "fr-logo", src: getAssetPath('../assets/images/fundraising-regulator.png'), alt: "Fundraising Regulator" }), h("nav", { class: "nav nav-postscript", "aria-label": "Legal" })), h("div", { class: "social-icon-wrap" }, h("slot", { name: "social-icons" })), h("p", null, "\u00A9 2007 \u2013 2022 The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom"))));
+    const slotBasedFooter = () => {
+      return (h("footer", { class: "footer" }, h("div", { class: "row row-top" }, h("nav", { class: "nav nav-primary", "aria-labelledby": "footer-primary-heading" }, h(HeadingTag, { class: "heading", id: "footer-primary-heading" }, h("slot", { name: "nav-primary-title" }))), h("nav", { class: "nav nav-secondary", "aria-labelledby": "footer-secondary-heading-heading" }, h(HeadingTag, { class: "heading", id: "footer-secondary-heading" }, h("slot", { name: "nav-secondary-title" }))), h("nav", { class: "nav nav-tertiary", "aria-labelledby": "footer-tertiary-heading" }, h(HeadingTag, { class: "heading", id: "footer-tertiary-heading" }, h("slot", { name: "nav-tertiary-title" }))), h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": "white", url: "https://blog.thebiggive.org.uk/charities", label: "For charities" }), h("biggive-button", { "colour-scheme": "white", url: "https://blog.thebiggive.org.uk/funders", label: "For funders" }))), h("div", { class: "row row-bottom" }, h("div", { class: "postscript-wrap" }, h("img", { class: "fr-logo", src: getAssetPath('../assets/images/fundraising-regulator.png'), alt: "Fundraising Regulator" }), h("nav", { class: "nav nav-postscript", "aria-label": "Legal" })), h("div", { class: "social-icon-wrap" }, h("slot", { name: "social-icons" })), h("p", null, "\u00A9 2007 \u2013 2022 The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom"))));
+    };
+    const presetFooter = () => {
+      return (h("footer", { class: "footer" }, h("div", { class: "row row-top" }, h("nav", { class: "nav nav-primary", "aria-labelledby": "footer-primary-heading" }, h(HeadingTag, { class: "heading", id: "footer-primary-heading" }, h("div", { slot: "nav-primary-title" }, "Match Funding Opportunities")), h("ul", { slot: "nav-primary" }, 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, 'green-match-fund'), class: "icon-green" }, "Green Match Fund")), 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, 'women-girls-match-fund'), class: "icon-women-girls" }, "Women and 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, 'emergency-campaigns/'), class: "icon-emergency" }, "Emergency Match Fund")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'run-your-own-campaign/)') }, "Run your own campaign")))), h("nav", { class: "nav nav-secondary", "aria-labelledby": "footer-secondary-heading-heading" }, h(HeadingTag, { class: "heading", id: "footer-secondary-heading" }, h("div", { slot: "nav-secondary-title" }, "Resources")), h("ul", { slot: "nav-secondary" }, 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("nav", { class: "nav nav-tertiary", "aria-labelledby": "footer-tertiary-heading" }, h(HeadingTag, { class: "heading", id: "footer-tertiary-heading" }, h("div", { slot: "nav-tertiary-title" }, "About")), h("ul", { slot: "nav-tertiary" }, h("li", null, h("a", { href: makeURL('Experience', this.experienceUrlPrefix, 's/contact-us') }, "Contact us")), 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-people') }, "Our People")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-fees') }, "Our Fees")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'careers') }, "Careers")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'faqs') }, "FAQs"))), h("ul", { slot: "nav-postscript" }, h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'terms-and-conditions') }, "Terms and Conditions")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'privacy') }, "Privacy Policy")))), h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": "white", url: makeURL('Blog', this.blogUrlPrefix, 'charities'), label: "For charities" }), h("biggive-button", { "colour-scheme": "white", url: makeURL('Blog', this.blogUrlPrefix, 'funders'), label: "For funders" }))), h("div", { class: "row row-bottom" }, h("div", { class: "postscript-wrap" }, h("img", { class: "fr-logo", src: getAssetPath('../assets/images/fundraising-regulator.png'), alt: "Fundraising Regulator" }), h("nav", { class: "nav nav-postscript", "aria-label": "Legal" })), h("div", { class: "social-icon-wrap" }, h("div", { slot: "social-icons" }, h("biggive-social-icon", { service: "Facebook", url: "https://www.facebook.com/BigGive.org", "background-colour": "tertiary", "icon-colour": "black", wide: true }), h("biggive-social-icon", { service: "Twitter", url: "https://twitter.com/BigGive", "background-colour": "tertiary", "icon-colour": "black", wide: true }), h("biggive-social-icon", { service: "LinkedIn", url: "https://uk.linkedin.com/company/big-give", "background-colour": "tertiary", "icon-colour": "black", wide: true }), h("biggive-social-icon", { service: "YouTube", url: "https://www.youtube.com/channel/UC9_wH1aaTuZurJ-F9R8GDcA", "background-colour": "tertiary", "icon-colour": "black", wide: true }), h("biggive-social-icon", { service: "Instagram", url: "https://www.instagram.com/biggiveorg", "background-colour": "tertiary", "icon-colour": "black" }))), h("p", null, "\u00A9 2007 \u2013 2022 The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom"))));
+    };
+    return this.usePresetFooter ? presetFooter() : slotBasedFooter();
   }
   static get is() { return "biggive-footer"; }
   static get encapsulation() { return "shadow"; }
@@ -50,6 +62,58 @@ export class BiggiveFooter {
         "attribute": "heading-level",
         "reflect": false,
         "defaultValue": "5"
+      },
+      "blogUrlPrefix": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "URL prefixes vary by environment, and components library is not best placed to know what they are, so we\ntake them as props"
+        },
+        "attribute": "blog-url-prefix",
+        "reflect": false
+      },
+      "experienceUrlPrefix": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "experience-url-prefix",
+        "reflect": false
+      },
+      "usePresetFooter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Conditionally render footer menu:\nhard-coded (preset) when set to true, dynamic (slot-based) when set to false"
+        },
+        "attribute": "use-preset-footer",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -0,0 +1,420 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
+a {
+  color: inherit;
+  text-decoration: underline;
+}
+a:hover {
+  text-decoration: none;
+}
+
+.background-colour-hover-primary:hover,
+.background-colour-primary {
+  background-color: #2C089B;
+}
+
+.background-colour-hover-secondary:hover,
+.background-colour-secondary {
+  background-color: #2AF135;
+}
+
+.background-colour-hover-tertiary:hover,
+.background-colour-tertiary {
+  background-color: #FF7272;
+}
+
+.background-colour-hover-brand-1:hover,
+.background-colour-brand-1 {
+  background-color: #B30510;
+}
+
+.background-colour-hover-brand-2:hover,
+.background-colour-brand-2 {
+  background-color: #6E0887;
+}
+
+.background-colour-hover-brand-3:hover,
+.background-colour-brand-3 {
+  background-color: #50B400;
+}
+
+.background-colour-hover-brand-4:hover,
+.background-colour-brand-4 {
+  background-color: #FFE500;
+}
+
+.background-colour-hover-brand-5:hover,
+.background-colour-brand-5 {
+  background-color: #F07D00;
+}
+
+.background-colour-hover-brand-6:hover,
+.background-colour-brand-6 {
+  background-color: #62CFC9;
+}
+
+.background-colour-hover-white:hover,
+.background-colour-white {
+  background-color: #FFFFFF;
+}
+
+.background-colour-hover-black:hover,
+.background-colour-black {
+  background-color: #000000;
+}
+
+.background-colour-hover-white:hover,
+.background-colour-white {
+  background-color: #FFFFFF;
+}
+
+.background-colour-hover-grey-extra-light:hover,
+.background-colour-grey-extra-light {
+  background-color: #D7D7D7;
+}
+
+.background-colour-hover-grey-light:hover,
+.background-colour-grey-light {
+  background-color: #E8E8E8;
+}
+
+.background-colour-hover-grey-medium:hover,
+.background-colour-grey-medium {
+  background-color: #8A8A8A;
+}
+
+.background-colour-hover-grey-dark:hover,
+.background-colour-grey-dark {
+  background-color: #4A4A4A;
+}
+
+.fill-primary {
+  fill: #2C089B;
+}
+
+.fill-secondary {
+  fill: #2AF135;
+}
+
+.fill-tertiary {
+  fill: #FF7272;
+}
+
+.fill-brand-1 {
+  fill: #B30510;
+}
+
+.fill-brand-2 {
+  fill: #6E0887;
+}
+
+.fill-brand-3 {
+  fill: #50B400;
+}
+
+.fill-brand-4 {
+  fill: #FFE500;
+}
+
+.fill-brand-5 {
+  fill: #F07D00;
+}
+
+.fill-brand-6 {
+  fill: #CBC8C8;
+}
+
+.fill-brand-mhf-turquoise {
+  fill: #62CFC9;
+}
+
+.fill-white {
+  fill: #FFFFFF;
+}
+
+.fill-black {
+  fill: #000000;
+}
+
+.fill-grey-extra-light {
+  fill: #D7D7D7;
+}
+
+.fill-grey-light {
+  fill: #E8E8E8;
+}
+
+.fill-grey-medium {
+  fill: #8A8A8A;
+}
+
+.fill-grey-dark {
+  fill: #4A4A4A;
+}
+
+.fill-red {
+  fill: red;
+}
+
+:host {
+  display: contents;
+}
+
+.generic-icon-item {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  text-align: center;
+  transition: all ease-in-out 0.5s;
+  display: inline-block;
+  margin-right: 10px;
+}
+.generic-icon-item.colour-scheme-primary {
+  background-color: #2C089B;
+}
+.generic-icon-item.colour-scheme-primary svg {
+  fill: #FFFFFF;
+}
+.generic-icon-item.colour-scheme-secondary {
+  background-color: #2AF135;
+}
+.generic-icon-item.colour-scheme-secondary svg {
+  fill: #000000;
+}
+.generic-icon-item.colour-scheme-tertiary {
+  background-color: #FF7272;
+}
+.generic-icon-item.colour-scheme-tertiary svg {
+  fill: #000000;
+}
+.generic-icon-item.colour-scheme-brand-1 {
+  background-color: #B30510;
+}
+.generic-icon-item.colour-scheme-brand-1 svg {
+  fill: #000000;
+}
+.generic-icon-item.colour-scheme-brand-2 {
+  background-color: #6E0887;
+}
+.generic-icon-item.colour-scheme-brand-2 svg {
+  fill: #000000;
+}
+.generic-icon-item.colour-scheme-brand-3 {
+  background-color: #50B400;
+}
+.generic-icon-item.colour-scheme-brand-3 svg {
+  fill: #000000;
+}
+.generic-icon-item.colour-scheme-brand-4 {
+  background-color: #FFE500;
+}
+.generic-icon-item.colour-scheme-brand-4 svg {
+  fill: #000000;
+}
+.generic-icon-item.colour-scheme-brand-5 {
+  background-color: #F07D00;
+}
+.generic-icon-item.colour-scheme-brand-5 svg {
+  fill: #000000;
+}
+.generic-icon-item.colour-scheme-brand-6 {
+  background-color: #CBC8C8;
+}
+.generic-icon-item.colour-scheme-brand-6 svg {
+  fill: #000000;
+}
+.generic-icon-item.colour-scheme-white {
+  background-color: #FFFFFF;
+}
+.generic-icon-item.colour-scheme-white svg {
+  fill: #000000;
+}
+.generic-icon-item.colour-scheme-black {
+  background-color: #000000;
+}
+.generic-icon-item.colour-scheme-black svg {
+  fill: #FFFFFF;
+}
+.generic-icon-item.colour-scheme-black {
+  background-color: #D7D7D7;
+}
+.generic-icon-item.colour-scheme-black svg {
+  fill: #D7D7D7;
+}
+.generic-icon-item.colour-scheme-black {
+  background-color: #E8E8E8;
+}
+.generic-icon-item.colour-scheme-black svg {
+  fill: #E8E8E8;
+}
+.generic-icon-item.colour-scheme-black {
+  background-color: #8A8A8A;
+}
+.generic-icon-item.colour-scheme-black svg {
+  fill: #8A8A8A;
+}
+.generic-icon-item.colour-scheme-black {
+  background-color: #4A4A4A;
+}
+.generic-icon-item.colour-scheme-black svg {
+  fill: #4A4A4A;
+}
+.generic-icon-item:hover {
+  background-color: #FFFFFF;
+}
+.generic-icon-item:hover svg {
+  fill: #000000;
+}
+.generic-icon-item a {
+  display: grid;
+  position: relative;
+  padding: 10px;
+  box-sizing: border-box;
+  height: 100%;
+}
+.generic-icon-item a svg {
+  width: 100%;
+  height: 100%;
+}
+@media screen and (max-width: 576px) {
+  .generic-icon-item {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    text-align: center;
+    transition: all ease-in-out 0.5s;
+    display: inline-block;
+    margin-right: 10px;
+    width: 30px;
+    height: 30px;
+    margin: auto;
+  }
+  .generic-icon-item.colour-scheme-primary {
+    background-color: #2C089B;
+  }
+  .generic-icon-item.colour-scheme-primary svg {
+    fill: #FFFFFF;
+  }
+  .generic-icon-item.colour-scheme-secondary {
+    background-color: #2AF135;
+  }
+  .generic-icon-item.colour-scheme-secondary svg {
+    fill: #000000;
+  }
+  .generic-icon-item.colour-scheme-tertiary {
+    background-color: #FF7272;
+  }
+  .generic-icon-item.colour-scheme-tertiary svg {
+    fill: #000000;
+  }
+  .generic-icon-item.colour-scheme-brand-1 {
+    background-color: #B30510;
+  }
+  .generic-icon-item.colour-scheme-brand-1 svg {
+    fill: #000000;
+  }
+  .generic-icon-item.colour-scheme-brand-2 {
+    background-color: #6E0887;
+  }
+  .generic-icon-item.colour-scheme-brand-2 svg {
+    fill: #000000;
+  }
+  .generic-icon-item.colour-scheme-brand-3 {
+    background-color: #50B400;
+  }
+  .generic-icon-item.colour-scheme-brand-3 svg {
+    fill: #000000;
+  }
+  .generic-icon-item.colour-scheme-brand-4 {
+    background-color: #FFE500;
+  }
+  .generic-icon-item.colour-scheme-brand-4 svg {
+    fill: #000000;
+  }
+  .generic-icon-item.colour-scheme-brand-5 {
+    background-color: #F07D00;
+  }
+  .generic-icon-item.colour-scheme-brand-5 svg {
+    fill: #000000;
+  }
+  .generic-icon-item.colour-scheme-brand-6 {
+    background-color: #CBC8C8;
+  }
+  .generic-icon-item.colour-scheme-brand-6 svg {
+    fill: #000000;
+  }
+  .generic-icon-item.colour-scheme-white {
+    background-color: #FFFFFF;
+  }
+  .generic-icon-item.colour-scheme-white svg {
+    fill: #000000;
+  }
+  .generic-icon-item.colour-scheme-black {
+    background-color: #000000;
+  }
+  .generic-icon-item.colour-scheme-black svg {
+    fill: #FFFFFF;
+  }
+  .generic-icon-item.colour-scheme-black {
+    background-color: #D7D7D7;
+  }
+  .generic-icon-item.colour-scheme-black svg {
+    fill: #D7D7D7;
+  }
+  .generic-icon-item.colour-scheme-black {
+    background-color: #E8E8E8;
+  }
+  .generic-icon-item.colour-scheme-black svg {
+    fill: #E8E8E8;
+  }
+  .generic-icon-item.colour-scheme-black {
+    background-color: #8A8A8A;
+  }
+  .generic-icon-item.colour-scheme-black svg {
+    fill: #8A8A8A;
+  }
+  .generic-icon-item.colour-scheme-black {
+    background-color: #4A4A4A;
+  }
+  .generic-icon-item.colour-scheme-black svg {
+    fill: #4A4A4A;
+  }
+  .generic-icon-item:hover {
+    background-color: #FFFFFF;
+  }
+  .generic-icon-item:hover svg {
+    fill: #000000;
+  }
+  .generic-icon-item a {
+    display: grid;
+    position: relative;
+    padding: 10px;
+    box-sizing: border-box;
+    height: 100%;
+  }
+  .generic-icon-item a svg {
+    width: 100%;
+    height: 100%;
+  }
+  .generic-icon-item a {
+    padding: 6px;
+  }
+  .generic-icon-item a {
+    margin: auto;
+  }
+}
+
+.CaretRight {
+  height: 10px;
+  width: 10px;
+  margin-right: 0px;
+}
+.CaretRight a {
+  padding: 0px;
+}
+
+.MenuClose a svg {
+  height: 12px;
+  width: 12px;
+}