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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { mount } from 'enzyme';
+
+import { render } from '../../utils/test-react-testing-library';
 
 import Label from './Label';
 
@@ -8,7 +9,7 @@ describe('<Label /> component', () => {
     text: 'test',
   };
   test('should render the component in default state', () => {
-    const wrapper = mount(<Label text={props.text} />);
-    expect(wrapper.html()).toMatchSnapshot();
+    const { container } = render(<Label text={props.text} />);
+    expect(container.firstChild).toMatchSnapshot();
   });
 });

src/components/Label/Label.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import { fontWeight } from '../../utils/styles/sizes';
 
@@ -7,20 +7,17 @@ interface Props {
   text: string;
   capitalize?: boolean;
   weight?: string;
-  modifiers?: null | undefined;
 }
 
 interface WrapperProps {
   capitalize: boolean;
   weight: string;
-  modifiers?: null;
 }
 
-const Wrapper = styled('div')`
-  font-weight: ${({ weight }: WrapperProps) => fontWeight[weight]};
-  text-transform: ${({ capitalize }: WrapperProps) => (capitalize ? 'capitalize' : 'none')};
-  ${({ modifiers }: WrapperProps) => modifiers};
-`;
+const Wrapper = styled('div')<WrapperProps>(props => ({
+  fontWeight: fontWeight[props.weight],
+  textTransform: props.capitalize ? 'capitalize' : 'none',
+}));
 
 const Label: React.FC<Props> = ({ text = '', capitalize = false, weight = 'regular', ...props }) => {
   return (

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

@@ -1,3 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Label /> component should render the component in default state 1`] = `"<div class=\\"css-1xfhjjm esyufg60\\">test</div>"`;
+exports[`<Label /> component should render the component in default state 1`] = `
+.emotion-0 {
+  font-weight: 400;
+  text-transform: none;
+}
+
+<div
+  class="emotion-0 emotion-1"
+>
+  test
+</div>
+`;