From e525ed69233fd9857fb39d9efcd6a77080dd1718 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Wed, 8 Jan 2025 11:38:43 +0200
Subject: [PATCH] docs(Modal): add import sections to let consumers know where
 to consume from

---
 .../Modal/Modal/__stories__/Modal.mdx         | 21 +++++++++++++++++++
 .../__stories__/ModalBasicLayout.mdx          | 11 ++++++++++
 .../__stories__/ModalMediaLayout.mdx          | 11 ++++++++++
 .../__stories__/ModalSideBySideLayout.mdx     | 11 ++++++++++
 4 files changed, 54 insertions(+)

diff --git a/packages/core/src/components/Modal/Modal/__stories__/Modal.mdx b/packages/core/src/components/Modal/Modal/__stories__/Modal.mdx
index 3b8a2ab391..ecfdf190a4 100644
--- a/packages/core/src/components/Modal/Modal/__stories__/Modal.mdx
+++ b/packages/core/src/components/Modal/Modal/__stories__/Modal.mdx
@@ -22,6 +22,7 @@ import {
 # Modal
 
 - [Overview](#overview)
+- [Import](#import)
 - [Props](#props)
 - [Usage](#usage)
 - [Accessibility](#accessibility)
@@ -37,6 +38,26 @@ import {
   We have 3 different modal component, each one provide a different layout for a different use case:
 </p>
 
+### Import
+
+All the Modal-related components can be imported from `@vibe/core/next`.
+
+Notice not to import components directly from the `@vibe/core` package, as they are deprecated.
+
+```ts
+import {
+  Modal,
+  ModalHeader,
+  ModalContent,
+  ModalMedia,
+  ModalFooter,
+  ModalFooterWizard,
+  ModalBasicLayout,
+  ModalSideBySideLayout,
+  ModalMediaLayout
+} from "@vibe/core/next";
+```
+
 ### Basic modal
 
 The <StorybookLink page="Components/Modal [New]/Basic modal">Basic Modal</StorybookLink> is intended for straightforward tasks, like selecting items or gathering basic information. Basic Modals help users focus on a single task without distractions. These modals do not support images or videos.
diff --git a/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx b/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx
index c7ddf6be76..3faaac0b62 100644
--- a/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx
+++ b/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx
@@ -15,6 +15,7 @@ import { BasicModalTip } from "./ModalBasicLayout.stories.helpers";
 # Basic modal
 
 - [Overview](#overview)
+- [Import](#import)
 - [Props](#props)
 - [Usage](#usage)
 - [Variants](#variants)
@@ -30,6 +31,16 @@ The Basic Modal is intended for straightforward tasks, like selecting items or g
 
 <Canvas of={ModalBasicLayoutStories.Overview} />
 
+### Import
+
+All the Basic Modal layout components can be imported from `@vibe/core/next`.
+
+Notice not to import components directly from the `@vibe/core` package, as they are deprecated.
+
+```ts
+import { Modal, ModalHeader, ModalContent, ModalFooter, ModalFooterWizard, ModalBasicLayout } from "@vibe/core/next";
+```
+
 ## Props
 
 <PropsTable />
diff --git a/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx
index b60174980b..548f39db9e 100644
--- a/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx
+++ b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx
@@ -16,6 +16,7 @@ import { MediaModalTip } from "./ModalMediaLayout.stories.helpers";
 # Media Modal
 
 - [Overview](#overview)
+- [Import](#import)
 - [Props](#props)
 - [Usage](#usage)
 - [Use cases and examples](#use-cases-and-examples)
@@ -29,6 +30,16 @@ The Media Modal includes a highlighted media section, followed by a textual cont
 
 <Canvas of={MediaModalStories.Overview} />
 
+### Import
+
+All the Media Modal layout components can be imported from `@vibe/core/next`.
+
+Notice not to import components directly from the `@vibe/core` package, as they are deprecated.
+
+```ts
+import { Modal, ModalHeader, ModalContent, ModalMedia, ModalFooter, ModalFooterWizard, ModalMediaLayout } from "@vibe/core/next";
+```
+
 ## Props
 
 <PropsTable />
diff --git a/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx
index 92ded1b9f9..03c61bf345 100644
--- a/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx
+++ b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx
@@ -19,6 +19,7 @@ import { SideBySideModalTip } from "./ModalSideBySideLayout.stories.helpers";
 # Side-by-side modal
 
 - [Overview](#overview)
+- [Import](#import)
 - [Props](#props)
 - [Usage](#usage)
 - [Use cases and examples](#use-cases-and-examples)
@@ -32,6 +33,16 @@ The Side-by-side Modal offers a layout with two distinct sections. The left side
 
 <Canvas of={SideBySideModalStories.Overview} />
 
+### Import
+
+All the Side-by-side Modal layout components can be imported from `@vibe/core/next`.
+
+Notice not to import components directly from the `@vibe/core` package, as they are deprecated.
+
+```ts
+import { Modal, ModalHeader, ModalContent, ModalMedia, ModalFooter, ModalFooterWizard, ModalSideBySideLayout } from "@vibe/core/next";
+```
+
 ## Props
 
 <PropsTable />