feat(meter): add meter pattern

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",

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';

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",

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';

packages/bundle/tsconfig.json

@@ -33,6 +33,7 @@
         { "path": "../illustrated-message" },
         { "path": "../link" },
         { "path": "../menu" },
+        { "path": "../meter" },
         { "path": "../popover" },
         { "path": "../overlay" },
         { "path": "../quick-actions" },

packages/meter/README.md

@@ -0,0 +1,52 @@
+## Description
+
+An `<sp-meter>` 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 `<sp-meter>` 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
+<sp-meter progress="71">Tasks Completed</sp-meter>
+```
+
+### 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
+<div
+    style="width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around; background-color: var(--spectrum-alias-background-color-modal-overlay);"
+>
+    <sp-meter progress="42" over-background>Tasks Completed</sp-meter>
+</div>
+```
+
+### 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
+<sp-meter side-label>Side Label</sp-meter>
+```

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"
+    }
+}

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;
+    }
+}

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`
+            <div class="label">
+                <slot>${this.label}</slot>
+            </div>
+            <div class="percentage">${this.progress}%</div>
+            <div class="track">
+                <div
+                    class="fill"
+                    style="transform: scaleX(calc(${this.progress} / 100));"
+                ></div>
+            </div>
+        `;
+    }
+
+    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
+*/

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';

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;
+}

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;