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

fixes #967
2018-01-26 14:12:46 +00:00 · 2018-01-26 14:12:46 +00:00 · ad09744371
commit ad09744371
parent 955b5e12e2
3 changed files with 105 additions and 212 deletions
--- a/packages/ui-toolkit/src/message/Readme.md
+++ b/packages/ui-toolkit/src/message/Readme.md
@ -4,7 +4,7 @@
 const React = require('react');
 const { Message, Title, Description } = require('.');

-<Message>
+<Message onCloseClick={() => null}>
  <Title>Choosing deployment data center</Title>
  <Description>
    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 { Message, Title, Description } = require('.');

-<Message error>
+<Message onCloseClick={() => null} error>
  <Title>Choosing deployment data center</Title>
  <Description>Oh no</Description>
 </Message>;
@ -32,7 +32,7 @@ const { Message, Title, Description } = require('.');
 const React = require('react');
 const { Message, Title, Description } = require('.');

-<Message warning>
+<Message onCloseClick={() => null} warning>
  <Title>Choosing deployment data center</Title>
  <Description>There were some issues</Description>
 </Message>;
--- a/packages/ui-toolkit/src/message/tests/snapshots/message.spec.js.snap
+++ b/packages/ui-toolkit/src/message/tests/snapshots/message.spec.js.snap
@ -6,6 +6,8 @@ exports[`Message Description 1`] = `
  line-height: 1.5rem;
  font-size: 0.9375rem;
  margin: 0;
+  line-height: 0.875rem;
+  font-size: 0.8125rem;
 }

 .c0 + p,
@ -37,17 +39,29 @@ exports[`Message Message 1`] = `
  margin: 0;
 }

-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  margin-top: 0.75rem;
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  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);
+  border-radius: 0.1875rem;
+  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 {
@ -55,6 +69,8 @@ exports[`Message Message 1`] = `
  line-height: 1.5rem;
  font-size: 0.9375rem;
  margin: 0;
+  line-height: 0.875rem;
+  font-size: 0.8125rem;
 }

 .c4 + p,
@ -70,36 +86,6 @@ exports[`Message Message 1`] = `
  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
  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
    </p>
  </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>
 `;

@ -151,17 +118,30 @@ exports[`Message Message Error 1`] = `
  margin: 0;
 }

-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  margin-top: 0.75rem;
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  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);
+  border-radius: 0.1875rem;
+  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 {
@ -169,6 +149,8 @@ exports[`Message Message Error 1`] = `
  line-height: 1.5rem;
  font-size: 0.9375rem;
  margin: 0;
+  line-height: 0.875rem;
+  font-size: 0.8125rem;
 }

 .c4 + p,
@ -184,37 +166,6 @@ exports[`Message Message Error 1`] = `
  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
  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
    </p>
  </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>
 `;

@ -266,17 +198,30 @@ exports[`Message Message Warning 1`] = `
  margin: 0;
 }

-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  margin-top: 0.75rem;
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  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);
+  border-radius: 0.1875rem;
+  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 {
@ -284,6 +229,8 @@ exports[`Message Message Warning 1`] = `
  line-height: 1.5rem;
  font-size: 0.9375rem;
  margin: 0;
+  line-height: 0.875rem;
+  font-size: 0.8125rem;
 }

 .c4 + p,
@ -299,37 +246,6 @@ exports[`Message Message Warning 1`] = `
  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
  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
    </p>
  </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>
 `;

@ -381,19 +278,6 @@ exports[`Message Title 1`] = `
  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
  className="c0"
 >
--- a/packages/ui-toolkit/src/message/index.js
+++ b/packages/ui-toolkit/src/message/index.js
@ -2,7 +2,6 @@ import React from 'react';
 import is from 'styled-is';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import unitcalc from 'unitcalc';
 import remcalc from 'remcalc';

 import { H4 } from '../text/headings';
@ -10,20 +9,25 @@ import P from '../text/p';
 import { Close } from '../icons';

 const Container = styled.div`
+  display: flex;
  position: relative;
-  margin-bottom: ${unitcalc(2)};
  background-color: ${props => props.theme.white};
  box-shadow: ${props => props.theme.shadows.bottomShadow};
  border: ${remcalc(1)} solid ${props => props.theme.grey};
+  border-radius: ${remcalc(3)};
  width: 100%;
-  display: flex;
 `;

 const Color = styled.div`
-  min-width: ${remcalc(36)};
-  margin-right: ${remcalc(18)};
+  border-radius: ${remcalc(3)} 0 0 ${remcalc(3)};
+
+  margin: ${remcalc(-1)} 0 ${remcalc(-1)} ${remcalc(-1)};
+  min-width: ${remcalc(12)};
  min-height: 100%;
-  background-color: ${props => props.theme.green};
+
+  ${is('success')`
+    background-color: ${props => props.theme.green};
+  `};

  ${is('error')`
    background-color: ${props => props.theme.red};
@ -36,26 +40,32 @@ const Color = styled.div`

 const Outlet = styled.div`
  /* 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;
-  right: ${unitcalc(0.5)};
-  margin: 0;
+  top: ${remcalc(23)};
+  right: ${remcalc(18)};
+  cursor: pointer;
 `;

 export const Message = ({ onCloseClick, children, ...type }) => (
  <Container>
    <Color {...type} />
    <Outlet>{children}</Outlet>
-    {onCloseClick && <CloseButton onClick={onCloseClick} />}
+    {onCloseClick ? <CloseIcons onClick={onCloseClick} /> : null}
  </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 = {
  /**
@ -77,7 +87,6 @@ Message.propTypes = {
 };

 Message.defaultProps = {
-  onCloseClick: () => {},
  error: false,
  warning: false,
  success: true