dce-reactkit 3.0.0-beta.31 → 3.0.0-beta.34

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import React from 'react';
  * @author Gabe Abrams
  */
 
-declare type Props$3 = {
+declare type Props$4 = {
     children: React.ReactNode;
     sendRequest: SendRequestFunction;
     dark?: boolean;
@@ -52,7 +52,7 @@ declare const confirm: (title: string, text: string) => Promise<boolean>;
  * @param [errorTitle] title of the error box
  */
 declare const showFatalError: (error: any, errorTitle?: string) => undefined;
-declare const AppWrapper: React.FC<Props$3>;
+declare const AppWrapper: React.FC<Props$4>;
 
 /**
  * Loading spinner/indicator
@@ -65,12 +65,12 @@ declare const LoadingSpinner: () => JSX.Element;
  * @author Gabe Abrams
  */
 
-declare type Props$2 = {
+declare type Props$3 = {
     error: any;
     title?: string;
     onClose?: () => void;
 };
-declare const ErrorBox: React.FC<Props$2>;
+declare const ErrorBox: React.FC<Props$3>;
 
 /**
  * Bootstrap variants
@@ -136,7 +136,7 @@ declare enum ModalType {
  * @author Gabe Abrams
  */
 
-declare type Props$1 = {
+declare type Props$2 = {
     type?: ModalType;
     size?: ModalSize;
     title?: React.ReactNode;
@@ -165,19 +165,38 @@ declare type Props$1 = {
     confirmVariant?: Variant;
     onTopOfOtherModals?: boolean;
 };
-declare const Modal: React.FC<Props$1>;
+declare const Modal: React.FC<Props$2>;
 
 /**
  * A box with a tab on the top that holds buttons and other content
  * @author Gabe Abrams
  */
 
-declare type Props = {
+declare type Props$1 = {
     title: React.ReactNode;
     children: React.ReactNode;
     noBottomPadding?: boolean;
 };
-declare const TabBox: React.FC<Props>;
+declare const TabBox: React.FC<Props$1>;
+
+/**
+ * A radio selection button
+ * @author Gabe Abrams
+ */
+
+declare type Props = {
+    text: string;
+    onSelected: () => void;
+    ariaLabel: string;
+    title?: string;
+    selected?: boolean;
+    id?: string;
+    noMarginOnRight?: boolean;
+    selectedVariant?: Variant;
+    unselectedVariant?: Variant;
+    small?: boolean;
+};
+declare const RadioButton: React.FC<Props>;
 
 /**
  * An error with a code
@@ -393,4 +412,4 @@ declare enum ReactKitErrorCode {
     NoCACCLGetLaunchInfoFunction = "DRK8"
 }
 
-export { AppWrapper, ErrorBox, ErrorWithCode, LoadingSpinner, Modal, ModalButtonType, ModalSize, ModalType, ParamType, ReactKitErrorCode, TabBox, Variant, abbreviate, alert, avg, ceilToNumDecimals, confirm, floorToNumDecimals, forceNumIntoBounds, genRouteHandler, handleError, handleSuccess, initServer, padDecimalZeros, padZerosLeft, roundToNumDecimals, showFatalError, sum, visitServerEndpoint, waitMs };
+export { AppWrapper, ErrorBox, ErrorWithCode, LoadingSpinner, Modal, ModalButtonType, ModalSize, ModalType, ParamType, RadioButton, ReactKitErrorCode, TabBox, Variant, abbreviate, alert, avg, ceilToNumDecimals, confirm, floorToNumDecimals, forceNumIntoBounds, genRouteHandler, handleError, handleSuccess, initServer, padDecimalZeros, padZerosLeft, roundToNumDecimals, showFatalError, sum, visitServerEndpoint, waitMs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.0.0-beta.31",
+  "version": "3.0.0-beta.34",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -19,6 +19,7 @@
   },
   "homepage": "https://github.com/harvard-edtech/dce-reactkit#readme",
   "peerDependencies": {
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",
     "bootstrap": "^5.1.3",

package/src/components/AppWrapper.tsx

@@ -314,10 +314,12 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
   if (alertInfo) {
     modal = (
       <Modal
+        key={`alert-${alertInfo.title}-${alertInfo.text}`}
         title={alertInfo.title}
         type={ModalType.Okay}
         onClose={() => {
           // Alert closed
+          setAlertInfo(undefined);
           if (onAlertClosed) {
             onAlertClosed();
           }
@@ -334,13 +336,14 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
   if (confirmInfo) {
     modal = (
       <Modal
+        key={`confirm-${confirmInfo.title}-${confirmInfo.text}`}
         title={confirmInfo.title}
         type={ModalType.OkayCancel}
         onClose={(buttonType) => {
+          setConfirmInfo(undefined);
           if (onConfirmClosed) {
             onConfirmClosed(buttonType === ModalButtonType.Okay);
           }
-          setConfirmInfo(undefined);
         }}
         dontAllowBackdropExit
       >

package/src/components/Modal.tsx

@@ -406,6 +406,7 @@ const Modal: React.FC<Props> = (props) => {
     // Create the button
     return (
       <button
+        key={ModalButtonType}
         type="button"
         className={`Modal-${ModalButtonType}-button btn btn-${variant} ${last ? '' : 'me-1'}`}
         onClick={() => {

package/src/components/RadioButton.tsx

@@ -0,0 +1,102 @@
+/**
+ * A radio selection button
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React from 'react';
+
+// Import FontAwesome Icons
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faDotCircle } from '@fortawesome/free-solid-svg-icons';
+import { faCircle } from '@fortawesome/free-regular-svg-icons';
+
+// Import shared types
+import Variant from '../types/Variant';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+type Props = {
+  // Text of the button
+  text: string,
+  // Handler for when this item is selected (not called if already selected)
+  onSelected: () => void,
+  // Aria label
+  ariaLabel: string,
+  // Button title
+  title?: string,
+  // True if selected
+  selected?: boolean,
+  // The id of the button
+  id?: string,
+  // If true, no margin on right
+  noMarginOnRight?: boolean,
+  // Variant for when radio is selected
+  selectedVariant?: Variant,
+  // Variant for when radio is not selected
+  unselectedVariant?: Variant,
+  // True if using a small button
+  small?: boolean,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const RadioButton: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  const {
+    text,
+    onSelected,
+    ariaLabel,
+    title,
+    selected,
+    id,
+    noMarginOnRight,
+    selectedVariant = Variant.Primary,
+    unselectedVariant = Variant.Light,
+    small,
+  } = props;
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                Main UI                 */
+  /*----------------------------------------*/
+
+  return (
+    <button
+      type="button"
+      id={id}
+      title={title}
+      className={`btn btn-${selected ? selectedVariant : unselectedVariant}${selected ? ' selected' : ''}${small ? ' btn-sm' : ''} m-0${noMarginOnRight ? '' : ' mr-2'}`}
+      aria-label={`${ariaLabel}${selected ? ': currently selected' : ''}`}
+      onClick={() => {
+        if (!selected) {
+          onSelected();
+        }
+      }}
+    >
+      <FontAwesomeIcon
+        icon={selected ? faDotCircle : faCircle}
+        className="mr-1"
+      />
+      {text}
+    </button>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap up                                */
+/*------------------------------------------------------------------------*/
+
+export default RadioButton;

package/src/index.ts

@@ -4,6 +4,7 @@ import LoadingSpinner from './components/LoadingSpinner';
 import ErrorBox from './components/ErrorBox';
 import Modal from './components/Modal';
 import TabBox from './components/TabBox';
+import RadioButton from './components/RadioButton';
 
 // Import errors
 import ErrorWithCode from './errors/ErrorWithCode';
@@ -41,6 +42,7 @@ export {
   ErrorBox,
   Modal,
   TabBox,
+  RadioButton,
   // Global functions
   alert,
   confirm,