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

package/src/lib/accordion/README.md

@@ -1,55 +0,0 @@
-# accordion
-
-```js
-<script type="module">
-    import '@vonage/vivid/accordion';
-</script>
-```
-
-```html preview
-<vwc-accordion>
-    <vwc-accordion-item heading="accordion item with heading">
-        <vwc-text>content</vwc-text>
-    </vwc-accordion-item>
-    <vwc-accordion-item heading="accordion item with heading">
-        <vwc-text>content</vwc-text>
-    </vwc-accordion-item>
-    <vwc-accordion-item heading="accordion item with heading">
-        <vwc-text>content</vwc-text>
-    </vwc-accordion-item>
-    <vwc-accordion-item heading="accordion item with heading">
-        <vwc-text>content</vwc-text>
-    </vwc-accordion-item>
-</vwc-accordion>
-```
-## Multi
-Add the `multi` attribute to the accordion to allow multiple items to be open at once.
-
-- Type: `boolean`
-- Default: `false`
-
-```html preview
-<vwc-accordion multi>
-    <vwc-accordion-item heading="accordion item with heading">
-        <vwc-text>content</vwc-text>
-    </vwc-accordion-item>
-    <vwc-accordion-item heading="accordion item with heading">
-        <vwc-text>content</vwc-text>
-    </vwc-accordion-item>
-    <vwc-accordion-item heading="accordion item with heading">
-        <vwc-text>content</vwc-text>
-    </vwc-accordion-item>
-    <vwc-accordion-item heading="accordion item with heading">
-        <vwc-text>content</vwc-text>
-    </vwc-accordion-item>
-</vwc-accordion>
-```
-
-## Methods
-
-### CloseAll
-
-- Type: function
-- Returns: `void`
-
- Closes all the accordion items from the open state.

package/src/lib/accordion/accordion.scss

@@ -1,10 +0,0 @@
-@use '../../../../../node_modules/@vonage/vivid-tokens/dist/sass/themes/consts' as theme-consts;
-
-.control {
-	display: flex;
-	flex-direction: column;
-}
-
-::slotted(vwc-accordion-item:not(:only-of-type)) {
-	border-bottom: 1px solid var(#{theme-consts.$vvd-color-neutral-30});
-}

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

@@ -1,91 +0,0 @@
-import { elementUpdated, fixture } from '@vivid-nx/shared';
-import type { AccordionItem } from '../accordion-item/accordion-item';
-import { Accordion } from './accordion';
-import '.';
-import '../accordion-item';
-
-const COMPONENT_TAG = 'vwc-accordion';
-
-describe('vwc-accordion', () => {
-	let element: Accordion;
-	let accordionItem1: AccordionItem;
-	let accordionItem2: AccordionItem;
-
-	beforeEach(async () => {
-		element = (await fixture(
-			`<${COMPONENT_TAG}>
-				<vwc-accordion-item heading="accordion item" id="item1"><p>content</p></vwc-accordion-item>
-				<vwc-accordion-item heading="accordion item" id="item2"><p>content</p></vwc-accordion-item>
-			</${COMPONENT_TAG}>`
-		)) as Accordion;
-		await elementUpdated(element);
-
-		accordionItem1 = element.querySelector('#item1') as AccordionItem;
-		accordionItem2 = element.querySelector('#item2') as AccordionItem;
-		await elementUpdated(accordionItem1);
-		await elementUpdated(accordionItem2);
-	});
-
-	describe('basic', () => {
-		it('should be initialized as a vwc-accordion', async () => {
-			expect(element).toBeInstanceOf(Accordion);
-			expect(element.multi).toBeFalsy();
-		});
-	});
-
-	describe('non multi', () => {
-		it('should only allow one accordion items open at a time', async () => {
-			expect(accordionItem1.open).toBeFalsy();
-			expect(accordionItem2.open).toBeFalsy();
-
-			accordionItem1.open = true;
-			await elementUpdated(element);
-			accordionItem2.open = true;
-			await elementUpdated(element);
-
-			expect(accordionItem1.open).toBeFalsy();
-			expect(accordionItem2.open).toBeTruthy();
-		});
-	});
-
-	describe('multi', () => {
-		it('should allow all accordion items open when multi', async () => {
-			element.multi = true;
-			await elementUpdated(element);
-
-			expect(accordionItem1.open).toBeFalsy();
-			expect(accordionItem2.open).toBeFalsy();
-
-			accordionItem1.open = true;
-			await elementUpdated(element);
-			accordionItem2.open = true;
-			await elementUpdated(element);
-
-			expect(accordionItem1.open).toBeTruthy();
-			expect(accordionItem2.open).toBeTruthy();
-		});
-	});
-
-
-	describe('close all', () => {
-		it('should close all accordion items', async () => {
-			element.multi = true;
-			await elementUpdated(element);
-			
-			accordionItem1.open = true;
-			await elementUpdated(element);
-			accordionItem2.open = true;
-			await elementUpdated(element);
-
-			expect(accordionItem1.open).toBeTruthy();
-			expect(accordionItem2.open).toBeTruthy();
-
-			element.closeAll();
-			await elementUpdated(element);
-
-			expect(accordionItem1.open).toBeFalsy();
-			expect(accordionItem2.open).toBeFalsy();
-		});
-	});
-
-});

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

@@ -1,23 +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 type { Accordion } from './accordion';
-
-const getClasses = (_: Accordion) => classNames('control');
-
-/**
- *
- * @param context
- * @public
- */
-export const AccordionTemplate: (
-	context: ElementDefinitionContext,
-	definition: FoundationElementDefinition
-) => ViewTemplate<Accordion> = (
-) => html`<div class="${getClasses}">
-	<slot></slot>
-</div>`;

package/src/lib/accordion/accordion.ts

@@ -1,49 +0,0 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
-import { attr } from '@microsoft/fast-element';
-import type { AccordionItem } from '../accordion-item/accordion-item';
-
-/**
- * Base class for accordion
- *
- * @public
- */
-export class Accordion extends FoundationElement {
-	private accordionItems: HTMLCollectionOf<AccordionItem> | undefined = undefined;
-
-	/**
-	 *
-	 * @public
-	 * HTML Attribute: multi
-	 */
-	@attr({
-		mode: 'boolean',
-	}) multi = false;
-
-	constructor() {
-		super();
-		this.addEventListener('opened', this.handleOpened);
-	}
-
-	override connectedCallback(): void {
-		super.connectedCallback();
-		this.accordionItems = this.children as HTMLCollectionOf<AccordionItem>;
-	}
-
-	private handleOpened(e: Event): any {
-		if (!this.multi && this.accordionItems) {
-			for (let i = 0; i < this.accordionItems.length; i++) {
-				if (this.accordionItems[i] !== e.target) {
-					this.accordionItems[i].open = false;
-				}
-			}
-		}
-	}
-
-	closeAll(): void {
-		if (this.accordionItems) {
-			for (let i = 0; i < this.accordionItems.length; i++) {
-				this.accordionItems[i].open = false;
-			}
-		}
-	}
-}

package/src/lib/accordion/index.ts

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

package/src/lib/accordion/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','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.png'
-	);
-});

