feat(tooltip): update documentation

Author: dpellier

packages/ods/src/components/text/documentation/usage-guidelines/properties/usage.preset.mdx

@@ -1,4 +1,4 @@
-import { Canvas } from '@storybook/addon-docs';
+import { Canvas } from '@storybook/blocks';
 
 <Canvas sourceState="none">
   <ods-text preset="caption">Caption</ods-text>

packages/ods/src/components/text/documentation/usage-guidelines/usage.mdx

@@ -1,4 +1,4 @@
-import { Canvas } from '@storybook/addon-docs';
+import { Canvas } from '@storybook/blocks';
 import PresetProperty from './properties/usage.preset.mdx';
 
 ## Default

packages/ods/src/components/tooltip/documentation/overview-tooltip.mdx

@@ -4,12 +4,12 @@ Tooltip component is used to display contextual information when the user hovers
 
 <Canvas>
   <div style={{ height: '300px', display: 'inline-flex'}}>
-    <div>
-      Hover me
+    <div id="trigger">
+      Overview
     </div>
 
-    <ods-tooltip>
-      Tooltip content
+    <ods-tooltip trigger-id="trigger">
+      Tooltip content overview
     </ods-tooltip>
   </div>
 </Canvas>

packages/ods/src/components/tooltip/documentation/specifications/spec.md

@@ -1 +1,61 @@
-# Content of this file will be auto-generated
+## Properties
+### position
+
+•  **position**: [`left` | `top` | `bottom` | `right` | `bottom-end` | `bottom-start` | `left-end` | `left-start` | `right-end` | `right-start` | `top-end` | `top-start`] = `ODS_TOOLTIP_POSITION.top`
+
+
+### triggerId
+
+•  **triggerId**: [_string_] 
+
+
+### withArrow
+
+• `Optional` **withArrow**: [_boolean_] 
+
+
+## Methods
+### hide
+
+▸ **hide**(): `Promise`<_void_>
+
+
+
+#### Returns
+`Promise`<_void_>
+### show
+
+▸ **show**(): `Promise`<_void_>
+
+
+
+#### Returns
+`Promise`<_void_>
+
+## Enums
+### Enumeration: ODS_TOOLTIP_POSITION
+
+• **bottom** = `"bottom"`
+
+• **bottomEnd** = `"bottom-end"`
+
+• **bottomStart** = `"bottom-start"`
+
+• **left** = `"left"`
+
+• **leftEnd** = `"left-end"`
+
+• **leftStart** = `"left-start"`
+
+• **right** = `"right"`
+
+• **rightEnd** = `"right-end"`
+
+• **rightStart** = `"right-start"`
+
+• **top** = `"top"`
+
+• **topEnd** = `"top-end"`
+
+• **topStart** = `"top-start"`
+

packages/ods/src/components/tooltip/documentation/specifications/specifications-tooltip.mdx

@@ -0,0 +1,17 @@
+You can update the tooltip content by directly updating the slot element.
+
+Example:
+```html
+<ods-tooltip position="top-start"
+             trigger-id="top-start"
+             with-arrow>
+  <p class="custom-tooltip">
+    Top-start tooltip
+  </p>
+</ods-tooltip>
+<style>
+  .custom-tooltip {
+    font-style: italic;
+  }
+</style>
+```

packages/ods/src/components/tooltip/documentation/style-customization-tooltip.mdx

@@ -3,43 +3,45 @@ import { Canvas } from '@storybook/blocks';
 ## Default
 
 <Canvas sourceState="none">
-  <div>
+  <div id="trigger">
     Hover me
   </div>
 
-  <ods-tooltip>
+  <ods-tooltip trigger-id="trigger">
     Tooltip content
   </ods-tooltip>
 </Canvas>
 
 ```html
-<div>
+<div id="trigger">
   Hover me
 </div>
 
-<ods-tooltip>
+<ods-tooltip trigger-id="trigger">
   Tooltip content
 </ods-tooltip>
 ```
 
 ## With an arrow tip
 
 <Canvas sourceState="none">
-  <div>
+  <div id="trigger">
     Hover me
   </div>
 
-  <ods-tooltip with-arrow>
+  <ods-tooltip trigger-id="trigger"
+               with-arrow>
     Tooltip content
   </ods-tooltip>
 </Canvas>
 
 ```html
-<div>
+<div id="trigger">
   Hover me
 </div>
 
-<ods-tooltip with-arrow>
+<ods-tooltip trigger-id="trigger"
+             with-arrow>
   Tooltip content
 </ods-tooltip>
 ```

