@watermarkinsights/ripple 4.2.0-0 → 4.2.0

package/dist/collection/components/wm-timepicker/wm-timepicker.spec.js

@@ -1,156 +1,156 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { Timepicker } from "./wm-timepicker";
 describe("timepicker", () => {
-    let page;
-    // let timepicker: any;
-    beforeEach(async () => {
-        page = await newSpecPage({
-            components: [Timepicker],
-            html: "<wm-timepicker label='timepicker'></wm-timepicker>",
-        });
-    });
-    it("builds", async () => {
-        expect(page.root).toMatchSnapshot();
-    });
-    it("prevents user actions when disabled", async () => {
-        await page.setContent(`<wm-timepicker label='timepicker' disabled></wm-timepicker>`);
-        const input = await page.root.shadowRoot.querySelector("input");
-        const button = await page.root.shadowRoot.querySelector("button");
-        expect(input).toHaveAttribute("disabled");
-        expect(button).toHaveAttribute("disabled");
-    });
-    it("validates input", async () => {
-        const timepicker = new Timepicker();
-        // user passes hour
-        expect(await timepicker.isValidTime("0")).toBe(true);
-        expect(await timepicker.isValidTime("24")).toBe(true);
-        expect(await timepicker.isValidTime("8p")).toBe(true);
-        expect(await timepicker.isValidTime("12 a")).toBe(true);
-        expect(await timepicker.isValidTime("02am")).toBe(true);
-        expect(await timepicker.isValidTime("8:")).toBe(true);
-        // user passes hour and minutes
-        expect(await timepicker.isValidTime("1223")).toBe(true);
-        expect(await timepicker.isValidTime("927a")).toBe(true);
-        expect(await timepicker.isValidTime("12:12pm")).toBe(true);
-        expect(await timepicker.isValidTime("3:45 am")).toBe(true);
-        // rejected
-        expect(await timepicker.isValidTime("6f")).toBe(false);
-        expect(await timepicker.isValidTime("12m")).toBe(false);
-        expect(await timepicker.isValidTime("a")).toBe(false);
-        expect(await timepicker.isValidTime("92")).toBe(false);
-        expect(await timepicker.isValidTime("88:88")).toBe(false);
-        expect(await timepicker.isValidTime("999pm")).toBe(false);
-        expect(await timepicker.isValidTime("o1236")).toBe(false);
-        expect(await timepicker.isValidTime("12:45fm")).toBe(false);
-        expect(await timepicker.isValidTime("12342")).toBe(false);
-        expect(await timepicker.isValidTime("123:")).toBe(false);
-        expect(await timepicker.isValidTime("3:123")).toBe(false);
-        expect(await timepicker.isValidTime("4:60 pm")).toBe(false);
-        // weird edge cases
-        expect(await timepicker.isValidTime("17am")).toBe(false);
-        expect(await timepicker.isValidTime("17pm")).toBe(false);
-        // this is not caught by the regex, so we handle it later
-        expect(await timepicker.isValidTime("0pm")).toBe(true);
-    });
-    it("reformats", async () => {
-        const timepicker = new Timepicker();
-        expect(await timepicker.reformatTime("12", "00:00")).toBe("12:00 AM");
-        //@ts-ignore
-        expect(await timepicker.reformatTime("12", "12:00am")).toBe("12:00 AM");
-        //@ts-ignore
-        expect(await timepicker.reformatTime("12", "12:00pm")).toBe("12:00 PM");
-        expect(await timepicker.reformatTime("12", "24:00")).toBe("12:00 AM");
-        expect(await timepicker.reformatTime("12", "17:00")).toBe("05:00 PM");
-        expect(await timepicker.reformatTime("12", "7:00 am")).toBe("07:00 AM");
-        expect(await timepicker.reformatTime("12", "7 : 35")).toBe("07:35 AM");
-        expect(await timepicker.reformatTime("24", "0:00")).toBe("00:00");
-        //@ts-ignore
-        expect(await timepicker.reformatTime("24", "12:00am")).toBe("00:00");
-        //@ts-ignore
-        expect(await timepicker.reformatTime("24", "12:00pm")).toBe("12:00");
-        expect(await timepicker.reformatTime("24", "24:00")).toBe("00:00");
-        //@ts-ignore
-        expect(await timepicker.reformatTime("24", "1700")).toBe("17:00");
-        //@ts-ignore
-        expect(await timepicker.reformatTime("24", "700a")).toBe("07:00");
-        expect(await timepicker.reformatTime("24", "7 :00 pm")).toBe("19:00");
-        expect(await timepicker.reformatTime("24", "17: 35")).toBe("17:35");
-    });
-    it("finds nearest time interval", async () => {
-        const timepicker = new Timepicker();
-        expect(await timepicker.findNearestTimeInterval("00:07")).toBe("00:00");
-        expect(await timepicker.findNearestTimeInterval("01:08")).toBe("01:15");
-        expect(await timepicker.findNearestTimeInterval("01:15")).toBe("01:15");
-        expect(await timepicker.findNearestTimeInterval("02:22")).toBe("02:15");
-        expect(await timepicker.findNearestTimeInterval("03:23")).toBe("03:30");
-        expect(await timepicker.findNearestTimeInterval("03:30")).toBe("03:30");
-        expect(await timepicker.findNearestTimeInterval("04:37")).toBe("04:30");
-        expect(await timepicker.findNearestTimeInterval("15:38")).toBe("15:45");
-        expect(await timepicker.findNearestTimeInterval("15:45")).toBe("15:45");
-        expect(await timepicker.findNearestTimeInterval("16:52")).toBe("16:45");
-        expect(await timepicker.findNearestTimeInterval("17:53")).toBe("18:00");
-        expect(await timepicker.findNearestTimeInterval("18:00")).toBe("18:00");
-        expect(await timepicker.findNearestTimeInterval("23:59")).toBe("00:00");
-        // edge case regarding leading zeroes
-        expect(await timepicker.findNearestTimeInterval("09:59")).toBe("10:00");
-    });
-    it("splits time", () => {
-        const timepicker = new Timepicker();
-        expect(timepicker.splitTime("5:37")).toStrictEqual([5, "37", undefined]);
-        expect(timepicker.splitTime("5:37 am")).toStrictEqual([5, "37", "am"]);
-        expect(timepicker.splitTime("09:00")).toStrictEqual([9, "00", undefined]);
-        expect(timepicker.splitTime("13:52")).toStrictEqual([13, "52", undefined]);
-        // edge case
-        //@ts-ignore
-        expect(timepicker.splitTime("0pm")).toStrictEqual([0, "00", "AM"]);
-    });
-    it("generates times", () => {
-        const timepicker = new Timepicker();
-        //prettier-ignore
-        expect(timepicker.generateTimeIntervals()).toStrictEqual([
-            "00:00", "00:15", "00:30", "00:45",
-            "01:00", "01:15", "01:30", "01:45",
-            "02:00", "02:15", "02:30", "02:45",
-            "03:00", "03:15", "03:30", "03:45",
-            "04:00", "04:15", "04:30", "04:45",
-            "05:00", "05:15", "05:30", "05:45",
-            "06:00", "06:15", "06:30", "06:45",
-            "07:00", "07:15", "07:30", "07:45",
-            "08:00", "08:15", "08:30", "08:45",
-            "09:00", "09:15", "09:30", "09:45",
-            "10:00", "10:15", "10:30", "10:45",
-            "11:00", "11:15", "11:30", "11:45",
-            "12:00", "12:15", "12:30", "12:45",
-            "13:00", "13:15", "13:30", "13:45",
-            "14:00", "14:15", "14:30", "14:45",
-            "15:00", "15:15", "15:30", "15:45",
-            "16:00", "16:15", "16:30", "16:45",
-            "17:00", "17:15", "17:30", "17:45",
-            "18:00", "18:15", "18:30", "18:45",
-            "19:00", "19:15", "19:30", "19:45",
-            "20:00", "20:15", "20:30", "20:45",
-            "21:00", "21:15", "21:30", "21:45",
-            "22:00", "22:15", "22:30", "22:45",
-            "23:00", "23:15", "23:30", "23:45",
-        ]);
-    });
-    it("renders error", async () => {
-        await page.setContent(`<wm-timepicker label='timepicker' error-message="There is an error."></wm-timepicker>`);
-        const errorEl = page.root.shadowRoot.querySelector(".error");
-        expect(errorEl.textContent).toBe("There is an error.");
-    });
-    it("sets input to required", async () => {
-        await page.setContent(`<wm-timepicker label='timepicker' required-field='true'></wm-timepicker>`);
-        const input = await page.root.shadowRoot.querySelector("input");
-        expect(input).toEqualAttribute("aria-required", "true");
-    });
-    it("toggles isTabbing", () => {
-        // toggleTabbingOn, toggleTabbingOff
-        const component = new Timepicker();
-        expect(component.isTabbing).toBeFalsy();
-        component.toggleTabbingOn();
-        expect(component.isTabbing).toBeTruthy();
-        component.toggleTabbingOff();
-        expect(component.isTabbing).toBeFalsy();
+  let page;
+  // let timepicker: any;
+  beforeEach(async () => {
+    page = await newSpecPage({
+      components: [Timepicker],
+      html: "<wm-timepicker label='timepicker'></wm-timepicker>",
     });
+  });
+  it("builds", async () => {
+    expect(page.root).toMatchSnapshot();
+  });
+  it("prevents user actions when disabled", async () => {
+    await page.setContent(`<wm-timepicker label='timepicker' disabled></wm-timepicker>`);
+    const input = await page.root.shadowRoot.querySelector("input");
+    const button = await page.root.shadowRoot.querySelector("button");
+    expect(input).toHaveAttribute("disabled");
+    expect(button).toHaveAttribute("disabled");
+  });
+  it("validates input", async () => {
+    const timepicker = new Timepicker();
+    // user passes hour
+    expect(await timepicker.isValidTime("0")).toBe(true);
+    expect(await timepicker.isValidTime("24")).toBe(true);
+    expect(await timepicker.isValidTime("8p")).toBe(true);
+    expect(await timepicker.isValidTime("12 a")).toBe(true);
+    expect(await timepicker.isValidTime("02am")).toBe(true);
+    expect(await timepicker.isValidTime("8:")).toBe(true);
+    // user passes hour and minutes
+    expect(await timepicker.isValidTime("1223")).toBe(true);
+    expect(await timepicker.isValidTime("927a")).toBe(true);
+    expect(await timepicker.isValidTime("12:12pm")).toBe(true);
+    expect(await timepicker.isValidTime("3:45 am")).toBe(true);
+    // rejected
+    expect(await timepicker.isValidTime("6f")).toBe(false);
+    expect(await timepicker.isValidTime("12m")).toBe(false);
+    expect(await timepicker.isValidTime("a")).toBe(false);
+    expect(await timepicker.isValidTime("92")).toBe(false);
+    expect(await timepicker.isValidTime("88:88")).toBe(false);
+    expect(await timepicker.isValidTime("999pm")).toBe(false);
+    expect(await timepicker.isValidTime("o1236")).toBe(false);
+    expect(await timepicker.isValidTime("12:45fm")).toBe(false);
+    expect(await timepicker.isValidTime("12342")).toBe(false);
+    expect(await timepicker.isValidTime("123:")).toBe(false);
+    expect(await timepicker.isValidTime("3:123")).toBe(false);
+    expect(await timepicker.isValidTime("4:60 pm")).toBe(false);
+    // weird edge cases
+    expect(await timepicker.isValidTime("17am")).toBe(false);
+    expect(await timepicker.isValidTime("17pm")).toBe(false);
+    // this is not caught by the regex, so we handle it later
+    expect(await timepicker.isValidTime("0pm")).toBe(true);
+  });
+  it("reformats", async () => {
+    const timepicker = new Timepicker();
+    expect(await timepicker.reformatTime("12", "00:00")).toBe("12:00 AM");
+    //@ts-ignore
+    expect(await timepicker.reformatTime("12", "12:00am")).toBe("12:00 AM");
+    //@ts-ignore
+    expect(await timepicker.reformatTime("12", "12:00pm")).toBe("12:00 PM");
+    expect(await timepicker.reformatTime("12", "24:00")).toBe("12:00 AM");
+    expect(await timepicker.reformatTime("12", "17:00")).toBe("05:00 PM");
+    expect(await timepicker.reformatTime("12", "7:00 am")).toBe("07:00 AM");
+    expect(await timepicker.reformatTime("12", "7 : 35")).toBe("07:35 AM");
+    expect(await timepicker.reformatTime("24", "0:00")).toBe("00:00");
+    //@ts-ignore
+    expect(await timepicker.reformatTime("24", "12:00am")).toBe("00:00");
+    //@ts-ignore
+    expect(await timepicker.reformatTime("24", "12:00pm")).toBe("12:00");
+    expect(await timepicker.reformatTime("24", "24:00")).toBe("00:00");
+    //@ts-ignore
+    expect(await timepicker.reformatTime("24", "1700")).toBe("17:00");
+    //@ts-ignore
+    expect(await timepicker.reformatTime("24", "700a")).toBe("07:00");
+    expect(await timepicker.reformatTime("24", "7 :00 pm")).toBe("19:00");
+    expect(await timepicker.reformatTime("24", "17: 35")).toBe("17:35");
+  });
+  it("finds nearest time interval", async () => {
+    const timepicker = new Timepicker();
+    expect(await timepicker.findNearestTimeInterval("00:07")).toBe("00:00");
+    expect(await timepicker.findNearestTimeInterval("01:08")).toBe("01:15");
+    expect(await timepicker.findNearestTimeInterval("01:15")).toBe("01:15");
+    expect(await timepicker.findNearestTimeInterval("02:22")).toBe("02:15");
+    expect(await timepicker.findNearestTimeInterval("03:23")).toBe("03:30");
+    expect(await timepicker.findNearestTimeInterval("03:30")).toBe("03:30");
+    expect(await timepicker.findNearestTimeInterval("04:37")).toBe("04:30");
+    expect(await timepicker.findNearestTimeInterval("15:38")).toBe("15:45");
+    expect(await timepicker.findNearestTimeInterval("15:45")).toBe("15:45");
+    expect(await timepicker.findNearestTimeInterval("16:52")).toBe("16:45");
+    expect(await timepicker.findNearestTimeInterval("17:53")).toBe("18:00");
+    expect(await timepicker.findNearestTimeInterval("18:00")).toBe("18:00");
+    expect(await timepicker.findNearestTimeInterval("23:59")).toBe("00:00");
+    // edge case regarding leading zeroes
+    expect(await timepicker.findNearestTimeInterval("09:59")).toBe("10:00");
+  });
+  it("splits time", () => {
+    const timepicker = new Timepicker();
+    expect(timepicker.splitTime("5:37")).toStrictEqual([5, "37", undefined]);
+    expect(timepicker.splitTime("5:37 am")).toStrictEqual([5, "37", "am"]);
+    expect(timepicker.splitTime("09:00")).toStrictEqual([9, "00", undefined]);
+    expect(timepicker.splitTime("13:52")).toStrictEqual([13, "52", undefined]);
+    // edge case
+    //@ts-ignore
+    expect(timepicker.splitTime("0pm")).toStrictEqual([0, "00", "AM"]);
+  });
+  it("generates times", () => {
+    const timepicker = new Timepicker();
+    //prettier-ignore
+    expect(timepicker.generateTimeIntervals()).toStrictEqual([
+      "00:00", "00:15", "00:30", "00:45",
+      "01:00", "01:15", "01:30", "01:45",
+      "02:00", "02:15", "02:30", "02:45",
+      "03:00", "03:15", "03:30", "03:45",
+      "04:00", "04:15", "04:30", "04:45",
+      "05:00", "05:15", "05:30", "05:45",
+      "06:00", "06:15", "06:30", "06:45",
+      "07:00", "07:15", "07:30", "07:45",
+      "08:00", "08:15", "08:30", "08:45",
+      "09:00", "09:15", "09:30", "09:45",
+      "10:00", "10:15", "10:30", "10:45",
+      "11:00", "11:15", "11:30", "11:45",
+      "12:00", "12:15", "12:30", "12:45",
+      "13:00", "13:15", "13:30", "13:45",
+      "14:00", "14:15", "14:30", "14:45",
+      "15:00", "15:15", "15:30", "15:45",
+      "16:00", "16:15", "16:30", "16:45",
+      "17:00", "17:15", "17:30", "17:45",
+      "18:00", "18:15", "18:30", "18:45",
+      "19:00", "19:15", "19:30", "19:45",
+      "20:00", "20:15", "20:30", "20:45",
+      "21:00", "21:15", "21:30", "21:45",
+      "22:00", "22:15", "22:30", "22:45",
+      "23:00", "23:15", "23:30", "23:45",
+    ]);
+  });
+  it("renders error", async () => {
+    await page.setContent(`<wm-timepicker label='timepicker' error-message="There is an error."></wm-timepicker>`);
+    const errorEl = page.root.shadowRoot.querySelector(".error");
+    expect(errorEl.textContent).toBe("There is an error.");
+  });
+  it("sets input to required", async () => {
+    await page.setContent(`<wm-timepicker label='timepicker' required-field='true'></wm-timepicker>`);
+    const input = await page.root.shadowRoot.querySelector("input");
+    expect(input).toEqualAttribute("aria-required", "true");
+  });
+  it("toggles isTabbing", () => {
+    // toggleTabbingOn, toggleTabbingOff
+    const component = new Timepicker();
+    expect(component.isTabbing).toBeFalsy();
+    component.toggleTabbingOn();
+    expect(component.isTabbing).toBeTruthy();
+    component.toggleTabbingOff();
+    expect(component.isTabbing).toBeFalsy();
+  });
 });

package/dist/collection/components/wm-toggletip/wm-toggletip.css

@@ -32,7 +32,7 @@
 :host {
   --wmcolor-toggletip-background: var(--wmcolor-background-dark);
   --wmcolor-toggletip-icon-background: var(--wmcolor-background-dark);
-  --wmcolor-toggletip-icon-text: var(--wmcolor-text-ondark);
+  --wmcolor-toggletip-icon-text: var(--wmcolor-icon-ondark);
   --wmcolor-toggletip-text: var(--wmcolor-text-ondark);
   display: inline-block;
   position: relative;

package/dist/collection/components/wm-toggletip/wm-toggletip.e2e.js

@@ -1,69 +1,69 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { AxePuppeteer } from "@axe-core/puppeteer";
 describe("wm-toggletip", () => {
-    let page;
-    beforeEach(async () => {
-        page = await newE2EPage();
-    });
-    it("passes Axe checks", async () => {
-        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+  });
+  it("passes Axe checks", async () => {
+    await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
         <wm-toggletip label='More information' tooltip='Further explanation'>Click me</wm-toggletip>
         </main></body></html>`);
-        const results = await new AxePuppeteer(page).analyze();
-        expect(results.violations.length).toBe(0);
-    });
-    it("delegates focus", async () => {
-        await page.setContent("<wm-toggletip label='label' tooltip='Text'></wm-toggletip>");
-        const component = await page.find("wm-toggletip");
-        component.focus();
-        await page.waitForChanges();
-        let activeElNodeName = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.nodeName);
-        expect(activeElNodeName).toBe("BUTTON");
-    });
-    // Enter or click opens tooltip, no change in focus
-    // Tab, escape close tooltip
-    it("opens and closes properly", async () => {
-        await page.setContent(`<wm-toggletip label='More information' tooltip='Further explanation'></wm-toggletip>`);
-        const toggletip = await page.find("wm-toggletip >>> .toggletip");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        expect(toggletip).not.toHaveClass("hidden");
-        // check focus remains on button
-        const activeElNodeName = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.nodeName);
-        expect(activeElNodeName).toEqual("BUTTON");
-        await page.keyboard.press("Escape");
-        await page.waitForChanges();
-        expect(toggletip).toHaveClass("hidden");
-        await page.click("wm-toggletip");
-        await page.waitForChanges();
-        expect(toggletip).not.toHaveClass("hidden");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        expect(toggletip).toHaveClass("hidden");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        await page.mouse.click(-10, -10);
-        await page.waitForChanges();
-        expect(toggletip).toHaveClass("hidden");
-    });
-    // test to make sure liveregion is updated properly
-    it("updates liveregion", async () => {
-        await page.setContent(`<wm-toggletip label='More information' tooltip='Further explanation'></wm-toggletip>`);
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        const liveRegion = await page.find("wm-toggletip >>> .live-region");
-        expect(liveRegion.textContent).toBe("Further explanation");
-    });
-    it("renders a tooltip", async () => {
-        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><div id="tooltip-container"><div id="wm-tooltip" popover="manual" class="wm-tooltip" aria-hidden="true"></div></div><main><h1>Title</h1>
+    const results = await new AxePuppeteer(page).analyze();
+    expect(results.violations.length).toBe(0);
+  });
+  it("delegates focus", async () => {
+    await page.setContent("<wm-toggletip label='label' tooltip='Text'></wm-toggletip>");
+    const component = await page.find("wm-toggletip");
+    component.focus();
+    await page.waitForChanges();
+    let activeElNodeName = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.nodeName);
+    expect(activeElNodeName).toBe("BUTTON");
+  });
+  // Enter or click opens tooltip, no change in focus
+  // Tab, escape close tooltip
+  it("opens and closes properly", async () => {
+    await page.setContent(`<wm-toggletip label='More information' tooltip='Further explanation'></wm-toggletip>`);
+    const toggletip = await page.find("wm-toggletip >>> .toggletip");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    await page.keyboard.press("Enter");
+    await page.waitForChanges();
+    expect(toggletip).not.toHaveClass("hidden");
+    // check focus remains on button
+    const activeElNodeName = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.nodeName);
+    expect(activeElNodeName).toEqual("BUTTON");
+    await page.keyboard.press("Escape");
+    await page.waitForChanges();
+    expect(toggletip).toHaveClass("hidden");
+    await page.click("wm-toggletip");
+    await page.waitForChanges();
+    expect(toggletip).not.toHaveClass("hidden");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    expect(toggletip).toHaveClass("hidden");
+    await page.keyboard.press("Enter");
+    await page.waitForChanges();
+    await page.mouse.click(-10, -10);
+    await page.waitForChanges();
+    expect(toggletip).toHaveClass("hidden");
+  });
+  // test to make sure liveregion is updated properly
+  it("updates liveregion", async () => {
+    await page.setContent(`<wm-toggletip label='More information' tooltip='Further explanation'></wm-toggletip>`);
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    await page.keyboard.press("Enter");
+    await page.waitForChanges();
+    const liveRegion = await page.find("wm-toggletip >>> .live-region");
+    expect(liveRegion.textContent).toBe("Further explanation");
+  });
+  it("renders a tooltip", async () => {
+    await page.setContent(`<html lang='en'><head><title>Page</title></head><body><div id="tooltip-container"><div id="wm-tooltip" popover="manual" class="wm-tooltip" aria-hidden="true"></div></div><main><h1>Title</h1>
         <wm-toggletip label='More information' tooltip='Further explanation'>Click me</wm-toggletip>
         </main></body></html>`);
-        await page.click("wm-toggletip");
-        const tooltip = await page.find("#wm-tooltip");
-        expect(tooltip.textContent).toEqual("More information");
-    });
+    await page.click("wm-toggletip");
+    const tooltip = await page.find("#wm-tooltip");
+    expect(tooltip.textContent).toEqual("More information");
+  });
 });