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

package/src/lib/button/README.md

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

package/src/lib/button/button.scss

@@ -1,142 +0,0 @@
-@use '../../../../shared/src/lib/sass/mixins/typography' as typography;
-@use 'partials/variables' as variables;
-@use '../focus/partials/variables' as focus-variables;
-
-@use '../../../../shared/src/lib/sass/mixins/connotation/config' with (
-	$subset: primary cta success alert,
-	$shades: contrast fierce strong soft pale,
-	$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 ghost,
-	$states: idle hover disabled active,
-	$default: ghost,
-);
-@use '../../../../shared/src/lib/sass/mixins/appearance' as appearance;
-
-:host {
-	outline: 0 none;
-}
-
-.control {
-	@include connotation.connotation;
-	@include appearance.appearance;
-
-	position: relative;
-	display: inline-flex;
-	box-sizing: border-box;
-	align-items: center;
-	border: 0 none;
-	background-color: var(#{appearance.get-variable(fill)});
-	block-size: var(#{variables.$block-size});
-	box-shadow: inset 0 0 0 1px var(#{appearance.get-variable(outline)});
-	color: var(#{appearance.get-variable(text)});
-	cursor: pointer;
-	outline: 0 none;
-	vertical-align: middle;
-
-	&.icon-only {
-		padding-inline: 0;
-		place-content: center;
-		@supports (aspect-ratio: 1) {
-			aspect-ratio: 1;
-		}
-		@supports not (aspect-ratio: 1) {
-			inline-size: var(#{variables.$block-size});
-		}
-	}
-
-}
-
-/* Size */
-
-.control.size-base-small {
-	#{variables.$block-size}: 32px;
-	@include typography.typography-cat-shorthand('caption-bold');
-
-	&:not(.icon-only) {
-		#{variables.$icon-gap}: 8px;
-
-		padding-inline: 12px;
-	}
-
-	.icon {
-		font-size: 16px;
-	}
-}
-
-.control.size-base-large {
-	#{variables.$block-size}: 48px;
-	@include typography.typography-cat-shorthand('body-1-bold');
-
-	&:not(.icon-only) {
-		#{variables.$icon-gap}: 10px;
-
-		padding-inline: 20px;
-	}
-
-	.icon {
-		font-size: 24px;
-	}
-}
-
-.control:not(.size-base-small):not(.size-base-large) {
-	#{variables.$block-size}: 40px;
-	@include typography.typography-cat-shorthand('button');
-
-	&:not(.icon-only) {
-		#{variables.$icon-gap}: 8px;
-
-		padding-inline: 16px;
-	}
-
-	.icon {
-		font-size: 20px;
-	}
-}
-
-/* Shape */
-
-// stylelint-disable-next-line no-descending-specificity
-.control:not(.shape-pill) {
-	border-radius: 6px;
-}
-
-.control.shape-pill {
-	&:not(.icon-only) {
-		border-radius: 24px;
-	}
-
-	&.icon-only {
-		border-radius: 50%;
-	}
-}
-
-/* Icon */
-
-// stylelint-disable-next-line no-descending-specificity
-.icon {
-	// stylelint-disable-next-line no-descending-specificity
-	:not(.icon-trailing) & {
-		margin-inline-end: var(#{variables.$icon-gap});
-	}
-
-	// stylelint-disable-next-line no-descending-specificity
-	.icon-trailing & {
-		order: 1;
-		margin-inline-start: var(#{variables.$icon-gap});
-	}
-}
-
-.focus-indicator {
-	:not(:focus) & {
-		display: none;
-	}
-
-	.appearance-outlined &,
-	.appearance-ghost & {
-		#{focus-variables.$focus-stroke-gap-color}: transparent;
-	}
-}

package/src/lib/button/button.spec.ts

@@ -1,131 +0,0 @@
-import { elementUpdated, fixture } from '@vivid-nx/shared';
-import type { Icon } from '../icon/icon';
-import { Button } from './button';
-import '.';
-
-const COMPONENT_TAG = 'vwc-button';
-const ICON_SELECTOR = 'vwc-icon';
-
-describe('vwc-button', () => {
-	let element: Button;
-
-	beforeEach(async () => {
-		element = await fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`) as Button;
-	});
-
-	describe('basic', () => {
-		it('initializes as a vwc-button', async () => {
-			expect(element).toBeInstanceOf(Button);
-			expect(element.label).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 button', async () => {
-			element.icon = 'home';
-			await elementUpdated(element);
-
-			const icon = element.shadowRoot?.querySelector(ICON_SELECTOR) as Icon;
-			expect(icon).toBeInstanceOf(HTMLElement);
-			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(HTMLElement);
-		});
-	});
-
-	describe('label', () => {
-		it('set label property to node', async () => {
-			const label = 'lorem';
-			element.label = label;
-			await elementUpdated(element);
-
-			const control = element.shadowRoot?.querySelector('.control');
-			expect(control?.textContent?.trim()).toEqual(label);
-		});
-	});
-
-	describe('connotation', () => {
-		it('sets correct internal connotation style', async () => {
-			const connotation = 'cta';
-			(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 = 'filled';
-			(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);
-		});
-	});
-
-	describe('icon-only', () => {
-		it('sets 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('disabled', function () {
-		it('should set disabled class when disabled is true', async () => {
-			const appearance = 'filled';
-			(element as any).appearance = appearance;
-			element.toggleAttribute('disabled', true);
-			await elementUpdated(element);
-
-			const control = element.shadowRoot?.querySelector(`.control.appearance-${appearance}.disabled`);
-			expect(control).toBeInstanceOf(Element);
-		});
-	});
-});

package/src/lib/button/button.template.ts

@@ -1,89 +0,0 @@
-import type { ViewTemplate } from '@microsoft/fast-element';
-import { html, ref } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { classNames } from '@microsoft/fast-web-utilities';
-import { Focus } from '../focus/focus';
-import { affixIconTemplateFactory } from '../../shared/patterns/affix';
-import type { Button, ButtonAppearance } from './button';
-
-
-const getAppearanceClassName = (appearance: ButtonAppearance, disabled: boolean) => {
-	let className = `appearance-${appearance}`;
-	disabled && (className += ' disabled');
-	return className;
-};
-
-const getClasses = ({
-	connotation, appearance, shape, size, icon, label, disabled, iconTrailing
-}: Button) => classNames(
-	'control',
-	[`connotation-${connotation}`, Boolean(connotation)],
-	[getAppearanceClassName(appearance as ButtonAppearance, disabled), Boolean(appearance)],
-	[`shape-${shape}`, Boolean(shape)],
-	[`size-${size}`, Boolean(size)],
-	['icon-only', !label && !!icon],
-	['icon-trailing', iconTrailing],
-);
-
-const focusTemplate = (context: ElementDefinitionContext) => {
-	const focusTag = context.tagFor(Focus);
-
-	return html`<${focusTag} class="focus-indicator"></${focusTag}>`;
-};
-
-/**
- * The template for the {@link @microsoft/fast-foundation#(Button:class)} component.
- *
- * @param context
- * @param definition
- * @public
- */
-export const buttonTemplate: (
-	context: ElementDefinitionContext,
-	definition: FoundationElementDefinition
-) => ViewTemplate<Button> = (context: ElementDefinitionContext) => {
-	const affixIconTemplate = affixIconTemplateFactory(context);
-
-	return html`
-    <button
-        class="${getClasses}"
-        ?autofocus="${(x) => x.autofocus}"
-        ?disabled="${(x) => x.disabled}"
-        form="${(x) => x.formId}"
-        formaction="${(x) => x.formaction}"
-        formenctype="${(x) => x.formenctype}"
-        formmethod="${(x) => x.formmethod}"
-        formnovalidate="${(x) => x.formnovalidate}"
-        formtarget="${(x) => x.formtarget}"
-        name="${(x) => x.name}"
-        type="${(x) => x.type}"
-        value="${(x) => x.value}"
-        aria-atomic="${(x) => x.ariaAtomic}"
-        aria-busy="${(x) => x.ariaBusy}"
-        aria-controls="${(x) => x.ariaControls}"
-        aria-current="${(x) => x.ariaCurrent}"
-        aria-describedby="${(x) => x.ariaDescribedby}"
-        aria-details="${(x) => x.ariaDetails}"
-        aria-disabled="${(x) => x.ariaDisabled}"
-        aria-errormessage="${(x) => x.ariaErrormessage}"
-        aria-expanded="${(x) => x.ariaExpanded}"
-        aria-flowto="${(x) => x.ariaFlowto}"
-        aria-haspopup="${(x) => x.ariaHaspopup}"
-        aria-hidden="${(x) => x.ariaHidden}"
-        aria-invalid="${(x) => x.ariaInvalid}"
-        aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
-        aria-label="${(x) => x.ariaLabel}"
-        aria-labelledby="${(x) => x.ariaLabelledby}"
-        aria-live="${(x) => x.ariaLive}"
-        aria-owns="${(x) => x.ariaOwns}"
-        aria-pressed="${(x) => x.ariaPressed}"
-        aria-relevant="${(x) => x.ariaRelevant}"
-        aria-roledescription="${(x) => x.ariaRoledescription}"
-        ${ref('control')}
-    >
-        ${() => focusTemplate(context)}
-        ${x => affixIconTemplate(x.icon)}
-        ${(x) => x.label}
-    </button>
-`;
-};

package/src/lib/button/button.ts

@@ -1,95 +0,0 @@
-import { applyMixins, Button as FoundationButton } from '@microsoft/fast-foundation';
-import { attr } from '@microsoft/fast-element';
-
-import type {
-	Appearance, Connotation, Shape, Size,
-} from '../enums.js';
-import { AffixIconWithTrailing } from '../../shared/patterns/affix';
-
-/**
- * Types of button connotation.
- *
- * @public
- */
-type ButtonConnotation = Extract<Connotation,
-| Connotation.Primary
-| Connotation.CTA
-| Connotation.Success
-| Connotation.Alert>;
-
-/**
- * Types of button appearance.
- *
- * @public
- */
-export type ButtonAppearance = Extract<Appearance,
-Appearance.Filled | Appearance.Outlined | Appearance.Ghost>;
-
-/**
- * Types of button shape.
- *
- * @public
- */
-type ButtonShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
-
-/**
- * Types of button size.
- *
- * @public
- */
-type ButtonSize = Extract<Size, Size.BaseSmall | Size.Base | Size.BaseLarge>;
-
-/**
- * Base class for button
- *
- * @public
- */
-export class Button extends FoundationButton {
-	/**
-	 * The connotation the button should have.
-	 *
-	 * @public
-	 * @remarks
-	 * HTML Attribute: connotation
-	 */
-	@attr connotation?: ButtonConnotation;
-
-	/**
-	 * The shape the button should have.
-	 *
-	 * @public
-	 * @remarks
-	 * HTML Attribute: shape
-	 */
-	@attr shape?: ButtonShape;
-
-	/**
-	 * The appearance the button should have.
-	 *
-	 * @public
-	 * @remarks
-	 * HTML Attribute: appearance
-	 */
-	@attr appearance?: ButtonAppearance;
-
-	/**
-	 * The size the button should have.
-	 *
-	 * @public
-	 * @remarks
-	 * HTML Attribute: size
-	 */
-	@attr size?: ButtonSize;
-
-	/**
-	 * Indicates the button's label.
-	 *
-	 * @public
-	 * @remarks
-	 * HTML Attribute: label
-	 */
-	@attr({ mode: 'fromView' }) label = '';
-}
-
-export interface Button extends AffixIconWithTrailing {}
-applyMixins(Button, AffixIconWithTrailing);

package/src/lib/button/index.ts

@@ -1,25 +0,0 @@
-import '../icon';
-import '../focus';
-
-
-import { Button as FastButton } from '@microsoft/fast-foundation';
-import { designSystem } from '../../shared/design-system';
-import { Button } from './button';
-import styles from './button.scss';
-import { buttonTemplate as template } from './button.template';
-
-/**
- * Represents a button custom element.
- */
-
-export const vividButton = Button.compose({
-	baseName: 'button',
-	baseClass: FastButton,
-	template: template as any,
-	styles,
-	shadowOptions: {
-		delegatesFocus: true,
-	},
-});
-
-designSystem.register(vividButton());

package/src/lib/button/partials/variables.scss

@@ -1,2 +0,0 @@
-$icon-gap: --button-icon-gap;
-$block-size: --button-block-size;

package/src/lib/button/ui.test.ts

@@ -1,32 +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 = ['button'];
-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/button.png',
-		);
-});