@ukic/canary-web-components 2.0.0-canary.4 → 2.0.0-canary.41

package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.stories.js

@@ -0,0 +1,98 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { html } from "lit-html";
+import readme from "./readme.md";
+export default {
+    title: "Web Components/Data Table Title Bar",
+    component: "ic-data-table-title-bar",
+    parameters: {
+        componentAPI: {
+            data: readme,
+        },
+    },
+};
+/**
+ * Use the data table title bar component to provide titling, description, metadata and also global table functionality.
+ *
+ * By default, the density selector appears within the data table title bar. The three density options are:
+ * - Default
+ * - Dense
+ * - Spacious
+ */
+export const Basic = {
+    render: () => html `<ic-data-table-title-bar
+      heading="Title Bar"
+    ></ic-data-table-title-bar>`,
+    name: "Basic",
+    height: "220px",
+};
+/**
+ * Custom elements can be passed into the areas which contain the title bar heading and description. This flexibility allows the heading tag to be updated if the default heading level (i.e. `h3`) is not semantically correct.
+ */
+export const Slots = {
+    render: () => html `
+    <ic-data-table-title-bar>
+      <ic-typography slot="heading" variant="h1"
+        ><h3>Title Bar</h3></ic-typography
+      >
+      <div slot="description">
+        <ic-chip label="Chip"></ic-chip>
+        <ic-chip label="Chip"></ic-chip>
+      </div>
+    </ic-data-table-title-bar>
+  `,
+    name: "Slots",
+    height: "220px",
+};
+/**
+ * Data table metadata and description can be added to the data table title bar via the `metadata` and `description` props.
+ */
+export const WithMetadataAndDescription = {
+    render: () => html `<ic-data-table-title-bar
+      heading="Title Bar"
+      metadata="128 items | 32gb | Updated: 01/02/03"
+      description="Data table description that describes the purpose of the table."
+    ></ic-data-table-title-bar>`,
+    name: "With metadata and description",
+    height: "220px",
+};
+/**
+ * By default, the density selector is displayed on the data table title bar. To hide it, set `hide-density-select` to `true`.
+ */
+export const HideDensitySelector = {
+    render: () => html `<ic-data-table-title-bar
+      hide-density-select="true"
+      heading="Title Bar"
+      metadata="128 items | 32gb | Updated: 01/02/03"
+      description="Data table description that describes the purpose of the table."
+    ></ic-data-table-title-bar>`,
+    name: "Hide density selector",
+};
+/**
+ * Custom actions can be added to the data table title bar via slots. There are two slots available:
+ * - `primary-action` is suitable for a primary button. The custom element will appear to the right of the data table title bar.
+ * - `custom-actions` can be used for secondary actions. The custom element will appear to the left of the density selector if displayed.
+ */
+export const CustomActions = {
+    render: () => html `<ic-data-table-title-bar
+      heading="Title Bar"
+      metadata="128 items | 32gb | Updated: 01/02/03"
+      description="Data table description that describes the purpose of the table."
+    >
+      <ic-button slot="primary-action" size="small">Primary</ic-button>
+      <ic-button slot="custom-actions" variant="icon" aria-label="Icon Button">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewBox="0 -960 960 960"
+          width="24"
+        >
+          <path
+            d="M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm56-97h489L578-473 446-302l-93-127-117 152Zm-56 97v-600 600Z"
+          />
+        </svg>
+      </ic-button>
+    </ic-data-table-title-bar>`,
+    name: "Custom actions",
+    height: "220px",
+};
+//# sourceMappingURL=ic-data-table-title-bar.stories.js.map

