Upgrade react-styleguidist and jest

docs/components/CodeRenderer.tsx

@@ -9,6 +9,7 @@ const CodeBox = styled.code`
   color: inherit;
   background: transparent;
   white-space: pre-wrap;
+  border: none;
 `;
 
 const CodeRenderer: React.SFC<CodeRendererProps> = ({ children }) => {

docs/components/ComponentsList.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ActionLink, Expander, styled, distance, Icon, ActionLinkProps } from '../../src';
 
 // @ts-ignore
-import getUrl from 'react-styleguidist/lib/utils/getUrl';
+import getUrl from 'react-styleguidist/lib/client/utils/getUrl';
 import { themed } from '../../src';
 
 interface ComponentDefinition {

docs/components/HomePage.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled, Headline, Icon, IconName, Button, BodyText, StackPanel, StackItem, colors } from '../../src';
 
 // @ts-ignore
-import Markdown from 'react-styleguidist/lib/rsg-components/Markdown';
+import Markdown from 'rsg-components/Markdown';
 
 const HeadIcon = styled(Icon)`
   vertical-align: text-bottom;

docs/components/PlaygroundRenderer.tsx

@@ -22,10 +22,10 @@ const PreviewPanel = styled.div`
 const CodePanel = styled.div`
   padding: ${distance.medium};
   background: rgba(75, 78, 82, 0.05);
-
-  div.CodeMirror {
-    background: transparent;
-    padding: ${distance.large} ${distance.xsmall} 0 ${distance.xsmall};
+  
+  textarea,
+  textarea:focus {
+    border: none !important;
   }
 `;
 

docs/components/ReactComponentRenderer.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Tabs, TabPage, styled, Headline, distance, TabChangeEvent } from '../../src';
 
 // @ts-ignore
-import Pathline from 'react-styleguidist/lib/rsg-components/Pathline';
+import Pathline from 'rsg-components/Pathline';
 
 interface ReactComponentRendererProps {
   name: string;

docs/components/SectionRenderer.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 
 // @ts-ignore
-import SectionHeading from 'react-styleguidist/lib/rsg-components/SectionHeading';
+import SectionHeading from 'rsg-components/SectionHeading';
 // @ts-ignore
-import Markdown from 'react-styleguidist/lib/rsg-components/Markdown';
+import Markdown from 'rsg-components/Markdown';
 
 interface SectionRendererProps {
   name: string;

docs/components/StyleGuideRenderer.tsx

@@ -5,9 +5,9 @@ import { HomePage } from './HomePage';
 import { AppState } from './context';
 
 // @ts-ignore
-import Ribbon from 'react-styleguidist/lib/rsg-components/Ribbon';
+import Ribbon from 'rsg-components/Ribbon';
 // @ts-ignore
-import Logo from 'react-styleguidist/lib/rsg-components/Logo';
+import Logo from 'rsg-components/Logo';
 import { createGlobalStyle } from '../../src';
 
 interface StyleGuideRendererProps {
@@ -39,7 +39,7 @@ function useTheme() {
 }
 
 /*
-  CSS animations should be disabled to ensure that animations don't 
+  CSS animations should be disabled to ensure that animations don't
   affect `react-styleguidist-visual` screenshots
 */
 const GlobalStyle = createGlobalStyle`

docs/introduction/installation.md

@@ -4,19 +4,19 @@ Precise UI can be easily integrated in your frontend project by using npm or Yar
 
 1. Firstly, you have to install it:
 
-  ```sh
+  ```bash
   npm i precise-ui
   ```
 
   or alternatively, using Yarn
 
-  ```sh
+  ```bash
   yarn add precise-ui
   ```
 
 2. Then, make sure that you have also all peer dependencies installed:
 
-  ```sh
+  ```bash
   npm i react@16 styled-components@2
   ```
 

docs/theme/colors.md

@@ -4,6 +4,8 @@ The following colors are available. Feel free to change them.
 
 ```jsx
 const {
+  ColorPicker,
+  MetroInfoTile,
   colors,
   clipboardCopy,
   notify,

integration/setup.js

@@ -7,6 +7,8 @@ const buildDemo = () =>
   });
 
 module.exports = async jestConfig => {
-  await buildDemo();
-  await setupPuppeteer(jestConfig);
+  await Promise.all([
+    buildDemo(),
+    setupPuppeteer(jestConfig)
+  ])
 };