feat: add progress circle + #314 + #348 + #336

app.example.json

@@ -4,7 +4,7 @@
     "slug": "not-my-fault-earth",
     "privacy": "public",
     "platforms": ["ios", "android"],
-    "version": "0.9.0",
+    "version": "0.9.1",
     "orientation": "portrait",
     "splash": {
       "image": "./assets/images/splash.png",
@@ -19,13 +19,13 @@
       "icon": "./assets/images/ios.icon.png",
       "bundleIdentifier": "nmf.earth",
       "supportsTablet": true,
-      "buildNumber": "40"
+      "buildNumber": "41"
     },
     "android": {
       "icon": "./assets/images/android.icon.png",
       "useNextNotificationsApi": true,
       "package": "nmf.earth",
-      "versionCode": 40
+      "versionCode": 41
     },
     "userInterfaceStyle": "automatic",
     "hooks": {

app/components/Button/Button.styles.ts

@@ -10,10 +10,14 @@ const Primary = StyleSheet.create({
 
 const Secondary = StyleSheet.create({
   default: {
-    backgroundColor: Colors.white,
-    borderColor: Colors.green50,
-    borderWidth: 2.5,
+    backgroundColor: Colors.blue50,
   },
 });
 
-export default { Primary, Secondary };
+const Danger = StyleSheet.create({
+  default: {
+    backgroundColor: Colors.red50,
+  },
+});
+
+export default { Primary, Secondary, Danger };

app/components/Button/Button.tsx

@@ -1,58 +1,58 @@
 import React from "react";
 import { TouchableOpacity, StyleProp, ViewStyle } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
 
-import { Font } from "style";
+import { Colors } from "style";
 
+import Text from "../Text";
 import styles from "./Button.styles";
 import mainStyle from "./styles";
 
 const PADDING_VERTICAL = 12;
 
-type ButtonType = "Primary" | "Secondary";
+type ButtonType = "Primary" | "Secondary" | "Danger";
 
 type Props = {
   style?: StyleProp<ViewStyle>;
-  children: React.ReactNode;
   fullWidth?: boolean;
-  textType: ButtonType;
-  black?: boolean;
-  red?: boolean;
   onPress: () => void;
+  text: string;
+  icon?: string;
 };
 
 interface ButtonFactory {
   (type: ButtonType): React.FC<Props>;
 }
 
 const buttonFactory: ButtonFactory = (type) => (props) => {
-  const customStyle = [mainStyle.default, styles[type].default, props.style];
-  const { fullWidth, children, textType, black, red, onPress } = props;
+  const style = [mainStyle.default, styles[type].default, props.style];
+  const { fullWidth, onPress, text, icon } = props;
+  let iconItem = null;
 
   if (fullWidth) {
-    customStyle.push(mainStyle.fullWidth);
+    style.push(mainStyle.fullWidth);
   }
 
-  if (black) {
-    customStyle.push(mainStyle.black);
-  }
-
-  if (red) {
-    customStyle.push(mainStyle.red);
+  if (icon) {
+    iconItem = <Ionicons name={icon} size={24} style={mainStyle.mainIcon} color={Colors.white} />;
   }
 
   const additionalStyle = {
     paddingVertical: PADDING_VERTICAL,
-    borderRadius: PADDING_VERTICAL * 2 + Font.FontSize[textType],
+    borderRadius: PADDING_VERTICAL * 2,
   };
-
   return (
-    <TouchableOpacity onPress={onPress} {...props} style={[customStyle, additionalStyle]}>
-      {children}
+    <TouchableOpacity onPress={onPress} {...props} style={[style, additionalStyle]}>
+      <Text.Primary bold center white>
+        {text}
+      </Text.Primary>
+      {iconItem}
     </TouchableOpacity>
   );
 };
 
 const Primary = buttonFactory("Primary");
 const Secondary = buttonFactory("Secondary");
+const Danger = buttonFactory("Danger");
 
-export default { Primary, Secondary };
+export default { Primary, Secondary, Danger };

app/components/Button/__tests__/Button.test.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { create } from "react-test-renderer";
 
 import Button from "../";
-import Text from "../../Text";
 
 jest.unmock("../");
 
@@ -12,58 +11,57 @@ const foo = () => {
 
 /* Primary Button Tests */
 
-it("renders correctly full width Primary Button with Primary font", () => {
-  const tree = create(
-    <Button.Primary fullWidth onPress={foo} textType={"Primary"}>
-      <Text.Primary>test</Text.Primary>
-    </Button.Primary>
-  ).toJSON();
+it("renders correctly Primary Button", () => {
+  const tree = create(<Button.Primary onPress={foo} text={"Primary"} />).toJSON();
   expect(tree).toMatchSnapshot();
 });
 
-it("renders correctly full width Primary Button with black color", () => {
-  const tree = create(
-    <Button.Primary black fullWidth onPress={foo} textType={"Primary"}>
-      <Text.Primary>test</Text.Primary>
-    </Button.Primary>
-  ).toJSON();
+it("renders correctly fullwidth Primary Button", () => {
+  const tree = create(<Button.Primary fullWidth onPress={foo} text={"Primary"} />).toJSON();
   expect(tree).toMatchSnapshot();
 });
 
-it("renders correctly full width Primary Button with red color", () => {
+it("renders correctly fullwidth Primary Button with icon", () => {
   const tree = create(
-    <Button.Primary red fullWidth onPress={foo} textType={"Primary"}>
-      <Text.Primary>test</Text.Primary>
-    </Button.Primary>
+    <Button.Primary icon={"calendar"} fullWidth onPress={foo} text={"Primary"} />
   ).toJSON();
   expect(tree).toMatchSnapshot();
 });
 
-it("renders correctly Primary Button with Secondary font", () => {
+/* Secondary Button Tests */
+
+it("renders correctly Secondary Button", () => {
+  const tree = create(<Button.Secondary onPress={foo} text={"Primary"} />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it("renders correctly fullwidth Secondary Button", () => {
+  const tree = create(<Button.Secondary fullWidth onPress={foo} text={"Primary"} />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it("renders correctly fullwidth Secondary Button with icon", () => {
   const tree = create(
-    <Button.Primary onPress={foo} textType={"Secondary"}>
-      <Text.Secondary>test</Text.Secondary>
-    </Button.Primary>
+    <Button.Primary icon={"calendar"} fullWidth onPress={foo} text={"Primary"} />
   ).toJSON();
   expect(tree).toMatchSnapshot();
 });
 
 /* Secondary Button Tests */
 
-it("renders correctly full width Secondary Button with Primary font", () => {
-  const tree = create(
-    <Button.Secondary fullWidth onPress={foo} textType={"Primary"}>
-      <Text.Primary>test</Text.Primary>
-    </Button.Secondary>
-  ).toJSON();
+it("renders correctly Danger Button", () => {
+  const tree = create(<Button.Danger onPress={foo} text={"Primary"} />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it("renders correctly fullwidth Danger Button", () => {
+  const tree = create(<Button.Secondary fullWidth onPress={foo} text={"Primary"} />).toJSON();
   expect(tree).toMatchSnapshot();
 });
 
-it("renders correctly Secondary Button with Secondary font", () => {
+it("renders correctly fullwidth Danger Button with icon", () => {
   const tree = create(
-    <Button.Secondary onPress={foo} textType={"Secondary"}>
-      <Text.Secondary>test</Text.Secondary>
-    </Button.Secondary>
+    <Button.Primary icon={"calendar"} fullWidth onPress={foo} text={"Primary"} />
   ).toJSON();
   expect(tree).toMatchSnapshot();
 });