Imperial Units Feature

app/components/ListItemSwitch/ListItemSwitch.styles.ts

@@ -0,0 +1,24 @@
+import { StyleSheet } from "react-native";
+
+import { Colors } from "style";
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingVertical: 18,
+    flex: 1,
+  },
+  switch: {
+    height: 18
+  },
+  topLine: {
+    borderTopColor: Colors.grey10,
+    borderTopWidth: 1.6,
+  },
+  bottomLine: {
+    borderBottomColor: Colors.grey10,
+    borderBottomWidth: 1.6,
+  },
+});

app/components/ListItemSwitch/ListItemSwitch.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { View, ViewStyle, StyleProp } from "react-native";
+import { Switch } from "react-native-gesture-handler";
+
+import styles from "./ListItemSwitch.styles";
+import Text from "../Text";
+
+interface Props {
+  title: string;
+  value: boolean;
+  onChange: () => void;
+  showTopLine?: boolean;
+  showBottomLine?: boolean;
+}
+
+const ListItemSwitch: React.FC<Props> = ({ title, value, onChange, showTopLine, showBottomLine }) => {
+  const containerStyle: StyleProp<ViewStyle> = [styles.container];
+  const switchStyle: StyleProp<ViewStyle> = styles.switch;
+
+  if (showTopLine) {
+    containerStyle.push(styles.topLine);
+  }
+
+  if (showBottomLine) {
+    containerStyle.push(styles.bottomLine);
+  }
+
+  return (
+    <View style={containerStyle}>
+      <Text.Secondary numberOfLines={1}>{title}</Text.Secondary>
+      <Switch
+        style={switchStyle}
+        value={value}
+        onChange={onChange}
+      />
+    </View>
+  );
+};
+
+export default ListItemSwitch;

app/components/ListItemSwitch/__tests__/ListItemSwitch.test.tsx

