@ukic/web-components 2.1.0-beta.8 → 2.2.0

package/dist/collection/components/ic-top-navigation/test/basic/ic-top-navigation.spec.js

@@ -0,0 +1,299 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { DEVICE_SIZES } from "../../../../utils/helpers";
+import { Button } from "../../../ic-button/ic-button";
+import { NavigationItem } from "../../../ic-navigation-item/ic-navigation-item";
+import { NavigationMenu } from "../../../ic-navigation-menu/ic-navigation-menu";
+import { SearchBar } from "../../../ic-search-bar/ic-search-bar";
+import { TopNavigation } from "../../ic-top-navigation";
+import { TextField } from "../../../ic-text-field/ic-text-field";
+import { waitForTimeout } from "../../../../testspec.setup";
+const waitForSearchFocus = async () => {
+  //delay to account for 100ms delay in search bar focus
+  await waitForTimeout(200);
+};
+describe("ic-top-navigation", () => {
+  it("renders with app title", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation app-title="ApplicationName"></ic-top-navigation>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-app-title");
+  });
+  it("renders with app icon & title", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation app-title="ApplicationName">
+        <svg
+          slot="app-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+          />
+        </svg>
+      </ic-top-navigation>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-app-icon-and-title");
+  });
+  it("renders with custom title link url", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation app-title="ApplicationName" href="https://www.google.co.uk/">
+      </ic-top-navigation>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-custom-title-link-url");
+  });
+  it("renders with Title, Version & Status", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation
+        app-title="ApplicationName"
+        status="alpha"
+        version="v0.0.7"
+      ></ic-top-navigation>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-title-version-status");
+  });
+  it("renders with search", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation
+        app-title="ApplicationName"
+        status="alpha"
+        version="v0.0.7"
+      >
+      <ic-search-bar slot="search" label="Search" placeholder="Search">
+      </ic-top-navigation>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-search");
+  });
+  it("renders with buttons", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation
+        app-title="ApplicationName"
+        status="alpha"
+        version="v0.0.7"
+      >
+        <ic-navigation-button
+          label="button1"
+          slot="buttons"
+          onclick="alert('test')"
+        >
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+            />
+          </svg>
+        </ic-navigation-button>
+      </ic-top-navigation>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-buttons");
+  });
+  it("renders with navigation", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation, NavigationItem],
+      html: `<ic-top-navigation
+        app-title="ApplicationName"
+        status="alpha"
+        version="v0.0.7"
+      >
+        <ic-navigation-item label="Navigation 1" slot=navigation href="/"></ic-navigation-item>
+      </ic-top-navigation>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-navigation");
+  });
+  it("tests app title updates", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation app-title="ApplicationName"></ic-top-navigation>`,
+    });
+    const appTitle = await page.root.shadowRoot.querySelector("h1");
+    expect(appTitle.textContent).toEqual("ApplicationName");
+    page.root.appTitle = "New Application Name";
+    await page.waitForChanges();
+    expect(appTitle.textContent).toEqual("New Application Name");
+  });
+  it("tests form in search slot", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation app-title="ApplicationName">
+      <form role="search" slot="search">
+        <ic-search-bar slot="search" label="Search" placeholder="Search">
+        </ic-search-bar>
+      </form>
+      </ic-top-navigation>`,
+    });
+    expect(page.root).toMatchSnapshot("form-in-search-slot");
+  });
+  it("renders with slotted app-title content", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation
+        status="alpha"
+        version="v0.0.7"
+      >
+      <a slot="app-title" href="/">App Title</a>
+      </ic-top-navigation>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-slotted-app-title-content");
+  });
+  it("tests behaviour on small device", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation, Button, NavigationMenu, SearchBar, TextField],
+      html: `<ic-top-navigation
+      app-title="ApplicationName"
+      status="alpha"
+      version="v0.0.7"
+    >
+    <ic-search-bar label="Search" placeholder="Search" slot="search"></ic-search-bar>
+    </ic-top-navigation>`,
+    });
+    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    await page.waitForChanges();
+    let searchBtn = page.root.shadowRoot.querySelector("#search-toggle-button");
+    expect(searchBtn).not.toBeNull();
+    searchBtn.click();
+    await page.waitForChanges();
+    await waitForSearchFocus();
+    let menuButton = page.root.shadowRoot.querySelector("#menu-button");
+    expect(menuButton).not.toBeNull();
+    expect(page.rootInstance.searchButtonClick).toBe(false);
+    page.rootInstance.searchButtonMouseDownHandler();
+    expect(page.rootInstance.searchButtonClick).toBe(true);
+    searchBtn.click();
+    await page.waitForChanges();
+    await waitForSearchFocus();
+    expect(page.rootInstance.searchButtonClick).toBe(false);
+    menuButton.click();
+    await page.waitForChanges();
+    let menu = page.root.shadowRoot.querySelector("ic-navigation-menu");
+    expect(menu).not.toBeNull();
+    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);
+    await page.waitForChanges();
+    menu = page.root.shadowRoot.querySelector("ic-navigation-menu");
+    expect(menu).toBeNull();
+    searchBtn = page.root.shadowRoot.querySelector("#search-toggle-button");
+    expect(searchBtn).toBeNull();
+    menuButton = page.root.shadowRoot.querySelector("#menu-button");
+    expect(menuButton).toBeNull();
+  });
+  it("tests hiding of mobile search bar on resize", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation, Button, NavigationMenu, SearchBar, TextField],
+      html: `<ic-top-navigation
+      app-title="ApplicationName"
+      status="alpha"
+      version="v0.0.7"
+    >
+    <ic-search-bar label="Search" placeholder="Search" slot="search"></ic-search-bar>
+    </ic-top-navigation>`,
+    });
+    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    await page.waitForChanges();
+    const searchBtn = page.root.shadowRoot.querySelector("#search-toggle-button");
+    expect(searchBtn).not.toBeNull();
+    searchBtn.click();
+    await page.waitForChanges();
+    await waitForSearchFocus();
+    expect(page.rootInstance.mobileSearchBarVisible).toBe(true);
+    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);
+    await page.waitForChanges();
+    await waitForSearchFocus();
+    expect(page.rootInstance.mobileSearchBarVisible).toBe(false);
+  });
+  it("should test nav bar menu visibility", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation, Button, NavigationMenu, SearchBar, TextField],
+      html: `<ic-top-navigation
+      app-title="ApplicationName"
+      status="alpha"
+      version="v0.0.7"
+    >
+    <ic-search-bar label="Search" placeholder="Search" slot="search"></ic-search-bar>
+    </ic-top-navigation>`,
+    });
+    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    await page.waitForChanges();
+    const menuButton = page.root.shadowRoot.querySelector("#menu-button");
+    expect(menuButton).not.toBeNull();
+    expect(page.rootInstance.navMenuVisible).toBe(false);
+    menuButton.click();
+    await page.waitForChanges();
+    expect(page.rootInstance.navMenuVisible).toBe(true);
+    await page.rootInstance.navBarMenuCloseHandler();
+    await page.waitForChanges();
+    expect(page.rootInstance.navMenuVisible).toBe(false);
+  });
+  it("tests short title on mobile devices", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation
+      app-title="Application Name"
+      short-app-title="App Name"
+    >
+    </ic-top-navigation>`,
+    });
+    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot("renders-with-short-title");
+  });
+  it("should test search value change", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation
+      app-title="ApplicationName"
+      status="alpha"
+      version="v0.0.7"
+    >
+    </ic-top-navigation>`,
+    });
+    //test search value change
+    await page.rootInstance.searchValueChangeHandler({
+      detail: { value: "hi!" },
+    });
+    expect(page.rootInstance.searchValue).toBe("hi!");
+    //test search input blur
+    page.rootInstance.mobileSearchBarVisible = true;
+    page.rootInstance.searchButtonClick = false;
+    await page.rootInstance.searchInputBlurHandler({
+      detail: { value: "hi again!" },
+    });
+    expect(page.rootInstance.searchValue).toBe("hi again!");
+  });
+  it("should test theme change", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation
+      app-title="ApplicationName"
+      status="alpha"
+      version="v0.0.7"
+    >
+    </ic-top-navigation>`,
+    });
+    await page.rootInstance.themeChangeHandler({ detail: { mode: "dark" } });
+    await page.waitForChanges();
+    expect(page.rootInstance.foregroundColor).toBe("dark");
+    await page.rootInstance.themeChangeHandler({ detail: { mode: "light" } });
+    await page.waitForChanges();
+    expect(page.rootInstance.foregroundColor).toBe("light");
+    //call runResizeObserver
+    await page.rootInstance.runResizeObserver();
+    //test disconnected callback
+    page.setContent("");
+  });
+});
+//# sourceMappingURL=ic-top-navigation.spec.js.map

