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

package/src/lib/banner/banner.spec.ts

@@ -1,355 +0,0 @@
-import {elementUpdated, fixture} from '@vivid-nx/shared';
-import type {Icon} from '../icon/icon';
-import {Button} from '../button/button';
-import {Connotation} from '../enums';
-import { Banner } from './banner';
-import type { BannerConnotation } from './banner';
-import '.';
-
-const COMPONENT_TAG = 'vwc-banner';
-
-/**
- * @param element
- * @param removable
- */
-async function toggleRemovable(element: Banner, removable = true) {
-	element.removable = removable;
-	await elementUpdated(element);
-}
-
-describe('vwc-banner', () => {
-	/**
-	 *
-	 */
-	function dispatchAnimationEndEvent() {
-		const banner = element.shadowRoot?.querySelector('.banner');
-		const event = new Event('transitionend');
-		banner?.dispatchEvent(event);
-	}
-
-	let element: Banner;
-
-	beforeEach(async () => {
-		element = (await fixture(
-			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
-		)) as Banner;
-	});
-
-	describe('basic', () => {
-		it('should be initialized as a vwc-banner', async () => {
-			expect(element)
-				.toBeInstanceOf(Banner);
-		});
-	});
-
-	describe('text', function () {
-		/**
-		 * @param text
-		 */
-		async function setTextProperty(text: string | undefined) {
-			element.text = text;
-			await elementUpdated(element);
-		}
-
-		/**
-		 * @param text
-		 */
-		async function setTextAttribute(text: string | undefined) {
-			element.setAttribute('text', text ? text : '');
-			await elementUpdated(element);
-		}
-
-		/**
-		 *
-		 */
-		function getText() {
-			const text = element.shadowRoot?.querySelector('.banner--message')?.textContent;
-			return text?.trim();
-		}
-
-		it('should init with undefined and set as empty string in DOM', function () {
-			const initTextPropEmpty = element.text;
-			const initTextAttrEmpty = getText();
-
-			expect(initTextPropEmpty)
-				.toEqual(undefined);
-			expect(initTextAttrEmpty)
-				.toEqual('');
-		});
-
-		it('should reflect the message', async function () {
-			const messageText = 'Some Text';
-
-			await setTextProperty(messageText);
-			const DOMTextWithProperty = getText();
-
-			await setTextProperty(undefined);
-			await setTextAttribute(messageText);
-			const propertyTextWithAttribute = element.text;
-
-			expect(DOMTextWithProperty)
-				.toEqual(messageText);
-			expect(propertyTextWithAttribute)
-				.toEqual(messageText);
-		});
-	});
-
-	describe('role', function () {
-		it('should be set to "status" on init', function () {
-			const role = element.shadowRoot?.querySelector('.banner--message')
-				?.getAttribute('role');
-			expect(role)
-				.toEqual('status');
-		});
-
-		it('should change role to role text', async function () {
-			element.role = 'alert';
-			await elementUpdated(element);
-			const role = element.shadowRoot?.querySelector('.banner--message')
-				?.getAttribute('role');
-			expect(role)
-				.toEqual('alert');
-		});
-
-		it('should change role when role attribute is set', async function () {
-			element.setAttribute('role', 'alert');
-			await elementUpdated(element);
-			const role = element.shadowRoot?.querySelector('.banner--message')
-				?.getAttribute('role');
-			expect(role)
-				.toEqual('alert');
-		});
-	});
-
-	describe('aria live', function () {
-		it('should be set to "live" on init', function () {
-			const ariaLive = element.shadowRoot?.querySelector('.banner--message')
-				?.getAttribute('aria-live');
-			expect(ariaLive)
-				.toEqual('polite');
-		});
-
-		it('should change aria-live to ariaLive text', async function () {
-			element.ariaLive = 'assertive';
-			await elementUpdated(element);
-			const ariaLive = element.shadowRoot?.querySelector('.banner--message')
-				?.getAttribute('aria-live');
-			expect(ariaLive)
-				.toEqual('assertive');
-		});
-
-		it('should change aria-live to ariaLive text', async function () {
-			element.setAttribute('aria-live', 'assertive');
-			await elementUpdated(element);
-			const ariaLive = element.shadowRoot?.querySelector('.banner--message')
-				?.getAttribute('aria-live');
-			expect(ariaLive)
-				.toEqual('assertive');
-		});
-	});
-
-	describe('remove', function () {
-
-		it('should fire removing event', async function () {
-			const spy = jest.fn();
-			element.addEventListener('vwc-banner:removing', spy);
-			element.remove();
-			expect(spy)
-				.toHaveBeenCalled();
-		});
-
-		it('should fire removed after animation end', async function () {
-
-			const spy = jest.fn();
-			element.addEventListener('vwc-banner:removed', spy);
-			element.remove();
-
-			dispatchAnimationEndEvent();
-
-			expect(spy)
-				.toHaveBeenCalled();
-			expect(spy.mock.calls.length)
-				.toEqual(1);
-		});
-
-		it('should disable removed and removing events after disconnected callback', async function () {
-
-			const spy = jest.fn();
-			element.addEventListener('vwc-banner:removed', spy);
-			element.addEventListener('vwc-banner:removing', spy);
-			element.disconnectedCallback();
-
-			element.remove();
-			dispatchAnimationEndEvent();
-
-			expect(spy.mock.calls.length)
-				.toEqual(0);
-		});
-
-		it('should remove the banner after dispatch', function () {
-			element.remove();
-			dispatchAnimationEndEvent();
-			expect(document.body.contains(element))
-				.toEqual(false);
-		});
-	});
-
-	describe('connotation', function () {
-		const possibleConnotations = [Connotation.Info,
-			Connotation.Announcement,
-			Connotation.Success,
-			Connotation.Warning,
-			Connotation.Alert
-		];
-
-		it('should leave connotation class empty if not set', async function () {
-			possibleConnotations.forEach(connotation => {
-				expect(element.shadowRoot?.querySelector('.banner')
-					?.classList
-					.contains(connotation))
-					.toEqual(false);
-			});
-		});
-
-		it('should set a connotation class', async function () {
-			const connotation = possibleConnotations[2];
-			(element.connotation as Connotation) = connotation;
-			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.banner')
-				?.classList
-				.contains(`connotation-${connotation}`))
-				.toEqual(true);
-		});
-	});
-
-	describe('icon', function () {
-		let getIcon: () => Icon;
-
-		beforeEach(function () {
-			getIcon = () => element.shadowRoot?.querySelector('.icon > vwc-icon') as Icon;
-		});
-
-		it('should set the icon according to connotation info by default', function () {
-			expect(getIcon().type)
-				.toEqual('info-solid');
-		});
-
-		it('should set the icon according to "icon" attribute', async function () {
-			element.setAttribute('icon', 'home');
-			await elementUpdated(element);
-
-			expect(getIcon().type)
-				.toEqual('home');
-		});
-
-		it('should set the icon according to set connotation', async function () {
-			const connotationIconMap: Map<BannerConnotation, string> = new Map([
-				[Connotation.Info, 'info-solid'],
-				[Connotation.Announcement, 'megaphone-solid'],
-				[Connotation.Success, 'check-circle-solid'],
-				[Connotation.Warning, 'warning-solid'],
-				[Connotation.Alert, 'error-solid']
-			]);
-
-			for (const [connotation, iconName] of connotationIconMap) {
-				element.connotation = connotation;
-
-				await elementUpdated(element);
-
-				expect(getIcon().type).toEqual(iconName);
-			}
-		});
-	});
-
-	describe('removable', function () {
-		it('should init to false', function () {
-			expect(element.removable)
-				.toEqual(false);
-			expect(element.hasAttribute('removable'))
-				.toEqual(false);
-		});
-
-		it('should toggle attribute on host', async function () {
-			await toggleRemovable(element);
-			const removeAttributeExistsWhenTrue = element.hasAttribute('removable');
-
-			await toggleRemovable(element, false);
-			const removeAttributeExistsWhenFalse = element.hasAttribute('removable');
-
-			expect(removeAttributeExistsWhenTrue)
-				.toEqual(true);
-			expect(removeAttributeExistsWhenFalse)
-				.toEqual(false);
-		});
-
-		it('should set removable property on attribute change', async function () {
-			element.toggleAttribute('removable');
-			await elementUpdated(element);
-			expect(element.removable)
-				.toEqual(true);
-		});
-
-		it('should remove the remove button when removable is false', async function () {
-			expect(element.shadowRoot?.querySelector('.dismiss-button'))
-				.toEqual(null);
-		});
-
-		it('should add a remove button when true', async function () {
-			await toggleRemovable(element, true);
-			expect(element.shadowRoot?.querySelector('.dismiss-button'))
-				.toBeInstanceOf(Button);
-		});
-
-		it('should remove banner on remove button click', async function () {
-			await toggleRemovable(element, true);
-			const dismissButton = element.shadowRoot?.querySelector('.dismiss-button') as HTMLElement;
-			dismissButton.click();
-			dispatchAnimationEndEvent();
-			expect(document.body.contains(element))
-				.toEqual(false);
-		});
-
-		it('should add class "removing" to banner on remove button click', async function () {
-			await toggleRemovable(element, true);
-			const dismissButton = element.shadowRoot?.querySelector('.dismiss-button') as HTMLElement;
-			dismissButton.click();
-			expect(element.shadowRoot?.querySelector('.banner')?.classList.contains('removing')).toEqual(true);
-		});
-	});
-
-	describe('remove on escape key', function () {
-		it('should remove the button on escape key', async function () {
-			element.removable = true;
-			element.focus();
-			jest.spyOn(element, 'remove');
-			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-			expect(element.remove).toHaveBeenCalled();
-		});
-
-		it('should remove the banner only on escape key', async function () {
-			element.removable = true;
-			element.focus();
-			const spy = jest.spyOn(element, 'remove');
-			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
-			expect((spy as any).mock.calls.length).toEqual(0);
-
-		});
-
-		it('should remove keydown listener after disconnection', async function () {
-			element.removable = true;
-			element.focus();
-			element.disconnectedCallback();
-			const spy = jest.spyOn(element, 'remove');
-			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-			expect((spy as any).mock.calls.length).toEqual(0);
-		});
-
-		it('should remove the banner only if "removable" is true', async function () {
-			element.removable = false;
-			element.focus();
-			const spy = jest.spyOn(element, 'remove');
-			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-			expect((spy as any).mock.calls.length).toEqual(0);
-		});
-	});
-});

