dhre-ui-kit 0.0.19 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "main": "src/index.ts",
   "files": [
     "src",

package/src/assets/images/bellSimple.svg

@@ -0,0 +1,3 @@
+<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.8046 25.375C18.8046 25.5553 18.733 25.7281 18.6056 25.8556C18.4781 25.9831 18.3052 26.0547 18.125 26.0547H10.875C10.6947 26.0547 10.5218 25.9831 10.3943 25.8556C10.2669 25.7281 10.1953 25.5553 10.1953 25.375C10.1953 25.1947 10.2669 25.0219 10.3943 24.8944C10.5218 24.7669 10.6947 24.6953 10.875 24.6953H18.125C18.3052 24.6953 18.4781 24.7669 18.6056 24.8944C18.733 25.0219 18.8046 25.1947 18.8046 25.375ZM24.9343 21.6367C24.7968 21.8787 24.5974 22.0798 24.3565 22.2191C24.1156 22.3585 23.8419 22.4312 23.5636 22.4297H5.43745C5.15868 22.4291 4.88499 22.355 4.64396 22.215C4.40293 22.0749 4.20307 21.8738 4.06454 21.6319C3.92601 21.3899 3.85369 21.1158 3.85487 20.837C3.85606 20.5583 3.9307 20.2847 4.07128 20.044C4.71132 18.9406 5.66402 15.8299 5.66402 11.7812C5.66402 9.43781 6.59494 7.19036 8.252 5.5333C9.90906 3.87624 12.1565 2.94531 14.5 2.94531C16.8434 2.94531 19.0908 3.87624 20.7479 5.5333C22.405 7.19036 23.3359 9.43781 23.3359 11.7812C23.3359 15.8288 24.2897 18.9406 24.9309 20.044C25.073 20.2852 25.1482 20.5599 25.1488 20.8399C25.1494 21.1198 25.0754 21.3949 24.9343 21.6367ZM23.755 20.7305C22.8975 19.2578 21.9765 15.8231 21.9765 11.7812C21.9765 9.79834 21.1888 7.89665 19.7867 6.49452C18.3846 5.09239 16.4829 4.30469 14.5 4.30469C12.517 4.30469 10.6154 5.09239 9.21323 6.49452C7.8111 7.89665 7.02339 9.79834 7.02339 11.7812C7.02339 15.8243 6.10128 19.2578 5.24374 20.7305C5.22386 20.7649 5.21339 20.804 5.21339 20.8438C5.21339 20.8835 5.22386 20.9226 5.24374 20.957C5.2624 20.9917 5.29022 21.0206 5.32418 21.0406C5.35814 21.0606 5.39693 21.0709 5.43632 21.0703H23.5625C23.6018 21.0709 23.6406 21.0606 23.6746 21.0406C23.7085 21.0206 23.7364 20.9917 23.755 20.957C23.7749 20.9226 23.7854 20.8835 23.7854 20.8438C23.7854 20.804 23.7749 20.7649 23.755 20.7305Z" fill="white"/>
+</svg>

package/src/assets/index.ts

@@ -7,6 +7,7 @@ import CaretLeft from './images/caretLeft.svg';
 import HeaderIcon from './images/dotsThreeVertical.svg';
 import CircleTick from './images/circleTick.svg';
 import ArrowLeft from './images/arrowLeft.svg';
+import BellSimple from './images/bellSimple.svg';
 
 export {
   CalenderDots,
@@ -18,4 +19,5 @@ export {
   HeaderIcon,
   CircleTick,
   ArrowLeft,
+  BellSimple,
 };

package/src/components/checkBox/CheckBox.styles.ts

@@ -26,7 +26,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     gap: horizontalScale(8),
-    marginTop: verticalScale(18),
   },
   labelStyle: {
     color: DHRE_COLORS_TEXT.DH_TEXTDARK,

package/src/components/dateRangePicker/DateRangePicker.styles.ts

@@ -4,7 +4,7 @@ import {verticalScale, moderateScale} from '../../utils/stylehelper';
 
 const styles = StyleSheet.create({
   applyButton: {
-    marginTop: verticalScale(40),
+    marginTop: verticalScale(24),
     height: verticalScale(48),
     alignItems: 'center',
     borderRadius: moderateScale(25),

package/src/components/notificationBandge/NotificationBandge.interface.tsx

@@ -0,0 +1,3 @@
+export interface NotificationBandgeProps {
+  notificationCount?: number;
+}

package/src/components/notificationBandge/NotificationBandge.styles.tsx

@@ -0,0 +1,26 @@
+import {StyleSheet} from 'react-native';
+import {FONT_STYLES} from '../../theme/fonts';
+
+const styles = StyleSheet.create({
+  iconContainer: {
+    position: 'relative',
+    alignItems: 'center',
+  },
+  badge: {
+    position: 'absolute',
+    top: -5,
+    right: -5,
+    minWidth: 20,
+    height: 20,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5524A',
+  },
+  badgeText: {
+    ...FONT_STYLES.L3_BOLD,
+    color: '#fff',
+  },
+});
+
+export default styles;

package/src/components/notificationBandge/NotificationBandge.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {View, Text} from 'react-native';
+import {BellSimple} from '../../assets';
+import styles from './NotificationBandge.styles';
+import {NotificationBandgeProps} from './NotificationBandge.interface';
+
+const NotificationBandge: React.FC<NotificationBandgeProps> = ({
+  notificationCount = 0,
+}) => {
+  if (notificationCount <= 0) {
+    return <BellSimple />;
+  }
+
+  return (
+    <View style={styles.iconContainer}>
+      <BellSimple />
+      <View style={styles.badge}>
+        <Text style={[styles.badgeText]}>
+          {notificationCount > 99 ? '99+' : notificationCount}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+export default NotificationBandge;

package/src/components/notificationBandge/index.tsx

@@ -0,0 +1 @@
+export {default} from './NotificationBandge';

package/src/index.ts

@@ -30,5 +30,6 @@ export {default as Topic} from './components/topic';
 export {default as ContactModel} from './components/ContactModel';
 export {default as DateRangePicker} from './components/dateRangePicker';
 export {default as OurOfficesButton} from './components/OutOfOffice';
+export {default as NotificationBandge} from './components/notificationBandge';
 
 export * from './utils/stylehelper';