From 1ccca663d84ebb8a41599a3942dc356a72ee529a Mon Sep 17 00:00:00 2001
From: Patrick Riley <priley86@gmail.com>
Date: Mon, 8 Jan 2018 09:45:31 -0500
Subject: [PATCH] docs(story-template): modify the default template and add
 inline templates

---
 src/components/Alert/Alert.stories.js         |  3 +-
 src/components/Badge/Badge.stories.js         |  6 +-
 .../Breadcrumb/Breadcrumb.stories.js          |  5 +-
 src/components/Button/Button.stories.js       | 89 ++++++++++-------
 src/components/Chart/Chart.stories.js         | 21 ----
 .../Chart/Stories/AreaChartStory.js           | 46 +++++----
 src/components/Chart/Stories/BarChartStory.js | 95 ++++++++++--------
 .../Chart/Stories/DonutChartStory.js          | 70 +++++++------
 .../Chart/Stories/LineChartStory.js           | 98 +++++++++++--------
 src/components/Chart/Stories/PieChartStory.js | 39 +++++---
 .../DropdownKebab/DropdownKebab.stories.js    |  5 +-
 .../EmptyState/EmptyState.stories.js          |  3 +-
 src/components/Filter/Filter.stories.js       |  4 +-
 src/components/Form/Form.stories.js           | 95 +++++++++++++-----
 src/components/Grid/Grid.stories.js           |  3 +-
 src/components/Label/Label.stories.js         | 16 +--
 src/components/ListGroup/ListGroup.stories.js | 17 +---
 src/components/ListView/ListView.stories.js   |  4 +-
 src/components/MenuItem/MenuItem.stories.js   |  7 +-
 src/components/Modal/Modal.stories.js         | 46 ++++-----
 src/components/Popover/Popover.stories.js     | 16 +--
 src/components/Spinner/Spinner.stories.js     |  5 +-
 .../ToastNotification.stories.js              | 28 ++++--
 src/components/Tooltip/Tooltip.stories.js     | 16 +--
 src/components/Wizard/Wizard.stories.js       |  4 +-
 storybook/constants.js                        | 16 +++
 storybook/decorators/storyTemplates.js        | 92 +++++++++++++----
 27 files changed, 498 insertions(+), 351 deletions(-)
 create mode 100644 storybook/constants.js

diff --git a/src/components/Alert/Alert.stories.js b/src/components/Alert/Alert.stories.js
index 400802cc01f..df88133de69 100644
--- a/src/components/Alert/Alert.stories.js
+++ b/src/components/Alert/Alert.stories.js
@@ -3,6 +3,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, text } from '@storybook/addon-knobs';
 import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from '../../../storybook/constants';
 import { Alert } from './index';
 
 const stories = storiesOf('Alert', module);
@@ -11,7 +12,7 @@ stories.addDecorator(
   defaultTemplate({
     title: 'Alert / Inline Notification',
     documentationLink:
-      'http://www.patternfly.org/pattern-library/communication/inline-notifications/'
+      DOCUMENTATION_URL.PATTERNFLY_ORG_COMMUNICATION + 'inline-notifications/'
   })
 );
 
diff --git a/src/components/Badge/Badge.stories.js b/src/components/Badge/Badge.stories.js
index 4263b955d9f..addec75f458 100644
--- a/src/components/Badge/Badge.stories.js
+++ b/src/components/Badge/Badge.stories.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from '../../../storybook/constants';
 import { Badge } from './index';
 
 const stories = storiesOf('Badges', module);
