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

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

@@ -0,0 +1,390 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { TabGroup } from "../../../ic-tab-group/ic-tab-group";
+import { TabPanel } from "../../../ic-tab-panel/ic-tab-panel";
+import { Tab } from "../../../ic-tab/ic-tab";
+import { TabContext } from "../../ic-tab-context";
+beforeAll(() => {
+  jest.spyOn(console, "warn").mockImplementation(jest.fn());
+});
+describe("ic-tab-context component", () => {
+  it("should render tab context with tabs", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context>
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.root).toMatchSnapshot();
+    //test disconnected callback for automatic activation
+    page.setContent("");
+  });
+  it("should render tab context with tabs - light appearance", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context appearance="light">
+      <ic-tab-group label="Example tab group" appearance="light">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render tab context with tabs - selected tab", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context selected-tab-index="2">
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should test controlled mode - selected tab", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context selected-tab-index="2">
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.rootInstance.selectedTab).toBe(2);
+    const eventSpy = jest.fn();
+    page.root.addEventListener("icTabSelect", eventSpy);
+    const tabGroup = page.root.querySelector("ic-tab-group");
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "Home",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(eventSpy).toHaveBeenCalled();
+  });
+  it("should render tab context with tabs - manual activation", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context activation-type="manual">
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.root).toMatchSnapshot();
+    //test disconnected callback for manual activation
+    page.setContent("");
+  });
+  it("should render tab context with custom contextId", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context context-id="custom-context">
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should test setting selected tab", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context>
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.rootInstance.selectedTab).toBe(0);
+    page.root.selectedTabIndex = 1;
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(1);
+  });
+  it("should test tab click handler", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context>
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.rootInstance.selectedTabIndex).toBe(undefined);
+    const eventSpy = jest.fn();
+    page.root.addEventListener("icTabSelect", eventSpy);
+    await page.rootInstance.tabClickHandler({
+      stopImmediatePropagation: jest.fn(),
+      detail: {
+        contextId: "default",
+        position: 1,
+        tabId: "ic-tab--1-context-default",
+      },
+    });
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(1);
+    expect(eventSpy).toHaveBeenCalled();
+  });
+  it("should test key down handler - automatic", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context>
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    const tabGroup = page.root.querySelector("ic-tab-group");
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "End",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "Home",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(0);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowLeft",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowLeft",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(1);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowRight",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowRight",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(0);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "Escape",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(0);
+  });
+  it("should test key down handler - manual", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context activation-type="manual">
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    const tabGroup = page.root.querySelector("ic-tab-group");
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "End",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(0);
+    expect(page.rootInstance.focusedTabIndex).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "Enter",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "Home",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.focusedTabIndex).toBe(0);
+    expect(page.rootInstance.selectedTab).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: " ",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(0);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowLeft",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.focusedTabIndex).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowLeft",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.focusedTabIndex).toBe(1);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowRight",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.focusedTabIndex).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowRight",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.focusedTabIndex).toBe(0);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "Escape",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.focusedTabIndex).toBe(0);
+  });
+  it("should apply tab and panel ids to elements added after initial render of the context", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context>
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    const tabGroup = page.root.querySelector("ic-tab-group");
+    tabGroup.insertAdjacentHTML("beforeend", "<ic-tab>Four</ic-tab>");
+    page.root.insertAdjacentHTML("beforeend", "<ic-tab-panel>Four</ic-tab-panel>");
+    await page.waitForChanges();
+    const newTab = page.root.querySelector('[id*="ic-tab-3-context-default"]');
+    const newTabPanel = page.root.querySelector('[id*="ic-tab-panel-3-context-default"]');
+    expect(newTab.tabId).toBe("ic-tab--3-context-default");
+    expect(newTabPanel.panelId).toBe("ic-tab--3-context-default");
+  });
+  it("should reassign ids if tab and tab panel are dynamically removed", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context>
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    const tabGroup = page.root.querySelector("ic-tab-group");
+    let allTabs = tabGroup.querySelectorAll("ic-tab");
+    let allTabPanels = page.root.querySelectorAll("ic-tab-panel");
+    expect(allTabs.length).toBe(3);
+    expect(allTabPanels.length).toBe(3);
+    allTabPanels[allTabPanels.length - 2].remove();
+    allTabs[allTabs.length - 2].remove();
+    await page.waitForChanges();
+    allTabs = tabGroup.querySelectorAll("ic-tab");
+    allTabPanels = page.root.querySelectorAll("ic-tab-panel");
+    expect(allTabs.length).toBe(2);
+    expect(allTabPanels.length).toBe(2);
+    const newlyUpdatedTab = page.root.querySelector('[id*="ic-tab-1-context-default"]');
+    const newlyUpdatedTabPanel = page.root.querySelector('[id*="ic-tab-panel-1-context-default"]');
+    expect(newlyUpdatedTab.tabId).toBe("ic-tab--1-context-default");
+    expect(newlyUpdatedTabPanel.panelId).toBe("ic-tab--1-context-default");
+  });
+  it("should add a tab to enabledTabs when the tab changes from disabled to enabled", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context>
+      <ic-tab-group label="Example tab group">
+        <ic-tab disabled>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    const tab = page.root.querySelector("ic-tab");
+    expect(page.rootInstance.enabledTabs).not.toContain(tab);
+    tab.disabled = false;
+    expect(page.rootInstance.enabledTabs).toContain(tab);
+    tab.disabled = true;
+    expect(page.rootInstance.enabledTabs).not.toContain(tab);
+  });
+});
+//# sourceMappingURL=ic-tab-context.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-tab-context.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-tab-context/test/basic/ic-tab-context.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { TabGroup } from \"../../../ic-tab-group/ic-tab-group\";\nimport { TabPanel } from \"../../../ic-tab-panel/ic-tab-panel\";\nimport { Tab } from \"../../../ic-tab/ic-tab\";\nimport { TabContext } from \"../../ic-tab-context\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-tab-context component\", () => {\n  it(\"should render tab context with tabs\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context>\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    //test disconnected callback for automatic activation\n    page.setContent(\"\");\n  });\n\n  it(\"should render tab context with tabs - light appearance\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context appearance=\"light\">\n      <ic-tab-group label=\"Example tab group\" appearance=\"light\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render tab context with tabs - selected tab\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context selected-tab-index=\"2\">\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should test controlled mode - selected tab\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context selected-tab-index=\"2\">\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.rootInstance.selectedTab).toBe(2);\n\n    const eventSpy = jest.fn();\n    page.root.addEventListener(\"icTabSelect\", eventSpy);\n\n    const tabGroup = page.root.querySelector(\"ic-tab-group\");\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"Home\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(eventSpy).toHaveBeenCalled();\n  });\n\n  it(\"should render tab context with tabs - manual activation\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context activation-type=\"manual\">\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    //test disconnected callback for manual activation\n    page.setContent(\"\");\n  });\n\n  it(\"should render tab context with custom contextId\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context context-id=\"custom-context\">\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should test setting selected tab\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context>\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.rootInstance.selectedTab).toBe(0);\n\n    page.root.selectedTabIndex = 1;\n    await page.waitForChanges();\n\n    expect(page.rootInstance.selectedTab).toBe(1);\n  });\n\n  it(\"should test tab click handler\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context>\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.rootInstance.selectedTabIndex).toBe(undefined);\n\n    const eventSpy = jest.fn();\n    page.root.addEventListener(\"icTabSelect\", eventSpy);\n\n    await page.rootInstance.tabClickHandler({\n      stopImmediatePropagation: jest.fn(),\n      detail: {\n        contextId: \"default\",\n        position: 1,\n        tabId: \"ic-tab--1-context-default\",\n      },\n    });\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(1);\n    expect(eventSpy).toHaveBeenCalled();\n  });\n\n  it(\"should test key down handler - automatic\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context>\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    const tabGroup = page.root.querySelector(\"ic-tab-group\");\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"End\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"Home\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(0);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowLeft\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowLeft\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(1);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowRight\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowRight\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(0);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"Escape\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(0);\n  });\n\n  it(\"should test key down handler - manual\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context activation-type=\"manual\">\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    const tabGroup = page.root.querySelector(\"ic-tab-group\");\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"End\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(0);\n    expect(page.rootInstance.focusedTabIndex).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"Enter\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"Home\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.focusedTabIndex).toBe(0);\n    expect(page.rootInstance.selectedTab).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \" \",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(0);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowLeft\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.focusedTabIndex).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowLeft\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.focusedTabIndex).toBe(1);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowRight\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.focusedTabIndex).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowRight\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.focusedTabIndex).toBe(0);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"Escape\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.focusedTabIndex).toBe(0);\n  });\n\n  it(\"should apply tab and panel ids to elements added after initial render of the context\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context>\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    const tabGroup = page.root.querySelector(\"ic-tab-group\");\n\n    tabGroup.insertAdjacentHTML(\"beforeend\", \"<ic-tab>Four</ic-tab>\");\n    page.root.insertAdjacentHTML(\n      \"beforeend\",\n      \"<ic-tab-panel>Four</ic-tab-panel>\"\n    );\n    await page.waitForChanges();\n\n    const newTab = page.root.querySelector(\n      '[id*=\"ic-tab-3-context-default\"]'\n    ) as HTMLIcTabElement;\n    const newTabPanel = page.root.querySelector(\n      '[id*=\"ic-tab-panel-3-context-default\"]'\n    ) as HTMLIcTabPanelElement;\n\n    expect(newTab.tabId).toBe(\"ic-tab--3-context-default\");\n    expect(newTabPanel.panelId).toBe(\"ic-tab--3-context-default\");\n  });\n\n  it(\"should reassign ids if tab and tab panel are dynamically removed\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context>\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    const tabGroup = page.root.querySelector(\"ic-tab-group\");\n\n    let allTabs = tabGroup.querySelectorAll(\"ic-tab\");\n    let allTabPanels = page.root.querySelectorAll(\"ic-tab-panel\");\n\n    expect(allTabs.length).toBe(3);\n    expect(allTabPanels.length).toBe(3);\n\n    allTabPanels[allTabPanels.length - 2].remove();\n    allTabs[allTabs.length - 2].remove();\n\n    await page.waitForChanges();\n\n    allTabs = tabGroup.querySelectorAll(\"ic-tab\");\n    allTabPanels = page.root.querySelectorAll(\"ic-tab-panel\");\n\n    expect(allTabs.length).toBe(2);\n    expect(allTabPanels.length).toBe(2);\n\n    const newlyUpdatedTab = page.root.querySelector(\n      '[id*=\"ic-tab-1-context-default\"]'\n    ) as HTMLIcTabElement;\n    const newlyUpdatedTabPanel = page.root.querySelector(\n      '[id*=\"ic-tab-panel-1-context-default\"]'\n    ) as HTMLIcTabPanelElement;\n\n    expect(newlyUpdatedTab.tabId).toBe(\"ic-tab--1-context-default\");\n    expect(newlyUpdatedTabPanel.panelId).toBe(\"ic-tab--1-context-default\");\n  });\n\n  it(\"should add a tab to enabledTabs when the tab changes from disabled to enabled\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context>\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab disabled>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    const tab = page.root.querySelector(\"ic-tab\");\n    expect(page.rootInstance.enabledTabs).not.toContain(tab);\n    tab.disabled = false;\n    expect(page.rootInstance.enabledTabs).toContain(tab);\n    tab.disabled = true;\n    expect(page.rootInstance.enabledTabs).not.toContain(tab);\n  });\n});\n"]}

