import { Story , Meta } from '@storybook/react' ; import styled from 'styled-components' ; import { IToggleMenuItem , ToggleMenu } from './ToggleMenu' ; import { SettingsBlack , LogoutBlack , Avatar } from '../icons' ; import React from 'react' ; interface IProps { id : string ; menuHeader ? : JSX . Element ; toggleButton : JSX . Element ; menuItems : IToggleMenuItem [ ] ; hasFocusRing ? : boolean ; hide ? : boolean ; showSubmenu : boolean ; } const UserNameStyle = styled . div `
  ${ ( { theme } ) => theme . fonts . bigBodyStyle };
` ; const UserRoleStyle = styled . div `
  ${ ( { theme } ) => theme . fonts . captionStyle };
` ; const header = ( < > < UserNameStyle > Atiq Zaman < /UserNameStyle> < UserRoleStyle > Field Agent < /UserRoleStyle> < />); const Template = ( args ) => < ToggleMenu { ... args } / > ; export const ToggleMenuView = Template . bind ( { } ) ; ToggleMenuView . args = { id : 'birth' , menuHeader : header , toggleButton : < Avatar />, menuItems : [ { icon : < SettingsBlack />, label : 'Settings' , handler : ( ) => alert ( 'Settings' ) } , { icon : < LogoutBlack />, label : 'Logout' , handler : ( ) => alert ( 'Logout' ) } ] , showSubmenu : true } ; export default { title : 'Components/Interface/ToggleMenu' , component : ToggleMenu } as Meta ;