fix: typography Component - Introduced ForwardRef (#179)

* refactor: introduced forwardref

* refacttor: updated ref's

* fix: fixed func's name

* fix: fixed snapshots

* fix: updated snap

src/components/Author/Author.tsx

@@ -5,7 +5,7 @@ import { DetailContext } from '../../pages/Version';
 import { isEmail } from '../../utils/url';
 import Avatar from '../../muiComponents/Avatar';
 
-import { Heading, AuthorListItem, AuthorListItemText } from './styles';
+import { StyledText, AuthorListItem, AuthorListItemText } from './styles';
 
 const Author: FC = () => {
   const { packageMeta } = useContext(DetailContext);
@@ -25,7 +25,7 @@ const Author: FC = () => {
   const avatarComponent = <Avatar alt={author.name} src={author.avatar} />;
 
   return (
-    <List subheader={<Heading variant={'subtitle1'}>{'Author'}</Heading>}>
+    <List subheader={<StyledText variant={'subtitle1'}>{'Author'}</StyledText>}>
       <AuthorListItem button={true}>
         {!email || !isEmail(email) ? (
           avatarComponent

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

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Author /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-hyrz44 e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-xugzlj e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"mailto:verdaccio.user@verdaccio.org?subject=verdaccio@4.0.0\\" target=\\"_top\\"><div class=\\"MuiAvatar-root\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div></a><div class=\\"MuiListItemText-root css-1vhg3jx e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Author /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-xugzlj e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"mailto:verdaccio.user@verdaccio.org?subject=verdaccio@4.0.0\\" target=\\"_top\\"><div class=\\"MuiAvatar-root\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div></a><div class=\\"MuiListItemText-root css-1vhg3jx e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
 
-exports[`<Author /> component should render the component when there is no author email 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-hyrz44 e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-xugzlj e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div><div class=\\"MuiListItemText-root css-1vhg3jx e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Author /> component should render the component when there is no author email 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-xugzlj e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div><div class=\\"MuiListItemText-root css-1vhg3jx e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

src/components/Author/styles.ts

@@ -1,16 +1,15 @@
 import styled from 'react-emotion';
-import Typography from '@material-ui/core/Typography';
 import ListItemText from '@material-ui/core/ListItemText';
 
 import { fontWeight } from '../../utils/styles/sizes';
 import ListItem from '../../muiComponents/ListItem';
+import Text from '../../muiComponents/Text';
 
-export const Heading = styled(Typography)({
+export const StyledText = styled(Text)({
-  '&&': {
   fontWeight: fontWeight.bold,
   textTransform: 'capitalize',
-  },
 });
+
 export const AuthorListItem = styled(ListItem)({
   '&&': {
     padding: 0,

src/components/Dependencies/Dependencies.tsx

@@ -6,7 +6,7 @@ import { PackageDependencies } from '../../../types/packageMeta';
 import { DetailContext } from '../../pages/Version';
 import NoItems from '../NoItems';
 
-import { CardWrap, Heading, Tags, Tag } from './styles';
+import { CardWrap, StyledText, Tags, Tag } from './styles';
 
 interface DependencyBlockProps {
   title: string;
@@ -28,7 +28,7 @@ const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }
   return (
     <CardWrap>
       <CardContent>
-        <Heading variant="subtitle1">{`${title} (${deps.length})`}</Heading>
+        <StyledText variant="subtitle1">{`${title} (${deps.length})`}</StyledText>
         <Tags>
           {deps.map(([name, version]) => (
             // eslint-disable-next-line

src/components/Dependencies/styles.ts

@@ -1,9 +1,9 @@
 import styled from 'react-emotion';
 import Card from '@material-ui/core/Card';
-import Typography from '@material-ui/core/Typography';
 import Chip from '@material-ui/core/Chip';
 
 import { fontWeight } from '../../utils/styles/sizes';
+import Text from '../../muiComponents/Text';
 
 export const CardWrap = styled(Card)({
   '&&': {
@@ -11,11 +11,9 @@ export const CardWrap = styled(Card)({
   },
 });
 
-export const Heading = styled(Typography)({
+export const StyledText = styled(Text)({
-  '&&': {
   fontWeight: fontWeight.bold,
   textTransform: 'capitalize',
-  },
 });
 
 export const Tags = styled('div')({

src/components/Developers/Developers.tsx

@@ -4,7 +4,7 @@ import Add from '@material-ui/icons/Add';
 import { DetailContext } from '../../pages/Version';
 import { AvatarTooltip } from '../AvatarTooltip';
 
-import { Details, Heading, Content, Fab } from './styles';
+import { Details, StyledText, Content, Fab } from './styles';
 
 export type DevelopersType = 'contributors' | 'maintainers';
 
@@ -34,7 +34,7 @@ const Developers: FC<Props> = ({ type, visibleMax }) => {
 
     return (
       <Fragment>
-        <Heading variant={'subtitle1'}>{type}</Heading>
+        <StyledText variant={'subtitle1'}>{type}</StyledText>
         <Content>
           {listVisibleDevelopers.map(developer => (
             <Details key={developer.email}>{renderDeveloperDetails(developer, packageMeta)}</Details>

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

@@ -4,15 +4,19 @@ exports[`test Developers should render the component for contributors with items
 <Developers
   type="contributors"
 >
-  <Styled(WithStyles(ForwardRef(Typography)))
+  <Styled(Component)
+    variant="subtitle1"
+  >
+    <ForwardRef(Text)
+      className="css-48zeoi emotion-0"
       variant="subtitle1"
     >
       <WithStyles(ForwardRef(Typography))
-      className="css-18tsvng emotion-0"
+        className="css-48zeoi emotion-0"
         variant="subtitle1"
       >
         <ForwardRef(Typography)
-        className="css-18tsvng emotion-0"
+          className="css-48zeoi emotion-0"
           classes={
             Object {
               "alignCenter": "MuiTypography-alignCenter",
@@ -50,22 +54,23 @@ exports[`test Developers should render the component for contributors with items
           variant="subtitle1"
         >
           <h6
-          className="MuiTypography-root css-18tsvng emotion-0 MuiTypography-subtitle1"
+            className="MuiTypography-root css-48zeoi emotion-0 MuiTypography-subtitle1"
           >
             contributors
           </h6>
         </ForwardRef(Typography)>
       </WithStyles(ForwardRef(Typography))>
-  </Styled(WithStyles(ForwardRef(Typography)))>
+    </ForwardRef(Text)>
+  </Styled(Component)>
   <Styled(div)>
     <div
-      className="css-mkcn9c emotion-5"
+      className="css-mkcn9c emotion-6"
     >
       <Styled(span)
         key="dave.methvin@gmail.com"
       >
         <span
-          className="css-dvxtzn emotion-3"
+          className="css-dvxtzn emotion-4"
         >
           <AvatarTooltip
             email="dave.methvin@gmail.com"
@@ -161,7 +166,7 @@ exports[`test Developers should render the component for contributors with items
         key="m.goleb@gmail.com"
       >
         <span
-          className="css-dvxtzn emotion-3"
+          className="css-dvxtzn emotion-4"
         >
           <AvatarTooltip
             email="m.goleb@gmail.com"
@@ -262,15 +267,19 @@ exports[`test Developers should render the component for maintainers with items
 <Developers
   type="maintainers"
 >
-  <Styled(WithStyles(ForwardRef(Typography)))
+  <Styled(Component)
+    variant="subtitle1"
+  >
+    <ForwardRef(Text)
+      className="css-48zeoi emotion-0"
       variant="subtitle1"
     >
       <WithStyles(ForwardRef(Typography))
-      className="css-18tsvng emotion-0"
+        className="css-48zeoi emotion-0"
         variant="subtitle1"
       >
         <ForwardRef(Typography)
-        className="css-18tsvng emotion-0"
+          className="css-48zeoi emotion-0"
           classes={
             Object {
               "alignCenter": "MuiTypography-alignCenter",
@@ -308,22 +317,23 @@ exports[`test Developers should render the component for maintainers with items
           variant="subtitle1"
         >
           <h6
-          className="MuiTypography-root css-18tsvng emotion-0 MuiTypography-subtitle1"
+            className="MuiTypography-root css-48zeoi emotion-0 MuiTypography-subtitle1"
           >
             maintainers
           </h6>
         </ForwardRef(Typography)>
       </WithStyles(ForwardRef(Typography))>
-  </Styled(WithStyles(ForwardRef(Typography)))>
+    </ForwardRef(Text)>
+  </Styled(Component)>
   <Styled(div)>
     <div
-      className="css-mkcn9c emotion-5"
+      className="css-mkcn9c emotion-6"
     >
       <Styled(span)
         key="dave.methvin@gmail.com"
       >
         <span
-          className="css-dvxtzn emotion-3"
+          className="css-dvxtzn emotion-4"
         >
           <AvatarTooltip
             email="dave.methvin@gmail.com"
@@ -419,7 +429,7 @@ exports[`test Developers should render the component for maintainers with items
         key="m.goleb@gmail.com"
       >
         <span
-          className="css-dvxtzn emotion-3"
+          className="css-dvxtzn emotion-4"
         >
           <AvatarTooltip
             email="m.goleb@gmail.com"

src/components/Developers/styles.ts

@@ -1,9 +1,9 @@
 import styled from 'react-emotion';
-import Typography from '@material-ui/core/Typography';
 import { default as MuiFab } from '@material-ui/core/Fab';
 
 import colors from '../../utils/styles/colors';
 import { fontWeight } from '../../utils/styles/sizes';
+import Text from '../../muiComponents/Text';
 
 export const Details = styled('span')({
   display: 'flex',
@@ -20,12 +20,10 @@ export const Content = styled('div')({
   },
 });
 
-export const Heading = styled(Typography)({
+export const StyledText = styled(Text)({
-  '&&': {
   fontWeight: fontWeight.bold,
   marginBottom: '10px',
   textTransform: 'capitalize',
-  },
 });
 
 export const Fab = styled(MuiFab)({

src/components/Dist/Dist.tsx

@@ -5,7 +5,7 @@ import { DetailContext } from '../../pages/Version';
 import fileSizeSI from '../../utils/file-size';
 import { formatLicense } from '../../utils/package';
 
-import { Heading, DistListItem, DistChips } from './styles';
+import { StyledText, DistListItem, DistChips } from './styles';
 
 const DistChip: FC<{ name: string }> = ({ name, children }) =>
   children ? (
@@ -33,7 +33,7 @@ const Dist: FC = () => {
   const { dist, license } = packageMeta && packageMeta.latest;
 
   return (
-    <List subheader={<Heading variant="subtitle1">{'Latest Distribution'}</Heading>}>
+    <List subheader={<StyledText variant="subtitle1">{'Latest Distribution'}</StyledText>}>
       <DistListItem button={true}>
         <DistChip name="file count">{dist.fileCount}</DistChip>
         <DistChip name="size">{dist.unpackedSize && fileSizeSI(dist.unpackedSize)}</DistChip>

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Dist /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-hyrz44 estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-z8a2h0 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Dist /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-z8a2h0 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
 
-exports[`<Dist /> component should render the component with license as object 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-hyrz44 estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-z8a2h0 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Dist /> component should render the component with license as object 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-z8a2h0 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
 
-exports[`<Dist /> component should render the component with license as string 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-hyrz44 estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-z8a2h0 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Dist /> component should render the component with license as string 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-z8a2h0 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

src/components/Dist/styles.ts

@@ -1,17 +1,15 @@
 import styled from 'react-emotion';
 import { default as MuiFab } from '@material-ui/core/Fab';
 import Chip from '@material-ui/core/Chip';
-import Typography from '@material-ui/core/Typography';
 
 import colors from '../../utils/styles/colors';
 import { fontWeight } from '../../utils/styles/sizes';
 import ListItem from '../../muiComponents/ListItem';
+import Text from '../../muiComponents/Text';
 
-export const Heading = styled(Typography)({
+export const StyledText = styled(Text)({
-  '&&': {
   fontWeight: fontWeight.bold,
   textTransform: 'capitalize',
-  },
 });
 
 export const DistListItem = styled(ListItem)({

src/components/Engines/Engines.tsx

@@ -7,7 +7,7 @@ import { VersionPageConsumerProps, DetailContextConsumer } from '../../pages/Ver
 import Avatar from '../../muiComponents/Avatar';
 import npm from '../Install/img/npm.svg';
 
-import { Heading, EngineListItem } from './styles';
+import { StyledText, EngineListItem } from './styles';
 // @ts-ignore
 import node from './img/node.png';
 
@@ -60,7 +60,7 @@ class Engine extends Component {
 
   private renderListItems = (heading: string, text: string) => {
     return (
-      <List subheader={<Heading variant={'subtitle1'}>{text.split('-').join(' ')}</Heading>}>
+      <List subheader={<StyledText variant={'subtitle1'}>{text.split('-').join(' ')}</StyledText>}>
         <EngineListItem button={true}>
           {ICONS[text]}
           <ListItemText primary={heading} />

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

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Engines /> component should render the component in default state 1`] = `"<div class=\\"MuiGrid-root MuiGrid-container\\"><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-hyrz44 et66bt70 MuiTypography-subtitle1\\">node JS</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-131yq1t et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-colorDefault\\"></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;= 0.1.98</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-hyrz44 et66bt70 MuiTypography-subtitle1\\">NPM version</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-131yq1t et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-colorDefault\\"></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;3</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div></div>"`;
+exports[`<Engines /> component should render the component in default state 1`] = `"<div class=\\"MuiGrid-root MuiGrid-container\\"><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko et66bt70 MuiTypography-subtitle1\\">node JS</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-131yq1t et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-colorDefault\\"></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;= 0.1.98</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko et66bt70 MuiTypography-subtitle1\\">NPM version</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-131yq1t et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-colorDefault\\"></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;3</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div></div>"`;

src/components/Engines/styles.ts

@@ -1,14 +1,12 @@
 import styled from 'react-emotion';
-import Typography from '@material-ui/core/Typography';
 
 import { fontWeight } from '../../utils/styles/sizes';
 import ListItem from '../../muiComponents/ListItem';
+import Text from '../../muiComponents/Text';
 
-export const Heading = styled(Typography)({
+export const StyledText = styled(Text)({
-  '&&': {
   fontWeight: fontWeight.bold,
   textTransform: 'capitalize',
-  },
 });
 
 export const EngineListItem = styled(ListItem)({

src/components/Help/Help.tsx

@@ -1,18 +1,19 @@
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
-import Typography from '@material-ui/core/Typography';
 import React, { Fragment } from 'react';
 
 import { getRegistryURL } from '../../utils/url';
 import CopyToClipBoard from '../CopyToClipBoard';
 import Button from '../../muiComponents/Button';
+import { default as Typography } from '../../muiComponents/Heading';
+import Text from '../../muiComponents/Text';
 
 import { CardStyled as Card, HelpTitle } from './styles';
 
 function renderHeadingClipboardSegments(title: string, text: string): React.ReactNode {
   return (
     <Fragment>
-      <Typography variant={'body1'}>{title}</Typography>
+      <Text variant={'body1'}>{title}</Text>
       <CopyToClipBoard text={text} />
     </Fragment>
   );
@@ -32,7 +33,7 @@ const Help: React.FC = () => {
         </HelpTitle>
         {renderHeadingClipboardSegments('1. Login', `npm adduser --registry ${registryUrl}`)}
         {renderHeadingClipboardSegments('2. Publish', `npm publish --registry ${registryUrl}`)}
-        <Typography variant="body2">{'3. Refresh this page.'}</Typography>
+        <Text variant="body2">{'3. Refresh this page.'}</Text>
       </CardContent>
       <CardActions>
         <Button color="primary" href="https://verdaccio.org/docs/en/installation" size="small">

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

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Help /> component should render the component in default state 1`] = `"<div class=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root css-ryznli e1wgaou60 MuiPaper-rounded\\" id=\\"help-card\\"><div class=\\"MuiCardContent-root\\"><h2 class=\\"MuiTypography-root MuiTypography-h5 MuiTypography-gutterBottom\\" id=\\"help-card__title\\">No Package Published Yet.</h2><p class=\\"MuiTypography-root css-zg2fwz e1wgaou61 MuiTypography-body1 MuiTypography-colorTextSecondary MuiTypography-gutterBottom\\">To publish your first package just:</p><p class=\\"MuiTypography-root MuiTypography-body1\\">1. Login</p><div class=\\"css-1mta3t8 eb8w2fo0\\"><span class=\\"css-1m8aenu eb8w2fo1\\">npm adduser --registry http://localhost</span><button class=\\"MuiButtonBase-root MuiIconButton-root css-0 eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></div><p class=\\"MuiTypography-root MuiTypography-body1\\">2. Publish</p><div class=\\"css-1mta3t8 eb8w2fo0\\"><span class=\\"css-1m8aenu eb8w2fo1\\">npm publish --registry http://localhost</span><button class=\\"MuiButtonBase-root MuiIconButton-root css-0 eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></div><p class=\\"MuiTypography-root MuiTypography-body2\\">3. Refresh this page.</p></div><div class=\\"MuiCardActions-root MuiCardActions-spacing\\"><a class=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall\\" tabindex=\\"0\\" aria-disabled=\\"false\\" href=\\"https://verdaccio.org/docs/en/installation\\"><span class=\\"MuiButton-label\\">Learn More</span><span class=\\"MuiTouchRipple-root\\"></span></a></div></div>"`;
+exports[`<Help /> component should render the component in default state 1`] = `"<div class=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root css-ryznli e1wgaou60 MuiPaper-rounded\\" id=\\"help-card\\"><div class=\\"MuiCardContent-root\\"><h2 class=\\"MuiTypography-root MuiTypography-h5 MuiTypography-gutterBottom\\" id=\\"help-card__title\\">No Package Published Yet.</h2><h6 class=\\"MuiTypography-root css-zg2fwz e1wgaou61 MuiTypography-h6 MuiTypography-colorTextSecondary MuiTypography-gutterBottom\\">To publish your first package just:</h6><p class=\\"MuiTypography-root MuiTypography-body1\\">1. Login</p><div class=\\"css-1mta3t8 eb8w2fo0\\"><span class=\\"css-1m8aenu eb8w2fo1\\">npm adduser --registry http://localhost</span><button class=\\"MuiButtonBase-root MuiIconButton-root css-0 eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></div><p class=\\"MuiTypography-root MuiTypography-body1\\">2. Publish</p><div class=\\"css-1mta3t8 eb8w2fo0\\"><span class=\\"css-1m8aenu eb8w2fo1\\">npm publish --registry http://localhost</span><button class=\\"MuiButtonBase-root MuiIconButton-root css-0 eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></div><p class=\\"MuiTypography-root MuiTypography-body2\\">3. Refresh this page.</p></div><div class=\\"MuiCardActions-root MuiCardActions-spacing\\"><a class=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall\\" tabindex=\\"0\\" aria-disabled=\\"false\\" href=\\"https://verdaccio.org/docs/en/installation\\"><span class=\\"MuiButton-label\\">Learn More</span><span class=\\"MuiTouchRipple-root\\"></span></a></div></div>"`;

src/components/Help/styles.ts

@@ -1,7 +1,8 @@
 import Card from '@material-ui/core/Card';
-import Typography from '@material-ui/core/Typography';
 import styled from 'react-emotion';
 
+import { default as Typography } from '../../muiComponents/Heading';
+
 export const CardStyled = styled(Card)({
   '&&': {
     width: '600px',

src/components/Install/Install.tsx

@@ -1,14 +1,14 @@
 import React, { useContext } from 'react';
 import styled from 'react-emotion';
-import Typography from '@material-ui/core/Typography';
 import List from '@material-ui/core/List';
 
 import { DetailContext } from '../../pages/Version';
 import { fontWeight } from '../../utils/styles/sizes';
+import Text from '../../muiComponents/Text';
 
 import InstallListItem, { DependencyManager } from './InstallListItem';
 
-const Heading = styled(Typography)({
+const StyledText = styled(Text)({
   fontWeight: fontWeight.bold,
   textTransform: 'capitalize',
 });
@@ -23,7 +23,7 @@ const Install: React.FC = () => {
   }
 
   return (
-    <List data-testid={'installList'} subheader={<Heading variant={'subtitle1'}>{'Installation'}</Heading>}>
+    <List data-testid={'installList'} subheader={<StyledText variant={'subtitle1'}>{'Installation'}</StyledText>}>
       <InstallListItem dependencyManager={DependencyManager.NPM} packageName={packageName} />
       <InstallListItem dependencyManager={DependencyManager.YARN} packageName={packageName} />
       <InstallListItem dependencyManager={DependencyManager.PNPM} packageName={packageName} />

src/components/NoItems/NoItems.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import Typography from '@material-ui/core/Typography';
+
+import Text from '../../muiComponents/Text';
 
 interface Props {
   text: string;
@@ -7,9 +8,9 @@ interface Props {
 }
 
 const NoItems: React.FC<Props> = ({ className, text }) => (
-  <Typography className={className} gutterBottom={true} variant="subtitle1">
+  <Text className={className} gutterBottom={true} variant="subtitle1">
     {text}
-  </Typography>
+  </Text>
 );
 
 export default NoItems;

src/components/NotFound/styles.ts

@@ -0,0 +1,40 @@
+import { default as MuiCard } from '@material-ui/core/Card';
+import { default as MuiList } from '@material-ui/core/List';
+import styled from 'react-emotion';
+
+import { default as Typography } from '../../muiComponents/Heading';
+
+export const Wrapper = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  flex: 1,
+  padding: '16px',
+});
+
+export const Inner = styled('div')({
+  maxWidth: '650px',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const EmptyPackage = styled('img')({
+  width: '150px',
+  margin: '0 auto',
+});
+
+export const Heading = styled(Typography)({
+  color: '#4b5e40',
+});
+
+export const List = styled(MuiList)({
+  '&&': {
+    padding: 0,
+    color: '#4b5e40',
+  },
+});
+
+export const Card = styled(MuiCard)({
+  marginTop: '24px',
+});

src/components/Package/styles.ts

@@ -3,7 +3,6 @@ import { Link } from 'react-router-dom';
 import Grid from '@material-ui/core/Grid';
 import List from '@material-ui/core/List';
 import ListItemText from '@material-ui/core/ListItemText';
-import Typography from '@material-ui/core/Typography';
 
 import { breakpoints } from '../../utils/styles/media';
 import Ico from '../Icon';
@@ -12,6 +11,7 @@ import colors from '../../utils/styles/colors';
 import { fontWeight } from '../../utils/styles/sizes';
 import { default as MuiIconButton } from '../../muiComponents/IconButton';
 import { default as Photo } from '../../muiComponents/Avatar';
+import { default as Typography } from '../../muiComponents/Heading';
 
 export const OverviewItem = styled('span')`
   && {

src/components/RegistryInfoContent/RegistryInfoContent.tsx

@@ -2,11 +2,11 @@ import React, { Component } from 'react';
 import { css } from 'emotion';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
-import Typography from '@material-ui/core/Typography';
 
 import CopyToClipBoard from '../CopyToClipBoard';
 import { getCLISetRegistry, getCLIChangePassword, getCLISetConfigRegistry } from '../../utils/cli-utils';
 import { NODE_MANAGER } from '../../utils/constants';
+import { default as Typography } from '../../muiComponents/Heading';
 
 import { CommandContainer } from './styles';
 import { Props, State } from './types';

src/components/Repository/Repository.tsx

@@ -9,7 +9,7 @@ import { isURL } from '../../utils/url';
 import CopyToClipBoard from '../CopyToClipBoard';
 
 import git from './img/git.png';
-import { GithubLink, Heading, RepositoryListItem, RepositoryListItemText } from './styles';
+import { GithubLink, StyledText, RepositoryListItem, RepositoryListItemText } from './styles';
 
 class Repository extends Component {
   public render(): ReactElement<HTMLElement> {
@@ -39,7 +39,7 @@ class Repository extends Component {
 
     return (
       <Fragment>
-        <List dense={true} subheader={<Heading variant="subtitle1">{'Repository'}</Heading>}>
+        <List dense={true} subheader={<StyledText variant="subtitle1">{'Repository'}</StyledText>}>
           <RepositoryListItem button={true}>
             <Avatar src={git} />
             <RepositoryListItemText primary={this.renderContent(url)} />

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

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Repository /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-dense MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-hyrz44 e1wmjxnh0 MuiTypography-subtitle1\\">Repository</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-xugzlj e1wmjxnh4 MuiListItem-dense MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-colorDefault\\"></div><div class=\\"MuiListItemText-root css-1vhg3jx e1wmjxnh5 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\"><div class=\\"css-1mta3t8 eb8w2fo0\\"><span class=\\"css-1m8aenu eb8w2fo1\\"><a href=\\"git+https://github.com/verdaccio/ui.git\\" target=\\"_blank\\" class=\\"css-15gl0ho e1wmjxnh2\\">git+https://github.com/verdaccio/ui.git</a></span><button class=\\"MuiButtonBase-root MuiIconButton-root css-0 eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></div></span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Repository /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-dense MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko e1wmjxnh0 MuiTypography-subtitle1\\">Repository</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-xugzlj e1wmjxnh4 MuiListItem-dense MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-colorDefault\\"></div><div class=\\"MuiListItemText-root css-1vhg3jx e1wmjxnh5 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\"><div class=\\"css-1mta3t8 eb8w2fo0\\"><span class=\\"css-1m8aenu eb8w2fo1\\"><a href=\\"git+https://github.com/verdaccio/ui.git\\" target=\\"_blank\\" class=\\"css-15gl0ho e1wmjxnh2\\">git+https://github.com/verdaccio/ui.git</a></span><button class=\\"MuiButtonBase-root MuiIconButton-root css-0 eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></div></span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

src/components/Repository/styles.ts

@@ -1,18 +1,16 @@
 import styled from 'react-emotion';
 import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
 import ListItemText from '@material-ui/core/ListItemText';
 
 import Github from '../../icons/GitHub';
 import colors from '../../utils/styles/colors';
 import { fontWeight } from '../../utils/styles/sizes';
+import Text from '../../muiComponents/Text';
 import ListItem from '../../muiComponents/ListItem';
 
-export const Heading = styled(Typography)({
+export const StyledText = styled(Text)({
-  '&&': {
   fontWeight: fontWeight.bold,
   textTransform: 'capitalize',
-  },
 });
 
 export const GridRepo = styled(Grid)({

src/components/UpLinks/UpLinks.tsx

@@ -6,7 +6,7 @@ import NoItems from '../NoItems';
 import { formatDateDistance } from '../../utils/package';
 import ListItem from '../../muiComponents/ListItem';
 
-import { Heading, Spacer, ListItemText } from './styles';
+import { StyledText, Spacer, ListItemText } from './styles';
 
 const UpLinks: React.FC = () => {
   const { packageMeta } = useContext(DetailContext);
@@ -23,7 +23,7 @@ const UpLinks: React.FC = () => {
 
   return (
     <>
-      <Heading variant="subtitle1">{'Uplinks'}</Heading>
+      <StyledText variant="subtitle1">{'Uplinks'}</StyledText>
       <List>
         {Object.keys(uplinks)
           .reverse()

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

@@ -2,4 +2,4 @@
 
 exports[`<UpLinks /> component should render the component in default state 1`] = `null`;
 
-exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-1ikpjfo e14i1sy10 MuiTypography-subtitle1\\">Uplinks</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-5tz9yo e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-1l1cv61 e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">over 1 year ago</span></div></li></ul>"`;
+exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-1vg6q84 e14i1sy10 MuiTypography-subtitle1\\">Uplinks</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-5tz9yo e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-1l1cv61 e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">over 1 year ago</span></div></li></ul>"`;

src/components/UpLinks/styles.ts

@@ -1,13 +1,11 @@
 import styled from 'react-emotion';
-import Typography from '@material-ui/core/Typography';
 import { default as MuiListItemText } from '@material-ui/core/ListItemText';
 
+import Text from '../../muiComponents/Text';
 import { fontWeight } from '../../utils/styles/sizes';
 
-export const Heading = styled(Typography)({
+export const StyledText = styled(Text)({
-  '&&': {
   fontWeight: fontWeight.bold,
-  },
 });
 
 export const Spacer = styled('div')({

src/components/Versions/Versions.tsx

@@ -3,7 +3,7 @@ import React, { useContext } from 'react';
 import { DetailContext } from '../../pages/Version';
 import { DIST_TAGS } from '../../../lib/constants';
 
-import { Heading } from './styles';
+import { StyledText } from './styles';
 import VersionsTagList from './VersionsTagList';
 import VersionsHistoryList from './VersionsHistoryList';
 
@@ -26,13 +26,13 @@ const Versions: React.FC = () => {
     <>
       {distTags && Object.keys(distTags).length > 0 && (
         <>
-          <Heading variant="subtitle1">{LABEL_CURRENT_TAGS}</Heading>
+          <StyledText variant="subtitle1">{LABEL_CURRENT_TAGS}</StyledText>
           <VersionsTagList tags={distTags} />
         </>
       )}
       {versions && Object.keys(versions).length > 0 && packageName && (
         <>
-          <Heading variant="subtitle1">{LABEL_VERSION_HISTORY}</Heading>
+          <StyledText variant="subtitle1">{LABEL_VERSION_HISTORY}</StyledText>
           <VersionsHistoryList packageName={packageName} time={time} versions={versions} />
         </>
       )}

src/components/Versions/styles.ts

@@ -1,13 +1,11 @@
 import styled from 'react-emotion';
-import Typography from '@material-ui/core/Typography';
 import { default as MuiListItemText } from '@material-ui/core/ListItemText';
 
 import { fontWeight } from '../../utils/styles/sizes';
+import Text from '../../muiComponents/Text';
 
-export const Heading = styled(Typography)({
+export const StyledText = styled(Text)({
-  '&&': {
   fontWeight: fontWeight.bold,
-  },
 });
 
 export const Spacer = styled('div')({

src/muiComponents/Heading/Heading.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUITypography, TypographyProps } from '@material-ui/core/Typography';
+
+type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type HeadingRef = HeadingType;
+
+interface Props extends Omit<TypographyProps, 'variant'> {
+  variant?: HeadingType;
+}
+
+const Heading = forwardRef<HeadingRef, Props>(function Heading(props, ref) {
+  return <MaterialUITypography {...props} ref={ref} />;
+});
+
+Heading.defaultProps = {
+  variant: 'h6',
+};
+
+export default Heading;

src/muiComponents/Heading/index.ts

@@ -0,0 +1 @@
+export { default } from './Heading';

src/muiComponents/Text/Text.tsx

@@ -0,0 +1,20 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUITypography, TypographyProps } from '@material-ui/core/Typography';
+
+type TextType = 'subtitle1' | 'subtitle2' | 'body1' | 'body2';
+type TextRef = keyof HTMLElementTagNameMap;
+
+interface Props extends Omit<TypographyProps, 'variant'> {
+  variant?: TextType;
+}
+
+// The reference is already from type of the Component, so the any below is not a problem
+const Text = forwardRef<TextRef, Props>(function Text(props, ref) {
+  return <MaterialUITypography {...props} ref={ref} />;
+});
+
+Text.defaultProps = {
+  variant: 'subtitle1',
+};
+
+export default Text;

src/muiComponents/Text/index.ts

@@ -0,0 +1 @@
+export { default } from './Text';