@@ -9,7 +10,7 @@ const description = (
   <p>
     This component is based on React Bootstrap Badge component. Badges easily
     highlight new or unread items. See{' '}
-    <a href="https://react-bootstrap.github.io/components.html#badges">
+    <a href={DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT + 'badge/'}>
       React Bootstrap Docs
     </a>{' '}
     for complete Badge component documentation.
@@ -19,8 +20,7 @@ const description = (
 stories.addDecorator(
   defaultTemplate({
     title: 'Badges',
-    documentationLink:
-      'http://www.patternfly.org/pattern-library/widgets/#badges',
+    documentationLink: DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS + '#badges',
     description: description
   })
 );
diff --git a/src/components/Breadcrumb/Breadcrumb.stories.js b/src/components/Breadcrumb/Breadcrumb.stories.js
index 74c15aa3418..88022519dca 100644
--- a/src/components/Breadcrumb/Breadcrumb.stories.js
+++ b/src/components/Breadcrumb/Breadcrumb.stories.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from '../../../storybook/constants';
 import { Breadcrumb } from './index';
 
 const stories = storiesOf('Breadcrumb', module);
@@ -9,7 +10,7 @@ const description = (
   <p>
     This component is based on React Bootstrap Breadcrumb component. Breadcrumbs
     are used to indicate the current page's location. See{' '}
-    <a href="https://react-bootstrap.github.io/components.html#breadcrumbs">
+    <a href={DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT + 'breadcrumb/'}>
       React Bootstrap Docs
     </a>{' '}
     for complete Breadcrumb component documentation.
@@ -20,7 +21,7 @@ stories.addDecorator(
   defaultTemplate({
     title: 'Breadcrumb',
     documentationLink:
-      'http://www.patternfly.org/pattern-library/navigation/breadcrumbs/',
+      DOCUMENTATION_URL.PATTERNFLY_ORG_NAVIGATION + 'breadcrumbs/',
     description: description
   })
 );
diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.js
index 5d608f31702..9d486134cb5 100644
--- a/src/components/Button/Button.stories.js
+++ b/src/components/Button/Button.stories.js
@@ -2,52 +2,44 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, select } from '@storybook/addon-knobs';
-import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import { inlineTemplate } from '../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from '../../../storybook/constants';
 import { Grid, Row, Col, MenuItem } from '../../index';
 import { Button, ButtonGroup, DropdownButton, SplitButton } from './index';
 import { BUTTON_BS_STYLES } from './constants';
 
 const stories = storiesOf('Button', module);
 
-const description = (
-  <p>
-    This component is based on React Bootstrap Button component. See{' '}
-    <a href="https://react-bootstrap.github.io/components.html#buttons">
-      React Bootstrap Docs
-    </a>{' '}
-    for complete Button component documentation.
-  </p>
-);
-
 stories.addDecorator(withKnobs);
-stories.addDecorator(
-  defaultTemplate({
-    title: 'Button',
-    documentationLink:
-      'http://www.patternfly.org/pattern-library/widgets/#buttons',
-    description: description
-  })
-);
 
-stories.addWithInfo('Button', '', () => (
-  <div>
-    <p>
-      <Button>Default Button</Button>{' '}
-      <Button bsStyle="primary">Primary Button</Button>{' '}
-      <Button bsStyle="danger">Danger Button</Button>{' '}
-      <Button bsStyle="link">Link Button</Button>
-    </p>
-    <p>
-      <Button bsSize="large">Large Button</Button>{' '}
-      <Button>Default Button</Button>{' '}
-      <Button bsSize="small">Small Button</Button>{' '}
-      <Button bsSize="xsmall">Extra Small Button</Button>
-    </p>
-  </div>
-));
+stories.addWithInfo('Button', '', () => {
+  let story = (
+    <div>
+      <p>
+        <Button>Default Button</Button>{' '}
+        <Button bsStyle="primary">Primary Button</Button>{' '}
+        <Button bsStyle="danger">Danger Button</Button>{' '}
+        <Button bsStyle="link">Link Button</Button>
+      </p>
+      <p>
+        <Button bsSize="large">Large Button</Button>{' '}
+        <Button>Default Button</Button>{' '}
+        <Button bsSize="small">Small Button</Button>{' '}
+        <Button bsSize="xsmall">Extra Small Button</Button>
+      </p>
+    </div>
+  );
+  return inlineTemplate({
+    title: 'Button',
+    documentationLink: DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS + '#buttons',
+    reactBootstrapDocumentationLink:
+      DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT + 'buttons/',
+    story: story
+  });
+});
 
 stories.addWithInfo('ButtonGroup', () => {
-  return (
+  let story = (
     <Grid>
       <Row style={{ marginBottom: '20px' }}>
         <Col xs={12} md={3}>
@@ -141,6 +133,14 @@ stories.addWithInfo('ButtonGroup', () => {
       </Row>
     </Grid>
   );
+  return inlineTemplate({
+    title: 'ButtonGroup',
+    documentationLink:
+      DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS + '#button-groups',
+    reactBootstrapDocumentationLink:
+      DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT + 'button-group/',
+    story: story
+  });
 });
 
 stories.addWithInfo('DropdownButton', '', () => {
@@ -150,7 +150,7 @@ stories.addWithInfo('DropdownButton', '', () => {
   const props = { bsStyle, title: bsStyle, id: 'dropdown-example' };
   if (bsSize) props.bsSize = bsSize;
 
-  return (
+  let story = (
     <DropdownButton {...props} onClick={action('onClick')}>
       <MenuItem eventKey="1">Action</MenuItem>
       <MenuItem eventKey="2">Another action</MenuItem>
@@ -161,6 +161,12 @@ stories.addWithInfo('DropdownButton', '', () => {
       <MenuItem eventKey="4">Separated link</MenuItem>
     </DropdownButton>
   );
+  return inlineTemplate({
+    title: 'DropdownButton',
+    reactBootstrapDocumentationLink:
+      DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT + 'dropdowns/',
+    story: story
+  });
 });
 
 stories.addWithInfo('SplitButton', '', () => {
@@ -170,7 +176,7 @@ stories.addWithInfo('SplitButton', '', () => {
   const props = { bsStyle, title: bsStyle, id: 'dropdown-example' };
   if (bsSize) props.bsSize = bsSize;
 
-  return (
+  let story = (
     <SplitButton {...props} onClick={action('onClick')}>
       <MenuItem eventKey="1">Action</MenuItem>
       <MenuItem eventKey="2">Another action</MenuItem>
@@ -181,4 +187,11 @@ stories.addWithInfo('SplitButton', '', () => {
       <MenuItem eventKey="4">Separated link</MenuItem>
     </SplitButton>
   );
+
+  return inlineTemplate({
+    title: 'SplitButton',
+    reactBootstrapDocumentationLink:
+      DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT + 'dropdowns/',
+    story: story
+  });
 });
diff --git a/src/components/Chart/Chart.stories.js b/src/components/Chart/Chart.stories.js
index d11fe9d0dec..a54a9550326 100644
--- a/src/components/Chart/Chart.stories.js
+++ b/src/components/Chart/Chart.stories.js
@@ -1,7 +1,4 @@
-import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
-
 import {
   areaChartAddWithInfo,
   barChartAddWithInfo,
@@ -11,24 +8,6 @@ import {
 } from './Stories';
 
 const stories = storiesOf('Chart', module);
-const description = (
-  <p>
-    This component is based on Patternfly Chart component. See{' '}
-    <a href="http://www.patternfly.org/pattern-library/data-visualization/line-chart/">
-      Patternfly Chart Docs
-    </a>{' '}
-    for complete Chart component documentation.
-  </p>
-);
-
-stories.addDecorator(
-  defaultTemplate({
-    title: 'Chart',
-    documentationLink:
-      'http://www.patternfly.org/pattern-library/data-visualization/line-chart/',
-    description: description
-  })
-);
 
 /**
  * Chart stories
diff --git a/src/components/Chart/Stories/AreaChartStory.js b/src/components/Chart/Stories/AreaChartStory.js
index a72d94f4383..8451b24f06d 100644
--- a/src/components/Chart/Stories/AreaChartStory.js
+++ b/src/components/Chart/Stories/AreaChartStory.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import { AreaChart, SingleAreaChart } from '../index';
+import { inlineTemplate } from '../../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from '../../../../storybook/constants';
 
 /**
  * Story constants
@@ -27,27 +29,35 @@ const singleAreaChartData = {
  */
 
 const areaChartAddWithInfo = stories => {
-  stories.addWithInfo('Area Charts', '', () => (
-    <div>
-      <h2>Area Chart</h2>
+  stories.addWithInfo('Area Charts', '', () => {
+    let story = (
       <div>
-        <AreaChart
-          id="area-chart-1"
-          size={{ width: 600 }}
-          data={areaChartData}
-        />
-      </div>
+        <h2>Area Chart</h2>
+        <div>
+          <AreaChart
+            id="area-chart-1"
+            size={{ width: 600 }}
+            data={areaChartData}
+          />
+        </div>
 
-      <h2>Single Area Chart</h2>
-      <div>
-        <SingleAreaChart
-          id="area-chart-2"
-          size={{ width: 600 }}
-          data={singleAreaChartData}
-        />
+        <h2>Single Area Chart</h2>
+        <div>
+          <SingleAreaChart
+            id="area-chart-2"
+            size={{ width: 600 }}
+            data={singleAreaChartData}
+          />
+        </div>
       </div>
-    </div>
-  ));
+    );
+    return inlineTemplate({
+      title: 'Area Charts',
+      documentationLink:
+        DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION + 'area-chart/',
+      story: story
+    });
+  });
 };
 
 export default areaChartAddWithInfo;
diff --git a/src/components/Chart/Stories/BarChartStory.js b/src/components/Chart/Stories/BarChartStory.js
index f3c4cdfac90..9719c92b3ce 100644
--- a/src/components/Chart/Stories/BarChartStory.js
+++ b/src/components/Chart/Stories/BarChartStory.js
@@ -3,6 +3,9 @@ import React from 'react';
 import { patternfly } from '../../../common/patternfly';
 import { BarChart, GroupedBarChart, StackedBarChart } from '../index';
 
+import { inlineTemplate } from '../../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from '../../../../storybook/constants';
+
 /**
  * BarChart constants
  */
@@ -71,53 +74,61 @@ const horizontalBarChartConfigAxis = {
  */
 
 const barChartAddWithInfo = stories => {
-  stories.addWithInfo('Bar Charts', '', () => (
-    <div>
-      <h2> Bar Chart</h2>
+  stories.addWithInfo('Bar Charts', '', () => {
+    let story = (
       <div>
-        <BarChart
-          id="bar-chart-1"
-          size={{ width: 400 }}
-          axis={barChartConfigAxis}
-          data={barChartConfigData}
-          categories={categories}
-        />
-      </div>
+        <h2> Bar Chart</h2>
+        <div>
+          <BarChart
+            id="bar-chart-1"
+            size={{ width: 400 }}
+            axis={barChartConfigAxis}
+            data={barChartConfigData}
+            categories={categories}
+          />
+        </div>
 
-      <h2>Grouped Bar Chart</h2>
-      <div>
-        <GroupedBarChart
-          id="bar-chart-2"
-          size={{ width: 400 }}
-          axis={groupedBarChartConfigAxis}
-          data={groupedBarChartConfigData}
-          color={groupedBarChartConfigColor}
-        />
-      </div>
+        <h2>Grouped Bar Chart</h2>
+        <div>
+          <GroupedBarChart
+            id="bar-chart-2"
+            size={{ width: 400 }}
+            axis={groupedBarChartConfigAxis}
+            data={groupedBarChartConfigData}
+            color={groupedBarChartConfigColor}
+          />
+        </div>
 
-      <h2>Stacked Bar Chart</h2>
-      <div>
-        <StackedBarChart
-          id="bar-chart-3"
-          size={{ width: 400 }}
-          axis={stackedBarChartConfigAxis}
-          data={stackedBarChartConfigData}
-          color={groupedBarChartConfigColor}
-        />
-      </div>
+        <h2>Stacked Bar Chart</h2>
+        <div>
+          <StackedBarChart
+            id="bar-chart-3"
+            size={{ width: 400 }}
+            axis={stackedBarChartConfigAxis}
+            data={stackedBarChartConfigData}
+            color={groupedBarChartConfigColor}
+          />
+        </div>
 
-      <h2>Horizontal Bar Chart</h2>
-      <div>
-        <GroupedBarChart
-          id="bar-chart-4"
-          size={{ width: 400 }}
-          axis={horizontalBarChartConfigAxis}
-          data={groupedBarChartConfigData}
-          color={groupedBarChartConfigColor}
-        />
+        <h2>Horizontal Bar Chart</h2>
+        <div>
+          <GroupedBarChart
+            id="bar-chart-4"
+            size={{ width: 400 }}
+            axis={horizontalBarChartConfigAxis}
+            data={groupedBarChartConfigData}
+            color={groupedBarChartConfigColor}
+          />
+        </div>
       </div>
-    </div>
-  ));
+    );
+    return inlineTemplate({
+      title: 'Bar Charts',
+      documentationLink:
+        DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION + 'bar-chart/',
+      story: story
+    });
+  });
 };
 
 export default barChartAddWithInfo;
diff --git a/src/components/Chart/Stories/DonutChartStory.js b/src/components/Chart/Stories/DonutChartStory.js
index 7970b183216..ce38866c48d 100644
--- a/src/components/Chart/Stories/DonutChartStory.js
+++ b/src/components/Chart/Stories/DonutChartStory.js
@@ -2,6 +2,9 @@ import React from 'react';
 import { patternfly } from '../../../common/patternfly';
 import { DonutChart } from '../index';
 
+import { inlineTemplate } from '../../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from '../../../../storybook/constants';
+
 /**
  * DonutChart constants
  */
@@ -50,38 +53,47 @@ const donutRightConfigTitle = { type: 'total', secondary: 'Animals' };
  */
 
 const donutChartAddWithInfo = stories => {
-  stories.addWithInfo('Donut Charts', '', () => (
-    <div>
-      <h2>Donut Chart - Utilization</h2>
+  stories.addWithInfo('Donut Charts', '', () => {
+    let story = (
       <div>
-        <DonutChart
-          id="donunt-chart-1"
-          size={{
-            width: 210,
-            height: 210
-          }}
-          data={donutConfigData}
-          tooltip={donutConfigTooltip}
-          title={{ type: 'max' }}
-        />
-      </div>
+        <h2>Donut Chart - Utilization</h2>
+        <div>
+          <DonutChart
+            id="donunt-chart-1"
+            size={{
+              width: 210,
+              height: 210
+            }}
+            data={donutConfigData}
+            tooltip={donutConfigTooltip}
+            title={{ type: 'max' }}
+          />
+        </div>
 
-      <h2>Donut Chart - Relationship to a Whole</h2>
-      <div>
-        <DonutChart
-          id="donunt-chart-2"
-          size={{
-            width: 210,
-            height: 210
-          }}
-          data={donutRightConfigData}
-          tooltip={donutRightConfigTooltip}
-          title={donutRightConfigTitle}
-          legend={donutRightConfigLegend}
-        />
+        <h2>Donut Chart - Relationship to a Whole</h2>
+        <div>
+          <DonutChart
+            id="donunt-chart-2"
+            size={{
+              width: 210,
+              height: 210
+            }}
+            data={donutRightConfigData}
+            tooltip={donutRightConfigTooltip}
+            title={donutRightConfigTitle}
+            legend={donutRightConfigLegend}
+          />
+        </div>
       </div>
-    </div>
-  ));
+    );
+
+    return inlineTemplate({
+      title: 'Donut Charts',
+      documentationLink:
+        DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION + 'donut-chart/',
+      story: story
+    });
+  });
 };
 
 export default donutChartAddWithInfo;
diff --git a/src/components/Chart/Stories/LineChartStory.js b/src/components/Chart/Stories/LineChartStory.js
index 131b6dadfab..640f40ac80b 100644
--- a/src/components/Chart/Stories/LineChartStory.js
+++ b/src/components/Chart/Stories/LineChartStory.js
@@ -1,6 +1,9 @@
 import React from 'react';
 import { LineChart, SingleLineChart, SparklineChart } from '../index';
 
+import { inlineTemplate } from '../../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from '../../../../storybook/constants';
+
 /**
  * LineChart constants
  */
@@ -36,55 +39,64 @@ const singleSplineChartConfigData = {
  */
 
 const lineChartAddWithInfo = stories => {
-  stories.addWithInfo('Line Charts', '', () => (
-    <div>
-      <h2>Sparkline</h2>
+  stories.addWithInfo('Line Charts', '', () => {
+    let story = (
       <div>
-        <SparklineChart
-          id="line-chart-1"
-          data={singleLineChartConfigData}
-          size={{ width: 200, height: 40 }}
-        />
-      </div>
-      <div>Less than one year remaining</div>
+        <h2>Sparkline</h2>
+        <div>
+          <SparklineChart
+            id="line-chart-1"
+            data={singleLineChartConfigData}
+            size={{ width: 200, height: 40 }}
+          />
+        </div>
+        <div>Less than one year remaining</div>
 
-      <h2>Line Chart</h2>
-      <div>
-        <LineChart
-          id="line-chart-2"
-          data={lineChartConfigData}
-          size={{ width: 600 }}
-        />
-      </div>
+        <h2>Line Chart</h2>
+        <div>
+          <LineChart
+            id="line-chart-2"
+            data={lineChartConfigData}
+            size={{ width: 600 }}
+          />
+        </div>
 
-      <h2>Single Line Chart</h2>
-      <div>
-        <SingleLineChart
-          id="line-chart-3"
-          data={singleLineChartConfigData}
-          size={{ width: 600 }}
-        />
-      </div>
+        <h2>Single Line Chart</h2>
+        <div>
+          <SingleLineChart
+            id="line-chart-3"
+            data={singleLineChartConfigData}
+            size={{ width: 600 }}
+          />
+        </div>
 
-      <h2>Spline Chart</h2>
-      <div>
-        <LineChart
-          id="line-chart-4"
-          data={splineChartConfigData}
-          size={{ width: 600 }}
-        />
-      </div>
+        <h2>Spline Chart</h2>
+        <div>
+          <LineChart
+            id="line-chart-4"
+            data={splineChartConfigData}
+            size={{ width: 600 }}
+          />
+        </div>
 
-      <h2>Single Spline Chart</h2>
-      <div>
-        <SingleLineChart
-          id="line-chart-5"
-          data={singleSplineChartConfigData}
-          size={{ width: 600 }}
-        />
+        <h2>Single Spline Chart</h2>
+        <div>
+          <SingleLineChart
+            id="line-chart-5"
+            data={singleSplineChartConfigData}
+            size={{ width: 600 }}
+          />
+        </div>
       </div>
-    </div>
-  ));
+    );
+
+    return inlineTemplate({
+      title: 'Line Charts',
+      documentationLink:
+        DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION + 'line-chart/',
+      story: story
+    });
+  });
 };
 
 export default lineChartAddWithInfo;
diff --git a/src/components/Chart/Stories/PieChartStory.js b/src/components/Chart/Stories/PieChartStory.js
index 11f1f32db94..545fbadebea 100644
--- a/src/components/Chart/Stories/PieChartStory.js
+++ b/src/components/Chart/Stories/PieChartStory.js
@@ -2,6 +2,9 @@ import React from 'react';
 import { patternfly } from '../../../common/patternfly';
 import { PieChart } from '../index';
 
+import { inlineTemplate } from '../../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from '../../../../storybook/constants';
+
 /**
  * PieChart constants
  */
@@ -25,22 +28,30 @@ const pieChartRightConfigLegend = {
  */
 
 const pieChartAddWithInfo = stories => {
-  stories.addWithInfo('Pie Charts', '', () => (
-    <div>
-      <h2>Pie Chart - Relationship to a Whole</h2>
+  stories.addWithInfo('Pie Charts', '', () => {
+    let story = (
       <div>
-        <PieChart
-          id="pie-chart-1"
-          size={{
-            width: 251,
-            height: 161
-          }}
-          data={pieChartRightConfigData}
-          legend={pieChartRightConfigLegend}
-        />
+        <h2>Pie Chart - Relationship to a Whole</h2>
+        <div>
+          <PieChart
+            id="pie-chart-1"
+            size={{
+              width: 251,
+              height: 161
+            }}
+            data={pieChartRightConfigData}
+            legend={pieChartRightConfigLegend}
+          />
+        </div>
       </div>
-    </div>
-  ));
+    );
+    return inlineTemplate({
+      title: 'Pie Charts',
+      documentationLink:
+        DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION + 'pie-chart/',
+      story: story
+    });
+  });
 };
 
 export default pieChartAddWithInfo;
diff --git a/src/components/DropdownKebab/DropdownKebab.stories.js b/src/components/DropdownKebab/DropdownKebab.stories.js
index ff75fe6c27c..0190b538bf5 100644
--- a/src/components/DropdownKebab/DropdownKebab.stories.js
+++ b/src/components/DropdownKebab/DropdownKebab.stories.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withKnobs, boolean } from '@storybook/addon-knobs';
-
 import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from '../../../storybook/constants';
 import { Button } from '../Button';
 import { MenuItem } from '../MenuItem';
 import { DropdownKebab } from './index';
@@ -12,8 +12,7 @@ stories.addDecorator(withKnobs);
 stories.addDecorator(
   defaultTemplate({
     title: 'Kebab Dropdown',
-    documentationLink:
-      'http://www.patternfly.org/pattern-library/widgets/#kebabs'
+    documentationLink: DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS + '#kebabs'
   })
 );
 
diff --git a/src/components/EmptyState/EmptyState.stories.js b/src/components/EmptyState/EmptyState.stories.js
index 26c3b67aa0e..2d4ff4aa98c 100644
--- a/src/components/EmptyState/EmptyState.stories.js
+++ b/src/components/EmptyState/EmptyState.stories.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from '../../../storybook/constants';
 import { Button } from '../Button';
 import { EmptyState } from './index';
 
@@ -11,7 +12,7 @@ stories.addDecorator(
   defaultTemplate({
     title: 'Empty State',
     documentationLink:
-      'http://www.patternfly.org/pattern-library/communication/empty-state/'
+      DOCUMENTATION_URL.PATTERNFLY_ORG_COMMUNICATION + 'empty-state/'
   })
 );
 
diff --git a/src/components/Filter/Filter.stories.js b/src/components/Filter/Filter.stories.js
index 8006ac3b915..28454480ad1 100644
--- a/src/components/Filter/Filter.stories.js
+++ b/src/components/Filter/Filter.stories.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from '../../../storybook/constants';
 import { withInfo } from '@storybook/addon-info/dist/index';
 import {
   Filter,
@@ -20,8 +21,7 @@ const stories = storiesOf('Filter', module);
 stories.addDecorator(
   defaultTemplate({
     title: 'Filter',
-    documentationLink:
-      'http://www.patternfly.org/pattern-library/forms-and-controls/filter/'
+    documentationLink: DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS + 'filter/'
   })
 );
 
diff --git a/src/components/Form/Form.stories.js b/src/components/Form/Form.stories.js
index 245dee24a9a..6280b428726 100644
--- a/src/components/Form/Form.stories.js
+++ b/src/components/Form/Form.stories.js
@@ -4,7 +4,8 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean } from '@storybook/addon-knobs';
-import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import { inlineTemplate } from '../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from '../../../storybook/constants';
 import { Icon } from '../Icon';
 import { Col, Row, Grid } from '../Grid';
 import { Button } from '../Button';
@@ -38,24 +39,24 @@ const stories = storiesOf('Forms', module);
 
 stories.addDecorator(withKnobs);
 
-const description = (
-  <p>
-    Those components are based on React Bootstrap Form components. See{' '}
-    <a href="https://react-bootstrap.github.io/components/forms/">
-      React Bootstrap Docs
-    </a>{' '}
-    for complete Form components documentation.
-  </p>
-);
-
-stories.addDecorator(
-  defaultTemplate({
-    title: 'Forms',
-    documentationLink:
-      'http://www.patternfly.org/pattern-library/widgets/#forms',
-    description: description
-  })
-);
+// const description = (
+//   <p>
+//     Those components are based on React Bootstrap Form components. See{' '}
+//     <a href="https://react-bootstrap.github.io/components/forms/">
+//       React Bootstrap Docs
+//     </a>{' '}
+//     for complete Form components documentation.
+//   </p>
+// );
+
+// stories.addDecorator(
+//   defaultTemplate({
+//     title: 'Forms',
+//     documentationLink:
+//       'http://www.patternfly.org/pattern-library/widgets/#forms',
+//     description: description
+//   })
+// );
 
 stories.addWithInfo('Inline Form', '', () => {
   const formFieldsKnobs = getInlineFormKnobs();
@@ -77,13 +78,20 @@ stories.addWithInfo('Inline Form', '', () => {
     </Button>
   ));
 
-  return (
+  let story = (
     <Grid>
       <Form inline>
         {formFields} {formButtons}
       </Form>
     </Grid>
   );
+  return inlineTemplate({
+    title: 'Inline Form',
+    documentationLink: DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS + '#forms',
+    reactBootstrapDocumentationLink:
+      DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT + 'forms/',
+    story: story
+  });
 });
 
 stories.addWithInfo('Horizontal Form', '', () => {
@@ -108,7 +116,7 @@ stories.addWithInfo('Horizontal Form', '', () => {
     </span>
   ));
 
-  return (
+  let story = (
     <Grid>
       <Form horizontal>
         {formFields}
@@ -127,6 +135,14 @@ stories.addWithInfo('Horizontal Form', '', () => {
       </Form>
     </Grid>
   );
+
+  return inlineTemplate({
+    title: 'Horizontal Form',
+    documentationLink: DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS + '#forms',
+    reactBootstrapDocumentationLink:
+      DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT + 'forms/',
+    story: story
+  });
 });
 
 stories.addWithInfo('Vertical Form', '', () => {
@@ -151,7 +167,7 @@ stories.addWithInfo('Vertical Form', '', () => {
     </span>
   ));
 
-  return (
+  let story = (
     <Grid>
       <Form>
         <Row>
@@ -168,6 +184,13 @@ stories.addWithInfo('Vertical Form', '', () => {
       </Form>
     </Grid>
   );
+  return inlineTemplate({
+    title: 'Vertical Form',
+    documentationLink: DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS + '#forms',
+    reactBootstrapDocumentationLink:
+      DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT + 'forms/',
+    story: story
+  });
 });
 
 stories.addWithInfo('Modal Form', '', () => {
@@ -197,7 +220,7 @@ stories.addWithInfo('Modal Form', '', () => {
     </div>
   );
 
-  return (
+  let story = (
     <Modal show={showModal}>
       <Modal.Header>
         <button
@@ -219,6 +242,13 @@ stories.addWithInfo('Modal Form', '', () => {
       </Modal.Footer>
     </Modal>
   );
+  return inlineTemplate({
+    title: 'Modal Form',
+    documentationLink: DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS + '#forms',
+    reactBootstrapDocumentationLink:
+      DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT + 'forms/',
+    story: story
+  });
 });
 
 stories.addWithInfo('Supported Controls', '', () => {
@@ -228,11 +258,19 @@ stories.addWithInfo('Supported Controls', '', () => {
     VerticalFormField({ ...formField, ...formFieldsKnobs })
   );
 
-  return (
+  let story = (
     <Grid>
       <Form>{formFields}</Form>
     </Grid>
   );
+
+  return inlineTemplate({
+    title: 'Supported Controls',
+    documentationLink: DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS + '#forms',
+    reactBootstrapDocumentationLink:
+      DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT + 'forms/',
+    story: story
+  });
 });
 
 stories.addWithInfo('Input Groups', '', () => {
@@ -242,7 +280,7 @@ stories.addWithInfo('Input Groups', '', () => {
     VerticalFormField({ ...formField, ...formFieldsKnobs })
   );
 
-  return (
+  let story = (
     <Grid>
       <Form>
         <Row>
@@ -251,4 +289,11 @@ stories.addWithInfo('Input Groups', '', () => {
       </Form>
     </Grid>
   );
+  return inlineTemplate({
+    title: 'Input Groups',
+    documentationLink: DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS + '#forms',
+    reactBootstrapDocumentationLink:
+      DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT + 'forms/',
+    story: story
+  });
 });
diff --git a/src/components/Grid/Grid.stories.js b/src/components/Grid/Grid.stories.js
index 0285439f582..b646ee8d9d4 100644
--- a/src/components/Grid/Grid.stories.js
+++ b/src/components/Grid/Grid.stories.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withKnobs, boolean } from '@storybook/addon-knobs';
 import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from '../../../storybook/constants';
 import { Grid, Row, Col, Clearfix } from './index';
 
 const stories = storiesOf('Grid', module);
@@ -11,7 +12,7 @@ const description = (
   <p>
     This component is based on React Bootstrap Grid component. Grids are used to
     structure and present data. See{' '}
-    <a href="https://react-bootstrap.github.io/components.html#grid">
+    <a href={DOCUMENTATION_URL.REACT_BOOTSTRAP_LAYOUT + 'grid/'}>
       React Bootstrap Docs
     </a>{' '}
     for complete Grid component documentation.
diff --git a/src/components/Label/Label.stories.js b/src/components/Label/Label.stories.js
index c7511f83281..f74d5263c5d 100644
--- a/src/components/Label/Label.stories.js
+++ b/src/components/Label/Label.stories.js
@@ -1,25 +1,17 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from '../../../storybook/constants';
 import { Label } from './index';
 
 const stories = storiesOf('Label', module);
-const description = (
-  <p>
-    This component is based on React Bootstrap Label component. See{' '}
-    <a href="https://react-bootstrap.github.io/components.html#labels">
-      React Bootstrap Docs
-    </a>{' '}
-    for complete Label component documentation.
-  </p>
-);
 
 stories.addDecorator(
   defaultTemplate({
     title: 'Label',
-    documentationLink:
-      'http://www.patternfly.org/pattern-library/widgets/#labels',
-    description: description
+    documentationLink: DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS + '#labels',
+    reactBootstrapDocumentationLink:
+      DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT + 'label/'
   })
 );
 
diff --git a/src/components/ListGroup/ListGroup.stories.js b/src/components/ListGroup/ListGroup.stories.js
index 5c53c5c6c6a..055b501edca 100644
--- a/src/components/ListGroup/ListGroup.stories.js
+++ b/src/components/ListGroup/ListGroup.stories.js
@@ -1,27 +1,18 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from '../../../storybook/constants';
 import { Badge } from '../Badge';
 import { ListGroup, ListGroupItem } from './index';
 
 const stories = storiesOf('ListGroup', module);
 
-const description = (
-  <p>
-    This component is based on React Bootstrap ListGroup component. See{' '}
-    <a href="https://react-bootstrap.github.io/components.html#listgroup">
-      React Bootstrap Docs
-    </a>{' '}
-    for complete ListGroup component documentation.
-  </p>
-);
-
 stories.addDecorator(
   defaultTemplate({
     title: 'ListGroup',
-    documentationLink:
-      'http://www.patternfly.org/pattern-library/widgets/#list-group',
-    description: description
+    documentationLink: DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS + '#list-group',
+    reactBootstrapDocumentationLink:
+      DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT + 'list-group/'
   })
 );
 
diff --git a/src/components/ListView/ListView.stories.js b/src/components/ListView/ListView.stories.js
index 9a2fe0f8697..03613a0fb0d 100644
--- a/src/components/ListView/ListView.stories.js
+++ b/src/components/ListView/ListView.stories.js
@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
 import { Row, Col } from '../Grid';
 import { withKnobs, boolean } from '@storybook/addon-knobs';
 import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
-
+import { DOCUMENTATION_URL } from '../../../storybook/constants';
 import { Button } from '../Button';
 import { DropdownKebab } from '../DropdownKebab';
 import { Icon } from '../Icon';
@@ -18,7 +18,7 @@ stories.addDecorator(
   defaultTemplate({
     title: 'ListView',
     documentationLink:
-      'http://www.patternfly.org/pattern-library/content-views/list-view/'
+      DOCUMENTATION_URL.PATTERNFLY_ORG_CONTENT_VIEWS + 'list-view/'
   })
 );
 
diff --git a/src/components/MenuItem/MenuItem.stories.js b/src/components/MenuItem/MenuItem.stories.js
index 2a007e2b921..48f9e0a84e7 100644
--- a/src/components/MenuItem/MenuItem.stories.js
+++ b/src/components/MenuItem/MenuItem.stories.js
@@ -2,6 +2,7 @@ import { Dropdown } from 'react-bootstrap';
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from '../../../storybook/constants';
 import { MenuItem } from './index';
 
 const stories = storiesOf('MenuItem', module);
@@ -10,7 +11,11 @@ const description = (
   <p>
     This component is based on React Bootstrap MenuItem component. This
     component represents a menu item in a dropdown. See{' '}
-    <a href="https://react-bootstrap.github.io/components.html#menu-items">
+    <a
+      href={
+        DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT + 'dropdowns/#menu-items'
+      }
+    >
       React Bootstrap Docs
     </a>{' '}
     for complete MenuItem component documentation.
diff --git a/src/components/Modal/Modal.stories.js b/src/components/Modal/Modal.stories.js
index dfe042b1bce..55ceb274dff 100644
--- a/src/components/Modal/Modal.stories.js
+++ b/src/components/Modal/Modal.stories.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
-import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import { inlineTemplate } from '../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from '../../../storybook/constants';
 
 import {
   MockModalManager,
@@ -15,25 +16,6 @@ import {
 
 const stories = storiesOf('Modal Overlay', module);
 
-const description = (
-  <p>
-    This component is based on React Bootstrap Modal component. See{' '}
-    <a href="https://react-bootstrap.github.io/components.html#modals">
-      React Bootstrap Docs
-    </a>{' '}
-    for complete Modal component documentation.
-  </p>
-);
-
-stories.addDecorator(
-  defaultTemplate({
-    title: 'Modal Overlay',
-    documentationLink:
-      'http://www.patternfly.org/pattern-library/forms-and-controls/modal-overlay/',
-    description: description
-  })
-);
-
 stories.add(
   'Basic example',
   withInfo({
@@ -45,7 +27,17 @@ stories.add(
         <pre>{basicExampleSource}</pre>
       </div>
     )
-  })(() => <MockModalManager />)
+  })(() => {
+    let story = <MockModalManager />;
+    return inlineTemplate({
+      title: 'Basic Example',
+      documentationLink:
+        DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS + 'modal-overlay/',
+      reactBootstrapDocumentationLink:
+        DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT + 'modal/',
+      story: story
+    });
+  })
 );
 
 stories.add(
@@ -59,5 +51,15 @@ stories.add(
         <pre>{aboutExampleSource}</pre>
       </div>
     )
-  })(() => <MockAboutModalManager />)
+  })(() => {
+    let story = <MockAboutModalManager />;
+    return inlineTemplate({
+      title: 'About Modal',
+      documentationLink:
+        DOCUMENTATION_URL.PATTERNFLY_ORG_COMMUNICATION + 'about-modal/',
+      reactBootstrapDocumentationLink:
+        DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT + 'modal/',
+      story: story
+    });
+  })
 );
diff --git a/src/components/Popover/Popover.stories.js b/src/components/Popover/Popover.stories.js
index f8e29469e2a..98632a465c3 100644
--- a/src/components/Popover/Popover.stories.js
+++ b/src/components/Popover/Popover.stories.js
@@ -2,25 +2,17 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
 import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from '../../../storybook/constants';
 import { Button, OverlayTrigger, Popover } from '../../index';
 
 const stories = storiesOf('Popover', module);
-const description = (
-  <p>
-    This component is based on React Bootstrap Popover component. See{' '}
-    <a href="https://react-bootstrap.github.io/components.html#popovers">
-      React Bootstrap Docs
-    </a>{' '}
-    for complete Popover component documentation.
-  </p>
-);
 stories.addDecorator(withKnobs);
 stories.addDecorator(
   defaultTemplate({
     title: 'Popover',
-    documentationLink:
-      'http://www.patternfly.org/pattern-library/widgets/#popover',
-    description: description
+    documentationLink: DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS + '#popover',
+    reactBootstrapDocumentationLink:
+      DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT + 'popovers/'
   })
 );
 
diff --git a/src/components/Spinner/Spinner.stories.js b/src/components/Spinner/Spinner.stories.js
index 55e11d77d17..31374bf6e44 100644
--- a/src/components/Spinner/Spinner.stories.js
+++ b/src/components/Spinner/Spinner.stories.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withKnobs, select, boolean } from '@storybook/addon-knobs';
-
 import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from '../../../storybook/constants';
 import { Spinner } from './index';
 
 const stories = storiesOf('Widgets', module);
@@ -11,8 +11,7 @@ stories.addDecorator(withKnobs);
 stories.addDecorator(
   defaultTemplate({
     title: 'Spinner',
-    documentationLink:
-      'http://www.patternfly.org/pattern-library/widgets/#spinner'
+    documentationLink: DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS + '#spinner'
   })
 );
 
diff --git a/src/components/ToastNotification/ToastNotification.stories.js b/src/components/ToastNotification/ToastNotification.stories.js
index 81b42323d7d..db08c055e44 100644
--- a/src/components/ToastNotification/ToastNotification.stories.js
+++ b/src/components/ToastNotification/ToastNotification.stories.js
@@ -2,7 +2,8 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
-import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import { inlineTemplate } from '../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from '../../../storybook/constants';
 import { Button } from '../Button';
 import { DropdownKebab } from '../DropdownKebab';
 import { MenuItem } from '../MenuItem';
@@ -14,13 +15,6 @@ import {
 
 const stories = storiesOf('ToastNotification', module);
 stories.addDecorator(withKnobs);
-stories.addDecorator(
-  defaultTemplate({
-    title: 'Toast Notification',
-    documentationLink:
-      'http://www.patternfly.org/pattern-library/communication/toast-notifications/'
-  })
-);
 
 stories.addWithInfo(
   'Toast Notification',
@@ -36,7 +30,8 @@ stories.addWithInfo(
     const dismissEnabled = boolean('Dismiss', false);
     const menuEnabled = boolean('Menu', true);
     const actionEnabled = boolean('Action', true);
-    return (
+
+    let story = (
       <div>
         <ToastNotification
           type={type}
@@ -66,6 +61,13 @@ stories.addWithInfo(
         </ToastNotification>
       </div>
     );
+
+    return inlineTemplate({
+      title: 'Toast Notification',
+      documentationLink:
+        DOCUMENTATION_URL.PATTERNFLY_ORG_COMMUNICATION + 'toast-notifications/',
+      story: story
+    });
   }
 );
 
@@ -171,6 +173,12 @@ stories.addWithInfo(
   'Toast Notification List',
   `This is the Toast Notification List with a custom timer delay supplied.`,
   () => {
-    return <ToastNotificationStoryWrapper />;
+    let story = <ToastNotificationStoryWrapper />;
+    return inlineTemplate({
+      title: 'Toast Notification List',
+      documentationLink:
+        DOCUMENTATION_URL.PATTERNFLY_ORG_COMMUNICATION + 'toast-notifications/',
+      story: story
+    });
   }
 );
diff --git a/src/components/Tooltip/Tooltip.stories.js b/src/components/Tooltip/Tooltip.stories.js
index 7e0e7f4d357..3038d3362b9 100644
--- a/src/components/Tooltip/Tooltip.stories.js
+++ b/src/components/Tooltip/Tooltip.stories.js
@@ -2,25 +2,17 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
 import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from '../../../storybook/constants';
 import { Button, OverlayTrigger, Tooltip } from '../../index';
 
 const stories = storiesOf('Tooltip', module);
-const description = (
-  <p>
-    This component is based on React Bootstrap Tooltip component. See{' '}
-    <a href="https://react-bootstrap.github.io/components.html#tooltips">
-      React Bootstrap Docs
-    </a>{' '}
-    for complete Tooltip component documentation.
-  </p>
-);
 stories.addDecorator(withKnobs);
 stories.addDecorator(
   defaultTemplate({
     title: 'Tooltip',
-    documentationLink:
-      'http://www.patternfly.org/pattern-library/widgets/#tooltip',
-    description: description
+    documentationLink: DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS + '#tooltip',
+    reactBootstrapDocumentationLink:
+      DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT + 'tooltips/'
   })
 );
 
diff --git a/src/components/Wizard/Wizard.stories.js b/src/components/Wizard/Wizard.stories.js
index d39e0aa7f91..2321ef6476f 100644
--- a/src/components/Wizard/Wizard.stories.js
+++ b/src/components/Wizard/Wizard.stories.js
@@ -4,7 +4,7 @@ import { withInfo } from '@storybook/addon-info';
 import { Row, Col } from 'react-bootstrap';
 import { withKnobs } from '@storybook/addon-knobs';
 import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
-
+import { DOCUMENTATION_URL } from '../../../storybook/constants';
 import { mockWizardItems } from './__mocks__/mockWizardItems';
 
 import {
@@ -28,7 +28,7 @@ stories.addDecorator(
   defaultTemplate({
     title: 'Wizard',
     documentationLink:
-      'http://www.patternfly.org/pattern-library/communication/wizard/#/overview'
+      DOCUMENTATION_URL.PATTERNFLY_ORG_COMMUNICATION + 'wizard/#/overview'
   })
 );
 
diff --git a/storybook/constants.js b/storybook/constants.js
new file mode 100644
index 00000000000..6acb5bf2f0f
--- /dev/null
+++ b/storybook/constants.js
@@ -0,0 +1,16 @@
+export const BASE_URL = {
+  PATTERNFLY_ORG: 'http://www.patternfly.org/pattern-library/',
+  REACT_BOOTSTRAP: 'https://react-bootstrap.github.io/'
+};
+
+export const DOCUMENTATION_URL = {
+  PATTERNFLY_ORG_COMMUNICATION: BASE_URL.PATTERNFLY_ORG + 'communication/',
+  PATTERNFLY_ORG_WIDGETS: BASE_URL.PATTERNFLY_ORG + 'widgets/',
+  PATTERNFLY_ORG_NAVIGATION: BASE_URL.PATTERNFLY_ORG + 'navigation/',
+  PATTERNFLY_ORG_DATA_VISUALIZATION:
+    BASE_URL.PATTERNFLY_ORG + 'data-visualization/',
+  PATTERNFLY_ORG_FORMS: BASE_URL.PATTERNFLY_ORG + 'forms-and-controls/',
+  PATTERNFLY_ORG_CONTENT_VIEWS: BASE_URL.PATTERNFLY_ORG + 'content-views/',
+  REACT_BOOTSTRAP_COMPONENT: BASE_URL.REACT_BOOTSTRAP + 'components/',
+  REACT_BOOTSTRAP_LAYOUT: BASE_URL.REACT_BOOTSTRAP + 'layout/'
+};
diff --git a/storybook/decorators/storyTemplates.js b/storybook/decorators/storyTemplates.js
index 4c3f7229652..699ffb7335a 100644
--- a/storybook/decorators/storyTemplates.js
+++ b/storybook/decorators/storyTemplates.js
@@ -1,32 +1,86 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+
+const patternflyDocumentationTemplate = documentationLink => {
+  if (documentationLink) {
+    return (
+      <p>
+        This is an existing PatternFly component. For more details, refer to the
+        <a href={documentationLink}> design documentation on patternfly.org.</a>
+      </p>
+    );
+  } else
+    return (
+      <p>
+        This pattern does not yet exist in{' '}
+        <a href="http://www.patternfly.org/pattern-library/">PatternFly</a>.
+      </p>
+    );
+};
+
+const reactBootstrapDocumentationTemplate = (documentationLink, title) => {
+  return (
+    <p>
+      This component is based on React Bootstrap {title} component. See{' '}
+      <a href={documentationLink}>React Bootstrap Docs</a> for complete {title}{' '}
+      component documentation.
+    </p>
+  );
+};
 
 export const defaultTemplate = config => story => (
   <div style={{ padding: '0 20px' }}>
     <header className="page-header">
       <h2>{config.title}</h2>
     </header>
-    {!config.documentationLink && (
-      <p>
-        This pattern does not yet exist in{' '}
-        <a href="http://www.patternfly.org/pattern-library/">PatternFly</a>
-        .
-      </p>
-    )}
-    {/* Do not describe the pattern if a design is already documented
-      on patternfly.org */}
-    {config.documentationLink && (
-      <p>
-        This is an existing PatternFly component. For more details, refer to the
-        <a href={config.documentationLink}>
-          {' '}
-          design documentation on patternfly.org
-        </a>
-        .
-      </p>
-    )}
+    {patternflyDocumentationTemplate(config.documentationLink)}
+    {config.reactBootstrapDocumentationLink &&
+      reactBootstrapDocumentationTemplate(
+        config.reactBootstrapDocumentationLink,
+        config.title
+      )}
     {config.description && <div>{config.description}</div>}
     <br />
     <br />
     <div style={config.style}>{story()}</div>
   </div>
 );
+
+export const inlineTemplate = ({
+  title,
+  documentationLink,
+  reactBootstrapDocumentationLink,
+  description,
+  style,
+  story
+}) => (
+  <div style={{ padding: '0 20px' }}>
+    <header className="page-header">
+      <h2>{title}</h2>
+    </header>
+    {patternflyDocumentationTemplate(documentationLink)}
+    {reactBootstrapDocumentationLink &&
+      reactBootstrapDocumentationTemplate(
+        reactBootstrapDocumentationLink,
+        title
+      )}
+    {description && <div>{description}</div>}
+    <br />
+    <br />
+    <div style={style}>{story}</div>
+  </div>
+);
+inlineTemplate.propTypes = {
+  /** template title */
+  title: PropTypes.string.isRequired,
+  /** pf design documentation link */
+  documentationLink: PropTypes.string,
+  /** react bootstrap documentation link */
+  reactBootstrapDocumentationLink: PropTypes.string,
+  /** additional description */
+  description: PropTypes.node,
+  /** addition description styles */
+  style: PropTypes.object,
+  /** story content */
+  story: PropTypes.node
+};