From 6b1a1414afb8068190b5a3301394186ed3220aeb Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Mon, 26 Nov 2018 23:52:47 -0300
Subject: [PATCH] feature: add docz usage example

---
 app/components/sidebar/index.js    | 23 ++++++++++++++++-------
 app/components/sidebar/sidebar.mdx | 16 ++++++++++++++++
 2 files changed, 32 insertions(+), 7 deletions(-)
 create mode 100644 app/components/sidebar/sidebar.mdx

diff --git a/app/components/sidebar/index.js b/app/components/sidebar/index.js
index c658b1c..12985aa 100644
--- a/app/components/sidebar/index.js
+++ b/app/components/sidebar/index.js
@@ -8,17 +8,26 @@ import { styles } from './styles';
 
 // TODO: Not sure this is the best approach to styling
 // in a StyledComponents-powered application
-const Wrapper = styled.div`${styles.wrapper}`;
+const Wrapper = styled.div`
+  ${styles.wrapper}
+`;
 
-export const SidebarComponent = () => (
+type MenuItem = { route: string, label: string };
+
+type Props = {
+  options?: MenuItem[],
+};
+
+export const SidebarComponent = ({ options }: Props) => (
   <Wrapper>
-    {MENU_OPTIONS.map(item => (
-      <Link
-        key={item.route}
-        to={item.route}
-      >
+    {(options || []).map(item => (
+      <Link key={item.route} to={item.route}>
         {item.label}
       </Link>
     ))}
   </Wrapper>
 );
+
+SidebarComponent.defaultProps = {
+  options: MENU_OPTIONS,
+};
diff --git a/app/components/sidebar/sidebar.mdx b/app/components/sidebar/sidebar.mdx
new file mode 100644
index 0000000..af7f216
--- /dev/null
+++ b/app/components/sidebar/sidebar.mdx
@@ -0,0 +1,16 @@
+---
+name: Sidebar
+---
+
+import { Playground, PropsTable } from 'docz'
+import { SidebarComponent } from './index.js'
+
+# Sidebar
+
+<PropsTable of={SidebarComponent} />
+
+## Basic usage
+
+<Playground>
+  <SidebarComponent />
+</Playground>