@workday/canvas-kit-react-common - npm Package Compare versions

Comparing version 3.4.0 to 3.4.1-next.0

dist/commonjs/index.d.ts

 export { default as focusRing, themedFocusRing } from './lib/styles/focusRing';
-export { default as errorRing } from './lib/styles/errorRing';
+export { default as errorRing, getErrorColors } from './lib/styles/errorRing';
 export { default as accessibleHide } from './lib/styles/accessibleHide';
@@ -4,0 +4,0 @@ export { default as hideMouseFocus, mouseFocusBehavior } from './lib/styles/hideMouseFocus';

dist/commonjs/index.js

@@ -11,2 +11,3 @@ "use strict";
 exports.errorRing = errorRing_1.default;
+exports.getErrorColors = errorRing_1.getErrorColors;
 var accessibleHide_1 = require("./lib/styles/accessibleHide");
@@ -13,0 +14,0 @@ exports.accessibleHide = accessibleHide_1.default;

dist/commonjs/lib/styles/errorRing.d.ts

 import { CanvasTheme } from '@workday/canvas-kit-labs-react-core';
 import { ErrorType } from '../types';
 import { CSSObject } from '@emotion/core';
+export declare function getErrorColors(error?: ErrorType, theme?: CanvasTheme): {
+    outer: string;
+    inner: string;
+} | {
+    outer?: undefined;
+    inner?: undefined;
+};
 export default function errorRing(error?: ErrorType, theme?: CanvasTheme): CSSObject;

dist/commonjs/lib/styles/errorRing.js

@@ -9,20 +9,36 @@ "use strict";
 var chroma_js_1 = __importDefault(require("chroma-js"));
