This repository has been archived by the owner on Jan 16, 2022. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Added Theme and migrate to emotion@10.x 馃殌 (#286)
* chore: updated emotion dependency * feat: introduced theme * refactor: updated emotion styles * fix: fixed emotion error * fix: fixed tests * chore: add missing types Co-Authored-By: Thomas Klein <tmkn@users.noreply.github.com>
- Loading branch information
1 parent
a0dcf87
commit 111f0c5
Showing
105 changed files
with
1,882 additions
and
911 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,17 @@ | ||
| import styled from 'react-emotion'; | ||
| import styled from '@emotion/styled'; | ||
|
|
||
| import colors from '../../utils/styles/colors'; | ||
| import ListItem from '../../muiComponents/ListItem'; | ||
| import FloatingActionButton from '../../muiComponents/FloatingActionButton'; | ||
| import { Theme } from '../../design-tokens/theme'; | ||
|
|
||
| export const ActionListItem = styled(ListItem)({ | ||
| paddingTop: 0, | ||
| paddingLeft: 0, | ||
| paddingRight: 0, | ||
| }); | ||
|
|
||
| export const Fab = styled(FloatingActionButton)({ | ||
| backgroundColor: colors.primary, | ||
| color: colors.white, | ||
| export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({ | ||
| backgroundColor: props.theme && props.theme.palette.primary.main, | ||
| color: props.theme && props.theme.palette.white, | ||
| marginRight: '10px', | ||
| }); | ||
| })); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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-b8upko e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-zw46c6 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 MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div></a><div class=\\"MuiListItemText-root css-fipixf 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-1na337r-StyledText e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1k45khb-AuthorListItem 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 MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div></a><div class=\\"MuiListItemText-root css-1cnlq5d-AuthorListItemText 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-zw46c6 e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div><div class=\\"MuiListItemText-root css-fipixf 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-1na337r-StyledText e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1k45khb-AuthorListItem e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div><div class=\\"MuiListItemText-root css-1cnlq5d-AuthorListItemText e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,60 +1,44 @@ | ||
| import React from 'react'; | ||
| import styled, { css } from 'react-emotion'; | ||
| import styled from '@emotion/styled'; | ||
|
|
||
| import TextField from '../../muiComponents/TextField'; | ||
| import Paper from '../../muiComponents/Paper'; | ||
| import { Theme } from '../../design-tokens/theme'; | ||
|
|
||
| export interface InputFieldProps { | ||
| color: string; | ||
| } | ||
|
|
||
| export const Wrapper = styled('div')({ | ||
| '&&': { | ||
| width: '100%', | ||
| height: '32px', | ||
| position: 'relative', | ||
| zIndex: 1, | ||
| }, | ||
| width: '100%', | ||
| height: '32px', | ||
| position: 'relative', | ||
| zIndex: 1, | ||
| }); | ||
|
|
||
| export const StyledTextField = styled(TextField)<{ theme?: Theme }>(props => ({ | ||
| '& .MuiInputBase-root': { | ||
| ':before': { | ||
| content: "''", | ||
| border: 'none', | ||
| }, | ||
| ':after': { | ||
| borderColor: props.theme && props.theme.palette.white, | ||
| }, | ||
| ':hover:before': { | ||
| content: 'none', | ||
| }, | ||
| }, | ||
| '& .MuiInputBase-input': { | ||
| color: props.theme && props.theme.palette.white, | ||
| }, | ||
| })); | ||
|
|
||
| /* eslint-disable verdaccio/jsx-spread */ | ||
| export const InputField: React.FC<InputFieldProps> = ({ color, ...others }) => ( | ||
| <TextField | ||
| {...others} | ||
| classes={{ | ||
| // @ts-ignore | ||
| input: css` | ||
| && { | ||
| ${color && | ||
| css` | ||
| color: ${color}; | ||
| `}; | ||
| } | ||
| `, | ||
| root: css` | ||
| && { | ||
| &:before { | ||
| content: ''; | ||
| border: none; | ||
| } | ||
| &:after { | ||
| ${color && | ||
| css` | ||
| border-color: ${color}; | ||
| `}; | ||
| } | ||
| &:hover:before { | ||
| content: none; | ||
| } | ||
| } | ||
| `, | ||
| }} | ||
| /> | ||
| ); | ||
| // @ts-ignore types of color are incompatible | ||
| export const InputField: React.FC<InputFieldProps> = ({ ...others }) => <StyledTextField {...others} />; | ||
|
|
||
| export const SuggestionContainer = styled(Paper)({ | ||
| '&&': { | ||
| maxHeight: '500px', | ||
| overflowY: 'auto', | ||
| }, | ||
| maxHeight: '500px', | ||
| overflowY: 'auto', | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
src/components/CopyToClipBoard/__snapshots__/CopyToClipBoard.test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`<CopyToClipBoard /> component render the component 1`] = `"<div class=\\"css-1mta3t8 eb8w2fo0\\"><span class=\\"css-lh0wgu eb8w2fo1\\">copy text</span><button class=\\"MuiButtonBase-root MuiIconButton-root css-0 eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></div>"`; | ||
| exports[`<CopyToClipBoard /> component should load the component in default state 1`] = `"<div class=\\"css-1in239f-ClipBoardCopy eb8w2fo0\\"><span class=\\"css-7gar9h-ClipBoardCopyText eb8w2fo1\\">copy text</span><button class=\\"MuiButtonBase-root MuiIconButton-root css-1fs86cq-CopyIcon eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></div>"`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,20 @@ | ||
| import styled from 'react-emotion'; | ||
| import styled from '@emotion/styled'; | ||
|
|
||
| import IconButton from '../../muiComponents/IconButton'; | ||
|
|
||
| export const ClipBoardCopy = styled('div')({ | ||
| '&&': { | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| justifyContent: 'space-between', | ||
| }, | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| justifyContent: 'space-between', | ||
| }); | ||
|
|
||
| export const ClipBoardCopyText = styled('span')({ | ||
| '&&': { | ||
| display: 'inline-block', | ||
| textOverflow: 'ellipsis', | ||
| overflow: 'hidden', | ||
| whiteSpace: 'nowrap', | ||
| height: '21px', | ||
| fontSize: '1rem', | ||
| }, | ||
| display: 'inline-block', | ||
| textOverflow: 'ellipsis', | ||
| overflow: 'hidden', | ||
| whiteSpace: 'nowrap', | ||
| height: '21px', | ||
| fontSize: '1rem', | ||
| }); | ||
|
|
||
| export const CopyIcon = styled(IconButton)({}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.