theme and animations

src/widget.js

@@ -1,35 +1,69 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import './widget.scss'
+import { Transition } from 'react-transition-group';
+import './widget.scss';
 
 class Widget extends React.Component {
   state = {
     opened: false,
+    showDock: true,
   }
 
-  handleOpen = () => {
+  handleToggleOpen = () => {
+    this.setState((prev) => {
+      let showDock = prev.showDock;
+      if (!prev.opened) {
+        showDock = false;
+      }
+      return {
+        showDock,
+        opened: !prev.opened,
+      };
+    });
+  }
+
+  handleWidgetExit = () => {
+    this.setState({
+      showDock: true,
+    });
+  }
+
+  renderBody = () => {
+    if (this.state.showDock) {
+      return (
+        <a className="dock" onClick={this.handleToggleOpen}>
+          ^ OPEN ^
+        </a>
+      );
+    }
+    return "";
   }
 
   render() {
-    let body = "";
-    if (this.state.opened) {
-      body = (
-        <div className="widget-dialog">
-          <div className="widget-title">
-            Open
-          </div>
-          <div className="widget-body">
-            Body
-          </div>
-          <div className="widget-footer">
-            Footer
-          </div>
-        </div>
-      );
-    }
+    let body = this.renderBody();
+
     return (
-      <div className="widget">
-        Open
+      <div className="docked-widget">
+        <Transition in={this.state.opened} timeout={250} onExited={this.handleWidgetExit}>
+          {(status) => (
+            <div className={`widget widget-${status}`}>
+              <div className="widget-header">
+                <div className="widget-header-title">
+                  Header
+                </div>
+                <a className="widget-header-icon" onClick={this.handleToggleOpen}>
+                  X
+                </a>
+              </div>
+              <div className="widget-body">
+                Body
+              </div>
+              <div className="widget-footer">
+                Footer
+              </div>
+            </div>
+          )}
+        </Transition>
         {body}
       </div>
     );

src/widget.scss

@@ -1,17 +1,94 @@
-.widget {
+@keyframes slideInUp {
+  from {
+    transform: translate3d(0, 100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideOutDown {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+.docked-widget {
   position: fixed;
-  bottom: 10px;
+  bottom: 0px;
   right: 10px;
-
-  width: 50px;
-  height: 20px;
-  text-align: center;
-  border: 1px solid;
-  padding: 10px;
+  width: 200px;
 }
 
-.widget:hover {
-  background-color: blue;
-  color: white;
+.dock {
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  width: 180px;
+  border: 1px solid grey;
+}
+
+
+.widget {
+  width: 200px;
+  border: 1px solid grey;
+  border-bottom: none;
+  animation-duration: 0.2s;
+  animation-fill-mode: forwards;
+
+  &-entering {
+    animation-name: slideInUp;
+  }
+  &-entered {
+    visibility: visible;
+  }
+  &-exiting {
+    animation-name: slideOutDown;
+  }
+  &-exited {
+    visibility: hidden;
+  }
+
+  &-header {
+    height: 30px;
+    line-height: 30px;
+    background: lightgrey;
+    color: grey;
+    padding-left: 10px;
+
+    display: flex;
+    align-items: stretch;
+
+    &-title {
+      display: flex;
+      flex-grow: 1;
+    }
+
+    &-icon {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: .75rem;
+    }
+  }
+  &-body {
+    background: white;
+    padding: 10px;
+    height: 150px;
+  }
+  &-footer {
+    background: green;
+    line-height: 30px;
+    padding-left: 10px;
+  }
 }