Add example styles for charts and alert (#1889)

* chore(styles): add alert example sass

* fix(styles): adjust chart and alert example styles to add them back

packages/patternfly-4/react-charts/src/components/ChartArea/ChartArea.md → packages/patternfly-4/react-charts/src/components/ChartArea/examples/ChartArea.md

@@ -4,6 +4,7 @@ section: 'charts'
 ---
 
 import { ChartArea, ChartGroup, ChartLegend, ChartTheme, ChartVoronoiContainer } from '@patternfly/react-charts';
+import './chart-area.scss';
 
 ## Simple chart
 ```js

packages/patternfly-4/react-charts/src/components/ChartArea/examples/chart-area.scss

@@ -0,0 +1,14 @@
+.ws-preview {
+  & > * {
+    .chart-overflow {
+      & svg {
+        overflow: visible;
+      }
+    }
+
+    .chart-title {
+      margin-bottom: 25px;
+      margin-left: 10px;
+    }
+  }
+}

packages/patternfly-4/react-charts/src/components/ChartBar/ChartBar.md → packages/patternfly-4/react-charts/src/components/ChartBar/examples/ChartBar.md

@@ -7,6 +7,7 @@ section: 'charts'
 
 import { Chart, ChartBar, ChartGroup, ChartTheme } from '@patternfly/react-charts';
 import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
+import './chart-bar.scss';
 
 ```js
 import React from 'react';

packages/patternfly-4/react-charts/src/components/ChartBar/examples/chart-bar.scss

@@ -0,0 +1,24 @@
+.ws-preview {
+  & > * {
+    .chart-container {
+      height: 200px;
+      width: 300px;
+    }
+
+    .chart-margin {
+      margin-bottom: 30px;
+      margin-left: 20px;
+    }
+
+    .chart-overflow {
+        & svg {
+        overflow: visible;
+      }
+    }
+
+    .chart-title {
+      margin-bottom: 25px;
+      margin-left: 10px;
+    }
+  }
+}

packages/patternfly-4/react-charts/src/components/ChartDonut/ChartDonut.md → packages/patternfly-4/react-charts/src/components/ChartDonut/examples/ChartDonut.md

@@ -7,6 +7,7 @@ section: 'charts'
 
 import { ChartDonut, ChartLabel, ChartLegend, ChartTheme } from '@patternfly/react-charts';
 import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
+import './chart-donut.scss';
 
 ```js
 import React from 'react';

packages/patternfly-4/react-charts/src/components/ChartDonut/examples/chart-donut.scss

@@ -0,0 +1,21 @@
+.ws-preview {
+  & > * {
+    .chart-container {
+      height: 200px;
+      width: 300px;
+    }
+
+    .chart-inline {
+      display: inline-flex;
+    }
+
+    .chart-label {
+      position: absolute;
+    }
+
+    .chart-title {
+      margin-bottom: 25px;
+      margin-left: 10px;
+    }
+  }
+}

packages/patternfly-4/react-charts/src/components/ChartLine/ChartLine.md → packages/patternfly-4/react-charts/src/components/ChartLine/examples/ChartLine.md

@@ -5,6 +5,7 @@ section: 'charts'
 
 import { Chart, ChartGroup, ChartLegend, ChartLine, ChartTheme, ChartAxis } from '@patternfly/react-charts';
 import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
+import './chart-line.scss';
 
 ## Green themed line chart
 ```js

packages/patternfly-4/react-charts/src/components/ChartLine/examples/chart-line.scss

@@ -0,0 +1,28 @@
+.ws-preview {
+  & > * {
+    .chart-container {
+      height: 200px;
+      width: 300px;
+    }
+
+    .chart-margin {
+      margin-bottom: 30px;
+      margin-left: 40px;
+    }
+
+    .chart-inline {
+      display: inline-flex;
+    }
+
+    .chart-overflow {
+      & svg {
+        overflow: visible;
+      }
+    }
+
+    .chart-title {
+      margin-bottom: 25px;
+      margin-left: 10px;
+    }
+  }
+}

packages/patternfly-4/react-charts/src/components/ChartPie/ChartPie.md → packages/patternfly-4/react-charts/src/components/ChartPie/examples/ChartPie.md

@@ -7,6 +7,7 @@ section: 'charts'
 
 import { ChartLegend, ChartTheme, ChartPie } from '@patternfly/react-charts';
 import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
+import './chart-pie.scss';
 
 ```js
 import React from 'react';

packages/patternfly-4/react-charts/src/components/ChartPie/examples/chart-pie.scss

@@ -0,0 +1,17 @@
+.ws-preview {
+  & > * {
+    .chart-container {
+      height: 200px;
+      width: 300px;
+    }
+
+    .chart-inline {
+      display: inline-flex;
+    }
+
+    .chart-title {
+      margin-bottom: 25px;
+      margin-left: 10px;
+    }
+  }
+}

packages/patternfly-4/react-charts/src/components/ChartStack/ChartStack.md → packages/patternfly-4/react-charts/src/components/ChartStack/examples/ChartStack.md

@@ -11,6 +11,7 @@ All of the `<svg>` elements on this page need to have `overflow: 'visible'` set
 
 import { Chart, ChartBar, ChartStack, ChartTheme } from '@patternfly/react-charts';
 import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
+import './chart-stack.scss';
 
 ```js
 import React from 'react';

packages/patternfly-4/react-charts/src/components/ChartStack/examples/chart-stack.scss

@@ -0,0 +1,24 @@
+.ws-preview {
+  & > * {
+    .chart-container {
+      height: 200px;
+      width: 300px;
+    }
+
+    .chart-margin {
+      margin-bottom: 30px;
+      margin-left: 40px;
+    }
+
+    .chart-overflow {
+      & svg {
+        overflow: visible;
+      }
+    }
+
+    .chart-title {
+      margin-bottom: 25px;
+      margin-left: 10px;
+    }
+  }
+}

packages/patternfly-4/react-core/src/components/Alert/Alert.md → packages/patternfly-4/react-core/src/components/Alert/examples/Alert.md

@@ -3,6 +3,7 @@ title: 'Alert'
 cssPrefix: 'pf-c-alert'
 ---
 import { Alert, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core';
+import './alert.scss';
 
 ## Info alert
 ```js

packages/patternfly-4/react-core/src/components/Alert/examples/alert.scss

@@ -0,0 +1,5 @@
+.ws-preview {
+  & > .pf-c-alert {
+    margin-bottom: 0.5rem;
+  }
+}

packages/patternfly-4/react-docs/gatsby-config.js

@@ -54,6 +54,13 @@ module.exports = {
         extensions: [`.mdx`, `.md`]
       }
     },
+    {
+      resolve: `gatsby-plugin-sass`,
+      options: {
+        postCssPlugins: [],
+        precision: 5
+      }
+    },
     // The plugin for package.json files (to get version numbers)
     `gatsby-transformer-json`,
   ],

packages/patternfly-4/react-docs/package.json

@@ -21,6 +21,7 @@
     "gatsby": "2.3.14",
     "gatsby-mdx": "0.6.3",
     "gatsby-plugin-react-helmet": "^3.0.11",
+    "gatsby-plugin-sass": "^2.0.11",
     "gatsby-source-filesystem": "^2.0.28",
     "gatsby-transformer-json": "^2.1.11",
     "react": "~16.8.4",

packages/patternfly-4/react-docs/src/components/componentDocs/live-edit.scss

@@ -0,0 +1,42 @@
+.ws-preview {
+  background-color: white;
+}
+
+.example {
+  max-height: 37.5rem;
+  overflow: auto;
+}
+
+.code {
+  background-color: #000000;
+  border-top: 1px solid #f8f8f8;
+  border-right: none;
+  border-bottom: none;
+  border-left: none;
+}
+
+.toolbar {
+  background-color: #fff;
+  border-top: 1px solid #f8f8f8;
+  border-right: none;
+  border-bottom: none;
+  border-left: none;
+}
+
+.message {
+  transition: 500ms all ease;
+  opacity: 0;
+  height: 0;
+  will-change: opacity;
+}
+
+.messageText {
+  background-color: #fff;
+  color: #486b00;
+  padding: 16px;
+}
+
+.messageShow {
+  opacity: 1;
+  height: initial;
+}

packages/patternfly-4/react-docs/src/components/componentDocs/liveEdit.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
 import { Button } from '@patternfly-safe/react-core';
 import { CodeIcon, CopyIcon } from '@patternfly-safe/react-icons';
+import './live-edit.scss';
 
 import * as ReactCharts from '@patternfly/react-charts';
 import * as ReactCore from '@patternfly/react-core';
@@ -13,7 +14,6 @@ import * as ReactTable from '@patternfly/react-table';
 import * as ReactTokens from '@patternfly/react-tokens';
 
 
-const liveEditorStyle = { code: { 'max-height': '37.5rem', overflow: 'auto' } };
 class LiveEdit extends React.Component {
   constructor(props) {
     super(props);
@@ -98,11 +98,11 @@ class LiveEdit extends React.Component {
 
     if (this.props.className === 'language-js') {
       return (
-        <div style={{ border: `1px solid #72767b` }}>
+        <div style={{ border: `1px solid #72767b` }} className="example">
           <LiveProvider code={this.code} scope={this.scope} transformCode={this.transformCode}>
-            <LivePreview />
+            <LivePreview className="ws-preview"/>
             {Toolbar}
-            {this.state.codeOpen && <LiveEditor style={liveEditorStyle} />}
+            {this.state.codeOpen && <LiveEditor className="code"/>}
             <LiveError />
           </LiveProvider>
         </div>
@@ -112,7 +112,7 @@ class LiveEdit extends React.Component {
       return (
         <LiveProvider code={this.code} disabled>
           {Toolbar}
-          {this.state.codeOpen && <LiveEditor style={liveEditorStyle} contentEditable={false} />}
+          {this.state.codeOpen && <LiveEditor contentEditable={false} />}
         </LiveProvider>
       );
     }

yarn.lock

@@ -9080,6 +9080,13 @@ gatsby-plugin-react-helmet@^3.0.11:
   dependencies:
     "@babel/runtime" "^7.0.0"
 
+gatsby-plugin-sass@^2.0.11:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-sass/-/gatsby-plugin-sass-2.0.11.tgz#25ef6a206107e24ac49d50866f0595c2aa489649"
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    sass-loader "^7.0.1"
+
 gatsby-react-router-scroll@^2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-2.0.7.tgz#b9425e366d4be546036080d85664d60ae76e6c29"
@@ -17254,7 +17261,7 @@ sass-graph@^2.2.4:
     scss-tokenizer "^0.2.3"
     yargs "^7.0.0"
 
-[email protected]:
+[email protected], sass-loader@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.1.0.tgz#16fd5138cb8b424bf8a759528a1972d72aad069d"
   dependencies: