dce-reactkit 5.0.5 → 5.0.6

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

@@ -18,6 +18,7 @@ type Props = {
     small?: boolean;
     dashed?: boolean;
     useComplexFormatting?: boolean;
+    minSizeToShowLabel?: 'sm' | 'md' | 'lg' | 'xl';
 };
 declare const CheckboxButton: React.FC<Props>;
 export default CheckboxButton;

package/dist/index.d.ts

@@ -278,6 +278,7 @@ type Props$l = {
     small?: boolean;
     dashed?: boolean;
     useComplexFormatting?: boolean;
+    minSizeToShowLabel?: 'sm' | 'md' | 'lg' | 'xl';
 };
 declare const CheckboxButton: React$1.FC<Props$l>;
 

package/package.json

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

package/src/components/CheckboxButton.tsx

@@ -48,6 +48,8 @@ type Props = {
   dashed?: boolean,
   // If true, use complex formatting (tabs, newlines) in the text
   useComplexFormatting?: boolean,
+  // Min bootstrap size to show the label
+  minSizeToShowLabel?: 'sm' | 'md' | 'lg' | 'xl',
 };
 
 /*------------------------------------------------------------------------*/
@@ -83,6 +85,7 @@ const CheckboxButton: React.FC<Props> = (props) => {
     small,
     dashed,
     useComplexFormatting,
+    minSizeToShowLabel,
   } = props;
 
   /*------------------------------------------------------------------------*/
@@ -118,30 +121,32 @@ const CheckboxButton: React.FC<Props> = (props) => {
       }}
     >
       <div className="d-flex align-items-center">
-        <div className="me-1">
+        <div>
           <FontAwesomeIcon
             icon={icon}
           />
         </div>
-        {
-          useComplexFormatting
-            ? (
-              <pre
-                className="ps-1 text-start text-break m-0"
-                style={{
-                  whiteSpace: 'pre-wrap',
-                  tabSize: 2,
-                }}
-              >
-                {text}
-              </pre>
-            )
-            : (
-              <div className="flex-grow-1 text-start text-break">
-                {text}
-              </div>
-            )
-        }
+        <div className={`text-start flex-grow-1 ms-1 ${minSizeToShowLabel ? `d-none d-${minSizeToShowLabel}-block` : ''}`}>
+          {
+            useComplexFormatting
+              ? (
+                <pre
+                  className="ps-1 text-break m-0"
+                  style={{
+                    whiteSpace: 'pre-wrap',
+                    tabSize: 2,
+                  }}
+                >
+                  {text}
+                </pre>
+              )
+              : (
+                <div className="text-break">
+                  {text}
+                </div>
+              )
+          }
+        </div>
       </div>
     </button>
   );