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    this._onCalloutDismiss = this._onCalloutDismiss.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-CalloutExample'>\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            className='ms-CalloutExample-callout'\n            gapSpace={ 20 }\n            targetElement={ this._menuButtonElement }\n            onDismiss={ this._onCalloutDismiss }\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 className='ms-Callout-actions'>\n                <Link className='ms-Callout-link' href='http://microsoft.com'>Go to microsoft</Link>\n              </div>\n            </div>\n          </Callout>\n        ) }\n      </div>\n    );\n  }\n\n  private _onShowMenuClicked() {\n    this.setState({\n      isCalloutVisible: !this.state.isCalloutVisible\n    });\n  }\n\n  private _onCalloutDismiss() {\n    this.setState({\n      isCalloutVisible: false\n    });\n  }\n}\n";