How to use the storybook/constants/siteConstants.STORYBOOK_CATEGORY.NAVIGATION function in storybook

>
    <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! 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>
    
  
);

// 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(

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

import React from 'react';
import { storiesOf } from '@storybook/react';
import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { HorizontalNav } from './index';
import { name } from '../../../package.json';
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/`

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
import { Breadcrumb } from './index';
import { name } from '../../../package.json';

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
  })