chore: address PR feedback

13 files changed, 45 insertions, 43 deletions

diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx
index aefd7ef30..4bb21befb 100644
--- a/packages/instant/src/components/animations/position_animation.tsx
+++ b/packages/instant/src/components/animations/position_animation.tsx
@@ -2,6 +2,11 @@ import { Keyframes } from 'styled-components';
 
 import { css, keyframes, styled } from '../../style/theme';
 
+export interface TransitionInfo {
+    from: string;
+    to: string;
+}
+
 const generateTransitionInfoCss = (
     key: keyof TransitionInfo,
     top?: TransitionInfo,
@@ -39,11 +44,6 @@ const slideKeyframeGenerator = (
     }
 `;
 
-export interface TransitionInfo {
-    from: string;
-    to: string;
-}
-
 export interface PositionAnimationSettings {
     top?: TransitionInfo;
     bottom?: TransitionInfo;
@@ -74,3 +74,7 @@ export const PositionAnimation =
     height: 100%;
     width: 100%;
 `;
+
+PositionAnimation.defaultProps = {
+    position: 'relative',
+};
diff --git a/packages/instant/src/components/animations/slide_animation.tsx b/packages/instant/src/components/animations/slide_animation.tsx
index 4124e50c3..66a314c7f 100644
--- a/packages/instant/src/components/animations/slide_animation.tsx
+++ b/packages/instant/src/components/animations/slide_animation.tsx
@@ -6,15 +6,15 @@ export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none';
 export interface SlideAnimationProps {
     position: string;
     animationState: SlideAnimationState;
-    slideIn: PositionAnimationSettings;
-    slideOut: PositionAnimationSettings;
+    slideInSettings: PositionAnimationSettings;
+    slideOutSettings: PositionAnimationSettings;
 }
 
 export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
     if (props.animationState === 'none') {
         return <React.Fragment>{props.children}</React.Fragment>;
     }
-    const propsToUse = props.animationState === 'slidIn' ? props.slideIn : props.slideOut;
+    const propsToUse = props.animationState === 'slidIn' ? props.slideInSettings : props.slideOutSettings;
     return (
         <PositionAnimation position={props.position} {...propsToUse}>
             {props.children}
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index d01e9ff57..51e06a284 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -1,16 +1,13 @@
 import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
 import * as React from 'react';
 
-import { BuyButton } from '../components/buy_button';
-import { SecondaryButton } from '../components/secondary_button';
-import { Flex } from '../components/ui/flex';
-
-import { PlacingOrderButton } from '../components/placing_order_button';
 import { ColorOption } from '../style/theme';
 import { OrderProcessState, ZeroExInstantError } from '../types';
 
-import { Button } from './ui/button';
-import { Text } from './ui/text';
+import { BuyButton } from './buy_button';
+import { PlacingOrderButton } from './placing_order_button';
+import { SecondaryButton } from './secondary_button';
+import { Button, Flex, Text } from './ui';
 
 export interface BuyOrderStateButtonProps {
     buyQuote?: BuyQuote;
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index bed1b3b4e..b1fec6405 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -15,7 +15,7 @@ export interface ERC20AssetAmountInputProps {
     asset?: ERC20Asset;
     value?: BigNumberInput;
     onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
-    onSymbolClick?: (asset?: ERC20Asset) => void;
+    onSelectAssetClick?: (asset?: ERC20Asset) => void;
     startingFontSizePx: number;
     fontColor?: ColorOption;
     isDisabled: boolean;
@@ -40,7 +40,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
         const { asset } = this.props;
         return (
             <Container whiteSpace="nowrap">
-                {!_.isUndefined(asset) ? this._renderContentForAsset(asset) : this._renderBackupContent()}
+                {_.isUndefined(asset) ? this._renderBackupContent() : this._renderContentForAsset(asset)}
             </Container>
         );
     }
@@ -111,8 +111,8 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
         });
     };
     private readonly _handleSymbolClick = () => {
-        if (this.props.onSymbolClick) {
-            this.props.onSymbolClick(this.props.asset);
+        if (this.props.onSelectAssetClick) {
+            this.props.onSelectAssetClick(this.props.asset);
         }
     };
     // For assets with symbols of different length,
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 08efd1b64..19c08db70 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -16,7 +16,7 @@ export interface InstantHeadingProps {
     ethUsdPrice?: BigNumber;
     quoteRequestState: AsyncProcessState;
     buyOrderState: OrderState;
-    onSymbolClick?: (asset?: ERC20Asset) => void;
+    onSelectAssetClick?: (asset?: ERC20Asset) => void;
 }
 
 const PLACEHOLDER_COLOR = ColorOption.white;
@@ -50,7 +50,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
                     <Flex height="60px">
                         <SelectedERC20AssetAmountInput
                             startingFontSizePx={38}
-                            onSymbolClick={this.props.onSymbolClick}
+                            onSelectAssetClick={this.props.onSelectAssetClick}
                         />
                     </Flex>
                     <Flex direction="column" justify="space-between">
diff --git a/packages/instant/src/components/placing_order_button.tsx b/packages/instant/src/components/placing_order_button.tsx
index 4232e6c22..e5a6371e6 100644
--- a/packages/instant/src/components/placing_order_button.tsx
+++ b/packages/instant/src/components/placing_order_button.tsx
@@ -2,10 +2,7 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 
-import { Button } from './ui/button';
-import { Container } from './ui/container';
-import { Spinner } from './ui/spinner';
-import { Text } from './ui/text';
+import { Button, Container, Spinner, Text } from './ui';
 
 export const PlacingOrderButton: React.StatelessComponent<{}> = props => (
     <Button isDisabled={true} width="100%">
diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx
index 583058b5b..ca698c77a 100644
--- a/packages/instant/src/components/secondary_button.tsx
+++ b/packages/instant/src/components/secondary_button.tsx
@@ -3,8 +3,7 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 
-import { Button, ButtonProps } from './ui/button';
-import { Text } from './ui/text';
+import { Button, ButtonProps, Text } from './ui';
 
 export interface SecondaryButtonProps extends ButtonProps {}
 
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index a89e201c0..17643fd7d 100644
--- a/packages/instant/src/components/sliding_error.tsx
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -37,14 +37,14 @@ export interface SlidingErrorProps extends ErrorProps {
 }
 export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props => {
     const slideAmount = '120px';
-    const slideUp: PositionAnimationSettings = {
+    const slideUpSettings: PositionAnimationSettings = {
         timingFunction: 'ease-in',
         top: {
             from: slideAmount,
             to: '0px',
         },
     };
-    const slideDown: PositionAnimationSettings = {
+    const slideDownSettings: PositionAnimationSettings = {
         timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
         top: {
             from: '0px',
@@ -54,8 +54,8 @@ export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props =
     return (
         <SlideAnimation
             position="relative"
-            slideIn={slideUp}
-            slideOut={slideDown}
+            slideInSettings={slideUpSettings}
+            slideOutSettings={slideDownSettings}
             animationState={props.animationState}
         >
             <Error icon={props.icon} message={props.message} />
diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx
index 19034eb95..9219ad1f1 100644
--- a/packages/instant/src/components/sliding_panel.tsx
+++ b/packages/instant/src/components/sliding_panel.tsx
@@ -30,7 +30,7 @@ export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = props =
     }
     const { animationState, ...rest } = props;
     const slideAmount = '100%';
-    const slideUp: PositionAnimationSettings = {
+    const slideUpSettings: PositionAnimationSettings = {
         duration: '0.3s',
         timingFunction: 'ease-in-out',
         top: {
@@ -38,7 +38,7 @@ export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = props =
             to: '0px',
         },
     };
-    const slideDown: PositionAnimationSettings = {
+    const slideDownSettings: PositionAnimationSettings = {
         duration: '0.3s',
         timingFunction: 'ease-out',
         top: {
@@ -47,7 +47,12 @@ export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = props =
         },
     };
     return (
-        <SlideAnimation position="absolute" slideIn={slideUp} slideOut={slideDown} animationState={animationState}>
+        <SlideAnimation
+            position="absolute"
+            slideInSettings={slideUpSettings}
+            slideOutSettings={slideDownSettings}
+            animationState={animationState}
+        >
             <Panel {...rest} />
         </SlideAnimation>
     );
diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts
index 7cfee2491..28f76c262 100644
--- a/packages/instant/src/components/ui/index.ts
+++ b/packages/instant/src/components/ui/index.ts
@@ -1,7 +1,7 @@
 export { Text, Title } from './text';
-export { Button } from './button';
-export { Flex } from './flex';
-export { Container } from './container';
-export { Input } from './input';
-export { Icon } from './icon';
-export { Spinner } from './spinner';
+export { Button, ButtonProps } from './button';
+export { Flex, FlexProps } from './flex';
+export { Container, ContainerProps } from './container';
+export { Input, InputProps } from './input';
+export { Icon, IconProps } from './icon';
+export { Spinner, SpinnerProps } from './spinner';
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 818a9a957..009ad9b2a 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -35,7 +35,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
                     overflow="hidden"
                 >
                     <Flex direction="column" justify="flex-start">
-                        <SelectedAssetInstantHeading onSymbolClick={this._handleSymbolClick} />
+                        <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
                         <LatestBuyQuoteOrderDetails />
                         <Container padding="20px" width="100%">
                             <SelectedAssetBuyOrderStateButtons />
diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts
index e413c7ef1..a407279e6 100644
--- a/packages/instant/src/containers/selected_asset_instant_heading.ts
+++ b/packages/instant/src/containers/selected_asset_instant_heading.ts
@@ -10,7 +10,7 @@ import { AsyncProcessState, ERC20Asset, OrderState } from '../types';
 import { InstantHeading } from '../components/instant_heading';
 
 export interface InstantHeadingProps {
-    onSymbolClick?: (asset?: ERC20Asset) => void;
+    onSelectAssetClick?: (asset?: ERC20Asset) => void;
 }
 
 interface ConnectedState {
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 4df7faab9..217d603d2 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -19,7 +19,7 @@ import { errorFlasher } from '../util/error_flasher';
 export interface SelectedERC20AssetAmountInputProps {
     fontColor?: ColorOption;
     startingFontSizePx: number;
-    onSymbolClick?: (asset?: ERC20Asset) => void;
+    onSelectAssetClick?: (asset?: ERC20Asset) => void;
 }
 
 interface ConnectedState {