dce-reactkit 3.9.5 → 3.9.7

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

@@ -17,6 +17,7 @@ type Props = {
     uncheckedVariant?: Variant;
     small?: boolean;
     dashed?: boolean;
+    useComplexFormatting?: boolean;
 };
 declare const CheckboxButton: React.FC<Props>;
 export default CheckboxButton;

package/dist/index.d.ts

@@ -269,6 +269,7 @@ type Props$h = {
     uncheckedVariant?: Variant;
     small?: boolean;
     dashed?: boolean;
+    useComplexFormatting?: boolean;
 };
 declare const CheckboxButton: React$1.FC<Props$h>;
 

package/package.json

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

package/src/components/CheckboxButton.tsx

@@ -46,6 +46,8 @@ type Props = {
   small?: boolean,
   // If true, show a dash in the checkbox (only relevant if unchecked)
   dashed?: boolean,
+  // If true, use complex formatting (tabs, newlines) in the text
+  useComplexFormatting?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -80,6 +82,7 @@ const CheckboxButton: React.FC<Props> = (props) => {
     ),
     small,
     dashed,
+    useComplexFormatting,
   } = props;
 
   /*------------------------------------------------------------------------*/
@@ -121,9 +124,24 @@ const CheckboxButton: React.FC<Props> = (props) => {
             className="me-1"
           />
         </div>
-        <div className="flex-grow-1">
-          {text}
-        </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>
+          )
+        }
       </div>
     </button>
   );