@ukic/web-components 2.1.0-beta.15 → 2.1.0-beta.17

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

@@ -0,0 +1,62 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { FooterLink } from "../../ic-footer-link";
+describe("ic-footer-link", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [FooterLink],
+      html: `<ic-footer-link href="/">Link</ic-footer-link>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-footer-link class="footer-link footer-link-light footer-link-ungrouped-sparse" href="/">
+        <mock:shadow-root>
+            <a href="/">
+                <slot></slot>
+            </a>
+        </mock:shadow-root>
+            Link
+    </ic-footer-link>`);
+  });
+  it("should render small with grouped links", async () => {
+    const page = await newSpecPage({
+      components: [FooterLink],
+      html: `<ic-footer-link href="/">Link</ic-footer-link>`,
+    });
+    page.rootInstance.footerConfig = { small: true, grouped: true };
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+        <ic-footer-link class="footer-link footer-link-light footer-link-grouped-small" href="/">
+            <mock:shadow-root>
+                <a href="/">
+                    <slot></slot>
+                </a>
+            </mock:shadow-root>
+                Link
+        </ic-footer-link>`);
+  });
+  it("should set foregroundColor on theme change", async () => {
+    const page = await newSpecPage({
+      components: [FooterLink],
+      html: `<ic-footer-link label="button1" onclick="alert('test')">
+      </ic-footer-link>`,
+    });
+    await page.rootInstance.footerThemeChangeHandler({
+      detail: { mode: "light" },
+    });
+    await page.waitForChanges();
+    expect(page.rootInstance.foregroundColor).toEqual("light");
+  });
+  it("should test footer resize handler", async () => {
+    const page = await newSpecPage({
+      components: [FooterLink],
+      html: `<ic-footer-link label="button1" onclick="alert('test')">
+      </ic-footer-link>`,
+    });
+    await page.rootInstance.footerResizeHandler();
+    await page.waitForChanges();
+    expect(page.rootInstance.footerConfig).toStrictEqual({
+      grouped: false,
+      small: false,
+    });
+  });
+});
+//# sourceMappingURL=ic-footer-link.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-footer-link.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-footer-link/test/basic/ic-footer-link.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,gDAAgD;KACvD,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;sBAQZ,CAAC,CAAC;EACtB,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;IACtD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,gDAAgD;KACvD,CAAC,CAAC;IAEH,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IAChE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;0BAQR,CAAC,CAAC;EAC1B,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;IAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;wBACY;KACnB,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,YAAY,CAAC,wBAAwB,CAAC;MAC/C,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC1B,CAAC,CAAC;IACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;EAC7D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;IACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;wBACY;KACnB,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAAE,CAAC;IAC9C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,aAAa,CAAC;MACnD,OAAO,EAAE,KAAK;MACd,KAAK,EAAE,KAAK;KACb,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { FooterLink } from \"../../ic-footer-link\";\n\ndescribe(\"ic-footer-link\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [FooterLink],\n      html: `<ic-footer-link href=\"/\">Link</ic-footer-link>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-footer-link class=\"footer-link footer-link-light footer-link-ungrouped-sparse\" href=\"/\">\n        <mock:shadow-root>\n            <a href=\"/\">\n                <slot></slot>\n            </a>\n        </mock:shadow-root>\n            Link\n    </ic-footer-link>`);\n  });\n\n  it(\"should render small with grouped links\", async () => {\n    const page = await newSpecPage({\n      components: [FooterLink],\n      html: `<ic-footer-link href=\"/\">Link</ic-footer-link>`,\n    });\n\n    page.rootInstance.footerConfig = { small: true, grouped: true };\n    await page.waitForChanges();\n\n    expect(page.root).toEqualHtml(`\n        <ic-footer-link class=\"footer-link footer-link-light footer-link-grouped-small\" href=\"/\">\n            <mock:shadow-root>\n                <a href=\"/\">\n                    <slot></slot>\n                </a>\n            </mock:shadow-root>\n                Link\n        </ic-footer-link>`);\n  });\n\n  it(\"should set foregroundColor on theme change\", async () => {\n    const page = await newSpecPage({\n      components: [FooterLink],\n      html: `<ic-footer-link label=\"button1\" onclick=\"alert('test')\">\n      </ic-footer-link>`,\n    });\n\n    await page.rootInstance.footerThemeChangeHandler({\n      detail: { mode: \"light\" },\n    });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.foregroundColor).toEqual(\"light\");\n  });\n\n  it(\"should test footer resize handler\", async () => {\n    const page = await newSpecPage({\n      components: [FooterLink],\n      html: `<ic-footer-link label=\"button1\" onclick=\"alert('test')\">\n      </ic-footer-link>`,\n    });\n\n    await page.rootInstance.footerResizeHandler();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.footerConfig).toStrictEqual({\n      grouped: false,\n      small: false,\n    });\n  });\n});\n"]}

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

