dce-reactkit 3.0.41 → 3.0.42

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import React from 'react';
  * @author Gabe Abrams
  */
 
-declare type Props$9 = {
+declare type Props$b = {
     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$9>;
+declare const AppWrapper: React.FC<Props$b>;
 
 /**
  * Loading spinner/indicator
@@ -65,12 +65,12 @@ declare const LoadingSpinner: () => JSX.Element;
  * @author Gabe Abrams
  */
 
-declare type Props$8 = {
+declare type Props$a = {
     error: any;
     title?: string;
     onClose?: () => void;
 };
-declare const ErrorBox: React.FC<Props$8>;
+declare const ErrorBox: React.FC<Props$a>;
 
 /**
  * Bootstrap variants
@@ -136,7 +136,7 @@ declare enum ModalType {
  * @author Gabe Abrams
  */
 
-declare type Props$7 = {
+declare type Props$9 = {
     type?: ModalType;
     size?: ModalSize;
     title?: React.ReactNode;
@@ -165,27 +165,27 @@ declare type Props$7 = {
     confirmVariant?: Variant;
     onTopOfOtherModals?: boolean;
 };
-declare const Modal: React.FC<Props$7>;
+declare const Modal: React.FC<Props$9>;
 
 /**
  * A box with a tab on the top that holds buttons and other content
  * @author Gabe Abrams
  */
 
-declare type Props$6 = {
+declare type Props$8 = {
     title: React.ReactNode;
     children: React.ReactNode;
     noBottomMargin?: boolean;
     noBottomPadding?: boolean;
 };
-declare const TabBox: React.FC<Props$6>;
+declare const TabBox: React.FC<Props$8>;
 
 /**
  * A radio selection button
  * @author Gabe Abrams
  */
 
-declare type Props$5 = {
+declare type Props$7 = {
     text: string;
     onSelected: () => void;
     ariaLabel: string;
@@ -197,14 +197,14 @@ declare type Props$5 = {
     unselectedVariant?: Variant;
     small?: boolean;
 };
-declare const RadioButton: React.FC<Props$5>;
+declare const RadioButton: React.FC<Props$7>;
 
 /**
  * A checkbox button
  * @author Gabe Abrams
  */
 
-declare type Props$4 = {
+declare type Props$6 = {
     text: string;
     onChanged: (checked: boolean) => void;
     ariaLabel: string;
@@ -216,26 +216,26 @@ declare type Props$4 = {
     uncheckedVariant?: Variant;
     small?: boolean;
 };
-declare const CheckboxButton: React.FC<Props$4>;
+declare const CheckboxButton: React.FC<Props$6>;
 
 /**
  * Input group with a title and space for buttons
  * @author Gabe Abrams
  */
 
-declare type Props$3 = {
+declare type Props$5 = {
     label: string;
     minLabelWidth?: string;
     children: React.ReactNode;
 };
-declare const ButtonInputGroup: React.FC<Props$3>;
+declare const ButtonInputGroup: React.FC<Props$5>;
 
 /**
  * A very simple, lightweight date chooser
  * @author Gabe Abrams
  */
 
-declare type Props$2 = {
+declare type Props$4 = {
     ariaLabel: string;
     name: string;
     month: number;
@@ -250,29 +250,53 @@ declare type Props$2 = {
     onChange: (month: number, day: number, year: number) => void;
     numMonthsToShow?: number;
 };
-declare const SimpleDateChooser: React.FC<Props$2>;
+declare const SimpleDateChooser: React.FC<Props$4>;
 
 /**
  * Drawer container
  * @author Gabe Abrams
  */
 
-declare type Props$1 = {
+declare type Props$3 = {
     children: React.ReactNode;
 };
-declare const Drawer: React.FC<Props$1>;
+declare const Drawer: React.FC<Props$3>;
 
 /**
  * Success checkmark that pops into view
  * @author Gabe Abrams
  */
 
-declare type Props = {
+declare type Props$2 = {
     sizeRem?: number;
     circleVariant?: string;
     checkVariant?: string;
 };
-declare const PopSuccessMark: React.FC<Props>;
+declare const PopSuccessMark: React.FC<Props$2>;
+
+/**
+ * Failure x mark that pops into view
+ * @author Gabe Abrams
+ */
+
+declare type Props$1 = {
+    sizeRem?: number;
+    circleVariant?: string;
+    xVariant?: string;
+};
+declare const PopFailureMark: React.FC<Props$1>;
+
+/**
+ * Failure pending that pops into view
+ * @author Gabe Abrams
+ */
+
+declare type Props = {
+    sizeRem?: number;
+    circleVariant?: string;
+    hourglassVariant?: string;
+};
+declare const PopPendingMark: React.FC<Props>;
 
 /**
  * An error with a code
@@ -570,4 +594,4 @@ declare enum ReactKitErrorCode {
     NotAdmin = "DRK10"
 }
 
-export { AppWrapper, ButtonInputGroup, CheckboxButton, DAY_IN_MS, Drawer, ErrorBox, ErrorWithCode, HOUR_IN_MS, LoadingSpinner, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, ParamType, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, Variant, abbreviate, alert, avg, ceilToNumDecimals, confirm, floorToNumDecimals, forceNumIntoBounds, genRouteHandler, getHumanReadableDate, getOrdinal, getTimeInfoInET, handleError, handleSuccess, initServer, padDecimalZeros, padZerosLeft, roundToNumDecimals, showFatalError, startMinWait, stubServerEndpoint, sum, visitServerEndpoint, waitMs };
+export { AppWrapper, ButtonInputGroup, CheckboxButton, DAY_IN_MS, Drawer, ErrorBox, ErrorWithCode, HOUR_IN_MS, LoadingSpinner, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, ParamType, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, Variant, abbreviate, alert, avg, ceilToNumDecimals, confirm, floorToNumDecimals, forceNumIntoBounds, genRouteHandler, getHumanReadableDate, getOrdinal, getTimeInfoInET, handleError, handleSuccess, initServer, padDecimalZeros, padZerosLeft, roundToNumDecimals, showFatalError, startMinWait, stubServerEndpoint, sum, visitServerEndpoint, waitMs };

package/package.json

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

package/src/components/PopFailureMark.tsx

@@ -0,0 +1,171 @@
+/**
+ * Failure x mark that pops into view
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React from 'react';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+// Props definition
+type Props = {
+  // Size of x mark in rem
+  sizeRem?: number,
+  // Bootstrap variant of circle
+  circleVariant?: string,
+  // Bootstrap variant of x mark
+  xVariant?: string,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                  Style                                 */
+/*------------------------------------------------------------------------*/
+
+const style = `
+  .PopFailureMark-outer-container {
+    position: relative;
+    display: inline-block;
+    border-radius: 50%;
+
+    animation-name: PopFailureMark-outer-container;
+    animation-duration: 0.8s;
+    animation-fill-mode: both;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-out;
+  }
+  @keyframes PopFailureMark-outer-container {
+    0% {
+      opacity: 0;
+      transform: scale(1.5);
+      filter: saturate(0);
+    }
+    80.7% {
+      opacity: 1;
+      transform: scale(1);
+      filter: saturate(0);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+      filter: saturate(1);
+    }
+  }
+
+  .PopFailureMark-x-stroke-1 {
+    position: absolute;
+    left: 25%;
+    top: 19%;
+
+    display: inline-block;
+    height: 16%;
+    width: 70%;
+
+    transform-origin: left;
+
+    animation-name: PopFailureMark-x-stroke-1;
+    animation-duration: 0.3s;
+    animation-delay: 0.3s;
+    animation-fill-mode: both;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+  }
+  @keyframes PopFailureMark-x-stroke-1 {
+    0% {
+      transform: rotate(45deg) scaleX(0);
+    }
+    100% {
+      transform: rotate(45deg) scaleX(1);
+    }
+  }
+
+  .PopFailureMark-x-stroke-2 {
+    position: absolute;
+    left: 75%;
+    top: 19%;
+
+    display: inline-block;
+    height: 16%;
+    width: 70%;
+
+    transform-origin: left;
+
+    animation-name: PopFailureMark-x-stroke-2;
+    animation-duration: 0.3s;
+    animation-delay: 0.6s;
+    animation-fill-mode: both;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-out;
+  }
+  @keyframes PopFailureMark-x-stroke-2 {
+    0% {
+      transform: rotate(135deg) scaleX(0);
+    }
+    100% {
+      transform: rotate(135deg) scaleX(1);
+    }
+  }
+`;
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const PopFailureMark: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  // Destructure all props
+  const {
+    sizeRem = 3,
+    circleVariant = 'danger',
+    xVariant = 'white',
+  } = props;
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                 Main UI                */
+  /*----------------------------------------*/
+
+  return (
+    <div
+      className={`PopFailureMark-outer-container bg-${circleVariant}`}
+      style={{
+        width: `${sizeRem}rem`,
+        height: `${sizeRem}rem`,
+      }}
+      aria-label="mark indicating failure"
+    >
+      {/* Style */}
+      <style>{style}</style>
+      {/* Failure mark */}
+      <div
+        className={`PopFailureMark-x-stroke-1 bg-${xVariant}`}
+        style={{
+          borderRadius: `${sizeRem / 5}rem`,
+        }}
+      />
+      <div
+        className={`PopFailureMark-x-stroke-2 bg-${xVariant}`}
+        style={{
+          borderRadius: `${sizeRem / 5}rem`,
+        }}
+      />
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default PopFailureMark;

package/src/components/PopPendingMark.tsx

@@ -0,0 +1,141 @@
+/**
+ * Failure pending that pops into view
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React from 'react';
+
+// Import FontAwesome
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faHourglass } from '@fortawesome/free-solid-svg-icons';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+// Props definition
+type Props = {
+  // Size of pending in rem
+  sizeRem?: number,
+  // Bootstrap variant of circle
+  circleVariant?: string,
+  // Bootstrap variant of pending
+  hourglassVariant?: string,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                  Style                                 */
+/*------------------------------------------------------------------------*/
+
+const style = `
+  .PopPendingMark-outer-container {
+    position: relative;
+    display: inline-block;
+    border-radius: 50%;
+
+    animation-name: PopPendingMark-outer-container;
+    animation-duration: 0.8s;
+    animation-fill-mode: both;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-out;
+  }
+  @keyframes PopPendingMark-outer-container {
+    0% {
+      opacity: 0;
+      transform: scale(1.5);
+      filter: saturate(0);
+    }
+    80.7% {
+      opacity: 1;
+      transform: scale(1);
+      filter: saturate(0);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+      filter: saturate(1);
+    }
+  }
+
+  .PopPendingMark-hourglass {
+    position: absolute;
+    left: 28%;
+    top: 21%;
+
+    animation-name: PopPendingMark-pending;
+    animation-duration: 0.3s;
+    animation-delay: 0.3s;
+    animation-fill-mode: both;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+  }
+  @keyframes PopPendingMark-pending {
+    0% {
+      transform: scale(0.7) rotate(30deg);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1) rotate(0);
+      opacity: 1;
+    }
+  }
+`;
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const PopPendingMark: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  // Destructure all props
+  const {
+    sizeRem = 3,
+    circleVariant = 'warning',
+    hourglassVariant = 'white',
+  } = props;
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                 Main UI                */
+  /*----------------------------------------*/
+
+  return (
+    <div
+      className={`PopPendingMark-outer-container bg-${circleVariant}`}
+      style={{
+        width: `${sizeRem}rem`,
+        height: `${sizeRem}rem`,
+      }}
+      aria-label="mark indicating that the item is pending"
+    >
+      {/* Style */}
+      <style>{style}</style>
+      {/* Pending mark */}
+      <div>
+        <FontAwesomeIcon
+          icon={faHourglass}
+          className={`PopPendingMark-hourglass text-${hourglassVariant}`}
+          style={{
+            fontSize: `${sizeRem * 0.6}rem`,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default PopPendingMark;

package/src/index.ts

@@ -10,6 +10,8 @@ import ButtonInputGroup from './components/ButtonInputGroup';
 import SimpleDateChooser from './components/SimpleDateChooser';
 import Drawer from './components/Drawer';
 import PopSuccessMark from './components/PopSuccessMark';
+import PopFailureMark from './components/PopFailureMark';
+import PopPendingMark from './components/PopPendingMark';
 
 // Import errors
 import ErrorWithCode from './errors/ErrorWithCode';
@@ -63,6 +65,8 @@ export {
   SimpleDateChooser,
   Drawer,
   PopSuccessMark,
+  PopFailureMark,
+  PopPendingMark,
   // Global functions
   alert,
   confirm,