From 44a81f7ceac58344df00095d0b3e388b6f4b8229 Mon Sep 17 00:00:00 2001
From: Remi <remi.d45@gmail.com>
Date: Mon, 30 Nov 2020 23:37:13 +0100
Subject: [PATCH 1/2] feat(storybook): add drawer

---
 .../src/components/Drawer/Drawer.stories.tsx  | 165 ++++++++++++++++++
 1 file changed, 165 insertions(+)
 create mode 100644 packages/core/src/components/Drawer/Drawer.stories.tsx

diff --git a/packages/core/src/components/Drawer/Drawer.stories.tsx b/packages/core/src/components/Drawer/Drawer.stories.tsx
new file mode 100644
index 0000000000..9bb60c78a4
--- /dev/null
+++ b/packages/core/src/components/Drawer/Drawer.stories.tsx
@@ -0,0 +1,165 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from 'react';
+import {
+  Drawer,
+  Button,
+  Typography,
+  makeStyles,
+  IconButton,
+} from '@material-ui/core';
+import Close from '@material-ui/icons/Close';
+
+export default {
+  title: 'Layout/Drawer',
+  component: Drawer,
+};
+
+const useDrawerStyles = makeStyles({
+  paper: {
+    width: '50%',
+    justifyContent: 'space-between',
+    padding: '20px',
+  },
+});
+
+const useDrawerContentStyles = makeStyles({
+  header: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  icon: {
+    fontSize: 20,
+  },
+  content: {
+    height: '80%',
+    backgroundColor: '#EEEEEE',
+  },
+  secondaryAction: {
+    marginLeft: '20px',
+  },
+});
+
+/* Example content wrapped inside the Drawer component */
+const DrawerContent = ({
+  toggleDrawer,
+}: {
+  toggleDrawer: (isOpen: boolean) => void;
+}) => {
+  const classes = useDrawerContentStyles();
+
+  return (
+    <>
+      <div className={classes.header}>
+        <Typography variant="h5">Side Panel Title</Typography>
+        <IconButton
+          key="dismiss"
+          title="Close the drawer"
+          onClick={() => toggleDrawer(false)}
+          color="inherit"
+        >
+          <Close className={classes.icon} />
+        </IconButton>
+      </div>
+      <div className={classes.content} />
+      <div>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() => toggleDrawer(false)}
+        >
+          Primary Action
+        </Button>
+        <Button
+          className={classes.secondaryAction}
+          variant="outlined"
+          color="primary"
+          onClick={() => toggleDrawer(false)}
+        >
+          Secondary Action
+        </Button>
+      </div>
+    </>
+  );
+};
+
+/* Default drawer can toggle open or closed.
+ * It can be cancelled by clicking the overlay
+ * or pressing the esc key.
+ */
+export const DefaultDrawer = () => {
+  const [isOpen, toggleDrawer] = useState(false);
+  const classes = useDrawerStyles();
+
+  return (
+    <>
+      <Button
+        variant="contained"
+        color="primary"
+        onClick={() => toggleDrawer(true)}
+      >
+        Open Default Drawer
+      </Button>
+      <Drawer
+        classes={{
+          paper: classes.paper,
+        }}
+        anchor="right"
+        open={isOpen}
+        onClose={() => toggleDrawer(false)}
+      >
+        <DrawerContent toggleDrawer={toggleDrawer} />
+      </Drawer>
+    </>
+  );
+};
+
+/* Persistent drawer works like the default one -
+ * except that the content sits on the same level
+ * as the main content and you can't cancel it by
+ * clicking the overlay or pressing the esc key.
+ *
+ * Set the Drawer variant props: 'persistent'
+ */
+export const PersistentDrawer = () => {
+  const [isOpen, toggleDrawer] = useState(false);
+  const classes = useDrawerStyles();
+
+  return (
+    <>
+      <Button
+        variant="contained"
+        color="primary"
+        onClick={() => toggleDrawer(true)}
+      >
+        Open Persistent Drawer
+      </Button>
+      <Drawer
+        classes={{
+          paper: classes.paper,
+        }}
+        variant="persistent"
+        anchor="right"
+        open={isOpen}
+        onClose={() => toggleDrawer(false)}
+      >
+        <DrawerContent toggleDrawer={toggleDrawer} />
+      </Drawer>
+    </>
+  );
+};

From 8d28d2c98448f3a77add6997c31fa2535b932dc3 Mon Sep 17 00:00:00 2001
From: Remi <remi.d45@gmail.com>
Date: Fri, 4 Dec 2020 16:35:18 +0100
Subject: [PATCH 2/2] feat(storybook-drawer): use theme spacing

---
 .../src/components/Drawer/Drawer.stories.tsx  | 54 ++++++++++---------
 1 file changed, 30 insertions(+), 24 deletions(-)

diff --git a/packages/core/src/components/Drawer/Drawer.stories.tsx b/packages/core/src/components/Drawer/Drawer.stories.tsx
index 9bb60c78a4..b399cfed8e 100644
--- a/packages/core/src/components/Drawer/Drawer.stories.tsx
+++ b/packages/core/src/components/Drawer/Drawer.stories.tsx
@@ -21,6 +21,8 @@ import {
   Typography,
   makeStyles,
   IconButton,
+  createStyles,
+  Theme,
 } from '@material-ui/core';
 import Close from '@material-ui/icons/Close';
 
@@ -29,31 +31,35 @@ export default {
   component: Drawer,
 };
 
-const useDrawerStyles = makeStyles({
-  paper: {
-    width: '50%',
-    justifyContent: 'space-between',
-    padding: '20px',
-  },
-});
+const useDrawerStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    paper: {
+      width: '50%',
+      justifyContent: 'space-between',
+      padding: theme.spacing(2.5),
+    },
+  }),
+);
 
-const useDrawerContentStyles = makeStyles({
-  header: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  icon: {
-    fontSize: 20,
-  },
-  content: {
-    height: '80%',
-    backgroundColor: '#EEEEEE',
-  },
-  secondaryAction: {
-    marginLeft: '20px',
-  },
-});
+const useDrawerContentStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    header: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    icon: {
+      fontSize: 20,
+    },
+    content: {
+      height: '80%',
+      backgroundColor: '#EEEEEE',
+    },
+    secondaryAction: {
+      marginLeft: theme.spacing(2.5),
+    },
+  }),
+);
 
 /* Example content wrapped inside the Drawer component */
 const DrawerContent = ({