Allow extra elements to be injected into Overlay header

This commit is contained in:
Andrew Nicolaou 2019-10-21 02:05:35 +02:00
parent 126bdcab72
commit 5611d32653
2 changed files with 15 additions and 5 deletions

View file

@ -64,7 +64,8 @@ class Overlay extends React.Component {
const { const {
ariaLabel, ariaLabel,
title, title,
children children,
actions,
} = this.props; } = this.props;
return ( return (
<div className="overlay"> <div className="overlay">
@ -77,9 +78,12 @@ class Overlay extends React.Component {
> >
<header className="overlay__header"> <header className="overlay__header">
<h2 className="overlay__title">{title}</h2> <h2 className="overlay__title">{title}</h2>
<div className="overlay__actions">
{actions}
<button className="overlay__close-button" onClick={this.close} > <button className="overlay__close-button" onClick={this.close} >
<InlineSVG src={exitUrl} alt="close overlay" /> <InlineSVG src={exitUrl} alt="close overlay" />
</button> </button>
</div>
</header> </header>
{children} {children}
</section> </section>
@ -91,6 +95,7 @@ class Overlay extends React.Component {
Overlay.propTypes = { Overlay.propTypes = {
children: PropTypes.element, children: PropTypes.element,
actions: PropTypes.element,
closeOverlay: PropTypes.func, closeOverlay: PropTypes.func,
title: PropTypes.string, title: PropTypes.string,
ariaLabel: PropTypes.string, ariaLabel: PropTypes.string,
@ -99,6 +104,7 @@ Overlay.propTypes = {
Overlay.defaultProps = { Overlay.defaultProps = {
children: null, children: null,
actions: null,
title: 'Modal', title: 'Modal',
closeOverlay: null, closeOverlay: null,
ariaLabel: 'modal', ariaLabel: 'modal',

View file

@ -34,11 +34,15 @@
flex: 1 0 auto; flex: 1 0 auto;
} }
.overlay__actions {
display: flex;
}
.overlay__title { .overlay__title {
font-size: #{21 / $base-font-size}rem; font-size: #{21 / $base-font-size}rem;
} }
.overlay__close-button { .overlay__close-button {
@include icon(); @include icon();
padding: #{3 / $base-font-size}rem 0; padding: #{3 / $base-font-size}rem 0 #{3 / $base-font-size}rem #{10 / $base-font-size}rem;
} }