feat(arch): move && simplify component tooltip

packages-new/components/package.json

@@ -13,7 +13,8 @@
     "@ovhcloud/ods-component-spinner": "^15.0.1",
     "@ovhcloud/ods-component-text": "^15.0.1",
     "@ovhcloud/ods-component-textarea": "^15.0.1",
-    "@ovhcloud/ods-component-tile": "^15.0.1"
+    "@ovhcloud/ods-component-tile": "^15.0.1",
+    "@ovhcloud/ods-component-tooltip": "^15.0.1"
   },
   "devDependencies": {
     "@ovhcloud/ods-dev": "^15.0.1"

packages-new/components/tooltip/documentation/specifications/spec.md

@@ -0,0 +1,134 @@
+* [**Interfaces**](#interfaces)
+* [**Types**](#types)
+* [**Classes**](#classes)
+* [**Type alias**](#type-alias)
+* [**Variables**](#variables)
+
+## Interfaces
+
+### OdsTooltipAttributes
+|name | Type | Required | Default | Description|
+|---|---|:---:|---|---|
+|**`variant`** | `OdsTooltipVariant` |  |  | with or without visible tip: see component principles|
+
+### OdsTooltipBehavior
+|name | Type | Required | Default | Description|
+|---|---|:---:|---|---|
+|**`anchor`** | `HTMLDivElement` | ✴️ |  | |
+|**`el`** | `HTMLStencilElement` | ✴️ |  | |
+|**`surface`** | `undefined` \| `OcdkSurface` | ✴️ |  | |
+|**`checkForClickOutside`** | _void_ | ✴️ |  | |
+|**`handleMouseEnter`** | _void_ | ✴️ |  | |
+|**`handleMouseLeave`** | _void_ | ✴️ |  | |
+|**`handleTriggerBlur`** | _void_ | ✴️ |  | |
+|**`handleTriggerClick`** | _void_ | ✴️ |  | |
+|**`handleTriggerFocus`** | _void_ | ✴️ |  | |
+|**`syncReferences`** | _void_ | ✴️ |  | |
+
+### OdsTooltipMethods
+|name | Type | Required | Default | Description|
+|---|---|:---:|---|---|
+|**`closeSurface`** | _void_ | ✴️ |  | Close the surface|
+|**`setTabindex`** | _void_ | ✴️ |  | set tab index on the component|
+
+## Types
+
+### OdsTooltipVariant
+|  |
+|:---:|
+| `standard` |
+| `tip` |
+
+## Classes
+
+### OdsTooltipContentController
+_common controller logic for component used by the different implementations._
+_it contains all the glue between framework implementation and the third party service._
+
+
+### OdsTooltipController
+_common controller logic for component used by the different implementations._
+_it contains all the glue between framework implementation and the third party service._
+
+#### Methods
+> **checkForClickOutside**() => _unknown_
+
+
+> **closeSurface**() => _unknown_
+
+
+> **handleMouseEnter**() => _unknown_
+
+
+> **handleMouseLeave**() => _unknown_
+
+
+> **handleTriggerBlur**() => _unknown_
+
+
+> **handleTriggerClick**() => _unknown_
+
+
+> **handleTriggerFocus**() => _unknown_
+
+
+> **syncReferences**() => _unknown_
+
+
+> **validateAttributes**() => _unknown_
+
+
+
+## Type alias
+
+### OdsTooltip
+
+interface description of all implementation of `ods-tooltip`.
+each implementation must have defined events, methods, attributes
+and one controller for the common behavior logic
+
+> - `OdsComponentGenericMethods`
+
+> - `OdsComponentGenericEvents`
+
+### OdsTooltipContent
+
+interface description of all implementation of `ods-tooltip-content`.
+each implementation must have defined events, methods, attributes
+and one controller for the common behavior logic
+
+> - `OdsComponentGenericMethods`
+
+> - `OdsComponentGenericEvents`
+
+### OdsTooltipAttributes
+
+> _Based on `OdsComponentAttributes`_
+
+### OdsTooltipContentAttributes
+
+> _Based on `OdsComponentAttributes`_
+
+### OdsTooltipContentEvents
+
+> _Based on `OdsComponentEvents`_
+
+### OdsTooltipContentMethods
+
+> _Based on `OdsComponentMethods`_
+
+### OdsTooltipEvents
+
+> _Based on `OdsComponentEvents`_
+
+### OdsTooltipMethods
+
+> _Based on `OdsComponentMethods`_
+
+## Variables
+
+### odsTooltipContentDefaultAttributes
+`OdsTooltipContentAttributes`
+
+### odsTooltipDefaultAttributes
+`OdsTooltipAttributes`

packages/specifications/components/tooltip/specifications-tooltip.mdx → packages-new/components/tooltip/documentation/specifications/specifications-tooltip.mdx

@@ -1,5 +1,4 @@
 import { Description } from '@storybook/addon-docs';
-
-import Specs from '@ovhcloud/ods-core/src/components/tooltip/docs/spec.md';
+import Specs from './spec.md';
 
 <Description>{ Specs }</Description>

packages/stencil/components/tooltip/jest.config.ts → packages-new/components/tooltip/jest.config.ts

@@ -1,5 +1,5 @@
 import type { Config } from '@jest/types';
-import { OdsGetJestConfig } from '@ovhcloud/ods-testing';
+import { OdsGetJestConfig } from '@ovhcloud/ods-common-testing';
 
 const args = process.argv.slice(2);
 
@@ -15,8 +15,9 @@ const args = process.argv.slice(2);
  * };
  * ```
  */
+// @ts-ignore until dependencies are fixed to one unique version of @jest/types
 const config: Config.InitialOptions = OdsGetJestConfig({
-  basePath: '<rootDir>/../../../..',
+  basePath: '<rootDir>/../../..',
   args
 });
 export default config;

packages/stencil/components/tooltip/package.json → packages-new/components/tooltip/package.json

@@ -1,15 +1,14 @@
 {
-  "name": "@ovhcloud/ods-stencil-tooltip",
+  "name": "@ovhcloud/ods-component-tooltip",
   "version": "15.0.1",
-  "private": true,
-  "description": "Tooltip component",
+  "description": "ODS Tooltip component",
   "author": "OVH SAS",
   "license": "Apache-2.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "es2015": "dist/esm/index.js",
   "es2017": "dist/esm/index.js",
-  "types": "dist/types/components.d.ts",
+  "types": "dist/types/index.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
   "scripts": {
@@ -35,11 +34,15 @@
     "test:e2e:ci:screenshot:update": "stencil test --config stencil.config.ts --e2e --ci --screenshot --update-screenshot --passWithNoTests"
   },
   "dependencies": {
-    "@ovhcloud/ods-stencil-component": "^15.0.1"
+    "@ovhcloud/ods-common-core": "^15.0.1",
+    "@ovhcloud/ods-common-stencil": "^15.0.1",
+    "@ovhcloud/ods-theming": "^15.0.1"
   },
   "devDependencies": {
+    "@ovhcloud/ods-common-testing": "^15.0.1",
+    "@ovhcloud/ods-component-icon": "^15.0.1",
     "@ovhcloud/ods-component-text": "^15.0.1",
-    "@ovhcloud/ods-stencil-component-dev": "^15.0.1"
+    "@ovhcloud/ods-stencil-dev": "^15.0.1"
   },
   "publishConfig": {
     "registry": ""

packages/stencil/components/tooltip/react/package.json → packages-new/components/tooltip/react/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@ovhcloud/ods-stencil-tooltip-react",
+  "name": "@ovhcloud/ods-component-tooltip-react",
   "version": "15.0.1",
   "private": true,
   "description": "React specific wrapper for ods",
@@ -20,19 +20,13 @@
     "dist/"
   ],
   "dependencies": {
-    "@ovhcloud/ods-stencil-tooltip": "^15.0.1",
-    "tslib": "*"
+    "@ovhcloud/ods-component-tooltip": "^15.0.1"
   },
   "peerDependencies": {
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@types/react": "17.0.37",
-    "@types/react-dom": "17.0.11",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "rimraf": "^3.0.2",
-    "typescript": "4.7.4"
+    "@ovhcloud/ods-react-dev": "^15.0.1"
   }
 }

packages-new/components/tooltip/src/components/osds-tooltip-content/osds-tooltip-content.e2e.ts

@@ -0,0 +1,29 @@
+import type { E2EElement, E2EPage } from '@stencil/core/testing';
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('e2e:osds-tooltip-content', () => {
+  let page: E2EPage;
+  let el: E2EElement;
+
+  async function setup({ html }: { html?: string } = {}) {
+    page = await newE2EPage();
+    await page.setContent(`<osds-tooltip-content>${html}</osds-tooltip-content>`);
+    await page.evaluate(() => document.body.style.setProperty('margin', '0px'));
+
+    el = await page.find('osds-tooltip-content');
+  }
+
+  it('should render', async () => {
+    await setup();
+    expect(el).not.toBeNull();
+    expect(el).toHaveClass('hydrated');
+  });
+
+  describe('default slot', () => {
+    it('should display a text', async () => {
+      const slot = '<span>Dummy text</span>'
+      await setup({ html: slot });
+      expect(el.innerHTML).toBe(slot);
+    })
+  });
+});

packages-new/components/tooltip/src/components/osds-tooltip-content/osds-tooltip-content.spec.ts

@@ -0,0 +1,29 @@
+import type { SpecPage } from '@stencil/core/testing';
+import { newSpecPage } from '@stencil/core/testing';
+import { OsdsTooltipContent } from './osds-tooltip-content';
+
+describe('spec:osds-tooltip-content', () => {
+  let page: SpecPage;
+  let root: HTMLElement | undefined;
+  let instance: OsdsTooltipContent;
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  async function setup() {
+    page = await newSpecPage({
+      components: [OsdsTooltipContent],
+      html: `<osds-tooltip-content>My Tooltip Content</osds-tooltip-content>`,
+    });
+
+    root = page.root;
+    instance = page.rootInstance;
+  }
+
+  it('should render', async () => {
+    await setup();
+    expect(root?.shadowRoot).toBeTruthy();
+    expect(instance).toBeTruthy();
+  });
+});

packages-new/components/tooltip/src/components/osds-tooltip-content/osds-tooltip-content.tsx

@@ -0,0 +1,21 @@
+import { Component, Element, Host, h } from '@stencil/core';
+
+/**
+ * @slot (tooltip-content) - The Tooltip content
+ */
+@Component({
+  tag: 'osds-tooltip-content',
+  styleUrl: 'osds-tooltip-content.scss',
+  shadow: true
+})
+export class OsdsTooltipContent {
+  @Element() el!: HTMLElement;
+
+  render() {
+    return (
+      <Host>
+        <slot></slot>
+      </Host>
+    );
+  }
+}

packages-new/components/tooltip/src/components/osds-tooltip-content/public-api.ts

@@ -0,0 +1 @@
+export { OsdsTooltipContent } from './osds-tooltip-content';

packages-new/components/tooltip/src/components/osds-tooltip/constants/default-attributes.ts

@@ -0,0 +1,10 @@
+import type { OdsTooltipAttribute } from '../interfaces/attributes';
+import { ODS_TOOLTIP_VARIANT } from './tooltip-variant';
+
+const DEFAULT_ATTRIBUTE: OdsTooltipAttribute = Object.freeze({
+  variant: ODS_TOOLTIP_VARIANT.standard,
+});
+
+export {
+  DEFAULT_ATTRIBUTE,
+};

packages-new/components/tooltip/src/components/osds-tooltip/constants/tooltip-variant.ts

@@ -0,0 +1,11 @@
+enum ODS_TOOLTIP_VARIANT {
+  standard = 'standard',
+  tip = 'tip',
+}
+
+const ODS_TOOLTIP_VARIANTS = Object.freeze(Object.values(ODS_TOOLTIP_VARIANT));
+
+export {
+  ODS_TOOLTIP_VARIANT,
+  ODS_TOOLTIP_VARIANTS,
+};