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/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';