fix(docs): use ids and h3s (#4720)

* use ids and h3s * fix(popover,tooltip): missing props tables * fix example token/icon imports * fix build * fix table demo imports * update imgBrand import * remove console.log
patternfly · Aug 24, 2020 · a3f684f · a3f684f
1 parent 6b0126f
commit a3f684f
Show file tree

Hide file tree

Showing 64 changed files with 2,431 additions and 2,208 deletions.
diff --git a/.eslintrc-md.json b/.eslintrc-md.json
@@ -1,7 +1,8 @@
 {
   "plugins": [
     "markdown",
-    "react"
+    "react",
+    "patternfly-react"
   ],
   "parserOptions": {
     "ecmaVersion": 9,
@@ -20,6 +21,7 @@
     "spaced-comment": 2,
     "no-unused-vars": 0,
     "no-this-before-super": 2,
+    "patternfly-react/import-tokens-icons": "error",
     "react/jsx-uses-react": "error",
     "react/jsx-uses-vars": "error",
     "react/no-unknown-property": 2,

diff --git a/packages/eslint-plugin-patternfly-react/lib/rules/import-tokens-icons.js b/packages/eslint-plugin-patternfly-react/lib/rules/import-tokens-icons.js
@@ -1,3 +1,23 @@
+/**
+ * @param specifier module specifier
+ * @param moduleName module name (@patternfly/react-tokens or @patternfly/react-icons)
+ * @returns string of non-treeshaken import
+ */
+function makeImport(specifier, moduleName) {
+  let res = `import ${specifier.local.name} from '`;
+  res += moduleName.replace(/\/dist\/(js|esm)/, '');
+  res += '/dist/js';
+  if (moduleName.includes('icon')) {
+    res += '/icons/';
+    res += specifier.imported.name.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`).replace(/^-/, '');
+  } else {
+    res += `/${specifier.imported.name}`;
+  }
+  res += "';";
+
+  return res;
+}
+
 module.exports = {
   meta: {
     docs: {
@@ -26,15 +46,7 @@ module.exports = {
               fix(fixer) {
                 return fixer.replaceText(
                   node,
-                  esmSpecifiers
-                    .map(
-                      specifier =>
-                        `import ${specifier.local.name} from '${node.source.value.replace(
-                          /\/dist\/(js|esm)/,
-                          ''
-                        )}/dist/js/${specifier.imported.name}';`
-                    )
-                    .join('\n')
+                  esmSpecifiers.map(spec => makeImport(spec, node.source.value)).join('\n')
                 );
               }
             });

diff --git a/...react-catalog-view-extension/src/components/CatalogTile/examples/CatalogTile.md b/...react-catalog-view-extension/src/components/CatalogTile/examples/CatalogTile.md
@@ -5,8 +5,9 @@ propComponents: ['CatalogTile']
 ---
 
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
-import { CogIcon, OutlinedCheckCircleIcon } from '@patternfly/react-icons';
-import { pfLogo2 } from './pfLogo2.svg'
+import CogIcon from '@patternfly/react-icons/dist/js/icons/cog-icon';
+import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/js/icons/outlined-check-circle-icon';
+import pfLogo2 from './pfLogo2.svg';
 import './catalogTile.css';
 
 ## Introduction
