Merge branch 'master' of github.com:Esri/calcite-components into 505/…

…radio-tile-component

.eslintrc.json

@@ -14,14 +14,23 @@
   },
   "plugins": ["@typescript-eslint", "eslint-plugin-react", "prettier"],
   "rules": {
+    "@stencil/ban-exported-const-enums": "warn",
+    "@stencil/decorators-style": "warn",
     "@stencil/own-methods-must-be-private": "off",
     "@stencil/own-props-must-be-private": "off",
+    "@stencil/strict-mutable": "warn",
+    "@stencil/prefer-vdom-listener": "warn",
     "@stencil/required-jsdoc": "off",
     "@stencil/strict-boolean-conditions": "off",
+    "@typescript-eslint/ban-types": "warn",
+    "@typescript-eslint/explicit-module-boundary-types": "warn",
     "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/no-use-before-define": ["error", { "functions": false }],
-    "lines-between-class-members": ["error", "always"],
+    "@typescript-eslint/no-inferrable-types": "warn",
+    "@typescript-eslint/no-use-before-define": ["warn", { "functions": false }],
+    "lines-between-class-members": ["warn", "always"],
     "no-multiple-empty-lines": ["error", { "max": 1 }],
+    "no-var": "warn",
+    "prefer-const": "warn",
     "react/jsx-uses-react": "error",
     "react/jsx-uses-vars": "error"
   },

.lintstagedrc.json

@@ -1,5 +1,5 @@
 {
   "*.{json,md}": ["prettier --write"],
-  "*.scss": ["prettier --write"],
-  "*.{ts,tsx}": ["prettier --write"]
+  "*.scss": ["stylelint --fix", "prettier --write"],
+  "*.{ts,tsx}": ["tslint --project tsconfig-tslint.json --fix", "eslint --ext .ts,.tsx --fix", "prettier --write"]
 }

.stylelintrc.json

