@ukic/web-components 2.4.0 → 2.5.0

package/dist/collection/components/ic-accordion-group/test/a11y/ic-accordion-group.test.a11y.js

@@ -0,0 +1,31 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
+describe("ic-accordion-group", () => {
+  it("passes accessibility", async () => {
+    const el = await fixture(`
+    <ic-accordion-group group-title="Title of the Accordion Group">
+      <ic-accordion heading="Accordion 1">
+        <svg
+          slot="icon"
+          width="20"
+          height="1em"
+          viewBox="0 0 512 512"
+          fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z"
+          />
+        </svg>
+        <ic-typography variant="body">
+          This is an example of the main body text
+        </ic-typography>
+      </ic-accordion>
+    </ic-accordion-group>
+    `);
+    checkShadowElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
+});
+//# sourceMappingURL=ic-accordion-group.test.a11y.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-accordion-group.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-accordion-group/test/a11y/ic-accordion-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,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;EAClC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;KAoBxB,CAAC,CAAC;IACH,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\ndescribe(\"ic-accordion-group\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`\n    <ic-accordion-group group-title=\"Title of the Accordion Group\">\n      <ic-accordion heading=\"Accordion 1\">\n        <svg\n          slot=\"icon\"\n          width=\"20\"\n          height=\"1em\"\n          viewBox=\"0 0 512 512\"\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z\"\n          />\n        </svg>\n        <ic-typography variant=\"body\">\n          This is an example of the main body text\n        </ic-typography>\n      </ic-accordion>\n    </ic-accordion-group>\n    `);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

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

@@ -0,0 +1,114 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("ic-accordion-group", () => {
+  it("button text should change to 'See all' when expanded accordion clicked", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-accordion-group>
+      <ic-accordion expanded heading="Accordion 1"></ic-accordion>
+      </ic-accordion-group>`);
+    const seeAllBtn = await page.find("ic-accordion-group >>> ic-button");
+    let text = await seeAllBtn.innerText;
+    expect(text).toBe("Hide all");
+    await seeAllBtn.click();
+    await page.waitForChanges();
+    text = await seeAllBtn.innerText;
+    expect(text).toBe("See all");
+  });
+  it("should open accordion when 'See all' clicked", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-accordion-group>
+        <ic-accordion></ic-accordion>
+       </ic-accordion-group>`);
+    const seeAllBtn = await page.find("ic-accordion-group >>> ic-button");
+    await seeAllBtn.click();
+    await page.waitForChanges();
+    const accordionExpanded = await page.find("ic-accordion >>> .section-button-open");
+    expect(accordionExpanded).not.toBeNull();
+  });
+  it("should test the See all/ Hide all function", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+    <ic-accordion-group group-title="Test heading">
+    <ic-accordion heading="Accordion 1">
+      <ic-typography variant="body">
+        This is an example of the main body text.
+      </ic-typography>
+    </ic-accordion>
+    <ic-accordion heading="Accordion 2" expanded>
+    <ic-typography variant="body">
+      This is an example of the main body text.
+    </ic-typography>
+  </ic-accordion>
+  </ic-accordion-group>    
+    `);
+    const accordions = await page.findAll("ic-accordion");
+    const accordion1 = accordions[0];
+    const accordion2 = accordions[1];
+    const accordionButton = await page.find("ic-accordion-group >>> ic-button");
+    expect(await accordion1.getProperty("expanded")).toBe(false);
+    expect(await accordion2.getProperty("expanded")).toBe(true);
+    expect((await accordionButton).innerText).toBe("See all");
+    await accordionButton.click();
+    await page.waitForChanges();
+    expect(await accordion1.getProperty("expanded")).toBe(true);
+    expect(await accordion2.getProperty("expanded")).toBe(true);
+    expect((await accordionButton).innerText).toBe("Hide all");
+    await accordionButton.click();
+    await page.waitForChanges();
+    expect(await accordion1.getProperty("expanded")).toBe(false);
+    expect(await accordion2.getProperty("expanded")).toBe(false);
+    expect((await accordionButton).innerText).toBe("See all");
+  });
+  it("should open second accordion and close first accordion on single expansion", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+    <ic-accordion-group single-expansion="true" group-title="Test heading">
+    <ic-accordion expanded heading="Accordion 1">
+      <ic-typography variant="body">
+        This is an example of the main body text.
+      </ic-typography>
+    </ic-accordion>
+    <ic-accordion heading="Accordion 2">
+    <ic-typography variant="body">
+      This is an example of the main body text.
+    </ic-typography>
+  </ic-accordion>
+  </ic-accordion-group>    
+    `);
+    const accordions = await page.findAll("ic-accordion");
+    const accordion1 = accordions[0];
+    const accordion2 = accordions[1];
+    expect(await accordion1.getProperty("expanded")).toBe(true);
+    expect(await accordion2.getProperty("expanded")).toBe(false);
+    await accordion2.click();
+    await page.waitForChanges();
+    expect(await accordion1.getProperty("expanded")).toBe(false);
+    expect(await accordion2.getProperty("expanded")).toBe(true);
+  });
+  it("both accordions should open when single expansion is false", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+    <ic-accordion-group group-title="Test heading">
+    <ic-accordion expanded heading="Accordion 1">
+      <ic-typography variant="body">
+        This is an example of the main body text.
+      </ic-typography>
+    </ic-accordion>
+    <ic-accordion heading="Accordion 2">
+    <ic-typography variant="body">
+      This is an example of the main body text.
+    </ic-typography>
+  </ic-accordion>
+  </ic-accordion-group>    
+    `);
+    const accordions = await page.findAll("ic-accordion");
+    const accordion1 = accordions[0];
+    const accordion2 = accordions[1];
+    expect(await accordion1.getProperty("expanded")).toBe(true);
+    expect(await accordion2.getProperty("expanded")).toBe(false);
+    await accordion2.click();
+    await page.waitForChanges();
+    expect(await accordion1.getProperty("expanded")).toBe(true);
+    expect(await accordion2.getProperty("expanded")).toBe(true);
+  });
+});
+//# sourceMappingURL=ic-accordion-group.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-accordion-group.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-accordion-group/test/basic/ic-accordion-group.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-accordion-group\", () => {\n  it(\"button text should change to 'See all' when expanded accordion clicked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-accordion-group>\n      <ic-accordion expanded heading=\"Accordion 1\"></ic-accordion>\n      </ic-accordion-group>`\n    );\n    const seeAllBtn = await page.find(\"ic-accordion-group >>> ic-button\");\n    let text = await seeAllBtn.innerText;\n\n    expect(text).toBe(\"Hide all\");\n    await seeAllBtn.click();\n    await page.waitForChanges();\n    text = await seeAllBtn.innerText;\n    expect(text).toBe(\"See all\");\n  });\n\n  it(\"should open accordion when 'See all' clicked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-accordion-group>\n        <ic-accordion></ic-accordion>\n       </ic-accordion-group>`\n    );\n\n    const seeAllBtn = await page.find(\"ic-accordion-group >>> ic-button\");\n\n    await seeAllBtn.click();\n    await page.waitForChanges();\n\n    const accordionExpanded = await page.find(\n      \"ic-accordion >>> .section-button-open\"\n    );\n\n    expect(accordionExpanded).not.toBeNull();\n  });\n\n  it(\"should test the See all/ Hide all function\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`\n    <ic-accordion-group group-title=\"Test heading\">\n    <ic-accordion heading=\"Accordion 1\">\n      <ic-typography variant=\"body\">\n        This is an example of the main body text.\n      </ic-typography>\n    </ic-accordion>\n    <ic-accordion heading=\"Accordion 2\" expanded>\n    <ic-typography variant=\"body\">\n      This is an example of the main body text.\n    </ic-typography>\n  </ic-accordion>\n  </ic-accordion-group>    \n    `);\n\n    const accordions = await page.findAll(\"ic-accordion\");\n    const accordion1 = accordions[0];\n    const accordion2 = accordions[1];\n    const accordionButton = await page.find(\"ic-accordion-group >>> ic-button\");\n\n    expect(await accordion1.getProperty(\"expanded\")).toBe(false);\n    expect(await accordion2.getProperty(\"expanded\")).toBe(true);\n    expect((await accordionButton).innerText).toBe(\"See all\");\n\n    await accordionButton.click();\n    await page.waitForChanges();\n\n    expect(await accordion1.getProperty(\"expanded\")).toBe(true);\n    expect(await accordion2.getProperty(\"expanded\")).toBe(true);\n    expect((await accordionButton).innerText).toBe(\"Hide all\");\n\n    await accordionButton.click();\n    await page.waitForChanges();\n\n    expect(await accordion1.getProperty(\"expanded\")).toBe(false);\n    expect(await accordion2.getProperty(\"expanded\")).toBe(false);\n    expect((await accordionButton).innerText).toBe(\"See all\");\n  });\n\n  it(\"should open second accordion and close first accordion on single expansion\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`\n    <ic-accordion-group single-expansion=\"true\" group-title=\"Test heading\">\n    <ic-accordion expanded heading=\"Accordion 1\">\n      <ic-typography variant=\"body\">\n        This is an example of the main body text.\n      </ic-typography>\n    </ic-accordion>\n    <ic-accordion heading=\"Accordion 2\">\n    <ic-typography variant=\"body\">\n      This is an example of the main body text.\n    </ic-typography>\n  </ic-accordion>\n  </ic-accordion-group>    \n    `);\n    const accordions = await page.findAll(\"ic-accordion\");\n    const accordion1 = accordions[0];\n    const accordion2 = accordions[1];\n\n    expect(await accordion1.getProperty(\"expanded\")).toBe(true);\n    expect(await accordion2.getProperty(\"expanded\")).toBe(false);\n\n    await accordion2.click();\n    await page.waitForChanges();\n\n    expect(await accordion1.getProperty(\"expanded\")).toBe(false);\n    expect(await accordion2.getProperty(\"expanded\")).toBe(true);\n  });\n\n  it(\"both accordions should open when single expansion is false\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`\n    <ic-accordion-group group-title=\"Test heading\">\n    <ic-accordion expanded heading=\"Accordion 1\">\n      <ic-typography variant=\"body\">\n        This is an example of the main body text.\n      </ic-typography>\n    </ic-accordion>\n    <ic-accordion heading=\"Accordion 2\">\n    <ic-typography variant=\"body\">\n      This is an example of the main body text.\n    </ic-typography>\n  </ic-accordion>\n  </ic-accordion-group>    \n    `);\n    const accordions = await page.findAll(\"ic-accordion\");\n    const accordion1 = accordions[0];\n    const accordion2 = accordions[1];\n\n    expect(await accordion1.getProperty(\"expanded\")).toBe(true);\n    expect(await accordion2.getProperty(\"expanded\")).toBe(false);\n\n    await accordion2.click();\n    await page.waitForChanges();\n\n    expect(await accordion1.getProperty(\"expanded\")).toBe(true);\n    expect(await accordion2.getProperty(\"expanded\")).toBe(true);\n  });\n});\n"]}

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