package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-data-table-title-bar.stories.js","sourceRoot":"","sources":["../../../src/components/ic-data-table-title-bar/ic-data-table-title-bar.stories.js"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,qCAAqC;IAC5C,SAAS,EAAE,yBAAyB;IAEpC,UAAU,EAAE;QACV,YAAY,EAAE;YACZ,IAAI,EAAE,MAAM;SACb;KACF;CACF,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;gCAEwB;IAE9B,IAAI,EAAE,OAAO;IACb,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;GAUjB;IAED,IAAI,EAAE,OAAO;IACb,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACxC,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;gCAIwB;IAE9B,IAAI,EAAE,+BAA+B;IACrC,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;gCAKwB;IAE9B,IAAI,EAAE,uBAAuB;CAC9B,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;;;;;;;+BAkBuB;IAE7B,IAAI,EAAE,gBAAgB;IACtB,MAAM,EAAE,OAAO;CAChB,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { html } from \"lit-html\";\nimport readme from \"./readme.md\";\n\nexport default {\n  title: \"Web Components/Data Table Title Bar\",\n  component: \"ic-data-table-title-bar\",\n\n  parameters: {\n    componentAPI: {\n      data: readme,\n    },\n  },\n};\n\n/**\n * Use the data table title bar component to provide titling, description, metadata and also global table functionality.\n *\n * By default, the density selector appears within the data table title bar. The three density options are:\n * - Default\n * - Dense\n * - Spacious\n */\nexport const Basic = {\n  render: () =>\n    html`<ic-data-table-title-bar\n      heading=\"Title Bar\"\n    ></ic-data-table-title-bar>`,\n\n  name: \"Basic\",\n  height: \"220px\",\n};\n\n/**\n * Custom elements can be passed into the areas which contain the title bar heading and description. This flexibility allows the heading tag to be updated if the default heading level (i.e. `h3`) is not semantically correct.\n */\nexport const Slots = {\n  render: () => html`\n    <ic-data-table-title-bar>\n      <ic-typography slot=\"heading\" variant=\"h1\"\n        ><h3>Title Bar</h3></ic-typography\n      >\n      <div slot=\"description\">\n        <ic-chip label=\"Chip\"></ic-chip>\n        <ic-chip label=\"Chip\"></ic-chip>\n      </div>\n    </ic-data-table-title-bar>\n  `,\n\n  name: \"Slots\",\n  height: \"220px\",\n};\n\n/**\n * Data table metadata and description can be added to the data table title bar via the `metadata` and `description` props.\n */\nexport const WithMetadataAndDescription = {\n  render: () =>\n    html`<ic-data-table-title-bar\n      heading=\"Title Bar\"\n      metadata=\"128 items | 32gb | Updated: 01/02/03\"\n      description=\"Data table description that describes the purpose of the table.\"\n    ></ic-data-table-title-bar>`,\n\n  name: \"With metadata and description\",\n  height: \"220px\",\n};\n\n/**\n * By default, the density selector is displayed on the data table title bar. To hide it, set `hide-density-select` to `true`.\n */\nexport const HideDensitySelector = {\n  render: () =>\n    html`<ic-data-table-title-bar\n      hide-density-select=\"true\"\n      heading=\"Title Bar\"\n      metadata=\"128 items | 32gb | Updated: 01/02/03\"\n      description=\"Data table description that describes the purpose of the table.\"\n    ></ic-data-table-title-bar>`,\n\n  name: \"Hide density selector\",\n};\n\n/**\n * Custom actions can be added to the data table title bar via slots. There are two slots available:\n * - `primary-action` is suitable for a primary button. The custom element will appear to the right of the data table title bar.\n * - `custom-actions` can be used for secondary actions. The custom element will appear to the left of the density selector if displayed.\n */\nexport const CustomActions = {\n  render: () =>\n    html`<ic-data-table-title-bar\n      heading=\"Title Bar\"\n      metadata=\"128 items | 32gb | Updated: 01/02/03\"\n      description=\"Data table description that describes the purpose of the table.\"\n    >\n      <ic-button slot=\"primary-action\" size=\"small\">Primary</ic-button>\n      <ic-button slot=\"custom-actions\" variant=\"icon\" aria-label=\"Icon Button\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24\"\n          viewBox=\"0 -960 960 960\"\n          width=\"24\"\n        >\n          <path\n            d=\"M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm56-97h489L578-473 446-302l-93-127-117 152Zm-56 97v-600 600Z\"\n          />\n        </svg>\n      </ic-button>\n    </ic-data-table-title-bar>`,\n\n  name: \"Custom actions\",\n  height: \"220px\",\n};\n"]}

package/dist/collection/components/ic-data-table-title-bar/test/a11y/ic-data-table-title-bar.test.a11y.js

@@ -0,0 +1,11 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
+describe("ic-data-table-title-bar", () => {
+    it("passes accessibility", async () => {
+        const el = await fixture(`<ic-data-table-title-bar heading="header" description="desc" metadata="meta"></ic-data-table-title-bar>`);
+        checkShadowElementRendersCorrectly(el);
+        expect(await axe(el)).toHaveNoViolations();
+    });
+});
+//# sourceMappingURL=ic-data-table-title-bar.test.a11y.js.map

package/dist/collection/components/ic-data-table-title-bar/test/a11y/ic-data-table-title-bar.test.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-data-table-title-bar.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-table-title-bar/test/a11y/ic-data-table-title-bar.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACvC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,yGAAyG,CAC1G,CAAC;QACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"ic-data-table-title-bar\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      `<ic-data-table-title-bar heading=\"header\" description=\"desc\" metadata=\"meta\"></ic-data-table-title-bar>`\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-data-table-title-bar/test/basic/ic-data-table-title-bar.spec.js