package/dist/collection/components/ic-top-navigation/test/basic/ic-top-navigation.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-top-navigation.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-top-navigation/test/basic/ic-top-navigation.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DEVICE_SIZES } from \"../../../../utils/helpers\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { NavigationItem } from \"../../../ic-navigation-item/ic-navigation-item\";\nimport { NavigationMenu } from \"../../../ic-navigation-menu/ic-navigation-menu\";\nimport { SearchBar } from \"../../../ic-search-bar/ic-search-bar\";\nimport { TopNavigation } from \"../../ic-top-navigation\";\nimport { TextField } from \"../../../ic-text-field/ic-text-field\";\nimport { waitForTimeout } from \"../../../../testspec.setup\";\n\nconst waitForSearchFocus = async () => {\n  //delay to account for 100ms delay in search bar focus\n  await waitForTimeout(200);\n};\n\ndescribe(\"ic-top-navigation\", () => {\n  it(\"renders with app title\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation app-title=\"ApplicationName\"></ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-app-title\");\n  });\n\n  it(\"renders with app icon & title\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation app-title=\"ApplicationName\">\n        <svg\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n          />\n        </svg>\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-app-icon-and-title\");\n  });\n\n  it(\"renders with custom title link url\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation app-title=\"ApplicationName\" href=\"https://www.google.co.uk/\">\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-custom-title-link-url\");\n  });\n\n  it(\"renders with Title, Version & Status\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n        app-title=\"ApplicationName\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      ></ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-title-version-status\");\n  });\n\n  it(\"renders with search\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n        app-title=\"ApplicationName\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n      <ic-search-bar slot=\"search\" label=\"Search\" placeholder=\"Search\">\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-search\");\n  });\n\n  it(\"renders with buttons\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n        app-title=\"ApplicationName\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <ic-navigation-button\n          label=\"button1\"\n          slot=\"buttons\"\n          onclick=\"alert('test')\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            fill=\"#000000\"\n          >\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path\n              d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n            />\n          </svg>\n        </ic-navigation-button>\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-buttons\");\n  });\n\n  it(\"renders with navigation\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation, NavigationItem],\n      html: `<ic-top-navigation\n        app-title=\"ApplicationName\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <ic-navigation-item label=\"Navigation 1\" slot=navigation href=\"/\"></ic-navigation-item>\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-navigation\");\n  });\n\n  it(\"tests app title updates\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation app-title=\"ApplicationName\"></ic-top-navigation>`,\n    });\n    const appTitle = await page.root.shadowRoot.querySelector(\"h1\");\n\n    expect(appTitle.textContent).toEqual(\"ApplicationName\");\n    page.root.appTitle = \"New Application Name\";\n    await page.waitForChanges();\n\n    expect(appTitle.textContent).toEqual(\"New Application Name\");\n  });\n\n  it(\"tests form in search slot\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation app-title=\"ApplicationName\">\n      <form role=\"search\" slot=\"search\">\n        <ic-search-bar slot=\"search\" label=\"Search\" placeholder=\"Search\">\n        </ic-search-bar>\n      </form>\n      </ic-top-navigation>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"form-in-search-slot\");\n  });\n\n  it(\"renders with slotted app-title content\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n      <a slot=\"app-title\" href=\"/\">App Title</a>\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-slotted-app-title-content\");\n  });\n\n  it(\"tests behaviour on small device\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation, Button, NavigationMenu, SearchBar, TextField],\n      html: `<ic-top-navigation\n      app-title=\"ApplicationName\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n    >\n    <ic-search-bar label=\"Search\" placeholder=\"Search\" slot=\"search\"></ic-search-bar>\n    </ic-top-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    await page.waitForChanges();\n\n    let searchBtn = page.root.shadowRoot.querySelector(\n      \"#search-toggle-button\"\n    ) as HTMLElement;\n    expect(searchBtn).not.toBeNull();\n\n    searchBtn.click();\n    await page.waitForChanges();\n    await waitForSearchFocus();\n\n    let menuButton = page.root.shadowRoot.querySelector(\n      \"#menu-button\"\n    ) as HTMLElement;\n    expect(menuButton).not.toBeNull();\n    expect(page.rootInstance.searchButtonClick).toBe(false);\n    page.rootInstance.searchButtonMouseDownHandler();\n    expect(page.rootInstance.searchButtonClick).toBe(true);\n\n    searchBtn.click();\n    await page.waitForChanges();\n    await waitForSearchFocus();\n    expect(page.rootInstance.searchButtonClick).toBe(false);\n\n    menuButton.click();\n    await page.waitForChanges();\n\n    let menu = page.root.shadowRoot.querySelector(\"ic-navigation-menu\");\n    expect(menu).not.toBeNull();\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);\n    await page.waitForChanges();\n\n    menu = page.root.shadowRoot.querySelector(\"ic-navigation-menu\");\n    expect(menu).toBeNull();\n\n    searchBtn = page.root.shadowRoot.querySelector(\n      \"#search-toggle-button\"\n    ) as HTMLElement;\n    expect(searchBtn).toBeNull();\n    menuButton = page.root.shadowRoot.querySelector(\n      \"#menu-button\"\n    ) as HTMLElement;\n    expect(menuButton).toBeNull();\n  });\n\n  it(\"tests hiding of mobile search bar on resize\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation, Button, NavigationMenu, SearchBar, TextField],\n      html: `<ic-top-navigation\n      app-title=\"ApplicationName\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n    >\n    <ic-search-bar label=\"Search\" placeholder=\"Search\" slot=\"search\"></ic-search-bar>\n    </ic-top-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    await page.waitForChanges();\n    const searchBtn = page.root.shadowRoot.querySelector(\n      \"#search-toggle-button\"\n    ) as HTMLElement;\n    expect(searchBtn).not.toBeNull();\n\n    searchBtn.click();\n    await page.waitForChanges();\n    await waitForSearchFocus();\n    expect(page.rootInstance.mobileSearchBarVisible).toBe(true);\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);\n    await page.waitForChanges();\n    await waitForSearchFocus();\n    expect(page.rootInstance.mobileSearchBarVisible).toBe(false);\n  });\n\n  it(\"should test nav bar menu visibility\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation, Button, NavigationMenu, SearchBar, TextField],\n      html: `<ic-top-navigation\n      app-title=\"ApplicationName\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n    >\n    <ic-search-bar label=\"Search\" placeholder=\"Search\" slot=\"search\"></ic-search-bar>\n    </ic-top-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    await page.waitForChanges();\n\n    const menuButton = page.root.shadowRoot.querySelector(\n      \"#menu-button\"\n    ) as HTMLElement;\n    expect(menuButton).not.toBeNull();\n    expect(page.rootInstance.navMenuVisible).toBe(false);\n    menuButton.click();\n    await page.waitForChanges();\n    expect(page.rootInstance.navMenuVisible).toBe(true);\n    await page.rootInstance.navBarMenuCloseHandler();\n    await page.waitForChanges();\n    expect(page.rootInstance.navMenuVisible).toBe(false);\n  });\n\n  it(\"tests short title on mobile devices\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n      app-title=\"Application Name\"\n      short-app-title=\"App Name\"\n    >\n    </ic-top-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    await page.waitForChanges();\n    expect(page.root).toMatchSnapshot(\"renders-with-short-title\");\n  });\n\n  it(\"should test search value change\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n      app-title=\"ApplicationName\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n    >\n    </ic-top-navigation>`,\n    });\n\n    //test search value change\n    await page.rootInstance.searchValueChangeHandler({\n      detail: { value: \"hi!\" },\n    });\n    expect(page.rootInstance.searchValue).toBe(\"hi!\");\n\n    //test search input blur\n    page.rootInstance.mobileSearchBarVisible = true;\n    page.rootInstance.searchButtonClick = false;\n    await page.rootInstance.searchInputBlurHandler({\n      detail: { value: \"hi again!\" },\n    });\n    expect(page.rootInstance.searchValue).toBe(\"hi again!\");\n  });\n\n  it(\"should test theme change\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n      app-title=\"ApplicationName\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n    >\n    </ic-top-navigation>`,\n    });\n\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"dark\" } });\n    await page.waitForChanges();\n    expect(page.rootInstance.foregroundColor).toBe(\"dark\");\n\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"light\" } });\n    await page.waitForChanges();\n    expect(page.rootInstance.foregroundColor).toBe(\"light\");\n\n    //call runResizeObserver\n    await page.rootInstance.runResizeObserver();\n\n    //test disconnected callback\n    page.setContent(\"\");\n  });\n});\n"]}

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

