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

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

@@ -0,0 +1,32 @@
+import { accessible, hidden, renders, focusable, disabled } from "../../tests/commonTests";
+import { placeholderImage } from "../../tests/utils";
+import { html } from "../../../support/formatting";
+const placeholder = placeholderImage({
+    width: 140,
+    height: 100
+});
+describe("calcite-list", () => {
+    it("renders", async () => renders("calcite-list", { display: "block" }));
+    it("is focusable", () => focusable(html `<calcite-list>
+        <calcite-list-item label="test" description="hello world"></calcite-list-item>
+      </calcite-list>`, {
+        focusTargetSelector: "calcite-list-item"
+    }));
+    it("honors hidden attribute", async () => hidden("calcite-list"));
+    it("should be accessible", async () => {
+        await accessible(`<calcite-list>
+    <calcite-list-item label="candy" description="kingdom">
+      <calcite-action icon="banana" label="finn" slot="actions-start" />
+      <calcite-icon icon="banana" slot="content-start" />
+      <img slot="content-start" src="${placeholder}" alt="Test image" />
+      <calcite-icon icon="banana" slot="content-end" />
+      <calcite-action icon="banana" label="jake" slot="actions-end" />
+    </calcite-list-item>
+    <calcite-list-item label="test" non-interactive description="hello world"></calcite-list-item>
+    <calcite-list-item label="test" description="hello world"></calcite-list-item>
+  </calcite-list>`);
+    });
+    it("can be disabled", () => disabled(html `<calcite-list>
+        <calcite-list-item label="test" description="hello world"></calcite-list-item>
+      </calcite-list>`, { focusTarget: "child" }));
+});

