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

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);

package/src/lib/tooltip/README.md

@@ -1,132 +0,0 @@
-# tooltip
-
-A tooltip is a brief, informative message or descriptions or explanations for their paired element. Tooltips in general are less accessible so be sure to follow our accessibility recommendation in the docs.
-
-```js
-<script type="module">
-    import '@vonage/vivid/tooltip';
-</script>
-```
-
-## Anchor
-The tooltip can be placed on interactive controls (things that can be clicked or focusable) such as: button, checkbox, input text.
-The tooltip can't be placed on non-interactive elements such as paragraph or plain div.  
-Do not target non-interactive controls as a tooltip's anchor (such as non-focusable / disabled elements).
-
-- Type: `string`
-- Default: `undefined`
-
-```html preview
-<style>
-  .wrapper{
-    width: 100%;
-    height: 120px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-</style>
-<div class="wrapper">
-  <vwc-button id="anchor" icon="help-line" shape="pill" aria-describedby="tooltip"></vwc-button>
-  <vwc-tooltip id="tooltip" anchor="anchor" text="I'm a tooltip" open></vwc-tooltip>
-</div>
-```
-## Text
-The tooltip is a description and therefor, the tooltip itself can not be interactive. `vwc-tooltip` contains only text.
-
-- Type: `string`
-- Default: `''`
-
-## Open
-Use the `open` attribute to indicate whether the tooltip is open.
-
-- Type: `boolean`
-- Default: `false`
-
-```html preview
-<style>
-  .wrapper{
-    width: 100%;
-    height: 120px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  vwc-tooltip#tooltip{
-    --tooltip-inline-size:200px;
-  }
-</style>
-<div class="wrapper">
-  <vwc-button id="button" icon="info-line" shape="pill" aria-describedby="tooltip"></vwc-button>
-  <vwc-tooltip id="tooltip" anchor="button" text="Click on the icon to toggle"></vwc-tooltip>
-</div>
-<script>
-  button.addEventListener('click', toggleOpen);
-  function toggleOpen() {
-	tooltip.open = !tooltip.open;
-  }
-</script>
-```
-
-## Corner
-
-Use the `corner` attribute to set the placement of the tooltip around the anchor.
-
-- Type: `'top'` | `'top-start'` | `'top-end'` | `'right'` | `'right-start'` | `'right-end'` | `'bottom'` | `'bottom-start'` | `'bottom-end'`| `'left'` | `'left-start'`| `'left-end'`
-- Default: `'left'`
-
-```html preview
-<style>
-  .wrapper{
-    width: 100%;
-    height: 220px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  vwc-tooltip#tooltip2{
-    --tooltip-inline-size:100px;
-  }
-</style>
-<div class="wrapper">
-  <vwc-button id="anchor2" aria-describedby="tooltip2" appearance='outlined' label='This is an anchor'></vwc-button>
-  <vwc-tooltip id="tooltip2" anchor="anchor2" open text="right" corner="right">
-  </vwc-tooltip>
-  <vwc-tooltip id="tooltip2" anchor="anchor2" open text="left" corner="left">
-  </vwc-tooltip>
-  <vwc-tooltip id="tooltip2" anchor="anchor2" open text="top" corner="top">
-  </vwc-tooltip>
-  <vwc-tooltip id="tooltip2" anchor="anchor2" open text="bottom" corner="bottom">
-  </vwc-tooltip>
-</div>
-```
-## Usage inside text
-```html preview
-	<div>
-    <vwc-text font-face="body-1" tight>Text with tooltip - press the question mark<vwc-button id="button3" icon="help-line" shape="pill" aria-describedby="tooltip3"></vwc-button>more text after tooltip.</vwc-text>
-		  <vwc-tooltip id="tooltip3" anchor="button3" corner="bottom-end" text="I'm the tooltip content"></vwc-tooltip>
-	</div>
-  <script>
-  button3.addEventListener('click', toggle);
-  function toggle() {
-	  tooltip3.open = !tooltip3.open;
-  }
-</script>
-```
-
-## Accessibility
-Be sure to add `aria-describedby="vwc-tooltip's ID"` on the tooltip trigger element for screen readers readability.
-
-```js
-<vwc-button id="anchor" aria-describedby="tooltip"></vwc-button>
-<vwc-tooltip id="tooltip" anchor="anchor"></vwc-tooltip>
-```
-
-## CSS Custom Properties
-
-### Inline-size
-- `--tooltip-inline-size`
-- Type: `Number`
-- Default: `240px`
-
-Controls the tooltip width.

