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

package/src/lib/breadcrumb/breadcrumb.ts

@@ -0,0 +1,10 @@
+import { Breadcrumb as FoundationElement } from '@microsoft/fast-foundation';
+
+/**
+ * Base class for breadcrumb
+ *
+ * @public
+ */
+export class Breadcrumb extends FoundationElement {
+
+}

package/src/lib/breadcrumb/index.ts

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

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

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

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

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

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

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

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

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

package/src/lib/button/README.md

@@ -0,0 +1,120 @@
+# button
+
+A button represents an action that the user can take. Use buttons to enable important actions.
+
+```js
+<script type='module'>
+    import '@vonage/vivid/button';
+</script>
+```
+
+## Label
+
+- Type: `String`
+- Default: `''`
+
+Add a `label` attribute to add text to the button.
+
+```html preview
+<vwc-button appearance='filled' label='A default button'></vwc-button>
+```
+
+## Size
+
+Use the `size` attribute to change the button's size.
+
+- Type: `'base-small'` | `'base'` | `'base-large'`
+- Default: `'base'`
+
+```html preview
+<vwc-button appearance='filled' label='base-small' size='base-small'></vwc-button>
+<vwc-button appearance='filled' label='base' size='base'></vwc-button>
+<vwc-button appearance='filled' label='base-large' size='base-large'></vwc-button>
+```
+
+## Shape
+
+Use the `shape` attribute to change the button's edges.
+
+- Type: `'rounded'` | `'pill'`
+- Default: `'rounded'`
+
+```html preview
+<vwc-button appearance='filled' label='rounded' shape='rounded'></vwc-button>
+<vwc-button appearance='filled' label='pill' shape='pill'></vwc-button>
+```
+
+## Icon
+
+Button 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-button appearance="filled" label='icon' icon='check-line'></vwc-button>
+<vwc-button appearance="filled" label='icon-trailing' icon='check-line' icon-trailing></vwc-button>
+```
+
+## Icon Only
+
+If label not applied...
+
+```html preview
+<vwc-button appearance="filled" icon='message-sent-line'></vwc-button>
+<vwc-button appearance="filled" shape="pill" icon='message-sent-line'></vwc-button>
+```
+
+## Appearance
+
+Set the `appearance` attribute to change the button's appearance.
+
+- Type: `'ghost'` | `'filled'` | `'outlined'`
+- Default: `'ghost'`
+
+```html preview
+<vwc-button label='ghost' appearance='ghost'></vwc-button>
+<vwc-button label='filled' appearance='filled'></vwc-button>
+<vwc-button label='outlined' appearance='outlined'></vwc-button>
+```
+
+## Connotation
+
+Set the `connotation` attribute to change the button's connotation.
+It accepts a subset of predefined values.
+
+- Type: `'primary'` | `'cta'` | `'success'` | `'alert'` | `'announcement'` | `'info'`
+- Default: `'primary'`
+
+### Ghost button with connotation
+
+```html preview
+<vwc-button appearance="ghost" label='primary' connotation='primary'></vwc-button>
+<vwc-button appearance="ghost" label='cta' connotation='cta'></vwc-button>
+<vwc-button appearance="ghost" label='success' connotation='success'></vwc-button>
+<vwc-button appearance="ghost" label='alert' connotation='alert'></vwc-button>
+```
+
+### Filled button with connotation
+
+```html preview
+<vwc-button appearance="filled" label='primary' connotation='primary'></vwc-button>
+<vwc-button appearance="filled" label='cta' connotation='cta'></vwc-button>
+<vwc-button appearance="filled" label='success' connotation='success'></vwc-button>
+<vwc-button appearance="filled" label='alert' connotation='alert'></vwc-button>
+```
+
+### Outlined button with connotation
+
+```html preview
+<vwc-button appearance="outlined" label='primary' connotation='primary'></vwc-button>
+<vwc-button appearance="outlined" label='cta' connotation='cta'></vwc-button>
+<vwc-button appearance="outlined" label='success' connotation='success'></vwc-button>
+<vwc-button appearance="outlined" label='alert' connotation='alert'></vwc-button>
+```
+
+## States
+### Disabled
+```html preview
+<vwc-button disabled appearance='ghost' label='ghost'></vwc-button>
+<vwc-button disabled appearance='filled' label='filled'></vwc-button>
+<vwc-button disabled appearance='outlined' label='outlined'></vwc-button>
+```