@woosmap/ui 4.251.8 → 4.251.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "4.251.8",
+  "version": "4.251.9",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Woosmap/ui.git"

package/src/components/NotificationBadge/NotificationBadge.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function NotificationBadge({ count, max }) {
+    if (!count || count <= 0) return null;
+    const label = count > max ? `${max}+` : String(count);
+    return <span className="notification-badge">{label}</span>;
+}
+
+NotificationBadge.propTypes = {
+    count: PropTypes.number.isRequired,
+    max: PropTypes.number,
+};
+
+NotificationBadge.defaultProps = {
+    max: 99,
+};
+
+export default NotificationBadge;

package/src/index.js

@@ -24,6 +24,7 @@ export { default as UseCase } from './components/UseCase/UseCase';
 export { default as LocalitiesAutocomplete } from './components/Woosmap/LocalitiesAutocomplete';
 export { default as AddressAutocomplete } from './components/Woosmap/AddressAutocomplete';
 export { default as Modal } from './components/Modal/Modal';
+export { default as NotificationBadge } from './components/NotificationBadge/NotificationBadge';
 export { default as ConfirmationModal } from './components/Modal/ConfirmationModal';
 export { default as Panel } from './components/Panel/Panel';
 export { default as PasswordStrengthBar } from './components/PasswordStrengthBar/PasswordStrengthBar';

package/src/styles/console/badge.styl

@@ -1,3 +1,21 @@
+.notification-badge
+	position absolute
+	top -.5rem
+	right -.5rem
+	min-width 1.6rem
+	height 1.6rem
+	padding 0 .4rem
+	border-radius 1rem
+	background $error
+	color #fff
+	font-size 1rem
+	font-weight 700
+	line-height 1.6rem
+	text-align center
+	white-space nowrap
+	pointer-events none
+	z-index 1
+
 .badge
 	br(50)
 	sq(1.4)