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

package/src/lib/layout/index.ts

@@ -1,18 +0,0 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { designSystem } from '../../shared/design-system';
-import { Layout } from './layout';
-import styles from './layout.scss';
-import { layoutTemplate as template } from './layout.template';
-
-
-/**
- * Represents a layout custom element.
- * layout is...
- */
-export const VIVIDLayout = Layout.compose<FoundationElementDefinition>({
-	baseName: 'layout',
-	template: template as any,
-	styles,
-});
-
-designSystem.register(VIVIDLayout());

package/src/lib/layout/layout.scss

@@ -1,40 +0,0 @@
-@use 'sass:map';
-
-@use 'partials/variables' as variables;
-@use 'partials/mixins' as mixins;
-@use 'partials/functions' as functions;
-
-.control {
-	display: grid;
-	grid-auto-rows: min-content;
-
-	@include mixins.measurement(map.keys(variables.$bases)...) using ($basis) {
-		#{functions.get-selector-with-default(".column-basis", $basis, 'base', map.keys(variables.$bases))} {
-			grid-template-columns: var(
-				#{variables.$layout-grid-template-columns},
-				repeat(
-					var(#{variables.$auto-sizing}),
-					minmax(map.get(variables.$bases, $basis), 1fr)
-				)
-			);
-		}
-	}
-
-	@include mixins.measurement(map.keys(variables.$spaces)...) using ($space) {
-		#{functions.get-selector-with-default(".column-spacing", $space, 'base', map.keys(variables.$spaces))} {
-			gap: map.get(variables.$spaces, $space);
-		}
-	}
-
-	@include mixins.measurement(map.keys(variables.$spaces)...) using ($space) {
-		&.gutters-#{$space} {
-			margin: map.get(variables.$spaces, $space);
-		}
-	}
-
-	@include mixins.measurement(map.keys(variables.$auto-sizes)...) using ($size) {
-		#{functions.get-selector-with-default(".auto-sizing", $size, fit, map.keys(variables.$auto-sizes))} {
-			#{variables.$auto-sizing}: map.get(variables.$auto-sizes, $size);
-		}
-	}
-}

package/src/lib/layout/layout.spec.ts

@@ -1,73 +0,0 @@
-import { elementUpdated, fixture, getControlElement } from '@vivid-nx/shared';
-import { Size } from '../enums';
-import { AUTO_SIZING, Layout } from './layout';
-import '.';
-
-const COMPONENT_TAG = 'vwc-layout';
-
-describe('vwc-layout', () => {
-	let element: Layout;
-
-	beforeEach(async () => {
-		element = await fixture(`<${COMPONENT_TAG}>
-									<div style="border: 1px solid">test</div>
-									<div style="border: 1px solid">test</div>
-								</${COMPONENT_TAG}>`) as Layout;
-	});
-
-	describe('basic', () => {
-		it('initializes as a vwc-layout', async () => {
-			expect(element).toBeInstanceOf(Layout);
-			expect(element.gutters).toBeUndefined();
-			expect(element.columnBasis).toBeUndefined();
-			expect(element.columnSpacing).toBeUndefined();
-			expect(element.autoSizing).toBeUndefined();
-		});
-	});
-
-	describe('gutters', () => {
-		it('should set correct internal gutters class', async () => {
-			const gutters = Size.BaseLarge;
-
-			expect(getControlElement(element).classList.toString()).toEqual('control');
-			element.gutters = gutters;
-			await elementUpdated(element);
-			expect(getControlElement(element).classList.toString()).toEqual(`control gutters-${gutters}`);
-		});
-	});
-
-
-	describe('column-basis', () => {
-		it('should set correct internal column-basis style', async () => {
-			const columnBasis = Size.BaseLarge;
-
-			expect(getControlElement(element).classList.toString()).toEqual('control');
-			element.columnBasis = columnBasis;
-			await elementUpdated(element);
-			expect(getControlElement(element).classList.toString()).toEqual(`control column-basis-${columnBasis}`);
-		});
-	});
-
-	describe('column-spacing', () => {
-		it('should set correct internal column-spacing style', async () => {
-			const columnSpacing = Size.BaseLarge;
-
-			expect(getControlElement(element).classList.toString()).toEqual('control');
-			element.columnSpacing = columnSpacing;
-			await elementUpdated(element);
-			expect(getControlElement(element).classList.toString()).toEqual(`control column-spacing-${columnSpacing}`);
-		});
-	});
-
-
-	describe('auto-sizing', () => {
-		it('should set correct internal auto-sizing style', async () => {
-			const autoSizing = AUTO_SIZING.Fill;
-
-			expect(getControlElement(element).classList.toString()).toEqual('control');
-			element.autoSizing = autoSizing;
-			await elementUpdated(element);
-			expect(getControlElement(element).classList.toString()).toEqual(`control auto-sizing-${autoSizing}`);
-		});
-	});
-});

