From 3a9f66c023adc961b643daa944e3a7ea54857416 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscilawebdev@gmail.com>
Date: Tue, 17 Dec 2019 22:57:53 -0300
Subject: [PATCH] Refactor: Updated developers component structure (#360)

---
 .../AvatarTooltip/AvatarTooltip.tsx           |   37 -
 src/components/AvatarTooltip/index.ts         |    4 -
 .../DetailSidebar/DetailSidebar.tsx           |    8 +-
 src/components/Developers/Developers.test.tsx |   15 +-
 src/components/Developers/Developers.tsx      |  113 +-
 .../__snapshots__/Developers.test.tsx.snap    | 1214 ++++++++---------
 .../Developers/get-unique-developer-values.ts |   12 +
 src/components/Developers/index.ts            |    2 +-
 types/packageMeta.ts                          |    7 +
 9 files changed, 699 insertions(+), 713 deletions(-)
 delete mode 100644 src/components/AvatarTooltip/AvatarTooltip.tsx
 delete mode 100644 src/components/AvatarTooltip/index.ts
 create mode 100644 src/components/Developers/get-unique-developer-values.ts

diff --git a/src/components/AvatarTooltip/AvatarTooltip.tsx b/src/components/AvatarTooltip/AvatarTooltip.tsx
deleted file mode 100644
index 8b4420c..0000000
--- a/src/components/AvatarTooltip/AvatarTooltip.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { FC } from 'react';
-
-import { isEmail } from '../../utils/url';
-import Tooltip from '../../muiComponents/Tooltip';
-import Avatar from '../../muiComponents/Avatar';
-
-export interface AvatarDeveloper {
-  name: string;
-  packageName: string;
-  version: string;
-  avatar: string;
-  email: string;
-}
-
-const AvatarTooltip: FC<AvatarDeveloper> = ({ name, packageName, version, avatar, email }) => {
-  const avatarComponent = <Avatar aria-label={name} src={avatar} />;
-  function renderLinkForMail(
-    email: string,
-    avatarComponent: JSX.Element,
-    packageName: string,
-    version: string
-  ): JSX.Element {
-    if (!email || isEmail(email) === false) {
-      return avatarComponent;
-    }
-
-    return (
-      <a href={`mailto:${email}?subject=${packageName}@${version}`} target={'_top'}>
-        {avatarComponent}
-      </a>
-    );
-  }
-
-  return <Tooltip title={name}>{renderLinkForMail(email, avatarComponent, packageName, version)}</Tooltip>;
-};
-
-export { AvatarTooltip };
diff --git a/src/components/AvatarTooltip/index.ts b/src/components/AvatarTooltip/index.ts
deleted file mode 100644
index 746d62c..0000000
--- a/src/components/AvatarTooltip/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { AvatarTooltip } from './AvatarTooltip';
-
-export { AvatarTooltip };
-export default AvatarTooltip;
diff --git a/src/components/DetailSidebar/DetailSidebar.tsx b/src/components/DetailSidebar/DetailSidebar.tsx
index 379a896..e51de6a 100644
--- a/src/components/DetailSidebar/DetailSidebar.tsx
+++ b/src/components/DetailSidebar/DetailSidebar.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react';
 
 import ActionBar from '../ActionBar';
 import Author from '../Author';
-import Developers from '../Developers';
+import Developers, { DeveloperType } from '../Developers';
 import Dist from '../Dist/Dist';
 import Engine from '../Engines/Engines';
 import Install from '../Install';
@@ -28,8 +28,6 @@ const renderLatestDescription = (description, version, isLatest = true): JSX.Ele
 };
 
 const renderCopyCLI = (): JSX.Element => <Install />;
-const renderMaintainers = (): JSX.Element => <Developers type="maintainers" />;
-const renderContributors = (): JSX.Element => <Developers type="contributors" />;
 const renderRepository = (): JSX.Element => <Repository />;
 const renderAuthor = (): JSX.Element => <Author />;
 const renderEngine = (): JSX.Element => <Engine />;
@@ -63,8 +61,8 @@ function renderSideBar(packageName, packageVersion, packageMeta): ReactElement<H
           {renderEngine()}
           {renderDist()}
           {renderAuthor()}
-          {renderMaintainers()}
-          {renderContributors()}
+          <Developers type={DeveloperType.MAINTAINERS} />
+          <Developers type={DeveloperType.CONTRIBUTORS} />
         </CardContent>
       </Card>
     </div>
diff --git a/src/components/Developers/Developers.test.tsx b/src/components/Developers/Developers.test.tsx
index 2f3fb7c..8913ebc 100644
--- a/src/components/Developers/Developers.test.tsx
+++ b/src/components/Developers/Developers.test.tsx
@@ -3,8 +3,7 @@ import React from 'react';
 import { mount } from '../../utils/test-enzyme';
 import { DetailContextProvider } from '../../pages/Version';
 
