@ukic/web-components 2.1.0-beta.14 → 2.1.0-beta.16

package/dist/collection/components/ic-footer-link-group/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/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/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.spec.js

@@ -0,0 +1,76 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Hero } from "./ic-hero";
+describe("ic-hero component", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [Hero],
+      html: `<ic-hero heading="Test title" subheading="Test text"></ic-hero>`,
+    });
+    expect(page.root).toMatchSnapshot("renders");
+  });
+  it("should render with a secondary heading", async () => {
+    const page = await newSpecPage({
+      components: [Hero],
+      html: `<ic-hero heading="Test title" subheading="Test text" secondary-heading="Test title" secondary-subheading="Test text"></ic-hero>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-secondary-heading");
+  });
+  it("should render with interaction content", async () => {
+    const page = await newSpecPage({
+      components: [Hero],
+      html: `<ic-hero heading="Test title" subheading="Test text"><ic-button slot="interaction">Button</ic-button></ic-hero>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-interaction-content");
+  });
+  it("should render with secondary content", async () => {
+    const page = await newSpecPage({
+      components: [Hero],
+      html: `<ic-hero heading="Test title" subheading="Test text"><ic-card slot="secondary" heading="Test card"></ic-card></ic-hero>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-secondary-content");
+  });
+  it("should render with a background image when given", async () => {
+    const page = await newSpecPage({
+      components: [Hero],
+      html: `<ic-hero heading="Test title" subheading="Test text" background-image="test.png"><ic-card slot="secondary" heading="Test card"></ic-card></ic-hero>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-background-image");
+  });
+  it("should use parallax on scroll when a background image is given", async () => {
+    const page = await newSpecPage({
+      components: [Hero],
+      html: `<ic-hero heading="Test title" subheading="Test text" background-image="test.png"><ic-card slot="secondary" heading="Test card"></ic-card></ic-hero>`,
+    });
+    page.doc.scrollingElement.scrollTop = 50;
+    page.doc.dispatchEvent(new CustomEvent("scroll"));
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot("renders-with-parallax-on-scroll");
+  });
+  it("should use not parallax on scroll when a background image is given, but parallax disabled", async () => {
+    const page = await newSpecPage({
+      components: [Hero],
+      html: `<ic-hero heading="Test title" disable-background-parallax subheading="Test text" background-image="test.png"><ic-card slot="secondary" heading="Test card"></ic-card></ic-hero>`,
+    });
+    page.doc.scrollingElement.scrollTop = 50;
+    page.doc.dispatchEvent(new CustomEvent("scroll"));
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot("renders-with-parallax-on-scroll-disabled");
+  });
+  it("should render small", async () => {
+    const page = await newSpecPage({
+      components: [Hero],
+      html: `<ic-hero small heading="Test title" subheading="Test text"></ic-hero>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-small-variant");
+  });
+  it("correctly sets foregroundColor on theme change", async () => {
+    const page = await newSpecPage({
+      components: [Hero],
+      html: `<ic-hero heading="Test title" subheading="Test text"></ic-hero>`,
+    });
+    await page.rootInstance.themeChangeHandler({ detail: { mode: "dark" } });
+    await page.waitForChanges();
+    expect(page.rootInstance.foregroundColor).toBe("dark");
+  });
+});
+//# sourceMappingURL=ic-hero.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-hero.spec.js","sourceRoot":"","sources":["../../../src/components/ic-hero/ic-hero.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Hero } from \"./ic-hero\";\n\ndescribe(\"ic-hero component\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [Hero],\n      html: `<ic-hero heading=\"Test title\" subheading=\"Test text\"></ic-hero>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders\");\n  });\n\n  it(\"should render with a secondary heading\", async () => {\n    const page = await newSpecPage({\n      components: [Hero],\n      html: `<ic-hero heading=\"Test title\" subheading=\"Test text\" secondary-heading=\"Test title\" secondary-subheading=\"Test text\"></ic-hero>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-secondary-heading\");\n  });\n\n  it(\"should render with interaction content\", async () => {\n    const page = await newSpecPage({\n      components: [Hero],\n      html: `<ic-hero heading=\"Test title\" subheading=\"Test text\"><ic-button slot=\"interaction\">Button</ic-button></ic-hero>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-interaction-content\");\n  });\n\n  it(\"should render with secondary content\", async () => {\n    const page = await newSpecPage({\n      components: [Hero],\n      html: `<ic-hero heading=\"Test title\" subheading=\"Test text\"><ic-card slot=\"secondary\" heading=\"Test card\"></ic-card></ic-hero>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-secondary-content\");\n  });\n\n  it(\"should render with a background image when given\", async () => {\n    const page = await newSpecPage({\n      components: [Hero],\n      html: `<ic-hero heading=\"Test title\" subheading=\"Test text\" background-image=\"test.png\"><ic-card slot=\"secondary\" heading=\"Test card\"></ic-card></ic-hero>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-background-image\");\n  });\n\n  it(\"should use parallax on scroll when a background image is given\", async () => {\n    const page = await newSpecPage({\n      components: [Hero],\n      html: `<ic-hero heading=\"Test title\" subheading=\"Test text\" background-image=\"test.png\"><ic-card slot=\"secondary\" heading=\"Test card\"></ic-card></ic-hero>`,\n    });\n\n    page.doc.scrollingElement.scrollTop = 50;\n    page.doc.dispatchEvent(new CustomEvent(\"scroll\"));\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(\"renders-with-parallax-on-scroll\");\n  });\n\n  it(\"should use not parallax on scroll when a background image is given, but parallax disabled\", async () => {\n    const page = await newSpecPage({\n      components: [Hero],\n      html: `<ic-hero heading=\"Test title\" disable-background-parallax subheading=\"Test text\" background-image=\"test.png\"><ic-card slot=\"secondary\" heading=\"Test card\"></ic-card></ic-hero>`,\n    });\n\n    page.doc.scrollingElement.scrollTop = 50;\n    page.doc.dispatchEvent(new CustomEvent(\"scroll\"));\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(\n      \"renders-with-parallax-on-scroll-disabled\"\n    );\n  });\n\n  it(\"should render small\", async () => {\n    const page = await newSpecPage({\n      components: [Hero],\n      html: `<ic-hero small heading=\"Test title\" subheading=\"Test text\"></ic-hero>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-small-variant\");\n  });\n\n  it(\"correctly sets foregroundColor on theme change\", async () => {\n    const page = await newSpecPage({\n      components: [Hero],\n      html: `<ic-hero heading=\"Test title\" subheading=\"Test text\"></ic-hero>`,\n    });\n\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"dark\" } });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.foregroundColor).toBe(\"dark\");\n  });\n});\n"]}

package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.spec.js

@@ -0,0 +1,180 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { NavigationItem } from "../ic-navigation-item/ic-navigation-item";
+import { HorizontalScroll } from "./ic-horizontal-scroll";
+const testHorizontalScroll = `<ic-horizontal-scroll>
+  <div>
+    <ic-navigation-item label="Test nav item 1"></ic-navigation-item>
+    <ic-navigation-item label="Test nav item 2"></ic-navigation-item>
+    <ic-navigation-item label="Test nav item 3"></ic-navigation-item>
+    <ic-navigation-item label="Test nav item 4"></ic-navigation-item>
+    <ic-navigation-item label="Test nav item 5"></ic-navigation-item>
+    <ic-navigation-item label="Test nav item 6"></ic-navigation-item>
+  </div>
+  </ic-horizontal-scroll>`;
+describe("ic-horizontal-scroll", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: testHorizontalScroll,
+    });
+    expect(page.root).toMatchSnapshot("renders");
+  });
+  it("should render the correct HTML for the chosen appearance", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: testHorizontalScroll,
+    });
+    expect(page.root).toMatchSnapshot("renders-appearance");
+  });
+  it("should scroll item into view", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: testHorizontalScroll,
+    });
+    page.rootInstance.scrollItemIntoView(6);
+    expect(page.rootInstance.buttonStateSet).toBe(true);
+  });
+  it("should long scroll left", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: testHorizontalScroll,
+    });
+    page.rootInstance.longScrollLeft();
+    page.waitForChanges();
+    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);
+  });
+  it("should long scroll right", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: testHorizontalScroll,
+    });
+    page.rootInstance.longScrollRight();
+    page.waitForChanges();
+    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);
+  });
+  it("should delay on left arrow mouse down and set a timeout after the scrolling ends", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: testHorizontalScroll,
+    });
+    const event = new Event("mousedown", {
+      bubbles: true,
+      cancelable: true,
+    });
+    page.rootInstance.leftArrowMouseDownHandler(event);
+    page.waitForChanges();
+    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);
+    page.rootInstance.isScrolling = 200;
+    page.waitForChanges();
+    page.rootInstance.scrollHandler();
+    expect(page.rootInstance.isScrolling._idleNext.msecs).toBe(50);
+  });
+  it("should delay on right arrow mouse down and revoke delay on mouse up", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: testHorizontalScroll,
+    });
+    const event = new Event("mousedown", {
+      bubbles: true,
+      cancelable: true,
+    });
+    page.rootInstance.rightArrowMouseDownHandler(event);
+    page.waitForChanges();
+    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);
+    page.rootInstance.arrowMouseUpHandler();
+    expect(page.rootInstance.scrollDelay._idleNext).toBeNull();
+  });
+  it("should stop scrolling if mouse leaves the scroll button", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: testHorizontalScroll,
+    });
+    const scrollContainer = page.root.shadowRoot.querySelector(".scroll-container-right");
+    const mouseDownEvent = new Event("mousedown", {
+      bubbles: true,
+      cancelable: true,
+    });
+    const mouseLeaveEvent = new Event("mouseleave", {
+      bubbles: true,
+      cancelable: true,
+    });
+    page.rootInstance.rightArrowMouseDownHandler(mouseDownEvent);
+    page.waitForChanges();
+    scrollContainer.dispatchEvent(mouseLeaveEvent);
+    page.waitForChanges();
+    expect(page.rootInstance.arrowMouseUpHandler()).toHaveBeenCalled;
+  });
+  it("should stop scrolling", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: testHorizontalScroll,
+    });
+    //when buttonStateSet is true
+    page.rootInstance.buttonStateSet = true;
+    page.rootInstance.scrollStopped();
+    page.waitForChanges();
+    expect(page.rootInstance.buttonStateSet).toBe(false);
+    //when buttonStateSet is false
+    page.rootInstance.itemsContainerEl.scrollLeft = 0;
+    page.rootInstance.scrollStopped();
+    page.waitForChanges();
+    expect(page.rootInstance.firstItemVisible).toBe(true);
+  });
+  it("should handle item focus", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: testHorizontalScroll,
+    });
+    page.rootInstance.itemOverflow = true;
+    page.waitForChanges();
+    const item = page.root.querySelector("[label='Test nav item 4']");
+    item.focus();
+    page.waitForChanges();
+    expect(page.rootInstance.itemFocusHandler()).toHaveBeenCalled;
+    expect(page.rootInstance.firstItemVisible).toBe(false);
+  });
+  it("should render scroll arrows when items overflow", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: `<ic-horizontal-scroll>
+        <div>
+        <ic-navigation-item label="Test nav item 1"></ic-navigation-item>
+        <ic-navigation-item label="Test nav item 2"></ic-navigation-item>
+        <ic-navigation-item label="Test nav item 3"></ic-navigation-item>
+        <ic-navigation-item label="Test nav item 4"></ic-navigation-item>
+        <ic-navigation-item label="Test nav item 5"></ic-navigation-item>
+        <ic-navigation-item label="Test nav item 6"></ic-navigation-item>
+        </div>
+      </ic-horizontal-scroll>`,
+    });
+    page.rootInstance.itemOverflow = true;
+    page.waitForChanges();
+    const scroll = page.root.shadowRoot.querySelector(".scroll-arrow");
+    expect(scroll).not.toBeNull();
+    //call runResizeObserver
+    page.rootInstance.runResizeObserver();
+    //test disconnected callback
+    page.setContent("");
+  });
+  it("should set itemOverflow to true where scrollWidth > clientWidth on the scroll container element", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: `<ic-horizontal-scroll>
+        <div>
+        <ic-navigation-item label="Test nav item 1"></ic-navigation-item>
+        <ic-navigation-item label="Test nav item 2"></ic-navigation-item>
+        <ic-navigation-item label="Test nav item 3"></ic-navigation-item>
+        <ic-navigation-item label="Test nav item 4"></ic-navigation-item>
+        <ic-navigation-item label="Test nav item 5"></ic-navigation-item>
+        <ic-navigation-item label="Test nav item 6"></ic-navigation-item>
+        </div>
+      </ic-horizontal-scroll>`,
+    });
+    page.rootInstance.itemsContainerEl.scrollWidth = 100;
+    page.rootInstance.itemsContainerEl.clientWidth = 50;
+    page.rootInstance.resizeObserverCallback();
+    page.waitForChanges();
+    expect(page.rootInstance.itemOverflow).toBe(true);
+  });
+});
+//# sourceMappingURL=ic-horizontal-scroll.spec.js.map

