dhre-ui-kit 0.0.14 → 0.0.16

package/package.json

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

package/src/components/OutOfOffice/OurOffices.tsx

@@ -0,0 +1,91 @@
+import React, {ReactElement} from 'react';
+import {TouchableOpacity, View, StyleSheet, ViewStyle} from 'react-native';
+import {SvgProps} from 'react-native-svg';
+import CustomText from '../customText';
+import {withThemeProvider} from '../../theme/withThemeProvider';
+import {useTheme} from '../../theme/ThemeContext';
+
+interface OurOfficesButtonProps {
+  leftIcon?: ReactElement<SvgProps>;
+  rightIcon?: ReactElement<SvgProps>;
+  onPress: () => void;
+  title: string;
+  description: string;
+  containerStyle?: ViewStyle;
+  titleVariant?: string;
+  descriptionVariant?: string;
+  titleColor?: string;
+  descriptionColor?: string;
+}
+
+const OurOfficesButton = ({
+  leftIcon,
+  rightIcon,
+  onPress,
+  title,
+  description,
+  containerStyle,
+  titleVariant = 'L1_REGULAR',
+  descriptionVariant = 'L1_REGULAR',
+  titleColor = 'CONTENT_PRIMARY',
+  descriptionColor = 'CONTENT_SECONDARY',
+}: OurOfficesButtonProps) => {
+  const {theme} = useTheme();
+  return (
+    <TouchableOpacity
+      style={[
+        styles.button,
+        {backgroundColor: theme['SURFACE_SECONDARY']},
+        containerStyle,
+      ]}
+      onPress={onPress}>
+      {leftIcon && (
+        <View style={styles.iconContainer}>{React.cloneElement(leftIcon)}</View>
+      )}
+      <View style={styles.textContainer}>
+        <CustomText
+          text={title}
+          variant={titleVariant}
+          textColor={titleColor}
+          style={styles.textView}
+        />
+        <CustomText
+          text={description}
+          variant={descriptionVariant}
+          textColor={descriptionColor}
+          style={styles.flexWrap}
+        />
+      </View>
+      {rightIcon && (
+        <View style={styles.rightIconContainer}>
+          {React.cloneElement(rightIcon)}
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 10,
+  },
+  iconContainer: {
+    marginHorizontal: 16,
+  },
+  textContainer: {
+    flex: 1,
+    padding: 10,
+    borderRadius: 4,
+  },
+  rightIconContainer: {
+    marginLeft: 10,
+    position: 'absolute',
+    right: 10,
+  },
+  textView: {marginBottom: 4},
+  flexWrap: {flexWrap: 'wrap'},
+});
+
+export default withThemeProvider(OurOfficesButton);

package/src/components/OutOfOffice/index.ts

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

package/src/components/button/Button.tsx

@@ -49,7 +49,7 @@ const CustomButton = ({
       <CustomText
         text={title}
         variant={titleVariant}
-        style={[textStyle, {color: '#A7A7A7'}]}
+        style={[{color: '#A7A7A7'}, textStyle]}
         textColor={titleColor}
       />
 

package/src/index.ts

@@ -28,5 +28,6 @@ export {default as CustomLoader} from './components/customLoader';
 export {default as Line} from './components/horizontalLine';
 export {default as Topic} from './components/topic';
 export {default as ContactModel} from './components/ContactModel';
+export {default as OurOfficesButton} from './components/OutOfOffice';
 
 export * from './utils/stylehelper';