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

package/dist/collection/components/ic-status-tag/ic-status-tag.css

@@ -448,6 +448,7 @@ video {
   display: inline-block;
   min-width: 2.5rem;
   text-align: center;
+  color: var(--ic-color-primary-text);
 }
 
 .small {
@@ -456,7 +457,7 @@ video {
 }
 
 .filled-neutral {
-  background-color: var(--ic-architectural-600);
+  background-color: var(--ic-architectural-700);
   color: var(--ic-architectural-white);
 }
 
@@ -467,7 +468,6 @@ video {
 
 .filled-warning {
   background-color: var(--ic-status-warning);
-  color: var(--ic-color-primary-text);
 }
 
 .filled-danger {
@@ -477,25 +477,21 @@ video {
 
 .outlined-neutral {
   background-color: var(--ic-architectural-200);
-  color: var(--ic-color-secondary-text);
   border: var(--ic-space-1px) solid var(--ic-architectural-400);
 }
 
 .outlined-success {
   background-color: var(--ic-status-success-background);
-  color: var(--ic-status-success);
   border: var(--ic-space-1px) solid var(--ic-status-success);
 }
 
 .outlined-warning {
   background-color: var(--ic-status-warning-background);
-  color: var(--ic-status-warning-dark);
   border: var(--ic-space-1px) solid var(--ic-status-warning-dark);
 }
 
 .outlined-danger {
   background-color: var(--ic-status-error-background);
-  color: var(--ic-status-error);
   border: var(--ic-space-1px) solid var(--ic-status-error);
 }
 

package/dist/collection/components/ic-status-tag/ic-status-tag.spec.js

@@ -0,0 +1,43 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { StatusTag } from "./ic-status-tag";
+describe("ic-status-tag component renders label", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [StatusTag],
+      html: `<ic-status-tag label="Neutral"></ic-status-tag>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-status-tag aria-label="Status" label="Neutral">
+    <mock:shadow-root>
+      <strong class="tag filled-neutral" >
+        <ic-typography variant="label-uppercase">
+          <span>
+            Neutral
+          </span>
+        </ic-typography>
+      </strong>
+      </mock:shadow-root>
+    </ic-status-tag>
+    `);
+  }),
+    it("should have the role of 'status' if announced is passed as true", async () => {
+      const page = await newSpecPage({
+        components: [StatusTag],
+        html: `<ic-status-tag label="Neutral" announced="true"></ic-status-tag>`,
+      });
+      expect(page.root).toEqualHtml(`
+    <ic-status-tag announced="true" aria-label="Status" label="Neutral" role="status">
+    <mock:shadow-root>
+      <strong class="tag filled-neutral" >
+        <ic-typography variant="label-uppercase">
+          <span>
+            Neutral
+          </span>
+        </ic-typography>
+      </strong>
+      </mock:shadow-root>
+    </ic-status-tag>
+    `);
+    });
+});
+//# sourceMappingURL=ic-status-tag.spec.js.map

package/dist/collection/components/ic-status-tag/ic-status-tag.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-status-tag.spec.js","sourceRoot":"","sources":["../../../src/components/ic-status-tag/ic-status-tag.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,QAAQ,CAAC,uCAAuC,EAAE,GAAG,EAAE;EACrD,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,iDAAiD;KACxD,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;EACL,CAAC,CAAC;IACA,EAAE,CAAC,iEAAiE,EAAE,KAAK,IAAI,EAAE;MAC/E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;QAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;QACvB,IAAI,EAAE,kEAAkE;OACzE,CAAC,CAAC;MAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY/B,CAAC,CAAC;IACH,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { StatusTag } from \"./ic-status-tag\";\n\ndescribe(\"ic-status-tag component renders label\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [StatusTag],\n      html: `<ic-status-tag label=\"Neutral\"></ic-status-tag>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-status-tag aria-label=\"Status\" label=\"Neutral\">\n    <mock:shadow-root>\n      <strong class=\"tag filled-neutral\" >\n        <ic-typography variant=\"label-uppercase\">\n          <span>\n            Neutral\n          </span>\n        </ic-typography>\n      </strong>\n      </mock:shadow-root>\n    </ic-status-tag>\n    `);\n  }),\n    it(\"should have the role of 'status' if announced is passed as true\", async () => {\n      const page = await newSpecPage({\n        components: [StatusTag],\n        html: `<ic-status-tag label=\"Neutral\" announced=\"true\"></ic-status-tag>`,\n      });\n\n      expect(page.root).toEqualHtml(`\n    <ic-status-tag announced=\"true\" aria-label=\"Status\" label=\"Neutral\" role=\"status\">\n    <mock:shadow-root>\n      <strong class=\"tag filled-neutral\" >\n        <ic-typography variant=\"label-uppercase\">\n          <span>\n            Neutral\n          </span>\n        </ic-typography>\n      </strong>\n      </mock:shadow-root>\n    </ic-status-tag>\n    `);\n    });\n});\n"]}

