@vonage/vivid 3.0.0-next.6 → 3.0.0-next.7

package/src/lib/progress/progress.spec.ts

@@ -0,0 +1,173 @@
+import {elementUpdated, fixture} from '@vivid-nx/shared';
+import {Connotation, Shape} from '../enums';
+import {Progress} from './progress';
+import '.';
+
+const COMPONENT_TAG = 'vwc-progress';
+
+describe('vwc-progress', () => {
+	let element: Progress;
+
+	beforeEach(async () => {
+		element = (await fixture(
+			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
+		)) as Progress;
+	});
+
+	describe('basic', () => {
+		it('should be initialized as a vwc-progress', async () => {
+			expect(element)
+				.toBeInstanceOf(Progress);
+		});
+
+		it('should reflect min and max', async function () {
+			element.min = 10;
+			element.max = 90;
+			await elementUpdated(element);
+			expect(element.getAttribute('min'))
+				.toEqual(element.min.toString());
+			expect(element.getAttribute('max'))
+				.toEqual(element.max.toString());
+		});
+	});
+
+	describe('connotation', function () {
+		it('should be undefined by default', async function () {
+			expect(element.connotation)
+				.toEqual(undefined);
+		});
+
+		it('should reflect its value to host', async function () {
+
+			element.setAttribute('connotation', 'alert');
+			await elementUpdated(element);
+			const connotationPropertyAfterAttributeChange = element.connotation;
+
+			element.connotation = Connotation.Success;
+			await elementUpdated(element);
+			const connotationAttributeAfterPropertyChange = element.getAttribute('connotation');
+
+			expect(connotationPropertyAfterAttributeChange)
+				.toEqual(Connotation.Alert);
+			expect(connotationAttributeAfterPropertyChange)
+				.toEqual(Connotation.Success);
+		});
+
+		it('should set connotation on the base div', async function () {
+			const connotation = Connotation.CTA;
+			const baseDiv = element.shadowRoot?.querySelector('.base');
+			const connotationClassExistsBeforeChange = baseDiv?.classList.contains(`connotation-${connotation}`);
+			element.connotation = connotation;
+			await elementUpdated(element);
+			const connotationClassExistsAfterChange = baseDiv?.classList.contains(`connotation-${connotation}`);
+
+			expect(connotationClassExistsBeforeChange)
+				.toEqual(false);
+			expect(connotationClassExistsAfterChange)
+				.toEqual(true);
+		});
+	});
+
+	describe('paused', function () {
+		it('should reflect to host', async function () {
+			const pausedAttributeExistsOnInit = element.hasAttribute('paused');
+			element.paused = true;
+			await elementUpdated(element);
+			const pausedAttributeExistsWhenTrue = element.hasAttribute('paused');
+			element.paused = false;
+			await elementUpdated(element);
+			const pausedAttributeExistsWhenFalse = element.hasAttribute('paused');
+			expect(pausedAttributeExistsOnInit)
+				.toEqual(false);
+			expect(pausedAttributeExistsWhenTrue)
+				.toEqual(true);
+			expect(pausedAttributeExistsWhenFalse)
+				.toEqual(false);
+		});
+
+		it('should set class paused on base element', async function () {
+			const baseDiv = element.shadowRoot?.querySelector('.base');
+			const pausedClassExistsBeforeChange = baseDiv?.classList.contains('paused');
+			element.paused = true;
+			await elementUpdated(element);
+			const pausedClassExistsAfterChange = baseDiv?.classList.contains('paused');
+
+			expect(pausedClassExistsBeforeChange)
+				.toEqual(false);
+			expect(pausedClassExistsAfterChange)
+				.toEqual(true);
+		});
+	});
+
+	describe('value', function () {
+		it('should reflect to host', async function () {
+			element.value = 50;
+			await elementUpdated(element);
+			expect(element.getAttribute('value'))
+				.toEqual('50');
+		});
+
+		it('should set percentComplete to percentage of the range', async function () {
+			element.min = 0;
+			element.max = 100;
+			element.value = 25;
+			await elementUpdated(element);
+			const percentWithBigRange = element.percentComplete;
+
+			element.min = 0;
+			element.max = 50;
+			element.value = 25;
+			await elementUpdated(element);
+			const percentWithSmallRange = element.percentComplete;
+
+			expect(percentWithBigRange)
+				.toEqual(25);
+			expect(percentWithSmallRange)
+				.toEqual(50);
+		});
+
+		it('should set the determinate div width to percentComplete', async function () {
+			element.min = 0;
+			element.max = 100;
+			element.value = 25;
+			await elementUpdated(element);
+			const determinateDiv = element.shadowRoot?.querySelector('.determinate') as HTMLElement;
+			expect(determinateDiv?.style.width)
+				.toEqual(`${element.value}%`);
+		});
+	});
+
+	describe('reverse', function () {
+		it('should reflect reverse on host', async function () {
+			element.reverse = true;
+			await elementUpdated(element);
+			expect(element.hasAttribute('reverse'))
+				.toEqual(true);
+		});
+
+		it('should add class "reverse" to base div', async function () {
+			const baseDiv = element.shadowRoot?.querySelector('.base');
+			element.reverse = true;
+			await elementUpdated(element);
+			expect(baseDiv?.classList.contains('reverse'))
+				.toEqual(true);
+		});
+	});
+
+	describe('shape', function () {
+		it('should reflect shape on host', async function () {
+			element.shape = Shape.Rounded;
+			await elementUpdated(element);
+			expect(element.getAttribute('shape'))
+				.toEqual(Shape.Rounded);
+		});
+
+		it('should add class "shape" to base div', async function () {
+			const baseDiv = element.shadowRoot?.querySelector('.base');
+			element.shape = Shape.Rounded;
+			await elementUpdated(element);
+			expect(baseDiv?.classList.contains(`shape-${Shape.Rounded}`))
+				.toEqual(true);
+		});
+	});
+});

