dce-reactkit 3.7.15 → 3.7.17

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

@@ -9,6 +9,8 @@ type Props = {
     children: React.ReactNode;
     className?: string;
     wrapButtonsAndAddGaps?: boolean;
+    isAdminFeature?: boolean;
+    noMarginOnBottom?: boolean;
 };
 declare const ButtonInputGroup: React.FC<Props>;
 export default ButtonInputGroup;

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

@@ -13,6 +13,7 @@ type Props = {
      */
     onToggle: (isOn: boolean) => void;
     id?: string;
+    className?: string;
     description: string;
     backgroundVariantWhenOn?: Variant;
 };

package/dist/index.d.ts

@@ -249,6 +249,8 @@ type Props$f = {
     children: React$1.ReactNode;
     className?: string;
     wrapButtonsAndAddGaps?: boolean;
+    isAdminFeature?: boolean;
+    noMarginOnBottom?: boolean;
 };
 declare const ButtonInputGroup: React$1.FC<Props$f>;
 
@@ -615,6 +617,7 @@ type Props$2 = {
      */
     onToggle: (isOn: boolean) => void;
     id?: string;
+    className?: string;
     description: string;
     backgroundVariantWhenOn?: Variant;
 };

package/package.json

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

package/src/components/ButtonInputGroup.tsx

@@ -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,

package/src/components/ToggleSwitch.tsx

@@ -29,6 +29,8 @@ type Props = {
   onToggle: (isOn: boolean) => void,
   // Unique ID for the toggle switch
   id?: string,
+  // Custom className for the toggle switch
+  className?: string,
   // A description for what it means when the toggle switch is on
   // E.g. "airplane mode is active"
   // Description will be placed into a sentence with the structure:
@@ -54,6 +56,7 @@ const ToggleSwitch: React.FC<Props> = (props) => {
     isOn,
     onToggle,
     id,
+    className,
     description,
     backgroundVariantWhenOn = Variant.Info,
   } = props;
@@ -76,7 +79,7 @@ const ToggleSwitch: React.FC<Props> = (props) => {
     <button
       id={id}
       aria-label={`If on, ${description}. Currently ${isOn ? 'on' : 'off'}. Click to turn ${isOn ? 'off' : 'on'}.`}
-      className={`alert alert-${backgroundVariant} bg-${backgroundVariant} mb-0 rounded-pill d-inline-block pt-0 pb-0 px-3`}
+      className={`alert alert-${backgroundVariant} bg-${backgroundVariant} mb-0 rounded-pill d-inline-block pt-0 pb-0 px-3 ${className ?? ''}`}
       onClick={() => {
         onToggle(!isOn);
       }}