Chore: add footnote component

components/Home.js

@@ -4,7 +4,9 @@ import PropTypes from 'prop-types'
 import moment from 'moment'
 
 import AppText from './common/app-text'
+import Asterisk from './common/Asterisk'
 import Button from './common/button'
+import Footnote from './common/Footnote'
 
 import cycleModule from '../lib/cycle'
 import { getFertilityStatusForDay } from '../lib/sympto-adapter'
@@ -69,26 +71,12 @@ const Home = ({ navigate, setDate }) => {
       <Button isCTA isSmall={false} onPress={navigateToCycleDayView}>
         {t('labels.home.addDataForToday')}
       </Button>
-      {phase && (
-        <View style={styles.asteriskLine}>
-          <Asterisk />
-          <AppText linkStyle={styles.whiteText} style={styles.greyText}>
-            {statusText}
-          </AppText>
-        </View>
-      )}
+      {phase && <Footnote>{statusText}</Footnote>}
     </ScrollView>
   )
 }
 
-const Asterisk = () => {
-  return <AppText style={styles.asterisk}>*</AppText>
-}
-
 const styles = StyleSheet.create({
-  asterisk: {
-    color: Colors.orange,
-  },
   container: {
     backgroundColor: Colors.purple,
     flex: 1,
@@ -104,12 +92,6 @@ const styles = StyleSheet.create({
     marginBottom: Spacing.tiny,
     marginTop: Spacing.small,
   },
-  asteriskLine: {
-    flexDirection: 'row',
-    alignContent: 'flex-start',
-    marginBottom: Spacing.tiny,
-    marginTop: Spacing.small,
-  },
   title: {
     color: Colors.purpleLight,
     fontFamily: Fonts.bold,
@@ -124,13 +106,6 @@ const styles = StyleSheet.create({
     color: 'white',
     fontSize: Sizes.subtitle,
   },
-  whiteText: {
-    color: 'white',
-  },
-  greyText: {
-    color: Colors.greyLight,
-    paddingLeft: Spacing.base,
-  },
 })
 
 Home.propTypes = {

components/common/Asterisk.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { StyleSheet } from 'react-native'
+
+import AppText from './app-text'
+
+import { Colors } from '../../styles'
+
+const Asterisk = () => <AppText style={styles.asterisk}>*</AppText>
+
+const styles = StyleSheet.create({
+  asterisk: {
+    color: Colors.orange,
+  },
+})
+
+export default Asterisk

components/common/Footnote.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, View } from 'react-native'
+
+import AppText from '../common/app-text'
+import Asterisk from '../common/Asterisk'
+
+import { Colors, Spacing } from '../../styles'
+
+const Footnote = ({ children }) => {
+  if (!children) return false
+
+  return (
+    <View style={styles.container}>
+      <Asterisk />
+      <AppText linkStyle={styles.link} style={styles.text}>
+        {children}
+      </AppText>
+    </View>
+  )
+}
+
+Footnote.propTypes = {
+  children: PropTypes.node,
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignContent: 'flex-start',
+    marginBottom: Spacing.tiny,
+    marginTop: Spacing.small,
+  },
+  link: {
+    color: 'white',
+  },
+  text: {
+    color: Colors.greyLight,
+    paddingLeft: Spacing.base,
+  },
+})
+
+export default Footnote