Fixes liferay#1829 - SF

diegonvs · May 27, 2019 · a7174eb · a7174eb
1 parent 6cd5573
commit a7174eb
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
+					}
 				/>
 			</>
 		)}