@@ -0,0 +1,126 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { AccordionGroup } from "../../ic-accordion-group";
+import { Accordion } from "../../../ic-accordion/ic-accordion";
+const event = { detail: { id: "ic-accordion-0" } };
+describe("ic-accordion-group snapshots", () => {
+  it("should match default snapshot", async () => {
+    const page = await newSpecPage({
+      components: [AccordionGroup],
+      html: `<ic-accordion-group group-title="Test heading"></ic-accordion-group>`,
+    });
+    expect(page.root).toMatchSnapshot("renders as default");
+  });
+  it("should match light snapshot", async () => {
+    const page = await newSpecPage({
+      components: [AccordionGroup],
+      html: `<ic-accordion-group appearance="light" group-title="Test heading"></ic-accordion-group>`,
+    });
+    expect(page.root).toMatchSnapshot("renders as light");
+  });
+});
+describe("ic-accordion-group functions unit test", () => {
+  it("checks setExpandedToAreAllAccordionsOpen when single expansion is false", async () => {
+    const page = await newSpecPage({
+      components: [AccordionGroup, Accordion],
+      html: `
+    <ic-accordion-group group-title="Test heading">
+      <ic-accordion>
+        <ic-typography variant="body" >
+          This is an example of the main body text.
+        </ic-typography>
+      </ic-accordion>
+      <ic-accordion expanded>
+      <ic-typography variant="body" >
+        This is an example of the main body text.
+      </ic-typography>
+    </ic-accordion>
+    </ic-accordion-group>`,
+    });
+    const spySetExpandedToAreAllAccordionsOpen = jest.spyOn(page.rootInstance, "setExpandedToAreAllAccordionsOpen");
+    expect(page.root.singleExpansion).toBe(false);
+    await page.rootInstance.handleAccordionClicked(event);
+    expect(spySetExpandedToAreAllAccordionsOpen).toBeCalled();
+  });
+  it("checks handleExpanded", async () => {
+    const page = await newSpecPage({
+      components: [AccordionGroup],
+      html: `<ic-accordion-group group-title="Test heading" expanded></ic-accordion-group>`,
+    });
+    expect(page.root.expanded).toBe(true);
+    await page.rootInstance.handleExpanded();
+    await page.waitForChanges;
+    expect(page.root.expanded).toBe(false);
+  });
+});
+describe("ic-accordion-group component", () => {
+  it("it should test the handleExpanded function", async () => {
+    const page = await newSpecPage({
+      components: [AccordionGroup, Accordion],
+      html: `
+      <ic-accordion-group expanded="true" group-title="Test heading">
+        <ic-accordion heading="Accordion 1">
+          <ic-typography variant="body">
+            This is an example of the main body text.
+          </ic-typography>
+        </ic-accordion>
+      </ic-accordion-group>`,
+    });
+    expect(page.root.expanded).toBe(true);
+    await page.rootInstance.handleExpanded();
+    await page.waitForChanges();
+    expect(page.root.expanded).toBe(false);
+  });
+  it("it should test singleExpansion function", async () => {
+    const page = await newSpecPage({
+      components: [AccordionGroup, Accordion],
+      html: `
+      <ic-accordion-group group-title="Test heading" single-expansion="true">
+        <ic-accordion heading="Accordion 1">
+          <ic-typography variant="body">
+            This is an example of the main body text.
+          </ic-typography>
+        </ic-accordion>
+        <ic-accordion heading="Accordion 2" expanded>
+          <ic-typography variant="body">
+            This is an example of the main body text.
+          </ic-typography>
+        </ic-accordion>
+      </ic-accordion-group>`,
+    });
+    const accordions = page.root.querySelectorAll("ic-accordion");
+    const accordion1 = accordions[0];
+    const accordion2 = accordions[1];
+    const accordionButton = accordion1.shadowRoot.querySelector(".section-button");
+    await page.waitForChanges();
+    expect(accordion1.expanded).toBe(false);
+    expect(accordion2.expanded).toBe(true);
+    accordionButton.click();
+    await page.waitForChanges();
+    expect(accordion1.expanded).toBe(true);
+    expect(accordion2.expanded).toBe(false);
+  });
+  it("checks the areAllAccordionsOpen function", async () => {
+    const page = await newSpecPage({
+      components: [AccordionGroup, Accordion],
+      html: `
+      <ic-accordion-group group-title="Test heading">
+        <ic-accordion heading="Accordion 1">
+          <ic-typography variant="body">
+            This is an example of the main body text.
+          </ic-typography>
+        </ic-accordion>
+      </ic-accordion-group>`,
+    });
+    // uses handleExpanded to open accordion, making areAllAccordionsOpen = true
+    await page.rootInstance.handleExpanded();
+    await page.waitForChanges;
+    expect(page.root.expanded).toBe(true);
+    expect(page.rootInstance.areAllAccordionsOpen).toBe(true);
+    // uses handleExpanded to close accordion, making areAllAccordionsOpen = false
+    await page.rootInstance.handleExpanded();
+    await page.waitForChanges;
+    expect(page.root.expanded).toBe(false);
+    expect(page.rootInstance.areAllAccordionsOpen).toBe(false);
+  });
+});
+//# sourceMappingURL=ic-accordion-group.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-accordion-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-accordion-group/test/basic/ic-accordion-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { AccordionGroup } from \"../../ic-accordion-group\";\nimport { Accordion } from \"../../../ic-accordion/ic-accordion\";\n\nconst event = { detail: { id: \"ic-accordion-0\" } };\n\ndescribe(\"ic-accordion-group snapshots\", () => {\n  it(\"should match default snapshot\", async () => {\n    const page = await newSpecPage({\n      components: [AccordionGroup],\n      html: `<ic-accordion-group group-title=\"Test heading\"></ic-accordion-group>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders as default\");\n  });\n\n  it(\"should match light snapshot\", async () => {\n    const page = await newSpecPage({\n      components: [AccordionGroup],\n      html: `<ic-accordion-group appearance=\"light\" group-title=\"Test heading\"></ic-accordion-group>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders as light\");\n  });\n});\n\ndescribe(\"ic-accordion-group functions unit test\", () => {\n  it(\"checks setExpandedToAreAllAccordionsOpen when single expansion is false\", async () => {\n    const page = await newSpecPage({\n      components: [AccordionGroup, Accordion],\n      html: `\n    <ic-accordion-group group-title=\"Test heading\">\n      <ic-accordion>\n        <ic-typography variant=\"body\" >\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>\n      <ic-accordion expanded>\n      <ic-typography variant=\"body\" >\n        This is an example of the main body text.\n      </ic-typography>\n    </ic-accordion>\n    </ic-accordion-group>`,\n    });\n    const spySetExpandedToAreAllAccordionsOpen = jest.spyOn(\n      page.rootInstance,\n      \"setExpandedToAreAllAccordionsOpen\"\n    );\n    expect(page.root.singleExpansion).toBe(false);\n    await page.rootInstance.handleAccordionClicked(event);\n    expect(spySetExpandedToAreAllAccordionsOpen).toBeCalled();\n  });\n\n  it(\"checks handleExpanded\", async () => {\n    const page = await newSpecPage({\n      components: [AccordionGroup],\n      html: `<ic-accordion-group group-title=\"Test heading\" expanded></ic-accordion-group>`,\n    });\n    expect(page.root.expanded).toBe(true);\n    await page.rootInstance.handleExpanded();\n    await page.waitForChanges;\n    expect(page.root.expanded).toBe(false);\n  });\n});\n\ndescribe(\"ic-accordion-group component\", () => {\n  it(\"it should test the handleExpanded function\", async () => {\n    const page = await newSpecPage({\n      components: [AccordionGroup, Accordion],\n      html: `\n      <ic-accordion-group expanded=\"true\" group-title=\"Test heading\">\n        <ic-accordion heading=\"Accordion 1\">\n          <ic-typography variant=\"body\">\n            This is an example of the main body text.\n          </ic-typography>\n        </ic-accordion>\n      </ic-accordion-group>`,\n    });\n    expect(page.root.expanded).toBe(true);\n    await page.rootInstance.handleExpanded();\n    await page.waitForChanges();\n    expect(page.root.expanded).toBe(false);\n  });\n\n  it(\"it should test singleExpansion function\", async () => {\n    const page = await newSpecPage({\n      components: [AccordionGroup, Accordion],\n      html: `\n      <ic-accordion-group group-title=\"Test heading\" single-expansion=\"true\">\n        <ic-accordion heading=\"Accordion 1\">\n          <ic-typography variant=\"body\">\n            This is an example of the main body text.\n          </ic-typography>\n        </ic-accordion>\n        <ic-accordion heading=\"Accordion 2\" expanded>\n          <ic-typography variant=\"body\">\n            This is an example of the main body text.\n          </ic-typography>\n        </ic-accordion>\n      </ic-accordion-group>`,\n    });\n\n    const accordions = page.root.querySelectorAll(\"ic-accordion\");\n    const accordion1 = accordions[0];\n    const accordion2 = accordions[1];\n    const accordionButton = accordion1.shadowRoot.querySelector(\n      \".section-button\"\n    ) as HTMLButtonElement;\n    await page.waitForChanges();\n    expect(accordion1.expanded).toBe(false);\n    expect(accordion2.expanded).toBe(true);\n    accordionButton.click();\n    await page.waitForChanges();\n    expect(accordion1.expanded).toBe(true);\n    expect(accordion2.expanded).toBe(false);\n  });\n\n  it(\"checks the areAllAccordionsOpen function\", async () => {\n    const page = await newSpecPage({\n      components: [AccordionGroup, Accordion],\n      html: `\n      <ic-accordion-group group-title=\"Test heading\">\n        <ic-accordion heading=\"Accordion 1\">\n          <ic-typography variant=\"body\">\n            This is an example of the main body text.\n          </ic-typography>\n        </ic-accordion>\n      </ic-accordion-group>`,\n    });\n    // uses handleExpanded to open accordion, making areAllAccordionsOpen = true\n    await page.rootInstance.handleExpanded();\n    await page.waitForChanges;\n    expect(page.root.expanded).toBe(true);\n    expect(page.rootInstance.areAllAccordionsOpen).toBe(true);\n\n    // uses handleExpanded to close accordion, making areAllAccordionsOpen = false\n    await page.rootInstance.handleExpanded();\n    await page.waitForChanges;\n    expect(page.root.expanded).toBe(false);\n    expect(page.rootInstance.areAllAccordionsOpen).toBe(false);\n  });\n});\n"]}

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