@@ -0,0 +1,35 @@
+import "react-native";
+import React from "react";
+import { create } from "react-test-renderer";
+
+import ListItemSwitch from "../ListItemSwitch";
+
+describe("<ListItemSwitch />", () => {
+  const props = {
+    title: "Germany",
+    value: true,
+    onChange: () => {
+      // do nothing.
+    },
+  };
+  const wrapper = create(<ListItemSwitch {...props} />);
+
+  test("render", () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test("ListItem renders correctly with topLine", () => {
+    const tree = create(<ListItemSwitch showTopLine {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test("ListItem renders correctly with bottomLine", () => {
+    const tree = create(<ListItemSwitch showBottomLine {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test("ListItem renders correctly with both topLine and bottomLine", () => {
+    const tree = create(<ListItemSwitch showBottomLine showTopLine {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

app/components/ListItemSwitch/__tests__/__snapshots__/ListItemSwitch.test.tsx.snap

@@ -0,0 +1,197 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ListItemSwitch /> ListItem renders correctly with both topLine and bottomLine 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flex": 1,
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "paddingVertical": 18,
+      },
+      Object {
+        "borderTopColor": "#F0F0F0",
+        "borderTopWidth": 1.6,
+      },
+      Object {
+        "borderBottomColor": "#F0F0F0",
+        "borderBottomWidth": 1.6,
+      },
+    ]
+  }
+>
+  <Text.Secondary
+    numberOfLines={1}
+  >
+    Germany
+  </Text.Secondary>
+  <RCTSwitch
+    accessibilityRole="switch"
+    collapsable={false}
+    handlerTag={4}
+    handlerType="NativeViewGestureHandler"
+    onChange={[Function]}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "height": 31,
+          "width": 51,
+        },
+        Object {
+          "height": 18,
+        },
+      ]
+    }
+    value={true}
+  />
+</View>
+`;
+
+exports[`<ListItemSwitch /> ListItem renders correctly with bottomLine 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flex": 1,
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "paddingVertical": 18,
+      },
+      Object {
+        "borderBottomColor": "#F0F0F0",
+        "borderBottomWidth": 1.6,
+      },
+    ]
+  }
+>
+  <Text.Secondary
+    numberOfLines={1}
+  >
+    Germany
+  </Text.Secondary>
+  <RCTSwitch
+    accessibilityRole="switch"
+    collapsable={false}
+    handlerTag={3}
+    handlerType="NativeViewGestureHandler"
+    onChange={[Function]}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "height": 31,
+          "width": 51,
+        },
+        Object {
+          "height": 18,
+        },
+      ]
+    }
+    value={true}
+  />
+</View>
+`;
+
+exports[`<ListItemSwitch /> ListItem renders correctly with topLine 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flex": 1,
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "paddingVertical": 18,
+      },
+      Object {
+        "borderTopColor": "#F0F0F0",
+        "borderTopWidth": 1.6,
+      },
+    ]
+  }
+>
+  <Text.Secondary
+    numberOfLines={1}
+  >
+    Germany
+  </Text.Secondary>
+  <RCTSwitch
+    accessibilityRole="switch"
+    collapsable={false}
+    handlerTag={2}
+    handlerType="NativeViewGestureHandler"
+    onChange={[Function]}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "height": 31,
+          "width": 51,
+        },
+        Object {
+          "height": 18,
+        },
+      ]
+    }
+    value={true}
+  />
+</View>
+`;
+
+exports[`<ListItemSwitch /> render 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flex": 1,
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "paddingVertical": 18,
+      },
+    ]
+  }
+>
+  <Text.Secondary
+    numberOfLines={1}
+  >
+    Germany
+  </Text.Secondary>
+  <RCTSwitch
+    accessibilityRole="switch"
+    collapsable={false}
+    handlerTag={1}
+    handlerType="NativeViewGestureHandler"
+    onChange={[Function]}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "height": 31,
+          "width": 51,
+        },
+        Object {
+          "height": 18,
+        },
+      ]
+    }
+    value={true}
+  />
+</View>
+`;

app/components/ListItemSwitch/index.ts

@@ -0,0 +1 @@
+export { default } from "./ListItemSwitch";

app/components/ListItemSwitch/stories/ListItemSwitch.story.tsx

@@ -0,0 +1,15 @@
+// import React from "react";
+// import { storiesOf } from "@storybook/react-native";
+// import { text } from "@storybook/addon-knobs";
+
+// import ListItemSwitch from "..";
+
+// storiesOf("ListItemSwitch", module).add("switch list item", () => (
+//   <ListItemSwitch
+//     title={text("Title", "Germany")}
+//     value={true}
+//     onChange={() => {
+//       // do nothing.
+//     }}
+//   />
+// ));

app/components/index.ts

@@ -7,6 +7,7 @@ import TextInput from "./TextInput";
 import StickersImage from "./StickersImage";
 import SelectableListItem from "./SelectableListItem";
 import ListItem from "./ListItem";
+import ListItemSwitch from "./ListItemSwitch"
 import HTMLImage from "./HTMLImage";
 import InfoButton from "./InfoButton";
 import NoEmission from "./NoEmission";
@@ -21,6 +22,7 @@ export {
   EmissionListItemProps,
   HTMLImage,
   ListItem,
+  ListItemSwitch,
   SelectableListItem,
   StickersImage,
   SocialMedia,

app/ducks/userPreferences/__tests__/__snapshots__/userPreferences.actions.test.ts.snap

@@ -6,6 +6,7 @@ Object {
   "changeLanguage": [Function],
   "incrementTimesStarted": [Function],
   "toggleNotifications": [Function],
+  "toggleUnits": [Function],
   "updateLocation": [Function],
 }
 `;

app/ducks/userPreferences/__tests__/userPreferences.actions.test.ts

@@ -39,4 +39,12 @@ describe("userPreferences actions should", () => {
     };
     expect(userPreferences.actions.incrementTimesStarted()).toEqual(expectedAction);
   });
+
+  it("be able to toggle units", () => {
+    const expectedAction = {
+      type: userPreferences.actions.toggleUnits.toString(),
+      payload: false,
+    };
+    expect(userPreferences.actions.toggleUnits(false)).toEqual(expectedAction);
+  })
 });