package/dist/collection/components/ic-tab-group/ic-tab-group.css

@@ -0,0 +1,25 @@
+:host {
+  --border-bottom-color: var(--ic-architectural-300);
+
+  display: block;
+  margin-bottom: var(--ic-space-md);
+  border-bottom: var(--ic-border-default);
+}
+
+:host(.inline) {
+  margin-bottom: 0;
+  border-bottom: none;
+}
+
+.light {
+  border-bottom: var(--ic-space-1px) solid var(--ic-architectural-white);
+}
+
+.tabs-container {
+  display: flex;
+  flex-direction: row;
+}
+
+.tabs-container::-webkit-scrollbar {
+  display: none;
+}

package/dist/collection/components/ic-tab-group/ic-tab-group.js

@@ -0,0 +1,124 @@
+import { Host, h } from "@stencil/core";
+import { onComponentRequiredPropUndefined } from "../../utils/helpers";
+import { IcThemeForegroundEnum, } from "../../utils/types";
+export class TabGroup {
+  constructor() {
+    this.appearance = "dark";
+    this.contextId = "default";
+    this.inline = false;
+    this.label = undefined;
+  }
+  componentDidLoad() {
+    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Tab Group");
+  }
+  render() {
+    const { appearance, label } = this;
+    return (h(Host, { role: "tablist", "aria-label": label, class: {
+        ["light"]: appearance === IcThemeForegroundEnum.Light,
+        ["inline"]: this.inline,
+      } }, h("ic-horizontal-scroll", { appearance: appearance === IcThemeForegroundEnum.Dark
+        ? IcThemeForegroundEnum.Default
+        : appearance }, h("div", { class: "tabs-container" }, h("slot", null)))));
+  }
+  static get is() { return "ic-tab-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-tab-group.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-tab-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "appearance": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcThemeForegroundNoDefault",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {
+            "IcThemeForegroundNoDefault": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "The appearance of the tab group, e.g dark, or light."
+            }],
+          "text": ""
+        },
+        "attribute": "appearance",
+        "reflect": false,
+        "defaultValue": "\"dark\""
+      },
+      "contextId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "This is no longer required.\nThe context id is passed down from `ic-tab-context`"
+            }],
+          "text": ""
+        },
+        "attribute": "context-id",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "inline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the tabs and tab panels will be positioned separately."
+        },
+        "attribute": "inline",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label to describe the purpose of the set of tabs to screen reader users."
+        },
+        "attribute": "label",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=ic-tab-group.js.map

