[REVIEW] Add side panel component

src/Atoms/SidePanel/README.md

@@ -0,0 +1 @@
+## SidePanel

src/Atoms/SidePanel/SidePanel.jsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components'
+
+const SidePanel = styled.div`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 300px;
+  transition: all 0.1s ease;
+  right: ${({ show }) => show ? '0' : '-300px'};
+  background-color: #f5f5f5;
+`
+
+SidePanel.defaultProps = {
+  show: false,
+}
+
+export default SidePanel

src/Atoms/SidePanel/SidePanel.stories.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import { boolean } from '@storybook/addon-knobs'
+
+import SidePanel from './index'
+
+import markdown from './README.md'
+
+export default {
+  title: 'Atoms/SidePanel',
+}
+
+export const sidePanel = () => (
+  <SidePanel show={boolean('Show', true)}>
+    Hello, I am a side panel
+  </SidePanel>
+)
+sidePanel.story = {
+  parameters: {
+    notes: { markdown },
+    jest:  [],
+  },
+}

src/Atoms/SidePanel/index.js

@@ -0,0 +1,3 @@
+import SidePanel from './SidePanel'
+
+export default SidePanel

src/Atoms/index.js

@@ -7,3 +7,4 @@ export { default as Typo } from './Typo'
 export { default as Banner } from './Banner'
 export { default as Tooltip } from './Tooltip'
 export { default as Byte } from './Byte'
+export { default as SidePanel } from './SidePanel'

src/index.js

@@ -8,3 +8,4 @@ export { Typo } from './Atoms'
 export { Banner } from './Atoms'
 export { Tooltip } from './Atoms'
 export { Byte } from './Atoms'
+export { SidePanel } from './Atoms'