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

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

@@ -0,0 +1,197 @@
+import { filterComponentAttributes, createComponentHTML as create, themesDarkDefault } from "../../../.storybook/utils";
+import { placeholderImage } from "../../../.storybook/placeholderImage";
+import { ATTRIBUTES } from "../../../.storybook/resources";
+import { iconNames, storyFilters } from "../../../.storybook/helpers";
+import { select, text } from "@storybook/addon-knobs";
+import accordionReadme from "./readme.md";
+import accordionItemReadme from "../accordion-item/readme.md";
+import { html } from "../../../support/formatting";
+const createAccordionAttributes = ({ exceptions } = { exceptions: [] }) => {
+    const group = "accordion";
+    const { scale } = ATTRIBUTES;
+    return filterComponentAttributes([
+        {
+            name: "scale",
+            commit() {
+                this.value = select("scale", scale.values, scale.defaultValue, group);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "appearance",
+            commit() {
+                this.value = select("appearance", ["default", "minimal", "transparent"], "default", group);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "icon-position",
+            commit() {
+                this.value = select("icon-position", ["start", "end"], "end", group);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "icon-type",
+            commit() {
+                this.value = select("icon-type", ["chevron", "caret", "plus-minus"], "chevron", group);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "selection-mode",
+            commit() {
+                this.value = select("selection-mode", ["multi", "single", "single-persist"], "multi", group);
+                delete this.build;
+                return this;
+            }
+        }
+    ], exceptions);
+};
+const createAccordionItemAttributes = ({ icon, group, iconStart, iconEnd }) => {
+    const groupTitle = group ? group : "";
+    const defaultAttributes = [
+        {
+            name: "heading",
+            value: text("heading", "Heading", groupTitle)
+        },
+        {
+            name: "description",
+            value: text("description", "Description", groupTitle)
+        }
+    ];
+    const iconAttribute = [
+        {
+            name: "icon",
+            value: select("icon", iconNames, iconNames[0], groupTitle)
+        }
+    ];
+    const iconStartAttribute = [
+        {
+            name: "icon-start",
+            value: select("icon-start", iconNames, iconNames[0], groupTitle)
+        }
+    ];
+    const iconEndAttribute = [
+        {
+            name: "icon-end",
+            value: select("icon-end", iconNames, iconNames[0], groupTitle)
+        }
+    ];
+    if (iconEnd && iconStart) {
+        return iconStartAttribute.concat(defaultAttributes, iconEndAttribute);
+    }
+    else if (iconStart || iconEnd) {
+        return iconStart ? iconStartAttribute.concat(defaultAttributes) : iconEndAttribute.concat(defaultAttributes);
+    }
+    else if (icon) {
+        return iconAttribute.concat(defaultAttributes);
+    }
+    return defaultAttributes;
+};
+const accordionItemContent = `Custom content here<br/><img src="${placeholderImage({
+    width: 200,
+    height: 133
+})}"><br/>More custom content here`;
+export default {
+    title: "Components/Accordion",
+    parameters: {
+        notes: {
+            accordion: accordionReadme,
+            accordionItem: accordionItemReadme
+        },
+        backgrounds: {
+            values: [{ name: "transparent", value: "#0000ffff" }]
+        }
+    },
+    ...storyFilters()
+};
+export const simple = () => create("calcite-accordion", createAccordionAttributes(), html `
+      ${create("calcite-accordion-item", createAccordionItemAttributes({ group: "accordion-item-1" }), accordionItemContent)}
+      ${create("calcite-accordion-item", createAccordionItemAttributes({ group: "accordion-item-2" }), accordionItemContent)}
+      ${create("calcite-accordion-item", createAccordionItemAttributes({ group: "accordion-item-3" }), accordionItemContent)}
+      ${create("calcite-accordion-item", createAccordionItemAttributes({ group: "accordion-item-4" }).concat({
+    name: "expanded",
+    value: true
+}), accordionItemContent)}
+    `);
+export const icon_NoTest = () => create("calcite-accordion", createAccordionAttributes(), html `
+      ${create("calcite-accordion-item", createAccordionItemAttributes({ icon: true, group: "accordion-item-1" }), accordionItemContent)}
+      ${create("calcite-accordion-item", createAccordionItemAttributes({ icon: true, group: "accordion-item-2" }), accordionItemContent)}
+      ${create("calcite-accordion-item", createAccordionItemAttributes({ icon: true, group: "accordion-item-3" }), accordionItemContent)}
+      ${create("calcite-accordion-item", createAccordionItemAttributes({ icon: true, group: "accordion-item-4" }).concat({
+    name: "expanded",
+    value: true
+}), accordionItemContent)}
+    `);
+export const withActions = () => html `
+  <calcite-accordion scale="s">
+    <calcite-accordion-item scale="m" heading="Accordion Item">
+      <calcite-action scale="s" icon="brush-tip" label="Paint" slot="actions-start"></calcite-action
+      >${accordionItemContent}
+      <calcite-action scale="s" icon="banana" label="Banana" slot="actions-end"></calcite-action>
+      <calcite-action scale="s" icon="sound" label="Volume" slot="actions-end"></calcite-action>
+    </calcite-accordion-item>
+    <calcite-accordion-item scale="m" heading="Accordion Item">
+      <calcite-action scale="s" icon="brush-tip" label="Paint" slot="actions-start"></calcite-action
+      >${accordionItemContent}
+      <calcite-action scale="s" icon="banana" label="Banana" slot="actions-end"></calcite-action>
+      <calcite-action scale="s" icon="sound" label="Volume" slot="actions-end"></calcite-action>
+    </calcite-accordion-item>
+    <calcite-accordion-item scale="m" heading="Accordion Item">
+      <calcite-action scale="s" icon="brush-tip" label="Paint" slot="actions-start"></calcite-action
+      >${accordionItemContent}
+      <calcite-action scale="s" icon="banana" label="Banana" slot="actions-end"></calcite-action>
+      <calcite-action scale="s" icon="sound" label="Volume" slot="actions-end"></calcite-action>
+    </calcite-accordion-item>
+  </calcite-accordion>
+`;
+export const darkThemeRTL_TestOnly = () => create("calcite-accordion", createAccordionAttributes({ exceptions: ["class", "dir"] }).concat({
+    name: "class",
+    value: "calcite-theme-dark"
+}, {
+    name: "dir",
+    value: "rtl"
+}), html `
+      ${create("calcite-accordion-item", createAccordionItemAttributes({ icon: true, group: "accordion-item-1" }), accordionItemContent)}
+      ${create("calcite-accordion-item", createAccordionItemAttributes({ icon: true, group: "accordion-item-2" }), accordionItemContent)}
+      ${create("calcite-accordion-item", createAccordionItemAttributes({ icon: true, group: "accordion-item-3" }), accordionItemContent)}
+      ${create("calcite-accordion-item", createAccordionItemAttributes({ icon: true, group: "accordion-item-4" }).concat({
+    name: "expanded",
+    value: true
+}), accordionItemContent)}
+    `);
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const transparentAppearance_TestOnly = () => create("calcite-accordion", createAccordionAttributes({ exceptions: ["appearance"] }).concat({
+    name: "appearance",
+    value: "transparent"
+}), html `
+      ${create("calcite-accordion-item", createAccordionItemAttributes({ group: "accordion-item-1" }), accordionItemContent)}
+      ${create("calcite-accordion-item", createAccordionItemAttributes({ group: "accordion-item-2" }), accordionItemContent)}
+      ${create("calcite-accordion-item", createAccordionItemAttributes({ group: "accordion-item-3" }), accordionItemContent)}
+      ${create("calcite-accordion-item", createAccordionItemAttributes({ group: "accordion-item-4" }).concat({
+    name: "expanded",
+    value: true
+}), accordionItemContent)}
+    `);
+export const withIconStartAndEnd_TestOnly = () => create("calcite-accordion", createAccordionAttributes({ exceptions: ["appearance"] }).concat({
+    name: "appearance",
+    value: "transparent"
+}), html `
+      ${create("calcite-accordion-item", createAccordionItemAttributes({ group: "accordion-item-1", iconStart: "banana", icon: true }), accordionItemContent)}
+      ${create("calcite-accordion-item", createAccordionItemAttributes({ group: "accordion-item-2", iconEnd: "cars" }), accordionItemContent)}
+      ${create("calcite-accordion-item", createAccordionItemAttributes({ group: "accordion-item-3", iconEnd: "plane", iconStart: "plane", icon: true }), accordionItemContent)}
+      ${create("calcite-accordion-item", createAccordionItemAttributes({
+    group: "accordion-item-4",
+    iconStart: "biking",
+    iconEnd: "biking",
+    icon: true
+}).concat({
+    name: "expanded",
+    value: true
+}), accordionItemContent)}
+    `);

package/dist/collection/components/accordion-item/accordion-item.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.597
+ * v1.0.0-next.598
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, toAriaBoolean } from "../../utils/dom";
@@ -19,12 +19,12 @@ export class AccordionItem {
     //
     //--------------------------------------------------------------------------
     /**
-     * When true, the component is active.
+     * When `true`, the component is active.
      *
-     * @deprecated use expanded instead
+     * @deprecated use `expanded` instead.
      */
     this.active = false;
-    /** When true, item is expanded */
+    /** When `true`, the component is expanded. */
     this.expanded = false;
     /** what icon position does the parent accordion specify */
     this.iconPosition = "end";
@@ -195,9 +195,9 @@ export class AccordionItem {
         "docs": {
           "tags": [{
               "name": "deprecated",
-              "text": "use expanded instead"
+              "text": "use `expanded` instead."
             }],
-          "text": "When true, the component is active."
+          "text": "When `true`, the component is active."
         },
         "attribute": "active",
         "reflect": true,
@@ -215,7 +215,7 @@ export class AccordionItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, item is expanded"
+          "text": "When `true`, the component is expanded."
         },
         "attribute": "expanded",
         "reflect": true,

package/dist/collection/components/accordion-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.597
+ * v1.0.0-next.598
  */
 export const SLOTS = {
   actionsStart: "actions-start",

package/dist/collection/components/action/action.css

@@ -107,7 +107,7 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-action-indicator-color: optionally specify the color of the action indicator
+* @prop --calcite-action-indicator-color: Specifies the color of the component's indicator.
 */
 :host {
   display: flex;

package/dist/collection/components/action/action.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.597
+ * v1.0.0-next.598
  */
 import { Host, h, forceUpdate } from "@stencil/core";
 import { CSS, TEXT, SLOTS } from "./resources";
@@ -19,21 +19,21 @@ export class Action {
     //
     // --------------------------------------------------------------------------
     /**
-     * When true, the component is highlighted.
+     * When `true`, the component is highlighted.
      */
     this.active = false;
     /** Specifies the appearance of the component. */
     this.appearance = "solid";
     /**
-     * When true, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.
+     * When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.
      */
     this.compact = 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;
     /**
-     * When true, indicates unread changes.
+     * When `true`, indicates unread changes.
      */
     this.indicator = false;
     /**
@@ -43,7 +43,7 @@ export class Action {
      */
     this.intlLoading = TEXT.loading;
     /**
-     * When true, a busy indicator is displayed.
+     * When `true`, a busy indicator is displayed.
      */
     this.loading = false;
     /**
@@ -167,7 +167,7 @@ export class Action {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is highlighted."
+          "text": "When `true`, the component is highlighted."
         },
         "attribute": "active",
         "reflect": true,
@@ -233,7 +233,7 @@ export class Action {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`."
+          "text": "When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`."
         },
         "attribute": "compact",
         "reflect": true,
@@ -251,7 +251,7 @@ export class Action {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
         "attribute": "disabled",
         "reflect": true,
@@ -286,7 +286,7 @@ export class Action {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, indicates unread changes."
+          "text": "When `true`, indicates unread changes."
         },
         "attribute": "indicator",
         "reflect": true,
@@ -342,7 +342,7 @@ export class Action {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, a busy indicator is displayed."
+          "text": "When `true`, a busy indicator is displayed."
         },
         "attribute": "loading",
         "reflect": true,
@@ -418,7 +418,7 @@ export class Action {
         "docs": {
           "tags": [{
               "name": "deprecated",
-              "text": "use onClick instead."
+              "text": "use `onClick` instead."
             }],
           "text": "Emits when the component has been clicked."
         },

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

@@ -0,0 +1,181 @@
+import { boolean, select, text } from "@storybook/addon-knobs";
+import { filterComponentAttributes, createComponentHTML as create, themesDarkDefault } from "../../../.storybook/utils";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+import { iconNames, storyFilters } from "../../../.storybook/helpers";
+import { ATTRIBUTES } from "../../../.storybook/resources";
+const { alignment, scale } = ATTRIBUTES;
+export default {
+    title: "Components/Buttons/Action",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+const createAttributes = ({ exceptions } = { exceptions: [] }) => {
+    return filterComponentAttributes([
+        {
+            name: "active",
+            commit() {
+                this.value = boolean("active", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "alignment",
+            commit() {
+                this.value = select("alignment", alignment.values, alignment.defaultValue);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "appearance",
+            commit() {
+                this.value = select("appearance", ["solid", "clear"], "solid");
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "compact",
+            commit() {
+                this.value = boolean("compact", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "disabled",
+            commit() {
+                this.value = boolean("disabled", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "icon",
+            commit() {
+                this.value = select("icon", ["", ...iconNames], "banana");
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "indicator",
+            commit() {
+                this.value = boolean("indicator", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "label",
+            commit() {
+                this.value = text("label", "Label");
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "loading",
+            commit() {
+                this.value = boolean("loading", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "scale",
+            commit() {
+                this.value = select("scale", scale.values, scale.defaultValue);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "text",
+            commit() {
+                this.value = text("text", "Text");
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "text-enabled",
+            commit() {
+                this.value = boolean("textEnabled", true);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "style",
+            commit() {
+                this.value = boolean("textEnabled", true);
+                delete this.build;
+                return this;
+            }
+        }
+    ], exceptions);
+};
+export const simple = () => html `<div>
+    ${create("calcite-action", createAttributes({ exceptions: ["icon", "text"] }).concat([
+    {
+        name: "icon",
+        value: "banana"
+    },
+    {
+        name: "text",
+        value: ""
+    }
+]))}
+  </div>`;
+export const disabledAndCompactAndTextOnly_TestOnly = () => html `<div>
+    ${create("calcite-action", createAttributes({ exceptions: ["compact", "disabled"] }).concat([
+    { name: "compact", value: true },
+    { name: "disabled", value: true }
+]))}
+  </div>`;
+export const activeAndAppearanceClear_TestOnly = () => html `<div>
+    ${create("calcite-action", createAttributes({ exceptions: ["icon", "appearance", "active"] }).concat([
+    { name: "active", value: true },
+    { name: "icon", value: "banana" },
+    { name: "appearance", value: "clear" }
+]))}
+  </div>`;
+export const alignmentEndAndSmallScaleAndIndicator_TestOnly = () => html `<div style="width: 300px">
+    ${create("calcite-action", createAttributes({ exceptions: ["icon", "indicator", "alignment", "scale"] }).concat([
+    { name: "icon", value: "banana" },
+    { name: "alignment", value: "end" },
+    { name: "indicator", value: true },
+    { name: "scale", value: "s" }
+]))}
+  </div>`;
+export const alignmentStartAndLargeScaleAndTextOverflow_TestOnly = () => html `<div style="width: 150px">
+    ${create("calcite-action", createAttributes({ exceptions: ["icon", "text", "alignment", "scale"] }).concat([
+    { name: "icon", value: "banana" },
+    { name: "text", value: "Blah blah blah blah blah blah blah blah blah blah" },
+    { name: "alignment", value: "start" },
+    { name: "scale", value: "l" }
+]))}
+  </div>`;
+export const arabicLocale_TestOnly = () => html `
+  <calcite-action
+    dir="rtl"
+    icon="banana"
+    lang="ar"
+    lang="ar-EG"
+    text="لكن لا بد أن أوضح لك أن كل"
+    text-enabled
+  ></calcite-action>
+`;
+export const darkThemeRTL_TestOnly = () => html `<div>
+    ${create("calcite-action", createAttributes({ exceptions: ["icon", "class", "dir"] }).concat([
+    { name: "icon", value: "banana" },
+    { name: "class", value: "calcite-theme-dark" },
+    { name: "dir", value: "rtl" }
+]))}
+  </div>`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

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

package/dist/collection/components/action-bar/action-bar.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.597
+ * v1.0.0-next.598
  */
 import { Host, h } from "@stencil/core";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
@@ -24,11 +24,11 @@ export class ActionBar {
     //
     // --------------------------------------------------------------------------
     /**
-     * When true, the expand-toggling behavior is disabled.
+     * When `true`, the expand-toggling behavior is disabled.
      */
     this.expandDisabled = false;
     /**
-     * When true, the component is expanded.
+     * When `true`, the component is expanded.
      */
     this.expanded = false;
     /**
@@ -212,7 +212,7 @@ export class ActionBar {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the expand-toggling behavior is disabled."
+          "text": "When `true`, the expand-toggling behavior is disabled."
         },
         "attribute": "expand-disabled",
         "reflect": true,
@@ -230,7 +230,7 @@ export class ActionBar {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is expanded."
+          "text": "When `true`, the component is expanded."
         },
         "attribute": "expanded",
         "reflect": true,