Merge pull request #345 from ConsenSys/development

gesquinca · web-flow · commit 9224f242a91f · 2019-07-17T17:46:01.000-05:00
merge v0.9.5 release
diff --git a/README.md b/README.md
@@ -35,6 +35,13 @@ class Example extends Component {
 
 ## Change log
 
+### 0.9.5
+
+- Fixed Select component accepts more options + children.
+- Fixed default theme in rimble ThemeProvider.
+- Fixed outdated dependencies vulnerability.
+- Fixed PublicAddress width property being passed to it's parent Field component. 
+
 ### 0.9.4
 
 - Added ref forwarding for all components.
diff --git a/example/src/App.js b/example/src/App.js
@@ -43,6 +43,11 @@ const myTheme = {
   },
 };
 
+const selectOptions = [
+  { value: '123', label: 'One Two Three' },
+  { value: 'abc', label: 'A B C' },
+];
+
 const testComponents = props => (
   <React.Fragment>
     <Box p={3}>
@@ -81,9 +86,21 @@ const testComponents = props => (
       <Avatar size="large" />
 
       <Slider />
-      <Select
-        items={['Wandering Thunder', 'Black Wildflower', 'Ancient Paper']}
-      />
+      <Select>
+        <optgroup label="4-legged pets">
+          <option value="dog">Dog</option>
+          <option value="cat">Cat</option>
+          <option value="hamster" disabled>
+            Hamster
+          </option>
+        </optgroup>
+        <optgroup label="Flying pets">
+          <option value="parrot">Parrot</option>
+          <option value="macaw">Macaw</option>
+          <option value="albatross">Albatross</option>
+        </optgroup>
+      </Select>
+      <Select options={selectOptions} />
       <Progress value={0.5} />
       <Heading.h1>Quick zephyrs blow, vexing daft Jim.</Heading.h1>
 
@@ -145,23 +162,16 @@ 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>
+      <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!
+          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>
+        <Button mr={3}>Accept</Button>
+        <Button.Outline>Cancel</Button.Outline>
       </Card>
       <Flex />
       <Table />
diff --git a/example/src/stories/PublicAddress/docs.md b/example/src/stories/PublicAddress/docs.md
@@ -12,15 +12,6 @@ import { PublicAddress } from 'rimble-ui';
 
 <!-- STORY -->
 
-### Component props
-
-`PublicAddress` will pass any props that are defined on its component and uses the following:
-
-| Prop        | Type     | Values | Default | Description                                         |
-| ----------- | -------- | ------ | ------- | --------------------------------------------------- |
-| address     | string   |        |         | Sets the address that is displayed in the component |
-| handleClick | function |        |         | Adds an is-copied class to component                |
-
 ### Styled-system props
 
 `PublicAddress` uses all the style props from [`Box`](https://consensys.github.io/rimble-ui/?path=/story/components-layout-box--documentation).
diff --git a/example/src/stories/PublicAddress/publicaddress.stories.js b/example/src/stories/PublicAddress/publicaddress.stories.js
@@ -15,7 +15,6 @@ import {
   Flex,
   Card,
   Pill,
-  
   QR,
   Link,
 } from 'rimble-ui';
@@ -37,9 +36,9 @@ storiesOf('Components/PublicAddress', module)
           <Heading.h4>Changing Label</Heading.h4>
           <CodeBlock>
             <PublicAddress
+              width={1}
               address={'0x99cb784f0429efd72wu39fn4256n8wud4e01c7d2'}
               label={'Wallet Address'}
-              required
             />
           </CodeBlock>
         </Box>
diff --git a/example/src/stories/Select/docs.md b/example/src/stories/Select/docs.md
@@ -1,26 +1,51 @@
 # Select documentation
 
-Use the `Select` component when you want your users to select an option from a list. `Select` provides a styled version of the HTML `<select>`.
+`Select` provides a styled version of the HTML `<select>`.
 
-_Want to understand best practices for using a `Select` component?_ Read [`Select` design guidelines](https://consensys.github.io/rimble-ui/?path=/story/components-form-select--design-guidelines)
+## Component
+<!-- STORY -->
+
+## Usage
 
-**Import component**
+### with options array
 
 ```jsx
+import React, { Component } from 'react';
 import { Select } from 'rimble-ui';
-```
-
-<!-- STORY -->
 
-### Component props
-
-`Select` will pass any props that are defined on its component and uses the following:
+const options = [
+  { value: 'ETH', label: 'ETH - Ether'},
+  { value: 'BTC', label: 'BTC - Bitcoin'},
+  { value: 'GNO', label: 'GNO - Gnosis'},
+  { value: 'GNT', label: 'GNT - Golem'},
+  { value: 'REP', label: 'REP - Augur'},
+];
+
+const MyComponent = () => (
+  <Select options={options}  />
+);
+```
 
-| Name     | Type | Default | Description                                                           |
-| -------- | ---- | ------- | --------------------------------------------------------------------- |
-| disabled | bool | true    | Sets disabled property of the radio input to prevent user interaction |
-| required | bool | true    | Ensures that a value is selected                                      |
+### or with children
 
-### Styled-system props
+```jsx
+import React, { Component } from 'react';
+import { Select } from 'rimble-ui';
 
-`Select` uses all the style props from [`Box`](https://consensys.github.io/rimble-ui/?path=/story/components-layout-box--documentation).
+const MyComponent = () => (
+  <Select name="pets">
+    <optgroup label="4-legged pets">
+      <option value="dog">Dog</option>
+      <option value="cat">Cat</option>
+      <option value="hamster" disabled>Hamster</option>
+    </optgroup>
+    <optgroup label="Flying pets">
+      <option value="parrot">Parrot</option>
+      <option value="macaw">Macaw</option>
+      <option value="albatross">Albatross</option>
+    </optgroup>
+  </Select>
+);
+```
+## Props
+<!-- PROPS -->
diff --git a/example/src/stories/Select/select.stories.js b/example/src/stories/Select/select.stories.js
@@ -1,100 +1,21 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withDocs } from 'storybook-readme';
-import CodeBlock from '../../components/CodeBlock';
-import ContributeBanner from '../../components/ContributeBanner';
 
 import Documentation from './docs.md';
-import Guidelines from './guide.md';
 
-import {
-  Select,
-  Field,
-  Box,
-  Heading,
-  Text,
-  Flex,
-  Card,
-  Pill,
-  
-  Radio,
-  Link,
-} from 'rimble-ui';
+import { Select } from 'rimble-ui';
 
-const items = [
-  'ETH - Ether',
-  'BTC - Bitcoin',
-  'GNO - Gnosis',
-  'GNT - Golem',
-  'REP - Augur',
+const options = [
+  { value: 'ETH', label: 'ETH - Ether'},
+  { value: 'BTC', label: 'BTC - Bitcoin'},
+  { value: 'GNO', label: 'GNO - Gnosis'},
+  { value: 'GNT', label: 'GNT - Golem'},
+  { value: 'REP', label: 'REP - Augur'},
 ];
 
-storiesOf('Components/Form/Select', module)
-  .add(
-    'Documentation',
-    withDocs(Documentation, () => (
-      <Box mx={3}>
-        <CodeBlock>
-          <Field label="Choose your currency">
-            <Select items={items} required="false" />
-          </Field>
-        </CodeBlock>
-      </Box>
-    ))
-  )
-  .add(
-    'Design guidelines',
-    withDocs(Guidelines, () => (
-      <Box mx={3}>
-        <Box>
-          <Heading.h3>Design</Heading.h3>
-          <Text>
-            Some best practices for using <code>{'Select'}</code> in your
-            product.
-          </Text>
-        </Box>
-        <Box>
-          <Heading.h4>It's better to show your options</Heading.h4>
-          <Text>
-            Only use the <code>{'Select'}</code> component when you have a lot
-            of options that would clutter your interface. If you've only got a
-            few options to choose from it might be better to show them to the
-            user with a <code>{'Radio'}</code> component.
-          </Text>
-          <br />
-        </Box>
-        <Flex>
-          <Card mx={'auto'} my={3} px={4} width="400px">
-            <Pill mb={3} color={'green'}>
-              {'Do'}
-            </Pill>
-            <br />
-            <br />
-            <Select
-              items={[
-                'ETH - Ether',
-                'BTC - Bitcoin',
-                'GNO - Gnosis',
-                'GNT - Golem',
-                'REP - Augur',
-              ]}
-            />
-            <br />
-            <br />
-            <Radio label="ETH - Ether" my={2} required="false" />
-            <Radio label="FIAT e.g. USD" my={2} required="false" />
-          </Card>
-          <Card mx={'auto'} my={3} px={4} width="400px">
-            <Pill mb={3} color={'red'}>
-              {"Don't"}
-            </Pill>
-            <br />
-            <br />
-            <Select items={['ETH - Ether', 'FIAT e.g. USD']} />
-          </Card>
-        </Flex>
-
-        <ContributeBanner />
-      </Box>
-    ))
-  );
+storiesOf('Components/', module)
+  .addDecorator(withDocs(Documentation))
+  .add('Select', () => (
+    <Select options={options} />
+  ))
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rimble-ui",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "description": "Rimble Design System react component library.",
   "author": "ConsenSys Design",
   "homepage": "https://rimble.consensys.design/",
diff --git a/src/PublicAddress/index.js b/src/PublicAddress/index.js
@@ -81,7 +81,7 @@ class PublicAddress extends Component {
       label = this.props.label;
     }
     return (
-      <Field label={label}>
+      <Field label={label} {...this.props}>
         <StyledWrapper required={true}>
           <StyledInput
             readOnly
diff --git a/src/Select/Select.test.js b/src/Select/Select.test.js
@@ -2,26 +2,25 @@ import Select from './';
 import ThemeProvider from '../ThemeProvider';
 import theme from '../theme';
 
+const selectOptions = [
+  { value: '123', label: 'One Two Three' },
+  { value: 'abc', label: 'A B C' },
+];
+
 describe('Select component sanity', () => {
   it('has name', () => {
     expect(Select.displayName).toBe('Select');
   });
 
   it('matches default snapshot', () => {
-    const component = shallow(
-      <Select
-        items={['Wandering Thunder', 'Black Wildflower', 'Ancient Paper']}
-      />
-    );
+    const component = shallow(<Select options={selectOptions} />);
     expect(component).toMatchSnapshot();
   });
 
   it('matches themed snapshot', () => {
     const component = render(
       <ThemeProvider theme={theme}>
-        <Select
-          items={['Wandering Thunder', 'Black Wildflower', 'Ancient Paper']}
-        />
+        <Select items={selectOptions} />
       </ThemeProvider>
     );
     expect(component).toMatchSnapshot();
diff --git a/src/Select/__snapshots__/Select.test.js.snap b/src/Select/__snapshots__/Select.test.js.snap
diff --git a/src/Select/index.js b/src/Select/index.js
diff --git a/src/ThemeProvider/index.js b/src/ThemeProvider/index.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "rimble-ui",`
`3`		`- "version": "0.9.4",`
	`3`	`+ "version": "0.9.5",`
`4`	`4`	`"description": "Rimble Design System react component library.",`
`5`	`5`	`"author": "ConsenSys Design",`
`6`	`6`	`"homepage": "https://rimble.consensys.design/",`
Original file line number	Diff line number	Diff line change
`@@ -81,7 +81,7 @@ class PublicAddress extends Component {`
`81`	`81`	`label = this.props.label;`
`82`	`82`	`}`
`83`	`83`	`return (`
`84`		`- <Field label={label}>`
	`84`	`+ <Field label={label} {...this.props}>`
`85`	`85`	`<StyledWrapper required={true}>`
`86`	`86`	`<StyledInput`
`87`	`87`	`readOnly`