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

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

@@ -0,0 +1,294 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { renders, accessible, HYDRATED_ATTR, hidden } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
+import { CSS } from "./resources";
+describe("calcite-alert", () => {
+    const alertContent = `
+    <div slot="title">Title Text</div>
+    <div slot="message">Message Text</div>
+    <a slot="link" href="">Action</a>
+  `;
+    it("renders", async () => renders("calcite-alert", { visible: false, display: "block" }));
+    it("honors hidden attribute", async () => hidden(`<calcite-alert open></calcite-alert>`));
+    it("is accessible", async () => accessible(`
+    <calcite-alert open label="test">
+    ${alertContent}
+    </calcite-alert>
+  `));
+    it("is accessible with auto-dismiss", async () => accessible(`
+    <calcite-alert open auto-dismiss auto-dismiss-duration="slow" label="test">
+    ${alertContent}
+    </calcite-alert>
+  `));
+    it("renders default props when none are provided", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+    <calcite-alert>
+    ${alertContent}
+    </calcite-alert>`);
+        const element = await page.find("calcite-alert");
+        const close = await page.find("calcite-alert >>> .alert-close");
+        const icon = await page.find("calcite-alert >>> .alert-icon");
+        expect(element).toEqualAttribute("color", "blue");
+        expect(close).not.toBeNull();
+        expect(icon).toBeNull();
+    });
+    it("renders requested props when valid props are provided", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+    <calcite-alert color="yellow" auto-dismiss-duration="fast" auto-dismiss>
+    ${alertContent}
+    </calcite-alert>`);
+        const element = await page.find("calcite-alert");
+        const close = await page.find("calcite-alert >>> .alert-close");
+        const icon = await page.find("calcite-alert >>> .alert-icon");
+        expect(element).toEqualAttribute("color", "yellow");
+        expect(element).toEqualAttribute("auto-dismiss-duration", "fast");
+        expect(close).toBeNull();
+        expect(icon).toBeNull();
+    });
+    it("renders with an icon", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+    <calcite-alert icon>
+    ${alertContent}
+    </calcite-alert>`);
+        const element = await page.find("calcite-alert");
+        const close = await page.find("calcite-alert >>> .alert-close");
+        const icon = await page.find("calcite-alert >>> .alert-icon");
+        expect(element).toHaveAttribute(HYDRATED_ATTR);
+        expect(close).not.toBeNull();
+        expect(icon).not.toBeNull();
+    });
+    it("closes on time based on alert duration", async () => {
+        const page = await newE2EPage();
+        await page.setContent(html `
+      <div>
+        <calcite-button id="button-2" onclick="document.querySelector('#alert-2').setAttribute('open', '')"
+          >open alert-1</calcite-button
+        >
+        <calcite-alert label="this is a success" id="alert-2" scale="s" color="green" auto-dismiss icon>
+          <div slot="title">Hello there!</div>
+          <div slot="message">Get success!</div>
+          <calcite-link slot="link" title="my action"> Do thing </calcite-link>
+        </calcite-alert>
+      </div>
+    `);
+        const alert2 = await page.find("#alert-2");
+        const button2 = await page.find("#button-2");
+        const alertSpeedFastMs = 10000;
+        expect(await alert2.isVisible()).not.toBe(true);
+        await button2.click();
+        expect(await alert2.isVisible()).toBe(true);
+        await page.waitForTimeout(alertSpeedFastMs);
+        expect(await alert2.isVisible()).not.toBe(true);
+    });
+    const animationDurationInMs = 400;
+    it("opens and then closes a single alert", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+    <div>
+    <calcite-button id="button-1" onclick="document.querySelector('#alert-1').setAttribute('open', '')">open alert-1</calcite-button>
+    <calcite-alert id="alert-1">
+    ${alertContent}
+    </calcite-alert>
+    </div>`);
+        const alert1 = await page.find("#alert-1");
+        const button1 = await page.find("#button-1");
+        const alertclose1 = await page.find("#alert-1 >>> .alert-close");
+        expect(await alert1.isVisible()).not.toBe(true);
+        await button1.click();
+        await page.waitForTimeout(animationDurationInMs);
+        expect(await alert1.isVisible()).toBe(true);
+        await alertclose1.click();
+        await page.waitForTimeout(animationDurationInMs);
+        expect(await alert1.isVisible()).not.toBe(true);
+    });
+    it("opens the correct alert when multiple have been opened at once", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+    <div>
+    <calcite-button id="button-1" onclick="document.querySelector('#alert-1').setAttribute('open', '')">open alert-1</calcite-button>
+    <calcite-button id="button-2" onclick="document.querySelector('#alert-2').setAttribute('open', '')">open alert-2</calcite-button>
+    <calcite-button id="button-3" onclick="document.querySelector('#alert-3').setAttribute('open', '')">open alert-3</calcite-button>
+    <calcite-alert id="alert-1">
+    ${alertContent}
+    </calcite-alert>
+    <calcite-alert id="alert-2">
+    ${alertContent}
+    </calcite-alert>
+    <calcite-alert id="alert-3">
+    ${alertContent}
+    </calcite-alert>
+    </div>`);
+        const alert1 = await page.find("#alert-1");
+        const alert2 = await page.find("#alert-2");
+        const alert3 = await page.find("#alert-3");
+        const button1 = await page.find("#button-1");
+        const button2 = await page.find("#button-2");
+        const button3 = await page.find("#button-3");
+        const alertclose1 = await page.find("#alert-1 >>> .alert-close");
+        const alertclose2 = await page.find("#alert-2 >>> .alert-close");
+        await button1.click();
+        await page.waitForTimeout(animationDurationInMs);
+        await alertclose1.click();
+        await button2.click();
+        await page.waitForTimeout(animationDurationInMs);
+        await alertclose2.click();
+        await button3.click();
+        await page.waitForTimeout(animationDurationInMs);
+        expect(await alert1.isVisible()).not.toBe(true);
+        expect(await alert2.isVisible()).not.toBe(true);
+        expect(await alert3.isVisible()).toBe(true);
+    });
+    it("correctly assigns a default placement class", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+    <calcite-alert>
+    ${alertContent}
+    </calcite-alert>`);
+        const container = await page.find("calcite-alert >>> .container");
+        expect(container).toHaveClass("bottom");
+    });
+    it("correctly assigns a requested placement class", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+    <calcite-alert placement="top-end">
+    ${alertContent}
+    </calcite-alert>`);
+        const container = await page.find("calcite-alert >>> .container");
+        expect(container).not.toHaveClass("bottom");
+        expect(container).toHaveClass("top-end");
+    });
+    describe("CSS properties for light/dark themes", () => {
+        const alertSnippet = `
+      <calcite-alert
+        icon="i2DExplore"
+        auto-dismiss
+        auto-dismiss-duration="slow"
+        color="red"
+        open
+      >
+        <div slot="message">
+          Successfully duplicated
+          <strong>2019 Sales Demographics by County</strong>
+          layer
+        </div>
+        <calcite-link
+          slot="link"
+          title="my action"
+          role="presentation"
+        >
+          View layer
+        </calcite-link>
+      </calcite-alert>
+    `;
+        let page;
+        let alertDismissProgressBar;
+        let progressBarStyles;
+        it("should have defined CSS custom properties", async () => {
+            page = await newE2EPage({ html: alertSnippet });
+            progressBarStyles = await page.evaluate(() => {
+                const alert = document.querySelector("calcite-alert");
+                alert.style.setProperty("--calcite-alert-dismiss-progress-background", "white");
+                return window.getComputedStyle(alert).getPropertyValue("--calcite-alert-dismiss-progress-background");
+            });
+            expect(progressBarStyles).toEqual("white");
+        });
+        describe("when theme attribute is not provided", () => {
+            it("should render alert dismiss progress bar with default value tied to light theme", async () => {
+                page = await newE2EPage({ html: alertSnippet });
+                await page.waitForTimeout(animationDurationInMs);
+                alertDismissProgressBar = await page.find("calcite-alert[open] >>> .alert-dismiss-progress");
+                progressBarStyles = await alertDismissProgressBar.getComputedStyle(":after");
+                expect(await progressBarStyles.getPropertyValue("background-color")).toEqual("rgba(255, 255, 255, 0.8)");
+            });
+        });
+        describe("when theme attribute is dark", () => {
+            it("should render alert dismiss progress bar with value tied to dark theme", async () => {
+                page = await newE2EPage({
+                    html: `<div class="calcite-theme-dark">${alertSnippet}</div>`
+                });
+                await page.waitForTimeout(animationDurationInMs);
+                alertDismissProgressBar = await page.find("calcite-alert[open] >>> .alert-dismiss-progress");
+                progressBarStyles = await alertDismissProgressBar.getComputedStyle(":after");
+                expect(await progressBarStyles.getPropertyValue("background-color")).toEqual("rgba(43, 43, 43, 0.8)");
+            });
+        });
+        it("should allow the CSS custom property to be overridden", async () => {
+            const overrideStyle = "rgba(255, 0, 0, 0.5)";
+            page = await newE2EPage({
+                html: `
+        <style>
+          :root {
+            --calcite-alert-dismiss-progress-background: ${overrideStyle};
+          }
+        </style>
+        <div>${alertSnippet}</div>`
+            });
+            await page.waitForTimeout(animationDurationInMs);
+            alertDismissProgressBar = await page.find("calcite-alert[open] >>> .alert-dismiss-progress");
+            progressBarStyles = await alertDismissProgressBar.getComputedStyle(":after");
+            expect(await progressBarStyles.getPropertyValue("background-color")).toEqual(overrideStyle);
+        });
+    });
+    it("should emit component status for transition-chained events: 'calciteAlertBeforeOpen', 'calciteAlertOpen', 'calciteAlertBeforeClose', 'calciteAlertClose'", async () => {
+        const page = await newE2EPage();
+        await page.setContent(html `<calcite-alert> ${alertContent} </calcite-alert>`);
+        const element = await page.find("calcite-alert");
+        const container = await page.find(`calcite-alert >>> .${CSS.container}`);
+        expect(await container.isVisible()).toBe(false);
+        const calciteAlertBeforeOpenEvent = page.waitForEvent("calciteAlertBeforeOpen");
+        const calciteAlertOpenEvent = page.waitForEvent("calciteAlertOpen");
+        const calciteAlertBeforeOpenSpy = await element.spyOnEvent("calciteAlertBeforeOpen");
+        const calciteAlertOpenSpy = await element.spyOnEvent("calciteAlertOpen");
+        await element.setProperty("open", true);
+        await page.waitForChanges();
+        await calciteAlertBeforeOpenEvent;
+        await calciteAlertOpenEvent;
+        expect(await element.getProperty("open")).toBe(true);
+        expect(await element.getProperty("active")).toBe(true);
+        expect(calciteAlertBeforeOpenSpy).toHaveReceivedEventTimes(1);
+        expect(calciteAlertOpenSpy).toHaveReceivedEventTimes(1);
+        expect(await container.isVisible()).toBe(true);
+        const calciteAlertBeforeCloseEvent = page.waitForEvent("calciteAlertBeforeClose");
+        const calciteAlertCloseEvent = page.waitForEvent("calciteAlertClose");
+        const calciteAlertBeforeCloseSpy = await element.spyOnEvent("calciteAlertBeforeClose");
+        const calciteAlertClose = await element.spyOnEvent("calciteAlertClose");
+        await element.setProperty("open", false);
+        await page.waitForChanges();
+        await calciteAlertBeforeCloseEvent;
+        await calciteAlertCloseEvent;
+        expect(await element.getProperty("open")).toBe(false);
+        expect(await element.getProperty("active")).toBe(false);
+        expect(calciteAlertBeforeCloseSpy).toHaveReceivedEventTimes(1);
+        expect(calciteAlertClose).toHaveReceivedEventTimes(1);
+        expect(await container.isVisible()).toBe(false);
+    });
+    describe("when multiple alerts are queued", () => {
+        it("should display number of queued alerts with a calcite-chip", async () => {
+            const page = await newE2EPage({
+                html: `
+        <calcite-alert open id="first-open" icon="3d-glasses" auto-dismiss-duration="fast" scale="l">
+          <div slot="title">Title of alert #1</div>
+          <div slot="message">Message text of the alert</div>
+          <a slot="link" href="#">Retry</a>
+        </calcite-alert>
+        <calcite-alert id="alert-to-be-queued" icon auto-dismiss scale="l">
+          <div slot="title">Title of alert #2</div>
+          <div slot="message">Message text of the alert</div>
+          <a slot="link" href="#">Retry</a>
+        </calcite-alert>
+        `
+            });
+            await page.addScriptTag({
+                content: `document.querySelector("#alert-to-be-queued").setAttribute("open", "");`
+            });
+            await page.waitForTimeout(animationDurationInMs);
+            const chip = await page.find("calcite-alert[id='first-open'] >>> calcite-chip");
+            const chipQueueCount = "+1";
+            expect(await chip.getProperty("value")).toEqual(chipQueueCount);
+            expect(chip.textContent).toEqual(chipQueueCount);
+        });
+    });
+});

package/dist/collection/components/alert/alert.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, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { getSlotted, setRequestedIcon, toAriaBoolean } from "../../utils/dom";
@@ -280,7 +280,7 @@ export class Alert {
         "text": "When true, the component closes automatically (recommended for passive, non-blocking alerts)."
       },
       "attribute": "auto-dismiss",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "autoDismissDuration": {
@@ -404,7 +404,7 @@ export class Alert {
         "text": "Specifies the placement of the component"
       },
       "attribute": "placement",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "\"bottom\""
     },
     "scale": {

package/dist/collection/components/alert/interfaces.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 var StatusIcons;
 (function (StatusIcons) {

package/dist/collection/components/alert/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 TEXT = {
   intlClose: "Close"

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

@@ -0,0 +1,55 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
+describe("calcite-avatar", () => {
+    it("renders", async () => renders("calcite-avatar", { display: "inline-block" }));
+    it("honors hidden attribute", async () => hidden("calcite-avatar"));
+    it("is accessible", async () => {
+        await accessible("calcite-avatar");
+        await accessible("<calcite-avatar thumbnail='http://placekitten.com/120/120'></calcite-avatar>");
+    });
+    it("has property defaults", async () => defaults("calcite-avatar", [
+        {
+            propertyName: "scale",
+            defaultValue: "m"
+        }
+    ]));
+    it("renders thumbnail when provided", async () => {
+        const page = await newE2EPage();
+        await page.setContent("<calcite-avatar thumbnail='http://placekitten.com/120/120'></calcite-avatar>");
+        const thumbnail = await page.find("calcite-avatar >>> .thumbnail");
+        expect(thumbnail).toEqualAttribute("src", "http://placekitten.com/120/120");
+    });
+    it("renders initials when no thumbnail is provided", async () => {
+        const page = await newE2EPage();
+        await page.setContent("<calcite-avatar full-name='My Dude'></calcite-avatar>");
+        const initials = await page.find("calcite-avatar >>> .initials");
+        expect(initials).toEqualText("MD");
+    });
+    it("computes a background fill color based on user id", async () => {
+        const page = await newE2EPage();
+        await page.setContent("<calcite-avatar user-id='25684463a00c449585dbb32a065f6b74'></calcite-avatar>");
+        const style = await page.evaluate(() => {
+            const background = document.querySelector("calcite-avatar").shadowRoot.querySelector(".background");
+            return background.getAttribute("style");
+        });
+        expect(style).toEqual("background-color: rgb(214, 232, 245);");
+    });
+    it("computes a background fill if id is not a valid hex", async () => {
+        const page = await newE2EPage();
+        await page.setContent("<calcite-avatar user-id='for sure not a hex' username='THaverford'></calcite-avatar>");
+        const initials = await page.find("calcite-avatar >>> .initials");
+        expect(initials).toEqualText("TH");
+        const style = await page.evaluate(() => {
+            const background = document.querySelector("calcite-avatar").shadowRoot.querySelector(".background");
+            return background.getAttribute("style");
+        });
+        expect(style).toEqual("background-color: rgb(245, 219, 214);");
+    });
+    it("renders default icon when no information is passed", async () => {
+        const page = await newE2EPage();
+        await page.setContent("<calcite-avatar></calcite-avatar>");
+        const icon = await page.find("calcite-avatar >>> .icon");
+        const visible = await icon.isVisible();
+        expect(visible).toBe(true);
+    });
+});

package/dist/collection/components/avatar/avatar.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, h, Prop, State } from "@stencil/core";
 import { isValidHex } from "../color-picker/utils";
@@ -21,8 +21,7 @@ export class Avatar {
     //  Private State/Props
     //
     //--------------------------------------------------------------------------
-    /** True if thumnail fails to load */
-    this.error = false;
+    this.thumbnailFailedToLoad = false;
   }
   //--------------------------------------------------------------------------
   //
@@ -38,8 +37,8 @@ export class Avatar {
   //
   //--------------------------------------------------------------------------
   determineContent() {
-    if (this.thumbnail && !this.error) {
-      return (h("img", { alt: "", class: "thumbnail", onError: () => (this.error = true), src: this.thumbnail }));
+    if (this.thumbnail && !this.thumbnailFailedToLoad) {
+      return (h("img", { alt: "", class: "thumbnail", onError: () => (this.thumbnailFailedToLoad = true), src: this.thumbnail }));
     }
     const initials = this.generateInitials();
     const backgroundColor = this.generateFillColor();
@@ -126,7 +125,7 @@ export class Avatar {
         "text": "Specifies the `src` to an image (remember to add a token if the user is private)."
       },
       "attribute": "thumbnail",
-      "reflect": false
+      "reflect": true
     },
     "fullName": {
       "type": "string",
@@ -143,7 +142,7 @@ export class Avatar {
         "text": "Specifies the full name of the user."
       },
       "attribute": "full-name",
-      "reflect": false
+      "reflect": true
     },
     "username": {
       "type": "string",
@@ -160,7 +159,7 @@ export class Avatar {
         "text": "Specifies the username of the user."
       },
       "attribute": "username",
-      "reflect": false
+      "reflect": true
     },
     "userId": {
       "type": "string",
@@ -177,11 +176,11 @@ export class Avatar {
         "text": "Specifies the unique id of the user."
       },
       "attribute": "user-id",
-      "reflect": false
+      "reflect": true
     }
   }; }
   static get states() { return {
-    "error": {}
+    "thumbnailFailedToLoad": {}
   }; }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/avatar/avatar.spec.js

@@ -0,0 +1,42 @@
+import { isValidHex } from "../color-picker/utils";
+import { hexToHue, rgbToHue, stringToHex } from "./utils";
+describe("stringToHex", () => {
+    it("generates a consistent hex", () => {
+        expect(stringToHex("testing")).toEqual(stringToHex("testing"));
+    });
+    it("handles empty input", () => {
+        expect(stringToHex("")).toBeTruthy();
+    });
+    it("generates a valid hex color, regardless of input", () => {
+        expect(isValidHex(stringToHex("hey dude"))).toBe(true);
+        expect(isValidHex(stringToHex("numbe8972983767869891823"))).toBe(true);
+        expect(isValidHex(stringToHex("asdf8798768657476876yashjkdfbasd"))).toBe(true);
+        expect(isValidHex(stringToHex(")#@$%*@^#&%$(^!)@*)#$*!%"))).toBe(true);
+        expect(isValidHex(stringToHex("0"))).toBe(true);
+        expect(isValidHex(stringToHex("##########"))).toBe(true);
+        expect(isValidHex(stringToHex("키스의 고유조건은 입술끼리 만나야 하고 특별한 기술은 필요치 않다"))).toBe(true);
+        expect(isValidHex(stringToHex("✨🌈"))).toBe(true);
+    });
+});
+describe("rgbToHue", () => {
+    it("correctly finds hue of various rgb colors", () => {
+        expect(rgbToHue({ r: 0, g: 0, b: 0 })).toEqual(0);
+        expect(rgbToHue({ r: 255, g: 255, b: 255 })).toEqual(0);
+        expect(rgbToHue({ r: 255, g: 0, b: 0 })).toEqual(0);
+        expect(rgbToHue({ r: 0, g: 255, b: 0 })).toEqual(120);
+        expect(rgbToHue({ r: 0, g: 0, b: 255 })).toEqual(240);
+        expect(rgbToHue({ r: 18, g: 77, b: 123 })).toEqual(206);
+        expect(rgbToHue({ r: 214, g: 90, b: 45 })).toEqual(16);
+        expect(rgbToHue({ r: 160, g: 123, b: 45 })).toEqual(41);
+    });
+});
+describe("hexToHue", () => {
+    it("correctly finds hue of various hex colors", () => {
+        expect(hexToHue("#a07b2d")).toEqual(41);
+        expect(hexToHue("#44ed51")).toEqual(125);
+        expect(hexToHue("#151515")).toEqual(0);
+        expect(hexToHue("#ffc800")).toEqual(47);
+        expect(hexToHue("#47bbff")).toEqual(202);
+        expect(hexToHue("#ffffff")).toEqual(0);
+    });
+});

package/dist/collection/components/avatar/utils.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 { hexToRGB } from "../color-picker/utils";
 /**

package/dist/collection/components/block/block.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.
 */
@@ -249,7 +254,7 @@ calcite-handle {
 }
 
 .status-icon.loading {
-  animation: spin 2s linear infinite;
+  animation: spin var(--calcite-internal-animation-timing-medium) linear infinite;
 }
 
 @keyframes spin {