diff --git a/catalog/src/ssr.ts b/catalog/src/ssr.ts index 35e64cca9..4440ff498 100644 --- a/catalog/src/ssr.ts +++ b/catalog/src/ssr.ts @@ -15,7 +15,7 @@ import '@material/web/menu/menu.js'; import '@material/web/checkbox/checkbox.js'; import '@material/web/list/list.js'; import '@material/web/list/list-item-link.js'; -import '@material/web/circularprogress/circular-progress.js'; +import '@material/web/progress/circular-progress.js'; import '@material/web/tabs/tabs.js'; import '@material/web/tabs/tab.js'; import '@material/web/iconbutton/standard-icon-button.js'; @@ -27,4 +27,4 @@ import '@material/web/button/filled-button.js'; import '@material/web/button/tonal-button.js'; import '@material/web/button/outlined-button.js'; import '@material/web/button/text-button.js'; -import '@material/web/linearprogress/linear-progress.js'; +import '@material/web/progress/linear-progress.js'; diff --git a/circularprogress/circular-progress.ts b/circularprogress/circular-progress.ts index d31bd6067..a34892068 100644 --- a/circularprogress/circular-progress.ts +++ b/circularprogress/circular-progress.ts @@ -4,28 +4,9 @@ * SPDX-License-Identifier: Apache-2.0 */ -import {customElement} from 'lit/decorators.js'; - -import {CircularProgress} from './lib/circular-progress.js'; -import {styles} from './lib/circular-progress-styles.css.js'; - -declare global { - interface HTMLElementTagNameMap { - 'md-circular-progress': MdCircularProgress; - } -} - /** - * @summary Circular progress indicators display progress by animating along an - * invisible circular track in a clockwise direction. They can be applied - * directly to a surface, such as a button or card. - * - * @description - * Progress indicators inform users about the status of ongoing processes. - * - Determinate indicators display how long a process will take. - * - Indeterminate indicators express an unspecified amount of wait time. + * TODO(b/291100596): Stub left behind for migration. Prefer + * `import @material/web/progress/circular-progress.js` */ -@customElement('md-circular-progress') -export class MdCircularProgress extends CircularProgress { - static override styles = [styles]; -} + +export * from '@material/web/progress/circular-progress.js'; \ No newline at end of file diff --git a/circularprogress/demo/demo.ts b/circularprogress/demo/demo.ts deleted file mode 100644 index e2fced379..000000000 --- a/circularprogress/demo/demo.ts +++ /dev/null @@ -1,42 +0,0 @@ -/** - * @license - * Copyright 2023 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import './index.js'; -import './material-collection.js'; - -import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js'; -import {boolInput, Knob, numberInput} from './index.js'; - -import {stories, StoryKnobs} from './stories.js'; - -function cssWire(prop: string, unit = '') { - return (knob: Knob) => { - const value = - knob.latestValue === undefined ? knob.defaultValue : knob.latestValue; - document.body.style.setProperty(prop, `${value}${unit}`); - }; -} - -const collection = new MaterialCollection>( - 'Progress indicators (circular)', [ - new Knob('progress', {ui: numberInput({step: 0.1}), defaultValue: 0.5}), - new Knob('indeterminate', {ui: boolInput(), defaultValue: false}), - new Knob('fourColor', {ui: boolInput(), defaultValue: false}), - new Knob('size', { - ui: numberInput(), - defaultValue: 48, - wiring: cssWire('--md-circular-progress-size', 'px') - }), - new Knob('trackWidth', { - ui: numberInput(), - defaultValue: 8.33, - wiring: cssWire('--md-circular-progress-active-indicator-width') - }), - ]); - -collection.addStories(...materialInitsToStoryInits(stories)); - -setUpDemo(collection, {icons: 'material-symbols'}); diff --git a/circularprogress/harness.ts b/circularprogress/harness.ts deleted file mode 100644 index 0ab12b805..000000000 --- a/circularprogress/harness.ts +++ /dev/null @@ -1,19 +0,0 @@ -/** - * @license - * Copyright 2023 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {Harness} from '../testing/harness.js'; - -import {CircularProgress} from './lib/circular-progress.js'; - -/** - * Test harness for circular-progress. - */ -export class CircularProgressHarness extends Harness { - override async getInteractiveElement() { - await this.element.updateComplete; - return this.element.querySelector('.circularProgresss')!; - } -} diff --git a/linearprogress/demo/project.json b/linearprogress/demo/project.json deleted file mode 100644 index b9053089a..000000000 --- a/linearprogress/demo/project.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "/material-web/assets/stories/base.json", - "files": { - "demo.ts": { - "hidden": true - }, - "stories.ts": {} - } -} diff --git a/linearprogress/demo/stories.ts b/linearprogress/demo/stories.ts deleted file mode 100644 index 114d51fb7..000000000 --- a/linearprogress/demo/stories.ts +++ /dev/null @@ -1,57 +0,0 @@ -/** - * @license - * Copyright 2023 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - - -import '@material/web/linearprogress/linear-progress.js'; - -import {MaterialStoryInit} from './material-collection.js'; -import {css, html} from 'lit'; -import {classMap} from 'lit/directives/class-map.js'; - -/** Knob types for linear progress stories. */ -export interface StoryKnobs { - progress: number; - buffer: number; - indeterminate: boolean; - fourColor: boolean; - 'track color': string; - 'track height': number; - 'indicator height': number; - 'custom theme': boolean; -} - -const standard: MaterialStoryInit = { - name: 'Linear progress', - styles: css` - md-linear-progress { - inline-size: 50vw; - } - - .custom { - --md-linear-progress-active-indicator-color: linear-gradient(steelblue, lightblue); - --md-linear-progress-track-color: gainsboro; - --md-linear-progress-active-indicator-height: 20px; - --md-linear-progress-track-height: 20px; - --md-linear-progress-track-shape: 9999px; - } - `, - render(knobs) { - const {progress, buffer, indeterminate, fourColor} = knobs; - const classes = {'custom': knobs['custom theme']}; - - return html` - `; - } -}; - -/** Linear Progress stories. */ -export const stories = [standard]; diff --git a/linearprogress/linear-progress.ts b/linearprogress/linear-progress.ts index 9b408af8d..294c88a64 100644 --- a/linearprogress/linear-progress.ts +++ b/linearprogress/linear-progress.ts @@ -4,27 +4,9 @@ * SPDX-License-Identifier: Apache-2.0 */ -import {customElement} from 'lit/decorators.js'; - -import {LinearProgress} from './lib/linear-progress.js'; -import {styles} from './lib/linear-progress-styles.css.js'; - -declare global { - interface HTMLElementTagNameMap { - 'md-linear-progress': MdLinearProgress; - } -} - /** - * @summary Linear progress indicators display progress by animating along the - * length of a fixed, visible track. - * - * @description - * Progress indicators inform users about the status of ongoing processes. - * - Determinate indicators display how long a process will take. - * - Indeterminate indicators express an unspecified amount of wait time. + * TODO(b/291100596): Stub left behind for migration. Prefer + * `import @material/web/progress/linear-progress.js` */ -@customElement('md-linear-progress') -export class MdLinearProgress extends LinearProgress { - static override styles = [styles]; -} + +export * from '@material/web/progress/linear-progress.js'; \ No newline at end of file diff --git a/circularprogress/_circular-progress.scss b/progress/_circular-progress.scss similarity index 100% rename from circularprogress/_circular-progress.scss rename to progress/_circular-progress.scss diff --git a/linearprogress/_linear-progress.scss b/progress/_linear-progress.scss similarity index 100% rename from linearprogress/_linear-progress.scss rename to progress/_linear-progress.scss diff --git a/progress/circular-progress.ts b/progress/circular-progress.ts new file mode 100644 index 000000000..d31bd6067 --- /dev/null +++ b/progress/circular-progress.ts @@ -0,0 +1,31 @@ +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +import {customElement} from 'lit/decorators.js'; + +import {CircularProgress} from './lib/circular-progress.js'; +import {styles} from './lib/circular-progress-styles.css.js'; + +declare global { + interface HTMLElementTagNameMap { + 'md-circular-progress': MdCircularProgress; + } +} + +/** + * @summary Circular progress indicators display progress by animating along an + * invisible circular track in a clockwise direction. They can be applied + * directly to a surface, such as a button or card. + * + * @description + * Progress indicators inform users about the status of ongoing processes. + * - Determinate indicators display how long a process will take. + * - Indeterminate indicators express an unspecified amount of wait time. + */ +@customElement('md-circular-progress') +export class MdCircularProgress extends CircularProgress { + static override styles = [styles]; +} diff --git a/circularprogress/circular-progress_test.ts b/progress/circular-progress_test.ts similarity index 100% rename from circularprogress/circular-progress_test.ts rename to progress/circular-progress_test.ts diff --git a/linearprogress/demo/demo.ts b/progress/demo/demo.ts similarity index 68% rename from linearprogress/demo/demo.ts rename to progress/demo/demo.ts index ab5c16cbb..58833a200 100644 --- a/linearprogress/demo/demo.ts +++ b/progress/demo/demo.ts @@ -21,28 +21,39 @@ function cssWire(prop: string, unit = '') { } const collection = new MaterialCollection>( - 'Progress indicators (linear)', [ + 'Progress indicators', [ new Knob('progress', {ui: numberInput({step: 0.1}), defaultValue: 0.5}), - new Knob('buffer', {ui: numberInput({step: 0.1}), defaultValue: 0.8}), new Knob('indeterminate', {ui: boolInput(), defaultValue: false}), new Knob('fourColor', {ui: boolInput(), defaultValue: false}), - new Knob('track color', { + new Knob( + 'buffer (linear)', {ui: numberInput({step: 0.1}), defaultValue: 0.8}), + new Knob('track color (linear)', { ui: colorPicker(), defaultValue: '', wiring: cssWire('--md-linear-progress-track-color') }), - new Knob('track height', { + new Knob('track height (linear)', { ui: numberInput(), defaultValue: 4, wiring: cssWire('--md-linear-progress-track-height', 'px') }), - new Knob('indicator height', { + new Knob('indicator height (linear)', { ui: numberInput(), defaultValue: 4, wiring: cssWire( '--md-linear-progress-active-indicator-height', 'px') }), - new Knob('custom theme', {ui: boolInput()}), + new Knob('custom theme (linear)', {ui: boolInput()}), + new Knob('size (circular)', { + ui: numberInput(), + defaultValue: 48, + wiring: cssWire('--md-circular-progress-size', 'px') + }), + new Knob('trackWidth (circular)', { + ui: numberInput(), + defaultValue: 8.33, + wiring: cssWire('--md-circular-progress-active-indicator-width') + }), ]); collection.addStories(...materialInitsToStoryInits(stories)); diff --git a/circularprogress/demo/project.json b/progress/demo/project.json similarity index 100% rename from circularprogress/demo/project.json rename to progress/demo/project.json diff --git a/circularprogress/demo/stories.ts b/progress/demo/stories.ts similarity index 65% rename from circularprogress/demo/stories.ts rename to progress/demo/stories.ts index 3baf04fea..88813f5dc 100644 --- a/circularprogress/demo/stories.ts +++ b/progress/demo/stories.ts @@ -4,27 +4,66 @@ * SPDX-License-Identifier: Apache-2.0 */ + +import '@material/web/progress/linear-progress.js'; import '@material/web/button/tonal-button.js'; import '@material/web/icon/icon.js'; import '@material/web/iconbutton/standard-icon-button.js'; -import '@material/web/circularprogress/circular-progress.js'; +import '@material/web/progress/circular-progress.js'; import {MdTonalButton} from '@material/web/button/tonal-button.js'; -import {MdCircularProgress} from '@material/web/circularprogress/circular-progress.js'; import {MaterialStoryInit} from './material-collection.js'; +import {MdCircularProgress} from '@material/web/progress/circular-progress.js'; import {css, html} from 'lit'; +import {classMap} from 'lit/directives/class-map.js'; - -/** Knob types for circular-progress stories. */ +/** Knob types for linear progress stories. */ export interface StoryKnobs { progress: number; + 'buffer (linear)': number; indeterminate: boolean; fourColor: boolean; - size: number; - trackWidth: number; + 'track color (linear)': string; + 'track height (linear)': number; + 'indicator height (linear)': number; + 'custom theme (linear)': boolean; + 'size (circular)': number; + 'trackWidth (circular)': number; } const standard: MaterialStoryInit = { + name: 'Linear progress', + styles: css` + md-linear-progress { + inline-size: 50vw; + } + + .custom { + --md-linear-progress-active-indicator-color: linear-gradient(steelblue, lightblue); + --md-linear-progress-track-color: gainsboro; + --md-linear-progress-active-indicator-height: 20px; + --md-linear-progress-track-height: 20px; + --md-linear-progress-track-shape: 9999px; + } + `, + render(knobs) { + const {progress, indeterminate, fourColor} = knobs; + const buffer = knobs['buffer (linear)']; + const classes = {'custom': knobs['custom theme (linear)']}; + + return html` + `; + } +}; + + +const standardCircular: MaterialStoryInit = { name: 'Circular progress', render({progress, indeterminate, fourColor}) { return html` @@ -100,5 +139,5 @@ const insideButton: MaterialStoryInit = { } }; -/** Circular Progress stories. */ -export const stories = [standard, iconButton, insideButton]; +/** Linear Progress stories. */ +export const stories = [standard, standardCircular, iconButton, insideButton]; diff --git a/linearprogress/harness.ts b/progress/harness.ts similarity index 60% rename from linearprogress/harness.ts rename to progress/harness.ts index edc701272..6fbd381c2 100644 --- a/linearprogress/harness.ts +++ b/progress/harness.ts @@ -6,6 +6,7 @@ import {Harness} from '../testing/harness.js'; +import {CircularProgress} from './lib/circular-progress.js'; import {LinearProgress} from './lib/linear-progress.js'; /** @@ -19,3 +20,13 @@ export class LinearProgressHarness extends Harness { return this.element['rootEl']; } } + +/** + * Test harness for circular-progress. + */ +export class CircularProgressHarness extends Harness { + override async getInteractiveElement() { + await this.element.updateComplete; + return this.element.querySelector('.circularProgresss')!; + } +} diff --git a/circularprogress/lib/_circular-progress.scss b/progress/lib/_circular-progress.scss similarity index 100% rename from circularprogress/lib/_circular-progress.scss rename to progress/lib/_circular-progress.scss diff --git a/linearprogress/lib/_linear-progress.scss b/progress/lib/_linear-progress.scss similarity index 100% rename from linearprogress/lib/_linear-progress.scss rename to progress/lib/_linear-progress.scss diff --git a/circularprogress/lib/circular-progress-styles.scss b/progress/lib/circular-progress-styles.scss similarity index 100% rename from circularprogress/lib/circular-progress-styles.scss rename to progress/lib/circular-progress-styles.scss diff --git a/circularprogress/lib/circular-progress.ts b/progress/lib/circular-progress.ts similarity index 100% rename from circularprogress/lib/circular-progress.ts rename to progress/lib/circular-progress.ts diff --git a/linearprogress/lib/linear-progress-styles.scss b/progress/lib/linear-progress-styles.scss similarity index 100% rename from linearprogress/lib/linear-progress-styles.scss rename to progress/lib/linear-progress-styles.scss diff --git a/linearprogress/lib/linear-progress.ts b/progress/lib/linear-progress.ts similarity index 100% rename from linearprogress/lib/linear-progress.ts rename to progress/lib/linear-progress.ts diff --git a/progress/linear-progress.ts b/progress/linear-progress.ts new file mode 100644 index 000000000..9b408af8d --- /dev/null +++ b/progress/linear-progress.ts @@ -0,0 +1,30 @@ +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +import {customElement} from 'lit/decorators.js'; + +import {LinearProgress} from './lib/linear-progress.js'; +import {styles} from './lib/linear-progress-styles.css.js'; + +declare global { + interface HTMLElementTagNameMap { + 'md-linear-progress': MdLinearProgress; + } +} + +/** + * @summary Linear progress indicators display progress by animating along the + * length of a fixed, visible track. + * + * @description + * Progress indicators inform users about the status of ongoing processes. + * - Determinate indicators display how long a process will take. + * - Indeterminate indicators express an unspecified amount of wait time. + */ +@customElement('md-linear-progress') +export class MdLinearProgress extends LinearProgress { + static override styles = [styles]; +} diff --git a/linearprogress/linear-progress_test.ts b/progress/linear-progress_test.ts similarity index 100% rename from linearprogress/linear-progress_test.ts rename to progress/linear-progress_test.ts