@esri/calcite-components 1.0.0-next.582 → 1.0.0-next.591

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

@@ -0,0 +1,194 @@
+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/block.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 import { Component, Element, Event, h, Host, Prop } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
@@ -187,7 +187,7 @@ export class Block {
         "text": "When true, this block will be collapsible."
       },
       "attribute": "collapsible",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "disabled": {
@@ -263,7 +263,7 @@ export class Block {
         "text": "Number at which section headings should start for this component."
       },
       "attribute": "heading-level",
-      "reflect": false
+      "reflect": true
     },
     "intlCollapse": {
       "type": "string",
@@ -462,7 +462,7 @@ export class Block {
         "text": "When true, removes padding for the slotted content"
       },
       "attribute": "disable-padding",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     }
   }; }

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 export const CSS = {
   article: "article",

package/dist/collection/components/block-section/block-section.css

@@ -67,6 +67,11 @@
   animation-name: in-scale;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --calcite-internal-duration-factor: 0.01;
+  }
+}
 /**
 * Currently only used in Checkbox.
 */

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

@@ -0,0 +1,132 @@
+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);
+    }
+});

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 import { Component, Element, Event, Prop, h, Host } from "@stencil/core";
 import { getElementDir, toAriaBoolean } from "../../utils/dom";

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

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 export {};

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 export const CSS = {
   content: "content",

package/dist/collection/components/button/button.css

@@ -67,6 +67,11 @@
   animation-name: in-scale;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --calcite-internal-duration-factor: 0.01;
+  }
+}
 /**
 * Currently only used in Checkbox.
 */
@@ -133,14 +138,12 @@
   text-align: center;
   font-family: inherit;
   font-weight: var(--calcite-font-weight-normal);
-  -webkit-text-decoration-line: none;
-          text-decoration-line: none;
+  text-decoration-line: none;
   transition: color var(--calcite-animation-timing) ease-in-out, background-color var(--calcite-animation-timing) ease-in-out, box-shadow var(--calcite-animation-timing) ease-in-out, outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;
 }
 :host button:hover, 
 :host a:hover {
-  -webkit-text-decoration-line: none;
-          text-decoration-line: none;
+  text-decoration-line: none;
 }
 
 .content {
@@ -276,11 +279,11 @@
 }
 .calcite-button--loader calcite-loader.loading-in {
   animation-name: loader-in;
-  animation-duration: 310ms;
+  animation-duration: var(--calcite-internal-animation-timing-slow);
 }
 .calcite-button--loader calcite-loader.loading-out {
   animation-name: loader-out;
-  animation-duration: 310ms;
+  animation-duration: var(--calcite-internal-animation-timing-slow);
 }
 
 :host([loading]) button.content--slotted .calcite-button--loader calcite-loader,