@mtes-mct/monitor-ui 18.8.0 → 18.9.0

package/elements/IconButton.d.ts

@@ -4,7 +4,9 @@ import { type IconProps } from '../types/definitions';
 export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
     Icon: FunctionComponent<IconProps>;
     accent?: Accent | undefined;
-    badge?: string | undefined;
+    badgeBackgroundColor?: string | undefined;
+    badgeColor?: string | undefined;
+    badgeNumber?: number | undefined;
     color?: string | undefined;
     /** In pixels, override `size` prop default values. */
     iconSize?: number | undefined;
@@ -14,5 +16,5 @@ export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'chi
     /** Prevent onClick event propagation. */
     withUnpropagatedClick?: boolean | undefined;
 };
-export declare function IconButton({ accent, className, color, Icon, iconSize, isCompact, onClick, size, type, withUnpropagatedClick, ...nativeProps }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconButton({ accent, badgeBackgroundColor, badgeColor, badgeNumber, className, color, Icon, iconSize, isCompact, onClick, size, type, withUnpropagatedClick, ...nativeProps }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=IconButton.d.ts.map

package/elements/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/elements/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAA4B,KAAK,oBAAoB,EAAE,KAAK,iBAAiB,EAAe,MAAM,OAAO,CAAA;AAIhH,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC3C,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAA;AASrD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,GAAG;IACxF,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAA;IAClC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC/B,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IACvB,yCAAyC;IACzC,qBAAqB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC5C,CAAA;AACD,wBAAgB,UAAU,CAAC,EACzB,MAAuB,EACvB,SAAS,EACT,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAkB,EAClB,IAAe,EACf,qBAA6B,EAC7B,GAAG,WAAW,EACf,EAAE,eAAe,2CA0CjB"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/elements/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAA4B,KAAK,oBAAoB,EAAE,KAAK,iBAAiB,EAAe,MAAM,OAAO,CAAA;AAIhH,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC3C,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAA;AASrD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,GAAG;IACxF,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAA;IAClC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,oBAAoB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACzC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC/B,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IACvB,yCAAyC;IACzC,qBAAqB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC5C,CAAA;AACD,wBAAgB,UAAU,CAAC,EACzB,MAAuB,EACvB,oBAAoB,EACpB,UAAU,EACV,WAAW,EACX,SAAS,EACT,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAkB,EAClB,IAAe,EACf,qBAA6B,EAC7B,GAAG,WAAW,EACf,EAAE,eAAe,2CAqEjB"}

package/index.js

@@ -53519,7 +53519,7 @@ const ICON_SIZE_IN_PX = {
     [Size.NORMAL]: 20,
     [Size.SMALL]: 14
 };
-function IconButton({ accent = Accent.PRIMARY, className, color, Icon, iconSize, isCompact, onClick, size = Size.NORMAL, type = 'button', withUnpropagatedClick = false, ...nativeProps }) {
+function IconButton({ accent = Accent.PRIMARY, badgeBackgroundColor, badgeColor, badgeNumber, className, color, Icon, iconSize, isCompact, onClick, size = Size.NORMAL, type = 'button', withUnpropagatedClick = false, ...nativeProps }) {
     const handleClick = useCallback((event)=>{
         if (withUnpropagatedClick) {
             stopMouseEventPropagation(event);
@@ -53559,19 +53559,49 @@ function IconButton({ accent = Accent.PRIMARY, className, color, Icon, iconSize,
     ]);
     switch(accent){
         case Accent.SECONDARY:
-            return /*#__PURE__*/ jsx(SecondaryButton, {
-                as: StyledButton,
-                ...commonProps
+            return /*#__PURE__*/ jsxs(Wrapper$2, {
+                children: [
+                    !!badgeNumber && /*#__PURE__*/ jsx(BadgeNumber, {
+                        backgroundColor: badgeBackgroundColor,
+                        color: badgeColor,
+                        size: size,
+                        children: badgeNumber
+                    }),
+                    /*#__PURE__*/ jsx(SecondaryButton, {
+                        as: StyledButton,
+                        ...commonProps
+                    })
+                ]
             });
         case Accent.TERTIARY:
-            return /*#__PURE__*/ jsx(TertiaryButton, {
-                as: StyledButton,
-                ...commonProps
+            return /*#__PURE__*/ jsxs(Wrapper$2, {
+                children: [
+                    !!badgeNumber && /*#__PURE__*/ jsx(BadgeNumber, {
+                        backgroundColor: badgeBackgroundColor,
+                        color: badgeColor,
+                        size: size,
+                        children: badgeNumber
+                    }),
+                    /*#__PURE__*/ jsx(TertiaryButton, {
+                        as: StyledButton,
+                        ...commonProps
+                    })
+                ]
             });
         default:
-            return /*#__PURE__*/ jsx(PrimaryButton, {
-                as: StyledButton,
-                ...commonProps
+            return /*#__PURE__*/ jsxs(Wrapper$2, {
+                children: [
+                    !!badgeNumber && /*#__PURE__*/ jsx(BadgeNumber, {
+                        backgroundColor: badgeBackgroundColor,
+                        color: badgeColor,
+                        size: size,
+                        children: badgeNumber
+                    }),
+                    /*#__PURE__*/ jsx(PrimaryButton, {
+                        as: StyledButton,
+                        ...commonProps
+                    })
+                ]
             });
     }
 }
@@ -53580,6 +53610,30 @@ const PADDING$1 = {
     [Size.NORMAL]: '5px',
     [Size.SMALL]: '3px'
 };
+const Wrapper$2 = styled.div`
+  position: relative;
+`;
+const LEFT_MARGIN = {
+    [Size.LARGE]: 35,
+    [Size.NORMAL]: 25,
+    [Size.SMALL]: 15
+};
+const BadgeNumber = styled.div`
+  display: inline-block;
+  position: absolute;
+  height: 15px;
+  padding: 0 4px;
+  text-align: center;
+  border-radius: 10px;
+  top: -5px;
+  line-height: 14px;
+  left: ${(p)=>p.size ? LEFT_MARGIN[p.size] : 25}px;
+  background: ${(p)=>p.backgroundColor ? p.backgroundColor : p.theme.color.maximumRed};
+  color: ${(p)=>p.color ? p.color : p.theme.color.white};
+  font-size: 12px;
+  letter-spacing: 0px;
+  font-weight: 700;
+`;
 // We can't use $-prefixed props here for some reason (maybe because the `as` prop exclude them?).
 const StyledButton = styled.button`
   align-items: center;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mtes-mct/monitor-ui",
   "description": "Common React components, hooks, utilities and CSS stylesheets for MonitorFish, MonitorEnv and RapportNav.",
-  "version": "18.8.0",
+  "version": "18.9.0",
   "license": "AGPL-3.0",
   "type": "module",
   "engines": {