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

package/src/lib/text/README.md

@@ -1,119 +0,0 @@
-# text
-
-Represents a text custom element.
-The component provisions the Vivid typography font faces and connotations supported by our design system.
-
-```js
-<script type='module'>
-    import '@vonage/vivid/text';
-</script>
-```
-
-## Font face
-
-Use the `font-face` attribute or `fontFace` property to change the text's font face.
-
-- Type: `'headline-1'` | `'headline-2'` | `'title-1'` | `'title-2'` | `'subtitle-1'` | `'subtitle-2'` | `'body-1'` | `'body-1-bold'` | `'body-1-code'` | `'body-1-link'` | `'body-2'` | `'body-2-bold'` | `'body-2-code'` | `'body-2-link'` | `'caption'` | `'caption-bold'` | `'caption-code'` | `'caption-link'` | `'rounded'` | `'pill'`
-- Default: `'body-1'`
-
-```html preview
-<vwc-text font-face="headline-1">headline-1</vwc-text>
-<vwc-text font-face="headline-2">headline-2</vwc-text>
-<vwc-text font-face="title-1">title-1</vwc-text>
-<vwc-text font-face="title-2">title-2</vwc-text>
-<vwc-text font-face="subtitle-1">subtitle-1</vwc-text>
-<vwc-text font-face="subtitle-2">subtitle-2</vwc-text>
-<vwc-text font-face="body-1">body-1</vwc-text>
-<vwc-text font-face="body-1-bold">body-1-bold</vwc-text>
-<vwc-text font-face="body-1-code">body-1-code</vwc-text>
-<vwc-text font-face="body-1-link">body-1-link</vwc-text>
-<vwc-text font-face="body-2">body-2</vwc-text>
-<vwc-text font-face="body-2-bold">body-2-bold</vwc-text>
-<vwc-text font-face="body-2-code">body-2-code</vwc-text>
-<vwc-text font-face="body-2-link">body-2-link</vwc-text>
-<vwc-text font-face="caption">caption</vwc-text><br>
-<vwc-text font-face="caption-bold">caption-bold</vwc-text><br>
-<vwc-text font-face="caption-code">caption-code</vwc-text><br>
-<vwc-text font-face="caption-link">caption-link</vwc-text><br>
-```
-
-## Tight
-
-By default, some font faces are styled with block margins in accordance to article related context. enabling the `tight` attribute/property will opt-out.
-
-- Type: `boolean`
-- Default: `true`
-
-```html preview
-<style>
-  vwc-text[tight] {
-    display: block;
-  }
-</style>
-<vwc-text tight font-face="headline-1">headline-1</vwc-text>
-<vwc-text tight font-face="headline-2">headline-2</vwc-text>
-<vwc-text tight font-face="title-1">title-1</vwc-text>
-<vwc-text tight font-face="title-2">title-2</vwc-text>
-<vwc-text tight font-face="subtitle-1">subtitle-1</vwc-text>
-<vwc-text tight font-face="subtitle-2">subtitle-2</vwc-text>
-<vwc-text tight font-face="body-1">body-1</vwc-text>
-<vwc-text tight font-face="body-1-bold">body-1-bold</vwc-text>
-<vwc-text tight font-face="body-1-code">body-1-code</vwc-text>
-<vwc-text tight font-face="body-1-link">body-1-link</vwc-text>
-<vwc-text tight font-face="body-2">body-2</vwc-text>
-<vwc-text tight font-face="body-2-bold">body-2-bold</vwc-text>
-<vwc-text tight font-face="body-2-code">body-2-code</vwc-text>
-<vwc-text tight font-face="body-2-link">body-2-link</vwc-text>
-```
-
-## Connotation
-
-Set the `connotation` attribute/property to change the text's connotated color.
-It accepts a subset of predefined values.
-
-- Type: `'primary'` | `'cta'` | `'success'` | `'alert'` | `'announcement'` | `'info'`
-- Default: `undefined` (inherits `currentColor`)
-
-```html preview
-<vwc-text>undefined</vwc-text>
-<vwc-text connotation='primary'>primary</vwc-text>
-<vwc-text connotation='cta'>cta</vwc-text>
-<vwc-text connotation='success'>success</vwc-text>
-<vwc-text connotation='alert'>alert</vwc-text>
-<vwc-text connotation='announcement'>announcement</vwc-text>
-<vwc-text connotation='info'>info</vwc-text>
-```
-
-### Semantic usage
-
-HTML semantics indicates authoring intent and is important for accessibility, search engine optimizations and clear code.
-Therefore, you'd probably need to nest html tags that apply different styling and may affect the font face appearance provided by the `vwc-text` element.
-This component takes care of overriding the direct nested child within the component to `inherit` applied font face (if not over specified by the application styles).
-
-custom elements (not extending a built-in native element with the is="" attribute) have a [transparent content model](https://html.spec.whatwg.org/multipage/dom.html#transparent-content-models).
-
-This means they can be ignored when a parent is validating its own content model`s children.
-
-note that web component cannot style or access any descendent greater than a direct child.
-
-The following will generate a `caption` styled font face even though it's wrapped by a `h1` tag -
-
-```html preview
-<vwc-text font-face="caption">
- <h1>
-  lorem ipsum dolor sit amet, consectetur adipiscing elit
- </h1>
-</vwc-text>
-```
-
-Alternatively, 'vwc-text' can, itself, nest within a semantic tag -
-
-```html preview
-<h1>
- <vwc-text font-face="caption">
-  lorem ipsum dolor sit amet, consectetur adipiscing elit
- </vwc-text>
-</h1>
-```
-
-More on [custom elements transparent content model](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-core-concepts)

package/src/lib/text/index.ts

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

package/src/lib/text/text.scss

@@ -1,92 +0,0 @@
-
-@use 'sass:list';
-@use '../../../../shared/src/lib/sass/mixins/typography' as typography;
-@use '../../../../../node_modules/@vonage/vivid-tokens/dist/sass/typography/web' as typography-scale;
-
-@use '../../../../shared/src/lib/sass/mixins/connotation/config' with (
-	$subset: primary cta success alert announcement info
-);
-@use '../../../../shared/src/lib/sass/mixins/connotation' as connotation;
-
-$font-faces: ();
-
-@each $key, $value in typography-scale.$typography-category-list {
-	$font-faces: list.join($font-faces, $key, $separator: comma)
-}
-
-@function get-default-selector($font-faces){
-	$classes: ();
-
-	@each $font-face in $font-faces {
-		$classes: list.join($classes, '.font-face-#{$font-face}', $separator: comma)
-	}
-
-	@return '&:not(#{$classes})';
-}
-
-$default-selector: get-default-selector($font-faces);
-
-%not-tight {
-	&:not(.tight) {
-		display: block;
-		margin: var(--font-face-margin, 0);
-	}
-}
-
-.control {
-	@each $font-face in $font-faces {
-		&.font-face-#{$font-face} {
-			@include typography.typography-cat-shorthand(#{$font-face});
-		}
-	}
-
-	#{$default-selector} {
-		@include typography.typography-cat-shorthand('body-1');
-	}
-
-	@include connotation.connotation;
-
-	color: var(#{connotation.$vvd-color-connotation});
-
-	&.font-face-headline-1,
-	&.font-face-headline-2 {
-		--font-face-margin: 2.5rem 0;
-		@extend %not-tight;
-	}
-
-	&.font-face-title-1,
-	&.font-face-title-2 {
-		--font-face-margin: 2rem 0;
-		@extend %not-tight;
-	}
-
-	&.font-face-subtitle-1,
-	&.font-face-subtitle-2 {
-		--font-face-margin: 1.5rem 0;
-		@extend %not-tight;
-	}
-
-	#{$default-selector},
-	&.font-face-body-1,
-	&.font-face-body-1-bold,
-	&.font-face-body-1-code,
-	&.font-face-body-1-link,
-	&.font-face-body-2,
-	&.font-face-body-2-bold,
-	&.font-face-body-2-code,
-	&.font-face-body-2-link {
-		--font-face-margin: 1rem 0;
-		@extend %not-tight;
-	}
-}
-
-::slotted(:where(h1, h2, h3, h4, h5, h6, p)) {
-	margin: initial;
-}
-
-
-::slotted(*) {
-	color: inherit;
-	font: inherit;
-}
-

package/src/lib/text/text.spec.ts

@@ -1,54 +0,0 @@
-import { elementUpdated, fixture, getControlElement } from '@vivid-nx/shared';
-import { Text } from './text';
-import '.';
-
-const COMPONENT_TAG = 'vwc-text';
-
-describe('vwc-text', () => {
-	let element: Text;
-
-	beforeEach(async () => {
-		element = (await fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`)) as Text;
-	});
-
-	describe('basic', () => {
-		it('should be initialized as a vwc-text', async () => {
-			expect(element).toBeInstanceOf(Text);
-			expect(element.connotation).toBeUndefined();
-			expect(element.fontFace).toBeUndefined();
-			expect(element.tight).toBeFalsy();
-		});
-	});
-
-	describe('connotation', () => {
-		it('should set correct internal connotation style', async () => {
-			const connotation = 'info';
-			(element as any).connotation = connotation;
-			await elementUpdated(element);
-
-			const control = getControlElement(element);
-			expect(control.classList.contains(`connotation-${connotation}`)).toBeTruthy();
-		});
-	});
-
-	describe('font face', () => {
-		it('should set correct internal font face style', async () => {
-			const fontFace = 'headline-2';
-			(element as any).fontFace = fontFace;
-			await elementUpdated(element);
-
-			const control = getControlElement(element);
-			expect(control.classList.contains(`font-face-${fontFace}`)).toBeTruthy();
-		});
-	});
-
-	describe('tight', () => {
-		it('should set correct internal tight style', async () => {
-			(element as any).tight = true;
-			await elementUpdated(element);
-
-			const control = getControlElement(element);
-			expect(control.classList.contains('tight')).toBeTruthy();
-		});
-	});
-});

