Update to V4 of styled-components

package.json

@@ -48,8 +48,9 @@
   },
   "dependencies": {
     "@ctrl/tinycolor": "^2.2.1",
+    "@types/styled-components": "^4.1.10",
     "emptykit.css": "^1.0.1",
-    "styled-components": "^3.2.5"
+    "styled-components": "^4.1.3"
   },
   "devDependencies": {
     "@babel/core": "^7.1.6",
@@ -80,12 +81,12 @@
     "cpr": "^3.0.1",
     "csstype": "^2.5.5",
     "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-adapter-react-16": "^1.10.0",
     "enzyme-to-json": "^3.3.4",
     "fs-extra": "^2.1.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.1.0",
-    "jest-styled-components": "^5.0.1",
+    "jest-styled-components": "^6.3.1",
     "lerna": "^2.0.0",
     "ncp": "^2.0.0",
     "pre-commit": "^1.2.2",
@@ -94,7 +95,7 @@
     "react-beautiful-dnd": "^10.0.3",
     "react-dom": "^16.3.0",
     "react-storybook-addon-chapters": "^2.1.5",
-    "react-test-renderer": "^16.3.0",
+    "react-test-renderer": "^16.8.3",
     "rimraf": "^2.6.2",
     "storybook-addon-styled-component-theme": "^1.1.1",
     "stylelint": "^9.4.0",
@@ -105,8 +106,8 @@
     "tslint": "^5.8.0",
     "tslint-config-standard": "^7.0.0",
     "tslint-react": "^3.2.0",
-    "typescript": "^3.0.1",
-    "typescript-plugin-styled-components": "0.0.6"
+    "typescript": "^3.3.1",
+    "typescript-plugin-styled-components": "1.2.0"
   },
   "peerDependencies": {
     "react": "^16.0.0"

src/components/buttonsIndicators/button/__snapshots__/spec.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Button tests basic tests matches the snapshot 1`] = `
-.c1 {
+.c0 {
   --button-main-color: #3b3e4f;
   --button-main-color-hover: #1E2029;
   --button-main-color-active: #5e6175;
@@ -39,23 +39,20 @@ exports[`Button tests basic tests matches the snapshot 1`] = `
   width: auto;
   min-width: 104px;
   padding: 11px 15px;
+  color: #fff;
+  background: var(--button-state-color);
+  border: 1px solid var(--button-state-color);
 }
 
-.c1:hover:enabled {
+.c0:hover:enabled {
   --button-state-color: var(--button-main-color-hover);
 }
 
-.c1:active:enabled {
+.c0:active:enabled {
   --button-state-color: var(--button-main-color-active);
 }
 
-.c0 {
-  color: #fff;
-  background: var(--button-state-color);
-  border: 1px solid var(--button-state-color);
-}
-
-.c2 {
+.c1 {
   min-height: var(--icon-size);
   display: -webkit-box;
   display: -webkit-flex;
@@ -76,13 +73,13 @@ exports[`Button tests basic tests matches the snapshot 1`] = `
 }
 
 <button
-  className="c0 c1"
+  className="c0"
   id="button"
   size="medium"
   type="default"
 >
   <div
-    className="c2"
+    className="c1"
     id="button"
     size="medium"
     type="default"

src/components/buttonsIndicators/button/style.ts

@@ -63,7 +63,7 @@ const getThemeColors = (p: ThemedStyledProps<Props>) => {
   `
 }
 
-const StyledButton = styled<Props, 'button'>('button')`
+const StyledButton = styled.button<Props>`
   ${getThemeColors}
   --button-state-color: var(--button-main-color);
   --icon-size: ${largeMediumSmall('18px', '16px', '14px')};
@@ -110,7 +110,7 @@ export const TertiaryButton = styled(StyledButton)`
   color: var(--button-state-color);
 `
 
-export const StyledText = styled<Props, 'div'>('div')`
+export const StyledText = styled.div<Props>`
   /* min-height so that we get consistent height with / without an icon */
   min-height: var(--icon-size);
   display: flex;
@@ -122,7 +122,7 @@ export const StyledText = styled<Props, 'div'>('div')`
   line-height: 1;
 `
 
-export const StyledIcon = styled<Props, 'div'>('div')`
+export const StyledIcon = styled.div<Props>`
   display: block;
   line-height: 0;
   height: var(--icon-size);

src/components/dataTables/table/style.ts

@@ -5,19 +5,19 @@
 import styled, { css } from 'styled-components'
 import { Cell, Row } from './index'
 
-export const StyledNoContent = styled<{}, 'div'>('div')`
+export const StyledNoContent = styled.div`
   text-align: center;
   padding: 30px 0;
   color: #999ea2;
   font-size: 14px;
 `
 
-export const StyledTable = styled<{}, 'table'>('table')`
+export const StyledTable = styled.table`
   width: 100%;
   margin-bottom: 20px;
 `
 
-export const StyledTH = styled<Partial<Cell>, 'th'>('th')`
+export const StyledTH = styled.th<Partial<Cell>>`
   text-transform: uppercase;
   text-align: left;
   font-family: Poppins, sans-serif;
@@ -37,7 +37,7 @@ export const StyledTH = styled<Partial<Cell>, 'th'>('th')`
   };
 `
 
-export const StyledTR = styled<Partial<Row>, 'tr'>('tr')`
+export const StyledTR = styled.tr<Partial<Row>>`
   ${p => p.customStyle
     ? css`
       ${p.customStyle}
@@ -46,7 +46,7 @@ export const StyledTR = styled<Partial<Row>, 'tr'>('tr')`
   };
 `
 
-export const StyledTD = styled<Partial<Cell>, 'td'>('td')`
+export const StyledTD = styled.td<Partial<Cell>>`
   font-family: Muli, sans-serif;
   font-size: 14px;
   font-weight: 500;

src/components/formControls/checkbox/style.ts

@@ -56,7 +56,7 @@ const getLabel = (p: Partial<StyleProps>) => {
   `
 }
 
-export const StyledLabel = styled<Partial<StyleProps>, 'div'>('div')`
+export const StyledLabel = styled.div<Partial<StyleProps>>`
   font-family: Poppins, sans-serif;
   line-height: 1.3;
   display: flex;
@@ -67,7 +67,7 @@ export const StyledLabel = styled<Partial<StyleProps>, 'div'>('div')`
   cursor: pointer;
 `
 
-export const StyledBox = styled<Partial<StyleProps>, 'span'>('span')`
+export const StyledBox = styled.span<Partial<StyleProps>>`
   border-radius: 2px;
   text-align: center;
   display: flex;
@@ -83,7 +83,7 @@ export const StyledBox = styled<Partial<StyleProps>, 'span'>('span')`
   margin-right: var(--checkbox-box-spacing);
 `
 
-export const StyledText = styled<Partial<StyleProps>, 'span'>('span')`
+export const StyledText = styled.span<Partial<StyleProps>>`
   flex: 1;
   padding-top: ${(p) => p.size === 'big' ? '2px' : '1px'};
   letter-spacing: 0;

src/components/formControls/controlWrapper/style.ts

@@ -25,12 +25,12 @@ const getColor = (p: Partial<Props>) => {
   `
 }
 
-export const StyledWrapper = styled<{}, 'div'>('div')`
+export const StyledWrapper = styled.div`
   width: 100%;
   margin-bottom: 12px;
 `
 
-export const StyledLabel = styled<Partial<Props>, 'div'>('div')`
+export const StyledLabel = styled.div<Partial<Props>>`
   width: 100%;
   font-family: Poppins, sans-serif;
   line-height: normal;

src/components/formControls/input/style.ts

@@ -6,7 +6,7 @@ import styled from 'styled-components'
 import theme from '../../../theme/brave-default'
 import { InputProps } from './index'
 
-export const InputComponent = styled<InputProps, 'div'>('div')`
+export const InputComponent = styled.div<InputProps>`
   background-color: #fff;
   min-height: auto;
   box-sizing: border-box;
@@ -20,15 +20,15 @@ export const InputComponent = styled<InputProps, 'div'>('div')`
   }
 `
 
-export const StyledIcon = styled<{}, 'div'>('div')`
+export const StyledIcon = styled.div`
   display: inline-block;
   vertical-align: middle;
   width: 20px;
   margin-right: 10px;
   color: #D1D1DB;
 `
 
-export const StyledInput = styled<InputProps, 'input'>('input')`
+export const StyledInput = styled.input<InputProps>`
   display: inline-block;
   vertical-align: middle;
   min-height: auto;

src/components/formControls/radio/style.ts

@@ -47,7 +47,7 @@ const getThemeColors = (p: ThemedStyledProps<StyleProps>, selected: boolean | un
   `
 }
 
-export const StyledLabel = styled<StyleProps, 'label'>('label')`
+export const StyledLabel = styled.label<StyleProps>`
   ${p => getThemeSizes(p)}
   line-height: 1.3;
   display: flex;
@@ -56,12 +56,12 @@ export const StyledLabel = styled<StyleProps, 'label'>('label')`
   cursor: pointer;
 `
 
-export const StyledInput = styled<{}, 'input'>('input')`
+export const StyledInput = styled.input`
   opacity: 0;
   position: absolute;
 `
 
-export const StyledCircle = styled<StyleProps, 'span'>('span')`
+export const StyledCircle = styled.span<StyleProps>`
   ${p => getThemeSizes(p)}
   ${p => getThemeColors(p, p.selected)}
   text-align: center;
@@ -76,7 +76,7 @@ export const StyledCircle = styled<StyleProps, 'span'>('span')`
   border-radius: 50%;
 `
 
-export const StyledFill = styled<StyleProps, 'div'>('div')`
+export const StyledFill = styled.div<StyleProps>`
   ${p => getThemeSizes(p)}
   ${p => getThemeColors(p, p.selected)}
   width: var(--radio-fill-size);
@@ -85,7 +85,7 @@ export const StyledFill = styled<StyleProps, 'div'>('div')`
   background: var(--radio-fill-color);
 `
 
-export const StyledText = styled<StyleProps, 'span'>('span')`
+export const StyledText = styled.span<StyleProps>`
   flex: 1;
   letter-spacing: 0;
   display: flex;