@esri/calcite-components 1.0.0-next.597 → 1.0.0-next.598

package/dist/collection/components/avatar/avatar.e2e.js

@@ -1,55 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
-describe("calcite-avatar", () => {
-    it("renders", async () => renders("calcite-avatar", { display: "inline-block" }));
-    it("honors hidden attribute", async () => hidden("calcite-avatar"));
-    it("is accessible", async () => {
-        await accessible("calcite-avatar");
-        await accessible("<calcite-avatar thumbnail='http://placekitten.com/120/120'></calcite-avatar>");
-    });
-    it("has property defaults", async () => defaults("calcite-avatar", [
-        {
-            propertyName: "scale",
-            defaultValue: "m"
-        }
-    ]));
-    it("renders thumbnail when provided", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-avatar thumbnail='http://placekitten.com/120/120'></calcite-avatar>");
-        const thumbnail = await page.find("calcite-avatar >>> .thumbnail");
-        expect(thumbnail).toEqualAttribute("src", "http://placekitten.com/120/120");
-    });
-    it("renders initials when no thumbnail is provided", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-avatar full-name='My Dude'></calcite-avatar>");
-        const initials = await page.find("calcite-avatar >>> .initials");
-        expect(initials).toEqualText("MD");
-    });
-    it("computes a background fill color based on user id", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-avatar user-id='25684463a00c449585dbb32a065f6b74'></calcite-avatar>");
-        const style = await page.evaluate(() => {
-            const background = document.querySelector("calcite-avatar").shadowRoot.querySelector(".background");
-            return background.getAttribute("style");
-        });
-        expect(style).toEqual("background-color: rgb(214, 232, 245);");
-    });
-    it("computes a background fill if id is not a valid hex", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-avatar user-id='for sure not a hex' username='THaverford'></calcite-avatar>");
-        const initials = await page.find("calcite-avatar >>> .initials");
-        expect(initials).toEqualText("TH");
-        const style = await page.evaluate(() => {
-            const background = document.querySelector("calcite-avatar").shadowRoot.querySelector(".background");
-            return background.getAttribute("style");
-        });
-        expect(style).toEqual("background-color: rgb(245, 219, 214);");
-    });
-    it("renders default icon when no information is passed", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-avatar></calcite-avatar>");
-        const icon = await page.find("calcite-avatar >>> .icon");
-        const visible = await icon.isVisible();
-        expect(visible).toBe(true);
-    });
-});

package/dist/collection/components/avatar/avatar.spec.js

@@ -1,42 +0,0 @@
-import { isValidHex } from "../color-picker/utils";
-import { hexToHue, rgbToHue, stringToHex } from "./utils";
-describe("stringToHex", () => {
-    it("generates a consistent hex", () => {
-        expect(stringToHex("testing")).toEqual(stringToHex("testing"));
-    });
-    it("handles empty input", () => {
-        expect(stringToHex("")).toBeTruthy();
-    });
-    it("generates a valid hex color, regardless of input", () => {
-        expect(isValidHex(stringToHex("hey dude"))).toBe(true);
-        expect(isValidHex(stringToHex("numbe8972983767869891823"))).toBe(true);
-        expect(isValidHex(stringToHex("asdf8798768657476876yashjkdfbasd"))).toBe(true);
-        expect(isValidHex(stringToHex(")#@$%*@^#&%$(^!)@*)#$*!%"))).toBe(true);
-        expect(isValidHex(stringToHex("0"))).toBe(true);
-        expect(isValidHex(stringToHex("##########"))).toBe(true);
-        expect(isValidHex(stringToHex("키스의 고유조건은 입술끼리 만나야 하고 특별한 기술은 필요치 않다"))).toBe(true);
-        expect(isValidHex(stringToHex("✨🌈"))).toBe(true);
-    });
-});
-describe("rgbToHue", () => {
-    it("correctly finds hue of various rgb colors", () => {
-        expect(rgbToHue({ r: 0, g: 0, b: 0 })).toEqual(0);
-        expect(rgbToHue({ r: 255, g: 255, b: 255 })).toEqual(0);
-        expect(rgbToHue({ r: 255, g: 0, b: 0 })).toEqual(0);
-        expect(rgbToHue({ r: 0, g: 255, b: 0 })).toEqual(120);
-        expect(rgbToHue({ r: 0, g: 0, b: 255 })).toEqual(240);
-        expect(rgbToHue({ r: 18, g: 77, b: 123 })).toEqual(206);
-        expect(rgbToHue({ r: 214, g: 90, b: 45 })).toEqual(16);
-        expect(rgbToHue({ r: 160, g: 123, b: 45 })).toEqual(41);
-    });
-});
-describe("hexToHue", () => {
-    it("correctly finds hue of various hex colors", () => {
-        expect(hexToHue("#a07b2d")).toEqual(41);
-        expect(hexToHue("#44ed51")).toEqual(125);
-        expect(hexToHue("#151515")).toEqual(0);
-        expect(hexToHue("#ffc800")).toEqual(47);
-        expect(hexToHue("#47bbff")).toEqual(202);
-        expect(hexToHue("#ffffff")).toEqual(0);
-    });
-});

