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

package/dist/collection/components/tile/tile.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.598
  */
-import { Component, Element, Fragment, h, Prop } from "@stencil/core";
+import { Fragment, h } from "@stencil/core";
 import { SLOTS } from "./resources";
 import { getSlotted } from "../../utils/dom";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
@@ -20,17 +20,17 @@ export class Tile {
     //
     //--------------------------------------------------------------------------
     /**
-     * When true, the component is active.
+     * When `true`, the component is active.
      */
     this.active = false;
     /**
-     * When true, interaction is prevented and the component is displayed with lower opacity.
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     /**
      * The component's embed mode.
      *
-     * When true, renders without a border and padding for use by other components.
+     * When `true`, renders without a border and padding for use by other components.
      */
     this.embed = false;
     /**
@@ -39,7 +39,7 @@ export class Tile {
      * @internal
      */
     this.focused = false;
-    /** When true, the component is not displayed and is not focusable.  */
+    /** When `true`, the component is not displayed and is not focusable.  */
     this.hidden = false;
   }
   // --------------------------------------------------------------------------
@@ -70,191 +70,187 @@ export class Tile {
         width: "64px"
       }
       : undefined;
-    return (h("div", { class: { container: true, "large-visual": isLargeVisual } },
-      icon && (h("div", { class: "icon" },
-        h("calcite-icon", { icon: icon, scale: "l", style: iconStyle }))),
-      h("div", { class: "content-container" },
-        getSlotted(el, SLOTS.contentStart) ? (h("div", { class: "content-slot-container" },
-          h("slot", { name: SLOTS.contentStart }))) : null,
-        h("div", { class: "content" },
-          heading && h("div", { class: "heading" }, heading),
-          description && h("div", { class: "description" }, description)),
-        getSlotted(el, SLOTS.contentEnd) ? (h("div", { class: "content-slot-container" },
-          h("slot", { name: SLOTS.contentEnd }))) : null)));
+    return (h("div", { class: { container: true, "large-visual": isLargeVisual } }, icon && (h("div", { class: "icon" }, h("calcite-icon", { icon: icon, scale: "l", style: iconStyle }))), h("div", { class: "content-container" }, getSlotted(el, SLOTS.contentStart) ? (h("div", { class: "content-slot-container" }, h("slot", { name: SLOTS.contentStart }))) : null, h("div", { class: "content" }, heading && h("div", { class: "heading" }, heading), description && h("div", { class: "description" }, description)), getSlotted(el, SLOTS.contentEnd) ? (h("div", { class: "content-slot-container" }, h("slot", { name: SLOTS.contentEnd }))) : null)));
   }
   render() {
     return (h(Fragment, null, this.href ? (h("calcite-link", { disabled: this.disabled, href: this.href }, this.renderTile())) : (this.renderTile())));
   }
   static get is() { return "calcite-tile"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["tile.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["tile.css"]
-  }; }
-  static get properties() { return {
-    "active": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, the component is active."
-      },
-      "attribute": "active",
-      "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, which displays below the heading."
-      },
-      "attribute": "description",
-      "reflect": true
-    },
-    "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"
-    },
-    "embed": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The component's embed mode.\n\nWhen true, renders without a border and padding for use by other components."
-      },
-      "attribute": "embed",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "focused": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": "The focused state of the component."
-      },
-      "attribute": "focused",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "heading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["tile.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tile.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, the component is active."
+        },
+        "attribute": "active",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The component header text, which displays between the icon and description."
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "A description for the component, which displays below the heading."
+        },
+        "attribute": "description",
+        "reflect": true
       },
-      "attribute": "heading",
-      "reflect": true
-    },
-    "hidden": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, the component is not displayed and is not focusable."
+      "embed": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The component's embed mode.\n\nWhen `true`, renders without a border and padding for use by other components."
+        },
+        "attribute": "embed",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "hidden",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "href": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "focused": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "The focused state of the component."
+        },
+        "attribute": "focused",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "When embed is \"false\", the url for the component."
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The component header text, which displays between the icon and description."
+        },
+        "attribute": "heading",
+        "reflect": true
       },
