chore: sync with 4.x webui

src/components/Author/index.js

@@ -1,49 +1,53 @@
-/* eslint no-unused-vars: 0 */
+/**
+ * @prettier
+ */
 
-import React, {Component, Fragment} from 'react';
+import React, { Component } from 'react';
 
-import {DetailContextConsumer} from '../../pages/version/index';
-import Card from '@material-ui/core/Card/index';
-import CardContent from '@material-ui/core/CardContent/index';
-import CopyToClipBoard from '../CopyToClipBoard';
-import CardHeader from '@material-ui/core/CardHeader/index';
-import Avatar from '@material-ui/core/Avatar';
-import CardActions from '@material-ui/core/CardActions';
-import Typography from '@material-ui/core/Typography/index';
+import Avatar from '@material-ui/core/Avatar/index';
+import List from '@material-ui/core/List/index';
+import ListItemText from '@material-ui/core/ListItemText/index';
+
+import { DetailContextConsumer } from '../../pages/version/index';
+import { Heading, AuthorListItem } from './styles';
 
 class Authors extends Component<any, any> {
   render() {
     return (
       <DetailContextConsumer>
-        {(context) => {
+        {context => {
           return this.renderAuthor(context);
         }}
       </DetailContextConsumer>
     );
   }
 
-  renderAuthor = ({packageMeta}) => {
-    const {author} = packageMeta.latest;
+  renderLinkForMail(email, avatarComponent, packageName, version) {
+    if (!email) {
+      return avatarComponent;
+    }
+    return (
+      <a href={`mailto:${email}?subject=${packageName}@${version}`} target={'_top'}>
+        {avatarComponent}
+      </a>
+    );
+  }
+
+  renderAuthor = ({ packageMeta }) => {
+    const { author, name: packageName, version } = packageMeta.latest;
 
     if (!author) {
       return null;
     }
 
+    const avatarComponent = <Avatar alt={author.name} src={author.avatar} />;
     return (
-      <Card>
-        <CardContent>{this.renderAvatar(author)}</CardContent>
-      </Card>
-    );
-  };
-
-  renderAvatar = ({name, email, url, avatar}) => {
-    return (
-      <Fragment>
-        <Avatar aria-label={name} src={avatar} />
-        <Typography color={'textPrimary'} gutterBottom={true} variant={'caption'}>
-          {name}
-        </Typography>
-      </Fragment>
+      <List subheader={<Heading variant={'subheading'}>{'Author'}</Heading>}>
+        <AuthorListItem>
+          {this.renderLinkForMail(author.email, avatarComponent, packageName, version)}
+          <ListItemText primary={author.name} />
+        </AuthorListItem>
+      </List>
     );
   };
 }

src/components/Author/styles.js

@@ -0,0 +1,21 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import styled from 'react-emotion';
+import ListItem from '@material-ui/core/ListItem/index';
+import Typography from '@material-ui/core/Typography/index';
+
+export const Heading = styled(Typography)`
+  && {
+    font-weight: 700;
+    text-transform: capitalize;
+  }
+`;
+export const AuthorListItem = styled(ListItem)`
+  && {
+    padding-left: 0;
+    padding-right: 0;
+  }
+`;