From e5d45996fd7be3446c883ebe357979d85f265ff3 Mon Sep 17 00:00:00 2001
From: Miro Yovchev <m.yovchev@gmail.com>
Date: Wed, 28 Aug 2019 15:41:48 +0300
Subject: [PATCH] Remove injectGlobal, introduce global component(s), add
 colors and global style exports, raise styled-components dependency to 4+

---
 .npmignore                |  6 +++---
 package.json              |  4 ++--
 src/Drawer.js             | 32 +++++++++++++++++---------------
 src/index.js              |  2 ++
 src/theme/colors.js       |  1 +
 src/theme/injectGlobal.js |  7 +++++--
 6 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/.npmignore b/.npmignore
index 572cf03..d7bc05e 100644
--- a/.npmignore
+++ b/.npmignore
@@ -4,9 +4,9 @@ node_modules
 src
 dev
 .storybook
-.babelrc
+.editorconfig
 .eslintignore
-.eslintrc
-.nojekyl
+.eslintrc.js
+.nojekyll
 stories
 scripts
\ No newline at end of file
diff --git a/package.json b/package.json
index f31be11..b653220 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@corllete/material-styled",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Styled Components implementation of Material Design",
   "main": "lib/index.js",
   "scripts": {
@@ -63,6 +63,6 @@
     "prop-types": ">= 15",
     "react": ">= 16.8",
     "react-dom": ">= 16.8",
-    "styled-components": ">= 3"
+    "styled-components": ">= 4"
   }
 }
diff --git a/src/Drawer.js b/src/Drawer.js
index 92916df..d8a0899 100644
--- a/src/Drawer.js
+++ b/src/Drawer.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled, { injectGlobal, css } from 'styled-components';
+import styled, { createGlobalStyle, css } from 'styled-components';
 import classNames from 'classnames';
 import elevation from './mixins/elevation';
 import Portal from './Portal';
@@ -9,8 +9,7 @@ const drawerSizing = css`
   width: 240px;
 `;
 
-// eslint-disable-next-line no-unused-expressions
-injectGlobal`
+const GlobalStyle = createGlobalStyle`
   body {
     &.shift {
       &.right {
@@ -111,19 +110,22 @@ const Drawer = ({
   temporary,
   attachment,
 }) => (
-  <Portal
-    open={open}
-    shift={!temporary}
-    attachment={attachment}
-    onRequestClose={handleRequestClose}
-    renderContents={() => (
-      <StyledDrawer
-        attachment={attachment}
-        open={open}
-        temporary={temporary}>
-        {children}
-      </StyledDrawer>
+  <React.Fragment>
+    <GlobalStyle />
+    <Portal
+      open={open}
+      shift={!temporary}
+      attachment={attachment}
+      onRequestClose={handleRequestClose}
+      renderContents={() => (
+        <StyledDrawer
+          attachment={attachment}
+          open={open}
+          temporary={temporary}>
+          {children}
+        </StyledDrawer>
     )} />
+  </React.Fragment>
 );
 
 Drawer.propTypes = {
diff --git a/src/index.js b/src/index.js
index 830d047..f00226c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -22,3 +22,5 @@ export { default as withRipple } from './mixins/ripple';
 
 export { default as ThemeProvider } from './theme/ThemeProvider';
 export { default as defaultTheme } from './theme/defaultTheme';
+export { default as GlobalStyle } from './theme/injectGlobal';
+export * from './theme/colors';
diff --git a/src/theme/colors.js b/src/theme/colors.js
index d5949b0..8203b02 100644
--- a/src/theme/colors.js
+++ b/src/theme/colors.js
@@ -1,4 +1,5 @@
 import Color from 'color';
 
+export { Color };
 export const black = Color('#000');
 export const white = Color('#fff');
diff --git a/src/theme/injectGlobal.js b/src/theme/injectGlobal.js
index af7c91f..0a53d49 100644
--- a/src/theme/injectGlobal.js
+++ b/src/theme/injectGlobal.js
@@ -1,7 +1,7 @@
-import { injectGlobal } from 'styled-components';
+import { createGlobalStyle } from 'styled-components';
 
 /* eslint-disable no-unused-expressions */
-injectGlobal`
+const GlobalStyle = createGlobalStyle`
   body {
     margin: 0;
     padding: 0;
@@ -11,3 +11,6 @@ injectGlobal`
     font-family: Roboto,sans-serif;
   }
 `;
+
+export default GlobalStyle;
+