How to use the storybook/constants/siteConstants.DOCUMENTATION_URL.PATTERNFLY_ORG_NAVIGATION function in storybook

<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,

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

pageInputValue={number('Page', 1)}
        amountOfPages={number('Number of Pages', 5)}
        pageSizeDropUp={boolean('Page Size Drop Up', true)}
        itemCount={number('Item Count:', 75)}
        itemsStart={number('Items Start:', 1)}
        itemsEnd={number('Items End', 15)}
        onFirstPage={action('onFirstPage')}
        onPreviousPage={action('onPreviousPage')}
        onNextPage={action('onNextPage')}
        onLastPage={action('onLastPage')}
      />
    );
    return inlineTemplate({
      title: 'Pagination Row',
      documentationLink: `${
        DOCUMENTATION_URL.PATTERNFLY_ORG_NAVIGATION
      }pagination/`,
      story,
      description: (
        <div>
          Pagination Row is a stateless functional component which exposes all
          pagination callbacks (i.e.:{' '}
          <i>onFirstPage, onPreviousPage, onNextPage, onLastPage</i>). See
          Action Logger for details.
        </div>
      )
    });
  })
);

import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
import pfFitBrand from 'storybook/img/brand.svg';
import { mastheadMock } from './__mocks__/masthead';
import { singleLevel } from './__mocks__/singleLevel';
import { twoLevel } from './__mocks__/twoLevel';
import { dropdownLevel } from './__mocks__/dropdownLevel';

const stories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.NAVIGATION}/Horizontal Navigation`,
  module
);

const description = (
  <p>
    This component is based on Patternfly horizontal navigation component. See{' '}
    <a href="{`${DOCUMENTATION_URL.PATTERNFLY_ORG_NAVIGATION}horizontal-navigation/`}">Patternfly Docs</a>
    for complete Horizontal Navigation component documentation.
  </p>
);

stories.addDecorator(
  defaultTemplate({
    title: 'Horizontal Navigation',
    description,
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_NAVIGATION}horizontal-navigation/`
  })
);

stories.add('Single-Level Menu Bar', () =&gt; (
  
    {mastheadMock({
      titleImg: pfFitBrand,

viewType={select('View Type:', PAGINATION_VIEW_TYPES, PAGINATION_VIEW_TYPES[0])}
        pagination={{
          page: Number(page),
          perPage: 10,
          perPageOptions: [5, 10, 15]
        }}
        itemCount={Number(totalCount)}
        onPageSet={action('page set')}
        onPerPageSelect={action('per page value set')}
        messages={messages}
      />
    );

    return inlineTemplate({
      title: 'Pagination Row with State Manager, a.k.a. Paginator',
      documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_NAVIGATION}pagination/`,
      story,
      description: (
        <div>
          Paginator is a stateful component which manages pagination state for you and exposes a single <i>onPageSet</i>{' '}
          callback. See Action Logger for details.
        </div>
      )
    });
  })
);

const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.NAVIGATION}/Breadcrumb`, module);

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="{`${DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT}breadcrumb/`}">React Bootstrap Docs</a> for complete
    Breadcrumb component documentation.
  </p>
);

stories.addDecorator(
  defaultTemplate({
    title: 'Breadcrumb',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_NAVIGATION}breadcrumbs/`,
    description
  })
);

stories.add(
  'Breadcrumb',
  withInfo()(() =&gt; (
    
      Home
      Library
      Data
    
  ))
);

stories.add(