package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-horizontal-scroll.spec.js","sourceRoot":"","sources":["../../../src/components/ic-horizontal-scroll/ic-horizontal-scroll.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { NavigationItem } from \"../ic-navigation-item/ic-navigation-item\";\nimport { HorizontalScroll } from \"./ic-horizontal-scroll\";\n\nconst testHorizontalScroll = `<ic-horizontal-scroll>\n  <div>\n    <ic-navigation-item label=\"Test nav item 1\"></ic-navigation-item>\n    <ic-navigation-item label=\"Test nav item 2\"></ic-navigation-item>\n    <ic-navigation-item label=\"Test nav item 3\"></ic-navigation-item>\n    <ic-navigation-item label=\"Test nav item 4\"></ic-navigation-item>\n    <ic-navigation-item label=\"Test nav item 5\"></ic-navigation-item>\n    <ic-navigation-item label=\"Test nav item 6\"></ic-navigation-item>\n  </div>\n  </ic-horizontal-scroll>`;\n\ndescribe(\"ic-horizontal-scroll\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders\");\n  });\n\n  it(\"should render the correct HTML for the chosen appearance\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-appearance\");\n  });\n\n  it(\"should scroll item into view\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    page.rootInstance.scrollItemIntoView(6);\n    expect(page.rootInstance.buttonStateSet).toBe(true);\n  });\n\n  it(\"should long scroll left\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    page.rootInstance.longScrollLeft();\n    page.waitForChanges();\n\n    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);\n  });\n\n  it(\"should long scroll right\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    page.rootInstance.longScrollRight();\n    page.waitForChanges();\n\n    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);\n  });\n\n  it(\"should delay on left arrow mouse down and set a timeout after the scrolling ends\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    const event = new Event(\"mousedown\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    page.rootInstance.leftArrowMouseDownHandler(event);\n    page.waitForChanges();\n\n    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);\n\n    page.rootInstance.isScrolling = 200;\n    page.waitForChanges();\n\n    page.rootInstance.scrollHandler();\n\n    expect(page.rootInstance.isScrolling._idleNext.msecs).toBe(50);\n  });\n\n  it(\"should delay on right arrow mouse down and revoke delay on mouse up\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    const event = new Event(\"mousedown\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    page.rootInstance.rightArrowMouseDownHandler(event);\n    page.waitForChanges();\n\n    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);\n\n    page.rootInstance.arrowMouseUpHandler();\n    expect(page.rootInstance.scrollDelay._idleNext).toBeNull();\n  });\n\n  it(\"should stop scrolling if mouse leaves the scroll button\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    const scrollContainer = page.root.shadowRoot.querySelector(\n      \".scroll-container-right\"\n    );\n    const mouseDownEvent = new Event(\"mousedown\", {\n      bubbles: true,\n      cancelable: true,\n    });\n    const mouseLeaveEvent = new Event(\"mouseleave\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    page.rootInstance.rightArrowMouseDownHandler(mouseDownEvent);\n    page.waitForChanges();\n\n    scrollContainer.dispatchEvent(mouseLeaveEvent);\n    page.waitForChanges();\n\n    expect(page.rootInstance.arrowMouseUpHandler()).toHaveBeenCalled;\n  });\n\n  it(\"should stop scrolling\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    //when buttonStateSet is true\n    page.rootInstance.buttonStateSet = true;\n    page.rootInstance.scrollStopped();\n    page.waitForChanges();\n\n    expect(page.rootInstance.buttonStateSet).toBe(false);\n\n    //when buttonStateSet is false\n    page.rootInstance.itemsContainerEl.scrollLeft = 0;\n    page.rootInstance.scrollStopped();\n    page.waitForChanges();\n\n    expect(page.rootInstance.firstItemVisible).toBe(true);\n  });\n\n  it(\"should handle item focus\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    page.rootInstance.itemOverflow = true;\n    page.waitForChanges();\n\n    const item: HTMLElement = page.root.querySelector(\n      \"[label='Test nav item 4']\"\n    );\n    item.focus();\n    page.waitForChanges();\n\n    expect(page.rootInstance.itemFocusHandler()).toHaveBeenCalled;\n    expect(page.rootInstance.firstItemVisible).toBe(false);\n  });\n\n  it(\"should render scroll arrows when items overflow\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: `<ic-horizontal-scroll>\n        <div>\n        <ic-navigation-item label=\"Test nav item 1\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 2\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 3\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 4\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 5\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 6\"></ic-navigation-item>\n        </div>\n      </ic-horizontal-scroll>`,\n    });\n\n    page.rootInstance.itemOverflow = true;\n    page.waitForChanges();\n    const scroll = page.root.shadowRoot.querySelector(\".scroll-arrow\");\n\n    expect(scroll).not.toBeNull();\n\n    //call runResizeObserver\n    page.rootInstance.runResizeObserver();\n\n    //test disconnected callback\n    page.setContent(\"\");\n  });\n\n  it(\"should set itemOverflow to true where scrollWidth > clientWidth on the scroll container element\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: `<ic-horizontal-scroll>\n        <div>\n        <ic-navigation-item label=\"Test nav item 1\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 2\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 3\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 4\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 5\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 6\"></ic-navigation-item>\n        </div>\n      </ic-horizontal-scroll>`,\n    });\n\n    page.rootInstance.itemsContainerEl.scrollWidth = 100;\n    page.rootInstance.itemsContainerEl.clientWidth = 50;\n    page.rootInstance.resizeObserverCallback();\n    page.waitForChanges();\n\n    expect(page.rootInstance.itemOverflow).toBe(true);\n  });\n});\n"]}

