doc(examples): use h3s for titles (patternfly#4570)

* normalize frontmatter * use h3s for example titles * remove redundant imports * use examples folder * remove typescript: true * use ids for misc pages * update theme for h3 support * fix lint * add react import to every example * joachim feedback
jonkoops · Jul 17, 2020 · e3b0cb6 · e3b0cb6
1 parent c9ec2f9
commit e3b0cb6
Show file tree

Hide file tree

Showing 109 changed files with 1,260 additions and 1,124 deletions.
diff --git a/packages/eslint-plugin-patternfly-react/README.md b/packages/eslint-plugin-patternfly-react/README.md
@@ -28,7 +28,7 @@ Add eslint-plugin-patternfly-react to your `.eslintrc.json` or `.eslintrc.js`.
 
 .eslintrc.js:
 
-```javascript
+```js
 module.exports = {
   root: true,
   extends: ['plugin:patternfly-react/recommended']

diff --git a/...g-view-extension/src/components/CatalogItemHeader/examples/CatalogItemHeader.md b/...g-view-extension/src/components/CatalogItemHeader/examples/CatalogItemHeader.md
@@ -1,8 +1,7 @@
 ---
-title: 'Catalog view item header'
-section: 'extensions'
+id: Catalog view item header
+section: extensions
 propComponents: ['CatalogItemHeader']
-typescript: true
 ---
 
 import { CatalogItemHeader } from '@patternfly/react-catalog-view-extension';
@@ -15,7 +14,8 @@ Note: Catalog item header lives in its own package at [`@patternfly/react-catalo
 This package is currently an extension. Extension components do not undergo the same rigorous design or coding review process as core PatternFly components. If enough members of the community find them useful, we will work to move them into our core PatternFly system by starting the design process for the idea.
 
 ## Examples
-```js title=Basic
+### Basic
+```js
 import React from 'react';
 import { CatalogItemHeader } from '@patternfly/react-catalog-view-extension';
 import pfLogo2 from './examples/pfLogo2.svg';
@@ -30,7 +30,8 @@ Basic = () => (
 );
 ```
 
-```js title=With-vendor-description
+### With vendor description
+```js
 import React from 'react';
 import { CatalogItemHeader } from '@patternfly/react-catalog-view-extension';
 import pfLogo2 from './examples/pfLogo2.svg';

diff --git a/...react-catalog-view-extension/src/components/CatalogTile/examples/CatalogTile.md b/...react-catalog-view-extension/src/components/CatalogTile/examples/CatalogTile.md
@@ -1,8 +1,7 @@
 ---
-title: 'Catalog view tile'
-section: 'extensions'
+id: Catalog view tile
+section: extensions
 propComponents: ['CatalogTile']
-typescript: true
 ---
 
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
@@ -17,7 +16,8 @@ Note: Catalog tile lives in its own package at [`@patternfly/react-catalog-view-
 This package is currently an extension. Extension components do not undergo the same rigorous design or coding review process as core PatternFly components. If enough members of the community find them useful, we will work to move them into our core PatternFly system by starting the design process for the idea.
 
 ## Examples
-```js title=Basic-featured-tile
+### Basic featured tile
+```js
 import React from 'react';
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
 import { CogIcon } from '@patternfly/react-icons';
@@ -47,7 +47,8 @@ Basic = () => (
 );
 ```
 
-```js title=Basic-with-footer
+### Basic with footer
+```js
 import React from 'react';
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
 import { CogIcon, OutlinedCheckCircleIcon } from '@patternfly/react-icons';
@@ -81,7 +82,8 @@ SimpleFooter = () => (
 );
 ```
 
-```js title=Link-variant
+### Link variant
+```js
 import React from 'react';
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
 import { CogIcon } from '@patternfly/react-icons';
@@ -111,7 +113,8 @@ Link = () => (
 );
 ```
 
-```js title=With-multiple-icon-badges
+### With multiple icon badges
+```js
 import React from 'react';
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
 import { CogIcon, OutlinedCheckCircleIcon } from '@patternfly/react-icons';
@@ -143,7 +146,8 @@ MultiIcon = () => (
 );
 ```
 
-```js title=With-text-badge
+### With text badge
+```js
 import React from 'react';
 import { CatalogTile } from '@patternfly/react-catalog-view-extension';
 import { pfLogo2 } from './examples/pfLogo2.svg'

diff --git a/...talog-view-extension/src/components/FilterSidePanel/examples/FilterSidePanel.md b/...talog-view-extension/src/components/FilterSidePanel/examples/FilterSidePanel.md
@@ -1,13 +1,11 @@
 ---
-title: 'Catalog view filter side panel'
-section: 'extensions'
-typescript: true
+id: Catalog view filter side panel
+section: extensions
 propComponents: ['FilterSidePanel', 'FilterSidePanelCategory', 'FilterSidePanelCategoryItem']
 ---
 
 import { FilterSidePanel, FilterSidePanelCategory, FilterSidePanelCategoryItem } from '@patternfly/react-catalog-view-extension';
 import { StarIcon, CcPaypalIcon, CcAmexIcon, CcDiscoverIcon, CcVisaIcon, CcMastercardIcon, CcDinersClubIcon } from '@patternfly/react-icons';
-import { TextInput } from '@patternfly/react-core';
 
 import './filterSidePanel.css';
 
@@ -21,7 +19,8 @@ This package is currently an extension. Extension components do not undergo the
 
 ## Examples
 
-```js title=Basic
+### Basic
+```js
 import React from 'react';
 import { FilterSidePanel, FilterSidePanelCategory, FilterSidePanelCategoryItem } from '@patternfly/react-catalog-view-extension';
 import { StarIcon, CcPaypalIcon, CcAmexIcon, CcDiscoverIcon, CcVisaIcon, CcMastercardIcon, CcDinersClubIcon } from '@patternfly/react-icons';

diff --git a/...ew-extension/src/components/PropertiesSidePanel/examples/PropertiesSidePanel.md b/...ew-extension/src/components/PropertiesSidePanel/examples/PropertiesSidePanel.md
@@ -1,7 +1,6 @@
 ---
-title: 'Catalog view properties side panel'
-section: 'extensions'
-typescript: true
+id: Catalog view properties side panel
+section: extensions
 propComponents: ['PropertiesSidePanel', 'PropertyItem']
 ---
 
@@ -17,7 +16,8 @@ This package is currently an extension. Extension components do not undergo the
 
 ## Examples
 
-```js title=Properties-Side-Panel-with-PropertyItems
+### Properties side panel with property items
+```js
 import React from 'react';
 import { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-view-extension';
 import { OkIcon, ExternalLinkAltIcon, GlobeIcon } from '@patternfly/react-icons';

diff --git a/...act-catalog-view-extension/src/components/VerticalTabs/examples/VerticalTabs.md b/...act-catalog-view-extension/src/components/VerticalTabs/examples/VerticalTabs.md
@@ -1,8 +1,7 @@
 ---
-title: 'Catalog view vertical tabs'
-section: 'extensions'
+id: Catalog view vertical tabs
+section: extensions
 propComponents: ['VerticalTabs', 'VerticalTabsTab']
-typescript: true
 ---
 
 import { VerticalTabs, VerticalTabsTab } from '@patternfly/react-catalog-view-extension';
@@ -14,7 +13,8 @@ Note: Vertical tabs lives in its own package at [`@patternfly/react-catalog-view
 This package is currently an extension. Extension components do not undergo the same rigorous design or coding review process as core PatternFly components. If enough members of the community find them useful, we will work to move them into our core PatternFly system by starting the design process for the idea.
 
 ## Examples
-```js title=Basic
+### Basic
+```js
 import React from 'react';
 import { VerticalTabs, VerticalTabsTab } from '@patternfly/react-catalog-view-extension';
 

diff --git a/packages/react-charts/README.md b/packages/react-charts/README.md
@@ -35,14 +35,13 @@ npm install @patternfly/react-charts --save
 
 It's strongly advised to use the PatternFly Base CSS in your whole project, or some components may diverge in appearance:
 
-```javascript
+```js
 import '@patternfly/react-core/dist/styles/base.css';
 ```
 
 #### Example Component Usage
 
-```javascript
-import React from 'react';
+```js
 import { Area } from '@patternfly/react-charts';
 
 export default <Area />;

diff --git a/packages/react-charts/src/components/ChartArea/examples/ChartArea.md b/packages/react-charts/src/components/ChartArea/examples/ChartArea.md
@@ -1,7 +1,6 @@
 ---
-title: 'Area chart'
-section: 'charts'
-typescript: true
+id: Area chart
+section: charts
 propComponents: [
   'Chart',
   'ChartArea',
@@ -26,7 +25,8 @@ Learn to build an area chart using a Katacoda tutorial starting with a simple ch
 [Start course](https://katacoda.com/patternfly/courses/react-charts/area-chart)
 
 ## Examples
-```js title=Basic-with-right-aligned-legend
+### Basic with right aligned legend
+```js
 import React from 'react';
 import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
 // import '@patternfly/patternfly/patternfly-charts.css'; // Required for mix-blend-mode CSS property
@@ -88,7 +88,8 @@ BasicRightAlignedLegend = (
 )
 ```
 
-```js title=Cyan-with-bottom-aligned-legend-and-axis-label
+### Cyan with bottom aligned legend and axis label
+```js
 import React from 'react';
 import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts';
 // import '@patternfly/patternfly/patternfly-charts.css'; // Required for mix-blend-mode CSS property
@@ -173,7 +174,8 @@ class BottomAlignedLegend extends React.Component {
 }
 ```
 
-```js title=Multi--color-(unordered)-bottom--left-aligned-legend-and-responsive-container
+### Multi-color (unordered) bottom-left aligned legend and responsive container
+```js
 import React from 'react';
 import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
 // import '@patternfly/patternfly/patternfly-charts.css'; // Required for mix-blend-mode CSS property

diff --git a/packages/react-charts/src/components/ChartBar/examples/ChartBar.md b/packages/react-charts/src/components/ChartBar/examples/ChartBar.md
@@ -1,7 +1,6 @@
 ---
-title: 'Bar chart'
-section: 'charts'
-typescript: true
+id: Bar chart
+section: charts
 propComponents: [
   'Chart',
   'ChartAxis',
@@ -25,7 +24,8 @@ Learn to build a bar chart using a Katacoda tutorial starting with a simple char
 [Start course](https://katacoda.com/patternfly/courses/react-charts/bar-chart)
 
 ## Examples
-```js title=Basic-with-right-aligned-legend
+### Basic with right aligned legend
+```js
 import React from 'react';
 import { Chart, ChartAxis, ChartBar, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
 
@@ -62,7 +62,8 @@ BasicRightAlignedLegend = (
 )
 ```
 
-```js title=Purple-with-bottom-aligned-legend
+### Purple with bottom aligned legend
+```js
 import React from 'react';
 import { Chart, ChartAxis, ChartBar, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
 
@@ -98,7 +99,8 @@ PurpleBottomLegend = (
 )
 ```
 
-```js title=Multi--color-(ordered)-with-bottom--left-aligned-legend
+### Multi-color (ordered) with bottom-left aligned legend
+```js
 import React from 'react';
 import { Chart, ChartAxis, ChartBar, ChartGroup, ChartThemeColor } from '@patternfly/react-charts';
 import { VictoryZoomContainer } from 'victory-zoom-container';
@@ -138,7 +140,8 @@ BottomLeftLegend = (
 )
 ```
 
-```js title=Single-with-right-aligned-legend
+### Single with right aligned legend
+```js
 import React from 'react';
 import { Chart, ChartBar, ChartVoronoiContainer } from '@patternfly/react-charts';