dce-reactkit 3.6.4 → 3.6.6

package/dist/esm/types/components/ErrorBox.d.ts

@@ -3,10 +3,14 @@
  * @author Gabe Abrams
  */
 import React from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import Variant from '../types/Variant';
 type Props = {
     error: any;
     title?: string;
     onClose?: () => void;
+    variant?: Variant;
+    icon?: IconProp;
 };
 declare const ErrorBox: React.FC<Props>;
 export default ErrorBox;

package/dist/index.d.ts

@@ -92,6 +92,8 @@ type Props$j = {
     error: any;
     title?: string;
     onClose?: () => void;
+    variant?: Variant;
+    icon?: IconProp;
 };
 declare const ErrorBox: React.FC<Props$j>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.6.4",
+  "version": "3.6.6",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/AppWrapper.tsx

@@ -7,6 +7,9 @@
 // Import React
 import React, { useState } from 'react';
 
+// Import FontAwesome
+import { faHourglassEnd } from '@fortawesome/free-solid-svg-icons';
+
 // Import shared components
 import ErrorBox from './ErrorBox';
 
@@ -571,6 +574,16 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
         )
     );
 
+    // Choose error box variant
+    let errorBoxVariant = Variant.Danger;
+    if (sessionHasExpired) {
+      errorBoxVariant = (
+        isDarkModeOn()
+          ? Variant.Light
+          : Variant.Secondary
+      );
+    }
+
     // Build error screen
     body = (
       <div
@@ -593,6 +606,8 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
               : fatalErrorTitle
           )}
           error={error}
+          variant={errorBoxVariant}
+          icon={faHourglassEnd}
         />
       </div>
     );

package/src/components/ErrorBox.tsx

@@ -9,9 +9,11 @@ import React from 'react';
 // Import FontAwesome Icons
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 // Import shared types
 import ReactKitErrorCode from '../types/ReactKitErrorCode';
+import Variant from '../types/Variant';
 
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Types ------------------------------- */
@@ -24,6 +26,10 @@ type Props = {
   title?: string,
   // Handler for close,
   onClose?: () => void,
+  // Variant for notice (defaults to danger)
+  variant?: Variant,
+  // Custom icon before error message (defaults to exclamation triangle)
+  icon?: IconProp,
 };
 
 /*------------------------------------------------------------------------*/
@@ -41,6 +47,8 @@ const ErrorBox: React.FC<Props> = (props) => {
     error,
     title = 'An Error Occurred',
     onClose,
+    variant = Variant.Danger,
+    icon = faExclamationTriangle,
   } = props;
 
   /*------------------------------------------------------------------------*/
@@ -83,7 +91,7 @@ const ErrorBox: React.FC<Props> = (props) => {
   // Main UI
   return (
     <div
-      className="alert alert-danger text-center"
+      className={`alert alert-${variant} text-center`}
       style={{
         maxWidth: '40rem',
         margin: 'auto',
@@ -91,7 +99,7 @@ const ErrorBox: React.FC<Props> = (props) => {
     >
       <h4 className="mb-1">
         <FontAwesomeIcon
-          icon={faExclamationTriangle}
+          icon={icon}
           className="me-2"
         />
         {title}