@ukic/canary-web-components 2.0.0-canary.0

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

@@ -0,0 +1,522 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+     ========================================================================== */
+
+/**
+   * Remove the margin in all browsers.
+   */
+
+body {
+  margin: 0;
+}
+
+/**
+   * Render the `main` element consistently in IE.
+   */
+
+main {
+  display: block;
+}
+
+/**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+     ========================================================================== */
+
+/**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+     ========================================================================== */
+
+/**
+   * Remove the gray background on active links in IE 10.
+   */
+
+a {
+  background-color: transparent;
+}
+
+/**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted; /* 2 */
+}
+
+/**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+   * Add the correct font size in all browsers.
+   */
+
+small {
+  font-size: 80%;
+}
+
+/**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+     ========================================================================== */
+
+/**
+   * Remove the border on images inside links in IE 10.
+   */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+     ========================================================================== */
+
+/**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+   * Remove the inner border and padding in Firefox.
+   */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+   * Restore the focus styles unset by the previous rule.
+   */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+   * Correct the padding in Firefox.
+   */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+     ========================================================================== */
+
+/*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+
+details {
+  display: block;
+}
+
+/*
+   * Add the correct display in all browsers.
+   */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+     ========================================================================== */
+
+/**
+   * Add the correct display in IE 10+.
+   */
+
+template {
+  display: none;
+}
+
+/**
+   * Add the correct display in IE 10.
+   */
+
+[hidden] {
+  display: none;
+}
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font-style: inherit;
+  vertical-align: baseline;
+}
+
+
+:host(.footer-link-group-sparse) {
+  --footer-link-group-margin-right: 5.938rem;
+  --footer-link-group-border-bottom: 0 solid transparent;
+  --footer-link-group-title-margin-top: 0;
+  --footer-link-group-title-margin-bottom: var(--ic-space-md);
+}
+
+:host(.footer-link-group-small) {
+  --footer-link-group-margin-right: 0;
+  --footer-link-group-title-margin-top: var(--ic-space-md);
+  --footer-link-group-title-margin-bottom: var(--ic-space-md);
+  --footer-link-group-links-padding-left: var(--ic-space-md);
+  --footer-link-group-links-padding-bottom: var(--ic-space-md);
+}
+
+:host(.footer-link-group-light.footer-link-group-small) {
+  --footer-link-group-border-bottom: var(--ic-keyline-lighten);
+}
+
+:host(.footer-link-group-dark.footer-link-group-small) {
+  --footer-link-group-border-bottom: var(--ic-keyline-darken);
+}
+
+:host(.footer-link-group) {
+  margin-right: var(--footer-link-group-margin-right);
+  border-bottom: var(--footer-link-group-border-bottom);
+}
+
+:host(.footer-link-group-small.footer-link-group-light:hover) {
+  background-color: var(--ic-action-light-bg-hover);
+  cursor: pointer;
+}
+
+:host(.footer-link-group-small.footer-link-group-dark:hover) {
+  background-color: var(--ic-action-dark-bg-hover);
+  cursor: pointer;
+}
+
+:host(.footer-link-group-sparse:focus) {
+  box-shadow: var(--ic-border-focus-inset);
+  border-radius: var(--ic-border-radius-inset);
+  outline: var(--ic-hc-focus-outline);
+  z-index: 1;
+}
+
+:host(.footer-link-group-small:focus) {
+  box-shadow: var(--ic-border-focus-inset);
+  border-radius: var(--ic-border-radius-inset);
+  outline: var(--ic-hc-focus-outline);
+  z-index: 1;
+}
+
+:host(.footer-link-group-small.footer-link-group-light:active) {
+  background-color: var(--ic-action-light-bg-active);
+}
+
+:host(.footer-link-group-small.footer-link-group-dark:active) {
+  background-color: var(--ic-action-dark-bg-active);
+}
+
+.footer-link-group-title {
+  margin-top: var(--footer-link-group-title-margin-top);
+  margin-bottom: var(--footer-link-group-title-margin-bottom);
+  flex-grow: 1;
+}
+
+.footer-link-group-toggle {
+  fill: white !important;
+}
+
+.footer-link-group-links {
+  display: flex;
+  flex-direction: column;
+}
+
+.footer-link-group-header {
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,114 @@
+import { Host, h, } from "@stencil/core";
+import { DEVICE_SIZES, getThemeForegroundColor, onComponentRequiredPropUndefined, } from "../../utils/helpers";
+export class FooterLinkGroup {
+  constructor() {
+    this.handleKeydown = (event) => {
+      if (event.key === " " || event.key === "Enter") {
+        this.toggleExpanded();
+      }
+    };
+    this.toggleExpanded = () => {
+      this.expanded = !this.expanded;
+    };
+    this.expanded = false;
+    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) {
+      if (e.parentElement.classList.contains("footer")) {
+        return e.parentElement.classList.contains("footer-small");
+      }
+      else {
+        return this.isSmall(e.parentElement);
+      }
+    }
+    else {
+      return false;
+    }
+  }
+  render() {
+    const { small, groupTitle } = this;
+    return !small ? (h(Host, { class: {
+        ["footer-link-group footer-link-group-sparse"]: true,
+        [`footer-link-group-${this.dropdownIconStyle}`]: true,
+      } }, h("div", { class: "footer-link-group-title" }, h("ic-typography", { variant: "subtitle-small" }, groupTitle)), h("div", { class: "footer-link-group-links" }, h("slot", null)))) : (h(Host, { class: {
+        ["footer-link-group footer-link-group-small"]: true,
+        [`footer-link-group-${this.dropdownIconStyle}`]: true,
+      }, tabIndex: "1", onClick: this.toggleExpanded, onKeydown: this.handleKeydown, "aria-haspopup": "true", "aria-expanded": this.expanded }, h("ic-section-container", { fullHeight: true }, h("div", { class: "footer-link-group-header" }, h("div", { class: "footer-link-group-title" }, h("ic-typography", { variant: "label" }, groupTitle)), this.expanded ? (h("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, h("path", { fill: "currentColor", 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" }))) : (h("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, h("g", { transform: "translate(0 1200) scale(1 -1)" }, h("path", { fill: "currentColor", 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" }))))), this.expanded && (h("div", { class: "footer-link-group-links" }, h("slot", null))))));
+  }
+  static get is() { return "ic-footer-link-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-footer-link-group.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-footer-link-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "groupTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The title of the link group to be displayed."
+        },
+        "attribute": "group-title",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "expanded": {},
+      "deviceSize": {},
+      "dropdownIconStyle": {},
+      "small": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "footerResized",
+        "method": "footerResizeHandler",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "themeChange",
+        "method": "footerThemeChangeHandler",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=ic-footer-link-group.js.map

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

@@ -0,0 +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  @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/test/a11y/ic-footer-link-group.test.a11y.js

@@ -0,0 +1,21 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
+beforeEach(() => {
+  // IntersectionObserver isn't available in test environment
+  const mockResizeObserver = jest.fn();
+  mockResizeObserver.mockReturnValue({
+    observe: jest.fn().mockReturnValue(null),
+    unobserve: jest.fn().mockReturnValue(null),
+    disconnect: jest.fn().mockReturnValue(null),
+  });
+  window.ResizeObserver = mockResizeObserver;
+});
+describe("ic-footer-link-group", () => {
+  it("passes accessibility", async () => {
+    const el = await fixture(`<ic-footer-link-group group-title="A11y footer links"><ic-footer-link></ic-footer-link></ic-footer-link-group>`);
+    checkShadowElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
+});
+//# sourceMappingURL=ic-footer-link-group.test.a11y.js.map

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"]}