dhre-ui-kit 0.0.5 → 0.0.7

package/package.json

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

package/src/assets/images/caretDown.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.25 8L10 14.25L3.75 8" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="28" height="20" viewBox="0 0 28 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.25 7.5L10 13.75L3.75 7.5" stroke="#A7A7A7" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/assets/images/caretUp.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.75 13L10 6.75L16.25 13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="28" height="20" viewBox="0 0 28 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.75 12.5L10 6.25L16.25 12.5" stroke="#A7A7A7" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/components/accordion/Accordion.interface.ts

@@ -1,7 +1,10 @@
 import React from 'react';
+import {TextStyle, ViewStyle} from 'react-native';
 
 export interface AccordionProps {
   title: string;
-  children: React.ReactNode;
   testId?: string;
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  children: React.ReactNode;
 }

package/src/components/accordion/Accordion.styles.ts

@@ -21,7 +21,6 @@ const styles = StyleSheet.create({
   content: {
     overflow: 'scroll',
     marginTop: verticalScale(16),
-    marginHorizontal: horizontalScale(16),
   },
 });
 

package/src/components/accordion/Accordion.tsx

@@ -6,7 +6,13 @@ import {moderateScale} from '../../utils/stylehelper';
 import {AccordionProps} from './Accordion.interface';
 import styles from './Accordion.styles';
 
-const Accordion = ({title, testId = 'ACCORDION', children}: AccordionProps) => {
+const Accordion = ({
+  title,
+  testId = 'ACCORDION',
+  containerStyle,
+  titleStyle,
+  children,
+}: AccordionProps) => {
   const contentRef = useRef<View>(null);
   const [animation] = useState(new Animated.Value(0));
   const [contentHeight, setContentHeight] = useState(0);
@@ -35,12 +41,12 @@ const Accordion = ({title, testId = 'ACCORDION', children}: AccordionProps) => {
   });
 
   return (
-    <View style={styles.container} testID={testId}>
+    <View style={[styles.container, containerStyle]} testID={testId}>
       <Pressable style={styles.header} onPress={toggleAccordion}>
         <CustomTypography
           variant={'B4_REGULAR'}
           text={title}
-          style={styles.title}
+          style={[styles.title, titleStyle]}
         />
         {React.cloneElement(expanded ? <CaretUp /> : <CaretDown />, {
           width: moderateScale(20),

package/src/components/customHeader/CustomHeader.styles.ts

@@ -8,7 +8,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: horizontalScale(16),
     paddingTop: verticalScale(74),
     paddingBottom: verticalScale(16),
-    backgroundColor: '#000',
+    backgroundColor: '#212121',
+    borderBottomWidth: 1,
+    borderBottomColor: '#282828',
   },
   headderContainer: {
     flexDirection: 'row',

package/src/components/customIcon/CustomIcon.interface.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import {TextStyle, ViewStyle} from 'react-native';
+
+export interface CustomIconProps {
+  icon: React.ReactElement;
+  title?: string;
+  testId?: string;
+  onPress?: () => void;
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+}

package/src/components/customIcon/CustomIcon.styles.ts

@@ -0,0 +1,14 @@
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+  },
+  title: {
+    color: '#000',
+  },
+});
+
+export default styles;

package/src/components/customIcon/CustomIcon.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {render, fireEvent} from '@testing-library/react-native';
+import {CalenderDots} from '../../assets';
+import CustomIcon from './CustomIcon';
+
+describe('Custom Icon Component', () => {
+  it('Component renders correctly', () => {
+    const {getByTestId} = render(
+      <CustomIcon icon={<CalenderDots />} title="Test Title" />,
+    );
+    expect(getByTestId('CUSTOM-ICON')).toBeTruthy();
+    fireEvent.press(getByTestId('CUSTOM-ICON'));
+  });
+});

package/src/components/customIcon/CustomIcon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import {Pressable} from 'react-native';
+import CustomTypography from '../customTypography';
+import {CustomIconProps} from './CustomIcon.interface';
+import styles from './CustomIcon.styles';
+
+const CustomIcon = ({
+  icon,
+  title,
+  testId = 'CUSTOM-ICON',
+  onPress,
+  containerStyle,
+  titleStyle,
+}: CustomIconProps) => {
+  return (
+    <Pressable
+      style={[styles.container, containerStyle]}
+      onPress={onPress}
+      testID={testId}>
+      {icon}
+      {title && (
+        <CustomTypography
+          variant="L1_REGULAR"
+          text={title}
+          style={[styles.title, titleStyle]}
+        />
+      )}
+    </Pressable>
+  );
+};
+
+export default CustomIcon;

package/src/components/customIcon/index.ts

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

package/src/components/customTypography/index.ts

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

package/src/index.ts

@@ -12,13 +12,15 @@ export {default as FileUpload} from './components/fileUpload';
 export {default as PdfView} from './components/pdfView';
 export {default as PopUp} from './components/popup';
 export {default as CustomProgressBar} from './components/progressBar';
-export {default as Property360View} from './components/property360View';
+// export {default as Property360View} from './components/property360View';
 export {default as StarRating} from './components/rating';
 export {default as Tabs} from './components/tabs';
 export {default as Tags} from './components/tags';
 export {default as ToggleButton} from './components/toggleButton';
-// export {default as Accordion} from './components/accordion';
-// export {default as Toast} from './components/toast';
-// export {default as CustomSearchBar} from './components/customSearchBar';
-// export {default as CustomHeader} from './components/customHeader';
-// export {default as SwipableList} from './components/swipableList';
+export {default as Accordion} from './components/accordion';
+export {default as Toast} from './components/toast';
+export {default as CustomSearchBar} from './components/customSearchBar';
+export {default as CustomHeader} from './components/customHeader';
+export {default as SwipableList} from './components/swipableList';
+export {default as CustomTypography} from './components/customTypography';
+export {default as CustomIcon} from './components/customIcon';