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

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

@@ -1,103 +0,0 @@
-import { elementUpdated, fixture, getControlElement } from '@vivid-nx/shared';
-import { AccordionItem } from './accordion-item';
-import '.';
-
-const COMPONENT_TAG = 'vwc-accordion-item';
-
-describe('vwc-accordion-item', () => {
-	let element: AccordionItem;
-
-	beforeEach(async () => {
-		element = (await fixture(
-			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
-		)) as AccordionItem;
-	});
-
-	describe('basic', () => {
-		it('should be initialized as a vwc-accordion-item', async () => {
-			expect(element).toBeInstanceOf(AccordionItem);
-			expect(element.open).toBeFalsy();
-			expect(element.icon).toBeUndefined();
-			expect(element.iconTrailing).toBeFalsy();
-			expect(element.meta).toEqual('');
-			expect(element.noIndicator).toBeFalsy();
-			expect(element.heading).toEqual('');
-			expect(element.headingLevel).toBeUndefined();
-		});
-	});
-
-	describe('show', () => {
-		it('should set "open" to true and add "open" class', async () => {
-			expect(getControlElement(element).classList.contains('open')).toBeFalsy();
-
-			element.open = true;
-			await elementUpdated(element);
-			expect(element.open).toBeTruthy();
-			expect(getControlElement(element).classList.contains('open')).toBeTruthy();
-		});
-	});
-
-	describe('hide', () => {
-		it('should unset "open"', async () => {
-			element.open = true;
-			await elementUpdated(element);
-			expect(getControlElement(element).classList.contains('open')).toBeTruthy();
-
-			element.open = false;
-			await elementUpdated(element);
-			expect(element.open).toBeFalsy();
-			expect(getControlElement(element).classList.contains('open')).toBeFalsy();
-		});
-	});
-
-	describe('toggle', () => {
-		it('should toggle "open" state', async () => {
-			const button: any = element.shadowRoot?.querySelector('.button');
-			expect(getControlElement(element).classList.contains('open')).toBeFalsy();
-
-			button.click();
-			await elementUpdated(element);
-			expect(element.open).toBeTruthy();
-			expect(getControlElement(element).classList.contains('open')).toBeTruthy();
-
-			button.click();
-			await elementUpdated(element);
-			expect(element.open).toBeFalsy();
-			expect(getControlElement(element).classList.contains('open')).toBeFalsy();
-		});
-	});
-
-	describe('icon', () => {
-		it('should set icon class', async () => {
-			expect(getControlElement(element).classList.contains('icon')).toBeFalsy();
-			element.icon = 'chat-solid';
-			await elementUpdated(element);
-			expect(getControlElement(element).classList.contains('icon')).toBeTruthy();
-		});
-		it('should set iconTrailing', async () => {
-			expect(getControlElement(element).classList.contains('icon-trailing')).toBeFalsy();
-			element.icon = 'chat-solid';
-			element.iconTrailing = true;
-			await elementUpdated(element);
-			expect(getControlElement(element).classList.contains('icon-trailing')).toBeTruthy();
-		});
-	});
-
-	describe('no-indicator', () => {
-		it('should remove indicator class', async () => {
-			expect(getControlElement(element).classList.contains('no-indicator')).toBeFalsy();
-			element.noIndicator = true;
-			await elementUpdated(element);
-			expect(getControlElement(element).classList.contains('no-indicator')).toBeTruthy();
-		});
-	});
-
-	describe('heading level', () => {
-		it('should update heading level', async () => {
-			expect(element.shadowRoot?.querySelector('.header')?.tagName).toEqual('H3');
-			element.headingLevel = 4;
-			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.header')?.tagName).toEqual('H4');
-		});
-	});
-});

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

