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

package/dist/collection/components/ic-loading-indicator/test/basic/ic-loading-indicator.spec.js

@@ -0,0 +1,141 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { LoadingIndicator } from "../../ic-loading-indicator";
+import { Typography } from "../../../ic-typography/ic-typography";
+import { waitForTimeout } from "../../../../testspec.setup";
+let page;
+beforeAll(() => {
+  jest.spyOn(console, "warn").mockImplementation(jest.fn());
+});
+afterEach(() => {
+  page.setContent("");
+});
+describe("ic-loading-indicator component", () => {
+  it("should render an indeterminate loading indicator with the correct label and set aria-labelledby", async () => {
+    page = await newSpecPage({
+      components: [LoadingIndicator, Typography],
+      html: `<ic-loading-indicator label="IC Loading Indicator Test"></ic-loading-indicator>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render a determinate loading indicator with the correct label and aria", async () => {
+    page = await newSpecPage({
+      components: [LoadingIndicator, Typography],
+      html: `<ic-loading-indicator progress="30" label="IC Loading Indicator Test"></ic-loading-indicator>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should not display a label is the size is 'icon'", async () => {
+    page = await newSpecPage({
+      components: [LoadingIndicator, Typography],
+      html: `<ic-loading-indicator label="IC Loading Indicator Test" size="icon"></ic-loading-indicator>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should set the typography variant for the label to 'label' for the 'small' size", async () => {
+    page = await newSpecPage({
+      components: [LoadingIndicator, Typography],
+      html: `<ic-loading-indicator label="IC Loading Indicator Test" size="small"></ic-loading-indicator>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should set the typography variant for the label to 'h4' for the 'default' size", async () => {
+    page = await newSpecPage({
+      components: [LoadingIndicator, Typography],
+      html: `<ic-loading-indicator label="IC Loading Indicator Test"></ic-loading-indicator>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should set the typography variant for the label to 'h2' for the 'large' size", async () => {
+    page = await newSpecPage({
+      components: [LoadingIndicator, Typography],
+      html: `<ic-loading-indicator label="IC Loading Indicator Test" size="large"></ic-loading-indicator>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should apply the description prop as an aria-label", async () => {
+    page = await newSpecPage({
+      components: [LoadingIndicator, Typography],
+      html: `<ic-loading-indicator description="IC Loading Indicator Test"></ic-loading-indicator>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should be styled correctly by setting the class names for the chosen indicator type", async () => {
+    page = await newSpecPage({
+      components: [LoadingIndicator, Typography],
+      html: `<ic-loading-indicator type="linear"></ic-loading-indicator>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should set the correct aria if min and max are provided", async () => {
+    page = await newSpecPage({
+      components: [LoadingIndicator, Typography],
+      html: `<ic-loading-indicator progress="30" min="10" max="50"></ic-loading-indicator>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should update label after label-duration passed", async () => {
+    page = await newSpecPage({
+      components: [LoadingIndicator, Typography],
+      html: `<ic-loading-indicator label="waiting/still waiting" label-duration="2000"></ic-loading-indicator>`,
+    });
+    expect(page.rootInstance.indicatorLabel).toEqual("waiting");
+    await waitForTimeout(2001);
+    await page.waitForChanges();
+    expect(page.rootInstance.indicatorLabel).toEqual("still waiting");
+    await waitForTimeout(2001);
+    await page.waitForChanges();
+    expect(page.rootInstance.indicatorLabel).toEqual("waiting");
+  });
+  it("should render linear determinate progress bar", async () => {
+    page = await newSpecPage({
+      components: [LoadingIndicator, Typography],
+      html: `<ic-loading-indicator progress="30" min="10" max="50" type='linear'></ic-loading-indicator>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render linear indeterminate progress bar", async () => {
+    page = await newSpecPage({
+      components: [LoadingIndicator, Typography],
+      html: `<ic-loading-indicator type='linear'></ic-loading-indicator>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should test updating label and progress props", async () => {
+    page = await newSpecPage({
+      components: [LoadingIndicator, Typography],
+      html: `<ic-loading-indicator label="IC Loading Indicator Test" size="large"></ic-loading-indicator>`,
+    });
+    expect(page.rootInstance.label).toBe("IC Loading Indicator Test");
+    page.root.label = "New label";
+    page.root.progress = 20;
+    await page.waitForChanges();
+    expect(page.rootInstance.label).toBe("New label");
+    expect(page.rootInstance.progress).toBe(20);
+  });
+  it("should test updating progress - linear", async () => {
+    page = await newSpecPage({
+      components: [LoadingIndicator, Typography],
+      html: `<ic-loading-indicator progress="10" min="10" max="50" type='linear'></ic-loading-indicator>`,
+    });
+    expect(page.rootInstance.progress).toBe(10);
+    page.root.progress = 20;
+    await page.waitForChanges();
+    expect(page.rootInstance.progress).toBe(20);
+  });
+  it("should test setting circularDiameter", async () => {
+    page = await newSpecPage({
+      components: [LoadingIndicator, Typography],
+      html: `<ic-loading-indicator label="IC Loading Indicator Test"></ic-loading-indicator>`,
+    });
+    page.root.progress = "20";
+    await page.waitForChanges();
+    page.rootInstance.circularDiameter = "100";
+    await page.waitForChanges();
+    page.rootInstance.setCircleXY();
+    await page.waitForChanges();
+    const circle = page.root.shadowRoot.querySelector("svg circle");
+    const x = circle.getAttribute("cx");
+    expect(x).toBe("50");
+  });
+});
+//# sourceMappingURL=ic-loading-indicator.spec.js.map

package/dist/collection/components/ic-loading-indicator/test/basic/ic-loading-indicator.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-loading-indicator.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-loading-indicator/test/basic/ic-loading-indicator.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage, SpecPage } from \"@stencil/core/testing\";\nimport { LoadingIndicator } from \"../../ic-loading-indicator\";\nimport { Typography } from \"../../../ic-typography/ic-typography\";\nimport { waitForTimeout } from \"../../../../testspec.setup\";\n\nlet page: SpecPage;\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\nafterEach(() => {\n  page.setContent(\"\");\n});\n\ndescribe(\"ic-loading-indicator component\", () => {\n  it(\"should render an indeterminate loading indicator with the correct label and set aria-labelledby\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"IC Loading Indicator Test\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render a determinate loading indicator with the correct label and aria\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator progress=\"30\" label=\"IC Loading Indicator Test\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should not display a label is the size is 'icon'\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"IC Loading Indicator Test\" size=\"icon\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should set the typography variant for the label to 'label' for the 'small' size\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"IC Loading Indicator Test\" size=\"small\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should set the typography variant for the label to 'h4' for the 'default' size\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"IC Loading Indicator Test\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should set the typography variant for the label to 'h2' for the 'large' size\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"IC Loading Indicator Test\" size=\"large\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should apply the description prop as an aria-label\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator description=\"IC Loading Indicator Test\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should be styled correctly by setting the class names for the chosen indicator type\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator type=\"linear\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should set the correct aria if min and max are provided\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator progress=\"30\" min=\"10\" max=\"50\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should update label after label-duration passed\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"waiting/still waiting\" label-duration=\"2000\"></ic-loading-indicator>`,\n    });\n\n    expect(page.rootInstance.indicatorLabel).toEqual(\"waiting\");\n\n    await waitForTimeout(2001);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.indicatorLabel).toEqual(\"still waiting\");\n\n    await waitForTimeout(2001);\n    await page.waitForChanges();\n    expect(page.rootInstance.indicatorLabel).toEqual(\"waiting\");\n  });\n\n  it(\"should render linear determinate progress bar\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator progress=\"30\" min=\"10\" max=\"50\" type='linear'></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render linear indeterminate progress bar\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator type='linear'></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should test updating label and progress props\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"IC Loading Indicator Test\" size=\"large\"></ic-loading-indicator>`,\n    });\n\n    expect(page.rootInstance.label).toBe(\"IC Loading Indicator Test\");\n\n    page.root.label = \"New label\";\n    page.root.progress = 20;\n    await page.waitForChanges();\n\n    expect(page.rootInstance.label).toBe(\"New label\");\n    expect(page.rootInstance.progress).toBe(20);\n  });\n\n  it(\"should test updating progress - linear\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator progress=\"10\" min=\"10\" max=\"50\" type='linear'></ic-loading-indicator>`,\n    });\n    expect(page.rootInstance.progress).toBe(10);\n    page.root.progress = 20;\n    await page.waitForChanges();\n\n    expect(page.rootInstance.progress).toBe(20);\n  });\n\n  it(\"should test setting circularDiameter\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"IC Loading Indicator Test\"></ic-loading-indicator>`,\n    });\n\n    page.root.progress = \"20\";\n    await page.waitForChanges();\n    page.rootInstance.circularDiameter = \"100\";\n    await page.waitForChanges();\n    page.rootInstance.setCircleXY();\n    await page.waitForChanges();\n\n    const circle = page.root.shadowRoot.querySelector(\"svg circle\");\n    const x = circle.getAttribute(\"cx\");\n    expect(x).toBe(\"50\");\n  });\n});\n"]}

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

@@ -441,8 +441,12 @@ video {
 }
 
 
+/**
+ * @prop --ic-z-index-menu: z-index of menu
+ */
+
 @media (prefers-reduced-motion: no-preference) {
-  :host([open]) .menu {
+  :host(.open) .menu {
     transition: max-height var(--ic-transition-duration-slow);
   }
 }
@@ -454,7 +458,7 @@ video {
   color: var(--ic-color-primary-text);
   background-color: var(--ic-architectural-white);
   position: relative;
-  z-index: var(--ic-z-index-popup-menu);
+  z-index: var(--ic-z-index-menu);
   box-sizing: border-box;
   box-shadow: var(--ic-elevation-overlay);
 }
@@ -463,10 +467,26 @@ video {
   box-shadow: var(--ic-border-focus);
 }
 
+#retry-button::part(button) {
+  height: var(--ic-space-lg);
+}
+
+.small #retry-button::part(button) {
+  height: var(--ic-space-md);
+}
+
+:host(.on-dialog) {
+  inset: auto !important;
+}
+
+:host(.on-dialog-fix-translate) {
+  transform: translate(0, 80px) !important;
+}
+
 .menu {
   text-decoration: none;
   list-style-type: none;
-  border: 0.063rem solid var(--ic-architectural-400);
+  border: var(--ic-space-1px) solid var(--ic-architectural-400);
   border-radius: var(--ic-border-radius);
   background-color: var(--ic-architectural-white);
   visibility: hidden;
@@ -482,12 +502,12 @@ video {
   outline: none;
 }
 
-:host([open]) {
+:host(.open) {
   max-height: none;
   display: block;
 }
 
-:host([open]) .menu {
+:host(.open) .menu {
   visibility: visible;
   max-height: 20.125rem;
 }
@@ -500,20 +520,23 @@ video {
   padding: 0.5rem 0.438rem;
   cursor: pointer;
   display: flex;
-  justify-content: space-between;
   align-items: center;
 }
 
-:host([small]) .option {
+.option:not(.loading-option) {
+  justify-content: space-between;
+}
+
+:host(.small) .option {
   padding: 0.25rem 0.438rem;
 }
 
 .option:last-child {
-  border-radius: 0 0 0.063rem 0.063rem;
+  border-radius: 0 0 var(--ic-space-1px) var(--ic-space-1px);
 }
 
 .option:first-child {
-  border-radius: 0.063rem 0.063rem 0 0;
+  border-radius: var(--ic-space-1px) var(--ic-space-1px) 0 0;
 }
 
 .option:not(.disabled-option):hover {
@@ -536,6 +559,24 @@ video {
   pointer-events: none;
 }
 
+.option.loading-option .option-text-container {
+  margin-left: 0.625rem;
+  color: var(--ic-color-secondary-text);
+}
+
+.error-icon-svg {
+  height: var(--ic-space-md);
+  width: var(--ic-space-md);
+  fill: var(--ic-status-error);
+  align-self: center;
+  display: flex;
+  margin-right: calc(var(--ic-space-xxs) * 1.2);
+}
+
+.loading-error-info {
+  display: flex;
+}
+
 .check-icon {
   height: var(--ic-space-lg);
   width: var(--ic-space-lg);
@@ -552,12 +593,12 @@ video {
   color: var(--ic-color-tertiary-text);
 }
 
-:host([small]) .option-group-title {
+:host(.small) .option-group-title {
   padding: 0.75rem 0.438rem 0.25rem;
 }
 
 .last-recommended-option {
-  border-bottom: 0.063rem solid var(--ic-architectural-400);
+  border-bottom: var(--ic-border-default);
 }
 
 .disabled-option {