feat(progress-indicator): Add common interface for progress indicators (

#5564)

packages/mdc-linear-progress/component.ts

@@ -22,10 +22,12 @@
  */
 
 import {MDCComponent} from '@material/base/component';
+import {MDCProgressIndicator} from '@material/progress-indicator/component';
 import {MDCLinearProgressAdapter} from './adapter';
 import {MDCLinearProgressFoundation} from './foundation';
 
-export class MDCLinearProgress extends MDCComponent<MDCLinearProgressFoundation> {
+export class MDCLinearProgress extends
+    MDCComponent<MDCLinearProgressFoundation> implements MDCProgressIndicator {
   static attachTo(root: Element) {
     return new MDCLinearProgress(root);
   }

packages/mdc-linear-progress/foundation.ts

@@ -23,10 +23,13 @@
 
 import {getCorrectPropertyName} from '@material/animation/util';
 import {MDCFoundation} from '@material/base/foundation';
+import {MDCProgressIndicatorFoundation} from '@material/progress-indicator/foundation';
 import {MDCLinearProgressAdapter} from './adapter';
 import {cssClasses, strings} from './constants';
 
-export class MDCLinearProgressFoundation extends MDCFoundation<MDCLinearProgressAdapter> {
+export class MDCLinearProgressFoundation extends
+    MDCFoundation<MDCLinearProgressAdapter> implements
+        MDCProgressIndicatorFoundation {
   static get cssClasses() {
     return cssClasses;
   }

packages/mdc-linear-progress/package.json

@@ -21,6 +21,7 @@
     "@material/animation": "^4.0.0",
     "@material/base": "^4.0.0",
     "@material/feature-targeting": "^4.0.0",
+    "@material/progress-indicator": "^4.0.0",
     "@material/theme": "^4.0.0",
     "tslib": "^1.9.3"
   },

packages/mdc-progress-indicator/README.md

@@ -0,0 +1,42 @@
+<!--docs:
+title: "Progress Indicator"
+layout: detail
+section: components
+excerpt: "Material Design-styled progress indicators."
+iconId: progress_linear
+path: /catalog/progress-indicator/
+-->
+
+# Progress Indicators
+The MDC Progress Indicator component exposes common foundation and component interfaces for a progress indicator. Components that implement these interfaces include [linear progress](https://github.com/material-components/material-components-web/tree/master/packages/mdc-linear-progress) and circular progress (WIP).
+[Material Design progress & activity requirements](https://material.io/go/design-progress-indicators).
+
+## Installation
+
+```
+npm install @material/progress-indicator
+```
+
+## Basic Usage
+
+### MDCProgressIndicatorFoundation API
+
+MDC Progress Indicator Foundation exposes the following methods:
+
+| Method Signature | Description |
+| --- | --- |
+| `setDeterminate(value: boolean) => void` | Toggles the component between the determinate and indeterminate state. |
+| `setProgress(value: number) => void` | Sets the progress to this value. Value should be between [0, 1]. |
+| `open() => void` | Puts the component in the open state. |
+| `close() => void` | Puts the component in the closed state. |
+
+### MDCProgressIndicator Component API
+
+MDC Progress Indicator exposes the following API:
+
+| Method Signature | Description |
+| --- | --- |
+| `determinate: boolean` | Whether the indicator is in the determinate or indeterminate state. |
+| `progress: number` | The current progress. Value should be between [0, 1]. |
+| `open() => void` | Puts the component in the open state. |
+| `close() => void` | Puts the component in the closed state. |

packages/mdc-progress-indicator/component.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2020 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+/**
+ * The interface for MDC's progress indicators.
+ *
+ * @public
+ */
+export interface MDCProgressIndicator {
+  /**
+   * Toggles the component between the determinate and indeterminate state.
+   */
+  determinate: boolean;
+
+  /**
+   * The current progress value. Value should be between [0, 1].
+   */
+  progress: number;
+
+  /**
+   * Puts the component in the open state.
+   */
+  open(): void;
+
+  /**
+   * Puts the component in the closed state.
+   */
+  close(): void;
+}

packages/mdc-progress-indicator/foundation.ts

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2020 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+/**
+ * The interface for the foundation of MDC's progress indicators.
+ *
+ * @public
+ */
+export interface MDCProgressIndicatorFoundation {
+  /**
+   * Toggles the component between the determinate and indeterminate state.
+   *
+   * @param isDeterminate - Whether the component is in determinate state
+   */
+  setDeterminate(isDeterminate: boolean): void;
+
+  /**
+   * Sets the current progress value.
+   *
+   * @param value - the current progress value, should be between [0,1]
+   */
+  setProgress(value: number): void;
+
+  /**
+   * Puts the component in the open state.
+   */
+  open(): void;
+
+  /**
+   * Puts the component in the closed state.
+   */
+  close(): void;
+}

packages/mdc-progress-indicator/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@material/progress-indicator",
+  "description": "The Material Components for the web interface for Progress Indicators",
+  "version": "4.0.0",
+  "license": "MIT",
+  "main": "dist/mdc.progressIndicator.js",
+  "module": "index.js",
+  "sideEffects": false,
+  "types": "dist/mdc.progressIndicator.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/material-components/material-components-web.git",
+    "directory": "packages/mdc-progress-indicator"
+  },
+  "dependencies": {
+    "tslib": "^1.9.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

scripts/check-pkg-for-release.js

@@ -66,26 +66,33 @@ const MASTER_PACKAGE_JSON = require(path.resolve(MASTER_PACKAGE_JSON_RELATIVE_PA
 // These few MDC packages work as foundation or utility packages, and are not
 // directly included in webpack or the material-component-web module. But they
 // are necessary since other MDC packages depend on them.
-const CSS_WHITELIST = [
+const CSS_EXCLUDES = new Set([
   'base',
   'animation',
   'auto-init',
   'density',
   'dom',
   'feature-targeting',
+  'progress-indicator',
   'rtl',
   'shape',
   'touch-target',
-];
+]);
 
-const NOT_AUTOINIT = [
+const JS_EXCLUDES = new Set([
+  'animation',
+  'progress-indicator',
+]);
+
+const NOT_AUTOINIT = new Set([
   'auto-init',
   'base',
   'dom',
+  'progress-indicator',
   'tab', // Only makes sense in context of tab-bar
   'tab-indicator', // Only makes sense in context of tab-bar
   'tab-scroller', // Only makes sense in context of tab-bar
-];
+]);
 
 main();
 
@@ -126,6 +133,11 @@ function checkDependencyAddedInWebpackConfig() {
 }
 
 function checkJSDependencyAddedInWebpackConfig() {
+  const name = getPkgName();
+  if (JS_EXCLUDES.has(name)) {
+    return;
+  }
+
   const jsconfig = WEBPACK_CONFIG.find((value) => {
     return value.name === 'main-js-a-la-carte';
   });
@@ -138,16 +150,18 @@ function checkJSDependencyAddedInWebpackConfig() {
 
 function checkCSSDependencyAddedInWebpackConfig() {
   const name = getPkgName();
-  if (CSS_WHITELIST.indexOf(name) === -1) {
-    const cssconfig = WEBPACK_CONFIG.find((value) => {
-      return value.name === 'main-css-a-la-carte';
-    });
-    const nameMDC = CLI_PACKAGE_JSON.name.replace('@material/', 'mdc.');
-    assert.notEqual(typeof cssconfig.entry[nameMDC], 'undefined',
-      'FAILURE: Component ' + CLI_PACKAGE_JSON.name + ' css dependency not added to webpack ' +
-      'configuration. Please add ' + name + ' to ' + WEBPACK_CONFIG_RELATIVE_PATH + '\'s css ' +
-      'entry before commit.');
+  if (CSS_EXCLUDES.has(name)) {
+    return;
   }
+
+  const cssconfig = WEBPACK_CONFIG.find((value) => {
+    return value.name === 'main-css-a-la-carte';
+  });
+  const nameMDC = CLI_PACKAGE_JSON.name.replace('@material/', 'mdc.');
+  assert.notEqual(typeof cssconfig.entry[nameMDC], 'undefined',
+    'FAILURE: Component ' + CLI_PACKAGE_JSON.name + ' css dependency not added to webpack ' +
+    'configuration. Please add ' + name + ' to ' + WEBPACK_CONFIG_RELATIVE_PATH + '\'s css ' +
+    'entry before commit.');
 }
 
 function checkDependencyAddedInMDCPackage() {
@@ -162,6 +176,11 @@ function checkDependencyAddedInMDCPackage() {
 }
 
 function checkPkgDependencyAddedInMDCPackage() {
+  const name = getPkgName();
+  if (CSS_EXCLUDES.has(name) && JS_EXCLUDES.has(name)) {
+    return;
+  }
+
   assert.notEqual(typeof MASTER_PACKAGE_JSON.dependencies[CLI_PACKAGE_JSON.name], 'undefined',
     'FAILURE: Component ' + CLI_PACKAGE_JSON.name + ' is not a dependency for MDC Web. ' +
     'Please add ' + CLI_PACKAGE_JSON.name +' to ' + MASTER_PACKAGE_JSON_RELATIVE_PATH +
@@ -171,42 +190,44 @@ function checkPkgDependencyAddedInMDCPackage() {
 function checkCSSDependencyAddedInMDCPackage() {
   const name = getPkgName();
   const nameMDC = `mdc-${name}`;
-  if (CSS_WHITELIST.indexOf(name) === -1) {
-    const src = fs.readFileSync(path.join(process.env.PWD, MASTER_CSS_RELATIVE_PATH), 'utf8');
-    const cssRules = cssom.parse(src).cssRules;
-    const cssRule = path.join(CLI_PACKAGE_JSON.name, nameMDC);
-
-    assert.notEqual(typeof cssRules.find((value) => {
-      return value.href === cssRule;
-    }), 'undefined',
-    'FAILURE: Component ' + CLI_PACKAGE_JSON.name + ' is not being imported in MDC Web. ' +
-    'Please add ' + name + ' to ' + MASTER_CSS_RELATIVE_PATH + ' import rule before commit.');
+  if (CSS_EXCLUDES.has(name)) {
+    return;
   }
+
+  const src = fs.readFileSync(path.join(process.env.PWD, MASTER_CSS_RELATIVE_PATH), 'utf8');
+  const cssRules = cssom.parse(src).cssRules;
+  const cssRule = path.join(CLI_PACKAGE_JSON.name, nameMDC);
+
+  assert.notEqual(typeof cssRules.find((value) => {
+    return value.href === cssRule;
+  }), 'undefined',
+  'FAILURE: Component ' + CLI_PACKAGE_JSON.name + ' is not being imported in MDC Web. ' +
+  'Please add ' + name + ' to ' + MASTER_CSS_RELATIVE_PATH + ' import rule before commit.');
 }
 
 function checkJSDependencyAddedInMDCPackage() {
-  const NOT_IMPORTED = ['animation'];
   const name = getPkgName();
-  if (typeof (CLI_PACKAGE_JSON.main) !== 'undefined' &&
-      NOT_IMPORTED.indexOf(name) === -1) {
-    const nameCamel = camelCase(CLI_PACKAGE_JSON.name.replace('@material/', ''));
-    const src = fs.readFileSync(path.join(process.env.PWD, MASTER_TS_RELATIVE_PATH), 'utf8');
-    const ast = recast.parse(src, {
-      parser: {
-        parse: (code) => parser.parse(code, {sourceType: 'module'}),
-      },
-    });
-    assert(checkComponentImportedAddedInMDCPackage(ast), 'FAILURE: Component ' +
-      CLI_PACKAGE_JSON.name + ' is not being imported in MDC Web. ' + 'Please add ' + nameCamel +
-      ' to '+ MASTER_TS_RELATIVE_PATH + ' import rule before commit.');
-    assert(checkComponentExportedAddedInMDCPackage(ast), 'FAILURE: Component ' +
-      CLI_PACKAGE_JSON.name + ' is not being exported in MDC Web. ' + 'Please add ' + nameCamel +
-      ' to '+ MASTER_TS_RELATIVE_PATH + ' export before commit.');
-    if (NOT_AUTOINIT.indexOf(name) === -1) {
-      assert(checkAutoInitAddedInMDCPackage(ast) > 0, 'FAILURE: Component ' +
-        CLI_PACKAGE_JSON.name + ' seems not being auto inited in MDC Web. ' + 'Please add ' +
-        nameCamel + ' to '+ MASTER_TS_RELATIVE_PATH + ' autoInit statement before commit.');
-    }
+  if (typeof (CLI_PACKAGE_JSON.main) === 'undefined' || JS_EXCLUDES.has(name)) {
+    return;
+  }
+
+  const nameCamel = camelCase(CLI_PACKAGE_JSON.name.replace('@material/', ''));
+  const src = fs.readFileSync(path.join(process.env.PWD, MASTER_TS_RELATIVE_PATH), 'utf8');
+  const ast = recast.parse(src, {
+    parser: {
+      parse: (code) => parser.parse(code, {sourceType: 'module'}),
+    },
+  });
+  assert(checkComponentImportedAddedInMDCPackage(ast), 'FAILURE: Component ' +
+    CLI_PACKAGE_JSON.name + ' is not being imported in MDC Web. ' + 'Please add ' + nameCamel +
+    ' to '+ MASTER_TS_RELATIVE_PATH + ' import rule before commit.');
+  assert(checkComponentExportedAddedInMDCPackage(ast), 'FAILURE: Component ' +
+    CLI_PACKAGE_JSON.name + ' is not being exported in MDC Web. ' + 'Please add ' + nameCamel +
+    ' to '+ MASTER_TS_RELATIVE_PATH + ' export before commit.');
+  if (!NOT_AUTOINIT.has(name)) {
+    assert(checkAutoInitAddedInMDCPackage(ast) > 0, 'FAILURE: Component ' +
+      CLI_PACKAGE_JSON.name + ' seems not being auto inited in MDC Web. ' + 'Please add ' +
+      nameCamel + ' to '+ MASTER_TS_RELATIVE_PATH + ' autoInit statement before commit.');
   }
 }