Merge pull request #440 from ConsenSys/development

merge v0.12.0 release
ConsenSysMesh · Feb 25, 2020 · ecdf851 · ecdf851
2 parents c3046b7 + 092cb44
commit ecdf851
Show file tree

Hide file tree

Showing 57 changed files with 3,000 additions and 11,823 deletions.
diff --git a/README.md b/README.md
@@ -35,14 +35,18 @@ class Example extends Component {
 
 ## Change log
 
+### 0.12.0
+
+🚀 New Feature
+- Updated all components to `styled-system` v5.
+
 ### 0.11.1
 
 🐛 Bug Fix
 - Fixed icon background color on `ToastMessage` component. #381
 - fixed display prop not rendering correctly for `Icon` component. #380
 - fixed disabled styling for `Slider` component. #414
 
-
 ### 0.11.0
 
 🚀 New Feature

diff --git a/demo/public/index.html b/demo/public/index.html
@@ -25,6 +25,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Source+Sans+Pro&display=swap" rel="stylesheet">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/demo/src/App.js b/demo/src/App.js
@@ -36,6 +36,7 @@ import {
   theme,
 } from 'rimble-ui';
 
+import TestForm from './components/TestForm';
 import BaseLineGrid from './components/BaseLineGrid';
 
 const testTheme = {
@@ -45,6 +46,12 @@ const testTheme = {
     text: 'black',
     background: 'white',
     primary: 'crimson',
+    'primary-light': 'red',
+    'primary-dark': 'darkred',
+    success: 'green',
+    warning: 'orange',
+    danger: 'orangered',
+    info: 'blue',
   },
 };
 
@@ -123,7 +130,10 @@ const testComponents = props => (
       textLabels
       address="0x99cb784f0429efd72wu39fn4256n8wud4e01c7d2"
     />
-    <Input />
+    <Card my={4}>
+      <TestForm />
+    </Card>
+    <Input placeholder={'placeholder'} />
     <Icon name={'Info'} />
     <Icon name={'Info'} color="primary" />
     <Tooltip message="Your custom message">
@@ -142,7 +152,7 @@ const testComponents = props => (
         spotcolor: '#4E3FCE',
       }}
     />
-    <Avatar />
+    <Avatar src={'https://source.unsplash.com/128x128/?people,face,portrait'} />
     <Avatar size="small" />
     <Avatar size="medium" />
     <Avatar size="large" />
@@ -212,7 +222,48 @@ const testComponents = props => (
     <Checkbox checked label="Checkbox checked" readOnly />
     <Checkbox disabled label="Checkbox disabled" readOnly />
     <Checkbox disabled checked label="Checkbox checked disabled" readOnly />
-    <Box />
+
+    <Box my={4} opacity={.6}>
+      <Flex>
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+      </Flex>
+      <Flex>
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+      </Flex>
+      <Flex>
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+      </Flex>
+      <Flex>
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+        <Box width={1} height={'4rem'} bg={'primary'} m={1} />
+      </Flex>
+    </Box>
+
     <Card m={3} />
     <Card mx="auto" px="4" color="primary">
       <Heading mb={3}>Heading</Heading>
@@ -222,10 +273,12 @@ const testComponents = props => (
         delectus architecto nemo quos alias sunt voluptate impedit, facilis
         sequi tempore. Amet!
       </Text>
-      <Button mr={3}>Accept</Button>
-      <Button.Outline>Cancel</Button.Outline>
+      <Flex>
+        <Button mr={3}>Accept</Button>
+        <Button.Outline>Cancel</Button.Outline>
+        <Button.Text ml={'auto'}>Skip</Button.Text>
+      </Flex>
     </Card>
-    <Flex />
     <Table />
     <Image src="https://source.unsplash.com/random/1280x720" />
     <MetaMaskButton>
@@ -247,33 +300,12 @@ const testComponents = props => (
     <ToastMessage.Processing />
     <ToastMessage.Success />
     <ToastMessage.Failure />
-    <Pill mr={'2'} mb={'3'}>
-      {'Pending'}
-    </Pill>
-    <Pill selected={true} mr={'2'} mb={'3'}>
-      {'Pending'}
-    </Pill>
-
-    <Pill color={'primary'} mr={'2'} mb={'3'}>
-      {'Pending'}
-    </Pill>
-    <Pill selected={true} color={'primary'} mr={'2'} mb={'3'}>
-      {'Pending'}
-    </Pill>
-
-    <Pill color={'red'} mr={'2'} mb={'3'}>
-      {'Pending'}
-    </Pill>
-    <Pill selected={true} color={'red'} mr={'2'} mb={'3'}>
-      {'Pending'}
-    </Pill>
-
-    <Pill color={'blue'} mr={'2'} mb={'3'}>
-      {'Pending'}
-    </Pill>
-    <Pill selected={true} color={'blue'} mr={'2'} mb={'3'}>
-      {'Pending'}
-    </Pill>
+    <Pill>{'Pill Text'}</Pill>
+    <Pill color={'success'}>{'Pill Text'}</Pill>
+    <Pill color={'warning'}>{'Pill Text'}</Pill>
+    <Pill color={'danger'}>{'Pill Text'}</Pill>
+    <Pill color={'info'}>{'Pill Text'}</Pill>
+    <Pill color={'#4B0082'}>{'Pill Text'}</Pill>
     <Flash>
       I am a Flash with a <Flash.Link>Link</Flash.Link>
     </Flash>

diff --git a/demo/src/components/TestForm.js b/demo/src/components/TestForm.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import { Form, Button } from 'rimble-ui';
+
+class TestForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { validated: false };
+  }
+
+  handleSubmit = e => {
+    e.preventDefault();
+    this.setState({ validated: true });
+  };
+
+  handleValidation = e => {
+    e.target.parentNode.classList.add('was-validated');
+  };
+
+  render() {
+    return (
+      <Form onSubmit={this.handleSubmit}>
+        <Form.Field label="Email" width={1}>
+          <Form.Input
+            type="email"
+            required
+            width={1}
+            onChange={this.handleValidation}
+          />
+        </Form.Field>
+        <Form.Field validated={this.state.validated} label="Password" width={1}>
+          <Form.Input
+            type="password"
+            required
+            width={1}
+            onChange={this.handleValidation}
+          />
+        </Form.Field>
+
+        <Form.Check
+          label="Remember me?"
+          mb={3}
+          onChange={this.handleValidation}
+        />
+
+        <Button type="submit" width={1}>
+          Sign Up
+        </Button>
+      </Form>
+    );
+  }
+}
+
+export default TestForm;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rimble-ui",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "Rimble Design System react component library.",
   "author": "ConsenSys Design",
   "homepage": "https://rimble.consensys.design/",
@@ -23,6 +23,8 @@
   },
   "dependencies": {
     "@d8660091/react-popper": "^1.0.4",
+    "@styled-system/prop-types": "^5.1.2",
+    "@styled-system/theme-get": "^5.1.2",
     "@svgr/rollup": "^4.2.0",
     "clipboard": "^2.0.4",
     "ethereum-blockies": "^0.1.1",
@@ -31,7 +33,7 @@
     "qrcode.react": "^0.9.3",
     "rmdi": "^1.0.1",
     "set-value": "^3.0.1",
-    "styled-system": "^4.1.0"
+    "styled-system": "^5.1.2"
   },
   "peerDependencies": {
     "prop-types": "^15.7.2",

diff --git a/src/Avatar/__snapshots__/Avatar.test.js.snap b/src/Avatar/__snapshots__/Avatar.test.js.snap
@@ -2,13 +2,10 @@
 
 exports[`Avatar component sanity matches default snapshot 1`] = `
 .c0 {
-  background-color: #CCC;
+  box-sizing: border-box;
   width: 2rem;
   height: 2rem;
-}
-
-.c0 {
-  box-sizing: border-box;
+  background-color: #CCC;
 }
 
 .c1 {
@@ -30,13 +27,10 @@ exports[`Avatar component sanity matches default snapshot 1`] = `
 
 exports[`Avatar component sanity matches themed snapshot 1`] = `
 .c0 {
-  background-color: #CCC;
+  box-sizing: border-box;
   width: 2rem;
   height: 2rem;
-}
-
-.c0 {
-  box-sizing: border-box;
+  background-color: #CCC;
 }
 
 .c1 {

diff --git a/src/BaseStyles.js b/src/BaseStyles.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled, { createGlobalStyle } from 'styled-components';
-import { themeGet } from 'styled-system';
+import { compose, color, typography } from 'styled-system';
+import propTypes from '@styled-system/prop-types';
+import { themeGet } from '@styled-system/theme-get';
 import { normalize } from 'polished';
-import { TYPOGRAPHY, COMMON } from './constants';
 import theme from './theme';
 
 const GlobalStyle = createGlobalStyle`
@@ -47,9 +48,13 @@ const Base = ({ children, ...rest }) => {
   );
 };
 
+const styleProps = compose(
+  color,
+  typography
+);
+
 const BaseStyles = styled(Base)`
-  ${TYPOGRAPHY};
-  ${COMMON};
+  ${styleProps}
 `;
 
 BaseStyles.defaultProps = {
@@ -60,8 +65,7 @@ BaseStyles.defaultProps = {
 };
 
 BaseStyles.propTypes = {
-  ...TYPOGRAPHY.propTypes,
-  ...COMMON.propTypes,
+  ...propTypes.styleProps,
   theme: PropTypes.object,
 };
 

diff --git a/src/Box/index.js b/src/Box/index.js
@@ -1,21 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { opacity } from 'styled-system';
-import { COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS } from '../constants';
+import {
+  compose,
+  color,
+  space,
+  layout,
+  position,
+  flexbox,
+  border,
+  typography,
+  shadow,
+} from 'styled-system';
+import propTypes from '@styled-system/prop-types';
 import theme from '../theme';
 
-const StyledBox = styled.div`
-  & {
-    box-sizing: border-box;
-  }
-
-  ${COMMON}
-  ${LAYOUT}
-  ${POSITION}
-  ${FLEXBOX}
-  ${BORDERS}
-  ${opacity}
+const styleProps = compose(
+  color,
+  space,
+  layout,
+  position,
+  flexbox,
+  border,
+  typography,
+  shadow
+);
+
+const StyledBox = styled('div')`
+  box-sizing: border-box;
+  ${styleProps}
 `;
 
 StyledBox.defaultProps = {
@@ -27,14 +40,12 @@ const Box = React.forwardRef((props, ref) => (
 ));
 
 Box.propTypes = {
-  ...COMMON.propTypes,
-  ...LAYOUT.propTypes,
-  ...POSITION.propTypes,
-  ...FLEXBOX.propTypes,
-  ...BORDERS.propTypes,
+  ...propTypes.styleProps,
   theme: PropTypes.object,
 };
 
 Box.displayName = 'Box';
 
+export { StyledBox };
+
 export default Box;