-function errorRing(error, theme) {
-    var errorBorderColor;
-    var errorBoxShadow;
+var isAccessible = function (foreground, background) {
+    if (background === void 0) { background = canvas_kit_react_core_1.colors.frenchVanilla100; }
+    return chroma_js_1.default.contrast(foreground, background) >= 3;
+};
+function getErrorColors(error, theme) {
     if (error === types_1.ErrorType.Error) {
-        errorBorderColor = theme
-            ? chroma_js_1.default.contrast(theme.palette.error.main, canvas_kit_react_core_1.colors.frenchVanilla100) >= 3
-                ? theme.palette.error.main
-                : theme.palette.error.darkest
-            : canvas_kit_react_core_1.inputColors.error.border;
-        errorBoxShadow = "inset 0 0 0 1px " + (theme ? theme.palette.error.main : canvas_kit_react_core_1.inputColors.error.border);
+        if (theme) {
+            var palette = theme.palette.error;
+            return {
+                outer: isAccessible(palette.main) ? palette.main : palette.darkest,
+                inner: palette.main,
+            };
+        }
+        else {
+            return {
+                outer: canvas_kit_react_core_1.inputColors.error.border,
+                inner: canvas_kit_react_core_1.inputColors.error.border,
+            };
+        }
     }
     else if (error === types_1.ErrorType.Alert) {
-        errorBorderColor = theme
-            ? chroma_js_1.default.contrast(theme.palette.alert.main, canvas_kit_react_core_1.colors.frenchVanilla100) >= 3
-                ? theme.palette.alert.main
-                : theme.palette.alert.darkest
-            : canvas_kit_react_core_1.colors.cantaloupe600;
-        errorBoxShadow = "inset 0 0 0 2px " + (theme ? theme.palette.alert.main : canvas_kit_react_core_1.inputColors.warning.border);
+        if (theme) {
+            var palette = theme.palette.alert;
+            return {
+                outer: isAccessible(palette.main) ? palette.main : palette.darkest,
+                inner: palette.main,
+            };
+        }
+        else {
+            return {
+                outer: canvas_kit_react_core_1.colors.cantaloupe600,
+                inner: canvas_kit_react_core_1.inputColors.warning.border,
+            };
+        }
     }
@@ -32,11 +48,19 @@ else {
     }
+}
+exports.getErrorColors = getErrorColors;
+function errorRing(error, theme) {
+    if (error !== types_1.ErrorType.Error && error !== types_1.ErrorType.Alert) {
+        return {};
+    }
+    var errorColors = getErrorColors(error, theme);
+    var errorBoxShadow = "inset 0 0 0 " + (errorColors.outer === errorColors.inner ? 1 : 2) + "px " + errorColors.inner;
     return {
-        borderColor: errorBorderColor,
+        borderColor: errorColors.outer,
         transition: '100ms box-shadow',
         boxShadow: errorBoxShadow,
         '&:hover, &:disabled': {
-            borderColor: errorBorderColor,
+            borderColor: errorColors.outer,
         },
         '&:focus:not([disabled])': {
-            borderColor: errorBorderColor,
+            borderColor: errorColors.outer,
             boxShadow: errorBoxShadow + ",\n        0 0 0 2px " + canvas_kit_react_core_1.colors.frenchVanilla100 + ",\n        0 0 0 4px " + (theme ? theme.palette.common.focusOutline : canvas_kit_react_core_1.inputColors.focusBorder),
@@ -43,0 +67,0 @@ },

dist/es6/index.d.ts

 export { default as focusRing, themedFocusRing } from './lib/styles/focusRing';
-export { default as errorRing } from './lib/styles/errorRing';
+export { default as errorRing, getErrorColors } from './lib/styles/errorRing';
 export { default as accessibleHide } from './lib/styles/accessibleHide';
@@ -4,0 +4,0 @@ export { default as hideMouseFocus, mouseFocusBehavior } from './lib/styles/hideMouseFocus';

dist/es6/index.js

 export { default as focusRing, themedFocusRing } from './lib/styles/focusRing';
-export { default as errorRing } from './lib/styles/errorRing';
+export { default as errorRing, getErrorColors } from './lib/styles/errorRing';
 export { default as accessibleHide } from './lib/styles/accessibleHide';
@@ -4,0 +4,0 @@ export { default as hideMouseFocus, mouseFocusBehavior } from './lib/styles/hideMouseFocus';

dist/es6/lib/styles/errorRing.d.ts

 import { CanvasTheme } from '@workday/canvas-kit-labs-react-core';
 import { ErrorType } from '../types';
 import { CSSObject } from '@emotion/core';
+export declare function getErrorColors(error?: ErrorType, theme?: CanvasTheme): {
+    outer: string;
+    inner: string;
+} | {
+    outer?: undefined;
+    inner?: undefined;
+};
 export default function errorRing(error?: ErrorType, theme?: CanvasTheme): CSSObject;

dist/es6/lib/styles/errorRing.js

 import { ErrorType } from '../types';
 import { colors, inputColors } from '@workday/canvas-kit-react-core';
 import chroma from 'chroma-js';
-export default function errorRing(error, theme) {
-    var errorBorderColor;
-    var errorBoxShadow;
+var isAccessible = function (foreground, background) {
+    if (background === void 0) { background = colors.frenchVanilla100; }
+    return chroma.contrast(foreground, background) >= 3;
+};
+export function getErrorColors(error, theme) {
     if (error === ErrorType.Error) {
-        errorBorderColor = theme
-            ? chroma.contrast(theme.palette.error.main, colors.frenchVanilla100) >= 3
-                ? theme.palette.error.main
-                : theme.palette.error.darkest
-            : inputColors.error.border;
-        errorBoxShadow = "inset 0 0 0 1px " + (theme ? theme.palette.error.main : inputColors.error.border);
+        if (theme) {
+            var palette = theme.palette.error;
+            return {
+                outer: isAccessible(palette.main) ? palette.main : palette.darkest,
+                inner: palette.main,
+            };
+        }
+        else {
+            return {
+                outer: inputColors.error.border,
+                inner: inputColors.error.border,
+            };
+        }
     }
     else if (error === ErrorType.Alert) {
-        errorBorderColor = theme
-            ? chroma.contrast(theme.palette.alert.main, colors.frenchVanilla100) >= 3
-                ? theme.palette.alert.main
-                : theme.palette.alert.darkest
-            : colors.cantaloupe600;
-        errorBoxShadow = "inset 0 0 0 2px " + (theme ? theme.palette.alert.main : inputColors.warning.border);
+        if (theme) {
+            var palette = theme.palette.alert;
+            return {
+                outer: isAccessible(palette.main) ? palette.main : palette.darkest,
+                inner: palette.main,
+            };
+        }
+        else {
+            return {
+                outer: colors.cantaloupe600,
+                inner: inputColors.warning.border,
+            };
+        }
     }
@@ -26,11 +42,18 @@ else {
     }
+}
+export default function errorRing(error, theme) {
+    if (error !== ErrorType.Error && error !== ErrorType.Alert) {
+        return {};
+    }
+    var errorColors = getErrorColors(error, theme);
+    var errorBoxShadow = "inset 0 0 0 " + (errorColors.outer === errorColors.inner ? 1 : 2) + "px " + errorColors.inner;
     return {
-        borderColor: errorBorderColor,
+        borderColor: errorColors.outer,
         transition: '100ms box-shadow',
         boxShadow: errorBoxShadow,
         '&:hover, &:disabled': {
-            borderColor: errorBorderColor,
+            borderColor: errorColors.outer,
         },
         '&:focus:not([disabled])': {
-            borderColor: errorBorderColor,
+            borderColor: errorColors.outer,
             boxShadow: errorBoxShadow + ",\n        0 0 0 2px " + colors.frenchVanilla100 + ",\n        0 0 0 4px " + (theme ? theme.palette.common.focusOutline : inputColors.focusBorder),
@@ -37,0 +60,0 @@ },

index.ts

 export {default as focusRing, themedFocusRing} from './lib/styles/focusRing';
-export {default as errorRing} from './lib/styles/errorRing';
+export {default as errorRing, getErrorColors} from './lib/styles/errorRing';
 export {default as accessibleHide} from './lib/styles/accessibleHide';
@@ -4,0 +4,0 @@ export {default as hideMouseFocus, mouseFocusBehavior} from './lib/styles/hideMouseFocus';

lib/styles/errorRing.ts

@@ -7,37 +7,56 @@ import {CanvasTheme} from '@workday/canvas-kit-labs-react-core';
 
-export default function errorRing(error?: ErrorType, theme?: CanvasTheme): CSSObject {
-  let errorBorderColor;
-  let errorBoxShadow;
+const isAccessible = (foreground: string, background: string = colors.frenchVanilla100) => {
+  return chroma.contrast(foreground, background) >= 3;
+};
 
+export function getErrorColors(error?: ErrorType, theme?: CanvasTheme) {
   if (error === ErrorType.Error) {
-    errorBorderColor = theme
-      ? chroma.contrast(theme.palette.error.main, colors.frenchVanilla100) >= 3
-        ? theme.palette.error.main
-        : theme.palette.error.darkest
-      : inputColors.error.border;
-    errorBoxShadow = `inset 0 0 0 1px ${
-      theme ? theme.palette.error.main : inputColors.error.border
-    }`;
+    if (theme) {
+      const palette = theme.palette.error;
+      return {
+        outer: isAccessible(palette.main) ? palette.main : palette.darkest,
+        inner: palette.main,
+      };
+    } else {
+      return {
+        outer: inputColors.error.border,
+        inner: inputColors.error.border,
+      };
+    }
   } else if (error === ErrorType.Alert) {
-    errorBorderColor = theme
-      ? chroma.contrast(theme.palette.alert.main, colors.frenchVanilla100) >= 3
-        ? theme.palette.alert.main
-        : theme.palette.alert.darkest
-      : colors.cantaloupe600;
-    errorBoxShadow = `inset 0 0 0 2px ${
-      theme ? theme.palette.alert.main : inputColors.warning.border
-    }`;
+    if (theme) {
+      const palette = theme.palette.alert;
+      return {
+        outer: isAccessible(palette.main) ? palette.main : palette.darkest,
+        inner: palette.main,
+      };
+    } else {
+      return {
+        outer: colors.cantaloupe600,
+        inner: inputColors.warning.border,
+      };
+    }
   } else {
     return {};
   }
+}
 
+export default function errorRing(error?: ErrorType, theme?: CanvasTheme): CSSObject {
+  if (error !== ErrorType.Error && error !== ErrorType.Alert) {
+    return {};
+  }
+  const errorColors = getErrorColors(error, theme);
+  const errorBoxShadow = `inset 0 0 0 ${errorColors.outer === errorColors.inner ? 1 : 2}px ${
+    errorColors.inner
+  }`;
+
   return {
-    borderColor: errorBorderColor,
+    borderColor: errorColors.outer,
     transition: '100ms box-shadow',
     boxShadow: errorBoxShadow,
     '&:hover, &:disabled': {
-      borderColor: errorBorderColor,
+      borderColor: errorColors.outer,
     },
     '&:focus:not([disabled])': {
-      borderColor: errorBorderColor,
+      borderColor: errorColors.outer,
       boxShadow: `${errorBoxShadow},
@@ -44,0 +63,0 @@ 0 0 0 2px ${colors.frenchVanilla100},

package.json

 {
   "name": "@workday/canvas-kit-react-common",
-  "version": "3.4.0",
+  "version": "3.4.1-next.0+f268170",
   "description": "A module of common utilities shared across canvas components",
@@ -43,4 +43,4 @@ "author": "Workday, Inc. (https://www.workday.com)",
     "@emotion/core": "^10.0.21",
-    "@workday/canvas-kit-labs-react-core": "^3.4.0",
-    "@workday/canvas-kit-react-core": "^3.4.0",
+    "@workday/canvas-kit-labs-react-core": "^3.4.1-next.0+f268170",
+    "@workday/canvas-kit-react-core": "^3.4.1-next.0+f268170",
     "chroma-js": "^2.1.0",
@@ -50,3 +50,3 @@ "lodash": "^4.17.14",
   },
-  "gitHead": "11623986ce874cf4e2ab86de03dd4f85128bc488"
+  "gitHead": "f2681709d8e66097ea8f5bb1e08c7e201a1bac45"
 }

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

66680

increased by3.07%

Lines of code

1411

increased by6.01%

Worsened metrics

Number of low quality alerts

3

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@workday/canvas-kit-labs-react-core@^3.4.1-next.0+f268170

• Updated@workday/canvas-kit-react-core@^3.4.1-next.0+f268170