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

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

@@ -0,0 +1,38 @@
+import { InputContainer } from "./ic-input-container";
+import { newSpecPage } from "@stencil/core/testing";
+describe("ic-input-container", () => {
+  it("renders", async () => {
+    const page = await newSpecPage({
+      components: [InputContainer],
+      html: `<ic-input-container></ic-input-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-container>
+      <div class="component-container"></div>
+    </ic-input-container>
+    `);
+  });
+  it("renders disabled", async () => {
+    const page = await newSpecPage({
+      components: [InputContainer],
+      html: `<ic-input-container disabled=true></ic-input-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-input-container disabled="true">
+        <div class="component-container disabled"></div>
+      </ic-input-container>
+    `);
+  });
+  it("renders readonly", async () => {
+    const page = await newSpecPage({
+      components: [InputContainer],
+      html: `<ic-input-container readonly=true></ic-input-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-input-container readonly="true">
+        <div class="component-container readonly"></div>
+      </ic-input-container>
+    `);
+  });
+});
+//# sourceMappingURL=ic-input-container.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-input-container.spec.js","sourceRoot":"","sources":["../../../src/components/ic-input-container/ic-input-container.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;EAClC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,2CAA2C;KAClD,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kBAAkB,EAAE,KAAK,IAAI,EAAE;IAChC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,yDAAyD;KAChE,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kBAAkB,EAAE,KAAK,IAAI,EAAE;IAChC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,yDAAyD;KAChE,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { InputContainer } from \"./ic-input-container\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-input-container\", () => {\n  it(\"renders\", async () => {\n    const page = await newSpecPage({\n      components: [InputContainer],\n      html: `<ic-input-container></ic-input-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-container>\n      <div class=\"component-container\"></div>\n    </ic-input-container>\n    `);\n  });\n\n  it(\"renders disabled\", async () => {\n    const page = await newSpecPage({\n      components: [InputContainer],\n      html: `<ic-input-container disabled=true></ic-input-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-input-container disabled=\"true\">\n        <div class=\"component-container disabled\"></div>\n      </ic-input-container>\n    `);\n  });\n\n  it(\"renders readonly\", async () => {\n    const page = await newSpecPage({\n      components: [InputContainer],\n      html: `<ic-input-container readonly=true></ic-input-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-input-container readonly=\"true\">\n        <div class=\"component-container readonly\"></div>\n      </ic-input-container>\n    `);\n  });\n});\n"]}

package/dist/collection/components/ic-input-label/ic-input-label.spec.js

@@ -0,0 +1,98 @@
+import { InputLabel } from "./ic-input-label";
+import { newSpecPage } from "@stencil/core/testing";
+describe("ic-input-label", () => {
+  it("renders", async () => {
+    const page = await newSpecPage({
+      components: [InputLabel],
+      html: `<ic-input-label for="test-input-id" label="Test label"></ic-input-label>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-label for="test-input-id" label="Test label">
+      <ic-typography variant="label">
+        <label htmlfor="test-input-id">
+          Test label
+        </label>
+      </ic-typography>
+    </ic-input-label>
+    `);
+  });
+  it("renders required variant", async () => {
+    const page = await newSpecPage({
+      components: [InputLabel],
+      html: `<ic-input-label for="test-input-id" label="Test label" required=true></ic-input-label>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-label for="test-input-id" label="Test label" required="true">
+      <ic-typography variant="label">
+        <label htmlfor="test-input-id">
+          Test label *
+        </label>
+      </ic-typography>
+    </ic-input-label>
+    `);
+  });
+  it("renders disabled variant", async () => {
+    const page = await newSpecPage({
+      components: [InputLabel],
+      html: `<ic-input-label for="test-input-id" label="Test label" required=true disabled=true></ic-input-label>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-label class="disabled" disabled="true" for="test-input-id" label="Test label" required="true">
+      <ic-typography variant="label">
+        <label htmlfor="test-input-id">
+          Test label *
+        </label>
+      </ic-typography>
+    </ic-input-label>
+    `);
+  });
+  it("renders readonly variant", async () => {
+    const page = await newSpecPage({
+      components: [InputLabel],
+      html: `<ic-input-label for="test-input-id" label="Test label" required=true readonly=true></ic-input-label>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-label class="readonly" for="test-input-id" label="Test label" readonly="true" required="true">
+      <ic-typography class="readonly-label" variant="label">
+        Test label *
+      </ic-typography>
+    </ic-input-label>
+    `);
+  });
+  it("renders error variant", async () => {
+    const page = await newSpecPage({
+      components: [InputLabel],
+      html: `<ic-input-label for="test-input-id" label="Test label" error=true></ic-input-label>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-label error="true" for="test-input-id" label="Test label">
+      <ic-typography class="error-label" variant="label">
+        <label htmlfor="test-input-id">
+          Test label
+        </label>
+      </ic-typography>
+    </ic-input-label>
+    `);
+  });
+  it("renders with helpertext", async () => {
+    const page = await newSpecPage({
+      components: [InputLabel],
+      html: `<ic-input-label for="test-input-id" label="Test label" required=true helper-text="Some helper text"></ic-input-label>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-label class="with-helper" for="test-input-id" helper-text="Some helper text" label="Test label" required="true">
+      <ic-typography variant="label">
+        <label htmlfor="test-input-id">
+          Test label *
+        </label>
+      </ic-typography>
+      <ic-typography class="helpertext helpertext-normal" variant="caption">
+        <span id="test-input-id-helper-text">
+          Some helper text
+        </span>
+      </ic-typography>
+    </ic-input-label>
+    `);
+  });
+});
+//# sourceMappingURL=ic-input-label.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-input-label.spec.js","sourceRoot":"","sources":["../../../src/components/ic-input-label/ic-input-label.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,0EAA0E;KACjF,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;IACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,wFAAwF;KAC/F,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;IACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,sGAAsG;KAC7G,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;IACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,sGAAsG;KAC7G,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;IACrC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,qFAAqF;KAC5F,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;IACvC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,uHAAuH;KAC9H,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;KAa7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { InputLabel } from \"./ic-input-label\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-input-label\", () => {\n  it(\"renders\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\"></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label for=\"test-input-id\" label=\"Test label\">\n      <ic-typography variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label\n        </label>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"renders required variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label for=\"test-input-id\" label=\"Test label\" required=\"true\">\n      <ic-typography variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label *\n        </label>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"renders disabled variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true disabled=true></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label class=\"disabled\" disabled=\"true\" for=\"test-input-id\" label=\"Test label\" required=\"true\">\n      <ic-typography variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label *\n        </label>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"renders readonly variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true readonly=true></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label class=\"readonly\" for=\"test-input-id\" label=\"Test label\" readonly=\"true\" required=\"true\">\n      <ic-typography class=\"readonly-label\" variant=\"label\">\n        Test label *\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"renders error variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" error=true></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label error=\"true\" for=\"test-input-id\" label=\"Test label\">\n      <ic-typography class=\"error-label\" variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label\n        </label>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"renders with helpertext\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true helper-text=\"Some helper text\"></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label class=\"with-helper\" for=\"test-input-id\" helper-text=\"Some helper text\" label=\"Test label\" required=\"true\">\n      <ic-typography variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label *\n        </label>\n      </ic-typography>\n      <ic-typography class=\"helpertext helpertext-normal\" variant=\"caption\">\n        <span id=\"test-input-id-helper-text\">\n          Some helper text\n        </span>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n});\n"]}

package/dist/collection/components/ic-input-validation/ic-input-validation.css

@@ -8,14 +8,6 @@ ic-input-validation.fullwidth {
   width: 100%;
 }
 
-ic-input-validation.error {
-  color: var(--ic-status-error);
-}
-
-ic-input-validation.success {
-  color: var(--ic-status-success);
-}
-
 ic-input-validation span.status-icon {
   padding-right: var(--ic-space-xxs);
 }

package/dist/collection/components/ic-input-validation/ic-input-validation.spec.js

@@ -0,0 +1,89 @@
+import { InputValidation } from "./ic-input-validation";
+import { newSpecPage } from "@stencil/core/testing";
+describe("ic-input-validation", () => {
+  it("renders", async () => {
+    const page = await newSpecPage({
+      components: [InputValidation],
+      html: `<ic-input-validation for="test-id" message="validation message"></ic-input-validation>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-validation for="test-id" message="validation message">
+      <ic-typography class="statustext" variant="caption">
+        <span aria-live="polite" id="test-id-validation-text">
+          validation message
+        </span>
+      </ic-typography>
+    </ic-input-validation>
+    `);
+  });
+  it("renders with success status", async () => {
+    const page = await newSpecPage({
+      components: [InputValidation],
+      html: `<ic-input-validation for="test-id" message="validation message" status="success"></ic-input-validation>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-validation class="success" for="test-id" message="validation message" status="success">
+      <span class="icon-success status-icon">
+        svg
+      </span>
+      <ic-typography class="statustext" variant="caption">
+        <span aria-live="polite" id="test-id-validation-text">
+          validation message
+        </span>
+      </ic-typography>
+    </ic-input-validation>
+    `);
+  });
+  it("renders with warning status", async () => {
+    const page = await newSpecPage({
+      components: [InputValidation],
+      html: `<ic-input-validation for="test-id" message="validation message" status="warning"></ic-input-validation>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-validation class="warning" for="test-id" message="validation message" status="warning">
+      <span class="icon-warning status-icon">
+        svg
+      </span>
+      <ic-typography class="statustext" variant="caption">
+        <span aria-live="polite" id="test-id-validation-text">
+          validation message
+        </span>
+      </ic-typography>
+    </ic-input-validation>
+    `);
+  });
+  it("renders with error status", async () => {
+    const page = await newSpecPage({
+      components: [InputValidation],
+      html: `<ic-input-validation for="test-id" message="validation message" status="error"></ic-input-validation>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-validation class="error" for="test-id" message="validation message" status="error">
+      <span class="icon-error status-icon">
+        svg
+      </span>
+      <ic-typography class="statustext" variant="caption">
+        <span aria-live="polite" id="test-id-validation-text">
+          validation message
+        </span>
+      </ic-typography>
+    </ic-input-validation>
+    `);
+  });
+  it("renders with full width", async () => {
+    const page = await newSpecPage({
+      components: [InputValidation],
+      html: `<ic-input-validation for="test-id" message="validation message" full-width=true></ic-input-validation>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-validation for="test-id" class="fullwidth" full-width="true" message="validation message">
+      <ic-typography class="statustext" variant="caption">
+        <span aria-live="polite" id="test-id-validation-text">
+          validation message
+        </span>
+      </ic-typography>
+    </ic-input-validation>
+    `);
+  });
+});
+//# sourceMappingURL=ic-input-validation.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-input-validation.spec.js","sourceRoot":"","sources":["../../../src/components/ic-input-validation/ic-input-validation.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;EACnC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,wFAAwF;KAC/F,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;IAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,yGAAyG;KAChH,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;IAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,yGAAyG;KAChH,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;IACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,uGAAuG;KAC9G,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;IACvC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,wGAAwG;KAC/G,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { InputValidation } from \"./ic-input-validation\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-input-validation\", () => {\n  it(\"renders\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation for=\"test-id\" message=\"validation message\">\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"renders with success status\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" status=\"success\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation class=\"success\" for=\"test-id\" message=\"validation message\" status=\"success\">\n      <span class=\"icon-success status-icon\">\n        svg\n      </span>\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"renders with warning status\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" status=\"warning\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation class=\"warning\" for=\"test-id\" message=\"validation message\" status=\"warning\">\n      <span class=\"icon-warning status-icon\">\n        svg\n      </span>\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"renders with error status\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" status=\"error\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation class=\"error\" for=\"test-id\" message=\"validation message\" status=\"error\">\n      <span class=\"icon-error status-icon\">\n        svg\n      </span>\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"renders with full width\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" full-width=true></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation for=\"test-id\" class=\"fullwidth\" full-width=\"true\" message=\"validation message\">\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n});\n"]}

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

@@ -0,0 +1,203 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Alert } from "../ic-alert/ic-alert";
+import { Link } from "./ic-link";
+describe("ic-link component", () => {
+  it("should render a link by default with the correct text", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-link>IC Link Test</ic-link>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-link class="default link">
+      <mock:shadow-root>
+        <a tabindex="-1">
+        <slot></slot>
+        </a>
+        </mock:shadow-root>
+        IC Link Test
+      </ic-link>
+    `);
+  });
+  it("should apply the 'download' attribute to the anchor element", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-link download="test-download">IC Link Test</ic-link>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-link class="default link" download="test-download">
+    <mock:shadow-root>
+        <a download="test-download" tabindex="-1">
+        <slot></slot>
+        </a>
+        </mock:shadow-root>
+        IC Link Test
+      </ic-link>
+    `);
+  });
+  it("should apply the 'href' attribute and ic-link styling to the anchor element", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-link href="test-href">IC Link Test</ic-link>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-link href="test-href" class="default link">
+    <mock:shadow-root>
+        <a class="default ic-link" href="test-href" tabindex="0">
+        <slot></slot>
+        </a>
+        </mock:shadow-root>
+        IC Link Test
+      </ic-link>
+    `);
+  });
+  it("should apply the 'dark' appearance styling and ic-link styling", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-link  href="test-href" appearance="dark">IC Link Test</ic-link>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-link href="test-href" appearance="dark" class="dark link">
+    <mock:shadow-root>
+        <a class="dark ic-link" href="test-href" tabindex="0">
+        <slot></slot>
+        </a>
+        </mock:shadow-root>
+        IC Link Test
+      </ic-link>
+    `);
+  });
+  it("should apply the 'hreflang' attribute to the anchor element", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-link hreflang="test-hreflang">IC Link Test</ic-link>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-link class="default link" hreflang="test-hreflang">
+    <mock:shadow-root>
+        <a hreflang="test-hreflang" tabindex="-1">
+        <slot></slot>
+        </a>
+        </mock:shadow-root>
+        IC Link Test
+      </ic-link>
+    `);
+  });
+  it("should apply the 'referrerpolicy' attribute to the anchor element", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-link referrerpolicy="no-referrer">IC Link Test</ic-link>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-link class="default link" referrerpolicy="no-referrer">
+    <mock:shadow-root>
+        <a referrerpolicy="no-referrer" tabindex="-1">
+        <slot></slot>
+        </a>
+        </mock:shadow-root>
+        IC Link Test
+      </ic-link>
+    `);
+  });
+  it("should apply the 'rel' attribute to the anchor element", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-link rel="test-rel">IC Link Test</ic-link>`,
+    });
+    expect(page.root).toEqualHtml(`<ic-link class="default link" rel="test-rel">
+    <mock:shadow-root>
+        <a rel="test-rel" tabindex="-1">
+        <slot></slot>
+        </a>
+        </mock:shadow-root>
+        IC Link Test
+      </ic-link>
+    `);
+  });
+  it("should apply the 'target' attribute to the anchor element", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-link target="test-target">IC Link Test</ic-link>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-link class="default link" target="test-target">
+    <mock:shadow-root>
+        <a target="test-target" tabindex="-1">
+        <slot></slot>
+        </a>
+        </mock:shadow-root>
+        IC Link Test
+      </ic-link>
+    `);
+  });
+  it("should render an 'open in new' icon when 'show-icon' is provided", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-link show-icon>IC Link Test</ic-link>`,
+    });
+    expect(page.root).toEqualHtml(`<ic-link class="default link" show-icon>
+    <mock:shadow-root>
+        <a tabindex="-1">
+          <slot></slot>
+          <span class="ic-link-open-in-new-icon">
+            svg
+          </span>
+        </a>
+        </mock:shadow-root>
+        IC Link Test
+      </ic-link>
+    `);
+  });
+  it("should render a slotted link", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-link>
+        <ic-link slot="router-item">Slotted Link</ic-link>
+      </ic-link>`,
+    });
+    expect(page.root).toEqualHtml(`<ic-link class="default link">
+    <mock:shadow-root>
+      <slot name="router-item"></slot>
+    </mock:shadow-root>
+    <ic-link class="default link" slot="router-item">
+      <mock:shadow-root>
+        <a tabindex="-1">
+          <slot></slot>
+        </a>
+      </mock:shadow-root>
+      Slotted Link
+      </ic-link>
+      </ic-link>
+    `);
+  });
+  it("should get theme from context", async () => {
+    const page = await newSpecPage({
+      components: [Alert, Link],
+      html: `<ic-alert message="This has an action"><ic-link slot="action">Theme context link</ic-link></ic-alert>`,
+    });
+    expect(page.root).toMatchSnapshot("alert-theme-context");
+  });
+  it("correctly sets variant on theme change", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-hero heading="Hero heading" subheading="Hero description">
+      <ic-link slot="interaction">Link</ic-link>
+    </ic-hero>
+`,
+    });
+    page.rootInstance.themeChangeHandler({ detail: { mode: "dark" } });
+    await page.waitForChanges();
+    expect(page.rootInstance.appearance).toBe("dark");
+    page.rootInstance.themeChangeHandler({ detail: { mode: "light" } });
+    await page.waitForChanges();
+    expect(page.rootInstance.appearance).toBe("light");
+  });
+  it("should call 'setFocus' when link is focused", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-link>IC Link Test</ic-link>`,
+    });
+    //Can't expect anything in this test - this is to increase code coverage only
+    await page.rootInstance.setFocus().toHaveBeenCalled;
+  });
+});
+//# sourceMappingURL=ic-link.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-link.spec.js","sourceRoot":"","sources":["../../../src/components/ic-link/ic-link.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Alert } from \"../ic-alert/ic-alert\";\nimport { Link } from \"./ic-link\";\n\ndescribe(\"ic-link component\", () => {\n  it(\"should render a link by default with the correct text\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>IC Link Test</ic-link>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-link class=\"default link\">\n      <mock:shadow-root>\n        <a tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'download' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link download=\"test-download\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"default link\" download=\"test-download\">\n    <mock:shadow-root>\n        <a download=\"test-download\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'href' attribute and ic-link styling to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link href=\"test-href\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link href=\"test-href\" class=\"default link\">\n    <mock:shadow-root>\n        <a class=\"default ic-link\" href=\"test-href\" tabindex=\"0\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'dark' appearance styling and ic-link styling\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link  href=\"test-href\" appearance=\"dark\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link href=\"test-href\" appearance=\"dark\" class=\"dark link\">\n    <mock:shadow-root>\n        <a class=\"dark ic-link\" href=\"test-href\" tabindex=\"0\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'hreflang' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link hreflang=\"test-hreflang\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"default link\" hreflang=\"test-hreflang\">\n    <mock:shadow-root>\n        <a hreflang=\"test-hreflang\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'referrerpolicy' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link referrerpolicy=\"no-referrer\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"default link\" referrerpolicy=\"no-referrer\">\n    <mock:shadow-root>\n        <a referrerpolicy=\"no-referrer\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'rel' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link rel=\"test-rel\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root).toEqualHtml(`<ic-link class=\"default link\" rel=\"test-rel\">\n    <mock:shadow-root>\n        <a rel=\"test-rel\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'target' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link target=\"test-target\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"default link\" target=\"test-target\">\n    <mock:shadow-root>\n        <a target=\"test-target\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should render an 'open in new' icon when 'show-icon' is provided\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link show-icon>IC Link Test</ic-link>`,\n    });\n\n    expect(page.root).toEqualHtml(`<ic-link class=\"default link\" show-icon>\n    <mock:shadow-root>\n        <a tabindex=\"-1\">\n          <slot></slot>\n          <span class=\"ic-link-open-in-new-icon\">\n            svg\n          </span>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should render a slotted link\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>\n        <ic-link slot=\"router-item\">Slotted Link</ic-link>\n      </ic-link>`,\n    });\n\n    expect(page.root).toEqualHtml(`<ic-link class=\"default link\">\n    <mock:shadow-root>\n      <slot name=\"router-item\"></slot>\n    </mock:shadow-root>\n    <ic-link class=\"default link\" slot=\"router-item\">\n      <mock:shadow-root>\n        <a tabindex=\"-1\">\n          <slot></slot>\n        </a>\n      </mock:shadow-root>\n      Slotted Link\n      </ic-link>\n      </ic-link>\n    `);\n  });\n\n  it(\"should get theme from context\", async () => {\n    const page = await newSpecPage({\n      components: [Alert, Link],\n      html: `<ic-alert message=\"This has an action\"><ic-link slot=\"action\">Theme context link</ic-link></ic-alert>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"alert-theme-context\");\n  });\n\n  it(\"correctly sets variant on theme change\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-hero heading=\"Hero heading\" subheading=\"Hero description\">\n      <ic-link slot=\"interaction\">Link</ic-link>\n    </ic-hero>\n`,\n    });\n\n    page.rootInstance.themeChangeHandler({ detail: { mode: \"dark\" } });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.appearance).toBe(\"dark\");\n\n    page.rootInstance.themeChangeHandler({ detail: { mode: \"light\" } });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.appearance).toBe(\"light\");\n  });\n\n  it(\"should call 'setFocus' when link is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>IC Link Test</ic-link>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n});\n"]}

