Merge branch 'master' into beta

.eslintrc.js

@@ -1,12 +1,15 @@
 module.exports = {
   parser: '@typescript-eslint/parser',
   extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
     'prettier/@typescript-eslint',
     'plugin:prettier/recommended',
     'plugin:react/recommended',
   ],
   parserOptions: {
+    project: ['tsconfig.json'],
     ecmaVersion: 2018,
     sourceType: 'module',
     ecmaFeatures: {
@@ -27,15 +30,10 @@ module.exports = {
     '@typescript-eslint/no-empty-interface': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/no-use-before-define': ['error', { functions: false }],
-    '@typescript-eslint/no-unused-vars': [
-      'error',
-      {
-        vars: 'all',
-        args: 'after-used',
-        ignoreRestSiblings: true, // to be able to omit some props when destructuring
-        varsIgnorePattern: 'component', // "component" is used for testing and it's used for testing
-      },
-    ],
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-unused-vars-experimental': 'error',
     // -- React
     'react/display-name': 'off',
     'react/no-unescaped-entities': 'off', // TODO: needs research

.github/workflows/ci.yaml

@@ -0,0 +1,54 @@
+name: CI
+on: push
+
+jobs:
+  check:
+    name: Test and release
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          persist-credentials: false
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+
+      - name: Cache pnpm modules
+        uses: actions/cache@v2
+        env:
+          cache-name: cache-pnpm-modules
+        with:
+          path: ~/.pnpm-store
+          # package.json is not tracked so we can reuse pnpm global store
+          key: ${{ runner.os }}-build-${{ env.cache-name }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}
+            
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 6.9.1
+          run_install: true
+
+      - name: Run typecheck
+        run: pnpm typecheck
+
+      - name: Run tests
+        run: pnpm test
+
+      - name: Run linter
+        uses: reviewdog/action-eslint@v1
+        with:
+          reporter: github-pr-review
+          eslint_flags: 'src/**/*.{ts,tsx}'
+
+      - name: Compile the code
+        run: pnpm compile
+
+      - name: Release
+        run: pnpm release
+        env:
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -1,5 +1,6 @@
 # NPM #
 /node_modules
+.pnpm-debug.log
 
 # Used to test the build process
 styleguide/*

README.md

@@ -2,7 +2,7 @@
 
 <img src="./etc/images/turtle.gif" />
 
-[![CircleCI](https://circleci.com/gh/zopaUK/react-components/tree/master.svg?style=svg)](https://circleci.com/gh/zopaUK/react-components/tree/master)
+![CI/CD](https://github.com/zopaUK/react-components/workflows/CI/badge.svg)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

etc/netlify/empty-project/package.json

@@ -0,0 +1,3 @@
+{
+  "description": "This is an empty project used as the destination of netlify npm install."
+}

etc/netlify/netlify.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+set -xeuo pipefail
+test "$CI" = true || exit 1
+npx pnpm install -r --store-dir=node_modules/.pnpm-store
+npx pnpm build

etc/semantic-release/config.js

@@ -7,7 +7,12 @@ module.exports = {
     '@semantic-release/release-notes-generator',
     '@semantic-release/changelog',
     '@semantic-release/npm',
-    '@semantic-release/git',
+    [
+      '@semantic-release/git',
+      {
+        message: 'chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}',
+      },
+    ],
     '@semantic-release/github',
   ],
 };

netlify.toml

@@ -1,3 +1,7 @@
+# Workarround netlify with pnpm
+# See: https://github.com/netlify/build/issues/1633
+
+[build]
+  command = "./etc/netlify/netlify.sh"
 [build.environment]
-  # See https://community.netlify.com/t/using-pnpm-and-pnpm-workspaces/2759
-  NPM_FLAGS="--prefix=/dev/null"
+  NPM_FLAGS="--prefix=./etc/netlify/empty-project/"

package.json

@@ -2,7 +2,7 @@
   "name": "@zopauk/react-components",
   "sideEffects": false,
   "description": "Shared react styled components for all the Zopa projects.",
-  "version": "4.43.3-beta.1",
+  "version": "4.44.2",
   "license": "MIT",
   "author": "Zopa Ltd <frontend-opensource@zopa.com> (https://zopa.com)",
   "main": "cjs/src/index.js",
@@ -23,21 +23,23 @@
     "compile:code": "rollup --config ./etc/rollup/config.js",
     "compile:clean": "rm -rf es cjs types",
     "compile:types": "tsc --p ./tsconfig.types.json",
-    "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
+    "test": "react-scripts test",
     "format": "prettier -l --write \"**/*.{ts,tsx,js,jsx,json,less,css,md}\"",
     "format:fix": "pnpm format --write",
     "lint": "eslint 'src/**/*.{ts,tsx}'",
     "lint:fix": "pnpm lint --fix",
-    "typecheck": "tsc --noEmit --types node,jest",
+    "typecheck": "tsc --noEmit",
     "release": "semantic-release -e ./etc/semantic-release/config.js --no-ci"
   },
   "dependencies": {
+    "@types/classnames": "^2.2.10",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@tippyjs/react": "^4.2.5",
     "@types/react-headroom": "^2.2.1",
     "@types/react-modal": "^3.12.0",
     "@types/util-deprecate": "^1.0.0",
+    "clsx": "^1.1.1",
     "classnames": "^2.3.1",
     "core-js": "^3.11.2",
     "deprecated-prop-type": "^1.0.0",
@@ -71,10 +73,10 @@
     "@rollup/plugin-url": "5.0.1",
     "@semantic-release/changelog": "5.0.1",
     "@semantic-release/git": "9.0.0",
-    "@testing-library/jest-dom": "5.11.0",
-    "@testing-library/react": "10.4.5",
-    "@testing-library/react-hooks": "3.3.0",
-    "@types/jest": "^26.0.23",
+    "@testing-library/jest-dom": "5.14.1",
+    "@testing-library/react": "12.0.0",
+    "@testing-library/react-hooks": "7.0.1",
+    "@types/jest": "^26.0.24",
     "@types/jest-axe": "^3.5.1",
     "@types/lodash.throttle": "4.1.6",
     "@types/node": "12.12.45",
@@ -86,22 +88,20 @@
     "babel-preset-react-app": "^9.1.2",
     "commitizen": "4.1.2",
     "cz-conventional-changelog": "3.2.0",
-    "eslint": "6.8.0",
+    "eslint": "7.30.0",
     "eslint-config-prettier": "6.11.0",
     "eslint-plugin-prettier": "3.1.4",
     "eslint-plugin-react": "7.20.3",
     "husky": "4.2.5",
     "jest-axe": "4.1.0",
-    "jest-environment-jsdom-sixteen": "1.0.3",
     "jest-junit": "10.0.0",
     "jest-styled-components": "7.0.2",
     "lint-staged": "10.2.11",
-    "pnpm": "^5.18.9",
     "prettier": "2.0.5",
     "react": "16.13.1",
     "react-docgen-typescript": "1.18.0",
     "react-dom": "16.13.1",
-    "react-scripts": "^3.4.4",
+    "react-scripts": "^4.0.3",
     "react-styleguidist": "11.0.8",
     "react-test-renderer": "16.13.1",
     "rollup": "2.21.0",
@@ -110,8 +110,8 @@
     "semantic-release": "17.2.3",
     "styled-components": "^5.1.0",
     "typescript": "3.9.6",
-    "webpack": "4.42.0",
-    "webpack-dev-server": "3.11.0"
+    "webpack": "4.44.2",
+    "webpack-dev-server": "3.11.1"
   },
   "browserslist": [
     "cover 95% in GB",