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

fix(ui-toolkit): overhaul of Message according to designs

Browse Source 
fixes #967
This commit is contained in:
Sérgio Ramos 2018-01-26 14:12:46 +00:00 committed by Sérgio Ramos
parent 955b5e12e2
commit ad09744371
3 changed files with 105 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,7 @@
const React = require('react'); const React = require('react');
const { Message, Title, Description } = require('.'); const { Message, Title, Description } = require('.');
<Message> <Message onCloseClick={() => null}>
<Title>Choosing deployment data center</Title> <Title>Choosing deployment data center</Title>
<Description> <Description>
Not all data centres have all configurations of instances available. Make Not all data centres have all configurations of instances available. Make
@ -20,7 +20,7 @@ const { Message, Title, Description } = require('.');
const React = require('react'); const React = require('react');
const { Message, Title, Description } = require('.'); const { Message, Title, Description } = require('.');
<Message error> <Message onCloseClick={() => null} error>
<Title>Choosing deployment data center</Title> <Title>Choosing deployment data center</Title>
<Description>Oh no</Description> <Description>Oh no</Description>
</Message>; </Message>;
@ -32,7 +32,7 @@ const { Message, Title, Description } = require('.');
const React = require('react'); const React = require('react');
const { Message, Title, Description } = require('.'); const { Message, Title, Description } = require('.');
<Message warning> <Message onCloseClick={() => null} warning>
<Title>Choosing deployment data center</Title> <Title>Choosing deployment data center</Title>
<Description>There were some issues</Description> <Description>There were some issues</Description>
</Message>; </Message>;

274
packages/ui-toolkit/src/message/__tests__/__snapshots__/message.spec.js.snap
View File

