How to use storybook - 10 common examples

>
    <div>
      <p>Body Content Here! Body Content Here! Body Content Here! 1</p>
      <p>Body Content Here! Body Content Here! Body Content Here! 2</p>
      <p>Body Content Here! Body Content Here! Body Content Here! 3</p>
      <p>Body Content Here! Body Content Here! Body Content Here! 4</p>
      <p>Body Content Here! Body Content Here! Body Content Here! 5</p>
    </div>
  
);

// TODO: we should fix this issue and remove this message.
const propTypesAreBroke = `***Note: Prop Type descriptions are missing on this page
due to a Storybook bug. Please see the source code for propType description comments.***`;

const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.NAVIGATION}/Vertical Navigation`, module);
stories.addDecorator(withKnobs);
stories.addDecorator(
  defaultTemplate({
    title: 'Vertical Navigation',
    description: 'Please click "Show Info" for example source and component documentation.',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_NAVIGATION}vertical-navigation/`
  })
);

stories.add(
  'Items as JSX',
  withInfo({
    propTablesExclude: [MockFixedLayout],
    text: `Example with simple masthead and navigation items expressed as simple JSX children.\n
Tips:\n
* You can save some typing in your JSX by importing the child components like this:

<p>Body Content Here! Body Content Here! Body Content Here! 5</p>
    
  
);

// TODO: we should fix this issue and remove this message.
const propTypesAreBroke = `***Note: Prop Type descriptions are missing on this page
due to a Storybook bug. Please see the source code for propType description comments.***`;

const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.NAVIGATION}/Vertical Navigation`, module);
stories.addDecorator(withKnobs);
stories.addDecorator(
  defaultTemplate({
    title: 'Vertical Navigation',
    description: 'Please click "Show Info" for example source and component documentation.',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_NAVIGATION}vertical-navigation/`
  })
);

stories.add(
  'Items as JSX',
  withInfo({
    propTablesExclude: [MockFixedLayout],
    text: `Example with simple masthead and navigation items expressed as simple JSX children.\n
Tips:\n
* You can save some typing in your JSX by importing the child components like this:
\`\`\`\nimport { VerticalNav } from 'patternfly-react';
const { Masthead, Brand, IconBar, Item, SecondaryItem, TertiaryItem } = VerticalNav;
\`\`\`\n
* To control what happens on item selection, you can either pass an **href** or an **onClick**
prop to the item, or you can pass an **onItemClick** and/or **onNavigate** prop to VerticalNav, or both.\n
* To control which item is active, pass the **active** prop to an item. Otherwise,

<p>Body Content Here! Body Content Here! Body Content Here! 5</p>
    
  
);

// TODO: we should fix this issue and remove this message.
const propTypesAreBroke = `***Note: Prop Type descriptions are missing on this page
due to a Storybook bug. Please see the source code for propType description comments.***`;

const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.NAVIGATION}/Vertical Navigation`, module);
stories.addDecorator(withKnobs);
stories.addDecorator(
  defaultTemplate({
    title: 'Vertical Navigation',
    description: 'Please click "Show Info" for example source and component documentation.',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_NAVIGATION}vertical-navigation/`
  })
);

stories.add(
  'Items as JSX',
  withInfo({
    propTablesExclude: [MockFixedLayout],
    text: `Example with simple masthead and navigation items expressed as simple JSX children.\n
Tips:\n
* You can save some typing in your JSX by importing the child components like this:
\`\`\`\nimport { VerticalNav } from 'patternfly-react';
const { Masthead, Brand, IconBar, Item, SecondaryItem, TertiaryItem } = VerticalNav;
\`\`\`\n
* To control what happens on item selection, you can either pass an **href** or an **onClick**
prop to the item, or you can pass an **onItemClick** and/or **onNavigate** prop to VerticalNav, or both.\n
* To control which item is active, pass the **active** prop to an item. Otherwise,

/* eslint-disable max-len */
import { storiesOf } from 'storybook/utils/utils';

storiesOf('{{name_sc}}', require('./{{name_sc}}.hbs')).add(
  'default',
  'No description yet...',
  `
      \{{> {{name_sc}} @root}}
    `,
  {},
);

/* eslint-disable max-len */
import { storiesOf } from 'storybook/utils/utils';

storiesOf('Header', require('./header.hbs')).add(
  'default',
  'The header that we show on each page of the website, contains the navigation.',
  `
			{{> header }}
		`,
);

/* eslint-disable max-len */
import { storiesOf } from 'storybook/utils/utils';

storiesOf('Footer', require('./footer.hbs')).add(
  'default',
  'The footer that we show on each page of the website, contains the copyright.',
  `
			{{> footer }}
		`,
);

/* eslint-disable max-len */
import { storiesOf } from 'storybook/utils/utils';

storiesOf('{{name_sc}}', require('./{{name_sc}}.hbs')).add(
  'default',
  'No description yet...',
  `
      \{{> block/{{name_sc}} @root}}
    `,
  require('./data/default'),
);

/* eslint-disable max-len */
import { storiesOf } from 'storybook/utils/utils';

storiesOf('Paragraph', require('./paragraph'))
  .add(
    'default',
    'A Paragraph block with a "read more" section you can show by clicking a button.',
    `
      {{> paragraph @root }}
    `,
    require('./data/data'),
  )
  .add(
    'no more content',
    'Without more content, hides the button',
    `
      <div style="max-width: 400px;">
        {{&gt; paragraph @root }}
      </div>
    `,

/* eslint-disable max-len */
import { storiesOf } from 'storybook/utils/utils';

storiesOf('{{name_sc}}', require('./{{name_sc}}.hbs')).add(
  'default',
  'No description yet...',
  `
      \{{> {{name_sc}} @root}}
    `,
  {},
);

/* eslint-disable max-len */
import { storiesOf } from 'storybook/utils/utils';

storiesOf('Two Col', require('./two-col'))
  .add(
    'default',
    'A block that has two columns of text, each with its own title.',
    `
      {{> two-col @root }}
    `,
    require('./data/data'),
  )
  .add(
    'small',
    'A smaller wrapper around the two colomns.',
    `
      <div style="max-width: 600px">
        {{&gt; two-col @root }}
      </div>
    `,