From a7174ebe383442915fbe032abebfd98955d8a3c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= <matuzalemteles@gmail.com>
Date: Mon, 29 Apr 2019 17:57:50 -0300
Subject: [PATCH] Fixes #1829 - SF

---
 packages/clay-modal/src/Footer.tsx          |  2 +-
 packages/clay-modal/src/__tests__/index.tsx | 44 ++++++---------------
 packages/clay-modal/src/index.tsx           | 10 +++--
 packages/clay-modal/stories/index.tsx       | 12 +++---
 4 files changed, 27 insertions(+), 41 deletions(-)

diff --git a/packages/clay-modal/src/Footer.tsx b/packages/clay-modal/src/Footer.tsx
index 860472a48a..64f9222374 100644
--- a/packages/clay-modal/src/Footer.tsx
+++ b/packages/clay-modal/src/Footer.tsx
@@ -12,7 +12,7 @@ export interface FooterProps {
 	middle?: React.ReactElement;
 }
 
-const Footer: FunctionComponent<FooterProps> = ({first, middle, last}) => (
+const Footer: FunctionComponent<FooterProps> = ({first, last, middle}) => (
 	<div className="modal-footer">
 		<div className="modal-item-first">{first && first}</div>
 		<div className="modal-item">{middle && middle}</div>
diff --git a/packages/clay-modal/src/__tests__/index.tsx b/packages/clay-modal/src/__tests__/index.tsx
index 4abbce54a1..6432b906c8 100644
--- a/packages/clay-modal/src/__tests__/index.tsx
+++ b/packages/clay-modal/src/__tests__/index.tsx
@@ -26,18 +26,17 @@ describe('ClayModal', () => {
 
 	it('renders', () => {
 		const testRenderer = TestRenderer.create(
-			<ClayModal
-				onClose={() => {}}
-				spritemap={spritemap}
-			>
+			<ClayModal onClose={() => {}} spritemap={spritemap}>
 				{onClose => (
 					<>
-						<ClayModal.Header>Foo</ClayModal.Header>
+						<ClayModal.Header>{'Foo'}</ClayModal.Header>
 						<ClayModal.Body>
-							<h1>Hello world!</h1>
+							<h1>{'Hello world!'}</h1>
 						</ClayModal.Body>
 						<ClayModal.Footer
-							last={<Button onClick={onClose}>Primary</Button>}
+							last={
+								<Button onClick={onClose}>{'Primary'}</Button>
+							}
 						/>
 					</>
 				)}
@@ -49,13 +48,8 @@ describe('ClayModal', () => {
 
 	it('renders with Header', () => {
 		const testRenderer = TestRenderer.create(
-			<ClayModal
-				onClose={() => {}}
-				spritemap={spritemap}
-			>
-				{() => (
-					<ClayModal.Header>Foo</ClayModal.Header>
-				)}
+			<ClayModal onClose={() => {}} spritemap={spritemap}>
+				{() => <ClayModal.Header>{'Foo'}</ClayModal.Header>}
 			</ClayModal>
 		);
 
@@ -64,11 +58,7 @@ describe('ClayModal', () => {
 
 	it('renders with size', () => {
 		const testRenderer = TestRenderer.create(
-			<ClayModal
-				onClose={() => {}}
-				size="lg"
-				spritemap={spritemap}
-			/>
+			<ClayModal onClose={() => {}} size="lg" spritemap={spritemap} />
 		);
 
 		expect(testRenderer.toJSON()).toMatchSnapshot();
@@ -88,13 +78,8 @@ describe('ClayModal', () => {
 
 	it('renders a body component with url', () => {
 		const testRenderer = TestRenderer.create(
-			<ClayModal
-				onClose={() => {}}
-				spritemap={spritemap}
-			>
-				{() => (
-					<ClayModal.Body url="http://localhost" />
-				)}
+			<ClayModal onClose={() => {}} spritemap={spritemap}>
+				{() => <ClayModal.Body url="http://localhost" />}
 			</ClayModal>
 		);
 
@@ -103,15 +88,12 @@ describe('ClayModal', () => {
 
 	it('renders a footer component with buttons', () => {
 		const testRenderer = TestRenderer.create(
-			<ClayModal
-				onClose={() => {}}
-				spritemap={spritemap}
-			>
+			<ClayModal onClose={() => {}} spritemap={spritemap}>
 				{onClose => (
 					<ClayModal.Footer
 						first={<Button>{'Bar'}</Button>}
-						middle={<Button>{'Baz'}</Button>}
 						last={<Button onClick={onClose}>{'Foo'}</Button>}
+						middle={<Button>{'Baz'}</Button>}
 					/>
 				)}
 			</ClayModal>
diff --git a/packages/clay-modal/src/index.tsx b/packages/clay-modal/src/index.tsx
index 86074b2ae9..f6931eaa38 100644
--- a/packages/clay-modal/src/index.tsx
+++ b/packages/clay-modal/src/index.tsx
@@ -4,15 +4,15 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import {createPortal} from 'react-dom';
-import {Size} from './types';
-import {useUserInteractions} from './Hook';
 import Body, {BodyProps} from './Body';
 import classNames from 'classnames';
 import Context, {IContext} from './Context';
 import Footer, {FooterProps} from './Footer';
 import Header, {HeaderProps} from './Header';
 import React, {FunctionComponent, useEffect, useRef, useState} from 'react';
+import {createPortal} from 'react-dom';
+import {Size} from './types';
+import {useUserInteractions} from './Hook';
 
 interface Props extends React.HTMLAttributes<HTMLDivElement>, IContext {
 	children?: (onClose: () => void) => React.ReactNode;
@@ -115,7 +115,9 @@ const ClayModal: FunctionComponent<Props> & {
 				>
 					<div className="modal-content">
 						<Context.Provider value={context}>
-							{children && typeof children === 'function' ? children(handleCloseModal) : children}
+							{children && typeof children === 'function'
+								? children(handleCloseModal)
+								: children}
 						</Context.Provider>
 					</div>
 				</div>
diff --git a/packages/clay-modal/stories/index.tsx b/packages/clay-modal/stories/index.tsx
index e07f08df03..73437cb3d9 100644
--- a/packages/clay-modal/stories/index.tsx
+++ b/packages/clay-modal/stories/index.tsx
@@ -48,16 +48,16 @@ const ModalWithState: React.FunctionComponent<Props> = ({
 };
 
 const size = {
-	none: null,
+	'full-screen': 'full-screen',
 	lg: 'lg',
+	none: null,
 	sm: 'sm',
-	'full-screen': 'full-screen',
 };
 
 const status = {
-	none: null,
 	danger: 'danger',
 	info: 'info',
+	none: null,
 	success: 'success',
 	warning: 'warning',
 };
@@ -71,7 +71,7 @@ storiesOf('ClayModal', module).add('default', () => (
 			<>
 				<ClayModal.Header>{text('Title', 'Title')}</ClayModal.Header>
 				<ClayModal.Body url={text('Url', null)}>
-					<h1>Hello world!</h1>
+					<h1>{'Hello world!'}</h1>
 				</ClayModal.Body>
 				<ClayModal.Footer
 					first={
@@ -84,7 +84,9 @@ storiesOf('ClayModal', module).add('default', () => (
 							</ClayButton>
 						</ClayButton.Group>
 					}
-					last={<ClayButton onClick={onClose}>Primary</ClayButton>}
+					last={
+						<ClayButton onClick={onClose}>{'Primary'}</ClayButton>
+					}
 				/>
 			</>
 		)}