package/src/lib/text/text.template.ts

@@ -1,28 +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 { Text } from './text';
-
-const getClasses = ({connotation, fontFace, tight}: Text) =>
-	classNames(
-		'control',
-		[`connotation-${connotation}`, Boolean(connotation)],
-		[`font-face-${fontFace}`, Boolean(fontFace)],
-		['tight', tight],
-
-	);
-
-/**
- * The template for the {@link @microsoft/fast-foundation#Text} component.
- *
- * @param context
- * @public
- */
-export const TextTemplate: (
-	context: ElementDefinitionContext,
-	definition: FoundationElementDefinition
-) => ViewTemplate<Text> = () => html`<slot class="${getClasses}"></slot>`;

package/src/lib/text/text.ts

@@ -1,55 +0,0 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
-import { attr } from '@microsoft/fast-element';
-import type { Connotation } from '../enums.js';
-import type { VVDFontFace } from '../../../../../node_modules/@vonage/vivid-tokens/dist/types/typography/font-faces';
-
-/**
- * Types of Text connotation.
- *
- * @public
- */
-type TextConnotation = Extract<Connotation,
-| Connotation.Primary
-| Connotation.CTA
-| Connotation.Success
-| Connotation.Alert
-| Connotation.Announcement
-| Connotation.Info>;
-
-/**
- * Base class for text
- *
- * @public
- */
-export class Text extends FoundationElement {
-	/**
-	 * The connotation the Text should have.
-	 *
-	 * @public
-	 * @remarks
-	 * HTML Attribute: connotation
-	 */
-	@attr connotation?: TextConnotation;
-
-	/**
-		* Indicates the icon affix alignment.
-		*
-		* @public
-		* @remarks
-		* HTML Attribute: icon-trailing
-		*/
-	@attr({
-		attribute: 'font-face',
-	}) fontFace?: VVDFontFace;
-
-	/**
-		* Indicates whether text should have margins.
-		*
-		* @public
-		* @remarks
-		* HTML Attribute: tight
-		*/
-	@attr({
-		mode: 'boolean',
-	}) tight = false;
-}

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

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