package/dist/collection/components/ic-step/ic-step.spec.js

@@ -0,0 +1,176 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Step } from "./ic-step";
+import { Typography } from "../ic-typography/ic-typography";
+import { LoadingIndicator } from "../ic-loading-indicator/ic-loading-indicator";
+describe("default variant of ic-step component", () => {
+  it("should render default step with no title", async () => {
+    const page = await newSpecPage({
+      components: [Step, Typography],
+      html: `<ic-step variant="default"></ic-step>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render default step with correct title", async () => {
+    const page = await newSpecPage({
+      components: [Step, Typography],
+      html: `<ic-step variant="default" step-title="First"></ic-step>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render default step with correct title, subtitle and current state", async () => {
+    const page = await newSpecPage({
+      components: [Step, Typography],
+      html: `<ic-step variant="default" 
+      step-title="Second With a Very Long Title"
+      step-subtitle="Optional Subtitle"
+      step-type="current"
+    ></ic-step>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render disabled stepType", async () => {
+    const page = await newSpecPage({
+      components: [Step, Typography],
+      html: `<ic-step variant="default" 
+      step-type="disabled"
+    ></ic-step>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render completed stepType", async () => {
+    const page = await newSpecPage({
+      components: [Step, Typography],
+      html: `<ic-step variant="default" 
+      step-type="completed"
+    ></ic-step>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+});
+describe("compact variant of ic-step component", () => {
+  it("should render a compact step with no step status", async () => {
+    const page = await newSpecPage({
+      components: [Step],
+      html: `<ic-step
+      variant="compact" 
+      step-type="current"
+      last-step="false"
+      step-num="3"
+      last-step-num="4"
+      progress="75"
+      step-title="Third step"
+      next-step-title="Fourth step"></ic-step>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render an step status icon for a step with a disabled stepType", async () => {
+    const page = await newSpecPage({
+      components: [Step],
+      html: `<ic-step
+      variant="compact"
+      step-type="disabled"
+      compact-step-styling = "disabled"
+      last-step="false"
+      step-num="3"
+      last-step-num="4"
+      progress="75"
+      step-title="Third step"
+      next-step-title="next step"
+    ></ic-step>`,
+    });
+    expect(page.root).toMatchSnapshot();
+    const stepStatus = page.root.shadowRoot.querySelector(".step-status > ic-typography").textContent;
+    expect(stepStatus).toBe("Not required");
+    const statusIcon = page.root.shadowRoot.querySelector("span.step-icon");
+    expect(statusIcon).toEqualHtml(`<span class="warning-icon step-icon" aria-hidden="true">svg</span>`);
+  });
+  it("should render a step status icon for a step with a completed stepType", async () => {
+    const page = await newSpecPage({
+      components: [Step],
+      html: `<ic-step
+      variant="compact"
+      last-step="false"
+      step-num="3"
+      last-step-num="4"
+      progress="75"
+      step-title="Third step"
+      next-step-title="next step"
+      step-type="completed"
+      compact-step-styling = "completed"
+    ></ic-step>`,
+    });
+    expect(page.root).toMatchSnapshot();
+    const stepStatus = page.root.shadowRoot.querySelector(".step-status > ic-typography").textContent;
+    expect(stepStatus).toBe("Completed");
+    const statusIcon = page.root.shadowRoot.querySelector("span.step-icon");
+    expect(statusIcon).toEqualHtml(`<span class="check-icon step-icon" aria-hidden="true">svg</span>`);
+  });
+  it("should set next step text as last step if last step is true", async () => {
+    const page = await newSpecPage({
+      components: [Step],
+      html: `<ic-step
+      variant="compact" 
+      step-type="current"
+      last-step="true"
+      step-num=4"
+      last-step-num="4"
+      progress="100"
+      step-title="Final step"
+    ></ic-step>`,
+    });
+    const lastStep = page.root.shadowRoot.querySelector(".next-step").textContent;
+    expect(lastStep).toBe("Last step");
+  });
+  it("should set the circular line width of the loading indicator as 40 for all steps", async () => {
+    jest.spyOn(console, "warn").mockImplementation(jest.fn());
+    const page = await newSpecPage({
+      components: [Step, LoadingIndicator],
+      html: `<ic-step
+      variant="compact" 
+      last-step="true"
+      step-num=4"
+      last-step-num="4"
+      progress="100"
+      step-title="Final step"
+    ></ic-step>`,
+    });
+    const loadingIndicator = page.root.shadowRoot.querySelector(".step > ic-loading-indicator");
+    expect(loadingIndicator.classList.contains("compact-step-progress-indicator")).toBeTruthy();
+  });
+  it("should watch the stepType & change the value of the current prop if stepType = 'current'", async () => {
+    const page = await newSpecPage({
+      components: [Step],
+      html: `<ic-step
+      variant="compact" 
+      last-step="true"
+      step-num=4"
+      last-step-num="4"
+      progress="100"
+      step-title="Final step"
+      step-type = "current"
+    ></ic-step>`,
+    });
+    await page.rootInstance.stepTypeChangeHandler();
+    await page.waitForChanges();
+    expect(page.rootInstance.current).toBeTruthy();
+  });
+  it("should watch the stepType & shouldn't change the value of the current prop if stepType is not 'current'", async () => {
+    const page = await newSpecPage({
+      components: [Step],
+      html: `<ic-step
+      variant="compact" 
+      last-step="true"
+      step-num=4"
+      last-step-num="4"
+      progress="100"
+      step-title="Final step"
+      step-type = "completed"
+      compact-step-styling = "completed"
+    ></ic-step>`,
+    });
+    await page.rootInstance.stepTypeChangeHandler();
+    await page.waitForChanges();
+    expect(page.rootInstance.current).toBeFalsy();
+  });
+});
+//# sourceMappingURL=ic-step.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-step.spec.js","sourceRoot":"","sources":["../../../src/components/ic-step/ic-step.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Step } from \"./ic-step\";\nimport { Typography } from \"../ic-typography/ic-typography\";\nimport { LoadingIndicator } from \"../ic-loading-indicator/ic-loading-indicator\";\n\ndescribe(\"default variant of ic-step component\", () => {\n  it(\"should render default step with no title\", async () => {\n    const page = await newSpecPage({\n      components: [Step, Typography],\n      html: `<ic-step variant=\"default\"></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n  it(\"should render default step with correct title\", async () => {\n    const page = await newSpecPage({\n      components: [Step, Typography],\n      html: `<ic-step variant=\"default\" step-title=\"First\"></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render default step with correct title, subtitle and current state\", async () => {\n    const page = await newSpecPage({\n      components: [Step, Typography],\n      html: `<ic-step variant=\"default\" \n      step-title=\"Second With a Very Long Title\"\n      step-subtitle=\"Optional Subtitle\"\n      step-type=\"current\"\n    ></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render disabled stepType\", async () => {\n    const page = await newSpecPage({\n      components: [Step, Typography],\n      html: `<ic-step variant=\"default\" \n      step-type=\"disabled\"\n    ></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render completed stepType\", async () => {\n    const page = await newSpecPage({\n      components: [Step, Typography],\n      html: `<ic-step variant=\"default\" \n      step-type=\"completed\"\n    ></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n});\n\ndescribe(\"compact variant of ic-step component\", () => {\n  it(\"should render a compact step with no step status\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\" \n      step-type=\"current\"\n      last-step=\"false\"\n      step-num=\"3\"\n      last-step-num=\"4\"\n      progress=\"75\"\n      step-title=\"Third step\"\n      next-step-title=\"Fourth step\"></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render an step status icon for a step with a disabled stepType\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\"\n      step-type=\"disabled\"\n      compact-step-styling = \"disabled\"\n      last-step=\"false\"\n      step-num=\"3\"\n      last-step-num=\"4\"\n      progress=\"75\"\n      step-title=\"Third step\"\n      next-step-title=\"next step\"\n    ></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    const stepStatus = page.root.shadowRoot.querySelector(\n      \".step-status > ic-typography\"\n    ).textContent;\n\n    expect(stepStatus).toBe(\"Not required\");\n\n    const statusIcon = page.root.shadowRoot.querySelector(\"span.step-icon\");\n\n    expect(statusIcon).toEqualHtml(\n      `<span class=\"warning-icon step-icon\" aria-hidden=\"true\">svg</span>`\n    );\n  });\n\n  it(\"should render a step status icon for a step with a completed stepType\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\"\n      last-step=\"false\"\n      step-num=\"3\"\n      last-step-num=\"4\"\n      progress=\"75\"\n      step-title=\"Third step\"\n      next-step-title=\"next step\"\n      step-type=\"completed\"\n      compact-step-styling = \"completed\"\n    ></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    const stepStatus = page.root.shadowRoot.querySelector(\n      \".step-status > ic-typography\"\n    ).textContent;\n\n    expect(stepStatus).toBe(\"Completed\");\n\n    const statusIcon = page.root.shadowRoot.querySelector(\"span.step-icon\");\n\n    expect(statusIcon).toEqualHtml(\n      `<span class=\"check-icon step-icon\" aria-hidden=\"true\">svg</span>`\n    );\n  });\n\n  it(\"should set next step text as last step if last step is true\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\" \n      step-type=\"current\"\n      last-step=\"true\"\n      step-num=4\"\n      last-step-num=\"4\"\n      progress=\"100\"\n      step-title=\"Final step\"\n    ></ic-step>`,\n    });\n\n    const lastStep =\n      page.root.shadowRoot.querySelector(\".next-step\").textContent;\n\n    expect(lastStep).toBe(\"Last step\");\n  });\n\n  it(\"should set the circular line width of the loading indicator as 40 for all steps\", async () => {\n    jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [Step, LoadingIndicator],\n      html: `<ic-step\n      variant=\"compact\" \n      last-step=\"true\"\n      step-num=4\"\n      last-step-num=\"4\"\n      progress=\"100\"\n      step-title=\"Final step\"\n    ></ic-step>`,\n    });\n\n    const loadingIndicator = page.root.shadowRoot.querySelector(\n      \".step > ic-loading-indicator\"\n    );\n\n    expect(\n      loadingIndicator.classList.contains(\"compact-step-progress-indicator\")\n    ).toBeTruthy();\n  });\n\n  it(\"should watch the stepType & change the value of the current prop if stepType = 'current'\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\" \n      last-step=\"true\"\n      step-num=4\"\n      last-step-num=\"4\"\n      progress=\"100\"\n      step-title=\"Final step\"\n      step-type = \"current\"\n    ></ic-step>`,\n    });\n\n    await page.rootInstance.stepTypeChangeHandler();\n    await page.waitForChanges();\n    expect(page.rootInstance.current).toBeTruthy();\n  });\n\n  it(\"should watch the stepType & shouldn't change the value of the current prop if stepType is not 'current'\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\" \n      last-step=\"true\"\n      step-num=4\"\n      last-step-num=\"4\"\n      progress=\"100\"\n      step-title=\"Final step\"\n      step-type = \"completed\"\n      compact-step-styling = \"completed\"\n    ></ic-step>`,\n    });\n\n    await page.rootInstance.stepTypeChangeHandler();\n    await page.waitForChanges();\n    expect(page.rootInstance.current).toBeFalsy();\n  });\n});\n"]}

package/dist/collection/components/ic-stepper/ic-stepper.e2e.js

@@ -0,0 +1,49 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { defaultStepper, invalidConnectorWidthStepper, compactStepper, } from "./ic-stepper-test-examples";
+beforeAll(() => {
+  jest.spyOn(console, "warn").mockImplementation(jest.fn());
+});
+describe("default variant of ic-stepper component", () => {
+  it("should render four steps and three step-connects", async () => {
+    const page = await newE2EPage({ html: defaultStepper });
+    const steps = await page.findAll("ic-step");
+    expect(steps.length).toBe(4);
+    const stepConnects = await page.findAll("ic-step >>> div.step-connect");
+    expect(stepConnects.length).toBe(3);
+  });
+  it("should render the correct number on each step", async () => {
+    const page = await newE2EPage({ html: defaultStepper });
+    const stepInners = await page.findAll("ic-step >>> .step-icon-inner");
+    expect(stepInners[0].innerHTML).toEqual("1");
+    expect(stepInners[1].innerHTML).toEqual("2");
+    expect(stepInners[2].innerHTML).toEqual("3");
+    expect(stepInners[3].innerHTML).toContain("check-icon");
+  });
+  it("should keep the length of the step connect at 100px if a connectorWidth under 100px is given", async () => {
+    const page = await newE2EPage({ html: invalidConnectorWidthStepper });
+    await page.waitForChanges();
+    const connectorWidth = await page.$eval("ic-stepper", (el) => {
+      return el.connectorWidth;
+    });
+    expect(connectorWidth).toBe(96);
+    const steps = await page.evaluate(() => {
+      return Array.from(document.querySelectorAll("ic-step:not(:last-child)")).map((step) => window.getComputedStyle(step).width);
+    });
+    steps.forEach((step) => {
+      expect(step).toMatch(`${148}px`);
+    });
+  });
+});
+describe("compact variant of ic-stepper", () => {
+  it("only shows the current step", async () => {
+    const page = await newE2EPage({ html: compactStepper });
+    await page.waitForChanges();
+    const currentStep = await page.find("ic-step[current='']");
+    expect(currentStep.isVisible()).toBeTruthy();
+    const notCurrentSteps = await page.findAll("ic-step:not([current=''])");
+    notCurrentSteps.forEach(async (el) => {
+      expect(await el.isVisible()).toBeFalsy();
+    });
+  });
+});
+//# sourceMappingURL=ic-stepper.e2e.js.map

package/dist/collection/components/ic-stepper/ic-stepper.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-stepper.e2e.js","sourceRoot":"","sources":["../../../src/components/ic-stepper/ic-stepper.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EElement, newE2EPage } from \"@stencil/core/testing\";\nimport {\n  defaultStepper,\n  invalidConnectorWidthStepper,\n  compactStepper,\n} from \"./ic-stepper-test-examples\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"default variant of ic-stepper component\", () => {\n  it(\"should render four steps and three step-connects\", async () => {\n    const page = await newE2EPage({ html: defaultStepper });\n    const steps = await page.findAll(\"ic-step\");\n    expect(steps.length).toBe(4);\n    const stepConnects = await page.findAll(\"ic-step >>> div.step-connect\");\n    expect(stepConnects.length).toBe(3);\n  });\n\n  it(\"should render the correct number on each step\", async () => {\n    const page = await newE2EPage({ html: defaultStepper });\n    const stepInners: E2EElement[] = await page.findAll(\n      \"ic-step >>> .step-icon-inner\"\n    );\n    expect(stepInners[0].innerHTML).toEqual(\"1\");\n    expect(stepInners[1].innerHTML).toEqual(\"2\");\n    expect(stepInners[2].innerHTML).toEqual(\"3\");\n    expect(stepInners[3].innerHTML).toContain(\"check-icon\");\n  });\n\n  it(\"should keep the length of the step connect at 100px if a connectorWidth under 100px is given\", async () => {\n    const page = await newE2EPage({ html: invalidConnectorWidthStepper });\n\n    await page.waitForChanges();\n\n    const connectorWidth = await page.$eval(\n      \"ic-stepper\",\n      (el: HTMLIcStepperElement) => {\n        return el.connectorWidth;\n      }\n    );\n\n    expect(connectorWidth).toBe(96);\n\n    const steps = await page.evaluate(() => {\n      return Array.from(\n        document.querySelectorAll(\"ic-step:not(:last-child)\")\n      ).map((step) => window.getComputedStyle(step).width);\n    });\n\n    steps.forEach((step) => {\n      expect(step).toMatch(`${148}px`);\n    });\n  });\n});\n\ndescribe(\"compact variant of ic-stepper\", () => {\n  it(\"only shows the current step\", async () => {\n    const page = await newE2EPage({ html: compactStepper });\n\n    await page.waitForChanges();\n\n    const currentStep = await page.find(\"ic-step[current='']\");\n\n    expect(currentStep.isVisible()).toBeTruthy();\n\n    const notCurrentSteps = await page.findAll(\"ic-step:not([current=''])\");\n\n    notCurrentSteps.forEach(async (el) => {\n      expect(await el.isVisible()).toBeFalsy();\n    });\n  });\n});\n"]}