import React from 'react' ; import { Router } from 'react-router' ; import { createMemoryHistory } from 'history' ; import * as Icons from 'design/Icon' ; import { TopBar } from './TopBar' ; export default { title : 'Teleport/TopBar' , } ; export function Story ( ) { const props = { ... defaultProps , } ; return ( < Router history = { createMemoryHistory ( ) } > < TopBar { ... props } / > < /Router>); } const defaultProps = { clusterId : 'one' , hasClusterUrl : true , popupItems : [ { title : 'Help & Support' , exact : true , Icon : Icons . ArrowDown , getLink : ( ) => null , } , { title : 'Account Settings' , exact : true , Icon : Icons . ArrowDown , getLink : ( ) => null , } , ] , username : 'mama' , title : 'Applications' , changeCluster : ( ) => null , loadClusters : ( ) => Promise . resolve ( [ ] ) , logout : ( ) => null , } ; Story . storyName = 'TopBar' ;