package/src/lib/text-anchor/README.md

@@ -1,5 +0,0 @@
-# text-anchor
-
-underlying component to be used as inlined text anchor element
-
-TODO document for maintainers usage

package/src/lib/text-anchor/index.ts

@@ -1,12 +0,0 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { designSystem } from '../../shared/design-system';
-
-import { TextAnchor } from './text-anchor';
-import { textAnchorTemplate as template } from './text-anchor.template';
-
-export const vividTextAnchor = TextAnchor.compose<FoundationElementDefinition>({
-	baseName: 'text-anchor',
-	template: template as any,
-});
-
-designSystem.register(vividTextAnchor());

package/src/lib/text-anchor/text-anchor.spec.ts

@@ -1,153 +0,0 @@
-import {elementUpdated, fixture, setAttribute} from '@vivid-nx/shared';
-import {TextAnchor} from './text-anchor';
-import '.';
-
-const COMPONENT_TAG = 'vwc-text-anchor';
-
-describe( 'vwc-text-anchor', () => {
-	let element: TextAnchor;
-
-	beforeEach(async () => {
-		element = (await fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`)) as TextAnchor;
-	});
-
-	describe('basic', () => {
-		it('should be initialized as a vwc-text-anchor', async () => {
-			expect(element).toBeInstanceOf(TextAnchor);
-			expect(element.text).toEqual('');
-		});
-	});
-
-	describe('text', () => {
-		it('set text property to node', async () => {
-			const text = 'lorem';
-			element.text = text;
-			await elementUpdated(element);
-
-			const { control } = element;
-			expect(control?.textContent?.trim())
-				.toEqual(text);
-		});
-	});
-
-	/**
-	 *
-	 */
-	function getAnchorElement() {
-		const anchorElement = element.shadowRoot?.querySelector('a');
-		return anchorElement;
-	}
-
-
-	describe('bindings', () => {
-		/**
-		 * @param str
-		 */
-		function capitalizeFirstLetter(str: string) {
-			return str.charAt(0).toUpperCase() + str.slice(1);
-		}
-
-		it('should set aria labels', async function () {
-
-			/**
-			 *
-			 */
-			function setAriaLabelsOnElementObject() {
-				ARIA_PROPS.forEach(ariaProp => {
-					const ariaPropOnObject = `aria${capitalizeFirstLetter(ariaProp)}`;
-					(element as any)[ariaPropOnObject] = ariaProp;
-				});
-			}
-
-			const ARIA_PROPS = [
-				'atomic', 'busy', 'controls', 'current', 'describedby',
-				'details', 'disabled', 'errormessage', 'expanded',
-				'flowto', 'haspopup', 'hidden', 'invalid', 'keyshortcuts',
-				'label', 'labelledby', 'live', 'owns', 'relevant', 'roledescription'
-			];
-
-			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/text-anchor/text-anchor.template.ts

@@ -1,66 +0,0 @@
-import { html, ref } 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 { TextAnchor } from './text-anchor';
-
-const getClasses = ({text, icon}: TextAnchor) => classNames(
-	'control',
-	['icon-only', !text && !!icon],
-);
-
-/**
- * The template for the {@link @microsoft/fast-foundation#(Anchor:class)} component.
- *
- * @param context
- * @param definition
- * @public
- */
-export const textAnchorTemplate: (
-	context: ElementDefinitionContext,
-	definition: FoundationElementDefinition
-) => ViewTemplate<TextAnchor> = (
-	context: ElementDefinitionContext,
-) => {
-	const affixIconTemplate = affixIconTemplateFactory(context);
-
-	return html`<a
-        class="${getClasses}"
-        download="${x => x.download}"
-        href="${x => x.href}"
-        hreflang="${x => x.hreflang}"
-        ping="${x => x.ping}"
-        referrerpolicy="${x => x.referrerpolicy}"
-        rel="${x => x.rel}"
-        target="${x => x.target}"
-        type="${x => x.type}"
-        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-relevant="${x => x.ariaRelevant}"
-        aria-roledescription="${x => x.ariaRoledescription}"
-        ${ref('control')}
-    >
-      ${x => affixIconTemplate(x.icon)}
-      ${x => x.text}
-    </a>
-`;};

package/src/lib/text-anchor/text-anchor.ts

@@ -1,22 +0,0 @@
-import { Anchor, applyMixins } from '@microsoft/fast-foundation';
-import { attr } from '@microsoft/fast-element';
-import { AffixIcon } from '../../shared/patterns/affix';
-
-/**
- * Base class for text-anchor
- *
- * @public
- */
-export class TextAnchor extends Anchor {
-	/**
-	 * Indicates the text anchor's text.
-	 *
-	 * @public
-	 * @remarks
-	 * HTML Attribute: text
-	 */
-	@attr({ mode: 'fromView' }) text = '';
-}
-
-export interface TextAnchor extends AffixIcon {}
-applyMixins(TextAnchor, AffixIcon);