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

package/src/lib/tooltip/README.md

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

@@ -0,0 +1,16 @@
+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

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

package/src/lib/tooltip/tooltip.scss

@@ -0,0 +1,18 @@
+@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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,56 @@
+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/{shared/patterns/index.d.ts → src/shared/patterns/index.ts}

@@ -1 +1 @@
-export * from './affix';
+export * from './affix';

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

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

package/src/types/style.d.ts

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

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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,36 @@
+{
+  "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

@@ -0,0 +1,11 @@
+{
+  "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"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"],
+    "allowJs": true,
+  },
+  "exclude": [
+    "**/*.config.spec.ts",
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/accordion/index.js

@@ -1,61 +0,0 @@
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
-import { s as styleInject } from '../shared/style-inject.es.js';
-import { c as classNames } from '../shared/class-names.js';
-
-var css_248z = ".control {\n  display: flex;\n  flex-direction: column;\n}\n\n::slotted(vwc-accordion-item:not(:only-of-type)) {\n  border-bottom: 1px solid var(--vvd-color-neutral-30);\n}";
-styleInject(css_248z);
-
-class Accordion extends FoundationElement {
-  constructor() {
-    super();
-    this.accordionItems = undefined;
-    this.multi = false;
-    this.addEventListener('opened', this.handleOpened);
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.accordionItems = this.children;
-  }
-
-  handleOpened(e) {
-    if (!this.multi && this.accordionItems) {
-      for (let i = 0; i < this.accordionItems.length; i++) {
-        if (this.accordionItems[i] !== e.target) {
-          this.accordionItems[i].open = false;
-        }
-      }
-    }
-  }
-
-  closeAll() {
-    if (this.accordionItems) {
-      for (let i = 0; i < this.accordionItems.length; i++) {
-        this.accordionItems[i].open = false;
-      }
-    }
-  }
-
-}
-
-__decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Accordion.prototype, "multi", void 0);
-
-let _2 = t => t,
-    _t;
-
-const getClasses = _ => classNames('control');
-
-const AccordionTemplate = () => html(_t || (_t = _2`<div class="${0}">
-	<slot></slot>
-</div>`), getClasses);
-
-const vividAccordion = Accordion.compose({
-  baseName: 'accordion',
-  template: AccordionTemplate,
-  styles: css_248z
-});
-designSystem.register(vividAccordion());
-
-export { vividAccordion };