package/dist/collection/components/ic-input-component-container/ic-input-component-container.css

@@ -33,20 +33,44 @@ ic-input-component-container.readonly:hover {
 }
 
 ic-input-component-container.error {
-  border: var(--ic-space-xxxs) solid var(--ic-status-error);
+  border: var(--ic-error-border-default);
   padding: 0;
 }
 
+ic-input-component-container.error:hover {
+  border: var(--ic-error-border-hover);
+}
+
+ic-input-component-container.error:focus-within {
+  border: var(--ic-error-border-pressed);
+}
+
 ic-input-component-container.warning {
-  border: var(--ic-space-xxxs) solid var(--ic-status-warning-mid);
+  border: var(--ic-warning-border-default);
   padding: 0;
 }
 
+ic-input-component-container.warning:hover {
+  border: var(--ic-warning-border-hover);
+}
+
+ic-input-component-container.warning:focus-within {
+  border: var(--ic-warning-border-pressed);
+}
+
 ic-input-component-container.success {
-  border: var(--ic-space-xxxs) solid var(--ic-status-success);
+  border: var(--ic-success-border-default);
   padding: 0;
 }
 
+ic-input-component-container.success:hover {
+  border: var(--ic-success-border-hover);
+}
+
+ic-input-component-container.success:focus-within {
+  border: var(--ic-success-border-pressed);
+}
+
 ic-input-component-container.small {
   height: var(--ic-space-xl);
 }
