module.exports = "import * as React from 'react';\nimport './CalloutExample.scss';\nimport {\n  Callout,\n  Button,\n  Link\n} from '../../../../index';\n\nexport interface ICalloutBaiscExampleState {\n  isCalloutVisible?: boolean;\n}\n\nexport class CalloutBasicExample extends React.Component<any, ICalloutBaiscExampleState> {\n  private _menuButtonElement: HTMLElement;\n\n  public constructor() {\n    super();\n\n    this._onShowMenuClicked = this._onShowMenuClicked.bind(this);\n\n    this.state = {\n      isCalloutVisible: false,\n    };\n  }\n\n  public render() {\n    let { isCalloutVisible } = this.state;\n\n    return (\n      <div className='ms-CalloutBasicExample'>\n        <div className='ms-CalloutBasicExample-buttonArea' ref={ (menuButton) => this._menuButtonElement = menuButton }>\n          <Button onClick={ this._onShowMenuClicked } >{ isCalloutVisible ? 'Hide callout' : 'Show callout' }</Button>\n        </div>\n        { isCalloutVisible ? (\n        <Callout\n          gapSpace={ 20 }\n          targetElement={ this._menuButtonElement }\n        >\n            <div className='ms-Callout-header'>\n              <p className='ms-Callout-title'>\n                All of your favorite people\n              </p>\n            </div>\n            <div className='ms-Callout-inner'>\n              <div className='ms-Callout-content'>\n                <p className='ms-Callout-subText'>\n                  Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.\n                </p>\n              </div>\n            </div>\n            <Link href='http://microsoft.com'>Go to microsoft</Link>\n        </Callout>\n        ) : (null) }\n      </div>\n    );\n  }\n\n  private _onShowMenuClicked() {\n    this.setState({\n      isCalloutVisible: !this.state.isCalloutVisible\n    });\n  }\n}\n";