Merge pull request #330 from ConsenSys/development

0.9.4 release
ConsenSysMesh · Jul 3, 2019 · 7d127ad · 7d127ad
2 parents 306c407 + 2841a0b
commit 7d127ad
Show file tree

Hide file tree

Showing 84 changed files with 18,969 additions and 26,178 deletions.
diff --git a/README.md b/README.md
@@ -35,9 +35,16 @@ class Example extends Component {
 
 ## Change log
 
+### 0.9.4
+
+- Added ref forwarding for all components.
+- Fixed input validation icon padding.
+- Fixed Tooltip positioning.
+- Fixed broken copy button on PublicAddress component.
+
 ### 0.9.3
 
-- revert to last stable version 
+- revert to last stable version
 
 ### 0.9.2
 

diff --git a/example/package.json b/example/package.json
@@ -10,7 +10,7 @@
     "react-dom": "16.8.6",
     "react-scripts": "3.0.1",
     "rimble-ui": "link:..",
-    "styled-components": "^4.2.1"
+    "styled-components": "^4.3.2"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -23,19 +23,18 @@
   },
   "devDependencies": {
     "@babel/core": "7.4.5",
-    "@storybook/addon-a11y": "5.1.1",
-    "@storybook/addon-actions": "5.1.1",
-    "@storybook/addon-links": "5.1.1",
-    "@storybook/addon-viewport": "5.1.1",
-    "@storybook/addons": "5.1.1",
-    "@storybook/react": "5.1.1",
+    "@storybook/addon-a11y": "5.1.9",
+    "@storybook/addon-actions": "5.1.9",
+    "@storybook/addon-links": "5.1.9",
+    "@storybook/addon-viewport": "5.1.9",
+    "@storybook/addons": "5.1.9",
+    "@storybook/react": "5.1.9",
     "@storybook/storybook-deployer": "2.8.1",
-    "@storybook/theming": "^5.1.1",
-    "babel-loader": "8.0.6",
+    "@storybook/theming": "^5.1.9",
     "prismjs": "^1.16.0",
     "react-element-to-jsx-string": "^14.0.2",
     "storybook-addon-styled-component-theme": "1.2.3",
-    "storybook-readme": "5.0.3"
+    "storybook-readme": "5.0.5"
   },
   "browserslist": [
     ">0.2%",

diff --git a/example/src/App.js b/example/src/App.js
@@ -1,4 +1,4 @@
-import React, { Component, } from 'react';
+import React, { Component } from 'react';
 
 import {
   Avatar,
@@ -8,6 +8,7 @@ import {
   Card,
   Checkbox,
   Field,
+  Flash,
   Flex,
   Heading,
   Icon,
@@ -49,12 +50,15 @@ const testComponents = props => (
       <Link>I'm a Link!</Link>
       <PublicAddress address="0x99cb784f0429efd72wu39fn4256n8wud4e01c7d2" />
       <EthAddress address="0x99cb784f0429efd72wu39fn4256n8wud4e01c7d2" />
-      <EthAddress truncate address="0x99cb784f0429efd72wu39fn4256n8wud4e01c7d2" />
+      <EthAddress
+        truncate
+        address="0x99cb784f0429efd72wu39fn4256n8wud4e01c7d2"
+      />
       <Input />
       <Icon name={'Info'} />
       <Icon name={'Info'} color="primary" />
       <Tooltip variant="dark" message="Your custom message">
-        <Text.span>hover me</Text.span>
+        <Text as="span">hover me</Text>
       </Tooltip>
       <Blockie
         opts={{
@@ -67,14 +71,19 @@ const testComponents = props => (
         }}
       />
       <Textarea rows={4} defaultValue="Type here…" />
-      <Text>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quibusdam, assumenda officiis.</Text>
+      <Text>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
+        quibusdam, assumenda officiis.
+      </Text>
       <Avatar />
       <Avatar size="small" />
       <Avatar size="medium" />
       <Avatar size="large" />
 
       <Slider />
-      <Select items={['Wandering Thunder', 'Black Wildflower', 'Ancient Paper']} />
+      <Select
+        items={['Wandering Thunder', 'Black Wildflower', 'Ancient Paper']}
+      />
       <Progress value={0.5} />
       <Heading.h1>Quick zephyrs blow, vexing daft Jim.</Heading.h1>
 
@@ -136,6 +145,24 @@ const testComponents = props => (
       <Checkbox disabled checked label="Checkbox checked disabled" readOnly />
       <Box />
       <Card />
+      <Card
+        mx="auto"
+        px="4"
+        color="primary"
+      >
+        <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!
+        </Text>
+        <Button mr={3}>
+          Accept
+        </Button>
+        <Button.Outline>
+          Cancel
+        </Button.Outline>
+      </Card>
       <Flex />
       <Table />
       <Image src="https://source.unsplash.com/random/1280x720" />
@@ -174,6 +201,21 @@ const testComponents = props => (
       <Pill selected={true} color={'blue'} mr={'2'} mb={'3'}>
         {'Pending'}
       </Pill>
+      <Flash>
+        I am a Flash with a <Flash.Link>Link</Flash.Link>
+      </Flash>
+      <Flash variant={'info'}>
+        I am a INFO Flash with a <Flash.Link>Link</Flash.Link>
+      </Flash>
+      <Flash variant={'warning'}>
+        I am a WARNING Flash with a <Flash.Link>Link</Flash.Link>
+      </Flash>
+      <Flash variant={'success'}>
+        I am a SUCCESS Flash with a <Flash.Link>Link</Flash.Link>
+      </Flash>
+      <Flash variant={'danger'}>
+        I am a DANGER Flash with a <Flash.Link>Link</Flash.Link>
+      </Flash>
     </Box>
   </React.Fragment>
 );
@@ -183,13 +225,13 @@ export default class App extends Component {
     return (
       <React.Fragment>
         <Flex>
+          <Box>{testComponents()}</Box>
           <Box>
-            {testComponents()}
-          </Box>
-          <Box>
+            <Button theme={myTheme}>hello</Button>
             <ThemeProvider theme={myTheme}>
-              {testComponents()}
+              <Button>hello</Button>
             </ThemeProvider>
+            <ThemeProvider theme={myTheme}>{testComponents()}</ThemeProvider>
           </Box>
         </Flex>
       </React.Fragment>

diff --git a/example/src/stories/Button/button.stories.js b/example/src/stories/Button/button.stories.js
@@ -186,11 +186,11 @@ storiesOf('Components/Button', module).add(
             Learn More
           </Button>
         </CodeBlock>
-        
+
         <Text>Link Button Outline</Text>
         <CodeBlock>
           <Button.Outline as={'a'} href="#!" title="Learn more" target="_blank">
-            Learn More 
+            Learn More
           </Button.Outline>
         </CodeBlock>
       </Box>

diff --git a/example/src/stories/Card/card.stories.js b/example/src/stories/Card/card.stories.js
@@ -37,113 +37,64 @@ storiesOf('Components/Card', module).add(
         </Card>
       </CodeBlock>
 
-      <Card width={'420px'} mx={'auto'} px={4}>
-        <Text
-          caps
-          fontSize={0}
-          fontWeight={4}
-          mb={3}
-          display={'flex'}
-          alignItems={'center'}
-        >
-          <Icon name={'AccountBalanceWallet'} mr={2} />
-          Connect your Wallet:
-        </Text>
-        <MetaMaskButton.Outline>
-          Install MetaMask
-        </MetaMaskButton.Outline>
-      </Card>
 
-      <CodeBlock textOnly>
-        {`import { Card, Text, Icon, MetaMaskButton } from 'rimble-ui';
 
-<Card width={'420px'} mx={'auto'} px={4}>
-  <Text
-    caps
-    fontSize={0}
-    fontWeight={4}
-    mb={3}
-    display={'flex'}
-    alignItems={'center'}
-  >
-    <Icon name={'AccountBalanceWallet'} mr={2} />
-    Connect your Wallet:
-  </Text>
-  <MetaMaskButton.outline fullWidth>Install MetaMask</MetaMaskButton.outline>
-</Card>`}
+      <CodeBlock>
+        <Card width={'420px'} mx={'auto'} px={4}>
+          <Text
+            caps
+            fontSize={0}
+            fontWeight={4}
+            mb={3}
+            display={'flex'}
+            alignItems={'center'}
+          >
+            <Icon name={'AccountBalanceWallet'} mr={2} />
+            Connect your Wallet:
+          </Text>
+          <MetaMaskButton.Outline width={1}>
+            Install MetaMask
+          </MetaMaskButton.Outline>
+        </Card>
       </CodeBlock>
 
-      <Card width={'420px'} mx={'auto'} px={4}>
-        <Heading>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!
-        </Text>
-        <Button mr={3}>Accept</Button>
-        <Button.Outline>Cancel</Button.Outline>
-      </Card>
-
-      <CodeBlock
-        textOnly
-      >{`import { Card, Heading, Text, Button } from 'rimble-ui';
-
-<Card width={'420px'} mx={'auto'} px={4}>
-  <Heading>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!
-  </Text>
-  <Button mr={3}>Accept</Button>
-  <Button.Outline>Cancel</Button.Outline>
-</Card>`}</CodeBlock>
+      <CodeBlock>
+        <Card width={'420px'} mx={'auto'} px={4}>
+          <Heading>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!
+          </Text>
+          <Button mr={3}>Accept</Button>
+          <Button.Outline>Cancel</Button.Outline>
+        </Card>
+      </CodeBlock>
 
-      <Card width={'420px'} mx={'auto'} my={5} p={0}>
-        <Image
-          width={1}
-          src="https://source.unsplash.com/random/1280x720"
-          alt="random image from unsplash.com"
-        />
-        <Box px={4} py={3}>
-          <Heading.h2>Card title</Heading.h2>
-          <Heading.h5 color="#666">Card sub-title</Heading.h5>
-        </Box>
-        <Flex px={4} height={3} borderTop={1} borderColor={'#E8E8E8'}>
-          <Button.Text p={'0'} mr={4} height={'auto'}>
-            Text Button
-          </Button.Text>
-          <Button.Text p={'0'} height={'auto'}>
-            Text Button
-          </Button.Text>
-        </Flex>
-      </Card>
+      <CodeBlock>
 
-      <CodeBlock
-        textOnly
-      >{`import { Card, Box, Flex, Image, Heading } from 'rimble-ui';
+        <Card width={'420px'} mx={'auto'} my={5} p={0}>
+          <Image
+            width={1}
+            src="https://source.unsplash.com/random/1280x720"
+            alt="random image from unsplash.com"
+          />
+          <Box px={4} py={3}>
+            <Heading.h2>Card title</Heading.h2>
+            <Heading.h5 color="#666">Card sub-title</Heading.h5>
+          </Box>
+          <Flex px={4} height={3} borderTop={1} borderColor={'#E8E8E8'}>
+            <Button.Text p={'0'} mr={4} height={'auto'}>
+              Text Button
+            </Button.Text>
+            <Button.Text p={'0'} height={'auto'}>
+              Text Button
+            </Button.Text>
+          </Flex>
+        </Card>
 
-<Card width={'420px'} mx={'auto'} my={5} p={0}>
-  <Image
-    width={1}
-    src="https://source.unsplash.com/random/1280x720"
-    alt="random image from unsplash.com"
-  />
-  <Box px={4} py={3}>
-    <Heading.h2>Card title</Heading.h2>
-    <Heading.h5 color="#666">Card sub-title</Heading.h5>
-  </Box>
-  <Flex px={4} height={3} borderTop={1} borderColor={'#E8E8E8'}>
-    <Button.Text p={'0'} mr={4} height={'auto'}>
-      Text Button
-    </Button.Text>
-    <Button.Text p={'0'} height={'auto'}>
-      Text Button
-    </Button.Text>
-  </Flex>
-</Card>`}</CodeBlock>
+      </CodeBlock>
     </Box>
   ))
 );
diff --git a/example/src/stories/Field/field.stories.js b/example/src/stories/Field/field.stories.js
@@ -5,23 +5,32 @@ import CodeBlock from '../../components/CodeBlock';
 
 import Documentation from './docs.md';
 
-import { Input, Field, Box, Heading, Text } from 'rimble-ui';
+import { Input, Field, Box, Heading } from 'rimble-ui';
 
 storiesOf('Components/Form/Field', module).add(
   'Documentation',
   withDocs(Documentation, () => (
     <Box mx={3}>
       <Box>
-        <Field label="Public address">
-          <Input type="text" required="true" />
-        </Field>
+        <Heading fontSize={3} mb={2}>
+          Required:
+        </Heading>
+        <CodeBlock>
+          <Field label="Public address">
+            <Input required={true}/>
+          </Field>
+        </CodeBlock>
+      </Box>
+      <Box>
+        <Heading fontSize={3} mb={2}>
+          Optional:
+        </Heading>
+        <CodeBlock>
+          <Field label="Public address">
+            <Input required={false} />
+          </Field>
+        </CodeBlock>
       </Box>
-
-      <CodeBlock textOnly>
-        {`<Field label="Public address">
-  <Input type="text" required="true" />
-</Field>`}
-      </CodeBlock>
     </Box>
   ))
 );