From c160276cdf48d88b25277ad8cd5dce2593dd2ec8 Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Thu, 21 Sep 2023 11:52:04 +0200
Subject: [PATCH 1/2] fix for labeled header in full space content type of
 modal, added possibility to display avatar in the header

---
 .../src/components/Avatar/index.ts            |  1 +
 .../src/components/Modal/Modal.module.scss    |  1 -
 .../src/components/Modal/Modal.stories.tsx    | 14 +++++++++
 .../src/components/Modal/Modal.tsx            |  6 +---
 .../Modal/components/ModalHeader.module.scss  |  3 +-
 .../Modal/components/ModalHeader.tsx          | 29 ++++++++++++++++++-
 6 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/packages/react-components/src/components/Avatar/index.ts b/packages/react-components/src/components/Avatar/index.ts
index d3fb6dfa7..4a3dd72a4 100644
--- a/packages/react-components/src/components/Avatar/index.ts
+++ b/packages/react-components/src/components/Avatar/index.ts
@@ -1 +1,2 @@
 export { Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
diff --git a/packages/react-components/src/components/Modal/Modal.module.scss b/packages/react-components/src/components/Modal/Modal.module.scss
index f90d8e758..eb367202f 100644
--- a/packages/react-components/src/components/Modal/Modal.module.scss
+++ b/packages/react-components/src/components/Modal/Modal.module.scss
@@ -13,7 +13,6 @@
 
   &--full-space {
     padding: 0;
-    overflow: hidden;
   }
 
   &__overlay {
diff --git a/packages/react-components/src/components/Modal/Modal.stories.tsx b/packages/react-components/src/components/Modal/Modal.stories.tsx
index b9ce6ab2d..6bcbdff81 100644
--- a/packages/react-components/src/components/Modal/Modal.stories.tsx
+++ b/packages/react-components/src/components/Modal/Modal.stories.tsx
@@ -23,6 +23,7 @@ import {
 export default {
   title: 'Components/Modal',
   component: ModalComponent,
+  subcomponents: { ModalHeader },
   parameters: {
     viewMode: 'story',
     previewTabs: {
@@ -96,6 +97,19 @@ ModalWithLabeledHeader.args = {
 export const ModalWithFullSpaceContent = StoryTemplate.bind({});
 ModalWithFullSpaceContent.args = {
   ...defaultModalProps,
+  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>
+  ),
   children: <ModalFullSpaceContent />,
   fullSpaceContent: true,
   footer: null,
diff --git a/packages/react-components/src/components/Modal/Modal.tsx b/packages/react-components/src/components/Modal/Modal.tsx
index 669cd52cf..c03649375 100644
--- a/packages/react-components/src/components/Modal/Modal.tsx
+++ b/packages/react-components/src/components/Modal/Modal.tsx
@@ -94,11 +94,7 @@ export const Modal: React.FC<ModalProps> = ({
       )}
       <div
         data-testid="modal-body"
-        className={cx(
-          styles[`${baseClass}__body`],
-          fullSpaceContent && styles[`${baseClass}__body--full-space`],
-          contentClassName
-        )}
+        className={cx(styles[`${baseClass}__body`], contentClassName)}
       >
         {isTextContent ? <Text as="div">{children}</Text> : children}
       </div>
diff --git a/packages/react-components/src/components/Modal/components/ModalHeader.module.scss b/packages/react-components/src/components/Modal/components/ModalHeader.module.scss
index 0e38b8849..1251b7351 100644
--- a/packages/react-components/src/components/Modal/components/ModalHeader.module.scss
+++ b/packages/react-components/src/components/Modal/components/ModalHeader.module.scss
@@ -1,8 +1,9 @@
 .modal-header {
   display: flex;
+  align-items: center;
   justify-content: flex-start;
 
-  &__heading-icon {
+  &__heading-left-node {
     margin-right: 12px;
   }
 
diff --git a/packages/react-components/src/components/Modal/components/ModalHeader.tsx b/packages/react-components/src/components/Modal/components/ModalHeader.tsx
index 2dce7b71f..071ee809b 100644
--- a/packages/react-components/src/components/Modal/components/ModalHeader.tsx
+++ b/packages/react-components/src/components/Modal/components/ModalHeader.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { cx } from '@emotion/css';
 
+import { Avatar, AvatarProps } from '../../Avatar';
 import { Icon, IconProps } from '../../Icon';
 import { Heading, Text } from '../../Typography';
 
@@ -10,15 +11,32 @@ import styles from './ModalHeader.module.scss';
 const baseClass = 'modal-header';
 
 export interface ModalHeaderProps {
+  /**
+   * Set the header title
+   */
   title?: React.ReactNode;
+  /**
+   * Set to display the icon
+   */
   iconProps?: IconProps;
+  /**
+   * Set to display avatar
+   */
+  avatarProps?: AvatarProps;
+  /**
+   * Children element
+   */
   children?: React.ReactNode;
+  /**
+   * Define class name for container
+   */
   className?: 'string';
 }
 
 export const ModalHeader: React.FC<ModalHeaderProps> = ({
   title,
   iconProps,
+  avatarProps,
   children,
   className = '',
 }) => {
@@ -27,7 +45,16 @@ export const ModalHeader: React.FC<ModalHeaderProps> = ({
   return (
     <div className={mergedClassNames}>
       {iconProps && (
-        <Icon className={styles[`${baseClass}__heading-icon`]} {...iconProps} />
+        <Icon
+          className={styles[`${baseClass}__heading-left-node`]}
+          {...iconProps}
+        />
+      )}
+      {avatarProps && (
+        <Avatar
+          className={styles[`${baseClass}__heading-left-node`]}
+          {...avatarProps}
+        />
       )}
       <div className={styles[`${baseClass}__heading-body`]}>
         <Heading

From ed47b77eecde50bf151029224cac29e2ad859bfb Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Wed, 27 Sep 2023 09:36:14 +0200
Subject: [PATCH 2/2] border radius for docs example

---
 .../react-components/src/components/Modal/Modal.stories.css  | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/react-components/src/components/Modal/Modal.stories.css b/packages/react-components/src/components/Modal/Modal.stories.css
index b2f9c00fb..e4c5e5817 100644
--- a/packages/react-components/src/components/Modal/Modal.stories.css
+++ b/packages/react-components/src/components/Modal/Modal.stories.css
@@ -24,6 +24,11 @@
   width: 100%;
 }
 
+.full-space-wrapper img {
+  border-top-left-radius: var(--radius-3);
+  border-top-right-radius: var(--radius-3);
+}
+
 .full-space-content {
   display: flex;
   flex-direction: column;