From 2e953001662399862525da377970a0663ed19363 Mon Sep 17 00:00:00 2001
From: Birgitta B <bboeckel@thoughtworks.com>
Date: Sun, 13 Jan 2019 10:46:27 +0100
Subject: [PATCH 1/5] Add component to display hints above action buttons

This component can be placed right above an ActionButtonFooter to display a "turquoise" colored, slightly smaller text, e.g. to give helpful hints what to do before saving. If put outside the ScrollView, it will permanently display and cover up part of the scrollable area until the area is scrolled.

Issue: 178
---
 components/app-text.js | 14 +++++++++++++-
 styles/index.js        |  9 +++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/components/app-text.js b/components/app-text.js
index 6e996da..aaf7098 100644
--- a/components/app-text.js
+++ b/components/app-text.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Text } from 'react-native'
+import { Text, View } from 'react-native'
 import styles from "../styles"
 
 export default function AppText(props) {
@@ -21,6 +21,18 @@ export function AppTextLight(props) {
   )
 }
 
+export function ActionHint(props) {
+  return (
+    <View
+      style={styles.actionHintWrappingView}>
+      <AppText
+        style={[styles.actionHint, props.style]}>
+        {props.children}
+      </AppText>
+    </View>
+  )
+}
+
 export function SymptomSectionHeader(props) {
   return (
     <AppText style={styles.symptomViewHeading}>
diff --git a/styles/index.js b/styles/index.js
index 5e73a93..ce44ff8 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -17,6 +17,7 @@ const fontRegular = 'Prompt-Light'
 const fontLight = 'Prompt-Thin'
 
 const regularSize = 16
+const hintSize = 14
 
 const defaultBottomMargin = 5
 const defaultIndentation = 10
@@ -34,6 +35,14 @@ export default StyleSheet.create({
     fontFamily: fontLight,
     fontSize: regularSize
   },
+  actionHintWrappingView: {
+    margin: defaultIndentation
+  },
+  actionHint: {
+    color: secondaryColor,
+    fontFamily: fontRegular,
+    fontSize: hintSize
+  },
   paragraph: {
     marginBottom: defaultBottomMargin
   },

From 971c99ad9f2eff34e77bbdc8e1510e7ff201a84a Mon Sep 17 00:00:00 2001
From: Birgitta B <bboeckel@thoughtworks.com>
Date: Sun, 13 Jan 2019 11:18:41 +0100
Subject: [PATCH 2/5] Add action hints to cervix and mucus views

Issue: 178
---
 components/cycle-day/symptoms/cervix.js | 2 ++
 components/cycle-day/symptoms/mucus.js  | 3 ++-
 i18n/en/cycle-day.js                    | 6 ++++--
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/components/cycle-day/symptoms/cervix.js b/components/cycle-day/symptoms/cervix.js
index 5b2bddd..dacf31f 100644
--- a/components/cycle-day/symptoms/cervix.js
+++ b/components/cycle-day/symptoms/cervix.js
@@ -10,6 +10,7 @@ import { cervix as labels } from '../../../i18n/en/cycle-day'
 import ActionButtonFooter from './action-button-footer'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'
+import { ActionHint } from '../../app-text'
 
 export default class Cervix extends Component {
   constructor(props) {
@@ -81,6 +82,7 @@ export default class Cervix extends Component {
             />
           </SymptomSection>
         </ScrollView>
+        <ActionHint>{labels.actionHint}</ActionHint>
         <ActionButtonFooter
           symptom='cervix'
           date={this.props.date}
diff --git a/components/cycle-day/symptoms/mucus.js b/components/cycle-day/symptoms/mucus.js
index 7de9896..7a6f5de 100644
--- a/components/cycle-day/symptoms/mucus.js
+++ b/components/cycle-day/symptoms/mucus.js
@@ -11,7 +11,7 @@ import computeNfpValue from '../../../lib/nfp-mucus'
 import ActionButtonFooter from './action-button-footer'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'
-
+import { ActionHint } from '../../app-text'
 
 export default class Mucus extends Component {
   constructor(props) {
@@ -70,6 +70,7 @@ export default class Mucus extends Component {
             />
           </SymptomSection>
         </ScrollView>
+        <ActionHint>{labels.actionHint}</ActionHint>
         <ActionButtonFooter
           symptom='mucus'
           date={this.props.date}
diff --git a/i18n/en/cycle-day.js b/i18n/en/cycle-day.js
index 78cd4e2..536dc59 100644
--- a/i18n/en/cycle-day.js
+++ b/i18n/en/cycle-day.js
@@ -14,7 +14,8 @@ export const cervix = {
   position: {
     categories: ['low', 'medium', 'high'],
     explainer: 'How high up in the vagina is the cervix?'
-  }
+  },
+  actionHint: 'Choose values for at least "Opening" and "Firmness" to save.'
 }
 
 export const mucus = {
@@ -26,7 +27,8 @@ export const mucus = {
     categories: ['nothing', 'creamy', 'egg white'],
     explainer: "Looking at and touching your cervical mucus, which describes it best?"
   },
-  excludeExplainer: "You can exclude this value if you don't want to use it for fertility detection"
+  excludeExplainer: "You can exclude this value if you don't want to use it for fertility detection",
+  actionHint: 'Choose values for both "Feeling" and "Texture" to save.'
 }
 
 export const desire = {

From 88973290cb525185f7e5475185c5ac51a7b8f96b Mon Sep 17 00:00:00 2001
From: Birgitta B <bboeckel@thoughtworks.com>
Date: Sun, 13 Jan 2019 12:05:44 +0100
Subject: [PATCH 3/5] Only show the hints if minimum not selected

---
 components/app-text.js                  | 23 ++++++++++++++---------
 components/cycle-day/symptoms/cervix.js |  5 +++--
 components/cycle-day/symptoms/mucus.js  |  5 +++--
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/components/app-text.js b/components/app-text.js
index aaf7098..a7892b9 100644
--- a/components/app-text.js
+++ b/components/app-text.js
@@ -22,15 +22,20 @@ export function AppTextLight(props) {
 }
 
 export function ActionHint(props) {
-  return (
-    <View
-      style={styles.actionHintWrappingView}>
-      <AppText
-        style={[styles.actionHint, props.style]}>
-        {props.children}
-      </AppText>
-    </View>
-  )
+  if(props.isVisible) {
+    return (
+      <View
+        style={styles.actionHintWrappingView}
+        isVisible={false}>
+        <AppText
+          style={[styles.actionHint, props.style]}>
+          {props.children}
+        </AppText>
+      </View>
+    )
+  } else {
+    return null
+  }
 }
 
 export function SymptomSectionHeader(props) {
diff --git a/components/cycle-day/symptoms/cervix.js b/components/cycle-day/symptoms/cervix.js
index dacf31f..d0e3e07 100644
--- a/components/cycle-day/symptoms/cervix.js
+++ b/components/cycle-day/symptoms/cervix.js
@@ -36,6 +36,7 @@ export default class Cervix extends Component {
       { label: labels.position.categories[1], value: 1 },
       { label: labels.position.categories[2], value: 2 }
     ]
+    const mandatoryNotCompletedYet = typeof this.state.opening != 'number' || typeof this.state.firmness != 'number'
     return (
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
@@ -82,7 +83,7 @@ export default class Cervix extends Component {
             />
           </SymptomSection>
         </ScrollView>
-        <ActionHint>{labels.actionHint}</ActionHint>
+        <ActionHint isVisible={mandatoryNotCompletedYet}>{labels.actionHint}</ActionHint>
         <ActionButtonFooter
           symptom='cervix'
           date={this.props.date}
@@ -95,7 +96,7 @@ export default class Cervix extends Component {
               exclude: Boolean(this.state.exclude)
             })
           }}
-          saveDisabled={typeof this.state.opening != 'number' || typeof this.state.firmness != 'number'}
+          saveDisabled={mandatoryNotCompletedYet}
           navigate={this.props.navigate}
         />
       </View>
diff --git a/components/cycle-day/symptoms/mucus.js b/components/cycle-day/symptoms/mucus.js
index 7a6f5de..6e2d2ce 100644
--- a/components/cycle-day/symptoms/mucus.js
+++ b/components/cycle-day/symptoms/mucus.js
@@ -34,6 +34,7 @@ export default class Mucus extends Component {
       { label: labels.texture.categories[1], value: 1 },
       { label: labels.texture.categories[2], value: 2 }
     ]
+    const mandatoryNotCompletedYet = typeof this.state.feeling != 'number' || typeof this.state.texture != 'number'
     return (
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
@@ -70,7 +71,7 @@ export default class Mucus extends Component {
             />
           </SymptomSection>
         </ScrollView>
-        <ActionHint>{labels.actionHint}</ActionHint>
+        <ActionHint isVisible={mandatoryNotCompletedYet}>{labels.actionHint}</ActionHint>
         <ActionButtonFooter
           symptom='mucus'
           date={this.props.date}
@@ -85,7 +86,7 @@ export default class Mucus extends Component {
               exclude: Boolean(this.state.exclude)
             })
           }}
-          saveDisabled={typeof this.state.feeling != 'number' || typeof this.state.texture != 'number'}
+          saveDisabled={mandatoryNotCompletedYet}
           navigate={this.props.navigate}
         />
       </View>

From 5ae5dec98c6b920ed1f917fdcd1dcc34453ab2b1 Mon Sep 17 00:00:00 2001
From: birgitta410 <>
Date: Sun, 13 Jan 2019 14:27:57 +0100
Subject: [PATCH 4/5] Remove wrapping View from ActionHint

Wasn't necessary after all
Issue: 178
---
 components/app-text.js | 12 ++++--------
 styles/index.js        |  6 ++----
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/components/app-text.js b/components/app-text.js
index a7892b9..1011708 100644
--- a/components/app-text.js
+++ b/components/app-text.js
@@ -24,14 +24,10 @@ export function AppTextLight(props) {
 export function ActionHint(props) {
   if(props.isVisible) {
     return (
-      <View
-        style={styles.actionHintWrappingView}
-        isVisible={false}>
-        <AppText
-          style={[styles.actionHint, props.style]}>
-          {props.children}
-        </AppText>
-      </View>
+      <AppText
+        style={[styles.actionHint, props.style]}>
+        {props.children}
+      </AppText>
     )
   } else {
     return null
diff --git a/styles/index.js b/styles/index.js
index ce44ff8..9549d2f 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -35,13 +35,11 @@ export default StyleSheet.create({
     fontFamily: fontLight,
     fontSize: regularSize
   },
-  actionHintWrappingView: {
-    margin: defaultIndentation
-  },
   actionHint: {
     color: secondaryColor,
     fontFamily: fontRegular,
-    fontSize: hintSize
+    fontSize: hintSize,
+    margin: defaultIndentation
   },
   paragraph: {
     marginBottom: defaultBottomMargin

From 42847a8c50cadcf02de68b470f9dc3f3ccba5772 Mon Sep 17 00:00:00 2001
From: birgitta410 <>
Date: Sun, 13 Jan 2019 15:40:33 +0100
Subject: [PATCH 5/5] Fix ESLint error

---
 components/app-text.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/app-text.js b/components/app-text.js
index 1011708..72419ea 100644
--- a/components/app-text.js
+++ b/components/app-text.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Text, View } from 'react-native'
+import { Text } from 'react-native'
 import styles from "../styles"
 
 export default function AppText(props) {