docs(Modal): add import sections to let consumers know where to consu…

…me from (#2709)
mondaycom · Jan 9, 2025 · b42707b · b42707b
1 parent cda32ae
commit b42707b
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 3 deletions.
diff --git a/packages/core/src/components/EditableHeading/__stories__/EditableHeading.mdx b/packages/core/src/components/EditableHeading/__stories__/EditableHeading.mdx
@@ -16,7 +16,6 @@ export const editableHeadingTemplate = createComponentTemplate(EditableHeading);
 # EditableHeading
 
 - [Overview](#overview)
-- [Import](#import)
 - [Props](#props)
 - [Usage](#usage)
 - [Variants](#variants)

diff --git a/packages/core/src/components/Heading/__stories__/Heading.mdx b/packages/core/src/components/Heading/__stories__/Heading.mdx
@@ -13,7 +13,6 @@ import { TipEditableHeading } from "./Heading.stories.helpers";
 # Heading
 
 - [Overview](#overview)
-- [Import](#import)
 - [Props](#props)
 - [Usage](#usage)
 - [Variants](#variants)

diff --git a/packages/core/src/components/LegacyModal/__stories__/LegacyModal.mdx b/packages/core/src/components/LegacyModal/__stories__/LegacyModal.mdx
@@ -17,7 +17,6 @@ import * as ModalStories from "./LegacyModal.stories";
 <DeprecatedWarning alternativeName="Modal" alternativeLink="/?path=/docs/components-modal-new" />
 
 - [Overview](#overview)
-- [Import](#import)
 - [Props](#props)
 - [Usage](#usage)
 - [Variants](#variants)

diff --git a/packages/core/src/components/Modal/Modal/__stories__/Modal.mdx b/packages/core/src/components/Modal/Modal/__stories__/Modal.mdx
@@ -37,6 +37,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/.../src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx b/.../src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx
@@ -30,6 +30,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/.../src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx b/.../src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx
@@ -29,6 +29,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/...nents/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx b/...nents/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx
@@ -32,6 +32,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 />