feat(progress-bar): replace bar-loader with progress-bar

packages/bar-loader/README.md → packages/progress-bar/README.md

@@ -1,26 +1,26 @@
 ## Description
 
-An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.
+An `<sp-progress-bar>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.
 
 ### Usage
 
-[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/bar-loader?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/bar-loader)
-[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/bar-loader?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/bar-loader)
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/progress-bar?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/progress-bar)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/progress-bar?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/progress-bar)
 
 ```
-yarn add @spectrum-web-components/bar-loader
+yarn add @spectrum-web-components/progress-bar
 ```
 
-Import the side effectful registration of `<sp-bar-loader>` via:
+Import the side effectful registration of `<sp-progress-bar>` via:
 
 ```
-import '@spectrum-web-components/bar-loader/sp-bar-loader.js';
+import '@spectrum-web-components/progress-bar/sp-progress-bar.js';
 ```
 
-When looking to leverage the `BarLoader` base class as a type and/or for extension purposes, do so via:
+When looking to leverage the `ProgressBar` base class as a type and/or for extension purposes, do so via:
 
 ```
-import { BarLoader } from '@spectrum-web-components/bar-loader';
+import { ProgressBar } from '@spectrum-web-components/progress-bar';
 ```
 
 ## Sizes
@@ -38,11 +38,11 @@ import { BarLoader } from '@spectrum-web-components/bar-loader';
 <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;"
 >
-    <sp-bar-loader
+    <sp-progress-bar
         size="s"
         label="Loaded a little"
         progress="22"
-    ></sp-bar-loader>
+    ></sp-progress-bar>
 </div>
 ```
 
@@ -54,11 +54,11 @@ import { BarLoader } from '@spectrum-web-components/bar-loader';
 <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;"
 >
-    <sp-bar-loader
+    <sp-progress-bar
         size="m"
         label="Loaded a little"
         progress="22"
-    ></sp-bar-loader>
+    ></sp-progress-bar>
 </div>
 ```
 
@@ -70,11 +70,11 @@ import { BarLoader } from '@spectrum-web-components/bar-loader';
 <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;"
 >
-    <sp-bar-loader
+    <sp-progress-bar
         size="l"
         label="Loaded a little"
         progress="22"
-    ></sp-bar-loader>
+    ></sp-progress-bar>
 </div>
 ```
 
@@ -86,11 +86,11 @@ import { BarLoader } from '@spectrum-web-components/bar-loader';
 <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;"
 >
-    <sp-bar-loader
+    <sp-progress-bar
         size="xl"
         label="Loaded a little"
         progress="22"
-    ></sp-bar-loader>
+    ></sp-progress-bar>
 </div>
 ```
 
@@ -100,40 +100,40 @@ import { BarLoader } from '@spectrum-web-components/bar-loader';
 
 ### 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.
+When a progress bar needs to be placed on top of a colored background, use the over background progres bar as signified by `[over-background]`. This progress bar 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-bar-loader progress="7" over-background></sp-bar-loader>
+    <sp-progress-bar progress="7" over-background></sp-progress-bar>
 </div>
 ```
 
 ### Indeterminate
 
-A bar loader can be either determinate or indeterminate as signified by `[indeterminate]`. By default, loaders are determinate. Use a determinate loader when progress can be calculated against a specific goal (e.g., downloading a file of a known size). Use an indeterminate loader when progress is happening but the time or effort to completion can’t be determined (e.g., attempting to reconnect to a server).
+A progress bar can be either determinate or indeterminate as signified by `[indeterminate]`. By default, loaders are determinate. Use a determinate loader when progress can be calculated against a specific goal (e.g., downloading a file of a known size). Use an indeterminate loader when progress is happening but the time or effort to completion can’t be determined (e.g., attempting to reconnect to a server).
 
 ```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;"
 >
-    <sp-bar-loader indeterminate></sp-bar-loader>
+    <sp-progress-bar indeterminate></sp-progress-bar>
 </div>
 ```
 
 ### Side Label
 
-A bar loader 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.
+A progress bar 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
 <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;"
 >
-    <sp-bar-loader
+    <sp-progress-bar
         side-label
         indeterminate
         label="Label Beside"
