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

package/dist/collection/components/button/interfaces.js

@@ -1,6 +1 @@
-/*!
- * 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.596
- */
 export {};

package/dist/collection/components/button/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.596
+ * v1.0.0-next.597
  */
 export const CSS = {
   buttonLoader: "calcite-button--loader",

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

@@ -0,0 +1,87 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { accessible, renders, slots, hidden } from "../../tests/commonTests";
+import { placeholderImage } from "../../tests/utils";
+import { CSS, SLOTS } from "./resources";
+const placeholder = placeholderImage({
+    width: 350,
+    height: 150
+});
+describe("calcite-card", () => {
+    it("renders", async () => renders("calcite-card", { display: "block" }));
+    it("honors hidden attribute", async () => hidden("calcite-card"));
+    it("is accessible", async () => accessible("calcite-card"));
+    it("is accessible when selectable", async () => accessible(`
+      <calcite-card selectable>
+        <img slot="thumbnail" src="${placeholder}" alt="Test image" />
+      </calcite-card>`));
+    it("has slots", () => slots("calcite-card", SLOTS));
+    it("renders with default props if none are provided", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-card>
+        <img slot="thumbnail" src="${placeholder}" alt="Test image" />
+      </calcite-card>`);
+        const element = await page.find("calcite-card");
+        expect(element).not.toHaveAttribute("disabled");
+        expect(element).not.toHaveAttribute("loading");
+        expect(element).not.toHaveAttribute("selectable");
+        expect(element).not.toHaveAttribute("selected");
+    });
+    it("renders with requsted props", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-card loading selectable selected disabled>
+        <img slot="thumbnail" src="${placeholder}" alt="Test image" />
+      </calcite-card>`);
+        const element = await page.find("calcite-card");
+        expect(element).toHaveAttribute("disabled");
+        expect(element).toHaveAttribute("loading");
+        expect(element).toHaveAttribute("selectable");
+        expect(element).toHaveAttribute("selected");
+    });
+    it("should have a thumbnail container", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-card>
+        <img slot="thumbnail" src="${placeholder}" alt="Test image" />
+      </calcite-card>
+    `);
+        const thumbContainer = await page.find(`calcite-card >>> .${CSS.thumbnailWrapper}`);
+        expect(thumbContainer).not.toBeNull();
+    });
+    it("should render a checkbox if selectable", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-card selectable>
+      <img slot="thumbnail" src="${placeholder}" alt="Test image" />
+      </calcite-card>
+    `);
+        const thumbContainer = await page.find(`calcite-card >>> .${CSS.checkboxWrapper}`);
+        expect(thumbContainer).not.toBeNull();
+    });
+    describe("when a card is selectable", () => {
+        it("should update the card's selected state when its checkbox is clicked", async () => {
+            const page = await newE2EPage();
+            await page.setContent(`
+      <div style="width:260px">
+        <calcite-card selectable>
+          <h3 slot="title">ArcGIS Online: Gallery and Organization pages</h3>
+          <span slot="subtitle">
+            A great example of a study description that might wrap to a line or two, but isn't overly verbose.
+          </span>
+        </calcite-card>
+      </div>
+      `);
+            const card = await page.find("calcite-card");
+            const checkbox = await page.find(`calcite-card >>> .${CSS.checkboxWrapper} calcite-checkbox`);
+            const cardSelectSpy = await card.spyOnEvent("calciteCardSelect");
+            const clickSpy = await card.spyOnEvent("calciteCardSelect");
+            await checkbox.click();
+            await page.waitForChanges();
+            expect(cardSelectSpy).toHaveReceivedEventTimes(1);
+            expect(clickSpy).toHaveReceivedEventTimes(1);
+            expect(await checkbox.getProperty("checked")).toBe(true);
+            expect(await card.getProperty("selected")).toBe(true);
+        });
+    });
+});

package/dist/collection/components/card/card.js

@@ -1,9 +1,9 @@
 /*!
  * 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.596
+ * v1.0.0-next.597
  */
-import { Component, Element, Event, h, Prop } from "@stencil/core";
+import { h } from "@stencil/core";
 import { getSlotted, toAriaBoolean } from "../../utils/dom";
 import { CSS, SLOTS, TEXT } from "./resources";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
