From 42a6951cf92c2d1c73197ee94ef517644ae70c6a Mon Sep 17 00:00:00 2001 From: Najika Yoo Date: Fri, 13 Nov 2020 12:49:44 -0800 Subject: [PATCH] feat(meter): add meter pattern --- package.json | 2 +- packages/bundle/elements.ts | 1 + packages/bundle/package.json | 1 + packages/bundle/src/index.ts | 1 + packages/bundle/tsconfig.json | 1 + packages/meter/README.md | 52 ++++ packages/meter/package.json | 56 ++++ packages/meter/sp-meter.ts | 21 ++ packages/meter/src/Meter.ts | 91 ++++++ packages/meter/src/index.ts | 13 + packages/meter/src/meter.css | 21 ++ packages/meter/src/spectrum-config.js | 78 +++++ packages/meter/src/spectrum-meter.css | 297 ++++++++++++++++++++ packages/meter/stories/meter.stories.ts | 72 +++++ packages/meter/test/benchmark/basic-test.ts | 19 ++ packages/meter/test/meter.test.ts | 56 ++++ packages/meter/tsconfig.json | 10 + test/visual/stories.js | 7 + 18 files changed, 798 insertions(+), 1 deletion(-) create mode 100644 packages/meter/README.md create mode 100644 packages/meter/package.json create mode 100644 packages/meter/sp-meter.ts create mode 100644 packages/meter/src/Meter.ts create mode 100644 packages/meter/src/index.ts create mode 100644 packages/meter/src/meter.css create mode 100644 packages/meter/src/spectrum-config.js create mode 100644 packages/meter/src/spectrum-meter.css create mode 100644 packages/meter/stories/meter.stories.ts create mode 100644 packages/meter/test/benchmark/basic-test.ts create mode 100644 packages/meter/test/meter.test.ts create mode 100644 packages/meter/tsconfig.json diff --git a/package.json b/package.json index a97500661d..3458bb604d 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "test:build": "tsc --build test/tsconfig-test.json", "test:ci": "yarn test:build && yarn test:start", "test:start": "web-test-runner", - "test:watch": "run-p watch 'test:build -w' 'web-test-runner --watch'", + "test:watch": "run-p watch 'test:build -w' 'test:start --watch'", "test:bench": "node test/benchmark/cli.js", "test:visual:clean": "rm test/visual/screenshots-current/**/*.png", "test:visual:baseline:local": "mocha test/visual/screenshots-baseline/local.js --timeout=500000", diff --git a/packages/bundle/elements.ts b/packages/bundle/elements.ts index cefa586c5e..43d81f6ad4 100644 --- a/packages/bundle/elements.ts +++ b/packages/bundle/elements.ts @@ -40,6 +40,7 @@ import '@spectrum-web-components/menu/sp-menu.js'; import '@spectrum-web-components/menu/sp-menu-divider.js'; import '@spectrum-web-components/menu/sp-menu-group.js'; import '@spectrum-web-components/menu/sp-menu-item.js'; +import '@spectrum-web-components/meter/sp-meter.js'; import '@spectrum-web-components/overlay/active-overlay.js'; import '@spectrum-web-components/overlay/overlay-trigger.js'; import '@spectrum-web-components/popover/sp-popover.js'; diff --git a/packages/bundle/package.json b/packages/bundle/package.json index cc476f559f..dc8093943e 100644 --- a/packages/bundle/package.json +++ b/packages/bundle/package.json @@ -73,6 +73,7 @@ "@spectrum-web-components/illustrated-message": "^0.3.3", "@spectrum-web-components/link": "^0.5.6", "@spectrum-web-components/menu": "^0.4.4", + "@spectrum-web-components/meter": "^0.0.1", "@spectrum-web-components/overlay": "^0.6.4", "@spectrum-web-components/popover": "^0.5.4", "@spectrum-web-components/quick-actions": "^0.1.3", diff --git a/packages/bundle/src/index.ts b/packages/bundle/src/index.ts index 52ec4dccb7..3d402d6fd0 100644 --- a/packages/bundle/src/index.ts +++ b/packages/bundle/src/index.ts @@ -36,6 +36,7 @@ export { WorkflowIcons }; export * from '@spectrum-web-components/illustrated-message'; export * from '@spectrum-web-components/link'; export * from '@spectrum-web-components/menu'; +export * from '@spectrum-web-components/meter'; export * from '@spectrum-web-components/overlay'; export * from '@spectrum-web-components/popover'; export * from '@spectrum-web-components/quick-actions'; diff --git a/packages/bundle/tsconfig.json b/packages/bundle/tsconfig.json index c7c219b957..7688866901 100644 --- a/packages/bundle/tsconfig.json +++ b/packages/bundle/tsconfig.json @@ -33,6 +33,7 @@ { "path": "../illustrated-message" }, { "path": "../link" }, { "path": "../menu" }, + { "path": "../meter" }, { "path": "../popover" }, { "path": "../overlay" }, { "path": "../quick-actions" }, diff --git a/packages/meter/README.md b/packages/meter/README.md new file mode 100644 index 0000000000..dd73fc4b2e --- /dev/null +++ b/packages/meter/README.md @@ -0,0 +1,52 @@ +## Description + +An `` is a visual representation of a quantity or achievement. The meter's progress is determined by user actions, rather than system actions. + +### Installation + +[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/meter?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/meter) +[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/meter?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/meter) + +``` +yarn add @spectrum-web-components/meter +``` + +Import the side-effectful registration of `` via: + +``` +import '@spectrum-web-components/meter/sp-meter.js'; +``` + +When looking to leverage the `Meter` base class as a type and/or for extension purposes, do so via: + +``` +import { Meter } from '@spectrum-web-components/meter'; +``` + +## Examples + +### Default + +```html +Tasks Completed +``` + +### Over Background + +When a loader needs to be placed on top of a colored background, use the over background loader as signified by `[over-background]`. This loader uses a white opaque color no matter the background. Make sure the background offers enough contrast for the loader to be legible. + +```html +
+ Tasks Completed +
+``` + +### Side Label + +A meter can be delivered with its labeling displayed above its visual indicator or to either side. Use the boolean `[side-label]` attribute to define where this content should appear. + +```html +Side Label +``` diff --git a/packages/meter/package.json b/packages/meter/package.json new file mode 100644 index 0000000000..c751e30f3b --- /dev/null +++ b/packages/meter/package.json @@ -0,0 +1,56 @@ +{ + "name": "@spectrum-web-components/meter", + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-web-components.git", + "directory": "packages/meter" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-web-components/issues" + }, + "homepage": "https://adobe.github.io/spectrum-web-components/components/meter", + "keywords": [ + "spectrum css", + "web components", + "lit-element", + "lit-html" + ], + "version": "0.0.1", + "description": "", + "main": "src/index.js", + "module": "src/index.js", + "type": "module", + "exports": { + "./src/": "./src/", + "./custom-elements.json": "./custom-elements.json", + "./package.json": "./package.json", + "./sp-meter": "./sp-meter.js", + "./sp-meter.js": "./sp-meter.js" + }, + "files": [ + "custom-elements.json", + "*.d.ts", + "*.js", + "*.js.map", + "/src/" + ], + "sideEffects": [ + "./sp-*.js", + "./sp-*.ts" + ], + "scripts": { + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + }, + "author": "", + "license": "Apache-2.0", + "devDependencies": { + "@spectrum-css/progressbar": "^1.0.0-beta.2" + }, + "dependencies": { + "@spectrum-web-components/base": "^0.1.3", + "tslib": "^2.0.0" + } +} diff --git a/packages/meter/sp-meter.ts b/packages/meter/sp-meter.ts new file mode 100644 index 0000000000..12b776870f --- /dev/null +++ b/packages/meter/sp-meter.ts @@ -0,0 +1,21 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { Meter } from './src/Meter.js'; + +customElements.define('sp-meter', Meter); + +declare global { + interface HTMLElementTagNameMap { + 'sp-meter': Meter; + } +} diff --git a/packages/meter/src/Meter.ts b/packages/meter/src/Meter.ts new file mode 100644 index 0000000000..4f8379724a --- /dev/null +++ b/packages/meter/src/Meter.ts @@ -0,0 +1,91 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { + html, + SpectrumElement, + CSSResultArray, + TemplateResult, + property, + PropertyValues, +} from '@spectrum-web-components/base'; + +import styles from './meter.css.js'; + +/** + * @element sp-meter + */ +export class Meter extends SpectrumElement { + public static get styles(): CSSResultArray { + return [styles]; + } + + @property({ type: Number }) + public progress = 0; + + @property({ type: Boolean, reflect: true, attribute: 'over-background' }) + public overBackground = false; + + @property({ type: Boolean, reflect: true }) + public warning = false; + + @property({ type: Boolean, reflect: true }) + public critical = false; + + @property({ type: Boolean, reflect: true }) + public positive = false; + + @property({ type: Boolean, reflect: true }) + public small = false; + + @property({ type: String, reflect: true }) + public label = ''; + + @property({ type: Boolean, reflect: true, attribute: 'side-label' }) + // called sideLabel + public sideLabel = false; + + protected render(): TemplateResult { + return html` +
+ ${this.label} +
+
${this.progress}%
+
+
+
+ `; + } + + protected firstUpdated(changes: PropertyValues): void { + super.firstUpdated(changes); + this.setAttribute('role', 'progressbar'); + } + + protected updated(changes: PropertyValues): void { + super.updated(changes); + if (changes.has('progress')) { + this.setAttribute('aria-valuenow', '' + this.progress); + } + if (this.label && changes.has('label')) { + this.setAttribute('aria-label', this.label); + } + } +} + +/* +type of change(packages): work done +feat(meter): add meter pattern +*/ diff --git a/packages/meter/src/index.ts b/packages/meter/src/index.ts new file mode 100644 index 0000000000..99640afafc --- /dev/null +++ b/packages/meter/src/index.ts @@ -0,0 +1,13 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +export * from './Meter.js'; diff --git a/packages/meter/src/meter.css b/packages/meter/src/meter.css new file mode 100644 index 0000000000..5c4ff13bba --- /dev/null +++ b/packages/meter/src/meter.css @@ -0,0 +1,21 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +@import './spectrum-meter.css'; + +.fill { + transform-origin: left; +} + +:host([dir='rtl']) .fill { + transform-origin: right; +} diff --git a/packages/meter/src/spectrum-config.js b/packages/meter/src/spectrum-config.js new file mode 100644 index 0000000000..13f3f3f0cd --- /dev/null +++ b/packages/meter/src/spectrum-config.js @@ -0,0 +1,78 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +const config = { + spectrum: 'progressbar', + components: [ + { + name: 'meter', + host: { + selector: '.spectrum-ProgressBar', + }, + classes: [ + { + selector: '.spectrum-ProgressBar-track', + name: 'track', + }, + { + selector: '.spectrum-ProgressBar-fill', + name: 'fill', + }, + { + selector: '.spectrum-ProgressBar-label', + name: 'label', + }, + { + selector: '.spectrum-ProgressBar-percentage', + name: 'percentage', + }, + ], + attributes: [ + { + type: 'boolean', + selector: '.spectrum-ProgressBar--sideLabel', + name: 'side-label', + }, + { + type: 'boolean', + selector: '.spectrum-ProgressBar--small', + }, + { + type: 'boolean', + selector: '.spectrum-ProgressBar--indeterminate', + }, + { + type: 'boolean', + selector: '.spectrum-ProgressBar--overBackground', + name: 'over-background', + }, + { + type: 'boolean', + selector: '.is-positive', + name: 'positive', + }, + { + type: 'boolean', + selector: '.is-warning', + name: 'warning', + }, + { + type: 'boolean', + selector: '.is-critical', + name: 'critical', + }, + ], + }, + ], +}; + +export default config; diff --git a/packages/meter/src/spectrum-meter.css b/packages/meter/src/spectrum-meter.css new file mode 100644 index 0000000000..11d9d5ea94 --- /dev/null +++ b/packages/meter/src/spectrum-meter.css @@ -0,0 +1,297 @@ +/* stylelint-disable */ /* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. + +THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +@keyframes indeterminate-loop-ltr { + 0% { + transform: translate( + calc( + -1 * var(--spectrum-progressbar-large-indeterminate-fill-width, var(--spectrum-global-dimension-size-1700)) + ) + ); + } + to { + transform: translate( + var( + --spectrum-progressbar-large-width, + var(--spectrum-global-dimension-size-2400) + ) + ); + } +} +@keyframes indeterminate-loop-rtl { + 0% { + transform: translate( + var( + --spectrum-progressbar-large-width, + var(--spectrum-global-dimension-size-2400) + ) + ); + } + to { + transform: translate( + calc( + -1 * var(--spectrum-progressbar-large-width, var(--spectrum-global-dimension-size-2400)) + ) + ); + } +} +:host { + /* .spectrum-ProgressBar */ + position: relative; + display: inline-flex; + flex-flow: row wrap; + justify-content: space-between; + align-items: center; + vertical-align: top; +} +:host, +.track { + /* .spectrum-ProgressBar, + * .spectrum-ProgressBar-track */ + width: var( + --spectrum-progressbar-large-width, + var(--spectrum-global-dimension-size-2400) + ); +} +.track { + /* .spectrum-ProgressBar-track */ + overflow: hidden; + border-radius: var(--spectrum-progressbar-large-border-radius); + z-index: 1; /* .spectrum-ProgressBar .spectrum-ProgressBar-track */ + background-color: var( + --spectrum-progressbar-large-track-color, + var(--spectrum-alias-track-color-default) + ); +} +.fill, +.track { + /* .spectrum-ProgressBar-fill, + * .spectrum-ProgressBar-track */ + height: var( + --spectrum-progressbar-large-height, + var(--spectrum-global-dimension-size-75) + ); +} +.fill { + /* .spectrum-ProgressBar-fill */ + border: none; + transition: width 1s; /* .spectrum-ProgressBar .spectrum-ProgressBar-fill */ + background: var( + --spectrum-progressbar-large-track-fill-color, + var(--spectrum-global-color-blue-500) + ); +} +:host([dir='ltr']) .label, +:host([dir='ltr']) .percentage { + /* [dir=ltr] .spectrum-ProgressBar-label, + * [dir=ltr] .spectrum-ProgressBar-percentage */ + text-align: left; +} +:host([dir='rtl']) .label, +:host([dir='rtl']) .percentage { + /* [dir=rtl] .spectrum-ProgressBar-label, + * [dir=rtl] .spectrum-ProgressBar-percentage */ + text-align: right; +} +.label, +.percentage { + /* .spectrum-ProgressBar-label, + * .spectrum-ProgressBar-percentage */ + font-size: var( + --spectrum-fieldlabel-text-size, + var(--spectrum-global-dimension-font-size-75) + ); + font-weight: var( + --spectrum-fieldlabel-text-font-weight, + var(--spectrum-global-font-weight-regular) + ); + line-height: var( + --spectrum-fieldlabel-text-line-height, + var(--spectrum-global-font-line-height-small) + ); + margin-bottom: var( + --spectrum-progressbar-large-label-gap-y, + var(--spectrum-global-dimension-size-115) + ); +} +.label { + /* .spectrum-ProgressBar-label */ + flex: 1 1 0%; +} +:host([dir='ltr']) .percentage { + /* [dir=ltr] .spectrum-ProgressBar-percentage */ + margin-left: var( + --spectrum-progressbar-small-label-gap-x, + var(--spectrum-global-dimension-size-150) + ); +} +:host([dir='rtl']) .percentage { + /* [dir=rtl] .spectrum-ProgressBar-percentage */ + margin-right: var( + --spectrum-progressbar-small-label-gap-x, + var(--spectrum-global-dimension-size-150) + ); +} +.percentage { + /* .spectrum-ProgressBar-percentage */ + align-self: flex-start; +} +:host([side-label]) { + /* .spectrum-ProgressBar--sideLabel */ + display: inline-flex; + flex-flow: row; + justify-content: space-between; + width: auto; +} +:host([dir='ltr'][side-label]) .label { + /* [dir=ltr] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label */ + margin-right: var( + --spectrum-progressbar-large-label-gap-x, + var(--spectrum-global-dimension-size-150) + ); +} +:host([dir='rtl'][side-label]) .label { + /* [dir=rtl] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label */ + margin-left: var( + --spectrum-progressbar-large-label-gap-x, + var(--spectrum-global-dimension-size-150) + ); +} +:host([side-label]) .label { + /* .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label */ + margin-bottom: 0; +} +:host([dir='ltr'][side-label]) .percentage { + /* [dir=ltr] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ + text-align: right; /* [dir=ltr] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ + margin-left: var( + --spectrum-progressbar-large-label-gap-x, + var(--spectrum-global-dimension-size-150) + ); +} +:host([dir='rtl'][side-label]) .percentage { + /* [dir=rtl] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ + text-align: left; /* [dir=rtl] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ + margin-right: var( + --spectrum-progressbar-large-label-gap-x, + var(--spectrum-global-dimension-size-150) + ); +} +:host([side-label]) .percentage { + /* .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ + order: 3; + margin-bottom: 0; +} +:host([small]) { + /* .spectrum-ProgressBar--small */ + min-width: var( + --spectrum-progressbar-small-width, + var(--spectrum-global-dimension-size-2400) + ); +} +:host([small]) .fill, +:host([small]) .track { + /* .spectrum-ProgressBar--small .spectrum-ProgressBar-fill, + * .spectrum-ProgressBar--small .spectrum-ProgressBar-track */ + height: var( + --spectrum-progressbar-small-height, + var(--spectrum-global-dimension-size-50) + ); +} +:host([small]) .track { + /* .spectrum-ProgressBar--small .spectrum-ProgressBar-track */ + border-radius: var(--spectrum-progressbar-small-border-radius); +} +:host([indeterminate]) .fill { + /* .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill */ + width: var( + --spectrum-progressbar-large-indeterminate-fill-width, + var(--spectrum-global-dimension-size-1700) + ); + position: relative; + animation-timing-function: var( + --spectrum-progressbar-large-indeterminate-animation-ease, + var(--spectrum-global-animation-ease-in-out) + ); + will-change: transform; +} +:host([dir='ltr'][indeterminate]) .fill { + /* [dir=ltr] .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill */ + animation: indeterminate-loop-ltr + var( + --spectrum-progressbar-large-indeterminate-duration, + var(--spectrum-global-animation-duration-2000) + ) + infinite; +} +:host([dir='rtl'][indeterminate]) .fill { + /* [dir=rtl] .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill */ + animation: indeterminate-loop-rtl + var( + --spectrum-progressbar-large-indeterminate-duration, + var(--spectrum-global-animation-duration-2000) + ) + infinite; +} +:host([over-background]) .fill { + /* .spectrum-ProgressBar.spectrum-ProgressBar--overBackground .spectrum-ProgressBar-fill */ + background: var( + --spectrum-progressbar-large-over-background-track-fill-color, + var(--spectrum-global-color-static-white) + ); +} +:host([over-background]) .label, +:host([over-background]) .percentage { + /* .spectrum-ProgressBar.spectrum-ProgressBar--overBackground .spectrum-ProgressBar-label, + * .spectrum-ProgressBar.spectrum-ProgressBar--overBackground .spectrum-ProgressBar-percentage */ + color: var( + --spectrum-progressbar-large-over-background-track-fill-color, + var(--spectrum-global-color-static-white) + ); +} +:host([over-background]) .track { + /* .spectrum-ProgressBar.spectrum-ProgressBar--overBackground .spectrum-ProgressBar-track */ + background-color: var( + --spectrum-progressbar-large-over-background-track-color, + var(--spectrum-alias-track-color-over-background) + ); +} +:host([positive]) .fill { + /* .spectrum-ProgressBar.is-positive .spectrum-ProgressBar-fill */ + background: var( + --spectrum-meter-large-track-color-positive, + var(--spectrum-semantic-positive-color-status) + ); +} +:host([warning]) .fill { + /* .spectrum-ProgressBar.is-warning .spectrum-ProgressBar-fill */ + background: var( + --spectrum-meter-large-track-color-warning, + var(--spectrum-semantic-notice-color-status) + ); +} +:host([critical]) .fill { + /* .spectrum-ProgressBar.is-critical .spectrum-ProgressBar-fill */ + background: var( + --spectrum-meter-large-track-color-critical, + var(--spectrum-semantic-negative-color-status) + ); +} +.label, +.percentage { + /* .spectrum-ProgressBar-label, + * .spectrum-ProgressBar-percentage */ + color: var( + --spectrum-fieldlabel-text-color, + var(--spectrum-alias-label-text-color) + ); +} diff --git a/packages/meter/stories/meter.stories.ts b/packages/meter/stories/meter.stories.ts new file mode 100644 index 0000000000..e158584574 --- /dev/null +++ b/packages/meter/stories/meter.stories.ts @@ -0,0 +1,72 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { html, TemplateResult } from '@spectrum-web-components/base'; + +import '../sp-meter.js'; + +export default { + title: 'Meter', + component: 'sp-meter', +}; + +const makeOverBackground = (story: TemplateResult): TemplateResult => html` +
+ ${story} +
+`; + +export const Default = (): TemplateResult => { + return html` + Storage Space + `; +}; + +export const sideLabel = (): TemplateResult => { + return html` + Storage Space + `; +}; + +export const small = (): TemplateResult => { + return html` + Storage Space + `; +}; + +export const critical = (): TemplateResult => { + return html` + Storage Space + `; +}; + +export const warning = (): TemplateResult => { + return html` + Storage Space + `; +}; + +export const positive = (): TemplateResult => { + return html` + Storage Space + `; +}; + +export const overBackground = (): TemplateResult => { + return makeOverBackground( + html` + Storage Space + ` + ); +}; diff --git a/packages/meter/test/benchmark/basic-test.ts b/packages/meter/test/benchmark/basic-test.ts new file mode 100644 index 0000000000..ed4a0a5a76 --- /dev/null +++ b/packages/meter/test/benchmark/basic-test.ts @@ -0,0 +1,19 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import '@spectrum-web-components/meter/sp-meter.js'; +import { html } from '@spectrum-web-components/base'; +import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; + +measureFixtureCreation(html` + +`); diff --git a/packages/meter/test/meter.test.ts b/packages/meter/test/meter.test.ts new file mode 100644 index 0000000000..f6859ab010 --- /dev/null +++ b/packages/meter/test/meter.test.ts @@ -0,0 +1,56 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { fixture, elementUpdated, expect, html } from '@open-wc/testing'; + +import '../sp-meter.js'; +import { Meter } from '..'; + +describe('Meter', () => { + it('loads default meter accessibly', async () => { + const el = await fixture( + html` + + ` + ); + + await elementUpdated(el); + expect(el).to.not.be.undefined; + + await expect(el).to.be.accessible(); + }); + + it('accepts a changing process', async () => { + const el = await fixture(html` + Changing Value + `); + + await elementUpdated(el); + + expect(el.hasAttribute('aria-valuenow')).to.be.true; + expect(el.getAttribute('aria-valuenow')).to.equal('0'); + + el.progress = 50; + + await elementUpdated(el); + + expect(el.hasAttribute('aria-valuenow')).to.be.true; + expect(el.getAttribute('aria-valuenow')).to.equal('50'); + + el.progress = 100; + + await elementUpdated(el); + + expect(el.hasAttribute('aria-valuenow')).to.be.true; + expect(el.getAttribute('aria-valuenow')).to.equal('100'); + }); +}); diff --git a/packages/meter/tsconfig.json b/packages/meter/tsconfig.json new file mode 100644 index 0000000000..75919f9078 --- /dev/null +++ b/packages/meter/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "composite": true, + "rootDir": "./" + }, + "include": ["*.ts", "src/*.ts"], + "exclude": ["test/*.ts", "stories/*.ts"], + "references": [{ "path": "../base" }] +} diff --git a/test/visual/stories.js b/test/visual/stories.js index a44a3a6187..f5279dd41a 100644 --- a/test/visual/stories.js +++ b/test/visual/stories.js @@ -146,6 +146,13 @@ module.exports = [ 'menu--default', 'menu--headers-and-icons', 'menu--selected', + 'meter--default', + 'meter--side-label', + 'meter--small', + 'meter--critical', + 'meter--warning', + 'meter--positive', + 'meter--over-background', 'overlay--default', 'overlay--deep-nesting', 'overlay--edges',