Feature: color props added to RowCard component.

src/components/rowCard/index.tsx

@@ -18,17 +18,22 @@ const RowCard: FC<IRowCardProps> = ({
     rightContentContainerStyle,
     rightIcon: CustomRightIcon,
     leftContentContainerStyle,
+    isTransparentBackground,
     type = "first-based",
     rightContainerStyle,
     rightSubTitleStyle,
     leftContainerStyle,
+    rightSubTitleColor,
     leftSubTitleStyle,
     icon: CustomIcon,
+    rightTitleColor,
     rightTitleStyle,
     rightIconStyle,
     leftTitleStyle,
+    subTitleColor,
     rightSubTitle,
     customTheme,
+    titleColor,
     rightTitle,
     iconStyle,
     subTitle,
@@ -53,6 +58,7 @@ const RowCard: FC<IRowCardProps> = ({
         subTitle: subTitleDynamicStyle,
         title: titleDynamicStyle
     } = useStyles({
+        isTransparentBackground,
         radiuses,
         subTitle,
         spaces,
@@ -104,8 +110,8 @@ const RowCard: FC<IRowCardProps> = ({
         }
 
         return <Text
+            color={subTitleColor ? subTitleColor : "low"}
             variant="labelLargeSize"
-            color="low"
             style={[
                 leftSubTitleStyle,
                 stylesheet.subTitle,
@@ -124,6 +130,7 @@ const RowCard: FC<IRowCardProps> = ({
         >
             <Text
                 variant="labelLargeSize"
+                color={titleColor}
                 style={[
                     leftTitleStyle,
                     stylesheet.title,
@@ -154,8 +161,8 @@ const RowCard: FC<IRowCardProps> = ({
         }
 
         return <Text
+            color={rightSubTitleColor? rightSubTitleColor : "low"}
             variant="labelLargeSize"
-            color="low"
             style={[
                 rightSubTitleStyle,
                 stylesheet.rightSubTitle,
@@ -174,6 +181,7 @@ const RowCard: FC<IRowCardProps> = ({
         >
             <Text
                 variant="labelLargeSize"
+                color={rightTitleColor}
                 style={[
                     rightTitleStyle,
                     stylesheet.rightTitle,

src/components/rowCard/stylesheet.ts

@@ -47,13 +47,14 @@ const stylesheet = StyleSheet.create({
 });
 
 export const useStyles = ({
+    isTransparentBackground,
     spaces,
     colors,
     type
 }: RowCardDynamicStyleType) => {
     const styles = {
         container: {
-            backgroundColor: colors.content.container.mid,
+            backgroundColor: isTransparentBackground ? "transparent" : colors.content.container.mid,
             padding: spaces.spacingMd
         } as Mutable<ViewStyle>,
         title: {

src/components/rowCard/type.ts

@@ -10,6 +10,7 @@ export type RowCardDynamicStyleType = {
     radiuses: NCoreUIKit.ActivePalette["radiuses"];
     spaces: NCoreUIKit.ActivePalette["spaces"];
     colors: NCoreUIKit.ActivePalette["colors"];
+    isTransparentBackground?: boolean;
     subTitle?: string;
     type: RowCardType;
 };
@@ -27,7 +28,12 @@ type IRowCardProps = {
     leftTitleStyle?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
     rightIconStyle?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
     iconStyle?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    rightSubTitleColor?: keyof NCoreUIKit.TextContentColors;
     style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    rightTitleColor?: keyof NCoreUIKit.TextContentColors;
+    subTitleColor?: keyof NCoreUIKit.TextContentColors;
+    titleColor?: keyof NCoreUIKit.TextContentColors;
+    isTransparentBackground?: boolean;
     rightIcon?: NCoreUIKitIcon;
     rightSubTitle?: string;
     icon?: NCoreUIKitIcon;