docs(Modal): general improvements and intent modals stories (#2681)

packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx

@@ -20,7 +20,7 @@ import { BasicModalTip } from "./ModalBasicLayout.stories.helpers";
 - [Variants](#variants)
 - [Scroll](#scroll)
 - [Use cases and examples](#use-cases-and-examples)
-- [Do's and dont's](do's-and-don'ts)
+- [Do's and dont's](#dos-and-donts)
 - [Related components](#related-components)
 - [Feedback](#feedback)
 
@@ -69,28 +69,34 @@ When the content of the modal is too large to fit within the viewport, the modal
 
 ## Use cases and examples
 
-### Wizard footer
+### Wizard modal
 
-When multi steps modal, use the ModalFooterWizard.
+For modals with multiple steps, use the ModalFooterWizard.
 
 <Canvas of={ModalBasicLayoutStories.Wizard} />
 
-### Footer with side action
+### Confirmation modal
+
+Confirmation modal ensure that users acknowledge the outcomes of their actions. It is based on the small size modal and comes with predefine properties. To use a confirmation modal, simply copy the code provided below.
+
+<Canvas of={ModalBasicLayoutStories.Confirmation} />
+
+### Footer with extra content
 
 The footer has an option to include additional content on the left side when needed. This extra content can consist of a button, checkbox, or simple text for notes. Note that this option is only available with the default footer.
 
-<Canvas of={ModalBasicLayoutStories.FooterWithSideAction} />
+<Canvas of={ModalBasicLayoutStories.FooterWithExtraContent} />
 
-### Header with extra icon button
+### Header with icon button
 
 In case of a need of an icon button in the modal header, you can use our default header "Action slot".
 You can also use it as a <StorybookLink page="Buttons/MenuButton">menu button</StorybookLink> component.
 
-<Canvas of={ModalBasicLayoutStories.HeaderWithExtraIconButton} />
+<Canvas of={ModalBasicLayoutStories.HeaderWithIconButton} />
 
 ### Animation
 
-Each modal includes an animation type based on its entrance point, with wizard modals also featuring transition animations. The default is the element trigger animation, which can be replaced with a center pop animation if there's no specific trigger. Transition animation is used exclusively for wizard modals and cannot be changed or removed.
+Each modal includes an animation type based on its entrance point, with wizard modals also featuring transition animations. The default is the center pop animation, which can be replaced with an anchor animation if there is a specific trigger to open the modal. Transition animation is used exclusively for wizard modals and cannot be changed or removed.
 
 <Canvas of={ModalBasicLayoutStories.Animation} />
 

packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx

@@ -276,7 +276,7 @@ export const Wizard: Story = {
   }
 };
 
-export const FooterWithSideAction: Story = {
+export const FooterWithExtraContent: Story = {
   decorators: [(Story, context) => withOpenedModalPreview(Story, { isDocsView: context.viewMode === "docs" })],
   render: (_, { show, setShow, container }) => {
     return (
@@ -307,7 +307,30 @@ export const FooterWithSideAction: Story = {
   }
 };
 
-export const HeaderWithExtraIconButton: Story = {
+export const Confirmation: Story = {
+  decorators: [(Story, context) => withOpenedModalPreview(Story, { isDocsView: context.viewMode === "docs" })],
+  render: (_, { show, setShow, container }) => {
+    return (
+      <Modal id="modal-basic" show={show} size="small" onClose={() => setShow(false)} container={container}>
+        <ModalBasicLayout>
+          <ModalHeader title="Want to delete?" />
+          <ModalContent>
+            <Text type="text1" align="inherit" element="p">
+              There are other tasks connected to this task. Deleting this task will remove any existing connections. It
+              will be kept in trash for 30 days.
+            </Text>
+          </ModalContent>
+        </ModalBasicLayout>
+        <ModalFooter
+          primaryButton={{ text: "Confirm", onClick: () => setShow(false) }}
+          secondaryButton={{ text: "Cancel", onClick: () => setShow(false) }}
+        />
+      </Modal>
+    );
+  }
+};
+
+export const HeaderWithIconButton: Story = {
   decorators: [(Story, context) => withOpenedModalPreview(Story, { isDocsView: context.viewMode === "docs" })],
   render: (_, { show, setShow, container }) => {
     return (

packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx

@@ -19,7 +19,7 @@ import { MediaModalTip } from "./ModalMediaLayout.stories.helpers";
 - [Props](#props)
 - [Usage](#usage)
 - [Use cases and examples](#use-cases-and-examples)
-- [Do's and dont's](do's-and-don'ts)
+- [Do's and dont's](#dos-and-donts)
 - [Related components](#related-components)
 - [Feedback](#feedback)
 
@@ -46,18 +46,24 @@ The Media Modal includes a highlighted media section, followed by a textual cont
 
 ## Use cases and examples
 
-### Wizard footer
+### Wizard modal
 
-When multi steps modal, use the ModalFooterWizard.
+For modals with multiple steps, use the ModalFooterWizard.
 
 <Canvas of={MediaModalStories.Wizard} />
 
+### Announcement modal
+
+Announcement modals used to effectively introduce new features or updates to users in a focused and engaging way. It is the media modal with predefine properties. To use an announcement modal, simply copy the code provided below.
+
+<Canvas of={MediaModalStories.Announcement} />
+
 ### Header with extra icon button
 
 In case of a need of an icon button in the modal header, you can use our default header "Action slot".
 You can also use it as a <StorybookLink page="Buttons/MenuButton">menu button</StorybookLink> component.
 
-<Canvas of={MediaModalStories.HeaderWithExtraIconButton} />
+<Canvas of={MediaModalStories.HeaderWithIconButton} />
 
 ### Animation
 

packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx

@@ -92,7 +92,7 @@ export const Wizard: Story = {
     const steps = [
       <ModalMediaLayout>
         <ModalMedia>
-          <img height={260} src={mediaImage} alt="media placeholder" style={{ width: "100%", objectFit: "cover" }} />
+          <img src={mediaImage} alt="media placeholder" style={{ width: "100%", objectFit: "cover" }} />
         </ModalMedia>
         <ModalHeader title="Modal with wizard" />
         <ModalContent>
@@ -103,7 +103,7 @@ export const Wizard: Story = {
       </ModalMediaLayout>,
       <ModalMediaLayout>
         <ModalMedia>
-          <img height={260} src={mediaImage} alt="media placeholder" style={{ width: "100%", objectFit: "cover" }} />
+          <img src={mediaImage} alt="media placeholder" style={{ width: "100%", objectFit: "cover" }} />
         </ModalMedia>
         <ModalHeader title="Modal with wizard" />
         <ModalContent>
@@ -136,7 +136,35 @@ export const Wizard: Story = {
   }
 };
 
-export const HeaderWithExtraIconButton: Story = {
+export const Announcement: Story = {
+  decorators: [
+    (Story, context) => withOpenedModalPreview(Story, { size: "large", isDocsView: context.viewMode === "docs" })
+  ],
+  render: (_, { show, setShow, container }) => {
+    return (
+      <Modal id="modal-media" show={show} size="medium" onClose={() => setShow(false)} container={container}>
+        <ModalMediaLayout>
+          <ModalMedia>
+            <img src={mediaImage} alt="media placeholder" style={{ width: "100%", objectFit: "cover" }} />
+          </ModalMedia>
+          <ModalHeader title="Meet our new feature" />
+          <ModalContent>
+            <Text type="text1" align="inherit" element="p">
+              Introducing our latest feature designed to make your workflow faster and easier. For more details{" "}
+              <Link inheritFontSize inlineText text="click here" />.
+            </Text>
+          </ModalContent>
+        </ModalMediaLayout>
+        <ModalFooter
+          primaryButton={{ text: "Got it", onClick: () => setShow(false) }}
+          secondaryButton={{ text: "Dismiss", onClick: () => setShow(false) }}
+        />
+      </Modal>
+    );
+  }
+};
+
+export const HeaderWithIconButton: Story = {
   decorators: [
     (Story, context) => withOpenedModalPreview(Story, { size: "large", isDocsView: context.viewMode === "docs" })
   ],
@@ -179,7 +207,7 @@ export const Animation: Story = {
     const transitionSteps = [
       <ModalMediaLayout>
         <ModalMedia>
-          <img height={260} src={mediaImage} alt="media placeholder" style={{ width: "100%", objectFit: "cover" }} />
+          <img src={mediaImage} alt="media placeholder" style={{ width: "100%", objectFit: "cover" }} />
         </ModalMedia>
         <ModalHeader title="Modal with wizard" />
         <ModalContent>
@@ -190,7 +218,7 @@ export const Animation: Story = {
       </ModalMediaLayout>,
       <ModalMediaLayout>
         <ModalMedia>
-          <img height={260} src={mediaImage} alt="media placeholder" style={{ width: "100%", objectFit: "cover" }} />
+          <img src={mediaImage} alt="media placeholder" style={{ width: "100%", objectFit: "cover" }} />
         </ModalMedia>
         <ModalHeader title="Modal with wizard" />
         <ModalContent>

packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx

@@ -22,7 +22,7 @@ import { SideBySideModalTip } from "./ModalSideBySideLayout.stories.helpers";
 - [Props](#props)
 - [Usage](#usage)
 - [Use cases and examples](#use-cases-and-examples)
-- [Do's and dont's](do's-and-don'ts)
+- [Do's and dont's](#dos-and-donts)
 - [Related components](#related-components)
 - [Feedback](#feedback)
 
@@ -50,22 +50,22 @@ The Side-by-side Modal offers a layout with two distinct sections. The left side
 
 ## Use cases and examples
 
-### Wizard footer
+### Wizard modal
 
-When multi steps modal, use the ModalFooterWizard.
+For modals with multiple steps, use the ModalFooterWizard. You can use it to break down the tasks. Not every step must include an image.
 
 <Canvas of={SideBySideModalStories.Wizard} />
 
-### Header with extra icon button
+### Header with icon button
 
 In case of a need of an icon button in the modal header, you can use our default header "Action slot".
 You can also use it as a <StorybookLink page="Buttons/MenuButton">menu button</StorybookLink> component.
 
-<Canvas of={SideBySideModalStories.HeaderWithExtraIconButton} />
+<Canvas of={SideBySideModalStories.HeaderWithIconButton} />
 
 ### Animation
 
-Each modal includes an animation type based on its entrance point, with wizard modals also featuring transition animations. The default is the element trigger animation, which can be replaced with a center pop animation if there's no specific trigger. Transition animation is used exclusively for wizard modals and cannot be changed or removed.
+Each modal includes an animation type based on its entrance point, with wizard modals also featuring transition animations. The default is the center pop animation, which can be replaced with an anchor animation if there is a specific trigger to open the modal. Transition animation is used exclusively for wizard modals and cannot be changed or removed.
 
 <Canvas of={SideBySideModalStories.Animation} />
 

packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.helpers.tsx

@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const SideBySideModalTip = () => (
   <div style={{ marginTop: 40 }}>
     <Tip>
-      If your content is scrollable consider using{" "}
+      If your content is scrollable, consider using{" "}
       <StorybookLink page="Components/Modal [New]/Basic modal" size={StorybookLink.sizes.SMALL}>
         Basic modal
       </StorybookLink>