@laerdal/life-react-components 3.5.3 → 4.0.1

package/dist/Button/Iconbutton.cjs

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledSecondaryIconButton = exports.StyledPrimaryIconButton = exports.StyledIconButton = exports.IconButtonContentStyles = void 0;
+exports["default"] = exports.IconButtonStyledSecondary = exports.IconButtonStyledPrimary = exports.IconButtonStyled = exports.IconButtonContentStyles = exports.IconButton = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -15,10 +15,10 @@ var _styles = require("../styles");
 var _common = require("../common");
 var _TooltipWrapper = _interopRequireDefault(require("../Tooltips/TooltipWrapper"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["id", "variant", "shape", "action", "hideOnLowWidth", "isInMobileMenu", "children", "useTransparentBackground", "shouldNotInteract", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "focusBackgroundColor", "type", "hidden", "invertFocus", "dataTestId", "focusOnClick", "tooltip"];
+var _excluded = ["id", "variant", "shape", "action", "children", "useTransparentBackground", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "type", "hidden", "invertFocus", "dataTestId", "focusOnClick", "tooltip"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getBorderRadius = function getBorderRadius(props) {
   return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';
 };
@@ -34,11 +34,9 @@ var getBorderRadiusStyle = function getBorderRadiusStyle(props) {
       return "".concat(radius);
   }
 };
-var IconButtonContentStyles = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
+var IconButtonContentStyles = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
 exports.IconButtonContentStyles = IconButtonContentStyles;
-var StyledIconButton = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ", ";\n  ", " {\n    display: block;\n  }\n\n  border-radius: ", ";\n  ", " {\n    height: 36px;\n    width: 36px;\n    border-radius: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ", ";\n      width: ", ";\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ", "\n  }\n"])), function (props) {
-  return props.hideOnLowWidth ? 'none' : 'block';
-}, _styles.BREAKPOINTS.MEDIUM, function (props) {
+var IconButtonStyled = _styledComponents["default"].button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n  display: block;\n\n  border-radius: ", ";\n  ", " {\n    height: 36px;\n    width: 36px;\n    border-radius: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ", ";\n      width: ", ";\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ", "\n  }\n"])), function (props) {
   return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';
 }, IconButtonContentStyles, getBorderRadiusStyle, function (props) {
   return props.unsetIconSize ? 'unset' : '24px';
@@ -47,133 +45,122 @@ var StyledIconButton = _styledComponents.default.button(_templateObject2 || (_te
 }, function (props) {
   return props.invertFocus ? _styles.invertedFocusStyles : _styles.focusStyles;
 });
-exports.StyledIconButton = StyledIconButton;
-var StyledPrimaryIconButton = (0, _styledComponents.default)(StyledIconButton)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, function (props) {
-  return props.useTransparentBackground ? 'transparent' : _styles.COLORS.primary_500;
+exports.IconButtonStyled = IconButtonStyled;
+var IconButtonStyledPrimary = (0, _styledComponents["default"])(IconButtonStyled)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, function (props) {
+  return props.useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('primary_500', props.theme);
 }, function (props) {
-  return props.iconColor || _styles.COLORS.white;
+  return props.iconColor || _styles.COLORS.getColor('white', props.theme);
 }, function (props) {
-  return props.iconColor || _styles.COLORS.white;
-}, IconButtonContentStyles, _styles.COLORS.primary_700, IconButtonContentStyles, IconButtonContentStyles, _styles.COLORS.white, IconButtonContentStyles, _styles.COLORS.primary_800, IconButtonContentStyles, IconButtonContentStyles, _styles.COLORS.white, IconButtonContentStyles, _styles.COLORS.neutral_200, _styles.COLORS.white, _styles.COLORS.white);
-exports.StyledPrimaryIconButton = StyledPrimaryIconButton;
-var StyledSecondaryIconButton = (0, _styledComponents.default)(StyledIconButton)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n  pointer-events: ", ";\n\n  &:hover:not(:disabled) {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, function (props) {
-  return props.useTransparentBackground ? 'transparent' : _styles.COLORS.white;
+  return props.iconColor || _styles.COLORS.getColor('white', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return _styles.COLORS.getColor('primary_700', props.theme);
+}, IconButtonContentStyles, IconButtonContentStyles, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+}, IconButtonContentStyles, IconButtonContentStyles, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
 }, function (props) {
-  return props.iconColor || _styles.COLORS.neutral_600;
+  return _styles.COLORS.getColor('white', props.theme);
 }, function (props) {
-  return props.iconColor || _styles.COLORS.neutral_600;
+  return _styles.COLORS.getColor('white', props.theme);
+});
+exports.IconButtonStyledPrimary = IconButtonStyledPrimary;
+var IconButtonStyledSecondary = (0, _styledComponents["default"])(IconButtonStyled)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n\n  &:hover:not(:disabled) {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, function (props) {
+  return props.useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('white', props.theme);
+}, function (props) {
+  return props.iconColor || _styles.COLORS.getColor('neutral_600', props.theme);
+}, function (props) {
+  return props.iconColor || _styles.COLORS.getColor('neutral_600', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return _styles.COLORS.getColor('primary_20', props.theme);
+}, IconButtonContentStyles, IconButtonContentStyles, function (props) {
+  return _styles.COLORS.getColor('primary_700', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return _styles.COLORS.getColor('primary_100', props.theme);
+}, IconButtonContentStyles, IconButtonContentStyles, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return props.useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('white', props.theme);
 }, function (props) {
-  return props.shouldNotInteract ? 'none' : 'auto';
-}, IconButtonContentStyles, _styles.COLORS.primary_20, IconButtonContentStyles, IconButtonContentStyles, _styles.COLORS.primary_700, IconButtonContentStyles, _styles.COLORS.primary_100, IconButtonContentStyles, IconButtonContentStyles, _styles.COLORS.primary_800, IconButtonContentStyles, function (props) {
-  return props.useTransparentBackground ? 'transparent' : _styles.COLORS.white;
-}, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
-exports.StyledSecondaryIconButton = StyledSecondaryIconButton;
-var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  return _styles.COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_300', props.theme);
+});
+exports.IconButtonStyledSecondary = IconButtonStyledSecondary;
+var IconButton = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var id = _ref.id,
     variant = _ref.variant,
     shape = _ref.shape,
     action = _ref.action,
-    hideOnLowWidth = _ref.hideOnLowWidth,
-    isInMobileMenu = _ref.isInMobileMenu,
     children = _ref.children,
     useTransparentBackground = _ref.useTransparentBackground,
-    shouldNotInteract = _ref.shouldNotInteract,
     disabled = _ref.disabled,
     iconColor = _ref.iconColor,
     unsetIconSize = _ref.unsetIconSize,
     tabIndex = _ref.tabIndex,
     flatEdge = _ref.flatEdge,
     borderRadius = _ref.borderRadius,
-    focusBackgroundColor = _ref.focusBackgroundColor,
     type = _ref.type,
     hidden = _ref.hidden,
     invertFocus = _ref.invertFocus,
     dataTestId = _ref.dataTestId,
     focusOnClick = _ref.focusOnClick,
     tooltip = _ref.tooltip,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var render = function render() {
     // Let's render button
+
+    var ButtonVariant = IconButtonStyledPrimary;
     switch (variant) {
       case 'secondary':
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSecondaryIconButton, _objectSpread(_objectSpread({
-          id: id,
-          type: type !== null && type !== void 0 ? type : 'button',
-          "data-testid": dataTestId,
-          ref: ref,
-          onClick: function onClick(event) {
-            event.stopPropagation();
-            action(event);
-          },
-          disabled: disabled,
-          hideOnLowWidth: hideOnLowWidth || false,
-          inMobileMenu: isInMobileMenu,
-          useTransparentBackground: useTransparentBackground,
-          shouldNotInteract: shouldNotInteract,
-          iconColor: iconColor,
-          unsetIconSize: unsetIconSize,
-          tabIndex: tabIndex,
-          borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
-          onMouseDown: !focusOnClick ? _common.defaultOnMouseDownHandler : undefined,
-          hidden: hidden,
-          invertFocus: invertFocus,
-          focusBackgroundColor: focusBackgroundColor
-        }, rest), {}, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButtonContentStyles, {
-            children: children
-          })
-        }));
-      case 'primary':
-      default:
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPrimaryIconButton, _objectSpread(_objectSpread({
-          id: id,
-          type: type !== null && type !== void 0 ? type : 'button',
-          "data-testid": dataTestId,
-          flatEdge: flatEdge,
-          ref: ref,
-          onClick: function onClick(event) {
-            event.stopPropagation();
-            action(event);
-          },
-          disabled: disabled,
-          hideOnLowWidth: hideOnLowWidth || false,
-          inMobileMenu: isInMobileMenu,
-          useTransparentBackground: useTransparentBackground,
-          iconColor: iconColor,
-          unsetIconSize: unsetIconSize,
-          tabIndex: tabIndex,
-          borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
-          onMouseDown: !focusOnClick ? _common.defaultOnMouseDownHandler : undefined,
-          hidden: hidden,
-          invertFocus: invertFocus,
-          focusBackgroundColor: focusBackgroundColor
-        }, rest), {}, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButtonContentStyles, {
-            children: children
-          })
-        }));
+        ButtonVariant = IconButtonStyledSecondary;
+        break;
     }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonVariant, _objectSpread(_objectSpread({
+      id: id,
+      type: type !== null && type !== void 0 ? type : 'button',
+      "data-testid": dataTestId,
+      flatEdge: flatEdge,
+      ref: ref,
+      onClick: function onClick(event) {
+        event.stopPropagation();
+        action(event);
+      },
+      disabled: disabled,
+      useTransparentBackground: useTransparentBackground,
+      iconColor: iconColor,
+      unsetIconSize: unsetIconSize,
+      tabIndex: tabIndex,
+      borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
+      onMouseDown: !focusOnClick ? _common.defaultOnMouseDownHandler : undefined,
+      hidden: hidden,
+      invertFocus: invertFocus
+    }, rest), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButtonContentStyles, {
+        children: children
+      })
+    }));
   };
