feat(components): migrate Tag to TypeScript (#654)

* feat(components): migrate Tag to TypeScript

* feat(components): add button type to Tag

src/components/Button/Button.tsx

@@ -14,7 +14,15 @@
  */
 
 /** @jsx jsx */
-import React, { HTMLProps, ReactNode, FC, SVGProps, MouseEvent } from 'react';
+import {
+  forwardRef,
+  Ref,
+  HTMLProps,
+  ReactNode,
+  FC,
+  SVGProps,
+  MouseEvent,
+} from 'react';
 import { css, jsx } from '@emotion/core';
 import isPropValid from '@emotion/is-prop-valid';
 import { Theme } from '@sumup/design-tokens';
@@ -59,7 +67,7 @@ export interface BaseProps {
   /**
    The ref to the html dom element, it can be an anchor or a button
    */
-  ref?: React.Ref<HTMLButtonElement & HTMLAnchorElement>;
+  ref?: Ref<HTMLButtonElement & HTMLAnchorElement>;
   /**
    * The HTML button type
    */
@@ -209,7 +217,7 @@ const BaseButton = styled('button', {
 
 function ButtonComponent(
   { children, icon: Icon, tracking, ...props }: ButtonProps,
-  ref?: React.Ref<HTMLButtonElement & HTMLAnchorElement>,
+  ref?: BaseProps['ref'],
 ): ReturnType {
   const { Link } = useComponents();
   const LinkButton = BaseButton.withComponent(Link);
@@ -232,4 +240,4 @@ function ButtonComponent(
  * The Button component enables the user to perform an action or navigate
  * to a different screen.
  */
-export const Button = React.forwardRef(ButtonComponent);
+export const Button = forwardRef(ButtonComponent);

src/components/CalendarTag/__snapshots__/CalendarTag.spec.js.snap

@@ -1,6 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CalendarTag should render with default styles 1`] = `
+.circuit-1 {
+  position: relative;
+}
+
 .circuit-0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -10,25 +14,25 @@ exports[`CalendarTag should render with default styles 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border-radius: 4px;
   font-size: 16px;
   line-height: 24px;
   border: 1px solid #D8DDE1;
+  border-radius: 6px;
   padding: 4px 12px;
   cursor: default;
-  -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
-  transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
+  background-color: #FFFFFF;
+  -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
   cursor: pointer;
   outline: 0;
-  background: transparent;
 }
 
 .circuit-0:active {
   color: #0F131A;
 }
 
 .circuit-0:hover {
-  background-color: #D8DDE1;
+  background-color: #EEF0F2;
   border-color: #9DA7B1;
 }
 
@@ -42,10 +46,15 @@ exports[`CalendarTag should render with default styles 1`] = `
 }
 
 <div>
-  <button
-    class="circuit-0 circuit-1"
+  <div
+    class="circuit-1"
   >
-    Dates
-  </button>
+    <button
+      class="circuit-0"
+      type="button"
+    >
+      Dates
+    </button>
+  </div>
 </div>
 `;

src/components/CalendarTagTwoStep/__snapshots__/CalendarTagTwoStep.spec.js.snap

@@ -1,6 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CalendarTagTwoStep should render with default styles 1`] = `
+.circuit-1 {
+  position: relative;
+}
+
 .circuit-0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -10,25 +14,25 @@ exports[`CalendarTagTwoStep should render with default styles 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border-radius: 4px;
   font-size: 16px;
   line-height: 24px;
   border: 1px solid #D8DDE1;
+  border-radius: 6px;
   padding: 4px 12px;
   cursor: default;
-  -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
-  transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
+  background-color: #FFFFFF;
+  -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
   cursor: pointer;
   outline: 0;
-  background: transparent;
 }
 
 .circuit-0:active {
   color: #0F131A;
 }
 
 .circuit-0:hover {
-  background-color: #D8DDE1;
+  background-color: #EEF0F2;
   border-color: #9DA7B1;
 }
 
@@ -42,10 +46,15 @@ exports[`CalendarTagTwoStep should render with default styles 1`] = `
 }
 
 <div>
-  <button
-    class="circuit-0 circuit-1"
+  <div
+    class="circuit-1"
   >
-    Dates
-  </button>
+    <button
+      class="circuit-0"
+      type="button"
+    >
+      Dates
+    </button>
+  </div>
 </div>
 `;

src/components/Input/Input.tsx

@@ -14,7 +14,7 @@
  */
 
 /** @jsx jsx */
-import React, { FC, HTMLProps, ReactNode } from 'react';
+import { forwardRef, Ref, FC, HTMLProps, ReactNode } from 'react';
 import { css, jsx, InterpolationWithTheme } from '@emotion/core';
 import { Theme } from '@sumup/design-tokens';
 
@@ -102,7 +102,7 @@ export interface InputProps extends Omit<HTMLProps<HTMLInputElement>, 'label'> {
   /**
    * The ref to the html dom element
    */
-  ref?: React.Ref<HTMLInputElement & HTMLTextAreaElement>;
+  ref?: Ref<HTMLInputElement & HTMLTextAreaElement>;
 }
 
 const containerStyles = ({ theme }: StyleProps) => css`
@@ -350,4 +350,4 @@ function InputComponent(
 /**
  * Input component for forms. Takes optional prefix and suffix as render props.
  */
-export const Input = React.forwardRef(InputComponent);
+export const Input = forwardRef(InputComponent);

src/components/Tag/Tag.docs.mdx

@@ -1,5 +1,5 @@
 import { Status, Props, Story } from '../../../.storybook/components';
-import Tag from './Tag';
+import { Tag } from './Tag';
 
 # Tag