styling modal and usuing React Close component instead of styled button
This commit is contained in:
parent
4866b3585f
commit
268d17bb4a
@ -17,14 +17,18 @@ const StyledButton = styled.button`
|
||||
position: absolute;
|
||||
top: ${remcalc(16)};
|
||||
right: ${remcalc(16)};
|
||||
|
||||
${props => props.customStyles ? props.customStyles : null}
|
||||
`;
|
||||
|
||||
const Close = ({
|
||||
style,
|
||||
onClick
|
||||
onClick,
|
||||
customStyles = ''
|
||||
}) => {
|
||||
return (
|
||||
<StyledButton
|
||||
customStyles={customStyles}
|
||||
onClick={onClick}
|
||||
style={style}
|
||||
>
|
||||
@ -37,6 +41,7 @@ const Close = ({
|
||||
};
|
||||
|
||||
Close.propTypes = {
|
||||
customStyles: React.PropTypes.string,
|
||||
onClick: React.PropTypes.func,
|
||||
style: React.PropTypes.object
|
||||
};
|
||||
|
@ -2,6 +2,8 @@ const constants = require('../../shared/constants');
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const Close = require('../close');
|
||||
|
||||
const {
|
||||
colors
|
||||
} = constants;
|
||||
@ -20,26 +22,12 @@ const StyledModal = styled.div`
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1;
|
||||
`;
|
||||
|
||||
const StyledClose = styled.button`
|
||||
background-color: #FFFFFF;
|
||||
border: solid 1px #D8D8D8;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
|
||||
color: black;
|
||||
cursor: #000000;
|
||||
font-size: 20px;
|
||||
padding: 0 10px;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
top: -15px;
|
||||
max-width: 80%;
|
||||
min-width: 50%;
|
||||
`;
|
||||
|
||||
const StyledOverlay = styled.div`
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
background: rgba(74, 73, 74, 0.46);
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
@ -52,6 +40,7 @@ const Modal = ({
|
||||
active = true,
|
||||
children,
|
||||
className,
|
||||
customCloseStyle,
|
||||
handleDismiss,
|
||||
name,
|
||||
style
|
||||
@ -68,11 +57,10 @@ const Modal = ({
|
||||
tabIndex={-2}
|
||||
/>
|
||||
<StyledModal aria-label={name}>
|
||||
<StyledClose
|
||||
<Close
|
||||
customStyles={customCloseStyle}
|
||||
onClick={handleDismiss}
|
||||
role='dialog'
|
||||
tabIndex={-1}
|
||||
>X</StyledClose>
|
||||
/>
|
||||
{children}
|
||||
</StyledModal>
|
||||
</div>
|
||||
@ -83,6 +71,7 @@ Modal.propTypes = {
|
||||
active: React.PropTypes.bool,
|
||||
children: React.PropTypes.node,
|
||||
className: React.PropTypes.string,
|
||||
customCloseStyle: React.PropTypes.string,
|
||||
handleDismiss: React.PropTypes.func,
|
||||
name: React.PropTypes.string,
|
||||
style: React.PropTypes.object
|
||||
|
@ -1,4 +1,8 @@
|
||||
const React = require('react');
|
||||
const constants = require('../../shared/constants');
|
||||
const {
|
||||
colors
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
@ -7,6 +11,11 @@ const {
|
||||
const Base= require('../base');
|
||||
const Modal = require('./');
|
||||
|
||||
const _customCloseStyle = `
|
||||
border: solid ${colors.alert} 5px;
|
||||
border-radius: 50%;
|
||||
`;
|
||||
|
||||
storiesOf('Modal', module)
|
||||
.add('Default', () => (
|
||||
<Base>
|
||||
@ -14,4 +23,18 @@ storiesOf('Modal', module)
|
||||
<h2>This is the Modal</h2>
|
||||
</Modal>
|
||||
</Base>
|
||||
))
|
||||
.add('Custom Styles on Close', () => (
|
||||
<Base>
|
||||
<Modal customCloseStyle={_customCloseStyle}>
|
||||
<h2>This is the Modal</h2>
|
||||
</Modal>
|
||||
</Base>
|
||||
))
|
||||
.add('Dismiss Function', () => (
|
||||
<Base>
|
||||
<Modal handleDismiss={function noop() {}}>
|
||||
<p>This has a handleDismiss (noop) function</p>
|
||||
</Modal>
|
||||
</Base>
|
||||
));
|
Loading…
Reference in New Issue
Block a user