- );
- return inlineTemplate({
- title: 'Pie Charts',
- documentationLink: `${
- DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION
- }pie-chart/`,
- story
- });
- });
+ );
+
+ return inlineTemplate({
+ title: 'Pie Charts',
+ documentationLink: `${
+ DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION
+ }pie-chart/`,
+ story
+ });
+ })
+ );
};
-export default pieChartAddWithInfo;
+export default pieChart;
diff --git a/src/components/Chart/Stories/index.js b/src/components/Chart/Stories/index.js
index 263f8242aa6..b033ead08ea 100644
--- a/src/components/Chart/Stories/index.js
+++ b/src/components/Chart/Stories/index.js
@@ -1,5 +1,5 @@
-export { default as areaChartAddWithInfo } from './AreaChartStory';
-export { default as barChartAddWithInfo } from './BarChartStory';
-export { default as donutChartAddWithInfo } from './DonutChartStory';
-export { default as lineChartAddWithInfo } from './LineChartStory';
-export { default as pieChartAddWithInfo } from './PieChartStory';
+export { default as areaChart } from './AreaChartStory';
+export { default as barChart } from './BarChartStory';
+export { default as donutChart } from './DonutChartStory';
+export { default as lineChart } from './LineChartStory';
+export { default as pieChart } from './PieChartStory';
diff --git a/src/components/DropdownKebab/DropdownKebab.stories.js b/src/components/DropdownKebab/DropdownKebab.stories.js
index 52cc9440c3e..3d99fd1a4b6 100644
--- a/src/components/DropdownKebab/DropdownKebab.stories.js
+++ b/src/components/DropdownKebab/DropdownKebab.stories.js
@@ -1,6 +1,7 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, boolean } from '@storybook/addon-knobs';
+import { withInfo } from '@storybook/addon-info';
import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
import { DOCUMENTATION_URL } from '../../../storybook/constants';
import { Button } from '../Button';
@@ -16,10 +17,9 @@ stories.addDecorator(
})
);
-stories.addWithInfo(
+stories.add(
'DropdownKebab',
- `pullRight prop is used to align the dropdown to the right.`,
- () => (
+ withInfo(`pullRight prop is used to align the dropdown to the right.`)(() => (
{' '}
@@ -31,5 +31,5 @@ stories.addWithInfo(
- )
+ ))
);
diff --git a/src/components/EmptyState/EmptyState.stories.js b/src/components/EmptyState/EmptyState.stories.js
index c0e5c4db393..b0e0f86010d 100644
--- a/src/components/EmptyState/EmptyState.stories.js
+++ b/src/components/EmptyState/EmptyState.stories.js
@@ -1,5 +1,6 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
import { action } from '@storybook/addon-actions';
import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
import { DOCUMENTATION_URL } from '../../../storybook/constants';
@@ -17,42 +18,58 @@ stories.addDecorator(
})
);
-stories.addWithInfo('EmptyState', () => (
-
-
- Empty State Title
-
- This is the Empty State component. The goal of a empty state pattern is to
- provide a good first impression that helps users to achieve their goals.
- It should be used when a view is empty because no objects exists and you
- want to guide the user to perform specific actions.
-
-
- For more information please see{' '}
- {
- event.preventDefault();
- }}
- >
- pfExample
-
-
-
-
-
-
-
-
-
-
-
-));
+stories.add(
+ 'EmptyState',
+ withInfo()(() => (
+
+
+ Empty State Title
+
+ This is the Empty State component. The goal of a empty state pattern is
+ to provide a good first impression that helps users to achieve their
+ goals. It should be used when a view is empty because no objects exists
+ and you want to guide the user to perform specific actions.
+
+
+ For more information please see{' '}
+ {
+ event.preventDefault();
+ }}
+ >
+ pfExample
+
+
+
+
+
+
+
+
+
+
+
+ ))
+);
diff --git a/src/components/FieldLevelHelp/FieldLevelHelp.stories.js b/src/components/FieldLevelHelp/FieldLevelHelp.stories.js
index ed6090dd112..142fb540c89 100644
--- a/src/components/FieldLevelHelp/FieldLevelHelp.stories.js
+++ b/src/components/FieldLevelHelp/FieldLevelHelp.stories.js
@@ -1,6 +1,7 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, text, select } from '@storybook/addon-knobs';
+import { withInfo } from '@storybook/addon-info';
import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
import { DOCUMENTATION_URL } from '../../../storybook/constants';
import { FieldLevelHelp } from './index';
@@ -16,26 +17,29 @@ stories.addDecorator(
})
);
-stories.addWithInfo('FieldLevelHelp', 'FieldLevelHelp', () => {
- const close = select('Close Popover', ['true', 'false']);
- const content = text(
- 'content',
- 'Enter the hostname in a valid format Click here for examples of valid hostnames'
- );
- const fieldLabel = text('Field Label', 'Hostname');
+stories.add(
+ 'FieldLevelHelp',
+ withInfo()(() => {
+ const close = select('Close Popover', ['true', 'false']);
+ const content = text(
+ 'content',
+ 'Enter the hostname in a valid format Click here for examples of valid hostnames'
+ );
+ const fieldLabel = text('Field Label', 'Hostname');
- const htmlContent = (
-
- );
+ const htmlContent = (
+
+ );
- return (
-
- }
- stacked={boolean('Stacked', false)}
+stories.add(
+ 'ListItem variants',
+ withInfo(`ListView usage example.`)(() => (
+
- Expanded Content
-
- }
- heading={
-
- This is EVENT One that is with very LONG and should not overflow and
- push other elements out of the bounding box.
- Feb 23, 2015 12:32 am
-
- }
- actions={
-
-
-
-
-
-
- }
- description={
-
- The following snippet of text is rendered as link text.
-
- }
- stacked={boolean('Stacked', false)}
- />
- }
- heading="Stacked Additional Info items"
- description={
-
- The following snippet of text is rendered as link text.
-
- }
- additionalInfo={[
-
- 113,735
- Service One
- ,
-
- 35%
- Service Two
-
- ]}
- stacked={boolean('Stacked', false)}
- />
-
- Only Additional
- ,
-
- Info Items
-
- ]}
- stacked={boolean('Stacked', false)}
- />
-
- }
- description={
-
- The following snippet of text is rendered as link text.
-
- }
- additionalInfo={[
-
-
- 108 Hosts
- ,
-
-
- 28 Clusters
-
- ]}
- stacked={boolean('Stacked', false)}
- />
-
-));
+ }
+ leftContent={}
+ additionalInfo={[
+
+ Item 1
+ ,
+
+ Item 2
+
+ ]}
+ actions={
+
+
+
+
+
+
+ }
+ stacked={boolean('Stacked', false)}
+ >
+ Expanded Content
+
+ }
+ heading={
+
+ This is EVENT One that is with very LONG and should not overflow and
+ push other elements out of the bounding box.
+ Feb 23, 2015 12:32 am
+
+ }
+ actions={
+
+
+
+
+
+
+ }
+ description={
+
+ The following snippet of text is rendered as{' '}
+ link text.
+
+ }
+ stacked={boolean('Stacked', false)}
+ />
+ }
+ heading="Stacked Additional Info items"
+ description={
+
+ The following snippet of text is rendered as{' '}
+ link text.
+
+ }
+ additionalInfo={[
+
+ 113,735
+ Service One
+ ,
+
+ 35%
+ Service Two
+
+ ]}
+ stacked={boolean('Stacked', false)}
+ />
+
+ Only Additional
+ ,
+
+ Info Items
+
+ ]}
+ stacked={boolean('Stacked', false)}
+ />
+
+ }
+ description={
+
+ The following snippet of text is rendered as{' '}
+ link text.
+
+ }
+ additionalInfo={[
+
+
+ 108 Hosts
+ ,
+
+
+ 28 Clusters
+
+ ]}
+ stacked={boolean('Stacked', false)}
+ />
+
+ ))
+);
diff --git a/src/components/MenuItem/MenuItem.stories.js b/src/components/MenuItem/MenuItem.stories.js
index d61942ede19..5e6dc2288eb 100644
--- a/src/components/MenuItem/MenuItem.stories.js
+++ b/src/components/MenuItem/MenuItem.stories.js
@@ -1,6 +1,7 @@
import { Dropdown } from 'react-bootstrap';
import React from 'react';
import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
import { DOCUMENTATION_URL } from '../../../storybook/constants';
import { MenuItem } from './index';
@@ -29,23 +30,26 @@ stories.addDecorator(
})
);
-stories.addWithInfo('MenuItem', '', () => (
-
- Paginator is a stateful component which manages pagination state for you
- and exposes a single onPageSet callback. See Action Logger for
- details.
-
+ Paginator is a stateful component which manages pagination state for
+ you and exposes a single onPageSet callback. See Action Logger
+ for details.
+