Replace material dependencies in Drawer component

recipes/package-lock.json

@@ -1162,6 +1162,25 @@
         "tslib": "^1.9.3"
       }
     },
+    "@material/drawer": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material/drawer/-/drawer-5.1.0.tgz",
+      "integrity": "sha512-Xh/kYkT8QWWXkbCI25ys6av0wrc0wXRfvnRdH34Rz4sZvWC51D6apK2bxGr+AV/uR88zwn6U8pb9cccnr+2Eqw==",
+      "requires": {
+        "@material/animation": "^5.1.0",
+        "@material/base": "^5.1.0",
+        "@material/dom": "^5.1.0",
+        "@material/elevation": "^5.1.0",
+        "@material/feature-targeting": "^5.1.0",
+        "@material/list": "^5.1.0",
+        "@material/ripple": "^5.1.0",
+        "@material/rtl": "^5.1.0",
+        "@material/shape": "^5.1.0",
+        "@material/theme": "^5.1.0",
+        "@material/typography": "^5.1.0",
+        "tslib": "^1.9.3"
+      }
+    },
     "@material/elevation": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-5.1.0.tgz",
@@ -1218,6 +1237,23 @@
         "tslib": "^1.9.3"
       }
     },
+    "@material/list": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material/list/-/list-5.1.0.tgz",
+      "integrity": "sha512-fcHMJLmmtFYeMU8CO9VsXoRRm3/2jhPVMWK3lpuARZxvkNyZqjQG0mGtpWgw4oekerM/B37TGGFmN3R5DSyGcg==",
+      "requires": {
+        "@material/base": "^5.1.0",
+        "@material/density": "^5.1.0",
+        "@material/dom": "^5.1.0",
+        "@material/feature-targeting": "^5.1.0",
+        "@material/ripple": "^5.1.0",
+        "@material/rtl": "^5.1.0",
+        "@material/shape": "^5.1.0",
+        "@material/theme": "^5.1.0",
+        "@material/typography": "^5.1.0",
+        "tslib": "^1.9.3"
+      }
+    },
     "@material/notched-outline": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.1.0.tgz",
@@ -1372,6 +1408,16 @@
         "@rmwc/types": "^6.0.5"
       }
     },
+    "@rmwc/drawer": {
+      "version": "6.0.14",
+      "resolved": "https://registry.npmjs.org/@rmwc/drawer/-/drawer-6.0.14.tgz",
+      "integrity": "sha512-sfA5IduZZ4AjhxyJsJHYYqmwuAYRYAhfn+7Zx8YLmZfat98Q/bu2D5mAbVcSerhSd1myW0nS7yfZuQR7YZp2dA==",
+      "requires": {
+        "@material/drawer": "^5.1.0",
+        "@rmwc/base": "^6.0.14",
+        "@rmwc/types": "^6.0.5"
+      }
+    },
     "@rmwc/floating-label": {
       "version": "6.0.14",
       "resolved": "https://registry.npmjs.org/@rmwc/floating-label/-/floating-label-6.0.14.tgz",
@@ -1414,6 +1460,19 @@
         "@rmwc/types": "^6.0.5"
       }
     },
+    "@rmwc/list": {
+      "version": "6.0.14",
+      "resolved": "https://registry.npmjs.org/@rmwc/list/-/list-6.0.14.tgz",
+      "integrity": "sha512-6cZN/pr+cAUpaKXUmP8yZWDDxzBoF2XfUUneOGaDo4dC4QxXz9Rnl2Dz9e+H8fXVUsERwlCvlNlrmfWmkN7Ejw==",
+      "requires": {
+        "@material/list": "^5.1.0",
+        "@rmwc/base": "^6.0.14",
+        "@rmwc/icon": "^6.0.14",
+        "@rmwc/provider": "^6.0.14",
+        "@rmwc/ripple": "^6.0.14",
+        "@rmwc/types": "^6.0.5"
+      }
+    },
     "@rmwc/notched-outline": {
       "version": "6.0.14",
       "resolved": "https://registry.npmjs.org/@rmwc/notched-outline/-/notched-outline-6.0.14.tgz",

recipes/package.json

@@ -4,8 +4,10 @@
   "private": true,
   "dependencies": {
     "@rmwc/dialog": "^6.1.0",
+    "@rmwc/drawer": "^6.0.14",
     "@rmwc/icon": "^6.0.14",
     "@rmwc/icon-button": "^6.0.14",
+    "@rmwc/list": "^6.0.14",
     "@types/classnames": "^2.2.9",
     "@types/jest": "^24.0.15",
     "@types/node": "^11.13.17",

recipes/src/components/Drawer/index.tsx

@@ -1,20 +1,20 @@
-import React, { ReactNode, ReactChildren, createElement } from 'react';
-import ReactDOMServer from 'react-dom/server';
-import Drawer, {
+import React from 'react';
+
+import {
+  Drawer,
   DrawerHeader,
   DrawerTitle,
-  DrawerContent,
-} from '@material/react-drawer';
-import List, { ListItem } from '@material/react-list';
-import { ReactComponent as Logo } from 'svgs/logo.svg';
+  DrawerContent
+} from '@rmwc/drawer';
+import {
+  List,
+  ListItem
+} from '@rmwc/list';
 import { ReactNodeArray } from 'prop-types';
 import Icon from 'components/Icon';
-import Svgs from 'svgs';
-import ReactSVG from 'react-svg';
-
-import '@material/react-drawer/dist/drawer.min.css';
-import '@material/react-list/dist/list.min.css';
 
+import '@rmwc/drawer/styles';
+import '@rmwc/list/styles';
 import './styles.scss';
 
 type CBKDrawerProps = {