package/src/lib/layout/layout.template.ts

@@ -1,29 +0,0 @@
-import { html } 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 { Layout } from './layout';
-
-const getClasses = ({
-	columnBasis, gutters, columnSpacing, autoSizing
-}: Layout) => classNames(
-	'control',
-	[`column-basis-${columnBasis}`, Boolean(columnBasis)],
-	[`gutters-${gutters}`, Boolean(gutters)],
-	[`column-spacing-${columnSpacing}`, Boolean(columnSpacing)],
-	[`auto-sizing-${autoSizing}`, Boolean(autoSizing)],
-);
-
-/**
- * The template for the {@link @vonage/vivid#Layout} component.
- *
- * @returns {ViewTemplate<Layout>} A template capable of creating HTMLView instances or rendering directly to DOM.
- * @public
- */
-export const layoutTemplate: (
-	context: ElementDefinitionContext,
-	definition: FoundationElementDefinition
-) => ViewTemplate<Layout> = () => html`
-        <div class="${getClasses}">
-			<slot></slot>
-		</div>`;

package/src/lib/layout/layout.ts

@@ -1,46 +0,0 @@
-import { attr } from '@microsoft/fast-element';
-import { FoundationElement } from '@microsoft/fast-foundation';
-import type { Size } from '../enums.js';
-
-
-export enum AUTO_SIZING { Fit = 'fit', Fill = 'fill' }
-type Gutters = Extract<Size, Size.BaseSmall | Size.Base | Size.BaseLarge>;
-type ColumnSpacing = Extract<Size, Size.BaseSmall | Size.Base | Size.BaseLarge>;
-type ColumnBasis = Extract<Size, Size.BaseSmall | Size.Base | Size.BaseLarge> | 'block';
-
-/**
- * Base class for layout
- *
- * @cssprop [--layout-grid-template-columns=repeat([the `auto-sizing` mapped value],
- * minmax([the `column-basis` mapped value], 1fr))] - Controls the `grid-template-columns` of the layout.
- * @public
- */
-export class Layout extends FoundationElement {
-	/**
-	 * sets the initial preferred margin from predefined available options
-	 *
-	 * @public
-	 */
-	@attr gutters?: Gutters;
-
-	/**
-	 * sets the initial preferred measure of a column from predefined available options
-	 *
-	 * @public
-	 */
-	@attr({ attribute: 'column-basis' }) columnBasis?: ColumnBasis;
-
-	/**
-	 * sets the initial preferred spacing of a column from predefined available options
-	 *
-	 * @public
-	 */
-	@attr({ attribute: 'column-spacing' }) columnSpacing?: ColumnSpacing;
-
-	/**
-	 * sets the initial preferred auto-sizing from predefined available options
-	 *
-	 * @public
-	 */
-	@attr({ attribute: 'auto-sizing' }) autoSizing?: AUTO_SIZING;
-}

package/src/lib/layout/partials/_functions.scss

@@ -1,15 +0,0 @@
-@function get-default-selector($list, $prefix) {
-	$selector: '';
-	@each $item in $list {
-		$selector: $selector + ':not(#{$prefix}-#{$item})';
-	}
-	@return $selector;
-}
-
-@function get-selector-with-default($prefix, $key, $default-key, $all-keys) {
-	$selector: '&#{$prefix}-#{$key}';
-	@if $key == $default-key {
-		$selector: '&#{get-default-selector($all-keys, $prefix)}', $selector;
-	}
-	@return $selector;
-}

package/src/lib/layout/partials/_mixins.scss

@@ -1,5 +0,0 @@
-@mixin measurement($types...) {
-	@each $type in $types {
-		@content($type);
-	}
-}

package/src/lib/layout/partials/_variables.scss

