chore: address PR feedback

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',
+};

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}

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;

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,

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">

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%">

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 {}
 

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} />

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>
     );

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';

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 />

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 {

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 {