From ac602025ded6ab14298251ccd23ab5248223dcd7 Mon Sep 17 00:00:00 2001 From: Material Web Team Date: Tue, 4 Feb 2020 14:22:08 -0800 Subject: [PATCH 1/2] Project import generated by Copybara. PiperOrigin-RevId: 293228410 --- packages/mdc-linear-progress/component.ts | 4 +- packages/mdc-linear-progress/foundation.ts | 5 ++- packages/mdc-linear-progress/package.json | 1 + packages/mdc-progress-indicator/README.md | 42 +++++++++++++++++++ packages/mdc-progress-indicator/component.ts | 29 +++++++++++++ packages/mdc-progress-indicator/foundation.ts | 29 +++++++++++++ packages/mdc-progress-indicator/index.ts | 25 +++++++++++ packages/mdc-progress-indicator/package.json | 21 ++++++++++ 8 files changed, 154 insertions(+), 2 deletions(-) create mode 100644 packages/mdc-progress-indicator/README.md create mode 100644 packages/mdc-progress-indicator/component.ts create mode 100644 packages/mdc-progress-indicator/foundation.ts create mode 100644 packages/mdc-progress-indicator/index.ts create mode 100644 packages/mdc-progress-indicator/package.json diff --git a/packages/mdc-linear-progress/component.ts b/packages/mdc-linear-progress/component.ts index 2122bc9dde4..3900bb9d716 100644 --- a/packages/mdc-linear-progress/component.ts +++ b/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 { +export class MDCLinearProgress extends + MDCComponent implements MDCProgressIndicator { static attachTo(root: Element) { return new MDCLinearProgress(root); } diff --git a/packages/mdc-linear-progress/foundation.ts b/packages/mdc-linear-progress/foundation.ts index 71de2003f46..90640e57e89 100644 --- a/packages/mdc-linear-progress/foundation.ts +++ b/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 { +export class MDCLinearProgressFoundation extends + MDCFoundation implements + MDCProgressIndicatorFoundation { static get cssClasses() { return cssClasses; } diff --git a/packages/mdc-linear-progress/package.json b/packages/mdc-linear-progress/package.json index 2b28499c74c..9d711aca047 100644 --- a/packages/mdc-linear-progress/package.json +++ b/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" }, diff --git a/packages/mdc-progress-indicator/README.md b/packages/mdc-progress-indicator/README.md new file mode 100644 index 00000000000..c45242717e9 --- /dev/null +++ b/packages/mdc-progress-indicator/README.md @@ -0,0 +1,42 @@ + + +# 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. | diff --git a/packages/mdc-progress-indicator/component.ts b/packages/mdc-progress-indicator/component.ts new file mode 100644 index 00000000000..a9492c78470 --- /dev/null +++ b/packages/mdc-progress-indicator/component.ts @@ -0,0 +1,29 @@ +/** + * @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. + */ + +export interface MDCProgressIndicator { + determinate: boolean; + progress: number; + open(): void; + close(): void; +} diff --git a/packages/mdc-progress-indicator/foundation.ts b/packages/mdc-progress-indicator/foundation.ts new file mode 100644 index 00000000000..03bb5221e0c --- /dev/null +++ b/packages/mdc-progress-indicator/foundation.ts @@ -0,0 +1,29 @@ +/** + * @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. + */ + +export interface MDCProgressIndicatorFoundation { + setDeterminate(isDeterminate: boolean): void; + setProgress(value: number): void; + open(): void; + close(): void; +} diff --git a/packages/mdc-progress-indicator/index.ts b/packages/mdc-progress-indicator/index.ts new file mode 100644 index 00000000000..145e809fdc6 --- /dev/null +++ b/packages/mdc-progress-indicator/index.ts @@ -0,0 +1,25 @@ +/** + * @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. + */ + +export * from './component'; +export * from './foundation'; diff --git a/packages/mdc-progress-indicator/package.json b/packages/mdc-progress-indicator/package.json new file mode 100644 index 00000000000..dd4b9baaaf8 --- /dev/null +++ b/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" + } +} From 03180bdb7e42e6079f96a9d7588acf377d6052e7 Mon Sep 17 00:00:00 2001 From: Allan Chen Date: Wed, 5 Feb 2020 09:54:10 -0800 Subject: [PATCH 2/2] misc --- .../mdc-progress-indicator/package-lock.json | 13 ++++++ scripts/check-pkg-for-release.js | 40 ++++++++++++------- 2 files changed, 39 insertions(+), 14 deletions(-) create mode 100644 packages/mdc-progress-indicator/package-lock.json diff --git a/packages/mdc-progress-indicator/package-lock.json b/packages/mdc-progress-indicator/package-lock.json new file mode 100644 index 00000000000..24730be65d1 --- /dev/null +++ b/packages/mdc-progress-indicator/package-lock.json @@ -0,0 +1,13 @@ +{ + "name": "@material/progress-indicator", + "version": "4.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "tslib": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz", + "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==" + } + } +} diff --git a/scripts/check-pkg-for-release.js b/scripts/check-pkg-for-release.js index 5195aeaaec9..621c2cb15cb 100644 --- a/scripts/check-pkg-for-release.js +++ b/scripts/check-pkg-for-release.js @@ -73,15 +73,22 @@ const CSS_WHITELIST = [ 'density', 'dom', 'feature-targeting', + 'progress-indicator', 'rtl', 'shape', 'touch-target', ]; +const JS_WHITELIST = [ + 'animation', + 'progress-indicator', +]; + const NOT_AUTOINIT = [ '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 @@ -126,14 +133,17 @@ function checkDependencyAddedInWebpackConfig() { } function checkJSDependencyAddedInWebpackConfig() { - const jsconfig = WEBPACK_CONFIG.find((value) => { - return value.name === 'main-js-a-la-carte'; - }); - const nameCamel = camelCase(CLI_PACKAGE_JSON.name.replace('@material/', '')); - assert.notEqual(typeof jsconfig.entry[nameCamel], 'undefined', - 'FAILURE: Component ' + CLI_PACKAGE_JSON.name + ' javascript dependency is not added to webpack ' + - 'configuration. Please add ' + nameCamel + ' to ' + WEBPACK_CONFIG_RELATIVE_PATH + '\'s js-components ' + - 'entry before commit.'); + const name = getPkgName(); + if (JS_WHITELIST.indexOf(name) === -1) { + const jsconfig = WEBPACK_CONFIG.find((value) => { + return value.name === 'main-js-a-la-carte'; + }); + const nameCamel = camelCase(CLI_PACKAGE_JSON.name.replace('@material/', '')); + assert.notEqual(typeof jsconfig.entry[nameCamel], 'undefined', + 'FAILURE: Component ' + CLI_PACKAGE_JSON.name + ' javascript dependency is not added to webpack ' + + 'configuration. Please add ' + nameCamel + ' to ' + WEBPACK_CONFIG_RELATIVE_PATH + '\'s js-components ' + + 'entry before commit.'); + } } function checkCSSDependencyAddedInWebpackConfig() { @@ -162,10 +172,13 @@ function checkDependencyAddedInMDCPackage() { } function checkPkgDependencyAddedInMDCPackage() { - 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 + - '\' dependencies before commit.'); + const name = getPkgName(); + if (!CSS_WHITELIST.filter((x) => JS_WHITELIST.includes(x)).includes(name)) { + 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 + + '\' dependencies before commit.'); + } } function checkCSSDependencyAddedInMDCPackage() { @@ -185,10 +198,9 @@ function checkCSSDependencyAddedInMDCPackage() { } function checkJSDependencyAddedInMDCPackage() { - const NOT_IMPORTED = ['animation']; const name = getPkgName(); if (typeof (CLI_PACKAGE_JSON.main) !== 'undefined' && - NOT_IMPORTED.indexOf(name) === -1) { + JS_WHITELIST.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, {