refactor: rename onCloseModal, Modal.Actions, DialogBox.Footer and onInputChange

packages/core/src/components/DialogBox/DialogBox.stories.mdx

@@ -6,7 +6,7 @@ import * as stories from './DialogBox.stories';
 
 # DialogBox
 
-`DialogBox` are windows that appear in front of app content to give critical information, request a decision, or involve multiple tasks.  It consists of a Header, Content, and Action.
+`DialogBox` are windows that appear in front of app content to give critical information, request a decision, or involve multiple tasks. It consists of a Header, Content, and Action.
 
 You can play with the component in the canvas tab.
 
@@ -16,13 +16,13 @@ You can play with the component in the canvas tab.
     <DialogBox.Content>
         <Input id="name-input" type="text" fullWidth label="Name" placeholder="Enter your Name" />
     </DialogBox.Content>
-    <DialogBox.Actions>
+    <DialogBox.Footer>
         <Button variant="outlined">Cancel</Button>
-    </DialogBox.Actions>
+    </DialogBox.Footer>
 </DialogBox>
 ```
 
-Shadow appears on the Header and Actions section if you scroll through the content.
+Shadow appears on the Header and Footer section if you scroll through the content.
 
 To close the dialog box, you can either:
 

packages/core/src/components/DialogBox/DialogBox.stories.tsx

@@ -1,16 +1,16 @@
 import { defaultTheme, DialogBoxTheme } from '@medly-components/theme';
+import type { FC } from 'react';
 import { useCallback, useState } from 'react';
 import Button from '../Button';
-import { DialogBoxActionUserProps } from './Actions/types';
 import { DialogBox } from './DialogBox';
-import type { FC } from 'react';
+import { DialogBoxFooterProps } from './Footer/types';
 
 export const ThemeInterface: FC<DialogBoxTheme> = () => null;
 ThemeInterface.defaultProps = {
     ...defaultTheme.modal
 };
 
-export const DialogBoxActionProps: FC<DialogBoxActionUserProps> = () => null;
+export const DialogBoxActionProps: FC<DialogBoxFooterProps> = () => null;
 DialogBoxActionProps.defaultProps = {
     alignItems: 'right'
 };
@@ -23,18 +23,18 @@ export const Basic = () => {
     return (
         <>
             <Button onClick={changeModalState}>Click to Open</Button>
-            <DialogBox open={modalState} onCloseModal={changeModalState} shouldCloseOnOutsideClick={true} showCloseIcon={true}>
+            <DialogBox open={modalState} onClose={changeModalState} shouldCloseOnOutsideClick={true} showCloseIcon={true}>
                 <DialogBox.Header>Are you sure?</DialogBox.Header>
                 <DialogBox.Content>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                     aliqua.
                 </DialogBox.Content>
-                <DialogBox.Actions>
+                <DialogBox.Footer>
                     <Button edges="rounded">Delete</Button>
                     <Button variant="outlined" edges="rounded" onClick={() => changeModalState()}>
                         Cancel
                     </Button>
-                </DialogBox.Actions>
+                </DialogBox.Footer>
             </DialogBox>
         </>
     );

packages/core/src/components/DialogBox/DialogBox.test.tsx

@@ -4,14 +4,14 @@ import { DialogBoxProps } from './types';
 
 const dialogBoxRenderer = ({
     open = false,
-    onCloseModal = jest.fn(),
+    onClose = jest.fn(),
     minWidth,
     minHeight,
     shouldCloseOnOutsideClick = false,
     showCloseIcon = false
 }: DialogBoxProps) =>
     render(
-        <DialogBox {...{ open, onCloseModal, minHeight, minWidth, shouldCloseOnOutsideClick, showCloseIcon }}>
+        <DialogBox {...{ open, onClose, minHeight, minWidth, shouldCloseOnOutsideClick, showCloseIcon }}>
             <DialogBox.Header>
                 <p>Demo Header</p>
             </DialogBox.Header>
@@ -22,7 +22,7 @@ const dialogBoxRenderer = ({
                 popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
                 publishing software like Aldus PageMaker including versions of Lorem Ipsum
             </DialogBox.Content>
-            <DialogBox.Actions>Demo Actions</DialogBox.Actions>
+            <DialogBox.Footer>Demo Footer</DialogBox.Footer>
         </DialogBox>
     );
 
@@ -42,38 +42,38 @@ describe('DialogBox component', () => {
         expect(container).toBeEmptyDOMElement();
     });
 
-    it('should call onCloseModal on pressing escape key', () => {
-        const mockOnCloseModal = jest.fn();
-        const { container } = dialogBoxRenderer({ open: true, onCloseModal: mockOnCloseModal });
+    it('should call onClose on pressing escape key', () => {
+        const mockOnClose = jest.fn();
+        const { container } = dialogBoxRenderer({ open: true, onClose: mockOnClose });
         fireEvent.keyDown(container, { key: 'Escape', code: 27 });
-        expect(mockOnCloseModal).toBeCalled();
+        expect(mockOnClose).toBeCalled();
     });
 
-    it('should call onCloseModal on click on overlay background', () => {
-        const mockOnCloseModal = jest.fn();
-        const { container } = dialogBoxRenderer({ open: true, onCloseModal: mockOnCloseModal, shouldCloseOnOutsideClick: true });
+    it('should call onClose on click on overlay background', () => {
+        const mockOnClose = jest.fn();
+        const { container } = dialogBoxRenderer({ open: true, onClose: mockOnClose, shouldCloseOnOutsideClick: true });
         fireEvent.click(container.querySelector('#medly-dialog-box') as HTMLDivElement);
-        expect(mockOnCloseModal).toBeCalled();
+        expect(mockOnClose).toBeCalled();
     });
 
     it('should be able to render any JSX element in header', () => {
-        const mockOnCloseModal = jest.fn();
+        const mockOnClose = jest.fn();
         const { container } = render(
-            <DialogBox open onCloseModal={mockOnCloseModal}>
+            <DialogBox open onClose={mockOnClose}>
                 <DialogBox.Header>Demo Header</DialogBox.Header>
                 <DialogBox.Content>Demo Content</DialogBox.Content>
-                <DialogBox.Actions>
+                <DialogBox.Footer>
                     <p>Demo Header</p>
-                </DialogBox.Actions>
+                </DialogBox.Footer>
             </DialogBox>
         );
         expect(container.querySelector('p')).toBeInTheDocument();
     });
 
-    it('should call onCloseModal on click on close icon', () => {
-        const mockOnCloseModal = jest.fn();
-        dialogBoxRenderer({ open: true, onCloseModal: mockOnCloseModal, shouldCloseOnOutsideClick: true, showCloseIcon: true });
+    it('should call onClose on click on close icon', () => {
+        const mockOnClose = jest.fn();
+        dialogBoxRenderer({ open: true, onClose: mockOnClose, shouldCloseOnOutsideClick: true, showCloseIcon: true });
         fireEvent.click(screen.getByTestId('medly-dialog-box-close-button') as HTMLElement);
-        expect(mockOnCloseModal).toBeCalled();
+        expect(mockOnClose).toBeCalled();
     });
 });

packages/core/src/components/DialogBox/DialogBox.tsx

@@ -1,35 +1,25 @@
 import { useCombinedRefs, useKeyPress, WithStyle } from '@medly-components/utils';
-import { memo, forwardRef, useRef, useCallback, useEffect, useState } from 'react';
-import Actions from './Actions';
+import type { FC } from 'react';
+import { forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
+import CloseIcon from '../Modal/CloseIcon';
 import Content from './Content';
 import { DialogBoxContext } from './DialogBox.context';
 import { DialogBoxBackgroundStyled } from './DialogBox.styled';
+import Footer from './Footer';
 import Header from './Header';
 import Popup from './Popup';
 import { DialogBoxProps, DialogBoxStaticProps } from './types';
-import type { FC } from 'react';
-import CloseIcon from '../Modal/CloseIcon';
 
 const Component: FC<DialogBoxProps> = memo(
     forwardRef((props, ref) => {
-        const {
-                id,
-                open,
-                onCloseModal,
-                children,
-                minWidth,
-                shouldCloseOnOutsideClick,
-                minHeight,
-                showCloseIcon = false,
-                ...restProps
-            } = props,
+        const { id, open, onClose, children, minWidth, shouldCloseOnOutsideClick, minHeight, showCloseIcon = false, ...restProps } = props,
             isEscPressed = useKeyPress('Escape'),
             dialogBoxRef = useCombinedRefs<HTMLDivElement>(ref, useRef(null)),
             [shouldRender, setShouldRender] = useState(open);
 
         const handleBackgroundClick = useCallback(() => {
-            shouldCloseOnOutsideClick && onCloseModal && onCloseModal();
-        }, [shouldCloseOnOutsideClick, onCloseModal]);
+            shouldCloseOnOutsideClick && onClose && onClose();
+        }, [shouldCloseOnOutsideClick, onClose]);
 
         useEffect(() => {
             if (open) {
@@ -49,12 +39,12 @@ const Component: FC<DialogBoxProps> = memo(
         }, [open]);
 
         useEffect(() => {
-            open && isEscPressed && onCloseModal && onCloseModal();
+            open && isEscPressed && onClose && onClose();
         }, [open, isEscPressed]);
 
         const handleCloseModal = useCallback(() => {
-            onCloseModal && onCloseModal();
-        }, [onCloseModal]);
+            onClose && onClose();
+        }, [onClose]);
 
         return shouldRender ? (
             <DialogBoxBackgroundStyled {...{ ...restProps, id, open }} onClick={handleBackgroundClick}>
@@ -88,5 +78,5 @@ export const DialogBox: FC<DialogBoxProps> & WithStyle & DialogBoxStaticProps =
     Header,
     Popup,
     Content,
-    Actions
+    Footer
 });

packages/core/src/components/DialogBox/Actions/Actions.styled.tsx → packages/core/src/components/DialogBox/Footer/Footer.styled.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import { DialogBoxActionUserProps } from './types';
+import { DialogBoxFooterProps } from './types';
 
-export const Actions = styled('div')<DialogBoxActionUserProps>`
+export const Footer = styled('div')<DialogBoxFooterProps>`
     display: flex;
     z-index: 10;
     margin-top: 3rem;
@@ -28,6 +28,6 @@ export const Actions = styled('div')<DialogBoxActionUserProps>`
         }
     }
 `;
-Actions.defaultProps = {
+Footer.defaultProps = {
     alignItems: 'right'
 };

packages/core/src/components/DialogBox/Actions/Actions.test.tsx → packages/core/src/components/DialogBox/Footer/Footer.test.tsx

@@ -1,16 +1,16 @@
 import { render } from '@test-utils';
-import { Actions } from './Actions';
-import { DialogBoxActionUserProps } from './types';
+import { Footer } from './Footer';
+import { DialogBoxFooterProps } from './types';
 
 describe('DialogBox action component', () => {
-    const testData: [DialogBoxActionUserProps['alignItems'], string][] = [
+    const testData: [DialogBoxFooterProps['alignItems'], string][] = [
         ['left', 'flex-start'],
         ['center', 'center'],
         ['right', 'flex-end']
     ];
 
     test.each(testData)('should align actions properly when align-items props is %s', (alignItems, flexValue) => {
-        const { container } = render(<Actions alignItems={alignItems}>Demo Actions</Actions>);
+        const { container } = render(<Footer alignItems={alignItems}>Demo Footer</Footer>);
         expect(container.querySelector('#default-id-actions')).toHaveStyle(`justify-content: ${flexValue}`);
     });
 });

packages/core/src/components/DialogBox/Footer/Footer.tsx

@@ -0,0 +1,14 @@
+import { WithStyle } from '@medly-components/utils';
+import type { FC } from 'react';
+import { memo, useContext } from 'react';
+import { DialogBoxContext } from '../DialogBox.context';
+import * as Styled from './Footer.styled';
+import { DialogBoxFooterProps } from './types';
+
+const Component: FC<DialogBoxFooterProps> = memo(({ children, alignItems }) => {
+    const { id } = useContext(DialogBoxContext);
+
+    return <Styled.Footer {...{ alignItems, id: `${id}-actions` }}>{children}</Styled.Footer>;
+});
+Component.displayName = 'Footer';
+export const Footer: FC<DialogBoxFooterProps> & WithStyle = Object.assign(Component, { Style: Styled.Footer });

packages/core/src/components/DialogBox/Footer/index.ts

@@ -0,0 +1 @@
+export { Footer as default } from './Footer';

packages/core/src/components/DialogBox/Actions/types.ts → packages/core/src/components/DialogBox/Footer/types.ts

@@ -1,4 +1,4 @@
-export type DialogBoxActionUserProps = {
+export type DialogBoxFooterProps = {
     /** Use this to align actions horizontally */
     alignItems?: 'left' | 'center' | 'right';
 };