package/src/lib/banner/banner.template.ts

@@ -1,61 +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 '../button';
-import '../text-anchor';
-import {affixIconTemplateFactory} from '../../shared/patterns/affix';
-import type {Banner} from './banner';
-
-const getClasses = (_: Banner) => classNames(
-	'control',
-	[`connotation-${_.connotation}`, !!_.connotation]
-);
-
-/**
- *
- */
-function renderDismissButton() {
-	return html<Banner>`
-	  <vwc-button
-			  size="base-small"
-			  class="dismiss-button"
-			  icon="close-line"
-			  @click="${x => x.remove()}">
-	  </vwc-button>`;
-}
-
-/**
- * The template for the {@link @microsoft/fast-foundation#Banner} component.
- *
- * @param context
- * @public
- */
-export const BannerTemplate: (
-	context: ElementDefinitionContext,
-	definition: FoundationElementDefinition
-) => ViewTemplate<Banner> = (context: ElementDefinitionContext) => {
-	const affixIconTemplate = affixIconTemplateFactory(context);
-
-	return html<Banner>`
-	  <div class="banner ${getClasses}" tabindex="0">
-		  <header class="header">
-					<div class="user-content">
-            ${x => affixIconTemplate(x.conditionedIcon)}
-						<div class="banner--message"
-				 role="${x => x.role ? x.role : 'status'}"
-				 aria-live="${x => x.ariaLive ? x.ariaLive : 'polite'}">
-              ${x => x.text}
-            </div>
-						<slot class="action-items" name="actionItems"></slot>
-					</div>
-
-			  ${when(x => x.removable, renderDismissButton())}
-		  </header>
-	  </div>
-	`;
-};
-

