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

feat: Added Theme and migrate to emotion@10.x 🚀 (#286)

Browse Source 
* 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>
This commit is contained in:
Priscila Oliveira
2019-11-23 13:41:14 +01:00
committed by Juan Picado @jotadeveloper
parent a0dcf87368
commit 111f0c50e5
105 changed files with 1884 additions and 913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Spinner/Spinner.test.tsx
View File

@@ -1,12 +1,13 @@
import React from 'react';
import { shallow } from 'enzyme';
import { mount } from '../../utils/test-enzyme';
import Spinner from './Spinner';
import { Circular, Wrapper } from './styles';
describe('<Spinner /> component', () => {
test('should render the component in default state', () => {
const wrapper = shallow(<Spinner />);
const wrapper = mount(<Spinner />);
const wrapperComponent = wrapper.find(Wrapper);
const circular = wrapper.find(Circular);
@@ -15,7 +16,7 @@ describe('<Spinner /> component', () => {
});
test('should render the component in custom state', () => {
const wrapper = shallow(<Spinner centered={true} size={10} />);
const wrapper = mount(<Spinner centered={true} size={10} />);
const wrapperComponent = wrapper.find(Wrapper);
const circular = wrapper.find(Circular);

2
src/components/Spinner/__snapshots__/Spinner.test.tsx.snap
View File

@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Spinner /> component should render the component in custom state 1`] = `"<div class=\\"css-zo92co e1ag4h8b0\\"><div class=\\"MuiCircularProgress-root css-15gl0ho e1ag4h8b1 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate\\" style=\\"width:10px;height:10px\\" role=\\"progressbar\\"><svg class=\\"MuiCircularProgress-svg\\" viewBox=\\"22 22 44 44\\"><circle class=\\"MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate\\" cx=\\"44\\" cy=\\"44\\" r=\\"20.2\\" fill=\\"none\\" stroke-width=\\"3.6\\"></circle></svg></div></div>"`;
exports[`<Spinner /> component should render the component in custom state 1`] = `"<div class=\\"css-1ju0ex2-Wrapper e1ag4h8b0\\"><div class=\\"MuiCircularProgress-root css-evyw70-Circular e1ag4h8b1 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate\\" style=\\"width: 10px; height: 10px;\\" role=\\"progressbar\\"><svg class=\\"MuiCircularProgress-svg\\" viewBox=\\"22 22 44 44\\"><circle class=\\"MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate\\" cx=\\"44\\" cy=\\"44\\" r=\\"20.2\\" fill=\\"none\\" stroke-width=\\"3.6\\"></circle></svg></div></div>"`;

38
src/components/Spinner/styles.ts
View File

@@ -1,30 +1,24 @@
import styled, { css } from 'react-emotion';
import styled from '@emotion/styled';
import colors from '../../utils/styles/colors';
import CircularProgress from '../../muiComponents/CircularProgress';
import { Theme } from '../../design-tokens/theme';
interface WrapperProps {
centered: boolean;
}
export const Wrapper = styled('div')`
&& {
display: flex;
align-items: center;
justify-content: center;
${(props: WrapperProps) =>
props.centered &&
css`
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
`};
}
`;
export const Wrapper = styled('div')<WrapperProps>(props => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
...(props.centered && {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
}),
}));
export const Circular = styled(CircularProgress)({
'&&': {
color: colors.primary,
},
});
export const Circular = styled(CircularProgress)<{ theme?: Theme }>(props => ({
color: props.theme && props.theme.palette.primary.main,
}));