@@ -97,10 +121,14 @@ ic-input-component-container .inline-success > svg {
 }
 
 ic-input-component-container:hover {
-  border-color: var(--ic-action-dark-hover);
+  border: var(--ic-border-hover);
   color: var(--ic-action-dark-hover);
 }
 
+ic-input-component-container:focus {
+  border: var(--ic-border-pressed);
+}
+
 .focus-indicator {
   display: flex;
   width: 100%;

package/dist/collection/components/ic-input-component-container/ic-input-component-container.spec.js

@@ -0,0 +1,117 @@
+import { InputComponentContainer } from "./ic-input-component-container";
+import { newSpecPage } from "@stencil/core/testing";
+describe("ic-input-component-container", () => {
+  it("renders", async () => {
+    const page = await newSpecPage({
+      components: [InputComponentContainer],
+      html: `<ic-input-component-container>content</ic-input-component-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-component-container>
+      <div class="focus-indicator">
+        content
+      </div>
+    </ic-input-component-container>
+    `);
+  });
+  it("renders with validation status", async () => {
+    const page = await newSpecPage({
+      components: [InputComponentContainer],
+      html: `<ic-input-component-container validation-status="success">content</ic-input-component-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-component-container validation-status="success" class="success">
+      <div class="focus-indicator">
+        content
+      </div>
+    </ic-input-component-container> 
+    `);
+  });
+  it("renders with validation inline", async () => {
+    const page = await newSpecPage({
+      components: [InputComponentContainer],
+      html: `<ic-input-component-container validation-status="success" validation-inline=true>content</ic-input-component-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-component-container class="success" validation-inline="true" validation-status="success">
+      <div class="focus-indicator">
+        content
+        <span class="inline-success">
+          svg
+        </span>
+      </div>
+    </ic-input-component-container>
+    `);
+  });
+  it("ignores validation inline if not success", async () => {
+    const page = await newSpecPage({
+      components: [InputComponentContainer],
+      html: `<ic-input-component-container validation-status="error" validation-inline=true>content</ic-input-component-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-component-container class="error" validation-inline="true" validation-status="error">
+      <div class="focus-indicator">
+        content
+      </div>
+    </ic-input-component-container>
+    `);
+  });
+  it("renders with small, multiline & fullwidth props set", async () => {
+    const page = await newSpecPage({
+      components: [InputComponentContainer],
+      html: `<ic-input-component-container small=true multi-line=true full-width=true>content</ic-input-component-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-component-container class="small fullwidth multiline" small="true" full-width="true" multi-line="true">
+      <div class="focus-indicator">
+        content
+      </div>
+    </ic-input-component-container>
+    `);
+  });
+  it("renders disabled", async () => {
+    const page = await newSpecPage({
+      components: [InputComponentContainer],
+      html: `<ic-input-component-container validation-status="success" disabled=true>content</ic-input-component-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-component-container validation-status="success" class="disabled" disabled="true">
+      <div class="focus-indicator">
+        content
+      </div>
+    </ic-input-component-container>
+    `);
+  });
+  it("renders readonly", async () => {
+    const page = await newSpecPage({
+      components: [InputComponentContainer],
+      html: `<ic-input-component-container validation-status="success" readonly=true>content</ic-input-component-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-input-component-container class="readonly" readonly="true" validation-status="success">
+        <div class="focus-indicator">
+          content
+        </div>
+      </ic-input-component-container>
+    `);
+  });
+  it("renders with slotted content", async () => {
+    const page = await newSpecPage({
+      components: [InputComponentContainer],
+      html: `<ic-input-component-container validation-status="success" disabled=true><span slot="left-icon">slotted content</span>content</ic-input-component-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-component-container class="disabled" disabled="true" validation-status="success">
+      <div class="focus-indicator">
+        <div class="icon-container">
+          <span slot="left-icon">
+            slotted content
+          </span>
+        </div>
+        content
+      </div>
+    </ic-input-component-container>
+    `);
+  });
+});
+//# sourceMappingURL=ic-input-component-container.spec.js.map

package/dist/collection/components/ic-input-component-container/ic-input-component-container.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-input-component-container.spec.js","sourceRoot":"","sources":["../../../src/components/ic-input-component-container/ic-input-component-container.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { InputComponentContainer } from \"./ic-input-component-container\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-input-component-container\", () => {\n  it(\"renders\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container>\n      <div class=\"focus-indicator\">\n        content\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"renders with validation status\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"success\">content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container validation-status=\"success\" class=\"success\">\n      <div class=\"focus-indicator\">\n        content\n      </div>\n    </ic-input-component-container> \n    `);\n  });\n\n  it(\"renders with validation inline\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"success\" validation-inline=true>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container class=\"success\" validation-inline=\"true\" validation-status=\"success\">\n      <div class=\"focus-indicator\">\n        content\n        <span class=\"inline-success\">\n          svg\n        </span>\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"ignores validation inline if not success\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"error\" validation-inline=true>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container class=\"error\" validation-inline=\"true\" validation-status=\"error\">\n      <div class=\"focus-indicator\">\n        content\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"renders with small, multiline & fullwidth props set\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container small=true multi-line=true full-width=true>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container class=\"small fullwidth multiline\" small=\"true\" full-width=\"true\" multi-line=\"true\">\n      <div class=\"focus-indicator\">\n        content\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"renders disabled\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"success\" disabled=true>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container validation-status=\"success\" class=\"disabled\" disabled=\"true\">\n      <div class=\"focus-indicator\">\n        content\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"renders readonly\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"success\" readonly=true>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-input-component-container class=\"readonly\" readonly=\"true\" validation-status=\"success\">\n        <div class=\"focus-indicator\">\n          content\n        </div>\n      </ic-input-component-container>\n    `);\n  });\n\n  it(\"renders with slotted content\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"success\" disabled=true><span slot=\"left-icon\">slotted content</span>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container class=\"disabled\" disabled=\"true\" validation-status=\"success\">\n      <div class=\"focus-indicator\">\n        <div class=\"icon-container\">\n          <span slot=\"left-icon\">\n            slotted content\n          </span>\n        </div>\n        content\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n});\n"]}