package/src/lib/accordion-item/README.md

@@ -1,113 +0,0 @@
-# accordion-item
-
-```js
-<script type="module">
-    import '@vonage/vivid/accordion-item';
-</script>
-```
-## Heading
-Add the `heading` attribute to set the heading text.
-
-- Type: `string`
-- Default: `''`
-  
-```html preview
-  <vwc-accordion-item heading="accordion item with heading">
-    <vwc-text font-face="body-1">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </vwc-text>
-  </vwc-accordion-item>
-```
-
-## Heading-Level
-
-Use the `heading-level` attribute (or `headingLevel` property) to set the accordion heading level so it fits correctly within the outline of the page. Read more on [heading elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements).
-
-- Type: `2` | `3` | `4` | `5` | `6`
-- Default: `3`
-
-The following sets the heading of accordion-item to level 2
-
-```
-<vwc-accordion-item heading="my heading" heading-level="2"></vwc-accordion-item>
-```
-
-which will output the shadow tree heading element to be rendered as a `<h2>` tag
-
-e.g.
-
-```
-<h2 class="header">
-  <button>
-    <!-- ... -->
-  </button>
-</h2>
-```
-
-## Open
-Use the `open` attribute to set the accordion-item's open state.
-
-- Type: `boolean`
-- Default: `false`
-
-```html preview
- <vwc-accordion-item heading="Click to toggle accordion item" open>
-    <vwc-text font-face="body-1">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </vwc-text>
-  </vwc-accordion-item>
-```
-## No-Indicator
-Add the `no-indicator` attribute (or `noIndicator` property) to remove the indicator icon from the heading.
-
-- Type: `boolean`
-- Default: `false`
-
-```html preview
- <vwc-accordion-item heading="accordion item without indicator" no-indicator>
-    <vwc-text font-face="body-1">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </vwc-text>
-  </vwc-accordion-item>
-```
-## Meta
-Add the `meta` attribute to add metadata to the heading. 
-
-- Type: `string`
-- Default: `''`
-
-```html preview
- <vwc-accordion-item heading="accordion item with metadata" meta="meta-data">
-    <vwc-text font-face="body-1">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </vwc-text>
-  </vwc-accordion-item>
-```
-
-## Icon
-Add the `icon` attribute to add an icon to the heading. 
-
-- Type: `string`
-- Default: `''`
-
-```html preview
- <vwc-accordion-item heading="accordion item with icon" icon="chat-solid">
-    <vwc-text font-face="body-1">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </vwc-text>
-  </vwc-accordion-item>
-```
-
-## Icon-Trailing
-Add the `icon-trailing` attribute (or `iconTrailing` property) to add an icon to the right of the heading text.  Mind that `icon-trailing` will override the Indicator.
-
-- Type: `boolean`
-- Default: `false`
-
-```html preview
- <vwc-accordion-item heading="accordion item with icon-trailing" icon="chat-solid" icon-trailing>
-    <vwc-text font-face="body-1">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </vwc-text>
-  </vwc-accordion-item>
-```

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

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

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