Repository: codypearce/material-bread (js)

Issue:
Move Dropdown to menu section
**Describe your feature request**
The current Dropdown component is really an Exposed Menu and all menus are Dropdowns from a button.  

This issue should rename the current dropdown component to Select

- [ ] Rename component
- [ ] Update storybook
- [ ] Update Docs

Pull request:
71 rename dropdown as select
closes #71 

Patch:
diff --git a/docs/src/content/components/dropdown/MainDemo.js b/docs/src/content/components/select/MainDemo.js
similarity index 77%
rename from docs/src/content/components/dropdown/MainDemo.js
rename to docs/src/content/components/select/MainDemo.js
index 3a6892b..c6971d5 100644
--- a/docs/src/content/components/dropdown/MainDemo.js
+++ b/docs/src/content/components/select/MainDemo.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Image } from 'react-native';
 import { ComponentMainDemo } from '@components';
-import { Dropdown } from '../../../../../src/index';
+import { Select } from '../../../../../src/';
 
 export const code = `class DropdownPage extends React.Component {
   constructor(props) {
@@ -18,8 +18,8 @@ export const code = `class DropdownPage extends React.Component {
     ];
     return (
       <View style={{marginBottom: 80}}>
-        <Dropdown
-          label={'Dropdown'}
+        <Select
+          label={'Select'}
           menuItems={data}
           onSelect={value => this.setState({ selectedItem: value.name })}
           selectedItem={this.state.selectedItem}
@@ -32,9 +32,9 @@ export const code = `class DropdownPage extends React.Component {
 const MainDemo = pageHref => (
   <ComponentMainDemo
     pageHref={pageHref}
-    description={`Dropdowns are convenient components for adding a menu attached to a component.`}
+    description={`Select or Exposed Menu's are components that allow you to select an item as input.`}
     code={code}
-    scope={{ View, Dropdown, Image }}
+    scope={{ View, Select, Image }}
   />
 );
 export default MainDemo;