package/dist/collection/components/block/block.e2e.js

@@ -1,194 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { CSS, SLOTS, TEXT } from "./resources";
-import { accessible, defaults, disabled, hidden, renders, slots } from "../../tests/commonTests";
-import { html } from "../../../support/formatting";
-describe("calcite-block", () => {
-    it("renders", async () => renders("calcite-block", { display: "flex" }));
-    it("honors hidden attribute", async () => hidden("calcite-block"));
-    it("has property defaults", async () => defaults("calcite-block", [
-        {
-            propertyName: "collapsible",
-            defaultValue: false
-        },
-        {
-            propertyName: "headingLevel",
-            defaultValue: undefined
-        },
-        {
-            propertyName: "intlLoading",
-            defaultValue: TEXT.loading
-        },
-        {
-            propertyName: "intlOptions",
-            defaultValue: TEXT.options
-        },
-        {
-            propertyName: "open",
-            defaultValue: false
-        }
-    ]));
-    it("has slots", () => slots("calcite-block", SLOTS));
-    it("is accessible", async () => accessible(`
-      <calcite-block heading="heading" summary="summary" open collapsible>
-        <div slot=${SLOTS.icon}>✅</div>
-        <div>content</div>
-        <label slot=${SLOTS.control}>test <input placeholder="control"/></label>
-      </calcite-block>
-  `));
-    it("can be disabled", () => disabled(html `<calcite-block heading="heading" summary="summary" collapsible></calcite-block>`));
-    it("has a loading state", async () => {
-        const page = await newE2EPage({
-            html: `
-        <calcite-block heading="heading" summary="summary" open collapsible>
-          <div class="content">content</div>
-        </calcite-block>
-    `
-        });
-        await page.waitForChanges();
-        expect(await page.find("calcite-block >>> calcite-scrim")).toBeNull();
-        const content = await page.find(".content");
-        const clickSpy = await content.spyOnEvent("click");
-        await content.click();
-        expect(clickSpy).toHaveReceivedEventTimes(1);
-        const block = await page.find("calcite-block");
-        block.setProperty("loading", true);
-        await page.waitForChanges();
-        await content.click();
-        expect(clickSpy).toHaveReceivedEventTimes(1);
-        expect(await page.find("calcite-block >>> calcite-scrim")).toBeTruthy();
-    });
-    it("can display/hide content", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-block><div>some content</div></calcite-block>");
-        let element = await page.find("calcite-block");
-        let content = await page.find(`calcite-block >>> .${CSS.content}`);
-        expect(await content.isVisible()).toBe(false);
-        element.setProperty("open", true);
-        await page.waitForChanges();
-        element = await page.find("calcite-block[open]");
-        content = await page.find(`calcite-block >>> .${CSS.content}`);
-        expect(element).toBeTruthy();
-        expect(await content.isVisible()).toBe(true);
-        element.setProperty("open", false);
-        await page.waitForChanges();
-        element = await page.find("calcite-block[open]");
-        content = await page.find(`calcite-block >>> .${CSS.content}`);
-        expect(element).toBeNull();
-        expect(await content.isVisible()).toBe(false);
-    });
-    it("allows toggling its content", async () => {
-        const page = await newE2EPage({ html: "<calcite-block collapsible></calcite-block>" });
-        const element = await page.find("calcite-block");
-        const toggleSpy = await element.spyOnEvent("calciteBlockToggle");
-        const toggle = await page.find(`calcite-block >>> .${CSS.toggle}`);
-        expect(toggle.getAttribute("aria-label")).toBe(TEXT.expand);
-        expect(toggle.getAttribute("aria-expanded")).toBe("false");
-        expect(toggle.getAttribute("title")).toBe(TEXT.expand);
-        await toggle.click();
-        expect(toggleSpy).toHaveReceivedEventTimes(1);
-        expect(await element.getProperty("open")).toBe(true);
-        expect(toggle.getAttribute("aria-label")).toBe(TEXT.collapse);
-        expect(toggle.getAttribute("aria-expanded")).toBe("true");
-        expect(toggle.getAttribute("title")).toBe(TEXT.collapse);
-        await toggle.click();
-        expect(toggleSpy).toHaveReceivedEventTimes(2);
-        expect(await element.getProperty("open")).toBe(false);
-        expect(toggle.getAttribute("aria-label")).toBe(TEXT.expand);
-        expect(toggle.getAttribute("aria-expanded")).toBe("false");
-        expect(toggle.getAttribute("title")).toBe(TEXT.expand);
-    });
-    describe("header", () => {
-        it("renders a heading", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-block heading="test-heading"></calcite-block>`);
-            const heading = await page.find(`calcite-block >>> .${CSS.heading}`);
-            expect(heading).toBeTruthy();
-            expect(heading.innerText).toBe("test-heading");
-            const description = await page.find(`calcite-block >>> .${CSS.description}`);
-            expect(description).toBeNull();
-        });
-        it("renders a heading with optional summary (deprecated)", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-block heading="test-heading" summary="test-summary"></calcite-block>`);
-            const heading = await page.find(`calcite-block >>> .${CSS.heading}`);
-            expect(heading).toBeTruthy();
-            const summary = await page.find(`calcite-block >>> .${CSS.description}`);
-            expect(summary.innerText).toBe("test-summary");
-        });
-        it("renders a heading with optional description", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-block heading="test-heading" description="test-summary"></calcite-block>`);
-            const heading = await page.find(`calcite-block >>> .${CSS.heading}`);
-            expect(heading).toBeTruthy();
-            const description = await page.find(`calcite-block >>> .${CSS.description}`);
-            expect(description.innerText).toBe("test-summary");
-        });
-        it("allows users to add a control in a collapsible block", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-block heading="test-heading" collapsible><div class="nested-control" tabindex="0" slot=${SLOTS.control}>fake space/enter-bubbling control</div></calcite-block>`);
-            const control = await page.find(".nested-control");
-            expect(await control.isVisible()).toBe(true);
-            const controlSlot = await page.find(`calcite-block >>> slot[name=${SLOTS.control}]`);
-            expect(await controlSlot.isVisible()).toBe(true);
-            const block = await page.find("calcite-block");
-            const blockToggleSpy = await block.spyOnEvent("calciteBlockToggle");
-            await control.press("Space");
-            await control.press("Enter");
-            await control.click();
-            expect(blockToggleSpy).toHaveReceivedEventTimes(0);
-            await block.click();
-            await block.click();
-            expect(blockToggleSpy).toHaveReceivedEventTimes(2);
-        });
-        it("does not render collapsible icon when a control is added to the header", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-block heading="test-heading" collapsible>
-          <calcite-action text="test" icon="banana" slot="${SLOTS.control}"></calcite-action>
-        </calcite-block>`);
-            const collapsibleIcon = await page.find(`calcite-block >>> .${CSS.toggleIcon}`);
-            expect(collapsibleIcon).toBeNull();
-        });
-        it("displays a status icon instead of a header icon when `status` is an accepted value", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-block status="invalid">
-          <div class="header-icon" slot=${SLOTS.icon} /></calcite-block>
-        </calcite-block>`);
-            const headerIcon = await page.find("calcite-block >>> .header-icon");
-            expect(headerIcon).toBeNull();
-            const statusIcon = await page.find(`calcite-block >>> .${CSS.statusIcon}`);
-            expect(statusIcon).not.toBeNull();
-        });
-        it("displays a loading icon  when `loading` is set to true and `open` is set to false", async () => {
-            const headerIcon = "header-icon";
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-block status="invalid" loading>
-          <div class="${headerIcon}" slot=${SLOTS.icon} /></calcite-block>
-        </calcite-block>`);
-            const headerIconEle = await page.find(`calcite-block >>> .${headerIcon}`);
-            expect(headerIconEle).toBeNull();
-            const statusIcon = await page.find(`calcite-block >>> .${CSS.statusIcon}`);
-            const loadingIcon = await page.find(`calcite-block >>> .${CSS.loading}`);
-            expect(statusIcon).not.toBeNull();
-            expect(loadingIcon).not.toBeNull();
-        });
-        it("allows users to slot in actions in a header menu", async () => {
-            const page = await newE2EPage({
-                html: html ` <calcite-block heading="With header actions" summary="has header actions">
-          <calcite-action label="Add" icon="plus" slot="header-menu-actions"></calcite-action>
-        </calcite-block>`
-            });
-            const menuSlot = await page.find(`calcite-block >>> calcite-action-menu slot[name=${SLOTS.headerMenuActions}]`);
-            expect(menuSlot).toBeDefined();
-            const actionAssignedSlot = await page.$eval("calcite-action", (action) => action.assignedSlot.name);
-            expect(actionAssignedSlot).toBe(SLOTS.headerMenuActions);
-        });
-        it("does not render collapsible icon when actions are added to the header menu", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-block heading="test-heading" collapsible>
-          <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
-        </calcite-block>`);
-            const collapsibleIcon = await page.find(`calcite-block >>> .${CSS.toggleIcon}`);
-            expect(collapsibleIcon).toBeNull();
-        });
-    });
-});