package/src/lib/progress/progress.template.ts

@@ -0,0 +1,62 @@
+import {html, when} from '@microsoft/fast-element';
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type {
+	ElementDefinitionContext,
+} from '@microsoft/fast-foundation';
+import {classNames} from '@microsoft/fast-web-utilities';
+import type {BaseProgress, ProgressOptions} from '@microsoft/fast-foundation';
+import type { Progress } from './progress';
+
+const getClasses = (_: Progress) => classNames(
+	'base',
+	[`connotation-${_.connotation}`, !!_.connotation],
+	[`shape-${_.shape}`, !!_.shape],
+	['reverse', _.reverse]
+);
+
+/**
+ * The template for the {@link @microsoft/fast-foundation#Progress} component.
+ *
+ * @param context
+ * @param _
+ * @param definition
+ * @public
+ */
+export const ProgressTemplate: (
+	context: ElementDefinitionContext,
+	definition: ProgressOptions
+) => ViewTemplate<Progress> = (_: ElementDefinitionContext) => {
+	return html`
+    <div
+      role="progressbar"
+      aria-valuenow="${x => x.value}"
+      aria-valuemin="${x => x.min}"
+      aria-valuemax="${x => x.max}"
+      class="${x => (x.paused ? 'paused' : '')} ${getClasses}"
+    >
+      ${when(
+		x => typeof x.value === 'number',
+		html<BaseProgress>`
+                  <div class="progress">
+                      <div
+                          class="determinate"
+                          style="width: ${x => x.percentComplete}%"
+                      ></div>
+                  </div>
+              `
+	)}
+      ${when(
+		x => typeof x.value !== 'number',
+		html<BaseProgress>`
+                  <div class="progress indeterminate">
+                      <span class="indeterminate" name="indeterminate">
+                        <span class="indeterminate-indicator-1"></span>
+                        <span class="indeterminate-indicator-2"></span>
+                      </span>
+                  </div>
+              `
+	)}
+    </div>
+  `;
+};
+

package/src/lib/progress/progress.ts

@@ -0,0 +1,25 @@
+import { BaseProgress } from '@microsoft/fast-foundation';
+import {attr} from '@microsoft/fast-element';
+import type {Connotation, ConnotationDecorative, Shape} from '../enums';
+
+export type ProgressConnotation =
+	Connotation.Primary |
+	Connotation.Success |
+	Connotation.Alert |
+	Connotation.CTA |
+	ConnotationDecorative.Pacific;
+
+export type ProgressShape =
+	Shape.Rounded |
+	Shape.Sharp;
+/**
+ * Base class for progress
+ *
+ * @public
+ */
+export class Progress extends BaseProgress {
+	@attr() shape?: ProgressShape;
+	@attr() connotation?: ProgressConnotation;
+	@attr({mode: 'boolean'}) reverse = false;
+}
+

package/src/lib/progress/ui.test.ts