packages/ods/src/components/tooltip/documentation/usage-guidelines/usage.mdx

@@ -2,7 +2,7 @@ import { Meta } from '@storybook/blocks';
 import Migration from '@ovhcloud/ods-components/src/components/text/documentation/migration.from.17.x.mdx';
 import * as TextStories from './text.stories';
 
-<Meta of={TextStories} name='Migration From 17.x' />
+<Meta of={ TextStories } name='Migration From 17.x' />
 
 # Text - migrate from v17 to v18
 ----

packages/storybook/stories/components/text/migration_.from.17.x.mdx renamed to packages/storybook/stories/components/text/migration.from.17.x.mdx

@@ -0,0 +1,27 @@
+import { Meta, Markdown } from '@storybook/blocks';
+import OverviewTooltip from '@ovhcloud/ods-components/src/components/tooltip/documentation/overview-tooltip.mdx';
+import SpecificationsTooltip from '@ovhcloud/ods-components/src/components/tooltip/documentation/specifications/spec.md?raw';
+import StyleCustomizationTooltip from '@ovhcloud/ods-components/src/components/tooltip/documentation/style-customization-tooltip.mdx';
+import Usage from '@ovhcloud/ods-components/src/components/tooltip/documentation/usage-guidelines/usage.mdx';
+import { Banner } from '../../Banner';
+import * as TooltipStories from './tooltip.stories';
+
+<Meta of={ TooltipStories } name='Documentation' />
+
+<Banner of={ TooltipStories } />
+
+# Overview
+
+<OverviewTooltip />
+
+# API
+
+<Markdown> { SpecificationsTooltip } </Markdown>
+
+# Style customization
+
+<StyleCustomizationTooltip />
+
+# Examples
+
+<Usage />

packages/storybook/stories/components/tooltip/1_specifications.stories.mdx

@@ -1,7 +1,8 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 import Migration from '@ovhcloud/ods-components/src/components/tooltip/documentation/migration.from.17.x.mdx';
+import * as TooltipStories from './tooltip.stories';
 
-<Meta title="ODS Components/TODO/Tooltip/Migration From 17.x" />
+<Meta of={ TooltipStories } name='Migration From 17.x' />
 
 # Tooltip - migrate from v17 to v18
 ----

packages/storybook/stories/components/tooltip/2_usage.stories.mdx

@@ -0,0 +1,59 @@
+import { ODS_TOOLTIP_POSITION, ODS_TOOLTIP_POSITIONS } from '@ovhcloud/ods-components';
+import { defineCustomElement } from '@ovhcloud/ods-components/dist/components/ods-tooltip';
+import { type Meta, StoryObj } from '@storybook/web-components';
+// import { html } from 'lit-html';
+// import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { CONTROL_CATEGORY, orderControls } from '../../control.ts';
+
+defineCustomElement();
+
+const meta: Meta = {
+  title: 'ODS Components/User feedback/Tooltip',
+  component: 'ods-tooltip',
+  // decorators: [(story) => html`<div style="height: 300px; display: inline-flex">${story()}</div>`],
+};
+
+export default meta;
+
+export const Demo: StoryObj = {
+  // render: (args) => html`
+  //   <button id="trigger">
+  //     Hover me
+  //   </button>
+  //   <ods-tooltip position="${args.position}"
+  //                trigger-id="trigger"
+  //                with-arrow="${args.withArrow}">
+  //     ${unsafeHTML(args.content)}
+  //   </ods-tooltip>
+  // `,
+  argTypes: orderControls ({
+    content: {
+      table: {
+        category: CONTROL_CATEGORY.slot,
+        defaultValue: { summary: 'ø' },
+      },
+      control: 'text',
+    },
+    position: {
+      table: {
+        category: CONTROL_CATEGORY.general,
+        defaultValue: { summary: ODS_TOOLTIP_POSITION.top },
+        type: { summary: ODS_TOOLTIP_POSITIONS },
+      },
+      control: { type: 'select' },
+      options: ODS_TOOLTIP_POSITIONS,
+    },
+    withArrow: {
+      table: {
+        category: CONTROL_CATEGORY.design,
+        defaultValue: { summary: false },
+      },
+      control: { type: 'boolean' },
+    }
+  }),
+  args: {
+    content: 'Tooltip content',
+    position: ODS_TOOLTIP_POSITION.top,
+    withArrow: true,
+  },
+};