Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React from 'react';
import PropTypes from 'prop-types';
import SanitizedContent from '../SanitizedContent';
import { CloseXIcon } from '../../lib/SvgComponents.jsx';
const ExpandedView = ({
label,
expanded,
content,
dismissable,
collapseNotification,
}) => {
return (
<div className={`notification-banner-wrapper expanded-view`}>
<div className="notification-banner-label">{label}</div>
<div className="notification-banner-content qppds">
<SanitizedContent
html={expanded ? content : '<p>No notifications to display</p>'}
/>
</div>
{expanded && dismissable && (
<button
onClick={collapseNotification}
type="button"
className="notification-banner-close"
>
<svg className="close-icon" aria-hidden="true" focusable="false">
<CloseXIcon />
</svg>
<span className="sr-only">Close</span>
</button>
)}
</div>
);
};
ExpandedView.propTypes = {
label: PropTypes.string,
expanded: PropTypes.bool,
content: PropTypes.string,
dismissable: PropTypes.bool,
collapseNotification: PropTypes.func,
};
export default ExpandedView;
|