@@ -20,8 +21,8 @@ This package is currently an extension. Extension components do not undergo the
 ```js
 import React from 'react';
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
-import { CogIcon } from '@patternfly/react-icons';
-import { pfLogo2 } from './pfLogo2.svg'
+import CogIcon from '@patternfly/react-icons/dist/js/icons/cog-icon';
+import pfLogo2 from './pfLogo2.svg';
 
 Basic = () => (
   <React.Fragment>
@@ -51,8 +52,9 @@ Basic = () => (
 ```js
 import React from 'react';
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
-import { CogIcon, OutlinedCheckCircleIcon } from '@patternfly/react-icons';
-import { pfLogo2 } from './pfLogo2.svg'
+import CogIcon from '@patternfly/react-icons/dist/js/icons/cog-icon';
+import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/js/icons/outlined-check-circle-icon';
+import pfLogo2 from './pfLogo2.svg';
 
 SimpleFooter = () => (
   <React.Fragment>
@@ -86,8 +88,8 @@ SimpleFooter = () => (
 ```js
 import React from 'react';
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
-import { CogIcon } from '@patternfly/react-icons';
-import { pfLogo2 } from './pfLogo2.svg'
+import CogIcon from '@patternfly/react-icons/dist/js/icons/cog-icon';
+import pfLogo2 from './pfLogo2.svg';
 
 Link = () => (
   <React.Fragment>
@@ -117,8 +119,9 @@ Link = () => (
 ```js
 import React from 'react';
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
-import { CogIcon, OutlinedCheckCircleIcon } from '@patternfly/react-icons';
-import { pfLogo2 } from './pfLogo2.svg'
+import CogIcon from '@patternfly/react-icons/dist/js/icons/cog-icon';
+import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/js/icons/outlined-check-circle-icon';
+import pfLogo2 from './pfLogo2.svg';
 
 MultiIcon = () => (
   <React.Fragment>
@@ -150,7 +153,7 @@ MultiIcon = () => (
 ```js
 import React from 'react';
 import { CatalogTile } from '@patternfly/react-catalog-view-extension';
-import { pfLogo2 } from './pfLogo2.svg'
+import pfLogo2 from './pfLogo2.svg';
 
 TextBadge = () => (
   <React.Fragment>
@@ -177,8 +180,8 @@ TextBadge = () => (
 ```js
 import React from 'react';
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
-import { CogIcon } from '@patternfly/react-icons';
-import { pfLogo2 } from './pfLogo2.svg'
+import CogIcon from '@patternfly/react-icons/dist/js/icons/cog-icon';
+import pfLogo2 from './pfLogo2.svg';
 
 Children = () => (
   <React.Fragment>

diff --git a/...talog-view-extension/src/components/FilterSidePanel/examples/FilterSidePanel.md b/...talog-view-extension/src/components/FilterSidePanel/examples/FilterSidePanel.md
@@ -5,7 +5,13 @@ propComponents: ['FilterSidePanel', 'FilterSidePanelCategory', 'FilterSidePanelC
 ---
 
 import { FilterSidePanel, FilterSidePanelCategory, FilterSidePanelCategoryItem } from '@patternfly/react-catalog-view-extension';
-import { StarIcon, CcPaypalIcon, CcAmexIcon, CcDiscoverIcon, CcVisaIcon, CcMastercardIcon, CcDinersClubIcon } from '@patternfly/react-icons';
+import StarIcon from '@patternfly/react-icons/dist/js/icons/star-icon';
+import CcPaypalIcon from '@patternfly/react-icons/dist/js/icons/cc-paypal-icon';
+import CcAmexIcon from '@patternfly/react-icons/dist/js/icons/cc-amex-icon';
+import CcDiscoverIcon from '@patternfly/react-icons/dist/js/icons/cc-discover-icon';
+import CcVisaIcon from '@patternfly/react-icons/dist/js/icons/cc-visa-icon';
+import CcMastercardIcon from '@patternfly/react-icons/dist/js/icons/cc-mastercard-icon';
+import CcDinersClubIcon from '@patternfly/react-icons/dist/js/icons/cc-diners-club-icon';
 
 import './filterSidePanel.css';
 
@@ -23,7 +29,13 @@ This package is currently an extension. Extension components do not undergo the
 ```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';
+import StarIcon from '@patternfly/react-icons/dist/js/icons/star-icon';
+import CcPaypalIcon from '@patternfly/react-icons/dist/js/icons/cc-paypal-icon';
+import CcAmexIcon from '@patternfly/react-icons/dist/js/icons/cc-amex-icon';
+import CcDiscoverIcon from '@patternfly/react-icons/dist/js/icons/cc-discover-icon';
+import CcVisaIcon from '@patternfly/react-icons/dist/js/icons/cc-visa-icon';
+import CcMastercardIcon from '@patternfly/react-icons/dist/js/icons/cc-mastercard-icon';
+import CcDinersClubIcon from '@patternfly/react-icons/dist/js/icons/cc-diners-club-icon';
 import { TextInput } from '@patternfly/react-core';
 
 class MockFilterSidePanelExample extends React.Component {

diff --git a/...ew-extension/src/components/PropertiesSidePanel/examples/PropertiesSidePanel.md b/...ew-extension/src/components/PropertiesSidePanel/examples/PropertiesSidePanel.md
@@ -5,7 +5,9 @@ propComponents: ['PropertiesSidePanel', 'PropertyItem']
 ---
 
 import { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-view-extension';
-import { OkIcon, ExternalLinkAltIcon, GlobeIcon } from '@patternfly/react-icons';
+import OkIcon from '@patternfly/react-icons/dist/js/icons/ok-icon';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import GlobeIcon from '@patternfly/react-icons/dist/js/icons/globe-icon';
 import './propertiesSidePanel.css';
 
 ## Introduction
@@ -20,7 +22,9 @@ This package is currently an extension. Extension components do not undergo the
 ```js
 import React from 'react';
 import { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-view-extension';
-import { OkIcon, ExternalLinkAltIcon, GlobeIcon } from '@patternfly/react-icons';
+import OkIcon from '@patternfly/react-icons/dist/js/icons/ok-icon';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import GlobeIcon from '@patternfly/react-icons/dist/js/icons/globe-icon';
 
 PropertiesSidePanelWithItems = () => (
       <div style={{ display: 'inline-block', padding: '15px', border: '1px solid grey' }}>

diff --git a/packages/react-charts/src/components/ChartLegend/examples/ChartLegend.md b/packages/react-charts/src/components/ChartLegend/examples/ChartLegend.md
@@ -11,6 +11,7 @@ import {
   Chart,
   ChartArea,
   ChartAxis,
+  ChartBar,
   ChartBullet,
   ChartDonut,
   ChartGroup,

diff --git a/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md b/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md
@@ -7,14 +7,26 @@ propComponents: [
 hideDarkMode: true
 ---
 
-import { Chart, ChartArea, ChartAxis, ChartBar, ChartDonut, ChartGroup, ChartLegend, ChartLine, ChartStack, ChartThemeColor, ChartThemeVariant, ChartVoronoiContainer, getCustomTheme } from '@patternfly/react-charts';
 import {
-  chart_color_blue_300,
-  chart_color_green_300,
-  chart_color_cyan_300,
-  chart_color_gold_300,
-  chart_color_purple_300
-} from '@patternfly/react-tokens';
+  Chart,
+  ChartArea,
+  ChartAxis,
+  ChartBar,
+  ChartDonut,
+  ChartGroup,
+  ChartLegend,
+  ChartLine,
+  ChartStack,
+  ChartThemeColor,
+  ChartThemeVariant,
+  ChartVoronoiContainer,
+  getCustomTheme
+} from '@patternfly/react-charts';
+import chart_color_blue_300 from '@patternfly/react-tokens/dist/js/chart_color_blue_300';
+import chart_color_green_300 from '@patternfly/react-tokens/dist/js/chart_color_green_300';
+import chart_color_cyan_300 from '@patternfly/react-tokens/dist/js/chart_color_cyan_300';
+import chart_color_gold_300 from '@patternfly/react-tokens/dist/js/chart_color_gold_300';
+import chart_color_purple_300 from '@patternfly/react-tokens/dist/js/chart_color_purple_300';
 
 ## Introduction
 Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)!
@@ -27,7 +39,7 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s
 import React from 'react';
 import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
 
-  Green = (
+Green = (
   <div>
     <p>This demonstrates how to apply basic theme colors</p>
     <div style={{ height: '275px', width: '450px' }}>
@@ -101,7 +113,7 @@ import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartVoronoiC
 import React from 'react';
 import { ChartDonut, ChartThemeColor, ChartThemeVariant } from '@patternfly/react-charts';
 
-  MultiColor = (
+MultiColor = (
   <div>
     <p>This demonstrates how to apply theme colors for ordered charts like bar, donut, pie, and stack</p>
     <div style={{ height: '230px', width: '350px' }}>
@@ -201,6 +213,10 @@ MultiColorUnordered = (
 ```js
 import React from 'react';
 import { Chart, ChartAxis, ChartBar, ChartLegend, ChartStack, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts';
+import chart_color_blue_300 from '@patternfly/react-tokens/dist/js/chart_color_blue_300';
+import chart_color_green_300 from '@patternfly/react-tokens/dist/js/chart_color_green_300';
+import chart_color_gold_300 from '@patternfly/react-tokens/dist/js/chart_color_gold_300';
+import chart_color_purple_300 from '@patternfly/react-tokens/dist/js/chart_color_purple_300';
 
 CustomColors = (
   <div>
@@ -301,12 +317,10 @@ CustomColors = (
 ```js
 import React from 'react';
 import { Chart, ChartBar, ChartAxis, ChartGroup, ChartThemeColor, ChartThemeVariant, ChartVoronoiContainer, getCustomTheme } from '@patternfly/react-charts';
-import {
-  chart_color_blue_300,
-  chart_color_green_300,
-  chart_color_cyan_300,
-  chart_color_gold_300,
-} from '@patternfly/react-tokens';
+import chart_color_blue_300 from '@patternfly/react-tokens/dist/js/chart_color_blue_300';
+import chart_color_green_300 from '@patternfly/react-tokens/dist/js/chart_color_green_300';
+import chart_color_cyan_300 from '@patternfly/react-tokens/dist/js/chart_color_cyan_300';
+import chart_color_gold_300 from '@patternfly/react-tokens/dist/js/chart_color_gold_300';
 
 class MultiColorChart extends React.Component {
   constructor(props) {

diff --git a/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md b/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md
@@ -11,17 +11,27 @@ propComponents: [
 hideDarkMode: true
 ---
 
-import { Chart, ChartArea, ChartAxis, ChartGroup, ChartLegend, ChartThreshold, ChartThemeColor, ChartThemeVariant, ChartVoronoiContainer } from '@patternfly/react-charts';
-import '@patternfly/patternfly/patternfly-charts.css';
 import {
-  chart_color_blue_300,
-  chart_color_orange_300
-} from '@patternfly/react-tokens';
+  Chart,
+  ChartArea,
+  ChartAxis,
+  ChartGroup,
+  ChartLegend,
+  ChartThreshold,
+  ChartThemeColor,
+  ChartThemeVariant,
+  ChartVoronoiContainer
+} from '@patternfly/react-charts';
+import '@patternfly/patternfly/patternfly-charts.css';
+import chart_color_blue_300 from '@patternfly/react-tokens/dist/js/chart_color_blue_300';
+import chart_color_orange_300 from '@patternfly/react-tokens/dist/js/chart_color_orange_300';
+
 
 ## Introduction
 Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)!
 
-PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.
+PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library,
+  along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.
 
 ## Examples
 ### Multi-color (unordered) with responsive container
@@ -37,10 +47,8 @@ import {
   ChartThemeColor,
   ChartVoronoiContainer
 } from '@patternfly/react-charts';
-import {
-  chart_color_blue_300,
-  chart_color_orange_300,
-} from '@patternfly/react-tokens';
+import chart_color_blue_300 from '@patternfly/react-tokens/dist/js/chart_color_blue_300';
+import chart_color_orange_300 from '@patternfly/react-tokens/dist/js/chart_color_orange_300';
 
 class MultiColorChart extends React.Component {
   constructor(props) {

diff --git a/...s/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md b/...s/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md
@@ -6,7 +6,7 @@ propComponents: ['ApplicationLauncher', 'ApplicationLauncherItem']
 ouia: true
 ---
 
-import { HelpIcon, StarIcon } from '@patternfly/react-icons';
+import HelpIcon from '@patternfly/react-icons/dist/js/icons/help-icon';
 import { Link } from '@reach/router';
 import pfIcon from './pf-logo-small.svg';
 
@@ -529,7 +529,7 @@ class ApplicationLauncherFavorites extends React.Component {
 ```js
 import React from 'react';
 import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core';
-import { HelpIcon } from '@patternfly/react-icons';
+import HelpIcon from '@patternfly/react-icons/dist/js/icons/help-icon';
 
 class ApplicationLauncheIcon extends React.Component {
   constructor(props) {