package/dist/collection/components/block-section/block-section.e2e.js

@@ -1,132 +0,0 @@
-import { CSS, TEXT } from "./resources";
-import { accessible, defaults, hidden, reflects, renders } from "../../tests/commonTests";
-import { newE2EPage } from "@stencil/core/testing";
-describe("calcite-block-section", () => {
-    it("renders", async () => renders("calcite-block-section", { display: "block" }));
-    it("honors hidden attribute", async () => hidden("calcite-block-section"));
-    it("reflects properties", async () => reflects("calcite-block-section", [
-        {
-            propertyName: "open",
-            value: true
-        }
-    ]));
-    it("has property defaults", async () => defaults("calcite-block-section", [
-        {
-            propertyName: "open",
-            defaultValue: false
-        },
-        {
-            propertyName: "toggleDisplay",
-            defaultValue: "button"
-        }
-    ]));
-    describe("toggle-display = 'switch'", () => {
-        describe("accessibility", () => {
-            it("when open", async () => accessible(`<calcite-block-section text="text" toggle-display="switch" open><div>some content</div></calcite-block-section>`));
-            it("when closed", async () => accessible(`<calcite-block-section text="text" toggle-display="switch"><div>some content</div></calcite-block-section>`));
-        });
-        it("can display/hide content", async () => {
-            const page = await newE2EPage({
-                html: `<calcite-block-section toggle-display="switch"><div>some content</div></calcite-block-section>`
-            });
-            await assertContentIsDisplayedAndHidden(page);
-        });
-        it("can be toggled", async () => {
-            const page = await newE2EPage({
-                html: `<calcite-block-section toggle-display="switch"></calcite-block-section>`
-            });
-            await assertToggleBehavior(page);
-        });
-        it("renders section text", async () => {
-            const page = await newE2EPage({
-                html: `<calcite-block-section text="test text" open toggle-display="switch"></calcite-block-section>`
-            });
-            const element = await page.find(`calcite-block-section >>> .${CSS.toggle}`);
-            expect(element.textContent).toBe("test text");
-        });
-    });
-    describe("toggle-display = 'button' (default)", () => {
-        describe("accessibility", () => {
-            it("when open", async () => accessible(`<calcite-block-section text="text" open><div>some content</div></calcite-block-section>`));
-            it("when closed", async () => accessible(`<calcite-block-section text="text"><div>some content</div></calcite-block-section>`));
-        });
-        it("can display/hide content", async () => {
-            const page = await newE2EPage({ html: "<calcite-block-section><div>some content</div></calcite-block-section>" });
-            await assertContentIsDisplayedAndHidden(page);
-        });
-        it("can be toggled", async () => {
-            const page = await newE2EPage({ html: "<calcite-block-section></calcite-block-section>" });
-            await assertToggleBehavior(page);
-        });
-    });
-    describe("status = 'invalid'", () => {
-        it("displays a status indicator when `status` is an accepted value", async () => {
-            const page = await newE2EPage({
-                html: `<calcite-block-section status="invalid"><div>content</div></calcite-block-section>`
-            });
-            const statusIconEl = await page.find(`calcite-block-section >>> .${CSS.statusIcon}`);
-            expect(statusIconEl).not.toBeNull();
-        });
-    });
-    describe("status = 'foo'", () => {
-        it("does not display a status indicator when `status` is not an accepted value", async () => {
-            const page2 = await newE2EPage({
-                html: `<calcite-block-section status="foo"><div>content</div></calcite-block-section>`
-            });
-            const statusIconEl2 = await page2.find(`calcite-block-section >>> .${CSS.statusIcon}`);
-            await page2.waitForChanges();
-            expect(statusIconEl2).toBeNull();
-        });
-    });
-    async function assertContentIsDisplayedAndHidden(page) {
-        let element = await page.find("calcite-block-section");
-        let content = await page.find(`calcite-block-section >>> .${CSS.content}`);
-        expect(await content.isVisible()).toBe(false);
-        element.setProperty("open", true);
-        await page.waitForChanges();
-        element = await page.find("calcite-block-section[open]");
-        content = await page.find(`calcite-block-section >>> .${CSS.content}`);
-        expect(element).toBeTruthy();
-        expect(await content.isVisible()).toBe(true);
-        element.setProperty("open", false);
-        await page.waitForChanges();
-        element = await page.find("calcite-block-section[open]");
-        content = await page.find(`calcite-block-section >>> .${CSS.content}`);
-        expect(element).toBeNull();
-        expect(await content.isVisible()).toBe(false);
-    }
-    async function assertToggleBehavior(page) {
-        const element = await page.find("calcite-block-section");
-        const toggleSpy = await element.spyOnEvent("calciteBlockSectionToggle");
-        const toggle = await page.find(`calcite-block-section >>> .${CSS.toggle}`);
-        expect(toggle.getAttribute("aria-label")).toBe(TEXT.expand);
-        await toggle.click();
-        expect(toggleSpy).toHaveReceivedEventTimes(1);
-        expect(await element.getProperty("open")).toBe(true);
-        expect(toggle.getAttribute("aria-label")).toBe(TEXT.collapse);
-        await toggle.click();
-        expect(toggleSpy).toHaveReceivedEventTimes(2);
-        expect(await element.getProperty("open")).toBe(false);
-        expect(toggle.getAttribute("aria-label")).toBe(TEXT.expand);
-        const keyboardToggleEmitter = toggle.tagName === "CALCITE-ACTION"
-            ? (await page.evaluateHandle(() => {
-                // keyboard event needs to be dispatched from the action's button for it to trigger a click
-                // deep shadow piercing is based on https://github.com/puppeteer/puppeteer/issues/858#issuecomment-438540596
-                return document
-                    .querySelector("calcite-block-section")
-                    .shadowRoot.querySelector("section > calcite-action")
-                    .shadowRoot.querySelector("button");
-            })).asElement()
-            : toggle;
-        await keyboardToggleEmitter.press(" ");
-        await page.waitForChanges();
-        expect(toggleSpy).toHaveReceivedEventTimes(3);
-        expect(await element.getProperty("open")).toBe(true);
-        expect(toggle.getAttribute("aria-label")).toBe(TEXT.collapse);
-        await keyboardToggleEmitter.press("Enter");
-        await page.waitForChanges();
-        expect(toggleSpy).toHaveReceivedEventTimes(4);
-        expect(await element.getProperty("open")).toBe(false);
-        expect(toggle.getAttribute("aria-label")).toBe(TEXT.expand);
-    }
-});