scripts/core/ui/components/Popup/Header.tsx
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Label from './Label';
/**
* @ngdoc react
* @name Header
* @description Header Component of a popup
*/
const Header: React.StatelessComponent<any> = (
{text, onClose, children, className, noBorder, noPadding, centerText},
): any => (
<div
className={classNames(
'popup__menu-header',
{
'popup__menu-header--no-border': noBorder,
'popup__menu-header--no-padding': noPadding,
},
className,
)}
>
{text && (
<Label text={text} centerText={centerText}>
{onClose && (
<button className="popup__menu-close" onClick={onClose}>
<i className="icon-close-small" />
</button>
)}
</Label>
)}
{children}
</div>
);
Header.propTypes = {
text: PropTypes.string,
onClose: PropTypes.func,
children: PropTypes.node,
className: PropTypes.string,
noBorder: PropTypes.bool,
noPadding: PropTypes.bool,
centerText: PropTypes.bool,
};
export default Header;