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/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)({
-  '&&': {
-    fontWeight: fontWeight.bold,
-    textTransform: 'capitalize',
-  },
+export const StyledText = styled(Text)({
+  fontWeight: fontWeight.bold,
+  textTransform: 'capitalize',
 });
 
 export const Tags = styled('div')({