@@ -0,0 +1,70 @@
+import {expect, test} from '@playwright/test';
+import type {Page} from '@playwright/test';
+import {
+	loadComponents,
+	loadTemplate,
+} from '../../visual-tests/visual-tests-utils.ts';
+
+const components = ['progress'];
+
+test('should show the component', async ({page}: { page: Page }) => {
+	const template = `
+		<div style="margin: 5px;">
+    <vwc-progress min="0" max="100" value="25" connotation="primary"></vwc-progress>
+    <br/>
+    <br/>
+    <vwc-progress min="0" max="100" value="25" connotation="cta"></vwc-progress>
+    <br/>
+    <br/>
+    <vwc-progress min="0" max="100" value="25" connotation="success"></vwc-progress>
+    <br/>
+    <br/>
+    <vwc-progress min="0" max="100" value="25" connotation="alert"></vwc-progress>
+    <br/>
+    <br/>
+    <vwc-progress min="0" max="100" value="25" connotation="pacific"></vwc-progress>
+    <br/>
+    <br/>
+    <vwc-progress min="0" max="50" value="25" paused></vwc-progress>
+    <br/>
+    <br/>
+    <vwc-progress min="0" max="50" value="indeterminate" paused></vwc-progress>
+    <br/>
+    <br/>
+    <vwc-progress min="0" max="50" value="25" reverse></vwc-progress>
+    <br/>
+    <br/>
+    <vwc-progress min="0" max="100" value="25" connotation="primary" shape="sharp"></vwc-progress>
+    <br/>
+    <br/>
+    <vwc-progress min="0" max="100" value="25" connotation="cta" shape="sharp"></vwc-progress>
+    <br/>
+    <br/>
+    <vwc-progress min="0" max="100" value="25" connotation="success" shape="sharp"></vwc-progress>
+    <br/>
+    <br/>
+    <vwc-progress min="0" max="100" value="25" connotation="alert" shape="sharp"></vwc-progress>
+    <br/>
+    <br/>
+    <vwc-progress min="0" max="100" value="25" connotation="pacific" shape="sharp"></vwc-progress>
+    </div>
+  `;
+
+	await loadComponents({
+		page,
+		components,
+	});
+	await loadTemplate({
+		page,
+		template,
+	});
+
+	const testWrapper = await page.$('#wrapper');
+
+	await page.waitForLoadState('networkidle');
+
+	expect(await testWrapper?.screenshot())
+		.toMatchSnapshot(
+			'./snapshots/progress.png'
+		);
+});

package/src/lib/progress-ring/README.md

@@ -0,0 +1,90 @@
+# progress-ring
+
+Progress-ring is used to display the length of time a process will take or to visualize percentage value (referred to as a determinate state) and to represent an unspecified wait time (referred to as an indeterminate state).
+
+```js
+<script type="module">
+    import '@vonage/vivid/progress-ring';
+</script>
+```
+
+```html preview
+<vwc-progress-ring></vwc-progress-ring>
+```
+
+### Min/Max
+Use `min`, `max` in order to determine the range of the progress.
+
+- Type: `number`
+- Default: `undefined`
+
+```html preview
+    <vwc-layout column-basis="block">
+        <vwc-progress-ring min="0" max="50" value="12.5"></vwc-progress-ring>
+        <vwc-progress-ring min="0" max="50" value="50"></vwc-progress-ring>
+        <vwc-progress-ring min="0" max="100" value="50"></vwc-progress-ring>
+    </vwc-layout>
+```
+
+### Value
+Use `value` in order to set the state of the progress. Omitting the attribute or setting it for a non-number value will set the state to `indetermintate`.
+
+- Type: `number` | `string`
+- Default: `undefined`
+
+```html preview
+    <vwc-layout column-basis="block">
+        <vwc-progress-ring value="12.5"></vwc-progress-ring>
+        <vwc-progress-ring value="45"></vwc-progress-ring>
+        <vwc-progress-ring value="73"></vwc-progress-ring>
+        <vwc-progress-ring value="100"></vwc-progress-ring>
+    </vwc-layout>
+```
+### Connotation
+Use `connotation` in order to set the color the progress.
+
+- Type: `'primary'` | `'cta'` | `'success'` | `'alert'`
+- Default: `'primary'`
+
+```html preview
+    <vwc-layout column-basis="block">
+        <vwc-progress-ring connotation="primary"></vwc-progress-ring>
+        <vwc-progress-ring connotation="cta"></vwc-progress-ring>
+        <vwc-progress-ring connotation="success"></vwc-progress-ring>
+        <vwc-progress-ring connotation="alert"></vwc-progress-ring>
+    </vwc-layout>
+```
+
+### Paused
+Use the `paused` attribute to show a disabled state of the progress.
+
+- Type: `boolean`
+- Default: `false`
+
+```html preview
+    <vwc-layout column-basis="block">
+        <h2>Determinate</h2>
+        <vwc-progress-ring min="0" max="50" value="25" paused></vwc-progress-ring>
+        <h2>Indeterminate</h2>
+        <vwc-progress-ring min="0" max="50" paused></vwc-progress-ring>
+    </vwc-layout>
+```
+
+## Example Usage
+
+### Determinate State
+Set the `min`, `max` and `value` in order to show the determinate state.
+
+In the example below, we set the value to `12.5` while the range is `0` to `50`.  This means, 25% of the progress bar will be filled.
+```html preview
+    <vwc-progress-ring min="0" max="50" value="12.5"></vwc-progress-ring>
+```
+
+### Indeterminate
+Remove `value` or set it to be a non-number value (e.g. `indeterminate`) to show an indeterminate state.
+```html preview
+    <vwc-layout column-basis="block">
+        <vwc-progress-ring min="0" max="50"></vwc-progress-ring>
+        <vwc-progress-ring min="0" max="50" value="indeterminate"></vwc-progress-ring>
+    </vwc-layout>
+```

