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

fix(ui-toolkit): orrect components in UI Toolkit

This commit is contained in:
Sara Vieira 2018-02-20 18:29:47 +00:00 committed by Sérgio Ramos
parent 42d066be87
commit 401eb18e2b
2 changed files with 65 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,39 +1,35 @@
#### Success/Educational
#### Page Message
```jsx
const React = require('react');
const { Message, Title, Description } = require('.');
<Message onCloseClick={() => null}>
<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
```jsx
const React = require('react');
const { Message, Title, Description } = require('.');
<Message onCloseClick={() => null} error>
<Title>Choosing deployment data center</Title>
<Description>Oh no</Description>
</Message>;
```
#### Warning
```jsx
const React = require('react');
const { Message, Title, Description } = require('.');
<Message onCloseClick={() => null} warning>
<Title>Choosing deployment data center</Title>
<Description>There were some issues</Description>
</Message>;
<div>
<Message onCloseClick={() => null}>
<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>
<br/>
<Message onCloseClick={() => null} warning>
<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>
<br/>
<Message onCloseClick={() => null} error>
<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>
</div>
```

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

@ -3,7 +3,7 @@ import is from 'styled-is';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import remcalc from 'remcalc';
import { Col, Row } from 'joyent-react-styled-flexboxgrid';
import { H4 } from '../text/headings';
import P from '../text/p';
import { Close } from '../icons';
@ -16,6 +16,32 @@ const Container = styled.div`
border: ${remcalc(1)} solid ${props => props.theme.grey};
border-radius: ${remcalc(3)};
width: 100%;
&:before,
&:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
&:before {
top: -${remcalc(7)};
right: ${remcalc(17)};
border-width: 0 ${remcalc(5.5)} ${remcalc(7)} ${remcalc(5.5)};
border-color: transparent transparent ${props => props.theme.grey}
transparent;
}
&:after {
top: -${remcalc(6)};
right: ${remcalc(18)};
border-width: 0 ${remcalc(4.5)} ${remcalc(6)} ${remcalc(4.5)};
border-color: transparent transparent ${props => props.theme.white}
transparent;
}
`;
const Color = styled.div`
@ -56,11 +82,15 @@ const CloseIcons = Close.extend`
`;
export const Message = ({ onCloseClick, children, ...type }) => (
<Container>
<Color {...type} />
<Outlet>{children}</Outlet>
{onCloseClick ? <CloseIcons onClick={onCloseClick} /> : null}
</Container>
<Row>
<Col md={7} sm={12}>
<Container>
<Color {...type} />
<Outlet>{children}</Outlet>
{onCloseClick ? <CloseIcons onClick={onCloseClick} /> : null}
</Container>
</Col>
</Row>
);
export const Title = ({ children }) => <H4 noMargin>{children}</H4>;