-      "attribute": "href",
-      "reflect": true
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "hidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, the component is not displayed and is not focusable."
+        },
+        "attribute": "hidden",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Specifies an icon to display."
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "When embed is `\"false\"`, the URL for the component."
+        },
+        "attribute": "href",
+        "reflect": true
       },
-      "attribute": "icon",
-      "reflect": true
-    }
-  }; }
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies an icon to display."
+        },
+        "attribute": "icon",
+        "reflect": true
+      }
+    };
+  }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/tile/tile.stories.js

@@ -0,0 +1,81 @@
+import { select, text } from "@storybook/addon-knobs";
+import { iconNames, boolean, storyFilters } from "../../../.storybook/helpers";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+export default {
+    title: "Components/Tiles/Tile",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <calcite-tile
+    ${boolean("active", false)}
+    description="${text("description", "Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall.")}"
+    ${boolean("disabled", false)}
+    heading="${text("heading", "Tile heading lorem ipsum")}"
+    ${boolean("hidden", false)}
+    href="${text("href", "#")}"
+    icon="${select("icon", iconNames, "layer")}"
+  >
+  </calcite-tile>
+`;
+export const largeTile = () => html `
+  <calcite-tile
+    ${boolean("active", false)}
+    description=""
+    heading="${text("heading", "Tile heading lorem ipsum!")}"
+    ${boolean("disabled", false)}
+    ${boolean("hidden", false)}
+    href="${text("href", "#")}"
+    icon="${select("icon", iconNames, "layer")}"
+  >
+  </calcite-tile>
+`;
+export const darkThemeRTL_TestOnly = () => html `
+  <calcite-tile
+    ${boolean("active", false)}
+    description="${text("description", "Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall.")}"
+    ${boolean("disabled", false)}
+    heading="${text("heading", "Tile heading lorem ipsum")}"
+    ${boolean("hidden", false)}
+    href="${text("href", "#")}"
+    icon="${select("icon", iconNames, "layer")}"
+    class="calcite-theme-dark"
+    dir="rtl"
+  >
+  </calcite-tile>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const contentStartRTL_TestOnly = () => html `
+  <calcite-tile
+    description="${text("description", "polygon layer")}"
+    heading="${text("heading", "Percent of population that carpool to work")}"
+    dir="rtl"
+  >
+    <calcite-icon scale="s" slot="content-start" icon="polygon"></calcite-icon>
+    <calcite-icon scale="s" slot="content-end" icon="launch"></calcite-icon>
+  </calcite-tile>
+`;
+export const overflowingContent_TestOnly = () => html `
+  <calcite-tile
+    icon="2d-explore"
+    heading="Example tile headinghfjkdlsahfjklsdahfjklsadhfjkldsahfjldkashfjdkalshfds;ahfjkldshafljkdsahfljksdahfdlsajkfhsadkljfhsdajklfhsdalkjfhdsalkjfhdsalf"
+    description="Example tile description contenthfjdkslahfjkdsalhf sdajklfh ksdjahfljksadhfljkdsahfjklsdahfjlkdsahflkjdsahfjkdsahflkdjsahfldksajhfdsklajhfdsljkahfdsajkfhsadlkjfsadhfdsa"
+    style="width:200px"
+  ></calcite-tile>
+`;
+export const disabled_TestOnly = () => html `
+  <calcite-tile
+    ${boolean("active", false)}
+    description="${text("description", "Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall.")}"
+    ${boolean("disabled", false)}
+    heading="${text("heading", "Tile heading lorem ipsum")}"
+    ${boolean("hidden", false)}
+    href="${text("href", "#")}"
+    icon="${select("icon", iconNames, "layer")}"
+  >
+  </calcite-tile>
+`;

package/dist/collection/components/tile-select/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/tile-select/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.598
  */
 export const CSS = {
   checked: "checked",