Merge 0e1ca8b into 1d4e3d4

eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
     'prettier',
     'prettier/react',
     'prettier/@typescript-eslint',
+    'plugin:compat/recommended',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
@@ -30,6 +31,9 @@ module.exports = {
       version: 'detect',
     },
   },
+  env: {
+    browser: true,
+  },
   plugins: [
     '@typescript-eslint',
     '@typescript-eslint/tslint',

modules/_labs/core/react/lib/theming/useTheme.ts

@@ -17,13 +17,13 @@ import {defaultCanvasTheme} from './theme';
  * Tracked on https://github.com/emotion-js/emotion/issues/1193.
  */
 export function useTheme(theme?: Object): CanvasTheme {
-  if (theme && Object.entries(theme).length !== 0) {
+  if (theme && Object.keys(theme).length !== 0) {
     return theme as CanvasTheme;
   }
 
   try {
     const context = React.useContext(ThemeContext);
-    if (context && Object.entries(context).length !== 0) {
+    if (context && Object.keys(context).length !== 0) {
       return context as CanvasTheme;
     }
   } catch (e) {

modules/core/react/spec/InputProvider.spec.tsx

@@ -16,7 +16,7 @@ const testInput = (
   });
 
   // Spoof window environments with different browser event types
-  const windowRef = Object.assign({}, window);
+  const windowRef = {...window};
   if (shimWindowProps) {
     for (const prop of Object.keys(shimWindowProps)) {
       // @ts-ignore

modules/icon/css/lib/canvas-kit-css-icon.js

@@ -1,12 +1,7 @@
 import SVGInjector from 'svg-injector';
 import toSlug from 'to-slug-case';
 import canvasColors from '@workday/canvas-colors-web';
-import {
-  appendStyle,
-  getHue,
-  getColor,
-  pickForegroundColor,
-} from './utils';
+import {appendStyle, getHue, getColor, pickForegroundColor} from './utils';
 
 const cdnUrl = 'https://design.workdaycdn.com/beta/assets/web-icons';
 
@@ -122,10 +117,12 @@ function colorIcons(selector, iconRoot = document) {
   icons.forEach(i => {
     const category = getIconCategory(i);
 
-    Object.entries(category.colorables).forEach(([attr, className]) => {
+    Object.keys(category.colorables).forEach(attr => {
+      const className = category.colorables[attr];
       if (typeof className === 'function') {
-        Object.entries(className(i.getAttribute(attr))).forEach(([cName, color]) => {
-          colorIconClass(i, cName, color);
+        const classnames = className(i.getAttribute(attr));
+        Object.keys(classnames).forEach(cName => {
+          colorIconClass(i, cName, classnames[cName]);
         });
         return;
       }

modules/icon/css/lib/utils.js

@@ -1,28 +1,28 @@
 import canvasColors from '@workday/canvas-colors-web';
 
-function getBrandingColors(colors) {
-  const brandingColors = Object.keys(colors.gradients).map(c => `${c}500`);
+function getBrandingColors() {
+  const brandingColors = Object.keys(canvasColors.gradients).map(c => `${c}500`);
 
-  return Object.entries(colors)
-    .filter(([colorName]) => brandingColors.includes(colorName))
-    .reduce((result, [name, value]) => {
+  Object.keys(canvasColors)
+    .filter(colorName => brandingColors.includes(colorName))
+    .reduce((result, name) => {
       const obj = {};
-      obj[name.replace('500', '')] = value;
+      obj[name.replace('500', '')] = canvasColors[name];
       return Object.assign({}, result, obj);
     }, {});
 }
 
-export const brandingColors = getBrandingColors(canvasColors);
+export const brandingColors = getBrandingColors();
 
 export function getHue(color) {
-  const hue = Object.entries(canvasColors).filter(
-    ([colorName]) => color === colorName.replace(/[0-9]*$/, '')
+  const hue = Object.keys(canvasColors).filter(
+    colorName => color === colorName.replace(/[0-9]*$/, '')
   );
 
   if (hue.length > 0) {
-    return hue.reduce((result, [name, value]) => {
+    return hue.reduce((result, name) => {
       const obj = {};
-      obj[name.replace(/^[a-zA-Z]*/g, '')] = value;
+      obj[name.replace(/^[a-zA-Z]*/g, '')] = canvasColors[name];
       return Object.assign({}, result, obj);
     });
   }
@@ -38,12 +38,9 @@ export function getColor(color) {
   if (!/[0-9]{3}$/.test(color)) {
     findColor = `${color}500`;
   }
+  const foundColor = canvasColors[findColor];
 
-  const foundColor = Object.entries(canvasColors).find(([colorName]) => colorName === findColor);
-
-  if (!foundColor) return null;
-
-  return foundColor[1];
+  return foundColor ? foundColor : null;
 }
 
 export function appendStyle(css) {
@@ -72,7 +69,7 @@ function expandHex(hex) {
   return hex.replace(shorthandRegex, function(m, r, g, b) {
     return r + r + g + g + b + b;
   });
-};
+}
 
 function hexToRgb(hex) {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(expandHex(hex));
@@ -83,9 +80,9 @@ function hexToRgb(hex) {
         b: parseInt(result[3], 16),
       }
     : null;
-};
+}
 
- /**
+/**
  *
  * Chooses luminance color depending on the rgb value of the background color.
  * Eventually should be replaced by by Chroma 2.0

modules/icon/react/lib/AppletIcon.tsx

@@ -17,7 +17,11 @@ export const appletIconStyles = ({
   color = BrandingColor.Blueberry,
 }: AppletIconStyles): CSSObject => {
   // Check if valid color
-  if (!Object.values(BrandingColor).includes(color)) {
+  if (
+    !Object.keys(BrandingColor)
+      .map((color: keyof typeof BrandingColor) => BrandingColor[color])
+      .includes(color)
+  ) {
     throw Error(`Color "${color}" not found`);
   }
 

package.json

@@ -72,6 +72,7 @@
     "enzyme-adapter-react-16": "^1.5.0",
     "eslint": "^6.5.1",
     "eslint-config-prettier": "^6.3.0",
+    "eslint-plugin-compat": "^3.5.1",
     "eslint-plugin-emotion": "^10.0.14",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jest": "^22.17.0",

yarn.lock

@@ -2078,7 +2078,7 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.6.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.6.2", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.4.tgz#d79f5a2040f7caa24d53e563aad49cbc05581308"
   integrity sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==
@@ -6038,6 +6038,11 @@ assign-symbols@^1.0.0:
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
   integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
 
+ast-metadata-inferer@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ast-metadata-inferer/-/ast-metadata-inferer-0.1.1.tgz#66e24fae9d30ca961fac4880b7fc466f09b25165"
+  integrity sha512-hc9w8Qrgg9Lf9iFcZVhNjUnhrd2BBpTlyCnegPVvCe6O0yMrF57a6Cmh7k+xUsfUOMh9wajOL5AsGOBNEyTCcw==
+
 ast-types-flow@0.0.7, ast-types-flow@^0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
@@ -7441,6 +7446,11 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
+caniuse-db@^1.0.30001017:
+  version "1.0.30001031"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30001031.tgz#0185ae081003bf59cd249097e2f8e5cb9335d85a"
+  integrity sha512-tIRT8VWRiZ+lSwe5qEOBCAUsXmTqaZk7Tkec1ooSSfgvVkZrtfw0jfOV5r2Of8sA3VtDkpY+dJXQpTGg8n9zEA==
+
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000955, caniuse-lite@^1.0.30000971, caniuse-lite@^1.0.30000975:
   version "1.0.30000975"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000975.tgz#d4e7131391dddcf2838999d3ce75065f65f1cdfc"
@@ -9841,6 +9851,19 @@ eslint-module-utils@^2.4.0:
     debug "^2.6.8"
     pkg-dir "^2.0.0"
 
+eslint-plugin-compat@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-compat/-/eslint-plugin-compat-3.5.1.tgz#09f9c05dcfa9b5cd69345d7ab333749813ed8b14"
+  integrity sha512-dhfW12vZxxKLEVhrPoblmEopgwpYU2Sd4GdXj5OSfbQ+as9+1aY+S5pqnJYJvXXNWFFJ6aspLkCyk4NMQ/pgtA==
+  dependencies:
+    "@babel/runtime" "^7.7.7"
+    ast-metadata-inferer "^0.1.1"
+    browserslist "^4.8.2"
+    caniuse-db "^1.0.30001017"
+    lodash.memoize "4.1.2"
+    mdn-browser-compat-data "^1.0.3"
+    semver "^6.3.0"
+
 eslint-plugin-emotion@^10.0.14:
   version "10.0.14"
   resolved "https://registry.yarnpkg.com/eslint-plugin-emotion/-/eslint-plugin-emotion-10.0.14.tgz#c643ff2f34f85ae77a65b2056915e939cf7e8129"
@@ -10362,7 +10385,7 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-extend@^3.0.0, extend@~3.0.2:
+extend@3.0.2, extend@^3.0.0, extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
@@ -14718,7 +14741,7 @@ lodash.map@^4.5.1:
   resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3"
   integrity sha1-dx7Hg540c9nEzeKLGTlMNWL09tM=
 
-lodash.memoize@^4.1.2:
+lodash.memoize@4.1.2, lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
@@ -15096,6 +15119,13 @@ mdast-util-to-hast@6.0.2:
     unist-util-visit "^1.1.0"
     xtend "^4.0.1"
 
+mdn-browser-compat-data@^1.0.3:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/mdn-browser-compat-data/-/mdn-browser-compat-data-1.0.10.tgz#1f845219f8c19123792e29a2af86992b362d646a"
+  integrity sha512-UusipwyfBuSYQ9+bJXCuLXRg1rPVZic3RSGKtMHPGNFAdIOvXKOrZ9pAN+4udGVW17QOZuR73NpV95BmUfWHxw==
+  dependencies:
+    extend "3.0.2"
+
 mdn-data@2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"