Update to V4 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",
@@ -79,12 +80,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",
@@ -93,7 +94,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",
@@ -104,8 +105,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"

package/package.json

@@ -2,7 +2,7 @@
   "name": "brave-ui",
   "main": "index.js",
   "sideEffects": false,
-  "version": "0.37.0",
+  "version": "0.34.4",
   "description": "List of reusable React components to empower your brave UI",
   "author": "Brave Software",
   "contributors": [
@@ -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",
@@ -83,7 +84,7 @@
     "enzyme-to-json": "^3.3.4",
     "fs-extra": "^2.1.2",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^23.5.0",
+    "jest": "^24.1.0",
     "jest-styled-components": "^5.0.1",
     "lerna": "^2.0.0",
     "ncp": "^2.0.0",
@@ -104,8 +105,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"
@@ -156,7 +157,9 @@
     "testPathIgnorePatterns": [
       "<rootDir>/node_modules/"
     ],
-    "setupTestFrameworkScriptFile": "<rootDir>/.testconfig/testSetup.js",
+    "setupFilesAfterEnv": [
+      "<rootDir>/.testconfig/testSetup.js"
+    ],
     "setupFiles": [
       "<rootDir>/.testconfig/testPolyfills.js"
     ],

src/components/alertBox/style.ts

@@ -2,9 +2,9 @@
  * License. v. 2.0. If a copy of the MPL was not distributed with this file.
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import styled from 'styled-components'
+import styled from '../style/theme'
 
-export const StyledDialogWrapper = styled<{}, 'div'>('div')`
+export const StyledDialogWrapper = styled.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -14,7 +14,7 @@ export const StyledDialogWrapper = styled<{}, 'div'>('div')`
   display: flex;
 `
 
-export const StyledDialog = styled<{}, 'div'>('div')`
+export const StyledDialog = styled.div`
   width: 470px;
   margin: auto;
   padding: 30px 20px 10px;
@@ -27,13 +27,13 @@ export const StyledDialog = styled<{}, 'div'>('div')`
   border-radius: 6px;
 `
 
-export const StyledFooter = styled<{}, 'footer'>('footer')`
+export const StyledFooter = styled.footer`
   display: grid;
   grid-template-columns: 1fr auto;
   grid-gap: 10px;
 `
 
-export const StyledCancelContainer = styled<{}, 'div'>('div')`
+export const StyledCancelContainer = styled.div`
   display: flex;
   justify-content: flex-end;
 `

src/components/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: #84889c;
   --button-main-color-hover: #AEB1C2;
   --button-main-color-active: #5e6175;
@@ -38,25 +38,22 @@ exports[`Button tests basic tests matches the snapshot 1`] = `
   border-radius: 20px;
   width: auto;
   padding: 7px 18px;
+  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);
   -webkit-transition: .4s;
   transition: .4s;
 }
 
-.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;
@@ -77,13 +74,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/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/card/style.ts

@@ -2,10 +2,10 @@
  * License. v. 2.0. If a copy of the MPL was not distributed with this file.
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import styled from 'styled-components'
+import styled from '../style/theme'
 import { CardProps } from './index'
 
-export const StyledCard = styled<CardProps, 'div'>('div')`
+export const StyledCard = styled.div<CardProps>`
   max-width: 100%;
   width: 100%;
   min-height: auto;

src/components/formControl/checkbox/style.ts

@@ -2,7 +2,7 @@
  * License. v. 2.0. If a copy of the MPL was not distributed with this file.
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import styled, { css } from 'styled-components'
+import styled, { css } from '../../style/theme'
 import { Props } from './index'
 
 interface StyleProps extends Props {
@@ -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/formControl/controlWrapper/style.ts

@@ -2,7 +2,7 @@
  * License. v. 2.0. If a copy of the MPL was not distributed with this file.
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import styled, { css } from 'styled-components'
+import styled, { css } from '../../style/theme'
 import { Props } from './index'
 
 const getColor = (p: Partial<Props>) => {
@@ -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/formControl/input/style.ts

@@ -2,11 +2,11 @@
  * License. v. 2.0. If a copy of the MPL was not distributed with this file.
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import styled from 'styled-components'
+import styled from '../../style/theme'
 import theme from '../../style/theme/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/formControl/radio/style.ts

@@ -45,7 +45,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;
@@ -54,12 +54,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;
@@ -74,7 +74,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);
@@ -83,7 +83,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;