chore(tooltip): new component (#1223)

* chore(tooltip): new component

* open & close popup

* change anchor to id

* Update components/popup/src/vwc-popup-base.ts

Co-authored-by: yinon <yinon@hotmail.com>

* set anchorEl as getter

* remove first updated

* refactor code

* update tests

* update tests

* update ui test

* remove change event

* add anchor tests

* Update components/popup/test/popup.test.js

Co-authored-by: Yonatan Kra <yonatan.kra@vonage.com>

* Update components/popup/test/popup.test.js

Co-authored-by: Yonatan Kra <yonatan.kra@vonage.com>

* add comment to test

* open & close popup

* update getAnchorById

* open & close tooltip

* tooltip story

* tooptip story

* update vvd-umbrella version

* add anchorEl property

* update vonage packages

* updating ui-test snapshot

* add IntersectionObserver

* Update components/tooltip/src/vwc-tooltip-base.ts

Co-authored-by: Rina Oksman <rina.oksman@vonage.com>

* Update components/tooltip/src/vwc-tooltip-base.ts

Co-authored-by: Rina Oksman <rina.oksman@vonage.com>

* Update components/tooltip/src/vwc-tooltip-base.ts

Co-authored-by: Rina Oksman <rina.oksman@vonage.com>

* Update components/tooltip/src/vwc-tooltip-base.ts

Co-authored-by: Rina Oksman <rina.oksman@vonage.com>

* Update components/tooltip/src/vwc-tooltip-base.ts

Co-authored-by: Rina Oksman <rina.oksman@vonage.com>

* readme update

* readme update

* readme update

* fix version after pull master

* add unit test

* remove duplications

* Update components/tooltip/readme.md

Co-authored-by: yinon <yinon@hotmail.com>

* add anchor property to readme

* Update components/tooltip/stories/tooltip.stories.js

Co-authored-by: yinon <yinon@hotmail.com>

* Update components/tooltip/stories/tooltip.stories.js

Co-authored-by: yinon <yinon@hotmail.com>

* Update components/tooltip/stories/tooltip.stories.js

Co-authored-by: yinon <yinon@hotmail.com>

* test text

* clean ui test

* clean ui test

* remove duplications

* remove duplications

Co-authored-by: Rina <rina.oksman@vonage.com>
Co-authored-by: yinon <yinon@hotmail.com>
Co-authored-by: Yonatan Kra <yonatan.kra@vonage.com>

__snapshots__/tooltip.md

@@ -0,0 +1,25 @@
+# `tooltip`
+
+#### `should internal contents`
+
+```html
+<vwc-popup
+  alternate="true"
+  anchor=""
+  arrow=""
+  exportparts="vvd-scheme-alternate"
+  strategy="fixed"
+>
+  <div class="tooltip">
+    <header
+      class="tooltip-header"
+      part="vvd-scheme-alternate"
+    >
+      <div class="tooltip-title">
+      </div>
+    </header>
+  </div>
+</vwc-popup>
+
+```
+

components/tooltip/package.json

@@ -0,0 +1,44 @@
+{
+	"name": "@vonage/vwc-tooltip",
+	"version": "2.25.6",
+	"description": "tooltip component",
+	"homepage": "https://github.com/Vonage/vivid/tree/master/components/tooltip#readme",
+	"license": "ISC",
+	"main": "vwc-tooltip.js",
+	"module": "vwc-tooltip.js",
+	"files": [
+		"src",
+		"*.js",
+		"*.ts",
+		"*.map"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/vonage/vivid.git",
+		"directory": "components/tooltip"
+	},
+	"scripts": {
+		"test": "echo \"Error: run tests from root\" && exit 1",
+		"build:typescript": "tsc -b",
+		"build:styles": "umbrella-style-modules",
+		"build": "yarn run build:styles && yarn run build:typescript"
+	},
+	"bugs": {
+		"url": "https://github.com/Vonage/vivid/issues"
+	},
+	"dependencies": {
+		"@vonage/vvd-core": "2.25.9",
+		"@vonage/vvd-foundation": "2.25.9",
+		"@vonage/vwc-popup": "2.25.9",
+		"@vonage/vwc-icon-button": "2.25.9",
+		"lit-element": "^2.4.0",
+		"lit-html": "^1.3.0",
+		"tslib": "^2.3.0"
+	},
+	"devDependencies": {
+		"@vonage/vvd-design-tokens": "2.25.9",
+		"@vonage/vvd-typography": "2.25.9",
+		"@vonage/vvd-umbrella": "2.25.9",
+		"typescript": "^4.3.2"
+	}
+}

components/tooltip/readme.md

@@ -0,0 +1,42 @@
+# vwc-tooltip
+A Tooltip is a page overlay that provides additional information about an interacted target. It's commonly shown on mouse hover or focus.  
+A tooltip displays non-interactive clarifying text related to a trigger element.  
+
+Note that touch screen devices do not share the same pointer input events and may fail to show anything.
+
+Consider avoiding the use of tooltip as it may fail to produce the same UX for ALL users. if must, contemplate on practices such as `aria-describedby` to add alternative experience to users who aren't able to interact with a control in the same manner sighted users do.
+
+
+## Using the Tooltip right
+### the trigger
+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 element such as paragraph or plain div.  
+Do not target non-interactive controls as a tooltip's anchor (such as non-focusable / disabled elements). The absence of user interaction will prevent the tooltip from showing up.
+
+### the tooltip
+The tooltip is a description and therefor, the tooltip itself can not be interactive.  
+`vwc-tooltip` contain only text.
+
+## Accessibility
+be sure to add `aria-describedby="the vwc-tooltip ID name"` on the tooltip trigger element for screen readers readability.
+
+
+## Properties
+| Property | Attribute     | Type                         | Default          |
+|----------|---------------|------------------------------|------------------|
+| `text`   | `text`        | `string \| undefined`       |             |
+| `open`   | `open`        | `boolean`                    | false            |
+| `anchor` | `anchor`   | `string`                     | trigger popup ID |
+| `corner` | `corner`   | `string`                     | "bottom"         |
+| `styles` |               | `CSSResult`                  | "style"          |
+
+## CSS Custom Properties
+
+| Property                | Default | Description                |
+|-------------------------|---------|----------------------------|
+| `--tooltip-inline-size` | 240px   | Controls the tooltip width |
+

components/tooltip/src/partials/_vwc-tooltip-variables.scss

@@ -0,0 +1,2 @@
+//sizes variables
+$tooltip-inline-size: --tooltip-inline-size;

components/tooltip/src/vwc-tooltip-base.ts

@@ -0,0 +1,68 @@
+import {
+	html, LitElement, property
+} from 'lit-element';
+import type { TemplateResult } from 'lit-html';
+import type { Placement } from '@floating-ui/core';
+
+export class VWCTooltipBase extends LitElement {
+
+	/**
+	 * @prop text - the text of the tooltip
+	 * accepts string
+	 * @public
+	 * */
+	@property({ type: String, reflect: true })
+		text = '';
+
+	/**
+	 * @prop corner - the placement of the tooltip
+	 * accepts top, top-start, top-end, bottom, bottom-start, bottom-end, right, right-start, right-end, left, left-start, left-end
+	 * @public
+	 * */
+	@property({ type: String, reflect: true })
+		corner?: Placement;
+
+	/**
+	 * @prop open - indicates whether the tooltip is open
+	 * accepts boolean value
+	  * @public
+	 * */
+	@property({ type: Boolean, reflect: true })
+		open = false;
+
+	/**
+	 * @prop anchor - ID reference to element in the popup’s owner document.
+	 * accepts string
+	 * @public
+	 * */
+	@property({ type: String })
+		anchor = '';
+
+	/**
+	 * Opens the tooltip
+	 * @public
+	 */
+	show(): void {
+		this.open = true;
+	}
+
+	/**
+	 * Closes the tooltip
+	 * @public
+	 */
+	hide(): void {
+		this.open = false;
+	}
+
+	protected override render(): TemplateResult {
+		return html`
+					<vwc-popup .corner=${this.corner} .open=${this.open} .anchor=${this.anchor} arrow alternate="true" exportparts="vvd-scheme-alternate">
+						<div class="tooltip">
+							<header part="vvd-scheme-alternate" class="tooltip-header">
+								<div class="tooltip-title">${this.text}</div>
+							</header>
+						</div>
+					</vwc-popup>
+			`;
+	}
+}

components/tooltip/src/vwc-tooltip.scss

@@ -0,0 +1,13 @@
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
+@use '@vonage/vvd-typography/scss/typography' as typography;
+@use 'partials/vwc-tooltip-variables' as tooltip-variables;
+
+.tooltip {
+	width: var(#{tooltip-variables.$tooltip-inline-size}, 240px);
+
+	&-title {
+		@include typography.typography-cat-shorthand('body-2-bold');
+		padding: 0.5rem 0.75rem;
+		color: var(#{scheme-variables.$vvd-color-primary});
+	}
+}

components/tooltip/src/vwc-tooltip.ts

@@ -0,0 +1,19 @@
+import '@vonage/vvd-core';
+import '@vonage/vwc-icon';
+import '@vonage/vwc-icon-button';
+import '@vonage/vwc-popup';
+import { customElement } from 'lit-element';
+
+import { VWCTooltipBase } from './vwc-tooltip-base.js';
+import { style } from './vwc-tooltip.css.js';
+
+@customElement('vwc-tooltip')
+export class VwcTooltip extends VWCTooltipBase {
+	static override styles = style;
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'vwc-tooltip': VwcTooltip;
+	}
+}

components/tooltip/stories/arg-types.js

@@ -0,0 +1,29 @@
+const booleanControl = {
+    type: 'inline-radio',
+    options: { true: '', false: undefined }
+};
+
+export const argTypes = {
+    open: {
+        control: booleanControl
+    },
+    corner: {
+        control: {
+            type: 'select',
+            defaultValue: 'right',
+            options: [ 'top'
+                , 'top-start'
+                , 'top-end'
+                , 'bottom'
+                , 'bottom-start'
+                , 'bottom-end'
+                , 'right'
+                , 'right-start'
+                , 'right-end'
+                , 'left'
+                , 'left-start'
+                , 'left-end']
+
+        }
+    },
+};

components/tooltip/stories/tooltip-introduction.config.mjs

@@ -0,0 +1,14 @@
+export default {
+	sourcePath: '../readme.md',
+	outputName: 'tooltip-introduction',
+	story: {
+		title: 'Alpha/Components/Tooltip',
+		name: 'Introduction',
+		parameters: {
+			options: {
+				showPanel: false,
+				isToolshown: false
+			}
+		}
+	}
+};

components/tooltip/stories/tooltip.stories.js

@@ -0,0 +1,73 @@
+import '@vonage/vwc-tooltip';
+import '@vonage/vwc-icon-button';
+import '@vonage/vwc-text';
+
+import { html } from 'lit-element';
+import { spread } from '@open-wc/lit-helpers';
+import { argTypes } from './arg-types.js';
+
+export default {
+	title: 'Alpha/Components/Tooltip',
+	component: 'vwc-tooltip',
+	argTypes
+}
+
+const Template = args => html`
+	<style>
+		.tooltip-wrapper {
+			margin: 5rem;
+		}
+	</style>
+	<div class="tooltip-wrapper" >
+		<vwc-icon-button icon="info-line"  shape="circled" aria-describedby="tooltip" id="button" @click=${onClick}></vwc-icon-button>
+		<vwc-tooltip ...=${spread(args)} icon="info-line"  style="--tooltip-inline-size:180px;" id="tooltip" anchor="button" text="I'm the tooltip content", ></vwc-tooltip>
+	</div>
+	`;
+
+export const Basic = Template.bind({});
+Basic.args = { corner: "top" };
+
+const AfterTitleTemplate = args => html`
+	<style>
+		.tooltip-wrapper {
+			margin-top: 4rem;
+			margin-left: 3rem;
+		}
+	</style>
+	<div class="tooltip-wrapper" >
+   <div style="display: flex; align-items: center;">
+			<vwc-text font-face="title-2" tight><p class="line" style="margin-right: 0.25rem">I'm a title - press the question mark</p></vwc-text>
+			<vwc-icon-button icon="info-line"  shape="circled" aria-describedby="tooltip" id="button" @click=${onClick}></vwc-icon-button>
+		 <div>
+		<vwc-tooltip ...=${spread(args)} icon="info-line"  style="--tooltip-inline-size:180px;" id="tooltip" anchor="button" text="I'm the tooltip content"></vwc-tooltip>
+	</div>
+`;
+
+export const InATitle = AfterTitleTemplate.bind({});
+InATitle.args = { corner: "top" };
+
+const InsideTExtTemplate = args => html`
+	<style>
+		.tooltip-wrapper {
+			margin-top: 4rem;
+			margin-left: 3rem;
+		}
+	</style>
+	<div class="tooltip-wrapper" >
+			<vwc-text style="display: flex; align-items: center;" font-face="body-1" tight>text with tooltip - press the question mark
+			<vwc-icon-button style="margin: 0 0.125rem;" icon="info-line"  shape="circled" aria-describedby="tooltip" id="button" dense @click=${onClick}></vwc-icon-button>
+		 more text after tooltip</vwc-text>
+		<vwc-tooltip ...=${spread(args)} icon="info-line" style="--tooltip-inline-size:180px;" id="tooltip" anchor="button" text="I'm the tooltip content"></vwc-tooltip>
+	</div>
+`;
+
+export const InText = InsideTextTemplate.bind({});
+InText.args = { corner: "top" };
+
+
+
+
+
+function onClick() {
+	tooltip.open = !tooltip.open;
+}

components/tooltip/test/tooltip.a11y.test.js

@@ -0,0 +1,37 @@
+import '../vwc-tooltip.js';
+import {
+	isolatedElementsCreation,
+	textToDomToParent
+} from '../../../test/test-helpers.js';
+import { chaiA11yAxe } from 'chai-a11y-axe';
+
+chai.use(chaiA11yAxe);
+
+const COMPONENT_NAME = 'vwc-tooltip';
+
+describe('tooltip a11y', () => {
+	const addElement = isolatedElementsCreation();
+
+	const addtooltipElement = async (content) => {
+		const [actualElement] = addElement(
+			textToDomToParent(`<${COMPONENT_NAME}>${content || ''}</${COMPONENT_NAME}>`)
+		);
+		await actualElement.updateComplete;
+
+		return actualElement;
+	};
+
+	const extracttooltipElements = (actualElement) => {
+		const { shadowRoot } = actualElement;
+		return {
+			actualElement,
+			shadowRoot,
+			grid: shadowRoot.querySelector('[role="grid"i]')
+		};
+	};
+
+	it('should pass accessibility test', async () => {
+		const { actualElement } = extracttooltipElements(await addtooltipElement());
+		await expect(actualElement).shadowDom.to.be.accessible();
+	});
+});