-    ></sp-bar-loader>
+    ></sp-progress-bar>
 </div>
 ```

packages/bar-loader/package.json → packages/progress-bar/package.json

@@ -1,36 +1,36 @@
 {
-    "name": "@spectrum-web-components/bar-loader",
+    "name": "@spectrum-web-components/progress-bar",
     "publishConfig": {
         "access": "public"
     },
     "repository": {
         "type": "git",
         "url": "https://github.com/adobe/spectrum-web-components.git",
-        "directory": "packages/bar-loader"
+        "directory": "packages/progress-bar"
     },
     "bugs": {
         "url": "https://github.com/adobe/spectrum-web-components/issues"
     },
-    "homepage": "https://adobe.github.io/spectrum-web-components/components/bar-loader",
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/progress-bar",
     "keywords": [
         "spectrum css",
         "web components",
         "lit-element",
         "lit-html"
     ],
-    "version": "0.4.1",
+    "version": "0.0.1",
     "description": "",
-    "main": "./src/index.js",
-    "module": "./src/index.js",
-    "types": "./src/index.d.ts",
+    "main": "src/index.js",
+    "module": "src/index.js",
     "type": "module",
+    "types": "./src/index.d.ts",
     "exports": {
         ".": "./src/index.js",
         "./src/": "./src/",
         "./custom-elements.json": "./custom-elements.json",
         "./package.json": "./package.json",
-        "./sp-bar-loader": "./sp-bar-loader.js",
-        "./sp-bar-loader.js": "./sp-bar-loader.js"
+        "./sp-progress-bar": "./sp-progress-bar.js",
+        "./sp-progress-bar.js": "./sp-progress-bar.js"
     },
     "files": [
         "custom-elements.json",
@@ -52,8 +52,8 @@
         "@spectrum-css/progressbar": "^1.0.0-beta.3"
     },
     "dependencies": {
-        "@spectrum-web-components/base": "^0.3.1",
-        "@spectrum-web-components/field-label": "^0.2.1",
+        "@spectrum-web-components/base": "^0.3.0",
+        "@spectrum-web-components/field-label": "^0.2.0",
         "tslib": "^2.0.0"
     }
 }

packages/bar-loader/sp-bar-loader.ts → packages/progress-bar/sp-progress-bar.ts

@@ -10,12 +10,12 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { BarLoader } from './src/BarLoader.js';
+import { ProgressBar } from './src/ProgressBar.js';
 
-customElements.define('sp-bar-loader', BarLoader);
+customElements.define('sp-progress-bar', ProgressBar);
 
 declare global {
     interface HTMLElementTagNameMap {
-        'sp-bar-loader': BarLoader;
+        'sp-progress-bar': ProgressBar;
     }
 }

packages/bar-loader/src/BarLoader.ts → packages/progress-bar/src/ProgressBar.ts

@@ -21,12 +21,12 @@ import {
 } from '@spectrum-web-components/base';
 
 import '@spectrum-web-components/field-label/sp-field-label.js';
-import styles from './bar-loader.css.js';
+import styles from './progress-bar.css.js';
 
 /**
- * @element sp-bar-loader
+ * @element sp-progress-bar
  */
-export class BarLoader extends SizedMixin(SpectrumElement) {
+export class ProgressBar extends SizedMixin(SpectrumElement) {
     public static get styles(): CSSResultArray {
         return [styles];
     }

packages/bar-loader/src/index.ts → packages/progress-bar/src/index.ts

@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-export * from './BarLoader.js';
+export * from './ProgressBar.js';

packages/bar-loader/src/bar-loader.css → packages/progress-bar/src/progress-bar.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-bar-loader.css';
+@import './spectrum-progress-bar.css';
 
 .fill {
     width: 100%;

packages/bar-loader/src/spectrum-config.js → packages/progress-bar/src/spectrum-config.js

@@ -14,7 +14,7 @@ const config = {
     spectrum: 'progressbar',
     components: [
         {
-            name: 'bar-loader',
+            name: 'progress-bar',
             host: {
                 selector: '.spectrum-ProgressBar',
             },

packages/bar-loader/stories/bar-loader-sizes.stories.ts → packages/progress-bar/stories/progress-bar-sizes.stories.ts

@@ -12,33 +12,49 @@ governing permissions and limitations under the License.
 
 import { html, TemplateResult } from '@spectrum-web-components/base';
 
-import '../sp-bar-loader.js';
+import '../sp-progress-bar.js';
 
 export default {
-    title: 'Bar Loader/Sizes',
-    component: 'sp-bar-loader',
+    title: 'Progress Bar/Sizes',
+    component: 'sp-progress-bar',
 };
 
 export const s = (): TemplateResult => {
     return html`
-        <sp-bar-loader label="Loading" progress="50" size="s"></sp-bar-loader>
+        <sp-progress-bar
+            label="Loading"
+            progress="50"
+            size="s"
+        ></sp-progress-bar>
     `;
 };
 
 export const m = (): TemplateResult => {
     return html`
-        <sp-bar-loader label="Loading" progress="50" size="m"></sp-bar-loader>
+        <sp-progress-bar
+            label="Loading"
+            progress="50"
+            size="m"
+        ></sp-progress-bar>
     `;
 };
 
 export const l = (): TemplateResult => {
     return html`
-        <sp-bar-loader label="Loading" progress="50" size="l"></sp-bar-loader>
+        <sp-progress-bar
+            label="Loading"
+            progress="50"
+            size="l"
+        ></sp-progress-bar>
     `;
 };
 
 export const XL = (): TemplateResult => {
     return html`
-        <sp-bar-loader label="Loading" progress="50" size="xl"></sp-bar-loader>
+        <sp-progress-bar
+            label="Loading"
+            progress="50"
+            size="xl"
+        ></sp-progress-bar>
     `;
 };