dce-reactkit 3.9.8 → 3.9.10

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

@@ -11,10 +11,12 @@ type Props = {
     title?: string;
     selected?: boolean;
     id?: string;
+    className?: string;
     noMarginOnRight?: boolean;
     selectedVariant?: Variant;
     unselectedVariant?: Variant;
     small?: boolean;
+    useComplexFormatting?: boolean;
 };
 declare const RadioButton: React.FC<Props>;
 export default RadioButton;

package/dist/index.d.ts

@@ -244,10 +244,12 @@ type Props$i = {
     title?: string;
     selected?: boolean;
     id?: string;
+    className?: string;
     noMarginOnRight?: boolean;
     selectedVariant?: Variant;
     unselectedVariant?: Variant;
     small?: boolean;
+    useComplexFormatting?: boolean;
 };
 declare const RadioButton: React$1.FC<Props$i>;
 

package/package.json

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

package/src/components/CheckboxButton.tsx

@@ -126,21 +126,21 @@ const CheckboxButton: React.FC<Props> = (props) => {
         </div>
         {
           useComplexFormatting
-          ? (
-            <pre
-              className="ps-2 text-start text-break"
-              style={{
-                whiteSpace: 'pre-wrap',
-              }}
-            >
-              {text}
-            </pre>
-          )
-          : (
-            <div className="flex-grow-1 text-start text-break ps-2">
-              {text}
-            </div>
-          )
+            ? (
+              <pre
+                className="ps-2 text-start text-break"
+                style={{
+                  whiteSpace: 'pre-wrap',
+                }}
+              >
+                {text}
+              </pre>
+            )
+            : (
+              <div className="flex-grow-1 text-start text-break ps-2">
+                {text}
+              </div>
+            )
         }
       </div>
     </button>

package/src/components/RadioButton.tsx

@@ -32,6 +32,8 @@ type Props = {
   selected?: boolean,
   // The id of the button
   id?: string,
+  // Custom class name of the button
+  className?: string,
   // If true, no margin on right
   noMarginOnRight?: boolean,
   // Variant for when radio is selected
@@ -40,6 +42,8 @@ type Props = {
   unselectedVariant?: Variant,
   // True if using a small button
   small?: boolean,
+  // If true, use complex formatting (tabs, newlines) in the text
+  useComplexFormatting?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -60,6 +64,7 @@ const RadioButton: React.FC<Props> = (props) => {
     title,
     selected,
     id,
+    className,
     noMarginOnRight,
     selectedVariant = (
       isDarkModeOn()
@@ -72,6 +77,7 @@ const RadioButton: React.FC<Props> = (props) => {
         : Variant.Light
     ),
     small,
+    useComplexFormatting,
   } = props;
 
   /*------------------------------------------------------------------------*/
@@ -87,7 +93,7 @@ const RadioButton: React.FC<Props> = (props) => {
       type="button"
       id={id}
       title={title}
-      className={`btn btn-${selected ? selectedVariant : unselectedVariant}${selected ? ' selected' : ''}${small ? ' btn-sm' : ''} m-0${noMarginOnRight ? '' : ' me-1'}`}
+      className={`btn btn-${selected ? selectedVariant : unselectedVariant}${selected ? ' selected' : ''}${small ? ' btn-sm' : ''} m-0${noMarginOnRight ? '' : ' me-1'} ${className ?? ''}`}
       aria-label={`${ariaLabel}${selected ? ': currently selected' : ''}`}
       onClick={() => {
         if (!selected) {
@@ -99,7 +105,24 @@ const RadioButton: React.FC<Props> = (props) => {
         icon={selected ? faDotCircle : faCircle}
         className="me-1"
       />
-      {text}
+      {
+          useComplexFormatting
+            ? (
+              <pre
+                className="ps-2 text-start text-break"
+                style={{
+                  whiteSpace: 'pre-wrap',
+                }}
+              >
+                {text}
+              </pre>
+            )
+            : (
+              <div className="flex-grow-1 text-start text-break ps-2">
+                {text}
+              </div>
+            )
+        }
     </button>
   );
 };

package/src/components/SimpleDateChooser.tsx

@@ -94,7 +94,13 @@ const SimpleDateChooser: React.FC<Props> = (props) => {
     }
     const monthName = getMonthName(month).full;
     // Year is start year +1 for each 12 months
-    const year = (startYear + (Math.floor(unmoddedMonth / 12)));
+    let yearsToAdd = 0;
+    let monthsOfYearsToAdd = unmoddedMonth;
+    while (monthsOfYearsToAdd > 12) {
+      monthsOfYearsToAdd -= 12;
+      yearsToAdd += 1;
+    }
+    const year = startYear + yearsToAdd;
 
     // Figure out which days are allowed
     const days = [];
@@ -174,7 +180,7 @@ const SimpleDateChooser: React.FC<Props> = (props) => {
   return (
     <div
       className="SimpleDateChooser d-inline-block"
-      aria-label={`date chooser with selected date: ${month} ${day}, ${year}`}
+      aria-label={`date chooser with selected date: ${month}/${day}/${year}`}
     >
       {/* Month Chooser */}
       <select