@fattureincloud-mobile/fic-mobile-ds 1.0.0 → 1.2.0

package/src/components/buttons/FicButton/themes/dark.ts

@@ -0,0 +1,273 @@
+import { FlexAlignType } from 'react-native';
+import { Colors } from '../../../../styles/colors';
+import { BORDER_RADIUS } from '../../../../styles/space';
+import { FicButtonTheme, GenericViewStyle } from '../FicButton.types';
+import { FONT_SIZE } from '../constants';
+
+const defaultContainerProps: GenericViewStyle = {
+  flexDirection: 'row',
+  alignSelf: 'flex-start',
+  justifyContent: 'center',
+  alignContent: 'center',
+  alignItems: 'center',
+  borderRadius: BORDER_RADIUS.SM
+};
+
+const { alignContent, ...defaultIconContainerProps } = defaultContainerProps;
+
+const iconContainerProps = {
+  ...defaultIconContainerProps,
+  borderRadius: 1000,
+  alignSelf: 'center' as FlexAlignType
+};
+
+const ficButtonDarkTheme: FicButtonTheme = {
+  primary: {
+    default: {
+      container: {
+        ...defaultContainerProps,
+        backgroundColor: Colors.AZURE_K
+      },
+      text: {
+        color: Colors.ELEVATION_1
+      },
+      icon: {
+        color: Colors.ELEVATION_1
+      },
+      pressedStyle: {
+        container: {
+          ...defaultContainerProps,
+          backgroundColor: Colors.AZURE_K_D1
+        },
+        text: {
+          color: Colors.ELEVATION_1
+        },
+        icon: {
+          color: Colors.ELEVATION_1
+        }
+      }
+    },
+    disabled: {
+      container: {
+        ...defaultContainerProps,
+        backgroundColor: Colors.ELEVATION_4
+      },
+      text: {
+        color: Colors.ELEVATION_2
+      },
+      icon: {
+        color: Colors.ELEVATION_2
+      }
+    },
+    error: {
+      container: {
+        ...defaultContainerProps,
+        backgroundColor: Colors.RED
+      },
+      text: {
+        color: Colors.WHITE
+      },
+      icon: {
+        color: Colors.WHITE
+      },
+      pressedStyle: {
+        container: {
+          ...defaultContainerProps,
+          backgroundColor: Colors.RED_D1
+        },
+        text: {
+          color: Colors.WHITE
+        },
+        icon: {
+          color: Colors.WHITE
+        }
+      }
+    }
+  },
+  secondary: {
+    default: {
+      container: {
+        ...defaultContainerProps,
+        backgroundColor: Colors.ELEVATION_1,
+        borderWidth: 1,
+        borderColor: Colors.AZURE_K
+      },
+      text: {
+        color: Colors.AZURE_K
+      },
+      icon: {
+        color: Colors.AZURE_K
+      },
+      pressedStyle: {
+        container: {
+          ...defaultContainerProps,
+          backgroundColor: Colors.ELEVATION_2,
+          borderWidth: 1,
+          borderColor: Colors.AZURE_K
+        },
+        text: {
+          color: Colors.AZURE_K
+        },
+        icon: {
+          color: Colors.AZURE_K
+        }
+      }
+    },
+    disabled: {
+      container: {
+        ...defaultContainerProps,
+        backgroundColor: Colors.ELEVATION_1,
+        borderWidth: 1,
+        borderColor: Colors.ELEVATION_4
+      },
+      text: {
+        color: Colors.ELEVATION_4
+      },
+      icon: {
+        color: Colors.ELEVATION_4
+      }
+    },
+    error: {
+      container: {
+        ...defaultContainerProps,
+        backgroundColor: Colors.ELEVATION_1,
+        borderWidth: 1,
+        borderColor: Colors.RED_K_D1
+      },
+      text: {
+        color: Colors.RED_K_D1
+      },
+      icon: {
+        color: Colors.RED_K_D1
+      },
+      pressedStyle: {
+        container: {
+          ...defaultContainerProps,
+          backgroundColor: Colors.ELEVATION_2,
+          borderWidth: 1,
+          borderColor: Colors.RED_K_D1
+        },
+        text: {
+          color: Colors.RED_K_D1
+        },
+        icon: {
+          color: Colors.RED_K_D1
+        }
+      }
+    }
+  },
+  tertiary: {
+    default: {
+      container: { ...defaultContainerProps, alignSelf: 'center' },
+      text: {
+        textDecorationLine: 'underline',
+        fontSize: FONT_SIZE,
+        color: Colors.AZURE_K
+      },
+      icon: {
+        color: Colors.AZURE_K
+      },
+      pressedStyle: {
+        container: {
+          ...defaultContainerProps,
+          alignSelf: 'center',
+          backgroundColor: Colors.ELEVATION_4
+        },
+        text: {
+          textDecorationLine: 'underline',
+          fontSize: FONT_SIZE,
+          color: Colors.AZURE_K
+        },
+        icon: {
+          color: Colors.AZURE_K
+        }
+      }
+    },
+    disabled: {
+      container: { ...defaultContainerProps },
+      text: {
+        textDecorationLine: 'underline',
+        fontSize: FONT_SIZE,
+        color: Colors.ELEVATION_4
+      },
+      icon: {
+        color: Colors.ELEVATION_4
+      }
+    },
+    error: {
+      container: { ...defaultContainerProps, alignSelf: 'center' },
+      text: {
+        textDecorationLine: 'underline',
+        fontSize: FONT_SIZE,
+        color: Colors.RED_K_D1
+      },
+      icon: {
+        color: Colors.RED_K_D1
+      },
+      pressedStyle: {
+        container: {
+          ...defaultContainerProps,
+          alignSelf: 'center',
+          backgroundColor: Colors.ELEVATION_4
+        },
+        text: {
+          textDecorationLine: 'underline',
+          fontSize: FONT_SIZE,
+          color: Colors.RED_K_D1
+        },
+        icon: {
+          color: Colors.RED_K_D1
+        }
+      }
+    }
+  },
+  icon: {
+    default: {
+      container: { ...iconContainerProps, alignSelf: 'flex-start' },
+      text: {},
+      icon: {
+        color: Colors.WHITE_80
+      },
+      pressedStyle: {
+        container: {
+          backgroundColor: Colors.ELEVATION_4,
+          justifyContent: 'center',
+          alignItems: 'center'
+        },
+        text: {},
+        icon: {
+          color: Colors.WHITE_80
+        }
+      }
+    },
+    disabled: {
+      container: { ...iconContainerProps },
+      text: {},
+      icon: {
+        color: Colors.ELEVATION_4
+      }
+    },
+    error: {
+      container: { ...iconContainerProps },
+      text: {},
+      icon: {
+        color: Colors.RED_K_D1
+      },
+      pressedStyle: {
+        container: {
+          position: 'absolute',
+          justifyContent: 'center',
+          alignItems: 'center',
+          borderRadius: 1000,
+          backgroundColor: Colors.ELEVATION_4
+        },
+        text: {},
+        icon: {
+          color: Colors.RED_K_D1
+        }
+      }
+    }
+  }
+};
+
+export default ficButtonDarkTheme;