-  return !tooltip ? render() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipWrapper.default, _objectSpread(_objectSpread({}, tooltip), {}, {
+  return !tooltip ? render() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipWrapper["default"], _objectSpread(_objectSpread({}, tooltip), {}, {
     children: render()
   }));
 });
+exports.IconButton = IconButton;
 IconButton.propTypes = {
-  variant: _propTypes.default.oneOf(['primary', 'secondary']),
-  shape: _propTypes.default.oneOf(['square', 'circular']),
-  action: _propTypes.default.func.isRequired,
-  hideOnLowWidth: _propTypes.default.bool,
-  isInMobileMenu: _propTypes.default.bool,
-  useTransparentBackground: _propTypes.default.bool,
-  shouldNotInteract: _propTypes.default.bool,
-  iconColor: _propTypes.default.string,
-  unsetIconSize: _propTypes.default.bool,
-  borderRadius: _propTypes.default.number,
-  focusBackgroundColor: _propTypes.default.string,
-  children: _propTypes.default.node,
-  invertFocus: _propTypes.default.bool,
-  focusOnClick: _propTypes.default.bool
+  variant: _propTypes["default"].oneOf(['primary', 'secondary']),
+  shape: _propTypes["default"].oneOf(['square', 'circular']),
+  action: _propTypes["default"].func.isRequired,
+  useTransparentBackground: _propTypes["default"].bool,
+  iconColor: _propTypes["default"].string,
+  unsetIconSize: _propTypes["default"].bool,
+  borderRadius: _propTypes["default"].number,
+  children: _propTypes["default"].node,
+  invertFocus: _propTypes["default"].bool,
+  focusOnClick: _propTypes["default"].bool
 };
 var _default = IconButton;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=Iconbutton.cjs.map