@@ -88,214 +88,206 @@ export class Card {
   render() {
     const thumbnailInline = this.thumbnailPosition.startsWith("inline");
     const thumbnailStart = this.thumbnailPosition.endsWith("start");
-    return (h("div", { class: { "calcite-card-container": true, inline: thumbnailInline } },
-      this.loading ? (h("div", { class: "calcite-card-loader-container" },
-        h("calcite-loader", { active: true, label: this.intlLoading }))) : null,
-      thumbnailStart && this.renderThumbnail(),
-      h("section", { "aria-busy": toAriaBoolean(this.loading), class: { [CSS.container]: true } },
-        this.selectable ? this.renderCheckbox() : null,
-        this.renderHeader(),
-        h("div", { class: "card-content" },
-          h("slot", null)),
-        this.renderFooter()),
-      !thumbnailStart && this.renderThumbnail()));
+    return (h("div", { class: { "calcite-card-container": true, inline: thumbnailInline } }, this.loading ? (h("div", { class: "calcite-card-loader-container" }, h("calcite-loader", { active: true, label: this.intlLoading }))) : null, thumbnailStart && this.renderThumbnail(), h("section", { "aria-busy": toAriaBoolean(this.loading), class: { [CSS.container]: true } }, this.selectable ? this.renderCheckbox() : null, this.renderHeader(), h("div", { class: "card-content" }, h("slot", null)), this.renderFooter()), !thumbnailStart && this.renderThumbnail()));
   }
   selectCard() {
     this.selected = !this.selected;
     this.calciteCardSelect.emit();
   }
   renderThumbnail() {
-    return getSlotted(this.el, SLOTS.thumbnail) ? (h("section", { class: CSS.thumbnailWrapper },
-      h("slot", { name: SLOTS.thumbnail }))) : null;
+    return getSlotted(this.el, SLOTS.thumbnail) ? (h("section", { class: CSS.thumbnailWrapper }, h("slot", { name: SLOTS.thumbnail }))) : null;
   }
   renderCheckbox() {
     const checkboxLabel = this.selected ? this.intlDeselect : this.intlSelect;
-    return (h("calcite-label", { class: CSS.checkboxWrapper, onClick: this.cardSelectClick, onKeyDown: this.cardSelectKeyDown },
-      h("calcite-checkbox", { checked: this.selected, label: checkboxLabel })));
+    return (h("calcite-label", { class: CSS.checkboxWrapper, onClick: this.cardSelectClick, onKeyDown: this.cardSelectKeyDown }, h("calcite-checkbox", { checked: this.selected, label: checkboxLabel })));
   }
   renderHeader() {
     const { el } = this;
     const title = getSlotted(el, SLOTS.title);
     const subtitle = getSlotted(el, SLOTS.subtitle);
     const hasHeader = title || subtitle;
-    return hasHeader ? (h("header", { class: CSS.header },
-      h("slot", { name: SLOTS.title }),
-      h("slot", { name: SLOTS.subtitle }))) : null;
+    return hasHeader ? (h("header", { class: CSS.header }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.subtitle }))) : null;
   }
   renderFooter() {
     const { el } = this;
     const leadingFooter = getSlotted(el, SLOTS.footerLeading);
     const trailingFooter = getSlotted(el, SLOTS.footerTrailing);
     const hasFooter = leadingFooter || trailingFooter;
-    return hasFooter ? (h("footer", { class: CSS.footer },
-      h("slot", { name: SLOTS.footerLeading }),
-      h("slot", { name: SLOTS.footerTrailing }))) : null;
+    return hasFooter ? (h("footer", { class: CSS.footer }, h("slot", { name: SLOTS.footerLeading }), h("slot", { name: SLOTS.footerTrailing }))) : null;
   }
   static get is() { return "calcite-card"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["card.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["card.css"]
-  }; }
-  static get properties() { return {
-    "loading": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, the cards content is waiting to be loaded. This state shows a busy indicator."
-      },
-      "attribute": "loading",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "selected": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates whether the card is selected."
-      },
-      "attribute": "selected",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "selectable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates whether the card is selectable."
-      },
-      "attribute": "selectable",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "intlLoading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, the cards content is waiting to be loaded. This state shows a busy indicator."
+        },
+        "attribute": "loading",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Loading\""
-          }],
-        "text": "string to override English loading text"
+      "selected": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates whether the card is selected."
+        },
+        "attribute": "selected",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "intl-loading",
-      "reflect": false,
-      "defaultValue": "TEXT.loading"
-    },
-    "intlSelect": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "selectable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates whether the card is selectable."
+        },
+        "attribute": "selectable",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Select\""
-          }],
-        "text": "string to override English select text for checkbox when selectable is true"
+      "intlLoading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Loading\""
+            }],
+          "text": "string to override English loading text"
+        },
+        "attribute": "intl-loading",
+        "reflect": false,
+        "defaultValue": "TEXT.loading"
       },
