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

package/src/lib/breadcrumb/breadcrumb.ts

@@ -1,10 +0,0 @@
-import { Breadcrumb as FoundationElement } from '@microsoft/fast-foundation';
-
-/**
- * Base class for breadcrumb
- *
- * @public
- */
-export class Breadcrumb extends FoundationElement {
-
-}

package/src/lib/breadcrumb/index.ts

@@ -1,13 +0,0 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { breadcrumbTemplate as template } from '@microsoft/fast-foundation';
-import { designSystem } from '../../shared/design-system';
-import styles from './breadcrumb.scss';
-import { Breadcrumb } from './breadcrumb';
-
-export const vividBreadcrumb = Breadcrumb.compose<FoundationElementDefinition>({
-	baseName: 'breadcrumb',
-	template,
-	styles,
-});
-
-designSystem.register(vividBreadcrumb());

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

@@ -1,36 +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 = ['breadcrumb', 'breadcrumb-item'];
-
-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/breadcrumb.png'
-	);
-});

package/src/lib/breadcrumb-item/README.md

@@ -1,40 +0,0 @@
-# breadcrumb-item
-
-```js
-<script type="module">import '@vonage/vivid/breadcrumb-item';</script>
-```
-
-## Link
-
-```html preview
-<vwc-breadcrumb-item 
-  text="Breadcrumb" 
-  href="https://vivid.vonage.com"></vwc-breadcrumb-item>
-```
-
-## Text
-
-```html preview
-<vwc-breadcrumb-item 
-  text="Breadcrumb" ></vwc-breadcrumb-item>
-```
-
-## Combined
-
-```html preview
-<div style="display: flex">
-<vwc-breadcrumb-item 
-  text="Breadcrumb" 
-  href="https://vivid.vonage.com"></vwc-breadcrumb-item>
-
-<vwc-breadcrumb-item 
-  text="Breadcrumb" 
-  href="https://vivid.vonage.com"></vwc-breadcrumb-item>
-  
-<vwc-breadcrumb-item 
-  text="..."></vwc-breadcrumb-item>
-  
-<vwc-breadcrumb-item 
-  text="Breadcrumb" ></vwc-breadcrumb-item>
-</div>
-```

package/src/lib/breadcrumb-item/breadcrumb-item.scss