@@ -1,62 +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 { affixIconTemplateFactory } from '../../shared/patterns/affix';
-import type { AccordionItem } from './accordion-item';
-
-const PANEL = 'panel';
-
-const getClasses = ({
-	open, iconTrailing, icon, noIndicator
-}: AccordionItem) => classNames(
-	'control',
-	['open', open],
-	['icon', Boolean(icon)],
-	['icon-trailing', iconTrailing],
-	['no-indicator', noIndicator],
-);
-
-export const AccordionItemTemplate: (
-	context: ElementDefinitionContext,
-	definition: FoundationElementDefinition
-) => ViewTemplate<AccordionItem> = (context) => html<AccordionItem>`
-	<div class="${getClasses}">
-		${x => renderPanelHeader(context, x.headingLevel)}
-		<div class="body" id="${PANEL}" role="region" aria-labelledby="header">
-			<slot></slot>
-		</div>
-	</div>
-`;
-
-const renderPanelHeader = (context: ElementDefinitionContext, headingLevel: number | string | undefined) => {
-	const header: string = headingLevel ? 'h' + headingLevel : 'h3';
-	return html<AccordionItem>`
-	<${header} class="header">
-		${renderHeaderButton(context)}
-	</${header}>
-	`;
-};
-
-const renderHeaderButton = (context: ElementDefinitionContext) => {
-	const affixIconTemplate = affixIconTemplateFactory(context);
-
-	return html<AccordionItem>`
-	<button class="button" id="header" @click=${x => x.open = !x.open}
-		?aria-expanded=${x => x.open}
-		aria-controls="${PANEL}">
-		${x => affixIconTemplate(x.icon)}
-		<span class="heading-text">${x => x.heading}</span>
-		${when(x => x.meta, html`<span class="meta">${x => x.meta}</span>`)}
-		<span class="indicator">
-			${when(x => !x.noIndicator && !x.iconTrailing, html`
-			<vwc-icon class="toggle-open" type='chevron-down-solid'></vwc-icon>
-			<vwc-icon class="toggle-close" type='chevron-up-solid'></vwc-icon>
-			`)}
-		</span>
-	</button>
-`;
-};

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

@@ -1,67 +0,0 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
-import { applyMixins } from '@microsoft/fast-foundation';
-import { attr } from '@microsoft/fast-element';
-import { AffixIconWithTrailing } from '../../shared/patterns/affix';
-
-/**
- * Base class for accordion-item
- *
- * @public
- */
-export class AccordionItem extends FoundationElement {
-	/**
-	 * 
-	 *
-	 * @public
-	 * 
-	 * HTML Attribute: heading
-	 */
-	@attr({ mode: 'fromView' }) heading = '';
-
-	/**
-	 *
-	 * @public
-	 * HTML Attribute: heading-level
-	 */
-	@attr({ attribute: 'heading-level'}) headingLevel?: 2 | 3 | 4 | 5 | 6;
-
-	/**
-	 * Indicates whether the accordion-item has indicator
-	 *
-	 * @public
-	 * HTML Attribute: no-indicator
-	 */
-	@attr({ mode: 'boolean', attribute: 'no-indicator' }) noIndicator = false;
-
-	/**
-	 *
-	 * @public
-	 * 
-	 * HTML Attribute: meta
-	 */
-	@attr({ mode: 'fromView' }) meta = '';
-
-	/**
-	 * Indicates whether the accordion-item is open
-	 *
-	 * @public
-	 * HTML Attribute: open
-	 */
-	@attr({ mode: 'boolean' }) open = false;
-
-	override attributeChangedCallback(name: string, oldValue: string, newValue: string): void{
-		super.attributeChangedCallback(name, oldValue, newValue);
-		if (name === 'open') {
-			newValue === null ? this.emitEvent('closed') : this.emitEvent('opened');
-		}
-	}
-
-	private emitEvent(name: string): void {
-		const init: CustomEventInit = { bubbles: true, composed: true };
-		const ev = new CustomEvent(name, init);
-		this.dispatchEvent(ev);
-	}
-}
-
-export interface AccordionItem extends AffixIconWithTrailing {}
-applyMixins(AccordionItem, AffixIconWithTrailing);

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

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

package/src/lib/accordion-item/partials/variables.scss

@@ -1 +0,0 @@
-$expansion-panel-icon-size-variable-name: --vvd-expansion-panel-icon-size;

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

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

package/src/lib/badge/README.md

