feat: implement sliding panel

2 files changed, 11 insertions, 10 deletions

diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx
index 3d6b5f8dc..aefd7ef30 100644
--- a/packages/instant/src/components/animations/position_animation.tsx
+++ b/packages/instant/src/components/animations/position_animation.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Keyframes } from 'styled-components';
 
 import { css, keyframes, styled } from '../../style/theme';
@@ -51,7 +50,7 @@ export interface PositionAnimationSettings {
     left?: TransitionInfo;
     right?: TransitionInfo;
     timingFunction: string;
-    direction?: string;
+    duration?: string;
 }
 
 export interface PositionAnimationProps extends PositionAnimationSettings {
@@ -66,10 +65,12 @@ export const PositionAnimation =
         css`
             ${slideKeyframeGenerator(props.position, props.top, props.bottom, props.left, props.right)};
         `};
-    animation-duration: 0.3s;
+    animation-duration: ${props => props.duration || '0.3s'};
     animation-timing-function: ${props => props.timingFunction};
     animation-delay: 0s;
     animation-iteration-count: 1;
-    animation-fill-mode: ${props => props.direction || 'none'};
+    animation-fill-mode: forwards;
     position: ${props => props.position};
+    height: 100%;
+    width: 100%;
 `;
diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animation.tsx
index 9f1535297..4124e50c3 100644
--- a/packages/instant/src/components/animations/slide_animations.tsx
+++ b/packages/instant/src/components/animations/slide_animation.tsx
@@ -1,20 +1,20 @@
 import * as React from 'react';
-import { Keyframes } from 'styled-components';
-
-import { css, keyframes, styled } from '../../style/theme';
 
 import { PositionAnimation, PositionAnimationSettings } from './position_animation';
 
-export type SlideAnimationPhase = 'slideIn' | 'slideOut';
+export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none';
 export interface SlideAnimationProps {
     position: string;
-    phase: SlideAnimationPhase;
+    animationState: SlideAnimationState;
     slideIn: PositionAnimationSettings;
     slideOut: PositionAnimationSettings;
 }
 
 export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
-    const propsToUse = props.phase === 'slideIn' ? props.slideIn : props.slideOut;
+    if (props.animationState === 'none') {
+        return <React.Fragment>{props.children}</React.Fragment>;
+    }
+    const propsToUse = props.animationState === 'slidIn' ? props.slideIn : props.slideOut;
     return (
         <PositionAnimation position={props.position} {...propsToUse}>
             {props.children}