From e093fdeab7e0b252c37eaccd33b45e9b90b40f38 Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Tue, 2 Jul 2024 13:20:48 +0200
Subject: [PATCH 1/5] fix(Modal): close button always visible, animation
 change, new modal variant with component

---
 .../src/components/Modal/Modal.module.scss    | 25 +++----
 .../src/components/Modal/Modal.stories.tsx    | 28 +++++++-
 .../src/components/Modal/Modal.tsx            | 24 ++++---
 .../components/Modal/StoriesComponents.tsx    |  3 -
 .../components/ActionModalContent.module.scss | 35 ++++++++++
 .../Modal/components/ActionModalContent.tsx   | 70 +++++++++++++++++++
 6 files changed, 155 insertions(+), 30 deletions(-)
 create mode 100644 packages/react-components/src/components/Modal/components/ActionModalContent.module.scss
 create mode 100644 packages/react-components/src/components/Modal/components/ActionModalContent.tsx

diff --git a/packages/react-components/src/components/Modal/Modal.module.scss b/packages/react-components/src/components/Modal/Modal.module.scss
index 864b1373f..0d4161af5 100644
--- a/packages/react-components/src/components/Modal/Modal.module.scss
+++ b/packages/react-components/src/components/Modal/Modal.module.scss
@@ -12,8 +12,8 @@
   padding: var(--spacing-6) var(--spacing-7);
   max-width: 100%;
   height: fit-content;