package/src/lib/banner/banner.ts

@@ -1,77 +0,0 @@
-import {applyMixins, FoundationElement} from '@microsoft/fast-foundation';
-import {attr} from '@microsoft/fast-element';
-import {Connotation} from '../enums';
-import {AffixIcon} from '../../shared/patterns/affix';
-
-export type BannerConnotation =
-	Connotation.Info |
-	Connotation.Announcement |
-	Connotation.Success |
-	Connotation.Warning |
-	Connotation.Alert;
-
-const connotationIconMap = new Map([
-	[Connotation.Info, 'info-solid'],
-	[Connotation.Announcement, 'megaphone-solid'],
-	[Connotation.Success, 'check-circle-solid'],
-	[Connotation.Warning, 'warning-solid'],
-	[Connotation.Alert, 'error-solid']
-]);
-
-const defaultConnotation =
-	(connotation: Connotation | undefined = Connotation.Info) => connotationIconMap.get(connotation) as Connotation;
-
-/**
- * Base class for banner
- *
- * @public
- */
-export class Banner extends FoundationElement {
-	@attr({attribute: 'action-href'}) actionHref: string | undefined;
-	@attr({attribute: 'action-text'}) actionText: string | undefined;
-	@attr({mode: 'boolean'}) removable = false;
-	@attr({attribute: 'aria-live'}) override ariaLive: any;
-	@attr() role: string | undefined;
-	@attr() text: string | undefined;
-	@attr() connotation: BannerConnotation | undefined;
-
-	get conditionedIcon() {
-		return this.icon ?? defaultConnotation(this.connotation);
-	}
-
-	override connectedCallback() {
-		super.connectedCallback();
-		this.addEventListener('keydown', this.#closeOnKeyDown);
-	}
-
-	override disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener('keydown', this.#closeOnKeyDown);
-	}
-
-	override remove(): void {
-		this.$emit('vwc-banner:removing');
-		const banner = this.shadowRoot && this.shadowRoot.querySelector('.banner');
-		if (banner) {
-			banner.classList.add('removing');
-			banner.addEventListener('transitionend', this.#handleRemoveEnd);
-		}
-	}
-
-	#handleRemoveEnd = () => {
-		this.$emit('vwc-banner:removed');
-		this.parentElement && this.parentElement.removeChild(this);
-	};
-
-	#closeOnKeyDown = (e: KeyboardEvent) => {
-		if (e.key !== 'Escape' || !this.removable) {
-			return;
-		}
-		this.remove();
-	};
-}
-
-applyMixins(Banner, AffixIcon);
-
-export interface Banner extends AffixIcon {
-}

package/src/lib/banner/index.ts

@@ -1,14 +0,0 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { designSystem } from '../../shared/design-system';
-import styles from './banner.scss';
-
-import { Banner } from './banner';
-import { BannerTemplate as template } from './banner.template';
-
-export const vividBanner = Banner.compose<FoundationElementDefinition>({
-	baseName: 'banner',
-	template: template as any,
-	styles,
-});
-
-designSystem.register(vividBanner());

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