fix: typography Component - Introduced ForwardRef (#179)

* refactor: introduced forwardref * refacttor: updated ref's * fix: fixed func's name * fix: fixed snapshots * fix: updated snap
verdaccio · Oct 12, 2019 · a8deeb9 · a8deeb9
1 parent 82d7107
commit a8deeb9
Show file tree

Hide file tree

Showing 34 changed files with 262 additions and 183 deletions.
diff --git a/src/components/Author/Author.tsx b/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

diff --git a/src/components/Author/__snapshots__/Author.test.tsx.snap b/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:[email protected][email protected]\\" 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:[email protected][email protected]\\" 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>"`;
diff --git a/src/components/Author/styles.ts b/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)({
-  '&&': {
-    fontWeight: fontWeight.bold,
-    textTransform: 'capitalize',
-  },
+export const StyledText = styled(Text)({
+  fontWeight: fontWeight.bold,
+  textTransform: 'capitalize',
 });
+
 export const AuthorListItem = styled(ListItem)({
   '&&': {
     padding: 0,

diff --git a/src/components/Dependencies/Dependencies.tsx b/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

diff --git a/src/components/Dependencies/styles.ts b/src/components/Dependencies/styles.ts
@@ -1,21 +1,19 @@
 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)({
   '&&': {
     margin: '0 0 16px',
   },
 });
 
-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')({

diff --git a/src/components/Developers/Developers.tsx b/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>

diff --git a/src/components/Developers/__snapshots__/Developers.test.tsx.snap b/src/components/Developers/__snapshots__/Developers.test.tsx.snap
@@ -4,68 +4,73 @@ exports[`test Developers should render the component for contributors with items
 <Developers
   type="contributors"
 >
-  <Styled(WithStyles(ForwardRef(Typography)))
+  <Styled(Component)
     variant="subtitle1"
   >
-    <WithStyles(ForwardRef(Typography))
-      className="css-18tsvng emotion-0"
+    <ForwardRef(Text)
+      className="css-48zeoi emotion-0"
       variant="subtitle1"
     >
-      <ForwardRef(Typography)
-        className="css-18tsvng emotion-0"
-        classes={
-          Object {
-            "alignCenter": "MuiTypography-alignCenter",
-            "alignJustify": "MuiTypography-alignJustify",
-            "alignLeft": "MuiTypography-alignLeft",
-            "alignRight": "MuiTypography-alignRight",
-            "body1": "MuiTypography-body1",
-            "body2": "MuiTypography-body2",
-            "button": "MuiTypography-button",
-            "caption": "MuiTypography-caption",
-            "colorError": "MuiTypography-colorError",
-            "colorInherit": "MuiTypography-colorInherit",
-            "colorPrimary": "MuiTypography-colorPrimary",
-            "colorSecondary": "MuiTypography-colorSecondary",
-            "colorTextPrimary": "MuiTypography-colorTextPrimary",
-            "colorTextSecondary": "MuiTypography-colorTextSecondary",
-            "displayBlock": "MuiTypography-displayBlock",
-            "displayInline": "MuiTypography-displayInline",
-            "gutterBottom": "MuiTypography-gutterBottom",
-            "h1": "MuiTypography-h1",
-            "h2": "MuiTypography-h2",
-            "h3": "MuiTypography-h3",
-            "h4": "MuiTypography-h4",
-            "h5": "MuiTypography-h5",
-            "h6": "MuiTypography-h6",
-            "noWrap": "MuiTypography-noWrap",
-            "overline": "MuiTypography-overline",
-            "paragraph": "MuiTypography-paragraph",
-            "root": "MuiTypography-root",
-            "srOnly": "MuiTypography-srOnly",
-            "subtitle1": "MuiTypography-subtitle1",
-            "subtitle2": "MuiTypography-subtitle2",
-          }
-        }
+      <WithStyles(ForwardRef(Typography))
+        className="css-48zeoi emotion-0"
         variant="subtitle1"
       >
-        <h6
-          className="MuiTypography-root css-18tsvng emotion-0 MuiTypography-subtitle1"
+        <ForwardRef(Typography)
+          className="css-48zeoi emotion-0"
+          classes={
+            Object {
+              "alignCenter": "MuiTypography-alignCenter",
+              "alignJustify": "MuiTypography-alignJustify",
+              "alignLeft": "MuiTypography-alignLeft",
+              "alignRight": "MuiTypography-alignRight",
+              "body1": "MuiTypography-body1",
+              "body2": "MuiTypography-body2",
+              "button": "MuiTypography-button",
+              "caption": "MuiTypography-caption",
+              "colorError": "MuiTypography-colorError",
+              "colorInherit": "MuiTypography-colorInherit",
+              "colorPrimary": "MuiTypography-colorPrimary",
+              "colorSecondary": "MuiTypography-colorSecondary",
+              "colorTextPrimary": "MuiTypography-colorTextPrimary",
+              "colorTextSecondary": "MuiTypography-colorTextSecondary",
+              "displayBlock": "MuiTypography-displayBlock",
+              "displayInline": "MuiTypography-displayInline",
+              "gutterBottom": "MuiTypography-gutterBottom",
+              "h1": "MuiTypography-h1",
+              "h2": "MuiTypography-h2",
+              "h3": "MuiTypography-h3",
+              "h4": "MuiTypography-h4",
+              "h5": "MuiTypography-h5",
+              "h6": "MuiTypography-h6",
+              "noWrap": "MuiTypography-noWrap",
+              "overline": "MuiTypography-overline",
+              "paragraph": "MuiTypography-paragraph",
+              "root": "MuiTypography-root",
+              "srOnly": "MuiTypography-srOnly",
+              "subtitle1": "MuiTypography-subtitle1",
+              "subtitle2": "MuiTypography-subtitle2",
+            }
+          }
+          variant="subtitle1"
         >
-          contributors
-        </h6>
-      </ForwardRef(Typography)>
-    </WithStyles(ForwardRef(Typography))>
-  </Styled(WithStyles(ForwardRef(Typography)))>
+          <h6
+            className="MuiTypography-root css-48zeoi emotion-0 MuiTypography-subtitle1"
+          >
+            contributors
+          </h6>
+        </ForwardRef(Typography)>
+      </WithStyles(ForwardRef(Typography))>
+    </ForwardRef(Text)>
+  </Styled(Component)>
   <Styled(div)>
     <div
-      className="css-mkcn9c emotion-5"
+      className="css-mkcn9c emotion-6"
     >
       <Styled(span)
         key="[email protected]"
       >
         <span
-          className="css-dvxtzn emotion-3"
+          className="css-dvxtzn emotion-4"
         >
           <AvatarTooltip
             email="[email protected]"
@@ -161,7 +166,7 @@ exports[`test Developers should render the component for contributors with items
         key="[email protected]"
       >
         <span
-          className="css-dvxtzn emotion-3"
+          className="css-dvxtzn emotion-4"
         >
           <AvatarTooltip
             email="[email protected]"
@@ -262,68 +267,73 @@ exports[`test Developers should render the component for maintainers with items
 <Developers
   type="maintainers"
 >
-  <Styled(WithStyles(ForwardRef(Typography)))
+  <Styled(Component)
     variant="subtitle1"
   >
-    <WithStyles(ForwardRef(Typography))
-      className="css-18tsvng emotion-0"
+    <ForwardRef(Text)
+      className="css-48zeoi emotion-0"
       variant="subtitle1"
     >
-      <ForwardRef(Typography)
-        className="css-18tsvng emotion-0"
-        classes={
-          Object {
-            "alignCenter": "MuiTypography-alignCenter",
-            "alignJustify": "MuiTypography-alignJustify",
-            "alignLeft": "MuiTypography-alignLeft",
-            "alignRight": "MuiTypography-alignRight",
-            "body1": "MuiTypography-body1",
-            "body2": "MuiTypography-body2",
-            "button": "MuiTypography-button",
-            "caption": "MuiTypography-caption",
-            "colorError": "MuiTypography-colorError",
-            "colorInherit": "MuiTypography-colorInherit",
-            "colorPrimary": "MuiTypography-colorPrimary",
-            "colorSecondary": "MuiTypography-colorSecondary",
-            "colorTextPrimary": "MuiTypography-colorTextPrimary",
-            "colorTextSecondary": "MuiTypography-colorTextSecondary",
-            "displayBlock": "MuiTypography-displayBlock",
-            "displayInline": "MuiTypography-displayInline",
-            "gutterBottom": "MuiTypography-gutterBottom",
-            "h1": "MuiTypography-h1",
-            "h2": "MuiTypography-h2",
-            "h3": "MuiTypography-h3",
-            "h4": "MuiTypography-h4",
-            "h5": "MuiTypography-h5",
-            "h6": "MuiTypography-h6",
-            "noWrap": "MuiTypography-noWrap",
-            "overline": "MuiTypography-overline",
-            "paragraph": "MuiTypography-paragraph",
-            "root": "MuiTypography-root",
-            "srOnly": "MuiTypography-srOnly",
-            "subtitle1": "MuiTypography-subtitle1",
-            "subtitle2": "MuiTypography-subtitle2",
-          }
-        }
+      <WithStyles(ForwardRef(Typography))
+        className="css-48zeoi emotion-0"
         variant="subtitle1"
       >
-        <h6
-          className="MuiTypography-root css-18tsvng emotion-0 MuiTypography-subtitle1"
+        <ForwardRef(Typography)
+          className="css-48zeoi emotion-0"
+          classes={
+            Object {
+              "alignCenter": "MuiTypography-alignCenter",
+              "alignJustify": "MuiTypography-alignJustify",
+              "alignLeft": "MuiTypography-alignLeft",
+              "alignRight": "MuiTypography-alignRight",
+              "body1": "MuiTypography-body1",
+              "body2": "MuiTypography-body2",
+              "button": "MuiTypography-button",
+              "caption": "MuiTypography-caption",
+              "colorError": "MuiTypography-colorError",
+              "colorInherit": "MuiTypography-colorInherit",
+              "colorPrimary": "MuiTypography-colorPrimary",
+              "colorSecondary": "MuiTypography-colorSecondary",
+              "colorTextPrimary": "MuiTypography-colorTextPrimary",
+              "colorTextSecondary": "MuiTypography-colorTextSecondary",
+              "displayBlock": "MuiTypography-displayBlock",
+              "displayInline": "MuiTypography-displayInline",
+              "gutterBottom": "MuiTypography-gutterBottom",
+              "h1": "MuiTypography-h1",
+              "h2": "MuiTypography-h2",
+              "h3": "MuiTypography-h3",
+              "h4": "MuiTypography-h4",
+              "h5": "MuiTypography-h5",
+              "h6": "MuiTypography-h6",
+              "noWrap": "MuiTypography-noWrap",
+              "overline": "MuiTypography-overline",
+              "paragraph": "MuiTypography-paragraph",
+              "root": "MuiTypography-root",
+              "srOnly": "MuiTypography-srOnly",
+              "subtitle1": "MuiTypography-subtitle1",
+              "subtitle2": "MuiTypography-subtitle2",
+            }
+          }
+          variant="subtitle1"
         >
-          maintainers
-        </h6>
-      </ForwardRef(Typography)>
-    </WithStyles(ForwardRef(Typography))>
-  </Styled(WithStyles(ForwardRef(Typography)))>
+          <h6
+            className="MuiTypography-root css-48zeoi emotion-0 MuiTypography-subtitle1"
+          >
+            maintainers
+          </h6>
+        </ForwardRef(Typography)>
+      </WithStyles(ForwardRef(Typography))>
+    </ForwardRef(Text)>
+  </Styled(Component)>
   <Styled(div)>
     <div
-      className="css-mkcn9c emotion-5"
+      className="css-mkcn9c emotion-6"
     >
       <Styled(span)
         key="[email protected]"
       >
         <span
-          className="css-dvxtzn emotion-3"
+          className="css-dvxtzn emotion-4"
         >
           <AvatarTooltip
             email="[email protected]"
@@ -419,7 +429,7 @@ exports[`test Developers should render the component for maintainers with items
         key="[email protected]"
       >
         <span
-          className="css-dvxtzn emotion-3"
+          className="css-dvxtzn emotion-4"
         >
           <AvatarTooltip
             email="[email protected]"

diff --git a/src/components/Developers/styles.ts b/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)({
-  '&&': {
-    fontWeight: fontWeight.bold,
-    marginBottom: '10px',
-    textTransform: 'capitalize',
-  },
+export const StyledText = styled(Text)({
+  fontWeight: fontWeight.bold,
+  marginBottom: '10px',
+  textTransform: 'capitalize',
 });
 
 export const Fab = styled(MuiFab)({