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

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

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

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

@@ -1,82 +0,0 @@
-import {html, when} from '@microsoft/fast-element';
-import type { ViewTemplate } from '@microsoft/fast-element';
-import type {
-	ElementDefinitionContext,
-	FoundationElementDefinition,
-} from '@microsoft/fast-foundation';
-import { classNames } from '@microsoft/fast-web-utilities';
-import type { ProgressRing } from './progress-ring';
-
-const getClasses = (_: ProgressRing) => classNames(
-	'base',
-	[`connotation-${_.connotation}`, !!_.connotation],
-);
-const progressSegments: number = 44;
-
-/**
- * The template for the {@link @microsoft/fast-foundation#ProgressRing} component.
- *
- * @param context
- * @param _
- * @param definition
- * @public
- */
-export const ProgressRingTemplate: (
-	context: ElementDefinitionContext,
-	definition: FoundationElementDefinition
-) => ViewTemplate<ProgressRing> = (
-	_: ElementDefinitionContext
-) => 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<ProgressRing>`
-                <svg
-                    class="progress"
-                    viewBox="0 0 16 16"
-                >
-                    <circle
-                        class="background"
-                        cx="8px"
-                        cy="8px"
-                        r="7px"
-                    ></circle>
-                    <circle
-                        class="determinate"
-                        style="stroke-dasharray: ${x =>
-		(progressSegments * x.percentComplete) /
-    100}px ${progressSegments}px"
-                        cx="8px"
-                        cy="8px"
-                        r="7px"
-                    ></circle>
-                </svg>
-            `
-	)}
-        ${when(
-		x => typeof x.value !== 'number', html<ProgressRing>`
-            <svg class="progress" viewBox="0 0 16 16">
-              <circle
-                class="background"
-                cx="8px"
-                cy="8px"
-                r="7px"
-              ></circle>
-              <circle
-                class="indeterminate-indicator-1"
-                cx="8px"
-                cy="8px"
-                r="7px"
-              ></circle>
-            </svg>
-            `
-	)}
-    </div>
-`;
-

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

@@ -1,18 +0,0 @@
-import {BaseProgress} from '@microsoft/fast-foundation';
-import {attr} from '@microsoft/fast-element';
-import type {Connotation} from '../enums';
-
-export type ProgressRingConnotation =
-	Connotation.Primary |
-	Connotation.Success |
-	Connotation.Alert |
-	Connotation.CTA;
-
-/**
- * Base class for progress-ring
- *
- * @public
- */
-export class ProgressRing extends BaseProgress {
-	@attr() connotation?: ProgressRingConnotation;
-}

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

@@ -1,35 +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-ring'];
-
-test('should show the component', async ({ page }: { page: Page }) => {
-	const template = `
-	  <vwc-progress-ring min="0" max="100" value="50" connotation="primary"></vwc-progress-ring>
-	  <vwc-progress-ring min="0" max="100" value="50" connotation="cta"></vwc-progress-ring>
-	  <vwc-progress-ring min="0" max="100" value="33" connotation="alert"></vwc-progress-ring>
-	  <vwc-progress-ring min="0" max="100" value="66" connotation="success"></vwc-progress-ring>
-	  <vwc-progress-ring min="0" max="100" value="77" paused></vwc-progress-ring>
-	`;
-
-	await loadComponents({
-		page,
-		components,
-	});
-	await loadTemplate({
-		page,
-		template,
-	});
-
-	const testWrapper = await page.$('#wrapper');
-
-	await page.waitForLoadState('networkidle');
-
-	expect(await testWrapper?.screenshot()).toMatchSnapshot(
-		'./snapshots/progress-ring.png'
-	);
-});

package/src/lib/side-drawer/README.md

@@ -1,304 +0,0 @@
-# side-drawer
-
-```js
-<script type='module'>
-    import '@vonage/vivid/side-drawer';
-</script>
-```
-
-## Open
-Use the `open` attribute to indicate whether the side drawer is open.
-You can also close the side drawer by pressing the `ESC` key.
-
-- Type: `Boolean`
-- Default: `false`
-
-```html preview
-<style>
-    vwc-side-drawer#sideDrawer{
-        --side-drawer-background-color: var(--vvd-color-neutral-10);
-        --side-drawer-inline-size: 200px;
-    }
-</style>
-<vwc-side-drawer id="sideDrawer" open>
-	<div>
-		<vwc-sidenav-item href="#" text="1st level item" icon="home-line"></vwc-sidenav-item>
-        <p><vwc-text font-face="body-2-bold">SECTION TITLE</vwc-text></p>
-        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
-        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
-	</div>
-	<div slot="app-content">
-        <vwc-button id="button" shape="pill" icon='menu-solid'></vwc-button>
-        <vwc-text font-face="body-1">
-            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
-            standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
-            a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
-            remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
-            Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
-            of Lorem Ipsum.
-        </vwc-text>
-	</div>
-</vwc-side-drawer>
-<script>
-  button.addEventListener('click', toggleOpen);
-  function toggleOpen() {
-	  sideDrawer.open = !sideDrawer.open;
-  }
-</script>
-```
-
-## Modal
-
-Use the `modal` attribute to set the side drawer's type to modal.
-Click on the `scrim` or the `ESC` key to close the modal side-drawer.
-
-- Type: `Boolean`
-- Default: `false`
-
-```html preview
-<style>
-    vwc-side-drawer#sideDrawer{
-        --side-drawer-background-color: var(--vvd-color-neutral-10);
-        --side-drawer-inline-size: 200px;
-    }
-</style>
-<vwc-side-drawer id="sideDrawer" open modal>
-	<div>
-		<vwc-sidenav-item href="#" text="1st level item" icon="home-line"></vwc-sidenav-item>
-        <p><vwc-text font-face="body-2-bold">SECTION TITLE</vwc-text></p>
-        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
-        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
-	</div>
-	<div slot="app-content">
-        <vwc-button id="button" shape="pill" icon='menu-solid'></vwc-button>
-        <vwc-text font-face="body-1">
-            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
-            standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
-            a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
-            remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
-            Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
-            of Lorem Ipsum.
-        </vwc-text>
-	</div>
-</vwc-side-drawer>
-<script>
-  button.addEventListener('click', toggleOpen);
-  function toggleOpen() {
-	  sideDrawer.open = !sideDrawer.open;
-  }
-</script>
-```
-## Alternate
-
-Use the `alternate` attribute to apply scheme alternate region.
-
-- Type: `Boolean`
-- Default: `false`
-
-```html preview
-<style>
-    vwc-side-drawer#sideDrawer{
-        --side-drawer-background-color: var(--vvd-color-neutral-10);
-        --side-drawer-inline-size: 200px;
-    }
-</style>
-<vwc-side-drawer id="sideDrawer" open alternate>
-	<div>
-		<vwc-sidenav-item href="#" text="1st level item" icon="home-line"></vwc-sidenav-item>
-        <p><vwc-text font-face="body-2-bold">SECTION TITLE</vwc-text></p>
-        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
-        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
-	</div>
-	<div slot="app-content">
-        <vwc-button id="button" shape="pill" icon='menu-solid'></vwc-button>
-        <vwc-text font-face="body-1">
-            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
-            standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
-            a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
-            remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
-            Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
-            of Lorem Ipsum.
-        </vwc-text>
-	</div>
-</vwc-side-drawer>
-<script>
-  button.addEventListener('click', toggleOpen);
-  function toggleOpen() {
-	  sideDrawer.open = !sideDrawer.open;
-  }
-</script>
-```
-## Position
-
-Use the `position` attribute to set the side of the side drawer.
-
-- Type: `"start" | "end"`
-- Default: `"start"`
-
-```html preview
-<style>
-    vwc-side-drawer#sideDrawer{
-        --side-drawer-background-color: var(--vvd-color-neutral-10);
-        --side-drawer-inline-size: 200px;
-    }
-    vwc-button#button{
-        margin-left: calc(100% - 40px);
-    }
-</style>
-<vwc-side-drawer id="sideDrawer" open position="end">
-	<div>
-		<vwc-sidenav-item href="#" text="1st level item" icon="home-line"></vwc-sidenav-item>
-        <p><vwc-text font-face="body-2-bold">SECTION TITLE</vwc-text></p>
-        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
-        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
-	</div>
-	<div slot="app-content">
-        <vwc-button id="button" shape="pill" icon='menu-solid'></vwc-button>
-        <vwc-text font-face="body-1">
-            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
-            standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
-            a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
-            remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
-            Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
-            of Lorem Ipsum.
-        </vwc-text>
-	</div>
-</vwc-side-drawer>
-<script>
-  button.addEventListener('click', toggleOpen);
-  function toggleOpen() {
-	  sideDrawer.open = !sideDrawer.open;
-  }
-</script>
-```
-## Slots
-
-### Top Bar
-
-To add a top bar to the side drawer, add a slot called `top-bar`.
-
-```js
-<div slot="top-bar">
-    <vwc-text>VIVID</vwc-text>
-</div>
-```
-```html preview
-<style>
-    vwc-side-drawer#sideDrawer{
-        --side-drawer-background-color: var(--vvd-color-neutral-10);
-        --side-drawer-inline-size: 200px;
-    }
-</style>
-<vwc-side-drawer id="sideDrawer" open>
-	<div slot="top-bar">
-        <vwc-text font-face="subtitle-1">VIVID</vwc-text>
-    </div>
-	<div>
-		<vwc-sidenav-item href="#" text="1st level item" icon="home-line"></vwc-sidenav-item>
-        <p><vwc-text font-face="body-2-bold">SECTION TITLE</vwc-text></p>
-        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
-        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
-	</div>
-	<div slot="app-content">
-        <vwc-button id="button" shape="pill" icon='menu-solid'></vwc-button>
-        <vwc-text font-face="body-1">
-            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
-            standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
-            a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
-            remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
-            Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
-            of Lorem Ipsum.
-        </vwc-text>
-	</div>
-</vwc-side-drawer>
-<script>
-  button.addEventListener('click', toggleOpen);
-  function toggleOpen() {
-	  sideDrawer.open = !sideDrawer.open;
-  }
-</script>
-```
-
-### App-content
-
-To add content aside the side-drawer, add a slot called `app-content`.
-
-```js
-<div slot="app-content">
-    <vwc-text font-face="body-1">
-        This is the app-content slot!!!!
-    </vwc-text>
-</div>
-```
-```html preview
-<style>
-    vwc-side-drawer#sideDrawer{
-        --side-drawer-background-color: var(--vvd-color-neutral-10);
-        --side-drawer-inline-size: 200px;
-    }
-</style>
-<vwc-side-drawer id="sideDrawer" open>
-	<div>
-		<vwc-sidenav-item href="#" text="1st level item" icon="home-line"></vwc-sidenav-item>
-        <p><vwc-text font-face="body-2-bold">SECTION TITLE</vwc-text></p>
-        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
-        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
-	</div>
-	<div slot="app-content">
-        <vwc-button id="button" shape="pill" icon='menu-solid'></vwc-button>
-        <vwc-text font-face="body-1">
-          This is the app-content slot!!!!
-        </vwc-text>
-	</div>
-</vwc-side-drawer>
-<script>
-  button.addEventListener('click', toggleOpen);
-  function toggleOpen() {
-	  sideDrawer.open = !sideDrawer.open;
-  }
-</script>
-```
-
-## CSS Custom Properties
-
-### Background-color
-- `--side-drawer-background-color`
-- Type: `String`
-- Default: Current theme's canvas (background) color
-
-Controls the background of the side drawer.
-
-### Color
-- `--side-drawer-color`
-- Type: `String`
-- Default: Current theme's on-canvas (text) color
-
-Controls the color of the side drawer.    
-
-### Inline-size
-- `--side-drawer-inline-size`
-- Type: `Number`
-- Default: `280px`
-
-Controls the inline size of the side drawer.   
-
-### Padding-body
-- `--side-drawer-padding-body`
-- Type: `Number`
-- Default: `16px`
-
-Controls the padding of the side drawer's body.   
-
-### Padding-top-bar
-- `--side-drawer-padding-top-bar`
-- Type: `Number`
-- Default: `16px`
-
-Controls the padding of the side drawer's top bar.   
-
-### Z-index
-- `--side-drawer-z-index`
-- Type: `Number`
-- Default: `6`
-
-Controls the z-index of the side drawer.   

package/src/lib/side-drawer/index.ts

@@ -1,16 +0,0 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { designSystem } from '../../shared/design-system';
-import { SideDrawer } from './side-drawer';
-import styles from './side-drawer.scss';
-import { sideDrawerTemplate as template } from './side-drawer.template';
-
-/**
- * Represents a side-drawer custom element.
- */
-export const VIVIDSideDrawer = SideDrawer.compose<FoundationElementDefinition>({
-	baseName: 'side-drawer',
-	template: template as any,
-	styles,
-});
-
-designSystem.register(VIVIDSideDrawer());

package/src/lib/side-drawer/partials/variables.scss

@@ -1,6 +0,0 @@
-$side-drawer-padding-top-bar: --side-drawer-padding-top-bar;
-$side-drawer-padding-body: --side-drawer-padding-body;
-$side-drawer-inline-size: --side-drawer-inline-size;
-$side-drawer-z-index: --side-drawer-z-index;
-$side-drawer-background-color: --side-drawer-background-color;
-$side-drawer-color: --side-drawer-color;