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

package/dist/collection/components/ic-theme/ic-theme.stories.js

@@ -0,0 +1,434 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  brandColor: "rgba(27, 60, 121, 1)",
+  theme: "light",
+};
+
+const defaultThemeArgs = {
+  theme: "light",
+  componentTheme: "light",
+};
+
+export default {
+  title: "Web Components/Theme",
+  component: "ic-theme",
+};
+
+export const SwitchBrand = {
+  render: () =>
+    html` <ic-theme brand-color="rgba(27, 60, 121, 1)">
+      <ic-button
+        variant="primary"
+        id="default-btn"
+        onClick="document.querySelector('ic-theme').brandColor='rgb(27, 60, 121)'"
+      >
+        Default brand
+      </ic-button>
+      <ic-button
+        variant="primary"
+        id="custom-btn"
+        onClick="document.querySelector('ic-theme').brandColor='rgba(255, 201, 60, 1)'"
+      >
+        Sunrise brand
+      </ic-button>
+      <div style="padding-top:10px">
+        <ic-top-navigation
+          app-title="ApplicationName"
+          status="alpha"
+          version="v0.0.7"
+        >
+          <svg
+            slot="app-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+            />
+          </svg>
+          <ic-search-bar
+            slot="search"
+            placeholder="Search"
+            label="Search"
+          ></ic-search-bar>
+          <ic-navigation-button
+            label="button1"
+            slot="buttons"
+            onclick="alert('test')"
+          >
+            <svg
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              fill="#000000"
+            >
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path
+                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+              />
+            </svg>
+          </ic-navigation-button>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+            selected="true"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+        </ic-top-navigation>
+        <ic-hero
+          heading="Hero heading"
+          subheading="Hero description. This is a Hero component, it should be used as a page heading."
+          secondary-heading="Secondary Heading"
+          secondary-subheading="This is a secondary description."
+          full-width
+        >
+          <div slot="interaction" style="display: flex">
+            <ic-text-field
+              placeholder="Filter display"
+              label="Filter display"
+              hide-label
+            ></ic-text-field>
+            <ic-button variant="primary" style="margin-left:16px"
+              >Filter</ic-button
+            >
+          </div>
+          <ic-button variant="secondary" slot="interaction">See all</ic-button>
+          <ic-link
+            href="https://google.com"
+            slot="interaction"
+            style="margin-top:10px"
+            >Help</ic-link
+          >
+        </ic-hero>
+        <ic-alert
+          heading="This alert uses a custom message slot"
+          dismissible="true"
+          ><ic-button slot="action" variant="secondary">Button</ic-button>
+          <ic-typography variant="body" slot="message">
+            <p>
+              This is some text and
+              <ic-link href="/" inline> this is an inline link</ic-link> within
+              the text.
+            </p>
+          </ic-typography>
+        </ic-alert>
+        <ic-footer
+          align="full-width"
+          description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+          please get in touch."
+          caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+        >
+          <ic-footer-link slot="link" href="/">Get Started</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Accessibility</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Styles</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Components</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Patterns</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Design toolkit</ic-footer-link>
+          <div
+            slot="logo"
+            style="display:flex; align-items:center; gap:var(--ic-space-sm);"
+          >
+            <ic-button>Slotted Button</ic-button>
+            <ic-footer-link href="/">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height="48px"
+                viewBox="0 0 24 24"
+                width="48px"
+              >
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path
+                  d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"
+                />
+              </svg>
+            </ic-footer-link>
+          </div>
+        </ic-footer>
+      </div>
+    </ic-theme>`,
+
+  name: "Switch brand",
+};
+
+const inlineRadioSelector = "inline-radio";
+
+export const Playground = {
+  render: (args) =>
+    html` <ic-theme brand-color=${args.brandColor} theme=${args.theme}>
+      <div style="padding-top:10px">
+        <ic-top-navigation
+          app-title="ApplicationName"
+          status="alpha"
+          version="v0.0.7"
+        >
+          <svg
+            slot="app-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+            />
+          </svg>
+          <ic-search-bar
+            slot="search"
+            placeholder="Search"
+            label="Search"
+          ></ic-search-bar>
+          <ic-navigation-button
+            label="button1"
+            slot="buttons"
+            onclick="alert('test')"
+          >
+            <svg
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              fill="#000000"
+            >
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path
+                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+              />
+            </svg>
+          </ic-navigation-button>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+            selected="true"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+        </ic-top-navigation>
+        <ic-hero
+          heading="Hero heading"
+          subheading="Hero description. This is a Hero component, it should be used as a page heading."
+          secondary-heading="Secondary Heading"
+          secondary-subheading="This is a secondary description."
+          full-width
+        >
+          <div slot="interaction" style="display: flex">
+            <ic-text-field
+              placeholder="Filter display"
+              label="Filter display"
+              hide-label
+            ></ic-text-field>
+            <ic-button variant="primary" style="margin-left:16px"
+              >Filter</ic-button
+            >
+          </div>
+          <ic-button variant="secondary" slot="interaction">See all</ic-button>
+          <ic-link
+            href="https://google.com"
+            slot="interaction"
+            style="margin-top:10px"
+            >Help</ic-link
+          >
+        </ic-hero>
+        <ic-section-container
+          style="display:flex; flex-direction: column; gap: 0.5rem"
+        >
+          <ic-checkbox
+            value="valueName1"
+            label="Unselected / Default"
+          ></ic-checkbox>
+          <ic-text-field
+            label="What is your favourite coffee?"
+            required
+            placeholder="Placeholder"
+            helper-text="Such as Arabica, Robusta or Liberica"
+          >
+          </ic-text-field>
+          <ic-alert
+            heading="This alert uses a custom message slot"
+            dismissible="true"
+            ><ic-button slot="action" variant="secondary">Button</ic-button>
+            <ic-typography variant="body" slot="message">
+              <p>
+                This is some text and
+                <ic-link href="/" inline> this is an inline link</ic-link>
+                within the text.
+              </p>
+            </ic-typography>
+          </ic-alert>
+          <ic-card-vertical
+            heading="This is the card heading"
+          ></ic-card-vertical>
+          <ic-text-field
+            label="What is your favourite coffee?"
+            required
+            placeholder="Placeholder"
+            helper-text="Such as Arabica, Robusta or Liberica"
+          >
+          </ic-text-field>
+          <div style="background-color:#000000; border: 1px solid #ffffff;">
+            <span style="color:#ffffff"
+              >This content is in an ic-theme component with dark mode set</span
+            >
+            <ic-theme theme="dark">
+              <ic-card-vertical
+                heading="This is the card heading"
+              ></ic-card-vertical>
+              <ic-text-field
+                label="What is your favourite coffee?"
+                required
+                placeholder="Placeholder"
+                helper-text="Such as Arabica, Robusta or Liberica"
+              >
+              </ic-text-field>
+            </ic-theme>
+          </div>
+        </ic-section-container>
+        <ic-footer
+          align="full-width"
+          description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+          please get in touch."
+          caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+        >
+          <ic-footer-link slot="link" href="/">Get Started</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Accessibility</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Styles</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Components</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Patterns</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Design toolkit</ic-footer-link>
+          <div
+            slot="logo"
+            style="display:flex; align-items:center; gap:var(--ic-space-sm);"
+          >
+            <ic-button>Slotted Button</ic-button>
+            <ic-footer-link href="/">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height="48px"
+                viewBox="0 0 24 24"
+                width="48px"
+              >
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path
+                  d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"
+                />
+              </svg>
+            </ic-footer-link>
+          </div>
+        </ic-footer>
+        <ic-back-to-top target="topEl"></ic-back-to-top>
+      </div>
+    </ic-theme>`,
+
+  name: "Playground",
+  args: defaultArgs,
+
+  parameters: {
+    layout: "fullscreen",
+  },
+
+  argTypes: {
+    theme: {
+      options: ["system", "light", "dark"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+  },
+};
+
+export const ThemeVisualisationPlayground = {
+  render: (args) =>
+    html`<div
+      style="background-color: ${args.theme == "dark"
+        ? "black"
+        : args.theme == "light"
+        ? "white"
+        : null};width:450px;height:150px"
+    >
+      <ic-theme theme=${args.theme}>
+        <div
+          style="background-color: ${args.componentTheme == "dark"
+            ? "black"
+            : args.componentTheme == "light"
+            ? "white"
+            : null};width:250px"
+        >
+          <ic-typography theme=${args.componentTheme}>Theme test</ic-typography>
+        </div>
+      </ic-theme>
+    </div>`,
+
+  name: "Theme visualisation playground",
+  args: defaultThemeArgs,
+
+  parameters: {
+    layout: "fullscreen",
+  },
+
+  argTypes: {
+    theme: {
+      options: ["system", "light", "dark"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+
+    componentTheme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+  },
+};

package/dist/collection/components/ic-theme/test/basic/ic-theme.e2e.js

@@ -6,12 +6,12 @@ describe("ic-theme", () => {
         const element = await page.find("ic-theme");
         expect(element).toHaveClass("hydrated");
     });
-    it("should emit themeChange when setThemeRGB method called", async () => {
+    it("should emit brandChange event when brandColor is changed", async () => {
         const page = await newE2EPage();
         await page.setContent(`<ic-theme></ic-theme>`);
-        const spy = await page.spyOnEvent("themeChange");
+        const spy = await page.spyOnEvent("brandChange");
         await page.$eval("ic-theme", (elm) => {
-            elm.color = "rgb(255, 201, 60)";
+            elm.brandColor = "rgb(255, 201, 60)";
         });
         await page.waitForChanges();
         expect(spy).toHaveReceivedEventDetail({
@@ -24,7 +24,7 @@ describe("ic-theme", () => {
             },
         });
         await page.$eval("ic-theme", (elm) => {
-            elm.color = "rgb(35, 81, 142)";
+            elm.brandColor = "rgb(35, 81, 142)";
         });
         await page.waitForChanges();
         expect(spy).toHaveReceivedEventDetail({
@@ -40,9 +40,9 @@ describe("ic-theme", () => {
     it("should emit correct textColor when rgb values invalid", async () => {
         const page = await newE2EPage();
         await page.setContent("<ic-theme></ic-theme>");
-        const spy = await page.spyOnEvent("themeChange");
+        const spy = await page.spyOnEvent("brandChange");
         await page.$eval("ic-theme", (elm) => {
-            elm.color = "rgb(1000, 1000, 1000)";
+            elm.brandColor = "rgb(1000, 1000, 1000)";
         });
         await page.waitForChanges();
         expect(spy).toHaveReceivedEventDetail({
@@ -55,7 +55,7 @@ describe("ic-theme", () => {
             },
         });
         await page.$eval("ic-theme", (elm) => {
-            elm.color = "rgb(-1, -1, -1)";
+            elm.brandColor = "rgb(-1, -1, -1)";
         });
         await page.waitForChanges();
         expect(spy).toHaveReceivedEventDetail({

package/dist/collection/components/ic-theme/test/basic/ic-theme.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-theme.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-theme/test/basic/ic-theme.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-theme\", () => {\n  it(\"should render\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-theme></ic-theme>`);\n\n    const element = await page.find(\"ic-theme\");\n    expect(element).toHaveClass(\"hydrated\");\n  });\n\n  it(\"should emit themeChange when setThemeRGB method called\", async () => {\n    const page = await newE2EPage();\n\n    await page.setContent(`<ic-theme></ic-theme>`);\n\n    const spy = await page.spyOnEvent(\"themeChange\");\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(255, 201, 60)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"dark\",\n      color: {\n        a: 1,\n        b: 60,\n        g: 201,\n        r: 255,\n      },\n    });\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(35, 81, 142)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"light\",\n      color: {\n        a: 1,\n        b: 142,\n        g: 81,\n        r: 35,\n      },\n    });\n  });\n\n  it(\"should emit correct textColor when rgb values invalid\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\"<ic-theme></ic-theme>\");\n\n    const spy = await page.spyOnEvent(\"themeChange\");\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(1000, 1000, 1000)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"dark\",\n      color: {\n        a: 1,\n        b: 1000,\n        g: 1000,\n        r: 1000,\n      },\n    });\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(-1, -1, -1)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"light\",\n      color: {\n        a: 1,\n        b: -1,\n        g: -1,\n        r: -1,\n      },\n    });\n  });\n});\n"]}
+{"version":3,"file":"ic-theme.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-theme/test/basic/ic-theme.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-theme\", () => {\n  it(\"should render\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-theme></ic-theme>`);\n\n    const element = await page.find(\"ic-theme\");\n    expect(element).toHaveClass(\"hydrated\");\n  });\n\n  it(\"should emit brandChange event when brandColor is changed\", async () => {\n    const page = await newE2EPage();\n\n    await page.setContent(`<ic-theme></ic-theme>`);\n\n    const spy = await page.spyOnEvent(\"brandChange\");\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.brandColor = \"rgb(255, 201, 60)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"dark\",\n      color: {\n        a: 1,\n        b: 60,\n        g: 201,\n        r: 255,\n      },\n    });\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.brandColor = \"rgb(35, 81, 142)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"light\",\n      color: {\n        a: 1,\n        b: 142,\n        g: 81,\n        r: 35,\n      },\n    });\n  });\n\n  it(\"should emit correct textColor when rgb values invalid\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\"<ic-theme></ic-theme>\");\n\n    const spy = await page.spyOnEvent(\"brandChange\");\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.brandColor = \"rgb(1000, 1000, 1000)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"dark\",\n      color: {\n        a: 1,\n        b: 1000,\n        g: 1000,\n        r: 1000,\n      },\n    });\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.brandColor = \"rgb(-1, -1, -1)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"light\",\n      color: {\n        a: 1,\n        b: -1,\n        g: -1,\n        r: -1,\n      },\n    });\n  });\n});\n"]}

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

@@ -2,20 +2,20 @@ import { newSpecPage } from "@stencil/core/testing";
 import { Theme } from "../../ic-theme";
 import * as helpers from "../../../../utils/helpers";
 import { BLACK_MIN_COLOR_BRIGHTNESS, WHITE_MAX_COLOR_BRIGHTNESS, } from "../../../../utils/constants";
-//mocked as getThemeColorBrightness is NaN when run in test context
+//mocked as getBrandColorBrightness is NaN when run in test context
 //instead we return a value which will trigger the console warning about theme color contrast
 const mockThemeColorContrastFail = () => {
     const func = jest.fn(() => {
         return (BLACK_MIN_COLOR_BRIGHTNESS + WHITE_MAX_COLOR_BRIGHTNESS) / 2;
     });
-    Object.defineProperty(helpers, "getThemeColorBrightness", {
+    Object.defineProperty(helpers, "getBrandColorBrightness", {
         value: func,
     });
 };
 const expectRGBToBe = (page, expectR, expectG, expectB) => {
-    const r = page.doc.documentElement.style.getPropertyValue("--ic-theme-primary-r");
-    const g = page.doc.documentElement.style.getPropertyValue("--ic-theme-primary-g");
-    const b = page.doc.documentElement.style.getPropertyValue("--ic-theme-primary-b");
+    const r = page.doc.documentElement.style.getPropertyValue("--ic-brand-color-primary-r");
+    const g = page.doc.documentElement.style.getPropertyValue("--ic-brand-color-primary-g");
+    const b = page.doc.documentElement.style.getPropertyValue("--ic-brand-color-primary-b");
     expect(r).toBe(expectR);
     expect(g).toBe(expectG);
     expect(b).toBe(expectB);
@@ -27,28 +27,28 @@ describe("ic-theme", () => {
     it("should set theme colour with hex", async () => {
         const page = await newSpecPage({
             components: [Theme],
-            html: `<ic-theme color="#FFC0CB"></ic-theme>`,
+            html: `<ic-theme brand-color="#FFC0CB"></ic-theme>`,
         });
         expectRGBToBe(page, "255", "192", "203");
     });
     it("should set theme colour with 3 character hex", async () => {
         const page = await newSpecPage({
             components: [Theme],
-            html: `<ic-theme color="#FFF"></ic-theme>`,
+            html: `<ic-theme brand-color="#FFF"></ic-theme>`,
         });
         expectRGBToBe(page, "255", "255", "255");
     });
     it("should set theme colour with rgb", async () => {
         const page = await newSpecPage({
             components: [Theme],
-            html: `<ic-theme color="rgb(159, 43, 104)"></ic-theme>`,
+            html: `<ic-theme brand-color="rgb(159, 43, 104)"></ic-theme>`,
         });
         expectRGBToBe(page, "159", "43", "104");
     });
     it("should set theme colour with rgba", async () => {
         const page = await newSpecPage({
             components: [Theme],
-            html: `<ic-theme color="rgba(159, 43, 104, 1)"></ic-theme>`,
+            html: `<ic-theme brand-color="rgba(159, 43, 104, 1)"></ic-theme>`,
         });
         expectRGBToBe(page, "159", "43", "104");
     });
@@ -56,9 +56,9 @@ describe("ic-theme", () => {
         mockThemeColorContrastFail();
         const page = await newSpecPage({
             components: [Theme],
-            html: `<ic-theme color="rgba(159, 43, 104)"></ic-theme>`,
+            html: `<ic-theme brand-color="rgba(159, 43, 104)"></ic-theme>`,
         });
-        page.root.color = "rgba(133, 133, 133, 1)";
+        page.root.brandColor = "rgba(133, 133, 133, 1)";
         await page.waitForChanges();
         expectRGBToBe(page, "133", "133", "133");
     });

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

@@ -1 +1 @@
-{"version":3,"file":"ic-theme.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-theme/test/basic/ic-theme.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage, SpecPage } from \"@stencil/core/testing\";\nimport { Theme } from \"../../ic-theme\";\nimport * as helpers from \"../../../../utils/helpers\";\nimport {\n  BLACK_MIN_COLOR_BRIGHTNESS,\n  WHITE_MAX_COLOR_BRIGHTNESS,\n} from \"../../../../utils/constants\";\n\n//mocked as getThemeColorBrightness is NaN when run in test context\n//instead we return a value which will trigger the console warning about theme color contrast\nconst mockThemeColorContrastFail = () => {\n  const func = jest.fn(() => {\n    return (BLACK_MIN_COLOR_BRIGHTNESS + WHITE_MAX_COLOR_BRIGHTNESS) / 2;\n  });\n\n  Object.defineProperty(helpers, \"getThemeColorBrightness\", {\n    value: func,\n  });\n};\n\nconst expectRGBToBe = (\n  page: SpecPage,\n  expectR: string,\n  expectG: string,\n  expectB: string\n) => {\n  const r = page.doc.documentElement.style.getPropertyValue(\n    \"--ic-theme-primary-r\"\n  );\n  const g = page.doc.documentElement.style.getPropertyValue(\n    \"--ic-theme-primary-g\"\n  );\n  const b = page.doc.documentElement.style.getPropertyValue(\n    \"--ic-theme-primary-b\"\n  );\n\n  expect(r).toBe(expectR);\n  expect(g).toBe(expectG);\n  expect(b).toBe(expectB);\n};\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-theme\", () => {\n  it(\"should set theme colour with hex\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme color=\"#FFC0CB\"></ic-theme>`,\n    });\n\n    expectRGBToBe(page, \"255\", \"192\", \"203\");\n  });\n\n  it(\"should set theme colour with 3 character hex\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme color=\"#FFF\"></ic-theme>`,\n    });\n\n    expectRGBToBe(page, \"255\", \"255\", \"255\");\n  });\n\n  it(\"should set theme colour with rgb\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme color=\"rgb(159, 43, 104)\"></ic-theme>`,\n    });\n\n    expectRGBToBe(page, \"159\", \"43\", \"104\");\n  });\n\n  it(\"should set theme colour with rgba\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme color=\"rgba(159, 43, 104, 1)\"></ic-theme>`,\n    });\n    expectRGBToBe(page, \"159\", \"43\", \"104\");\n  });\n\n  it(\"should test updating theme color\", async () => {\n    mockThemeColorContrastFail();\n\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme color=\"rgba(159, 43, 104)\"></ic-theme>`,\n    });\n\n    page.root.color = \"rgba(133, 133, 133, 1)\";\n    await page.waitForChanges();\n\n    expectRGBToBe(page, \"133\", \"133\", \"133\");\n  });\n\n  it(\"should test 'theme' prop\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme theme=\"dark\"></ic-theme>`,\n    });\n\n    expect(page.root).toHaveClass(\"ic-theme-dark\");\n\n    page.root.theme = \"light\";\n\n    await page.waitForChanges();\n\n    expect(page.root).toHaveClass(\"ic-theme-light\");\n\n    page.root.theme = \"system\";\n\n    await page.waitForChanges();\n\n    expect(page.root).toHaveClass(\"ic-theme-light\");\n  });\n});\n"]}
+{"version":3,"file":"ic-theme.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-theme/test/basic/ic-theme.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage, SpecPage } from \"@stencil/core/testing\";\nimport { Theme } from \"../../ic-theme\";\nimport * as helpers from \"../../../../utils/helpers\";\nimport {\n  BLACK_MIN_COLOR_BRIGHTNESS,\n  WHITE_MAX_COLOR_BRIGHTNESS,\n} from \"../../../../utils/constants\";\n\n//mocked as getBrandColorBrightness is NaN when run in test context\n//instead we return a value which will trigger the console warning about theme color contrast\nconst mockThemeColorContrastFail = () => {\n  const func = jest.fn(() => {\n    return (BLACK_MIN_COLOR_BRIGHTNESS + WHITE_MAX_COLOR_BRIGHTNESS) / 2;\n  });\n\n  Object.defineProperty(helpers, \"getBrandColorBrightness\", {\n    value: func,\n  });\n};\n\nconst expectRGBToBe = (\n  page: SpecPage,\n  expectR: string,\n  expectG: string,\n  expectB: string\n) => {\n  const r = page.doc.documentElement.style.getPropertyValue(\n    \"--ic-brand-color-primary-r\"\n  );\n  const g = page.doc.documentElement.style.getPropertyValue(\n    \"--ic-brand-color-primary-g\"\n  );\n  const b = page.doc.documentElement.style.getPropertyValue(\n    \"--ic-brand-color-primary-b\"\n  );\n\n  expect(r).toBe(expectR);\n  expect(g).toBe(expectG);\n  expect(b).toBe(expectB);\n};\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-theme\", () => {\n  it(\"should set theme colour with hex\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme brand-color=\"#FFC0CB\"></ic-theme>`,\n    });\n\n    expectRGBToBe(page, \"255\", \"192\", \"203\");\n  });\n\n  it(\"should set theme colour with 3 character hex\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme brand-color=\"#FFF\"></ic-theme>`,\n    });\n\n    expectRGBToBe(page, \"255\", \"255\", \"255\");\n  });\n\n  it(\"should set theme colour with rgb\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme brand-color=\"rgb(159, 43, 104)\"></ic-theme>`,\n    });\n\n    expectRGBToBe(page, \"159\", \"43\", \"104\");\n  });\n\n  it(\"should set theme colour with rgba\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme brand-color=\"rgba(159, 43, 104, 1)\"></ic-theme>`,\n    });\n    expectRGBToBe(page, \"159\", \"43\", \"104\");\n  });\n\n  it(\"should test updating theme color\", async () => {\n    mockThemeColorContrastFail();\n\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme brand-color=\"rgba(159, 43, 104)\"></ic-theme>`,\n    });\n\n    page.root.brandColor = \"rgba(133, 133, 133, 1)\";\n    await page.waitForChanges();\n\n    expectRGBToBe(page, \"133\", \"133\", \"133\");\n  });\n\n  it(\"should test 'theme' prop\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme theme=\"dark\"></ic-theme>`,\n    });\n\n    expect(page.root).toHaveClass(\"ic-theme-dark\");\n\n    page.root.theme = \"light\";\n\n    await page.waitForChanges();\n\n    expect(page.root).toHaveClass(\"ic-theme-light\");\n\n    page.root.theme = \"system\";\n\n    await page.waitForChanges();\n\n    expect(page.root).toHaveClass(\"ic-theme-light\");\n  });\n});\n"]}