package/src/components/buttons/FicButton/themes/index.ts

@@ -0,0 +1,3 @@
+import ficButtonLightTheme from './light';
+
+export { ficButtonLightTheme };

package/src/components/buttons/FicButton/themes/light.ts

@@ -0,0 +1,293 @@
+import { FlexAlignType } from 'react-native';
+import { Colors } from '../../../../styles/colors';
+import { BORDER_RADIUS } from '../../../../styles/space';
+import { FicButtonTheme, GenericViewStyle } from '../FicButton.types';
+import { FONT_SIZE } from '../constants';
+
+const defaultContainerProps: GenericViewStyle = {
+  flexDirection: 'row',
+  alignSelf: 'flex-start',
+  justifyContent: 'center',
+  alignContent: 'center',
+  alignItems: 'center',
+  borderRadius: BORDER_RADIUS.SM
+};
+
+const { alignContent, ...defaultIconContainerProps } = defaultContainerProps;
+
+const iconContainerProps = {
+  ...defaultIconContainerProps,
+  borderRadius: 1000,
+  alignSelf: 'center' as FlexAlignType
+};
+
+const ficButtonLightTheme: FicButtonTheme = {
+  primary: {
+    default: {
+      container: {
+        ...defaultContainerProps,
+        backgroundColor: Colors.AZURE
+      },
+      text: {
+        fontSize: FONT_SIZE,
+        color: Colors.WHITE
+      },
+      icon: {
+        color: Colors.WHITE
+      },
+      pressedStyle: {
+        container: {
+          ...defaultContainerProps,
+          backgroundColor: Colors.AZURE_D1
+        },
+        text: {
+          fontSize: FONT_SIZE,
+          color: Colors.WHITE
+        },
+        icon: {
+          color: Colors.WHITE
+        }
+      }
+    },
+    disabled: {
+      container: {
+        ...defaultContainerProps,
+        backgroundColor: Colors.GREY_2
+      },
+      text: {
+        fontSize: FONT_SIZE,
+        color: Colors.GREY_3
+      },
+      icon: {
+        color: Colors.GREY_3
+      }
+    },
+    error: {
+      container: {
+        ...defaultContainerProps,
+        backgroundColor: Colors.RED
+      },
+      text: {
+        fontSize: FONT_SIZE,
+        color: Colors.WHITE
+      },
+      icon: {
+        color: Colors.WHITE
+      },
+      pressedStyle: {
+        container: {
+          ...defaultContainerProps,
+          backgroundColor: Colors.RED_D2
+        },
+        text: {
+          fontSize: FONT_SIZE,
+          color: Colors.WHITE
+        },
+        icon: {
+          color: Colors.WHITE
+        }
+      }
+    }
+  },
+  secondary: {
+    default: {
+      container: {
+        ...defaultContainerProps,
+        backgroundColor: Colors.WHITE,
+        borderWidth: 1,
+        borderColor: Colors.AZURE
+      },
+      text: {
+        fontSize: FONT_SIZE,
+        color: Colors.AZURE
+      },
+      icon: {
+        color: Colors.AZURE
+      },
+      pressedStyle: {
+        container: {
+          ...defaultContainerProps,
+          backgroundColor: Colors.GREY_2,
+          borderWidth: 1,
+          borderColor: Colors.AZURE
+        },
+        text: {
+          fontSize: FONT_SIZE,
+          color: Colors.AZURE
+        },
+        icon: {
+          color: Colors.AZURE
+        }
+      }
+    },
+    disabled: {
+      container: {
+        ...defaultContainerProps,
+        backgroundColor: Colors.WHITE,
+        borderWidth: 1,
+        borderColor: Colors.GREY_3
+      },
+      text: {
+        fontSize: FONT_SIZE,
+        color: Colors.GREY_3
+      },
+      icon: {
+        color: Colors.GREY_3
+      }
+    },
+    error: {
+      container: {
+        ...defaultContainerProps,
+        backgroundColor: Colors.WHITE,
+        borderWidth: 1,
+        borderColor: Colors.RED
+      },
+      text: {
+        fontSize: FONT_SIZE,
+        color: Colors.RED
+      },
+      icon: {
+        color: Colors.RED
+      },
+      pressedStyle: {
+        container: {
+          ...defaultContainerProps,
+          backgroundColor: Colors.RED_L1,
+          borderWidth: 1,
+          borderColor: Colors.RED
+        },
+        text: {
+          fontSize: FONT_SIZE,
+          color: Colors.RED
+        },
+        icon: {
+          color: Colors.RED
+        }
+      }
+    }
+  },
+  tertiary: {
+    default: {
+      container: { ...defaultContainerProps, alignSelf: 'center' },
+      text: {
+        textDecorationLine: 'underline',
+        fontSize: FONT_SIZE,
+        color: Colors.AZURE,
+        colorContrastForLightTheme: Colors.WHITE
+      },
+      icon: {
+        color: Colors.AZURE,
+        colorContrastForLightTheme: Colors.WHITE
+      },
+      pressedStyle: {
+        container: {
+          ...defaultContainerProps,
+          alignSelf: 'center',
+          backgroundColor: Colors.BLACK_08
+        },
+        text: {
+          textDecorationLine: 'underline',
+          fontSize: FONT_SIZE,
+          color: Colors.AZURE,
+          colorContrastForLightTheme: Colors.WHITE
+        },
+        icon: {
+          color: Colors.AZURE,
+          colorContrastForLightTheme: Colors.WHITE
+        }
+      }
+    },
+    disabled: {
+      container: { ...defaultContainerProps },
+      text: {
+        textDecorationLine: 'underline',
+        fontSize: FONT_SIZE,
+        color: Colors.GREY_3
+      },
+      icon: {
+        color: Colors.GREY_3,
+        colorContrastForLightTheme: Colors.WHITE_80
+      }
+    },
+    error: {
+      container: { ...defaultContainerProps, alignSelf: 'center' },
+      text: {
+        textDecorationLine: 'underline',
+        fontSize: FONT_SIZE,
+        color: Colors.RED,
+        colorContrastForLightTheme: Colors.RED_L2
+      },
+      icon: {
+        color: Colors.RED
+      },
+      pressedStyle: {
+        container: {
+          ...defaultContainerProps,
+          alignSelf: 'center',
+          backgroundColor: Colors.RED_L1
+        },
+        text: {
+          textDecorationLine: 'underline',
+          fontSize: FONT_SIZE,
+          color: Colors.RED,
+          colorContrastForLightTheme: Colors.RED_L2
+        },
+        icon: {
+          color: Colors.RED,
+          colorContrastForLightTheme: Colors.RED_L2
+        }
+      }
+    }
+  },
+  icon: {
+    default: {
+      container: { ...iconContainerProps, alignSelf: 'flex-start' },
+      text: {},
+      icon: {
+        color: Colors.AZURE,
+        colorContrastForLightTheme: Colors.WHITE
+      },
+      pressedStyle: {
+        container: {
+          backgroundColor: Colors.BLACK_08,
+          justifyContent: 'center',
+          alignItems: 'center'
+        },
+        text: {},
+        icon: {
+          color: Colors.AZURE,
+          colorContrastForLightTheme: Colors.WHITE
+        }
+      }
+    },
+    disabled: {
+      container: { ...iconContainerProps },
+      text: {},
+      icon: {
+        color: Colors.GREY_3,
+        colorContrastForLightTheme: Colors.WHITE_80
+      }
+    },
+    error: {
+      container: { ...iconContainerProps },
+      text: {},
+      icon: {
+        color: Colors.RED
+      },
+      pressedStyle: {
+        container: {
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: Colors.RED_L1
+        },
+        text: {},
+        icon: {
+          color: Colors.RED,
+          colorContrastForLightTheme: Colors.RED_L2
+        }
+      }
+    }
+  }
+};
+
+export default ficButtonLightTheme;