@@ -1,28 +0,0 @@
-@use '../../../../shared/src/lib/sass/mixins/typography' as typography;
-@use '../../../../../node_modules/@vonage/vivid-tokens/dist/sass/themes/consts' as theme-consts;
-
-.breadcrumb-item {
-	@include typography.typography-cat-shorthand('body-2');
-
-	display: flex;
-	align-items: center;
-	color: var(#{theme-consts.$vvd-color-neutral-70});
-
-	a {
-		color: var(--vvd-color-cta-70);
-		font: inherit;
-		text-decoration: none;
-	}
-
-	a:hover {
-		text-decoration: underline;
-	}
-
-	vwc-icon {
-		margin: 0 16px;
-		color: var(#{theme-consts.$vvd-color-on-canvas});
-		font-size: 12px;
-	}
-}
-
-

package/src/lib/breadcrumb-item/breadcrumb-item.spec.ts

@@ -1,192 +0,0 @@
-import {elementUpdated, fixture, getControlElement, setAttribute} from '@vivid-nx/shared';
-import type {Icon} from '../icon/icon';
-import { BreadcrumbItem } from './breadcrumb-item';
-import '.';
-
-const COMPONENT_TAG = 'vwc-breadcrumb-item';
-
-describe('vwc-breadcrumb-item', () => {
-
-	let element: BreadcrumbItem;
-
-	beforeEach(async () => {
-		element = (await fixture(
-			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
-		)) as BreadcrumbItem;
-	});
-
-	it('should be initialized as a vwc-breadcrumb-item', async () => {
-		expect(element).toBeInstanceOf(BreadcrumbItem);
-	});
-
-	it('should display only icon when no prop is set', function () {
-		const controlElement = getControlElement(element);
-		const iconElementExists = Boolean(controlElement.querySelector(('vwc-icon')));
-		expect(iconElementExists).toEqual(true);
-	});
-
-	it('should be set as simple text when given only text', async function () {
-		const breadcrumbText = 'some text';
-		element.text = breadcrumbText;
-		await elementUpdated(element);
-		const controlElement = getControlElement(element);
-		expect(controlElement.textContent?.trim()).toEqual(breadcrumbText);
-	});
-
-	it('should set icon when "separator" is true', async function () {
-		const controlElement = getControlElement(element);
-		const iconElementExistsWhenSeparatorTrue = Boolean(controlElement.querySelector(('vwc-icon')));
-
-		element.separator = false;
-		await elementUpdated(element);
-		const iconElementExistsWithSeparatorFalse = Boolean(controlElement.querySelector(('vwc-icon')));
-
-		expect(iconElementExistsWithSeparatorFalse)
-			.toEqual(false);
-		expect(iconElementExistsWhenSeparatorTrue)
-			.toEqual(true);
-	});
-
-	it('should set as an anchor and icon when set with "href"', async function () {
-		const breadcrumbText = 'some text';
-		const href = 'https://google.com/';
-		element.text = breadcrumbText;
-		element.href = href;
-		await elementUpdated(element);
-
-		const controlElement = getControlElement(element);
-		const iconElement = controlElement.querySelector(('vwc-icon')) as Icon;
-		const anchorElement = controlElement.querySelector(('a'));
-
-		expect(anchorElement?.textContent?.trim()).toEqual(breadcrumbText);
-		expect((anchorElement as any)?.href).toEqual(element.href);
-		expect(iconElement?.type).toEqual('chevron-right-line');
-	});
-
-	describe('bindings', () => {
-
-		beforeEach(async function () {
-			element.href = '#';
-			element.text = 'stam';
-			await elementUpdated(element);
-		});
-
-		/**
-		 *
-		 */
-		function getAnchorElement() {
-			const anchorElement = element.shadowRoot?.querySelector('a');
-			return anchorElement;
-		}
-
-		/**
-		 * @param str
-		 */
-		function capitalizeFirstLetter(str: string) {
-			return str.charAt(0).toUpperCase() + str.slice(1);
-		}
-
-		it('should set aria labels', async function () {
-
-			const ARIA_PROPS = [
-				'atomic', 'busy', 'controls', 'current', 'describedby',
-				'details', 'disabled', 'errormessage', 'expanded',
-				'flowto', 'haspopup', 'hidden', 'invalid', 'keyshortcuts',
-				'label', 'labelledby', 'live', 'owns', 'relevant', 'roledescription'
-			];
-
-			/**
-			 *
-			 */
-			function setAriaLabelsOnElementObject() {
-				ARIA_PROPS.forEach(ariaProp => {
-					const ariaPropOnObject = `aria${capitalizeFirstLetter(ariaProp)}`;
-					(element as any)[ariaPropOnObject] = ariaProp;
-				});
-			}
-
-			const anchorElement = getAnchorElement();
-
-			setAriaLabelsOnElementObject();
-			await elementUpdated(element);
-
-			ARIA_PROPS.forEach(ariaProp => {
-				const ariaPropOnElement = `aria-${ariaProp}`;
-
-				expect(anchorElement?.getAttribute(ariaPropOnElement)).toEqual(ariaProp);
-			});
-		});
-
-		it('should set the "href" attribute', async function () {
-			const attribute = 'href';
-			const anchorElement = getAnchorElement();
-			const text = 'stam';
-			await setAttribute(element, attribute, text);
-
-			expect(anchorElement?.getAttribute(attribute)).toEqual(text);
-		});
-
-		it('should set the "hreflang" attribute', async function () {
-			const attribute = 'hreflang';
-			const anchorElement = getAnchorElement();
-			const text = 'stam';
-			await setAttribute(element, attribute, text);
-
-			expect(anchorElement?.getAttribute(attribute)).toEqual(text);
-		});
-
-		it('should set the "download" attribute', async function () {
-			const attribute = 'download';
-			const anchorElement = getAnchorElement();
-			const text = 'stam';
-			await setAttribute(element, attribute, text);
-
-			expect(anchorElement?.getAttribute(attribute)).toEqual(text);
-		});
-
-		it('should set the "ping" attribute', async function () {
-			const attribute = 'ping';
-			const anchorElement = getAnchorElement();
-			const text = 'stam';
-			await setAttribute(element, attribute, text);
-
-			expect(anchorElement?.getAttribute(attribute)).toEqual(text);
-		});
-
-		it('should set the "referrerpolicy" attribute', async function () {
-			const attribute = 'referrerpolicy';
-			const anchorElement = getAnchorElement();
-			const text = 'stam';
-			await setAttribute(element, attribute, text);
-
-			expect(anchorElement?.getAttribute(attribute)).toEqual(text);
-		});
-
-		it('should set the "rel" attribute', async function () {
-			const attribute = 'rel';
-			const anchorElement = getAnchorElement();
-			const text = 'stam';
-			await setAttribute(element, attribute, text);
-
-			expect(anchorElement?.getAttribute(attribute)).toEqual(text);
-		});
-
-		it('should set the "target" attribute', async function () {
-			const attribute = 'target';
-			const anchorElement = getAnchorElement();
-			const text = 'stam';
-			await setAttribute(element, attribute, text);
-
-			expect(anchorElement?.getAttribute(attribute)).toEqual(text);
-		});
-
-		it('should set the "type" attribute', async function () {
-			const attribute = 'type';
-			const anchorElement = getAnchorElement();
-			const text = 'stam';
-			await setAttribute(element, attribute, text);
-
-			expect(anchorElement?.getAttribute(attribute)).toEqual(text);
-		});
-	});
-});

package/src/lib/breadcrumb-item/breadcrumb-item.template.ts

@@ -1,37 +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 {textAnchorTemplate} from '../text-anchor/text-anchor.template';
-import type { BreadcrumbItem } from './breadcrumb-item';
-
-const getClasses = (_: BreadcrumbItem) =>
-	classNames(
-		'control', 'breadcrumb-item'
-	);
-
-/**
- * The template for the {@link @microsoft/fast-foundation#BreadcrumbItem} component.
- *
- * @param context
- * @param definition
- * @public
- */
-export const BreadcrumbItemTemplate: (
-	context: ElementDefinitionContext,
-	definition: FoundationElementDefinition
-) => ViewTemplate<BreadcrumbItem> =
-  (context: ElementDefinitionContext, definition: FoundationElementDefinition) => html`
-      <div roll="listitem" part="listitem" class="${getClasses}">
-        ${when(x => x.text && !x.href,
-		html<BreadcrumbItem>`${x => x.text}`)}
-
-  ${when(x => x.text && x.href && x.href.length > 0,
-		html<BreadcrumbItem>`${textAnchorTemplate(context, definition)}`)}
-
-        ${when(x => x.separator,
-		html<BreadcrumbItem>`<vwc-icon type="chevron-right-line"></vwc-icon>`)}
-      </div>`;

package/src/lib/breadcrumb-item/breadcrumb-item.ts

@@ -1,15 +0,0 @@
-import {BreadcrumbItem as FastBreadcrumbItem} from '@microsoft/fast-foundation';
-import {attr} from '@microsoft/fast-element';
-
-/**
- * Base class for breadcrumb-item
- *
- * @public
- */
-export class BreadcrumbItem extends FastBreadcrumbItem {
-	@attr({ mode: 'fromView' })	text: string = '';
-
-	constructor() {
-		super();
-	}
-}

package/src/lib/breadcrumb-item/index.ts

@@ -1,16 +0,0 @@
-import '../icon';
-
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import {designSystem} from '../../shared/design-system';
-import styles from './breadcrumb-item.scss';
-
-import {BreadcrumbItem} from './breadcrumb-item';
-import {BreadcrumbItemTemplate as template} from './breadcrumb-item.template';
-
-export const vividBreadcrumbItem = BreadcrumbItem.compose<FoundationElementDefinition>({
-	baseName: 'breadcrumb-item',
-	template: template as any,
-	styles,
-});
-
-designSystem.register(vividBreadcrumbItem());

package/src/lib/breadcrumb-item/ui.test.ts

@@ -1,38 +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 = ['breadcrumb-item'];
-
-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/breadcrumb-item.png'
-	);
-});