package/dist/Button/Iconbutton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Iconbutton.cjs","names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContentStyles","styled","div","StyledIconButton","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","dataTestId","focusOnClick","tooltip","rest","render","event","stopPropagation","defaultOnMouseDownHandler","undefined"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { Testable } from '../types';\r\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\r\nimport TooltipWrapper from \"../Tooltips/TooltipWrapper\";\r\n\r\ninterface HeaderItemProps {\r\n  hideOnLowWidth: boolean;\r\n  inMobileMenu?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n  borderRadius?: number;\r\n  shape?: string;\r\n  flatEdge?: string;\r\n  focusBackgroundColor?: string;\r\n  invertFocus?: boolean;\r\n  shouldNotInteract?: boolean;\r\n}\r\n\r\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\r\n\r\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\r\n  const radius = getBorderRadius(props);\r\n  switch (props.flatEdge) {\r\n    case 'left':\r\n      return `0px ${radius} ${radius} 0px`;\r\n\r\n    case 'right':\r\n      return `${radius} 0px 0px ${radius}`;\r\n\r\n    case 'none':\r\n    default:\r\n      return `${radius}`;\r\n  }\r\n};\r\n\r\nexport const IconButtonContentStyles = styled.div``;\r\n\r\nexport const StyledIconButton = styled.button<HeaderItemProps>`\r\n  border-width: 0;\r\n  cursor: pointer;\r\n  height: 48px;\r\n  width: 48px;\r\n  background: transparent;\r\n  position: relative;\r\n\r\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    display: block;\r\n  }\r\n\r\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\r\n  ${IconButtonContentStyles} {\r\n    height: 36px;\r\n    width: 36px;\r\n    border-radius: ${getBorderRadiusStyle};\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    svg {\r\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\r\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\r\n      padding: 0;\r\n    }\r\n  }\r\n  &:only-child {\r\n    margin: 0;\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:focus {\r\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\r\n  }\r\n`;\r\n\r\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\r\n\r\n    svg {\r\n      fill: ${(props) => props.iconColor || COLORS.white};\r\n      path {\r\n        fill: ${(props) => props.iconColor || COLORS.white};\r\n      }\r\n    }\r\n  }\r\n  &:hover:not(:disabled),\r\n  &.hover-state {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${COLORS.primary_700};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${COLORS.white};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${COLORS.primary_800};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${COLORS.white};\r\n    }\r\n  }\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${COLORS.neutral_200};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${COLORS.white};\r\n      }\r\n      fill: ${COLORS.white};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\r\n\r\n    svg {\r\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\r\n      path {\r\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\r\n      }\r\n    }\r\n  }\r\n\r\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\r\n\r\n  &:hover:not(:disabled) {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${COLORS.primary_20};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${COLORS.primary_700};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${COLORS.primary_100};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${COLORS.neutral_300};\r\n      }\r\n      fill: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\r\n  variant?: 'primary' | 'secondary';\r\n  shape?: 'square' | 'circular';\r\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  hideOnLowWidth?: boolean;\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  isInMobileMenu?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  shouldNotInteract?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n  borderRadius?: number;\r\n  focusBackgroundColor?: string;\r\n  children?: React.ReactNode;\r\n  invertFocus?: boolean;\r\n  focusOnClick?: boolean;\r\n\r\n  tooltip?: Omit<TooltipProps, 'tabIndex'>;\r\n}\r\n\r\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\r\n  (\r\n    {\r\n      id,\r\n      variant,\r\n      shape,\r\n      action,\r\n      hideOnLowWidth,\r\n      isInMobileMenu,\r\n      children,\r\n      useTransparentBackground,\r\n      shouldNotInteract,\r\n      disabled,\r\n      iconColor,\r\n      unsetIconSize,\r\n      tabIndex,\r\n      flatEdge,\r\n      borderRadius,\r\n      focusBackgroundColor,\r\n      type,\r\n      hidden,\r\n      invertFocus,\r\n      dataTestId,\r\n      focusOnClick,\r\n      tooltip,\r\n      ...rest\r\n    }: IconButtonProps,\r\n    ref,\r\n  ) => {\r\n\r\n    const render = () => {\r\n      // Let's render button\r\n      switch (variant) {\r\n        case 'secondary':\r\n          return (\r\n            <StyledSecondaryIconButton\r\n              id={id}\r\n              type={type ?? 'button'}\r\n              data-testid={dataTestId}\r\n              ref={ref}\r\n              onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\r\n                event.stopPropagation();\r\n                action(event);\r\n              }}\r\n              disabled={disabled}\r\n\r\n              hideOnLowWidth={hideOnLowWidth || false}\r\n              inMobileMenu={isInMobileMenu}\r\n              useTransparentBackground={useTransparentBackground}\r\n              shouldNotInteract={shouldNotInteract}\r\n              iconColor={iconColor}\r\n              unsetIconSize={unsetIconSize}\r\n              tabIndex={tabIndex}\r\n              borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\r\n              onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\r\n              hidden={hidden}\r\n              invertFocus={invertFocus}\r\n              focusBackgroundColor={focusBackgroundColor}\r\n              {...rest}>\r\n              <IconButtonContentStyles>{children}</IconButtonContentStyles>\r\n            </StyledSecondaryIconButton>\r\n          );\r\n        case 'primary':\r\n        default:\r\n          return (\r\n            <StyledPrimaryIconButton\r\n              id={id}\r\n              type={type ?? 'button'}\r\n              data-testid={dataTestId}\r\n              flatEdge={flatEdge}\r\n              ref={ref}\r\n              onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\r\n                event.stopPropagation();\r\n                action(event);\r\n              }}\r\n              disabled={disabled}\r\n              hideOnLowWidth={hideOnLowWidth || false}\r\n              inMobileMenu={isInMobileMenu}\r\n              useTransparentBackground={useTransparentBackground}\r\n              iconColor={iconColor}\r\n              unsetIconSize={unsetIconSize}\r\n              tabIndex={tabIndex}\r\n              borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\r\n              onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\r\n              hidden={hidden}\r\n              invertFocus={invertFocus}\r\n              focusBackgroundColor={focusBackgroundColor}\r\n              {...rest}>\r\n              <IconButtonContentStyles>{children}</IconButtonContentStyles>\r\n            </StyledPrimaryIconButton>\r\n          );\r\n      }\r\n    }\r\n\r\n    return !tooltip\r\n      ? render()\r\n      : (\r\n        <TooltipWrapper {...tooltip}>\r\n          {render()}\r\n        </TooltipWrapper>\r\n      );\r\n  },\r\n);\r\n\r\nexport default IconButton;\r\n"],"mappings":"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"}
+{"version":3,"file":"Iconbutton.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_common","_TooltipWrapper","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","getBorderRadius","props","borderRadius","concat","getBorderRadiusStyle","radius","flatEdge","IconButtonContentStyles","styled","div","_taggedTemplateLiteral2","exports","IconButtonStyled","button","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","IconButtonStyledPrimary","useTransparentBackground","COLORS","getColor","theme","iconColor","IconButtonStyledSecondary","IconButton","React","forwardRef","_ref","ref","id","variant","shape","action","children","disabled","tabIndex","type","hidden","dataTestId","focusOnClick","tooltip","rest","_objectWithoutProperties2","render","ButtonVariant","jsx","onClick","event","stopPropagation","onMouseDown","defaultOnMouseDownHandler","undefined","propTypes","_propTypes","oneOf","func","isRequired","bool","string","number","node","_default"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { Testable } from '../types';\r\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\r\nimport TooltipWrapper from \"../Tooltips/TooltipWrapper\";\r\n\r\nexport interface HeaderItemProps {\r\n  inMobileMenu?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n  borderRadius?: number;\r\n  shape?: string;\r\n  flatEdge?: string;\r\n  invertFocus?: boolean;\r\n  shouldNotInteract?: boolean;\r\n}\r\n\r\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\r\n\r\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\r\n  const radius = getBorderRadius(props);\r\n  switch (props.flatEdge) {\r\n    case 'left':\r\n      return `0px ${radius} ${radius} 0px`;\r\n\r\n    case 'right':\r\n      return `${radius} 0px 0px ${radius}`;\r\n\r\n    case 'none':\r\n    default:\r\n      return `${radius}`;\r\n  }\r\n};\r\n\r\nexport const IconButtonContentStyles = styled.div``;\r\n\r\nexport const IconButtonStyled = styled.button<HeaderItemProps>`\r\n  border-width: 0;\r\n  cursor: pointer;\r\n  height: 48px;\r\n  width: 48px;\r\n  background: transparent;\r\n  position: relative;\r\n  display: block;\r\n\r\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\r\n  ${IconButtonContentStyles} {\r\n    height: 36px;\r\n    width: 36px;\r\n    border-radius: ${getBorderRadiusStyle};\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    svg {\r\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\r\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\r\n      padding: 0;\r\n    }\r\n  }\r\n  &:only-child {\r\n    margin: 0;\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:focus {\r\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledPrimary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.getColor('primary_500', props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.iconColor || COLORS.getColor('white', props.theme)};\r\n      path {\r\n        fill: ${(props) => props.iconColor || COLORS.getColor('white', props.theme)};\r\n      }\r\n    }\r\n  }\r\n  &:hover:not(:disabled),\r\n  &.hover-state {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.getColor('white', props.theme)};\r\n      }\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledSecondary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.iconColor || COLORS.getColor('neutral_600', props.theme)};\r\n      path {\r\n        fill: ${(props) => props.iconColor || COLORS.getColor('neutral_600', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n  &:hover:not(:disabled) {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme))};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n      fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\r\n  /** Variant of the button. Defaults to 'primary' */\r\n  variant?: 'primary' | 'secondary';\r\n  /** Shape of the button. Defaults to 'square' */\r\n  shape?: 'square' | 'circular';\r\n  /** Action that will get executed when button is clicked. */\r\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  /** Allows removing rounded corners on one of the edges of the button. */\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  /** If set background filling color of the button will be transparent. */\r\n  useTransparentBackground?: boolean;\r\n  /** Custom fill color for SVG icon. */\r\n  iconColor?: string;\r\n  /** If set then the width and height of SVG icon will be set to 'unset', otherwise will be set to '24px' */\r\n  unsetIconSize?: boolean;\r\n  /** Sets border radius of the button.  */\r\n  borderRadius?: number;\r\n  /** Content (icon) to show in the button. */\r\n  children?: React.ReactNode;\r\n  /** Invert color scheme of focus framing. */\r\n  invertFocus?: boolean;\r\n  /** If this flag is set, then blurs current focus, as a result will focus current IconButton when user clicks it. */\r\n  focusOnClick?: boolean;\r\n  /** Details of the tooltip to show. */\r\n  tooltip?: Omit<TooltipProps, 'tabIndex'>;\r\n}\r\n\r\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\r\n  (\r\n    {\r\n      id,\r\n      variant,\r\n      shape,\r\n      action,\r\n      children,\r\n      useTransparentBackground,\r\n      disabled,\r\n      iconColor,\r\n      unsetIconSize,\r\n      tabIndex,\r\n      flatEdge,\r\n      borderRadius,\r\n      type,\r\n      hidden,\r\n      invertFocus,\r\n      dataTestId,\r\n      focusOnClick,\r\n      tooltip,\r\n      ...rest\r\n    }: IconButtonProps,\r\n    ref,\r\n  ) => {\r\n\r\n    const render = () => {\r\n      // Let's render button\r\n\r\n      let ButtonVariant = IconButtonStyledPrimary;\r\n      switch (variant) {\r\n        case 'secondary':\r\n          ButtonVariant = IconButtonStyledSecondary;\r\n          break;\r\n      }\r\n\r\n      return <ButtonVariant\r\n          id={id}\r\n          type={type ?? 'button'}\r\n          data-testid={dataTestId}\r\n          flatEdge={flatEdge}\r\n          ref={ref}\r\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\r\n            event.stopPropagation();\r\n            action(event);\r\n          }}\r\n          disabled={disabled}\r\n          useTransparentBackground={useTransparentBackground}\r\n          iconColor={iconColor}\r\n          unsetIconSize={unsetIconSize}\r\n          tabIndex={tabIndex}\r\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\r\n          onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\r\n          hidden={hidden}\r\n          invertFocus={invertFocus}\r\n          {...rest}>\r\n          <IconButtonContentStyles>{children}</IconButtonContentStyles>\r\n        </ButtonVariant>;\r\n      }\r\n\r\n    return !tooltip\r\n      ? render()\r\n      : (\r\n        <TooltipWrapper {...tooltip}>\r\n          {render()}\r\n        </TooltipWrapper>\r\n      );\r\n  },\r\n);\r\n\r\nexport default IconButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Button/Iconbutton.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Testable } from '../types';
 import { TooltipProps } from "../Tooltips/TooltipTypes";
-interface HeaderItemProps {
-    hideOnLowWidth: boolean;
+export interface HeaderItemProps {
     inMobileMenu?: boolean;
     useTransparentBackground?: boolean;
     iconColor?: string;
@@ -10,31 +9,38 @@ interface HeaderItemProps {
     borderRadius?: number;
     shape?: string;
     flatEdge?: string;
-    focusBackgroundColor?: string;
     invertFocus?: boolean;
     shouldNotInteract?: boolean;
 }
 export declare const IconButtonContentStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledIconButton: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
-export declare const StyledPrimaryIconButton: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
-export declare const StyledSecondaryIconButton: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
+export declare const IconButtonStyled: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
+export declare const IconButtonStyledPrimary: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
+export declare const IconButtonStyledSecondary: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
 export interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onMouseDown'> {
+    /** Variant of the button. Defaults to 'primary' */
     variant?: 'primary' | 'secondary';
+    /** Shape of the button. Defaults to 'square' */
     shape?: 'square' | 'circular';
+    /** Action that will get executed when button is clicked. */
     action: (event?: React.MouseEvent<HTMLButtonElement>) => void;
-    hideOnLowWidth?: boolean;
+    /** Allows removing rounded corners on one of the edges of the button. */
     flatEdge?: 'right' | 'left' | 'none' | undefined;
-    isInMobileMenu?: boolean;
+    /** If set background filling color of the button will be transparent. */
     useTransparentBackground?: boolean;
-    shouldNotInteract?: boolean;
+    /** Custom fill color for SVG icon. */
     iconColor?: string;
+    /** If set then the width and height of SVG icon will be set to 'unset', otherwise will be set to '24px' */
     unsetIconSize?: boolean;
+    /** Sets border radius of the button.  */
     borderRadius?: number;
-    focusBackgroundColor?: string;
+    /** Content (icon) to show in the button. */
     children?: React.ReactNode;
+    /** Invert color scheme of focus framing. */
     invertFocus?: boolean;
+    /** If this flag is set, then blurs current focus, as a result will focus current IconButton when user clicks it. */
     focusOnClick?: boolean;
+    /** Details of the tooltip to show. */
     tooltip?: Omit<TooltipProps, 'tabIndex'>;
 }
-declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default IconButton;