Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/ui-toolkit/src/index.js
View File

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

22
packages/ui-toolkit/src/message/Readme.md
View File

@ -1,20 +1,32 @@
#### Success/Educational #### Success/Educational
``` ```
<Message onCloseClick={() =>{}} title="Choosing deployement data center"> const { Title, Description } = require('.');
Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more"
<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> </Message>
``` ```
#### Error #### 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 #### 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>
```

42
packages/ui-toolkit/src/message/index.js
View File

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