feat: update material-ui@4.x (#123)

* chore: update material-ui@4.x

* test: update test for ActionBar and TestField

* chore: add types

* chore: update types

* test: update test for Author

* chore: fixed bunch of unit test

* chore: remove unused import

* chore: remove comments

* chore: replace shallow my mount

* chore: update git hooks

* chore: fix styles

* chore: update dependencies

* chore: remove types material-ui

src/components/Install/Install.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 
 import Install from './Install';
 
 describe('<Install /> component', () => {
   test('should render the component in default state', () => {
-    const wrapper = shallow(<Install />);
+    const wrapper = mount(<Install />);
     expect(wrapper.html()).toMatchSnapshot();
   });
 });

src/components/Install/Install.tsx

@@ -1,5 +1,4 @@
 import List from '@material-ui/core/List';
-import ListItemText from '@material-ui/core/ListItemText';
 import React, { Component } from 'react';
 
 import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/Version';
@@ -11,7 +10,7 @@ import npm from './img/npm.svg';
 import pnpm from './img/pnpm.svg';
 import yarn from './img/yarn.svg';
 
-import { Heading, InstallItem, PackageMangerAvatar } from './styles';
+import { Heading, InstallItem, PackageMangerAvatar, InstallListItemText } from './styles';
 
 class Install extends Component {
   public render(): JSX.Element {
@@ -27,7 +26,7 @@ class Install extends Component {
   public renderCopyCLI = ({ packageName = '' }: Partial<VersionPageConsumerProps>) => {
     return (
       <>
-        <List subheader={<Heading variant={'subheading'}>{'Installation'}</Heading>}>{this.renderListItems(packageName)}</List>
+        <List subheader={<Heading variant={'subtitle1'}>{'Installation'}</Heading>}>{this.renderListItems(packageName)}</List>
       </>
     );
   };
@@ -35,17 +34,17 @@ class Install extends Component {
   public renderListItems = (packageName: string) => {
     return (
       <>
-        <InstallItem>
+        <InstallItem button={true}>
           <PackageMangerAvatar alt={'npm logo'} src={npm} />
-          <ListItemText primary={<CopyToClipBoard text={`npm install ${packageName}`} />} secondary={'Install using NPM'} />
+          <InstallListItemText primary={<CopyToClipBoard text={`npm install ${packageName}`} />} secondary={'Install using NPM'} />
         </InstallItem>
-        <InstallItem>
+        <InstallItem button={true}>
           <PackageMangerAvatar alt={'yarn logo'} src={yarn} />
-          <ListItemText primary={<CopyToClipBoard text={`yarn add ${packageName}`} />} secondary={'Install using Yarn'} />
+          <InstallListItemText primary={<CopyToClipBoard text={`yarn add ${packageName}`} />} secondary={'Install using Yarn'} />
         </InstallItem>
-        <InstallItem>
+        <InstallItem button={true}>
           <PackageMangerAvatar alt={'pnpm logo'} src={pnpm} />
-          <ListItemText primary={<CopyToClipBoard text={`pnpm install ${packageName}`} />} secondary={'Install using PNPM'} />
+          <InstallListItemText primary={<CopyToClipBoard text={`pnpm install ${packageName}`} />} secondary={'Install using PNPM'} />
         </InstallItem>
       </>
     );

src/components/Install/__snapshots__/Install.test.tsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Install /> component should render the component in default state 1`] = `""`;
+exports[`<Install /> component should render the component in default state 1`] = `null`;

src/components/Install/styles.ts

@@ -1,5 +1,6 @@
 import Avatar from '@material-ui/core/Avatar';
 import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
 import Typography from '@material-ui/core/Typography';
 import styled from 'react-emotion';
 import { fontWeight } from '../../utils/styles/sizes';
@@ -15,10 +16,21 @@ export const InstallItem = styled(ListItem)({
   '&&': {
     padding: 0,
   },
+  '&&:hover': {
+    backgroundColor: 'transparent',
+  },
+});
+
+export const InstallListItemText = styled(ListItemText)({
+  '&&': {
+    padding: '0 10px',
+    margin: 0,
+  },
 });
 
 export const PackageMangerAvatar = styled(Avatar)({
   '&&': {
     borderRadius: '0px',
+    padding: '0',
   },
 });