@mtes-mct/monitor-ui 14.3.1 → 15.0.1

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## [15.0.0](https://github.com/MTES-MCT/monitor-ui/compare/v14.3.1...v15.0.0) (2024-04-28)
+
+
+### ⚠ BREAKING CHANGES
+
+* **components:** The default `Message.level` is now "INFO" instead of "WARNING".
+
+### Features
+
+* **components:** add Icon & iconColor props to Message ([e8d1520](https://github.com/MTES-MCT/monitor-ui/commit/e8d1520db170594c767300a28fe355b3d2002483))
+
+
+### Bug Fixes
+
+* **fields:** prevent textarea from being horizontally reduced ([76d3057](https://github.com/MTES-MCT/monitor-ui/commit/76d305748fa6afc09254efe3e77b66af4dd9ddbe))
+
+
+### Code Refactoring
+
+* **elements:** start cleaning & simplifying IconButton logic ([afffc00](https://github.com/MTES-MCT/monitor-ui/commit/afffc00a65218f9f8645de252ab476764baf0881))
+
+
+### Buid System & Dependencies
+
+* **dev-deps:** bunp storybook from 8.0.0-beta.4 to 8.0.9 ([b1b9aa1](https://github.com/MTES-MCT/monitor-ui/commit/b1b9aa113e4497c11ccdad057573747333d2632c))
+
+## [14.3.1](https://github.com/MTES-MCT/monitor-ui/compare/v14.3.0...v14.3.1) (2024-04-22)
+
+
+### Bug Fixes
+
+* **component:** display hide text in red when level isError in banner component ([1e10ef2](https://github.com/MTES-MCT/monitor-ui/commit/1e10ef2ea7fd0b1e7d07ef616980306aee416099))
+
 ## [14.3.0](https://github.com/MTES-MCT/monitor-ui/compare/v14.2.0...v14.3.0) (2024-04-19)
 
 

package/components/Message/constants.d.ts

@@ -0,0 +1,6 @@
+import { Level } from '../../constants';
+import type { IconProps } from '@types_/definitions';
+import type { FunctionComponent } from 'react';
+export declare const DEFAULT_ICON_COLOR: Record<Level, string>;
+export declare const DEFAUT_ICON: Record<Level, FunctionComponent<IconProps>>;
+//# sourceMappingURL=constants.d.ts.map

package/components/Message/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Message/constants.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAGvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAG9C,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAKpD,CAAA;AAGD,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAKnE,CAAA"}

package/components/Message/index.d.ts

@@ -0,0 +1,11 @@
+import { type FunctionComponent, type HTMLAttributes, type ReactNode } from 'react';
+import { Level } from '../../constants';
+import type { IconProps } from '@types_/definitions';
+export type MessageProps = HTMLAttributes<HTMLDivElement> & {
+    Icon?: FunctionComponent<IconProps> | undefined;
+    children: ReactNode | string;
+    iconColor?: Level | undefined;
+    level?: Level | undefined;
+};
+export declare function Message({ children, className, Icon, iconColor, level, ...nativeProps }: MessageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/components/Message/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Message/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAKnF,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAEpD,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC1D,IAAI,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,GAAG,SAAS,CAAA;IAC/C,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;IAC7B,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;CAC1B,CAAA;AACD,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,KAAkB,EAAE,GAAG,WAAW,EAAE,EAAE,YAAY,2CAWjH"}

package/components/Message/utils.d.ts

@@ -0,0 +1,7 @@
+import { Level } from '../../constants';
+import { THEME } from '../../theme';
+export declare function getStyledCssFromLevel(): (props: {
+    $level: Level;
+    theme: typeof THEME;
+}) => string;
+//# sourceMappingURL=utils.d.ts.map

package/components/Message/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Message/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAGnC,wBAAgB,qBAAqB,YACpB;IAAE,MAAM,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,YAAY,CAAA;CAAE,YAmCtD"}

package/elements/IconButton.d.ts

@@ -4,6 +4,7 @@ import { type IconProps } from '../types/definitions';
 export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
     Icon: FunctionComponent<IconProps>;
     accent?: Accent | undefined;
+    badge?: string | undefined;
     color?: string | undefined;
     /** In pixels, override `size` prop default values. */
     iconSize?: number | undefined;

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,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,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"}

package/index.js

@@ -53338,54 +53338,34 @@ const PADDING$1 = {
 // We can't use $-prefixed props here for some reason (maybe because the `as` prop exclude them?).
 const StyledButton = styled.button`
   align-items: center;
+  border-width: ${(p)=>p.isCompact ? 0 : 1}px !important;
   display: flex;
   justify-content: center;
   padding: ${(p)=>p.isCompact ? 0 : PADDING$1[p.size]};
-
-  ${(p)=>p.isCompact && css`
-      border: 0;
-
-      :hover,
-      &._hover {
-        border: 0;
-      }
-      border: 0;
-
-      :active,
-      &._active {
-        border: 0;
-      }
-      border: 0;
-
-      :disabled,
-      &._disabled {
-        border: 0;
-      }
-    `}
 `;
 const TertiaryButton = styled.button`
   background-color: transparent;
-  border: ${(p)=>p.isCompact ? 0 : '1px solid transparent'};
+  border-color: transparent;
   color: ${(p)=>p.theme.color.charcoal};
 
-  :hover,
+  &:hover,
   &._hover {
     background-color: transparent;
-    border: ${(p)=>p.isCompact ? 0 : '1px solid transparent'};
+    border-color: transparent;
     color: ${(p)=>p.theme.color.blueYonder};
   }
 
-  :active,
+  &:active,
   &._active {
     background-color: transparent;
-    border: ${(p)=>p.isCompact ? 0 : '1px solid transparent'};
+    border-color: transparent;
     color: ${(p)=>p.theme.color.blueGray};
   }
 
-  :disabled,
+  &:disabled,
   &._disabled {
     background-color: transparent;
-    border: ${(p)=>p.isCompact ? 0 : '1px solid transparent'};
+    border-color: transparent;
     color: ${(p)=>p.theme.color.lightGray};
   }
 `;
@@ -53614,37 +53594,73 @@ const MapMenuDialog = {
     VisibilityButton
 };
 
-function Message({ children, level = Level.WARNING, ...nativeProps }) {
-    switch(level){
-        case Level.WARNING:
-            return /*#__PURE__*/ jsxs(Box$c, {
-                backgroundColor: THEME.color.goldenPoppy25,
-                color: THEME.color.slateGray,
-                ...nativeProps,
-                children: [
-                    /*#__PURE__*/ jsx(AttentionFilled, {
-                        color: THEME.color.goldenPoppy
-                    }),
-                    /*#__PURE__*/ jsx(ChildrenContainer, {
-                        children: children
-                    })
-                ]
-            });
-        default:
-            return /*#__PURE__*/ jsxs(Box$c, {
-                backgroundColor: THEME.color.goldenPoppy25,
-                color: THEME.color.slateGray,
-                ...nativeProps,
-                children: [
-                    /*#__PURE__*/ jsx(AttentionFilled, {
-                        color: THEME.color.goldenPoppy
-                    }),
-                    /*#__PURE__*/ jsx(ChildrenContainer, {
-                        children: children
-                    })
-                ]
-            });
-    }
+// TODO Check default icon color with Adeline.
+const DEFAULT_ICON_COLOR = {
+    [Level.ERROR]: THEME.color.maximumRed,
+    [Level.INFO]: THEME.color.blueGray,
+    [Level.SUCCESS]: THEME.color.mediumSeaGreen,
+    [Level.WARNING]: THEME.color.goldenPoppy
+};
+// TODO Check default icons with Adeline.
+const DEFAUT_ICON = {
+    [Level.ERROR]: AttentionFilled,
+    [Level.INFO]: Info,
+    [Level.SUCCESS]: Check,
+    [Level.WARNING]: AttentionFilled
+};
+
+/* istanbul ignore next */ function getStyledCssFromLevel() {
+    return (props)=>{
+        switch(true){
+            // TODO Check with Adeline.
+            case props.$level === Level.ERROR:
+                return `
+          background-color: ${props.theme.color.maximumRed15};
+          border-color: ${props.theme.color.maximumRed};
+          color: ${props.theme.color.gunMetal};
+        `;
+            // TODO Check with Adeline.
+            case props.$level === Level.SUCCESS:
+                return `
+            background-color: ${props.theme.color.mediumSeaGreen25};
+            border-color: ${props.theme.color.mediumSeaGreen};
+            color: ${props.theme.color.gunMetal};
+          `;
+            case props.$level === Level.WARNING:
+                return `
+          background-color: ${props.theme.color.goldenPoppy25};
+          border-color: ${props.theme.color.goldenPoppy};
+          color: ${props.theme.color.slateGray};
+        `;
+            // TODO Check `border-color` with Adeline.
+            case props.$level === Level.INFO:
+            default:
+                return `
+            background-color: ${props.theme.color.blueGray25};
+            border-color: #BCD9F2;
+            color: ${props.theme.color.gunMetal};
+          `;
+        }
+    };
+}
+
+function Message({ children, className, Icon, iconColor, level = Level.INFO, ...nativeProps }) {
+    const controlledClassName = classnames('Component-Message>', className);
+    const ControlledIcon = Icon ?? DEFAUT_ICON[level];
+    const controlledIconColor = iconColor ?? DEFAULT_ICON_COLOR[level];
+    return /*#__PURE__*/ jsxs(Box$c, {
+        $level: level,
+        className: controlledClassName,
+        ...nativeProps,
+        children: [
+            /*#__PURE__*/ jsx(ControlledIcon, {
+                color: controlledIconColor
+            }),
+            /*#__PURE__*/ jsx(ChildrenContainer, {
+                children: children
+            })
+        ]
+    });
 }
 const ChildrenContainer = styled.div`
   margin-left: 8px;
@@ -53652,13 +53668,14 @@ const ChildrenContainer = styled.div`
   flex-direction: column;
   flex: 1;
 `;
-const Box$c = styled.span`
-  background: ${(p)=>p.backgroundColor ?? p.theme.color.goldenPoppy25};
-  color: ${(p)=>p.color ?? p.theme.color.slateGray};
-  padding: 16px;
-  display: flex;
+const Box$c = styled.div`
+  ${getStyledCssFromLevel()}
+
+  border-width: 1px;
   border-radius: 2px;
+  display: flex;
   font-size: 13px;
+  padding: 16px;
 `;
 
 const FONT_SIZE = {
@@ -68598,6 +68615,7 @@ const StyledRsuiteInput = styled(Input)`
   font-weight: 500;
   padding: 7px 8px;
   width: 100%;
+  min-width: 100%;
   max-width: 100%;
 
   &::placeholder {

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": "14.3.1",
+  "version": "15.0.1",
   "license": "AGPL-3.0",
   "type": "module",
   "engines": {

package/components/Message.d.ts

@@ -1,8 +0,0 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
-import { Level } from '../constants';
-export type MessageProps = HTMLAttributes<HTMLDivElement> & {
-    children: ReactNode | string;
-    level?: Level | undefined;
-};
-export declare function Message({ children, level, ...nativeProps }: MessageProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Message.d.ts.map

package/components/Message.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../src/components/Message.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAG3D,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAGpC,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC1D,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAA;IAC5B,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;CAC1B,CAAA;AACD,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAqB,EAAE,GAAG,WAAW,EAAE,EAAE,YAAY,2CAkBxF"}