Skip to content

Commit a6d7c29

Browse files
gesquincagesquinca
authored
Merge pull request #443 from ConsenSys/development
Release 0.13.0
2 parents ecdf851 + 660aa15 commit a6d7c29

File tree

25 files changed

+1014
-640
lines changed

25 files changed

+1014
-640
lines changed

‎.prettierrc

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
{
2-
'singleQuote': true,
3-
'trailingComma': 'es5',
4-
}
2+
"trailingComma": "es5",
3+
"tabWidth": 2,
4+
"useTabs": false,
5+
"semi": false,
6+
"singleQuote": true
7+
}

‎README.md

+21-4
Original file line numberDiff line numberDiff line change
@@ -22,37 +22,53 @@ npm install --save rimble-ui styled-components
2222
## Usage
2323

2424
```jsx
25-
import React, { Component } from 'react';
25+
import React, { Component } from 'react'
2626

27-
import { Button } from 'rimble-ui';
27+
import { Button } from 'rimble-ui'
2828

2929
class Example extends Component {
3030
render() {
31-
return <Button size={'medium'}>Click me!</Button>;
31+
return <Button size={'medium'}>Click me!</Button>
3232
}
3333
}
3434
```
3535

3636
## Change log
3737

38+
### 0.13.0
39+
40+
🚀 New Feature
41+
42+
- Added crypto icons under the `Icon` component.
43+
44+
🐛 Bug Fix
45+
46+
- Fixed `Heading` component `as` prop not working.
47+
- Fixed `Text` component `as` prop not working.
48+
- Fixed `Select` component arrow icon placement.
49+
3850
### 0.12.0
3951

4052
🚀 New Feature
53+
4154
- Updated all components to `styled-system` v5.
4255

4356
### 0.11.1
4457

4558
🐛 Bug Fix
59+
4660
- Fixed icon background color on `ToastMessage` component. #381
4761
- fixed display prop not rendering correctly for `Icon` component. #380
4862
- fixed disabled styling for `Slider` component. #414
4963

5064
### 0.11.0
5165

5266
🚀 New Feature
67+
5368
- Added `BaseStyles` component
5469

5570
🐛 Bug Fix
71+
5672
- Updated `Text` component to pass `as` prop correctly.
5773
- Updated `Heading` component to pass `as` prop correctly.
5874
- Updated `Select` component to adjust width.
@@ -62,6 +78,7 @@ class Example extends Component {
6278
- Fixed warnings when building library #376.
6379

6480
💅 Enhancement
81+
6582
- Adjusted `EthAddress` component padding.
6683
- Addeded default font sizes for `h1-h6` elements.
6784
- Styled `input[type="color"]` for better visibility.
@@ -138,7 +155,7 @@ class Example extends Component {
138155

139156
- Removed background color on Image component
140157

141-
0.7.0
158+
### 0.7.0
142159

143160
- Flash component
144161
- Custom labels for PublicAddress component

‎demo/src/App.js

+90-56
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { Component } from 'react';
1+
import React, { Component } from 'react'
22

33
import {
44
Avatar,
@@ -34,10 +34,12 @@ import {
3434
BaseStyles,
3535
ThemeProvider,
3636
theme,
37-
} from 'rimble-ui';
37+
} from 'rimble-ui'
3838

39-
import TestForm from './components/TestForm';
40-
import BaseLineGrid from './components/BaseLineGrid';
39+
import { Eth, Btc } from '@rimble/icons'
40+
41+
import TestForm from './components/TestForm'
42+
import BaseLineGrid from './components/BaseLineGrid'
4143

4244
const testTheme = {
4345
...theme,
@@ -53,16 +55,15 @@ const testTheme = {
5355
danger: 'orangered',
5456
info: 'blue',
5557
},
56-
};
58+
}
5759

5860
const selectOptions = [
5961
{ value: '123', label: 'One Two Three' },
6062
{ value: 'abc', label: 'A B C' },
61-
];
63+
]
6264

