dce-reactkit 3.7.16 → 3.7.17

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

@@ -617,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.16",
+  "version": "3.7.17",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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);
       }}