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

);
    return inlineTemplate({
      title: 'Aggregate Status Card',
      documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_CARDS}aggregate-status-card/#code`,
      story
    });
  });
};

data={donutConfigData}
                    title={{ type: 'max' }}
                    tooltip={donutConfigTooltip}
                  />
                  
                
              
            
          
        
      
    );

    return inlineTemplate({
      title: 'Utilization Trend Card',
      documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_CARDS}utilization-trend-card/#code`,
      story
    });
  });
};

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

const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.DATA_VISUALIZATION}/Charts`, module);
stories.addDecorator(withKnobs);
stories.addDecorator(
  defaultTemplate({
    title: 'Utilization Bar',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_CARDS}utilization-bar-card/`
  })
);

stories.add(
  'Utilization Bar',
  withInfo('Utilization Bar')(() => (
    <div>
      <h1>Utilization bar</h1>
      </div>

}>
                    {' '}
                    Add New Cluster
                  
                
              
            
          
        
      
    );

    return inlineTemplate({
      title: 'Trend Card',
      documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_CARDS}trend-card/`,
      story
    });
  });
};

);
    return inlineTemplate({
      title: 'Utilization Bar Card',
      documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_CARDS}utilization-bar-card/#code`,
      story
    });
  });
};

<button>
                        Upload Data
                      </button>
                    
                  
                
              
            
          
        
      
    );
    return inlineTemplate({
      title: 'Base Card',
      documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_CARDS}base-card/#code`,
      story
    });
  });
};

} from 'storybook/constants/siteConstants';
import { UtilizationBar } from './index';
import { name } from '../../../package.json';

const stories = storiesOf(
  `${storybookPackageName(name)}/${
    STORYBOOK_CATEGORY.DATA_VISUALIZATION
  }/Charts`,
  module
);
stories.addDecorator(withKnobs);
stories.addDecorator(
  defaultTemplate({
    title: 'Utilization Bar',
    documentationLink: `${
      DOCUMENTATION_URL.PATTERNFLY_ORG_CARDS
    }utilization-bar-card/`
  })
);

stories.add(
  'Utilization Bar',
  withInfo('Utilization Bar')(() => (
    <div>
      <h1>Utilization bar</h1>
      </div>

[card contents]
              
            
            
              
                Empty Card
                [card contents]
              
            
          
        
      
    );
    return inlineTemplate({
      title: 'Base Card',
      documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_CARDS}base-card/#code`,
      story
    });
  });
};