@orfium/ictinus 4.22.0 → 4.25.0

package/dist/components/Button/Button.js

@@ -11,7 +11,7 @@ var _ButtonBase = _interopRequireDefault(require("../ButtonBase/ButtonBase"));
 
 var _Button = require("./Button.style");
 
-var _Loader = _interopRequireDefault(require("../Loader"));
+var _ButtonLoader = _interopRequireDefault(require("./ButtonLoader"));
 
 var _react2 = require("@emotion/react");
 
@@ -73,11 +73,11 @@ var Button = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       disabled: disabled,
       hasChildren: Boolean(_react["default"].Children.count(children))
     })
-  }, loading ? (0, _react2.jsx)("div", {
-    css: (0, _Button.centralizedLoader)(innerButtonWidth)
-  }, (0, _react2.jsx)(_Loader["default"], {
-    type: 'spinner'
-  })) : children), iconRight && (0, _react2.jsx)("span", {
+  }, loading ? (0, _react2.jsx)(_ButtonLoader["default"], {
+    innerButtonWidth: innerButtonWidth,
+    color: color,
+    type: type
+  }) : children), iconRight && (0, _react2.jsx)("span", {
     css: (0, _Button.iconStyle)()
   }, iconRight)));
 });

package/dist/components/Button/Button.style.d.ts

@@ -1,4 +1,3 @@
-import { SerializedStyles } from '@emotion/react';
 import { Theme } from 'theme';
 import { RequiredProperties } from 'utils/common';
 import { Props } from './Button';
