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

fixes #967

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>;

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,
+.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 {
@@ -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,
+.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 {
@@ -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,
+.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 {
@@ -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"
 >

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)};
+  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%;
-  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)};
+  top: ${remcalc(23)};
-  margin: 0;
+  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