sombochea/verdaccio-ui
1
0
Fork 1
mirror of https://github.com/SomboChea/ui synced 2026-01-17 00:25:50 +07:00
Code Issues Releases Wiki Activity

fix: typography Component - Introduced ForwardRef (#179)

Browse Source 
* refactor: introduced forwardref

* refacttor: updated ref's

* fix: fixed func's name

* fix: fixed snapshots

* fix: updated snap
This commit is contained in:
Priscila Oliveira
2019-10-12 21:41:42 +02:00
committed by Juan Picado @jotadeveloper
parent 82d7107de7
commit a8deeb9b9d
34 changed files with 262 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Developers/Developers.tsx
View File

@@ -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>

206
src/components/Developers/__snapshots__/Developers.test.tsx.snap
View File

@@ -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="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,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="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"

12
src/components/Developers/styles.ts
View File

@@ -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)({