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

package/src/lib/popup/popup.ts

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

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

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

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

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