-  animation: var(--transition-duration-moderate-1) fade-in-step2
-    var(--transition-duration-moderate-1) forwards;
+  animation: var(--transition-duration-fast-2) fade-in
+    var(--transition-duration-fast-2) forwards;
   color: var(--content-basic-primary);
 
   &--full-space {
@@ -27,7 +27,7 @@
 
     &--visible {
       display: flex;
-      animation: fade-in-step1 var(--transition-duration-moderate-1) forwards;
+      animation: fade-in var(--transition-duration-fast-2) forwards;
 
       @media (prefers-reduced-motion) {
         animation: none;
@@ -100,6 +100,11 @@
     padding-bottom: var(--spacing-5);
     width: 100%;
     color: var(--content-basic-primary);
+
+    &--without-heading {
+      flex-direction: row-reverse;
+      padding-bottom: 0;
+    }
   }
 
   &__label-header {
@@ -134,24 +139,12 @@
   }
 }
 
-@keyframes fade-in-step1 {
-  0% {
-    opacity: var(--transition-initial-fade-in-opacity);
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes fade-in-step2 {
+@keyframes fade-in {
   0% {
     opacity: var(--transition-initial-fade-in-opacity);
-    scale: var(--transition-initial-fade-in-scale);
   }
 
   100% {
     opacity: 1;
-    scale: 1;
   }
 }
diff --git a/packages/react-components/src/components/Modal/Modal.stories.tsx b/packages/react-components/src/components/Modal/Modal.stories.tsx
index d0ccbdc93..2d0bf2dc4 100644
--- a/packages/react-components/src/components/Modal/Modal.stories.tsx
+++ b/packages/react-components/src/components/Modal/Modal.stories.tsx
@@ -1,11 +1,13 @@
 import * as React from 'react';
 
-import { GreetingQuickReply } from '@livechat/design-system-icons';
+import { GreetingQuickReply, Info } from '@livechat/design-system-icons';
 import { Meta, StoryFn } from '@storybook/react';
 
 import noop from '../../utils/noop';
 import { Button } from '../Button';
+import { Icon } from '../Icon';
 
+import { ActionModalContent } from './components/ActionModalContent';
 import {
   ModalContent,
   ModalFullSpaceContent,
@@ -24,7 +26,7 @@ import {
 export default {
   title: 'Components/Modal',
   component: ModalComponent,
-  subcomponents: { ModalHeader },
+  subcomponents: { ModalHeader, ActionModalContent, ModalBase },
   parameters: {
     viewMode: 'story',
     previewTabs: {
@@ -130,6 +132,28 @@ ModalWithFullSpaceContent.args = {
   footer: null,
 } as ModalProps;
 
+export const ActionModal = StoryTemplate.bind({});
+ActionModal.args = {
+  ...defaultModalProps,
+  children: (
+    <ActionModalContent
+      icon={<Icon source={Info} size="xxxlarge" kind="subtle" />}
+      heading="Action Modal Header"
+      actions={
+        <>
+          <Button>Button</Button>
+          <Button kind="primary">Button</Button>
+        </>
+      }
+    >
+      Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
+      Velit officia consequat duis enim velit mollit. Exercitation veniam
+      consequat sunt nostrud amet.
+    </ActionModalContent>
+  ),
+  footer: null,
+} as ModalProps;
+
 export const ModalPortal = ({
   children,
   ...args
diff --git a/packages/react-components/src/components/Modal/Modal.tsx b/packages/react-components/src/components/Modal/Modal.tsx
index 964c716db..a29ab4049 100644
--- a/packages/react-components/src/components/Modal/Modal.tsx
+++ b/packages/react-components/src/components/Modal/Modal.tsx
@@ -81,15 +81,21 @@ export const Modal: React.FC<ModalProps> = ({
           />
         </div>
       )}
-      {!labelHeading && heading && (
-        <div className={styles[`${baseClass}__header`]}>
-          <Heading
-            size="sm"
-            as="div"
-            className={styles[`${baseClass}__heading`]}
-          >
-            {heading}
-          </Heading>
+      {!labelHeading && (
+        <div
+          className={cx(styles[`${baseClass}__header`], {
+            [styles[`${baseClass}__header--without-heading`]]: !heading,
+          })}
+        >
+          {heading && (
+            <Heading
+              size="sm"
+              as="div"
+              className={styles[`${baseClass}__heading`]}
+            >
+              {heading}
+            </Heading>
+          )}
           <ModalCloseButton onClick={onCloseButtonClick} />
         </div>
       )}
diff --git a/packages/react-components/src/components/Modal/StoriesComponents.tsx b/packages/react-components/src/components/Modal/StoriesComponents.tsx
index 0e7c95bcb..c62e134c2 100644
--- a/packages/react-components/src/components/Modal/StoriesComponents.tsx
+++ b/packages/react-components/src/components/Modal/StoriesComponents.tsx
@@ -45,9 +45,6 @@ export const ModalFullSpaceContent: React.FC = () => {
 
 export const ModalContent: React.FC = () => (
   <div style={{ maxWidth: 400 }}>
-    <Heading size="lg" as="div">
-      Content header
-    </Heading>
     <Text size="sm">
       Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
       Velit officia consequat duis enim velit mollit. Exercitation veniam
diff --git a/packages/react-components/src/components/Modal/components/ActionModalContent.module.scss b/packages/react-components/src/components/Modal/components/ActionModalContent.module.scss
new file mode 100644
index 000000000..e46ad8803
--- /dev/null
+++ b/packages/react-components/src/components/Modal/components/ActionModalContent.module.scss
@@ -0,0 +1,35 @@
+$base-class: 'action-modal-content';
+
+.#{$base-class} {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: var(--spacing-3);
+  padding-bottom: var(--spacing-10);
+  width: 100%;
+  width: 480px;
+  height: 100%;
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: var(--spacing-3);
+    min-width: 48px;
+    min-height: 48px;
+  }
+
+  &__heading {
+    margin-bottom: var(--spacing-2);
+  }
+
+  &__content {
+    margin-bottom: var(--spacing-10);
+    text-align: center;
+  }
+
+  &__actions {
+    display: flex;
+    gap: var(--spacing-2);
+  }
+}
diff --git a/packages/react-components/src/components/Modal/components/ActionModalContent.tsx b/packages/react-components/src/components/Modal/components/ActionModalContent.tsx
new file mode 100644
index 000000000..3e5ff42ae
--- /dev/null
+++ b/packages/react-components/src/components/Modal/components/ActionModalContent.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+
+import cx from 'clsx';
+
+import { Heading, Text } from '../../Typography';
+
+import styles from './ActionModalContent.module.scss';
+
+const baseClass = 'action-modal-content';
+
+interface IActionModalProps {
+  /**
+   * Optional element to render icon or image
+   */
+  icon?: React.ReactNode;
+  /**
+   * Set the header text
+   */
+  heading?: React.ReactNode;
+  /**
+   * Optional element to render action buttons
+   */
+  actions?: React.ReactNode;
+  /**
+   * The CSS class for main container
+   */
+  className?: string;
+  /**
+   * The CSS class for header container
+   */
+  headerClassName?: string;
+  /**
+   * The CSS class for content container
+   */
+  contentClassName?: string;
+}
+
+export const ActionModalContent: React.FC<IActionModalProps> = ({
+  children,
+  className,
+  icon,
+  heading,
+  actions,
+  headerClassName,
+  contentClassName,
+}) => {
+  const mergedClassNames = cx(styles[baseClass], className);
+
+  return (
+    <div className={mergedClassNames}>
+      {icon && <div className={styles[`${baseClass}__icon`]}>{icon}</div>}
+      {heading && (
+        <Heading
+          className={cx(styles[`${baseClass}__heading`], headerClassName)}
+        >
+          {heading}
+        </Heading>
+      )}
+      <Text
+        as="div"
+        className={cx(styles[`${baseClass}__content`], contentClassName)}
+      >
+        {children}
+      </Text>
+      {actions && (
+        <div className={styles[`${baseClass}__actions`]}>{actions}</div>
+      )}
+    </div>
+  );
+};

From d9e1a834d0763a3280aa4f67bdefe4d896b891e2 Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Tue, 2 Jul 2024 14:24:31 +0200
Subject: [PATCH 2/5] fix(Modal): changes after review

---
 .../src/components/Modal/Modal.stories.tsx       | 16 ++++++++++++----
 .../components/ActionModalContent.module.scss    |  1 +
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/react-components/src/components/Modal/Modal.stories.tsx b/packages/react-components/src/components/Modal/Modal.stories.tsx
index 2d0bf2dc4..6516bf17b 100644
--- a/packages/react-components/src/components/Modal/Modal.stories.tsx
+++ b/packages/react-components/src/components/Modal/Modal.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { GreetingQuickReply, Info } from '@livechat/design-system-icons';
+import { GreetingQuickReply, Error } from '@livechat/design-system-icons';
 import { Meta, StoryFn } from '@storybook/react';
 
 import noop from '../../utils/noop';
@@ -137,12 +137,20 @@ ActionModal.args = {
   ...defaultModalProps,
   children: (
     <ActionModalContent
-      icon={<Icon source={Info} size="xxxlarge" kind="subtle" />}
+      icon={
+        <Icon
+          source={Error}
+          size="xxxlarge"
+          customColor="var(--content-basic-disabled)"
+        />
+      }
       heading="Action Modal Header"
       actions={
         <>
-          <Button>Button</Button>
-          <Button kind="primary">Button</Button>
+          <Button size="large">Button</Button>
+          <Button size="large" kind="primary">
+            Button
+          </Button>
         </>
       }
     >
diff --git a/packages/react-components/src/components/Modal/components/ActionModalContent.module.scss b/packages/react-components/src/components/Modal/components/ActionModalContent.module.scss
index e46ad8803..7dfd3a606 100644
--- a/packages/react-components/src/components/Modal/components/ActionModalContent.module.scss
+++ b/packages/react-components/src/components/Modal/components/ActionModalContent.module.scss
@@ -20,6 +20,7 @@ $base-class: 'action-modal-content';
   }
 
   &__heading {
+    margin-top: 0;
     margin-bottom: var(--spacing-2);
   }
 

From 9e626130ca6e1f1faeaf9067af2abbfffd5bdb9e Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Tue, 2 Jul 2024 14:36:18 +0200
Subject: [PATCH 3/5] fix(Modal): rwd fix

---
 .../components/Modal/components/ActionModalContent.module.scss  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/src/components/Modal/components/ActionModalContent.module.scss b/packages/react-components/src/components/Modal/components/ActionModalContent.module.scss
index 7dfd3a606..ab3488dad 100644
--- a/packages/react-components/src/components/Modal/components/ActionModalContent.module.scss
+++ b/packages/react-components/src/components/Modal/components/ActionModalContent.module.scss
@@ -7,7 +7,7 @@ $base-class: 'action-modal-content';
   padding-top: var(--spacing-3);
   padding-bottom: var(--spacing-10);
   width: 100%;
-  width: 480px;
+  max-width: 480px;
   height: 100%;
 
   &__icon {

From 4fa9168417eaf5766b9ac35103055d3cc33d983b Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Fri, 12 Jul 2024 13:02:14 +0200
Subject: [PATCH 4/5] fix(Modal): docs update

---
 .../src/components/Modal/Modal.mdx            | 143 ++++++++++++++++--
 .../src/components/Modal/Modal.stories.tsx    |  12 +-
 2 files changed, 137 insertions(+), 18 deletions(-)

diff --git a/packages/react-components/src/components/Modal/Modal.mdx b/packages/react-components/src/components/Modal/Modal.mdx
index 106b279da..475d6b0ad 100644
--- a/packages/react-components/src/components/Modal/Modal.mdx
+++ b/packages/react-components/src/components/Modal/Modal.mdx
@@ -1,4 +1,4 @@
-import { ArgTypes, Meta, Title } from '@storybook/blocks';
+import { ArgTypes, Meta, Title, Canvas } from '@storybook/blocks';
 
 import * as ModalStories from './Modal.stories';
 
@@ -8,24 +8,31 @@ import * as ModalStories from './Modal.stories';
 
 [Component API](#ComponentAPI) | [Content Spec](#ContentSpec)
 
+## How to use modals
+
+### Default Modal
+
+Default Modal window is used to gather user input without navigating away from the current page.
+
+Use it for Data Entry:
+- <b>Edit</b> details or preferences.
+- <b>Invite</b> agents
+- <b>Gather</b> necessary information for specific tasks
+
+Modal includes:
+
+- Form fields
+- Labels and placeholders for guidance
+- Error messages and validation
+- Submit (Primary button kind) and cancel buttons (Secondary, Plain buttons kinds)
+
+<Canvas of={ModalStories.Modal} sourceState="none" />
+
 #### Example implementation
 
 ```jsx
-import { GreetingQuickReply } from '@livechat/design-system-icons';
-
 <Modal
-  heading={
-    <ModalHeader
-      title="Modal Header"
-      iconProps={{
-        source: GreetingQuickReply,
-        kind: 'primary',
-        size: 'large',
-      }}
-    >
-      Modal description
-    </ModalHeader>
-  }
+  heading='Modal header'
   footer={
     <div>
       <Button size="medium" kind="secondary">
@@ -39,7 +46,111 @@ import { GreetingQuickReply } from '@livechat/design-system-icons';
   onClose={() => {}}
 >
   Modal content
-</Modal>;
+</Modal>
+```
+
+### Action Modal - Info <a id="ActionModalInfo" />
+
+Info modal used to provide important information without requiring immediate action. 
+
+Use it for:
+- <b>General notifications</b> - Inform users about updates, news, or general information that doesn’t need immediate action.
+- <b>Instructions or tips</b> - Provide guidance or tips related to the current task or feature.
+- <b>Announcements</b> - Share announcements, such as new features, upcoming maintenance, or scheduled downtime.
+- <b>Confirmation of actions</b> - Confirm that an action has been successfully completed (e.g., "Your changes have been saved").
+- <b>Educational content</b> - Offer tutorials, walkthroughs, or additional information about how to use a feature.
+
+Info modal includes:
+- An icon to indicate the type of information (e.g., info icon).
+- Action Title
+- Action Description
+- An acknowledgment primary button (e.g., "OK", "Got it").
+- Optional secondary button if further action might be needed (e.g., "Learn More").
+- Close icon
+
+<Canvas of={ModalStories.ActionModal} sourceState="none" />
+
+#### Example implementation
+
+```jsx
+<Modal {...props}>
+  <ActionModalContent
+    icon={
+      <Icon
+        source={Error}
+        size="xxxlarge"
+        customColor="var(--content-basic-disabled)"
+      />
+    }
+    heading="Action Modal Header"
+    actions={
+      <>
+        <Button size="large">Button</Button>
+        <Button size="large" kind="primary">
+          Button
+        </Button>
+      </>
+    }
+  >
+    Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
+    Velit officia consequat duis enim velit mollit. Exercitation veniam
+    consequat sunt nostrud amet.
+  </ActionModalContent>
+</Modal>
+```
+
+### Action Modal - Confirmation
+
+A Confirmation Modal is used to verify a user's intent before proceeding with important actions.
+
+Use it in these scenarios:
+- <b>Deleting Data</b>: Prevent accidental data loss.
+- <b>Submitting a Form</b>: Confirm critical information submission.
+- <b>Exiting or Logging Out</b>: Ensure unsaved changes are saved or confirm exit.
+- <b>Executing a Command</b>: Double-check significant commands (e.g., start/stop services).
+- <b>Irreversible Actions</b>: Confirm actions that cannot be undone.
+
+Confirmation modal includes:
+- Attention icon. (error)
+- Action Title
+- Action Description
+- Primary (kind=Destructive) and secondary buttons (optional).
+- Close icon
+
+The implementation is the same as [Action Modal - Info](#ActionModalInfo)
+
+### Full space content “Promo modal”
+
+A Promotional Modal is used to introduce new features or updates to users in an engaging way. 
+
+Use it for:
+- <b>New Feature Announcements</b>: Highlight and explain new features or tools.
+- <b>Product Updates</b>: Inform users about major updates or improvements.
+- <b>Special Offers</b>: Promote limited-time deals, discounts, or promotions.
+- <b>User Onboarding</b>: Guide new users through key features and benefits.
+- <b>Engagement Boost</b>: Encourage users to try out new or underused features.
+
+<Canvas of={ModalStories.ModalWithFullSpaceContent} sourceState="none" />
+
+```jsx
+<Modal
+  labelHeading={
+    <ModalHeader
+      title="Modal Header"
+      avatarProps={{
+        type: 'image',
+        size: 'small',
+        src: 'https://cdn-labs.livechat-files.com/api/file/lc/img/100019504/df59da4b5b0cdb6030efb08787fd255d.jpg',
+      }}
+    >
+      {' '}
+      Modal description{' '}
+    </ModalHeader>
+  }
+  fullSpaceContent
+>
+  <YourCustomStyledContent />
+</Modal>
 ```
 
 ## Component API <a id="ComponentAPI" />
diff --git a/packages/react-components/src/components/Modal/Modal.stories.tsx b/packages/react-components/src/components/Modal/Modal.stories.tsx
index 6516bf17b..cf081b38a 100644
--- a/packages/react-components/src/components/Modal/Modal.stories.tsx
+++ b/packages/react-components/src/components/Modal/Modal.stories.tsx
@@ -53,7 +53,15 @@ const StoryTemplate: StoryFn<ModalProps> = ({
   const [isOpen, setIsOpen] = React.useState(true);
 
   return (
-    <>
+    <div
+      style={{
+        width: '80vh',
+        height: '50vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
       <Button onClick={() => setIsOpen(true)}>Open modal</Button>
       {isOpen && (
         <ModalComponent
@@ -64,7 +72,7 @@ const StoryTemplate: StoryFn<ModalProps> = ({
           {children}
         </ModalComponent>
       )}
-    </>
+    </div>
   );
 };
 

From 79dc1a62e7909854bb0fa68c43d3a47603b95c53 Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Fri, 12 Jul 2024 14:28:33 +0200
Subject: [PATCH 5/5] fix(Modal): changes after review

---
 .../src/components/Modal/Modal.mdx             | 12 +++++++++---
 .../src/components/Modal/Modal.stories.tsx     | 18 +++++++++---------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/react-components/src/components/Modal/Modal.mdx b/packages/react-components/src/components/Modal/Modal.mdx
index 475d6b0ad..7c1dacedc 100644
--- a/packages/react-components/src/components/Modal/Modal.mdx
+++ b/packages/react-components/src/components/Modal/Modal.mdx
@@ -19,7 +19,7 @@ Use it for Data Entry:
 - <b>Invite</b> agents
 - <b>Gather</b> necessary information for specific tasks
 
-Modal includes:
+Modal should includes:
 
 - Form fields
 - Labels and placeholders for guidance
@@ -31,6 +31,8 @@ Modal includes:
 #### Example implementation
 
 ```jsx
+import { Modal, Button } from '@livechat/design-system-react-components';
+
 <Modal
   heading='Modal header'
   footer={
@@ -60,7 +62,7 @@ Use it for:
 - <b>Confirmation of actions</b> - Confirm that an action has been successfully completed (e.g., "Your changes have been saved").
 - <b>Educational content</b> - Offer tutorials, walkthroughs, or additional information about how to use a feature.
 
-Info modal includes:
+Info modal should includes:
 - An icon to indicate the type of information (e.g., info icon).
 - Action Title
 - Action Description
@@ -73,6 +75,8 @@ Info modal includes:
 #### Example implementation
 
 ```jsx
+import { Modal, ActionModalContent, Button } from '@livechat/design-system-react-components';
+
 <Modal {...props}>
   <ActionModalContent
     icon={
@@ -110,7 +114,7 @@ Use it in these scenarios:
 - <b>Executing a Command</b>: Double-check significant commands (e.g., start/stop services).
 - <b>Irreversible Actions</b>: Confirm actions that cannot be undone.
 
-Confirmation modal includes:
+Confirmation modal should includes:
 - Attention icon. (error)
 - Action Title
 - Action Description
@@ -133,6 +137,8 @@ Use it for:
 <Canvas of={ModalStories.ModalWithFullSpaceContent} sourceState="none" />
 
 ```jsx
+import { Modal, ModalHeader } from '@livechat/design-system-react-components';
+
 <Modal
   labelHeading={
     <ModalHeader
diff --git a/packages/react-components/src/components/Modal/Modal.stories.tsx b/packages/react-components/src/components/Modal/Modal.stories.tsx
index cf081b38a..550b9cd52 100644
--- a/packages/react-components/src/components/Modal/Modal.stories.tsx
+++ b/packages/react-components/src/components/Modal/Modal.stories.tsx
@@ -38,6 +38,14 @@ export default {
   },
 } as Meta<typeof ModalComponent>;
 
+const StoryContainerStyles = {
+  width: '80vh',
+  height: '50vh',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
 const defaultModalProps = {
   children: <ModalContent />,
   closeOnEscPress: true,
@@ -53,15 +61,7 @@ const StoryTemplate: StoryFn<ModalProps> = ({
   const [isOpen, setIsOpen] = React.useState(true);
 
   return (
-    <div
-      style={{
-        width: '80vh',
-        height: '50vh',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
+    <div style={StoryContainerStyles}>
       <Button onClick={() => setIsOpen(true)}>Open modal</Button>
       {isOpen && (
         <ModalComponent