package/dist/collection/components/list/list.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, h, Host, Prop, Method } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { CSS } from "./resources";
 import { updateHostInteraction } from "../../utils/interactive";
 /**
@@ -47,80 +47,86 @@ export class List {
   //
   // --------------------------------------------------------------------------
   render() {
-    return (h(Host, { role: "list" },
-      h("div", { class: CSS.container },
-        h("slot", null))));
+    return (h(Host, { role: "list" }, h("div", { class: CSS.container }, h("slot", null))));
   }
   static get is() { return "calcite-list"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["list.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["list.css"]
-  }; }
-  static get properties() { return {
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+  static get originalStyleUrls() {
+    return {
+      "$": ["list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "headingLevel": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "HeadingLevel",
-        "resolved": "1 | 2 | 3 | 4 | 5 | 6",
-        "references": {
-          "HeadingLevel": {
-            "location": "import",
-            "path": "../functional/Heading"
+      "headingLevel": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "HeadingLevel",
+          "resolved": "1 | 2 | 3 | 4 | 5 | 6",
+          "references": {
+            "HeadingLevel": {
+              "location": "import",
+              "path": "../functional/Heading"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the number at which section headings should start."
-      },
-      "attribute": "heading-level",
-      "reflect": true
-    }
-  }; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the number at which section headings should start."
+        },
+        "attribute": "heading-level",
+        "reflect": true
+      }
+    };
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLCalciteListItemElement": {
+              "location": "global"
+            }
           },
-          "HTMLCalciteListItemElement": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets focus on the component.",
-        "tags": []
+        "docs": {
+          "text": "Sets focus on the component.",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/list/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/list-item/list-item.e2e.js

@@ -0,0 +1,46 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { hidden, renders, focusable, slots, disabled } from "../../tests/commonTests";
+import { defaults } from "../../tests/commonTests";
+import { CSS, SLOTS } from "./resources";
+describe("calcite-list-item", () => {
+    it("renders", async () => renders("calcite-list-item", { display: "flex" }));
+    it("is focusable", () => focusable("calcite-list-item", {
+        shadowFocusTargetSelector: `.${CSS.contentContainerButton}`
+    }));
+    it("honors hidden attribute", async () => hidden("calcite-list-item"));
+    it("has property defaults", async () => defaults("calcite-list-item", [
+        {
+            propertyName: "nonInteractive",
+            defaultValue: false
+        },
+        {
+            propertyName: "description",
+            defaultValue: undefined
+        },
+        {
+            propertyName: "disabled",
+            defaultValue: false
+        },
+        {
+            propertyName: "label",
+            defaultValue: undefined
+        }
+    ]));
+    it("has slots", () => slots("calcite-list-item", SLOTS));
+    it("can be disabled", () => disabled(`<calcite-list-item label="test"></calcite-list-item>`));
+    it("renders content node when label is provided", async () => {
+        const page = await newE2EPage({ html: `<calcite-list-item label="test"></calcite-list-item>` });
+        const contentNode = await page.find(`calcite-list-item >>> .${CSS.content}`);
+        expect(contentNode).not.toBeNull();
+    });
+    it("renders content node when description is provided", async () => {
+        const page = await newE2EPage({ html: `<calcite-list-item description="test"></calcite-list-item>` });
+        const contentNode = await page.find(`calcite-list-item >>> .${CSS.content}`);
+        expect(contentNode).not.toBeNull();
+    });
+    it("does not render content node when description and label is not provided", async () => {
+        const page = await newE2EPage({ html: `<calcite-list-item></calcite-list-item>` });
+        const contentNode = await page.find(`calcite-list-item >>> .${CSS.content}`);
+        expect(contentNode).toBeNull();
+    });
+});

package/dist/collection/components/list-item/list-item.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, Prop, h, Host, Method } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { SLOTS, CSS } from "./resources";
 import { getSlotted } from "../../utils/dom";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
@@ -67,29 +67,23 @@ export class ListItem {
   // --------------------------------------------------------------------------
   renderActionsStart() {
     const { el } = this;
-    return getSlotted(el, SLOTS.actionsStart) ? (h("div", { class: CSS.actionsStart },
-      h("slot", { name: SLOTS.actionsStart }))) : null;
+    return getSlotted(el, SLOTS.actionsStart) ? (h("div", { class: CSS.actionsStart }, h("slot", { name: SLOTS.actionsStart }))) : null;
   }
   renderActionsEnd() {
     const { el } = this;
-    return getSlotted(el, SLOTS.actionsEnd) ? (h("div", { class: CSS.actionsEnd },
-      h("slot", { name: SLOTS.actionsEnd }))) : null;
+    return getSlotted(el, SLOTS.actionsEnd) ? (h("div", { class: CSS.actionsEnd }, h("slot", { name: SLOTS.actionsEnd }))) : null;
   }
   renderContentStart() {
     const { el } = this;
-    return getSlotted(el, SLOTS.contentStart) ? (h("div", { class: CSS.contentStart },
-      h("slot", { name: SLOTS.contentStart }))) : null;
+    return getSlotted(el, SLOTS.contentStart) ? (h("div", { class: CSS.contentStart }, h("slot", { name: SLOTS.contentStart }))) : null;
   }
   renderContentEnd() {
     const { el } = this;
-    return getSlotted(el, SLOTS.contentEnd) ? (h("div", { class: CSS.contentEnd },
-      h("slot", { name: SLOTS.contentEnd }))) : null;
+    return getSlotted(el, SLOTS.contentEnd) ? (h("div", { class: CSS.contentEnd }, h("slot", { name: SLOTS.contentEnd }))) : null;
   }
   renderContent() {
     const { label, description } = this;
-    return !!label || !!description ? (h("div", { class: CSS.content },
-      label ? h("div", { class: CSS.label }, label) : null,
-      description ? h("div", { class: CSS.description }, description) : null)) : null;
+    return !!label || !!description ? (h("div", { class: CSS.content }, label ? h("div", { class: CSS.label }, label) : null, description ? h("div", { class: CSS.description }, description) : null)) : null;
   }
   renderContentContainer() {
     const { description, disabled, label, nonInteractive } = this;
@@ -102,111 +96,113 @@ export class ListItem {
       }, disabled: disabled, ref: (focusEl) => (this.focusEl = focusEl) }, content)) : (h("div", { class: { [CSS.contentContainer]: true, [CSS.hasCenterContent]: hasCenterContent }, ref: () => (this.focusEl = null) }, content));
   }
   render() {
-    return (h(Host, { role: "listitem" },
-      h("div", { class: CSS.container },
-        this.renderActionsStart(),
-        this.renderContentContainer(),
-        this.renderActionsEnd()),
-      h("div", { class: CSS.nestedContainer },
-        h("slot", null))));
+    return (h(Host, { role: "listitem" }, h("div", { class: CSS.container }, this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), h("div", { class: CSS.nestedContainer }, h("slot", null))));
   }
   static get is() { return "calcite-list-item"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["list-item.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["list-item.css"]
-  }; }
-  static get properties() { return {
-    "nonInteractive": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, prevents the content of the component from user interaction."
-      },
-      "attribute": "non-interactive",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "description": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "A description for the component. Displays below the label text."
-      },
-      "attribute": "description",
-      "reflect": false
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["list-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["list-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "nonInteractive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, prevents the content of the component from user interaction."
+        },
+        "attribute": "non-interactive",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The label text of the component. Displays above the description text."
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "A description for the component. Displays below the label text."
+        },
+        "attribute": "description",
+        "reflect": false
       },
-      "attribute": "label",
-      "reflect": false
-    }
-  }; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
         },
-        "return": "Promise<void>"
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "docs": {
-        "text": "Sets focus on the component.",
-        "tags": []
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label text of the component. Displays above the description text."
+        },
+        "attribute": "label",
+        "reflect": false
       }
-    }
-  }; }
+    };
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on the component.",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/list-item/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/list-item-group/list-item-group.e2e.js

@@ -0,0 +1,16 @@
+import { hidden, renders } from "../../tests/commonTests";
+import { defaults } from "../../tests/commonTests";
+describe("calcite-list-item-group", () => {
+    it("renders", async () => renders("calcite-list-item-group", { display: "flex" }));
+    it("honors hidden attribute", async () => hidden("calcite-list-item-group"));
+    it("has property defaults", async () => defaults("calcite-list-item-group", [
+        {
+            propertyName: "heading",
+            defaultValue: undefined
+        },
+        {
+            propertyName: "headingLevel",
+            defaultValue: undefined
+        }
+    ]));
+});