feat(ui-toolkit): refactor Message into a more composable widget

fixes #733
This commit is contained in:
Sérgio Ramos 2017-10-09 14:42:54 +01:00 committed by Sérgio Ramos
parent 4562b7cc21
commit 4a668e7c32
3 changed files with 37 additions and 32 deletions

View File

@ -20,7 +20,6 @@ export { default as Divider } from './divider';
export { default as Editor } from './editor';
export { default as IconButton } from './icon-button';
export { default as StatusLoader } from './status-loader';
export { default as Message } from './message';
export { default as Slider } from './slider';
export { MetricGraph } from './metrics';
@ -91,6 +90,12 @@ export {
Item as HeaderItem
} from './header';
export {
default as Message,
Title as MessageTitle,
Description as MessageDescription
} from './message';
export {
default as SectionList,
Item as SectionListItem,

View File

@ -1,20 +1,32 @@
#### Success/Educational
```
<Message onCloseClick={() =>{}} title="Choosing deployement data center">
Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more"
const { Title, Description } = require('.');
<Message>
<Title>Choosing deployment data center</Title>
<Description>Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more</Description>
</Message>
```
#### Error
```
<Message onCloseClick={() =>{}} title="Choosing deployement data center" error message="Oh no"/>
const { Title, Description } = require('.');
<Message error>
<Title>Choosing deployment data center</Title>
<Description>Oh no</Description>
</Message>
```
#### Warning
```
<Message onCloseClick={() =>{}} title="Choosing deployement data center" warning message="There were some issues"/>
```
const { Title, Description } = require('.');
<Message warning>
<Title>Choosing deployment data center</Title>
<Description>There were some issues</Description>
</Message>
```

View File

@ -10,7 +10,7 @@ import P from '../text/p';
import CloseButton from '../close-button';
import { border, bottomShaddow } from '../boxes';
const StyledContainer = styled.div`
const Container = styled.div`
position: relative;
margin-bottom: ${unitcalc(2)};
background-color: ${props => props.theme.white};
@ -20,53 +20,41 @@ const StyledContainer = styled.div`
display: flex;
`;
const StyledColor = styled.div`
const Color = styled.div`
min-width: ${remcalc(36)};
margin-right: ${remcalc(18)};
min-height: 100%;
background-color: ${props => props.theme.green};
${is('error')`
background-color: ${props => props.theme.red};
`};
${is('warning')`
background-color: ${props => props.theme.orange};
`};
`;
const StyledMessageContainer = styled.div`
padding: ${unitcalc(2)} 0 ${unitcalc(2.25)} 0;
`;
const Outlet = styled.div`padding: ${unitcalc(2)} 0 ${unitcalc(2.25)} 0;`;
const StyledClose = styled(CloseButton)`
const Close = styled(CloseButton)`
position: absolute;
right: ${unitcalc(0.5)};
top: ${unitcalc(0.5)};
`;
const Message = ({ title, message, onCloseClick, children, ...type }) => {
const renderTitle = title ? <H4>{title}</H4> : null;
const renderClose = onCloseClick ? (
<StyledClose onClick={onCloseClick} />
) : null;
return (
<StyledContainer>
<StyledColor {...type} />
<div>
<StyledMessageContainer>
{renderTitle}
<P>{message || children}</P>
</StyledMessageContainer>
</div>
{renderClose}
</StyledContainer>
const Message = ({ onCloseClick = () => null, children, ...type }) => (
<Container>
<Color {...type} />
<Outlet>{children}</Outlet>
</Container>
);
};
export const Title = ({ children }) => <H4>{children}</H4>;
export const Description = ({ children }) => <P>{children}</P>;
Message.propTypes = {
title: PropTypes.string,
message: PropTypes.string,
onCloseClick: PropTypes.func,
error: PropTypes.bool,
warning: PropTypes.bool,