@@ -0,0 +1,70 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { h } from "@stencil/core";
+import { DataTableTitleBar } from "../../ic-data-table-title-bar";
+beforeAll(() => {
+    jest.spyOn(console, "warn").mockImplementation(jest.fn());
+});
+describe("ic-data-table-title-bar", () => {
+    it("should render", async () => {
+        const page = await newSpecPage({
+            components: [DataTableTitleBar],
+            template: () => (h("ic-data-table-title-bar", { heading: "header" })),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render with description and metadata", async () => {
+        const page = await newSpecPage({
+            components: [DataTableTitleBar],
+            template: () => (h("ic-data-table-title-bar", { heading: "header", metadata: "metadata", description: "desc" })),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render with slotted actions", async () => {
+        const page = await newSpecPage({
+            components: [DataTableTitleBar],
+            template: () => (h("ic-data-table-title-bar", { heading: "header" }, h("ic-button", { slot: "primary-action" }, "1"), h("ic-button", { slot: "custom-actions" }, "2"), h("ic-button", { slot: "custom-actions" }, "3"))),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render with slotted header and description", async () => {
+        const page = await newSpecPage({
+            components: [DataTableTitleBar],
+            template: () => (h("ic-data-table-title-bar", null, h("ic-typography", { slot: "heading" }, "slotted header"), h("ic-typography", { slot: "description" }, "slotted desc"))),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should not render the actions area if hideDensitySelect is true and there are no slotted elements", async () => {
+        const page = await newSpecPage({
+            components: [DataTableTitleBar],
+            template: () => (h("ic-data-table-title-bar", { heading: "header", hideDensitySelect: true })),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render the description area if the description is slotted and there is no action area", async () => {
+        const page = await newSpecPage({
+            components: [DataTableTitleBar],
+            template: () => (h("ic-data-table-title-bar", { heading: "header", hideDensitySelect: true }, h("ic-typography", { slot: "description" }, "slotted desc"))),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should emit the icTableDensityUpdate when the density select is updated", async () => {
+        const page = await newSpecPage({
+            components: [DataTableTitleBar],
+            template: () => (h("ic-data-table-title-bar", { heading: "header" })),
+        });
+        const eventSpy = jest.fn();
+        page.root.addEventListener("icTableDensityUpdate", eventSpy);
+        const icChange = new CustomEvent("icChange", {
+            detail: { value: "dense" },
+        });
+        const icSelect = page.root.shadowRoot.querySelector("ic-select");
+        icSelect.dispatchEvent(icChange);
+        await page.waitForChanges();
+        expect(eventSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: expect.objectContaining({
+                value: "dense",
+            }),
+        }));
+    });
+});
+//# sourceMappingURL=ic-data-table-title-bar.spec.js.map

package/dist/collection/components/ic-data-table-title-bar/test/basic/ic-data-table-title-bar.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-data-table-title-bar.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-table-title-bar/test/basic/ic-data-table-title-bar.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { h } from \"@stencil/core\";\nimport { DataTableTitleBar } from \"../../ic-data-table-title-bar\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-data-table-title-bar\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [DataTableTitleBar],\n      template: () => (\n        <ic-data-table-title-bar heading=\"header\"></ic-data-table-title-bar>\n      ),\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with description and metadata\", async () => {\n    const page = await newSpecPage({\n      components: [DataTableTitleBar],\n      template: () => (\n        <ic-data-table-title-bar\n          heading=\"header\"\n          metadata=\"metadata\"\n          description=\"desc\"\n        ></ic-data-table-title-bar>\n      ),\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with slotted actions\", async () => {\n    const page = await newSpecPage({\n      components: [DataTableTitleBar],\n      template: () => (\n        <ic-data-table-title-bar heading=\"header\">\n          <ic-button slot=\"primary-action\">1</ic-button>\n          <ic-button slot=\"custom-actions\">2</ic-button>\n          <ic-button slot=\"custom-actions\">3</ic-button>\n        </ic-data-table-title-bar>\n      ),\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with slotted header and description\", async () => {\n    const page = await newSpecPage({\n      components: [DataTableTitleBar],\n      template: () => (\n        <ic-data-table-title-bar>\n          <ic-typography slot=\"heading\">slotted header</ic-typography>\n          <ic-typography slot=\"description\">slotted desc</ic-typography>\n        </ic-data-table-title-bar>\n      ),\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should not render the actions area if hideDensitySelect is true and there are no slotted elements\", async () => {\n    const page = await newSpecPage({\n      components: [DataTableTitleBar],\n      template: () => (\n        <ic-data-table-title-bar\n          heading=\"header\"\n          hideDensitySelect={true}\n        ></ic-data-table-title-bar>\n      ),\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render the description area if the description is slotted and there is no action area\", async () => {\n    const page = await newSpecPage({\n      components: [DataTableTitleBar],\n      template: () => (\n        <ic-data-table-title-bar heading=\"header\" hideDensitySelect={true}>\n          <ic-typography slot=\"description\">slotted desc</ic-typography>\n        </ic-data-table-title-bar>\n      ),\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should emit the icTableDensityUpdate when the density select is updated\", async () => {\n    const page = await newSpecPage({\n      components: [DataTableTitleBar],\n      template: () => (\n        <ic-data-table-title-bar heading=\"header\"></ic-data-table-title-bar>\n      ),\n    });\n\n    const eventSpy = jest.fn();\n    page.root.addEventListener(\"icTableDensityUpdate\", eventSpy);\n\n    const icChange = new CustomEvent(\"icChange\", {\n      detail: { value: \"dense\" },\n    });\n    const icSelect = page.root.shadowRoot.querySelector(\"ic-select\");\n    icSelect.dispatchEvent(icChange);\n\n    await page.waitForChanges();\n    expect(eventSpy).toHaveBeenCalledWith(\n      expect.objectContaining({\n        detail: expect.objectContaining({\n          value: \"dense\",\n        }),\n      })\n    );\n  });\n});\n"]}