Skip to content
This repository was archived by the owner on Jan 16, 2022. It is now read-only.

Commit a8deeb9

Browse files
priscilawebdevjuanpicado
priscilawebdev
authored and
juanpicado
committed
fix: typography Component - Introduced ForwardRef (#179)
* refactor: introduced forwardref * refacttor: updated ref's * fix: fixed func's name * fix: fixed snapshots * fix: updated snap
1 parent 82d7107 commit a8deeb9

File tree

34 files changed

+262
-183
lines changed

34 files changed

+262
-183
lines changed

‎src/components/Author/Author.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { DetailContext } from '../../pages/Version';
55
import { isEmail } from '../../utils/url';
66
import Avatar from '../../muiComponents/Avatar';
77

8-
import { Heading, AuthorListItem, AuthorListItemText } from './styles';
8+
import { StyledText, AuthorListItem, AuthorListItemText } from './styles';
99

1010
const Author: FC = () => {
1111
const { packageMeta } = useContext(DetailContext);
@@ -25,7 +25,7 @@ const Author: FC = () => {
2525
const avatarComponent = <Avatar alt={author.name} src={author.avatar} />;
2626

2727
return (
28-
<List subheader={<Heading variant={'subtitle1'}>{'Author'}</Heading>}>
28+
<List subheader={<StyledText variant={'subtitle1'}>{'Author'}</StyledText>}>
2929
<AuthorListItem button={true}>
3030
{!email || !isEmail(email) ? (
3131
avatarComponent

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
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>"`;
3+
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>"`;
44
5-
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>"`;
5+
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‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import styled from 'react-emotion';
2-
import Typography from '@material-ui/core/Typography';
32
import ListItemText from '@material-ui/core/ListItemText';
43

54
import { fontWeight } from '../../utils/styles/sizes';
65
import ListItem from '../../muiComponents/ListItem';
6+
import Text from '../../muiComponents/Text';
77

8-
export const Heading = styled(Typography)({
9-
'&&': {
10-
fontWeight: fontWeight.bold,
11-
textTransform: 'capitalize',
12-
},
8+
export const StyledText = styled(Text)({
9+
fontWeight: fontWeight.bold,
10+
textTransform: 'capitalize',
1311
});
12+
1413
export const AuthorListItem = styled(ListItem)({
1514
'&&': {
1615
padding: 0,

‎src/components/Dependencies/Dependencies.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { PackageDependencies } from '../../../types/packageMeta';
66
import { DetailContext } from '../../pages/Version';
77
import NoItems from '../NoItems';
88

9-
import { CardWrap, Heading, Tags, Tag } from './styles';
9+
import { CardWrap, StyledText, Tags, Tag } from './styles';
1010

1111
interface DependencyBlockProps {
1212
title: string;
@@ -28,7 +28,7 @@ const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }
2828
return (
2929
<CardWrap>
3030
<CardContent>
31-
<Heading variant="subtitle1">{`${title} (${deps.length})`}</Heading>
31+
<StyledText variant="subtitle1">{`${title} (${deps.length})`}</StyledText>
3232
<Tags>
3333
{deps.map(([name, version]) => (
3434
// eslint-disable-next-line

‎src/components/Dependencies/styles.ts‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
import styled from 'react-emotion';
22
import Card from '@material-ui/core/Card';
3-
import Typography from '@material-ui/core/Typography';
43
import Chip from '@material-ui/core/Chip';
54

65
import { fontWeight } from '../../utils/styles/sizes';
6+
import Text from '../../muiComponents/Text';
77

88
export const CardWrap = styled(Card)({
99
'&&': {
1010
margin: '0 0 16px',
1111
},
1212
});
1313

14-
export const Heading = styled(Typography)({
15-
'&&': {
16-
fontWeight: fontWeight.bold,
17-
textTransform: 'capitalize',
18-
},
14+
export const StyledText = styled(Text)({
15+
fontWeight: fontWeight.bold,
16+
textTransform: 'capitalize',
1917
});
2018

2119
export const Tags = styled('div')({

‎src/components/Developers/Developers.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Add from '@material-ui/icons/Add';
44
import { DetailContext } from '../../pages/Version';
55
import { AvatarTooltip } from '../AvatarTooltip';
66

7-
import { Details, Heading, Content, Fab } from './styles';
7+
import { Details, StyledText, Content, Fab } from './styles';
88

99
export type DevelopersType = 'contributors' | 'maintainers';
1010

@@ -34,7 +34,7 @@ const Developers: FC<Props> = ({ type, visibleMax }) => {
3434

3535
return (
3636
<Fragment>
37-
<Heading variant={'subtitle1'}>{type}</Heading>
37+
<StyledText variant={'subtitle1'}>{type}</StyledText>
3838
<Content>
3939
{listVisibleDevelopers.map(developer => (
4040
<Details key={developer.email}>{renderDeveloperDetails(developer, packageMeta)}</Details>

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

Lines changed: 108 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -4,68 +4,73 @@ exports[`test Developers should render the component for contributors with items
44
<Developers
55
type="contributors"
66
>
7-
<Styled(WithStyles(ForwardRef(Typography)))
7+
<Styled(Component)
88
variant="subtitle1"
99
>
10-
<WithStyles(ForwardRef(Typography))
11-
className="css-18tsvng emotion-0"
10+
<ForwardRef(Text)
11+
className="css-48zeoi emotion-0"
1212
variant="subtitle1"
1313
>
14-
<ForwardRef(Typography)
15-
className="css-18tsvng emotion-0"
16-
classes={
17-
Object {
18-
"alignCenter": "MuiTypography-alignCenter",
19-
"alignJustify": "MuiTypography-alignJustify",
20-
"alignLeft": "MuiTypography-alignLeft",
21-
"alignRight": "MuiTypography-alignRight",
22-
"body1": "MuiTypography-body1",
23-
"body2": "MuiTypography-body2",
24-
"button": "MuiTypography-button",
25-
"caption": "MuiTypography-caption",
26-
"colorError": "MuiTypography-colorError",
27-
"colorInherit": "MuiTypography-colorInherit",
28-
"colorPrimary": "MuiTypography-colorPrimary",
29-
"colorSecondary": "MuiTypography-colorSecondary",
30-
"colorTextPrimary": "MuiTypography-colorTextPrimary",
31-
"colorTextSecondary": "MuiTypography-colorTextSecondary",
32-
"displayBlock": "MuiTypography-displayBlock",
33-
"displayInline": "MuiTypography-displayInline",
34-
"gutterBottom": "MuiTypography-gutterBottom",
35-
"h1": "MuiTypography-h1",
36-
"h2": "MuiTypography-h2",
37-
"h3": "MuiTypography-h3",
38-
"h4": "MuiTypography-h4",
39-
"h5": "MuiTypography-h5",
40-
"h6": "MuiTypography-h6",
41-
"noWrap": "MuiTypography-noWrap",
42-
"overline": "MuiTypography-overline",
43-
"paragraph": "MuiTypography-paragraph",
44-
"root": "MuiTypography-root",
45-
"srOnly": "MuiTypography-srOnly",
46-
"subtitle1": "MuiTypography-subtitle1",
47-
"subtitle2": "MuiTypography-subtitle2",
48-
}
49-
}
14+
<WithStyles(ForwardRef(Typography))
15+
className="css-48zeoi emotion-0"
5016
variant="subtitle1"
5117
>
52-
<h6
53-
className="MuiTypography-root css-18tsvng emotion-0 MuiTypography-subtitle1"
18+
<ForwardRef(Typography)
19+
className="css-48zeoi emotion-0"
20+
classes={
21+
Object {
22+
"alignCenter": "MuiTypography-alignCenter",
23+
"alignJustify": "MuiTypography-alignJustify",
24+
"alignLeft": "MuiTypography-alignLeft",
25+
"alignRight": "MuiTypography-alignRight",
26+
"body1": "MuiTypography-body1",
27+
"body2": "MuiTypography-body2",
28+
"button": "MuiTypography-button",
29+
"caption": "MuiTypography-caption",
30+
"colorError": "MuiTypography-colorError",
31+
"colorInherit": "MuiTypography-colorInherit",
32+
"colorPrimary": "MuiTypography-colorPrimary",
33+
"colorSecondary": "MuiTypography-colorSecondary",
34+
"colorTextPrimary": "MuiTypography-colorTextPrimary",
35+
"colorTextSecondary": "MuiTypography-colorTextSecondary",
36+
"displayBlock": "MuiTypography-displayBlock",
37+
"displayInline": "MuiTypography-displayInline",
38+
"gutterBottom": "MuiTypography-gutterBottom",
39+
"h1": "MuiTypography-h1",
40+
"h2": "MuiTypography-h2",
41+
"h3": "MuiTypography-h3",
42+
"h4": "MuiTypography-h4",
43+
"h5": "MuiTypography-h5",
44+
"h6": "MuiTypography-h6",
45+
"noWrap": "MuiTypography-noWrap",
46+
"overline": "MuiTypography-overline",
47+
"paragraph": "MuiTypography-paragraph",
48+
"root": "MuiTypography-root",
49+
"srOnly": "MuiTypography-srOnly",
50+
"subtitle1": "MuiTypography-subtitle1",
51+
"subtitle2": "MuiTypography-subtitle2",
52+
}
53+
}
54+
variant="subtitle1"
5455
>
55-
contributors
56-
</h6>
57-
</ForwardRef(Typography)>
58-
</WithStyles(ForwardRef(Typography))>
59-
</Styled(WithStyles(ForwardRef(Typography)))>
56+
<h6
57+
className="MuiTypography-root css-48zeoi emotion-0 MuiTypography-subtitle1"
58+
>
59+
contributors
60+
</h6>
61+
</ForwardRef(Typography)>
62+
</WithStyles(ForwardRef(Typography))>
63+
</ForwardRef(Text)>
64+
</Styled(Component)>
6065
<Styled(div)>
6166
<div
62-
className="css-mkcn9c emotion-5"
67+
className="css-mkcn9c emotion-6"
6368
>
6469
<Styled(span)
6570
key="dave.methvin@gmail.com"
6671
>
6772
<span
68-
className="css-dvxtzn emotion-3"
73+
className="css-dvxtzn emotion-4"
6974
>
7075
<AvatarTooltip
7176
email="dave.methvin@gmail.com"
@@ -161,7 +166,7 @@ exports[`test Developers should render the component for contributors with items
161166
key="m.goleb@gmail.com"
162167
>
163168
<span
164-
className="css-dvxtzn emotion-3"
169+
className="css-dvxtzn emotion-4"
165170
>
166171
<AvatarTooltip
167172
email="m.goleb@gmail.com"
@@ -262,68 +267,73 @@ exports[`test Developers should render the component for maintainers with items
262267
<Developers
263268
type="maintainers"
264269
>
265-
<Styled(WithStyles(ForwardRef(Typography)))
270+
<Styled(Component)
266271
variant="subtitle1"
267272
>
268-
<WithStyles(ForwardRef(Typography))
269-
className="css-18tsvng emotion-0"
273+
<ForwardRef(Text)
274+
className="css-48zeoi emotion-0"
270275
variant="subtitle1"
271276
>
272-
<ForwardRef(Typography)
273-
className="css-18tsvng emotion-0"
274-
classes={
275-
Object {
276-
"alignCenter": "MuiTypography-alignCenter",
277-
"alignJustify": "MuiTypography-alignJustify",
278-
"alignLeft": "MuiTypography-alignLeft",
279-
"alignRight": "MuiTypography-alignRight",
280-
"body1": "MuiTypography-body1",
281-
"body2": "MuiTypography-body2",
282-
"button": "MuiTypography-button",
283-
"caption": "MuiTypography-caption",
284-
"colorError": "MuiTypography-colorError",
285-
"colorInherit": "MuiTypography-colorInherit",
286-
"colorPrimary": "MuiTypography-colorPrimary",
287-
"colorSecondary": "MuiTypography-colorSecondary",
288-
"colorTextPrimary": "MuiTypography-colorTextPrimary",
289-
"colorTextSecondary": "MuiTypography-colorTextSecondary",
290-
"displayBlock": "MuiTypography-displayBlock",
291-
"displayInline": "MuiTypography-displayInline",
292-
"gutterBottom": "MuiTypography-gutterBottom",
293-
"h1": "MuiTypography-h1",
294-
"h2": "MuiTypography-h2",
295-
"h3": "MuiTypography-h3",
296-
"h4": "MuiTypography-h4",
297-
"h5": "MuiTypography-h5",
298-
"h6": "MuiTypography-h6",
299-
"noWrap": "MuiTypography-noWrap",
300-
"overline": "MuiTypography-overline",
301-
"paragraph": "MuiTypography-paragraph",
302-
"root": "MuiTypography-root",
303-
"srOnly": "MuiTypography-srOnly",
304-
"subtitle1": "MuiTypography-subtitle1",
305-
"subtitle2": "MuiTypography-subtitle2",
306-
}
307-
}
277+
<WithStyles(ForwardRef(Typography))
278+
className="css-48zeoi emotion-0"
308279
variant="subtitle1"
309280
>
310-
<h6
311-
className="MuiTypography-root css-18tsvng emotion-0 MuiTypography-subtitle1"
281+
<ForwardRef(Typography)
282+
className="css-48zeoi emotion-0"
283+
classes={
284+
Object {
285+
"alignCenter": "MuiTypography-alignCenter",
286+
"alignJustify": "MuiTypography-alignJustify",
287+
"alignLeft": "MuiTypography-alignLeft",
288+
"alignRight": "MuiTypography-alignRight",
289+
"body1": "MuiTypography-body1",
290+
"body2": "MuiTypography-body2",
291+
"button": "MuiTypography-button",
292+
"caption": "MuiTypography-caption",
293+
"colorError": "MuiTypography-colorError",
294+
"colorInherit": "MuiTypography-colorInherit",
295+
"colorPrimary": "MuiTypography-colorPrimary",
296+
"colorSecondary": "MuiTypography-colorSecondary",
297+
"colorTextPrimary": "MuiTypography-colorTextPrimary",
298+
"colorTextSecondary": "MuiTypography-colorTextSecondary",
299+
"displayBlock": "MuiTypography-displayBlock",
300+
"displayInline": "MuiTypography-displayInline",
301+
"gutterBottom": "MuiTypography-gutterBottom",
302+
"h1": "MuiTypography-h1",
303+
"h2": "MuiTypography-h2",
304+
"h3": "MuiTypography-h3",
305+
"h4": "MuiTypography-h4",
306+
"h5": "MuiTypography-h5",
307+
"h6": "MuiTypography-h6",
308+
"noWrap": "MuiTypography-noWrap",
309+
"overline": "MuiTypography-overline",
310+
"paragraph": "MuiTypography-paragraph",
311+
"root": "MuiTypography-root",
312+
"srOnly": "MuiTypography-srOnly",
313+
"subtitle1": "MuiTypography-subtitle1",
314+
"subtitle2": "MuiTypography-subtitle2",
315+
}
316+
}
317+
variant="subtitle1"
312318
>
313-
maintainers
314-
</h6>
315-
</ForwardRef(Typography)>
316-
</WithStyles(ForwardRef(Typography))>
317-
</Styled(WithStyles(ForwardRef(Typography)))>
319+
<h6
320+
className="MuiTypography-root css-48zeoi emotion-0 MuiTypography-subtitle1"
321+
>
322+
maintainers
323+
</h6>
324+
</ForwardRef(Typography)>
325+
</WithStyles(ForwardRef(Typography))>
326+
</ForwardRef(Text)>
327+
</Styled(Component)>
318328
<Styled(div)>
319329
<div
320-
className="css-mkcn9c emotion-5"
330+
className="css-mkcn9c emotion-6"
321331
>
322332
<Styled(span)
323333
key="dave.methvin@gmail.com"
324334
>
325335
<span
326-
className="css-dvxtzn emotion-3"
336+
className="css-dvxtzn emotion-4"
327337
>
328338
<AvatarTooltip
329339
email="dave.methvin@gmail.com"
@@ -419,7 +429,7 @@ exports[`test Developers should render the component for maintainers with items
419429
key="m.goleb@gmail.com"
420430
>
421431
<span
422-
className="css-dvxtzn emotion-3"
432+
className="css-dvxtzn emotion-4"
423433
>
424434
<AvatarTooltip
425435
email="m.goleb@gmail.com"

‎src/components/Developers/styles.ts‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import styled from 'react-emotion';
2-
import Typography from '@material-ui/core/Typography';
32
import { default as MuiFab } from '@material-ui/core/Fab';
43

54
import colors from '../../utils/styles/colors';
65
import { fontWeight } from '../../utils/styles/sizes';
6+
import Text from '../../muiComponents/Text';
77

88
export const Details = styled('span')({
99
display: 'flex',
@@ -20,12 +20,10 @@ export const Content = styled('div')({
2020
},
2121
});
2222

23-
export const Heading = styled(Typography)({
24-
'&&': {
25-
fontWeight: fontWeight.bold,
26-
marginBottom: '10px',
27-
textTransform: 'capitalize',
28-
},
23+
export const StyledText = styled(Text)({
24+
fontWeight: fontWeight.bold,
25+
marginBottom: '10px',
26+
textTransform: 'capitalize',
2927
});
3028

3129
export const Fab = styled(MuiFab)({

0 commit comments

Comments
 (0)
⚡