@ukic/web-components 3.0.0-alpha.1 → 3.0.0-alpha.10

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

@@ -34,6 +34,9 @@ describe("ic-chip component renders label", () => {
             </ic-chip>`,
         });
         expect(page.root).toMatchSnapshot();
+        page.rootInstance.disabled = false;
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot("disabled-removed");
     });
     it("should render small", async () => {
         const page = await newSpecPage({
@@ -79,6 +82,22 @@ describe("ic-chip component renders label", () => {
         });
         expect(page.root).toMatchSnapshot();
     });
+    it("should render outlined variant", async () => {
+        const page = await newSpecPage({
+            components: [Chip],
+            html: `<ic-chip label="Label" variant="outlined">
+        </ic-chip>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render outlined variant with solid-background", async () => {
+        const page = await newSpecPage({
+            components: [Chip],
+            html: `<ic-chip label="Label" variant="outlined" transparent-background="false">
+        </ic-chip>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
     it("should apply 'hovered' style when cursor is on dismiss button", async () => {
         const page = await newSpecPage({
             components: [Chip],

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

@@ -1 +1 @@
-{"version":3,"file":"ic-chip.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-chip/test/basic/ic-chip.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Chip } from \"../../ic-chip\";\nimport * as helpers from \"../../../../utils/helpers\";\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 render with custom colour\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" custom-color=\"#F8C8DC\">\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 with custom rgb colour\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" custom-color=\"rgb(248,200,220)\">\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 with custom colour that sets white foreground text\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" custom-color=\"#00008B\">\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  it(\"should switch custom colour after initial render\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Default\" custom-color=\"#F8C8DC\"></ic-chip>`,\n    });\n\n    const chip = document.querySelector(\"ic-chip\");\n\n    expect(page.rootInstance.customColor).toBe(\"#F8C8DC\");\n\n    chip.customColor = \"#00008B\";\n    await page.waitForChanges();\n\n    expect(page.rootInstance.customColor).toBe(\"#00008B\");\n  });\n\n  it(\"should apply the correct class when in an AG Grid\", async () => {\n    Object.defineProperty(helpers, \"isElInAGGrid\", {\n      value: jest.fn().mockReturnValue(true),\n    });\n\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Default\"></ic-chip>`,\n    });\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.inAGGrid).toBe(true);\n    expect(\n      page.root.shadowRoot\n        .querySelector(\"ic-typography\")\n        .classList.contains(\"in-ag-grid\")\n    ).toBe(true);\n  });\n});\n"]}
+{"version":3,"file":"ic-chip.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-chip/test/basic/ic-chip.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Chip } from \"../../ic-chip\";\nimport * as helpers from \"../../../../utils/helpers\";\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    page.rootInstance.disabled = false;\n\n    await page.waitForChanges();\n    expect(page.root).toMatchSnapshot(\"disabled-removed\");\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 render with custom colour\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" custom-color=\"#F8C8DC\">\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 with custom rgb colour\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" custom-color=\"rgb(248,200,220)\">\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 with custom colour that sets white foreground text\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" custom-color=\"#00008B\">\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 outlined variant\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" variant=\"outlined\">\n        </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render outlined variant with solid-background\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" variant=\"outlined\" transparent-background=\"false\">\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  it(\"should switch custom colour after initial render\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Default\" custom-color=\"#F8C8DC\"></ic-chip>`,\n    });\n\n    const chip = document.querySelector(\"ic-chip\");\n\n    expect(page.rootInstance.customColor).toBe(\"#F8C8DC\");\n\n    chip.customColor = \"#00008B\";\n    await page.waitForChanges();\n\n    expect(page.rootInstance.customColor).toBe(\"#00008B\");\n  });\n\n  it(\"should apply the correct class when in an AG Grid\", async () => {\n    Object.defineProperty(helpers, \"isElInAGGrid\", {\n      value: jest.fn().mockReturnValue(true),\n    });\n\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Default\"></ic-chip>`,\n    });\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.inAGGrid).toBe(true);\n    expect(\n      page.root.shadowRoot\n        .querySelector(\"ic-typography\")\n        .classList.contains(\"in-ag-grid\")\n    ).toBe(true);\n  });\n});\n"]}

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

