@laerdal/life-react-components 3.6.0 → 3.6.1

package/dist/Button/Iconbutton.js

@@ -2,13 +2,13 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-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) { _defineProperty(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) { _defineProperty(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; }
 import React from 'react';
 import styled from 'styled-components';
-import { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';
+import { COLORS, focusStyles, invertedFocusStyles } from '../styles';
 import { defaultOnMouseDownHandler } from '../common';
 import TooltipWrapper from "../Tooltips/TooltipWrapper";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -28,9 +28,7 @@ var getBorderRadiusStyle = function getBorderRadiusStyle(props) {
   }
 };
 export var IconButtonContentStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
-export var StyledIconButton = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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';
-}, BREAKPOINTS.MEDIUM, function (props) {
+export var IconButtonStyled = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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';
@@ -39,41 +37,61 @@ export var StyledIconButton = styled.button(_templateObject2 || (_templateObject
 }, function (props) {
   return props.invertFocus ? invertedFocusStyles : focusStyles;
 });
-export var StyledPrimaryIconButton = styled(StyledIconButton)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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' : COLORS.primary_500;
+export var IconButtonStyledPrimary = styled(IconButtonStyled)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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' : COLORS.getColor('primary_500', props.theme);
 }, function (props) {
-  return props.iconColor || COLORS.white;
+  return props.iconColor || COLORS.getColor('white', props.theme);
 }, function (props) {
-  return props.iconColor || COLORS.white;
-}, IconButtonContentStyles, COLORS.primary_700, IconButtonContentStyles, IconButtonContentStyles, COLORS.white, IconButtonContentStyles, COLORS.primary_800, IconButtonContentStyles, IconButtonContentStyles, COLORS.white, IconButtonContentStyles, COLORS.neutral_200, COLORS.white, COLORS.white);
-export var StyledSecondaryIconButton = styled(StyledIconButton)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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' : COLORS.white;
+  return props.iconColor || COLORS.getColor('white', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+}, IconButtonContentStyles, IconButtonContentStyles, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, IconButtonContentStyles, IconButtonContentStyles, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
 }, function (props) {
-  return props.iconColor || COLORS.neutral_600;
+  return COLORS.getColor('white', props.theme);
 }, function (props) {
-  return props.iconColor || COLORS.neutral_600;
+  return COLORS.getColor('white', props.theme);
+});
+export var IconButtonStyledSecondary = styled(IconButtonStyled)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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' : COLORS.getColor('white', props.theme);
+}, function (props) {
+  return props.iconColor || COLORS.getColor('neutral_600', props.theme);
+}, function (props) {
+  return props.iconColor || COLORS.getColor('neutral_600', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return COLORS.getColor('primary_20', props.theme);
+}, IconButtonContentStyles, IconButtonContentStyles, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return COLORS.getColor('primary_100', props.theme);
+}, IconButtonContentStyles, IconButtonContentStyles, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return props.useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme);
 }, function (props) {
-  return props.shouldNotInteract ? 'none' : 'auto';
-}, IconButtonContentStyles, COLORS.primary_20, IconButtonContentStyles, IconButtonContentStyles, COLORS.primary_700, IconButtonContentStyles, COLORS.primary_100, IconButtonContentStyles, IconButtonContentStyles, COLORS.primary_800, IconButtonContentStyles, function (props) {
-  return props.useTransparentBackground ? 'transparent' : COLORS.white;
-}, COLORS.neutral_300, COLORS.neutral_300);
-var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  return COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+});
+export var IconButton = /*#__PURE__*/React.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,
@@ -83,65 +101,37 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var render = function render() {
     // Let's render button
+
+    var ButtonVariant = IconButtonStyledPrimary;
     switch (variant) {
       case 'secondary':
-        return /*#__PURE__*/_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 ? defaultOnMouseDownHandler : undefined,
-          hidden: hidden,
-          invertFocus: invertFocus,
-          focusBackgroundColor: focusBackgroundColor
-        }, rest), {}, {
-          children: /*#__PURE__*/_jsx(IconButtonContentStyles, {
-            children: children
-          })
-        }));
-      case 'primary':
-      default:
-        return /*#__PURE__*/_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 ? defaultOnMouseDownHandler : undefined,
-          hidden: hidden,
-          invertFocus: invertFocus,
-          focusBackgroundColor: focusBackgroundColor
-        }, rest), {}, {
-          children: /*#__PURE__*/_jsx(IconButtonContentStyles, {
-            children: children
-          })
-        }));
+        ButtonVariant = IconButtonStyledSecondary;
+        break;
     }
+    return /*#__PURE__*/_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 ? defaultOnMouseDownHandler : undefined,
+      hidden: hidden,
+      invertFocus: invertFocus
+    }, rest), {}, {
+      children: /*#__PURE__*/_jsx(IconButtonContentStyles, {
+        children: children
+      })
+    }));
   };
   return !tooltip ? render() : /*#__PURE__*/_jsx(TooltipWrapper, _objectSpread(_objectSpread({}, tooltip), {}, {
     children: render()
@@ -151,14 +141,10 @@ IconButton.propTypes = {
   variant: _pt.oneOf(['primary', 'secondary']),
   shape: _pt.oneOf(['square', 'circular']),
   action: _pt.func.isRequired,
-  hideOnLowWidth: _pt.bool,
-  isInMobileMenu: _pt.bool,
   useTransparentBackground: _pt.bool,
-  shouldNotInteract: _pt.bool,
   iconColor: _pt.string,
   unsetIconSize: _pt.bool,
   borderRadius: _pt.number,
-  focusBackgroundColor: _pt.string,
   children: _pt.node,
   invertFocus: _pt.bool,
   focusOnClick: _pt.bool

package/dist/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Iconbutton.js","names":["React","styled","BREAKPOINTS","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","TooltipWrapper","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContentStyles","div","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","invertFocus","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","dataTestId","focusOnClick","tooltip","rest","render","event","stopPropagation","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.js","names":["React","styled","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","TooltipWrapper","jsx","_jsx","getBorderRadius","props","borderRadius","concat","getBorderRadiusStyle","radius","flatEdge","IconButtonContentStyles","div","_templateObject","_taggedTemplateLiteral","IconButtonStyled","button","_templateObject2","unsetIconSize","invertFocus","IconButtonStyledPrimary","_templateObject3","useTransparentBackground","getColor","theme","iconColor","IconButtonStyledSecondary","_templateObject4","IconButton","forwardRef","_ref","ref","id","variant","shape","action","children","disabled","tabIndex","type","hidden","dataTestId","focusOnClick","tooltip","rest","_objectWithoutProperties","_excluded","render","ButtonVariant","_objectSpread","onClick","event","stopPropagation","onMouseDown","undefined","propTypes","_pt","oneOf","func","isRequired","bool","string","number","node"],"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":[]}