@@ -1,4 +1,5 @@
 {
+  "defaultSeverity": "warning",
   "extends": "stylelint-config-recommended-scss",
   "rules": {
     "declaration-block-semicolon-newline-after": "always-multi-line",

.travis.yml

@@ -6,6 +6,6 @@ node_js:
   - lts/*
 notifications:
   webhooks:
-    secure: "NmCqqWhKFtoNofWB8t09v6nTkUCrj5aWKV9/n4rNmdY7ee/gktqehR3P3zfJK1iSlvJ3ewgp/alqCpcgto1mM3QljHp5QAs3f9la8Klqihy5zrRp21N9nsdPJpgLlQd/FhWh5Ss+t0dJ/nPqSWH1j2kvFjjUK1fSxzAIZ2XP/mn9uogmUCiq2uzzmno+ucctgB9c9otAXPFijwTnOYHnUvvcclnUMMR+6hDW+i1rPXE07GslWQKwN4VicKSdC2W5KDEc2xjRbpeVodky6183uVIqB/6cy1t4Q7PiBoRpAQUa9pZBZCUuSQoR++bDIdczMP+LoqZ9IgLEkqneUwEJ4Tv/D1XPGDRyX01Vc86RT/9HAbaPGocpjxH+C/27YgLIZwvMKspd/w4ohJsXKbXf3p+2cRO37vayOt8SXV9l35f5wA4iBM+Pz/EqRZ7iHD/DUnh2MrLeWLmOIGUtjjgIs8r6n/1N3c+3Hv6DdlBnyttDAQX1EPW6rFdxmO4z8/bHdugPrYNsYeJhDWQru2gaQ/zTCgSRucUjjpCQzW0C1AGfp9IkiQ71s+uQJhGrnAkwBrf8qPjsKy2EzooMvQ0K2wPQ+W+ibUjmcThAu8A9wjx0tZDdyTQB8KzoJJvUuphh6V43a5ZWB5PyYbn3ldHBtlzjLno0xWlygvSuf3JHnas="
+    secure: "NtIaVttZMs7AUSzJHGriM2fdQcdzpg65d7f/10Hdeu0wSjhmKiV/74QRcwc60MhNdWSxgq4ecdsR/n1Bhm4e5RvPTxLKBZrjeUn72UefZ/B7Kt4QMQWhBMp6AxShsPQNBkSSuk7jL/QrbGuaLBjmquzxJBHp3et9BKth+Ew+T4NQk7J9EqNtrWlipV1acobkQW8nJZEg3Y1bESaVY69ebozVYJMDDjk0SL2XYCUAz2w9aZ2x/sodzjLLxC01Ouxd7G1h/Zvuvvhjqh3UmgH15E1QUcFI7X/zU+bwIg+trndALQbuVBuzSVpWiIM3Pe5+uiBtkSQqQRHkZj91OHDSKjTLwAsWhHHw6d+/GYTaZ0ful2riwxMyXpNR4Zv65aEnYMftZ4hk7okrVwkIBtpiUwwIe/F1RF2h+X0I8ontDevNqd492ZyXFUOtebOiWYOmgJPOso1dAl+ADnkoyJNY14o6ouBl4TPji71T8jGzGVGz3Cn5/Ww8sE60cFgLoHacXxtoe43nsx384skBfGKPrxujj2GoVRRInJCd2jECpNDVTVlXwnojtOoR0LUboJYpVHA40QAcm88YiscY+PZbIreF/kCcxEAmFw95CY5p9op93bfUgbetp7bGkbtAptRtiDA4Wz5EqUSSh5POSKUhCAqMpYU1It1Th7LHqRgelcU="
 script:
   - npm test

package.json

@@ -22,8 +22,11 @@
     "start": "npm run copy-icons && stencil build --dev --watch --serve",
     "test": "npm run copy-icons && stencil test --spec --e2e",
     "test.watch": "npm run copy-icons && stencil test --spec --e2e --watchAll",
+    "lint": "npm-run-all --parallel lint:*",
+    "lint:ts": "concurrently \"tslint --project tsconfig-tslint.json\" \"eslint --ext .ts,.tsx .\"",
+    "lint:styles": "stylelint \"src/**/*.scss\"",
     "posttest": "stencil build --prerender",
-    "prettier": "npm-run-all --parallel prettier:**",
+    "prettier": "npm-run-all --parallel prettier:*",
     "prettier:ts": "prettier --write \"src/**/*.ts?(x)\"",
     "prettier:styles": "prettier --write \"src/**/*.scss\"",
     "release:prepare": "npm version prerelease --preid=beta --no-git-tag-version ",

src/components/calcite-accordion-item/calcite-accordion-item.tsx

@@ -1,20 +1,11 @@
-import {
-  Component,
-  Element,
-  Event,
-  EventEmitter,
-  h,
-  Host,
-  Listen,
-  Prop,
-} from "@stencil/core";
+import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop } from "@stencil/core";
 import { getElementDir, getElementProp } from "../../utils/dom";
 import { getKey } from "../../utils/key";
 
 @Component({
   tag: "calcite-accordion-item",
   styleUrl: "calcite-accordion-item.scss",
-  shadow: true,
+  shadow: true
 })
 export class CalciteAccordionItem {
   //--------------------------------------------------------------------------
@@ -23,15 +14,15 @@ export class CalciteAccordionItem {
   //
   //--------------------------------------------------------------------------
 
-  @Element() el: HTMLElement;
+  @Element() el: HTMLCalciteAccordionItemElement;
 
   //--------------------------------------------------------------------------
   //
   //  Public Properties
   //
   //--------------------------------------------------------------------------
 
-  @Prop({ reflect: true, mutable: true }) active: boolean = false;
+  @Prop({ reflect: true, mutable: true }) active = false;
 
   /** pass a title for the accordion item */
   @Prop() itemTitle?: string;
@@ -49,8 +40,11 @@ export class CalciteAccordionItem {
   //--------------------------------------------------------------------------
 
   @Event() calciteAccordionItemKeyEvent: EventEmitter;
+
   @Event() calciteAccordionItemSelect: EventEmitter;
+
   @Event() calciteAccordionItemClose: EventEmitter;
+
   @Event() calciteAccordionItemRegister: EventEmitter;
 
   //--------------------------------------------------------------------------
@@ -63,21 +57,15 @@ export class CalciteAccordionItem {
     this.itemPosition = this.getItemPosition();
     this.calciteAccordionItemRegister.emit({
       parent: this.parent,
-      position: this.itemPosition,
+      position: this.itemPosition
     });
   }
 
   render() {
     const dir = getElementDir(this.el);
     const iconScale = this.scale !== "l" ? "s" : "m";
 
-    const iconEl = (
-      <calcite-icon
-        class="accordion-item-icon"
-        icon={this.icon}
-        scale={iconScale}
-      />
-    );
+    const iconEl = <calcite-icon class="accordion-item-icon" icon={this.icon} scale={iconScale} />;
 
     return (
       <Host
@@ -86,10 +74,7 @@ export class CalciteAccordionItem {
         dir={dir}
         icon-position={this.iconPosition}
       >
-        <div
-          class="accordion-item-header"
-          onClick={this.itemHeaderClickHandler}
-        >
+        <div class="accordion-item-header" onClick={this.itemHeaderClickHandler}>
           {this.icon ? iconEl : null}
           <div class="accordion-item-header-text">
             <span class="accordion-item-title">{this.itemTitle}</span>
@@ -136,7 +121,7 @@ export class CalciteAccordionItem {
         case "End":
           this.calciteAccordionItemKeyEvent.emit({
             parent: this.parent,
-            item: e,
+            item: e
           });
           e.preventDefault();
           break;
@@ -161,7 +146,7 @@ export class CalciteAccordionItem {
   private parent = this.el.parentElement as HTMLCalciteAccordionElement;
 
   /** position within parent */
-  private itemPosition: Number;
+  private itemPosition: number;
 
   /** the latest requested item */
   private requestedAccordionItem: HTMLCalciteAccordionItemElement;
@@ -205,7 +190,7 @@ export class CalciteAccordionItem {
 
   private emitRequestedItem() {
     this.calciteAccordionItemSelect.emit({
-      requestedAccordionItem: this.el as HTMLCalciteAccordionItemElement,
+      requestedAccordionItem: this.el as HTMLCalciteAccordionItemElement
     });
   }
 

src/components/calcite-accordion/calcite-accordion.tsx

@@ -1,19 +1,10 @@
-import {
-  Component,
-  Element,
-  Event,
-  EventEmitter,
-  h,
-  Host,
-  Listen,
-  Prop,
-} from "@stencil/core";
+import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop } from "@stencil/core";
 import { getKey } from "../../utils/key";
 
 @Component({
   tag: "calcite-accordion",
   styleUrl: "calcite-accordion.scss",
-  shadow: true,
+  shadow: true
 })
 export class CalciteAccordion {
   //--------------------------------------------------------------------------
@@ -22,7 +13,7 @@ export class CalciteAccordion {
   //
   //--------------------------------------------------------------------------
 
-  @Element() el: HTMLElement;
+  @Element() el: HTMLCalciteAccordionElement;
 
   //--------------------------------------------------------------------------
   //
@@ -37,26 +28,19 @@ export class CalciteAccordion {
   @Prop({ mutable: true, reflect: true }) scale: "s" | "m" | "l" = "m";
 
   /** specify the appearance - default (containing border), or minimal (no containing border), defaults to default */
-  @Prop({ mutable: true, reflect: true }) appearance:
-    | "default"
-    | "minimal"
-    | "transparent" = "default";
+  @Prop({ mutable: true, reflect: true }) appearance: "default" | "minimal" | "transparent" =
+    "default";
 
   /** specify the placement of the icon in the header, defaults to end */
   @Prop({ mutable: true, reflect: true }) iconPosition: "start" | "end" = "end";
 
   /** specify the type of the icon in the header, defaults to chevron */
-  @Prop({ mutable: true, reflect: true }) iconType:
-    | "chevron"
-    | "caret"
-    | "plus-minus" = "chevron";
+  @Prop({ mutable: true, reflect: true }) iconType: "chevron" | "caret" | "plus-minus" = "chevron";
 
   /** specify the selection mode - multi (allow any number of open items), single (allow one open item),
    * or single-persist (allow and require one open item), defaults to multi */
-  @Prop({ mutable: true, reflect: true }) selectionMode:
-    | "multi"
-    | "single"
-    | "single-persist" = "multi";
+  @Prop({ mutable: true, reflect: true }) selectionMode: "multi" | "single" | "single-persist" =
+    "multi";
 
   //--------------------------------------------------------------------------
   //
@@ -74,21 +58,20 @@ export class CalciteAccordion {
 
   connectedCallback() {
     // validate props
-    let appearance = ["default", "minimal", "transparent"];
+    const appearance = ["default", "minimal", "transparent"];
     if (!appearance.includes(this.appearance)) this.appearance = "default";
 
-    let iconPosition = ["start", "end"];
+    const iconPosition = ["start", "end"];
     if (!iconPosition.includes(this.iconPosition)) this.iconPosition = "end";
 
-    let iconType = ["chevron", "caret", "plus-minus"];
+    const iconType = ["chevron", "caret", "plus-minus"];
     if (!iconType.includes(this.iconType)) this.iconType = "chevron";
 
-    let scale = ["s", "m", "l"];
+    const scale = ["s", "m", "l"];
     if (!scale.includes(this.scale)) this.scale = "m";
 
-    let selectionMode = ["multi", "single", "single-persist"];
-    if (!selectionMode.includes(this.selectionMode))
-      this.selectionMode = "multi";
+    const selectionMode = ["multi", "single", "single-persist"];
+    if (!selectionMode.includes(this.selectionMode)) this.selectionMode = "multi";
   }
 
   componentDidLoad() {
@@ -112,16 +95,14 @@ export class CalciteAccordion {
   //
   //--------------------------------------------------------------------------
 
-  @Listen("calciteAccordionItemKeyEvent") calciteAccordionItemKeyEvent(
-    e: CustomEvent
-  ) {
+  @Listen("calciteAccordionItemKeyEvent") calciteAccordionItemKeyEvent(e: CustomEvent) {
     const item = e.detail.item;
     const parent = e.detail.parent as HTMLCalciteAccordionElement;
     if (this.el === parent) {
       const key = getKey(item.key);
-      let itemToFocus = e.target;
-      let isFirstItem = this.itemIndex(itemToFocus) === 0;
-      let isLastItem = this.itemIndex(itemToFocus) === this.items.length - 1;
+      const itemToFocus = e.target;
+      const isFirstItem = this.itemIndex(itemToFocus) === 0;
+      const isLastItem = this.itemIndex(itemToFocus) === this.items.length - 1;
       switch (key) {
         case "ArrowDown":
           if (isLastItem) this.focusFirstItem();
@@ -141,23 +122,19 @@ export class CalciteAccordion {
     }
   }
 
-  @Listen("calciteAccordionItemRegister") registerCalciteAccordionItem(
-    e: CustomEvent
-  ) {
+  @Listen("calciteAccordionItemRegister") registerCalciteAccordionItem(e: CustomEvent) {
     const item = {
       item: e.target as HTMLCalciteAccordionItemElement,
       parent: e.detail.parent as HTMLCalciteAccordionElement,
-      position: e.detail.position as Number,
+      position: e.detail.position as number
     };
     if (this.el === item.parent) this.items.push(item);
   }
 
-  @Listen("calciteAccordionItemSelect") updateActiveItemOnChange(
-    event: CustomEvent
-  ) {
+  @Listen("calciteAccordionItemSelect") updateActiveItemOnChange(event: CustomEvent) {
     this.requestedAccordionItem = event.detail.requestedAccordionItem;
     this.calciteAccordionChange.emit({
-      requestedAccordionItem: this.requestedAccordionItem,
+      requestedAccordionItem: this.requestedAccordionItem
     });
   }
 

src/components/calcite-alert/calcite-alert.tsx

@@ -36,7 +36,7 @@ export class CalciteAlert {
   //
   //--------------------------------------------------------------------------
 
-  @Element() el: HTMLElement;
+  @Element() el: HTMLCalciteAlertElement;
 
   //--------------------------------------------------------------------------
   //
@@ -45,10 +45,10 @@ export class CalciteAlert {
   //---------------------------------------------------------------------------
 
   /** Is the alert currently active or not */
-  @Prop({ reflect: true, mutable: true }) active: boolean = false;
+  @Prop({ reflect: true, mutable: true }) active = false;
 
   /** Close the alert automatically (recommended for passive, non-blocking alerts) */
-  @Prop() autoDismiss: boolean = false;
+  @Prop() autoDismiss = false;
 
   /** Duration of autoDismiss (only used with `autoDismiss`) */
   @Prop({ reflect: true, mutable: true }) autoDismissDuration: "fast" | "medium" | "slow" = this
@@ -66,7 +66,7 @@ export class CalciteAlert {
   @Prop({ mutable: true, reflect: true }) scale: "s" | "m" | "l" = "m";
 
   /** specify if the alert should display an icon */
-  @Prop() icon: boolean = false;
+  @Prop() icon = false;
 
   /** string to override English close text */
   @Prop() intlClose: string = TEXT.intlClose;
@@ -79,13 +79,13 @@ export class CalciteAlert {
 
   connectedCallback() {
     // prop validations
-    let colors = ["blue", "red", "green", "yellow"];
+    const colors = ["blue", "red", "green", "yellow"];
     if (!colors.includes(this.color)) this.color = "blue";
 
-    let scale = ["s", "m", "l"];
+    const scale = ["s", "m", "l"];
     if (!scale.includes(this.scale)) this.scale = "m";
 
-    let durations = ["slow", "medium", "fast"];
+    const durations = ["slow", "medium", "fast"];
     if (this.autoDismissDuration !== null && !durations.includes(this.autoDismissDuration)) {
       this.autoDismissDuration = "medium";
     }
@@ -184,10 +184,10 @@ export class CalciteAlert {
   @State() queue: HTMLCalciteAlertElement[] = [];
 
   /** the count of queued alerts */
-  @State() queueLength: number = 0;
+  @State() queueLength = 0;
 
   /** is the alert queued */
-  @State() queued: boolean = false;
+  @State() queued = false;
 
   /** the close button element */
   private closeButton?: HTMLButtonElement;
@@ -264,7 +264,7 @@ export class CalciteAlert {
   }
 
   private setIcon() {
-    var path = this.iconDefaults[this.color];
+    const path = this.iconDefaults[this.color];
     return (
       <div class="alert-icon">
         <calcite-icon icon={path} scale="m"></calcite-icon>