@laerdal/life-react-components 3.6.0 → 3.6.1

package/dist/ProfileButton/ProfileButton.cjs

@@ -5,42 +5,48 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ProfileButtonContainer = void 0;
+exports["default"] = exports.ProfileButtonContainer = 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"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _ = require("..");
 var _Iconbutton = require("../Button/Iconbutton");
 var _NotificationDot = require("../NotificationDot");
 var _styles = require("../styles");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["portraitSrc", "icon", "initials", "onClick", "hideOnLowWidth", "disabled", "notificationVariant", "className", "tabIndex"];
+var _excluded = ["portraitSrc", "icon", "initials", "onClick", "disabled", "notificationVariant", "className", "tabIndex"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-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; }
-var PortraitOverlay = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n"])), _.COLORS.black);
-var ProfileButtonContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ", " {\n    display: ", ";\n\n    ", " {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ", " {\n        background-color: ", ";\n\n        svg, svg path {\n          fill: ", ";\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ", " {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ", " {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n"])), _Iconbutton.StyledPrimaryIconButton, function (props) {
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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 PortraitOverlay = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n"])), function (props) {
+  return _.COLORS.getColor('black', props.theme);
+});
+var ProfileButtonContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ", " {\n    display: ", ";\n\n    ", " {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ", " {\n        background-color: ", ";\n\n        svg, svg path {\n          fill: ", ";\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ", " {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ", " {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n"])), _Iconbutton.IconButtonStyledPrimary, function (props) {
   return props.hideOnLowWidth ? 'none' : 'inline';
-}, _styles.BREAKPOINTS.MEDIUM, _Iconbutton.IconButtonContentStyles, _.COLORS.neutral_100, _.COLORS.neutral_300, PortraitOverlay, PortraitOverlay);
+}, _styles.BREAKPOINTS.MEDIUM, _Iconbutton.IconButtonContentStyles, function (props) {
+  return _.COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return _.COLORS.getColor('neutral_300', props.theme);
+}, PortraitOverlay, PortraitOverlay);
 exports.ProfileButtonContainer = ProfileButtonContainer;
-var NotificationContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"])));
-var ImageWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n"])));
+var NotificationContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"])));
+var ImageWrapper = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n"])));
 var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var portraitSrc = _ref.portraitSrc,
     icon = _ref.icon,
     initials = _ref.initials,
     onClick = _ref.onClick,
-    hideOnLowWidth = _ref.hideOnLowWidth,
     disabled = _ref.disabled,
     notificationVariant = _ref.notificationVariant,
     className = _ref.className,
     tabIndex = _ref.tabIndex,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var theme = (0, _styledComponents.useTheme)();
   var renderIcon = function renderIcon() {
     return portraitSrc && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ImageWrapper, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
@@ -49,14 +55,13 @@ var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }) || initials && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentS, {
       className: "initials",
       textStyle: _styles.ComponentTextStyle.Bold,
-      color: disabled ? _.COLORS.neutral_300 : _.COLORS.white,
+      color: disabled ? _.COLORS.getColor('neutral_300', theme) : _.COLORS.getColor('white', theme),
       children: initials
     }) || /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
       children: icon
     });
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ProfileButtonContainer, {
-    hideOnLowWidth: hideOnLowWidth,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.IconButton, _objectSpread(_objectSpread({
       ref: ref,
       className: className,
@@ -64,8 +69,7 @@ var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       action: onClick,
       variant: "primary",
       tabIndex: tabIndex,
-      shape: "circular",
-      hideOnLowWidth: hideOnLowWidth
+      shape: "circular"
     }, rest), {}, {
       children: [renderIcon(), notificationVariant && /*#__PURE__*/(0, _jsxRuntime.jsx)(NotificationContainer, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationDot.NotificationDot, {
@@ -77,13 +81,12 @@ var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   });
 });
 ProfileButton.propTypes = {
-  portraitSrc: _propTypes.default.string,
-  icon: _propTypes.default.node,
-  initials: _propTypes.default.string,
-  onClick: _propTypes.default.func.isRequired,
-  notificationVariant: _propTypes.default.oneOf(['positive', 'critical']),
-  hideOnLowWidth: _propTypes.default.bool
+  portraitSrc: _propTypes["default"].string,
+  icon: _propTypes["default"].node,
+  initials: _propTypes["default"].string,
+  onClick: _propTypes["default"].func.isRequired,
+  notificationVariant: _propTypes["default"].oneOf(['positive', 'critical'])
 };
 var _default = ProfileButton;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=ProfileButton.cjs.map

package/dist/ProfileButton/ProfileButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileButton.cjs","names":["PortraitOverlay","styled","div","COLORS","black","ProfileButtonContainer","StyledPrimaryIconButton","props","hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContentStyles","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","React","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","renderIcon","ComponentTextStyle","Bold","white","Size","Medium"],"sources":["../../src/ProfileButton/ProfileButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, IconButton, Size} from '..';\r\nimport {IconButtonContentStyles, StyledPrimaryIconButton} from '../Button/Iconbutton';\r\nimport {NotificationDot} from '../NotificationDot';\r\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\r\n\r\nexport type ProfileButtonProps = {\r\n  portraitSrc?: string;\r\n  icon?: React.ReactNode;\r\n  initials?: string;\r\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  notificationVariant?: 'positive' | 'critical';\r\n  hideOnLowWidth?: boolean;\r\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\r\n\r\nconst PortraitOverlay = styled.div`\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 50%;\r\n  background-color: ${COLORS.black};\r\n  opacity: 0;\r\n  position: absolute;\r\n  top: 0px;\r\n  left: 0px;\r\n`;\r\n\r\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\r\n  width: 48px;\r\n  height: 48px;\r\n  display: inline;\r\n  user-select: none;\r\n  \r\n  ${StyledPrimaryIconButton} {\r\n    display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      display: inline;\r\n    }\r\n\r\n    :disabled {\r\n      img {\r\n        filter: grayscale(100%);\r\n      }\r\n\r\n      ${IconButtonContentStyles} {\r\n        background-color: ${COLORS.neutral_100};\r\n\r\n        svg, svg path {\r\n          fill: ${COLORS.neutral_300};\r\n        }\r\n      }\r\n    }\r\n\r\n    :hover:not(:disabled):not(:active),\r\n    &.hover-state {\r\n      ${PortraitOverlay} {\r\n        opacity: 0.25;\r\n        transition: opacity 100ms ease-in-out;\r\n      }\r\n    }\r\n\r\n    :active:not(:disabled),\r\n    &.active-state {\r\n      ${PortraitOverlay} {\r\n        opacity: 0.5;\r\n        transition: opacity 0ms ease-in-out;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst NotificationContainer = styled.div`\r\n  position: absolute;\r\n  left: 30px;\r\n  bottom: 30px;\r\n`;\r\n\r\nconst ImageWrapper = styled.div`\r\n  width: 36px;\r\n  height: 36px;\r\n  position: relative;\r\n\r\n  img {\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: 50%;\r\n    object-fit: cover;\r\n  }\r\n`;\r\n\r\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\r\n                                                                                 portraitSrc,\r\n                                                                                 icon,\r\n                                                                                 initials,\r\n                                                                                 onClick,\r\n                                                                                 hideOnLowWidth,\r\n                                                                                 disabled,\r\n                                                                                 notificationVariant,\r\n                                                                                 className,\r\n                                                                                 tabIndex,\r\n                                                                                 ...rest\r\n                                                                               }, ref) => {\r\n  const renderIcon = () => {\r\n    return (\r\n      (portraitSrc && (\r\n        <ImageWrapper>\r\n          <img src={portraitSrc}/>\r\n          <PortraitOverlay/>\r\n        </ImageWrapper>\r\n      )) ||\r\n      (initials && (\r\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\r\n                    color={disabled ? COLORS.neutral_300 : COLORS.white}>\r\n          {initials}\r\n        </ComponentS>\r\n      )) || <>{icon}</>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <ProfileButtonContainer hideOnLowWidth={hideOnLowWidth}>\r\n      <IconButton ref={ref}\r\n                  className={className}\r\n                  disabled={disabled}\r\n                  action={onClick}\r\n                  variant=\"primary\"\r\n                  tabIndex={tabIndex}\r\n                  shape=\"circular\"\r\n                  hideOnLowWidth={hideOnLowWidth}\r\n                  {...rest}>\r\n        {renderIcon()}\r\n        {notificationVariant && (\r\n          <NotificationContainer>\r\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\r\n          </NotificationContainer>\r\n        )}\r\n      </IconButton>\r\n    </ProfileButtonContainer>\r\n  );\r\n});\r\n\r\nexport default ProfileButton;\r\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAsE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWtE,IAAMA,eAAe,GAAGC,yBAAM,CAACC,GAAG,0OAIZC,QAAM,CAACC,KAAK,CAKjC;AAEM,IAAMC,sBAAsB,GAAGJ,yBAAM,CAACC,GAAG,8vBAM5CI,mCAAuB,EACZ,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC,EAE5DC,mBAAW,CAACC,MAAM,EAShBC,mCAAuB,EACHR,QAAM,CAACS,WAAW,EAG5BT,QAAM,CAACU,WAAW,EAO5Bb,eAAe,EAQfA,eAAe,CAMtB;AAAC;AAEF,IAAMc,qBAAqB,GAAGb,yBAAM,CAACC,GAAG,8IAIvC;AAED,IAAMa,YAAY,GAAGd,yBAAM,CAACC,GAAG,qPAW9B;AAED,IAAMc,aAAa,gBAAGC,KAAK,CAACC,UAAU,CAAwC,gBAWIC,GAAG,EAAK;EAAA,IAVTC,WAAW,QAAXA,WAAW;IACXC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPf,cAAc,QAAdA,cAAc;IACdgB,QAAQ,QAARA,QAAQ;IACRC,mBAAmB,QAAnBA,mBAAmB;IACnBC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAEtF,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACvB,OACGT,WAAW,iBACV,sBAAC,YAAY;MAAA,wBACX;QAAK,GAAG,EAAEA;MAAY,EAAE,eACxB,qBAAC,eAAe,KAAE;IAAA,EAErB,IACAE,QAAQ,iBACP,qBAAC,kBAAU;MAAC,SAAS,EAAC,UAAU;MAAC,SAAS,EAAEQ,0BAAkB,CAACC,IAAK;MACxD,KAAK,EAAEP,QAAQ,GAAGrB,QAAM,CAACU,WAAW,GAAGV,QAAM,CAAC6B,KAAM;MAAA,UAC7DV;IAAQ,EAEX,iBAAI;MAAA,UAAGD;IAAI,EAAI;EAErB,CAAC;EAED,oBACE,qBAAC,sBAAsB;IAAC,cAAc,EAAEb,cAAe;IAAA,uBACrD,sBAAC,YAAU;MAAC,GAAG,EAAEW,GAAI;MACT,SAAS,EAAEO,SAAU;MACrB,QAAQ,EAAEF,QAAS;MACnB,MAAM,EAAED,OAAQ;MAChB,OAAO,EAAC,SAAS;MACjB,QAAQ,EAAEI,QAAS;MACnB,KAAK,EAAC,UAAU;MAChB,cAAc,EAAEnB;IAAe,GAC3BoB,IAAI;MAAA,WACjBC,UAAU,EAAE,EACZJ,mBAAmB,iBAClB,qBAAC,qBAAqB;QAAA,uBACpB,qBAAC,gCAAe;UAAC,IAAI,EAAEQ,MAAI,CAACC,MAAO;UAAC,OAAO,EAAET;QAAoB;MAAE,EAEtE;IAAA;EACU,EACU;AAE7B,CAAC,CAAC;AAAC;EApIDL,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,OAAO;EACPE,mBAAmB,4BAAG,UAAU,EAAG,UAAU;EAC7CjB,cAAc;AAAA;AAAA,eAiIDQ,aAAa;AAAA"}
+{"version":3,"file":"ProfileButton.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_","_Iconbutton","_NotificationDot","_styles","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","PortraitOverlay","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","ProfileButtonContainer","IconButtonStyledPrimary","hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContentStyles","exports","NotificationContainer","ImageWrapper","ProfileButton","forwardRef","_ref","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","_objectWithoutProperties2","useTheme","renderIcon","jsxs","children","jsx","src","ComponentS","textStyle","ComponentTextStyle","Bold","color","Fragment","IconButton","action","variant","shape","NotificationDot","size","Size","Medium","propTypes","_propTypes","string","node","func","isRequired","oneOf","_default"],"sources":["../../src/ProfileButton/ProfileButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {COLORS, IconButton, Size} from '..';\r\nimport {IconButtonContentStyles, IconButtonStyledPrimary} from '../Button/Iconbutton';\r\nimport {NotificationDot} from '../NotificationDot';\r\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\r\n\r\nexport type ProfileButtonProps = {\r\n  /**\r\n   * Optional. The source URL of the profile picture.\r\n   */\r\n  portraitSrc?: string;\r\n\r\n  /**\r\n   * Optional. The icon of the profile to be displayed in absence of 'portraitSrc' and 'initials'.\r\n   */\r\n  icon?: React.ReactNode;\r\n\r\n  /**\r\n   * Optional. The initials of the user. If provided, these will be displayed in circle in the absence of a profile picture.\r\n   */\r\n  initials?: string;\r\n\r\n  /**\r\n   * Required. The handler function to be called when the button is clicked.\r\n   */\r\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n\r\n  /**\r\n   * Optional. The variant of the notification dot. It can be 'positive' or 'critical'.\r\n   */\r\n  notificationVariant?: 'positive' | 'critical';\r\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\r\n\r\nconst PortraitOverlay = styled.div`\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 50%;\r\n  background-color: ${props => COLORS.getColor('black', props.theme)};\r\n  opacity: 0;\r\n  position: absolute;\r\n  top: 0px;\r\n  left: 0px;\r\n`;\r\n\r\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\r\n  width: 48px;\r\n  height: 48px;\r\n  display: inline;\r\n  user-select: none;\r\n  \r\n  ${IconButtonStyledPrimary} {\r\n    display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      display: inline;\r\n    }\r\n\r\n    :disabled {\r\n      img {\r\n        filter: grayscale(100%);\r\n      }\r\n\r\n      ${IconButtonContentStyles} {\r\n        background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n        svg, svg path {\r\n          fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n        }\r\n      }\r\n    }\r\n\r\n    :hover:not(:disabled):not(:active),\r\n    &.hover-state {\r\n      ${PortraitOverlay} {\r\n        opacity: 0.25;\r\n        transition: opacity 100ms ease-in-out;\r\n      }\r\n    }\r\n\r\n    :active:not(:disabled),\r\n    &.active-state {\r\n      ${PortraitOverlay} {\r\n        opacity: 0.5;\r\n        transition: opacity 0ms ease-in-out;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst NotificationContainer = styled.div`\r\n  position: absolute;\r\n  left: 30px;\r\n  bottom: 30px;\r\n`;\r\n\r\nconst ImageWrapper = styled.div`\r\n  width: 36px;\r\n  height: 36px;\r\n  position: relative;\r\n\r\n  img {\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: 50%;\r\n    object-fit: cover;\r\n  }\r\n`;\r\n\r\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\r\n                                                                                 portraitSrc,\r\n                                                                                 icon,\r\n                                                                                 initials,\r\n                                                                                 onClick,\r\n                                                                                 disabled,\r\n                                                                                 notificationVariant,\r\n                                                                                 className,\r\n                                                                                 tabIndex,\r\n                                                                                 ...rest\r\n                                                                               }, ref) => {\r\n  const theme = useTheme();\r\n  const renderIcon = () => {\r\n    return (\r\n      (portraitSrc && (\r\n        <ImageWrapper>\r\n          <img src={portraitSrc}/>\r\n          <PortraitOverlay/>\r\n        </ImageWrapper>\r\n      )) ||\r\n      (initials && (\r\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\r\n                    color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('white', theme)}>\r\n          {initials}\r\n        </ComponentS>\r\n      )) || <>{icon}</>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <ProfileButtonContainer>\r\n      <IconButton ref={ref}\r\n                  className={className}\r\n                  disabled={disabled}\r\n                  action={onClick}\r\n                  variant=\"primary\"\r\n                  tabIndex={tabIndex}\r\n                  shape=\"circular\"\r\n                  {...rest}>\r\n        {renderIcon()}\r\n        {notificationVariant && (\r\n          <NotificationContainer>\r\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\r\n          </NotificationContainer>\r\n        )}\r\n      </IconButton>\r\n    </ProfileButtonContainer>\r\n  );\r\n});\r\n\r\nexport default ProfileButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/ProfileButton/ProfileButton.d.ts

@@ -1,21 +1,49 @@
 import * as React from 'react';
 export type ProfileButtonProps = {
+    /**
+     * Optional. The source URL of the profile picture.
+     */
     portraitSrc?: string;
+    /**
+     * Optional. The icon of the profile to be displayed in absence of 'portraitSrc' and 'initials'.
+     */
     icon?: React.ReactNode;
+    /**
+     * Optional. The initials of the user. If provided, these will be displayed in circle in the absence of a profile picture.
+     */
     initials?: string;
+    /**
+     * Required. The handler function to be called when the button is clicked.
+     */
     onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Optional. The variant of the notification dot. It can be 'positive' or 'critical'.
+     */
     notificationVariant?: 'positive' | 'critical';
-    hideOnLowWidth?: boolean;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;
 export declare const ProfileButtonContainer: import("styled-components").StyledComponent<"div", any, {
     hideOnLowWidth?: boolean | undefined;
 }, never>;
 declare const ProfileButton: React.ForwardRefExoticComponent<{
+    /**
+     * Optional. The source URL of the profile picture.
+     */
     portraitSrc?: string | undefined;
+    /**
+     * Optional. The icon of the profile to be displayed in absence of 'portraitSrc' and 'initials'.
+     */
     icon?: React.ReactNode;
+    /**
+     * Optional. The initials of the user. If provided, these will be displayed in circle in the absence of a profile picture.
+     */
     initials?: string | undefined;
+    /**
+     * Required. The handler function to be called when the button is clicked.
+     */
     onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
-    notificationVariant?: "positive" | "critical" | undefined;
-    hideOnLowWidth?: boolean | undefined;
+    /**
+     * Optional. The variant of the notification dot. It can be 'positive' or 'critical'.
+     */
+    notificationVariant?: "critical" | "positive" | undefined;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & React.RefAttributes<HTMLButtonElement>>;
 export default ProfileButton;

package/dist/ProfileButton/ProfileButton.js

@@ -2,23 +2,29 @@ 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 = ["portraitSrc", "icon", "initials", "onClick", "hideOnLowWidth", "disabled", "notificationVariant", "className", "tabIndex"];
+var _excluded = ["portraitSrc", "icon", "initials", "onClick", "disabled", "notificationVariant", "className", "tabIndex"];
 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 * as React from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { COLORS, IconButton, Size } from '..';
-import { IconButtonContentStyles, StyledPrimaryIconButton } from '../Button/Iconbutton';
+import { IconButtonContentStyles, IconButtonStyledPrimary } from '../Button/Iconbutton';
 import { NotificationDot } from '../NotificationDot';
 import { BREAKPOINTS, ComponentS, ComponentTextStyle } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var PortraitOverlay = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n"])), COLORS.black);
-export var ProfileButtonContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ", " {\n    display: ", ";\n\n    ", " {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ", " {\n        background-color: ", ";\n\n        svg, svg path {\n          fill: ", ";\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ", " {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ", " {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n"])), StyledPrimaryIconButton, function (props) {
+var PortraitOverlay = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n"])), function (props) {
+  return COLORS.getColor('black', props.theme);
+});
+export var ProfileButtonContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ", " {\n    display: ", ";\n\n    ", " {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ", " {\n        background-color: ", ";\n\n        svg, svg path {\n          fill: ", ";\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ", " {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ", " {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n"])), IconButtonStyledPrimary, function (props) {
   return props.hideOnLowWidth ? 'none' : 'inline';
-}, BREAKPOINTS.MEDIUM, IconButtonContentStyles, COLORS.neutral_100, COLORS.neutral_300, PortraitOverlay, PortraitOverlay);
+}, BREAKPOINTS.MEDIUM, IconButtonContentStyles, function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+}, PortraitOverlay, PortraitOverlay);
 var NotificationContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"])));
 var ImageWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n"])));
 var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -26,12 +32,12 @@ var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     icon = _ref.icon,
     initials = _ref.initials,
     onClick = _ref.onClick,
-    hideOnLowWidth = _ref.hideOnLowWidth,
     disabled = _ref.disabled,
     notificationVariant = _ref.notificationVariant,
     className = _ref.className,
     tabIndex = _ref.tabIndex,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
   var renderIcon = function renderIcon() {
     return portraitSrc && /*#__PURE__*/_jsxs(ImageWrapper, {
       children: [/*#__PURE__*/_jsx("img", {
@@ -40,14 +46,13 @@ var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }) || initials && /*#__PURE__*/_jsx(ComponentS, {
       className: "initials",
       textStyle: ComponentTextStyle.Bold,
-      color: disabled ? COLORS.neutral_300 : COLORS.white,
+      color: disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('white', theme),
       children: initials
     }) || /*#__PURE__*/_jsx(_Fragment, {
       children: icon
     });
   };
   return /*#__PURE__*/_jsx(ProfileButtonContainer, {
-    hideOnLowWidth: hideOnLowWidth,
     children: /*#__PURE__*/_jsxs(IconButton, _objectSpread(_objectSpread({
       ref: ref,
       className: className,
@@ -55,8 +60,7 @@ var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       action: onClick,
       variant: "primary",
       tabIndex: tabIndex,
-      shape: "circular",
-      hideOnLowWidth: hideOnLowWidth
+      shape: "circular"
     }, rest), {}, {
       children: [renderIcon(), notificationVariant && /*#__PURE__*/_jsx(NotificationContainer, {
         children: /*#__PURE__*/_jsx(NotificationDot, {
@@ -72,8 +76,7 @@ ProfileButton.propTypes = {
   icon: _pt.node,
   initials: _pt.string,
   onClick: _pt.func.isRequired,
-  notificationVariant: _pt.oneOf(['positive', 'critical']),
-  hideOnLowWidth: _pt.bool
+  notificationVariant: _pt.oneOf(['positive', 'critical'])
 };
 export default ProfileButton;
 //# sourceMappingURL=ProfileButton.js.map

package/dist/ProfileButton/ProfileButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileButton.js","names":["React","styled","COLORS","IconButton","Size","IconButtonContentStyles","StyledPrimaryIconButton","NotificationDot","BREAKPOINTS","ComponentS","ComponentTextStyle","PortraitOverlay","div","black","ProfileButtonContainer","props","hideOnLowWidth","MEDIUM","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","renderIcon","Bold","white","Medium"],"sources":["../../src/ProfileButton/ProfileButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, IconButton, Size} from '..';\r\nimport {IconButtonContentStyles, StyledPrimaryIconButton} from '../Button/Iconbutton';\r\nimport {NotificationDot} from '../NotificationDot';\r\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\r\n\r\nexport type ProfileButtonProps = {\r\n  portraitSrc?: string;\r\n  icon?: React.ReactNode;\r\n  initials?: string;\r\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  notificationVariant?: 'positive' | 'critical';\r\n  hideOnLowWidth?: boolean;\r\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\r\n\r\nconst PortraitOverlay = styled.div`\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 50%;\r\n  background-color: ${COLORS.black};\r\n  opacity: 0;\r\n  position: absolute;\r\n  top: 0px;\r\n  left: 0px;\r\n`;\r\n\r\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\r\n  width: 48px;\r\n  height: 48px;\r\n  display: inline;\r\n  user-select: none;\r\n  \r\n  ${StyledPrimaryIconButton} {\r\n    display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      display: inline;\r\n    }\r\n\r\n    :disabled {\r\n      img {\r\n        filter: grayscale(100%);\r\n      }\r\n\r\n      ${IconButtonContentStyles} {\r\n        background-color: ${COLORS.neutral_100};\r\n\r\n        svg, svg path {\r\n          fill: ${COLORS.neutral_300};\r\n        }\r\n      }\r\n    }\r\n\r\n    :hover:not(:disabled):not(:active),\r\n    &.hover-state {\r\n      ${PortraitOverlay} {\r\n        opacity: 0.25;\r\n        transition: opacity 100ms ease-in-out;\r\n      }\r\n    }\r\n\r\n    :active:not(:disabled),\r\n    &.active-state {\r\n      ${PortraitOverlay} {\r\n        opacity: 0.5;\r\n        transition: opacity 0ms ease-in-out;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst NotificationContainer = styled.div`\r\n  position: absolute;\r\n  left: 30px;\r\n  bottom: 30px;\r\n`;\r\n\r\nconst ImageWrapper = styled.div`\r\n  width: 36px;\r\n  height: 36px;\r\n  position: relative;\r\n\r\n  img {\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: 50%;\r\n    object-fit: cover;\r\n  }\r\n`;\r\n\r\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\r\n                                                                                 portraitSrc,\r\n                                                                                 icon,\r\n                                                                                 initials,\r\n                                                                                 onClick,\r\n                                                                                 hideOnLowWidth,\r\n                                                                                 disabled,\r\n                                                                                 notificationVariant,\r\n                                                                                 className,\r\n                                                                                 tabIndex,\r\n                                                                                 ...rest\r\n                                                                               }, ref) => {\r\n  const renderIcon = () => {\r\n    return (\r\n      (portraitSrc && (\r\n        <ImageWrapper>\r\n          <img src={portraitSrc}/>\r\n          <PortraitOverlay/>\r\n        </ImageWrapper>\r\n      )) ||\r\n      (initials && (\r\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\r\n                    color={disabled ? COLORS.neutral_300 : COLORS.white}>\r\n          {initials}\r\n        </ComponentS>\r\n      )) || <>{icon}</>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <ProfileButtonContainer hideOnLowWidth={hideOnLowWidth}>\r\n      <IconButton ref={ref}\r\n                  className={className}\r\n                  disabled={disabled}\r\n                  action={onClick}\r\n                  variant=\"primary\"\r\n                  tabIndex={tabIndex}\r\n                  shape=\"circular\"\r\n                  hideOnLowWidth={hideOnLowWidth}\r\n                  {...rest}>\r\n        {renderIcon()}\r\n        {notificationVariant && (\r\n          <NotificationContainer>\r\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\r\n          </NotificationContainer>\r\n        )}\r\n      </IconButton>\r\n    </ProfileButtonContainer>\r\n  );\r\n});\r\n\r\nexport default ProfileButton;\r\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,UAAU,EAAEC,IAAI,QAAO,IAAI;AAC3C,SAAQC,uBAAuB,EAAEC,uBAAuB,QAAO,sBAAsB;AACrF,SAAQC,eAAe,QAAO,oBAAoB;AAClD,SAAQC,WAAW,EAAEC,UAAU,EAAEC,kBAAkB,QAAO,WAAW;AAAC;AAAA;AAAA;AAWtE,IAAMC,eAAe,GAAGV,MAAM,CAACW,GAAG,4NAIZV,MAAM,CAACW,KAAK,CAKjC;AAED,OAAO,IAAMC,sBAAsB,GAAGb,MAAM,CAACW,GAAG,gvBAM5CN,uBAAuB,EACZ,UAAAS,KAAK;EAAA,OAAKA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC,EAE5DR,WAAW,CAACS,MAAM,EAShBZ,uBAAuB,EACHH,MAAM,CAACgB,WAAW,EAG5BhB,MAAM,CAACiB,WAAW,EAO5BR,eAAe,EAQfA,eAAe,CAMtB;AAED,IAAMS,qBAAqB,GAAGnB,MAAM,CAACW,GAAG,gIAIvC;AAED,IAAMS,YAAY,GAAGpB,MAAM,CAACW,GAAG,uOAW9B;AAED,IAAMU,aAAa,gBAAGtB,KAAK,CAACuB,UAAU,CAAwC,gBAWIC,GAAG,EAAK;EAAA,IAVTC,WAAW,QAAXA,WAAW;IACXC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPZ,cAAc,QAAdA,cAAc;IACda,QAAQ,QAARA,QAAQ;IACRC,mBAAmB,QAAnBA,mBAAmB;IACnBC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAEtF,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACvB,OACGT,WAAW,iBACV,MAAC,YAAY;MAAA,wBACX;QAAK,GAAG,EAAEA;MAAY,EAAE,eACxB,KAAC,eAAe,KAAE;IAAA,EAErB,IACAE,QAAQ,iBACP,KAAC,UAAU;MAAC,SAAS,EAAC,UAAU;MAAC,SAAS,EAAEjB,kBAAkB,CAACyB,IAAK;MACxD,KAAK,EAAEN,QAAQ,GAAG3B,MAAM,CAACiB,WAAW,GAAGjB,MAAM,CAACkC,KAAM;MAAA,UAC7DT;IAAQ,EAEX,iBAAI;MAAA,UAAGD;IAAI,EAAI;EAErB,CAAC;EAED,oBACE,KAAC,sBAAsB;IAAC,cAAc,EAAEV,cAAe;IAAA,uBACrD,MAAC,UAAU;MAAC,GAAG,EAAEQ,GAAI;MACT,SAAS,EAAEO,SAAU;MACrB,QAAQ,EAAEF,QAAS;MACnB,MAAM,EAAED,OAAQ;MAChB,OAAO,EAAC,SAAS;MACjB,QAAQ,EAAEI,QAAS;MACnB,KAAK,EAAC,UAAU;MAChB,cAAc,EAAEhB;IAAe,GAC3BiB,IAAI;MAAA,WACjBC,UAAU,EAAE,EACZJ,mBAAmB,iBAClB,KAAC,qBAAqB;QAAA,uBACpB,KAAC,eAAe;UAAC,IAAI,EAAE1B,IAAI,CAACiC,MAAO;UAAC,OAAO,EAAEP;QAAoB;MAAE,EAEtE;IAAA;EACU,EACU;AAE7B,CAAC,CAAC;AAAC;EApIDL,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,OAAO;EACPE,mBAAmB,aAAG,UAAU,EAAG,UAAU;EAC7Cd,cAAc;AAAA;AAiIhB,eAAeM,aAAa"}
+{"version":3,"file":"ProfileButton.js","names":["React","styled","useTheme","COLORS","IconButton","Size","IconButtonContentStyles","IconButtonStyledPrimary","NotificationDot","BREAKPOINTS","ComponentS","ComponentTextStyle","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","PortraitOverlay","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","ProfileButtonContainer","_templateObject2","hideOnLowWidth","MEDIUM","NotificationContainer","_templateObject3","ImageWrapper","_templateObject4","ProfileButton","forwardRef","_ref","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","_objectWithoutProperties","_excluded","renderIcon","children","src","textStyle","Bold","color","_objectSpread","action","variant","shape","size","Medium","propTypes","_pt","string","node","func","isRequired","oneOf"],"sources":["../../src/ProfileButton/ProfileButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {COLORS, IconButton, Size} from '..';\r\nimport {IconButtonContentStyles, IconButtonStyledPrimary} from '../Button/Iconbutton';\r\nimport {NotificationDot} from '../NotificationDot';\r\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\r\n\r\nexport type ProfileButtonProps = {\r\n  /**\r\n   * Optional. The source URL of the profile picture.\r\n   */\r\n  portraitSrc?: string;\r\n\r\n  /**\r\n   * Optional. The icon of the profile to be displayed in absence of 'portraitSrc' and 'initials'.\r\n   */\r\n  icon?: React.ReactNode;\r\n\r\n  /**\r\n   * Optional. The initials of the user. If provided, these will be displayed in circle in the absence of a profile picture.\r\n   */\r\n  initials?: string;\r\n\r\n  /**\r\n   * Required. The handler function to be called when the button is clicked.\r\n   */\r\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n\r\n  /**\r\n   * Optional. The variant of the notification dot. It can be 'positive' or 'critical'.\r\n   */\r\n  notificationVariant?: 'positive' | 'critical';\r\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\r\n\r\nconst PortraitOverlay = styled.div`\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 50%;\r\n  background-color: ${props => COLORS.getColor('black', props.theme)};\r\n  opacity: 0;\r\n  position: absolute;\r\n  top: 0px;\r\n  left: 0px;\r\n`;\r\n\r\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\r\n  width: 48px;\r\n  height: 48px;\r\n  display: inline;\r\n  user-select: none;\r\n  \r\n  ${IconButtonStyledPrimary} {\r\n    display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      display: inline;\r\n    }\r\n\r\n    :disabled {\r\n      img {\r\n        filter: grayscale(100%);\r\n      }\r\n\r\n      ${IconButtonContentStyles} {\r\n        background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n        svg, svg path {\r\n          fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n        }\r\n      }\r\n    }\r\n\r\n    :hover:not(:disabled):not(:active),\r\n    &.hover-state {\r\n      ${PortraitOverlay} {\r\n        opacity: 0.25;\r\n        transition: opacity 100ms ease-in-out;\r\n      }\r\n    }\r\n\r\n    :active:not(:disabled),\r\n    &.active-state {\r\n      ${PortraitOverlay} {\r\n        opacity: 0.5;\r\n        transition: opacity 0ms ease-in-out;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst NotificationContainer = styled.div`\r\n  position: absolute;\r\n  left: 30px;\r\n  bottom: 30px;\r\n`;\r\n\r\nconst ImageWrapper = styled.div`\r\n  width: 36px;\r\n  height: 36px;\r\n  position: relative;\r\n\r\n  img {\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: 50%;\r\n    object-fit: cover;\r\n  }\r\n`;\r\n\r\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\r\n                                                                                 portraitSrc,\r\n                                                                                 icon,\r\n                                                                                 initials,\r\n                                                                                 onClick,\r\n                                                                                 disabled,\r\n                                                                                 notificationVariant,\r\n                                                                                 className,\r\n                                                                                 tabIndex,\r\n                                                                                 ...rest\r\n                                                                               }, ref) => {\r\n  const theme = useTheme();\r\n  const renderIcon = () => {\r\n    return (\r\n      (portraitSrc && (\r\n        <ImageWrapper>\r\n          <img src={portraitSrc}/>\r\n          <PortraitOverlay/>\r\n        </ImageWrapper>\r\n      )) ||\r\n      (initials && (\r\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\r\n                    color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('white', theme)}>\r\n          {initials}\r\n        </ComponentS>\r\n      )) || <>{icon}</>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <ProfileButtonContainer>\r\n      <IconButton ref={ref}\r\n                  className={className}\r\n                  disabled={disabled}\r\n                  action={onClick}\r\n                  variant=\"primary\"\r\n                  tabIndex={tabIndex}\r\n                  shape=\"circular\"\r\n                  {...rest}>\r\n        {renderIcon()}\r\n        {notificationVariant && (\r\n          <NotificationContainer>\r\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\r\n          </NotificationContainer>\r\n        )}\r\n      </IconButton>\r\n    </ProfileButtonContainer>\r\n  );\r\n});\r\n\r\nexport default ProfileButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/ProfileButton/__tests__/ProfileButton.test.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import {ProfileButton} from '../index';
+import {render} from '../../test-utils';
+
+
+
+describe('ProfileButton', () => {
+
+  it('should render', () => {
+    const wrapper = render(<ProfileButton onClick={jest.fn()} initials={'initials'}/>);
+
+    expect(wrapper.queryByText('initials')).toBeInTheDocument();
+  });
+
+  it('should render image if portraitSrc is provided', () => {
+    const wrapper = render(<ProfileButton portraitSrc={'#'} onClick={jest.fn()}/>);
+
+
+    expect(wrapper.container.querySelector(`img`)).toBeInTheDocument();
+    expect(wrapper.queryByText('initials')).not.toBeInTheDocument();
+  });
+
+  it('should render initials if portraitSrc is not provided and initials are', () => {
+    const wrapper = render(<ProfileButton initials={'initials'} onClick={jest.fn()}/>);
+
+
+    expect(wrapper.container.querySelector(`img`)).not.toBeInTheDocument();
+    expect(wrapper.queryByText('initials')).toBeInTheDocument();
+  });
+
+});

package/dist/ProfileButton/index.cjs

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "ProfileButton", {
   enumerable: true,
   get: function get() {
-    return _ProfileButton.default;
+    return _ProfileButton["default"];
   }
 });
 var _ProfileButton = _interopRequireDefault(require("./ProfileButton"));

package/dist/ProfileButton/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/ProfileButton/index.tsx"],"sourcesContent":["export { default as ProfileButton } from './ProfileButton';"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"file":"index.cjs","names":["_ProfileButton","_interopRequireDefault","require"],"sources":["../../src/ProfileButton/index.tsx"],"sourcesContent":["export { default as ProfileButton } from './ProfileButton';"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,cAAA,GAAAC,sBAAA,CAAAC,OAAA","ignoreList":[]}

package/dist/ProfileButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","ProfileButton"],"sources":["../../src/ProfileButton/index.tsx"],"sourcesContent":["export { default as ProfileButton } from './ProfileButton';"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAAa,QAAQ,iBAAiB"}
+{"version":3,"file":"index.js","names":["default","ProfileButton"],"sources":["../../src/ProfileButton/index.tsx"],"sourcesContent":["export { default as ProfileButton } from './ProfileButton';"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAAa,QAAQ,iBAAiB","ignoreList":[]}