@@ -16,4 +15,3 @@ export declare const childrenWrapperStyle: ({ iconLeft, iconRight, hasChildren,
     marginLeft: number | "8";
     marginRight: number | "8";
 };
-export declare const centralizedLoader: (clientWidth?: number) => SerializedStyles;

package/dist/components/Button/Button.style.js

@@ -1,13 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.centralizedLoader = exports.childrenWrapperStyle = exports.iconStyle = exports.buttonSpanStyle = void 0;
-
-var _react = require("@emotion/react");
-
-var _functions = require("../../theme/functions");
-
-var _utils = require("../../theme/utils");
+exports.childrenWrapperStyle = exports.iconStyle = exports.buttonSpanStyle = void 0;
 
 var buttonSpanStyle = function buttonSpanStyle() {
   return function () {
@@ -45,15 +39,4 @@ var childrenWrapperStyle = function childrenWrapperStyle(_ref) {
   };
 };
 
-exports.childrenWrapperStyle = childrenWrapperStyle;
-
-var centralizedLoader = function centralizedLoader(clientWidth) {
-  return (
-    /*#__PURE__*/
-
-    /*#__PURE__*/
-    (0, _react.css)("width:", clientWidth ? (0, _utils.rem)(clientWidth) : 'auto', ";", _functions.flex, ";justify-content:center;" + (process.env.NODE_ENV === "production" ? "" : ";label:centralizedLoader;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0J1dHRvbi9CdXR0b24uc3R5bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0MrRiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9CdXR0b24vQnV0dG9uLnN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICd0aGVtZSc7XG5pbXBvcnQgeyBmbGV4IH0gZnJvbSAndGhlbWUvZnVuY3Rpb25zJztcbmltcG9ydCB7IHJlbSB9IGZyb20gJ3RoZW1lL3V0aWxzJztcbmltcG9ydCB7IFJlcXVpcmVkUHJvcGVydGllcyB9IGZyb20gJ3V0aWxzL2NvbW1vbic7XG5cbmltcG9ydCB7IFByb3BzIH0gZnJvbSAnLi9CdXR0b24nO1xuXG5leHBvcnQgY29uc3QgYnV0dG9uU3BhblN0eWxlID0gKCkgPT4gKCkgPT4ge1xuICByZXR1cm4ge1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICBqdXN0aWZ5Q29udGVudDogJ2NlbnRlcicsXG4gIH07XG59O1xuXG5leHBvcnQgY29uc3QgaWNvblN0eWxlID0gKCkgPT4gKCkgPT4gKHtcbiAgZGlzcGxheTogJ2lubGluZS1mbGV4Jyxcbn0pO1xuXG5leHBvcnQgY29uc3QgY2hpbGRyZW5XcmFwcGVyU3R5bGUgPSAoe1xuICBpY29uTGVmdCxcbiAgaWNvblJpZ2h0LFxuICBoYXNDaGlsZHJlbixcbn06IFJlcXVpcmVkUHJvcGVydGllczxcbiAgT21pdDxQcm9wcywgJ2Jsb2NrJyB8ICdpc0ljb25CdXR0b24nIHwgJ2J1dHRvblR5cGUnIHwgJ2RhdGFUZXN0SWQnIHwgJ29uQ2xpY2snPiAmIHtcbiAgICBoYXNDaGlsZHJlbjogYm9vbGVhbjtcbiAgfVxuPikgPT4gKHRoZW1lOiBUaGVtZSkgPT4ge1xuICBjb25zdCByaWdodEljb25FeGlzdHMgPSBoYXNDaGlsZHJlbiAmJiBpY29uUmlnaHQ7XG4gIGNvbnN0IGxlZnRJY29uRXhpc3RzID0gaGFzQ2hpbGRyZW4gJiYgaWNvbkxlZnQ7XG5cbiAgcmV0dXJuIHtcbiAgICBtYXJnaW5MZWZ0OiBsZWZ0SWNvbkV4aXN0cyA/IHRoZW1lLnNwYWNpbmcuc20gOiAwLFxuICAgIG1hcmdpblJpZ2h0OiByaWdodEljb25FeGlzdHMgPyB0aGVtZS5zcGFjaW5nLnNtIDogMCxcbiAgfTtcbn07XG5cbmV4cG9ydCBjb25zdCBjZW50cmFsaXplZExvYWRlcjogKGNsaWVudFdpZHRoPzogbnVtYmVyKSA9PiBTZXJpYWxpemVkU3R5bGVzID0gY2xpZW50V2lkdGggPT4gY3NzYFxuICB3aWR0aDogJHtjbGllbnRXaWR0aCA/IHJlbShjbGllbnRXaWR0aCkgOiAnYXV0byd9O1xuICAke2ZsZXh9O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbmA7XG4iXX0= */", process.env.NODE_ENV === "production" ? "" : ";label:centralizedLoader;")
-  );
-};
-
-exports.centralizedLoader = centralizedLoader;
+exports.childrenWrapperStyle = childrenWrapperStyle;

package/dist/components/Button/ButtonLoader/ButtonLoader.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Props as ButtonBaseProps } from '../../ButtonBase/ButtonBase';
+export declare type Props = {
+    innerButtonWidth?: number;
+} & Pick<ButtonBaseProps, 'type' | 'color'>;
+declare const ButtonLoader: React.FC<Props>;
+export default ButtonLoader;

package/dist/components/Button/ButtonLoader/ButtonLoader.js

@@ -0,0 +1,43 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useTypeColorToColorMatch = require("../../../hooks/useTypeColorToColorMatch");
+
+var _index = require("../../../index");
+
+var _ButtonLoader = require("./ButtonLoader.style");
+
+var _Loader = _interopRequireDefault(require("../../Loader"));
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var ButtonLoader = function ButtonLoader(_ref) {
+  var innerButtonWidth = _ref.innerButtonWidth,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'primary' : _ref$type,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? '' : _ref$color;
+  var theme = (0, _index.useTheme)();
+
+  var _useTypeColorToColorM = (0, _useTypeColorToColorMatch.useTypeColorToColorMatch)(),
+      calculateColorBetweenColorAndType = _useTypeColorToColorM.calculateColorBetweenColorAndType;
+
+  var calculatedColor = calculateColorBetweenColorAndType(color, type);
+  var spinnerColor = theme.utils.getAAColorFromSwatches(calculatedColor.color, calculatedColor.shade);
+  return (0, _react2.jsx)("div", {
+    css: (0, _ButtonLoader.centralizedLoader)(innerButtonWidth)
+  }, (0, _react2.jsx)(_Loader["default"], {
+    type: 'spinner',
+    color: spinnerColor
+  }));
+};
+
+ButtonLoader.displayName = 'Button';
+var _default = ButtonLoader;
+exports["default"] = _default;

package/dist/components/Button/ButtonLoader/ButtonLoader.style.d.ts

@@ -0,0 +1,2 @@
+import { SerializedStyles } from '@emotion/react';
+export declare const centralizedLoader: (clientWidth?: number) => SerializedStyles;

package/dist/components/Button/ButtonLoader/ButtonLoader.style.js

@@ -0,0 +1,21 @@
+"use strict";
+
+exports.__esModule = true;
+exports.centralizedLoader = void 0;
+
+var _react = require("@emotion/react");
+
+var _functions = require("../../../theme/functions");
+
+var _utils = require("../../../theme/utils");
+
+var centralizedLoader = function centralizedLoader(clientWidth) {
+  return (
+    /*#__PURE__*/
+
+    /*#__PURE__*/
+    (0, _react.css)("width:", clientWidth ? (0, _utils.rem)(clientWidth) : 'auto', ";", _functions.flex, ";justify-content:center;" + (process.env.NODE_ENV === "production" ? "" : ";label:centralizedLoader;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0J1dHRvbi9CdXR0b25Mb2FkZXIvQnV0dG9uTG9hZGVyLnN0eWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUkrRiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9CdXR0b24vQnV0dG9uTG9hZGVyL0J1dHRvbkxvYWRlci5zdHlsZS50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgU2VyaWFsaXplZFN0eWxlcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGZsZXggfSBmcm9tICd0aGVtZS9mdW5jdGlvbnMnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAndGhlbWUvdXRpbHMnO1xuXG5leHBvcnQgY29uc3QgY2VudHJhbGl6ZWRMb2FkZXI6IChjbGllbnRXaWR0aD86IG51bWJlcikgPT4gU2VyaWFsaXplZFN0eWxlcyA9IGNsaWVudFdpZHRoID0+IGNzc2BcbiAgd2lkdGg6ICR7Y2xpZW50V2lkdGggPyByZW0oY2xpZW50V2lkdGgpIDogJ2F1dG8nfTtcbiAgJHtmbGV4fTtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5gO1xuIl19 */", process.env.NODE_ENV === "production" ? "" : ";label:centralizedLoader;")
+  );
+};
+
+exports.centralizedLoader = centralizedLoader;

package/dist/components/Button/ButtonLoader/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ButtonLoader';

package/dist/components/Button/ButtonLoader/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _ButtonLoader = _interopRequireDefault(require("./ButtonLoader"));
+
+exports["default"] = _ButtonLoader["default"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/dist/components/ButtonBase/ButtonBase.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { ClickEvent } from '../../hooks/useLoading';
 import { AcceptedColorComponentTypes } from '../../utils/themeFunctions';
 import { TestProps } from '../../utils/types';
+import { buttonSizes } from './config';
 export declare type EventButtonProps = {
     onClick?: (event: ClickEvent) => void;
     onBlur?: () => void;
@@ -12,7 +13,7 @@ export declare type Props = {
     /** the color of the button based on our colors eg. red-500 */
     color?: string;
     /** This property define the size of the button. Defaults to 'md' */
-    size?: 'lg' | 'md' | 'sm';
+    size?: typeof buttonSizes[number];
     /** This property will make the button fit to its parent width. Defaults to false */
     block?: boolean;
     /** Property indicating if the component is filled with a color based on the type */

package/dist/components/ButtonBase/ButtonBase.style.d.ts

@@ -2,31 +2,34 @@ import { Theme } from '../../theme';
 import { RequiredProperties } from '../../utils/common';
 import { ColorShapeFromComponent } from '../../utils/themeFunctions';
 import { Props } from './ButtonBase';
-/** Calculates the button specific height based on the size passed to it
- * These sizes are specific to this button thus these are placed here and not in the config **/
-export declare const heightBasedOnSize: (size: 'lg' | 'md' | 'sm') => string;
-export declare const buttonBaseStyle: ({ type, filled, calculatedColor, size, block, iconLeft, iconRight, isIconButton, disabled, transparent, childrenCount, }: RequiredProperties<Omit<Props, "buttonType"> & {
+import { buttonSizes } from './config';
+/** Calculates the button specific height based on the size passed to it **/
+export declare const heightBasedOnSize: (size: typeof buttonSizes[number]) => string;
+export declare const buttonBaseStyle: ({ type, filled, calculatedColor, size, block, isIconButton, transparent, childrenCount, }: RequiredProperties<Omit<Props, "buttonType"> & {
     calculatedColor: ColorShapeFromComponent;
     childrenCount: number;
 }>) => (theme: Theme) => {
-    fontSize: string;
+    fontSize: any;
     fontWeight: 500;
     color: string;
     width: string | undefined;
     backgroundColor: string;
     padding: string;
     height: string;
-    opacity: number;
     borderRadius: "4";
     border: string;
     cursor: string;
     transition: string;
-    ':hover,:focus': {
-        backgroundColor: string | undefined;
+    ':focus-visible:not(:disabled)': {
+        outline: string;
     };
-    ':active': {
-        backgroundColor: string | undefined;
+    ':hover:not(:disabled)': {
+        backgroundColor: string;
     };
+    ':active:not(:disabled)': {
+        backgroundColor: string;
+    };
+    ':disabled': import("../../theme/states/disabled").GetDisabled;
 } | {
     display: string;
     justifyContent: string;
@@ -34,21 +37,24 @@ export declare const buttonBaseStyle: ({ type, filled, calculatedColor, size, bl
     borderRadius: string;
     padding: number;
     width: string;
-    fontSize: string;
+    fontSize: any;
     fontWeight: 500;
     color: string;
     backgroundColor: string;
     height: string;
-    opacity: number;
     border: string;
     cursor: string;
     transition: string;
-    ':hover,:focus': {
-        backgroundColor: string | undefined;
+    ':focus-visible:not(:disabled)': {
+        outline: string;
+    };
+    ':hover:not(:disabled)': {
+        backgroundColor: string;
     };
-    ':active': {
-        backgroundColor: string | undefined;
+    ':active:not(:disabled)': {
+        backgroundColor: string;
     };
+    ':disabled': import("../../theme/states/disabled").GetDisabled;
 };
 export declare const buttonSpanStyle: () => () => {
     display: string;

package/dist/components/ButtonBase/ButtonBase.style.js

@@ -3,42 +3,27 @@
 exports.__esModule = true;
 exports.iconStyle = exports.buttonSpanStyle = exports.buttonBaseStyle = exports.heightBasedOnSize = void 0;
 
-var _polished = require("polished");
-
 var _utils = require("../../theme/utils");
 
+var _states = require("../../theme/states");
+
+var _config = require("./config");
+
 var _utils2 = require("./utils");
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-/** Calculates the button specific height based on the size passed to it
- * These sizes are specific to this button thus these are placed here and not in the config **/
+/** Calculates the button specific height based on the size passed to it **/
 var heightBasedOnSize = function heightBasedOnSize(size) {
-  switch (size) {
-    case 'lg':
-      return (0, _utils.rem)(56);
-
-    case 'sm':
-      return (0, _utils.rem)(36);
-
-    default:
-      return (0, _utils.rem)(46);
-  }
+  return (0, _utils.rem)(_config.buttonConfig.sizes[size] || _config.buttonConfig.sizes["default"]);
 };
-/** Calculates the button specific font size based on the size passed to it
- * These sizes are specific to this button thus these are placed here and not in the config **/
+/** Calculates the button specific font size based on the size passed to it **/
 
 
 exports.heightBasedOnSize = heightBasedOnSize;
 
 var fontSizeBasedOnSize = function fontSizeBasedOnSize(theme, size) {
-  switch (size) {
-    case 'sm':
-      return theme.typography.fontSizes['13'];
-
-    default:
-      return theme.typography.fontSizes['16'];
-  }
+  return theme.typography.fontSizes[_config.buttonConfig.fontSize[size] || _config.buttonConfig.fontSize["default"]];
 };
 
 var buttonBaseStyle = function buttonBaseStyle(_ref) {
@@ -47,46 +32,60 @@ var buttonBaseStyle = function buttonBaseStyle(_ref) {
       calculatedColor = _ref.calculatedColor,
       size = _ref.size,
       block = _ref.block,
-      iconLeft = _ref.iconLeft,
-      iconRight = _ref.iconRight,
       isIconButton = _ref.isIconButton,
-      disabled = _ref.disabled,
       transparent = _ref.transparent,
       childrenCount = _ref.childrenCount;
   return function (theme) {
-    var hasSupplementaryIcons = Boolean(iconLeft || iconRight);
+    var backGroundColor = (0, _utils2.defineBackgroundColor)(theme, calculatedColor, type, childrenCount > 0);
+    var isOutlined = !filled && !transparent;
 
     var calculateButtonColor = function calculateButtonColor() {
       if (type === 'link') {
-        return theme.utils.getColor('blue', 550);
+        var color = _config.buttonConfig.types.link.color;
+        return theme.utils.getColor(color.name, color.shade);
       }
 
-      if (!filled && !transparent || transparent) {
-        return (0, _utils2.defineBackgroundColor)(theme, calculatedColor, type, hasSupplementaryIcons, childrenCount > 0);
+      if (isOutlined || transparent) {
+        return backGroundColor;
       }
 
       return theme.utils.getAAColorFromSwatches(calculatedColor.color, calculatedColor.shade);
     };
 
+    var borderWidth = isOutlined ? _config.buttonConfig.types.outlined.border.width : 0;
     var baseButtonStyles = {
       fontSize: fontSizeBasedOnSize(theme, size),
       fontWeight: theme.typography.weights.medium,
       color: calculateButtonColor(),
       width: block ? '100%' : undefined,
-      backgroundColor: filled && !transparent ? (0, _utils2.defineBackgroundColor)(theme, calculatedColor, type, hasSupplementaryIcons, childrenCount > 0) : 'transparent',
-      padding: size === 'sm' || size === 'md' ? theme.spacing.sm + " " + theme.spacing.md : theme.spacing.md + " " + theme.spacing.md,
+      backgroundColor: isOutlined || transparent ? 'transparent' : backGroundColor,
+      padding: size === 'lg' ? theme.spacing.md : "0 " + theme.spacing.md,
       height: heightBasedOnSize(size),
-      opacity: disabled ? 0.5 : 1,
       borderRadius: theme.spacing.xsm,
-      border: filled || transparent ? 'none' : "solid " + (0, _utils.rem)(1) + " " + (0, _polished.transparentize)(0.5, (0, _utils2.defineBackgroundColor)(theme, calculatedColor, type, hasSupplementaryIcons, childrenCount > 0)),
+      border: isOutlined ? "solid " + (0, _utils.rem)(borderWidth) + " " + backGroundColor : 'none',
       cursor: 'pointer',
-      transition: 'background-color 150ms linear',
-      ':hover,:focus': {
-        backgroundColor: !disabled ? (0, _utils2.stateBackgroundColor)(theme, 'hover', calculatedColor, filled && !transparent) : undefined
+      transition: 'background-color,border 150ms linear',
+      ':focus-visible:not(:disabled)': {
+        outline: (0, _states.getFocus)({
+          theme: theme,
+          borderWidth: borderWidth
+        }).styleOutline
       },
-      ':active': {
-        backgroundColor: !disabled ? (0, _utils2.stateBackgroundColor)(theme, 'active', calculatedColor, filled && !transparent) : undefined
-      }
+      ':hover:not(:disabled)': {
+        backgroundColor: (0, _states.getHover)({
+          theme: theme,
+          color: calculatedColor.color,
+          shade: isOutlined || transparent ? 0 : calculatedColor.shade
+        }).backgroundColor
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: (0, _states.getPressed)({
+          theme: theme,
+          color: calculatedColor.color,
+          shade: isOutlined || transparent ? 0 : calculatedColor.shade
+        }).backgroundColor
+      },
+      ':disabled': (0, _states.getDisabled)()
     };
 
     if (isIconButton) {

package/dist/components/ButtonBase/config.d.ts

@@ -0,0 +1,28 @@
+import { colorShades, flatColors } from '../../theme/palette';
+export declare const LG = "lg";
+export declare const MD = "md";
+export declare const SM = "sm";
+export declare const buttonSizes: readonly ["lg", "md", "sm"];
+declare type ButtonConfig = {
+    sizes: {
+        [key in typeof buttonSizes[number] | 'default']: number;
+    };
+    fontSize: {
+        [key in typeof SM | 'default']: number;
+    };
+    types: {
+        link: {
+            color: {
+                name: typeof flatColors[number];
+                shade: typeof colorShades[number];
+            };
+        };
+        outlined: {
+            border: {
+                width: number;
+            };
+        };
+    };
+};
+export declare const buttonConfig: ButtonConfig;
+export {};

package/dist/components/ButtonBase/config.js

@@ -0,0 +1,38 @@
+"use strict";
+
+exports.__esModule = true;
+exports.buttonConfig = exports.buttonSizes = exports.SM = exports.MD = exports.LG = void 0;
+var LG = 'lg';
+exports.LG = LG;
+var MD = 'md';
+exports.MD = MD;
+var SM = 'sm';
+exports.SM = SM;
+var buttonSizes = [LG, MD, SM];
+exports.buttonSizes = buttonSizes;
+var buttonConfig = {
+  sizes: {
+    lg: 56,
+    md: 46,
+    sm: 36,
+    "default": 46
+  },
+  fontSize: {
+    sm: 13,
+    "default": 16
+  },
+  types: {
+    link: {
+      color: {
+        name: 'blue',
+        shade: 550
+      }
+    },
+    outlined: {
+      border: {
+        width: 1
+      }
+    }
+  }
+};
+exports.buttonConfig = buttonConfig;

package/dist/components/ButtonBase/utils.d.ts

@@ -5,11 +5,4 @@ import { ColorShapeFromComponent } from '../../utils/themeFunctions';
  * if color it retrieves the color directly from the palette
  * if type it gets the specific type color from the palette
  */
-export declare const defineBackgroundColor: (theme: Theme, color: ColorShapeFromComponent | undefined, type?: "primary" | "secondary" | "success" | "error" | "warning" | "info" | "light" | "link" | undefined, iconExists?: boolean | undefined, childrenExists?: boolean | undefined) => string;
-/**
- * return the correct color to show based on the state that is passed
- * The state must be 'hover' or 'active' for now
- * It is being defined by the team that the values will always be 10% and 20%
- * for transparentize there is a revert to these values to match 90% and 80% accordingly
- */
-export declare const stateBackgroundColor: (theme: Theme, state: 'hover' | 'active', calculatedColor: ColorShapeFromComponent, filled: boolean) => string;
+export declare const defineBackgroundColor: (theme: Theme, color: ColorShapeFromComponent | undefined, type?: "primary" | "secondary" | "success" | "error" | "warning" | "info" | "light" | "link" | undefined, childrenExists?: boolean | undefined) => string;

package/dist/components/ButtonBase/utils.js

@@ -1,14 +1,10 @@
 "use strict";
 
 exports.__esModule = true;
-exports.stateBackgroundColor = exports.defineBackgroundColor = void 0;
+exports.defineBackgroundColor = void 0;
 
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 
-var _polished = require("polished");
-
-var _palette = require("../../theme/palette");
-
 var _themeFunctions = require("../../utils/themeFunctions");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -18,8 +14,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
  * if color it retrieves the color directly from the palette
  * if type it gets the specific type color from the palette
  */
-var defineBackgroundColor = function defineBackgroundColor(theme, color, type, iconExists, childrenExists) {
-  if (!childrenExists && iconExists || type === 'link') {
+var defineBackgroundColor = function defineBackgroundColor(theme, color, type, childrenExists) {
+  if (type === 'link') {
     return 'transparent';
   }
 
@@ -33,26 +29,5 @@ var defineBackgroundColor = function defineBackgroundColor(theme, color, type, i
 
   return 'transparent';
 };
-/**
- * return the correct color to show based on the state that is passed
- * The state must be 'hover' or 'active' for now
- * It is being defined by the team that the values will always be 10% and 20%
- * for transparentize there is a revert to these values to match 90% and 80% accordingly
- */
-
-
-exports.defineBackgroundColor = defineBackgroundColor;
-
-var stateBackgroundColor = function stateBackgroundColor(theme, state, calculatedColor, filled) {
-  var value = state === 'hover' ? 0.1 : 0.2;
-  var color = defineBackgroundColor(theme, calculatedColor);
-
-  if (!filled) {
-    // value here is reverted to follow tranparentize e.g (1 - 0.1 = 0.9)
-    return (0, _polished.transparentize)(1 - value, color);
-  }
-
-  return calculatedColor.shade > _palette.BASE_SHADE ? (0, _polished.lighten)(value, color) : (0, _polished.darken)(value, color);
-};
 
-exports.stateBackgroundColor = stateBackgroundColor;
+exports.defineBackgroundColor = defineBackgroundColor;

package/dist/components/Chip/Chip.d.ts

@@ -26,9 +26,11 @@ export declare type Props = {
     onClick?: (event: ClickEvent) => void;
     /** A callback that is being triggered when type is interactive and you press the X icon. */
     onClear?: () => void;
+    /** Boolean defining if the chip is disabled. Interactive only. */
+    disabled?: boolean;
 };
 declare type TestProps = {
     dataTestId?: TestId;
 };
-declare const Chip: React.ForwardRefExoticComponent<Pick<Props & TestProps & DivProps, "children" | "onChange" | "color" | "onBlur" | "type" | "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "download" | "encType" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "useMap" | "width" | "wmode" | "wrap" | "key" | "dataTestId" | keyof Props> & React.RefAttributes<HTMLDivElement>>;
+declare const Chip: React.ForwardRefExoticComponent<Pick<Props & TestProps & DivProps, "children" | "onChange" | "color" | "onBlur" | "type" | "autoFocus" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "download" | "encType" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "useMap" | "width" | "wmode" | "wrap" | "key" | "dataTestId" | keyof Props> & React.RefAttributes<HTMLButtonElement>>;
 export default Chip;

package/dist/components/Chip/Chip.js

@@ -28,6 +28,8 @@ var Chip = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       thumbnail = _ref.thumbnail,
       isSelected = _ref.isSelected,
       isChecked = _ref.isChecked,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       badgeNumber = _ref.badgeNumber,
       onClick = _ref.onClick,
       onClear = _ref.onClear,
@@ -35,24 +37,26 @@ var Chip = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       dataTestId = _ref$dataTestId === void 0 ? '' : _ref$dataTestId,
       children = _ref.children;
 
-  if (styleType === 'read-only' && (isSelected || isChecked || badgeNumber)) {
-    throw new Error('The properties isSelected, isChecked and badgeNumber are only for Interactive style type Chips.');
+  if (styleType === 'read-only' && (isSelected || isChecked || badgeNumber || disabled)) {
+    throw new Error('The properties isSelected, isChecked, badgeNumber and disabled are only for Interactive style type Chips.');
   }
 
   if (styleType === 'interactive' && thumbnail) {
     throw new Error('The property thumbnail is only for Read-Only style type Chips.');
   }
 
-  return (0, _react2.jsx)("div", {
+  return (0, _react2.jsx)("button", {
     ref: ref,
     "data-testid": (0, _helpers.generateTestDataId)('chip', dataTestId),
     onClick: onClick,
+    disabled: disabled,
     css: (0, _Chip.chipStyle)({
       styleType: styleType,
       fill: fill,
       isSelected: isSelected,
       onClear: onClear,
-      onClick: onClick
+      onClick: onClick,
+      disabled: disabled
     })
   }, isChecked && (0, _react2.jsx)(_Icon["default"], {
     size: 14,
@@ -69,7 +73,7 @@ var Chip = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     isSelected: isSelected,
     dataTestId: dataTestId
   }), onClear && (0, _react2.jsx)("div", {
-    css: (0, _Chip.closeIconWrapperStyle)()
+    css: (0, _Chip.closeIconWrapperStyle)(disabled)
   }, (0, _react2.jsx)(_Icon["default"], {
     size: 14,
     name: 'close',
@@ -77,7 +81,10 @@ var Chip = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     variant: 850,
     onClick: function onClick(e) {
       e.stopPropagation();
-      onClear();
+
+      if (!disabled) {
+        onClear();
+      }
     }
   })));
 });