🏷️ [#445] Convert FormDisplay and AppDisplay components to TS

src/Context.js

@@ -17,6 +17,7 @@ const FormContext = React.createContext({
   submissionAllowed: 'yes',
   sendConfirmationEmail: true,
   submissionStatementsConfiguration: [],
+  translationEnabled: false,
   literals: {
     beginText: {value: '', resolved: 'Begin'},
     changeText: {value: '', resolved: 'Change'},

src/components/AppDisplay.jsx → src/components/AppDisplay.tsx

@@ -1,5 +1,30 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
+
+export interface AppDisplayProps {
+  /**
+   * Main content
+   */
+  children: React.ReactNode;
+  /**
+   * UI to change languages.
+   */
+  languageSwitcher?: React.ReactNode;
+  /**
+   * UI to display progression through the form steps.
+   */
+  progressIndicator?: React.ReactNode;
+  /**
+   * Element to display debug information.
+   */
+  appDebug?: React.ReactNode;
+  /**
+   * Main content.
+   *
+   * @deprecated Use children instead.
+   *
+   */
+  router?: React.ReactNode;
+}
 
 /**
  * Main application display component - this is the layout wrapper around content.
@@ -8,7 +33,7 @@ import PropTypes from 'prop-types';
  * is reserved for the main content.
  *
  */
-export const AppDisplay = ({
+export const AppDisplay: React.FC<AppDisplayProps> = ({
   children = null,
   languageSwitcher = null,
   progressIndicator = null,
@@ -30,18 +55,4 @@ export const AppDisplay = ({
   </div>
 );
 
-AppDisplay.propTypes = {
-  children: PropTypes.node.isRequired,
-  languageSwitcher: PropTypes.node,
-  progressIndicator: PropTypes.node,
-  appDebug: PropTypes.node,
-  /**
-   * Main content.
-   *
-   * @deprecated Use children instead.
-   *
-   */
-  router: PropTypes.node,
-};
-
 export default AppDisplay;

src/components/FormDisplay.jsx → src/components/FormDisplay.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import {useContext} from 'react';
 
 import {ConfigContext} from 'Context';
@@ -7,15 +6,29 @@ import {AppDisplay} from 'components/AppDisplay';
 import LanguageSwitcher from 'components/LanguageSwitcher';
 import useFormContext from 'hooks/useFormContext';
 
+export interface FormDisplayProps {
+  /**
+   * Main content.
+   */
+  children?: React.ReactNode;
+  progressIndicator?: React.ReactNode;
+  /**
+   * @deprecated
+   */
+  router?: React.ReactNode;
+}
+
 /**
  * Layout component to render the form container.
  *
  * Takes in the main body and (optional) progress indicator and forwards them to the
  * AppDisplay component, while adding in any global/skeleton nodes.
- *
- * @return {JSX}
  */
-const FormDisplay = ({children = null, progressIndicator = null, router = null}) => {
+const FormDisplay: React.FC<FormDisplayProps> = ({
+  children = null,
+  progressIndicator = null,
+  router = null,
+}) => {
   const {translationEnabled} = useFormContext();
   const config = useContext(ConfigContext);
 
@@ -33,19 +46,4 @@ const FormDisplay = ({children = null, progressIndicator = null, router = null})
   );
 };
 
-FormDisplay.propTypes = {
-  /**
-   * Main content.
-   */
-  children: PropTypes.node,
-  progressIndicator: PropTypes.node,
-  /**
-   * Main content.
-   *
-   * @deprecated Use children instead.
-   *
-   */
-  router: PropTypes.node,
-};
-
 export default FormDisplay;