85 lines
2.0 KiB
JavaScript
85 lines
2.0 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import styled from 'styled-components';
|
|
import unitcalc from 'unitcalc';
|
|
|
|
import { H3 } from '../text/headings';
|
|
import P from '../text/p';
|
|
import CloseButton from '../close-button';
|
|
import { border, bottomShaddow } from '../boxes';
|
|
|
|
const StyledContainer = styled.div`
|
|
position: relative;
|
|
margin-bottom: ${unitcalc(2)};
|
|
background-color: ${props => props.theme.white};
|
|
box-shadow: ${bottomShaddow};
|
|
border: ${border.confirmed};
|
|
`;
|
|
|
|
const StyledColor = styled.div`
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: ${unitcalc(6)};
|
|
height: 100%;
|
|
background-color: ${props =>
|
|
props.type === 'ERROR'
|
|
? props.theme.red
|
|
: props.type === 'WARNING'
|
|
? props.theme.orange
|
|
: props.type === 'EDUCATION' ? props.theme.green : props.theme.green};
|
|
`;
|
|
|
|
const StyledMessageContainer = styled.div`
|
|
padding: ${unitcalc(2)} 0 ${unitcalc(2.25)} 0;
|
|
`;
|
|
|
|
const StyledTitle = styled(H3)`
|
|
margin: 0 ${unitcalc(9)} ${unitcalc(0.25)} ${unitcalc(9)};
|
|
font-weight: 600;
|
|
`;
|
|
|
|
const StyledMessage = styled(P)`
|
|
margin: ${unitcalc(0.25)} ${unitcalc(9)} 0 ${unitcalc(9)};
|
|
`;
|
|
|
|
const StyledClose = styled(CloseButton)`
|
|
position: absolute;
|
|
right: ${unitcalc(0.5)};
|
|
top: ${unitcalc(0.5)};
|
|
`;
|
|
|
|
const Message = ({ title, message, onCloseClick, type = 'MESSAGE' }) => {
|
|
const renderTitle = title
|
|
? <StyledTitle>
|
|
{title}
|
|
</StyledTitle>
|
|
: null;
|
|
|
|
const renderClose = onCloseClick
|
|
? <StyledClose onClick={onCloseClick} />
|
|
: null;
|
|
|
|
return (
|
|
<StyledContainer>
|
|
<StyledColor type={type} />
|
|
<StyledMessageContainer>
|
|
{renderTitle}
|
|
<StyledMessage>
|
|
{message}
|
|
</StyledMessage>
|
|
</StyledMessageContainer>
|
|
{renderClose}
|
|
</StyledContainer>
|
|
);
|
|
};
|
|
|
|
Message.propTypes = {
|
|
title: PropTypes.string,
|
|
message: PropTypes.string.isRequired,
|
|
onCloseClick: PropTypes.func,
|
|
type: PropTypes.oneOf(['ERROR', 'WARNING', 'EDUCATION', 'MESSAGE'])
|
|
};
|
|
|
|
export default Message;
|