package/src/lib/progress-ring/index.ts

@@ -0,0 +1,15 @@
+import type {FoundationElementDefinition} from '@microsoft/fast-foundation';
+import {designSystem} from '../../shared/design-system';
+import styles from './progress-ring.scss';
+
+import {ProgressRing} from './progress-ring';
+import {ProgressRingTemplate as template} from './progress-ring.template';
+
+export const vividProgressRing =
+	ProgressRing.compose<FoundationElementDefinition>({
+		baseName: 'progress-ring',
+		template: template as any,
+		styles,
+	});
+
+designSystem.register(vividProgressRing());

package/src/lib/progress-ring/progress-ring.scss

@@ -0,0 +1,75 @@
+@use '../../../../../node_modules/@vonage/vivid-tokens/dist/sass/themes/consts' as theme-consts;
+
+@use '../../../../shared/src/lib/sass/mixins/connotation/config' with (
+	$subset: cta primary alert success,
+	$default: primary
+);
+@use '../../../../shared/src/lib/sass/mixins/connotation' as connotation;
+
+.base {
+	@include connotation.connotation;
+
+	width: 36px;
+	height: 36px;
+	align-items: center;
+	outline: none;
+}
+.base.base-large {
+	width: 48px;
+	height: 48px;
+}
+
+.base.base-small {
+	width: 24px;
+	height: 24px;
+}
+
+.progress {
+	width: 100%;
+	height: 100%;
+}
+.background {
+	fill: none;
+	stroke: transparent;
+	stroke-width: 2px;
+}
+.determinate {
+	fill: none;
+	stroke: var(#{connotation.$vvd-color-connotation});
+	stroke-linecap: round;
+	stroke-width: 2px;
+	transform: rotate(-90deg);
+	transform-origin: 50% 50%;
+	transition: all 0.2s ease-in-out;
+}
+.indeterminate-indicator-1 {
+	animation: spin-infinite 2s linear infinite;
+	fill: none;
+	stroke: var(#{connotation.$vvd-color-connotation});
+	stroke-linecap: round;
+	stroke-width: 2px;
+	transform: rotate(-90deg);
+	transform-origin: 50% 50%;
+	transition: all 0.2s ease-in-out;
+}
+.base.paused .indeterminate-indicator-1 {
+	animation-play-state: paused;
+	stroke: var(#{theme-consts.$vvd-color-neutral});
+}
+.base.paused .determinate {
+	stroke: var(#{theme-consts.$vvd-color-neutral});
+}
+@keyframes spin-infinite {
+	0% {
+		stroke-dasharray: 0.01px 43.97px;
+		transform: rotate(0deg);
+	}
+	50% {
+		stroke-dasharray: 21.99px 21.99px;
+		transform: rotate(450deg);
+	}
+	100% {
+		stroke-dasharray: 0.01px 43.97px;
+		transform: rotate(1080deg);
+	}
+}

package/src/lib/progress-ring/progress-ring.spec.ts

@@ -0,0 +1,139 @@
+import {elementUpdated, fixture} from '@vivid-nx/shared';
+import {Connotation} from '../enums';
+import {ProgressRing} from './progress-ring';
+import '.';
+
+const COMPONENT_TAG = 'vwc-progress-ring';
+
+describe('vwc-progress-ring', () => {
+	let element: ProgressRing;
+
+	beforeEach(async () => {
+		element = (await fixture(
+			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
+		)) as ProgressRing;
+	});
+
+	describe('basic', () => {
+		it('should be initialized as a vwc-progress-ring', async () => {
+			expect(element).toBeInstanceOf(ProgressRing);
+		});
+
+		it('should reflect min and max', async function () {
+			element.min = 10;
+			element.max = 90;
+			await elementUpdated(element);
+			expect(element.getAttribute('min'))
+				.toEqual(element.min.toString());
+			expect(element.getAttribute('max'))
+				.toEqual(element.max.toString());
+		});
+	});
+
+	describe('value', function () {
+		it('should reflect to host', async function () {
+			element.value = 50;
+			await elementUpdated(element);
+			expect(element.getAttribute('value'))
+				.toEqual('50');
+		});
+
+		it('should set percentComplete to percentage of the range', async function () {
+			element.min = 0;
+			element.max = 100;
+			element.value = 25;
+			await elementUpdated(element);
+			const percentWithBigRange = element.percentComplete;
+
+			element.min = 0;
+			element.max = 50;
+			element.value = 25;
+			await elementUpdated(element);
+			const percentWithSmallRange = element.percentComplete;
+
+			expect(percentWithBigRange)
+				.toEqual(25);
+			expect(percentWithSmallRange)
+				.toEqual(50);
+		});
+
+		it('should set the determinate div width to percentComplete', async function () {
+			element.min = 0;
+			element.max = 100;
+			element.value = 25;
+			const expectedValue = element.value * 44 / 100;
+			await elementUpdated(element);
+			const determinateDiv = element.shadowRoot?.querySelector('.determinate') as HTMLElement;
+			expect(determinateDiv?.style.strokeDasharray)
+				.toEqual(`${expectedValue}px 44px`);
+		});
+	});
+
+	describe('paused', function () {
+		it('should reflect to host', async function () {
+			const pausedAttributeExistsOnInit = element.hasAttribute('paused');
+			element.paused = true;
+			await elementUpdated(element);
+			const pausedAttributeExistsWhenTrue = element.hasAttribute('paused');
+			element.paused = false;
+			await elementUpdated(element);
+			const pausedAttributeExistsWhenFalse = element.hasAttribute('paused');
+			expect(pausedAttributeExistsOnInit)
+				.toEqual(false);
+			expect(pausedAttributeExistsWhenTrue)
+				.toEqual(true);
+			expect(pausedAttributeExistsWhenFalse)
+				.toEqual(false);
+		});
+
+		it('should set class paused on base element', async function () {
+			const baseDiv = element.shadowRoot?.querySelector('.base');
+			const pausedClassExistsBeforeChange = baseDiv?.classList.contains('paused');
+			element.paused = true;
+			await elementUpdated(element);
+			const pausedClassExistsAfterChange = baseDiv?.classList.contains('paused');
+
+			expect(pausedClassExistsBeforeChange)
+				.toEqual(false);
+			expect(pausedClassExistsAfterChange)
+				.toEqual(true);
+		});
+	});
+
+	describe('connotation', function () {
+		it('should be undefined by default', async function () {
+			expect(element.connotation)
+				.toEqual(undefined);
+		});
+
+		it('should reflect its value to host', async function () {
+
+			element.setAttribute('connotation', 'alert');
+			await elementUpdated(element);
+			const connotationPropertyAfterAttributeChange = element.connotation;
+
+			element.connotation = Connotation.Success;
+			await elementUpdated(element);
+			const connotationAttributeAfterPropertyChange = element.getAttribute('connotation');
+
+			expect(connotationPropertyAfterAttributeChange)
+				.toEqual(Connotation.Alert);
+			expect(connotationAttributeAfterPropertyChange)
+				.toEqual(Connotation.Success);
+		});
+
+		it('should set connotation on the base div', async function () {
+			const connotation = Connotation.CTA;
+			const baseDiv = element.shadowRoot?.querySelector('.base');
+			const connotationClassExistsBeforeChange = baseDiv?.classList.contains(`connotation-${connotation}`);
+			element.connotation = connotation;
+			await elementUpdated(element);
+			const connotationClassExistsAfterChange = baseDiv?.classList.contains(`connotation-${connotation}`);
+
+			expect(connotationClassExistsBeforeChange)
+				.toEqual(false);
+			expect(connotationClassExistsAfterChange)
+				.toEqual(true);
+		});
+	});
+});