-import Developers, { DevelopersType } from './Developers';
-import { Fab } from './styles';
+import Developers, { DeveloperType, Fab } from './Developers';
 
 describe('test Developers', () => {
   const packageMeta = {
@@ -35,14 +34,13 @@ describe('test Developers', () => {
   };
 
   test('should render the component with no items', () => {
-    const type: DevelopersType = 'maintainers';
     const packageMeta = {
       latest: {},
     };
     const wrapper = mount(
       // @ts-ignore
       <DetailContextProvider value={{ packageMeta }}>
-        <Developers type={type} />
+        <Developers type={DeveloperType.MAINTAINERS} />
       </DetailContextProvider>
     );
 
@@ -50,11 +48,10 @@ describe('test Developers', () => {
   });
 
   test('should render the component for maintainers with items', () => {
-    const type: DevelopersType = 'maintainers';
     const wrapper = mount(
       // @ts-ignore
       <DetailContextProvider value={{ packageMeta }}>
-        <Developers type={type} />
+        <Developers type={DeveloperType.MAINTAINERS} />
       </DetailContextProvider>
     );
 
@@ -62,11 +59,10 @@ describe('test Developers', () => {
   });
 
   test('should render the component for contributors with items', () => {
-    const type: DevelopersType = 'contributors';
     const wrapper = mount(
       // @ts-ignore
       <DetailContextProvider value={{ packageMeta }}>
-        <Developers type={type} />
+        <Developers type={DeveloperType.CONTRIBUTORS} />
       </DetailContextProvider>
     );
 
@@ -74,7 +70,6 @@ describe('test Developers', () => {
   });
 
   test('should test onClick the component avatar', () => {
-    const type: DevelopersType = 'contributors';
     const packageMeta = {
       latest: {
         packageName: 'foo',
@@ -95,7 +90,7 @@ describe('test Developers', () => {
     const wrapper = mount(
       // @ts-ignore
       <DetailContextProvider value={{ packageMeta }}>
-        <Developers type={type} visibleMax={1} />
+        <Developers type={DeveloperType.CONTRIBUTORS} visibleMax={1} />
       </DetailContextProvider>
     );
 
diff --git a/src/components/Developers/Developers.tsx b/src/components/Developers/Developers.tsx
index ca4f96c..3e69462 100644
--- a/src/components/Developers/Developers.tsx
+++ b/src/components/Developers/Developers.tsx
@@ -1,60 +1,89 @@
-import React, { FC, Fragment } from 'react';
+import React, { useState, useCallback, useContext, useEffect, useMemo } from 'react';
 import Add from '@material-ui/icons/Add';
+import styled from '@emotion/styled';
 
 import { DetailContext } from '../../pages/Version';
-import { AvatarTooltip } from '../AvatarTooltip';
+import Tooltip from '../../muiComponents/Tooltip';
+import Avatar from '../../muiComponents/Avatar';
+import Box from '../../muiComponents/Box';
+import Text from '../../muiComponents/Text';
+import FloatingActionButton from '../../muiComponents/FloatingActionButton';
+import { Theme } from '../../design-tokens/theme';
 
-import { Details, StyledText, Content, Fab } from './styles';
+import getUniqueDeveloperValues from './get-unique-developer-values';
 
-export type DevelopersType = 'contributors' | 'maintainers';
+export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({
+  backgroundColor: props.theme && props.theme.palette.primary.main,
+  color: props.theme && props.theme.palette.white,
+}));
+
+export enum DeveloperType {
+  CONTRIBUTORS = 'contributors',
+  MAINTAINERS = 'maintainers',
+}
 
 interface Props {
-  type: DevelopersType;
+  type: DeveloperType;
   visibleMax?: number;
 }
 
+export const StyledText = styled(Text)<{ theme?: Theme }>(({ theme }) => ({
+  fontWeight: theme && theme.fontWeight.bold,
+  marginBottom: '10px',
+  textTransform: 'capitalize',
+}));
+
+const StyledBox = styled(Box)({
+  '> *': {
+    margin: 5,
+  },
+});
+
 export const VISIBLE_MAX = 6;
 
-const Developers: FC<Props> = ({ type, visibleMax }) => {
-  const [visibleDevs, setVisibleDevs] = React.useState<number>(visibleMax || VISIBLE_MAX);
-  const { packageMeta } = React.useContext(DetailContext);
+const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => {
+  const detailContext = useContext(DetailContext);
 
-  const handleLoadMore = (): void => {
-    setVisibleDevs(visibleDevs + VISIBLE_MAX);
-  };
-
-  const renderDeveloperDetails = ({ name, avatar, email }, packageMeta): JSX.Element => {
-    const { name: packageName, version } = packageMeta.latest;
-
-    return <AvatarTooltip avatar={avatar} email={email} name={name} packageName={packageName} version={version} />;
-  };
-
-  const renderDevelopers = (developers, packageMeta): JSX.Element => {
-    const listVisibleDevelopers = developers.slice(0, visibleDevs);
-
-    return (
-      <Fragment>
-        <StyledText variant={'subtitle1'}>{type}</StyledText>
-        <Content>
-          {listVisibleDevelopers.map(developer => (
-            <Details key={developer.email}>{renderDeveloperDetails(developer, packageMeta)}</Details>
-          ))}
-          {visibleDevs < developers.length && (
-            <Fab onClick={handleLoadMore} size="small">
-              <Add />
-            </Fab>
-          )}
-        </Content>
-      </Fragment>
-    );
-  };
-
-  const developerList = packageMeta && packageMeta.latest[type];
-  if (!developerList || developerList.length === 0) {
-    return null;
+  if (!detailContext) {
+    throw Error("The app's detail Context was not correct used");
   }
 
-  return renderDevelopers(developerList, packageMeta);
+  const developers = useMemo(() => getUniqueDeveloperValues(detailContext.packageMeta?.latest[type]), [
+    detailContext.packageMeta,
+    type,
+  ]);
+
+  const [visibleDevelopersMax, setVisibleDevelopersMax] = useState(visibleMax);
+  const [visibleDevelopers, setVisibleDevelopers] = useState(developers);
+
+  useEffect(() => {
+    if (!developers) return;
+    setVisibleDevelopers(developers.slice(0, visibleDevelopersMax));
+  }, [developers, visibleDevelopersMax]);
+
+  const handleSetVisibleDevelopersMax = useCallback(() => {
+    setVisibleDevelopersMax(visibleDevelopersMax + VISIBLE_MAX);
+  }, [visibleDevelopersMax]);
+
+  if (!visibleDevelopers || !developers) return null;
+
+  return (
+    <>
+      <StyledText variant={'subtitle1'}>{type}</StyledText>
+      <StyledBox display="flex" flexWrap="wrap" margin="10px 0 10px 0">
+        {visibleDevelopers.map(visibleDeveloper => (
+          <Tooltip key={visibleDeveloper.email} title={visibleDeveloper.name}>
+            <Avatar alt={visibleDeveloper.name} src={visibleDeveloper.avatar} />
+          </Tooltip>
+        ))}
+        {visibleDevelopersMax < developers.length && (
+          <Fab onClick={handleSetVisibleDevelopersMax} size="small">
+            <Add />
+          </Fab>
+        )}
+      </StyledBox>
+    </>
+  );
 };
 
 export default Developers;
diff --git a/src/components/Developers/__snapshots__/Developers.test.tsx.snap b/src/components/Developers/__snapshots__/Developers.test.tsx.snap
index e820c96..94e907d 100644
--- a/src/components/Developers/__snapshots__/Developers.test.tsx.snap
+++ b/src/components/Developers/__snapshots__/Developers.test.tsx.snap
@@ -7,35 +7,10 @@ exports[`test Developers should render the component for contributors with items
   text-transform: capitalize;
 }
 
-.emotion-12 {
-  margin: 10px 0 10px 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.emotion-12 > * {
+.emotion-8 > * {
   margin: 5px;
 }
 
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 <Developers
   type="contributors"
 >
@@ -97,336 +72,354 @@ exports[`test Developers should render the component for contributors with items
       </WithStyles(ForwardRef(Typography))>
     </ForwardRef(Text)>
   </StyledText>
-  <Content>
-    <div
-      className="emotion-12 emotion-13"
+  <StyledBox
+    display="flex"
+    flexWrap="wrap"
+    margin="10px 0 10px 0"
+  >
+    <Box
+      className="emotion-8 emotion-9"
+      display="flex"
+      flexWrap="wrap"
+      margin="10px 0 10px 0"
     >
-      <Details
-        key="dave.methvin@gmail.com"
+      <Styled(MuiBox)
+        className="emotion-8 emotion-9"
+        display="flex"
+        flexWrap="wrap"
+        margin="10px 0 10px 0"
       >
-        <span
-          className="emotion-8 emotion-9"
+        <div
+          className="MuiBox-root MuiBox-root-60 emotion-8 emotion-9"
         >
-          <AvatarTooltip
-            email="dave.methvin@gmail.com"
-            name="dmethvin"
-            version="1.0.0"
+          <ForwardRef(ToolTip)
+            key="dave.methvin@gmail.com"
+            title="dmethvin"
           >
-            <ForwardRef(ToolTip)
+            <WithStyles(ForwardRef(Tooltip))
+              innerRef={null}
               title="dmethvin"
             >
-              <WithStyles(ForwardRef(Tooltip))
-                innerRef={null}
+              <ForwardRef(Tooltip)
+                classes={
+                  Object {
+                    "arrow": "MuiTooltip-arrow",
+                    "popper": "MuiTooltip-popper",
+                    "popperArrow": "MuiTooltip-popperArrow",
+                    "popperInteractive": "MuiTooltip-popperInteractive",
+                    "tooltip": "MuiTooltip-tooltip",
+                    "tooltipArrow": "MuiTooltip-tooltipArrow",
+                    "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom",
+                    "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft",
+                    "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight",
+                    "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop",
+                    "touch": "MuiTooltip-touch",
+                  }
+                }
                 title="dmethvin"
               >
-                <ForwardRef(Tooltip)
-                  classes={
-                    Object {
-                      "arrow": "MuiTooltip-arrow",
-                      "popper": "MuiTooltip-popper",
-                      "popperArrow": "MuiTooltip-popperArrow",
-                      "popperInteractive": "MuiTooltip-popperInteractive",
-                      "tooltip": "MuiTooltip-tooltip",
-                      "tooltipArrow": "MuiTooltip-tooltipArrow",
-                      "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom",
-                      "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft",
-                      "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight",
-                      "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop",
-                      "touch": "MuiTooltip-touch",
-                    }
-                  }
+                <ForwardRef(Avatar)
+                  alt="dmethvin"
+                  aria-describedby={null}
+                  className=""
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchStart={[Function]}
                   title="dmethvin"
                 >
-                  <a
+                  <WithStyles(ForwardRef(Avatar))
+                    alt="dmethvin"
                     aria-describedby={null}
                     className=""
-                    href="mailto:dave.methvin@gmail.com?subject=undefined@1.0.0"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseLeave={[Function]}
                     onMouseOver={[Function]}
                     onTouchEnd={[Function]}
                     onTouchStart={[Function]}
-                    target="_top"
                     title="dmethvin"
                   >
                     <ForwardRef(Avatar)
-                      aria-label="dmethvin"
+                      alt="dmethvin"
+                      aria-describedby={null}
+                      className=""
+                      classes={
+                        Object {
+                          "circle": "MuiAvatar-circle",
+                          "colorDefault": "MuiAvatar-colorDefault",
+                          "fallback": "MuiAvatar-fallback",
+                          "img": "MuiAvatar-img",
+                          "root": "MuiAvatar-root",
+                          "rounded": "MuiAvatar-rounded",
+                          "square": "MuiAvatar-square",
+                        }
+                      }
+                      onBlur={[Function]}
+                      onFocus={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      onTouchStart={[Function]}
+                      title="dmethvin"
                     >
-                      <WithStyles(ForwardRef(Avatar))
-                        aria-label="dmethvin"
-                      >
-                        <ForwardRef(Avatar)
-                          aria-label="dmethvin"
-                          classes={
-                            Object {
-                              "circle": "MuiAvatar-circle",
-                              "colorDefault": "MuiAvatar-colorDefault",
-                              "fallback": "MuiAvatar-fallback",
-                              "img": "MuiAvatar-img",
-                              "root": "MuiAvatar-root",
-                              "rounded": "MuiAvatar-rounded",
-                              "square": "MuiAvatar-square",
-                            }
-                          }
-                        >
-                          <div
-                            aria-label="dmethvin"
-                            className="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
-                          >
-                            <ForwardRef
-                              className="MuiAvatar-fallback"
-                            >
-                              <WithStyles(ForwardRef(SvgIcon))
-                                className="MuiAvatar-fallback"
-                              >
-                                <ForwardRef(SvgIcon)
-                                  className="MuiAvatar-fallback"
-                                  classes={
-                                    Object {
-                                      "colorAction": "MuiSvgIcon-colorAction",
-                                      "colorDisabled": "MuiSvgIcon-colorDisabled",
-                                      "colorError": "MuiSvgIcon-colorError",
-                                      "colorPrimary": "MuiSvgIcon-colorPrimary",
-                                      "colorSecondary": "MuiSvgIcon-colorSecondary",
-                                      "fontSizeInherit": "MuiSvgIcon-fontSizeInherit",
-                                      "fontSizeLarge": "MuiSvgIcon-fontSizeLarge",
-                                      "fontSizeSmall": "MuiSvgIcon-fontSizeSmall",
-                                      "root": "MuiSvgIcon-root",
-                                    }
-                                  }
-                                >
-                                  <svg
-                                    aria-hidden="true"
-                                    className="MuiSvgIcon-root MuiAvatar-fallback"
-                                    focusable="false"
-                                    role="presentation"
-                                    viewBox="0 0 24 24"
-                                  >
-                                    <path
-                                      d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                                    />
-                                  </svg>
-                                </ForwardRef(SvgIcon)>
-                              </WithStyles(ForwardRef(SvgIcon))>
-                            </ForwardRef>
-                          </div>
-                        </ForwardRef(Avatar)>
-                      </WithStyles(ForwardRef(Avatar))>
-                    </ForwardRef(Avatar)>
-                  </a>
-                  <ForwardRef(Popper)
-                    anchorEl={
-                      <a
-                        class=""
-                        href="mailto:dave.methvin@gmail.com?subject=undefined@1.0.0"
-                        target="_top"
+                      <div
+                        aria-describedby={null}
+                        className="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+                        onBlur={[Function]}
+                        onFocus={[Function]}
+                        onMouseLeave={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        onTouchStart={[Function]}
                         title="dmethvin"
                       >
-                        <div
-                          aria-label="dmethvin"
-                          class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+                        <ForwardRef
+                          className="MuiAvatar-fallback"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root MuiAvatar-fallback"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
+                          <WithStyles(ForwardRef(SvgIcon))
+                            className="MuiAvatar-fallback"
                           >
-                            <path
-                              d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                            />
-                          </svg>
-                        </div>
-                      </a>
-                    }
-                    className="MuiTooltip-popper"
-                    id={null}
-                    open={false}
-                    placement="bottom"
-                    popperOptions={
-                      Object {
-                        "modifiers": Object {
-                          "arrow": Object {
-                            "element": null,
-                            "enabled": false,
-                          },
-                        },
-                      }
-                    }
-                    transition={true}
-                  />
-                </ForwardRef(Tooltip)>
-              </WithStyles(ForwardRef(Tooltip))>
-            </ForwardRef(ToolTip)>
-          </AvatarTooltip>
-        </span>
-      </Details>
-      <Details
-        key="m.goleb@gmail.com"
-      >
-        <span
-          className="emotion-8 emotion-9"
-        >
-          <AvatarTooltip
-            email="m.goleb@gmail.com"
-            name="mgol"
-            version="1.0.0"
-          >
-            <ForwardRef(ToolTip)
-              title="mgol"
-            >
-              <WithStyles(ForwardRef(Tooltip))
-                innerRef={null}
-                title="mgol"
-              >
-                <ForwardRef(Tooltip)
-                  classes={
+                            <ForwardRef(SvgIcon)
+                              className="MuiAvatar-fallback"
+                              classes={
+                                Object {
+                                  "colorAction": "MuiSvgIcon-colorAction",
+                                  "colorDisabled": "MuiSvgIcon-colorDisabled",
+                                  "colorError": "MuiSvgIcon-colorError",
+                                  "colorPrimary": "MuiSvgIcon-colorPrimary",
+                                  "colorSecondary": "MuiSvgIcon-colorSecondary",
+                                  "fontSizeInherit": "MuiSvgIcon-fontSizeInherit",
+                                  "fontSizeLarge": "MuiSvgIcon-fontSizeLarge",
+                                  "fontSizeSmall": "MuiSvgIcon-fontSizeSmall",
+                                  "root": "MuiSvgIcon-root",
+                                }
+                              }
+                            >
+                              <svg
+                                aria-hidden="true"
+                                className="MuiSvgIcon-root MuiAvatar-fallback"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+                                />
+                              </svg>
+                            </ForwardRef(SvgIcon)>
+                          </WithStyles(ForwardRef(SvgIcon))>
+                        </ForwardRef>
+                      </div>
+                    </ForwardRef(Avatar)>
+                  </WithStyles(ForwardRef(Avatar))>
+                </ForwardRef(Avatar)>
+                <ForwardRef(Popper)
+                  anchorEl={
+                    <div
+                      class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+                      title="dmethvin"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiAvatar-fallback"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+                        />
+                      </svg>
+                    </div>
+                  }
+                  className="MuiTooltip-popper"
+                  id={null}
+                  open={false}
+                  placement="bottom"
+                  popperOptions={
                     Object {
-                      "arrow": "MuiTooltip-arrow",
-                      "popper": "MuiTooltip-popper",
-                      "popperArrow": "MuiTooltip-popperArrow",
-                      "popperInteractive": "MuiTooltip-popperInteractive",
-                      "tooltip": "MuiTooltip-tooltip",
-                      "tooltipArrow": "MuiTooltip-tooltipArrow",
-                      "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom",
-                      "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft",
-                      "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight",
-                      "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop",
-                      "touch": "MuiTooltip-touch",
+                      "modifiers": Object {
+                        "arrow": Object {
+                          "element": null,
+                          "enabled": false,
+                        },
+                      },
                     }
                   }
+                  transition={true}
+                />
+              </ForwardRef(Tooltip)>
+            </WithStyles(ForwardRef(Tooltip))>
+          </ForwardRef(ToolTip)>
+          <ForwardRef(ToolTip)
+            key="m.goleb@gmail.com"
+            title="mgol"
+          >
+            <WithStyles(ForwardRef(Tooltip))
+              innerRef={null}
+              title="mgol"
+            >
+              <ForwardRef(Tooltip)
+                classes={
+                  Object {
+                    "arrow": "MuiTooltip-arrow",
+                    "popper": "MuiTooltip-popper",
+                    "popperArrow": "MuiTooltip-popperArrow",
+                    "popperInteractive": "MuiTooltip-popperInteractive",
+                    "tooltip": "MuiTooltip-tooltip",
+                    "tooltipArrow": "MuiTooltip-tooltipArrow",
+                    "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom",
+                    "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft",
+                    "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight",
+                    "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop",
+                    "touch": "MuiTooltip-touch",
+                  }
+                }
+                title="mgol"
+              >
+                <ForwardRef(Avatar)
+                  alt="mgol"
+                  aria-describedby={null}
+                  className=""
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchStart={[Function]}
                   title="mgol"
                 >
-                  <a
+                  <WithStyles(ForwardRef(Avatar))
+                    alt="mgol"
                     aria-describedby={null}
                     className=""
-                    href="mailto:m.goleb@gmail.com?subject=undefined@1.0.0"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseLeave={[Function]}
                     onMouseOver={[Function]}
                     onTouchEnd={[Function]}
                     onTouchStart={[Function]}
-                    target="_top"
                     title="mgol"
                   >
                     <ForwardRef(Avatar)
-                      aria-label="mgol"
+                      alt="mgol"
+                      aria-describedby={null}
+                      className=""
+                      classes={
+                        Object {
+                          "circle": "MuiAvatar-circle",
+                          "colorDefault": "MuiAvatar-colorDefault",
+                          "fallback": "MuiAvatar-fallback",
+                          "img": "MuiAvatar-img",
+                          "root": "MuiAvatar-root",
+                          "rounded": "MuiAvatar-rounded",
+                          "square": "MuiAvatar-square",
+                        }
+                      }
+                      onBlur={[Function]}
+                      onFocus={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      onTouchStart={[Function]}
+                      title="mgol"
                     >
-                      <WithStyles(ForwardRef(Avatar))
-                        aria-label="mgol"
-                      >
-                        <ForwardRef(Avatar)
-                          aria-label="mgol"
-                          classes={
-                            Object {
-                              "circle": "MuiAvatar-circle",
-                              "colorDefault": "MuiAvatar-colorDefault",
-                              "fallback": "MuiAvatar-fallback",
-                              "img": "MuiAvatar-img",
-                              "root": "MuiAvatar-root",
-                              "rounded": "MuiAvatar-rounded",
-                              "square": "MuiAvatar-square",
-                            }
-                          }
-                        >
-                          <div
-                            aria-label="mgol"
-                            className="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
-                          >
-                            <ForwardRef
-                              className="MuiAvatar-fallback"
-                            >
-                              <WithStyles(ForwardRef(SvgIcon))
-                                className="MuiAvatar-fallback"
-                              >
-                                <ForwardRef(SvgIcon)
-                                  className="MuiAvatar-fallback"
-                                  classes={
-                                    Object {
-                                      "colorAction": "MuiSvgIcon-colorAction",
-                                      "colorDisabled": "MuiSvgIcon-colorDisabled",
-                                      "colorError": "MuiSvgIcon-colorError",
-                                      "colorPrimary": "MuiSvgIcon-colorPrimary",
-                                      "colorSecondary": "MuiSvgIcon-colorSecondary",
-                                      "fontSizeInherit": "MuiSvgIcon-fontSizeInherit",
-                                      "fontSizeLarge": "MuiSvgIcon-fontSizeLarge",
-                                      "fontSizeSmall": "MuiSvgIcon-fontSizeSmall",
-                                      "root": "MuiSvgIcon-root",
-                                    }
-                                  }
-                                >
-                                  <svg
-                                    aria-hidden="true"
-                                    className="MuiSvgIcon-root MuiAvatar-fallback"
-                                    focusable="false"
-                                    role="presentation"
-                                    viewBox="0 0 24 24"
-                                  >
-                                    <path
-                                      d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                                    />
-                                  </svg>
-                                </ForwardRef(SvgIcon)>
-                              </WithStyles(ForwardRef(SvgIcon))>
-                            </ForwardRef>
-                          </div>
-                        </ForwardRef(Avatar)>
-                      </WithStyles(ForwardRef(Avatar))>
-                    </ForwardRef(Avatar)>
-                  </a>
-                  <ForwardRef(Popper)
-                    anchorEl={
-                      <a
-                        class=""
-                        href="mailto:m.goleb@gmail.com?subject=undefined@1.0.0"
-                        target="_top"
+                      <div
+                        aria-describedby={null}
+                        className="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+                        onBlur={[Function]}
+                        onFocus={[Function]}
+                        onMouseLeave={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        onTouchStart={[Function]}
                         title="mgol"
                       >
-                        <div
-                          aria-label="mgol"
-                          class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+                        <ForwardRef
+                          className="MuiAvatar-fallback"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root MuiAvatar-fallback"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
+                          <WithStyles(ForwardRef(SvgIcon))
+                            className="MuiAvatar-fallback"
                           >
-                            <path
-                              d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                            />
-                          </svg>
-                        </div>
-                      </a>
-                    }
-                    className="MuiTooltip-popper"
-                    id={null}
-                    open={false}
-                    placement="bottom"
-                    popperOptions={
-                      Object {
-                        "modifiers": Object {
-                          "arrow": Object {
-                            "element": null,
-                            "enabled": false,
-                          },
+                            <ForwardRef(SvgIcon)
+                              className="MuiAvatar-fallback"
+                              classes={
+                                Object {
+                                  "colorAction": "MuiSvgIcon-colorAction",
+                                  "colorDisabled": "MuiSvgIcon-colorDisabled",
+                                  "colorError": "MuiSvgIcon-colorError",
+                                  "colorPrimary": "MuiSvgIcon-colorPrimary",
+                                  "colorSecondary": "MuiSvgIcon-colorSecondary",
+                                  "fontSizeInherit": "MuiSvgIcon-fontSizeInherit",
+                                  "fontSizeLarge": "MuiSvgIcon-fontSizeLarge",
+                                  "fontSizeSmall": "MuiSvgIcon-fontSizeSmall",
+                                  "root": "MuiSvgIcon-root",
+                                }
+                              }
+                            >
+                              <svg
+                                aria-hidden="true"
+                                className="MuiSvgIcon-root MuiAvatar-fallback"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+                                />
+                              </svg>
+                            </ForwardRef(SvgIcon)>
+                          </WithStyles(ForwardRef(SvgIcon))>
+                        </ForwardRef>
+                      </div>
+                    </ForwardRef(Avatar)>
+                  </WithStyles(ForwardRef(Avatar))>
+                </ForwardRef(Avatar)>
+                <ForwardRef(Popper)
+                  anchorEl={
+                    <div
+                      class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+                      title="mgol"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiAvatar-fallback"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+                        />
+                      </svg>
+                    </div>
+                  }
+                  className="MuiTooltip-popper"
+                  id={null}
+                  open={false}
+                  placement="bottom"
+                  popperOptions={
+                    Object {
+                      "modifiers": Object {
+                        "arrow": Object {
+                          "element": null,
+                          "enabled": false,
                         },
-                      }
+                      },
                     }
-                    transition={true}
-                  />
-                </ForwardRef(Tooltip)>
-              </WithStyles(ForwardRef(Tooltip))>
-            </ForwardRef(ToolTip)>
-          </AvatarTooltip>
-        </span>
-      </Details>
-    </div>
-  </Content>
+                  }
+                  transition={true}
+                />
+              </ForwardRef(Tooltip)>
+            </WithStyles(ForwardRef(Tooltip))>
+          </ForwardRef(ToolTip)>
+        </div>
+      </Styled(MuiBox)>
+    </Box>
+  </StyledBox>
 </Developers>
 `;
 
@@ -437,35 +430,10 @@ exports[`test Developers should render the component for maintainers with items
   text-transform: capitalize;
 }
 
-.emotion-12 {
-  margin: 10px 0 10px 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.emotion-12 > * {
+.emotion-8 > * {
   margin: 5px;
 }
 
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 <Developers
   type="maintainers"
 >
@@ -527,336 +495,354 @@ exports[`test Developers should render the component for maintainers with items
       </WithStyles(ForwardRef(Typography))>
     </ForwardRef(Text)>
   </StyledText>
-  <Content>
-    <div
-      className="emotion-12 emotion-13"
+  <StyledBox
+    display="flex"
+    flexWrap="wrap"
+    margin="10px 0 10px 0"
+  >
+    <Box
+      className="emotion-8 emotion-9"
+      display="flex"
+      flexWrap="wrap"
+      margin="10px 0 10px 0"
     >
-      <Details
-        key="dave.methvin@gmail.com"
+      <Styled(MuiBox)
+        className="emotion-8 emotion-9"
+        display="flex"
+        flexWrap="wrap"
+        margin="10px 0 10px 0"
       >
-        <span
-          className="emotion-8 emotion-9"
+        <div
+          className="MuiBox-root MuiBox-root-32 emotion-8 emotion-9"
         >
-          <AvatarTooltip
-            email="dave.methvin@gmail.com"
-            name="dmethvin"
-            version="1.0.0"
+          <ForwardRef(ToolTip)
+            key="dave.methvin@gmail.com"
+            title="dmethvin"
           >
-            <ForwardRef(ToolTip)
+            <WithStyles(ForwardRef(Tooltip))
+              innerRef={null}
               title="dmethvin"
             >
-              <WithStyles(ForwardRef(Tooltip))
-                innerRef={null}
+              <ForwardRef(Tooltip)
+                classes={
+                  Object {
+                    "arrow": "MuiTooltip-arrow",
+                    "popper": "MuiTooltip-popper",
+                    "popperArrow": "MuiTooltip-popperArrow",
+                    "popperInteractive": "MuiTooltip-popperInteractive",
+                    "tooltip": "MuiTooltip-tooltip",
+                    "tooltipArrow": "MuiTooltip-tooltipArrow",
+                    "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom",
+                    "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft",
+                    "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight",
+                    "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop",
+                    "touch": "MuiTooltip-touch",
+                  }
+                }
                 title="dmethvin"
               >
-                <ForwardRef(Tooltip)
-                  classes={
-                    Object {
-                      "arrow": "MuiTooltip-arrow",
-                      "popper": "MuiTooltip-popper",
-                      "popperArrow": "MuiTooltip-popperArrow",
-                      "popperInteractive": "MuiTooltip-popperInteractive",
-                      "tooltip": "MuiTooltip-tooltip",
-                      "tooltipArrow": "MuiTooltip-tooltipArrow",
-                      "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom",
-                      "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft",
-                      "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight",
-                      "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop",
-                      "touch": "MuiTooltip-touch",
-                    }
-                  }
+                <ForwardRef(Avatar)
+                  alt="dmethvin"
+                  aria-describedby={null}
+                  className=""
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchStart={[Function]}
                   title="dmethvin"
                 >
-                  <a
+                  <WithStyles(ForwardRef(Avatar))
+                    alt="dmethvin"
                     aria-describedby={null}
                     className=""
-                    href="mailto:dave.methvin@gmail.com?subject=undefined@1.0.0"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseLeave={[Function]}
                     onMouseOver={[Function]}
                     onTouchEnd={[Function]}
                     onTouchStart={[Function]}
-                    target="_top"
                     title="dmethvin"
                   >
                     <ForwardRef(Avatar)
-                      aria-label="dmethvin"
+                      alt="dmethvin"
+                      aria-describedby={null}
+                      className=""
+                      classes={
+                        Object {
+                          "circle": "MuiAvatar-circle",
+                          "colorDefault": "MuiAvatar-colorDefault",
+                          "fallback": "MuiAvatar-fallback",
+                          "img": "MuiAvatar-img",
+                          "root": "MuiAvatar-root",
+                          "rounded": "MuiAvatar-rounded",
+                          "square": "MuiAvatar-square",
+                        }
+                      }
+                      onBlur={[Function]}
+                      onFocus={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      onTouchStart={[Function]}
+                      title="dmethvin"
                     >
-                      <WithStyles(ForwardRef(Avatar))
-                        aria-label="dmethvin"
-                      >
-                        <ForwardRef(Avatar)
-                          aria-label="dmethvin"
-                          classes={
-                            Object {
-                              "circle": "MuiAvatar-circle",
-                              "colorDefault": "MuiAvatar-colorDefault",
-                              "fallback": "MuiAvatar-fallback",
-                              "img": "MuiAvatar-img",
-                              "root": "MuiAvatar-root",
-                              "rounded": "MuiAvatar-rounded",
-                              "square": "MuiAvatar-square",
-                            }
-                          }
-                        >
-                          <div
-                            aria-label="dmethvin"
-                            className="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
-                          >
-                            <ForwardRef
-                              className="MuiAvatar-fallback"
-                            >
-                              <WithStyles(ForwardRef(SvgIcon))
-                                className="MuiAvatar-fallback"
-                              >
-                                <ForwardRef(SvgIcon)
-                                  className="MuiAvatar-fallback"
-                                  classes={
-                                    Object {
-                                      "colorAction": "MuiSvgIcon-colorAction",
-                                      "colorDisabled": "MuiSvgIcon-colorDisabled",
-                                      "colorError": "MuiSvgIcon-colorError",
-                                      "colorPrimary": "MuiSvgIcon-colorPrimary",
-                                      "colorSecondary": "MuiSvgIcon-colorSecondary",
-                                      "fontSizeInherit": "MuiSvgIcon-fontSizeInherit",
-                                      "fontSizeLarge": "MuiSvgIcon-fontSizeLarge",
-                                      "fontSizeSmall": "MuiSvgIcon-fontSizeSmall",
-                                      "root": "MuiSvgIcon-root",
-                                    }
-                                  }
-                                >
-                                  <svg
-                                    aria-hidden="true"
-                                    className="MuiSvgIcon-root MuiAvatar-fallback"
-                                    focusable="false"
-                                    role="presentation"
-                                    viewBox="0 0 24 24"
-                                  >
-                                    <path
-                                      d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                                    />
-                                  </svg>
-                                </ForwardRef(SvgIcon)>
-                              </WithStyles(ForwardRef(SvgIcon))>
-                            </ForwardRef>
-                          </div>
-                        </ForwardRef(Avatar)>
-                      </WithStyles(ForwardRef(Avatar))>
-                    </ForwardRef(Avatar)>
-                  </a>
-                  <ForwardRef(Popper)
-                    anchorEl={
-                      <a
-                        class=""
-                        href="mailto:dave.methvin@gmail.com?subject=undefined@1.0.0"
-                        target="_top"
+                      <div
+                        aria-describedby={null}
+                        className="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+                        onBlur={[Function]}
+                        onFocus={[Function]}
+                        onMouseLeave={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        onTouchStart={[Function]}
                         title="dmethvin"
                       >
-                        <div
-                          aria-label="dmethvin"
-                          class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+                        <ForwardRef
+                          className="MuiAvatar-fallback"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root MuiAvatar-fallback"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
+                          <WithStyles(ForwardRef(SvgIcon))
+                            className="MuiAvatar-fallback"
                           >
-                            <path
-                              d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                            />
-                          </svg>
-                        </div>
-                      </a>
-                    }
-                    className="MuiTooltip-popper"
-                    id={null}
-                    open={false}
-                    placement="bottom"
-                    popperOptions={
-                      Object {
-                        "modifiers": Object {
-                          "arrow": Object {
-                            "element": null,
-                            "enabled": false,
-                          },
-                        },
-                      }
-                    }
-                    transition={true}
-                  />
-                </ForwardRef(Tooltip)>
-              </WithStyles(ForwardRef(Tooltip))>
-            </ForwardRef(ToolTip)>
-          </AvatarTooltip>
-        </span>
-      </Details>
-      <Details
-        key="m.goleb@gmail.com"
-      >
-        <span
-          className="emotion-8 emotion-9"
-        >
-          <AvatarTooltip
-            email="m.goleb@gmail.com"
-            name="mgol"
-            version="1.0.0"
-          >
-            <ForwardRef(ToolTip)
-              title="mgol"
-            >
-              <WithStyles(ForwardRef(Tooltip))
-                innerRef={null}
-                title="mgol"
-              >
-                <ForwardRef(Tooltip)
-                  classes={
+                            <ForwardRef(SvgIcon)
+                              className="MuiAvatar-fallback"
+                              classes={
+                                Object {
+                                  "colorAction": "MuiSvgIcon-colorAction",
+                                  "colorDisabled": "MuiSvgIcon-colorDisabled",
+                                  "colorError": "MuiSvgIcon-colorError",
+                                  "colorPrimary": "MuiSvgIcon-colorPrimary",
+                                  "colorSecondary": "MuiSvgIcon-colorSecondary",
+                                  "fontSizeInherit": "MuiSvgIcon-fontSizeInherit",
+                                  "fontSizeLarge": "MuiSvgIcon-fontSizeLarge",
+                                  "fontSizeSmall": "MuiSvgIcon-fontSizeSmall",
+                                  "root": "MuiSvgIcon-root",
+                                }
+                              }
+                            >
+                              <svg
+                                aria-hidden="true"
+                                className="MuiSvgIcon-root MuiAvatar-fallback"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+                                />
+                              </svg>
+                            </ForwardRef(SvgIcon)>
+                          </WithStyles(ForwardRef(SvgIcon))>
+                        </ForwardRef>
+                      </div>
+                    </ForwardRef(Avatar)>
+                  </WithStyles(ForwardRef(Avatar))>
+                </ForwardRef(Avatar)>
+                <ForwardRef(Popper)
+                  anchorEl={
+                    <div
+                      class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+                      title="dmethvin"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiAvatar-fallback"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+                        />
+                      </svg>
+                    </div>
+                  }
+                  className="MuiTooltip-popper"
+                  id={null}
+                  open={false}
+                  placement="bottom"
+                  popperOptions={
                     Object {
-                      "arrow": "MuiTooltip-arrow",
-                      "popper": "MuiTooltip-popper",
-                      "popperArrow": "MuiTooltip-popperArrow",
-                      "popperInteractive": "MuiTooltip-popperInteractive",
-                      "tooltip": "MuiTooltip-tooltip",
-                      "tooltipArrow": "MuiTooltip-tooltipArrow",
-                      "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom",
-                      "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft",
-                      "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight",
-                      "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop",
-                      "touch": "MuiTooltip-touch",
+                      "modifiers": Object {
+                        "arrow": Object {
+                          "element": null,
+                          "enabled": false,
+                        },
+                      },
                     }
                   }
+                  transition={true}
+                />
+              </ForwardRef(Tooltip)>
+            </WithStyles(ForwardRef(Tooltip))>
+          </ForwardRef(ToolTip)>
+          <ForwardRef(ToolTip)
+            key="m.goleb@gmail.com"
+            title="mgol"
+          >
+            <WithStyles(ForwardRef(Tooltip))
+              innerRef={null}
+              title="mgol"
+            >
+              <ForwardRef(Tooltip)
+                classes={
+                  Object {
+                    "arrow": "MuiTooltip-arrow",
+                    "popper": "MuiTooltip-popper",
+                    "popperArrow": "MuiTooltip-popperArrow",
+                    "popperInteractive": "MuiTooltip-popperInteractive",
+                    "tooltip": "MuiTooltip-tooltip",
+                    "tooltipArrow": "MuiTooltip-tooltipArrow",
+                    "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom",
+                    "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft",
+                    "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight",
+                    "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop",
+                    "touch": "MuiTooltip-touch",
+                  }
+                }
+                title="mgol"
+              >
+                <ForwardRef(Avatar)
+                  alt="mgol"
+                  aria-describedby={null}
+                  className=""
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchStart={[Function]}
                   title="mgol"
                 >
-                  <a
+                  <WithStyles(ForwardRef(Avatar))
+                    alt="mgol"
                     aria-describedby={null}
                     className=""
-                    href="mailto:m.goleb@gmail.com?subject=undefined@1.0.0"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseLeave={[Function]}
                     onMouseOver={[Function]}
                     onTouchEnd={[Function]}
                     onTouchStart={[Function]}
-                    target="_top"
                     title="mgol"
                   >
                     <ForwardRef(Avatar)
-                      aria-label="mgol"
+                      alt="mgol"
+                      aria-describedby={null}
+                      className=""
+                      classes={
+                        Object {
+                          "circle": "MuiAvatar-circle",
+                          "colorDefault": "MuiAvatar-colorDefault",
+                          "fallback": "MuiAvatar-fallback",
+                          "img": "MuiAvatar-img",
+                          "root": "MuiAvatar-root",
+                          "rounded": "MuiAvatar-rounded",
+                          "square": "MuiAvatar-square",
+                        }
+                      }
+                      onBlur={[Function]}
+                      onFocus={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      onTouchStart={[Function]}
+                      title="mgol"
                     >
-                      <WithStyles(ForwardRef(Avatar))
-                        aria-label="mgol"
-                      >
-                        <ForwardRef(Avatar)
-                          aria-label="mgol"
-                          classes={
-                            Object {
-                              "circle": "MuiAvatar-circle",
-                              "colorDefault": "MuiAvatar-colorDefault",
-                              "fallback": "MuiAvatar-fallback",
-                              "img": "MuiAvatar-img",
-                              "root": "MuiAvatar-root",
-                              "rounded": "MuiAvatar-rounded",
-                              "square": "MuiAvatar-square",
-                            }
-                          }
-                        >
-                          <div
-                            aria-label="mgol"
-                            className="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
-                          >
-                            <ForwardRef
-                              className="MuiAvatar-fallback"
-                            >
-                              <WithStyles(ForwardRef(SvgIcon))
-                                className="MuiAvatar-fallback"
-                              >
-                                <ForwardRef(SvgIcon)
-                                  className="MuiAvatar-fallback"
-                                  classes={
-                                    Object {
-                                      "colorAction": "MuiSvgIcon-colorAction",
-                                      "colorDisabled": "MuiSvgIcon-colorDisabled",
-                                      "colorError": "MuiSvgIcon-colorError",
-                                      "colorPrimary": "MuiSvgIcon-colorPrimary",
-                                      "colorSecondary": "MuiSvgIcon-colorSecondary",
-                                      "fontSizeInherit": "MuiSvgIcon-fontSizeInherit",
-                                      "fontSizeLarge": "MuiSvgIcon-fontSizeLarge",
-                                      "fontSizeSmall": "MuiSvgIcon-fontSizeSmall",
-                                      "root": "MuiSvgIcon-root",
-                                    }
-                                  }
-                                >
-                                  <svg
-                                    aria-hidden="true"
-                                    className="MuiSvgIcon-root MuiAvatar-fallback"
-                                    focusable="false"
-                                    role="presentation"
-                                    viewBox="0 0 24 24"
-                                  >
-                                    <path
-                                      d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                                    />
-                                  </svg>
-                                </ForwardRef(SvgIcon)>
-                              </WithStyles(ForwardRef(SvgIcon))>
-                            </ForwardRef>
-                          </div>
-                        </ForwardRef(Avatar)>
-                      </WithStyles(ForwardRef(Avatar))>
-                    </ForwardRef(Avatar)>
-                  </a>
-                  <ForwardRef(Popper)
-                    anchorEl={
-                      <a
-                        class=""
-                        href="mailto:m.goleb@gmail.com?subject=undefined@1.0.0"
-                        target="_top"
+                      <div
+                        aria-describedby={null}
+                        className="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+                        onBlur={[Function]}
+                        onFocus={[Function]}
+                        onMouseLeave={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        onTouchStart={[Function]}
                         title="mgol"
                       >
-                        <div
-                          aria-label="mgol"
-                          class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+                        <ForwardRef
+                          className="MuiAvatar-fallback"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root MuiAvatar-fallback"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
+                          <WithStyles(ForwardRef(SvgIcon))
+                            className="MuiAvatar-fallback"
                           >
-                            <path
-                              d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                            />
-                          </svg>
-                        </div>
-                      </a>
-                    }
-                    className="MuiTooltip-popper"
-                    id={null}
-                    open={false}
-                    placement="bottom"
-                    popperOptions={
-                      Object {
-                        "modifiers": Object {
-                          "arrow": Object {
-                            "element": null,
-                            "enabled": false,
-                          },
+                            <ForwardRef(SvgIcon)
+                              className="MuiAvatar-fallback"
+                              classes={
+                                Object {
+                                  "colorAction": "MuiSvgIcon-colorAction",
+                                  "colorDisabled": "MuiSvgIcon-colorDisabled",
+                                  "colorError": "MuiSvgIcon-colorError",
+                                  "colorPrimary": "MuiSvgIcon-colorPrimary",
+                                  "colorSecondary": "MuiSvgIcon-colorSecondary",
+                                  "fontSizeInherit": "MuiSvgIcon-fontSizeInherit",
+                                  "fontSizeLarge": "MuiSvgIcon-fontSizeLarge",
+                                  "fontSizeSmall": "MuiSvgIcon-fontSizeSmall",
+                                  "root": "MuiSvgIcon-root",
+                                }
+                              }
+                            >
+                              <svg
+                                aria-hidden="true"
+                                className="MuiSvgIcon-root MuiAvatar-fallback"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+                                />
+                              </svg>
+                            </ForwardRef(SvgIcon)>
+                          </WithStyles(ForwardRef(SvgIcon))>
+                        </ForwardRef>
+                      </div>
+                    </ForwardRef(Avatar)>
+                  </WithStyles(ForwardRef(Avatar))>
+                </ForwardRef(Avatar)>
+                <ForwardRef(Popper)
+                  anchorEl={
+                    <div
+                      class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+                      title="mgol"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiAvatar-fallback"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+                        />
+                      </svg>
+                    </div>
+                  }
+                  className="MuiTooltip-popper"
+                  id={null}
+                  open={false}
+                  placement="bottom"
+                  popperOptions={
+                    Object {
+                      "modifiers": Object {
+                        "arrow": Object {
+                          "element": null,
+                          "enabled": false,
                         },
-                      }
+                      },
                     }
-                    transition={true}
-                  />
-                </ForwardRef(Tooltip)>
-              </WithStyles(ForwardRef(Tooltip))>
-            </ForwardRef(ToolTip)>
-          </AvatarTooltip>
-        </span>
-      </Details>
-    </div>
-  </Content>
+                  }
+                  transition={true}
+                />
+              </ForwardRef(Tooltip)>
+            </WithStyles(ForwardRef(Tooltip))>
+          </ForwardRef(ToolTip)>
+        </div>
+      </Styled(MuiBox)>
+    </Box>
+  </StyledBox>
 </Developers>
 `;
 
diff --git a/src/components/Developers/get-unique-developer-values.ts b/src/components/Developers/get-unique-developer-values.ts
new file mode 100644
index 0000000..8c963bf
--- /dev/null
+++ b/src/components/Developers/get-unique-developer-values.ts
@@ -0,0 +1,12 @@
+import { Developer } from '../../../types/packageMeta';
+
+function getUniqueDeveloperValues(developers?: Array<Developer>): undefined | Array<Developer> {
+  if (!developers) return;
+  return developers.reduce(
+    (accumulator: Array<Developer>, current: Developer) =>
+      accumulator.some(developer => developer.email === current.email) ? accumulator : [...accumulator, current],
+    []
+  );
+}
+
+export default getUniqueDeveloperValues;
diff --git a/src/components/Developers/index.ts b/src/components/Developers/index.ts
index fb3ef86..27846f2 100644
--- a/src/components/Developers/index.ts
+++ b/src/components/Developers/index.ts
@@ -1 +1 @@
-export { default } from './Developers';
+export { default, DeveloperType } from './Developers';
diff --git a/types/packageMeta.ts b/types/packageMeta.ts
index 0030e8f..4d250c1 100644
--- a/types/packageMeta.ts
+++ b/types/packageMeta.ts
@@ -24,9 +24,16 @@ export interface PackageMetaInterface {
       type?: string;
       url?: string;
     };
+    maintainers?: Array<Developer>;
+    contributors?: Array<Developer>;
   };
   _uplinks: {};
 }
+export interface Developer {
+  name: string;
+  email: string;
+  avatar: string;
+}
 
 interface LicenseInterface {
   type: string;