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

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>
-```

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%);
-	}
-}