Merge pull request #83 from umbraco/feature/uui-progress-bar

Author: nielslyngsoe

package-lock.json

@@ -0,0 +1,43 @@
+# uui-progress-bar
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-progress-bar?logoColor=%231B264F)
+
+Umbraco style progress-bar component.
+
+## Installation
+
+### ES imports
+
+```zsh
+npm i @umbraco-ui/uui-progress-bar
+```
+
+Import the registration of `<uui-progress-bar>` via:
+
+```javascript
+import '@umbraco-ui/uui-progress-bar/lib';
+```
+
+When looking to leverage the `UUIProgressBarElement` base class as a type and/or for extension purposes, do so via:
+
+```javascript
+import { UUIProgressBarElement } from '@umbraco-ui/uui-progress-bar/lib/uui-progress-bar.element';
+```
+
+### CDN
+
+The component is available via CDN. This means it can be added to your application without the need of any bundler configuration. Here is how to use it with jsDelivr.
+
+```html
+<!-- Latest Version -->
+<script src="https://cdn.jsdelivr.net/npm/@umbraco-ui/uui-progress-bar@latest/dist/uui-progress-bar.min.js"></script>
+
+<!-- Specific version -->
+<script src="https://cdn.jsdelivr.net/npm/@umbraco-ui/[email protected]/dist/uui-progress-bar.min.js"></script>
+```
+
+## Usage
+
+```html
+<uui-progress-bar progress="25"></uui-progress-bar>
+```

packages/uui-progress-bar/README.md

@@ -0,0 +1,4 @@
+import { UUIProgressBarElement } from './uui-progress-bar.element';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+
+defineElement('uui-progress-bar', UUIProgressBarElement as any);

packages/uui-progress-bar/lib/index.ts

@@ -0,0 +1,60 @@
+import { LitElement, html, css } from 'lit';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+const clamp = (num: number, min: number, max: number) =>
+  Math.min(Math.max(num, min), max);
+
+/**
+ * @element uui-progress-bar
+ */
+export class UUIProgressBarElement extends LitElement {
+  static styles = [
+    css`
+      :host {
+        width: 100%;
+        height: 4px;
+        position: relative;
+        overflow: hidden;
+        background: var(--uui-interface-surface-alt);
+        border-radius: 100px;
+        display: inline-block;
+      }
+
+      #bar {
+        transition: width 250ms ease;
+        background: var(--uui-look-positive-surface);
+        height: 100%;
+        width: 0%;
+      }
+    `,
+  ];
+
+  private _progress = 0;
+  /**
+   * Set this to a number between 0 and 100 to reflect the progress of some operation.
+   * @type {number}
+   * @attr
+   * @default 0
+   */
+  @property({ type: Number })
+  get progress() {
+    return this._progress;
+  }
+
+  set progress(newVal) {
+    const oldVal = this._progress;
+    this._progress = clamp(newVal, 0, 100);
+    this.requestUpdate('progress', oldVal);
+  }
+
+  private _getProgressStyle() {
+    return { width: `${this._progress}%` };
+  }
+
+  render() {
+    return html`
+      <div id="bar" style=${styleMap(this._getProgressStyle())}></div>
+    `;
+  }
+}

packages/uui-progress-bar/lib/uui-progress-bar.element.ts

@@ -0,0 +1,22 @@
+import { Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+import '@umbraco-ui/uui-progress-bar/lib/index';
+
+export default {
+  id: 'uui-progress-bar',
+  title: 'Progress Bar',
+  component: 'uui-progress-bar',
+  args: {
+    progress: 25,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<uui-progress-bar></uui-progress-bar>`,
+      },
+    },
+  },
+};
+
+export const Overview: Story = props =>
+  html`<uui-progress-bar progress="${props.progress}"></uui-progress-bar>`;

packages/uui-progress-bar/lib/uui-progress-bar.story.ts

@@ -0,0 +1,32 @@
+import { html, fixture, expect, elementUpdated } from '@open-wc/testing';
+import { UUIProgressBarElement } from './uui-progress-bar.element';
+import '.';
+
+describe('UUIProgressBarElement', () => {
+  let element: UUIProgressBarElement;
+
+  beforeEach(async () => {
+    element = await fixture(html` <uui-progress-bar></uui-progress-bar> `);
+  });
+
+  it('passes the a11y audit', async () => {
+    expect(element).shadowDom.to.be.accessible();
+  });
+
+  it('clamps the negative values passed to progress to 0', async () => {
+    element.progress = -44;
+    expect(element.progress).to.equal(0);
+  });
+
+  it('clamps the progress values greater then 100 to 100', async () => {
+    element.progress = 200;
+    expect(element.progress).to.equal(100);
+  });
+
+  it('sets the bar width corresponding to the progress', async () => {
+    element.progress = 23;
+    await elementUpdated(element);
+    const bar = element.shadowRoot?.getElementById('bar');
+    expect(bar?.style.width).to.equal('23%');
+  });
+});

packages/uui-progress-bar/lib/uui-progress-bar.test.ts

@@ -0,0 +1,43 @@
+{
+  "name": "@umbraco-ui/uui-progress-bar",
+  "version": "0.0.0",
+  "license": "MIT",
+  "keywords": [
+    "Umbraco",
+    "Custom elements",
+    "Web components",
+    "UI",
+    "Lit",
+    "Progress Bar"
+  ],
+  "description": "Umbraco UI progress-bar component",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umbraco/Umbraco.UI.git",
+    "directory": "packages/uui-progress-bar"
+  },
+  "bugs": {
+    "url": "https://github.com/umbraco/Umbraco.UI/issues"
+  },
+  "main": "./dist/uui-progress-bar.min.js",
+  "module": "./lib/index.js",
+  "customElements": "custom-elements.json",
+  "files": [
+    "dist",
+    "lib/**/*.d.ts",
+    "lib/**/*.js",
+    "custom-elements.json"
+  ],
+  "dependencies": {
+    "@umbraco-ui/uui-base": "0.0.13"
+  },
+  "scripts": {
+    "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
+    "clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
+    "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://uui.umbraco.com/?path=/story/uui-progress-bar"
+}

packages/uui-progress-bar/package.json

@@ -0,0 +1,6 @@
+import { UUIProdConfig } from '../rollup-package.config';
+
+export default UUIProdConfig({
+  entryPoints: ['index', 'uui-progress-bar.element'],
+  bundle: 'index',
+});

packages/uui-progress-bar/rollup.config.js

@@ -0,0 +1,17 @@
+// Don't edit this file directly. It is generated by /scripts/generate-ts-config.js
+
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./lib",
+    "rootDir": "./lib",
+    "composite": true
+  },
+  "include": ["./**/*.ts"],
+  "exclude": ["./**/*.test.ts", "./**/*.story.ts"],
+  "references": [
+    {
+      "path": "../uui-base"
+    }
+  ]
+}

packages/uui-progress-bar/tsconfig.json

@@ -35,3 +35,4 @@ import '@umbraco-ui/uui-toggle/lib/index';
 import '@umbraco-ui/uui-caret/lib/index';
 import '@umbraco-ui/uui-menu-item/lib/index';
 import '@umbraco-ui/uui-pagination/lib/index';
+import '@umbraco-ui/uui-progress-bar/lib/index';