@ -6,6 +6,8 @@ exports[`Message Description 1`] = `
line-height: 1.5rem; line-height: 1.5rem;
font-size: 0.9375rem; font-size: 0.9375rem;
margin: 0; margin: 0;
line-height: 0.875rem;
font-size: 0.8125rem;
} }
.c0 + p, .c0 + p,
@ -37,17 +39,29 @@ exports[`Message Message 1`] = `
margin: 0; margin: 0;
} }
.c3 + p, .c0 {
.c3 + small, display: -webkit-box;
.c3 + h1, display: -webkit-flex;
.c3 + h2, display: -ms-flexbox;
.c3 + label, display: flex;
.c3 + h3, position: relative;
.c3 + h4, background-color: rgb(255,255,255);
.c3 + h5, box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
.c3 + div, border: 0.0625rem solid rgb(216,216,216);
.c3 + span { border-radius: 0.1875rem;
margin-top: 0.75rem; width: 100%;
}
.c1 {
border-radius: 0.1875rem 0 0 0.1875rem;
margin: -0.0625rem 0 -0.0625rem -0.0625rem;
min-width: 0.75rem;
min-height: 100%;
background-color: rgb(0,152,88);
}
.c2 {
padding: 1.125rem 1.125rem;
} }
.c4 { .c4 {
@ -55,6 +69,8 @@ exports[`Message Message 1`] = `
line-height: 1.5rem; line-height: 1.5rem;
font-size: 0.9375rem; font-size: 0.9375rem;
margin: 0; margin: 0;
line-height: 0.875rem;
font-size: 0.8125rem;
} }
.c4 + p, .c4 + p,
@ -70,36 +86,6 @@ exports[`Message Message 1`] = `
padding-bottom: 2.25rem; padding-bottom: 2.25rem;
} }
.c0 {
position: relative;
margin-bottom: 0.75rem;
background-color: rgb(255,255,255);
box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
border: 0.0625rem solid rgb(216,216,216);
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.c1 {
min-width: 2.25rem;
margin-right: 1.125rem;
min-height: 100%;
background-color: rgb(0,152,88);
}
.c2 {
padding: 0.75rem 0 0.84375rem 0;
}
.c5 {
position: absolute;
right: 0.1875rem;
margin: 0;
}
<div <div
className="c0" className="c0"
> >
@ -120,25 +106,6 @@ exports[`Message Message 1`] = `
Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
</p> </p>
</div> </div>
<svg
className="c5 "
height="11.31"
innerRef={undefined}
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 11.31 11.31"
width="11.31"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z"
fill="rgba(73, 73, 73, 1)"
/>
</svg>
</div> </div>
`; `;
@ -151,17 +118,30 @@ exports[`Message Message Error 1`] = `
margin: 0; margin: 0;
} }
.c3 + p, .c0 {
.c3 + small, display: -webkit-box;
.c3 + h1, display: -webkit-flex;
.c3 + h2, display: -ms-flexbox;
.c3 + label, display: flex;
.c3 + h3, position: relative;
.c3 + h4, background-color: rgb(255,255,255);
.c3 + h5, box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
.c3 + div, border: 0.0625rem solid rgb(216,216,216);
.c3 + span { border-radius: 0.1875rem;
margin-top: 0.75rem; width: 100%;
}
.c1 {
border-radius: 0.1875rem 0 0 0.1875rem;
margin: -0.0625rem 0 -0.0625rem -0.0625rem;
min-width: 0.75rem;
min-height: 100%;
background-color: rgb(0,152,88);
background-color: rgb(210,67,58);
}
.c2 {
padding: 1.125rem 1.125rem;
} }
.c4 { .c4 {
@ -169,6 +149,8 @@ exports[`Message Message Error 1`] = `
line-height: 1.5rem; line-height: 1.5rem;
font-size: 0.9375rem; font-size: 0.9375rem;
margin: 0; margin: 0;
line-height: 0.875rem;
font-size: 0.8125rem;
} }
.c4 + p, .c4 + p,
@ -184,37 +166,6 @@ exports[`Message Message Error 1`] = `
padding-bottom: 2.25rem; padding-bottom: 2.25rem;
} }
.c0 {
position: relative;
margin-bottom: 0.75rem;
background-color: rgb(255,255,255);
box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
border: 0.0625rem solid rgb(216,216,216);
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.c1 {
min-width: 2.25rem;
margin-right: 1.125rem;
min-height: 100%;
background-color: rgb(0,152,88);
background-color: rgb(210,67,58);
}
.c2 {
padding: 0.75rem 0 0.84375rem 0;
}
.c5 {
position: absolute;
right: 0.1875rem;
margin: 0;
}
<div <div
className="c0" className="c0"
> >
@ -235,25 +186,6 @@ exports[`Message Message Error 1`] = `
Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
</p> </p>
</div> </div>
<svg
className="c5 "
height="11.31"
innerRef={undefined}
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 11.31 11.31"
width="11.31"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z"
fill="rgba(73, 73, 73, 1)"
/>
</svg>
</div> </div>
`; `;
@ -266,17 +198,30 @@ exports[`Message Message Warning 1`] = `
margin: 0; margin: 0;
} }
.c3 + p, .c0 {
.c3 + small, display: -webkit-box;
.c3 + h1, display: -webkit-flex;
.c3 + h2, display: -ms-flexbox;
.c3 + label, display: flex;
.c3 + h3, position: relative;
.c3 + h4, background-color: rgb(255,255,255);
.c3 + h5, box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
.c3 + div, border: 0.0625rem solid rgb(216,216,216);
.c3 + span { border-radius: 0.1875rem;
margin-top: 0.75rem; width: 100%;
}
.c1 {
border-radius: 0.1875rem 0 0 0.1875rem;
margin: -0.0625rem 0 -0.0625rem -0.0625rem;
min-width: 0.75rem;
min-height: 100%;
background-color: rgb(0,152,88);
background-color: rgb(227,130,0);
}
.c2 {
padding: 1.125rem 1.125rem;
} }
.c4 { .c4 {
@ -284,6 +229,8 @@ exports[`Message Message Warning 1`] = `
line-height: 1.5rem; line-height: 1.5rem;
font-size: 0.9375rem; font-size: 0.9375rem;
margin: 0; margin: 0;
line-height: 0.875rem;
font-size: 0.8125rem;
} }
.c4 + p, .c4 + p,
@ -299,37 +246,6 @@ exports[`Message Message Warning 1`] = `
padding-bottom: 2.25rem; padding-bottom: 2.25rem;
} }
.c0 {
position: relative;
margin-bottom: 0.75rem;
background-color: rgb(255,255,255);
box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
border: 0.0625rem solid rgb(216,216,216);
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.c1 {
min-width: 2.25rem;
margin-right: 1.125rem;
min-height: 100%;
background-color: rgb(0,152,88);
background-color: rgb(227,130,0);
}
.c2 {
padding: 0.75rem 0 0.84375rem 0;
}
.c5 {
position: absolute;
right: 0.1875rem;
margin: 0;
}
<div <div
className="c0" className="c0"
> >
@ -350,25 +266,6 @@ exports[`Message Message Warning 1`] = `
Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
</p> </p>
</div> </div>
<svg
className="c5 "
height="11.31"
innerRef={undefined}
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 11.31 11.31"
width="11.31"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z"
fill="rgba(73, 73, 73, 1)"
/>
</svg>
</div> </div>
`; `;
@ -381,19 +278,6 @@ exports[`Message Title 1`] = `
margin: 0; margin: 0;
} }
.c0 + p,
.c0 + small,
.c0 + h1,
.c0 + h2,
.c0 + label,
.c0 + h3,
.c0 + h4,
.c0 + h5,
.c0 + div,
.c0 + span {
margin-top: 0.75rem;
}
<h4 <h4
className="c0" className="c0"
> >

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

