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

package/dist/collection/components/ic-classification-banner/ic-classification-banner.css

@@ -441,6 +441,10 @@ video {
 }
 
 
+/**
+ * @prop --ic-z-index-classification-banner: z-index of classification banner
+ */
+
 :host {
   position: fixed;
   left: 0;

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

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

package/dist/collection/components/ic-classification-banner/test/a11y/ic-classification-banner.test.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-classification-banner.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-classification-banner/test/a11y/ic-classification-banner.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,0BAA0B,EAAE,GAAG,EAAE;EACxC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,8BAA8B,CAAC,CAAC;IACzD,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,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-classification-banner\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`<ic-classification-banner />`);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-classification-banner/test/basic/ic-classification-banner.spec.js

@@ -0,0 +1,140 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ClassificationBanner } from "../../ic-classification-banner";
+describe("ic-classification-banner component", () => {
+  it("should render with default message when no classification set", async () => {
+    const page = await newSpecPage({
+      components: [ClassificationBanner],
+      html: `<ic-classification-banner></ic-classification-banner>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-classification-banner>
+          <mock:shadow-root>
+            <banner aria-label="Protective marking" class="classification-banner default">
+                <ic-typography variant="caption-uppercase">protective marking not set</ic-typography>
+            </banner>
+          </mock:shadow-root>
+        </ic-classification-banner>
+`);
+  });
+  it("should render with official message", async () => {
+    const page = await newSpecPage({
+      components: [ClassificationBanner],
+      html: `<ic-classification-banner classification="official"></ic-classification-banner>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-classification-banner classification="official">
+          <mock:shadow-root>
+            <banner aria-label="Protective marking" class="classification-banner official">
+                <span class="offscreen">The protective marking of this page is: </span>
+                <ic-typography variant="caption-uppercase">uk official</ic-typography>
+            </banner>
+          </mock:shadow-root>
+        </ic-classification-banner>`);
+  });
+  it("should render with official sensitive message", async () => {
+    const page = await newSpecPage({
+      components: [ClassificationBanner],
+      html: `<ic-classification-banner classification="official-sensitive"></ic-classification-banner>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-classification-banner classification="official-sensitive">
+          <mock:shadow-root>
+            <banner aria-label="Protective marking" class="classification-banner official-sensitive">
+                <span class="offscreen">The protective marking of this page is: </span>
+                <ic-typography variant="caption-uppercase">uk official sensitive</ic-typography>
+            </banner>
+          </mock:shadow-root>
+        </ic-classification-banner>`);
+  });
+  it("should render with secret message", async () => {
+    const page = await newSpecPage({
+      components: [ClassificationBanner],
+      html: `<ic-classification-banner classification="secret"></ic-classification-banner>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-classification-banner classification="secret">
+          <mock:shadow-root>
+            <banner aria-label="Protective marking" class="classification-banner secret">
+                <span class="offscreen">The protective marking of this page is: </span>
+                <ic-typography variant="caption-uppercase">uk secret</ic-typography>
+            </banner>
+          </mock:shadow-root>
+        </ic-classification-banner>`);
+  });
+  it("should render with top secret message", async () => {
+    const page = await newSpecPage({
+      components: [ClassificationBanner],
+      html: `<ic-classification-banner classification="top-secret"></ic-classification-banner>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-classification-banner classification="top-secret">
+          <mock:shadow-root>
+            <banner aria-label="Protective marking" class="classification-banner top-secret">
+                <span class="offscreen">The protective marking of this page is: </span>
+                <ic-typography variant="caption-uppercase">uk top secret</ic-typography>
+            </banner>
+          </mock:shadow-root>
+        </ic-classification-banner>`);
+  });
+  it("should render with up to before classification", async () => {
+    const page = await newSpecPage({
+      components: [ClassificationBanner],
+      html: `<ic-classification-banner classification="official" up-to=true></ic-classification-banner>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-classification-banner classification="official" up-to=true>
+          <mock:shadow-root>
+            <banner aria-label="Protective marking" class="classification-banner official">
+                <span class="offscreen">The protective marking of this page is: </span>
+                <ic-typography variant="caption-uppercase">up to uk official</ic-typography>
+            </banner>
+          </mock:shadow-root>
+        </ic-classification-banner>`);
+  });
+  it("should render with a different country when supplied", async () => {
+    const page = await newSpecPage({
+      components: [ClassificationBanner],
+      html: `<ic-classification-banner classification="official" country="us"></ic-classification-banner>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-classification-banner classification="official" country="us">
+          <mock:shadow-root>
+            <banner aria-label="Protective marking" class="classification-banner official">
+                <span class="offscreen">The protective marking of this page is: </span>
+                <ic-typography variant="caption-uppercase">us official</ic-typography>
+            </banner>
+          </mock:shadow-root>
+        </ic-classification-banner>`);
+  });
+  it('should render with no country when supplied ""', async () => {
+    const page = await newSpecPage({
+      components: [ClassificationBanner],
+      html: `<ic-classification-banner classification="official" country=""></ic-classification-banner>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-classification-banner classification="official" country="">
+        <mock:shadow-root>
+            <banner aria-label="Protective marking" class="classification-banner official">
+                <span class="offscreen">The protective marking of this page is: </span>
+                <ic-typography variant="caption-uppercase">official</ic-typography>
+            </banner>
+          </mock:shadow-root>
+        </ic-classification-banner>`);
+  });
+  it("should render with additional selectors after classification when supplied", async () => {
+    const page = await newSpecPage({
+      components: [ClassificationBanner],
+      html: `<ic-classification-banner classification="official" additional-selectors="ukic"></ic-classification-banner>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-classification-banner classification="official" additional-selectors="ukic">
+        <mock:shadow-root>
+            <banner aria-label="Protective marking" class="classification-banner official">
+                <span class="offscreen">The protective marking of this page is: </span>
+                <ic-typography variant="caption-uppercase">uk official ukic</ic-typography>
+            </banner>
+            </mock:shadow-root>
+        </ic-classification-banner>`);
+  });
+});
+//# sourceMappingURL=ic-classification-banner.spec.js.map

package/dist/collection/components/ic-classification-banner/test/basic/ic-classification-banner.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-classification-banner.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-classification-banner/test/basic/ic-classification-banner.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { ClassificationBanner } from \"../../ic-classification-banner\";\n\ndescribe(\"ic-classification-banner component\", () => {\n  it(\"should render with default message when no classification set\", async () => {\n    const page = await newSpecPage({\n      components: [ClassificationBanner],\n      html: `<ic-classification-banner></ic-classification-banner>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-classification-banner>\n          <mock:shadow-root>\n            <banner aria-label=\"Protective marking\" class=\"classification-banner default\">\n                <ic-typography variant=\"caption-uppercase\">protective marking not set</ic-typography>\n            </banner>\n          </mock:shadow-root>\n        </ic-classification-banner>\n`);\n  });\n\n  it(\"should render with official message\", async () => {\n    const page = await newSpecPage({\n      components: [ClassificationBanner],\n      html: `<ic-classification-banner classification=\"official\"></ic-classification-banner>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-classification-banner classification=\"official\">\n          <mock:shadow-root>\n            <banner aria-label=\"Protective marking\" class=\"classification-banner official\">\n                <span class=\"offscreen\">The protective marking of this page is: </span>\n                <ic-typography variant=\"caption-uppercase\">uk official</ic-typography>\n            </banner>\n          </mock:shadow-root>\n        </ic-classification-banner>`);\n  });\n\n  it(\"should render with official sensitive message\", async () => {\n    const page = await newSpecPage({\n      components: [ClassificationBanner],\n      html: `<ic-classification-banner classification=\"official-sensitive\"></ic-classification-banner>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-classification-banner classification=\"official-sensitive\">\n          <mock:shadow-root>\n            <banner aria-label=\"Protective marking\" class=\"classification-banner official-sensitive\">\n                <span class=\"offscreen\">The protective marking of this page is: </span>\n                <ic-typography variant=\"caption-uppercase\">uk official sensitive</ic-typography>\n            </banner>\n          </mock:shadow-root>\n        </ic-classification-banner>`);\n  });\n\n  it(\"should render with secret message\", async () => {\n    const page = await newSpecPage({\n      components: [ClassificationBanner],\n      html: `<ic-classification-banner classification=\"secret\"></ic-classification-banner>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-classification-banner classification=\"secret\">\n          <mock:shadow-root>\n            <banner aria-label=\"Protective marking\" class=\"classification-banner secret\">\n                <span class=\"offscreen\">The protective marking of this page is: </span>\n                <ic-typography variant=\"caption-uppercase\">uk secret</ic-typography>\n            </banner>\n          </mock:shadow-root>\n        </ic-classification-banner>`);\n  });\n\n  it(\"should render with top secret message\", async () => {\n    const page = await newSpecPage({\n      components: [ClassificationBanner],\n      html: `<ic-classification-banner classification=\"top-secret\"></ic-classification-banner>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-classification-banner classification=\"top-secret\">\n          <mock:shadow-root>\n            <banner aria-label=\"Protective marking\" class=\"classification-banner top-secret\">\n                <span class=\"offscreen\">The protective marking of this page is: </span>\n                <ic-typography variant=\"caption-uppercase\">uk top secret</ic-typography>\n            </banner>\n          </mock:shadow-root>\n        </ic-classification-banner>`);\n  });\n\n  it(\"should render with up to before classification\", async () => {\n    const page = await newSpecPage({\n      components: [ClassificationBanner],\n      html: `<ic-classification-banner classification=\"official\" up-to=true></ic-classification-banner>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-classification-banner classification=\"official\" up-to=true>\n          <mock:shadow-root>\n            <banner aria-label=\"Protective marking\" class=\"classification-banner official\">\n                <span class=\"offscreen\">The protective marking of this page is: </span>\n                <ic-typography variant=\"caption-uppercase\">up to uk official</ic-typography>\n            </banner>\n          </mock:shadow-root>\n        </ic-classification-banner>`);\n  });\n\n  it(\"should render with a different country when supplied\", async () => {\n    const page = await newSpecPage({\n      components: [ClassificationBanner],\n      html: `<ic-classification-banner classification=\"official\" country=\"us\"></ic-classification-banner>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-classification-banner classification=\"official\" country=\"us\">\n          <mock:shadow-root>\n            <banner aria-label=\"Protective marking\" class=\"classification-banner official\">\n                <span class=\"offscreen\">The protective marking of this page is: </span>\n                <ic-typography variant=\"caption-uppercase\">us official</ic-typography>\n            </banner>\n          </mock:shadow-root>\n        </ic-classification-banner>`);\n  });\n\n  it('should render with no country when supplied \"\"', async () => {\n    const page = await newSpecPage({\n      components: [ClassificationBanner],\n      html: `<ic-classification-banner classification=\"official\" country=\"\"></ic-classification-banner>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-classification-banner classification=\"official\" country=\"\">\n        <mock:shadow-root>\n            <banner aria-label=\"Protective marking\" class=\"classification-banner official\">\n                <span class=\"offscreen\">The protective marking of this page is: </span>\n                <ic-typography variant=\"caption-uppercase\">official</ic-typography>\n            </banner>\n          </mock:shadow-root>\n        </ic-classification-banner>`);\n  });\n\n  it(\"should render with additional selectors after classification when supplied\", async () => {\n    const page = await newSpecPage({\n      components: [ClassificationBanner],\n      html: `<ic-classification-banner classification=\"official\" additional-selectors=\"ukic\"></ic-classification-banner>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-classification-banner classification=\"official\" additional-selectors=\"ukic\">\n        <mock:shadow-root>\n            <banner aria-label=\"Protective marking\" class=\"classification-banner official\">\n                <span class=\"offscreen\">The protective marking of this page is: </span>\n                <ic-typography variant=\"caption-uppercase\">uk official ukic</ic-typography>\n            </banner>\n            </mock:shadow-root>\n        </ic-classification-banner>`);\n  });\n});\n"]}

package/dist/collection/components/ic-data-entity/ic-data-entity.css

@@ -458,7 +458,7 @@ video {
 .divider {
   margin-top: var(--ic-space-lg);
   margin-bottom: var(--ic-space-md);
-  height: 0.063rem;
+  height: var(--ic-space-1px);
   background-color: var(--ic-architectural-300);
 }
 

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

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

package/dist/collection/components/ic-data-entity/test/a11y/ic-data-entity.test.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-data-entity.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-entity/test/a11y/ic-data-entity.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,uBAAuB,EAAE,GAAG,EAAE;EACrC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAC/C,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,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(\"data entity component\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\"<ic-data-entity />\");\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-data-entity/test/basic/ic-data-entity.spec.js

@@ -0,0 +1,161 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { DataEntity } from "../../ic-data-entity";
+describe("ic-data-entity", () => {
+  it("should render with data-row children", async () => {
+    const page = await newSpecPage({
+      components: [DataEntity],
+      html: `
+      <ic-data-entity heading="Heading">
+        <ic-data-row label="Label" value="value"></ic-data-row>
+        <ic-data-row label="Label" value="value"></ic-data-row>
+        <ic-data-row label="Label" value="value"></ic-data-row>
+        <ic-data-row label="Label" value="value"></ic-data-row>
+        <ic-data-row label="Label" value="value"></ic-data-row>
+        <ic-data-row label="Label" value="value"></ic-data-row>
+        <ic-data-row label="Label" value="value"></ic-data-row>
+        <ic-data-row label="Label" value="value"></ic-data-row>
+      </ic-data-entity>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-data-entity heading="Heading">
+      <mock:shadow-root>
+        <div class="heading" id="data-entity-heading">
+          <slot name="heading">  
+            <ic-typography variant="h3">
+              Heading
+            </ic-typography>
+          </slot>
+        </div>
+        <div class="divider"></div>
+        <ul aria-labelledby="data-entity-heading" class="rows">
+          <slot></slot>
+        </ul>
+      </mock:shadow-root>
+     <ic-data-row label="Label" value="value"></ic-data-row>
+     <ic-data-row label="Label" value="value"></ic-data-row>
+     <ic-data-row label="Label" value="value"></ic-data-row>
+     <ic-data-row label="Label" value="value"></ic-data-row>
+     <ic-data-row label="Label" value="value"></ic-data-row>
+     <ic-data-row label="Label" value="value"></ic-data-row>
+     <ic-data-row label="Label" value="value"></ic-data-row>
+     <ic-data-row label="Label" value="value"></ic-data-row>
+    </ic-data-entity>
+    `);
+  });
+  it("should render with small prop", async () => {
+    const page = await newSpecPage({
+      components: [DataEntity],
+      html: `
+      <ic-data-entity heading="Heading" small>
+        <ic-data-row label="Label" value="value"></ic-data-row>
+        <ic-data-row label="Label" value="value"></ic-data-row>
+        <ic-data-row label="Label" value="value"></ic-data-row>
+      </ic-data-entity>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-data-entity heading="Heading" class="small" small>
+      <mock:shadow-root>
+        <div class="heading" id="data-entity-heading">
+          <slot name="heading">  
+            <ic-typography variant="h3">
+              Heading
+            </ic-typography>
+          </slot>
+        </div>
+        <div class="divider"></div>
+        <ul aria-labelledby="data-entity-heading" class="rows">
+          <slot></slot>
+        </ul>
+      </mock:shadow-root>
+     <ic-data-row small="true" label="Label" value="value"></ic-data-row>
+     <ic-data-row small="true" label="Label" value="value"></ic-data-row>
+     <ic-data-row small="true" label="Label" value="value"></ic-data-row>
+    </ic-data-entity>
+    `);
+  });
+  it("should render with a slotted heading", async () => {
+    const page = await newSpecPage({
+      components: [DataEntity],
+      html: `
+      <ic-data-entity>
+        <ic-typography variant="h3" slot="heading">Heading</ic-typography>
+        <ic-data-row label="Label" value="value"></ic-data-row>
+        <ic-data-row label="Label" value="value"></ic-data-row>
+        <ic-data-row label="Label" value="value"></ic-data-row>
+        <ic-data-row label="Label" value="value"></ic-data-row>
+        <ic-data-row label="Label" value="value"></ic-data-row>
+        <ic-data-row label="Label" value="value"></ic-data-row>
+        <ic-data-row label="Label" value="value"></ic-data-row>
+        <ic-data-row label="Label" value="value"></ic-data-row>
+      </ic-data-entity>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-data-entity>
+      <mock:shadow-root>
+        <div class="heading" id="data-entity-heading">
+          <slot name="heading">  
+            <ic-typography variant="h3"></ic-typography>
+          </slot>
+        </div>
+        <div class="divider"></div>
+        <ul aria-labelledby="data-entity-heading" class="rows">
+          <slot></slot>
+        </ul>
+      </mock:shadow-root>
+     <ic-typography slot="heading" variant="h3">
+      Heading
+     </ic-typography>
+     <ic-data-row label="Label" value="value"></ic-data-row>
+     <ic-data-row label="Label" value="value"></ic-data-row>
+     <ic-data-row label="Label" value="value"></ic-data-row>
+     <ic-data-row label="Label" value="value"></ic-data-row>
+     <ic-data-row label="Label" value="value"></ic-data-row>
+     <ic-data-row label="Label" value="value"></ic-data-row>
+     <ic-data-row label="Label" value="value"></ic-data-row>
+     <ic-data-row label="Label" value="value"></ic-data-row>
+    </ic-data-entity>
+    `);
+  });
+  it("should render data-row children with slotted content", async () => {
+    const page = await newSpecPage({
+      components: [DataEntity],
+      html: `
+      <ic-data-entity heading="Heading">
+        <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
+        <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
+        <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
+        <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
+        <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
+        <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
+        <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
+        <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
+      </ic-data-entity>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-data-entity heading="Heading">
+      <mock:shadow-root>
+        <div class="heading" id="data-entity-heading">
+          <slot name="heading">  
+            <ic-typography variant="h3">
+              Heading
+            </ic-typography>
+          </slot>
+        </div>
+        <div class="divider"></div>
+        <ul aria-labelledby="data-entity-heading" class="rows">
+          <slot></slot>
+        </ul>
+      </mock:shadow-root>
+     <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
+     <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
+     <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
+     <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
+     <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
+     <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
+     <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
+     <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
+    </ic-data-entity>
+    `);
+  });
+});
+//# sourceMappingURL=ic-data-entity.spec.js.map

package/dist/collection/components/ic-data-entity/test/basic/ic-data-entity.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-data-entity.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-entity/test/basic/ic-data-entity.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;wBAUY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;IAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;wBAKY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;KAmB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;;wBAWY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;KAyB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;IACpE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;wBAUY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DataEntity } from \"../../ic-data-entity\";\n\ndescribe(\"ic-data-entity\", () => {\n  it(\"should render with data-row children\", async () => {\n    const page = await newSpecPage({\n      components: [DataEntity],\n      html: `\n      <ic-data-entity heading=\"Heading\">\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n      </ic-data-entity>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-entity heading=\"Heading\">\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\">\n              Heading\n            </ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n    </ic-data-entity>\n    `);\n  });\n\n  it(\"should render with small prop\", async () => {\n    const page = await newSpecPage({\n      components: [DataEntity],\n      html: `\n      <ic-data-entity heading=\"Heading\" small>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n      </ic-data-entity>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-entity heading=\"Heading\" class=\"small\" small>\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\">\n              Heading\n            </ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-data-row small=\"true\" label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row small=\"true\" label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row small=\"true\" label=\"Label\" value=\"value\"></ic-data-row>\n    </ic-data-entity>\n    `);\n  });\n\n  it(\"should render with a slotted heading\", async () => {\n    const page = await newSpecPage({\n      components: [DataEntity],\n      html: `\n      <ic-data-entity>\n        <ic-typography variant=\"h3\" slot=\"heading\">Heading</ic-typography>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n      </ic-data-entity>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-entity>\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\"></ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-typography slot=\"heading\" variant=\"h3\">\n      Heading\n     </ic-typography>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n    </ic-data-entity>\n    `);\n  });\n\n  it(\"should render data-row children with slotted content\", async () => {\n    const page = await newSpecPage({\n      components: [DataEntity],\n      html: `\n      <ic-data-entity heading=\"Heading\">\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n      </ic-data-entity>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-entity heading=\"Heading\">\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\">\n              Heading\n            </ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n    </ic-data-entity>\n    `);\n  });\n});\n"]}

package/dist/collection/components/ic-data-row/ic-data-row.css

@@ -488,7 +488,7 @@ slot[name="value"]::slotted(ic-text-field[readonly][hide-label][rows]) {
 
 .divider {
   margin-top: var(--ic-space-md);
-  height: 0.063rem;
+  height: var(--ic-space-1px);
   background-color: var(--ic-architectural-300);
 }
 

package/dist/collection/components/ic-data-row/ic-data-row.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { checkResizeObserver, DEVICE_SIZES, getCurrentDeviceSize, slotHasContent, } from "../../utils/helpers";
+import { checkResizeObserver, DEVICE_SIZES, getCurrentDeviceSize, isSlotUsed, slotHasContent, } from "../../utils/helpers";
 /**
  * @slot label - Content will be rendered in the leftmost cell.
  * @slot value - Content will be rendered to the right of the label.
@@ -7,19 +7,49 @@ import { checkResizeObserver, DEVICE_SIZES, getCurrentDeviceSize, slotHasContent
  */
 export class DataRow {
   constructor() {
-    this.resizeObserver = null;
     this.hasEndComponent = false;
+    this.resizeObserver = null;
     this.runResizeObserver = () => {
       this.resizeObserver = new ResizeObserver(() => {
         this.checkLabelAbove();
       });
       this.resizeObserver.observe(this.el);
     };
-    this.label = undefined;
-    this.value = undefined;
-    this.small = false;
+    /**
+     * Renders the label either as a ic-typography or slot. Slotted content takes precedence.
+     * @param label string - label of value
+     * @returns HTMLDivElement - returns label as slot or ic-typography with label as textContent
+     */
+    this.renderLabel = (label) => {
+      if (isSlotUsed(this.el, "label")) {
+        return (h("div", { class: "label" }, h("slot", { name: "label" })));
+      }
+      else if (label) {
+        return (h("div", { class: "label" }, h("ic-typography", { variant: this.entitySize === "xs" ? "label" : "subtitle-large" }, label)));
+      }
+      return null;
+    };
     this.deviceSize = DEVICE_SIZES.XL;
     this.entitySize = undefined;
+    this.label = undefined;
+    this.small = false;
+    this.value = undefined;
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver !== null) {
+      this.resizeObserver.disconnect();
+    }
+  }
+  componentWillLoad() {
+    this.deviceSize = getCurrentDeviceSize();
+    this.hasEndComponent = slotHasContent(this.el, "end-component");
+    this.checkLabelAbove();
+  }
+  componentDidLoad() {
+    checkResizeObserver(this.runResizeObserver);
+    if (this.hasEndComponent) {
+      this.labelEndComponent();
+    }
   }
   checkLabelAbove() {
     var _a;
@@ -40,29 +70,13 @@ export class DataRow {
     const component = this.el.shadowRoot.querySelectorAll("slot[name=end-component]");
     component.forEach((child) => child.setAttribute("aria-label", "for " + this.label + " row"));
   }
-  componentWillLoad() {
-    this.deviceSize = getCurrentDeviceSize();
-    this.hasEndComponent = slotHasContent(this.el, "end-component");
-    this.checkLabelAbove();
-  }
-  componentDidLoad() {
-    checkResizeObserver(this.runResizeObserver);
-    if (this.hasEndComponent) {
-      this.labelEndComponent();
-    }
-  }
-  disconnectedCallback() {
-    if (this.resizeObserver !== null) {
-      this.resizeObserver.disconnect();
-    }
-  }
   render() {
     const { label, value, small } = this;
     return (h(Host, { class: {
         ["small"]: small,
         ["breakpoint-medium"]: this.entitySize === "m",
         ["breakpoint-xs"]: this.entitySize === "xs",
-      }, role: "listitem" }, h("div", { class: "data" }, h("div", { class: "text-cells" }, h("div", { class: "label" }, h("slot", { name: "label" }, h("ic-typography", { variant: this.entitySize === "xs" ? "label" : "subtitle-large" }, label))), h("div", { class: "value" }, h("slot", { name: "value" }, h("ic-typography", { variant: "body" }, value)))), this.hasEndComponent && (h("div", { class: "end-component" }, h("div", { role: "cell" }, h("slot", { name: "end-component" }))))), h("div", { class: "divider" })));
+      }, role: "listitem" }, h("div", { class: "data" }, h("div", { class: "text-cells" }, this.renderLabel(label), h("div", { class: "value" }, h("slot", { name: "value" }, h("ic-typography", { variant: "body" }, value)))), this.hasEndComponent && (h("div", { class: "end-component" }, h("div", { role: "cell" }, h("slot", { name: "end-component" }))))), h("div", { class: "divider" })));
   }
   static get is() { return "ic-data-row"; }
   static get encapsulation() { return "shadow"; }
@@ -95,40 +109,40 @@ export class DataRow {
         "attribute": "label",
         "reflect": false
       },
-      "value": {
-        "type": "string",
+      "small": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The value of the middle (right if no end-component supplied) cell of the row."
+          "text": "If `true`, the small styling will be applied to the row. This is automatically applied if small is set on the parent data heading."
         },
-        "attribute": "value",
-        "reflect": false
+        "attribute": "small",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "small": {
-        "type": "boolean",
+      "value": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the small styling will be applied to the row. This is automatically applied if small is set on the parent data heading."
+          "text": "The value of the middle (right if no end-component supplied) cell of the row."
         },
-        "attribute": "small",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "value",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/ic-data-row/ic-data-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-data-row.js","sourceRoot":"","sources":["../../../src/components/ic-data-row/ic-data-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EACL,mBAAmB,EACnB,YAAY,EACZ,oBAAoB,EACpB,cAAc,GACf,MAAM,qBAAqB,CAAC;AAE7B;;;;GAIG;AAMH,MAAM,OAAO,OAAO;;IAsBV,mBAAc,GAAmB,IAAI,CAAC;IAEtC,oBAAe,GAAY,KAAK,CAAC;IAEjC,sBAAiB,GAAG,GAAG,EAAE;MAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;QAC5C,IAAI,CAAC,eAAe,EAAE,CAAC;MACzB,CAAC,CAAC,CAAC;MAEH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACvC,CAAC,CAAC;;;iBAhBuB,KAAK;sBAEA,YAAY,CAAC,EAAE;;;EAgBrC,eAAe;;IACrB,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,0CAAE,WAAW,CAAC;IACvE,IAAI,OAAO,EAAE;MACX,IAAI,OAAO,GAAG,EAAE,GAAG,YAAY,CAAC,CAAC,EAAE;QACjC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;OACxB;WAAM,IAAI,OAAO,GAAG,EAAE,GAAG,YAAY,CAAC,CAAC,EAAE;QACxC,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC;OACvB;WAAM;QACL,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;OACxB;KACF;EACH,CAAC;EAEO,iBAAiB;IACvB,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CACnD,0BAA0B,CAC3B,CAAC;IAEF,SAAS,CAAC,OAAO,CAAC,CAAC,KAAkB,EAAE,EAAE,CACvC,KAAK,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,CAC/D,CAAC;EACJ,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,oBAAoB,EAAE,CAAC;IACzC,IAAI,CAAC,eAAe,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC;IAChE,IAAI,CAAC,eAAe,EAAE,CAAC;EACzB,CAAC;EAED,gBAAgB;IACd,mBAAmB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAC5C,IAAI,IAAI,CAAC,eAAe,EAAE;MACxB,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;EACH,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,EAAE;MAChC,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;KAClC;EACH,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAErC,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,OAAO,CAAC,EAAE,KAAK;QAChB,CAAC,mBAAmB,CAAC,EAAE,IAAI,CAAC,UAAU,KAAK,GAAG;QAC9C,CAAC,eAAe,CAAC,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;OAC5C,EACD,IAAI,EAAC,UAAU;MAEf,WAAK,KAAK,EAAC,MAAM;QACf,WAAK,KAAK,EAAC,YAAY;UACrB,WAAK,KAAK,EAAC,OAAO;YAChB,YAAM,IAAI,EAAC,OAAO;cAChB,qBACE,OAAO,EACL,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,IAGtD,KAAK,CACQ,CACX,CACH;UACN,WAAK,KAAK,EAAC,OAAO;YAChB,YAAM,IAAI,EAAC,OAAO;cAChB,qBAAe,OAAO,EAAC,MAAM,IAAE,KAAK,CAAiB,CAChD,CACH,CACF;QACL,IAAI,CAAC,eAAe,IAAI,CACvB,WAAK,KAAK,EAAC,eAAe;UACxB,WAAK,IAAI,EAAC,MAAM;YACd,YAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACF,CACP,CACG;MACN,WAAK,KAAK,EAAC,SAAS,GAAG,CAClB,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  slotHasContent,\n} from \"../../utils/helpers\";\n\n/**\n * @slot label - Content will be rendered in the leftmost cell.\n * @slot value - Content will be rendered to the right of the label.\n * @slot end-component - Content will be displayed in the rightmost cell.\n */\n@Component({\n  tag: \"ic-data-row\",\n  styleUrl: \"ic-data-row.css\",\n  shadow: true,\n})\nexport class DataRow {\n  @Element() el: HTMLIcDataRowElement;\n\n  /**\n   * The label in the leftmost cell of the row.\n   */\n  @Prop() label: string;\n\n  /**\n   * The value of the middle (right if no end-component supplied) cell of the row.\n   */\n  @Prop() value: string;\n\n  /**\n   * If `true`, the small styling will be applied to the row. This is automatically applied if small is set on the parent data heading.\n   */\n  @Prop() small: boolean = false;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  @State() entitySize: \"xl\" | \"m\" | \"xs\";\n\n  private resizeObserver: ResizeObserver = null;\n\n  private hasEndComponent: boolean = false;\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.checkLabelAbove();\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  private checkLabelAbove() {\n    const rowSize = this.el.shadowRoot.querySelector(\".data\")?.clientWidth;\n    if (rowSize) {\n      if (rowSize + 46 < DEVICE_SIZES.S) {\n        this.entitySize = \"xs\";\n      } else if (rowSize + 46 < DEVICE_SIZES.M) {\n        this.entitySize = \"m\";\n      } else {\n        this.entitySize = \"xl\";\n      }\n    }\n  }\n\n  private labelEndComponent(): void {\n    const component = this.el.shadowRoot.querySelectorAll(\n      \"slot[name=end-component]\"\n    );\n\n    component.forEach((child: HTMLElement) =>\n      child.setAttribute(\"aria-label\", \"for \" + this.label + \" row\")\n    );\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n    this.hasEndComponent = slotHasContent(this.el, \"end-component\");\n    this.checkLabelAbove();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    if (this.hasEndComponent) {\n      this.labelEndComponent();\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const { label, value, small } = this;\n\n    return (\n      <Host\n        class={{\n          [\"small\"]: small,\n          [\"breakpoint-medium\"]: this.entitySize === \"m\",\n          [\"breakpoint-xs\"]: this.entitySize === \"xs\",\n        }}\n        role=\"listitem\"\n      >\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            <div class=\"label\">\n              <slot name=\"label\">\n                <ic-typography\n                  variant={\n                    this.entitySize === \"xs\" ? \"label\" : \"subtitle-large\"\n                  }\n                >\n                  {label}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"value\">\n              <slot name=\"value\">\n                <ic-typography variant=\"body\">{value}</ic-typography>\n              </slot>\n            </div>\n          </div>\n          {this.hasEndComponent && (\n            <div class=\"end-component\">\n              <div role=\"cell\">\n                <slot name=\"end-component\"></slot>\n              </div>\n            </div>\n          )}\n        </div>\n        <div class=\"divider\" />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-data-row.js","sourceRoot":"","sources":["../../../src/components/ic-data-row/ic-data-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  isSlotUsed,\n  slotHasContent,\n} from \"../../utils/helpers\";\n\n/**\n * @slot label - Content will be rendered in the leftmost cell.\n * @slot value - Content will be rendered to the right of the label.\n * @slot end-component - Content will be displayed in the rightmost cell.\n */\n@Component({\n  tag: \"ic-data-row\",\n  styleUrl: \"ic-data-row.css\",\n  shadow: true,\n})\nexport class DataRow {\n  private hasEndComponent: boolean = false;\n  private resizeObserver: ResizeObserver = null;\n\n  @Element() el: HTMLIcDataRowElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() entitySize: \"xl\" | \"m\" | \"xs\";\n\n  /**\n   * The label in the leftmost cell of the row.\n   */\n  @Prop() label: string;\n\n  /**\n   * If `true`, the small styling will be applied to the row. This is automatically applied if small is set on the parent data heading.\n   */\n  @Prop() small: boolean = false;\n\n  /**\n   * The value of the middle (right if no end-component supplied) cell of the row.\n   */\n  @Prop() value: string;\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n    this.hasEndComponent = slotHasContent(this.el, \"end-component\");\n    this.checkLabelAbove();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    if (this.hasEndComponent) {\n      this.labelEndComponent();\n    }\n  }\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.checkLabelAbove();\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  private checkLabelAbove() {\n    const rowSize = this.el.shadowRoot.querySelector(\".data\")?.clientWidth;\n    if (rowSize) {\n      if (rowSize + 46 < DEVICE_SIZES.S) {\n        this.entitySize = \"xs\";\n      } else if (rowSize + 46 < DEVICE_SIZES.M) {\n        this.entitySize = \"m\";\n      } else {\n        this.entitySize = \"xl\";\n      }\n    }\n  }\n\n  /**\n   * Renders the label either as a ic-typography or slot. Slotted content takes precedence.\n   * @param label string - label of value\n   * @returns HTMLDivElement - returns label as slot or ic-typography with label as textContent\n   */\n  private renderLabel = (label: string) => {\n    if (isSlotUsed(this.el, \"label\")) {\n      return (\n        <div class=\"label\">\n          <slot name=\"label\"></slot>\n        </div>\n      );\n    } else if (label) {\n      return (\n        <div class=\"label\">\n          <ic-typography\n            variant={this.entitySize === \"xs\" ? \"label\" : \"subtitle-large\"}\n          >\n            {label}\n          </ic-typography>\n        </div>\n      );\n    }\n\n    return null;\n  };\n\n  private labelEndComponent(): void {\n    const component = this.el.shadowRoot.querySelectorAll(\n      \"slot[name=end-component]\"\n    );\n\n    component.forEach((child: HTMLElement) =>\n      child.setAttribute(\"aria-label\", \"for \" + this.label + \" row\")\n    );\n  }\n\n  render() {\n    const { label, value, small } = this;\n\n    return (\n      <Host\n        class={{\n          [\"small\"]: small,\n          [\"breakpoint-medium\"]: this.entitySize === \"m\",\n          [\"breakpoint-xs\"]: this.entitySize === \"xs\",\n        }}\n        role=\"listitem\"\n      >\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            {this.renderLabel(label)}\n            <div class=\"value\">\n              <slot name=\"value\">\n                <ic-typography variant=\"body\">{value}</ic-typography>\n              </slot>\n            </div>\n          </div>\n          {this.hasEndComponent && (\n            <div class=\"end-component\">\n              <div role=\"cell\">\n                <slot name=\"end-component\"></slot>\n              </div>\n            </div>\n          )}\n        </div>\n        <div class=\"divider\" />\n      </Host>\n    );\n  }\n}\n"]}

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

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