Merge pull request #577 from brave/styled-components-v5

brave · Mar 5, 2021 · 161da1d · 161da1d
2 parents cf2b95b + 3260186
commit 161da1d
Show file tree

Hide file tree

Showing 47 changed files with 3,224 additions and 1,648 deletions.
diff --git a/.storybook/addons.js b/.storybook/addons.js
@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 // for docs see https://github.com/echoulen/storybook-addon-styled-component-theme
-import 'storybook-addon-styled-component-theme/dist/src/register'
+import 'storybook-addon-styled-component-theme/dist/register'
 
 // for docs see https://www.npmjs.com/package/@storybook/addon-backgrounds
 import '@storybook/addon-backgrounds/register'

diff --git a/.travis.yml b/.travis.yml
@@ -1,10 +1,9 @@
 language: node_js
 node_js:
-  - "11.10.1"
+  - "14.16.0"
 dist: trusty
 cache: npm
 before_install:
-  - npm i -g npm@6.5.0
   - npm --version
 branches:
   only:

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,8 +48,7 @@
   },
   "dependencies": {
     "@ctrl/tinycolor": "^2.2.1",
-    "emptykit.css": "^1.0.1",
-    "styled-components": "^3.2.5"
+    "emptykit.css": "^1.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.1.6",
@@ -64,7 +63,7 @@
     "@storybook/react": "^5.3.17",
     "@storybook/storybook-deployer": "^2.8.6",
     "@types/enzyme": "^3.1.9",
-    "@types/jest": "^23.3.9",
+    "@types/jest": "^26.0.20",
     "@types/react": "^16.4.10",
     "@types/react-beautiful-dnd": "^10.0.1",
     "@types/react-dom": "^16.0.7",
@@ -74,6 +73,7 @@
     "@types/storybook__addon-info": "^4.1.0",
     "@types/storybook__addon-knobs": "^4.0.3",
     "@types/storybook__react": "^4.0.1",
+    "@types/styled-components": "^5.1.7",
     "awesome-typescript-loader": "^5.2.1",
     "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "^8.0.4",
@@ -85,8 +85,8 @@
     "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": "^26.6.3",
+    "jest-styled-components": "^7.0.3",
     "lerna": "^3.20.2",
     "ncp": "^2.0.0",
     "pre-commit": "^1.2.2",
@@ -97,14 +97,15 @@
     "react-test-renderer": "^16.3.0",
     "rimraf": "^2.6.2",
     "storybook-addon-styled-component-theme": "^1.1.1",
-    "stylelint": "^13.7.2",
-    "stylelint-config-recommended": "^2.1.0",
+    "styled-components": "^5.2.1",
+    "stylelint": "^13.11.0",
+    "stylelint-config-recommended": "^3.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.3.2",
     "ts-jest": "^26.4.1",
-    "tslint": "^5.8.0",
-    "tslint-config-standard": "^7.0.0",
-    "tslint-react": "^3.2.0",
+    "tslint": "^6.1.3",
+    "tslint-config-standard": "^9.0.0",
+    "tslint-react": "^5.0.0",
     "typescript": "^3.0.1",
     "typescript-plugin-styled-components": "0.0.6"
   },

diff --git a/src/components/buttonsIndicators/button/__snapshots__/spec.tsx.snap b/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;
@@ -41,15 +41,15 @@ exports[`Button tests basic tests matches the snapshot 1`] = `
   padding: 11px 15px;
 }
 
-.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 {
+.c1 {
   color: #fff;
   background: var(--button-state-color);
   border: 1px solid var(--button-state-color);

diff --git a/src/components/buttonsIndicators/button/style.ts b/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);

diff --git a/src/components/dataTables/table/style.ts b/src/components/dataTables/table/style.ts
@@ -5,19 +5,19 @@
 import styled, { css } from '../../../theme'
 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')<{}>`
   min-width: 100%;
   margin: 24px 0;
 `
 
-export const StyledTH = styled<Partial<Cell>, 'th'>('th')`
+export const StyledTH = styled('th')<Partial<Cell>>`
   text-transform: uppercase;
   text-align: left;
   font-family: ${p => p.theme.fontFamily.body};
@@ -36,7 +36,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}
@@ -45,7 +45,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;

diff --git a/src/components/formControls/checkbox/style.ts b/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: ${p => p.theme.fontFamily.body};
   display: flex;
   align-items: center;
@@ -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: 8px;
 `
 
-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;

diff --git a/src/components/formControls/controlWrapper/style.ts b/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: 24px;
 `
 
-export const StyledLabel = styled<Partial<Props>, 'div'>('div')`
+export const StyledLabel = styled('div')<Partial<Props>>`
   width: 100%;
   font-family: ${p => p.theme.fontFamily.body};
   line-height: normal;

diff --git a/src/components/formControls/input/style.ts b/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;

diff --git a/src/components/formControls/radio/style.ts b/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;

diff --git a/src/components/formControls/select/__snapshots__/spec.tsx.snap b/src/components/formControls/select/__snapshots__/spec.tsx.snap
@@ -114,13 +114,13 @@ exports[`Select tests basic tests matches the snapshot 1`] = `
   text-overflow: ellipsis;
 }
 
-.c6 {
+.c5 {
   width: 100%;
   height: 100%;
   fill: currentColor;
 }
 
-.c5 {
+.c6 {
   -webkit-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   transform: rotate(-90deg);