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

package/src/lib/banner/README.md

@@ -1,117 +0,0 @@
-# banner
-
-Banners are meant to be used on top of pages, outside the main content.
-
-
-```js
-<script type="module">import '@vonage/vivid/banner';</script>
-```
-
-```html preview
-<vwc-banner text="Here's some information that you may find important!"></vwc-banner>
-```
-
-## Text
-
-- Type: `string`
-- Default: `''`
-
-Use the `text` attribute to set the banner's text.
-
-```html preview
-<vwc-banner text="Here's some information that you may find important!"></vwc-banner>
-```
-
-## Icon
-
-- Type: `string`
-- Default: `'info'`
-
-The `icon` attribute will override the icon set by connotation.
-
-```html preview
-<vwc-banner text="Here's some information that you may find important!" 
-            connotation="alert"
-            icon="home-line"></vwc-banner>
-```
-
-## Connotation
-
-The `connotation` attribute sets the colors according to the wanted connotation.
-
-- Type: `'info'` | `'announcement'` | `'success'` | `'warning'` | `'alert'`
-- Default: `'info'`
-
-Note that icon, if not specifically set, defaults to a connotation-associated icon.
-
-const infoMessage = "I'm here to give you advice (Like, use the controls for options)";
-const announcementMessage = "I'm here to give you some info (Terms and Conditions changed... jk)";
-const successMessage = "I'm here to give you good news (Thanks for giving us money!)";
-const warningMessage = "I'm here to give you a warning (Your zip is down)";
-const alertMessage = "I'm here to tell you something's wrong (The horror, the horror)";
-
-```html preview
-<style>
-vwc-banner {
-    clear: both;
-}
-</style>
-<vwc-banner text="Here's some information that you may find useful!" connotation="info"></vwc-banner>
-<vwc-banner text="Here's some information that you may find important!" connotation="announcement"></vwc-banner>
-<vwc-banner text="Operation Successful!" connotation="success"></vwc-banner>
-<vwc-banner text="Heads up - this is a warning" connotation="warning"></vwc-banner>
-<vwc-banner text="ALERT! Something went wrong!" connotation="alert"></vwc-banner>
-```
-
-## Removable
-
-- Type: `boolean`
-- Default: `false`
-
-The `removable` attribute sets a remove button. On click it will remove the banner from the DOM.  
-
-```html preview
-<vwc-banner text="Here's some information that you may find important!"
-            removable></vwc-banner>
-```
-
-## Action Items
-
-You can add action items using slotted content in a named slot `actionItems`:
-
-```html preview
-<vwc-banner text="A banner with an action button">
-    <vwc-button slot="actionItems" appearance="filled" connotation="primary" label="Learn More"></vwc-button>
-</vwc-banner>
-```
-
-## Methods
-
-### remove()
-
-- Type: function
-- Returns: void
-
-Removes the banner from the DOM.  Fires the `vwc-banner:removing` event and starts the remove animation.  When the animation finishes, it emits the `vwc-banner:removed` event and removes the banner from the DOM completely.  If you have a variable that refers to the banner element make sure to clear it otherwise it might cause a memory leak.
-
-## Accessibility
-
-The banner defaults its role to ‘status’ with a redundant aria-live attribute set to polite (to maximize compatibility when using this role). This indicates that the screen reader should wait until the user is idle before presenting updates to the user.
-However, consumers can modify the above attributes (role and aria-live) to fit contextually. If the information is critical, by altering the banner's role to 'alert', assistive technologies will interrupt other processes and provide users with immediate notification.
-
-1. The `role` attribute is set to `status` by default. This can be changed.
-2. The `aria-live` attribute is set to `polite` by default. This can be changed.
-3. The banner can be dismissed by hitting the `escape` key when it is in focus.
-
-```html preview
-<vwc-banner role="status"
-            aria-live="polite"
-            text="Here's some information that you may find important!"></vwc-banner>
-```
-
-## Events
-
-| Event name           | Description                                                     |
-|----------------------|-----------------------------------------------------------------|
-| `vwc-banner:removing`| Fires whenever the the banner has started its removing animation|
-| `vwc-banner:removed` | Fires when the removing animation is done                       |

package/src/lib/banner/banner.scss