@@ -10,11 +10,24 @@ export class FooterLinkGroup {
     this.toggleExpanded = () => {
       this.expanded = !this.expanded;
     };
-    this.groupTitle = undefined;
-    this.small = false;
     this.expanded = false;
-    this.dropdownIconStyle = getThemeForegroundColor();
     this.deviceSize = DEVICE_SIZES.XL;
+    this.dropdownIconStyle = getThemeForegroundColor();
+    this.small = false;
+    this.groupTitle = undefined;
+  }
+  componentWillLoad() {
+    this.small = this.isSmall(this.el);
+  }
+  componentDidLoad() {
+    onComponentRequiredPropUndefined([{ prop: this.groupTitle, propName: "group-title" }], "Footer Link Group");
+  }
+  footerResizeHandler() {
+    this.small = this.isSmall(this.el);
+  }
+  footerThemeChangeHandler(ev) {
+    const theme = ev.detail;
+    this.dropdownIconStyle = theme.mode;
   }
   isSmall(e) {
     if (e.parentElement !== null) {
@@ -29,19 +42,6 @@ export class FooterLinkGroup {
       return false;
     }
   }
-  footerResizeHandler() {
-    this.small = this.isSmall(this.el);
-  }
-  footerThemeChangeHandler(ev) {
-    const theme = ev.detail;
-    this.dropdownIconStyle = theme.mode;
-  }
-  componentWillLoad() {
-    this.small = this.isSmall(this.el);
-  }
-  componentDidLoad() {
-    onComponentRequiredPropUndefined([{ prop: this.groupTitle, propName: "group-title" }], "Footer Link Group");
-  }
   render() {
     const { small, groupTitle } = this;
     return !small ? (h(Host, { class: {
@@ -88,10 +88,10 @@ export class FooterLinkGroup {
   }
   static get states() {
     return {
-      "small": {},
       "expanded": {},
+      "deviceSize": {},
       "dropdownIconStyle": {},
-      "deviceSize": {}
+      "small": {}
     };
   }
   static get elementRef() { return "el"; }

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

@@ -1 +1 @@
-{"version":3,"file":"ic-footer-link-group.js","sourceRoot":"","sources":["../../../src/components/ic-footer-link-group/ic-footer-link-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  Element,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport {\n  DEVICE_SIZES,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcTheme } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-footer-link-group\",\n  styleUrl: \"ic-footer-link-group.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class FooterLinkGroup {\n  @Element() el: HTMLIcFooterLinkGroupElement;\n\n  /**\n   * The title of the link group to be displayed.\n   */\n  @Prop() groupTitle!: string;\n\n  @State() small: boolean = false;\n\n  @State() expanded: boolean = false;\n\n  @State() dropdownIconStyle = getThemeForegroundColor();\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  private isSmall(e: HTMLElement): boolean {\n    if (e.parentElement !== null) {\n      if (e.parentElement.classList.contains(\"footer\")) {\n        return e.parentElement.classList.contains(\"footer-small\");\n      } else {\n        return this.isSmall(e.parentElement);\n      }\n    } else {\n      return false;\n    }\n  }\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === \" \" || event.key === \"Enter\") {\n      this.toggleExpanded();\n    }\n  };\n\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n  };\n\n  @Listen(\"footerResized\", { target: \"document\" })\n  footerResizeHandler(): void {\n    this.small = this.isSmall(this.el);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  footerThemeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.dropdownIconStyle = theme.mode;\n  }\n\n  componentWillLoad(): void {\n    this.small = this.isSmall(this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.groupTitle, propName: \"group-title\" }],\n      \"Footer Link Group\"\n    );\n  }\n\n  render() {\n    const { small, groupTitle } = this;\n\n    return !small ? (\n      <Host\n        class={{\n          [\"footer-link-group footer-link-group-sparse\"]: true,\n          [`footer-link-group-${this.dropdownIconStyle}`]: true,\n        }}\n      >\n        <div class=\"footer-link-group-title\">\n          <ic-typography variant=\"subtitle-small\">{groupTitle}</ic-typography>\n        </div>\n        <div class=\"footer-link-group-links\">\n          <slot />\n        </div>\n      </Host>\n    ) : (\n      <Host\n        class={{\n          [\"footer-link-group footer-link-group-small\"]: true,\n          [`footer-link-group-${this.dropdownIconStyle}`]: true,\n        }}\n        tabIndex=\"1\"\n        onClick={this.toggleExpanded}\n        onKeydown={this.handleKeydown}\n        aria-haspopup=\"true\"\n        aria-expanded={this.expanded}\n      >\n        <ic-section-container fullHeight={true}>\n          <div class=\"footer-link-group-header\">\n            <div class=\"footer-link-group-title\">\n              <ic-typography variant=\"label\">{groupTitle}</ic-typography>\n            </div>\n            {this.expanded ? (\n              <svg\n                class=\"footer-link-group-toggle\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                role=\"img\"\n                width=\"1em\"\n                height=\"1em\"\n                preserveAspectRatio=\"xMidYMid meet\"\n                viewBox=\"0 0 1200 1200\"\n              >\n                <path\n                  fill=\"currentColor\"\n                  d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n                />\n              </svg>\n            ) : (\n              <svg\n                class=\"footer-link-group-toggle\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                role=\"img\"\n                width=\"1em\"\n                height=\"1em\"\n                preserveAspectRatio=\"xMidYMid meet\"\n                viewBox=\"0 0 1200 1200\"\n              >\n                <g transform=\"translate(0 1200) scale(1 -1)\">\n                  <path\n                    fill=\"currentColor\"\n                    d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n                  />\n                </g>\n              </svg>\n            )}\n          </div>\n          {this.expanded && (\n            <div class=\"footer-link-group-links\">\n              <slot />\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-footer-link-group.js","sourceRoot":"","sources":["../../../src/components/ic-footer-link-group/ic-footer-link-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  Element,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport {\n  DEVICE_SIZES,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcTheme } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-footer-link-group\",\n  styleUrl: \"ic-footer-link-group.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class FooterLinkGroup {\n  @Element() el: HTMLIcFooterLinkGroupElement;\n\n  @State() expanded: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() dropdownIconStyle = getThemeForegroundColor();\n  @State() small: boolean = false;\n\n  /**\n   * The title of the link group to be displayed.\n   */\n  @Prop() groupTitle!: string;\n\n  componentWillLoad(): void {\n    this.small = this.isSmall(this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.groupTitle, propName: \"group-title\" }],\n      \"Footer Link Group\"\n    );\n  }\n\n  @Listen(\"footerResized\", { target: \"document\" })\n  footerResizeHandler(): void {\n    this.small = this.isSmall(this.el);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  footerThemeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.dropdownIconStyle = theme.mode;\n  }\n\n  private isSmall(e: HTMLElement): boolean {\n    if (e.parentElement !== null) {\n      if (e.parentElement.classList.contains(\"footer\")) {\n        return e.parentElement.classList.contains(\"footer-small\");\n      } else {\n        return this.isSmall(e.parentElement);\n      }\n    } else {\n      return false;\n    }\n  }\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === \" \" || event.key === \"Enter\") {\n      this.toggleExpanded();\n    }\n  };\n\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n  };\n\n  render() {\n    const { small, groupTitle } = this;\n\n    return !small ? (\n      <Host\n        class={{\n          [\"footer-link-group footer-link-group-sparse\"]: true,\n          [`footer-link-group-${this.dropdownIconStyle}`]: true,\n        }}\n      >\n        <div class=\"footer-link-group-title\">\n          <ic-typography variant=\"subtitle-small\">{groupTitle}</ic-typography>\n        </div>\n        <div class=\"footer-link-group-links\">\n          <slot />\n        </div>\n      </Host>\n    ) : (\n      <Host\n        class={{\n          [\"footer-link-group footer-link-group-small\"]: true,\n          [`footer-link-group-${this.dropdownIconStyle}`]: true,\n        }}\n        tabIndex=\"1\"\n        onClick={this.toggleExpanded}\n        onKeydown={this.handleKeydown}\n        aria-haspopup=\"true\"\n        aria-expanded={this.expanded}\n      >\n        <ic-section-container fullHeight={true}>\n          <div class=\"footer-link-group-header\">\n            <div class=\"footer-link-group-title\">\n              <ic-typography variant=\"label\">{groupTitle}</ic-typography>\n            </div>\n            {this.expanded ? (\n              <svg\n                class=\"footer-link-group-toggle\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                role=\"img\"\n                width=\"1em\"\n                height=\"1em\"\n                preserveAspectRatio=\"xMidYMid meet\"\n                viewBox=\"0 0 1200 1200\"\n              >\n                <path\n                  fill=\"currentColor\"\n                  d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n                />\n              </svg>\n            ) : (\n              <svg\n                class=\"footer-link-group-toggle\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                role=\"img\"\n                width=\"1em\"\n                height=\"1em\"\n                preserveAspectRatio=\"xMidYMid meet\"\n                viewBox=\"0 0 1200 1200\"\n              >\n                <g transform=\"translate(0 1200) scale(1 -1)\">\n                  <path\n                    fill=\"currentColor\"\n                    d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n                  />\n                </g>\n              </svg>\n            )}\n          </div>\n          {this.expanded && (\n            <div class=\"footer-link-group-links\">\n              <slot />\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-footer-link-group/{ic-footer-link-group.test.a11y.js → test/a11y/ic-footer-link-group.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-link-group/test/a11y/ic-footer-link-group.test.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-footer-link-group.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-footer-link-group/test/a11y/ic-footer-link-group.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,sBAAsB,EAAE,GAAG,EAAE;EACpC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,gHAAgH,CACjH,CAAC;IACF,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-link-group\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      `<ic-footer-link-group group-title=\"A11y footer links\"><ic-footer-link></ic-footer-link></ic-footer-link-group>`\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

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

@@ -0,0 +1,98 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Footer } from "../../../ic-footer/ic-footer";
+import { FooterLinkGroup } from "../../ic-footer-link-group";
+import { FooterLink } from "../../../ic-footer-link/ic-footer-link";
+describe("ic-footer-link-group", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [FooterLinkGroup],
+      html: `<ic-footer-link-group group-title="Link group"></ic-footer-link-group>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-footer-link-group class="footer-link-group footer-link-group-light footer-link-group-sparse" group-title="Link group">
+        <mock:shadow-root>
+            <div class="footer-link-group-title">
+                <ic-typography variant="subtitle-small">
+                    Link group
+                </ic-typography>
+            </div>
+            <div class="footer-link-group-links">
+                <slot></slot>
+            </div>
+        </mock:shadow-root>
+    </ic-footer-link-group>`);
+  });
+  it("should render with links", async () => {
+    const page = await newSpecPage({
+      components: [FooterLinkGroup, FooterLink],
+      html: `<ic-footer-link-group group-title="Link group"><ic-footer-link href="/">Link</ic-footer-link></ic-footer-link-group>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-footer-link-group class="footer-link-group footer-link-group-light footer-link-group-sparse" group-title="Link group">
+        <mock:shadow-root>
+            <div class="footer-link-group-title">
+                <ic-typography variant="subtitle-small">
+                    Link group
+                </ic-typography>
+            </div>
+            <div class="footer-link-group-links">
+                <slot></slot>
+            </div>
+        </mock:shadow-root>
+        <ic-footer-link class="footer-link footer-link-light footer-link-ungrouped-sparse" href="/">
+            <mock:shadow-root>
+                <a href="/">
+                    <slot></slot>
+                </a>
+            </mock:shadow-root>
+            Link
+        </ic-footer-link>
+    </ic-footer-link-group>`);
+  });
+  it("should render within footer", async () => {
+    const page = await newSpecPage({
+      components: [Footer, FooterLinkGroup, FooterLink],
+      html: `<ic-footer><ic-footer-link-group group-title="Link group"><ic-footer-link href="/">Link</ic-footer-link></ic-footer-link-group><ic-footer>`,
+    });
+    expect(page.root).toMatchSnapshot("footer-link-group-in-footer");
+  });
+  it("should expand and collapse", async () => {
+    const page = await newSpecPage({
+      components: [Footer, FooterLinkGroup, FooterLink],
+      html: `<ic-footer-link-group group-title="Link group"><ic-footer-link href="/">Link</ic-footer-link></ic-footer-link-group>`,
+    });
+    expect(page.rootInstance.expanded).toBe(false);
+    const event = new KeyboardEvent("keydown", { key: "Enter" });
+    await page.rootInstance.handleKeydown(event);
+    expect(page.rootInstance.expanded).toBe(true);
+    await page.rootInstance.handleKeydown(event);
+    expect(page.rootInstance.expanded).toBe(false);
+  });
+  it("should check and set small state", async () => {
+    const page = await newSpecPage({
+      components: [Footer, FooterLinkGroup, FooterLink],
+      html: `<ic-footer-link-group group-title="Link group"><ic-footer-link href="/">Link</ic-footer-link></ic-footer-link-group>`,
+    });
+    await page.rootInstance.footerResizeHandler();
+    expect(page.rootInstance.small).toBe(false);
+  });
+  it("should update theme", async () => {
+    const page = await newSpecPage({
+      components: [Footer, FooterLinkGroup, FooterLink],
+      html: `<ic-footer-link-group group-title="Link group"><ic-footer-link href="/">Link</ic-footer-link></ic-footer-link-group>`,
+    });
+    await page.rootInstance.footerThemeChangeHandler({
+      detail: { mode: "dark" },
+    });
+    expect(page.rootInstance.dropdownIconStyle).toBe("dark");
+  });
+  it("should render small", async () => {
+    const page = await newSpecPage({
+      components: [Footer, FooterLinkGroup, FooterLink],
+      html: `<ic-footer breakpoint="extra large"><ic-footer-link-group small=true group-title="Link group"><ic-footer-link href="/">Link</ic-footer-link></ic-footer-link-group></ic-footer>`,
+    });
+    expect(page.root).not.toBeNull;
+    expect(page.root).toMatchSnapshot("footer-link-group-small");
+  });
+});
+//# sourceMappingURL=ic-footer-link-group.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-footer-link-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-footer-link-group/test/basic/ic-footer-link-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Footer } from \"../../../ic-footer/ic-footer\";\nimport { FooterLinkGroup } from \"../../ic-footer-link-group\";\nimport { FooterLink } from \"../../../ic-footer-link/ic-footer-link\";\n\ndescribe(\"ic-footer-link-group\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [FooterLinkGroup],\n      html: `<ic-footer-link-group group-title=\"Link group\"></ic-footer-link-group>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-footer-link-group class=\"footer-link-group footer-link-group-light footer-link-group-sparse\" group-title=\"Link group\">\n        <mock:shadow-root>\n            <div class=\"footer-link-group-title\">\n                <ic-typography variant=\"subtitle-small\">\n                    Link group\n                </ic-typography>\n            </div>\n            <div class=\"footer-link-group-links\">\n                <slot></slot>\n            </div>\n        </mock:shadow-root>\n    </ic-footer-link-group>`);\n  });\n\n  it(\"should render with links\", async () => {\n    const page = await newSpecPage({\n      components: [FooterLinkGroup, FooterLink],\n      html: `<ic-footer-link-group group-title=\"Link group\"><ic-footer-link href=\"/\">Link</ic-footer-link></ic-footer-link-group>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-footer-link-group class=\"footer-link-group footer-link-group-light footer-link-group-sparse\" group-title=\"Link group\">\n        <mock:shadow-root>\n            <div class=\"footer-link-group-title\">\n                <ic-typography variant=\"subtitle-small\">\n                    Link group\n                </ic-typography>\n            </div>\n            <div class=\"footer-link-group-links\">\n                <slot></slot>\n            </div>\n        </mock:shadow-root>\n        <ic-footer-link class=\"footer-link footer-link-light footer-link-ungrouped-sparse\" href=\"/\">\n            <mock:shadow-root>\n                <a href=\"/\">\n                    <slot></slot>\n                </a>\n            </mock:shadow-root>\n            Link\n        </ic-footer-link>\n    </ic-footer-link-group>`);\n  });\n\n  it(\"should render within footer\", async () => {\n    const page = await newSpecPage({\n      components: [Footer, FooterLinkGroup, FooterLink],\n      html: `<ic-footer><ic-footer-link-group group-title=\"Link group\"><ic-footer-link href=\"/\">Link</ic-footer-link></ic-footer-link-group><ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"footer-link-group-in-footer\");\n  });\n\n  it(\"should expand and collapse\", async () => {\n    const page = await newSpecPage({\n      components: [Footer, FooterLinkGroup, FooterLink],\n      html: `<ic-footer-link-group group-title=\"Link group\"><ic-footer-link href=\"/\">Link</ic-footer-link></ic-footer-link-group>`,\n    });\n\n    expect(page.rootInstance.expanded).toBe(false);\n\n    const event = new KeyboardEvent(\"keydown\", { key: \"Enter\" });\n\n    await page.rootInstance.handleKeydown(event);\n\n    expect(page.rootInstance.expanded).toBe(true);\n\n    await page.rootInstance.handleKeydown(event);\n\n    expect(page.rootInstance.expanded).toBe(false);\n  });\n\n  it(\"should check and set small state\", async () => {\n    const page = await newSpecPage({\n      components: [Footer, FooterLinkGroup, FooterLink],\n      html: `<ic-footer-link-group group-title=\"Link group\"><ic-footer-link href=\"/\">Link</ic-footer-link></ic-footer-link-group>`,\n    });\n\n    await page.rootInstance.footerResizeHandler();\n\n    expect(page.rootInstance.small).toBe(false);\n  });\n\n  it(\"should update theme\", async () => {\n    const page = await newSpecPage({\n      components: [Footer, FooterLinkGroup, FooterLink],\n      html: `<ic-footer-link-group group-title=\"Link group\"><ic-footer-link href=\"/\">Link</ic-footer-link></ic-footer-link-group>`,\n    });\n\n    await page.rootInstance.footerThemeChangeHandler({\n      detail: { mode: \"dark\" },\n    });\n\n    expect(page.rootInstance.dropdownIconStyle).toBe(\"dark\");\n  });\n\n  it(\"should render small\", async () => {\n    const page = await newSpecPage({\n      components: [Footer, FooterLinkGroup, FooterLink],\n      html: `<ic-footer breakpoint=\"extra large\"><ic-footer-link-group small=true group-title=\"Link group\"><ic-footer-link href=\"/\">Link</ic-footer-link></ic-footer-link-group></ic-footer>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    expect(page.root).toMatchSnapshot(\"footer-link-group-small\");\n  });\n});\n"]}

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

@@ -9,19 +9,28 @@ import { slotHasContent, getThemeForegroundColor, onComponentRequiredPropUndefin
  */
 export class Hero {
   constructor() {
+    this.foregroundColor = getThemeForegroundColor();
+    this.rightContent = false;
+    this.leftContentFullWidth = !this.rightContent && this.secondaryHeading === undefined;
+    this.scrollFactor = "right -100px";
+    this.aligned = "left";
+    this.backgroundImage = undefined;
+    this.contentAligned = "left";
+    this.disableBackgroundParallax = false;
     this.heading = undefined;
-    this.subheading = undefined;
     this.secondaryHeading = undefined;
     this.secondarySubheading = undefined;
-    this.backgroundImage = undefined;
-    this.disableBackgroundParallax = false;
-    this.aligned = "left";
-    this.contentAligned = "left";
     this.small = false;
-    this.rightContent = false;
-    this.scrollFactor = "right -100px";
-    this.leftContentFullWidth = !this.rightContent && this.secondaryHeading === undefined;
-    this.foregroundColor = getThemeForegroundColor();
+    this.subheading = undefined;
+  }
+  componentWillLoad() {
+    this.rightContent = slotHasContent(this.el, "secondary");
+  }
+  componentDidLoad() {
+    onComponentRequiredPropUndefined([{ prop: this.heading, propName: "heading" }], "Hero");
+  }
+  componentWillRender() {
+    this.rightContent = slotHasContent(this.el, "secondary");
   }
   themeChangeHandler(ev) {
     const theme = ev.detail;
@@ -36,15 +45,6 @@ export class Hero {
     const y = -100 + scrolltotop * factor;
     this.scrollFactor = "right " + y + "px";
   }
-  componentWillLoad() {
-    this.rightContent = slotHasContent(this.el, "secondary");
-  }
-  componentDidLoad() {
-    onComponentRequiredPropUndefined([{ prop: this.heading, propName: "heading" }], "Hero");
-  }
-  componentWillRender() {
-    this.rightContent = slotHasContent(this.el, "secondary");
-  }
   render() {
     const { aligned, small, heading, subheading, secondaryHeading, secondarySubheading, foregroundColor, backgroundImage, scrollFactor, } = this;
     let style = {};
@@ -78,24 +78,30 @@ export class Hero {
   }
   static get properties() {
     return {
-      "heading": {
+      "aligned": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "IcAlignment",
+          "resolved": "\"center\" | \"full-width\" | \"left\"",
+          "references": {
+            "IcAlignment": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
         },
-        "required": true,
+        "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The heading of the hero."
+          "text": "The alignment of the hero."
         },
-        "attribute": "heading",
-        "reflect": false
+        "attribute": "aligned",
+        "reflect": false,
+        "defaultValue": "\"left\""
       },
-      "subheading": {
+      "backgroundImage": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -107,46 +113,53 @@ export class Hero {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The description for the hero."
+          "text": "The optional background image."
         },
-        "attribute": "subheading",
+        "attribute": "background-image",
         "reflect": false
       },
-      "secondaryHeading": {
+      "contentAligned": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "IcHeroContentAlignments",
+          "resolved": "\"center\" | \"left\"",
+          "references": {
+            "IcHeroContentAlignments": {
+              "location": "import",
+              "path": "./ic-hero.types"
+            }
+          }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "The optional secondary heading, replaced by slotted right content."
+          "text": "The alignment of the hero content."
         },
-        "attribute": "secondary-heading",
-        "reflect": false
+        "attribute": "content-aligned",
+        "reflect": false,
+        "defaultValue": "\"left\""
       },
-      "secondarySubheading": {
-        "type": "string",
+      "disableBackgroundParallax": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The optional secondary subheading, replaced by slotted right content."
+          "text": "If `true`, the background image (if set) will not scroll using a parallax effect."
         },
-        "attribute": "secondary-subheading",
-        "reflect": false
+        "attribute": "disable-background-parallax",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "backgroundImage": {
+      "heading": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -154,105 +167,92 @@ export class Hero {
           "resolved": "string",
           "references": {}
         },
-        "required": false,
-        "optional": true,
+        "required": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "The optional background image."
+          "text": "The heading of the hero."
         },
-        "attribute": "background-image",
+        "attribute": "heading",
         "reflect": false
       },
-      "disableBackgroundParallax": {
-        "type": "boolean",
+      "secondaryHeading": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the background image (if set) will not scroll using a parallax effect."
+          "text": "The optional secondary heading, replaced by slotted right content."
         },
-        "attribute": "disable-background-parallax",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "secondary-heading",
+        "reflect": false
       },
-      "aligned": {
+      "secondarySubheading": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IcAlignment",
-          "resolved": "\"center\" | \"full-width\" | \"left\"",
-          "references": {
-            "IcAlignment": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "The alignment of the hero."
+          "text": "The optional secondary subheading, replaced by slotted right content."
         },
-        "attribute": "aligned",
-        "reflect": false,
-        "defaultValue": "\"left\""
+        "attribute": "secondary-subheading",
+        "reflect": false
       },
-      "contentAligned": {
-        "type": "string",
+      "small": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "IcHeroContentAlignments",
-          "resolved": "\"center\" | \"left\"",
-          "references": {
-            "IcHeroContentAlignments": {
-              "location": "import",
-              "path": "./ic-hero.types"
-            }
-          }
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The alignment of the hero content."
+          "text": "If `true`, the small styling will be applied to the hero."
         },
-        "attribute": "content-aligned",
+        "attribute": "small",
         "reflect": false,
-        "defaultValue": "\"left\""
+        "defaultValue": "false"
       },
-      "small": {
-        "type": "boolean",
+      "subheading": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the small styling will be applied to the hero."
+          "text": "The description for the hero."
         },
-        "attribute": "small",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "subheading",
+        "reflect": false
       }
     };
   }
   static get states() {
     return {
+      "foregroundColor": {},
       "rightContent": {},
-      "scrollFactor": {},
       "leftContentFullWidth": {},
-      "foregroundColor": {}
+      "scrollFactor": {}
     };
   }
   static get elementRef() { return "el"; }