Merge pull request #443 from ConsenSys/development

Release 0.13.0
ConsenSysMesh · Feb 27, 2020 · a6d7c29 · a6d7c29
2 parents ecdf851 + 660aa15
commit a6d7c29
Show file tree

Hide file tree

Showing 25 changed files with 1,014 additions and 640 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,4 +1,7 @@
 {
-  'singleQuote': true,
-  'trailingComma': 'es5',
-}
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true
+}
diff --git a/README.md b/README.md
@@ -22,37 +22,53 @@ npm install --save rimble-ui styled-components
 ## Usage
 
 ```jsx
-import React, { Component } from 'react';
+import React, { Component } from 'react'
 
-import { Button } from 'rimble-ui';
+import { Button } from 'rimble-ui'
 
 class Example extends Component {
   render() {
-    return <Button size={'medium'}>Click me!</Button>;
+    return <Button size={'medium'}>Click me!</Button>
   }
 }
 ```
 
 ## Change log
 
+### 0.13.0
+
+🚀 New Feature
+
+- Added crypto icons under the `Icon` component.
+
+🐛 Bug Fix
+
+- Fixed `Heading` component `as` prop not working. 
+- Fixed `Text` component `as` prop not working.
+- Fixed `Select` component arrow icon placement.
+
 ### 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
+
 - Added `BaseStyles` component
 
 🐛 Bug Fix
+
 - Updated `Text` component to pass `as` prop correctly.
 - Updated `Heading` component to pass `as` prop correctly.
 - Updated `Select` component to adjust width.