@@ -1,23 +0,0 @@
-$auto-sizing: --_auto-sizing; // interior. not API
-$layout-grid-template-columns: --layout-grid-template-columns;
-
-/* #region SIZEs */
-$auto-sizes: (
-	fill: auto-fill,
-	fit: auto-fit,
-);
-
-/* #region BASES */
-$bases: (
-	base-small: 10rem,
-	base: 20rem,
-	base-large: 30rem,
-	block: 1fr
-);
-
-/* #region SPACES */
-$spaces: (
-	base-small: 16px,
-	base: 24px,
-	base-large: 32px,
-);

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

@@ -1,32 +0,0 @@
-import * as path from 'path';
-import { expect, test } from '@playwright/test'; 
-import type { Page } from '@playwright/test';
-import {
-	extractHTMLBlocksFromReadme,
-	loadComponents,
-	loadTemplate
-} from '../../visual-tests/visual-tests-utils.ts';
-
-const components = ['layout'];
-test('should show the component', async ({ page }: { page: Page }) => {
-	const template = extractHTMLBlocksFromReadme(path.join(new URL('.', import.meta.url).pathname, 'README.md'))
-		.reduce((htmlString: string, block: string) => `${htmlString} <div style="margin: 5px;">${block}</div>`, '');
-
-	await loadComponents({
-		page,
-		components,
-	});
-	await loadTemplate({
-		page,
-		template,
-	});
-
-	const testWrapper = await page.$('#wrapper');
-
-	await page.waitForLoadState('networkidle');
-
-	expect(await testWrapper?.screenshot())
-		.toMatchSnapshot(
-			'./snapshots/layout.png',
-		);
-});

package/src/lib/popup/README.md

