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

package/src/lib/popup/popup.spec.ts

@@ -1,265 +0,0 @@
-import {
-	ADD_TEMPLATE_TO_FIXTURE,
-	elementUpdated,
-	fixture,
-	getControlElement
-} from '@vivid-nx/shared';
-import * as floatingUI from '@floating-ui/dom';
-import type { Button } from '../button/button';
-import { Popup } from './popup';
-import '.';
-
-const COMPONENT_TAG = 'vwc-popup';
-
-describe('vwc-popup', () => {
-	/**
-	 *
-	 */
-	async function setupPopupToOpenWithAnchor() {
-		const anchor = await setAnchor();
-		element.anchor = 'anchor';
-		await elementUpdated(element);
-		element.open = true;
-		return anchor;
-	}
-
-	let element: Popup;
-
-	beforeEach(async () => {
-		element = await fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`) as Popup;
-		global.ResizeObserver = jest.fn()
-			.mockImplementation(() => ({
-				observe: jest.fn(),
-				unobserve: jest.fn(),
-				disconnect: jest.fn()
-			}));
-	});
-
-	afterEach(function () {
-		jest.clearAllMocks();
-	});
-
-	describe('clean observable', () => {
-		it('should clean observable on disconnectedCallback', async function () {
-			const cleanupMock = jest.fn();
-			jest.spyOn(floatingUI, 'autoUpdate').mockReturnValue(cleanupMock);
-			await setupPopupToOpenWithAnchor();
-			element.disconnectedCallback();
-			expect(cleanupMock).toHaveBeenCalled();
-		});
-
-		it('should clean observable when anchor is undefined', async function () {
-			const cleanupMock = jest.fn();
-			jest.spyOn(floatingUI, 'autoUpdate').mockReturnValue(cleanupMock);
-			await setupPopupToOpenWithAnchor();
-			element.anchor = '';
-			await elementUpdated(element);
-			expect(cleanupMock).toHaveBeenCalled();
-		});
-	});
-
-	describe('viewport visibility transition', function () {
-
-		const computePositionResult = {
-			'x': -15,
-			'y': 0,
-			'placement': 'left',
-			'strategy': 'fixed',
-			'middlewareData': {
-				'flip': {},
-				'hide': {
-					'referenceHiddenOffsets': {
-						'top': 0,
-						'right': 0,
-						'bottom': 0,
-						'left': 0
-					},
-					'referenceHidden': true
-				},
-				'inline': {},
-				'arrow': {
-					'y': 0,
-					'centerOffset': 0
-				},
-				'offset': {
-					'x': -12,
-					'y': 0
-				}
-			}
-		};
-
-		beforeEach(function () {
-			jest.spyOn(floatingUI, 'computePosition');
-		});
-
-		afterEach(function () {
-			(floatingUI.computePosition as jest.MockedFunction<any>).mockRestore();
-		});
-
-		/**
-		 * @param hidden
-		 */
-		async function makePopupHidden(hidden = true) {
-			computePositionResult.middlewareData.hide.referenceHidden = hidden;
-			(floatingUI.computePosition as jest.MockedFunction<any>).mockReturnValue(Promise.resolve(computePositionResult));
-			await element.updatePosition();
-		}
-
-		it('should be hidden when not in viewport', async function () {
-			await setupPopupToOpenWithAnchor();
-			await makePopupHidden(true);
-
-			expect(element.popupEl.style.visibility)
-				.toEqual('hidden');
-		});
-
-		it('should be hidden when not in viewport', async function () {
-			await setupPopupToOpenWithAnchor();
-			await makePopupHidden(false);
-			expect(element.popupEl.style.visibility)
-				.toEqual('visible');
-		});
-	});
-
-	describe('basic', () => {
-		it('initializes as a vwc-popup', async () => {
-			expect(element)
-				.toBeInstanceOf(Popup);
-			expect(element.open)
-				.toBeFalsy();
-			expect(element.arrow)
-				.toBeFalsy();
-			expect(element.dismissible)
-				.toBeFalsy();
-			expect(element.anchor)
-				.toBeUndefined();
-			expect(element.corner)
-				.toEqual('left');
-		});
-	});
-
-	describe('show', () => {
-		it('should set "open" to true', async () => {
-			await setAnchor();
-			element.anchor = 'anchor';
-			await elementUpdated(element);
-
-			element.open = true;
-			element.updatePosition();
-			await elementUpdated(element);
-
-			expect(element.open)
-				.toEqual(true);
-		});
-	});
-
-	describe('hide', () => {
-		it('should set "open" to false', async () => {
-			element.open = true;
-
-			element.open = false;
-			element.updatePosition();
-			await elementUpdated(element);
-
-			expect(element.open)
-				.toEqual(false);
-		});
-	});
-
-	describe('render arrow', () => {
-		it('should remove the arrow class on the container if arrow is false', async () => {
-			expect(element.shadowRoot?.querySelector('.arrow'))
-				.toBeNull();
-		});
-		it('should set the arrow class on the container if arrow is true', async () => {
-			element.arrow = true;
-			element.open = true;
-			await elementUpdated(element);
-
-			await setAnchor();
-			element.anchor = 'anchor';
-			await elementUpdated(element);
-
-			element.arrowEl = element.shadowRoot?.querySelector('.arrow') as HTMLElement;
-			element.updatePosition();
-			await elementUpdated(element);
-
-			expect(element.shadowRoot?.querySelector('.arrow'))
-				.not
-				.toBeNull();
-		});
-	});
-
-	describe('render dismiss', () => {
-		it('should remove the dismiss class on the container if dismissible is false', async () => {
-			expect(element.shadowRoot?.querySelector('.dismissible'))
-				.toBeNull();
-		});
-		it('should set the dismiss class on the container if dismissible is true', async () => {
-			element.dismissible = true;
-
-			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.dismissible'))
-				.not
-				.toBeNull();
-		});
-	});
-
-	describe('handle dismiss', () => {
-		it('should hide when dismiss button is clicked', async () => {
-			await setAnchor();
-			element.anchor = 'anchor';
-			element.dismissible = true;
-			await elementUpdated(element);
-
-			element.open = true;
-			expect(element.open)
-				.toEqual(true);
-
-			await elementUpdated(element);
-			const dismissButton = element.shadowRoot?.querySelector('vwc-button');
-			(dismissButton as HTMLElement).click();
-			await elementUpdated(element);
-
-			expect(element.open)
-				.toEqual(false);
-		});
-	});
-
-	describe('alternate', () => {
-		it('should set to alternate', async () => {
-			expect(getControlElement(element)
-				.getAttribute('part'))
-				.toEqual('');
-			element.alternate = true;
-
-			await elementUpdated(element);
-			expect(getControlElement(element)
-				.getAttribute('part'))
-				.toEqual('vvd-theme-alternate');
-		});
-	});
-
-	describe('accessibility', () => {
-		it('should set aria-hidden', async () => {
-			expect(getControlElement(element)
-				.getAttribute('aria-hidden'))
-				.toEqual('true');
-			element.open = true;
-
-			await elementUpdated(element);
-			expect(getControlElement(element)
-				.getAttribute('aria-hidden'))
-				.toEqual('false');
-		});
-	});
-
-	/**
-	 *
-	 */
-	async function setAnchor() {
-		const anchorEl = await fixture('<vwc-button id="anchor"></vwc-button>', ADD_TEMPLATE_TO_FIXTURE) as Button;
-		await elementUpdated(anchorEl);
-		return anchorEl;
-	}
-});

package/src/lib/popup/popup.template.ts

@@ -1,41 +0,0 @@
-import { html, ref, when } from '@microsoft/fast-element';
-import { classNames } from '@microsoft/fast-web-utilities';
-import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
-import type { Popup } from './popup';
-
-const getClasses = ({
-	open, dismissible, alternate
-}: Popup) => classNames(
-	'control',
-	['open', Boolean(open)],
-	['dismissible', Boolean(dismissible)],
-	['alternate', Boolean(alternate)]
-);
-
-/**
- * The template for the {@link @vonage/vivid#Popup} component.
- *
- * @returns {ViewTemplate<Popup>} A template capable of creating HTMLView instances or rendering directly to DOM.
- * @public
- */
-export const popupTemplate: (
-	context: ElementDefinitionContext,
-	definition: FoundationElementDefinition
-) => ViewTemplate<Popup> = () => html`
-  <vwc-elevation>
-    <!--the popup-wrapper is needed for alternating the inside of the popup nd not its shadow-->
-	  <div class="popup-wrapper" ${ref('popupEl')}>
-			<div class="${getClasses}" aria-hidden="${(x) => x.open ? 'false' : 'true'}"
-				part="${(x) => x.alternate ? 'vvd-theme-alternate' : ''}">
-				<div class="popup-content">
-					<slot></slot>
-					${when(x => x.dismissible,
-		html<Popup>`<vwc-button size="base-small" @click="${x => (x.open = false)}"
-						class="dismissible" icon="close-small-solid" shape="pill"></vwc-button>`)}
-				</div>
-				${when(x => x.arrow,
-		html<Popup>`<div class="arrow" ${ref('arrowEl')}></div>`)}
-			</div>
-    </div>
-  </vwc-elevation>`;

package/src/lib/popup/popup.ts

@@ -1,158 +0,0 @@
-import { attr } from '@microsoft/fast-element';
-import { FoundationElement } from '@microsoft/fast-foundation';
-import { arrow, autoUpdate, computePosition, flip, hide, inline, offset, Strategy } from '@floating-ui/dom';
-import type { Placement } from '@floating-ui/dom';
-
-/**
- * Base class for popup
- *
- * @public
- */
-export class Popup extends FoundationElement {
-	get #arrowPosition(): any { return { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }; }
-	get #padding(): number { return 0; }
-	get #distance(): number { return 12; }
-	get #strategy(): Strategy { return 'fixed'; }
-	get #middleware(): Array<any> {
-		const middleware = [flip(), hide(), inline()];
-		if (this.arrow) { middleware.push(arrow({ element: this.arrowEl, padding: this.#padding }), offset(this.#distance)); }
-		return middleware;
-	}
-
-	#cleanup?: () => void; // cleans the autoupdate
-
-	#anchorEl: Element | null | undefined;
-
-	popupEl!: HTMLElement;
-
-	arrowEl!: HTMLElement;
-
-	/**
-	 * indicates whether the popup is open
-	 *
-	 * @public
-	 * HTML Attribute: open
-	 */
-	@attr({
-		mode: 'boolean',
-	}) open = false;
-
-	/**
-	 * adds close button to the popup
-	 *
-	 * @public
-	 * HTML Attribute: dismissible
-	 */
-	@attr({
-		mode: 'boolean',
-	}) dismissible = false;
-
-	/**
-	 * adds small triangle to indicate the trigger element
-	 *
-	 * @public
-	 * HTML Attribute: arrow
-	 */
-	@attr({
-		mode: 'boolean',
-	}) arrow = false;
-
-	/**
-	 * set the color-scheme to dark
-	 *
-	 * @public
-	 * HTML Attribute: alternate
-	 */
-	@attr({
-		mode: 'boolean',
-	}) alternate = false;
-
-	/**
-	 * the placement of the popup
-	 *
-	 * @public
-	 * HTML Attribute: corner
-	 */
-	@attr({ mode: 'fromView' }) corner?: Placement = 'left';
-
-	/**
-	 * ID reference to element in the popup’s owner document.
-	 *
-	 * @public
-	 * HTML Attribute: anchor
-	 */
-	@attr anchor!: string;
-
-	constructor() {
-		super();
-	}
-
-	override disconnectedCallback(): void {
-		super.disconnectedCallback();
-		this.#cleanup?.();
-	}
-
-	override attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
-		super.attributeChangedCallback(name, oldValue, newValue);
-		switch (name) {
-			case 'anchor': {
-				this.#anchorEl = this.#getAnchorById();
-				break;
-			}
-		}
-		if (this.#anchorEl && this.popupEl) {
-			this.#cleanup = autoUpdate(this.#anchorEl, this.popupEl, () => this.updatePosition());
-		}
-		else {
-			this.#cleanup?.();
-		}
-	}
-
-	/**
-	 * Updates popup's position
-	 *
-	 * @public
-	 */
-	async updatePosition() {
-		if (!this.open || !this.#anchorEl) {
-			return;
-		}
-
-		const positionData = await computePosition(this.#anchorEl, this.popupEl, {
-			placement: this.corner,
-			strategy: this.#strategy,
-			middleware: this.#middleware
-		});
-		this.#assignPopupPosition(positionData);
-		if (this.arrow) { this.#assignArrowPosition(positionData); }
-	}
-
-	#assignPopupPosition(data: any): void {
-		const { x: popupX, y: popupY } = data;
-		const { referenceHidden } = data.middlewareData.hide;
-		Object.assign(this.popupEl.style, {
-			left: `${popupX}px`,
-			top: `${popupY}px`,
-			visibility: referenceHidden ? 'hidden' : 'visible',
-		});
-	}
-
-	#assignArrowPosition(data: any): void {
-		const { x: arrowX, y: arrowY } = data.middlewareData.arrow;
-		const side: string = this.#arrowPosition[data.placement.split('-')[0]];
-		Object.assign(this.arrowEl.style, {
-			left: `${arrowX}px`,
-			top: `${arrowY}px`,
-			right: '',
-			bottom: '',
-			[side]: '-4px',
-		});
-	}
-
-	/**
-	 * Gets the anchor element by id
-	 */
-	#getAnchorById(): HTMLElement | null {
-		return document.getElementById(this.anchor);
-	}
-}

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

@@ -1,111 +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 = ['popup', 'text', 'icon', 'button'];
-test('should show the component', async ({ page }: { page: Page }) => {
-	const template =`
-	<style>
-  .contentWrapper{
-    width: 70px;
-    padding: 0.25rem;
-  }
-	.square {
-		height: 150px;
-		width: 400px;
-	  }
-	.wrapper{
-		width: 100%;
-		height: 300px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background-color: grey;
-
-	  }
-	</style>
-	<div class="wrapper">
-	<div id="anchor5" class="square"></div>
-	<vwc-popup id="popup" anchor="anchor5" open corner="right-end" alternate>
-    <div class="contentWrapper">
-			<vwc-text tight font-face="body-2">right-end</vwc-text>
-    </div>
-	</vwc-popup>
-	<vwc-popup id="popup" anchor="anchor5" open corner="right" arrow>
-    <div class="contentWrapper">
-		  <vwc-text tight font-face="body-2">right</vwc-text>
-    </div>
-	</vwc-popup>
-	<vwc-popup id="popup" anchor="anchor5" open corner="right-start" dismissible>
-    <div class="contentWrapper">
-		  <vwc-text tight font-face="body-2">right-start</vwc-text>
-    </div>
-	</vwc-popup>
-	<vwc-popup id="popup" anchor="anchor5" open corner="left-end" alternate>
-    <div class="contentWrapper">
-			<vwc-text tight font-face="body-2">left-end</vwc-text>
-    </div>
-	</vwc-popup>
-	<vwc-popup id="popup" anchor="anchor5" open corner="left" arrow>
-    <div class="contentWrapper">
-		  <vwc-text tight font-face="body-2">left</vwc-text>
-    </div>
-	</vwc-popup>
-	<vwc-popup id="popup" anchor="anchor5" open corner="left-start" dismissible>
-    <div class="contentWrapper">
-			<vwc-text tight font-face="body-2">left-start</vwc-text>
-    </div>
-	</vwc-popup>
-	<vwc-popup id="popup" anchor="anchor5" open corner="top-end" alternate>
-    <div class="contentWrapper">
-			<vwc-text tight font-face="body-2">top-end</vwc-text>
-    </div>
-	</vwc-popup>
-	<vwc-popup id="popup" anchor="anchor5" open corner="top" arrow>
-    <div class="contentWrapper">
-		  <vwc-text tight font-face="body-2">top</vwc-text>
-    </div>
-	</vwc-popup>
-	<vwc-popup id="popup" anchor="anchor5" open corner="top-start" dismissible>
-    <div class="contentWrapper">
-			<vwc-text tight font-face="body-2">top-start</vwc-text>
-    </div>
-	</vwc-popup>
-	<vwc-popup id="popup" anchor="anchor5" open corner="bottom-end" alternate>
-    <div class="contentWrapper">
-			<vwc-text tight font-face="body-2">bottom-end</vwc-text>
-    </div>
-	</vwc-popup>
-	<vwc-popup id="popup" anchor="anchor5" open corner="bottom" arrow>
-    <div class="contentWrapper">
-			<vwc-text tight font-face="body-2">bottom</vwc-text>
-    </div>
-	</vwc-popup>
-	<vwc-popup id="popup" anchor="anchor5" open corner="bottom-start" dismissible>
-    <div class="contentWrapper">
-			<vwc-text tight font-face="body-2">bottom-start</vwc-text>
-    </div>
-	</vwc-popup>
-	</div>
-	`;
-
-	await loadComponents({
-		page,
-		components,
-	});
-	await loadTemplate({
-		page,
-		template,
-	});
-
-	const testWrapper = await page.$('#wrapper');
-	await page.waitForLoadState('networkidle');
-
-	expect(await testWrapper?.screenshot())
-		.toMatchSnapshot(
-			'./snapshots/popup.png',
-		);
-});

package/src/lib/progress/README.md

@@ -1,107 +0,0 @@
-# progress
-
-Progress 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';</script>
-```
-
-
-## API
-
-### Min/Max
-Use `min`, `max` in order to determine the range of the progress.
-
-- Type: `number`
-- Default: `undefined`
-
-```html preview
-    <vwc-progress min="0" max="50" value="12.5"></vwc-progress>
-```
-
-### Value
-Use `value` in order to set the state of the progress. String value will set the state to `indetermintate`.
-
-- Type: `number` | `string`
-- Default: `undefined`
-
-```html preview
-    <vwc-progress min="0" max="50" value="12.5"></vwc-progress>
-```
-
-### Paused
-Use the `paused` attribute to show a disabled state of the progress.
-
-- Type: `boolean`
-- Default: `false`
-
-```html preview
-    <h2>Determinate</h2>
-    <vwc-progress min="0" max="50" value="25" paused></vwc-progress>
-    <br/>
-    <br/>
-    <h2>Indeterminate</h2>
-    <vwc-progress min="0" max="50" value="indeterminate" paused></vwc-progress>
-```
-
-### Reverse
-
-Use the `reverse` attribute to set the progress from right to left.
-
-- Type: `boolean`
-- Default: `false`
-
-```html preview
-    <vwc-progress min="0" max="50" value="25" reverse></vwc-progress>
-    <br/>
-    <br/>
-    <vwc-progress min="0" max="50" value="indeterminate" reverse></vwc-progress>
-```
-### Connotation
-- Type: `'primary'` | `'cta'` | `'success'` | `'alert'` | `'pacific'`
-- Default: `'primary'`
-
-```html preview
-    <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>
-```
-
-### Shape
-Use the `shape` attribute in order to set `rounded` and `sharp` borders.
-
-- Type: `'rounded'` | `'sharp'`
-- Default: `'rounded'`
-
-```html preview
-    <vwc-progress min="0" max="50" value="25" shape="rounded"></vwc-progress>
-    <br/>
-    <br/>
-    <vwc-progress min="0" max="50" value="25"></vwc-progress>
-```
-
-## 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 min="0" max="50" value="12.5"></vwc-progress>
-```
-
-### Indeterminate
-Set `value` to be a non-number value (e.g. `indeterminate`) to show an indeterminate state.
-```html preview
-    <vwc-progress min="0" max="50" value="indeterminate"></vwc-progress>
-```