@@ -1,112 +0,0 @@
-# badge
-
-Badge is a label that holds small amounts of information.
-A badge can be used to display unread notifications, or to label a block of text.
-Badges don’t work for navigation because they can't include a hyperlink.
-
-```js
-<script type='module'>
-    import '@vonage/vivid/badge';
-</script>
-```
-
-## Text
-
-- Type: `String`
-- Default: `''`
-
-Add a `text` attribute to add text to the badge.
-
-```html preview
-<vwc-badge text='A default badge'></vwc-badge>
-```
-
-## Size
-
-Use the `size` attribute to change the badge's size.
-
-- Type: `'base-small'` | `'base'` | `'base-large'`
-- Default: `'base'`
-
-
-```html preview
-<vwc-badge text='base-small' size='base-small'></vwc-badge>
-<vwc-badge text='base' size='base'></vwc-badge>
-<vwc-badge text='base-large' size='base-large'></vwc-badge>
-```
-
-## Shape
-
-Use the `shape` attribute to change the badge's edges.
-
-- Type: `'rounded'` | `'pill'`
-- Default: `'rounded'`
-
-```html preview
-<vwc-badge text='rounded' shape='rounded'></vwc-badge>
-<vwc-badge text='pill' shape='pill'></vwc-badge>
-```
-
-## Icon
-
-Badge 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-badge text='icon' icon='check-line'></vwc-badge>
-<vwc-badge text='icon-trailing' icon='check-line' icon-trailing></vwc-badge>
-```
-
-## Appearance
-
-Set the `appearance` attribute to change the badge's appearance.
-
-- Type: `'filled'` | `'subtle'` | `'outlined'`
-- Default: `'filled'`
-
-```html preview
-<vwc-badge text='filled' appearance='filled'></vwc-badge>
-<vwc-badge text='subtle' appearance='subtle'></vwc-badge>
-<vwc-badge text='outlined' appearance='outlined'></vwc-badge>
-```
-
-## Connotation
-
-Set the `connotation` attribute to change the badge's connotation.
-It accepts a subset of predefined values.
-
-- Type: `'primary'` | `'cta'` | `'success'` | `'alert'` | `'warning'` | `'info'`
-- Default: `'primary'`
-
-### Filled badge with connotation
-
-```html preview
-<vwc-badge text='primary' connotation='primary' appearance="filled"></vwc-badge>
-<vwc-badge text='cta' connotation='cta' appearance="filled"></vwc-badge>
-<vwc-badge text='info' connotation='info' appearance="filled"></vwc-badge>
-<vwc-badge text='success' connotation='success'></vwc-badge>
-<vwc-badge text='warning' connotation='warning'></vwc-badge>
-<vwc-badge text='alert' connotation='alert'></vwc-badge>
-```
-
-### Subtle badge with connotation
-
-```html preview
-<vwc-badge text='primary' appearance='subtle' connotation='primary'></vwc-badge>
-<vwc-badge text='cta' appearance='subtle' connotation='cta'></vwc-badge>
-<vwc-badge text='info' appearance='subtle' connotation='info'></vwc-badge>
-<vwc-badge text='success' appearance='subtle' connotation='success'></vwc-badge>
-<vwc-badge text='warning' appearance='subtle' connotation='warning'></vwc-badge>
-<vwc-badge text='alert' appearance='subtle' connotation='alert'></vwc-badge>
-```
-
-### Outlined badge with connotation
-
-```html preview
-<vwc-badge text='primary' appearance='outlined' connotation='primary'></vwc-badge>
-<vwc-badge text='cta' appearance='outlined' connotation='cta'></vwc-badge>
-<vwc-badge text='info' appearance='outlined' connotation='info'></vwc-badge>
-<vwc-badge text='success' appearance='outlined' connotation='success'></vwc-badge>
-<vwc-badge text='warning' appearance='outlined' connotation='warning'></vwc-badge>
-<vwc-badge text='alert' appearance='outlined' connotation='alert'></vwc-badge>
-```

package/src/lib/badge/badge.scss

@@ -1,64 +0,0 @@
-@use '../../../../shared/src/lib/sass/mixins/typography' as typography;
-
-@use '../../../../shared/src/lib/sass/mixins/connotation/config' with (
-	$subset: primary cta success alert warning info,
-	$shades: soft contrast,
-	$default: primary,
-);
-@use '../../../../shared/src/lib/sass/mixins/connotation' as connotation;
-
-@use '../../../../shared/src/lib/sass/mixins/appearance/config' as appearance-config with (
-	$appearances: filled outlined subtle,
-	$states: idle,
-	$outline-duotone: true,
-	$default: filled,
-);
-@use '../../../../shared/src/lib/sass/mixins/appearance' as appearance;
-
-.control {
-	@include typography.typography-cat-shorthand('caption-bold');
-	@include connotation.connotation;
-	@include appearance.appearance;
-
-	display: inline-flex;
-	box-sizing: border-box;
-	align-items: center;
-	background-color: var(#{appearance.get-variable(fill)});
-	box-shadow: inset 0 0 0 1px var(#{appearance.get-variable(outline)});
-	color: var(#{appearance.get-variable(text)});
-	column-gap: 8px;
-	vertical-align: middle;
-}
-
-/* Size */
-
-.control:not(.size-base-small):not(.size-base-large) {
-	block-size: 24px;
-	padding-inline: 10px;
-}
-
-.control.size-base-small {
-	block-size: 20px;
-	padding-inline: 8px;
-}
-
-.control.size-base-large {
-	block-size: 28px;
-	padding-inline: 12px;
-}
-
-/* Shape */
-
-// stylelint-disable-next-line no-descending-specificity
-.control:not(.shape-pill) {
-	border-radius: 4px;
-}
-.control.shape-pill {
-	border-radius: 14px;
-}
-
-/* Icon */
-
-.icon-trailing .icon {
-	order: 1;
-}

package/src/lib/badge/badge.spec.ts

@@ -1,114 +0,0 @@
-import { elementUpdated, fixture } from '@vivid-nx/shared';
-import {Icon} from '../icon/icon';
-import {Badge} from './badge';
-import '.';
-
-const COMPONENT_TAG = 'vwc-badge';
-const ICON_SELECTOR = 'vwc-icon';
-
-describe('vwc-badge', () => {
-	let element: Badge;
-
-	beforeEach(async () => {
-		element = await fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`) as Badge;
-	});
-
-	describe('basic', () => {
-		it('initializes as a vwc-badge', async () => {
-			expect(element).toBeInstanceOf(Badge);
-			expect(element.text).toEqual('');
-			expect(element.icon).toBeUndefined();
-			expect(element.iconTrailing).toBeFalsy();
-			expect(element.connotation).toBeUndefined();
-			expect(element.shape).toBeUndefined();
-			expect(element.appearance).toBeUndefined();
-			expect(element.size).toBeUndefined();
-		});
-	});
-
-	describe('icon', () => {
-		it('adds an icon to the badge', async () => {
-			element.icon = 'home';
-			await elementUpdated(element);
-
-			const icon = element.shadowRoot?.querySelector(ICON_SELECTOR) as Icon;
-			expect(icon)
-				.toBeInstanceOf(Icon);
-			expect(icon?.type)
-				.toEqual('home');
-		});
-
-		it('setting `iconTrailing` set the order of element', async () => {
-			element.icon = 'home';
-			element.iconTrailing = true;
-			await elementUpdated(element);
-
-			const trailingIcon = element.shadowRoot?.querySelector(
-				`.icon-trailing ${ICON_SELECTOR}`,
-			);
-			expect(trailingIcon)
-				.toBeInstanceOf(Icon);
-		},
-		);
-	});
-
-	describe('text', () => {
-		it('set text property to node', async () => {
-			const text = 'lorem';
-			element.text = text;
-			await elementUpdated(element);
-
-			const control = element.shadowRoot?.querySelector('.control');
-			expect(control?.textContent?.trim())
-				.toEqual(text);
-		});
-	});
-
-	describe('connotation', () => {
-		it('sets correct internal connotation style', async () => {
-			const connotation = 'info';
-			(element as any).connotation = connotation;
-			await elementUpdated(element);
-
-			const control = element.shadowRoot?.querySelector(`.control.connotation-${connotation}`);
-			expect(control)
-				.toBeInstanceOf(Element);
-		});
-	});
-
-	describe('shape', () => {
-		it('sets correct internal shape style', async () => {
-			const shape = 'pill';
-			(element as any).shape = shape;
-			await elementUpdated(element);
-
-			const control = element.shadowRoot?.querySelector(`.control.shape-${shape}`);
-			expect(control)
-				.toBeInstanceOf(Element);
-		});
-	});
-
-	describe('appearance', () => {
-		it('sets correct internal appearance style', async () => {
-			const appearance = 'soft';
-			(element as any).appearance = appearance;
-			await elementUpdated(element);
-
-			const control = element.shadowRoot?.querySelector(`.control.appearance-${appearance}`);
-			expect(control)
-				.toBeInstanceOf(Element);
-		});
-	});
-
-	describe('size', () => {
-		it('sets correct internal size style', async () => {
-			const size = 'small';
-			(element as any).size = size;
-			await elementUpdated(element);
-
-			const control = element.shadowRoot?.querySelector(`.control.size-${size}`);
-			expect(control)
-				.toBeInstanceOf(Element);
-		});
-	});
-});

package/src/lib/badge/badge.template.ts

@@ -1,36 +0,0 @@
-import { html } 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 { affixIconTemplateFactory } from '../../shared/patterns/affix';
-import type { Badge } from './badge';
-
-const getClasses = ({
-	connotation, appearance, shape, size, iconTrailing
-}: Badge) => classNames(
-	'control',
-	[`connotation-${connotation}`, Boolean(connotation)],
-	[`appearance-${appearance}`, Boolean(appearance)],
-	[`shape-${shape}`, Boolean(shape)],
-	[`size-${size}`, Boolean(size)],
-	['icon-trailing', iconTrailing],
-);
-
-/**
- * The template for the {@link @microsoft/fast-foundation#Badge} component.
- *
- * @param context
- * @public
- */
-export const badgeTemplate: (
-	context: ElementDefinitionContext,
-	definition: FoundationElementDefinition
-) => ViewTemplate<Badge> = (context: ElementDefinitionContext) => {
-	const affixIconTemplate = affixIconTemplateFactory(context);
-
-	return html`
-    <span class="${getClasses}">
-      ${x => affixIconTemplate(x.icon)}
-      ${(x) => x.text}
-		</span>`;
-};