feat(mdx): use mdx for docs (#1753)

* initial mdx * convert some md files to mdx * add fullscreen * Moved imports to top of md files * Fix propComponents * upgrade mdx * Fix rest of md files * css import order matters * webpack aliases * no console log * markdown quote style * mdx template update * Add imports to example markdown for copy/paste * Add newlines to end of markdown files
patternfly · Apr 15, 2019 · a03ecd0 · a03ecd0
1 parent bba2e4f
commit a03ecd0
Show file tree

Hide file tree

Showing 90 changed files with 1,766 additions and 1,212 deletions.
diff --git a/packages/patternfly-4/react-charts/src/components/ChartArea/ChartArea.md b/packages/patternfly-4/react-charts/src/components/ChartArea/ChartArea.md
@@ -1,11 +1,14 @@
 ---
-title: "Area Chart"
-section: "charts"
+title: 'Area Chart'
+section: 'charts'
 ---
+
+import { ChartArea, ChartGroup, ChartLegend, ChartTheme, ChartVoronoiContainer } from '@patternfly/react-charts';
+
 ## Simple Chart
 ```js
 import React from 'react';
-import { ChartArea, ChartGroup, ChartLegend, ChartVoronoiContainer } from '@patternfly/react-charts';
+import { ChartArea, ChartGroup, ChartLegend, ChartTheme, ChartVoronoiContainer } from '@patternfly/react-charts';
 
 class SimpleChart extends React.Component {
   constructor(props) {
@@ -32,7 +35,7 @@ class SimpleChart extends React.Component {
   componentWillUnmount() {
     window.removeEventListener('resize', this.handleResize);
   }
-  
+
   render() {
     const { width } = this.state;
     const container = <ChartVoronoiContainer labels={this.getTooltipLabel} />;
@@ -75,7 +78,7 @@ class SimpleChart extends React.Component {
 ## Custom Colors Chart
 ```js
 import React from 'react';
-import { ChartArea, ChartGroup, ChartLegend, ChartVoronoiContainer } from '@patternfly/react-charts';
+import { ChartArea, ChartGroup, ChartLegend, ChartTheme, ChartVoronoiContainer } from '@patternfly/react-charts';
 
 class CustomColorsChart extends React.Component {
   constructor(props) {
@@ -227,4 +230,4 @@ class DarkGreenThemeChart extends React.Component {
     );
   }
 }
-```
+```
diff --git a/packages/patternfly-4/react-charts/src/components/ChartBar/ChartBar.md b/packages/patternfly-4/react-charts/src/components/ChartBar/ChartBar.md
@@ -1,8 +1,13 @@
 ---
-title: "Bar Chart"
-section: "charts"
+title: 'Bar Chart'
+section: 'charts'
 ---
+
 ## Blue Theme Bar Chart
+
+import { Chart, ChartBar, ChartGroup, ChartTheme } from '@patternfly/react-charts';
+import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
+
 ```js
 import React from 'react';
 import { Chart, ChartBar, ChartGroup, ChartTheme } from '@patternfly/react-charts';
@@ -36,4 +41,4 @@ import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
     </ChartGroup>
   </Chart>
 </div>
-```
+```
diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonut/ChartDonut.md b/packages/patternfly-4/react-charts/src/components/ChartDonut/ChartDonut.md
@@ -1,58 +1,59 @@
 ---
-title: "Donut Chart"
-section: "charts"
+title: 'Donut Chart'
+section: 'charts'
 ---
+
 ## Blue Theme Donut Chart
-```js
-import React from 'react';
+
 import { ChartDonut, ChartLabel, ChartLegend, ChartTheme } from '@patternfly/react-charts';
 import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
 
-<div style={{display: 'inline-flex'}}>
-  <div style={{height: 450, width: 450}}>
-    <svg style={{position: 'absolute'}} height={this.size} width={this.size}>
+```js
+import React from 'react';
+
+<div style={{ display: 'inline-flex' }}>
+  <div style={{ height: 450, width: 450 }}>
+    <svg style={{ position: 'absolute' }} height={this.size} width={this.size}>
       <ChartLabel style={{ fontSize: 20 }} text="100" textAnchor="middle" verticalAnchor="middle" x={225} y={200} />
       <ChartLabel style={{ fill: '#bbb' }} text="Pets" textAnchor="middle" verticalAnchor="middle" x={255} y={250} />
     </svg>
     <ChartDonut
       data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
       labels={datum => `${datum.x}: ${datum.y}`}
       theme={ChartTheme.light.blue}
-      />
+    />
   </div>
   <ChartLegend
-      data={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]}
-      orientation={'vertical'}
-      theme={ChartTheme.light.blue}
-      y={160}
-    />
+    data={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]}
+    orientation={'vertical'}
+    theme={ChartTheme.light.blue}
+    y={160}
+  />
 </div>
 ```
 
 ## Multi-color Theme Donut Chart
 ```js
 import React from 'react';
-import { ChartDonut, ChartLabel, ChartLegend, ChartTheme } from '@patternfly/react-charts';
-import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
 
 <div>
-  <div style={{height: 450, width: 450}}>
-    <svg style={{position: 'absolute'}} height={this.size} width={this.size}>
+  <div style={{ height: 450, width: 450 }}>
+    <svg style={{ position: 'absolute' }} height={this.size} width={this.size}>
       <ChartLabel style={{ fontSize: 20 }} text="100" textAnchor="middle" verticalAnchor="middle" x={225} y={200} />
       <ChartLabel style={{ fill: '#bbb' }} text="Pets" textAnchor="middle" verticalAnchor="middle" x={255} y={250} />
     </svg>
     <ChartDonut
       data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
       labels={datum => `${datum.x}: ${datum.y}`}
       theme={ChartTheme.light.multi}
-      />
+    />
   </div>
   <ChartLegend
-      data={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]}
-      orientation={'horizontal'}
-      theme={ChartTheme.light.multi}
-      height={35}
-      x={140}
-    />
+    data={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]}
+    orientation={'horizontal'}
+    theme={ChartTheme.light.multi}
+    height={35}
+    x={140}
+  />
 </div>
-```
+```
diff --git a/packages/patternfly-4/react-charts/src/components/ChartLine/ChartLine.md b/packages/patternfly-4/react-charts/src/components/ChartLine/ChartLine.md
@@ -1,15 +1,19 @@
 ---
-title: "Line Chart"
-section: "charts"
+title: 'Line Chart'
+section: 'charts'
 ---
+
+import { Chart, ChartGroup, ChartLegend, ChartLine, ChartTheme, ChartAxis } from '@patternfly/react-charts';
+import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
+
 ## Green Themed Line Chart
 ```js
 import React from 'react';
-import { Chart, ChartGroup, ChartLegend, ChartLine, ChartTheme } from '@patternfly/react-charts';
+import { Chart, ChartGroup, ChartLegend, ChartLine, ChartTheme, ChartAxis } from '@patternfly/react-charts';
 import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
 
-<div style={{display: 'flex-inline'}}>
-  <div style={{width: 450, height: 360}}>
+<div style={{ display: 'flex-inline' }}>
+  <div style={{ width: 450, height: 360 }}>
     <div>
       <Chart theme={ChartTheme.light.green}>
         <ChartGroup>
@@ -56,8 +60,8 @@ import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
       </Chart>
     </div>
     <div className="chart-legend">
-        <ChartLegend
-        data={[{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash'} }, { name: 'Birds' }, { name: 'Mice' }]}
+      <ChartLegend
+        data={[{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash' } }, { name: 'Birds' }, { name: 'Mice' }]}
         title="Average number of pets"
         height={50}
         theme={ChartTheme.light.green}
@@ -69,8 +73,12 @@ import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
 
 ## Multi-color Themed Line Chart
 ```js
-<div style={{display: 'flex-inline'}}>
-  <div style={{width: 450, height: 360}}>
+import React from 'react';
+import { Chart, ChartGroup, ChartLegend, ChartLine, ChartTheme, ChartAxis } from '@patternfly/react-charts';
+import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
+
+<div style={{ display: 'flex-inline' }}>
+  <div style={{ width: 450, height: 360 }}>
     <div>
       <Chart theme={ChartTheme.light.multi}>
         <ChartGroup>
@@ -117,13 +125,13 @@ import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
       </Chart>
     </div>
     <div className="chart-legend">
-        <ChartLegend
-        data={[{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash'} }, { name: 'Birds' }, { name: 'Mice' }]}
+      <ChartLegend
+        data={[{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash' } }, { name: 'Birds' }, { name: 'Mice' }]}
         title="Average number of pets"
         height={50}
         theme={ChartTheme.light.multi}
       />
     </div>
   </div>
 </div>
-```
+```
diff --git a/packages/patternfly-4/react-charts/src/components/ChartPie/ChartPie.md b/packages/patternfly-4/react-charts/src/components/ChartPie/ChartPie.md
@@ -1,27 +1,32 @@
 ---
-title: "Pie Chart"
-section: "charts"
+title: 'Pie Chart'
+section: 'charts'
 ---
+
 ## Blue-Themed Pie Chart
+
+import { ChartLegend, ChartTheme, ChartPie } from '@patternfly/react-charts';
+import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
+
 ```js
 import React from 'react';
 import { ChartLegend, ChartTheme, ChartPie } from '@patternfly/react-charts';
 import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
 
 <div>
-  <div style={{height: 450, width: 450}}>
+  <div style={{ height: 450, width: 450 }}>
     <ChartPie
       data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
-      labels={(datum) => `${datum.x}: ${datum.y}`}
+      labels={datum => `${datum.x}: ${datum.y}`}
       theme={ChartTheme.light.blue}
     />
   </div>
-    <ChartLegend
-      data={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]}
-      orientation={'vertical'}
-      theme={ChartTheme.light.blue}
-      y={150}
-      />
+  <ChartLegend
+    data={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]}
+    orientation={'vertical'}
+    theme={ChartTheme.light.blue}
+    y={150}
+  />
 </div>
 ```
 
@@ -32,19 +37,19 @@ import { ChartLegend, ChartTheme, ChartPie } from '@patternfly/react-charts';
 import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
 
 <div>
-  <div style={{height: 450, width: 450}}>
+  <div style={{ height: 450, width: 450 }}>
     <ChartPie
       data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
-      labels={(datum) => `${datum.x}: ${datum.y}`}
+      labels={datum => `${datum.x}: ${datum.y}`}
       theme={ChartTheme.light.multi}
-      />
+    />
   </div>
   <ChartLegend
-      data={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]}
-      orientation={'horizontal'}
-      theme={ChartTheme.light.multi}
-      height={100}
-      x={150}
-    />
+    data={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]}
+    orientation={'horizontal'}
+    theme={ChartTheme.light.multi}
+    height={100}
+    x={150}
+  />
 </div>
-```
+```
diff --git a/packages/patternfly-4/react-charts/src/components/ChartStack/ChartStack.md b/packages/patternfly-4/react-charts/src/components/ChartStack/ChartStack.md
@@ -1,18 +1,23 @@
 ---
-title: "Stack Chart"
-section: "charts"
+title: 'Stack Chart'
+section: 'charts'
 ---
+
 ### Known Problem
-All of the `<svg>` elements on this page need to have `overflow: 'visible'` set on them to display axes.
 
+All of the `<svg>` elements on this page need to have `overflow: 'visible'` set on them to display axes.
 
 ## Vertical Blue Themed Stack Chart
+
+import { Chart, ChartBar, ChartStack, ChartTheme } from '@patternfly/react-charts';
+import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
+
 ```js
 import React from 'react';
 import { Chart, ChartBar, ChartStack, ChartTheme } from '@patternfly/react-charts';
 import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
 
-<div style={{width: 450, height: 300, marginRight: 20, marginLeft: 20}}>
+<div style={{ width: 450, height: 300, marginRight: 20, marginLeft: 20 }}>
   <Chart theme={ChartTheme.light.blue}>
     <ChartStack>
       <ChartBar data={[{ x: 'Cats', y: 1 }, { x: 'Dogs', y: 2 }, { x: 'Birds', y: 5 }, { x: 'Mice', y: 3 }]} />
@@ -30,7 +35,7 @@ import React from 'react';
 import { Chart, ChartBar, ChartStack, ChartTheme } from '@patternfly/react-charts';
 import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
 
-<div style={{width: 450, height: 300, marginRight: 20, marginLeft: 20}}>
+<div style={{ width: 450, height: 300, marginRight: 20, marginLeft: 20 }}>
   <Chart theme={ChartTheme.light.multi}>
     <ChartStack>
       <ChartBar data={[{ x: 'Cats', y: 1 }, { x: 'Dogs', y: 2 }, { x: 'Birds', y: 5 }, { x: 'Mice', y: 3 }]} />
@@ -48,7 +53,7 @@ import React from 'react';
 import { Chart, ChartBar, ChartStack, ChartTheme } from '@patternfly/react-charts';
 import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
 
-<div style={{width: 450, height: 450, marginLeft: 20, marginRight: 20}}>
+<div style={{ width: 450, height: 450, marginLeft: 20, marginRight: 20 }}>
   <Chart theme={ChartTheme.light.blue}>
     <ChartStack horizontal>
       <ChartBar data={[{ x: 'Cats', y: 1 }, { x: 'Dogs', y: 2 }, { x: 'Birds', y: 5 }, { x: 'Mice', y: 3 }]} />
@@ -66,7 +71,7 @@ import React from 'react';
 import { Chart, ChartBar, ChartStack, ChartTheme } from '@patternfly/react-charts';
 import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
 
-<div style={{width: 450, height: 450, marginLeft: 20, marginRight: 20}}>
+<div style={{ width: 450, height: 450, marginLeft: 20, marginRight: 20 }}>
   <Chart theme={ChartTheme.light.multi}>
     <ChartStack horizontal>
       <ChartBar data={[{ x: 'Cats', y: 1 }, { x: 'Dogs', y: 2 }, { x: 'Birds', y: 5 }, { x: 'Mice', y: 3 }]} />
@@ -76,4 +81,4 @@ import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
     </ChartStack>
   </Chart>
 </div>
-```
+```
diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.md b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.md
@@ -1,9 +1,13 @@
 ---
-title: "About Modal"
-cssPrefix: "pf-c-about-modal-box"
+title: 'About Modal'
+cssPrefix: 'pf-c-about-modal-box'
 ---
 ## Simple About Modal
 
+import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
+import brandImg from './examples/brandImg.svg';
+import logoImg from './examples/logoImg.svg';
+
 ```js
 import React from 'react';
 import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
@@ -64,4 +68,4 @@ class SimpleAboutModal extends React.Component {
     );
   }
 }
-```
+```
diff --git a/packages/patternfly-4/react-core/src/components/Alert/Alert.md b/packages/patternfly-4/react-core/src/components/Alert/Alert.md
@@ -1,7 +1,9 @@
 ---
-title: "Alert"
-cssPrefix: "pf-c-alert"
+title: 'Alert'
+cssPrefix: 'pf-c-alert'
 ---
+import { Alert, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core';
+
 ## Info Alert
 ```js
 import React from 'react';