@@ -1,71 +0,0 @@
-@use '../../../../shared/src/lib/sass/mixins/typography' as typography;
-@use '../../../../../node_modules/@vonage/vivid-tokens/dist/sass/themes/consts' as theme-consts;
-@use '../../../../shared/src/lib/sass/mixins/connotation/config' with (
-	$subset: success info alert announcement warning,
-	$shades: strong,
-	$default: info,
-);
-@use '../../../../shared/src/lib/sass/mixins/connotation' as connotation;
-@use '../../../../shared/src/lib/sass/mixins/appearance/config' as appearance-config with (
-	$appearances: filled,
-	$default: filled,
-);
-@use '../../../../shared/src/lib/sass/mixins/appearance' as appearance;
-
-$banner-transition-delay: --transition-delay;
-
-.control {
-	@include connotation.connotation;
-	@include appearance.appearance;
-
-	overflow: hidden;
-	max-height: 10rem;
-	background-color: var(#{appearance.get-variable(fill)});
-	color: var(#{appearance.get-variable(text)});
-	transition: max-height var(#{$banner-transition-delay}, 200ms);
-
-	&.removing {
-		max-height: 0;
-	}
-
-	> .header {
-		@include typography.typography-cat-shorthand('body-2-bold');
-
-		display: flex;
-		min-height: 60px;
-		align-items: center;
-		justify-content: flex-start;
-
-		> .user-content {
-			display: flex;
-			flex: 1 0;
-			align-items: center;
-			justify-content: center;
-			padding-inline: 16px;
-
-			> .icon {
-				flex: 0 0 auto;
-				font-size: 20px;
-				margin-inline-end: 15px;
-			}
-
-			> .action-items {
-				display: inline-block;
-				flex: 0 0 auto;
-				padding-inline-start: 15px;
-			}
-
-			> .message {
-				padding: 20px 0;
-			}
-		}
-
-		> .dismiss-button {
-			--vvd-icon-button-color: inherit;
-
-			flex: 0 0 auto;
-			margin-inline-end: 8px;
-		}
-	}
-}
-

package/src/lib/banner/banner.spec.ts

@@ -1,355 +0,0 @@
-import {elementUpdated, fixture} from '@vivid-nx/shared';
-import type {Icon} from '../icon/icon';
-import {Button} from '../button/button';
-import {Connotation} from '../enums';
-import { Banner } from './banner';
-import type { BannerConnotation } from './banner';
-import '.';
-
-const COMPONENT_TAG = 'vwc-banner';
-
-/**
- * @param element
- * @param removable
- */
-async function toggleRemovable(element: Banner, removable = true) {
-	element.removable = removable;
-	await elementUpdated(element);
-}
-
-describe('vwc-banner', () => {
-	/**
-	 *
-	 */
-	function dispatchAnimationEndEvent() {
-		const banner = element.shadowRoot?.querySelector('.banner');
-		const event = new Event('transitionend');
-		banner?.dispatchEvent(event);
-	}
-
-	let element: Banner;
-
-	beforeEach(async () => {
-		element = (await fixture(
-			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
-		)) as Banner;
-	});
-
-	describe('basic', () => {
-		it('should be initialized as a vwc-banner', async () => {
-			expect(element)
-				.toBeInstanceOf(Banner);
-		});
-	});
-
-	describe('text', function () {
-		/**
-		 * @param text
-		 */
-		async function setTextProperty(text: string | undefined) {
-			element.text = text;
-			await elementUpdated(element);
-		}
-
-		/**
-		 * @param text
-		 */
-		async function setTextAttribute(text: string | undefined) {
-			element.setAttribute('text', text ? text : '');
-			await elementUpdated(element);
-		}
-
-		/**
-		 *
-		 */
-		function getText() {
-			const text = element.shadowRoot?.querySelector('.banner--message')?.textContent;
-			return text?.trim();
-		}
-
-		it('should init with undefined and set as empty string in DOM', function () {
-			const initTextPropEmpty = element.text;
-			const initTextAttrEmpty = getText();
-
-			expect(initTextPropEmpty)
-				.toEqual(undefined);
-			expect(initTextAttrEmpty)
-				.toEqual('');
-		});
-
-		it('should reflect the message', async function () {
-			const messageText = 'Some Text';
-
-			await setTextProperty(messageText);
-			const DOMTextWithProperty = getText();
-
-			await setTextProperty(undefined);
-			await setTextAttribute(messageText);
-			const propertyTextWithAttribute = element.text;
-
-			expect(DOMTextWithProperty)
-				.toEqual(messageText);
-			expect(propertyTextWithAttribute)
-				.toEqual(messageText);
-		});
-	});
-
-	describe('role', function () {
-		it('should be set to "status" on init', function () {
-			const role = element.shadowRoot?.querySelector('.banner--message')
-				?.getAttribute('role');
-			expect(role)
-				.toEqual('status');
-		});
-
-		it('should change role to role text', async function () {
-			element.role = 'alert';
-			await elementUpdated(element);
-			const role = element.shadowRoot?.querySelector('.banner--message')
-				?.getAttribute('role');
-			expect(role)
-				.toEqual('alert');
-		});
-
-		it('should change role when role attribute is set', async function () {
-			element.setAttribute('role', 'alert');
-			await elementUpdated(element);
-			const role = element.shadowRoot?.querySelector('.banner--message')
-				?.getAttribute('role');
-			expect(role)
-				.toEqual('alert');
-		});
-	});
-
-	describe('aria live', function () {
-		it('should be set to "live" on init', function () {
-			const ariaLive = element.shadowRoot?.querySelector('.banner--message')
-				?.getAttribute('aria-live');
-			expect(ariaLive)
-				.toEqual('polite');
-		});
-
-		it('should change aria-live to ariaLive text', async function () {
-			element.ariaLive = 'assertive';
-			await elementUpdated(element);
-			const ariaLive = element.shadowRoot?.querySelector('.banner--message')
-				?.getAttribute('aria-live');
-			expect(ariaLive)
-				.toEqual('assertive');
-		});
-
-		it('should change aria-live to ariaLive text', async function () {
-			element.setAttribute('aria-live', 'assertive');
-			await elementUpdated(element);
-			const ariaLive = element.shadowRoot?.querySelector('.banner--message')
-				?.getAttribute('aria-live');
-			expect(ariaLive)
-				.toEqual('assertive');
-		});
-	});
-
-	describe('remove', function () {
-
-		it('should fire removing event', async function () {
-			const spy = jest.fn();
-			element.addEventListener('vwc-banner:removing', spy);
-			element.remove();
-			expect(spy)
-				.toHaveBeenCalled();
-		});
-
-		it('should fire removed after animation end', async function () {
-
-			const spy = jest.fn();
-			element.addEventListener('vwc-banner:removed', spy);
-			element.remove();
-
-			dispatchAnimationEndEvent();
-
-			expect(spy)
-				.toHaveBeenCalled();
-			expect(spy.mock.calls.length)
-				.toEqual(1);
-		});
-
-		it('should disable removed and removing events after disconnected callback', async function () {
-
-			const spy = jest.fn();
-			element.addEventListener('vwc-banner:removed', spy);
-			element.addEventListener('vwc-banner:removing', spy);
-			element.disconnectedCallback();
-
-			element.remove();
-			dispatchAnimationEndEvent();
-
-			expect(spy.mock.calls.length)
-				.toEqual(0);
-		});
-
-		it('should remove the banner after dispatch', function () {
-			element.remove();
-			dispatchAnimationEndEvent();
-			expect(document.body.contains(element))
-				.toEqual(false);
-		});
-	});
-
-	describe('connotation', function () {
-		const possibleConnotations = [Connotation.Info,
-			Connotation.Announcement,
-			Connotation.Success,
-			Connotation.Warning,
-			Connotation.Alert
-		];
-
-		it('should leave connotation class empty if not set', async function () {
-			possibleConnotations.forEach(connotation => {
-				expect(element.shadowRoot?.querySelector('.banner')
-					?.classList
-					.contains(connotation))
-					.toEqual(false);
-			});
-		});
-
-		it('should set a connotation class', async function () {
-			const connotation = possibleConnotations[2];
-			(element.connotation as Connotation) = connotation;
-			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.banner')
-				?.classList
-				.contains(`connotation-${connotation}`))
-				.toEqual(true);
-		});
-	});
-
-	describe('icon', function () {
-		let getIcon: () => Icon;
-
-		beforeEach(function () {
-			getIcon = () => element.shadowRoot?.querySelector('.icon > vwc-icon') as Icon;
-		});
-
-		it('should set the icon according to connotation info by default', function () {
-			expect(getIcon().type)
-				.toEqual('info-solid');
-		});
-
-		it('should set the icon according to "icon" attribute', async function () {
-			element.setAttribute('icon', 'home');
-			await elementUpdated(element);
-
-			expect(getIcon().type)
-				.toEqual('home');
-		});
-
-		it('should set the icon according to set connotation', async function () {
-			const connotationIconMap: Map<BannerConnotation, string> = new Map([
-				[Connotation.Info, 'info-solid'],
-				[Connotation.Announcement, 'megaphone-solid'],
-				[Connotation.Success, 'check-circle-solid'],
-				[Connotation.Warning, 'warning-solid'],
-				[Connotation.Alert, 'error-solid']
-			]);
-
-			for (const [connotation, iconName] of connotationIconMap) {
-				element.connotation = connotation;
-
-				await elementUpdated(element);
-
-				expect(getIcon().type).toEqual(iconName);
-			}
-		});
-	});
-
-	describe('removable', function () {
-		it('should init to false', function () {
-			expect(element.removable)
-				.toEqual(false);
-			expect(element.hasAttribute('removable'))
-				.toEqual(false);
-		});
-
-		it('should toggle attribute on host', async function () {
-			await toggleRemovable(element);
-			const removeAttributeExistsWhenTrue = element.hasAttribute('removable');
-
-			await toggleRemovable(element, false);
-			const removeAttributeExistsWhenFalse = element.hasAttribute('removable');
-
-			expect(removeAttributeExistsWhenTrue)
-				.toEqual(true);
-			expect(removeAttributeExistsWhenFalse)
-				.toEqual(false);
-		});
-
-		it('should set removable property on attribute change', async function () {
-			element.toggleAttribute('removable');
-			await elementUpdated(element);
-			expect(element.removable)
-				.toEqual(true);
-		});
-
-		it('should remove the remove button when removable is false', async function () {
-			expect(element.shadowRoot?.querySelector('.dismiss-button'))
-				.toEqual(null);
-		});
-
-		it('should add a remove button when true', async function () {
-			await toggleRemovable(element, true);
-			expect(element.shadowRoot?.querySelector('.dismiss-button'))
-				.toBeInstanceOf(Button);
-		});
-
-		it('should remove banner on remove button click', async function () {
-			await toggleRemovable(element, true);
-			const dismissButton = element.shadowRoot?.querySelector('.dismiss-button') as HTMLElement;
-			dismissButton.click();
-			dispatchAnimationEndEvent();
-			expect(document.body.contains(element))
-				.toEqual(false);
-		});
-
-		it('should add class "removing" to banner on remove button click', async function () {
-			await toggleRemovable(element, true);
-			const dismissButton = element.shadowRoot?.querySelector('.dismiss-button') as HTMLElement;
-			dismissButton.click();
-			expect(element.shadowRoot?.querySelector('.banner')?.classList.contains('removing')).toEqual(true);
-		});
-	});
-
-	describe('remove on escape key', function () {
-		it('should remove the button on escape key', async function () {
-			element.removable = true;
-			element.focus();
-			jest.spyOn(element, 'remove');
-			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-			expect(element.remove).toHaveBeenCalled();
-		});
-
-		it('should remove the banner only on escape key', async function () {
-			element.removable = true;
-			element.focus();
-			const spy = jest.spyOn(element, 'remove');
-			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
-			expect((spy as any).mock.calls.length).toEqual(0);
-
-		});
-
-		it('should remove keydown listener after disconnection', async function () {
-			element.removable = true;
-			element.focus();
-			element.disconnectedCallback();
-			const spy = jest.spyOn(element, 'remove');
-			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-			expect((spy as any).mock.calls.length).toEqual(0);
-		});
-
-		it('should remove the banner only if "removable" is true', async function () {
-			element.removable = false;
-			element.focus();
-			const spy = jest.spyOn(element, 'remove');
-			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-			expect((spy as any).mock.calls.length).toEqual(0);
-		});
-	});
-});

package/src/lib/banner/banner.template.ts

@@ -1,61 +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 '../button';
-import '../text-anchor';
-import {affixIconTemplateFactory} from '../../shared/patterns/affix';
-import type {Banner} from './banner';
-
-const getClasses = (_: Banner) => classNames(
-	'control',
-	[`connotation-${_.connotation}`, !!_.connotation]
-);
-
-/**
- *
- */
-function renderDismissButton() {
-	return html<Banner>`
-	  <vwc-button
-			  size="base-small"
-			  class="dismiss-button"
-			  icon="close-line"
-			  @click="${x => x.remove()}">
-	  </vwc-button>`;
-}
-
-/**
- * The template for the {@link @microsoft/fast-foundation#Banner} component.
- *
- * @param context
- * @public
- */
-export const BannerTemplate: (
-	context: ElementDefinitionContext,
-	definition: FoundationElementDefinition
-) => ViewTemplate<Banner> = (context: ElementDefinitionContext) => {
-	const affixIconTemplate = affixIconTemplateFactory(context);
-
-	return html<Banner>`
-	  <div class="banner ${getClasses}" tabindex="0">
-		  <header class="header">
-					<div class="user-content">
-            ${x => affixIconTemplate(x.conditionedIcon)}
-						<div class="banner--message"
-				 role="${x => x.role ? x.role : 'status'}"
-				 aria-live="${x => x.ariaLive ? x.ariaLive : 'polite'}">
-              ${x => x.text}
-            </div>
-						<slot class="action-items" name="actionItems"></slot>
-					</div>
-
-			  ${when(x => x.removable, renderDismissButton())}
-		  </header>
-	  </div>
-	`;
-};
-

package/src/lib/banner/banner.ts

@@ -1,77 +0,0 @@
-import {applyMixins, FoundationElement} from '@microsoft/fast-foundation';
-import {attr} from '@microsoft/fast-element';
-import {Connotation} from '../enums';
-import {AffixIcon} from '../../shared/patterns/affix';
-
-export type BannerConnotation =
-	Connotation.Info |
-	Connotation.Announcement |
-	Connotation.Success |
-	Connotation.Warning |
-	Connotation.Alert;
-
-const connotationIconMap = new Map([
-	[Connotation.Info, 'info-solid'],
-	[Connotation.Announcement, 'megaphone-solid'],
-	[Connotation.Success, 'check-circle-solid'],
-	[Connotation.Warning, 'warning-solid'],
-	[Connotation.Alert, 'error-solid']
-]);
-
-const defaultConnotation =
-	(connotation: Connotation | undefined = Connotation.Info) => connotationIconMap.get(connotation) as Connotation;
-
-/**
- * Base class for banner
- *
- * @public
- */
-export class Banner extends FoundationElement {
-	@attr({attribute: 'action-href'}) actionHref: string | undefined;
-	@attr({attribute: 'action-text'}) actionText: string | undefined;
-	@attr({mode: 'boolean'}) removable = false;
-	@attr({attribute: 'aria-live'}) override ariaLive: any;
-	@attr() role: string | undefined;
-	@attr() text: string | undefined;
-	@attr() connotation: BannerConnotation | undefined;
-
-	get conditionedIcon() {
-		return this.icon ?? defaultConnotation(this.connotation);
-	}
-
-	override connectedCallback() {
-		super.connectedCallback();
-		this.addEventListener('keydown', this.#closeOnKeyDown);
-	}
-
-	override disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener('keydown', this.#closeOnKeyDown);
-	}
-
-	override remove(): void {
-		this.$emit('vwc-banner:removing');
-		const banner = this.shadowRoot && this.shadowRoot.querySelector('.banner');
-		if (banner) {
-			banner.classList.add('removing');
-			banner.addEventListener('transitionend', this.#handleRemoveEnd);
-		}
-	}
-
-	#handleRemoveEnd = () => {
-		this.$emit('vwc-banner:removed');
-		this.parentElement && this.parentElement.removeChild(this);
-	};
-
-	#closeOnKeyDown = (e: KeyboardEvent) => {
-		if (e.key !== 'Escape' || !this.removable) {
-			return;
-		}
-		this.remove();
-	};
-}
-
-applyMixins(Banner, AffixIcon);
-
-export interface Banner extends AffixIcon {
-}

package/src/lib/banner/index.ts

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