@vonage/vivid 3.0.0-next.7 → 3.0.0-test.0

package/src/lib/progress/index.ts

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

package/src/lib/progress/progress.scss

@@ -1,133 +0,0 @@
-@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,
-	$decoratives: (pacific),
-);
-@use '../../../../shared/src/lib/sass/mixins/connotation' as connotation;
-
-$block-size: 6px;
-$rounded-border-radius: 3px;
-
-.base {
-	@include connotation.connotation;
-
-	height: $block-size;
-	align-items: center;
-	margin: 0;
-	outline: none;
-}
-
-
-.indeterminate {
-	display: flex;
-	overflow: hidden;
-	width: 100%;
-	height: 100%;
-	border-radius: $rounded-border-radius;
-}
-
-.progress {
-	position: relative;
-	display: flex;
-	align-items: center;
-	background-color: var(#{theme-consts.$vvd-color-neutral-20});
-	block-size: 100%;
-	inline-size: 100%;
-
-	& .indeterminate {
-		background-color: var(#{connotation.$vvd-color-connotation});
-	}
-}
-
-.determinate {
-	background-color: var(#{connotation.$vvd-color-connotation});
-	block-size: 100%;
-	border-radius: $rounded-border-radius;
-	transition: all 0.2s ease-in-out;
-
-	.connotation-pacific & {
-		background-image: var(#{connotation.$vvd-color-connotation});
-	}
-}
-
-.indeterminate-indicator-1, .indeterminate-indicator-2 {
-	position: absolute;
-	animation: indeterminate-1 2s infinite;
-	animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
-	background-color: var(#{theme-consts.$vvd-color-neutral-20});
-	block-size: 100%;
-	inline-size: 30%;
-	opacity: 0;
-}
-
-.indeterminate-indicator-2 {
-	animation: indeterminate-2 2s infinite;
-	inline-size: 60%;
-}
-
-.connotation-pacific {
-	.indeterminate-indicator-1, .indeterminate-indicator-2 {
-		background-image: var(#{connotation.$vvd-color-connotation});
-	}
-}
-
-.reverse {
-	.indeterminate-indicator-1, .indeterminate-indicator-2 {
-		animation-direction: reverse;
-	}
-	.determinate {
-		position: absolute;
-		right: 0;
-	}
-}
-
-.base.shape-sharp {
-	.determinate, .indeterminate {
-		border-radius: 0;
-	}
-}
-
-.base.paused .indeterminate-indicator-1,
-.base.paused .indeterminate-indicator-2 {
-	animation-play-state: paused;
-	background-color: var(#{connotation.$vvd-color-connotation});
-}
-.base.paused .determinate {
-	background-color: var(#{theme-consts.$vvd-color-neutral-40});
-}
-@keyframes indeterminate-1 {
-	0% {
-		opacity: 1;
-		transform: translateX(-100%);
-	}
-	70% {
-		opacity: 1;
-		transform: translateX(300%);
-	}
-	70.01% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 0;
-		transform: translateX(300%);
-	}
-}
-@keyframes indeterminate-2 {
-	0% {
-		opacity: 0;
-		transform: translateX(-150%);
-	}
-	29.99% {
-		opacity: 0;
-	}
-	30% {
-		opacity: 1;
-		transform: translateX(-150%);
-	}
-	100% {
-		opacity: 1;
-		transform: translateX(166.66%);
-	}
-}

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

@@ -1,173 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,90 +0,0 @@
-# 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

@@ -1,15 +0,0 @@
-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

@@ -1,75 +0,0 @@
-@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);
-	}
-}