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

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

@@ -0,0 +1,91 @@
+@use 'partials/variables' as variables;
+@use '../../../../shared/src/lib/sass/mixins/typography' as typography;
+@use '../../../../../node_modules/@vonage/vivid-tokens/dist/sass/themes/consts' as theme-consts;
+
+.body {
+	@include typography.typography-cat-shorthand('body-2');
+    
+	padding: 8px 32px 24px 16px;
+	.icon:not(.icon-trailing) &{
+		padding-left: 48px;
+	}
+}
+
+.control {
+	display: flex;
+	flex-direction: column;
+
+	&:not(.open) {
+		.toggle-close,
+		.body {
+			display: none;
+		}
+	}
+	&.open{
+		.toggle-open {
+			display: none;
+		}
+		.toggle-close {
+			display: initial;
+		}
+	}
+}
+
+.header {
+	padding: 0;
+	margin: 0;
+}
+
+.button {
+	@include typography.typography-cat-shorthand('subtitle-2');
+
+	position: relative;
+	display: flex;
+	width: 100%;
+	align-items: center;
+	padding: 16px;
+	border: 0 none;
+	background: transparent;
+	cursor: pointer;
+
+	&:hover {
+		background: var(#{theme-consts.$vvd-color-neutral-10});
+	}
+
+	.heading-text {
+		flex-grow: 1;
+		margin-inline-end: auto;
+		text-align: left;
+	}
+
+	.meta {
+		@include typography.typography-cat-shorthand('body-2-bold');
+
+		overflow: hidden;
+		max-width: 20%;
+		flex-shrink: 0;
+		color: var(#{theme-consts.$vvd-color-neutral-70});
+		margin-inline-start: 1rem;
+		text-align: end;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.indicator {
+		display: flex;
+		vwc-icon,
+		slot[name="indicator"i]::slotted(vwc-icon) {
+			margin-inline-start: 16px;
+		}
+	}
+
+	.icon { 
+		margin-inline-end: 16px;
+	}
+}
+
+/* Icon */
+
+.icon-trailing .icon {
+	order: 1;
+}

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

@@ -0,0 +1,103 @@
+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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,14 @@
+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

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

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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,112 @@
+# 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

@@ -0,0 +1,64 @@
+@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

@@ -0,0 +1,114 @@
+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);
+		});
+	});
+});