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

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

package/src/lib/badge/badge.ts

@@ -1,97 +0,0 @@
-import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
-import { attr } from '@microsoft/fast-element';
-import { AffixIconWithTrailing } from '../../shared/patterns/affix';
-
-import type {
-	Appearance, Connotation, Shape, Size,
-} from '../enums.js';
-
-/**
- * Types of badge connotation.
- *
- * @public
- */
-type BadgeConnotation = Extract<Connotation,
-| Connotation.Primary
-| Connotation.CTA
-| Connotation.Success
-| Connotation.Alert
-| Connotation.Warning
-| Connotation.Info>;
-
-/**
- * Types of badge appearance.
- *
- * @public
- */
-type BadgeAppearance = Extract<Appearance,
-Appearance.Filled | Appearance.Outlined | Appearance.Subtle>;
-
-/**
- * Types of badge shape.
- *
- * @public
- */
-type BadgeShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
-
-/**
- * Types of badge size.
- *
- * @public
- */
-type BadgeSize = Extract<Size, Size.BaseSmall | Size.Base | Size.BaseLarge>;
-
-/**
- * Base class for badge
- *
- * @public
- */
-export class Badge extends FoundationElement {
-	/**
-	 * The connotation the badge should have.
-	 *
-	 * @public
-	 * @remarks
-	 * HTML Attribute: connotation
-	 */
-	@attr connotation?: BadgeConnotation;
-
-	/**
-	 * The shape the badge should have.
-	 *
-	 * @public
-	 * @remarks
-	 * HTML Attribute: shape
-	 */
-	@attr shape?: BadgeShape;
-
-	/**
-	 * The appearance the badge should have.
-	 *
-	 * @public
-	 * @remarks
-	 * HTML Attribute: appearance
-	 */
-	@attr appearance?: BadgeAppearance;
-
-	/**
-	 * The size the badge should have.
-	 *
-	 * @public
-	 * @remarks
-	 * HTML Attribute: size
-	 */
-	@attr size?: BadgeSize;
-
-	/**
-	 * Indicates the badge's text.
-	 *
-	 * @public
-	 * @remarks
-	 * HTML Attribute: text
-	 */
-	@attr({ mode: 'fromView' }) text = '';
-}
-
-export interface Badge extends AffixIconWithTrailing {}
-applyMixins(Badge, AffixIconWithTrailing);

package/src/lib/badge/index.ts

@@ -1,23 +0,0 @@
-import '../icon';
-
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { designSystem } from '../../shared/design-system';
-import { Badge } from './badge';
-import styles from './badge.scss';
-import { badgeTemplate as template } from './badge.template';
-
-
-/**
- * Represents a badge custom element.
- * 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.
- */
-
-export const VIVIDBadge = Badge.compose<FoundationElementDefinition>({
-	baseName: 'badge',
-	template: template as any,
-	styles,
-});
-
-designSystem.register(VIVIDBadge());

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

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