diff --git a/.eslintrc b/.eslintrc
index a463a51a0..ef0c95b4d 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,19 +1,10 @@
{
"root": true,
- "globals": {
- "expect": false
- },
- "parser": "@babel/eslint-parser",
"plugins": ["jest-dom"],
"extends": ["adslot", "plugin:jest-dom/recommended"],
"settings": {
"lodash": {
"version": 4
- },
- "import/resolver": {
- "node": {
- "extensions": [".js", ".jsx"]
- }
}
},
"rules": {
diff --git a/babel.config.js b/babel.config.js
index 4b8ea93bb..027efd08b 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,7 +1,5 @@
const isDevelopment = process.env.TYPE === 'development';
-const plugins = ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-object-rest-spread'];
-
const presets = [
['@babel/preset-env', { useBuiltIns: 'usage', corejs: { version: 3 } }],
[
@@ -30,6 +28,5 @@ const env = {
module.exports = {
presets,
- plugins,
env,
};
diff --git a/config/paths.js b/config/paths.js
index bab528307..28ee7d8b6 100644
--- a/config/paths.js
+++ b/config/paths.js
@@ -4,7 +4,7 @@ const fs = require('fs');
// Make sure any symlinks in the project folder are resolved:
// https://github.com/facebookincubator/create-react-app/issues/637
const appDirectory = fs.realpathSync(process.cwd());
-const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
module.exports = {
appBuild: resolveApp('docs'),
diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
index 565ab4c2d..0ce5be083 100644
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
@@ -34,7 +34,7 @@ module.exports = webpackMerge(commonConfig, {
// This is the URL that app is served from. We use "/" in development.
publicPath: '/',
// Point sourcemap entries to original disk location (format as URL on Windows)
- devtoolModuleFilenameTemplate: info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
+ devtoolModuleFilenameTemplate: (info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},
cache: { type: 'filesystem' },
module: {
diff --git a/config/webpack.config.dist.js b/config/webpack.config.dist.js
index 8dd147e63..bffde7295 100644
--- a/config/webpack.config.dist.js
+++ b/config/webpack.config.dist.js
@@ -161,7 +161,7 @@ module.exports = webpackMerge(commonConfig, {
return cssnano()
.process(input, postcssOptions)
- .then(result => {
+ .then((result) => {
return {
code: result.css,
map: result.map,
diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
index 1917d4227..843baf137 100644
--- a/config/webpack.config.prod.js
+++ b/config/webpack.config.prod.js
@@ -155,7 +155,7 @@ module.exports = webpackMerge(commonConfig, {
return cssnano()
.process(input, postcssOptions)
- .then(result => {
+ .then((result) => {
return {
code: result.css,
map: result.map,
diff --git a/config/webpackDevServer.config.js b/config/webpackDevServer.config.js
index 69410ac49..099172c5b 100644
--- a/config/webpackDevServer.config.js
+++ b/config/webpackDevServer.config.js
@@ -5,7 +5,7 @@ const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const host = process.env.HOST || '0.0.0.0';
// eslint-disable-next-line
-module.exports = function(proxy, allowedHost) {
+module.exports = function (proxy, allowedHost) {
return {
// WebpackDevServer 2.4.3 introduced a security fix that prevents remote
// websites from potentially accessing local content through DNS rebinding:
diff --git a/package-lock.json b/package-lock.json
index 413a97406..c2f695624 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -422,14 +422,14 @@
}
},
"@babel/helpers": {
- "version": "7.14.8",
- "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.8.tgz",
- "integrity": "sha512-ZRDmI56pnV+p1dH6d+UN6GINGz7Krps3+270qqI9UJ4wxYThfAIcI5i7j5vXC4FJ3Wap+S9qcebxeYiqn87DZw==",
+ "version": "7.15.3",
+ "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.15.3.tgz",
+ "integrity": "sha512-HwJiz52XaS96lX+28Tnbu31VeFSQJGOeKHJeaEPQlTl7PnlhFElWPj8tUXtqFIzeN86XxXoBr+WFAyK2PPVz6g==",
"dev": true,
"requires": {
"@babel/template": "^7.14.5",
- "@babel/traverse": "^7.14.8",
- "@babel/types": "^7.14.8"
+ "@babel/traverse": "^7.15.0",
+ "@babel/types": "^7.15.0"
}
},
"@babel/highlight": {
@@ -1106,9 +1106,9 @@
}
},
"@babel/plugin-transform-block-scoping": {
- "version": "7.14.5",
- "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.14.5.tgz",
- "integrity": "sha512-LBYm4ZocNgoCqyxMLoOnwpsmQ18HWTQvql64t3GvMUzLQrNoV1BDG0lNftC8QKYERkZgCCT/7J5xWGObGAyHDw==",
+ "version": "7.15.3",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.15.3.tgz",
+ "integrity": "sha512-nBAzfZwZb4DkaGtOes1Up1nOAp9TDRRFw4XBzBBSG9QK7KVFmYzgj9o9sbPv7TX5ofL4Auq4wZnxCoPnI/lz2Q==",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.14.5"
@@ -4136,12 +4136,6 @@
"@types/estree": "*"
}
},
- "@types/eslint-visitor-keys": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
- "integrity": "sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==",
- "dev": true
- },
"@types/estree": {
"version": "0.0.50",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz",
@@ -4331,17 +4325,18 @@
"dev": true
},
"@typescript-eslint/eslint-plugin": {
- "version": "3.10.1",
- "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.10.1.tgz",
- "integrity": "sha512-PQg0emRtzZFWq6PxBcdxRH3QIQiyFO3WCVpRL3fgj5oQS3CDs3AeAKfv4DxNhzn8ITdNJGJ4D3Qw8eAJf3lXeQ==",
+ "version": "4.29.2",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.29.2.tgz",
+ "integrity": "sha512-x4EMgn4BTfVd9+Z+r+6rmWxoAzBaapt4QFqE+d8L8sUtYZYLDTK6VG/y/SMMWA5t1/BVU5Kf+20rX4PtWzUYZg==",
"dev": true,
"requires": {
- "@typescript-eslint/experimental-utils": "3.10.1",
- "debug": "^4.1.1",
+ "@typescript-eslint/experimental-utils": "4.29.2",
+ "@typescript-eslint/scope-manager": "4.29.2",
+ "debug": "^4.3.1",
"functional-red-black-tree": "^1.0.1",
- "regexpp": "^3.0.0",
- "semver": "^7.3.2",
- "tsutils": "^3.17.1"
+ "regexpp": "^3.1.0",
+ "semver": "^7.3.5",
+ "tsutils": "^3.21.0"
},
"dependencies": {
"debug": {
@@ -4386,61 +4381,96 @@
}
},
"@typescript-eslint/experimental-utils": {
- "version": "3.10.1",
- "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-3.10.1.tgz",
- "integrity": "sha512-DewqIgscDzmAfd5nOGe4zm6Bl7PKtMG2Ad0KG8CUZAHlXfAKTF9Ol5PXhiMh39yRL2ChRH1cuuUGOcVyyrhQIw==",
+ "version": "4.29.2",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.29.2.tgz",
+ "integrity": "sha512-P6mn4pqObhftBBPAv4GQtEK7Yos1fz/MlpT7+YjH9fTxZcALbiiPKuSIfYP/j13CeOjfq8/fr9Thr2glM9ub7A==",
"dev": true,
"requires": {
- "@types/json-schema": "^7.0.3",
- "@typescript-eslint/types": "3.10.1",
- "@typescript-eslint/typescript-estree": "3.10.1",
- "eslint-scope": "^5.0.0",
- "eslint-utils": "^2.0.0"
+ "@types/json-schema": "^7.0.7",
+ "@typescript-eslint/scope-manager": "4.29.2",
+ "@typescript-eslint/types": "4.29.2",
+ "@typescript-eslint/typescript-estree": "4.29.2",
+ "eslint-scope": "^5.1.1",
+ "eslint-utils": "^3.0.0"
+ },
+ "dependencies": {
+ "eslint-utils": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+ "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+ "dev": true,
+ "requires": {
+ "eslint-visitor-keys": "^2.0.0"
+ }
+ }
}
},
"@typescript-eslint/parser": {
- "version": "3.10.1",
- "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-3.10.1.tgz",
- "integrity": "sha512-Ug1RcWcrJP02hmtaXVS3axPPTTPnZjupqhgj+NnZ6BCkwSImWk/283347+x9wN+lqOdK9Eo3vsyiyDHgsmiEJw==",
+ "version": "4.29.2",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.29.2.tgz",
+ "integrity": "sha512-WQ6BPf+lNuwteUuyk1jD/aHKqMQ9jrdCn7Gxt9vvBnzbpj7aWEf+aZsJ1zvTjx5zFxGCt000lsbD9tQPEL8u6g==",
"dev": true,
"requires": {
- "@types/eslint-visitor-keys": "^1.0.0",
- "@typescript-eslint/experimental-utils": "3.10.1",
- "@typescript-eslint/types": "3.10.1",
- "@typescript-eslint/typescript-estree": "3.10.1",
- "eslint-visitor-keys": "^1.1.0"
+ "@typescript-eslint/scope-manager": "4.29.2",
+ "@typescript-eslint/types": "4.29.2",
+ "@typescript-eslint/typescript-estree": "4.29.2",
+ "debug": "^4.3.1"
},
"dependencies": {
- "eslint-visitor-keys": {
- "version": "1.3.0",
- "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
- "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+ "debug": {
+ "version": "4.3.2",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+ "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+ "dev": true,
+ "requires": {
+ "ms": "2.1.2"
+ }
+ },
+ "ms": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"dev": true
}
}
},
+ "@typescript-eslint/scope-manager": {
+ "version": "4.29.2",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.29.2.tgz",
+ "integrity": "sha512-mfHmvlQxmfkU8D55CkZO2sQOueTxLqGvzV+mG6S/6fIunDiD2ouwsAoiYCZYDDK73QCibYjIZmGhpvKwAB5BOA==",
+ "dev": true,
+ "requires": {
+ "@typescript-eslint/types": "4.29.2",
+ "@typescript-eslint/visitor-keys": "4.29.2"
+ }
+ },
"@typescript-eslint/types": {
- "version": "3.10.1",
- "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-3.10.1.tgz",
- "integrity": "sha512-+3+FCUJIahE9q0lDi1WleYzjCwJs5hIsbugIgnbB+dSCYUxl8L6PwmsyOPFZde2hc1DlTo/xnkOgiTLSyAbHiQ==",
+ "version": "4.29.2",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.29.2.tgz",
+ "integrity": "sha512-K6ApnEXId+WTGxqnda8z4LhNMa/pZmbTFkDxEBLQAbhLZL50DjeY0VIDCml/0Y3FlcbqXZrABqrcKxq+n0LwzQ==",
"dev": true
},
"@typescript-eslint/typescript-estree": {
- "version": "3.10.1",
- "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-3.10.1.tgz",
- "integrity": "sha512-QbcXOuq6WYvnB3XPsZpIwztBoquEYLXh2MtwVU+kO8jgYCiv4G5xrSP/1wg4tkvrEE+esZVquIPX/dxPlePk1w==",
+ "version": "4.29.2",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.29.2.tgz",
+ "integrity": "sha512-TJ0/hEnYxapYn9SGn3dCnETO0r+MjaxtlWZ2xU+EvytF0g4CqTpZL48SqSNn2hXsPolnewF30pdzR9a5Lj3DNg==",
"dev": true,
"requires": {
- "@typescript-eslint/types": "3.10.1",
- "@typescript-eslint/visitor-keys": "3.10.1",
- "debug": "^4.1.1",
- "glob": "^7.1.6",
+ "@typescript-eslint/types": "4.29.2",
+ "@typescript-eslint/visitor-keys": "4.29.2",
+ "debug": "^4.3.1",
+ "globby": "^11.0.3",
"is-glob": "^4.0.1",
- "lodash": "^4.17.15",
- "semver": "^7.3.2",
- "tsutils": "^3.17.1"
+ "semver": "^7.3.5",
+ "tsutils": "^3.21.0"
},
"dependencies": {
+ "array-union": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+ "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+ "dev": true
+ },
"debug": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
@@ -4450,6 +4480,26 @@
"ms": "2.1.2"
}
},
+ "globby": {
+ "version": "11.0.4",
+ "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
+ "integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
+ "dev": true,
+ "requires": {
+ "array-union": "^2.1.0",
+ "dir-glob": "^3.0.1",
+ "fast-glob": "^3.1.1",
+ "ignore": "^5.1.4",
+ "merge2": "^1.3.0",
+ "slash": "^3.0.0"
+ }
+ },
+ "ignore": {
+ "version": "5.1.8",
+ "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
+ "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
+ "dev": true
+ },
"lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -4474,6 +4524,12 @@
"lru-cache": "^6.0.0"
}
},
+ "slash": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+ "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+ "dev": true
+ },
"yallist": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -4483,20 +4539,13 @@
}
},
"@typescript-eslint/visitor-keys": {
- "version": "3.10.1",
- "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-3.10.1.tgz",
- "integrity": "sha512-9JgC82AaQeglebjZMgYR5wgmfUdUc+EitGUUMW8u2nDckaeimzW+VsoLV6FoimPv2id3VQzfjwBxEMVz08ameQ==",
+ "version": "4.29.2",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.29.2.tgz",
+ "integrity": "sha512-bDgJLQ86oWHJoZ1ai4TZdgXzJxsea3Ee9u9wsTAvjChdj2WLcVsgWYAPeY7RQMn16tKrlQaBnpKv7KBfs4EQag==",
"dev": true,
"requires": {
- "eslint-visitor-keys": "^1.1.0"
- },
- "dependencies": {
- "eslint-visitor-keys": {
- "version": "1.3.0",
- "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
- "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
- "dev": true
- }
+ "@typescript-eslint/types": "4.29.2",
+ "eslint-visitor-keys": "^2.0.0"
}
},
"@webassemblyjs/ast": {
@@ -6751,15 +6800,15 @@
"dev": true
},
"core-js": {
- "version": "3.16.1",
- "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.16.1.tgz",
- "integrity": "sha512-AAkP8i35EbefU+JddyWi12AWE9f2N/qr/pwnDtWz4nyUIBGMJPX99ANFFRSw6FefM374lDujdtLDyhN2A/btHw==",
+ "version": "3.16.2",
+ "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.16.2.tgz",
+ "integrity": "sha512-P0KPukO6OjMpjBtHSceAZEWlDD1M2Cpzpg6dBbrjFqFhBHe/BwhxaP820xKOjRn/lZRQirrCusIpLS/n2sgXLQ==",
"dev": true
},
"core-js-compat": {
- "version": "3.16.1",
- "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.16.1.tgz",
- "integrity": "sha512-NHXQXvRbd4nxp9TEmooTJLUf94ySUG6+DSsscBpTftN1lQLQ4LjnWvc7AoIo4UjDsFF3hB8Uh5LLCRRdaiT5MQ==",
+ "version": "3.16.2",
+ "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.16.2.tgz",
+ "integrity": "sha512-4lUshXtBXsdmp8cDWh6KKiHUg40AjiuPD3bOWkNVsr1xkAhpUqCjaZ8lB1bKx9Gb5fXcbRbFJ4f4qpRIRTuJqQ==",
"dev": true,
"requires": {
"browserslist": "^4.16.7",
@@ -6864,17 +6913,6 @@
"node-fetch": "2.6.1"
}
},
- "cross-spawn": {
- "version": "5.1.0",
- "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
- "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
- "dev": true,
- "requires": {
- "lru-cache": "^4.0.1",
- "shebang-command": "^1.2.0",
- "which": "^1.2.9"
- }
- },
"css": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
@@ -8559,36 +8597,33 @@
}
},
"eslint-config-adslot": {
- "version": "1.0.3",
- "resolved": "https://registry.npmjs.org/eslint-config-adslot/-/eslint-config-adslot-1.0.3.tgz",
- "integrity": "sha512-mKZeO8GIThMX7j93lSWjdIX95wnygUn5ZLmUooqWqeYHjcokkW63rJwYstnyfI0f2pBaf+mg39wIW0SS1jIGgw==",
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/eslint-config-adslot/-/eslint-config-adslot-1.1.0.tgz",
+ "integrity": "sha512-ndXljGYsUgxQTUvLRaFiF8fibR3c33025tGXqONZ/9O7Ma2GyARGTtjZnT4UdHLYBkDFI8dzINTXImNl9fEY9g==",
"dev": true,
"requires": {
- "@typescript-eslint/eslint-plugin": "^3.7.0",
- "@typescript-eslint/parser": "^3.7.0",
- "confusing-browser-globals": "^1.0.9",
- "eslint-config-prettier": "^6.11.0",
- "eslint-plugin-chai-friendly": "^0.6.0",
- "eslint-plugin-import": "^2.22.0",
- "eslint-plugin-jsx-a11y": "^6.3.1",
- "eslint-plugin-lodash": "^7.1.0",
- "eslint-plugin-react": "^7.20.3",
- "eslint-plugin-react-hooks": "^4.0.8"
+ "@typescript-eslint/eslint-plugin": "^4.29.2",
+ "@typescript-eslint/parser": "^4.29.2",
+ "confusing-browser-globals": "^1.0.10",
+ "eslint-config-prettier": "^8.3.0",
+ "eslint-plugin-chai-friendly": "^0.7.2",
+ "eslint-plugin-import": "^2.24.1",
+ "eslint-plugin-jsx-a11y": "^6.4.1",
+ "eslint-plugin-lodash": "^7.3.0",
+ "eslint-plugin-react": "^7.24.0",
+ "eslint-plugin-react-hooks": "^4.2.0"
}
},
"eslint-config-prettier": {
- "version": "6.15.0",
- "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.15.0.tgz",
- "integrity": "sha512-a1+kOYLR8wMGustcgAjdydMsQ2A/2ipRPwRKUmfYaSxc9ZPcrku080Ctl6zrZzZNs/U82MjSv+qKREkoq3bJaw==",
- "dev": true,
- "requires": {
- "get-stdin": "^6.0.0"
- }
+ "version": "8.3.0",
+ "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz",
+ "integrity": "sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==",
+ "dev": true
},
"eslint-import-resolver-node": {
- "version": "0.3.5",
- "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.5.tgz",
- "integrity": "sha512-XMoPKjSpXbkeJ7ZZ9icLnJMTY5Mc1kZbCakHquaFsXPpyWOwK0TK6CODO+0ca54UoM9LKOxyUNnoVZRl8TeaAg==",
+ "version": "0.3.6",
+ "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
+ "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==",
"dev": true,
"requires": {
"debug": "^3.2.7",
@@ -8810,32 +8845,32 @@
}
},
"eslint-plugin-chai-friendly": {
- "version": "0.6.0",
- "resolved": "https://registry.npmjs.org/eslint-plugin-chai-friendly/-/eslint-plugin-chai-friendly-0.6.0.tgz",
- "integrity": "sha512-Uvvv1gkbRGp/qfN15B0kQyQWg+oFA8buDSqrwmW3egNSk/FpqH2MjQqKOuKwmEL6w4QIQrIjDp+gg6kGGmD3oQ==",
+ "version": "0.7.2",
+ "resolved": "https://registry.npmjs.org/eslint-plugin-chai-friendly/-/eslint-plugin-chai-friendly-0.7.2.tgz",
+ "integrity": "sha512-LOIfGx5sZZ5FwM1shr2GlYAWV9Omdi+1/3byuVagvQNoGUuU0iHhp7AfjA1uR+4dJ4Isfb4+FwBJgQajIw9iAg==",
"dev": true
},
"eslint-plugin-import": {
- "version": "2.24.0",
- "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.24.0.tgz",
- "integrity": "sha512-Kc6xqT9hiYi2cgybOc0I2vC9OgAYga5o/rAFinam/yF/t5uBqxQbauNPMC6fgb640T/89P0gFoO27FOilJ/Cqg==",
+ "version": "2.24.1",
+ "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.24.1.tgz",
+ "integrity": "sha512-KSFWhNxPH8OGJwpRJJs+Z7I0a13E2iFQZJIvSnCu6KUs4qmgAm3xN9GYBCSoiGWmwA7gERZPXqYQjcoCROnYhQ==",
"dev": true,
"requires": {
"array-includes": "^3.1.3",
"array.prototype.flat": "^1.2.4",
"debug": "^2.6.9",
"doctrine": "^2.1.0",
- "eslint-import-resolver-node": "^0.3.5",
+ "eslint-import-resolver-node": "^0.3.6",
"eslint-module-utils": "^2.6.2",
"find-up": "^2.0.0",
"has": "^1.0.3",
- "is-core-module": "^2.4.0",
+ "is-core-module": "^2.6.0",
"minimatch": "^3.0.4",
- "object.values": "^1.1.3",
+ "object.values": "^1.1.4",
"pkg-up": "^2.0.0",
"read-pkg-up": "^3.0.0",
"resolve": "^1.20.0",
- "tsconfig-paths": "^3.9.0"
+ "tsconfig-paths": "^3.10.1"
},
"dependencies": {
"doctrine": {
@@ -8862,6 +8897,15 @@
"integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
"dev": true
},
+ "is-core-module": {
+ "version": "2.6.0",
+ "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.6.0.tgz",
+ "integrity": "sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==",
+ "dev": true,
+ "requires": {
+ "has": "^1.0.3"
+ }
+ },
"locate-path": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
@@ -9069,9 +9113,9 @@
},
"dependencies": {
"@babel/runtime": {
- "version": "7.14.8",
- "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz",
- "integrity": "sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==",
+ "version": "7.15.3",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.3.tgz",
+ "integrity": "sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==",
"dev": true,
"requires": {
"regenerator-runtime": "^0.13.4"
@@ -9086,12 +9130,12 @@
}
},
"eslint-plugin-lodash": {
- "version": "7.2.0",
- "resolved": "https://registry.npmjs.org/eslint-plugin-lodash/-/eslint-plugin-lodash-7.2.0.tgz",
- "integrity": "sha512-7Wf7SOCK90OFgPd8LleVQa8uCWBZDLjPKxaFdwM/aINDyXhley0nRKSKL6TESGFCCMduYPox5VLttvqV2Vfbig==",
+ "version": "7.3.0",
+ "resolved": "https://registry.npmjs.org/eslint-plugin-lodash/-/eslint-plugin-lodash-7.3.0.tgz",
+ "integrity": "sha512-FQM8HklruJzulPawX3uZqWbeyN3bQT4hjVCpFYMrWo0Hdz1qDCwp1v3JS4zjhdssAXdwCxdnyrNMCZJK70GeUQ==",
"dev": true,
"requires": {
- "lodash": ">=4"
+ "lodash": "^4.17.21"
}
},
"eslint-plugin-react": {
@@ -10660,18 +10704,6 @@
"integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
"dev": true
},
- "get-stdin": {
- "version": "6.0.0",
- "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
- "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==",
- "dev": true
- },
- "get-stream": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
- "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
- "dev": true
- },
"get-value": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
@@ -15711,16 +15743,6 @@
"tslib": "^2.0.3"
}
},
- "lru-cache": {
- "version": "4.1.5",
- "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
- "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
- "dev": true,
- "requires": {
- "pseudomap": "^1.0.2",
- "yallist": "^2.1.2"
- }
- },
"lz-string": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
@@ -17845,37 +17867,11 @@
"dev": true
},
"prettier": {
- "version": "1.18.2",
- "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.18.2.tgz",
- "integrity": "sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==",
+ "version": "2.3.2",
+ "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz",
+ "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==",
"dev": true
},
- "prettier-check": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/prettier-check/-/prettier-check-2.0.0.tgz",
- "integrity": "sha512-HZG53XQTJ9Cyi5hi1VFVVFxdlhITJybpZAch3ib9KqI05VUxV+F5Hip0GhSWRItrlDzVyqjSoDQ9KqIn7AHYyw==",
- "dev": true,
- "requires": {
- "execa": "^0.6.0"
- },
- "dependencies": {
- "execa": {
- "version": "0.6.3",
- "resolved": "https://registry.npmjs.org/execa/-/execa-0.6.3.tgz",
- "integrity": "sha1-V7aaWU8IF1nGnlNw8NF7nLEWWP4=",
- "dev": true,
- "requires": {
- "cross-spawn": "^5.0.1",
- "get-stream": "^3.0.0",
- "is-stream": "^1.1.0",
- "npm-run-path": "^2.0.0",
- "p-finally": "^1.0.0",
- "signal-exit": "^3.0.0",
- "strip-eof": "^1.0.0"
- }
- }
- }
- },
"pretty-error": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-3.0.4.tgz",
@@ -18022,12 +18018,6 @@
"integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
"dev": true
},
- "pseudomap": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
- "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
- "dev": true
- },
"psl": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
@@ -19024,9 +19014,9 @@
},
"dependencies": {
"@babel/runtime": {
- "version": "7.14.8",
- "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz",
- "integrity": "sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==",
+ "version": "7.15.3",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.3.tgz",
+ "integrity": "sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==",
"dev": true,
"requires": {
"regenerator-runtime": "^0.13.4"
@@ -23228,12 +23218,6 @@
"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
"dev": true
},
- "yallist": {
- "version": "2.1.2",
- "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
- "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
- "dev": true
- },
"yaml": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
diff --git a/package.json b/package.json
index e9e64f600..f1c0a19b2 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
"dist": "npm run clean && npm run dist:prod && npm run dist:dev && npm run generate-docs && npm run dist:demo",
"lint:sass": "sass-lint -v",
"lint:eslint": "eslint --ext .jsx,.js ./src && eslint --ext .jsx,.js ./www",
- "lint:prettier": "prettier-check '{src,www,config}/**/*.{js,json,jsx,mdx}'",
+ "lint:prettier": "prettier '{src,www,config}/**/*.{js,json,jsx,mdx}' --check",
"lint": "npm run lint:eslint && npm run lint:sass && npm run lint:prettier",
"prettier": "prettier \"{src,www,config}/**/*.{js,json,jsx,mdx}\" --write",
"svgo": "svgo --recursive --multipass --folder=src --config=svgo-config.js",
@@ -42,7 +42,8 @@
"prettier": {
"singleQuote": true,
"trailingComma": "es5",
- "printWidth": 120
+ "printWidth": 120,
+ "arrowParens": "always"
},
"lint-staged": {
"{src,www,config}/**/*.{js,json,jsx,mdx}": [
@@ -70,8 +71,6 @@
"@babel/cli": "^7.14.8",
"@babel/core": "^7.15.0",
"@babel/eslint-parser": "^7.15.0",
- "@babel/plugin-proposal-class-properties": "^7.14.5",
- "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
"@babel/preset-env": "^7.15.0",
"@babel/preset-react": "^7.14.5",
"@commitlint/cli": "^13.1.0",
@@ -92,14 +91,14 @@
"buffer": "^6.0.3",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"classnames": "^2.3.1",
- "core-js": "^3.16.1",
+ "core-js": "^3.16.2",
"cross-env": "^7.0.3",
"css-loader": "^6.2.0",
"css-minimizer-webpack-plugin": "^3.0.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5",
"eslint": "^7.32.0",
- "eslint-config-adslot": "^1.0.3",
+ "eslint-config-adslot": "^1.1.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-jest-dom": "^3.9.0",
"eslint-webpack-plugin": "^3.0.1",
@@ -117,8 +116,7 @@
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-loader": "^6.1.1",
"postcss-safe-parser": "^6.0.0",
- "prettier": "^1.18.2",
- "prettier-check": "^2.0.0",
+ "prettier": "^2.3.2",
"prism-react-renderer": "^1.2.1",
"prop-types": "^15.7.2",
"react-bootstrap": "^0.31.5",
diff --git a/src/components/Accordion/index.jsx b/src/components/Accordion/index.jsx
index e6a20e341..c09b15103 100644
--- a/src/components/Accordion/index.jsx
+++ b/src/components/Accordion/index.jsx
@@ -40,15 +40,15 @@ class Accordion extends React.PureComponent {
: _.slice(this.props.defaultActivePanelIds, 0, this.props.maxExpand),
};
- onPanelClick = panelId => {
+ onPanelClick = (panelId) => {
const { maxExpand } = this.props;
if (_.includes(this.state.activePanelIds, panelId)) {
// remove panelId out of the active list
- this.setState(prevState => ({ activePanelIds: _.without(prevState.activePanelIds, panelId) }));
+ this.setState((prevState) => ({ activePanelIds: _.without(prevState.activePanelIds, panelId) }));
} else {
// drop panels from the beginning if max opened panels count is reached
- this.setState(prevState => {
+ this.setState((prevState) => {
let newActivePanelIds = [...prevState.activePanelIds, panelId];
if (maxExpand !== 'max' && newActivePanelIds.length > maxExpand) {
newActivePanelIds = _.drop(newActivePanelIds, newActivePanelIds.length - maxExpand);
@@ -76,7 +76,7 @@ class Accordion extends React.PureComponent {
}
}
- renderPanelFromChildren = child => {
+ renderPanelFromChildren = (child) => {
const { id, isCollapsed } = child.props;
// prevent rendering if child is not an instance of Accordion.Panel
diff --git a/src/components/Accordion/index.spec.jsx b/src/components/Accordion/index.spec.jsx
index 857ee1832..439534540 100644
--- a/src/components/Accordion/index.spec.jsx
+++ b/src/components/Accordion/index.spec.jsx
@@ -15,7 +15,7 @@ afterEach(cleanup);
describe('', () => {
const { panel1, panel2, panel3 } = PanelMocks;
- const makeProps = override =>
+ const makeProps = (override) =>
_.merge(
{
dts: 'my-accordion',
@@ -84,7 +84,7 @@ describe('', () => {
});
it('should expand or collapse any panels with a restriction of `maxExpand`', () => {
- const panel = id => ({
+ const panel = (id) => ({
id,
title: `Panel ${id}`,
dts: `panel-${id}`,
diff --git a/src/components/ActionPanel/index.jsx b/src/components/ActionPanel/index.jsx
index 7d5875bec..5a75e8a25 100644
--- a/src/components/ActionPanel/index.jsx
+++ b/src/components/ActionPanel/index.jsx
@@ -8,8 +8,8 @@ import './styles.scss';
const ActionPanel = React.forwardRef((props, ref) => {
const { title, className, size, onClose, children, actionButton, isModal, closeIcon } = props;
- const addBodyClass = classname => document.body.classList.add(classname);
- const removeBodyClass = classname => document.body.classList.remove(classname);
+ const addBodyClass = (classname) => document.body.classList.add(classname);
+ const removeBodyClass = (classname) => document.body.classList.remove(classname);
useEffect(() => {
if (isModal) addBodyClass('modal-open');
diff --git a/src/components/ActionPanel/index.spec.jsx b/src/components/ActionPanel/index.spec.jsx
index a82ab1882..a4942d791 100644
--- a/src/components/ActionPanel/index.spec.jsx
+++ b/src/components/ActionPanel/index.spec.jsx
@@ -7,7 +7,7 @@ import ActionPanel from '.';
afterEach(cleanup);
describe('', () => {
- const makeProps = override =>
+ const makeProps = (override) =>
_.merge(
{
title: 'Action Panel',
diff --git a/src/components/AlertInput/index.jsx b/src/components/AlertInput/index.jsx
index fa8c62a66..f96506a73 100644
--- a/src/components/AlertInput/index.jsx
+++ b/src/components/AlertInput/index.jsx
@@ -55,7 +55,7 @@ export default class AlertInput extends React.PureComponent {
this.setState({ isPopoverVisible: false });
};
- handleInputFocus = event => {
+ handleInputFocus = (event) => {
event.target.select();
this.setState({
isFocused: true,
@@ -67,7 +67,7 @@ export default class AlertInput extends React.PureComponent {
}
};
- handleInputBlur = event => {
+ handleInputBlur = (event) => {
this.setState({
isFocused: false,
isPopoverVisible: false,
@@ -79,16 +79,8 @@ export default class AlertInput extends React.PureComponent {
};
render() {
- const {
- dts,
- popoverPlacement,
- disabled,
- prefixAddon,
- suffixAddon,
- alertStatus,
- alertMessage,
- onValueChange,
- } = this.props;
+ const { dts, popoverPlacement, disabled, prefixAddon, suffixAddon, alertStatus, alertMessage, onValueChange } =
+ this.props;
const className = classnames(
baseClass,
diff --git a/src/components/Avatar/index.jsx b/src/components/Avatar/index.jsx
index d6f546840..5b529a2e3 100644
--- a/src/components/Avatar/index.jsx
+++ b/src/components/Avatar/index.jsx
@@ -17,9 +17,9 @@ const Avatar = ({ color, givenName, tooltip, image, surname }) => (
>
{image ?
: null}
-
{`${_.head(givenName) || ''}${_.head(
- surname
- ) || ''}`}
+ {`${_.head(givenName) || ''}${
+ _.head(surname) || ''
+ }`}
);
diff --git a/src/components/Breadcrumb/index.jsx b/src/components/Breadcrumb/index.jsx
index 3f4bab04f..2fdd1e89e 100644
--- a/src/components/Breadcrumb/index.jsx
+++ b/src/components/Breadcrumb/index.jsx
@@ -8,7 +8,7 @@ import './styles.scss';
const Breadcrumb = ({ rootNode, divider, nodes, onClick, disabled }) => {
const baseClass = 'aui--breadcrumb';
const className = classnames(baseClass, { [`${baseClass}--disabled`]: disabled });
- const onClickFunc = newActiveId => !disabled && onClick(newActiveId);
+ const onClickFunc = (newActiveId) => !disabled && onClick(newActiveId);
if (nodes.length === 0) {
return ;
@@ -41,7 +41,7 @@ Breadcrumb.defaultProps = {
rootNode: { id: 'all', label: 'All' },
divider: '>',
nodes: [],
- onClick: newActiveId => {
+ onClick: (newActiveId) => {
throw new Error(`Breadcrumb needs an onClick handler to take ${newActiveId}`);
},
disabled: false,
diff --git a/src/components/Breadcrumb/index.spec.jsx b/src/components/Breadcrumb/index.spec.jsx
index bac912c2b..c759b6eb3 100644
--- a/src/components/Breadcrumb/index.spec.jsx
+++ b/src/components/Breadcrumb/index.spec.jsx
@@ -8,7 +8,11 @@ describe('', () => {
let nodes;
const onClick = jest.fn();
beforeEach(() => {
- nodes = [{ id: 'a', label: 'Canada' }, { id: 'b', label: 'British Columbia' }, { id: 'c', label: 'Victoria' }];
+ nodes = [
+ { id: 'a', label: 'Canada' },
+ { id: 'b', label: 'British Columbia' },
+ { id: 'c', label: 'Victoria' },
+ ];
});
it('should render empty with the component className when no nodes', () => {
@@ -28,7 +32,7 @@ describe('', () => {
expect(queryAllByTestId('breadcrumb-node-wrapper')[0]).toHaveTextContent('All');
expect(queryAllByTestId('breadcrumb-node-divider')).toHaveLength(nodes.length);
- queryAllByTestId('breadcrumb-node-divider').forEach(node =>
+ queryAllByTestId('breadcrumb-node-divider').forEach((node) =>
expect(node).toHaveTextContent('/', { normalizeSpaces: false })
);
@@ -41,7 +45,7 @@ describe('', () => {
it('should error when clicking a node with no onClick handler', () => {
const { queryAllByTestId } = render();
- console.error = err => {
+ console.error = (err) => {
throw new Error(err);
};
expect(() => fireEvent.click(queryAllByTestId('breadcrumb-node-wrapper')[0])).toThrow(
diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx
index 406c42876..125134770 100644
--- a/src/components/Button/index.jsx
+++ b/src/components/Button/index.jsx
@@ -8,7 +8,7 @@ import Spinner from '../Spinner';
import { expandDts } from '../../lib/utils';
import './styles.scss';
-const Button = props => {
+const Button = (props) => {
const { theme, children, className, disabled, dts, href, inverse, isLoading, size, target, type } = props;
const baseClass = 'aui--button';
const classes = classNames(
diff --git a/src/components/ButtonGroup/index.jsx b/src/components/ButtonGroup/index.jsx
index 404e15428..338f00220 100644
--- a/src/components/ButtonGroup/index.jsx
+++ b/src/components/ButtonGroup/index.jsx
@@ -19,7 +19,7 @@ class ButtonGroup extends React.PureComponent {
};
injectProps(children) {
- return React.Children.map(children, child => {
+ return React.Children.map(children, (child) => {
if (React.isValidElement(child)) {
const buttonProps = {
...(this.props.theme ? { theme: this.props.theme } : {}),
@@ -28,7 +28,7 @@ class ButtonGroup extends React.PureComponent {
...(this.props.size ? { size: this.props.size } : {}),
};
- const childNodes = React.Children.map(child.props.children, childNode =>
+ const childNodes = React.Children.map(child.props.children, (childNode) =>
React.isValidElement(childNode)
? React.cloneElement(childNode, {
...childNode.props,
diff --git a/src/components/Card/index.jsx b/src/components/Card/index.jsx
index 1270ef728..0e855c0dd 100644
--- a/src/components/Card/index.jsx
+++ b/src/components/Card/index.jsx
@@ -33,12 +33,18 @@ const Card = ({ children, className, accent, dts }) => {
const baseClass = 'card-component';
const containerClassNames = classnames(baseClass, { [`accent accent-${accent}`]: accent }, className);
- const nestedChildren = React.Children.map(children, (
- child // eslint-disable-line lodash/prefer-lodash-method
- ) => (!_.get(child, 'props.append') ? child : null));
- const appendedChildren = React.Children.map(children, (
- child // eslint-disable-line lodash/prefer-lodash-method
- ) => (_.get(child, 'props.append') ? child : null));
+ const nestedChildren = React.Children.map(
+ children,
+ (
+ child // eslint-disable-line lodash/prefer-lodash-method
+ ) => (!_.get(child, 'props.append') ? child : null)
+ );
+ const appendedChildren = React.Children.map(
+ children,
+ (
+ child // eslint-disable-line lodash/prefer-lodash-method
+ ) => (_.get(child, 'props.append') ? child : null)
+ );
return (
diff --git a/src/components/Carousel/index.spec.jsx b/src/components/Carousel/index.spec.jsx
index 3efd2bdab..5d6c6759a 100644
--- a/src/components/Carousel/index.spec.jsx
+++ b/src/components/Carousel/index.spec.jsx
@@ -23,7 +23,7 @@ describe('
', () => {
![2](path/to/image-2.jpg)
);
- getAllByTestId('carousel-image-wrapper').forEach(each => expect(container).toContainElement(each));
+ getAllByTestId('carousel-image-wrapper').forEach((each) => expect(container).toContainElement(each));
getAllByTestId('carousel-image-wrapper').forEach((each, index) =>
expect(each).toHaveAttribute('src', `path/to/image-${index + 1}.jpg`)
);
diff --git a/src/components/Checkbox/index.jsx b/src/components/Checkbox/index.jsx
index 00e1fd81f..d84a71f45 100644
--- a/src/components/Checkbox/index.jsx
+++ b/src/components/Checkbox/index.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
import { expandDts } from '../../lib/utils';
import './styles.scss';
-const getNextState = checked => {
+const getNextState = (checked) => {
if (checked === 'partial') return false;
return !checked;
};
diff --git a/src/components/CheckboxGroup/index.jsx b/src/components/CheckboxGroup/index.jsx
index cd90355bf..360fc343e 100644
--- a/src/components/CheckboxGroup/index.jsx
+++ b/src/components/CheckboxGroup/index.jsx
@@ -8,14 +8,14 @@ import { expandDts } from '../../lib/utils';
const CheckboxGroup = ({ id, className, dts, children, value, name, inline, onChange }) => {
const handleCheckboxChange = (nextCheckboxState, checkboxName, checkboxValue) => {
const newValues = _.includes(value, checkboxValue)
- ? value.filter(item => item !== checkboxValue)
+ ? value.filter((item) => item !== checkboxValue)
: [...value, checkboxValue];
onChange(newValues, name);
};
const renderChildren = () =>
- React.Children.map(children, child => {
+ React.Children.map(children, (child) => {
if (!child) return null;
if (child.type === Checkbox) {
diff --git a/src/components/ConfirmModal/index.spec.jsx b/src/components/ConfirmModal/index.spec.jsx
index 24585a8ed..8e6c32a27 100644
--- a/src/components/ConfirmModal/index.spec.jsx
+++ b/src/components/ConfirmModal/index.spec.jsx
@@ -72,7 +72,7 @@ describe('
', () => {
it('should throw when we click Apply without a handler', () => {
const { getByTestId } = render(
);
- console.error = err => {
+ console.error = (err) => {
throw new Error(err);
};
expect(() => fireEvent.click(getByTestId('confirm-modal-confirm'))).toThrow(
diff --git a/src/components/DatePicker/index.jsx b/src/components/DatePicker/index.jsx
index df81aed44..b62da5ff6 100644
--- a/src/components/DatePicker/index.jsx
+++ b/src/components/DatePicker/index.jsx
@@ -9,7 +9,7 @@ const adslotDatePickerPropTypes = {
};
class DatePicker extends React.PureComponent {
- handleDateChangeRaw = event => {
+ handleDateChangeRaw = (event) => {
event.preventDefault();
};
diff --git a/src/components/FilePicker/index.jsx b/src/components/FilePicker/index.jsx
index 0201fed10..955af3f3d 100644
--- a/src/components/FilePicker/index.jsx
+++ b/src/components/FilePicker/index.jsx
@@ -60,7 +60,7 @@ class FilePickerComponent extends React.PureComponent {
fileName: '',
};
- onChange = changeEvent => {
+ onChange = (changeEvent) => {
if (!this.state.isFileSelected) {
this.setState({ isFileSelected: true, fileName: changeEvent.target.files[0].name });
this.props.onSelect(changeEvent.target.files[0]);
diff --git a/src/components/Grid/Cell/index.spec.jsx b/src/components/Grid/Cell/index.spec.jsx
index 295e6acc6..37134b8af 100644
--- a/src/components/Grid/Cell/index.spec.jsx
+++ b/src/components/Grid/Cell/index.spec.jsx
@@ -7,7 +7,7 @@ afterEach(cleanup);
describe('
', () => {
const componentClass = 'grid-component-cell';
- const getClassNames = classSuffixes => {
+ const getClassNames = (classSuffixes) => {
const classNames = classSuffixHelper({ classSuffixes, componentClass });
return `${componentClass}${classNames}`;
};
diff --git a/src/components/Grid/Row/index.spec.jsx b/src/components/Grid/Row/index.spec.jsx
index d13d51dde..42a940311 100644
--- a/src/components/Grid/Row/index.spec.jsx
+++ b/src/components/Grid/Row/index.spec.jsx
@@ -7,7 +7,7 @@ afterEach(cleanup);
describe('
', () => {
const componentClass = 'grid-component-row';
- const getClassNames = classSuffixes => {
+ const getClassNames = (classSuffixes) => {
const classNames = classSuffixHelper({ classSuffixes, componentClass });
return `${componentClass}${classNames}`;
};
diff --git a/src/components/HoverDropdownMenu/index.spec.jsx b/src/components/HoverDropdownMenu/index.spec.jsx
index 39d460176..d5e6aaf61 100644
--- a/src/components/HoverDropdownMenu/index.spec.jsx
+++ b/src/components/HoverDropdownMenu/index.spec.jsx
@@ -68,7 +68,7 @@ describe('
', () => {
expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
expect(queryAllByTestId('popover-link-item-wrapper')).toHaveLength(2);
- queryAllByTestId('popover-link-item-wrapper').forEach(item => expect(item).toHaveClass('popover-link-item'));
+ queryAllByTestId('popover-link-item-wrapper').forEach((item) => expect(item).toHaveClass('popover-link-item'));
expect(queryAllByTestId('popover-link-item-wrapper')[0]).toHaveTextContent('Link 1');
expect(queryAllByTestId('popover-link-item-wrapper')[1]).toHaveTextContent('Logout');
});
diff --git a/src/components/ListPicker/index.jsx b/src/components/ListPicker/index.jsx
index 357ea74dd..8fb35d398 100644
--- a/src/components/ListPicker/index.jsx
+++ b/src/components/ListPicker/index.jsx
@@ -11,16 +11,13 @@ import GridRow from '../Grid/Row';
import GridCell from '../Grid/Cell';
import './styles.scss';
-const isSubset = (array, subArray) =>
- _(subArray)
- .difference(array)
- .isEmpty();
+const isSubset = (array, subArray) => _(subArray).difference(array).isEmpty();
class ListPickerComponent extends React.PureComponent {
constructor(props) {
super(props);
['applyAction', 'cancelAction', 'deselectItem', 'getApplyButtonState', 'defaultState', 'selectItem'].forEach(
- methodName => {
+ (methodName) => {
this[methodName] = this[methodName].bind(this);
}
);
@@ -123,7 +120,7 @@ class ListPickerComponent extends React.PureComponent {
{itemInfo.label}
- {_.map(itemInfo.properties, property => (
+ {_.map(itemInfo.properties, (property) => (
{property.label}
diff --git a/src/components/ListPicker/index.spec.jsx b/src/components/ListPicker/index.spec.jsx
index bbc2bd943..21d68dcbf 100644
--- a/src/components/ListPicker/index.spec.jsx
+++ b/src/components/ListPicker/index.spec.jsx
@@ -109,7 +109,10 @@ describe('', () => {
it('should render with props for split pane', () => {
const itemInfo = {
label: 'User Details',
- properties: [{ label: 'Name', value: 'Jill Smith' }, { label: 'Age', value: '21' }],
+ properties: [
+ { label: 'Name', value: 'Jill Smith' },
+ { label: 'Age', value: '21' },
+ ],
};
const initialSelection = getInitialSelection();
const emptySvgSymbol = ;
@@ -263,7 +266,7 @@ describe('', () => {
});
it('should throw when we click Apply without a handler', () => {
- console.error = err => {
+ console.error = (err) => {
throw new Error(err);
};
const { getByText } = render();
@@ -280,7 +283,7 @@ describe('', () => {
});
it('should throw when we click Close without a handler', () => {
- console.error = err => {
+ console.error = (err) => {
throw new Error(err);
};
const { getByText } = render();
diff --git a/src/components/ListPicker/mocks.jsx b/src/components/ListPicker/mocks.jsx
index 7ba731ef5..c5d69dcac 100644
--- a/src/components/ListPicker/mocks.jsx
+++ b/src/components/ListPicker/mocks.jsx
@@ -1,7 +1,7 @@
import immutable from 'seamless-immutable';
import React from 'react';
-const labelFormatter = item => `${item.givenName} ${item.surname}`;
+const labelFormatter = (item) => `${item.givenName} ${item.surname}`;
const teamMember1 = { givenName: 'John', id: 1, surname: 'Smith' };
diff --git a/src/components/ListPickerPure/index.jsx b/src/components/ListPickerPure/index.jsx
index f78bc113f..e57142da4 100644
--- a/src/components/ListPickerPure/index.jsx
+++ b/src/components/ListPickerPure/index.jsx
@@ -86,7 +86,7 @@ class ListPickerPureComponent extends React.PureComponent {
) : null}
- {_.map(items, item => (
+ {_.map(items, (item) => (
{labelFormatter(item)}
@@ -137,7 +137,7 @@ ListPickerPureComponent.defaultProps = {
throw new Error('AdslotUi ListPickerPure needs a deselectItem handler');
},
emptyMessage: 'No items to select.',
- labelFormatter: item => item.label,
+ labelFormatter: (item) => item.label,
items: [],
itemType: 'item',
selectItem: () => {
diff --git a/src/components/ListPickerPure/index.spec.jsx b/src/components/ListPickerPure/index.spec.jsx
index 7b872772f..4b78c3642 100644
--- a/src/components/ListPickerPure/index.spec.jsx
+++ b/src/components/ListPickerPure/index.spec.jsx
@@ -11,15 +11,8 @@ const queryAllByDts = queryAllByAttribute.bind(null, 'data-test-selector');
afterEach(cleanup);
describe('', () => {
- const {
- getInitialSelection,
- labelFormatter,
- teamMember4,
- userHeaders,
- nodeUserHeaders,
- users,
- usersWithUuid,
- } = ListPickerMocks;
+ const { getInitialSelection, labelFormatter, teamMember4, userHeaders, nodeUserHeaders, users, usersWithUuid } =
+ ListPickerMocks;
const selectedItems = getInitialSelection();
@@ -62,7 +55,7 @@ describe('', () => {
expect(getByText('Team')).toHaveClass('grid-component-cell');
expect(getByText('Member')).toHaveClass('grid-component-cell');
- queryAllByTestId('grid-row-wrapper').forEach(each => expect(each).toHaveClass('grid-component-row'));
+ queryAllByTestId('grid-row-wrapper').forEach((each) => expect(each).toHaveClass('grid-component-row'));
expect(queryAllByTestId('grid-row-wrapper')[1]).toContainElement(getByText('John Smith'));
expect(queryAllByTestId('grid-row-wrapper')[2]).toContainElement(getByText('Jane Doe'));
expect(queryAllByTestId('grid-row-wrapper')[3]).toContainElement(getByText('Jack White'));
@@ -103,7 +96,7 @@ describe('', () => {
expect(queryAllByTestId('grid-row-wrapper')[0]).toContainElement(getByText('Team'));
expect(queryAllByTestId('grid-row-wrapper')[0]).toContainElement(getByText('Member'));
- queryAllByTestId('grid-row-wrapper').forEach(each => expect(each).toHaveClass('grid-component-row'));
+ queryAllByTestId('grid-row-wrapper').forEach((each) => expect(each).toHaveClass('grid-component-row'));
expect(queryAllByTestId('grid-row-wrapper')[1]).toContainElement(getByText('Jones Cheng'));
expect(queryAllByTestId('grid-row-wrapper')[2]).toContainElement(getByText('Joe Huang'));
@@ -142,7 +135,7 @@ describe('', () => {
expect(getByText('Required')).toHaveClass('grid-component-cell grid-component-cell-header-addon');
expect(queryAllByDts(container, 'addon')).toHaveLength(3);
- queryAllByDts(container, 'addon').forEach(each => {
+ queryAllByDts(container, 'addon').forEach((each) => {
expect(each).toHaveClass('grid-component-cell-addon');
expect(each).toHaveTextContent('Nothing to show.');
});
@@ -187,7 +180,7 @@ describe('', () => {
});
it('should throw when we select without a `selectItem` handler', () => {
- console.error = err => {
+ console.error = (err) => {
throw new Error(err);
};
const props = { items: users, selectedItems };
@@ -203,7 +196,7 @@ describe('', () => {
});
it('should throw when we deselect without a `deselectItem` handler', () => {
- console.error = err => {
+ console.error = (err) => {
throw new Error(err);
};
const props = { items: users, selectedItems };
diff --git a/src/components/Navigation/index.jsx b/src/components/Navigation/index.jsx
index b2edaee3f..3ae2b7bef 100644
--- a/src/components/Navigation/index.jsx
+++ b/src/components/Navigation/index.jsx
@@ -8,7 +8,7 @@ import './styles.scss';
const Nav = ({ stacked, className, onSelect, activeKey, barPosition, children, dts }) => {
let navItems = [];
- React.Children.forEach(children, child => {
+ React.Children.forEach(children, (child) => {
navItems.push(React.cloneElement(child, { onSelect, activeKey: activeKey }));
});
diff --git a/src/components/OverlayLoader/index.jsx b/src/components/OverlayLoader/index.jsx
index fdca14990..6e21c4e6e 100644
--- a/src/components/OverlayLoader/index.jsx
+++ b/src/components/OverlayLoader/index.jsx
@@ -7,7 +7,7 @@ const OverlayLoader = ({ text, top, heading, disableBackground }) => (
event.stopPropagation() } : {})}
+ {...(disableBackground ? { onClick: (event) => event.stopPropagation() } : {})}
>
diff --git a/src/components/PagedGrid/index.jsx b/src/components/PagedGrid/index.jsx
index b35f60739..5f12c06bf 100644
--- a/src/components/PagedGrid/index.jsx
+++ b/src/components/PagedGrid/index.jsx
@@ -29,15 +29,15 @@ class PagedGridComponent extends React.PureComponent {
- {_.map(columns, column => (
+ {_.map(columns, (column) => (
{column.label}
))}
- {_.map(pageItems, item => (
+ {_.map(pageItems, (item) => (
- {_.map(columns, column => (
+ {_.map(columns, (column) => (
this.setState({ activePage: selectedPage })}
+ onSelect={(selectedPage) => this.setState({ activePage: selectedPage })}
prev
/>
diff --git a/src/components/PagedGrid/index.spec.jsx b/src/components/PagedGrid/index.spec.jsx
index dbb404a41..fcda97ea6 100644
--- a/src/components/PagedGrid/index.spec.jsx
+++ b/src/components/PagedGrid/index.spec.jsx
@@ -24,12 +24,15 @@ describe('
', () => {
it('should render with items', () => {
const props = {
columns: [{ key: 'name' }],
- items: [{ name: 'item1', id: 1 }, { name: 'item2', id: 2 }],
+ items: [
+ { name: 'item1', id: 1 },
+ { name: 'item2', id: 2 },
+ ],
perPage: 1,
};
const { queryByTestId, queryAllByTestId } = render(
);
expect(queryAllByTestId('grid-row-wrapper')).toHaveLength(2);
- queryAllByTestId('grid-row-wrapper').forEach(gridRow =>
+ queryAllByTestId('grid-row-wrapper').forEach((gridRow) =>
expect(gridRow).not.toHaveClass('grid-component-row-vertical-cell-border')
);
expect(queryByTestId('pagination-wrapper')).toBeInTheDocument();
@@ -38,13 +41,17 @@ describe('
', () => {
it('should update grid when new page selected or items updated', () => {
const props = {
columns: [{ key: 'name' }],
- items: [{ name: 'item1', id: 1 }, { name: 'item2', id: 2 }, { name: 'item3', id: 3 }],
+ items: [
+ { name: 'item1', id: 1 },
+ { name: 'item2', id: 2 },
+ { name: 'item3', id: 3 },
+ ],
perPage: 1,
verticalCellBorder: true,
};
const { queryAllByTestId, getByTestId, getByText, rerender } = render(
);
expect(queryAllByTestId('grid-row-wrapper')).toHaveLength(2);
- queryAllByTestId('grid-row-wrapper').forEach(gridRow =>
+ queryAllByTestId('grid-row-wrapper').forEach((gridRow) =>
expect(gridRow).toHaveClass('grid-component-row-vertical-cell-border')
);
expect(getByTestId('paged-grid-pagination-info')).toHaveClass('pagedgrid-component-pagination-info');
diff --git a/src/components/Pagination/index.spec.jsx b/src/components/Pagination/index.spec.jsx
index 03fcc6c57..546310b02 100644
--- a/src/components/Pagination/index.spec.jsx
+++ b/src/components/Pagination/index.spec.jsx
@@ -63,7 +63,7 @@ describe('
', () => {
expect(queryAllByTestId('button-wrapper')).toHaveLength(4);
const buttons = queryAllByTestId('button-wrapper');
- _.forEach(buttons, button => expect(button).not.toHaveClass('aui--pagination-sides'));
+ _.forEach(buttons, (button) => expect(button).not.toHaveClass('aui--pagination-sides'));
});
it('should trigger selecting events of buttons when active page is 1', () => {
diff --git a/src/components/Popover/constants.js b/src/components/Popover/constants.js
index d265ccd08..4fe52138c 100644
--- a/src/components/Popover/constants.js
+++ b/src/components/Popover/constants.js
@@ -3,7 +3,11 @@ import _ from 'lodash';
export const themes = ['light', 'dark', 'warn', 'error', 'info', 'success'];
const basePlacements = ['auto', 'top', 'right', 'bottom', 'left'];
-export const popoverPlacements = _.flatMap(basePlacements, trigger => [trigger, `${trigger}-start`, `${trigger}-end`]);
+export const popoverPlacements = _.flatMap(basePlacements, (trigger) => [
+ trigger,
+ `${trigger}-start`,
+ `${trigger}-end`,
+]);
/**
* Describes the positioning strategy to use.
diff --git a/src/components/Popover/index.jsx b/src/components/Popover/index.jsx
index e40f54dda..6cf61cbfb 100644
--- a/src/components/Popover/index.jsx
+++ b/src/components/Popover/index.jsx
@@ -9,7 +9,7 @@ import './styles.scss';
const triggerPropTypes = PropTypes.oneOf(['click', 'hover', 'focus', 'disabled']);
-const Popover = props => {
+const Popover = (props) => {
const { isOpen } = props;
const [isPopoverOpen, setIsPopoverOpen] = useState(isOpen);
diff --git a/src/components/PrettyDiff/index.jsx b/src/components/PrettyDiff/index.jsx
index 9c5a68ced..f8565b3e5 100644
--- a/src/components/PrettyDiff/index.jsx
+++ b/src/components/PrettyDiff/index.jsx
@@ -8,7 +8,7 @@ const PrettyDiff = ({ newText, oldText }) => {
const dmp = new DiffMatchPatch();
const diffs = dmp.diff_main(oldText, newText);
- const getTextClass = diffType => {
+ const getTextClass = (diffType) => {
switch (diffType) {
case DiffMatchPatch.DIFF_DELETE:
return 'pretty-diff-component-delete';
diff --git a/src/components/PrettyDiff/index.spec.jsx b/src/components/PrettyDiff/index.spec.jsx
index 60b0d1971..59498c63e 100644
--- a/src/components/PrettyDiff/index.spec.jsx
+++ b/src/components/PrettyDiff/index.spec.jsx
@@ -15,7 +15,7 @@ describe('
', () => {
expect(queryAllByTestId('pretty-diff-component-equal')).toHaveLength(3);
- queryAllByTestId('pretty-diff-component-equal').forEach(span =>
+ queryAllByTestId('pretty-diff-component-equal').forEach((span) =>
expect(span).toHaveClass('pretty-diff-component-equal')
);
expect(queryAllByTestId('pretty-diff-component-equal')[0]).toHaveTextContent('
', () => {
expect(queryAllByTestId('pretty-diff-component-insert')).toHaveLength(2);
expect(queryAllByTestId('pretty-diff-component-insert')[0]).toHaveClass('pretty-diff-component-insert');
- queryAllByTestId('pretty-diff-component-insert').forEach(span =>
+ queryAllByTestId('pretty-diff-component-insert').forEach((span) =>
expect(span).toHaveClass('pretty-diff-component-insert')
);
expect(queryAllByTestId('pretty-diff-component-insert')[0]).toHaveTextContent('slow');
diff --git a/src/components/RadioGroup/index.jsx b/src/components/RadioGroup/index.jsx
index 05e998ff9..eec71c983 100644
--- a/src/components/RadioGroup/index.jsx
+++ b/src/components/RadioGroup/index.jsx
@@ -5,13 +5,13 @@ import PropTypes from 'prop-types';
import { expandDts } from '../../lib/utils';
class RadioGroup extends React.PureComponent {
- onChangeDefault = event => {
+ onChangeDefault = (event) => {
const newValue = event.currentTarget.value;
this.props.onChange(newValue);
};
renderChildren = () =>
- React.Children.map(this.props.children, child => {
+ React.Children.map(this.props.children, (child) => {
const childProps = _.assign({}, child.props, {
name: this.props.name,
checked: this.props.value === child.props.value,
diff --git a/src/components/RichTextEditor/BlockStyleButtons.jsx b/src/components/RichTextEditor/BlockStyleButtons.jsx
index a3f77575e..3a06f2d96 100644
--- a/src/components/RichTextEditor/BlockStyleButtons.jsx
+++ b/src/components/RichTextEditor/BlockStyleButtons.jsx
@@ -9,19 +9,16 @@ const BLOCK_TYPES = [
{ label:
![number]({numberIcon})
, style: 'ordered-list-item' },
];
-const BlockStyleButtons = props => {
+const BlockStyleButtons = (props) => {
const { editorState } = props;
const selection = editorState.getSelection();
- const blockType = editorState
- .getCurrentContent()
- .getBlockForKey(selection.getStartKey())
- .getType();
+ const blockType = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
- const onToggle = style => {
+ const onToggle = (style) => {
props.onToggle(RichUtils.toggleBlockType(props.editorState, style));
};
- return BLOCK_TYPES.map(type => (
+ return BLOCK_TYPES.map((type) => (
, style: 'UNDERLINE' },
];
-const InlineStyleButtons = props => {
+const InlineStyleButtons = (props) => {
const currentStyle = props.editorState.getCurrentInlineStyle();
- const onToggle = style => {
+ const onToggle = (style) => {
props.onToggle(RichUtils.toggleInlineStyle(props.editorState, style));
};
- return INLINE_STYLES.map(type => (
+ return INLINE_STYLES.map((type) => (
{
});
const mouseDownHandler = React.useCallback(
- event => {
+ (event) => {
event.preventDefault();
event.stopPropagation();
return onToggle();
diff --git a/src/components/RichTextEditor/index.jsx b/src/components/RichTextEditor/index.jsx
index 273fc16af..7b2ace341 100644
--- a/src/components/RichTextEditor/index.jsx
+++ b/src/components/RichTextEditor/index.jsx
@@ -20,7 +20,7 @@ const RichTextEditor = ({ className, value, initialValue, onChange, placeholder
const [editorState, setEditorState] = React.useState(initialValue || EditorState.createEmpty());
- const handleOnChange = newState => {
+ const handleOnChange = (newState) => {
if (!value) {
setEditorState(newState);
}
@@ -29,7 +29,7 @@ const RichTextEditor = ({ className, value, initialValue, onChange, placeholder
}
};
- const handleKeyCommand = command => {
+ const handleKeyCommand = (command) => {
const newState = RichUtils.handleKeyCommand(editorState, command);
if (newState) {
handleOnChange(newState);
@@ -74,7 +74,7 @@ RichTextEditor.defaultProps = {
RichTextEditor.createEmpty = EditorState.createEmpty;
RichTextEditor.createWithText = EditorState.createWithText;
-RichTextEditor.stateToHTML = input => stateToHTML(input.getCurrentContent());
-RichTextEditor.stateFromHTML = input => EditorState.createWithContent(stateFromHTML(input));
+RichTextEditor.stateToHTML = (input) => stateToHTML(input.getCurrentContent());
+RichTextEditor.stateFromHTML = (input) => EditorState.createWithContent(stateFromHTML(input));
export default RichTextEditor;
diff --git a/src/components/RichTextEditor/index.spec.jsx b/src/components/RichTextEditor/index.spec.jsx
index 59f03eb35..dcb19139e 100644
--- a/src/components/RichTextEditor/index.spec.jsx
+++ b/src/components/RichTextEditor/index.spec.jsx
@@ -7,12 +7,12 @@ import RichTextEditor from '.';
const getByClass = queryByAttribute.bind(null, 'class');
const queryAllByClass = queryAllByAttribute.bind(null, 'class');
-const createPasteEvent = html => {
+const createPasteEvent = (html) => {
const text = html.replace('<[^>]*>', '');
return {
clipboardData: {
types: ['text/plain', 'text/html'],
- getData: type => (type === 'text/plain' ? text : html),
+ getData: (type) => (type === 'text/plain' ? text : html),
},
};
};
diff --git a/src/components/Search/index.jsx b/src/components/Search/index.jsx
index b4e4fd7a9..3a3f788fd 100644
--- a/src/components/Search/index.jsx
+++ b/src/components/Search/index.jsx
@@ -28,7 +28,7 @@ const Search = React.forwardRef(
) => {
const [inputValue, setInputValue] = React.useState('');
- const onInputChange = event => {
+ const onInputChange = (event) => {
const eventValue = _.get(event, 'target.value');
if (onChange) {
onChange(eventValue);
@@ -52,19 +52,19 @@ const Search = React.forwardRef(
if (onClear) onClear(emptyValue);
};
- const onKeyPress = event => {
+ const onKeyPress = (event) => {
if (searchOnEnter && event.key === 'Enter') {
event.preventDefault();
onInputSearch(_.get(event, 'target.value'));
}
};
- const onInputSearch = searchValue => {
+ const onInputSearch = (searchValue) => {
const search = debounceInterval ? _.debounce(onSearch, debounceInterval) : onSearch;
search(searchValue);
};
- const onSearchButtonClick = event => {
+ const onSearchButtonClick = (event) => {
event.preventDefault();
const searchValue = value || inputValue;
onInputSearch(searchValue);
diff --git a/src/components/Search/index.spec.jsx b/src/components/Search/index.spec.jsx
index c0502d7e5..d79d38239 100644
--- a/src/components/Search/index.spec.jsx
+++ b/src/components/Search/index.spec.jsx
@@ -200,7 +200,7 @@ describe('', () => {
expect(callbacks.onSearch).toHaveBeenCalledWith('new-value');
});
- it('should fire onSearch after debounceInterval', done => {
+ it('should fire onSearch after debounceInterval', (done) => {
const callbacks = {
onSearch: jest.fn(),
};
diff --git a/src/components/SearchableCheckList/index.jsx b/src/components/SearchableCheckList/index.jsx
index 2688d6849..74ff542f1 100644
--- a/src/components/SearchableCheckList/index.jsx
+++ b/src/components/SearchableCheckList/index.jsx
@@ -11,7 +11,7 @@ const SearchableCheckList = ({ context, items, selectedItemsKeys, displayCount,
const eligibleItems = searchText
? _(items)
- .map(item => {
+ .map((item) => {
return item.label.toLowerCase().indexOf(searchText.toLowerCase()) !== -1 ? item : null;
})
.compact()
@@ -45,7 +45,7 @@ const SearchableCheckList = ({ context, items, selectedItemsKeys, displayCount,
{
+ onSearch={(value) => {
setSearchText(value);
}}
placeholder={placeholder}
@@ -56,7 +56,7 @@ const SearchableCheckList = ({ context, items, selectedItemsKeys, displayCount,
checked={mainCheckBoxState}
value={`all-${pluralLabel}`}
label={`All ${pluralLabel}`}
- onChange={nextState => {
+ onChange={(nextState) => {
onChange(nextState ? _.map(items, 'value') : []);
}}
/>
@@ -65,7 +65,7 @@ const SearchableCheckList = ({ context, items, selectedItemsKeys, displayCount,
{
+ onChange={(newSelectionList) => {
onChange(newSelectionList);
}}
>
diff --git a/src/components/SearchableCheckList/index.spec.jsx b/src/components/SearchableCheckList/index.spec.jsx
index fa1ff9f87..cb80a0eeb 100644
--- a/src/components/SearchableCheckList/index.spec.jsx
+++ b/src/components/SearchableCheckList/index.spec.jsx
@@ -38,7 +38,7 @@ describe('', () => {
expect(checkBoxesWrapper).toHaveLength(7);
// All unselected checkBoxes
- _.forEach(checkBoxesWrapper, checkBoxItem => {
+ _.forEach(checkBoxesWrapper, (checkBoxItem) => {
expect(checkBoxItem).not.toBeChecked();
});
@@ -95,12 +95,12 @@ describe('', () => {
expect(checkBoxesWrapper).toHaveLength(7);
// 2 checked elements
- _.forEach([1, 2], index => {
+ _.forEach([1, 2], (index) => {
expect(checkBoxesWrapper[index]).toBeChecked();
});
// Remaining 4 un-checked elements
- _.forEach([3, 4, 5, 6], index => {
+ _.forEach([3, 4, 5, 6], (index) => {
expect(checkBoxesWrapper[index]).not.toBeChecked();
});
});
@@ -121,7 +121,7 @@ describe('', () => {
const checkBoxesWrapper = queryAllByTestId('checkbox-input');
expect(checkBoxesWrapper).toHaveLength(7);
- _.forEach(checkBoxesWrapper, checkBoxItem => {
+ _.forEach(checkBoxesWrapper, (checkBoxItem) => {
expect(checkBoxItem).toBeChecked();
});
});
diff --git a/src/components/Select/index.jsx b/src/components/Select/index.jsx
index 9e0b7bea1..fb4f1592f 100644
--- a/src/components/Select/index.jsx
+++ b/src/components/Select/index.jsx
@@ -12,15 +12,15 @@ import './styles.scss';
const componentBaseClass = 'select-component';
-const DropdownIndicator = props => (
+const DropdownIndicator = (props) => (
);
-const ClearIndicator = props => ✕;
+const ClearIndicator = (props) => ✕;
-const selectContainerBuilder = extraProps => props => {
+const selectContainerBuilder = (extraProps) => (props) => {
const containerProps = {
...props,
innerProps: {
@@ -35,8 +35,8 @@ const selectContainerBuilder = extraProps => props => {
/**
* The propType for this component should be the same as 'React-Select` lib, plus any special props
*/
-const selectComponentBuilder = Component => {
- const SelectComponent = props => {
+const selectComponentBuilder = (Component) => {
+ const SelectComponent = (props) => {
const customComponents = { DropdownIndicator, ClearIndicator };
if (!_.isEmpty(props.dts)) {
@@ -54,7 +54,7 @@ const selectComponentBuilder = Component => {
if (props.isInModal) {
selectProps.menuPortalTarget = document.body;
selectProps.styles = {
- menuPortal: base => ({ ...base, zIndex: 9999 }),
+ menuPortal: (base) => ({ ...base, zIndex: 9999 }),
...selectProps.styles,
};
}
diff --git a/src/components/Select/index.test.jsx b/src/components/Select/index.test.jsx
index da0e5fea5..a9e8193dc 100644
--- a/src/components/Select/index.test.jsx
+++ b/src/components/Select/index.test.jsx
@@ -14,11 +14,6 @@ describe('SelectComponent', () => {
it('should render select options in body if props.isInModal is true', () => {
const wrapper = mount();
expect(wrapper.find(Select).prop('menuPortalTarget')).toEqual(document.body);
- expect(
- wrapper
- .find(Select)
- .prop('styles')
- .menuPortal()
- ).toEqual({ zIndex: 9999 });
+ expect(wrapper.find(Select).prop('styles').menuPortal()).toEqual({ zIndex: 9999 });
});
});
diff --git a/src/components/Select/styles.js b/src/components/Select/styles.js
index 3557816cb..86e5a4234 100644
--- a/src/components/Select/styles.js
+++ b/src/components/Select/styles.js
@@ -23,7 +23,7 @@ const defaultStyle = {
backgroundColor,
};
},
- indicatorSeparator: styles => ({
+ indicatorSeparator: (styles) => ({
...styles,
display: 'none',
}),
@@ -39,38 +39,38 @@ const defaultStyle = {
minHeight: 26,
borderRadius: 0,
}),
- clearIndicator: styles => ({
+ clearIndicator: (styles) => ({
...styles,
padding: '0 4px 0 8px',
}),
- dropdownIndicator: styles => ({
+ dropdownIndicator: (styles) => ({
...styles,
padding: '0 8px 0 4px',
}),
- valueContainer: styles => ({
+ valueContainer: (styles) => ({
...styles,
padding: '0 8px',
}),
- multiValue: styles => ({
+ multiValue: (styles) => ({
...styles,
color: '#fff',
backgroundColor: '#838383',
}),
- multiValueLabel: styles => ({
+ multiValueLabel: (styles) => ({
...styles,
color: '#fff',
}),
- multiValueRemove: styles => ({
+ multiValueRemove: (styles) => ({
...styles,
':hover': {},
}),
- menu: styles => ({
+ menu: (styles) => ({
...styles,
zIndex: 1060,
borderRadius: 0,
marginTop: 4,
}),
- noOptionsMessage: styles => ({
+ noOptionsMessage: (styles) => ({
...styles,
textAlign: 'left',
}),
diff --git a/src/components/Slicey/Marker/index.jsx b/src/components/Slicey/Marker/index.jsx
index 3c06955c7..e23a491aa 100644
--- a/src/components/Slicey/Marker/index.jsx
+++ b/src/components/Slicey/Marker/index.jsx
@@ -4,7 +4,7 @@ import { ROUND, QUARTER, getPointX, getPointY } from '../dataProcessor';
import './styles.scss';
const Marker = ({ fraction }) => {
- const getMarkerPoints = markerValue => {
+ const getMarkerPoints = (markerValue) => {
const pointOnCircle = ROUND * markerValue - QUARTER;
return `${getPointX(pointOnCircle)},${getPointY(pointOnCircle)} 0,0`;
};
diff --git a/src/components/Slicey/dataProcessor.js b/src/components/Slicey/dataProcessor.js
index ecddcacc5..0161e9ddd 100644
--- a/src/components/Slicey/dataProcessor.js
+++ b/src/components/Slicey/dataProcessor.js
@@ -4,6 +4,6 @@ export const QUARTER = Math.PI / 2;
export const HALF = Math.PI;
export const ROUND = Math.PI * 2;
-export const getPointX = angle => RADIUS * Math.cos(angle);
+export const getPointX = (angle) => RADIUS * Math.cos(angle);
-export const getPointY = angle => RADIUS * Math.sin(angle);
+export const getPointY = (angle) => RADIUS * Math.sin(angle);
diff --git a/src/components/Slicey/index.jsx b/src/components/Slicey/index.jsx
index 58aaea588..17863c114 100644
--- a/src/components/Slicey/index.jsx
+++ b/src/components/Slicey/index.jsx
@@ -7,9 +7,9 @@ import Marker from './Marker';
import { ROUND, HALF, QUARTER, getPointX, getPointY } from './dataProcessor';
import './styles.scss';
-const filterDataset = dataset => _.filter(dataset, ({ value }) => value > 0);
+const filterDataset = (dataset) => _.filter(dataset, ({ value }) => value > 0);
-const getArcs = datasetForArcs => {
+const getArcs = (datasetForArcs) => {
const total = _.sumBy(datasetForArcs, 'value');
const arcs = new Array(datasetForArcs.length);
@@ -34,9 +34,9 @@ const getArcs = datasetForArcs => {
};
// IE Can't draw a complete circle as an arc, so swap it to a circle element.
-const getArcElements = filteredDataset => {
+const getArcElements = (filteredDataset) => {
if (filteredDataset.length > 1) {
- return _.map(getArcs(filteredDataset), arc => );
+ return _.map(getArcs(filteredDataset), (arc) => );
}
return (
@@ -50,7 +50,7 @@ const getArcElements = filteredDataset => {
);
};
-const getSvgProps = diameter => ({
+const getSvgProps = (diameter) => ({
className: 'slicey-component',
height: diameter,
width: diameter,
diff --git a/src/components/Slicey/index.spec.jsx b/src/components/Slicey/index.spec.jsx
index 646441486..fab0cbfd4 100644
--- a/src/components/Slicey/index.spec.jsx
+++ b/src/components/Slicey/index.spec.jsx
@@ -5,7 +5,10 @@ import Slicey from '.';
afterEach(cleanup);
describe('', () => {
- const dataset = [{ label: 'positive', value: 5 }, { label: 'negative', value: 3 }];
+ const dataset = [
+ { label: 'positive', value: 5 },
+ { label: 'negative', value: 3 },
+ ];
it('should render an empty state', () => {
const { getByTestId, queryByTestId } = render();
diff --git a/src/components/SvgSymbol/index.jsx b/src/components/SvgSymbol/index.jsx
index a524e6121..31880f493 100644
--- a/src/components/SvgSymbol/index.jsx
+++ b/src/components/SvgSymbol/index.jsx
@@ -5,7 +5,7 @@ import './styles.scss';
const base64UrlPrefix = 'data:image/svg+xml;base64,';
-const SvgSymbol = props => {
+const SvgSymbol = (props) => {
let isEncoded = false;
const { classSuffixes, href, onClick, isCircle } = props;
const suffixOptions = { clickable: props.onClick };
diff --git a/src/components/Switch/index.jsx b/src/components/Switch/index.jsx
index 85bb35df6..ff8d3d0a9 100644
--- a/src/components/Switch/index.jsx
+++ b/src/components/Switch/index.jsx
@@ -6,7 +6,7 @@ import './styles.scss';
class Switch extends React.PureComponent {
state = { checked: this.props.defaultChecked || false };
- handleChange = event => {
+ handleChange = (event) => {
const { onChange, checked } = this.props;
const targetCheckedValue = _.get(event, 'target.checked');
diff --git a/src/components/Tabs/index.jsx b/src/components/Tabs/index.jsx
index b017385c3..8cf62865e 100755
--- a/src/components/Tabs/index.jsx
+++ b/src/components/Tabs/index.jsx
@@ -28,7 +28,7 @@ class Tabs extends React.PureComponent {
switchTab(key) {
const { onSelect, activeKey } = this.props;
- return event => {
+ return (event) => {
event.preventDefault();
if (this.isControlled && key !== activeKey) {
@@ -43,7 +43,7 @@ class Tabs extends React.PureComponent {
const { id, children } = this.props;
const tabs = [];
- const content = React.Children.map(children, child => {
+ const content = React.Children.map(children, (child) => {
if (_.get(child, 'type.innerName') !== Tab.innerName) {
console.error(' children must be instances of ');
return false;
@@ -61,7 +61,7 @@ class Tabs extends React.PureComponent {
return (
- {tabs.map(tab => (
+ {tabs.map((tab) => (
-
+const makeProps = (override) =>
_.merge(
{
id: '123',
diff --git a/src/components/TileGrid/index.jsx b/src/components/TileGrid/index.jsx
index 2a53ffbfb..31bcf51a6 100644
--- a/src/components/TileGrid/index.jsx
+++ b/src/components/TileGrid/index.jsx
@@ -10,7 +10,7 @@ const defaultMaxWidth = 295; // 295px
const baseClass = 'tile-grid-component';
const TileGrid = ({ title, items, onItemClick, distributed }) => {
- const cardList = _.map(items, item => {
+ const cardList = _.map(items, (item) => {
const itemClassNames = classnames(`${baseClass}-item`, `${baseClass}-item-${item.classSuffix}`, {
[`${baseClass}-item-distributed`]: distributed,
});
diff --git a/src/components/TileGrid/index.spec.jsx b/src/components/TileGrid/index.spec.jsx
index 2ffb86df3..90fcf926a 100644
--- a/src/components/TileGrid/index.spec.jsx
+++ b/src/components/TileGrid/index.spec.jsx
@@ -7,7 +7,10 @@ afterEach(cleanup);
describe('', () => {
const props = {
- items: [{ id: '0', classSuffix: 'alpha', title: 'Alpha' }, { id: '1', classSuffix: 'beta', title: 'Beta' }],
+ items: [
+ { id: '0', classSuffix: 'alpha', title: 'Alpha' },
+ { id: '1', classSuffix: 'beta', title: 'Beta' },
+ ],
onItemClick: jest.fn(),
};
@@ -66,7 +69,7 @@ describe('', () => {
props.distributed = true;
const { queryAllByTestId } = render();
expect(queryAllByTestId('tile-grid-list-item')).toHaveLength(2);
- queryAllByTestId('tile-grid-list-item').forEach(item =>
+ queryAllByTestId('tile-grid-list-item').forEach((item) =>
expect(item).toHaveClass('tile-grid-component-item-distributed')
);
});
@@ -79,7 +82,7 @@ describe('', () => {
props.items = itemsWithLink;
const { queryAllByTestId } = render();
expect(queryAllByTestId('tile-grid-list-item-img-wrapper')).toHaveLength(2);
- queryAllByTestId('tile-grid-list-item-img-wrapper').forEach(item =>
+ queryAllByTestId('tile-grid-list-item-img-wrapper').forEach((item) =>
expect(item).toHaveClass('tile-grid-component-item-img-wrapper')
);
});
diff --git a/src/components/Toast/ToastContainer.jsx b/src/components/Toast/ToastContainer.jsx
index 09b352fae..7c44bb71d 100644
--- a/src/components/Toast/ToastContainer.jsx
+++ b/src/components/Toast/ToastContainer.jsx
@@ -5,7 +5,7 @@ import { toastPlacements } from './constants';
import 'react-toastify/dist/ReactToastify.css';
import './styles.scss';
-const ToastContainerComponent = props => ;
+const ToastContainerComponent = (props) => ;
ToastContainerComponent.propTypes = {
/**
diff --git a/src/components/Toast/ToastNotification.jsx b/src/components/Toast/ToastNotification.jsx
index a22f118e7..f3429b404 100644
--- a/src/components/Toast/ToastNotification.jsx
+++ b/src/components/Toast/ToastNotification.jsx
@@ -7,7 +7,7 @@ import { toastPlacements } from './constants';
import 'react-toastify/dist/ReactToastify.css';
import './styles.scss';
-const getToastClass = theme => classnames('aui--toast-title', { [`aui--toast-title-${theme}`]: theme });
+const getToastClass = (theme) => classnames('aui--toast-title', { [`aui--toast-title-${theme}`]: theme });
export const ToastMessage = ({ toastClass, title, message }) => (
@@ -18,9 +18,10 @@ export const ToastMessage = ({ toastClass, title, message }) => (
);
-const options = props => _.omit({ className: 'aui--toast-notification-body', ...props }, ['title', 'theme', 'message']);
+const options = (props) =>
+ _.omit({ className: 'aui--toast-notification-body', ...props }, ['title', 'theme', 'message']);
-const ToastNotificationComponent = props => {
+const ToastNotificationComponent = (props) => {
const { theme, title, message } = props;
const toastClass = getToastClass(theme);
diff --git a/src/components/Totals/index.jsx b/src/components/Totals/index.jsx
index 1ae63e0e5..79e59929e 100644
--- a/src/components/Totals/index.jsx
+++ b/src/components/Totals/index.jsx
@@ -40,7 +40,7 @@ Totals.propTypes = {
Totals.defaultProps = {
toSum: [],
- valueFormatter: value => `${value}`,
+ valueFormatter: (value) => `${value}`,
};
export default Totals;
diff --git a/src/components/Totals/index.spec.jsx b/src/components/Totals/index.spec.jsx
index 65aa9d6b6..ddb14bae0 100644
--- a/src/components/Totals/index.spec.jsx
+++ b/src/components/Totals/index.spec.jsx
@@ -30,7 +30,7 @@ describe('', () => {
{ label: 'Custom Paint for Yo Whip', value: 200000 },
{ label: 'Selected', value: 50000 },
],
- valueFormatter: value => `€${(value / 100).toFixed(2)}`,
+ valueFormatter: (value) => `€${(value / 100).toFixed(2)}`,
};
const { queryByTestId, queryAllByTestId } = render();
expect(queryByTestId('grid-wrapper')).toBeInTheDocument();
diff --git a/src/components/TreePicker/Grid/index.jsx b/src/components/TreePicker/Grid/index.jsx
index ba2981a56..92935520e 100644
--- a/src/components/TreePicker/Grid/index.jsx
+++ b/src/components/TreePicker/Grid/index.jsx
@@ -48,7 +48,7 @@ const TreePickerGridComponent = ({
{label}
) : null}
- {_.map(groupedNodes, node => (
+ {_.map(groupedNodes, (node) => (
', () => {
emptySvgSymbol: svgSymbol,
emptyText: 'Empty!',
expandNode: jest.fn(),
- groupFormatter: node => node.id,
+ groupFormatter: (node) => node.id,
includeNode: jest.fn(),
itemType,
nodes: [qldNode, saNode],
@@ -68,7 +68,7 @@ describe('', () => {
expect(queryByTestId('grid-wrapper')).toBeInTheDocument();
expect(getByTestId('grid-wrapper').children).toHaveLength(3);
expect(queryAllByTestId('treepicker-grid-node-wrapper')).toHaveLength(2);
- queryAllByTestId('treepicker-grid-node-wrapper').forEach(group =>
+ queryAllByTestId('treepicker-grid-node-wrapper').forEach((group) =>
expect(group).toHaveClass('treepickergrid-component-group')
);
@@ -100,7 +100,7 @@ describe('', () => {
emptySvgSymbol: svgSymbol,
emptyText: 'Empty!',
expandNode: jest.fn(),
- groupFormatter: node => node.randomAttr,
+ groupFormatter: (node) => node.randomAttr,
includeNode: jest.fn(),
itemType,
nodes: [qldNode],
diff --git a/src/components/TreePicker/Nav/index.spec.jsx b/src/components/TreePicker/Nav/index.spec.jsx
index 81d5357ce..16005bdb5 100644
--- a/src/components/TreePicker/Nav/index.spec.jsx
+++ b/src/components/TreePicker/Nav/index.spec.jsx
@@ -7,11 +7,14 @@ const getByClass = queryByAttribute.bind(null, 'class');
const queryAllByClass = queryAllByAttribute.bind(null, 'class');
const testFunction = _.noop;
-const breadcrumbNodes = [{ id: 'a', label: 'UK' }, { id: 'b', label: 'London' }];
+const breadcrumbNodes = [
+ { id: 'a', label: 'UK' },
+ { id: 'b', label: 'London' },
+];
afterEach(cleanup);
-const mockProps = overrides => ({
+const mockProps = (overrides) => ({
breadcrumbNodes,
breadcrumbOnClick: testFunction,
onChange: testFunction,
diff --git a/src/components/TreePicker/Node/index.jsx b/src/components/TreePicker/Node/index.jsx
index 1e9f2f986..91f7b37d9 100644
--- a/src/components/TreePicker/Node/index.jsx
+++ b/src/components/TreePicker/Node/index.jsx
@@ -12,17 +12,9 @@ import './styles.scss';
const baseClass = 'treepickernode-component';
-const printPathText = node =>
- _(node.path)
- .map('label')
- .clone()
- .reverse()
- .join(', ');
-
-const printAncestorText = node =>
- _(node.ancestors)
- .map('label')
- .join(', ');
+const printPathText = (node) => _(node.path).map('label').clone().reverse().join(', ');
+
+const printAncestorText = (node) => _(node.ancestors).map('label').join(', ');
const pathPrefix = ({ type }) => (_.isEmpty(type) ? '' : `${type} in `);
@@ -137,15 +129,15 @@ TreePickerNodeComponent.propTypes = {
TreePickerNodeComponent.defaultProps = {
disabled: false,
- includeNode: node => {
+ includeNode: (node) => {
throw new Error(`AdslotUi TreePickerNode needs an includeNode handler for ${node}`);
},
- removeNode: node => {
+ removeNode: (node) => {
throw new Error(`AdslotUi TreePickerNode needs a removeNode handler for ${node}`);
},
selected: false,
- valueFormatter: value => value,
- nodeRenderer: node => node.label,
+ valueFormatter: (value) => value,
+ nodeRenderer: (node) => node.label,
};
export default TreePickerNodeComponent;
diff --git a/src/components/TreePicker/Node/index.spec.jsx b/src/components/TreePicker/Node/index.spec.jsx
index e17a80fa2..aa2e5dd87 100644
--- a/src/components/TreePicker/Node/index.spec.jsx
+++ b/src/components/TreePicker/Node/index.spec.jsx
@@ -101,7 +101,7 @@ describe('', () => {
});
it('should filter value when provided', () => {
- const valueFormatter = value => `€${value / 100}`;
+ const valueFormatter = (value) => `€${value / 100}`;
const { queryAllByTestId } = render(
);
@@ -167,7 +167,7 @@ describe('', () => {
it('should fire includeNode when clicking on the `include` button', () => {
const nodes = [];
- const includeNode = node => nodes.push(node);
+ const includeNode = (node) => nodes.push(node);
const { queryAllByTestId, getByText } = render(
);
@@ -178,7 +178,7 @@ describe('', () => {
});
it('should error on click of `include` button without includeNode handler', () => {
- console.error = err => {
+ console.error = (err) => {
throw new Error(err);
};
@@ -230,7 +230,7 @@ describe('', () => {
it('should fire removeNode when clicking on the `remove` button', () => {
const nodes = [cbrNode];
- const removeNode = node => _.remove(nodes, { id: node.id });
+ const removeNode = (node) => _.remove(nodes, { id: node.id });
const props = { itemType, node: cbrNode, removeNode, selected: true };
const { queryAllByTestId, getByText, queryByText } = render();
@@ -245,7 +245,7 @@ describe('', () => {
});
it('should error on click of `remove` button without removeNode handler', () => {
- console.error = err => {
+ console.error = (err) => {
throw new Error(err);
};
@@ -269,7 +269,7 @@ describe('', () => {
});
it('should throw error message when props does not contain `path` or `ancestors`', () => {
- console.error = err => {
+ console.error = (err) => {
throw new Error(err);
};
const nodeWithoutPathAndAncestors = _.omit(cbrNode, ['path', 'ancestors']);
diff --git a/src/components/TreePicker/index.spec.jsx b/src/components/TreePicker/index.spec.jsx
index e8ac517e1..d31387a4a 100644
--- a/src/components/TreePicker/index.spec.jsx
+++ b/src/components/TreePicker/index.spec.jsx
@@ -42,7 +42,7 @@ describe('', () => {
expect(queryAllByTestId('split-panel-wrapper')).toHaveLength(2);
- getByTestId('treepicker-wrapper').children.forEach(child => expect(child).toHaveClass('splitpane-component'));
+ getByTestId('treepicker-wrapper').children.forEach((child) => expect(child).toHaveClass('splitpane-component'));
expect(queryByTestId('treepicker-nav-wrapper')).toBeInTheDocument();
diff --git a/src/components/TreePicker/mocks.js b/src/components/TreePicker/mocks.js
index 9df431467..a4ae37a8a 100644
--- a/src/components/TreePicker/mocks.js
+++ b/src/components/TreePicker/mocks.js
@@ -73,9 +73,9 @@ const maleNode = {
rootTypeId: 'b',
};
-const valueFormatter = value => value;
+const valueFormatter = (value) => value;
-const nodeRenderer = value => `Test value: ${value.label}`;
+const nodeRenderer = (value) => `Test value: ${value.label}`;
const initialSelection = [actNode, ntNode];
diff --git a/src/components/UserListPicker/index.jsx b/src/components/UserListPicker/index.jsx
index 3e8176c19..625115bde 100644
--- a/src/components/UserListPicker/index.jsx
+++ b/src/components/UserListPicker/index.jsx
@@ -20,7 +20,7 @@ const UserListPickerComponent = ({
userHeaders,
users,
}) => {
- const labelFormatter = user => (
+ const labelFormatter = (user) => (
{`${user.givenName} ${user.surname}`}
diff --git a/src/components/UserListPicker/index.spec.jsx b/src/components/UserListPicker/index.spec.jsx
index 2710ae29b..d14df7aa3 100644
--- a/src/components/UserListPicker/index.spec.jsx
+++ b/src/components/UserListPicker/index.spec.jsx
@@ -91,7 +91,7 @@ describe('
', () => {
});
it('should throw when we do not supply apply handler', () => {
- console.error = err => {
+ console.error = (err) => {
throw new Error(err);
};
const { queryAllByTestId, getByText } = render(
);
@@ -105,7 +105,7 @@ describe('
', () => {
});
it('should throw when we do not supply close handler', () => {
- console.error = err => {
+ console.error = (err) => {
throw new Error(err);
};
const { getByText } = render(
);
diff --git a/src/components/VerticalNavigation/index.jsx b/src/components/VerticalNavigation/index.jsx
index fb2457fa6..6544b0830 100644
--- a/src/components/VerticalNavigation/index.jsx
+++ b/src/components/VerticalNavigation/index.jsx
@@ -49,7 +49,7 @@ class VerticalNavigation extends React.Component {
return true;
}
- getActiveTabIndex = children => {
+ getActiveTabIndex = (children) => {
const activeIndex = _.findIndex(children, 'props.isActive');
return activeIndex === -1 ? 0 : activeIndex;
};
diff --git a/src/components/VerticalNavigation/index.spec.jsx b/src/components/VerticalNavigation/index.spec.jsx
index d09c73867..ab8341f3f 100644
--- a/src/components/VerticalNavigation/index.spec.jsx
+++ b/src/components/VerticalNavigation/index.spec.jsx
@@ -5,7 +5,7 @@ import VerticalNav from '.';
afterEach(cleanup);
describe('
', () => {
- const makeProps = override => ({
+ const makeProps = (override) => ({
collapsable: true,
isCollapsed: false,
onClick: jest.fn(),
@@ -13,7 +13,7 @@ describe('
', () => {
className: 'custom-class',
...override,
});
- const makeMenuItemProps = override => ({
+ const makeMenuItemProps = (override) => ({
isActive: false,
dts: 'menu-item-dts',
content: jest.fn(),
@@ -35,7 +35,7 @@ describe('
', () => {
expect(queryByTestId('vertical-nav-wrapper')).toBeInTheDocument();
expect(getByTestId('vertical-nav-wrapper')).toHaveClass('aui--vertical-navigation-component custom-class');
expect(queryAllByTestId('vertical-nav-menu-item')).toHaveLength(3); // 1 collapse, 2 menu items
- queryAllByTestId('vertical-nav-menu-item').forEach(item =>
+ queryAllByTestId('vertical-nav-menu-item').forEach((item) =>
expect(item).toHaveClass('aui--vertical-navigation-component__menu-item')
);
diff --git a/src/components/fastStatelessWrapper/index.jsx b/src/components/fastStatelessWrapper/index.jsx
index 823117c7b..dcef2442d 100644
--- a/src/components/fastStatelessWrapper/index.jsx
+++ b/src/components/fastStatelessWrapper/index.jsx
@@ -14,8 +14,8 @@ import React from 'react';
const fastStatelessWrapper = (ComposedComponent, propsToCheck) =>
class FastStatelessWrapperComponent extends React.Component {
shouldComponentUpdate(nextProps) {
- const isEqualProps = toGet => {
- const getFromProps = props => _.get(props, toGet);
+ const isEqualProps = (toGet) => {
+ const getFromProps = (props) => _.get(props, toGet);
return getFromProps(nextProps) === getFromProps(this.props);
};
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 3d39400d9..772021ede 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -17,12 +17,12 @@ export const classSuffixHelper = ({ classSuffixes, suffixOptions, componentClass
if (_.isEmpty(internalSuffixes)) return '';
- return _.map(internalSuffixes, suffix => ` ${componentClass}-${suffix}`).join('');
+ return _.map(internalSuffixes, (suffix) => ` ${componentClass}-${suffix}`).join('');
};
// A DTS is an attribute which attaches a selector to a component so E2Es can locate and navigate through the DOM.
// expandDts converts a string to an object for ES6 expansion as
![]()
-export const expandDts = dtsString => (dtsString ? { 'data-test-selector': dtsString } : {});
+export const expandDts = (dtsString) => (dtsString ? { 'data-test-selector': dtsString } : {});
export default {
classSuffixHelper,
diff --git a/src/prop-types/TreePickerPropTypes.js b/src/prop-types/TreePickerPropTypes.js
index 1e7a6aecb..35adcc4cf 100644
--- a/src/prop-types/TreePickerPropTypes.js
+++ b/src/prop-types/TreePickerPropTypes.js
@@ -7,7 +7,7 @@ const baseNodeProps = {
label: PropTypes.string.isRequired,
};
-const mergeNodeProps = addedProps => Object.assign({}, baseNodeProps, addedProps);
+const mergeNodeProps = (addedProps) => Object.assign({}, baseNodeProps, addedProps);
export default {
node: PropTypes.shape(
diff --git a/www/containers/App.jsx b/www/containers/App.jsx
index ac6ebdb9d..9e3e898c8 100644
--- a/www/containers/App.jsx
+++ b/www/containers/App.jsx
@@ -7,8 +7,8 @@ import CodeBlock from './CodeBlock';
import './styles.scss';
const components = {
- pre: props =>
,
- code: props =>
,
+ pre: (props) =>
,
+ code: (props) =>
,
};
export class App extends Component {
diff --git a/www/containers/Props.jsx b/www/containers/Props.jsx
index 226f17c63..af3fe5ffd 100644
--- a/www/containers/Props.jsx
+++ b/www/containers/Props.jsx
@@ -18,7 +18,7 @@ const Props = ({ componentName, customMapper }) => {
componentExports.length === 1
? componentExports[0]
: componentExports.find(
- component =>
+ (component) =>
component.displayName === componentName || component.displayName === componentNameMapper[componentName]
);
diff --git a/www/containers/Scaffold.jsx b/www/containers/Scaffold.jsx
index b41e8cf7c..98428468c 100644
--- a/www/containers/Scaffold.jsx
+++ b/www/containers/Scaffold.jsx
@@ -24,7 +24,7 @@ export default function Scaffold() {
- {Object.keys(routes).map(key => (
+ {Object.keys(routes).map((key) => (
))}
diff --git a/www/containers/SidePanel.jsx b/www/containers/SidePanel.jsx
index c418f8e77..147110d16 100644
--- a/www/containers/SidePanel.jsx
+++ b/www/containers/SidePanel.jsx
@@ -11,7 +11,7 @@ export class SidePanel extends Component {
searchText: '',
};
- onSearch = searchText => {
+ onSearch = (searchText) => {
this.setState({ searchText });
};
@@ -24,14 +24,16 @@ export class SidePanel extends Component {
{_(groupedRoutes)
- .pickBy(components => _.some(_.map(components, entry => new RegExp(searchText, 'gi').test(entry.title))))
+ .pickBy((components) =>
+ _.some(_.map(components, (entry) => new RegExp(searchText, 'gi').test(entry.title)))
+ )
.map((components, key) => (
// eslint-disable-next-line
{_(components)
.orderBy(key === 'Getting Started' ? null : 'title')
- .pickBy(entry => new RegExp(searchText, 'gi').test(entry.title))
- .map(component => (
+ .pickBy((entry) => new RegExp(searchText, 'gi').test(entry.title))
+ .map((component) => (
`${number} contribution${number > 1 ? 's' : ''}`;
+const plural = (number) => `${number} contribution${number > 1 ? 's' : ''}`;
const Contributors = () => {
const [contributors, setContributors] = React.useState([]);
const getContributors = () => {
axios
.get('https://api.github.com/repos/Adslot/adslot-ui/contributors')
- .then(response => response.data)
- .then(data => setContributors(data));
+ .then((response) => response.data)
+ .then((data) => setContributors(data));
};
React.useEffect(getContributors, []);
const renderContributors = () =>
- contributors.map((
- { login, avatar_url, contributions } // eslint-disable-line camelcase
- ) => (
-
-
-
- ));
+ contributors.map(
+ (
+ { login, avatar_url, contributions } // eslint-disable-line camelcase
+ ) => (
+
+
+
+ )
+ );
const [showContributors, setShowContributors] = React.useState(false);
diff --git a/www/containers/components/SearchBar/index.jsx b/www/containers/components/SearchBar/index.jsx
index 32f3e2d54..1bb538aea 100644
--- a/www/containers/components/SearchBar/index.jsx
+++ b/www/containers/components/SearchBar/index.jsx
@@ -4,7 +4,7 @@ import { Search } from '../../../../src';
import './styles.scss';
const SearchBarComponent = ({ onSearch }) => (
-
onSearch(value.trim())} />
+ onSearch(value.trim())} />
);
SearchBarComponent.propTypes = {
diff --git a/www/examples/AlertInput.mdx b/www/examples/AlertInput.mdx
index a8b144005..be71664fc 100644
--- a/www/examples/AlertInput.mdx
+++ b/www/examples/AlertInput.mdx
@@ -59,7 +59,7 @@ class Example extends React.Component {
suffixAddon="impressions"
alertStatus={this.state.status}
alertMessage={this.state.message}
- onValueChange={event => this.changeValue(event.target.value)}
+ onValueChange={(event) => this.changeValue(event.target.value)}
/>
);
}
diff --git a/www/examples/Card.mdx b/www/examples/Card.mdx
index 183295ae7..50329a2d4 100644
--- a/www/examples/Card.mdx
+++ b/www/examples/Card.mdx
@@ -27,9 +27,9 @@ import DesignNotes from '../containers/DesignNotes.jsx';
### Card.Container
- [props[`src/components/Card/index.jsx`][1]]} />
+ [props[`src/components/Card/index.jsx`][1]]} />
### Card.Content
- [props[`src/components/Card/index.jsx`][0]]} />
+ [props[`src/components/Card/index.jsx`][0]]} />
diff --git a/www/examples/DatePicker.mdx b/www/examples/DatePicker.mdx
index 54e0d46f2..b8b75c739 100644
--- a/www/examples/DatePicker.mdx
+++ b/www/examples/DatePicker.mdx
@@ -6,7 +6,7 @@ import DesignNotes from '../containers/DesignNotes.jsx';
```jsx live=true
const Example = () => {
const [startDate, setStartDate] = React.useState(moment());
- const handleChange = startDate => setStartDate(startDate);
+ const handleChange = (startDate) => setStartDate(startDate);
return (
props[`src/components/Grid/Row/index.jsx`]} />
+ props[`src/components/Grid/Row/index.jsx`]} />
### Grid.Cell
- props[`src/components/Grid/Cell/index.jsx`]} />
+ props[`src/components/Grid/Cell/index.jsx`]} />
diff --git a/www/examples/HoverDropdownMenu.mdx b/www/examples/HoverDropdownMenu.mdx
index 2ea383f34..97eda0db7 100644
--- a/www/examples/HoverDropdownMenu.mdx
+++ b/www/examples/HoverDropdownMenu.mdx
@@ -33,7 +33,7 @@ class Example extends React.PureComponent {
<>
Hover the avatar below
- {_.map(links, link => (
+ {_.map(links, (link) => (
))}
diff --git a/www/examples/ImageCropper.mdx b/www/examples/ImageCropper.mdx
index 066060207..4a0f131da 100644
--- a/www/examples/ImageCropper.mdx
+++ b/www/examples/ImageCropper.mdx
@@ -5,7 +5,7 @@ import Props from '../containers/Props.jsx';
```jsx live=true
const Example = () => {
const [data, setData] = React.useState('');
- const onCrop = value => setData(JSON.stringify(value));
+ const onCrop = (value) => setData(JSON.stringify(value));
return (
<>
diff --git a/www/examples/ListPicker.mdx b/www/examples/ListPicker.mdx
index 7bd1980f7..b3e1eb0d4 100644
--- a/www/examples/ListPicker.mdx
+++ b/www/examples/ListPicker.mdx
@@ -16,7 +16,7 @@ const UncontrolledCheckbox = () => {
return setChecked(!checked)} />;
};
-const labelFormatter = item => `${item.givenName} ${item.surname}`;
+const labelFormatter = (item) => `${item.givenName} ${item.surname}`;
const addonFormatter = () => ;
const listPickerItemHeaders = {
diff --git a/www/examples/OverlayLoader.mdx b/www/examples/OverlayLoader.mdx
index 2add7ae3d..ed6ca8b2a 100644
--- a/www/examples/OverlayLoader.mdx
+++ b/www/examples/OverlayLoader.mdx
@@ -7,7 +7,7 @@ import DesignNotes from '../containers/DesignNotes.jsx';
const Example = () => {
const [showLoader, setShowLoader] = React.useState(false);
- const handleKeyPress = event => {
+ const handleKeyPress = (event) => {
if (event.keyCode === 27) {
toggleDisabledLoader();
}
diff --git a/www/examples/Pagination.mdx b/www/examples/Pagination.mdx
index e7b5cdcbf..d0f63e9f7 100644
--- a/www/examples/Pagination.mdx
+++ b/www/examples/Pagination.mdx
@@ -6,7 +6,7 @@ import DesignNotes from '../containers/DesignNotes.jsx';
```jsx live=true
const Example = () => {
const [activePage, setActivePage] = React.useState(1);
- const onSelect = pageNumber => setActivePage(pageNumber);
+ const onSelect = (pageNumber) => setActivePage(pageNumber);
const props = {
pageCount: 10,
diff --git a/www/examples/Popover.mdx b/www/examples/Popover.mdx
index 719fb9628..5242646d8 100644
--- a/www/examples/Popover.mdx
+++ b/www/examples/Popover.mdx
@@ -27,7 +27,7 @@ import { popoverPlacements, themes } from '../../src/components/Popover/constant
There might be use cases where the element which will display the popover will be decided on the fly.
-We support the implementation of dynamic popovers via Popover.WithRef
+ We support the implementation of dynamic popovers via Popover.WithRef
```jsx live=true
diff --git a/www/examples/RadioGroup.mdx b/www/examples/RadioGroup.mdx
index 681ba594e..9970975ba 100644
--- a/www/examples/RadioGroup.mdx
+++ b/www/examples/RadioGroup.mdx
@@ -5,7 +5,7 @@ import Props from '../containers/Props.jsx';
```jsx live=true
const Example = () => {
const [hobbies, setHobbies] = React.useState('badminton');
- const handleGroupChange = value => setHobbies(value);
+ const handleGroupChange = (value) => setHobbies(value);
return (
<>
diff --git a/www/examples/RichTextEditor.mdx b/www/examples/RichTextEditor.mdx
index 4fb834aca..fc0fe01fd 100644
--- a/www/examples/RichTextEditor.mdx
+++ b/www/examples/RichTextEditor.mdx
@@ -40,7 +40,7 @@ const Example = () => {
<>
setState(RichTextEditor.stateToHTML(output))}
+ onChange={(output) => setState(RichTextEditor.stateToHTML(output))}
placeholder="Custom placeholder"
/>
diff --git a/www/examples/Search.mdx b/www/examples/Search.mdx
index 608d2f5dc..b371761ed 100644
--- a/www/examples/Search.mdx
+++ b/www/examples/Search.mdx
@@ -10,7 +10,7 @@ const Example = () => {
const [searchOnEnterKeyLoading, setSearchOnEnterKeyLoading] = React.useState(false);
const [searchInput, showSearchInput] = React.useState(false);
- const onChange = value => {
+ const onChange = (value) => {
setValue(value);
};
@@ -23,7 +23,7 @@ const Example = () => {
setTimeout(() => setSearchOnInputChangeLoading(false), 950);
};
- const searchOnEnterKey = value => {
+ const searchOnEnterKey = (value) => {
setSearchOnEnterKeyLoading(true);
setTimeout(() => {
setSearchOnEnterKeyLoading(false);
diff --git a/www/examples/Select.mdx b/www/examples/Select.mdx
index 9e4104fc2..b6e5f51fd 100644
--- a/www/examples/Select.mdx
+++ b/www/examples/Select.mdx
@@ -14,7 +14,7 @@ const countryOptions = [
const Example = () => {
const [selected, setSelected] = React.useState('');
- const onChangeHandler = value => {
+ const onChangeHandler = (value) => {
setSelected(value);
};
diff --git a/www/examples/Skeleton.mdx b/www/examples/Skeleton.mdx
index 152fae150..a46ae1ba9 100644
--- a/www/examples/Skeleton.mdx
+++ b/www/examples/Skeleton.mdx
@@ -26,7 +26,8 @@ render(Example);
- Skeleton provides a layout for loading state with a aesthetic placeholder and animation.
+ Skeleton provides a layout for loading state with a aesthetic placeholder and
+ animation.
It could be used when loading data like text, images and avatar.
diff --git a/www/examples/Slicey.mdx b/www/examples/Slicey.mdx
index bfd567a8c..1e5a2c89d 100644
--- a/www/examples/Slicey.mdx
+++ b/www/examples/Slicey.mdx
@@ -4,7 +4,11 @@ import Props from '../containers/Props.jsx';
```jsx live=true
```
diff --git a/www/examples/Switch.mdx b/www/examples/Switch.mdx
index df89b5252..079aef793 100644
--- a/www/examples/Switch.mdx
+++ b/www/examples/Switch.mdx
@@ -5,7 +5,7 @@ import Props from '../containers/Props.jsx';
```jsx live=true
const Example = () => {
const [isToggleOn, setIsToggleOn] = React.useState(true);
- const onChange = newValue => setIsToggleOn(newValue);
+ const onChange = (newValue) => setIsToggleOn(newValue);
return (
<>
diff --git a/www/examples/Tab.mdx b/www/examples/Tab.mdx
index 27c756013..f69bc5d20 100644
--- a/www/examples/Tab.mdx
+++ b/www/examples/Tab.mdx
@@ -6,7 +6,7 @@ import DesignNotes from '../containers/DesignNotes.jsx';
```jsx live=true
const Example = () => {
const [activeTab, setActiveTab] = React.useState('Audience');
- const switchTab = tabKey => setActiveTab(tabKey);
+ const switchTab = (tabKey) => setActiveTab(tabKey);
return (
diff --git a/www/examples/Tag.mdx b/www/examples/Tag.mdx
index e43744948..08a792c67 100644
--- a/www/examples/Tag.mdx
+++ b/www/examples/Tag.mdx
@@ -33,7 +33,7 @@ const Example = () => {
}
function deleteTag(tagIdToDelete) {
- setTags(_.reject(tags, tag => tag.id === tagIdToDelete));
+ setTags(_.reject(tags, (tag) => tag.id === tagIdToDelete));
}
if (_.isEmpty(tags)) {
@@ -46,7 +46,7 @@ const Example = () => {
return (
- {_.map(tags, tag => (
+ {_.map(tags, (tag) => (
{
- {_.map(items, item => (
+ {_.map(items, (item) => (
))}
diff --git a/www/examples/TreePicker.mdx b/www/examples/TreePicker.mdx
index 3d927db39..2a8f0061f 100644
--- a/www/examples/TreePicker.mdx
+++ b/www/examples/TreePicker.mdx
@@ -89,12 +89,12 @@ const Example = () => {
searchValue={pickerSearchValue}
onChange={setPickerSearchValue}
searchOnClear={() => setPickerSearchValue('')}
- includeNode={node => setSelectedNodes(_.concat([], selectedNodes, node))}
- removeNode={node => setSelectedNodes(_.reject(selectedNodes, { id: node.id }))}
+ includeNode={(node) => setSelectedNodes(_.concat([], selectedNodes, node))}
+ removeNode={(node) => setSelectedNodes(_.reject(selectedNodes, { id: node.id }))}
additionalClassNames={pickerSearchValue ? undefined : ['background-highlighted', 'test-class']}
selectedTopSearch={
- setSelectedSearchValue(selectedSearchValue)} />
+ setSelectedSearchValue(selectedSearchValue)} />
}
/>
diff --git a/www/examples/UserListPicker.mdx b/www/examples/UserListPicker.mdx
index ae5061f56..fdfe3ede2 100644
--- a/www/examples/UserListPicker.mdx
+++ b/www/examples/UserListPicker.mdx
@@ -4,7 +4,7 @@ import DesignNotes from '../containers/DesignNotes.jsx';
## User List Picker
```jsx live=true
-const avatarColor = user => (user.avatar ? '' : 'cyan');
+const avatarColor = (user) => (user.avatar ? '' : 'cyan');
const emptySvgSymbol = ;
const teamMember1 = {
avatar: '../assets/user-avatar.jpeg',
diff --git a/www/examples/VerticalNavigation.mdx b/www/examples/VerticalNavigation.mdx
index 93f056a82..3e1ee9bec 100644
--- a/www/examples/VerticalNavigation.mdx
+++ b/www/examples/VerticalNavigation.mdx
@@ -50,7 +50,7 @@ const Example = () => {
const handleCollapse = () => {
setIsCollapsed(!isCollapsed);
};
- const handleMenuClick = tabName => () => {
+ const handleMenuClick = (tabName) => () => {
setActiveTab(tabName);
};