Merge branch 'dev-section-redesign' into reSkinReferenceDocs

* dev-section-redesign: (87 commits)
  Added note about restriction on `testDirectory`
  fix(dev-utils): Make chai a dev dependency since exported interface depends on it
  Add changelog entries
  fix(subproviders): make web3-provider-engine types a 'dependency' so it's available to users of the library
  fix(sra-spec): make @loopback/openapi-v3-types a 'dependency' so it's available to users of the library
  fix(sol-cov): make @types/solidity-parser-antlr a 'dependency' so it's available to users of the library
  fix(dev-utils): make web3-provider-engine types a 'dependency' so it's available to users of the library
  fix(0x.js): make web3-provider-engine types a 'dependency' so it's available to users of the library
  fix(monorepo-scripts): Move the creation of the `.installation-test` directory OUTSIDE of the monorepo root, so that the installed packages can't reference the hoisted node_modules folder
  Remove ContractNotFound errors in contract-wrappers
  Update prettierignore
  Update website to use the new unsubscribeAll method in contract-wrappers
  In abi-gen-wrappers, ./wrappers -> ./src/generated-wrappers
  In contract-wrappers, remove setProvider and add unsubscribeAll method.
  take out explicit children definition in props
  Update json-schemas for contract-wrappers
  Add OrThrow suffix to getContractAddressesForNetwork
  remove unused import
  Update CHANGELOG.json for all changed packages
  Remove ContractAddresses from packages/types (mistake after rebase)
  ...

4 files changed, 148 insertions, 6 deletions

diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
new file mode 100644
index 000000000..9c18e0933
--- /dev/null
+++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
@@ -0,0 +1,96 @@
+import * as React from 'react';
+
+import { keyframes, styled } from '../../style/theme';
+
+const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes`
+    from {
+        position: relative;
+        top: ${fromY};
+    }
+
+    to {
+        position: relative;
+        top: ${toY};
+    }
+`;
+
+export interface SlideAnimationProps {
+    keyframes: string;
+    animationType: string;
+    animationDirection?: string;
+}
+
+export const SlideAnimation =
+    styled.div <
+    SlideAnimationProps >
+    `
+    animation-name: ${props => props.keyframes};
+    animation-duration: 0.3s;
+    animation-timing-function: ${props => props.animationType};
+    animation-delay: 0s;
+    animation-iteration-count: 1;
+    animation-fill-mode: ${props => props.animationDirection || 'none'};
+    position: relative;
+`;
+
+export interface SlideAnimationComponentProps {
+    downY: string;
+}
+
+export const SlideUpAnimationComponent: React.StatelessComponent<SlideAnimationComponentProps> = props => (
+    <SlideAnimation animationType="ease-in" keyframes={slideKeyframeGenerator(props.downY, '0px')}>
+        {props.children}
+    </SlideAnimation>
+);
+
+export const SlideDownAnimationComponent: React.StatelessComponent<SlideAnimationComponentProps> = props => (
+    <SlideAnimation
+        animationDirection="forwards"
+        animationType="cubic-bezier(0.25, 0.1, 0.25, 1)"
+        keyframes={slideKeyframeGenerator('0px', props.downY)}
+    >
+        {props.children}
+    </SlideAnimation>
+);
+
+export interface SlideUpAndDownAnimationProps extends SlideAnimationComponentProps {
+    delayMs: number;
+}
+
+enum SlideState {
+    Up = 'up',
+    Down = 'down',
+}
+interface SlideUpAndDownState {
+    slideState: SlideState;
+}
+
+export class SlideUpAndDownAnimation extends React.Component<SlideUpAndDownAnimationProps, SlideUpAndDownState> {
+    public state = {
+        slideState: SlideState.Up,
+    };
+
+    private _timeoutId?: number;
+    public render(): React.ReactNode {
+        return this._renderSlide();
+    }
+    public componentDidMount(): void {
+        this._timeoutId = window.setTimeout(() => {
+            this.setState({
+                slideState: SlideState.Down,
+            });
+        }, this.props.delayMs);
+
+        return;
+    }
+    public componentWillUnmount(): void {
+        if (this._timeoutId) {
+            window.clearTimeout(this._timeoutId);
+        }
+    }
+    private _renderSlide(): React.ReactNode {
+        const SlideComponent = this.state.slideState === 'up' ? SlideUpAnimationComponent : SlideDownAnimationComponent;
+
+        return <SlideComponent downY={this.props.downY}>{this.props.children}</SlideComponent>;
+    }
+}
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
new file mode 100644
index 000000000..0237fb7e9
--- /dev/null
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { SlideUpAndDownAnimation } from './animations/slide_up_and_down_animation';
+
+import { Container, Text } from './ui';
+
+export interface ErrorProps {
+    icon: string;
+    message: string;
+}
+
+export const Error: React.StatelessComponent<ErrorProps> = props => (
+    <Container
+        padding="10px"
+        border={`1px solid ${ColorOption.darkOrange}`}
+        backgroundColor={ColorOption.lightOrange}
+        width="100%"
+        borderRadius="6px"
+        marginBottom="10px"
+    >
+        <Container marginRight="5px" display="inline">
+            {props.icon}
+        </Container>
+        <Text fontWeight="500" fontColor={ColorOption.darkOrange}>
+            {props.message}
+        </Text>
+    </Container>
+);
+
+export const SlidingError: React.StatelessComponent<ErrorProps> = props => (
+    <SlideUpAndDownAnimation downY="120px" delayMs={5000}>
+        <Error icon={props.icon} message={props.message} />
+    </SlideUpAndDownAnimation>
+);
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index c45f6e5e9..02b16e39f 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -26,6 +26,7 @@ export interface ContainerProps {
     className?: string;
     backgroundColor?: ColorOption;
     hasBoxShadow?: boolean;
+    zIndex?: number;
 }
 
 const PlainContainer: React.StatelessComponent<ContainerProps> = ({ children, className }) => (
@@ -52,6 +53,7 @@ export const Container = styled(PlainContainer)`
     ${props => cssRuleIfExists(props, 'border')}
     ${props => cssRuleIfExists(props, 'border-top')}
     ${props => cssRuleIfExists(props, 'border-bottom')}
+    ${props => cssRuleIfExists(props, 'z-index')}
     ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
     border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 716227b51..a384c5f1b 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -10,11 +10,19 @@ import { Container, Flex } from './ui';
 export interface ZeroExInstantContainerProps {}
 
 export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
-    <Container hasBoxShadow={true} width="350px" backgroundColor={ColorOption.white} borderRadius="3px">
-        <Flex direction="column" justify="flex-start">
-            <InstantHeading />
-            <OrderDetails />
-            <BuyButton />
-        </Flex>
+    <Container width="350px">
+        <Container
+            zIndex={2}
+            position="relative"
+            backgroundColor={ColorOption.white}
+            borderRadius="3px"
+            hasBoxShadow={true}
+        >
+            <Flex direction="column" justify="flex-start">
+                <InstantHeading />
+                <OrderDetails />
+                <BuyButton />
+            </Flex>
+        </Container>
     </Container>
 );