chore(docs): use styled-components on styleguidist

Author: theetrain

docs/components/overrides/StyleGuide/StyleGuideRenderer.js

@@ -4,9 +4,24 @@ import Styled from 'rsg-components/Styled'
 import cx from 'classnames'
 import Logo from 'rsg-components/Logo'
 import Markdown from 'rsg-components/Markdown'
+import { createGlobalStyle } from 'styled-components'
 
+import CSSReset from '@tds/core-css-reset'
 import FlexGrid from '@tds/core-flex-grid'
 
+const GlobalStyleGuide = createGlobalStyle({
+  // Full width container with limited with parent: https://css-tricks.com/full-width-containers-limited-width-parents/
+  // Only activate with there is no sidebar
+  '.rsg--root-1:not(*[class*=\'rsg--hasSidebar\']) .docs_full-width-playground': {
+    width: '100vw',
+    position: 'relative',
+    left: '50%',
+    right: '50%',
+    marginLeft: '-50vw',
+    marginRight: '-50vw',
+  }
+})
+
 const styles = ({ color, fontFamily, fontSize, sidebarWidth, mq, space, maxWidth }) => ({
   root: {
     backgroundColor: color.baseBackground,
@@ -77,20 +92,23 @@ export function StyleGuideRenderer({ classes, title, homepageUrl, children, toc,
   )
 
   return (
-    <div className={cx(classes.root, hasSidebar && classes.hasSidebar)}>
-      <a id="styleguidist-top">&nbsp;</a>
+    <>
+      <CSSReset />
+      <div className={cx(classes.root, hasSidebar && classes.hasSidebar)}>
+        <a id="styleguidist-top">&nbsp;</a>
 
-      {hasSidebar ? main : <TdsGrid>{main}</TdsGrid>}
+        {hasSidebar ? main : <TdsGrid>{main}</TdsGrid>}
 
-      {hasSidebar && (
-        <div className={classes.sidebar}>
-          <div className={classes.logo}>
-            <Logo>{title}</Logo>
+        {hasSidebar && (
+          <div className={classes.sidebar}>
+            <div className={classes.logo}>
+              <Logo>{title}</Logo>
+            </div>
+            {toc}
           </div>
-          {toc}
-        </div>
-      )}
-    </div>
+        )}
+      </div>
+    </>
   )
 }