@ukic/web-components 2.1.0-beta.8 → 2.2.0

package/dist/collection/components/ic-footer/ic-footer.css

@@ -443,18 +443,18 @@ video {
 
 :host {
   display: block;
+
+  --footer-compliance-padding: 1rem 0;
 }
 
 :host(.footer-sparse) {
   --footer-links-padding: 1.5rem 0;
-  --footer-compliance-padding: 1.5rem 0 0.5rem 0;
   --footer-logo-margin-bottom: var(--ic-space-lg);
   --footer-link-inner-flex-direction: row;
 }
 
 :host(.footer-small) {
   --footer-links-padding: 0 0;
-  --footer-compliance-padding: 1rem 0 0.5rem;
   --footer-logo-margin-bottom: var(--ic-space-md);
   --footer-link-inner-flex-direction: column;
 }

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

@@ -1,6 +1,6 @@
 import { h, Host, } from "@stencil/core";
 import { IC_DEVICE_SIZES } from "../../utils/constants";
-import { getCurrentDeviceSize, getThemeForegroundColor, checkResizeObserver, hasClassificationBanner, } from "../../utils/helpers";
+import { getCurrentDeviceSize, getThemeForegroundColor, checkResizeObserver, hasClassificationBanner, isSlotUsed, } from "../../utils/helpers";
 import { IcThemeForegroundEnum, } from "../../utils/types";
 /**
  * @slot description - Content will be rendered at the top of the footer.
@@ -23,14 +23,27 @@ export class Footer {
       });
       this.resizeObserver.observe(this.footerEl);
     };
-    this.description = undefined;
+    this.deviceSize = IC_DEVICE_SIZES.XL;
+    this.foregroundColor = getThemeForegroundColor();
     this.aligned = "left";
     this.breakpoint = "medium";
-    this.groupLinks = false;
     this.caption = undefined;
     this.copyright = true;
-    this.deviceSize = IC_DEVICE_SIZES.XL;
-    this.foregroundColor = getThemeForegroundColor();
+    this.description = undefined;
+    this.groupLinks = false;
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+  }
+  componentWillLoad() {
+    this.deviceSize = getCurrentDeviceSize();
+  }
+  componentDidLoad() {
+    checkResizeObserver(this.runResizeObserver);
+  }
+  themeChangeHandler(ev) {
+    const theme = ev.detail;
+    this.foregroundColor = theme.mode;
   }
   isSmall() {
     const bp = this.breakpoint;
@@ -46,19 +59,6 @@ export class Footer {
               ? this.deviceSize < IC_DEVICE_SIZES.XL
               : false;
   }
-  themeChangeHandler(ev) {
-    const theme = ev.detail;
-    this.foregroundColor = theme.mode;
-  }
-  componentWillLoad() {
-    this.deviceSize = getCurrentDeviceSize();
-  }
-  componentDidLoad() {
-    checkResizeObserver(this.runResizeObserver);
-  }
-  disconnectedCallback() {
-    this.resizeObserver.disconnect();
-  }
   render() {
     const { aligned, caption, copyright, description, groupLinks, foregroundColor, } = this;
     const small = this.isSmall();
@@ -70,7 +70,9 @@ export class Footer {
         // Slots will be able to infer their own color
         [IcThemeForegroundEnum.Dark]: foregroundColor === IcThemeForegroundEnum.Dark,
         [IcThemeForegroundEnum.Light]: foregroundColor === IcThemeForegroundEnum.Light,
-      } }, h("footer", { ref: (footerEl) => (this.footerEl = footerEl) }, h("div", { class: "footer-description" }, h("ic-section-container", { aligned: aligned, fullHeight: true }, h("div", { class: "footer-description-inner" }, h("ic-typography", { variant: "body" }, h("slot", { name: "description" }, description))))), h("div", { class: "footer-links" }, groupLinks && small ? (h("div", { class: "footer-links-inner" }, h("slot", { name: "link" }))) : (h("ic-section-container", { fullHeight: true, aligned: aligned }, h("div", { class: "footer-links-inner" }, h("slot", { name: "link" }))))), h("div", { class: "footer-compliance" }, h("ic-section-container", { aligned: aligned, fullHeight: true }, h("div", { class: "footer-compliance-inner" }, h("div", { class: "footer-logo" }, h("slot", { name: "logo" })), h("div", { class: "footer-caption" }, h("ic-typography", { variant: this.deviceSize <= IC_DEVICE_SIZES.M ? "caption" : "body" }, h("slot", { name: "caption" }, caption))), copyright && (h("div", { class: {
+      } }, h("footer", { ref: (footerEl) => (this.footerEl = footerEl) }, h("div", { class: "footer-description" }, h("ic-section-container", { aligned: aligned, fullHeight: true }, h("div", { class: "footer-description-inner" }, h("ic-typography", { variant: "body" }, h("slot", { name: "description" }, description))))), isSlotUsed(this.el, "link") && (h("div", { class: "footer-links" }, groupLinks && small ? (h("div", { class: "footer-links-inner" }, h("slot", { name: "link" }))) : (h("ic-section-container", { fullHeight: true, aligned: aligned }, h("div", { class: "footer-links-inner" }, h("slot", { name: "link" })))))), h("div", { class: "footer-compliance" }, h("ic-section-container", { aligned: aligned, fullHeight: true }, h("div", { class: "footer-compliance-inner" }, isSlotUsed(this.el, "logo") && (h("div", { class: "footer-logo" }, h("slot", { name: "logo" }))), (isSlotUsed(this.el, "caption") || caption) && (h("div", { class: "footer-caption" }, h("ic-typography", { variant: this.deviceSize <= IC_DEVICE_SIZES.M
+        ? "caption"
+        : "body" }, h("slot", { name: "caption" }, caption)))), copyright && (h("div", { class: {
         ["footer-copyright"]: true,
         ["classification-spacing"]: hasClassificationBanner(),
       } }, h("ic-typography", { variant: this.deviceSize <= IC_DEVICE_SIZES.M
@@ -91,23 +93,6 @@ export class Footer {
   }
   static get properties() {
     return {
-      "description": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The description displayed at the top of the footer."
-        },
-        "attribute": "description",
-        "reflect": false
-      },
       "aligned": {
         "type": "string",
         "mutable": false,
@@ -154,7 +139,24 @@ export class Footer {
         "reflect": false,
         "defaultValue": "\"medium\""
       },
-      "groupLinks": {
+      "caption": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The caption displayed at the bottom of the footer."
+        },
+        "attribute": "caption",
+        "reflect": false
+      },
+      "copyright": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -163,16 +165,16 @@ export class Footer {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the footer will be set up to handle link groups instead of standalone links."
+          "text": "If `true`, the footer will display the crown copyright at the bottom."
         },
-        "attribute": "group-links",
+        "attribute": "copyright",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "true"
       },
-      "caption": {
+      "description": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -184,12 +186,12 @@ export class Footer {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The caption displayed at the bottom of the footer."
+          "text": "The description displayed at the top of the footer."
         },
-        "attribute": "caption",
+        "attribute": "description",
         "reflect": false
       },
-      "copyright": {
+      "groupLinks": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -198,14 +200,14 @@ export class Footer {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the footer will display the crown copyright at the bottom."
+          "text": "If `true`, the footer will be set up to handle link groups instead of standalone links."
         },
-        "attribute": "copyright",
+        "attribute": "group-links",
         "reflect": false,
-        "defaultValue": "true"
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/ic-footer/ic-footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-footer.js","sourceRoot":"","sources":["../../../src/components/ic-footer/ic-footer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  h,\n  Host,\n  Listen,\n} from \"@stencil/core\";\nimport { IC_DEVICE_SIZES } from \"../../utils/constants\";\nimport {\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  checkResizeObserver,\n  hasClassificationBanner,\n} from \"../../utils/helpers\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcFooterBreakpoints } from \"./ic-footer.types\";\n\n/**\n * @slot description - Content will be rendered at the top of the footer.\n * @slot link - Content will be rendered between description and logos.\n * @slot logo - Content will be rendered underneath footer links.\n * @slot caption - Content will be rendered above Crown Copyright.\n */\n\n@Component({\n  tag: \"ic-footer\",\n  styleUrl: \"ic-footer.css\",\n  shadow: true,\n})\nexport class Footer {\n  @Element() el: HTMLIcFooterElement;\n\n  /**\n   *  @internal Triggers on page resize and triggers style changes in footer links and link groups\n   */\n  @Event() footerResized: EventEmitter<void>;\n\n  /**\n   * The description displayed at the top of the footer.\n   */\n  @Prop() description: string;\n\n  /**\n   * The alignment of the section containers used within the footer.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * The screen size breakpoint at which to switch to the small layout.\n   */\n  @Prop() breakpoint?: IcFooterBreakpoints = \"medium\";\n\n  /**\n   * If `true`, the footer will be set up to handle link groups instead of standalone links.\n   */\n  @Prop() groupLinks?: boolean = false;\n\n  /**\n   * The caption displayed at the bottom of the footer.\n   */\n  @Prop() caption: string;\n\n  /**\n   * If `true`, the footer will display the crown copyright at the bottom.\n   */\n  @Prop() copyright: boolean = true;\n\n  @State() deviceSize: number = IC_DEVICE_SIZES.XL;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  private isSmall() {\n    const bp = this.breakpoint;\n\n    return bp === \"extra small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XS\n      : bp === \"small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.S\n      : bp === \"medium\"\n      ? this.deviceSize < IC_DEVICE_SIZES.M\n      : bp === \"large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.L\n      : bp === \"extra large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XL\n      : false;\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private resizeObserver: ResizeObserver;\n  private footerEl: HTMLElement;\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n    }\n    this.footerResized.emit();\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.footerEl);\n  };\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver.disconnect();\n  }\n\n  render() {\n    const {\n      aligned,\n      caption,\n      copyright,\n      description,\n      groupLinks,\n      foregroundColor,\n    } = this;\n    const small = this.isSmall();\n\n    return (\n      <Host\n        class={{\n          footer: true,\n          [`footer-${small ? \"small\" : \"sparse\"}`]: true,\n          [`footer-${groupLinks ? \"grouped\" : \"ungrouped\"}`]: true,\n          [`footer-${foregroundColor}`]: true,\n          // Slots will be able to infer their own color\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [IcThemeForegroundEnum.Light]:\n            foregroundColor === IcThemeForegroundEnum.Light,\n        }}\n      >\n        <footer ref={(footerEl) => (this.footerEl = footerEl)}>\n          {/* Description */}\n          <div class=\"footer-description\">\n            <ic-section-container aligned={aligned} fullHeight={true}>\n              <div class=\"footer-description-inner\">\n                <ic-typography variant=\"body\">\n                  <slot name=\"description\">{description}</slot>\n                </ic-typography>\n              </div>\n            </ic-section-container>\n          </div>\n\n          {/* Links */}\n          <div class=\"footer-links\">\n            {groupLinks && small ? (\n              <div class=\"footer-links-inner\">\n                <slot name=\"link\" />\n              </div>\n            ) : (\n              <ic-section-container fullHeight aligned={aligned}>\n                <div class=\"footer-links-inner\">\n                  <slot name=\"link\" />\n                </div>\n              </ic-section-container>\n            )}\n          </div>\n\n          {/* Compliance (logo, caption, copyright) */}\n          <div class=\"footer-compliance\">\n            <ic-section-container aligned={aligned} fullHeight={true}>\n              <div class=\"footer-compliance-inner\">\n                <div class=\"footer-logo\">\n                  {/* Logo */}\n                  <slot name=\"logo\" />\n                </div>\n                <div class=\"footer-caption\">\n                  <ic-typography\n                    variant={\n                      this.deviceSize <= IC_DEVICE_SIZES.M ? \"caption\" : \"body\"\n                    }\n                  >\n                    <slot name=\"caption\">{caption}</slot>\n                  </ic-typography>\n                </div>\n                {copyright && (\n                  <div\n                    class={{\n                      [\"footer-copyright\"]: true,\n                      [\"classification-spacing\"]: hasClassificationBanner(),\n                    }}\n                  >\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption-uppercase\"\n                          : \"label-uppercase\"\n                      }\n                    >\n                      &copy; Crown Copyright\n                    </ic-typography>\n                  </div>\n                )}\n              </div>\n            </ic-section-container>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-footer.js","sourceRoot":"","sources":["../../../src/components/ic-footer/ic-footer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  h,\n  Host,\n  Listen,\n} from \"@stencil/core\";\nimport { IC_DEVICE_SIZES } from \"../../utils/constants\";\nimport {\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  checkResizeObserver,\n  hasClassificationBanner,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcFooterBreakpoints } from \"./ic-footer.types\";\n\n/**\n * @slot description - Content will be rendered at the top of the footer.\n * @slot link - Content will be rendered between description and logos.\n * @slot logo - Content will be rendered underneath footer links.\n * @slot caption - Content will be rendered above Crown Copyright.\n */\n\n@Component({\n  tag: \"ic-footer\",\n  styleUrl: \"ic-footer.css\",\n  shadow: true,\n})\nexport class Footer {\n  private footerEl: HTMLElement;\n  private resizeObserver: ResizeObserver;\n\n  @Element() el: HTMLIcFooterElement;\n\n  @State() deviceSize: number = IC_DEVICE_SIZES.XL;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  /**\n   * The alignment of the section containers used within the footer.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * The screen size breakpoint at which to switch to the small layout.\n   */\n  @Prop() breakpoint?: IcFooterBreakpoints = \"medium\";\n\n  /**\n   * The caption displayed at the bottom of the footer.\n   */\n  @Prop() caption: string;\n\n  /**\n   * If `true`, the footer will display the crown copyright at the bottom.\n   */\n  @Prop() copyright: boolean = true;\n\n  /**\n   * The description displayed at the top of the footer.\n   */\n  @Prop() description: string;\n\n  /**\n   * If `true`, the footer will be set up to handle link groups instead of standalone links.\n   */\n  @Prop() groupLinks?: boolean = false;\n\n  /**\n   *  @internal Triggers on page resize and triggers style changes in footer links and link groups\n   */\n  @Event() footerResized: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    this.resizeObserver.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private isSmall() {\n    const bp = this.breakpoint;\n\n    return bp === \"extra small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XS\n      : bp === \"small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.S\n      : bp === \"medium\"\n      ? this.deviceSize < IC_DEVICE_SIZES.M\n      : bp === \"large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.L\n      : bp === \"extra large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XL\n      : false;\n  }\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n    }\n    this.footerResized.emit();\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.footerEl);\n  };\n\n  render() {\n    const {\n      aligned,\n      caption,\n      copyright,\n      description,\n      groupLinks,\n      foregroundColor,\n    } = this;\n    const small = this.isSmall();\n\n    return (\n      <Host\n        class={{\n          footer: true,\n          [`footer-${small ? \"small\" : \"sparse\"}`]: true,\n          [`footer-${groupLinks ? \"grouped\" : \"ungrouped\"}`]: true,\n          [`footer-${foregroundColor}`]: true,\n          // Slots will be able to infer their own color\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [IcThemeForegroundEnum.Light]:\n            foregroundColor === IcThemeForegroundEnum.Light,\n        }}\n      >\n        <footer ref={(footerEl) => (this.footerEl = footerEl)}>\n          {/* Description */}\n          <div class=\"footer-description\">\n            <ic-section-container aligned={aligned} fullHeight={true}>\n              <div class=\"footer-description-inner\">\n                <ic-typography variant=\"body\">\n                  <slot name=\"description\">{description}</slot>\n                </ic-typography>\n              </div>\n            </ic-section-container>\n          </div>\n\n          {/* Links */}\n          {isSlotUsed(this.el, \"link\") && (\n            <div class=\"footer-links\">\n              {groupLinks && small ? (\n                <div class=\"footer-links-inner\">\n                  <slot name=\"link\" />\n                </div>\n              ) : (\n                <ic-section-container fullHeight aligned={aligned}>\n                  <div class=\"footer-links-inner\">\n                    <slot name=\"link\" />\n                  </div>\n                </ic-section-container>\n              )}\n            </div>\n          )}\n\n          {/* Compliance (logo, caption, copyright) */}\n          <div class=\"footer-compliance\">\n            <ic-section-container aligned={aligned} fullHeight={true}>\n              <div class=\"footer-compliance-inner\">\n                {isSlotUsed(this.el, \"logo\") && (\n                  <div class=\"footer-logo\">\n                    {/* Logo */}\n                    <slot name=\"logo\" />\n                  </div>\n                )}\n                {(isSlotUsed(this.el, \"caption\") || caption) && (\n                  <div class=\"footer-caption\">\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption\"\n                          : \"body\"\n                      }\n                    >\n                      <slot name=\"caption\">{caption}</slot>\n                    </ic-typography>\n                  </div>\n                )}\n                {copyright && (\n                  <div\n                    class={{\n                      [\"footer-copyright\"]: true,\n                      [\"classification-spacing\"]: hasClassificationBanner(),\n                    }}\n                  >\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption-uppercase\"\n                          : \"label-uppercase\"\n                      }\n                    >\n                      &copy; Crown Copyright\n                    </ic-typography>\n                  </div>\n                )}\n              </div>\n            </ic-section-container>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-footer/{ic-footer.test.a11y.js → test/a11y/ic-footer.test.a11y.js}

@@ -1,6 +1,6 @@
 import { fixture } from "@open-wc/testing-helpers";
 import { axe } from "jest-axe";
-import { checkShadowElementRendersCorrectly } from "../../utils/testa11y.helpers";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
 beforeEach(() => {
   // IntersectionObserver isn't available in test environment
   const mockResizeObserver = jest.fn();

package/dist/collection/components/ic-footer/test/a11y/ic-footer.test.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-footer.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-footer/test/a11y/ic-footer.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,UAAU,CAAC,GAAG,EAAE;EACd,2DAA2D;EAC3D,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;EACrC,kBAAkB,CAAC,eAAe,CAAC;IACjC,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IACxC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IAC1C,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;GAC5C,CAAC,CAAC;EACH,MAAM,CAAC,cAAc,GAAG,kBAAkB,CAAC;AAC7C,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EACzB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,yBAAyB,CAAC,CAAC;IACpD,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\nbeforeEach(() => {\n  // IntersectionObserver isn't available in test environment\n  const mockResizeObserver = jest.fn();\n  mockResizeObserver.mockReturnValue({\n    observe: jest.fn().mockReturnValue(null),\n    unobserve: jest.fn().mockReturnValue(null),\n    disconnect: jest.fn().mockReturnValue(null),\n  });\n  window.ResizeObserver = mockResizeObserver;\n});\n\ndescribe(\"ic-footer\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`<ic-footer></ic-footer>`);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-footer/test/basic/ic-footer.e2e.js

@@ -0,0 +1,50 @@
+import { newE2EPage } from "@stencil/core/testing";
+const pageWidth = 700;
+const pageHeight = 600;
+describe("ic-footer", () => {
+  it("renders", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-footer description="Description">
+            <ic-footer-link-group slot="link" group-title="Link group 1">
+                <ic-footer-link href="/">Link 1</ic-footer-link>
+                <ic-footer-link href="/">Link 2</ic-footer-link>
+            </ic-footer-link-group>
+            <ic-footer-link-group slot="link" group-title="Link group 2">
+                <ic-footer-link href="/">Link 1</ic-footer-link>
+                <ic-footer-link href="/">Link 2</ic-footer-link>
+            </ic-footer-link-group>
+        </ic-footer>`);
+    const element = await page.find("ic-footer");
+    expect(element).toHaveClass("hydrated");
+  });
+  it("should toggle the link groups when clicked", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-footer description="Description">
+            <ic-footer-link-group slot="link" group-title="Link group 1">
+                <ic-footer-link href="/">Link 1</ic-footer-link>
+                <ic-footer-link href="/">Link 2</ic-footer-link>
+            </ic-footer-link-group>
+            <ic-footer-link-group slot="link" group-title="Link group 2">
+                <ic-footer-link href="/">Link 1</ic-footer-link>
+                <ic-footer-link href="/">Link 2</ic-footer-link>
+            </ic-footer-link-group>
+        </ic-footer>`);
+    await page.setViewport({
+      width: pageWidth,
+      height: pageHeight,
+    });
+    await page.waitForChanges();
+    const element = await page.find("ic-footer");
+    let dropdownListLinks = await page.find("ic-footer-link-group >>> .footer-link-group-links");
+    expect(element).not.toBeNull();
+    expect(dropdownListLinks).toBeNull();
+    await page.evaluate(() => {
+      const footerLinkGroup = document.querySelector("ic-footer-link-group");
+      footerLinkGroup.click();
+    });
+    await page.waitForChanges();
+    dropdownListLinks = await page.find("ic-footer-link-group >>> .footer-link-group-links");
+    expect(dropdownListLinks).not.toBeNull();
+  });
+});
+//# sourceMappingURL=ic-footer.e2e.js.map

package/dist/collection/components/ic-footer/test/basic/ic-footer.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-footer.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-footer/test/basic/ic-footer.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,MAAM,SAAS,GAAG,GAAG,CAAC;AACtB,MAAM,UAAU,GAAG,GAAG,CAAC;AAEvB,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EACzB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB;;;;;;;;;qBASe,CAChB,CAAC;IAEF,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAE7C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;IAC1D,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB;;;;;;;;;qBASe,CAChB,CAAC;IAEF,MAAM,IAAI,CAAC,WAAW,CAAC;MACrB,KAAK,EAAE,SAAS;MAChB,MAAM,EAAE,UAAU;KACnB,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7C,IAAI,iBAAiB,GAAG,MAAM,IAAI,CAAC,IAAI,CACrC,mDAAmD,CACpD,CAAC;IAEF,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAC/B,MAAM,CAAC,iBAAiB,CAAC,CAAC,QAAQ,EAAE,CAAC;IAErC,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MACvB,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;MACvE,eAAe,CAAC,KAAK,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,iBAAiB,GAAG,MAAM,IAAI,CAAC,IAAI,CACjC,mDAAmD,CACpD,CAAC;IAEF,MAAM,CAAC,iBAAiB,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;EAC3C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\nconst pageWidth = 700;\nconst pageHeight = 600;\n\ndescribe(\"ic-footer\", () => {\n  it(\"renders\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-footer description=\"Description\">\n            <ic-footer-link-group slot=\"link\" group-title=\"Link group 1\">\n                <ic-footer-link href=\"/\">Link 1</ic-footer-link>\n                <ic-footer-link href=\"/\">Link 2</ic-footer-link>\n            </ic-footer-link-group>\n            <ic-footer-link-group slot=\"link\" group-title=\"Link group 2\">\n                <ic-footer-link href=\"/\">Link 1</ic-footer-link>\n                <ic-footer-link href=\"/\">Link 2</ic-footer-link>\n            </ic-footer-link-group>\n        </ic-footer>`\n    );\n\n    const element = await page.find(\"ic-footer\");\n\n    expect(element).toHaveClass(\"hydrated\");\n  });\n\n  it(\"should toggle the link groups when clicked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-footer description=\"Description\">\n            <ic-footer-link-group slot=\"link\" group-title=\"Link group 1\">\n                <ic-footer-link href=\"/\">Link 1</ic-footer-link>\n                <ic-footer-link href=\"/\">Link 2</ic-footer-link>\n            </ic-footer-link-group>\n            <ic-footer-link-group slot=\"link\" group-title=\"Link group 2\">\n                <ic-footer-link href=\"/\">Link 1</ic-footer-link>\n                <ic-footer-link href=\"/\">Link 2</ic-footer-link>\n            </ic-footer-link-group>\n        </ic-footer>`\n    );\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    await page.waitForChanges();\n\n    const element = await page.find(\"ic-footer\");\n    let dropdownListLinks = await page.find(\n      \"ic-footer-link-group >>> .footer-link-group-links\"\n    );\n\n    expect(element).not.toBeNull();\n    expect(dropdownListLinks).toBeNull();\n\n    await page.evaluate(() => {\n      const footerLinkGroup = document.querySelector(\"ic-footer-link-group\");\n      footerLinkGroup.click();\n    });\n\n    await page.waitForChanges();\n\n    dropdownListLinks = await page.find(\n      \"ic-footer-link-group >>> .footer-link-group-links\"\n    );\n\n    expect(dropdownListLinks).not.toBeNull();\n  });\n});\n"]}

package/dist/collection/components/ic-footer/test/basic/ic-footer.spec.js

@@ -0,0 +1,140 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Typography } from "../../../ic-typography/ic-typography";
+import { Footer } from "../../ic-footer";
+import { DEVICE_SIZES } from "../../../../utils/helpers";
+describe("ic-footer", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [Footer],
+      html: `<ic-footer></ic-footer>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render with a description via the description slot", async () => {
+    const page = await newSpecPage({
+      components: [Footer, Typography],
+      html: `<ic-footer><ic-typography slot="description">This is a footer</ic-typography></ic-footer>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render with a caption via the caption prop", async () => {
+    const page = await newSpecPage({
+      components: [Footer],
+      html: `<ic-footer description="This is a footer" caption="Made by ICDS"></ic-footer>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render with a caption via the caption slot", async () => {
+    const page = await newSpecPage({
+      components: [Footer],
+      html: `<ic-footer description="This is a footer"><ic-typography slot="caption">Made by ICDS</ic-typography></ic-footer>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render without the copyright text when the copyright prop is false", async () => {
+    const page = await newSpecPage({
+      components: [Footer],
+      html: `<ic-footer description="This is a footer" copyright=false><ic-typography slot="caption">Made by ICDS</ic-typography></ic-footer>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render with links", async () => {
+    const page = await newSpecPage({
+      components: [Footer],
+      html: `
+            <ic-footer description="This is a footer" caption="Made by ICDS">
+                <ic-footer-link href="/" slot="link">Link</ic-footer-link>
+                <ic-footer-link href="/" slot="link">Link</ic-footer-link>
+            </ic-footer>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render with link groups", async () => {
+    const page = await newSpecPage({
+      components: [Footer],
+      html: `
+            <ic-footer description="This is a footer" caption="Made by ICDS">
+                <ic-footer-link-group group-title="Links" slot="link">
+                    <ic-footer-link href="/">Link</ic-footer-link>
+                    <ic-footer-link href="/">Link</ic-footer-link>
+                </ic-footer-link-group>
+            </ic-footer>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render with classification banner", async () => {
+    const page = await newSpecPage({
+      components: [Footer],
+      html: `<ic-classification-banner></ic-classification-banner><ic-footer></ic-footer>`,
+    });
+    expect(page.root).toMatchSnapshot("footer-classification-banner");
+  });
+  it("should update foreground colour when the theme is updated", async () => {
+    const page = await newSpecPage({
+      components: [Footer],
+      html: "<div><ic-footer id='ic-footer'></ic-footer></div>",
+    });
+    await page.rootInstance.themeChangeHandler({ detail: { mode: "light" } });
+    expect(page.rootInstance.foregroundColor).toBe("light");
+  });
+  it("should update when resized", async () => {
+    const page = await newSpecPage({
+      components: [Footer],
+      html: "<div><ic-footer id='ic-footer' caption='caption'></ic-footer></div>",
+    });
+    await page.rootInstance.runResizeObserver();
+    await page.waitForChanges();
+    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);
+    await page.waitForChanges();
+    expect(page.root.shadowRoot
+      .querySelector(".footer-caption")
+      .firstElementChild.getAttribute("variant")).toBe("body");
+    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XS);
+    await page.waitForChanges();
+    expect(page.root.shadowRoot
+      .querySelector(".footer-caption")
+      .firstElementChild.getAttribute("variant")).toBe("caption");
+    await page.rootInstance.disconnectedCallback();
+  });
+  it("should render with the correct small breakpoint at extra small device size", async () => {
+    const page = await newSpecPage({
+      components: [Footer],
+      html: "<div><ic-footer id='ic-footer' caption='caption' breakpoint='extra small'></ic-footer></div>",
+    });
+    expect(page.root).not.toBeNull;
+    expect(page.root).toMatchSnapshot("footer-xs-breakpoint");
+  });
+  it("should render with the correct small breakpoint at small device size", async () => {
+    const page = await newSpecPage({
+      components: [Footer],
+      html: "<div><ic-footer id='ic-footer' caption='caption' breakpoint='small'></ic-footer></div>",
+    });
+    expect(page.root).not.toBeNull;
+    expect(page.root).toMatchSnapshot("footer-s-breakpoint");
+  });
+  it("should render with the correct small breakpoint at medium device size", async () => {
+    const page = await newSpecPage({
+      components: [Footer],
+      html: "<div><ic-footer id='ic-footer' caption='caption' breakpoint='medium'></ic-footer></div>",
+    });
+    expect(page.root).not.toBeNull;
+    expect(page.root).toMatchSnapshot("footer-m-breakpoint");
+  });
+  it("should render with the correct small breakpoint at large device size", async () => {
+    const page = await newSpecPage({
+      components: [Footer],
+      html: "<div><ic-footer id='ic-footer' caption='caption' breakpoint='large'></ic-footer></div>",
+    });
+    expect(page.root).not.toBeNull;
+    expect(page.root).toMatchSnapshot("footer-l-breakpoint");
+  });
+  it("should render with the correct small breakpoint at extra large device size", async () => {
+    const page = await newSpecPage({
+      components: [Footer],
+      html: "<div><ic-footer id='ic-footer' caption='caption' breakpoint='extra large'></ic-footer></div>",
+    });
+    expect(page.root).not.toBeNull;
+    expect(page.root).toMatchSnapshot("footer-xl-breakpoint");
+  });
+});
+//# sourceMappingURL=ic-footer.spec.js.map

package/dist/collection/components/ic-footer/test/basic/ic-footer.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-footer.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-footer/test/basic/ic-footer.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EACzB,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;MACpB,IAAI,EAAE,yBAAyB;KAChC,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACtC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;IACzE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC;MAChC,IAAI,EAAE,2FAA2F;KAClG,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACtC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;IACjE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;MACpB,IAAI,EAAE,+EAA+E;KACtF,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACtC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;IACjE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;MACpB,IAAI,EAAE,kHAAkH;KACzH,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACtC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2EAA2E,EAAE,KAAK,IAAI,EAAE;IACzF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;MACpB,IAAI,EAAE,kIAAkI;KACzI,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACtC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;IACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;MACpB,IAAI,EAAE;;;;yBAIa;KACpB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACtC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;MACpB,IAAI,EAAE;;;;;;yBAMa;KACpB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACtC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;IACxD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;MACpB,IAAI,EAAE,8EAA8E;KACrF,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,8BAA8B,CAAC,CAAC;EACpE,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;IACzE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;MACpB,IAAI,EAAE,mDAAmD;KAC1D,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC;IAE1E,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;EAC1D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;IAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;MACpB,IAAI,EAAE,qEAAqE;KAC5E,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,YAAY,CAAC,iBAAiB,EAAE,CAAC;IAC5C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,IAAI,CAAC,YAAY,CAAC,sBAAsB,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAChE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CACJ,IAAI,CAAC,IAAI,CAAC,UAAU;OACjB,aAAa,CAAC,iBAAiB,CAAC;OAChC,iBAAiB,CAAC,YAAY,CAAC,SAAS,CAAC,CAC7C,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAEf,MAAM,IAAI,CAAC,YAAY,CAAC,sBAAsB,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAChE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CACJ,IAAI,CAAC,IAAI,CAAC,UAAU;OACjB,aAAa,CAAC,iBAAiB,CAAC;OAChC,iBAAiB,CAAC,YAAY,CAAC,SAAS,CAAC,CAC7C,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAElB,MAAM,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,CAAC;EACjD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4EAA4E,EAAE,KAAK,IAAI,EAAE;IAC1F,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;MACpB,IAAI,EAAE,8FAA8F;KACrG,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC;IAE/B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,sBAAsB,CAAC,CAAC;EAC5D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sEAAsE,EAAE,KAAK,IAAI,EAAE;IACpF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;MACpB,IAAI,EAAE,wFAAwF;KAC/F,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC;IAE/B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;EAC3D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,uEAAuE,EAAE,KAAK,IAAI,EAAE;IACrF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;MACpB,IAAI,EAAE,yFAAyF;KAChG,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC;IAE/B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;EAC3D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sEAAsE,EAAE,KAAK,IAAI,EAAE;IACpF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;MACpB,IAAI,EAAE,wFAAwF;KAC/F,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC;IAE/B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;EAC3D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4EAA4E,EAAE,KAAK,IAAI,EAAE;IAC1F,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;MACpB,IAAI,EAAE,8FAA8F;KACrG,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC;IAE/B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,sBAAsB,CAAC,CAAC;EAC5D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Typography } from \"../../../ic-typography/ic-typography\";\nimport { Footer } from \"../../ic-footer\";\nimport { DEVICE_SIZES } from \"../../../../utils/helpers\";\n\ndescribe(\"ic-footer\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: `<ic-footer></ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a description via the description slot\", async () => {\n    const page = await newSpecPage({\n      components: [Footer, Typography],\n      html: `<ic-footer><ic-typography slot=\"description\">This is a footer</ic-typography></ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a caption via the caption prop\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: `<ic-footer description=\"This is a footer\" caption=\"Made by ICDS\"></ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a caption via the caption slot\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: `<ic-footer description=\"This is a footer\"><ic-typography slot=\"caption\">Made by ICDS</ic-typography></ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render without the copyright text when the copyright prop is false\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: `<ic-footer description=\"This is a footer\" copyright=false><ic-typography slot=\"caption\">Made by ICDS</ic-typography></ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with links\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: `\n            <ic-footer description=\"This is a footer\" caption=\"Made by ICDS\">\n                <ic-footer-link href=\"/\" slot=\"link\">Link</ic-footer-link>\n                <ic-footer-link href=\"/\" slot=\"link\">Link</ic-footer-link>\n            </ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with link groups\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: `\n            <ic-footer description=\"This is a footer\" caption=\"Made by ICDS\">\n                <ic-footer-link-group group-title=\"Links\" slot=\"link\">\n                    <ic-footer-link href=\"/\">Link</ic-footer-link>\n                    <ic-footer-link href=\"/\">Link</ic-footer-link>\n                </ic-footer-link-group>\n            </ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with classification banner\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: `<ic-classification-banner></ic-classification-banner><ic-footer></ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"footer-classification-banner\");\n  });\n\n  it(\"should update foreground colour when the theme is updated\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: \"<div><ic-footer id='ic-footer'></ic-footer></div>\",\n    });\n\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"light\" } });\n\n    expect(page.rootInstance.foregroundColor).toBe(\"light\");\n  });\n\n  it(\"should update when resized\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: \"<div><ic-footer id='ic-footer' caption='caption'></ic-footer></div>\",\n    });\n\n    await page.rootInstance.runResizeObserver();\n    await page.waitForChanges();\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);\n    await page.waitForChanges();\n\n    expect(\n      page.root.shadowRoot\n        .querySelector(\".footer-caption\")\n        .firstElementChild.getAttribute(\"variant\")\n    ).toBe(\"body\");\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XS);\n    await page.waitForChanges();\n\n    expect(\n      page.root.shadowRoot\n        .querySelector(\".footer-caption\")\n        .firstElementChild.getAttribute(\"variant\")\n    ).toBe(\"caption\");\n\n    await page.rootInstance.disconnectedCallback();\n  });\n\n  it(\"should render with the correct small breakpoint at extra small device size\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: \"<div><ic-footer id='ic-footer' caption='caption' breakpoint='extra small'></ic-footer></div>\",\n    });\n\n    expect(page.root).not.toBeNull;\n\n    expect(page.root).toMatchSnapshot(\"footer-xs-breakpoint\");\n  });\n\n  it(\"should render with the correct small breakpoint at small device size\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: \"<div><ic-footer id='ic-footer' caption='caption' breakpoint='small'></ic-footer></div>\",\n    });\n\n    expect(page.root).not.toBeNull;\n\n    expect(page.root).toMatchSnapshot(\"footer-s-breakpoint\");\n  });\n\n  it(\"should render with the correct small breakpoint at medium device size\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: \"<div><ic-footer id='ic-footer' caption='caption' breakpoint='medium'></ic-footer></div>\",\n    });\n\n    expect(page.root).not.toBeNull;\n\n    expect(page.root).toMatchSnapshot(\"footer-m-breakpoint\");\n  });\n\n  it(\"should render with the correct small breakpoint at large device size\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: \"<div><ic-footer id='ic-footer' caption='caption' breakpoint='large'></ic-footer></div>\",\n    });\n\n    expect(page.root).not.toBeNull;\n\n    expect(page.root).toMatchSnapshot(\"footer-l-breakpoint\");\n  });\n\n  it(\"should render with the correct small breakpoint at extra large device size\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: \"<div><ic-footer id='ic-footer' caption='caption' breakpoint='extra large'></ic-footer></div>\",\n    });\n\n    expect(page.root).not.toBeNull;\n\n    expect(page.root).toMatchSnapshot(\"footer-xl-breakpoint\");\n  });\n});\n"]}

package/dist/collection/components/ic-footer-link/ic-footer-link.css

@@ -475,7 +475,8 @@ video {
 
 :host(.footer-link) a,
 :host(.footer-link) a ::slotted(a) {
-  display: block;
+  display: flex;
+  align-items: flex-end;
   font-weight: var(--ic-font-weight-bold);
   color: inherit;
   width: -moz-fit-content;
@@ -521,9 +522,22 @@ a:link:visited > ::slotted(svg) {
 :host(.footer-link) a:link:focus,
 :host(.footer-link) a ::slotted(a:link:hover),
 :host(.footer-link) a ::slotted(a:link:focus) {
-  text-decoration-line: underline;
-  text-decoration-thickness: 25%;
-  text-underline-offset: 25%;
+  border-bottom: 0.25rem solid !important;
+  margin-bottom: -0.25rem !important;
+  text-decoration: none;
+}
+
+@supports (text-decoration-thickness: 25%) {
+  :host(.footer-link) a:link:hover,
+  :host(.footer-link) a:link:focus,
+  :host(.footer-link) a ::slotted(a:link:hover),
+  :host(.footer-link) a ::slotted(a:link:focus) {
+    text-decoration-line: underline;
+    text-decoration-thickness: 25%;
+    text-underline-offset: 25%;
+    border-bottom: 0 !important;
+    margin-bottom: 0 !important;
+  }
 }
 
 :host(.footer-link) a:link:hover,
@@ -566,6 +580,24 @@ a:link:visited > ::slotted(svg) {
   text-decoration: none;
 }
 
+.open-in-new-icon {
+  padding-left: var(--ic-space-xxs);
+}
+
+.open-in-new-icon,
+.open-in-new-icon svg {
+  height: var(--ic-space-md);
+  width: var(--ic-space-md);
+}
+
+:host(.footer-link-light) .open-in-new-icon svg {
+  fill: var(--ic-architectural-white);
+}
+
+:host(.footer-link-dark) .open-in-new-icon svg {
+  fill: var(--ic-architectural-black);
+}
+
 @media screen and (min-width: 769px) {
   :host(.footer-link.footer-link-ungrouped-sparse:last-of-type) {
     margin-right: 0;