6365
const testComponents = props => (
6466
<React.Fragment>
65-
6667
<h1>H1 - Quick zephyrs blow, vexing daft Jim.</h1>
6768
<h2>H1 - Quick zephyrs blow, vexing daft Jim.</h2>
6869
<h3>H1 - Quick zephyrs blow, vexing daft Jim.</h3>
@@ -77,55 +78,73 @@ const testComponents = props => (
7778
<Heading as={'h5'}>H5 - Quick zephyrs blow, vexing daft Jim.</Heading>
7879
<Heading as={'h6'}>H6 - Quick zephyrs blow, vexing daft Jim.</Heading>
7980

80-
<Heading as={'h1'} fontSize={1}>H1 - Quick zephyrs blow, vexing daft Jim.</Heading>
81-
<Heading as={'h2'} fontSize={2}>H2 - Quick zephyrs blow, vexing daft Jim.</Heading>
82-
<Heading as={'h3'} fontSize={3}>H3 - Quick zephyrs blow, vexing daft Jim.</Heading>
83-
<Heading as={'h4'} fontSize={4}>H4 - Quick zephyrs blow, vexing daft Jim.</Heading>
84-
<Heading as={'h5'} fontSize={5}>H5 - Quick zephyrs blow, vexing daft Jim.</Heading>
85-
<Heading as={'h6'} fontSize={6}>H6 - Quick zephyrs blow, vexing daft Jim.</Heading>
81+
<Heading as={'h1'} fontSize={1}>
82+
H1 - Quick zephyrs blow, vexing daft Jim.
83+
</Heading>
84+
<Heading as={'h2'} fontSize={2}>
85+
H2 - Quick zephyrs blow, vexing daft Jim.
86+
</Heading>
87+
<Heading as={'h3'} fontSize={3}>
88+
H3 - Quick zephyrs blow, vexing daft Jim.
89+
</Heading>
90+
<Heading as={'h4'} fontSize={4}>
91+
H4 - Quick zephyrs blow, vexing daft Jim.
92+
</Heading>
93+
<Heading as={'h5'} fontSize={5}>
94+
H5 - Quick zephyrs blow, vexing daft Jim.
95+
</Heading>
96+
<Heading as={'h6'} fontSize={6}>
97+
H6 - Quick zephyrs blow, vexing daft Jim.
98+
</Heading>
8699

87100
<Heading fontSize={7}>XL - Quick zephyrs blow, vexing daft Jim.</Heading>
88101

89-
<Heading as={'h1'} fontSize={6}>H1 - Quick zephyrs blow, vexing daft Jim.</Heading>
102+
<Heading as={'h1'} fontSize={6}>
103+
H1 - Quick zephyrs blow, vexing daft Jim.
104+
</Heading>
90105

91-
<Heading as={'h2'} fontSize={5}>H2 - Quick zephyrs blow, vexing daft Jim.</Heading>
106+
<Heading as={'h2'} fontSize={5}>
107+
H2 - Quick zephyrs blow, vexing daft Jim.
108+
</Heading>
92109

93-
<Heading as={'h3'} fontSize={4}>H3 - Quick zephyrs blow, vexing daft Jim.</Heading>
110+
<Heading as={'h3'} fontSize={4}>
111+
H3 - Quick zephyrs blow, vexing daft Jim.
112+
</Heading>
94113

95-
<Heading as={'h4'} fontSize={3}>H4 - Quick zephyrs blow, vexing daft Jim.</Heading>
114+
<Heading as={'h4'} fontSize={3}>
115+
H4 - Quick zephyrs blow, vexing daft Jim.
116+
</Heading>
96117

97-
<Heading as={'h5'} fontSize={2}>H5 - Quick zephyrs blow, vexing daft Jim.</Heading>
118+
<Heading as={'h5'} fontSize={2}>
119+
H5 - Quick zephyrs blow, vexing daft Jim.
120+
</Heading>
98121

99-
<Heading as={'h6'} fontSize={1}>H6 - Quick zephyrs blow, vexing daft Jim.</Heading>
122+
<Heading as={'h6'} fontSize={1}>
123+
H6 - Quick zephyrs blow, vexing daft Jim.
124+
</Heading>
100125

101126
<Heading fontSize={0}>SX - Quick zephyrs blow, vexing daft Jim.</Heading>
102127

103128
<Text fontWeight={1}>
104-
1 / 300 —
105-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
129+
1 / 300 — Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
106130
quibusdam, assumenda officiis.
107131
</Text>
108132
<Text fontWeight={2}>
109-
2 / 400 —
110-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
133+
2 / 400 — Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
111134
quibusdam, assumenda officiis.
112135
</Text>
113136
<Text fontWeight={3}>
114-
3 / 600 —
115-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
137+
3 / 600 — Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
116138
quibusdam, assumenda officiis.
117139
</Text>
118140
<Text fontWeight={4}>
119-
4 / 700 —
120-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
141+
4 / 700 — Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
121142
quibusdam, assumenda officiis.
122143
</Text>
123144

124145
<Button size={'medium'}>Click me!</Button>
125146
<Link>I'm a Link!</Link>
126-
<EthAddress
127-
address="0x99cb784f0429efd72wu39fn4256n8wud4e01c7d2"
128-
/>
147+
<EthAddress address="0x99cb784f0429efd72wu39fn4256n8wud4e01c7d2" />
129148
<EthAddress
130149
textLabels
131150
address="0x99cb784f0429efd72wu39fn4256n8wud4e01c7d2"
@@ -134,8 +153,35 @@ const testComponents = props => (
134153
<TestForm />
135154
</Card>
136155
<Input placeholder={'placeholder'} />
137-
<Icon name={'Info'} />
138-
<Icon name={'Info'} color="primary" />
156+
157+
<Box>
158+
<Text>Icon component from rimble-ui</Text>
159+
<Icon name={'Info'} />
160+
<Icon name={'Eth'} />
161+
<Icon name={'Btc'} />
162+
</Box>
163+
164+
<Box>
165+
<Text>
166+
Icon component from rimble-ui using "primary" color from theme
167+
</Text>
168+
<Icon name={'Info'} color="primary" />
169+
<Icon name={'Eth'} color="primary" />
170+
<Icon name={'Btc'} color="primary" />
171+
</Box>
172+
<Box>
173+
<Text>Icon component from rimble-ui, color="green"</Text>
174+
<Icon name={'Info'} color="green" />
175+
<Icon name={'Eth'} color="green" />
176+
<Icon name={'Btc'} color="green" />
177+
</Box>
178+
<Box>
179+
<Text>Icons imported as components from @rimble/icons</Text>
180+
<Eth color="primary" />
181+
<Btc color="primary" />
182+
<Eth color="green" />
183+
<Btc color="green" />
184+
</Box>
139185
<Tooltip message="Your custom message">
140186
<span>hover me</span>
141187
</Tooltip>
@@ -223,7 +269,7 @@ const testComponents = props => (
223269
<Checkbox disabled label="Checkbox disabled" readOnly />
224270
<Checkbox disabled checked label="Checkbox checked disabled" readOnly />
225271

226-
<Box my={4} opacity={.6}>
272+
<Box my={4} opacity={0.6}>
227273
<Flex>
228274
<Box width={1} height={'4rem'} bg={'primary'} m={1} />
229275
<Box width={1} height={'4rem'} bg={'primary'} m={1} />
@@ -269,9 +315,9 @@ const testComponents = props => (
269315
<Heading mb={3}>Heading</Heading>
270316
<Text mb={4}>
271317
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam autem
272-
ratione doloribus quidem neque provident eius error dignissimos
273-
delectus architecto nemo quos alias sunt voluptate impedit, facilis
274-
sequi tempore. Amet!
318+
ratione doloribus quidem neque provident eius error dignissimos delectus
319+
architecto nemo quos alias sunt voluptate impedit, facilis sequi
320+
tempore. Amet!
275321
</Text>
276322
<Flex>
277323
<Button mr={3}>Accept</Button>
@@ -281,18 +327,10 @@ const testComponents = props => (
281327
</Card>
282328
<Table />
283329
<Image src="https://source.unsplash.com/random/1280x720" />
284-
<MetaMaskButton>
285-
Connect with MetaMask
286-
</MetaMaskButton>
287-
<MetaMaskButton.Outline>
288-
Connect with MetaMask
289-
</MetaMaskButton.Outline>
290-
<UPortButton>
291-
Connect with uPort
292-
</UPortButton>
293-
<UPortButton.Solid>
294-
Connect with uPort
295-
</UPortButton.Solid>
330+
<MetaMaskButton>Connect with MetaMask</MetaMaskButton>
331+
<MetaMaskButton.Outline>Connect with MetaMask</MetaMaskButton.Outline>
332+
<UPortButton>Connect with uPort</UPortButton>
333+
<UPortButton.Solid>Connect with uPort</UPortButton.Solid>
296334
<Loader />
297335
<QR value="test" />
298336
<Modal />
@@ -322,26 +360,22 @@ const testComponents = props => (
322360
I am a DANGER Flash with a <Flash.Link>Link</Flash.Link>
323361
</Flash>
324362
</React.Fragment>
325-
);
363+
)
326364

327365
export default class App extends Component {
328366
render() {
329367
return (
330368
<Flex position={'relative'}>
331369
<Box m={4}>
332-
<BaseStyles>
333-
{testComponents()}
334-
</BaseStyles>
370+
<BaseStyles>{testComponents()}</BaseStyles>
335371
</Box>
336372
<Box m={4}>
337373
<ThemeProvider theme={testTheme}>
338-
<BaseStyles>
339-
{testComponents()}
340-
</BaseStyles>
374+
<BaseStyles>{testComponents()}</BaseStyles>
341375
</ThemeProvider>
342376
</Box>
343377
<BaseLineGrid />
344378
</Flex>
345-
);
379+
)
346380
}
347381
}

0 commit comments

Comments
 (0)