dhre-ui-kit 0.0.11 → 0.0.13

package/package.json

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

package/src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {ThemeProvider} from './theme/ThemeContext';
-import {Badge} from './index';
+import {Badge, Line} from './index';
 import {ArrowLeft, CalenderDots} from './assets';
 import {View} from 'react-native';
 import CustomButton from './components/button/Button';
@@ -17,7 +17,7 @@ const App = () => {
           textStyle={{color: 'black'}}
           iconStyle={{}}
         />
-
+        <Line />
         <CustomButton
           title="Yes"
           onPress={() => console.log('Yes Button Pressed')}

package/src/components/customSearchBar/CustomSearchBar.tsx

@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import {TextInput, View} from 'react-native';
+import {Pressable, TextInput, View} from 'react-native';
 import {CrossIcon, SearchIcon} from '../../assets';
 import {moderateScale, verticalScale} from '../../utils/stylehelper';
 import {CustomSearchBarProps} from './CustomSearchBar.interface';
@@ -42,12 +42,15 @@ const CustomSearchBar = ({
           handleOnChangeText?.(val);
         }}
       />
-      {value &&
-        React.cloneElement(<CrossIcon onPress={() => setValue('')} />, {
-          width: moderateScale(24),
-          height: moderateScale(24),
-          style: styles.crossIconStyle,
-        })}
+      {value && (
+        <Pressable onPress={() => setValue('')}>
+          {React.cloneElement(<CrossIcon />, {
+            width: moderateScale(24),
+            height: moderateScale(24),
+            style: styles.crossIconStyle,
+          })}
+        </Pressable>
+      )}
     </View>
   );
 };

package/src/components/horizontalLine/Line.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {View, StyleSheet, ViewStyle} from 'react-native';
+import {useTheme} from '../../theme/ThemeContext';
+
+const HorizontalLine = ({style}: {style?: ViewStyle}) => {
+  const {theme} = useTheme();
+  return (
+    <View
+      style={[
+        styles.line,
+        {backgroundColor: theme['SURFACE_SECONDARY']},
+        style,
+      ]}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  line: {
+    height: 1,
+    width: '100%',
+  },
+});
+
+export default HorizontalLine;

package/src/components/horizontalLine/index.ts

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

package/src/components/topic/Topic.tsx

@@ -0,0 +1,84 @@
+import React, {ReactElement} from 'react';
+import {TouchableOpacity, View, StyleSheet, ViewStyle} from 'react-native';
+import {SvgProps} from 'react-native-svg';
+import {useTheme} from '../../theme/ThemeContext';
+import CustomText from '../customText';
+
+interface OurOfficesButtonProps {
+  rightIcon?: ReactElement<SvgProps>;
+  onPress: () => void;
+  title: string;
+  subTitle?: string;
+  containterStyle?: ViewStyle;
+}
+const Topic = ({
+  rightIcon,
+  onPress,
+  title,
+  subTitle,
+  containterStyle,
+}: OurOfficesButtonProps) => {
+  const {theme} = useTheme();
+  return (
+    <TouchableOpacity
+      style={[
+        styles.button,
+        {backgroundColor: theme['SURFACE_SECONDARY']},
+        containterStyle,
+      ]}
+      onPress={onPress}>
+      {rightIcon && (
+        <View style={styles.rightIconContainer}>
+          {React.cloneElement(rightIcon)}
+        </View>
+      )}
+      <View style={styles.textContainer}>
+        {subTitle && (
+          <CustomText
+            text={subTitle}
+            variant="L3_REGULAR"
+            textColor="CONTENT_PRIMARY"
+          />
+        )}
+        <CustomText
+          text={title}
+          variant="L1_REGULAR"
+          textColor="CONTENT_PRIMARY"
+        />
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 75,
+    width: 158,
+    borderRadius: 10,
+    marginLeft: 12,
+    marginVertical: 14,
+  },
+  iconContainer: {
+    marginHorizontal: 16,
+  },
+  textContainer: {
+    flex: 1,
+    position: 'absolute',
+    padding: 10,
+    bottom: 0,
+    marginHorizontal: 8,
+    marginTop: 20,
+  },
+  titleText: {
+    marginBottom: 4,
+  },
+  rightIconContainer: {
+    position: 'absolute',
+    right: 10,
+    top: 10,
+  },
+});
+
+export default Topic;

package/src/components/topic/index.ts

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

package/src/index.ts

@@ -25,4 +25,7 @@ export {default as SwipableList} from './components/swipableList';
 export {default as CustomTypography} from './components/customTypography';
 export {default as CustomIcon} from './components/customIcon';
 export {default as CustomLoader} from './components/customLoader';
+export {default as Line} from './components/horizontalLine';
+export {default as Topic} from './components/topic';
+
 export * from './utils/stylehelper';

package/src/theme/colors.ts

@@ -153,7 +153,7 @@ export const DHRE_DEFAULT = {
   DH_LINE_GREY_600: '#B4B2B2',
   DH_LINE_GREY_700: '#959494',
   DH_LINE_GREY_800: '#727171',
-  DH_LINE_GREY_900: '#4D4C4C',
+  DH_NETURAL_GRAY_800: '#373737',
   DH_BLUE: '#007AFF',
 
   DH_BG_GREY_0: '#F5F7FF',