@@ -471,24 +471,28 @@ video {
 }
 
 .default {
-  background-color: var(--ic-classification-not-set);
-  color: var(--ic-classification-not-set-foreground);
+  background-color: var(--ic-classification-banner-not-set);
+  color: var(--ic-classification-banner-text-inverted);
+}
+
+.official {
+  background-color: var(--ic-classification-banner-official);
+  color: var(--ic-classification-banner-text-inverted);
 }
 
-.official,
 .official-sensitive {
-  background-color: var(--ic-classification-official);
-  color: var(--ic-classification-official-foreground);
+  background-color: var(--ic-classification-banner-official-sensitive);
+  color: var(--ic-classification-banner-text-inverted);
 }
 
 .secret {
-  background-color: var(--ic-classification-secret);
-  color: var(--ic-classification-secret-foreground);
+  background-color: var(--ic-classification-banner-secret);
+  color: var(--ic-classification-banner-text);
 }
 
 .top-secret {
-  background-color: var(--ic-classification-top-secret);
-  color: var(--ic-classification-top-secret-foreground);
+  background-color: var(--ic-classification-banner-top-secret);
+  color: var(--ic-classification-banner-text-inverted);
 }
 
 .offscreen {
@@ -501,6 +505,6 @@ video {
 
 @media (forced-colors: active) {
   .classification-banner {
-    border: var(--ic-hc-border);
+    border: var(--ic-border-hc);
   }
 }

package/dist/collection/components/ic-classification-banner/ic-classification-banner.stories.js

@@ -0,0 +1,131 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  additionalSelectors: "",
+  classification: "official",
+  country: "uk",
+  inline: true,
+  upTo: false,
+};
+
+export default {
+  title: "Web Components/Classification banner",
+  component: "ic-classification-banner",
+};
+
+export const Classifications = {
+  render: () =>
+    html`<ic-classification-banner inline="true"></ic-classification-banner>
+      <ic-classification-banner
+        classification="official"
+        inline="true"
+      ></ic-classification-banner>
+      <ic-classification-banner
+        classification="official-sensitive"
+        inline="true"
+      ></ic-classification-banner>
+      <ic-classification-banner
+        classification="secret"
+        inline="true"
+      ></ic-classification-banner>
+      <ic-classification-banner
+        classification="top-secret"
+        inline="true"
+      ></ic-classification-banner>`,
+
+  name: "Classifications",
+};
+
+export const UpTo = {
+  render: () =>
+    html`<ic-classification-banner inline="true"></ic-classification-banner>
+      <ic-classification-banner
+        classification="official"
+        inline="true"
+        up-to="true"
+      ></ic-classification-banner>
+      <ic-classification-banner
+        classification="official-sensitive"
+        inline="true"
+        up-to="true"
+      ></ic-classification-banner>
+      <ic-classification-banner
+        classification="secret"
+        inline="true"
+        up-to="true"
+      ></ic-classification-banner>
+      <ic-classification-banner
+        classification="top-secret"
+        inline="true"
+        up-to="true"
+      ></ic-classification-banner>`,
+
+  name: "Up to",
+};
+
+export const BottomOfPage = {
+  render: () =>
+    html`<ic-classification-banner
+      classification="official"
+    ></ic-classification-banner>`,
+
+  name: "Bottom of page",
+};
+
+export const Country = {
+  render: () =>
+    html`<ic-classification-banner
+        classification="official"
+        inline="true"
+        country="us"
+      ></ic-classification-banner>
+      <ic-classification-banner
+        classification="official"
+        inline="true"
+        country=""
+      ></ic-classification-banner>`,
+
+  name: "Country",
+};
+
+export const AdditionalSelectors = {
+  render: () =>
+    html`<ic-classification-banner
+      classification="official"
+      inline="true"
+      additional-selectors="ukic"
+    />`,
+
+  name: "Additional selectors",
+};
+
+export const Playground = {
+  render: (args) =>
+    html`<ic-classification-banner
+      classification=${args.classification}
+      inline=${args.inline}
+      up-to=${args.upTo}
+      country=${args.country}
+      additional-selectors=${args.additionalSelectors}
+    ></ic-classification-banner>`,
+
+  args: defaultArgs,
+
+  argTypes: {
+    classification: {
+      options: [
+        "default",
+        "official",
+        "secret",
+        "official-sensitive",
+        "top-secret",
+      ],
+
+      control: {
+        type: "select",
+      },
+    },
+  },
+
+  name: "Playground",
+};