feat(menu): add component migration doc

Signed-off-by: Stagnol <[email protected]>

packages/storybook/stories/components/content-addon/migration.from.17.x.mdx

@@ -7,7 +7,7 @@ import { Meta } from '@storybook/blocks';
 
 Content Addon has been removed from ODS components.
 
-The same behaviour can be achieve with simple CSS.
+The same behaviour can be achieved with simple CSS.
 
 Let's take an example of the content-addon usage:
 ```html

packages/storybook/stories/components/menu/migration.from.17.x.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as PopoverStories from '../popover/popover.stories';
+
+<Meta title="ODS Components/Actions/Menu/Migration From 17.x" />
+
+# Menu - migrate from v17 to v18
+----
+
+Menu has been removed from ODS components.
+
+The same component can be achieved with ods-popover.
+
+Here is an example of the Popover as Action Menu:
+
+<Canvas of={ PopoverStories.Menu } sourceState='shown' />

packages/storybook/stories/components/popover/documentation.mdx

@@ -75,3 +75,7 @@ The correct way would be:
 ## With an arrow tip
 
 <Canvas of={ PopoverStories.ArrowTip } sourceState='shown' />
+
+## Popover as Action Menu
+
+<Canvas of={ PopoverStories.Menu } sourceState='shown' />

packages/storybook/stories/components/popover/popover.stories.ts

@@ -122,3 +122,47 @@ export const Overview: StoryObj = {
 </ods-popover>
   `,
 };
+
+export const Menu: StoryObj = {
+  tags:['isHidden'],
+  decorators: [(story) => html`<div style="height: 200px;">${story()}</div>`],
+  render: () => html`
+<div style="display: flex;">
+  <ods-button class="my-trigger"
+              icon="menu-ellipsis-vertical"
+              id="trigger-menu"
+              variant="ghost"></ods-button>
+
+  <ods-popover class="custom-popover"
+               trigger-id="trigger-menu"
+               with-arrow>
+    <ods-button class="my-button"
+                label="Button"
+                variant="ghost"></ods-button>
+    <ods-button class="my-button"
+                label="Button"
+                variant="ghost"></ods-button>
+    <ods-divider></ods-divider>
+    <ods-button class="my-button"
+                label="Button"
+                variant="ghost"
+                color="critical"></ods-button>
+  </ods-popover>
+
+  <style>
+    .custom-popover {
+      padding: 8px 0;
+    }
+    .my-trigger::part(button) {
+      width: 40px;
+      height: 40px;
+      justify-content: center;
+    }
+    .my-button::part(button) {
+      height: 32px;
+      border-radius: 0;
+    }
+  </style>
+</div>
+  `,
+}