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/Tag/Tag.test.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+
+import { render } from '../../utils/test-react-testing-library';
 
 import Tag from './Tag';
 
 describe('<Tag /> component', () => {
-  test('should render the component in default state', () => {
-    const wrapper = shallow(
+  test('should load the component in default state', () => {
+    const { container } = render(
       <Tag>
         <span>{'I am a child'}</span>
       </Tag>
     );
-    expect(wrapper.html()).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 });

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

@@ -1,3 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Tag /> component should render the component in default state 1`] = `"<span class=\\"css-le0azu e1q9boj50\\"><span>I am a child</span></span>"`;
+exports[`<Tag /> component should load the component in default state 1`] = `
+.emotion-0 {
+  vertical-align: middle;
+  line-height: 22px;
+  border-radius: 2px;
+  color: #485a3e;
+  background-color: #f3f4f2;
+  padding: 0.22rem 0.4rem;
+  margin: 8px 8px 0 0;
+}
+
+<span
+  class="emotion-0 emotion-1"
+>
+  <span>
+    I am a child
+  </span>
+</span>
+`;

src/components/Tag/styles.ts

@@ -1,13 +1,11 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 export const Wrapper = styled('span')({
-  '&&': {
-    verticalAlign: 'middle',
-    lineHeight: '22px',
-    borderRadius: '2px',
-    color: '#485a3e',
-    backgroundColor: '#f3f4f2',
-    padding: '0.22rem 0.4rem',
-    margin: '8px 8px 0 0',
-  },
+  verticalAlign: 'middle',
+  lineHeight: '22px',
+  borderRadius: '2px',
+  color: '#485a3e',
+  backgroundColor: '#f3f4f2',
+  padding: '0.22rem 0.4rem',
+  margin: '8px 8px 0 0',
 });