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

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

@@ -1,64 +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 = ['banner'];
-
-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/banner.png'
-	);
-});
-
-test('should remove the component when clicking on remove button', async ({ page }: { page: Page }) => {
-	const template = `
-			<vwc-banner removable icon="home" text="ET Phone!"></vwc-banner>	
-	`;
-
-	await loadComponents({
-		page,
-		components,
-	});
-	await loadTemplate({
-		page,
-		template,
-	});
-
-	await page.waitForLoadState('networkidle');
-
-	const removeButton = await page.locator('.dismiss-button');
-	const element = await page.locator('vwc-banner');
-
-	await removeButton.click();
-
-	await element.waitFor({state: 'detached'});
-
-	expect(await element.count()).toEqual(0);
-
-});

package/src/lib/breadcrumb/README.md

@@ -1,25 +0,0 @@
-# breadcrumb
-
-```js
-<script type="module">import '@vonage/vivid/breadcrumb-item';</script>
-<script type="module">import '@vonage/vivid/breadcrumb';</script>
-```
-
-## Common Usage
-```html preview
-<vwc-breadcrumb>
-  <vwc-breadcrumb-item href="#" text="breadcrumb"></vwc-breadcrumb-item>
-  <vwc-breadcrumb-item href="#" text="breadcrumb"></vwc-breadcrumb-item>
-  <vwc-breadcrumb-item href="#" text="breadcrumb"></vwc-breadcrumb-item>
-  <vwc-breadcrumb-item text="breadcrumb"></vwc-breadcrumb-item>
-</vwc-breadcrumb>
-```
-
-## Multiple hidden crumbs
-```html preview
-<vwc-breadcrumb>
-  <vwc-breadcrumb-item href="#" text="breadcrumb"></vwc-breadcrumb-item>
-  <vwc-breadcrumb-item text="..."></vwc-breadcrumb-item>
-  <vwc-breadcrumb-item href="#" text="breadcrumb"></vwc-breadcrumb-item>
-</vwc-breadcrumb>
-```

package/src/lib/breadcrumb/breadcrumb.scss

@@ -1,3 +0,0 @@
-.list {
-	display: flex;
-}

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

@@ -1,78 +0,0 @@
-import {elementUpdated, fixture} from '@vivid-nx/shared';
-import type {BreadcrumbItem} from '../breadcrumb-item/breadcrumb-item';
-import { Breadcrumb } from './breadcrumb';
-import '../breadcrumb-item';
-import '.';
-
-const COMPONENT_TAG = 'vwc-breadcrumb';
-
-describe('vwc-breadcrumb', () => {
-	const breadcrumbItemsTemplate = `
-	  <vwc-breadcrumb-item href="#" text="breadcrumb"></vwc-breadcrumb-item>
-    <vwc-breadcrumb-item text="..."></vwc-breadcrumb-item>
-    <vwc-breadcrumb-item href="#" text="breadcrumb"></vwc-breadcrumb-item>
-    <vwc-breadcrumb-item text="breadcrumb"></vwc-breadcrumb-item>
-	`;
-
-	let element: Breadcrumb;
-
-	beforeEach(async () => {
-		element = (await fixture(
-			`<${COMPONENT_TAG}>${breadcrumbItemsTemplate}</${COMPONENT_TAG}>`
-		)) as Breadcrumb;
-	});
-
-	describe('basic', () => {
-		it('should be initialized as a vwc-breadcrumb', async () => {
-			expect(element).toBeInstanceOf(Breadcrumb);
-		});
-	});
-
-	it('should set separator true for all except the last item', function () {
-		const itemElements = element.querySelectorAll('vwc-breadcrumb-item') as unknown as BreadcrumbItem[];
-
-		expect(itemElements[0].separator).toEqual(true);
-		expect(itemElements[1].separator).toEqual(true);
-		expect(itemElements[2].separator).toEqual(true);
-		expect(itemElements[3].separator).toEqual(false);
-	});
-
-	describe('aria-current', function () {
-		/**
-		 *
-		 */
-		function removeAElementFromBreadcrumbItem() {
-			newItem.shadowRoot?.querySelector('a')
-				?.remove();
-		}
-		let newItem: BreadcrumbItem;
-
-		beforeEach(async function () {
-			newItem = document.createElement('vwc-breadcrumb-item') as BreadcrumbItem;
-			newItem.href = '#';
-			newItem.text = 'breadcrumb';
-			element.appendChild(newItem);
-			await elementUpdated(element);
-		});
-
-		it('should set aria-current to last node internal a element if last node is href', async function () {
-			const ariaCurrent = newItem.shadowRoot?.querySelector('a')?.getAttribute('aria-current');
-			expect(ariaCurrent).toEqual('page');
-		});
-
-		it('should set aria-current to last node if last node is href and doesnt have internal a element', async function () {
-			removeAElementFromBreadcrumbItem();
-			element.slottedBreadcrumbItemsChanged();
-
-			expect(newItem.ariaCurrent).toEqual('page');
-		});
-
-		it('should not set aria-current to last node if last node is not href', async function () {
-			removeAElementFromBreadcrumbItem();
-			newItem.removeAttribute('href');
-			const ariaCurrent = newItem.getAttribute('aria-current');
-			expect(ariaCurrent).toEqual(null);
-		});
-	});
-
-});

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