@hedia/recommendation-screen 2.1.15 → 2.1.16

package/coverage/lcov-report/src/components/LimitationMessage.tsx.html

@@ -94,7 +94,19 @@
 <a name='L35'></a><a href='#L35'>35</a>
 <a name='L36'></a><a href='#L36'>36</a>
 <a name='L37'></a><a href='#L37'>37</a>
-<a name='L38'></a><a href='#L38'>38</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L38'></a><a href='#L38'>38</a>
+<a name='L39'></a><a href='#L39'>39</a>
+<a name='L40'></a><a href='#L40'>40</a>
+<a name='L41'></a><a href='#L41'>41</a>
+<a name='L42'></a><a href='#L42'>42</a>
+<a name='L43'></a><a href='#L43'>43</a>
+<a name='L44'></a><a href='#L44'>44</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -139,11 +151,17 @@ import { Testing } from "../types/enum";
 import { stylesModal } from "./RecommendationModal";
 &nbsp;
 export interface ILimitationMessageProps {
+	/** The message to display to the user. */
 	limitationMessage: string | null;
+	/** Callback function taking no arguments and giving no return value - To be called when the user presses the “OK” button. */
 	onPressNextButton(): void;
 }
 &nbsp;
+/** Display a message on the screen to inform the user that their insulin recommendation was limited. */
 export default class LimitationMessage extends React.Component&lt;ILimitationMessageProps&gt; {
+	/**
+	 * @returns JSX element for displaying a dialog with the limitationMessage and an “OK” button that calls the onPressNextButton prop callback when tapped.
+	 */
 	public render = (): JSX.Element =&gt; {
 		const { limitationMessage } = this.props;
 		return (
@@ -175,7 +193,7 @@ export default class LimitationMessage extends React.Component&lt;ILimitationMes
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Fri Jul 09 2021 12:31:53 GMT+0000 (Coordinated Universal Time)
+                at Thu Jul 29 2021 07:55:43 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../prettify.js"></script>

package/coverage/lcov-report/src/components/LineSeparator.tsx.html

@@ -81,7 +81,13 @@
 <a name='L22'></a><a href='#L22'>22</a>
 <a name='L23'></a><a href='#L23'>23</a>
 <a name='L24'></a><a href='#L24'>24</a>
-<a name='L25'></a><a href='#L25'>25</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L25'></a><a href='#L25'>25</a>
+<a name='L26'></a><a href='#L26'>26</a>
+<a name='L27'></a><a href='#L27'>27</a>
+<a name='L28'></a><a href='#L28'>28</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -108,11 +114,14 @@
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React from "react";
 import { StyleSheet, View } from "react-native";
 &nbsp;
-interface IProps {
+export interface IProps {
+	/** The color that the line should have. */
 	color: string;
 }
 &nbsp;
+/** Display a horizontal line for visually separating elements in the user interface. */
 export default class LineSeparator extends React.Component&lt;IProps&gt; {
+	/** @return JSX element for displaying a thin horizontal line in the given color. */
 	public render(): JSX.Element {
 		return (
 			&lt;React.Fragment&gt;
@@ -136,7 +145,7 @@ const lineSeparatorStyles = StyleSheet.create({
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Fri Jul 09 2021 12:31:53 GMT+0000 (Coordinated Universal Time)
+                at Thu Jul 29 2021 07:55:43 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../prettify.js"></script>

package/coverage/lcov-report/src/components/RecentInsulin.tsx.html

@@ -158,7 +158,25 @@
 <a name='L99'></a><a href='#L99'>99</a>
 <a name='L100'></a><a href='#L100'>100</a>
 <a name='L101'></a><a href='#L101'>101</a>
-<a name='L102'></a><a href='#L102'>102</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L102'></a><a href='#L102'>102</a>
+<a name='L103'></a><a href='#L103'>103</a>
+<a name='L104'></a><a href='#L104'>104</a>
+<a name='L105'></a><a href='#L105'>105</a>
+<a name='L106'></a><a href='#L106'>106</a>
+<a name='L107'></a><a href='#L107'>107</a>
+<a name='L108'></a><a href='#L108'>108</a>
+<a name='L109'></a><a href='#L109'>109</a>
+<a name='L110'></a><a href='#L110'>110</a>
+<a name='L111'></a><a href='#L111'>111</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -266,12 +284,21 @@ import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { infoStyles } from "./InfoBars";
 &nbsp;
-interface IProps {
+export interface IProps {
+	/** Callback function taking no arguments and returning no value - To be called if the user presses the “Yes” button. */
 	onRecentInsulinYes(): void;
+	/**  Callback function taking no arguments and returning no value - To be called if the user presses the “No” button. */
 	onRecentInsulinNo(): void;
 }
 &nbsp;
+/** Display a card that prompts the user to recall if they injected insulin recently. */
 export default class RecentInsulin extends React.Component&lt;IProps&gt; {
+	/**
+	 *
+	 * @returns JSX element that displays a card with the question “Have you taken insulin within the last 4 hours? Along with two buttons labeled “Yes” and “No” respectively.
+	 * If the user taps the “Yes” button, the onRecentInsulinYes prop callback function should be called.
+	 * If the user taps the “No” button, the onRecentInsulinNo prop callback function should be called.
+	 */
 	public render = (): JSX.Element =&gt; {
 		return (
 			&lt;View style={recentInsulinStyles.container}&gt;
@@ -367,7 +394,7 @@ const recentInsulinStyles = StyleSheet.create({
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Fri Jul 09 2021 12:31:53 GMT+0000 (Coordinated Universal Time)
+                at Thu Jul 29 2021 07:55:43 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../prettify.js"></script>

package/coverage/lcov-report/src/components/RecommendationModal.tsx.html

@@ -278,7 +278,67 @@
 <a name='L219'></a><a href='#L219'>219</a>
 <a name='L220'></a><a href='#L220'>220</a>
 <a name='L221'></a><a href='#L221'>221</a>
-<a name='L222'></a><a href='#L222'>222</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L222'></a><a href='#L222'>222</a>
+<a name='L223'></a><a href='#L223'>223</a>
+<a name='L224'></a><a href='#L224'>224</a>
+<a name='L225'></a><a href='#L225'>225</a>
+<a name='L226'></a><a href='#L226'>226</a>
+<a name='L227'></a><a href='#L227'>227</a>
+<a name='L228'></a><a href='#L228'>228</a>
+<a name='L229'></a><a href='#L229'>229</a>
+<a name='L230'></a><a href='#L230'>230</a>
+<a name='L231'></a><a href='#L231'>231</a>
+<a name='L232'></a><a href='#L232'>232</a>
+<a name='L233'></a><a href='#L233'>233</a>
+<a name='L234'></a><a href='#L234'>234</a>
+<a name='L235'></a><a href='#L235'>235</a>
+<a name='L236'></a><a href='#L236'>236</a>
+<a name='L237'></a><a href='#L237'>237</a>
+<a name='L238'></a><a href='#L238'>238</a>
+<a name='L239'></a><a href='#L239'>239</a>
+<a name='L240'></a><a href='#L240'>240</a>
+<a name='L241'></a><a href='#L241'>241</a>
+<a name='L242'></a><a href='#L242'>242</a>
+<a name='L243'></a><a href='#L243'>243</a>
+<a name='L244'></a><a href='#L244'>244</a>
+<a name='L245'></a><a href='#L245'>245</a>
+<a name='L246'></a><a href='#L246'>246</a>
+<a name='L247'></a><a href='#L247'>247</a>
+<a name='L248'></a><a href='#L248'>248</a>
+<a name='L249'></a><a href='#L249'>249</a>
+<a name='L250'></a><a href='#L250'>250</a>
+<a name='L251'></a><a href='#L251'>251</a>
+<a name='L252'></a><a href='#L252'>252</a>
+<a name='L253'></a><a href='#L253'>253</a>
+<a name='L254'></a><a href='#L254'>254</a>
+<a name='L255'></a><a href='#L255'>255</a>
+<a name='L256'></a><a href='#L256'>256</a>
+<a name='L257'></a><a href='#L257'>257</a>
+<a name='L258'></a><a href='#L258'>258</a>
+<a name='L259'></a><a href='#L259'>259</a>
+<a name='L260'></a><a href='#L260'>260</a>
+<a name='L261'></a><a href='#L261'>261</a>
+<a name='L262'></a><a href='#L262'>262</a>
+<a name='L263'></a><a href='#L263'>263</a>
+<a name='L264'></a><a href='#L264'>264</a>
+<a name='L265'></a><a href='#L265'>265</a>
+<a name='L266'></a><a href='#L266'>266</a>
+<a name='L267'></a><a href='#L267'>267</a>
+<a name='L268'></a><a href='#L268'>268</a>
+<a name='L269'></a><a href='#L269'>269</a>
+<a name='L270'></a><a href='#L270'>270</a>
+<a name='L271'></a><a href='#L271'>271</a>
+<a name='L272'></a><a href='#L272'>272</a>
+<a name='L273'></a><a href='#L273'>273</a>
+<a name='L274'></a><a href='#L274'>274</a>
+<a name='L275'></a><a href='#L275'>275</a>
+<a name='L276'></a><a href='#L276'>276</a>
+<a name='L277'></a><a href='#L277'>277</a>
+<a name='L278'></a><a href='#L278'>278</a>
+<a name='L279'></a><a href='#L279'>279</a>
+<a name='L280'></a><a href='#L280'>280</a>
+<a name='L281'></a><a href='#L281'>281</a>
+<a name='L282'></a><a href='#L282'>282</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -303,18 +363,60 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">73x</span>
 <span class="cline-any cline-yes">73x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">73x</span>
 <span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">73x</span>
 <span class="cline-any cline-yes">36x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -338,6 +440,11 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">73x</span>
 <span class="cline-any cline-yes">36x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -372,6 +479,9 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">73x</span>
 <span class="cline-any cline-yes">141x</span>
 <span class="cline-any cline-yes">141x</span>
@@ -401,12 +511,21 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">73x</span>
 <span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">144x</span>
 <span class="cline-any cline-yes">144x</span>
 <span class="cline-any cline-yes">144x</span>
@@ -428,6 +547,7 @@
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -510,19 +630,48 @@ import LimitationMessage from "./LimitationMessage";
 &nbsp;
 const { RecommendationModalTestIds } = Testing.Id;
 &nbsp;
-interface IModalProps {
+export interface IModalProps {
+	/** Whether or not the modal should currently be displayed on the screen */
 	isVisible: boolean;
+	/** The amount of additional carbohydrates that is being recommended for the user in grams. */
 	suggestedCarbohydrates: number | null;
+	/** A message to display to the user to inform them in natural language about special recommendations or warnings from HDA. */
 	attentionMessage: string | null;
+	/** A message to display to the user to inform them if their insulin recommendation was limited by the maximum threshold. */
 	limitationMessage: string | null;
+	/** Callback function taking no arguments and returning no value - Should be called if the user taps the “OK” button on the modal. */
 	onClickOkButton(): void;
+	/**
+	 *  Callback function taking no arguments and returning no value.
+	 * Should be called if the user taps the “accept” button when they are recommended to eat additional carbohydrates.
+	 */
 	onAcceptCarbohydrates(): void;
+	/**
+	 * Callback function taking no arguments and returning no value.
+	 *  Should be called if the user taps the “decline” button when they are recommended to eat additional carbohydrates.
+	 */
 	onDeclineCarbohydrates(): void;
 }
-interface IModalState {
+export interface IModalState {
+	/** If true then the first page will be displayed, otherwise the second page will be displayed. */
 	firstPageVisible: boolean;
 }
+&nbsp;
+/**
+ * Popup modal for displaying information messages or warnings to the user if necessary.
+ * The modal has two “pages” with different content that it is able to display.
+ * The first page is for informing the user if their insulin recommendation was limited by the maximum insulin safety limit.
+ * This page will only be displayed if the recommendation was actually limited.
+ * The second page is for displaying a general attention message that may contain instructions for the user,
+ * and for letting the user know if they are being recommended eating additional carbohydrates.
+ */
 export default class RecommendationModal extends React.Component&lt;IModalProps, IModalState&gt; {
+	/**
+	 * Steps:
+	 * 1. Call the super() method with the props.
+	 * 2. Set the firstPageVisible state variable true if the limitationMessage prop is truthy.
+	 * @param props The class props
+	 */
 	constructor(props: IModalProps) {
 		super(props);
 		this.state = {
@@ -530,12 +679,25 @@ export default class RecommendationModal extends React.Component&lt;IModalProps,
 		};
 	}
 &nbsp;
+	/**
+	 * Handle what happens when the “next” button is pressed.
+	 *
+	 * Steps:
+	 * 1. Unpack attentionMessage and suggestedCarbohydrates from the props object.
+	 * 2. Define isPageVisible to be true if either attentionMessage or suggestedCarbohydrates is truthy.
+	 * 3. If isPageVisible is true then set the firstPageVisible state variable to false. Otherwise call the onClickOkButton prop callback function.
+	 */
 	public onPressNextButton = (): void =&gt; {
 		const { attentionMessage, suggestedCarbohydrates } = this.props;
 		const isPageVisible = !!attentionMessage || !!suggestedCarbohydrates;
 		return isPageVisible ? this.setState({ firstPageVisible: false }) : this.props.onClickOkButton();
 	};
 &nbsp;
+	/**
+	 * @returns Return an JSX element for composing two buttons: one for accepting a suggestion and one for rejecting it.
+	 * If the accept button is pressed the onAcceptCarbohydrates prop callback function shall be called.
+	 * If the accept button is pressed the onDeclineCarbohydrates prop callback function shall be called.
+	 */
 	public recommendationButtons = (): JSX.Element =&gt; {
 		return (
 			&lt;View style={stylesModal.recommendationButtonsContainer}&gt;
@@ -559,6 +721,11 @@ export default class RecommendationModal extends React.Component&lt;IModalProps,
 		);
 	};
 &nbsp;
+	/**
+	 * Compose a JSX element for displaying a recommendation of additional carbohydrates (the value of the suggestedCarbohydrates prop rounded to the nearest integer)
+	 * to the user in a way that explains what to do with the suggestion.
+	 * @param suggestedCarbohydrates the recommended additional carbohydrates
+	 */
 	public recommendCarbohydrates = (suggestedCarbohydrates: number): JSX.Element =&gt; {
 		const displayCarbs = Math.round(suggestedCarbohydrates);
 &nbsp;
@@ -593,6 +760,9 @@ export default class RecommendationModal extends React.Component&lt;IModalProps,
 		);
 	};
 &nbsp;
+	/**
+	 * @returns JSX element for displaying the “second” page of the recommendation modal. The second page displays the string from the attentionMessage prop.
+	 */
 	public secondPage = (): JSX.Element =&gt; {
 		const { attentionMessage, suggestedCarbohydrates } = this.props;
 		const willRecommendCarbs = suggestedCarbohydrates !== null &amp;&amp; suggestedCarbohydrates &gt; 0;
@@ -622,11 +792,20 @@ export default class RecommendationModal extends React.Component&lt;IModalProps,
 		);
 	};
 &nbsp;
+	/**
+	 * @returns JSX element for displaying the “first” page of the recommendation modal.
+	 * The first page consists of a limitation message rendered using a LimitationMessage component.
+	 */
 	public firstPage = (): JSX.Element =&gt; {
 		const { limitationMessage } = this.props;
 		return &lt;LimitationMessage limitationMessage={limitationMessage} onPressNextButton={this.onPressNextButton} /&gt;;
 	};
 &nbsp;
+	/**
+	 * @returns JSX element for rendering a modal that is visible if the isVisible prop is true.
+	 * If the firstPageVisible state variable is true then use firstPage() to render the first page.
+	 * Otherwise use secondPage() to render the second page.
+	 */
 	public render(): JSX.Element {
 		const { isVisible } = this.props;
 		const { firstPageVisible } = this.state;
@@ -649,6 +828,7 @@ const recommendEatingFontSize = height / 45;
 const textFontSize = width / 20;
 const titleFontSize = width / 13;
 &nbsp;
+/** @internal */
 export const stylesModal = StyleSheet.create({
 	modalStyle: { margin: 0 },
 	container: {
@@ -727,7 +907,7 @@ export const stylesModal = StyleSheet.create({
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Fri Jul 09 2021 12:31:53 GMT+0000 (Coordinated Universal Time)
+                at Thu Jul 29 2021 07:55:43 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../prettify.js"></script>