@mtes-mct/monitor-ui 10.3.0 → 10.4.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [10.3.1](https://github.com/MTES-MCT/monitor-ui/compare/v10.3.0...v10.3.1) (2023-10-10)
+
+
+### Bug Fixes
+
+* **theme:** update goldenPoppy25 ([bb4901f](https://github.com/MTES-MCT/monitor-ui/commit/bb4901ff2a4e19919975540c4be3f2f662969fe8))
+
+## [10.3.0](https://github.com/MTES-MCT/monitor-ui/compare/v10.2.1...v10.3.0) (2023-10-05)
+
+
+### Features
+
+* **theme:** add goldenPoppy25 ([ecc4220](https://github.com/MTES-MCT/monitor-ui/commit/ecc4220a383ddb9fd33372a7df16c625ae04f88e))
+
 ## [10.2.1](https://github.com/MTES-MCT/monitor-ui/compare/v10.2.0...v10.2.1) (2023-10-03)
 
 

package/index.js

@@ -81,6 +81,13 @@ var Accent;
     Accent["SECONDARY"] = "SECONDARY";
     Accent["TERTIARY"] = "TERTIARY";
 })(Accent || (Accent = {}));
+var Level;
+(function (Level) {
+    Level["ERROR"] = "ERROR";
+    Level["INFO"] = "INFO";
+    Level["SUCCESS"] = "SUCCESS";
+    Level["WARNING"] = "WARNING";
+})(Level || (Level = {}));
 var CoordinatesFormat;
 (function (CoordinatesFormat) {
     CoordinatesFormat["DECIMAL_DEGREES"] = "DD";
@@ -260,7 +267,7 @@ const THEME = {
         // Notification Colors
         mediumSeaGreen: '#29B361',
         goldenPoppy: '#FAC11A',
-        goldenPoppy25: '#FAC11A',
+        goldenPoppy25: '#FAC11A40',
         /** CONTEXTUAL COLORS */
         // Mission status
         yellowGreen: '#8CC800',
@@ -2294,9 +2301,9 @@ function stopMouseEventPropagation(event) {
 
 function RawDialog({ children, className, isAbsolute = false, ...nativeProps }) {
     const controlledClassName = classnames('Component-Dialog', className);
-    return (jsxs(Box$h, { "$isAbsolute": isAbsolute, className: controlledClassName, onClick: stopMouseEventPropagation, ...nativeProps, children: [jsx(Overlay, { "$isAbsolute": isAbsolute }), jsx(Window, { "$isAbsolute": isAbsolute, children: children })] }));
+    return (jsxs(Box$i, { "$isAbsolute": isAbsolute, className: controlledClassName, onClick: stopMouseEventPropagation, ...nativeProps, children: [jsx(Overlay, { "$isAbsolute": isAbsolute }), jsx(Window, { "$isAbsolute": isAbsolute, children: children })] }));
 }
-const Box$h = styled.div `
+const Box$i = styled.div `
   position: ${p => (p.$isAbsolute ? 'absolute' : 'fixed')};
   top: 0;
   bottom: 0;
@@ -34439,12 +34446,12 @@ function SingleTag({ accent = Accent.PRIMARY, children, className, onDelete, ...
     }, [onDelete]);
     switch (accent) {
         case Accent.SECONDARY:
-            return (jsxs(Box$g, { className: controlledClassName, ...nativeProps, children: [jsx(SecondaryText, { children: children }), jsx(SecondaryIconButton, { accent: Accent.TERTIARY, Icon: Close, iconSize: 10, onClick: handleDelete })] }));
+            return (jsxs(Box$h, { className: controlledClassName, ...nativeProps, children: [jsx(SecondaryText, { children: children }), jsx(SecondaryIconButton, { accent: Accent.TERTIARY, Icon: Close, iconSize: 10, onClick: handleDelete })] }));
         default:
-            return (jsxs(Box$g, { className: controlledClassName, ...nativeProps, children: [jsx(PrimaryText, { children: children }), jsx(PrimaryIconButton, { accent: Accent.TERTIARY, Icon: Close, iconSize: 10, onClick: handleDelete })] }));
+            return (jsxs(Box$h, { className: controlledClassName, ...nativeProps, children: [jsx(PrimaryText, { children: children }), jsx(PrimaryIconButton, { accent: Accent.TERTIARY, Icon: Close, iconSize: 10, onClick: handleDelete })] }));
     }
 }
-const Box$g = styled.div `
+const Box$h = styled.div `
   align-items: center;
   display: inline-flex;
   max-width: 100%;
@@ -34558,6 +34565,47 @@ const MapMenuDialog = {
     VisibilityButton
 };
 
+const ExclamationPoint = styled.span `
+  background: ${p => p.backgroundColor || p.theme.color.goldenPoppy};
+  border-radius: 15px;
+  color: ${p => p.color || p.theme.color.white};
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 11px !important;
+  height: 20px;
+  padding: 3.25px 4px 5px 8.25px;
+  width: 20px;
+  box-sizing: border-box;
+
+  ::after {
+    content: '! ';
+  }
+`;
+
+function Message({ children, level = Level.WARNING, ...nativeProps }) {
+    switch (level) {
+        case Level.WARNING:
+            return (jsxs(Box$g, { backgroundColor: THEME.color.goldenPoppy25, color: THEME.color.slateGray, ...nativeProps, children: [jsx(StyledExclamationPoint, { backgroundColor: THEME.color.goldenPoppy, color: THEME.color.white }), jsx(Text, { children: children })] }));
+        default:
+            return (jsxs(Box$g, { backgroundColor: THEME.color.goldenPoppy25, color: THEME.color.slateGray, ...nativeProps, children: [jsx(StyledExclamationPoint, { backgroundColor: THEME.color.goldenPoppy, color: THEME.color.white }), jsx(Text, { children: children })] }));
+    }
+}
+const Text = styled.div `
+  margin-left: 8px;
+`;
+const Box$g = styled.span `
+  background: ${p => p.backgroundColor || p.theme.color.goldenPoppy25};
+  color: ${p => p.color || p.theme.color.slateGray};
+  padding: 8px 16px 16px 8px;
+  display: flex;
+  border-radius: 2px;
+  font-size: 13px;
+`;
+const StyledExclamationPoint = styled(ExclamationPoint) `
+  flex-shrink: 0;
+`;
+
 const Field$2 = styled.div.attrs(props => ({
     className: classnames('Element-Field', props.className)
 })) `
@@ -70954,5 +71002,5 @@ function undefine(value) {
     return value;
 }
 
-export { Accent, Button$1 as Button, Checkbox, CoordinatesFormat, CoordinatesInput, CustomSearch, DataTable, DatePicker, DateRangePicker, Dialog, Dropdown, Field$2 as Field, FieldError, Fieldset, FormikCheckbox, FormikCoordinatesInput, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSearch, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MapMenuDialog, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NewWindow, NewWindowContext, NotificationEvent, Notifier, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Search, Select, SideMenu, SimpleTable, SingleTag, Size, THEME, TableWithSelectableRows, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, cleanString, coordinatesAreDistinct, customDayjs, getCoordinates, getLocalizedDayjs, getOptionsFromIdAndName, getOptionsFromLabelledEnum, getPseudoRandomString, getUtcizedDayjs, isArray, isDefined, isNumeric, isObject, logSoftError, normalizeString, nullify, pluralize, stopMouseEventPropagation, undefine, useClickOutsideEffect, useFieldControl, useForceUpdate, useKey, useNewWindow, usePrevious };
+export { Accent, Button$1 as Button, Checkbox, CoordinatesFormat, CoordinatesInput, CustomSearch, DataTable, DatePicker, DateRangePicker, Dialog, Dropdown, ExclamationPoint, Field$2 as Field, FieldError, Fieldset, FormikCheckbox, FormikCoordinatesInput, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSearch, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, Level, MapMenuDialog, Message, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NewWindow, NewWindowContext, NotificationEvent, Notifier, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Search, Select, SideMenu, SimpleTable, SingleTag, Size, THEME, TableWithSelectableRows, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, cleanString, coordinatesAreDistinct, customDayjs, getCoordinates, getLocalizedDayjs, getOptionsFromIdAndName, getOptionsFromLabelledEnum, getPseudoRandomString, getUtcizedDayjs, isArray, isDefined, isNumeric, isObject, logSoftError, normalizeString, nullify, pluralize, stopMouseEventPropagation, undefine, useClickOutsideEffect, useFieldControl, useForceUpdate, useKey, useNewWindow, usePrevious };
 //# sourceMappingURL=index.js.map