From 970e94c69642d1a10274460189aa9f605e6598a2 Mon Sep 17 00:00:00 2001
From: Maxime Bertrand <maxi.bertrand@gmail.com>
Date: Wed, 20 Nov 2019 14:07:03 +0100
Subject: [PATCH 1/2] feature: add side panel component

---
 src/Atoms/SidePanel/README.md             |  1 +
 src/Atoms/SidePanel/SidePanel.jsx         | 18 ++++++++++++++++++
 src/Atoms/SidePanel/SidePanel.stories.jsx | 23 +++++++++++++++++++++++
 src/Atoms/SidePanel/index.js              |  3 +++
 src/Atoms/index.js                        |  1 +
 src/index.js                              |  1 +
 6 files changed, 47 insertions(+)
 create mode 100644 src/Atoms/SidePanel/README.md
 create mode 100644 src/Atoms/SidePanel/SidePanel.jsx
 create mode 100644 src/Atoms/SidePanel/SidePanel.stories.jsx
 create mode 100644 src/Atoms/SidePanel/index.js

diff --git a/src/Atoms/SidePanel/README.md b/src/Atoms/SidePanel/README.md
new file mode 100644
index 0000000..67da694
--- /dev/null
+++ b/src/Atoms/SidePanel/README.md
@@ -0,0 +1 @@
+## SidePanel
diff --git a/src/Atoms/SidePanel/SidePanel.jsx b/src/Atoms/SidePanel/SidePanel.jsx
new file mode 100644
index 0000000..3617dd0
--- /dev/null
+++ b/src/Atoms/SidePanel/SidePanel.jsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const Container = styled.div`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 300px;
+  transition: all 0.1s ease;
+  right: ${({ show }) => show ? '0' : '-300px'};
+  background-color: #f5f5f5;
+`
+
+const SidePanel = ({ show = false, ...props }) => (
+  <Container show={show} {...props}/>
+)
+
+export default SidePanel
diff --git a/src/Atoms/SidePanel/SidePanel.stories.jsx b/src/Atoms/SidePanel/SidePanel.stories.jsx
new file mode 100644
index 0000000..5dc4101
--- /dev/null
+++ b/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:  [],
+  },
+}
diff --git a/src/Atoms/SidePanel/index.js b/src/Atoms/SidePanel/index.js
new file mode 100644
index 0000000..ba0c0fe
--- /dev/null
+++ b/src/Atoms/SidePanel/index.js
@@ -0,0 +1,3 @@
+import SidePanel from './SidePanel'
+
+export default SidePanel
diff --git a/src/Atoms/index.js b/src/Atoms/index.js
index feb9bde..67b5e4b 100644
--- a/src/Atoms/index.js
+++ b/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'
diff --git a/src/index.js b/src/index.js
index 0030d36..5e035e2 100644
--- a/src/index.js
+++ b/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'

From a251d5557def8c09c9b64962b66d23f4d8999c2d Mon Sep 17 00:00:00 2001
From: Maxime Bertrand <maxi.bertrand@gmail.com>
Date: Mon, 25 Nov 2019 13:28:24 +0100
Subject: [PATCH 2/2] fix: transform SidePanel component to a simple styled div

---
 src/Atoms/SidePanel/SidePanel.jsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/Atoms/SidePanel/SidePanel.jsx b/src/Atoms/SidePanel/SidePanel.jsx
index 3617dd0..4dfd2c9 100644
--- a/src/Atoms/SidePanel/SidePanel.jsx
+++ b/src/Atoms/SidePanel/SidePanel.jsx
@@ -1,7 +1,6 @@
-import React from 'react'
 import styled from 'styled-components'
 
-const Container = styled.div`
+const SidePanel = styled.div`
   position: fixed;
   top: 0;
   bottom: 0;
@@ -11,8 +10,8 @@ const Container = styled.div`
   background-color: #f5f5f5;
 `
 
-const SidePanel = ({ show = false, ...props }) => (
-  <Container show={show} {...props}/>
-)
+SidePanel.defaultProps = {
+  show: false,
+}
 
 export default SidePanel