package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.css

@@ -626,7 +626,7 @@ video {
   height: inherit;
   overflow: hidden;
   margin: auto;
-  color: var(--ic-theme-primary);
+  color: var(--ic-status-info);
 }
 
 :host(.not-required.compact-step-progress-indicator) .inner-text {

package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.e2e.js

@@ -0,0 +1,34 @@
+import { newE2EPage } from "@stencil/core/testing";
+beforeAll(() => {
+  jest.spyOn(console, "warn").mockImplementation(jest.fn());
+});
+describe("ic-loading-indicator component", () => {
+  it("should change the label after 8 seconds if a string with forward slashes is passed in", async () => {
+    const page = await newE2EPage({
+      html: `<ic-loading-indicator label="First label/Second label/Third label"></ic-loading-indicator>`,
+    });
+    const label = await page.find("ic-loading-indicator >>> #ic-loading-label");
+    await page.waitForTimeout(8000);
+    await page.waitForChanges();
+    expect(label).toEqualText("Second label");
+  });
+  it("should change the label back to the first in the string after the last has been displayed", async () => {
+    const page = await newE2EPage({
+      html: `<ic-loading-indicator label="First label/Second label/Third label"></ic-loading-indicator>`,
+    });
+    const label = await page.find("ic-loading-indicator >>> #ic-loading-label");
+    await page.waitForTimeout(24000);
+    await page.waitForChanges();
+    expect(label).toEqualText("First label");
+  });
+  it("should change the label after the specified amount of time", async () => {
+    const page = await newE2EPage({
+      html: `<ic-loading-indicator label="First label/Second label/Third label" label-duration="2000"></ic-loading-indicator>`,
+    });
+    const label = await page.find("ic-loading-indicator >>> #ic-loading-label");
+    await page.waitForTimeout(2000);
+    await page.waitForChanges();
+    expect(label).toEqualText("Second label");
+  });
+});
+//# sourceMappingURL=ic-loading-indicator.e2e.js.map

package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-loading-indicator.e2e.js","sourceRoot":"","sources":["../../../src/components/ic-loading-indicator/ic-loading-indicator.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,SAAS,CAAC,GAAG,EAAE;EACb,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;AAC5D,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,gCAAgC,EAAE,GAAG,EAAE;EAC9C,EAAE,CAAC,uFAAuF,EAAE,KAAK,IAAI,EAAE;IACrG,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC;MAC5B,IAAI,EAAE,4FAA4F;KACnG,CAAC,CAAC;IACH,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,4CAA4C,CAAC,CAAC;IAE5E,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;EAC5C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2FAA2F,EAAE,KAAK,IAAI,EAAE;IACzG,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC;MAC5B,IAAI,EAAE,4FAA4F;KACnG,CAAC,CAAC;IACH,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,4CAA4C,CAAC,CAAC;IAE5E,MAAM,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IACjC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;EAC3C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4DAA4D,EAAE,KAAK,IAAI,EAAE;IAC1E,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC;MAC5B,IAAI,EAAE,kHAAkH;KACzH,CAAC,CAAC;IACH,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,4CAA4C,CAAC,CAAC;IAE5E,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;EAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-loading-indicator component\", () => {\n  it(\"should change the label after 8 seconds if a string with forward slashes is passed in\", async () => {\n    const page = await newE2EPage({\n      html: `<ic-loading-indicator label=\"First label/Second label/Third label\"></ic-loading-indicator>`,\n    });\n    const label = await page.find(\"ic-loading-indicator >>> #ic-loading-label\");\n\n    await page.waitForTimeout(8000);\n    await page.waitForChanges();\n\n    expect(label).toEqualText(\"Second label\");\n  });\n\n  it(\"should change the label back to the first in the string after the last has been displayed\", async () => {\n    const page = await newE2EPage({\n      html: `<ic-loading-indicator label=\"First label/Second label/Third label\"></ic-loading-indicator>`,\n    });\n    const label = await page.find(\"ic-loading-indicator >>> #ic-loading-label\");\n\n    await page.waitForTimeout(24000);\n    await page.waitForChanges();\n\n    expect(label).toEqualText(\"First label\");\n  });\n\n  it(\"should change the label after the specified amount of time\", async () => {\n    const page = await newE2EPage({\n      html: `<ic-loading-indicator label=\"First label/Second label/Third label\" label-duration=\"2000\"></ic-loading-indicator>`,\n    });\n    const label = await page.find(\"ic-loading-indicator >>> #ic-loading-label\");\n\n    await page.waitForTimeout(2000);\n    await page.waitForChanges();\n\n    expect(label).toEqualText(\"Second label\");\n  });\n});\n"]}