@@ -62,6 +78,7 @@ class Example extends Component {
 - Fixed warnings when building library #376.
 
 💅 Enhancement
+
 - Adjusted `EthAddress` component padding.
 - Addeded default font sizes for `h1-h6` elements.
 - Styled `input[type="color"]` for better visibility.
@@ -138,7 +155,7 @@ class Example extends Component {
 
 - Removed background color on Image component
 
-  0.7.0
+### 0.7.0
 
 - Flash component
 - Custom labels for PublicAddress component

diff --git a/demo/src/App.js b/demo/src/App.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
 
 import {
   Avatar,
@@ -34,10 +34,12 @@ import {
   BaseStyles,
   ThemeProvider,
   theme,
-} from 'rimble-ui';
+} from 'rimble-ui'
 
-import TestForm from './components/TestForm';
-import BaseLineGrid from './components/BaseLineGrid';
+import { Eth, Btc } from '@rimble/icons'
+
+import TestForm from './components/TestForm'
+import BaseLineGrid from './components/BaseLineGrid'
 
 const testTheme = {
   ...theme,
@@ -53,16 +55,15 @@ const testTheme = {
     danger: 'orangered',
     info: 'blue',
   },
-};
+}
 
 const selectOptions = [
   { value: '123', label: 'One Two Three' },
   { value: 'abc', label: 'A B C' },
-];
+]
 
 const testComponents = props => (
   <React.Fragment>
-
     <h1>H1 - Quick zephyrs blow, vexing daft Jim.</h1>
     <h2>H1 - Quick zephyrs blow, vexing daft Jim.</h2>
     <h3>H1 - Quick zephyrs blow, vexing daft Jim.</h3>
@@ -77,55 +78,73 @@ const testComponents = props => (
     <Heading as={'h5'}>H5 - Quick zephyrs blow, vexing daft Jim.</Heading>
     <Heading as={'h6'}>H6 - Quick zephyrs blow, vexing daft Jim.</Heading>
 
-    <Heading as={'h1'} fontSize={1}>H1 - Quick zephyrs blow, vexing daft Jim.</Heading>
-    <Heading as={'h2'} fontSize={2}>H2 - Quick zephyrs blow, vexing daft Jim.</Heading>
-    <Heading as={'h3'} fontSize={3}>H3 - Quick zephyrs blow, vexing daft Jim.</Heading>
-    <Heading as={'h4'} fontSize={4}>H4 - Quick zephyrs blow, vexing daft Jim.</Heading>
-    <Heading as={'h5'} fontSize={5}>H5 - Quick zephyrs blow, vexing daft Jim.</Heading>
-    <Heading as={'h6'} fontSize={6}>H6 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h1'} fontSize={1}>
+      H1 - Quick zephyrs blow, vexing daft Jim.
+    </Heading>
+    <Heading as={'h2'} fontSize={2}>
+      H2 - Quick zephyrs blow, vexing daft Jim.
+    </Heading>
+    <Heading as={'h3'} fontSize={3}>
+      H3 - Quick zephyrs blow, vexing daft Jim.
+    </Heading>
+    <Heading as={'h4'} fontSize={4}>
+      H4 - Quick zephyrs blow, vexing daft Jim.
+    </Heading>
+    <Heading as={'h5'} fontSize={5}>
+      H5 - Quick zephyrs blow, vexing daft Jim.
+    </Heading>
+    <Heading as={'h6'} fontSize={6}>
+      H6 - Quick zephyrs blow, vexing daft Jim.
+    </Heading>
 
     <Heading fontSize={7}>XL - Quick zephyrs blow, vexing daft Jim.</Heading>
 
-    <Heading as={'h1'} fontSize={6}>H1 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h1'} fontSize={6}>
+      H1 - Quick zephyrs blow, vexing daft Jim.
+    </Heading>
 
-    <Heading as={'h2'} fontSize={5}>H2 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h2'} fontSize={5}>
+      H2 - Quick zephyrs blow, vexing daft Jim.
+    </Heading>
 
-    <Heading as={'h3'} fontSize={4}>H3 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h3'} fontSize={4}>
+      H3 - Quick zephyrs blow, vexing daft Jim.
+    </Heading>
 
-    <Heading as={'h4'} fontSize={3}>H4 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h4'} fontSize={3}>
+      H4 - Quick zephyrs blow, vexing daft Jim.
+    </Heading>
 
-    <Heading as={'h5'} fontSize={2}>H5 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h5'} fontSize={2}>
+      H5 - Quick zephyrs blow, vexing daft Jim.
+    </Heading>
 
-    <Heading as={'h6'} fontSize={1}>H6 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h6'} fontSize={1}>
+      H6 - Quick zephyrs blow, vexing daft Jim.
+    </Heading>
 
     <Heading fontSize={0}>SX - Quick zephyrs blow, vexing daft Jim.</Heading>
 
     <Text fontWeight={1}>
-      1 / 300 —
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
+      1 / 300 — Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
       quibusdam, assumenda officiis.
     </Text>
     <Text fontWeight={2}>
-      2 / 400 —
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
+      2 / 400 — Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
       quibusdam, assumenda officiis.
     </Text>
     <Text fontWeight={3}>
-      3 / 600 —
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
+      3 / 600 — Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
       quibusdam, assumenda officiis.
     </Text>
     <Text fontWeight={4}>
-      4 / 700 —
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
+      4 / 700 — Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
       quibusdam, assumenda officiis.
     </Text>
 
     <Button size={'medium'}>Click me!</Button>
     <Link>I'm a Link!</Link>
-    <EthAddress
-      address="0x99cb784f0429efd72wu39fn4256n8wud4e01c7d2"
-    />
+    <EthAddress address="0x99cb784f0429efd72wu39fn4256n8wud4e01c7d2" />
     <EthAddress
       textLabels
       address="0x99cb784f0429efd72wu39fn4256n8wud4e01c7d2"
@@ -134,8 +153,35 @@ const testComponents = props => (
       <TestForm />
     </Card>
     <Input placeholder={'placeholder'} />
-    <Icon name={'Info'} />
-    <Icon name={'Info'} color="primary" />
+
+    <Box>
+      <Text>Icon component from rimble-ui</Text>
+      <Icon name={'Info'} />
+      <Icon name={'Eth'} />
+      <Icon name={'Btc'} />
+    </Box>
+
+    <Box>
+      <Text>
+        Icon component from rimble-ui using "primary" color from theme
+      </Text>
+      <Icon name={'Info'} color="primary" />
+      <Icon name={'Eth'} color="primary" />
+      <Icon name={'Btc'} color="primary" />
+    </Box>
+    <Box>
+      <Text>Icon component from rimble-ui, color="green"</Text>
+      <Icon name={'Info'} color="green" />
+      <Icon name={'Eth'} color="green" />
+      <Icon name={'Btc'} color="green" />
+    </Box>
+    <Box>
+      <Text>Icons imported as components from @rimble/icons</Text>
+      <Eth color="primary" />
+      <Btc color="primary" />
+      <Eth color="green" />
+      <Btc color="green" />
+    </Box>
     <Tooltip message="Your custom message">
       <span>hover me</span>
     </Tooltip>
@@ -223,7 +269,7 @@ const testComponents = props => (
     <Checkbox disabled label="Checkbox disabled" readOnly />
     <Checkbox disabled checked label="Checkbox checked disabled" readOnly />
 
-    <Box my={4} opacity={.6}>
+    <Box my={4} opacity={0.6}>
       <Flex>
         <Box width={1} height={'4rem'} bg={'primary'} m={1} />
         <Box width={1} height={'4rem'} bg={'primary'} m={1} />
@@ -269,9 +315,9 @@ const testComponents = props => (
       <Heading mb={3}>Heading</Heading>
       <Text mb={4}>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam autem
-        ratione doloribus quidem neque provident eius error dignissimos
-        delectus architecto nemo quos alias sunt voluptate impedit, facilis
-        sequi tempore. Amet!
+        ratione doloribus quidem neque provident eius error dignissimos delectus
+        architecto nemo quos alias sunt voluptate impedit, facilis sequi
+        tempore. Amet!
       </Text>
       <Flex>
         <Button mr={3}>Accept</Button>
@@ -281,18 +327,10 @@ const testComponents = props => (
     </Card>
     <Table />
     <Image src="https://source.unsplash.com/random/1280x720" />
-    <MetaMaskButton>
-      Connect with MetaMask
-    </MetaMaskButton>
-    <MetaMaskButton.Outline>
-      Connect with MetaMask
-    </MetaMaskButton.Outline>
-    <UPortButton>
-      Connect with uPort
-    </UPortButton>
-    <UPortButton.Solid>
-      Connect with uPort
-    </UPortButton.Solid>
+    <MetaMaskButton>Connect with MetaMask</MetaMaskButton>
+    <MetaMaskButton.Outline>Connect with MetaMask</MetaMaskButton.Outline>
+    <UPortButton>Connect with uPort</UPortButton>
+    <UPortButton.Solid>Connect with uPort</UPortButton.Solid>
     <Loader />
     <QR value="test" />
     <Modal />
@@ -322,26 +360,22 @@ const testComponents = props => (
       I am a DANGER Flash with a <Flash.Link>Link</Flash.Link>
     </Flash>
   </React.Fragment>
-);
+)
 
 export default class App extends Component {
   render() {
     return (
       <Flex position={'relative'}>
         <Box m={4}>
-          <BaseStyles>
-            {testComponents()}
-          </BaseStyles>
+          <BaseStyles>{testComponents()}</BaseStyles>
         </Box>
         <Box m={4}>
           <ThemeProvider theme={testTheme}>
-            <BaseStyles>
-              {testComponents()}
-            </BaseStyles>
+            <BaseStyles>{testComponents()}</BaseStyles>
           </ThemeProvider>
         </Box>
         <BaseLineGrid />
       </Flex>
-    );
+    )
   }
 }