-      "attribute": "intl-select",
-      "reflect": false,
-      "defaultValue": "TEXT.select"
-    },
-    "intlDeselect": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "intlSelect": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Select\""
+            }],
+          "text": "string to override English select text for checkbox when selectable is true"
+        },
+        "attribute": "intl-select",
+        "reflect": false,
+        "defaultValue": "TEXT.select"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Deselect\""
-          }],
-        "text": "string to override English deselect text for checkbox when selectable is true"
+      "intlDeselect": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Deselect\""
+            }],
+          "text": "string to override English deselect text for checkbox when selectable is true"
+        },
+        "attribute": "intl-deselect",
+        "reflect": false,
+        "defaultValue": "TEXT.deselect"
       },
-      "attribute": "intl-deselect",
-      "reflect": false,
-      "defaultValue": "TEXT.deselect"
-    },
-    "thumbnailPosition": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "LogicalFlowPosition",
-        "resolved": "\"block-end\" | \"block-start\" | \"inline-end\" | \"inline-start\"",
-        "references": {
-          "LogicalFlowPosition": {
-            "location": "import",
-            "path": "../interfaces"
+      "thumbnailPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "LogicalFlowPosition",
+          "resolved": "\"block-end\" | \"block-start\" | \"inline-end\" | \"inline-start\"",
+          "references": {
+            "LogicalFlowPosition": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "thumbnail-position",
-      "reflect": true,
-      "defaultValue": "\"block-start\""
-    }
-  }; }
-  static get events() { return [{
-      "method": "calciteCardSelect",
-      "name": "calciteCardSelect",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fired when a selectable card is selected"
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "thumbnail-position",
+        "reflect": true,
+        "defaultValue": "\"block-start\""
       }
-    }]; }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calciteCardSelect",
+        "name": "calciteCardSelect",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when a selectable card is selected"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/card/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.596
+ * v1.0.0-next.597
  */
 export const CSS = {
   container: "container",

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

@@ -0,0 +1,105 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { accessible, disabled, focusable, formAssociated, HYDRATED_ATTR, labelable, hidden } from "../../tests/commonTests";
+describe("calcite-checkbox", () => {
+    it("honors hidden attribute", async () => hidden("calcite-checkbox"));
+    it("is accessible", async () => accessible(`<calcite-label><calcite-checkbox id="example" name="example" value="one"></calcite-checkbox> label</calcite-label>`));
+    it("is accessible without calcite-label", async () => accessible(`<calcite-checkbox label="label" id="example" name="example" value="one"></calcite-checkbox>`));
+    it("is labelable", async () => labelable("calcite-checkbox", { propertyToToggle: "checked", shadowFocusTargetSelector: ".toggle" }));
+    it("is form-associated", async () => formAssociated("calcite-checkbox", { testValue: true }));
+    it("can be disabled", () => disabled("calcite-checkbox"));
+    it("renders with correct default attributes", async () => {
+        const page = await newE2EPage();
+        await page.setContent("<calcite-checkbox></calcite-checkbox>");
+        const calciteCheckbox = await page.find("calcite-checkbox");
+        expect(calciteCheckbox).toHaveAttribute(HYDRATED_ATTR);
+        expect(calciteCheckbox).not.toHaveAttribute("checked");
+        expect(calciteCheckbox).not.toHaveAttribute("indeterminate");
+    });
+    it("toggles the checked attributes appropriately when clicked", async () => {
+        const page = await newE2EPage();
+        await page.setContent("<calcite-checkbox></calcite-checkbox>");
+        const calciteCheckbox = await page.find("calcite-checkbox");
+        expect(calciteCheckbox).not.toHaveAttribute("checked");
+        expect(await calciteCheckbox.getProperty("checked")).toBe(false);
+        await calciteCheckbox.click();
+        await page.waitForChanges();
+        expect(calciteCheckbox).toHaveAttribute("checked");
+        expect(await calciteCheckbox.getProperty("checked")).toBe(true);
+        // helps test click behavior via HTMLElement.click()
+        await calciteCheckbox.callMethod("click");
+        await page.waitForChanges();
+        expect(calciteCheckbox).not.toHaveAttribute("checked");
+        expect(await calciteCheckbox.getProperty("checked")).toBe(false);
+    });
+    it("appropriately triggers the custom change event", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-checkbox></calcite-checkbox>`);
+        const calciteCheckbox = await page.find("calcite-checkbox");
+        const changeEvent = await calciteCheckbox.spyOnEvent("calciteCheckboxChange");
+        expect(changeEvent).toHaveReceivedEventTimes(0);
+        await calciteCheckbox.click();
+        expect(changeEvent).toHaveReceivedEventTimes(1);
+    });
+    it("doesn't emit when controlling checked attribute", async () => {
+        const page = await newE2EPage();
+        await page.setContent("<calcite-checkbox value='test-value'></calcite-checkbox>");
+        const element = await page.find("calcite-checkbox");
+        const spy = await element.spyOnEvent("calciteCheckboxChange");
+        await element.setProperty("checked", true);
+        await page.waitForChanges();
+        await element.setProperty("checked", false);
+        await page.waitForChanges();
+        expect(spy).toHaveReceivedEventTimes(0);
+    });
+    it("removes the indeterminate attribute when clicked", async () => {
+        const page = await newE2EPage();
+        await page.setContent("<calcite-checkbox indeterminate></calcite-checkbox>");
+        const calciteCheckbox = await page.find("calcite-checkbox");
+        expect(calciteCheckbox).toHaveAttribute("indeterminate");
+        await calciteCheckbox.click();
+        expect(calciteCheckbox).not.toHaveAttribute("indeterminate");
+    });
+    it("behaves as expected when wrapped in a calcite-label with inline layout mode", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-label layout="inline"><calcite-checkbox></calcite-checkbox>Label</calcite-label>
+    `);
+        const checkboxes = await page.findAll("calcite-checkbox");
+        expect(checkboxes.length).toEqual(1);
+    });
+    it("behaves as expected when wrapped in a calcite-label with inline-space-between layout mode", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-label layout="inline-space-between"><calcite-checkbox></calcite-checkbox>Label</calcite-label>
+    `);
+        const checkboxes = await page.findAll("calcite-checkbox");
+        expect(checkboxes.length).toEqual(1);
+    });
+    it("resets to initial value when form reset event is triggered", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <form>
+        <calcite-checkbox id="unchecked"></calcite-checkbox>
+        <calcite-checkbox id="checked" checked></calcite-checkbox>
+      </form>
+    `);
+        const unchecked = await page.find("#unchecked");
+        expect(await unchecked.getProperty("checked")).toBe(false);
+        await unchecked.click();
+        expect(await unchecked.getProperty("checked")).toBe(true);
+        const checked = await page.find("#checked");
+        expect(await checked.getProperty("checked")).toBe(true);
+        await checked.click();
+        expect(await checked.getProperty("checked")).toBe(false);
+        await page.evaluate(() => {
+            const form = document.querySelector("form");
+            form.reset();
+        });
+        await page.waitForChanges();
+        expect(await unchecked.getProperty("checked")).toBe(false);
+        expect(await checked.getProperty("checked")).toBe(true);
+    });
+    it("is focusable", () => focusable("calcite-checkbox", {
+        shadowFocusTargetSelector: ".toggle"
+    }));
+});