@@ -443,6 +443,7 @@ video {
 
 :host {
   display: block;
+  position: relative;
 }
 
 :host(.ic-typography-vertical-margins-h1) {
@@ -463,7 +464,10 @@ video {
 
 :host(.ic-typography-vertical-margins-subtitle-large),
 :host(.ic-typography-vertical-margins-subtitle-small),
-:host(.ic-typography-vertical-margins-body) {
+:host(.ic-typography-vertical-margins-body),
+:host(.ic-typography-vertical-margins-code-large),
+:host(.ic-typography-vertical-margins-code-small),
+:host(.ic-typography-vertical-margins-code-extra-small) {
   margin: 0 0 var(--ic-space-md);
 }
 
@@ -533,6 +537,21 @@ video {
   text-transform: uppercase;
 }
 
+:host(.ic-typography-code-large) {
+  font: var(--ic-font-code-large);
+  letter-spacing: var(--ic-font-letter-spacing-0pt025);
+}
+
+:host(.ic-typography-code-small) {
+  font: var(--ic-font-code-small);
+  letter-spacing: var(--ic-font-letter-spacing-0pt005);
+}
+
+:host(.ic-typography-code-extra-small) {
+  font: var(--ic-font-code-extra-small);
+  letter-spacing: var(--ic-font-letter-spacing-0pt025);
+}
+
 :host(.ic-typography-no-wrap) {
   white-space: nowrap;
 }
@@ -548,3 +567,41 @@ video {
   font: inherit;
   letter-spacing: inherit;
 }
+
+.trunc-wrapper {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  line-clamp: var(--truncation-max-lines, initial);
+  -webkit-line-clamp: var(--truncation-max-lines, initial);
+  overflow: hidden;
+}
+
+.trunc-btn {
+  border: none;
+  background: none;
+  padding: 0;
+  color: var(--ic-color-primary-text);
+  text-decoration: underline;
+  font-weight: var(--ic-font-weight-bold);
+  transition: var(--ic-easing-transition-fast);
+}
+
+.trunc-btn:hover,
+.trunc-btn.focus {
+  outline: none;
+  border-bottom: var(--ic-space-xxs) solid !important;
+  margin-bottom: calc(-1 * var(--ic-space-xxs)) !important;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+@supports (text-decoration-thickness: 25%) {
+  .trunc-btn:hover,
+  .trunc-btn.focus {
+    text-decoration-line: underline;
+    text-decoration-thickness: 25%;
+    text-underline-offset: 25%;
+    border-bottom: 0 !important;
+    margin-bottom: 0 !important;
+  }
+}

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

@@ -1,15 +1,103 @@
 import { h, Host } from "@stencil/core";
+import { checkResizeObserver } from "../../utils/helpers";
 export class Typography {
   constructor() {
-    this.variant = "body";
+    this.focusBtnFromKeyboard = true;
+    this.lastMarkerTop = 0;
+    this.lastWidth = 0;
+    this.resizeObserver = null;
+    this.truncatedHeight = 0;
+    this.toggleExpanded = () => {
+      this.expanded = !this.expanded;
+    };
+    this.checkMaxLines = (height) => {
+      //24 is the height of a single line
+      const numLines = Math.floor(height / 24);
+      if (numLines > this.maxLines) {
+        this.el.setAttribute("style", `--truncation-max-lines: ${this.maxLines}`);
+        this.truncatedHeight = this.el.clientHeight;
+        this.truncated = true;
+      }
+    };
+    this.checkMarkerPosition = (elTop, markerTop) => {
+      if (markerTop - elTop < this.truncatedHeight) {
+        this.truncated = false;
+        this.expanded = false;
+      }
+      else {
+        this.truncated = true;
+      }
+    };
+    this.getElementTop = (el) => {
+      return el.getClientRects ? el.getClientRects()[0].top : 0;
+    };
+    this.runResizeObserver = () => {
+      this.resizeObserver = new ResizeObserver(() => {
+        clearTimeout(this.resizeInterval);
+        this.resizeInterval = window.setTimeout(this.resizeObserverCallback, 50);
+      });
+      this.resizeObserver.observe(this.truncWrapperEl);
+    };
+    this.resizeObserverCallback = () => {
+      if (this.lastWidth === this.el.clientWidth) {
+        return;
+      }
+      if (this.truncatedHeight === 0) {
+        this.checkMaxLines(this.el.clientHeight);
+        return;
+      }
+      const markerTop = this.getElementTop(this.marker);
+      if (markerTop === this.lastMarkerTop) {
+        return;
+      }
+      this.checkMarkerPosition(this.getElementTop(this.el), markerTop);
+      this.lastMarkerTop = markerTop;
+      this.lastWidth = this.el.clientWidth;
+    };
+    this.truncButtonFocus = () => {
+      if (this.focusBtnFromKeyboard) {
+        this.truncButtonFocussed = true;
+      }
+    };
+    this.truncButtonBlur = () => {
+      this.focusBtnFromKeyboard = true;
+      this.truncButtonFocussed = false;
+    };
+    this.truncButtonFocusFromMouse = () => {
+      this.focusBtnFromKeyboard = false;
+    };
+    this.truncated = false;
+    this.truncButtonFocussed = false;
     this.applyVerticalMargins = false;
+    this.maxLines = undefined;
+    this.variant = "body";
+    this.expanded = false;
+  }
+  watchExpandedHandler() {
+    this.el.setAttribute("style", `--truncation-max-lines: ${this.expanded ? "initial" : this.maxLines}`);
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver !== null) {
+      this.resizeObserver.disconnect();
+    }
+  }
+  componentDidLoad() {
+    if (this.variant === "body" && this.maxLines > 0) {
+      const marker = document.createElement("span");
+      marker.style.visibility = "hidden";
+      this.el.appendChild(marker);
+      this.marker = marker;
+      this.lastWidth = this.el.clientWidth;
+      this.checkMaxLines(this.el.clientHeight);
+      checkResizeObserver(this.runResizeObserver);
+    }
   }
   render() {
-    const { variant, applyVerticalMargins } = this;
+    const { variant, applyVerticalMargins, maxLines, truncated, expanded } = this;
     return (h(Host, { class: {
         [`ic-typography-${variant}`]: true,
         [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,
-      } }, h("slot", null)));
+      } }, variant === "body" && maxLines > 0 ? (h("div", { class: "trunc-wrapper", ref: (el) => (this.truncWrapperEl = el) }, h("slot", null))) : (h("slot", null)), variant === "body" && maxLines > 0 && truncated && (h("button", { class: { "trunc-btn": true, focus: this.truncButtonFocussed }, onFocus: this.truncButtonFocus, onBlur: this.truncButtonBlur, onMouseDown: this.truncButtonFocusFromMouse, onClick: this.toggleExpanded, "aria-hidden": "true" }, expanded ? "See less" : "See more"))));
   }
   static get is() { return "ic-typography"; }
   static get encapsulation() { return "shadow"; }
@@ -25,12 +113,47 @@ export class Typography {
   }
   static get properties() {
     return {
+      "applyVerticalMargins": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, appropriate top and bottom margins will be applied to the typography."
+        },
+        "attribute": "apply-vertical-margins",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "maxLines": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The number of lines to display before truncating the text, only used for the 'body' variant."
+        },
+        "attribute": "max-lines",
+        "reflect": false
+      },
       "variant": {
         "type": "string",
         "mutable": false,
         "complexType": {
           "original": "IcTypographyVariants",
-          "resolved": "\"body\" | \"caption\" | \"caption-uppercase\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"label\" | \"label-uppercase\" | \"subtitle-large\" | \"subtitle-small\"",
+          "resolved": "\"body\" | \"caption\" | \"caption-uppercase\" | \"code-extra-small\" | \"code-large\" | \"code-small\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"label\" | \"label-uppercase\" | \"subtitle-large\" | \"subtitle-small\"",
           "references": {
             "IcTypographyVariants": {
               "location": "import",
@@ -47,27 +170,22 @@ export class Typography {
         "attribute": "variant",
         "reflect": false,
         "defaultValue": "\"body\""
-      },
-      "applyVerticalMargins": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, appropriate top and bottom margins will be applied to the typography."
-        },
-        "attribute": "apply-vertical-margins",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }
+  static get states() {
+    return {
+      "truncated": {},
+      "truncButtonFocussed": {},
+      "expanded": {}
+    };
+  }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "expanded",
+        "methodName": "watchExpandedHandler"
+      }];
+  }
 }
 //# sourceMappingURL=ic-typography.js.map

