refactor: rename Modal.Actions and DialogBox.Actions to Modal.Footer …

…and DialogBox.Footer respective

affects: @medly-components/core

BREAKING CHANGE:
rename Modal.Actions and DialogBox.Actions to Modal.Footer and DialogBox.Footer respectively

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

@@ -2,15 +2,15 @@ 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 { 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'
 };
@@ -29,12 +29,12 @@ export const Basic = () => {
                     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

@@ -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>
     );
 
@@ -62,9 +62,9 @@ describe('DialogBox component', () => {
             <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();

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

@@ -2,10 +2,10 @@ import { useCombinedRefs, useKeyPress, WithStyle } from '@medly-components/utils
 import type { FC } from 'react';
 import { forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
 import CloseIcon from '../Modal/CloseIcon';
-import Actions from './Actions';
 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';
@@ -78,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';
 };

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

@@ -1,33 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DialogBox component should render properly when it is open 1`] = `
-.c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  z-index: 10;
-  margin-top: 3rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c4 > * {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c4 > * + * {
-  margin: 1.6rem 0 0;
-}
-
 .c3 {
   -webkit-flex: 1;
   -ms-flex: 1;
@@ -60,6 +33,33 @@ exports[`DialogBox component should render properly when it is open 1`] = `
   overflow: hidden;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  z-index: 10;
+  margin-top: 3rem;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c4 > * {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c4 > * + * {
+  margin: 1.6rem 0 0;
+}
+
 .c2 {
   background-color: #ffffff;
   color: #13181D;
@@ -153,7 +153,7 @@ exports[`DialogBox component should render properly when it is open 1`] = `
         class="c4"
         id="medly-dialog-box-actions"
       >
-        Demo Actions
+        Demo Footer
       </div>
     </div>
   </div>
@@ -220,33 +220,6 @@ exports[`DialogBox component should render properly with close icon when it is o
   fill: #435465;
 }
 
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  z-index: 10;
-  margin-top: 3rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c6 > * {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c6 > * + * {
-  margin: 1.6rem 0 0;
-}
-
 .c5 {
   -webkit-flex: 1;
   -ms-flex: 1;
@@ -279,6 +252,33 @@ exports[`DialogBox component should render properly with close icon when it is o
   overflow: hidden;
 }
 
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  z-index: 10;
+  margin-top: 3rem;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c6 > * {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c6 > * + * {
+  margin: 1.6rem 0 0;
+}
+
 .c4 {
   background-color: #ffffff;
   color: #13181D;
@@ -389,7 +389,7 @@ exports[`DialogBox component should render properly with close icon when it is o
         class="c6"
         id="medly-dialog-box-actions"
       >
-        Demo Actions
+        Demo Footer
       </div>
     </div>
   </div>

packages/core/src/components/DialogBox/types.ts

@@ -1,6 +1,6 @@
 import { HTMLProps, WithStyle } from '@medly-components/utils';
 import type { FC } from 'react';
-import { DialogBoxActionUserProps } from './Actions/types';
+import { DialogBoxFooterProps } from './Footer/types';
 import { DialogBoxPopupProps } from './Popup/types';
 
 export interface DialogBoxProps extends HTMLProps<HTMLDivElement> {
@@ -26,7 +26,7 @@ export interface DialogBoxStaticProps {
     Popup: FC<DialogBoxPopupProps> & WithStyle;
     Header: FC & WithStyle;
     Content: FC & WithStyle;
-    Actions: FC<DialogBoxActionUserProps> & WithStyle;
+    Footer: FC<DialogBoxFooterProps> & WithStyle;
 }
 export interface DialogBoxContextType {
     id: string;

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

@@ -3,7 +3,7 @@ import { rgba } from 'polished';
 import styled from 'styled-components';
 import { StyledProps } from './types';
 
-export const Actions = styled('div')<StyledProps>`
+export const Footer = styled('div')<StyledProps>`
     display: flex;
     z-index: 10;
     padding: ${({ theme }) => `${theme.spacing.S4} ${theme.spacing.M2} ${theme.spacing.M2}`};
@@ -26,6 +26,6 @@ export const Actions = styled('div')<StyledProps>`
         }
     `}
 `;
-Actions.defaultProps = {
+Footer.defaultProps = {
     alignItems: 'right'
 };