@@ -1,261 +0,0 @@
-# popup
-
-Popup are used to display a message or notification to the user and are displayed on top of all other web page elements.
-Popup's goal is to provide additional, helpful content. To trigger the Popup, it should be paired with an anchor (e.g., a button). 
-
-```js
-<script type='module'>
-    import '@vonage/vivid/popup';
-</script>
-```
-## Anchor
-
-Use the `anchor` attribute to reference the ID to element in the popup’s owner document.
-
-The popup is positioned absolutely to its anchor.  It is recommended to wrap it with a div element and set its position `relative`.
-
-- Type: `string`
-- Default: `''`
-
-```js
-<div class="wrapper" style="position:relative;">
-  <vwc-button id="anchor"></vwc-button>
-  <vwc-popup anchor="anchor"></vwc-popup>
-</div>
-```
-## Open
-Use the `open` attribute to indicate whether the popup is open.
-
-- Type: `boolean`
-- Default: `false`
-
-```html preview
-<style>
-  .content {
-    width: 200px;
-    padding: 1rem;
-	}
-  .wrapper{
-    width: 100%;
-    height: 120px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-</style>
-<div class="wrapper">
-  <vwc-button id="anchor1" appearance='outlined' label='Click on me!'></vwc-button>
-  <vwc-popup id="popup" anchor="anchor1" open>
-      <div class="content">
-        <vwc-text tight font-face="body-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</vwc-text>
-      </div>
-  </vwc-popup>
-</div>
-<script>
-  anchor1.addEventListener('click', toggleOpen);
-  function toggleOpen() {
-	  popup.open = !popup.open;
-  }
-</script>
-```
-
-## Dismissible
-
-Add the `dismissible` attribute to add a close button to the popup.
-
-- Type: `boolean`
-- Default: `false`
-
-```html preview
-<style>
-  .content {
-    width: 120px;
-    padding: 1rem;
-	}
-  .wrapper{ 
-    width: 100%;
-    height: 120px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-</style>
-<div class="wrapper">
-  <vwc-button id="anchor2" appearance='outlined' label='Click on me!'></vwc-button>
-  <vwc-popup id="popup" anchor="anchor2" open dismissible>
-      <div class="content">
-        <vwc-text tight font-face="body-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</vwc-text>
-      </div>
-  </vwc-popup>
-</div>
-<script>
-  anchor2.addEventListener('click', toggleOpen);
-  function toggleOpen() {
-	  popup.open = !popup.open;
-  }
-</script>
-```
-## Arrow
-Add the `arrow` attribute to add a small triangle to indicate the trigger element.
-
-- Type: `boolean`
-- Default: `false`
-
-```html preview
-<style>
-  .content {
-    width: 200px;
-    padding: 1rem;
-	}
-  .wrapper{
-    width: 100%;
-    height: 120px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-</style>
-<div class="wrapper">
-  <vwc-icon id="anchor3" type='info-line'></vwc-icon>
-  <vwc-popup anchor="anchor3" open arrow>
-      <div class="content">
-        <vwc-text tight font-face="body-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</vwc-text>
-      </div>
-  </vwc-popup>
-</div>
-```
-## Alternate
-Add the `alternate` attribute to set the color-scheme to dark or light (depending on current user's system settings).
-
-- Type: `boolean`
-- Default: `false`
-
-```html preview
-<style>
-  .content {
-    width: 200px;
-    padding: 1rem;
-	}
-  .wrapper{
-    width: 100%;
-    height: 120px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-</style>
-<div class="wrapper">
-  <vwc-icon id="anchor4" type='info-line'></vwc-icon>
-  <vwc-popup anchor="anchor4" open alternate>
-      <div class="content">
-        <vwc-text tight font-face="body-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</vwc-text>
-      </div>
-  </vwc-popup>
-</div>
-```
-## Corner
-
-Use the `corner` attribute to set the placement of the popup around the anchor.
-
-- Type: `'top'` | `'top-start'` | `'top-end'` | `'right'` | `'right-start'` | `'right-end'` | `'bottom'` | `'bottom-start'` | `'bottom-end'`| `'left'` | `'left-start'`| `'left-end'`
-- Default: `'left'`
-
-```html preview
-<style>
-  .contentWrapper{
-    width: 70px;
-    padding: 0.25rem;
-  }
-	.square {
-		height: 150px;
-		width: 300px;
-		background-color: var(--vvd-color-neutral-10);;
-	  }
-	.wrapper{
-		width: 100%;
-		height: 250px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	  }
-	</style>
-	<div class="wrapper">
-	<div id="anchor5" class="square"></div>
-	<vwc-popup id="popup" anchor="anchor5" open corner="right-end">
-    <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">
-    <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">
-    <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">
-    <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">
-    <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">
-    <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">
-    <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">
-    <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">
-    <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">
-    <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">
-    <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">
-    <div class="contentWrapper">
-			<vwc-text tight font-face="body-2">bottom-start</vwc-text>
-    </div>
-	</vwc-popup>
-	</div>
-```
-## Caveat
-
-Document elements display precedence is formed by the imaginary z-axis [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context), commonly by order of which elements are rendered and special properties (e.g. _z-index_).
-Popup component is a low level element, unaware of its document context, but in most cases required to overlay on top of all elements.
-
-A common practice used in apps / frameworks to promote a popup component to top other elements z-axis, is to utilise a service that dynamically appends a popup component to the end of the body element, when called for.
-
-This helps ensure elements don't render over top a popup undesirebly.
-
-## Methods
-### updatePosition()
-
-- Type: function
-- Returns: void
-
-Updates popup's position.

package/src/lib/popup/index.ts

@@ -1,21 +0,0 @@
-import '../elevation';
-import '../button';
-
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { designSystem } from '../../shared/design-system';
-import { Popup } from './popup';
-import styles from './popup.scss';
-import { popupTemplate as template } from './popup.template';
-
-
-/**
- * Represents a popup custom element.
- * popup is...
- */
-export const VIVIDPopup = Popup.compose<FoundationElementDefinition>({
-	baseName: 'popup',
-	template: template as any,
-	styles,
-});
-
-designSystem.register(VIVIDPopup());

package/src/lib/popup/popup.scss

@@ -1,43 +0,0 @@
-$popup-bg: --vvd-color-surface-4dp;
-
-.control {
-	width: min-content;
-	background-color: var(#{$popup-bg});
-	border-radius: inherit;
-	contain: layout;
-
-	&:not(.open) {
-		display: none;
-	}
-}
-
-.popup-wrapper {
-	position: fixed;
-	border-radius: 6px;
-}
-
-.popup-content {
-	display: grid;
-	color: var(--vvd-color-on-canvas);
-
-	.dismissible & {
-		align-content: start;
-		grid-template-columns: 1fr auto;
-	}
-}
-
-.arrow {
-	position: absolute;
-	z-index: -1;
-	width: 8px;
-	height: 8px;
-	background-color: var(#{$popup-bg});
-	transform: rotate(45deg);
-}
-
-.dismissible {
-	align-self: flex-start;
-	margin-block-start: 0.25rem;
-	margin-inline-end: 0.25rem;
-}
-