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

package/dist/collection/components/ic-chip/ic-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-chip.js","sourceRoot":"","sources":["../../../src/components/ic-chip/ic-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IcChipAppearance, IcChipSizes } from \"./ic-chip.types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/**\n * @slot icon - Content will be rendered at the start of the chip.\n */\n@Component({\n  tag: \"ic-chip\",\n  styleUrl: \"ic-chip.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Chip {\n  @Element() el: HTMLIcChipElement;\n\n  /**\n   * The text rendered within the chip.\n   */\n  @Prop() label!: string;\n  /**\n   * The emphasis of the chip.\n   */\n  @Prop() appearance?: IcChipAppearance = \"filled\";\n  /**\n   * The size of the chip.\n   */\n  @Prop() size?: IcChipSizes = \"default\";\n  /**\n   * If `true`, the chip will have a close button at the end to dismiss it.\n   */\n  @Prop() dismissible?: boolean = false;\n  /**\n   * If `true`, the chip will appear disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  @State() visible: boolean = true;\n\n  @State() isHovered: boolean = false;\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  /**\n   * @deprecated This event should not be used anymore. Use icDismiss instead.\n   */\n  @Event() dismiss: EventEmitter<void>;\n\n  /**\n   * Is emitted when the user dismisses the chip.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  private dismissAction = (): void => {\n    this.dismiss.emit();\n    this.icDismiss.emit();\n  };\n\n  private mouseEnterHandler = (): void => {\n    this.isHovered = true;\n  };\n\n  private mouseLeaveHandler = (): void => {\n    this.isHovered = false;\n  };\n\n  /**\n   * Sets focus on the chip.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"button\")) {\n      this.el.shadowRoot.querySelector(\"button\").focus();\n    }\n  }\n\n  componentDidLoad(): void {\n    this.dismissible &&\n      this.el.shadowRoot\n        .querySelector(\"span.ic-tooltip-label\")\n        ?.setAttribute(\"aria-hidden\", \"true\");\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Chip\"\n    );\n  }\n\n  render() {\n    const {\n      label,\n      appearance,\n      size,\n      dismissible,\n      visible,\n      disabled,\n      isHovered,\n    } = this;\n\n    return (\n      visible && (\n        <div\n          class={{\n            [\"chip\"]: true,\n            [`${appearance}`]: true,\n            [`${size}`]: true,\n            [\"disabled\"]: disabled,\n            [\"dismissible\"]: dismissible,\n            [\"hovered\"]: isHovered,\n          }}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography\n            variant=\"label\"\n            apply-vertical-margins={false}\n            class=\"label\"\n          >\n            <span>{label}</span>\n          </ic-typography>\n          {dismissible && (\n            <ic-tooltip\n              label=\"Dismiss\"\n              target=\"dismiss-icon\"\n              class={{ [\"tooltip-disabled\"]: disabled }}\n            >\n              <button\n                id=\"dismiss-icon\"\n                class={{\n                  [\"dismiss-icon\"]: true,\n                }}\n                aria-label={`Dismiss ${label} chip`}\n                disabled={disabled}\n                tabindex={disabled ? -1 : 0}\n                onClick={this.dismissAction}\n                onMouseEnter={this.mouseEnterHandler}\n                onMouseLeave={this.mouseLeaveHandler}\n                innerHTML={dismissIcon}\n              ></button>\n            </ic-tooltip>\n          )}\n        </div>\n      )\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-chip.js","sourceRoot":"","sources":["../../../src/components/ic-chip/ic-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcChipAppearance, IcChipSizes } from \"./ic-chip.types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/**\n * @slot icon - Content will be rendered at the start of the chip.\n */\n@Component({\n  tag: \"ic-chip\",\n  styleUrl: \"ic-chip.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Chip {\n  @Element() el: HTMLIcChipElement;\n\n  /**\n   * The text rendered within the chip.\n   */\n  @Prop() label!: string;\n  /**\n   * The emphasis of the chip.\n   */\n  @Prop() appearance?: IcChipAppearance = \"filled\";\n  /**\n   * The size of the chip.\n   */\n  @Prop() size?: IcChipSizes = \"default\";\n  /**\n   * If `true`, the chip will have a close button at the end to dismiss it.\n   */\n  @Prop() dismissible?: boolean = false;\n  /**\n   * If `true`, the chip will appear disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  @State() visible: boolean = true;\n\n  @State() isHovered: boolean = false;\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  /**\n   * @deprecated This event should not be used anymore. Use icDismiss instead.\n   */\n  @Event() dismiss: EventEmitter<void>;\n\n  /**\n   * Is emitted when the user dismisses the chip.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  private dismissAction = (): void => {\n    this.dismiss.emit();\n    this.icDismiss.emit();\n  };\n\n  private mouseEnterHandler = (): void => {\n    this.isHovered = true;\n  };\n\n  private mouseLeaveHandler = (): void => {\n    this.isHovered = false;\n  };\n\n  /**\n   * Sets focus on the chip.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"button\")) {\n      this.el.shadowRoot.querySelector(\"button\").focus();\n    }\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    this.dismissible &&\n      this.el.shadowRoot\n        .querySelector(\"span.ic-tooltip-label\")\n        ?.setAttribute(\"aria-hidden\", \"true\");\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Chip\"\n    );\n  }\n\n  render() {\n    const {\n      label,\n      appearance,\n      size,\n      dismissible,\n      visible,\n      disabled,\n      isHovered,\n    } = this;\n\n    return (\n      visible && (\n        <div\n          class={{\n            [\"chip\"]: true,\n            [`${appearance}`]: true,\n            [`${size}`]: true,\n            [\"disabled\"]: disabled,\n            [\"dismissible\"]: dismissible,\n            [\"hovered\"]: isHovered,\n          }}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography\n            variant=\"label\"\n            apply-vertical-margins={false}\n            class=\"label\"\n          >\n            <span>{label}</span>\n          </ic-typography>\n          {dismissible && (\n            <ic-tooltip\n              label=\"Dismiss\"\n              target=\"dismiss-icon\"\n              class={{ [\"tooltip-disabled\"]: disabled }}\n            >\n              <button\n                id=\"dismiss-icon\"\n                class={{\n                  [\"dismiss-icon\"]: true,\n                }}\n                aria-label={`Dismiss ${label} chip`}\n                disabled={disabled}\n                tabindex={disabled ? -1 : 0}\n                onClick={this.dismissAction}\n                onMouseEnter={this.mouseEnterHandler}\n                onMouseLeave={this.mouseLeaveHandler}\n                innerHTML={dismissIcon}\n              ></button>\n            </ic-tooltip>\n          )}\n        </div>\n      )\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,110 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Chip } from "./ic-chip";
+describe("ic-chip component renders label", () => {
+  it("should render static", async () => {
+    const page = await newSpecPage({
+      components: [Chip],
+      html: `<ic-chip label="Label">
+            <svg slot="icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z" fill="currentColor"/>
+</svg>
+            </ic-chip>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render dismissible", async () => {
+    const page = await newSpecPage({
+      components: [Chip],
+      html: `<ic-chip label="Label" dismissible="true">
+            <svg slot="icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z" fill="currentColor"/>
+</svg>
+            </ic-chip>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render disabled", async () => {
+    const page = await newSpecPage({
+      components: [Chip],
+      html: `<ic-chip label="Label" dismissible="true" disabled="true">
+            <svg slot="icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z" fill="currentColor"/>
+</svg>
+            </ic-chip>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render small", async () => {
+    const page = await newSpecPage({
+      components: [Chip],
+      html: `<ic-chip label="Label" dismissible="true" size="small">
+              <svg slot="icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z" fill="currentColor"/>
+  </svg>
+              </ic-chip>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should apply 'hovered' style when cursor is on dismiss button", async () => {
+    const page = await newSpecPage({
+      components: [Chip],
+      html: `<ic-chip id="test-id" label="Label" dismissible="true"></ic-chip>`,
+    });
+    expect(page.root).not.toBeNull;
+    const chip = await document.getElementById("test-id");
+    const dismissButton = page.root.shadowRoot.querySelector("button");
+    await expect(chip.classList.contains("hovered")).toBeFalsy;
+    const event = new Event("mouseenter", {
+      bubbles: true,
+      cancelable: true,
+    });
+    dismissButton.dispatchEvent(event);
+    await page.waitForChanges();
+    await expect(chip.classList.contains("hovered")).toBeTruthy;
+  });
+  it("should lose 'hovered' style when cursor moves off dismiss button", async () => {
+    const page = await newSpecPage({
+      components: [Chip],
+      html: `<ic-chip id="test-id" label="Label" dismissible="true"></ic-chip>`,
+    });
+    expect(page.root).not.toBeNull;
+    const chip = await document.getElementById("test-id");
+    const dismissButton = page.root.shadowRoot.querySelector("button");
+    const enterEvent = new Event("mouseenter", {
+      bubbles: true,
+      cancelable: true,
+    });
+    dismissButton.dispatchEvent(enterEvent);
+    await page.waitForChanges();
+    await expect(chip.classList.contains("hovered")).toBeTruthy;
+    const leaveEvent = new Event("mouseleave", {
+      bubbles: true,
+      cancelable: true,
+    });
+    dismissButton.dispatchEvent(leaveEvent);
+    await expect(chip.classList.contains("hovered")).toBeFalsy;
+  });
+  it("should close on dismiss icon click", async () => {
+    const page = await newSpecPage({
+      components: [Chip],
+      html: `<ic-chip label="This is dismissible" dismissible="true"></ic-chip>`,
+    });
+    let chip = await page.root.shadowRoot.querySelector("div");
+    const dismissButton = await page.root.shadowRoot.querySelector("button");
+    expect(chip).not.toBeNull();
+    expect(dismissButton).not.toBeNull();
+    await dismissButton.click();
+    await page.waitForChanges();
+    chip = await page.root.shadowRoot.querySelector("div");
+    expect(chip).toBeNull();
+  });
+  it("should call 'setFocus' when chip is focused", async () => {
+    const page = await newSpecPage({
+      components: [Chip],
+      html: `<ic-chip label="This is dismissible" dismissible="true"></ic-chip>`,
+    });
+    //Can't expect anything in this test - this is to increase code coverage only
+    await page.rootInstance.setFocus().toHaveBeenCalled;
+  });
+});
+//# sourceMappingURL=ic-chip.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-chip.spec.js","sourceRoot":"","sources":["../../../src/components/ic-chip/ic-chip.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Chip } from \"./ic-chip\";\n\ndescribe(\"ic-chip component renders label\", () => {\n  it(\"should render static\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n            </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render dismissible\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" dismissible=\"true\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n            </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render disabled\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" dismissible=\"true\" disabled=\"true\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n            </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render small\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" dismissible=\"true\" size=\"small\">\n              <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n  </svg>\n              </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should apply 'hovered' style when cursor is on dismiss button\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip id=\"test-id\" label=\"Label\" dismissible=\"true\"></ic-chip>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const chip = await document.getElementById(\"test-id\");\n\n    const dismissButton = page.root.shadowRoot.querySelector(\"button\");\n\n    await expect(chip.classList.contains(\"hovered\")).toBeFalsy;\n\n    const event = new Event(\"mouseenter\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    dismissButton.dispatchEvent(event);\n    await page.waitForChanges();\n\n    await expect(chip.classList.contains(\"hovered\")).toBeTruthy;\n  });\n\n  it(\"should lose 'hovered' style when cursor moves off dismiss button\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip id=\"test-id\" label=\"Label\" dismissible=\"true\"></ic-chip>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const chip = await document.getElementById(\"test-id\");\n\n    const dismissButton = page.root.shadowRoot.querySelector(\"button\");\n\n    const enterEvent = new Event(\"mouseenter\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    dismissButton.dispatchEvent(enterEvent);\n    await page.waitForChanges();\n\n    await expect(chip.classList.contains(\"hovered\")).toBeTruthy;\n\n    const leaveEvent = new Event(\"mouseleave\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    dismissButton.dispatchEvent(leaveEvent);\n\n    await expect(chip.classList.contains(\"hovered\")).toBeFalsy;\n  });\n\n  it(\"should close on dismiss icon click\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"This is dismissible\" dismissible=\"true\"></ic-chip>`,\n    });\n\n    let chip = await page.root.shadowRoot.querySelector(\"div\");\n    const dismissButton = await page.root.shadowRoot.querySelector(\"button\");\n\n    expect(chip).not.toBeNull();\n    expect(dismissButton).not.toBeNull();\n\n    await dismissButton.click();\n\n    await page.waitForChanges();\n    chip = await page.root.shadowRoot.querySelector(\"div\");\n\n    expect(chip).toBeNull();\n  });\n\n  it(\"should call 'setFocus' when chip is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"This is dismissible\" dismissible=\"true\"></ic-chip>`,\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-classification-banner/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/ic-classification-banner.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-classification-banner.spec.js","sourceRoot":"","sources":["../../../src/components/ic-classification-banner/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.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/ic-data-entity.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-data-entity.spec.js","sourceRoot":"","sources":["../../../src/components/ic-data-entity/ic-data-entity.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,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"]}