diff --git a/docs/src/content/components/dropdown/Props.js b/docs/src/content/components/select/Props.js
similarity index 100%
rename from docs/src/content/components/dropdown/Props.js
rename to docs/src/content/components/select/Props.js
diff --git a/docs/src/content/components/dropdown/Usage.js b/docs/src/content/components/select/Usage.js
similarity index 83%
rename from docs/src/content/components/dropdown/Usage.js
rename to docs/src/content/components/select/Usage.js
index c534f76..42213f0 100644
--- a/docs/src/content/components/dropdown/Usage.js
+++ b/docs/src/content/components/select/Usage.js
@@ -2,9 +2,9 @@ import React from 'react';
 import { ComponentUsage } from '@components';
 
 export const code = `import React, { Component } from 'react';
-import { Dropdown } from 'material-bread';
+import { Select } from 'material-bread';
 
-class DropdownPage extends React.Component {
+class SelectPage extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
@@ -18,8 +18,8 @@ class DropdownPage extends React.Component {
       { id: 3, name: 'Option 3' },
     ];
     return (
-      <Dropdown
-        label={'Dropdown'}
+      <Select
+        label={'Select'}
         menuItems={data}
         onSelect={value => this.setState({ selectedItem: value.name })}
         selectedItem={this.state.selectedItem}
diff --git a/docs/src/content/components/dropdown/index.js b/docs/src/content/components/select/index.js
similarity index 71%
rename from docs/src/content/components/dropdown/index.js
rename to docs/src/content/components/select/index.js
index bb149a5..3898d22 100644
--- a/docs/src/content/components/dropdown/index.js
+++ b/docs/src/content/components/select/index.js
@@ -11,17 +11,17 @@ export default class DropdownPage extends Component {
     return (
       <div>
         <ComponentPageLayout
-          componentName={'dropdown'}
-          title={'Dropdown'}
+          componentName={'select'}
+          title={'Select'}
           description={`Exposed dropdown menus display the currently selected menu item above the menu.`}
-          importCode={`import { Dropdown } from 'material-bread';`}
+          importCode={`import { Select } from 'material-bread';`}
           docsLink={
             'https://material.io/design/components/menus.html#exposed-dropdown-menu'
           }
           sideScrollMenuItems={sections}>
-          <MainDemo pageHref={'/components/dropdown'} />
-          <Usage pageHref={'/components/dropdown'} />
-          <Props pageHref={'/components/dropdown'} />
+          <MainDemo pageHref={'/components/select'} />
+          <Usage pageHref={'/components/select'} />
+          <Props pageHref={'/components/select'} />
         </ComponentPageLayout>
       </div>
     );
diff --git a/docs/src/content/components/dropdown/propData.js b/docs/src/content/components/select/propData.js
similarity index 100%
rename from docs/src/content/components/dropdown/propData.js
rename to docs/src/content/components/select/propData.js
diff --git a/docs/src/navigation/componentPages.js b/docs/src/navigation/componentPages.js
index 9275f35..51f13aa 100644
--- a/docs/src/navigation/componentPages.js
+++ b/docs/src/navigation/componentPages.js
@@ -96,10 +96,7 @@ const components = [
     title: 'Divider',
     path: '/components/divider',
   },
-  {
-    title: 'Drawer',
-    path: '/components/drawer',
-  },
+
   {
     title: 'DrawerHeader',
     path: '/components/drawer-header',
@@ -177,6 +174,10 @@ const components = [
     title: 'Searchfield',
     path: '/components/searchfield',
   },
+  {
+    title: 'Select',
+    path: '/components/select',
+  },
   {
     title: 'Snackbar',
     path: '/components/snackbar',
diff --git a/docs/src/pages/components/dropdown.js b/docs/src/pages/components/dropdown.js
deleted file mode 100644
index 8d8d4b1..0000000
--- a/docs/src/pages/components/dropdown.js
+++ /dev/null
@@ -1,1 +0,0 @@
-export default from '../../content/components/dropdown';
diff --git a/docs/src/pages/components/select.js b/docs/src/pages/components/select.js
new file mode 100644
index 0000000..abc8763
--- /dev/null
+++ b/docs/src/pages/components/select.js
@@ -0,0 +1,1 @@
+export default from '../../content/components/select';
diff --git a/src/Components/Divider/Divider.js b/src/Components/Divider/Divider.js
index e5dc1b9..bac65a4 100644
--- a/src/Components/Divider/Divider.js
+++ b/src/Components/Divider/Divider.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { View, Platform } from 'react-native';
+import { View, Platform, StyleSheet } from 'react-native';
 import withTheme from '../../Theme/withTheme';
 import { BodyText } from '../..';
 import styles from './Divider.styles';
diff --git a/src/Components/Drawer/DrawerHeader/DrawerHeader.js b/src/Components/Drawer/DrawerHeader/DrawerHeader.js
index e05403d..1a66da9 100644
--- a/src/Components/Drawer/DrawerHeader/DrawerHeader.js
+++ b/src/Components/Drawer/DrawerHeader/DrawerHeader.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, Text } from 'react-native';
 import withTheme from '../../../Theme/withTheme';
-import Dropdown from '../../Dropdown/Dropdown';
 import styles from './DrawerHeader.styles';
 
 class DrawerHeader extends Component {
@@ -14,10 +13,6 @@ class DrawerHeader extends Component {
     avatar: PropTypes.node,
   };
 
-  _accountSwitcher() {
-    return <Dropdown />;
-  }
-
   _renderAvatar() {
     const { avatar } = this.props;
 
diff --git a/src/Components/Dropdown/Dropdown.js b/src/Components/Select/Select.js
similarity index 95%
rename from src/Components/Dropdown/Dropdown.js
rename to src/Components/Select/Select.js
index 91af390..09e20fb 100644
--- a/src/Components/Dropdown/Dropdown.js
+++ b/src/Components/Select/Select.js
@@ -6,9 +6,9 @@ import Menu from '../Menu/Menu';
 import MenuItem from '../Menu/MenuItem/MenuItem';
 import Icon from '../Icon/Icon';
 import withTheme from '../../Theme/withTheme';
-import styles from './Dropdown.styles';
+import styles from './Select.styles';
 
-class Dropdown extends Component {
+class Select extends Component {
   static propTypes = {
     onSelect: PropTypes.func,
     buttonStyle: PropTypes.object,
@@ -98,4 +98,4 @@ class Dropdown extends Component {
   }
 }
 
-export default withTheme(Dropdown);
+export default withTheme(Select);
diff --git a/src/Components/Dropdown/Dropdown.stories.js b/src/Components/Select/Select.stories.js
similarity index 78%
rename from src/Components/Dropdown/Dropdown.stories.js
rename to src/Components/Select/Select.stories.js
index 29d7663..876c3e9 100644
--- a/src/Components/Dropdown/Dropdown.stories.js
+++ b/src/Components/Select/Select.stories.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Dropdown } from '../../';
+import { Select } from '../../';
 import { State, Store } from '@sambego/storybook-state';
 import Header from '../../storybook/components/Header';
 import Container from '../../storybook/components/Container';
@@ -16,16 +16,16 @@ const data = [
   { id: 3, name: 'Option 3' },
 ];
 
-export default storiesOf('Components|Dropdown', module)
-  .addParameters({ jest: ['Dropdown'] })
+export default storiesOf('Components|Select', module)
+  .addParameters({ jest: ['Select'] })
   .add('Outlined', () => (
     <Container>
-      <Header title={'Outlined Dropdown'} />
+      <Header title={'Outlined Select'} />
 
       <State store={store} style={{ flex: 1 }}>
         {state => (
-          <Dropdown
-            label={'Dropdown'}
+          <Select
+            label={'Select'}
             menuItems={data}
             onSelect={value => store.set({ selectedItem: value.name })}
             selectedItem={state.selectedItem}
diff --git a/src/Components/Dropdown/__snapshots__/Dropdown.test.js.snap b/src/Components/Select/__snapshots__/Select.test.js.snap
similarity index 100%
rename from src/Components/Dropdown/__snapshots__/Dropdown.test.js.snap
rename to src/Components/Select/__snapshots__/Select.test.js.snap
diff --git a/src/index.js b/src/index.js
index c24f8cb..220b3ea 100644
--- a/src/index.js
+++ b/src/index.js
@@ -45,7 +45,6 @@ export {
 
 export { default as Dialog } from './Components/Dialog/Dialog';
 
-export { default as Dropdown } from './Components/Dropdown/Dropdown';
 export { default as Drawer } from './Components/Drawer/Drawer';
 export {
   default as DrawerHeader,
@@ -94,6 +93,7 @@ export {
 } from './Components/Progress/ProgressCircle/ProgressCircle';
 export { default as RadioButton } from './Components/RadioButton/RadioButton';
 export { default as Ripple } from './Components/Ripple/Ripple';
+export { default as Select } from './Components/Select/Select';
 export { default as Searchbar } from './Components/Searchbar/Searchbar';
 export { default as Searchfield } from './Components/Searchfield/Searchfield';
 export { default as Snackbar } from './Components/Snackbar/Snackbar';
diff --git a/src/storybook/stories/index.js b/src/storybook/stories/index.js
index d1e6e3c..220c9a2 100644
--- a/src/storybook/stories/index.js
+++ b/src/storybook/stories/index.js
@@ -50,9 +50,6 @@ export {
   default as DrawerItem,
 } from '../../Components/Drawer/DrawerItem/DrawerItem.stories.js';
 
-export {
-  default as Dropdown,
-} from '../../Components/Dropdown/Dropdown.stories.js';
 export {
   default as Divider,
 } from '../../Components/Divider/Divider.stories.js';
@@ -80,6 +77,7 @@ export {
 export {
   default as Searchfield,
 } from '../../Components/Searchfield/Searchfield.stories.js';
+export { default as Dropdown } from '../../Components/Select/Select.stories.js';
 export {
   default as Snackbar,
 } from '../../Components/Snackbar/Snackbar.stories.js';


Test patch:
diff --git a/src/Components/Divider/__snapshots__/Divider.test.js.snap b/src/Components/Divider/__snapshots__/Divider.test.js.snap
index b3604b9..bde5c5b 100644
--- a/src/Components/Divider/__snapshots__/Divider.test.js.snap
+++ b/src/Components/Divider/__snapshots__/Divider.test.js.snap
@@ -6,12 +6,10 @@ exports[`Divider Renders 1`] = `
     Array [
       Object {
         "backgroundColor": "rgba(0,0,0,.12)",
-        "height": 0.5,
-        "marginVertical": 16,
-        "opacity": 0.12,
         "width": "100%",
       },
       Object {
+        "height": 0.5,
         "marginVertical": 8,
       },
       undefined,
diff --git a/src/Components/Drawer/DrawerHeader/__snapshots__/DrawerHeader.test.js.snap b/src/Components/Drawer/DrawerHeader/__snapshots__/DrawerHeader.test.js.snap
index a948652..66d35b8 100644
--- a/src/Components/Drawer/DrawerHeader/__snapshots__/DrawerHeader.test.js.snap
+++ b/src/Components/Drawer/DrawerHeader/__snapshots__/DrawerHeader.test.js.snap
@@ -24,8 +24,8 @@ exports[`DrawerHeader Renders 1`] = `
     style={
       Object {
         "color": "rgba(0,0,0,.67)",
-        "fontSize": 13,
-        "marginTop": 8,
+        "fontSize": 12,
+        "marginTop": 4,
       }
     }
   />
diff --git a/src/Components/Drawer/DrawerSection/__snapshots__/DrawerSection.test.js.snap b/src/Components/Drawer/DrawerSection/__snapshots__/DrawerSection.test.js.snap
index eb3c54b..4fe5ec5 100644
--- a/src/Components/Drawer/DrawerSection/__snapshots__/DrawerSection.test.js.snap
+++ b/src/Components/Drawer/DrawerSection/__snapshots__/DrawerSection.test.js.snap
@@ -7,6 +7,7 @@ exports[`DrawerSection Renders 1`] = `
       undefined,
       Object {
         "paddingHorizontal": 8,
+        "paddingTop": 0,
       },
     ]
   }
@@ -15,7 +16,7 @@ exports[`DrawerSection Renders 1`] = `
     style={
       Object {
         "paddingBottom": 8,
-        "paddingTop": 14,
+        "paddingTop": 8,
       }
     }
   />
diff --git a/src/Components/Dropdown/Dropdown.styles.js b/src/Components/Select/Select.styles.js
similarity index 100%
rename from src/Components/Dropdown/Dropdown.styles.js
rename to src/Components/Select/Select.styles.js
diff --git a/src/Components/Dropdown/Dropdown.test.js b/src/Components/Select/Select.test.js
similarity index 71%
rename from src/Components/Dropdown/Dropdown.test.js
rename to src/Components/Select/Select.test.js
index 2dc60d8..a118f21 100644
--- a/src/Components/Dropdown/Dropdown.test.js
+++ b/src/Components/Select/Select.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { Dropdown } from '../..';
+import { Select } from '../..';
 
 import ShallowRenderer from 'react-test-renderer/shallow';
 const renderer = new ShallowRenderer();
 
 test('Dropdown Renders', () => {
-  const tree = renderer.render(<Dropdown />);
+  const tree = renderer.render(<Select />);
   expect(tree).toMatchSnapshot();
 });