package/src/lib/button/README.md

@@ -1,120 +0,0 @@
-# button
-
-A button represents an action that the user can take. Use buttons to enable important actions.
-
-```js
-<script type='module'>
-    import '@vonage/vivid/button';
-</script>
-```
-
-## Label
-
-- Type: `String`
-- Default: `''`
-
-Add a `label` attribute to add text to the button.
-
-```html preview
-<vwc-button appearance='filled' label='A default button'></vwc-button>
-```
-
-## Size
-
-Use the `size` attribute to change the button's size.
-
-- Type: `'base-small'` | `'base'` | `'base-large'`
-- Default: `'base'`
-
-```html preview
-<vwc-button appearance='filled' label='base-small' size='base-small'></vwc-button>
-<vwc-button appearance='filled' label='base' size='base'></vwc-button>
-<vwc-button appearance='filled' label='base-large' size='base-large'></vwc-button>
-```
-
-## Shape
-
-Use the `shape` attribute to change the button's edges.
-
-- Type: `'rounded'` | `'pill'`
-- Default: `'rounded'`
-
-```html preview
-<vwc-button appearance='filled' label='rounded' shape='rounded'></vwc-button>
-<vwc-button appearance='filled' label='pill' shape='pill'></vwc-button>
-```
-
-## Icon
-
-Button text can be affixed by a decorative icon, either by its start or end. 
-Use the `icon` attribute to add an icon. Use the `icon-trailing` to place the icon to the right.
-
-```html preview
-<vwc-button appearance="filled" label='icon' icon='check-line'></vwc-button>
-<vwc-button appearance="filled" label='icon-trailing' icon='check-line' icon-trailing></vwc-button>
-```
-
-## Icon Only
-
-If label not applied...
-
-```html preview
-<vwc-button appearance="filled" icon='message-sent-line'></vwc-button>
-<vwc-button appearance="filled" shape="pill" icon='message-sent-line'></vwc-button>
-```
-
-## Appearance
-
-Set the `appearance` attribute to change the button's appearance.
-
-- Type: `'ghost'` | `'filled'` | `'outlined'`
-- Default: `'ghost'`
-
-```html preview
-<vwc-button label='ghost' appearance='ghost'></vwc-button>
-<vwc-button label='filled' appearance='filled'></vwc-button>
-<vwc-button label='outlined' appearance='outlined'></vwc-button>
-```
-
-## Connotation
-
-Set the `connotation` attribute to change the button's connotation.
-It accepts a subset of predefined values.
-
-- Type: `'primary'` | `'cta'` | `'success'` | `'alert'` | `'announcement'` | `'info'`
-- Default: `'primary'`
-
-### Ghost button with connotation
-
-```html preview
-<vwc-button appearance="ghost" label='primary' connotation='primary'></vwc-button>
-<vwc-button appearance="ghost" label='cta' connotation='cta'></vwc-button>
-<vwc-button appearance="ghost" label='success' connotation='success'></vwc-button>
-<vwc-button appearance="ghost" label='alert' connotation='alert'></vwc-button>
-```
-
-### Filled button with connotation
-
-```html preview
-<vwc-button appearance="filled" label='primary' connotation='primary'></vwc-button>
-<vwc-button appearance="filled" label='cta' connotation='cta'></vwc-button>
-<vwc-button appearance="filled" label='success' connotation='success'></vwc-button>
-<vwc-button appearance="filled" label='alert' connotation='alert'></vwc-button>
-```
-
-### Outlined button with connotation
-
-```html preview
-<vwc-button appearance="outlined" label='primary' connotation='primary'></vwc-button>
-<vwc-button appearance="outlined" label='cta' connotation='cta'></vwc-button>
-<vwc-button appearance="outlined" label='success' connotation='success'></vwc-button>
-<vwc-button appearance="outlined" label='alert' connotation='alert'></vwc-button>
-```
-
-## States
-### Disabled
-```html preview
-<vwc-button disabled appearance='ghost' label='ghost'></vwc-button>
-<vwc-button disabled appearance='filled' label='filled'></vwc-button>
-<vwc-button disabled appearance='outlined' label='outlined'></vwc-button>
-```