fix(i18n): i18n support, fixes issue #52

packages/module/src/ErrorBoundary/ErrorBoundary.tsx

@@ -4,17 +4,19 @@ import ErrorState from '../ErrorState';
 import ErrorStack from '../ErrorStack';
 
 export interface ErrorPageProps {
-  /** Title to display on the error page */
+  /** The title text to display on the error page */
   headerTitle: string;
-  /** Indicates if this is a silent error */
+  /** Indicates if the error is silent */
   silent?: boolean;
-  /** Title given to the error */
+  /** The title text to display with the error */
   errorTitle?: string;
-  /** A description of the error */
+  /** The description text to display with the error */
   errorDescription?: React.ReactNode;
-  /** A default description of the error used if no errorDescription is provided. */
+  /** The text for the toggle link that users can select to view error details */
+  errorToggleText?: string;
+  /** The default description text to display with the error if no errorDescription is provided */
   defaultErrorDescription?: React.ReactNode;
-  /** Children components */
+  /** The component that the error boundary component is wrapped around, which should be returned if there is no error  */
   children?: React.ReactNode;
 }
 
@@ -28,7 +30,7 @@ export interface ErrorPageState {
 }
 
 // As of time of writing, React only supports error boundaries in class components
-class ErrorBoundary extends React.Component<React.PropsWithChildren<ErrorPageProps>, ErrorPageState> {
+class ErrorBoundary extends React.Component<ErrorPageProps, ErrorPageState> {
   constructor(props: Readonly<ErrorPageProps>) {
     super(props);
     this.state = {
@@ -72,7 +74,7 @@ class ErrorBoundary extends React.Component<React.PropsWithChildren<ErrorPagePro
               <>
                 <span>{this.props.errorDescription}</span>
                 {this.state.error && ( 
-                  <ExpandableSection toggleText="Show details">
+                  <ExpandableSection toggleText={this.props.errorToggleText ? this.props.errorToggleText : "Show details"}>
                     <ErrorStack error={this.state.error} />
                   </ExpandableSection>
                 )}

packages/module/src/InvalidObject/InvalidObject.tsx

@@ -4,20 +4,26 @@ import NotFoundIcon from '../NotFoundIcon/NotFoundIcon';
 import React from 'react';
 
 export interface InvalidObjectProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
-  /** Custom landing page button URL */
+  /** The URL that the landing page link points to */
   toLandingPageUrl?: string;
-  /** Custom return to landing page text */
+  /** The text label for the link that points back to the landing page */
   toLandingPageText?: React.ReactNode;
+  /** The title for the invalid object message */
+  invalidObjectTitleText?: string;
+  /** The body text for the invalid object message */
+  invalidObjectBodyText?: string;
 }
 
 
 const InvalidObject: React.FunctionComponent<InvalidObjectProps> = ({
   toLandingPageUrl = window.location.origin,
-  toLandingPageText = 'Return to homepage'
+  toLandingPageText = 'Return to homepage',
+  invalidObjectTitleText = 'We lost that page',
+  invalidObjectBodyText = "Let's find you a new one. Try a new search or return home."
 }: InvalidObjectProps) => (
   <EmptyState variant={EmptyStateVariant.full}>
-    <EmptyStateHeader titleText='We lost that page' icon={<NotFoundIcon />} headingLevel='h1' />
-    <EmptyStateBody>Let&apos;s find you a new one. Try a new search or return home.</EmptyStateBody>
+    <EmptyStateHeader titleText={invalidObjectTitleText}icon={<NotFoundIcon />} headingLevel='h1' />
+    <EmptyStateBody>{invalidObjectBodyText}</EmptyStateBody>
     <EmptyStateFooter>
       <Button variant="link" component="a" href={toLandingPageUrl}>
         {toLandingPageText}

packages/module/src/UnavailableContent/UnavailableContent.tsx

@@ -15,21 +15,34 @@ const useStyles = createUseStyles({
 });
 
 export interface UnavailableContentProps {
-  /** Page to open when user clicks on status page link */
+  /** The URL that the status page link points to */
   statusPageUrl?: string;
+  /** The text label for the link that points to the status page */
+  statusPageLinkText?: string;
+  /** The title for the unavailable content message */
+  unavailableTitleText?: string;
+  /** The body text for the unavailable content message that appears before the status page link */
+  unavailableBodyPreStatusLinkText?: string;
+  /** The body text for the unavailable content message that appears after the status page link */
+  unavailableBodyPostStatusLinkText?: string;
 }
 
-const UnavailableContent: React.FunctionComponent<UnavailableContentProps> = ({ statusPageUrl = '' }: UnavailableContentProps) => {
+const UnavailableContent: React.FunctionComponent<UnavailableContentProps> = (
+  { statusPageUrl = '',
+    statusPageLinkText = 'status page',
+    unavailableTitleText = 'This page is temporarily unavailable',
+    unavailableBodyPreStatusLinkText = 'Try refreshing the page. If the problem persists, contact your organization administrator or visit our',
+    unavailableBodyPostStatusLinkText = 'for known outages.' }: UnavailableContentProps) => {
   const classes = useStyles();
   return (
     <EmptyState variant={EmptyStateVariant.lg} className={clsx(classes.emptyStateUnavailable)}>
-      <EmptyStateHeader titleText="This page is temporarily unavailable" icon={<EmptyStateIcon icon={ExclamationCircleIcon} />} headingLevel="h5" />
+      <EmptyStateHeader titleText={unavailableTitleText} icon={<EmptyStateIcon icon={ExclamationCircleIcon} />} headingLevel="h5" />
       <EmptyStateBody>
-        Try refreshing the page. If the problem persists, contact your organization administrator or visit our{' '}
+        {unavailableBodyPreStatusLinkText}{' '}
         <Button component='a' className={clsx(classes.emptyStateLinkButton)} variant='link' href={statusPageUrl} target="_blank" rel="noopener noreferrer">
-          status page
+          {statusPageLinkText}
         </Button>{' '}
-        for known outages.
+        {unavailableBodyPostStatusLinkText}
       </EmptyStateBody>
     </EmptyState>
   );