package/dist/collection/components/ic-tab-group/ic-tab-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-tab-group.js","sourceRoot":"","sources":["../../../src/components/ic-tab-group/ic-tab-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAEL,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAS3B,MAAM,OAAO,QAAQ;;sBAM+B,MAAM;qBAMV,SAAS;kBAKX,KAAK;;;EAOjD,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,WAAW,CACZ,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEnC,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,SAAS,gBACF,KAAK,EACjB,KAAK,EAAE;QACL,CAAC,OAAO,CAAC,EAAE,UAAU,KAAK,qBAAqB,CAAC,KAAK;QACrD,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,MAAM;OACxB;MAED,4BACE,UAAU,EACR,UAAU,KAAK,qBAAqB,CAAC,IAAI;UACvC,CAAC,CAAC,qBAAqB,CAAC,OAAO;UAC/B,CAAC,CAAC,UAAU;QAGhB,WAAK,KAAK,EAAC,gBAAgB;UACzB,eAAa,CACT,CACe,CAClB,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n  IcThemeForegroundNoDefault,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-tab-group\",\n  styleUrl: \"ic-tab-group.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class TabGroup {\n  @Element() host: HTMLIcTabGroupElement;\n\n  /**\n   * @internal The appearance of the tab group, e.g dark, or light.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n  /**\n   * @deprecated This is no longer required.\n   * The context id is passed down from `ic-tab-context`\n   */\n  @Prop({ reflect: true }) contextId?: string = \"default\";\n\n  /**\n   * If `true`, the tabs and tab panels will be positioned separately.\n   */\n  @Prop({ reflect: true }) inline?: boolean = false;\n\n  /**\n   * The label to describe the purpose of the set of tabs to screen reader users.\n   */\n  @Prop() label!: string;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tab Group\"\n    );\n  }\n\n  render() {\n    const { appearance, label } = this;\n\n    return (\n      <Host\n        role=\"tablist\"\n        aria-label={label}\n        class={{\n          [\"light\"]: appearance === IcThemeForegroundEnum.Light,\n          [\"inline\"]: this.inline,\n        }}\n      >\n        <ic-horizontal-scroll\n          appearance={\n            appearance === IcThemeForegroundEnum.Dark\n              ? IcThemeForegroundEnum.Default\n              : appearance\n          }\n        >\n          <div class=\"tabs-container\">\n            <slot></slot>\n          </div>\n        </ic-horizontal-scroll>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-tab-panel/ic-tab-panel.css

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+:host(.ic-tab-panel-light) {
+  color: white;
+}