feat(storybook): tooltip doc & stories

Signed-off-by: aurore.stagnol <[email protected]>
ovh · Jul 29, 2024 · 234debf · 234debf
1 parent 2aedc68
commit 234debf
Show file tree

Hide file tree

Showing 12 changed files with 255 additions and 288 deletions.
diff --git a/packages/ods/src/components/tooltip/documentation/migration.from.17.x.mdx b/packages/ods/src/components/tooltip/documentation/migration.from.17.x.mdx
diff --git a/packages/ods/src/components/tooltip/documentation/overview-tooltip.mdx b/packages/ods/src/components/tooltip/documentation/overview-tooltip.mdx
diff --git a/packages/ods/src/components/tooltip/documentation/spec.md b/packages/ods/src/components/tooltip/documentation/spec.md
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 ## OdsTooltip
 ### Properties
 | Property | Type | Required | Default value |
@@ -16,6 +17,44 @@
 • **odsShow**(): `EventEmitter<void>`
 ### Enums
 #### ODS_TOOLTIP_POSITION
+=======
+## 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
+>>>>>>> 396769406 (feat(storybook): tooltip doc & stories)
 
 • **bottom** = `"bottom"`
 

diff --git a/packages/ods/src/components/tooltip/documentation/specifications/spec.md b/packages/ods/src/components/tooltip/documentation/specifications/spec.md
diff --git a/packages/ods/src/components/tooltip/documentation/style-customization-tooltip.mdx b/packages/ods/src/components/tooltip/documentation/style-customization-tooltip.mdx
diff --git a/packages/ods/src/components/tooltip/documentation/usage-guidelines/usage.mdx b/packages/ods/src/components/tooltip/documentation/usage-guidelines/usage.mdx
diff --git a/packages/storybook/stories/components/icon/documentation.mdx b/packages/storybook/stories/components/icon/documentation.mdx
@@ -9,7 +9,7 @@ import * as IconStories from './icon.stories';
 
 # Overview
 
-Icon is a visual context used to represent a command, navigation, status or common action:
+Icon is a visual context used to represent a command, navigation, status or common action.
 
 <Canvas of={ IconStories.Demo } sourceState='none' />
 

diff --git a/packages/storybook/stories/components/spinner/documentation.mdx b/packages/storybook/stories/components/spinner/documentation.mdx
@@ -9,6 +9,8 @@ import * as SpinnerStories from './spinner.stories';
 
 # Overview
 
+A visual indicator that a process is happening in the background but the interface is not yet ready for interaction.
+
 <Canvas of={ SpinnerStories.Default } sourceState='none' />
 
 <div>

diff --git a/packages/storybook/stories/components/text/documentation.mdx b/packages/storybook/stories/components/text/documentation.mdx
@@ -9,6 +9,8 @@ import * as TextStories from './text.stories';
 
 # Overview
 
+The text component is used to display text with a specific font & style.
+
 <Canvas of={ TextStories.Default } sourceState='none' />
 
 <div>

diff --git a/packages/storybook/stories/components/tooltip/documentation.mdx b/packages/storybook/stories/components/tooltip/documentation.mdx
@@ -1,8 +1,5 @@
-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 { Canvas, Meta, Markdown } from '@storybook/blocks';
+import SpecificationsTooltip from '@ovhcloud/ods-components/src/components/tooltip/documentation/spec.md?raw';
 import { Banner } from '../../Banner';
 import * as TooltipStories from './tooltip.stories';
 
@@ -12,16 +9,30 @@ import * as TooltipStories from './tooltip.stories';
 
 # Overview
 
-<OverviewTooltip />
+<Canvas of={ TooltipStories.Overview } sourceState='none' />
+
+<div>
+  <a href="#"
+     target="_blank">
+    ZEROHEIGHT - SKELETON DESIGN GUIDELINES &nbsp;
+  </a>
+</div>
 
 # API
 
 <Markdown> { SpecificationsTooltip } </Markdown>
 
 # Style customization
 
-<StyleCustomizationTooltip />
+You can update the tooltip content by directly updating the slot element.
+
+<Canvas of={ TooltipStories.CustomCSS } sourceState='shown' />
 
 # Examples
+## Default
+
+<Canvas of={ TooltipStories.Default } sourceState='shown' />
+
+## With an arrow tip
 
-<Usage />
+<Canvas of={ TooltipStories.ArrowTip } sourceState='shown' />
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,6 +9,8 @@ import * as SpinnerStories from './spinner.stories'; @@
     # Overview
+    A visual indicator that a process is happening in the background but the interface is not yet ready for interaction.
     <Canvas of={ SpinnerStories.Default } sourceState='none' />
     <div>
@@ Expand Down @@