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>

src/components/Logo/Logo.test.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+
+import { render } from '../../utils/test-react-testing-library';
 
 import Logo from './Logo';
 
 describe('<Logo /> component', () => {
   test('should render the component in default state', () => {
-    const wrapper = shallow(<Logo />);
-    expect(wrapper.html()).toMatchSnapshot();
+    const { container } = render(<Logo />);
+    expect(container.firstChild).toMatchSnapshot();
   });
 });

src/components/Logo/Logo.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import logo from './img/logo.svg';
 
@@ -12,19 +12,18 @@ interface Props {
   size?: Size;
 }
 
-const StyledLogo = styled('div')<Props>`
-  && {
-    display: inline-block;
-    vertical-align: middle;
-    box-sizing: border-box;
-    background-position: center;
-    background-size: contain;
-    background-image: url(${logo});
-    background-repeat: no-repeat;
-    width: ${({ size }) => size};
-    height: ${({ size }) => size};
-  }
-`;
+const StyledLogo = styled('div')<Props>(props => ({
+  display: 'inline-block',
+  verticalAlign: 'middle',
+  boxSizing: 'border-box',
+  backgroundPosition: 'center',
+  backgroundSize: 'contain',
+  backgroundImage: `url(${logo})`,
+  backgroundRepeat: ' no-repeat',
+  width: props.size,
+  height: props.size,
+}));
+
 const Logo: React.FC<Props> = ({ size = Size.Small }) => {
   return <StyledLogo size={size} />;
 };

src/components/Logo/__snapshots__/Logo.test.tsx.snap

@@ -1,3 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Logo /> component should render the component in default state 1`] = `"<div class=\\"css-1sifsqk em793ed0\\"></div>"`;
+exports[`<Logo /> component should render the component in default state 1`] = `
+.emotion-0 {
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  background-position: center;
+  background-size: contain;
+  background-image: url([object Object]);
+  background-repeat: no-repeat;
+  width: 40px;
+  height: 40px;
+}
+
+<div
+  class="emotion-0 emotion-1"
+/>
+`;