dce-reactkit 3.7.14 → 3.7.16

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

@@ -4,11 +4,13 @@
  */
 import React from 'react';
 type Props = {
-    label: string;
+    label: React.ReactNode;
     minLabelWidth?: string;
     children: React.ReactNode;
     className?: string;
     wrapButtonsAndAddGaps?: boolean;
+    isAdminFeature?: boolean;
+    noMarginOnBottom?: boolean;
 };
 declare const ButtonInputGroup: React.FC<Props>;
 export default ButtonInputGroup;

package/dist/index.d.ts

@@ -244,11 +244,13 @@ declare const CheckboxButton: React$1.FC<Props$g>;
  */
 
 type Props$f = {
-    label: string;
+    label: React$1.ReactNode;
     minLabelWidth?: string;
     children: React$1.ReactNode;
     className?: string;
     wrapButtonsAndAddGaps?: boolean;
+    isAdminFeature?: boolean;
+    noMarginOnBottom?: boolean;
 };
 declare const ButtonInputGroup: React$1.FC<Props$f>;
 

package/package.json

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

package/src/components/ButtonInputGroup.tsx

@@ -13,7 +13,7 @@ import React from 'react';
 // Props definition
 type Props = {
   // Label text
-  label: string,
+  label: React.ReactNode,
   // Minimum width of the label (css units)
   minLabelWidth?: string,
   // Buttons
@@ -22,6 +22,10 @@ type Props = {
   className?: string,
   // If true, wrap buttons and create gaps
   wrapButtonsAndAddGaps?: boolean,
+  // If true, is an admin feature
+  isAdminFeature?: boolean,
+  // If true, don't add a margin on the bottom
+  noMarginOnBottom?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -42,6 +46,8 @@ const ButtonInputGroup: React.FC<Props> = (props) => {
     children,
     className,
     wrapButtonsAndAddGaps,
+    isAdminFeature,
+    noMarginOnBottom,
   } = props;
 
   /*------------------------------------------------------------------------*/
@@ -53,11 +59,11 @@ const ButtonInputGroup: React.FC<Props> = (props) => {
   /*----------------------------------------*/
 
   return (
-    <div className={`input-group ${className ?? ''}`}>
+    <div className={`input-group ${className ?? ''} ${noMarginOnBottom ? '' : 'mb-2'}`}>
       <div className="input-group-prepend d-flex w-100">
         {/* Label */}
         <span
-          className="input-group-text"
+          className={`input-group-text ${isAdminFeature ? 'border border-success progress-bar-striped bg-success text-white fw-bold' : ''}`}
           style={{
             minWidth: (
               minLabelWidth
@@ -72,7 +78,7 @@ const ButtonInputGroup: React.FC<Props> = (props) => {
 
         {/* Contents */}
         <span
-          className="input-group-text flex-grow-1 rounded-right d-flex flex-wrap"
+          className={`input-group-text flex-grow-1 ${isAdminFeature ? 'border-success ' : ''}rounded-right d-flex flex-wrap`}
           style={{
             backgroundColor: 'white',
             borderTopLeftRadius: 0,