@@ -0,0 +1,179 @@
+@media (prefers-reduced-motion: no-preference) {
+  :host(.show) {
+    animation: expand var(--ic-transition-duration-slow);
+  }
+
+  :host(.hide) {
+    animation: shrink var(--ic-transition-duration-slow);
+  }
+}
+
+:host {
+  display: flex;
+  height: var(--ic-space-md);
+  min-width: var(--ic-space-md);
+  width: -moz-fit-content;
+  width: fit-content;
+  border-radius: calc(2 * var(--ic-space-xxl));
+  position: absolute;
+}
+
+:host(.neutral) {
+  background-color: var(--ic-architectural-500);
+}
+
+:host(.light) {
+  background-color: var(--ic-architectural-40);
+}
+
+:host(.info) {
+  background-color: var(--ic-status-info);
+}
+
+:host(.warning) {
+  background-color: var(--ic-status-warning-mid);
+}
+
+:host(.error) {
+  background-color: var(--ic-status-error);
+}
+
+:host(.success) {
+  background-color: var(--ic-status-success);
+}
+
+:host(.small) {
+  height: var(--ic-space-sm);
+  min-width: var(--ic-space-sm);
+}
+
+:host(.large) {
+  height: calc(var(--ic-space-md) + var(--ic-space-xxs));
+  min-width: calc(var(--ic-space-md) + var(--ic-space-xxs));
+}
+
+:host(.dot.default) {
+  height: var(--ic-space-xs);
+  width: var(--ic-space-xs);
+  min-width: var(--ic-space-xs);
+}
+
+:host(.dot.small) {
+  height: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));
+  width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));
+  min-width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));
+}
+
+:host(.dot.large) {
+  height: var(--ic-space-sm);
+  width: var(--ic-space-sm);
+  min-width: var(--ic-space-sm);
+}
+
+:host(.foreground-dark) ::slotted(*) {
+  fill: var(--ic-color-primary-text);
+}
+
+:host(.foreground-light) ::slotted(*) {
+  fill: white;
+}
+
+:host(.foreground-dark) ic-typography {
+  color: var(--ic-color-primary-text);
+}
+
+:host(.foreground-light) ic-typography {
+  color: white;
+}
+
+:host(.text) ic-typography {
+  align-self: center;
+  padding: 0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)
+    var(--ic-space-1px);
+}
+
+:host(.text.small) ic-typography {
+  padding: 0 0.2132rem;
+}
+
+:host(.text.large) ic-typography {
+  padding: 0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)
+    var(--ic-space-1px);
+}
+
+:host(.icon) ::slotted(svg) {
+  width: var(--ic-space-sm);
+  height: var(--ic-space-sm);
+  padding: var(--ic-space-xxxs);
+}
+
+:host(.icon.small) ::slotted(svg) {
+  width: var(--ic-space-xs);
+  height: var(--ic-space-xs);
+}
+
+:host(.icon.large) ::slotted(svg) {
+  width: calc(var(--ic-space-sm) + var(--ic-space-xxxs));
+  height: calc(var(--ic-space-sm) + var(--ic-space-xxxs));
+  padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));
+}
+
+:host(.far) {
+  top: calc(-1 * var(--ic-space-xs));
+  right: calc(-1 * var(--ic-space-xs));
+}
+
+:host(.far.small),
+:host(.dot.far.large) {
+  top: calc(-1 * var(--ic-space-xxs));
+  right: calc(-1 * var(--ic-space-xxs));
+}
+
+:host(.dot.far),
+:host(.dot.far.small) {
+  top: calc(-1 * var(--ic-space-xxxs));
+  right: calc(-1 * var(--ic-space-xxxs));
+}
+
+:host(.near) {
+  top: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));
+  right: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));
+}
+
+:host(.dot.near) {
+  top: calc(-1 * var(--ic-space-1px));
+  right: calc(-1 * var(--ic-space-1px));
+}
+
+:host(.inline) {
+  position: static;
+}
+
+:host(.hide) {
+  visibility: hidden !important;
+  transition: visibility var(--ic-transition-duration-slow);
+}
+
+@keyframes expand {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes shrink {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(0);
+  }
+}