@ -2,7 +2,6 @@ import React from 'react';
import is from 'styled-is'; import is from 'styled-is';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import unitcalc from 'unitcalc';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import { H4 } from '../text/headings'; import { H4 } from '../text/headings';
@ -10,20 +9,25 @@ import P from '../text/p';
import { Close } from '../icons'; import { Close } from '../icons';
const Container = styled.div` const Container = styled.div`
display: flex;
position: relative; position: relative;
margin-bottom: ${unitcalc(2)};
background-color: ${props => props.theme.white}; background-color: ${props => props.theme.white};
box-shadow: ${props => props.theme.shadows.bottomShadow}; box-shadow: ${props => props.theme.shadows.bottomShadow};
border: ${remcalc(1)} solid ${props => props.theme.grey}; border: ${remcalc(1)} solid ${props => props.theme.grey};
border-radius: ${remcalc(3)};
width: 100%; width: 100%;
display: flex;
`; `;
const Color = styled.div` const Color = styled.div`
min-width: ${remcalc(36)}; border-radius: ${remcalc(3)} 0 0 ${remcalc(3)};
margin-right: ${remcalc(18)};
margin: ${remcalc(-1)} 0 ${remcalc(-1)} ${remcalc(-1)};
min-width: ${remcalc(12)};
min-height: 100%; min-height: 100%;
${is('success')`
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};
@ -36,26 +40,32 @@ const Color = styled.div`
const Outlet = styled.div` const Outlet = styled.div`
/* trick prettier */ /* trick prettier */
padding: ${unitcalc(2)} 0 ${unitcalc(2.25)} 0; padding: ${remcalc(18)} ${remcalc(18)};
`; `;
const CloseButton = styled(Close)` const Text = P.extend`
line-height: ${remcalc(14)};
font-size: ${remcalc(13)};
`;
const CloseIcons = Close.extend`
position: absolute; position: absolute;
right: ${unitcalc(0.5)}; top: ${remcalc(23)};
margin: 0; right: ${remcalc(18)};
cursor: pointer;
`; `;
export const Message = ({ onCloseClick, children, ...type }) => ( export const Message = ({ onCloseClick, children, ...type }) => (
<Container> <Container>
<Color {...type} /> <Color {...type} />
<Outlet>{children}</Outlet> <Outlet>{children}</Outlet>
{onCloseClick && <CloseButton onClick={onCloseClick} />} {onCloseClick ? <CloseIcons onClick={onCloseClick} /> : null}
</Container> </Container>
); );
export const Title = ({ children }) => <H4>{children}</H4>; export const Title = ({ children }) => <H4 noMargin>{children}</H4>;
export const Description = ({ children }) => <P>{children}</P>; export const Description = ({ children }) => <Text>{children}</Text>;
Message.propTypes = { Message.propTypes = {
/** /**
@ -77,7 +87,6 @@ Message.propTypes = {
}; };
Message.defaultProps = { Message.defaultProps = {
onCloseClick: () => {},
error: false, error: false,
warning: false, warning: false,
success: true success: true