package/src/lib/tooltip/index.ts

@@ -1,16 +0,0 @@
-import '../popup';
-
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { designSystem } from '../../shared/design-system';
-import styles from './tooltip.scss';
-
-import { Tooltip } from './tooltip';
-import { TooltipTemplate as template } from './tooltip.template';
-
-export const vividTooltip = Tooltip.compose<FoundationElementDefinition>({
-	baseName: 'tooltip',
-	template: template as any,
-	styles,
-});
-
-designSystem.register(vividTooltip());

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

@@ -1 +0,0 @@
-$tooltip-inline-size: --tooltip-inline-size;

package/src/lib/tooltip/tooltip.scss

@@ -1,18 +0,0 @@
-@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;
-
-.control {
-	pointer-events: none;
-}
-
-.tooltip {
-	width: var(#{variables.$tooltip-inline-size}, 240px);
-
-	&-text {
-		@include typography.typography-cat-shorthand('body-2-bold');
-        
-		padding: 8px 12px;
-		color: var(#{theme-consts.$vvd-color-on-canvas});
-	}
-}

package/src/lib/tooltip/tooltip.spec.ts

@@ -1,70 +0,0 @@
-import { ADD_TEMPLATE_TO_FIXTURE, elementUpdated, fixture } from '@vivid-nx/shared';
-import type { Button } from '../button/button';
-import { Tooltip } from './tooltip';
-import '.';
-
-const COMPONENT_TAG = 'vwc-tooltip';
-
-describe('vwc-tooltip', () => {
-	let element: Tooltip;
-
-	global.ResizeObserver = jest.fn()
-		.mockImplementation(() => ({
-			observe: jest.fn(),
-			unobserve: jest.fn(),
-			disconnect: jest.fn()
-		}));
-
-	beforeEach(async () => {
-		element = (await fixture(
-			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
-		)) as Tooltip;
-	});
-
-	describe('basic', () => {
-		it('should be initialized as a vwc-tooltip', async () => {
-			expect(element).toBeInstanceOf(Tooltip);
-			expect(element.open)
-				.toBeFalsy();
-			expect(element.anchor)
-				.toBeUndefined();
-			expect(element.corner)
-				.toBeUndefined;
-			expect(element.text)
-				.toEqual('');
-		});
-	});
-
-	describe('show', () => {
-		it('should set "open" to true', async () => {
-			await setAnchor();
-			element.anchor = 'anchor';
-			await elementUpdated(element);
-
-			element.open = true;
-			await elementUpdated(element);
-
-			expect(element.open)
-				.toEqual(true);
-		});
-	});
-
-	describe('hide', () => {
-		it('should set "open" to false', async () => {
-			element.open = false;
-			await elementUpdated(element);
-
-			expect(element.open)
-				.toEqual(false);
-		});
-	});
-
-	/**
-	 *
-	 */
-	async function setAnchor() {
-		const anchorEl = await fixture('<vwc-button id="anchor"></vwc-button>', ADD_TEMPLATE_TO_FIXTURE) as Button;
-		await elementUpdated(anchorEl);
-		return anchorEl;
-	}
-});

package/src/lib/tooltip/tooltip.template.ts

@@ -1,30 +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 { Tooltip } from './tooltip';
-
-const getClasses = (_: Tooltip) => classNames('control');
-
-/**
- * The template for the {@link @microsoft/fast-foundation#Tooltip} component.
- *
- * @param context
- * @public
- */
-export const TooltipTemplate: (
-	context: ElementDefinitionContext,
-	definition: FoundationElementDefinition
-) => ViewTemplate<Tooltip> = () => html`
-<vwc-popup class="${getClasses}" arrow alternate="true" 
-corner=${(x) => x.corner} open=${(x) => x.open} anchor=${(x) => x.anchor}
-  exportparts="vvd-theme-alternate">
-  <div class="tooltip">
-    <header part="vvd-theme-alternate" class="tooltip-header">
-      <div class="tooltip-text">${(x) => x.text}</div>
-    </header>
-  </div>
-</vwc-popup>`;

package/src/lib/tooltip/tooltip.ts

@@ -1,44 +0,0 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
-import { attr } from '@microsoft/fast-element';
-import type { Placement } from '@floating-ui/dom';
-
-/**
- * Base class for tooltip
- *
- * @public
- */
-export class Tooltip extends FoundationElement {
-	/**
-	 * the text of the tooltip
-	 * accepts string
-	 *
-	 * @public
-	 */
-	@attr({ mode: 'fromView' }) text = '';
-
-	/**
-	 * indicates whether the tooltip is open
-	 *
-	 * @public
-	 * HTML Attribute: open
-	 */
-	@attr({
-		mode: 'boolean',
-	}) open = false;
-
-	/**
-	 * the placement of the tooltip
-	 *
-	 * @public
-	 * HTML Attribute: corner
-	 */
-	@attr corner?: Placement;
-
-	/**
-	 * ID reference to element in the tooltip's owner document.
-	 *
-	 * @public
-	 * HTML Attribute: anchor
-	 */
-	@attr anchor?: string;
-}

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

@@ -1,53 +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 = ['tooltip','button'];
-
-test('should show the component', async ({ page }: { page: Page }) => {
-	const template = `
-<style>
-  .wrapper{
-    width: 100%;
-    height: 220px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  vwc-tooltip#tooltip{
-    --tooltip-inline-size:100px;
-  }
-</style>
-<div class="wrapper">
-  <vwc-button id="anchor" aria-describedby="tooltip" appearance='outlined' label='This is an anchor'></vwc-button>
-  <vwc-tooltip id="tooltip" anchor="anchor" open text="right" corner="right">
-  </vwc-tooltip>
-  <vwc-tooltip id="tooltip" anchor="anchor" open text="left" corner="left">
-  </vwc-tooltip>
-  <vwc-tooltip id="tooltip" anchor="anchor" open text="top" corner="top">
-  </vwc-tooltip>
-  <vwc-tooltip id="tooltip" anchor="anchor" open text="bottom" corner="bottom">
-  </vwc-tooltip>
-</div>
-	`;
-
-	await loadComponents({
-		page,
-		components,
-	});
-	await loadTemplate({
-		page,
-		template,
-	});
-
-	const testWrapper = await page.$('#wrapper');
-
-	await page.waitForLoadState('networkidle');
-
-	expect(await testWrapper?.screenshot()).toMatchSnapshot(
-		'./snapshots/tooltip.png'
-	);
-});

package/src/shared/design-system/index.ts

@@ -1,12 +0,0 @@
-import { DesignSystem } from '@microsoft/fast-foundation';
-
-// common components dependency
-/**
- * @param {HTMLElement} element - The element to get or create a design system for.
- * @returns {DesignSystem} - Represents a configurable design system. An API gateway to design system features.
- */
-export function provideVividDesignSystem(element?: HTMLElement): DesignSystem {
-	return DesignSystem.getOrCreate(element).withPrefix('vwc');
-}
-
-export const designSystem = provideVividDesignSystem();

package/src/shared/patterns/affix.ts

@@ -1,56 +0,0 @@
-import { attr, html } from '@microsoft/fast-element';
-import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
-import { Icon } from '../../lib/icon/icon';
-
-/**
-	* A mixin class implementing prefix elements.
-	* These are generally used to decorate text elements with icons or other visual indicators.
-	*
-	* @public
-	*/
-export class AffixIcon {
-	/**
-		* A decorative icon the custom element should have.
-		*
-		* @public
-		* @remarks
-		* HTML Attribute: icon
-		*/
-	@attr icon?: string;
-}
-
-/**
-	* A mixin class implementing icon affix (prefix or suffix) alignment.
-	*
-	* @public
-	*/
-export class AffixIconWithTrailing extends AffixIcon {
-	/**
-		* Indicates the icon affix alignment.
-		*
-		* @public
-		* @remarks
-		* HTML Attribute: icon-trailing
-		*/
-	@attr({
-		mode: 'boolean',
-		attribute: 'icon-trailing',
-	}) iconTrailing = false;
-}
-
-/**
- * The template for the prefixed element.
- * For use with {@link AffixIcon}
- *
- * @param context
- * @param icon
- * @public
- */
-export const affixIconTemplateFactory: (context: ElementDefinitionContext) =>
-(icon?: string) => ViewTemplate<AffixIcon> | null = (context: ElementDefinitionContext) => {
-	const iconTag = context.tagFor(Icon);
-	return (icon?: string) => icon
-		? html`<span class="icon"><${iconTag} :type="${() => icon}"></${iconTag}></span>`
-		: null;
-};

package/src/types/extract-gfm.d.ts

@@ -1,5 +0,0 @@
-declare module 'extract-gfm' {
-	function extractBlocks(string): string[]
-}
-
-

package/src/types/style.d.ts

@@ -1,4 +0,0 @@
-declare module '*.scss' {
-	const classes: import('@microsoft/fast-element').ComposableStyles;
-	export default classes;
-}

package/src/visual-tests/visual-tests-utils.ts

@@ -1,76 +0,0 @@
-import * as fs from 'fs';
-import * as path from 'path';
-import type {Page} from '@playwright/test';
-import * as extract from 'extract-gfm';
-
-/**
- * @param str
- * @param find
- * @param replace
- */
-export function replaceAll(str: string, find: string, replace: string) {
-	return str.replace(new RegExp(find, 'g'), replace);
-}
-
-/**
- * @param pathToReadme
- */
-export function extractHTMLBlocksFromReadme(pathToReadme: string): string[] {
-	const readmeFileContents = fs.readFileSync(path.resolve(pathToReadme))
-		.toString();
-	const readmeFileSnippets = extract.extractBlocks(readmeFileContents);
-	return readmeFileSnippets.filter((block: any) => block.lang === 'html')
-		.map((block: any) => replaceAll(block.code.replace('preview', ''), '\n', ''));
-}
-
-const defaultStyles = [
-	'http://127.0.0.1:8080/dist/libs/styles/fonts/spezia.css',
-	'http://127.0.0.1:8080/dist/libs/styles/themes/light.css'
-];
-
-/**
- * @param root0
- * @param root0.page
- * @param root0.components
- * @param root0.styleUrls
- */
-export async function loadComponents({
-	page,
-	components,
-	styleUrls = defaultStyles,
-}: {
-	page: Page,
-	components: string[],
-	styleUrls?: string[]
-}) {
-	await page.goto('http://127.0.0.1:8080/scripts/visual-tests/index.html');
-
-	(async function () {
-		for (const component of components) {
-			await page.addScriptTag({
-				url: `http://127.0.0.1:8080/dist/libs/components/${component}/index.js`,
-				type: 'module',
-			});
-		}
-	})();
-
-	const styleTags$ = styleUrls.map(url => page.addStyleTag({url}));
-	await Promise.all(styleTags$);
-}
-
-/**
- * @param root0
- * @param root0.page
- * @param root0.template
- */
-export async function loadTemplate({
-	page,
-	template,
-}: { page: Page, template: string }) {
-	const wrappedTemplate = `<div id="wrapper">${template}</div>`;
-	await page.addScriptTag({
-		content: `
-            document.body.innerHTML = \`${wrappedTemplate}\`;
-        `,
-	});
-}

package/tsconfig.json

@@ -1,36 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "target": "ES2017",
-    "module": "ES2015",
-    "preserveWatchOutput": true,
-    "moduleResolution": "Node",
-    "sourceMap": true,
-    "inlineSources": true,
-    "noFallthroughCasesInSwitch": true,
-    "isolatedModules": true,
-    "noImplicitReturns": true,
-    "noImplicitOverride": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "forceConsistentCasingInFileNames": true,
-    "importsNotUsedAsValues": "error",
-    "strict": true,
-    "experimentalDecorators": true,
-    "stripInternal": true, // check if we need it
-    "importHelpers": true,
-    "allowSyntheticDefaultImports": true,
-    "removeComments": true,
-    "composite": true
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json",
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ]
-}

package/tsconfig.lib.json

@@ -1,11 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "rootDirs": ["src", "src/lib"],
-    "outDir": "../../dist/out-tsc",
-    "declaration": true,
-    "types": ["node"]
-  },
-  "exclude": ["**/*.spec.ts", "**/*.test.ts", "**/*.config.*.ts", "**/visual-tests/**/*", "*.*"],
-  "include": ["**/*.ts"]
-}