package/dist/collection/components/ic-typography/ic-typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-typography.js","sourceRoot":"","sources":["../../../src/components/ic-typography/ic-typography.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASlE,MAAM,OAAO,UAAU;;mBAMoB,MAAM;gCAKN,KAAK;;EAE9C,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,oBAAoB,EAAE,GAAG,IAAI,CAAC;IAE/C,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,iBAAiB,OAAO,EAAE,CAAC,EAAE,IAAI;QAClC,CAAC,kCAAkC,OAAO,EAAE,CAAC,EAAE,oBAAoB;OACpE;MAED,eAAQ,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Element, Host } from \"@stencil/core\";\n\nimport { IcTypographyVariants } from \"../../utils/types\";\n\n@Component({\n  styleUrl: \"ic-typography.css\",\n  tag: \"ic-typography\",\n  shadow: true,\n})\nexport class Typography {\n  @Element() el: HTMLIcTypographyElement;\n\n  /**\n   * The ICDS typography style to use.\n   */\n  @Prop() variant?: IcTypographyVariants = \"body\";\n\n  /**\n   * If `true`, appropriate top and bottom margins will be applied to the typography.\n   */\n  @Prop() applyVerticalMargins?: boolean = false;\n\n  render() {\n    const { variant, applyVerticalMargins } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-typography-${variant}`]: true,\n          [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-typography.js","sourceRoot":"","sources":["../../../src/components/ic-typography/ic-typography.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Host, State, Watch } from \"@stencil/core\";\n\nimport { IcTypographyVariants } from \"../../utils/types\";\nimport { checkResizeObserver } from \"../../utils/helpers\";\n\n@Component({\n  styleUrl: \"ic-typography.css\",\n  tag: \"ic-typography\",\n  shadow: true,\n})\nexport class Typography {\n  private focusBtnFromKeyboard: boolean = true;\n  private lastMarkerTop: number = 0;\n  private lastWidth: number = 0;\n  private marker: HTMLElement;\n  private resizeInterval: number;\n  private resizeObserver: ResizeObserver = null;\n  private truncatedHeight: number = 0;\n  private truncWrapperEl: Element;\n\n  @Element() el: HTMLIcTypographyElement;\n\n  @State() truncated: boolean = false;\n  @State() truncButtonFocussed: boolean = false;\n\n  /**\n   * If `true`, appropriate top and bottom margins will be applied to the typography.\n   */\n  @Prop() applyVerticalMargins?: boolean = false;\n\n  /**\n   * The number of lines to display before truncating the text, only used for the 'body' variant.\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * The ICDS typography style to use.\n   */\n  @Prop() variant?: IcTypographyVariants = \"body\";\n\n  @State() expanded: boolean = false;\n\n  @Watch(\"expanded\")\n  watchExpandedHandler(): void {\n    this.el.setAttribute(\n      \"style\",\n      `--truncation-max-lines: ${this.expanded ? \"initial\" : this.maxLines}`\n    );\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentDidLoad(): void {\n    if (this.variant === \"body\" && this.maxLines > 0) {\n      const marker = document.createElement(\"span\");\n      marker.style.visibility = \"hidden\";\n      this.el.appendChild(marker);\n      this.marker = marker;\n      this.lastWidth = this.el.clientWidth;\n      this.checkMaxLines(this.el.clientHeight);\n      checkResizeObserver(this.runResizeObserver);\n    }\n  }\n\n  private toggleExpanded = () => {\n    this.expanded = !this.expanded;\n  };\n\n  private checkMaxLines = (height: number) => {\n    //24 is the height of a single line\n    const numLines = Math.floor(height / 24);\n    if (numLines > this.maxLines) {\n      this.el.setAttribute(\"style\", `--truncation-max-lines: ${this.maxLines}`);\n      this.truncatedHeight = this.el.clientHeight;\n      this.truncated = true;\n    }\n  };\n\n  private checkMarkerPosition = (elTop: number, markerTop: number) => {\n    if (markerTop - elTop < this.truncatedHeight) {\n      this.truncated = false;\n      this.expanded = false;\n    } else {\n      this.truncated = true;\n    }\n  };\n\n  private getElementTop = (el: HTMLElement) => {\n    return el.getClientRects ? el.getClientRects()[0].top : 0;\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      clearTimeout(this.resizeInterval);\n      this.resizeInterval = window.setTimeout(this.resizeObserverCallback, 50);\n    });\n    this.resizeObserver.observe(this.truncWrapperEl);\n  };\n\n  private resizeObserverCallback = () => {\n    if (this.lastWidth === this.el.clientWidth) {\n      return;\n    }\n\n    if (this.truncatedHeight === 0) {\n      this.checkMaxLines(this.el.clientHeight);\n      return;\n    }\n\n    const markerTop = this.getElementTop(this.marker);\n    if (markerTop === this.lastMarkerTop) {\n      return;\n    }\n\n    this.checkMarkerPosition(this.getElementTop(this.el), markerTop);\n    this.lastMarkerTop = markerTop;\n    this.lastWidth = this.el.clientWidth;\n  };\n\n  private truncButtonFocus = (): void => {\n    if (this.focusBtnFromKeyboard) {\n      this.truncButtonFocussed = true;\n    }\n  };\n\n  private truncButtonBlur = (): void => {\n    this.focusBtnFromKeyboard = true;\n    this.truncButtonFocussed = false;\n  };\n\n  private truncButtonFocusFromMouse = (): void => {\n    this.focusBtnFromKeyboard = false;\n  };\n\n  render() {\n    const { variant, applyVerticalMargins, maxLines, truncated, expanded } =\n      this;\n\n    return (\n      <Host\n        class={{\n          [`ic-typography-${variant}`]: true,\n          [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,\n        }}\n      >\n        {variant === \"body\" && maxLines > 0 ? (\n          <div class=\"trunc-wrapper\" ref={(el) => (this.truncWrapperEl = el)}>\n            <slot />\n          </div>\n        ) : (\n          <slot />\n        )}\n        {variant === \"body\" && maxLines > 0 && truncated && (\n          <button\n            class={{ \"trunc-btn\": true, focus: this.truncButtonFocussed }}\n            onFocus={this.truncButtonFocus}\n            onBlur={this.truncButtonBlur}\n            onMouseDown={this.truncButtonFocusFromMouse}\n            onClick={this.toggleExpanded}\n            aria-hidden=\"true\"\n          >\n            {expanded ? \"See less\" : \"See more\"}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-typography/{ic-typography.test.a11y.js → test/a11y/ic-typography.test.a11y.js}

@@ -1,6 +1,6 @@
 import { fixture } from "@open-wc/testing-helpers";
 import { axe } from "jest-axe";
-import { checkShadowElementRendersCorrectly } from "../../utils/testa11y.helpers";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
 describe("ic-typography", () => {
   it("passes accessibility", async () => {
     const el = await fixture(`<ic-typography variant="h1">Typography component</ic-typography>`);