package/src/components/buttons/FicButtonGroup/FicButtonGroup.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import FicButton from '../FicButton/FicButton';
+import { FicButtonGroupProps } from './FicButtonGroup.types';
+
+const FicButtonGroup: React.FC<FicButtonGroupProps> = ({ primaryAction, secondaryAction, style, horizontal }) => {
+  const containerStyleObj = style ?? {};
+
+  const dynamicContainerStyle: StyleProp<ViewStyle> = {
+    flexDirection: horizontal ? 'row' : 'column'
+  };
+
+  const primaryActionStyle: StyleProp<ViewStyle[]> = [
+    horizontal ? { flex: 1 } : {},
+    horizontal && secondaryAction ? { marginRight: 8 } : {},
+    { alignSelf: 'center' }
+  ];
+
+  const secondaryActionStyle: StyleProp<ViewStyle[]> = [
+    horizontal ? { flex: 1 } : {},
+    !horizontal && primaryAction ? { marginTop: 8 } : {},
+    horizontal && primaryAction ? { marginLeft: 8 } : {},
+    { alignSelf: 'center' }
+  ];
+
+  return (
+    <View style={[styles.container, dynamicContainerStyle, containerStyleObj]}>
+      {primaryAction ? <FicButton fullWidth containerStyle={primaryActionStyle} {...primaryAction} /> : null}
+      {secondaryAction ? <FicButton fullWidth containerStyle={secondaryActionStyle} {...secondaryAction} /> : null}
+    </View>
+  );
+};
+
+export default FicButtonGroup;
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center'
+  }
+});

package/src/components/buttons/FicButtonGroup/FicButtonGroup.types.ts

@@ -0,0 +1,11 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { FicButtonProps } from '../FicButton/FicButton.types';
+
+export type FicButtonState = 'default' | 'disabled' | 'error' | undefined;
+
+export type FicButtonGroupProps = {
+  primaryAction?: FicButtonProps | null;
+  secondaryAction?: FicButtonProps | null;
+  style?: StyleProp<ViewStyle>;
+  horizontal?: boolean;
+};

package/src/components/buttons/FicButtonGroup/index.ts

@@ -0,0 +1,2 @@
+import FicButtonGroup from './FicButtonGroup';
+export { FicButtonGroup };