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

package/src/lib/side-drawer/side-drawer.scss

@@ -1,109 +0,0 @@
-@use 'sass:map';
-
-@use 'partials/variables' as variables;
-@use '../../../../../node_modules/@vonage/vivid-tokens/dist/sass/themes/consts' as theme-consts;
-@use '../../../../shared/src/lib/sass/mixins/typography' as typography;
-@use '../../../../shared/src/lib/sass/mixins/scrim' as scrim-mixins;
-
-$z-index-default: 6;
-$padding-default: 16px;
-$inline-size: var(#{variables.$side-drawer-inline-size}, 280px);
-
-
-:host {
-	display: flex;
-	block-size: 100vh;
-}
-
-:host([position='end']) {
-	flex-direction: row-reverse;
-}
-
-.control {
-	position: fixed;
-	z-index: var(#{variables.$side-drawer-z-index}, #{$z-index-default});
-	top: auto;
-	bottom: 0;
-	display: flex;
-	overflow: auto;
-	flex-direction: column;
-	flex-shrink: 0;
-	background-color: var(#{variables.$side-drawer-background-color}, var(#{theme-consts.$vvd-color-canvas}));
-	block-size: inherit;
-	color: var(#{variables.$side-drawer-color}, var(#{theme-consts.$vvd-color-on-canvas}));
-	inline-size: #{$inline-size};
-
-	&.alternate {
-		background-color: var(#{theme-consts.$vvd-color-canvas});
-	}
-	&:not(.open) {
-		&.end {
-			transform: translateX(100%);
-		}
-		&:not(.end) {
-			transform: translateX(-100%);
-		}
-	}
-
-	&.control.open:not(.modal) {
-		+ .side-drawer-app-content {
-			@include typography.typography-cat-shorthand(body-1);
-			
-			margin-inline-start: #{$inline-size};
-			::slotted(vwc-top-app-bar),
-			::slotted(vwc-top-app-bar-fixed) {
-				--mdc-top-app-bar-width: calc(100% - #{$inline-size});
-			}
-		}
-		&.end {
-			+ .side-drawer-app-content {
-				margin-inline-end: var(--side-drawer-inline-size, 280px);
-				margin-inline-start: 0;
-			}
-		}
-	}
-	@media (prefers-reduced-motion: no-preference) {
-		transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-	}
-}
-
-.side-drawer-top-bar {
-	@include typography.typography-cat-shorthand(subtitle-1);
-
-	$gutter: var(#{variables.$side-drawer-padding-top-bar}, #{$padding-default});
-	
-	display: flex;
-	flex-shrink: 0;
-	align-items: center;
-	padding-inline-end: #{$gutter};
-	padding-inline-start: #{$gutter};
-}
-
-.side-drawer-content {
-	$gutter: var(#{variables.$side-drawer-padding-body}, #{$padding-default});
-	
-	background-color: inherit;
-	overflow-y: auto;
-	padding-inline-end: #{$gutter};
-	padding-inline-start: #{$gutter};
-}
-
-.modal {
-	&:not(.end) {
-		inset-inline-start: 0;
-	}
-	&.end {
-		inset-inline-end: 0;
-	}
-}
-
-.scrim {
-	@include scrim-mixins.scrim-variables;
-	
-	position: fixed;
-	z-index: calc(#{$z-index-default} - 1);
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-}

package/src/lib/side-drawer/side-drawer.spec.ts

@@ -1,118 +0,0 @@
-import { elementUpdated, fixture, getControlElement } from '@vivid-nx/shared';
-import { SideDrawer } from './side-drawer';
-import '.';
-
-const COMPONENT_TAG = 'vwc-side-drawer';
-
-describe('vwc-side-drawer', () => {
-	let element: SideDrawer;
-
-	beforeEach(async () => {
-		element = await fixture(`<${COMPONENT_TAG}>
-								</${COMPONENT_TAG}>`) as SideDrawer;
-	});
-
-	describe('basic', () => {
-		it('initializes as a vwc-side-drawer', async () => {
-			expect(element).toBeInstanceOf(SideDrawer);
-			expect(element.open).toBeFalsy();
-			expect(element.alternate).toBeFalsy();
-			expect(element.position).toBeUndefined();
-			expect(element.modal).toBeFalsy();
-		});
-	});
-
-	describe('show', () => {
-		it('should set "open" to true and add "open" class', async () => {
-			const control = getControlElement(element);
-			const hasClassOpenBeforeShow = control.classList.contains('open');
-
-			element.open = true;
-			await elementUpdated(element);
-			const hasClassOpenAfterShow = control.classList.contains('open');
-
-			expect(element.open).toEqual(true);
-			expect(hasClassOpenBeforeShow).toEqual(false);
-			expect(hasClassOpenAfterShow).toEqual(true);
-		});
-	});
-
-	describe('hide', () => {
-		it('should set "open" to false and remove "open" class', async () => {
-			element.open = true;
-			await elementUpdated(element);
-			const control = getControlElement(element);
-			const hasClassOpenBeforeHide = control.classList.contains('open');
-
-			element.open = false;
-			await elementUpdated(element);
-			const hasClassOpenAfterHide = control.classList.contains('open');
-
-			expect(hasClassOpenBeforeHide).toEqual(true);
-			expect(hasClassOpenAfterHide).toEqual(false);
-		});
-	});
-
-	describe('modal', () => {
-		it('should set "modal" to true and add "modal" class', async () => {
-			const control = getControlElement(element);
-			let hasClassModal = control.classList.contains('modal');
-			element.modal = true;
-			await elementUpdated(element);
-			expect(hasClassModal).toEqual(false);
-
-			hasClassModal = control.classList.contains('modal');
-			expect(hasClassModal).toEqual(true);
-		});
-	});
-
-	describe('alternate', () => {
-		it('should set "alternate" to true and add "alternate" class', async () => {
-			const control = getControlElement(element);
-			let hasClassAlternate = control.classList.contains('alternate');
-			element.alternate = true;
-			await elementUpdated(element);
-			expect(hasClassAlternate).toEqual(false);
-
-			hasClassAlternate = control.classList.contains('alternate');
-			expect(hasClassAlternate).toEqual(true);
-		});
-	});
-
-	describe('position', () => {
-		it('should set "position" to "end" and add "position" class', async () => {
-			const control = getControlElement(element);
-			let hasClassPosition = control.classList.contains('end');
-			element.position = 'end';
-			await elementUpdated(element);
-			expect(hasClassPosition).toEqual(false);
-
-			hasClassPosition = control.classList.contains('end');
-			expect(hasClassPosition).toEqual(true);
-		});
-	});
-
-	describe('scrim', () => {
-		it('should close after clicking on scrim', async () => {
-			element.modal = true;
-			element.open = true;
-			await elementUpdated(element);
-			const scrim: any = element.shadowRoot?.querySelector('.scrim');
-			scrim?.click();
-			await elementUpdated(element);
-			expect(element.open).toEqual(false);
-		});
-	});
-
-	describe('escape', () => {
-		it('should close after keydown on Escape', async () => {
-			element.modal = true;
-			element.open = true;
-			await elementUpdated(element);
-			const aside: any = element.shadowRoot?.querySelector('aside');
-			aside?.dispatchEvent(new KeyboardEvent('keydown', { 'key': 'Escape' }));
-			await elementUpdated(element);
-			expect(element.open).toEqual(false);
-		});
-	});
-});

package/src/lib/side-drawer/side-drawer.template.ts

@@ -1,51 +0,0 @@
-import { html, slotted, when } from '@microsoft/fast-element';
-import { classNames } from '@microsoft/fast-web-utilities';
-import type { ViewTemplate } from '@microsoft/fast-element';
-import type {
-	FoundationElementTemplate,
-} from '@microsoft/fast-foundation';
-import type { SideDrawer } from './side-drawer';
-
-const getClasses = ({
-	alternate, modal, open, position
-}: SideDrawer) => classNames(
-	'control',
-	['alternate', alternate],
-	['modal', modal],
-	['open', open],
-	['end', position === 'end'],
-);
-
-/**
- * The template for the {@link @vonage/vivid#side-drawer} component.
- *
- * @param context
- * @param definition
- * @returns {ViewTemplate<side-drawer>} A template capable of creating HTMLView instances or rendering directly to DOM.
- * @public
- */
-export const sideDrawerTemplate: FoundationElementTemplate<ViewTemplate<SideDrawer>> = () => html`
-	<aside class="${getClasses}" part="${(x) => x.alternate ? 'vvd-theme-alternate' : ''}"
-	 @keydown="${(x, c) => handleKeydown(x, c.event as KeyboardEvent)}">
-
-	 	<header class="side-drawer-top-bar" part="side-drawer-top-bar">
-	 		<slot name="top-bar" ${slotted('hasTopBar')}></slot>
- 		</header>
-
-		<div class="side-drawer-content">
-			<slot></slot>
-		</div>
-	</aside>
-
-	<div class="side-drawer-app-content">
-		<slot name="app-content"></slot>
-	</div>
-
-	${when(x => (x.modal && x.open), html`<div class="scrim" @click="${x => (x.open = false)}" @keydown="${x => (x.open = false)}"></div>`)}
-`;
-
-const handleKeydown = (x: any, { key }: KeyboardEvent) => {
-	if (key === 'Escape') {
-		x.open = false;
-	}
-};

package/src/lib/side-drawer/side-drawer.ts

@@ -1,58 +0,0 @@
-import { attr } from '@microsoft/fast-element';
-import { FoundationElement } from '@microsoft/fast-foundation';
-
-/**
- * Base class for side-drawer
- *
- * @cssprop [side-drawer-background-color=Current theme's canvas (background) color] - Controls the background of the side drawer
- * @cssprop [side-drawer-color=Current theme's on-canvas (text) color] - Controls the color of the side drawer
- * @cssprop [side-drawer-inline-size=280px] - Controls the inline size of the side drawer
- * @cssprop [side-drawer-padding-top-bar=16px] - Controls the padding of the side drawer's top bar
- * @cssprop [side-drawer-padding-body=16px] - Controls the padding of the side drawer's body
- * @cssprop [side-drawer-z-index=6] - Controls the z-index of the side drawer
- * @public
- */
-
-export class SideDrawer extends FoundationElement {
-	/**
-	 * applies scheme alternate region
-	 *
-	 * @public
-	 */
-	@attr({
-		mode: 'boolean',
-	}) alternate = false;
-
-	/**
-	 * sets the side drawer's type to modal
-	 *
-	 * @public
-	 */
-	@attr({
-		mode: 'boolean',
-	}) modal = false;
-
-	/**
-	 * indicates whether the side drawer is open
-	 *
-	 * @public
-	 */
-	@attr({
-		mode: 'boolean',
-	}) open = false;
-
-	/**
-	 * sets the side of the side drawer
-	 *
-	 * @public
-	 */
-	@attr position?: 'start' | 'end';
-
-	/**
-	 *
-	 * adds top bar to the side drawer
-	 *
-	 * @public
-	 */
-	hasTopBar: HTMLElement[] | undefined;
-}

package/src/lib/side-drawer/ui.test.ts

@@ -1,102 +0,0 @@
-import { expect, test } from '@playwright/test'; 
-import type { Page } from '@playwright/test';
-import {
-	loadComponents,
-	loadTemplate
-} from '../../visual-tests/visual-tests-utils.ts';
-
-const components = ['side-drawer', 'text', 'button', 'sidenav-item'];
-test('should show the component', async ({ page }: { page: Page }) => {
-	const template = `<style>
-    vwc-side-drawer#sideDrawer{
-        --side-drawer-background-color: var(--vvd-color-neutral-10);
-        --side-drawer-inline-size: 200px;
-    }
-</style>
-<vwc-side-drawer id="sideDrawer" open>
-	<div slot="top-bar">
-        <vwc-text font-face="subtitle-1">VIVID</vwc-text>
-    </div>
-	<div>
-		<vwc-sidenav-item href="#" text="1st level item" icon="home-line"></vwc-sidenav-item>
-        <p><vwc-text font-face="body-2-bold">SECTION TITLE</vwc-text></p>
-        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
-        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
-	</div>
-	<div slot="app-content">
-        <vwc-button id="button" shape="pill" icon='menu-solid'></vwc-button>
-        <vwc-text font-face="body-1">
-            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
-            standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
-            a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
-            remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
-            Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
-            of Lorem Ipsum.
-        </vwc-text>
-	</div>
-</vwc-side-drawer>`;
-
-	await loadComponents({
-		page,
-		components,
-	});
-	await loadTemplate({
-		page,
-		template,
-	});
-
-	const testWrapper = await page.$('#wrapper');
-
-	await page.waitForLoadState('networkidle');
-
-	expect(await testWrapper?.screenshot())
-		.toMatchSnapshot(
-			'./snapshots/side-drawer.png',
-		);
-});
-
-test('should show the component 2', async ({ page }: { page: Page }) => {
-	const template = `<style>
-    vwc-side-drawer#sideDrawer{
-        --side-drawer-background-color: var(--vvd-color-neutral-10);
-        --side-drawer-inline-size: 200px;
-    }
-</style>
-<vwc-side-drawer id="sideDrawer" open position="end" alternate modal>
-	<div>
-		<vwc-sidenav-item href="#" text="1st level item" icon="home-line"></vwc-sidenav-item>
-        <p><vwc-text font-face="body-2-bold">SECTION TITLE</vwc-text></p>
-        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
-        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
-	</div>
-	<div slot="app-content">
-        <vwc-button id="button" shape="pill" icon='menu-solid'></vwc-button>
-        <vwc-text font-face="body-1">
-            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
-            standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
-            a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
-            remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
-            Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
-            of Lorem Ipsum.
-        </vwc-text>
-	</div>
-</vwc-side-drawer>`;
-
-	await loadComponents({
-		page,
-		components,
-	});
-	await loadTemplate({
-		page,
-		template,
-	});
-
-	const testWrapper = await page.$('#wrapper');
-
-	await page.waitForLoadState('networkidle');
-
-	expect(await testWrapper?.screenshot())
-		.toMatchSnapshot(
-			'./snapshots/side-drawer-modal.png',
-		);
-});

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

@@ -1,41 +0,0 @@
-# sidenav-item
-
-This element's attributes include the [anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) attributes.
-
-```js
-<script type="module">import '@vonage/vivid/sidenav-item';</script>
-```
-
-## Text
-
-- Type: `String`
-- Default: `''`
-
-Add a `text` attribute to add text to the sidenav item.
-
-```html preview
-<vwc-sidenav-item href="#" text="Profile"></vwc-sidenav-item>
-<vwc-sidenav-item href="#" text="GitHub"></vwc-sidenav-item>
-<vwc-sidenav-item href="#" text="lorem ipsum"></vwc-sidenav-item>
-```
-
-## Icon
-
-Sidenav item text can be prefixed by a decorative icon.
-Use the `icon` attribute to add an icon.
-
-```html preview
-<vwc-sidenav-item href="#" text="Profile" icon="profile"></vwc-sidenav-item>
-<vwc-sidenav-item href="#" text="GitHub" icon="github-mono"></vwc-sidenav-item>
-<vwc-sidenav-item href="#" text="lorem ipsum" icon="delete-line"></vwc-sidenav-item>
-```
-
-## Icon Only
-
-If text is not applied...
-
-```html preview
-<vwc-sidenav-item href="#" icon="profile"></vwc-sidenav-item>
-<vwc-sidenav-item href="#" icon="github-mono"></vwc-sidenav-item>
-<vwc-sidenav-item href="#" icon="delete-line"></vwc-sidenav-item>
-```

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

@@ -1,20 +0,0 @@
-import '../icon';
-
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { designSystem } from '../../shared/design-system';
-import styles from './sidenav-item.scss';
-
-import { SidenavItem } from './sidenav-item';
-import { SidenavItemTemplate as template } from './sidenav-item.template';
-
-export const vividSidenavItem =
-	SidenavItem.compose<FoundationElementDefinition>({
-		baseName: 'sidenav-item',
-		template: template as any,
-		styles,
-		shadowOptions: {
-			delegatesFocus: true,
-		},
-	});
-
-designSystem.register(vividSidenavItem());

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

@@ -1,51 +0,0 @@
-@use '../../../../shared/src/lib/sass/mixins/typography' as typography;
-@use '../../../../../node_modules/@vonage/vivid-tokens/dist/sass/themes/consts' as theme-consts;
-
-.control {
-	$min-block-size: 40px;
-	$gap: 8px;
-	@include typography.typography-cat-shorthand('body-2');
-
-	position: relative;
-	display: inline-flex;
-	box-sizing: border-box;
-	align-items: center;
-	background-color: transparent;
-	border-radius: 6px;
-	color: var(#{theme-consts.$vvd-color-on-canvas});
-	gap: $gap;
-	hyphens: auto;
-	inline-size: 100%;
-	min-block-size: $min-block-size;
-	outline: 0 none;
-	padding-block: 10px;
-	padding-inline: $gap;
-	text-decoration: none;
-	vertical-align: middle;
-	word-break: break-word;
-
-	@at-root :host,
-	& {
-		outline: 0 none;
-	}
-
-	&.icon-only {
-		display: flex;
-		block-size: $min-block-size;
-		inline-size: $min-block-size;
-		place-content: center;
-	}
-
-}
-
-.control:focus {
-	background-color: var(#{theme-consts.$vvd-color-neutral-20});
-}
-
-.control:focus-visible {
-	box-shadow: inset 0 0 0 1px darkorange;
-}
-
-.icon {
-	font-size: 20px;
-}

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

@@ -1,64 +0,0 @@
-import { elementUpdated, fixture } from '@vivid-nx/shared';
-import { Icon } from '../icon/icon';
-import { SidenavItem } from './sidenav-item';
-import '.';
-
-const COMPONENT_TAG = 'vwc-sidenav-item';
-const ICON_SELECTOR = 'vwc-icon';
-
-describe('vwc-sidenav-item', () => {
-	let element: SidenavItem;
-
-	beforeEach(async () => {
-		element = (await fixture(
-			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
-		)) as SidenavItem;
-	});
-
-	describe('basic', () => {
-		it('should be initialized as a vwc-sidenav-item', async () => {
-			expect(element).toBeInstanceOf(SidenavItem);
-			expect(element.text).toEqual('');
-			expect(element.icon).toBeUndefined();
-		});
-	});
-
-	describe('icon', () => {
-		it('should add an icon to the sidenav item', 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');
-		});
-	});
-
-	describe('icon-only', () => {
-		it('should set correct internal icon-only style', async () => {
-			const getControlIconOnly = () => element.shadowRoot?.querySelector('.control.icon-only');
-			const controlIconOnlyBefore = getControlIconOnly();
-
-			element.icon = 'home';
-			await elementUpdated(element);
-
-			const controlIconOnlyAfter = getControlIconOnly();
-			expect(controlIconOnlyBefore).toBeNull();
-			expect(controlIconOnlyAfter).toBeInstanceOf(Element);
-		});
-	});
-
-	describe('text', () => {
-		it('should set text property value as text content', async () => {
-			const text = 'lorem';
-			element.text = text;
-			await elementUpdated(element);
-
-			const control = element.shadowRoot?.querySelector('.control');
-			expect(control?.textContent?.trim())
-				.toEqual(text);
-		});
-	});
-});

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

@@ -1,25 +0,0 @@
-import { html } from '@microsoft/fast-element';
-import type { ViewTemplate } from '@microsoft/fast-element';
-import type {
-	ElementDefinitionContext,
-	FoundationElementDefinition,
-} from '@microsoft/fast-foundation';
-import { textAnchorTemplate } from '../text-anchor/text-anchor.template';
-import type { SidenavItem } from './sidenav-item';
-
-/**
- * The template for the {@link @microsoft/fast-foundation#SidenavItem} component.
- *
- * @param context
- * @param definition
- * @public
- */
-export const SidenavItemTemplate: (
-	context: ElementDefinitionContext,
-	definition: FoundationElementDefinition
-) => ViewTemplate<SidenavItem> = (
-	context: ElementDefinitionContext,
-	definition: FoundationElementDefinition
-) => html<SidenavItem>`
-      ${textAnchorTemplate(context, definition)}
-    `;