dce-reactkit 3.7.25 → 3.7.28

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

@@ -5,7 +5,7 @@
 import React from 'react';
 import Variant from '../types/Variant';
 type Props = {
-    text: string;
+    text: React.ReactNode;
     onChanged: (checked: boolean) => void;
     ariaLabel: string;
     title?: string;

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

@@ -4,6 +4,7 @@
  */
 import React from 'react';
 type Props = {
+    grayBackground?: boolean;
     customBackgroundColor?: string;
     children: React.ReactNode;
 };

package/dist/index.d.ts

@@ -223,7 +223,7 @@ declare const RadioButton: React$1.FC<Props$h>;
  */
 
 type Props$g = {
-    text: string;
+    text: React$1.ReactNode;
     onChanged: (checked: boolean) => void;
     ariaLabel: string;
     title?: string;
@@ -283,6 +283,7 @@ declare const SimpleDateChooser: React$1.FC<Props$e>;
  */
 
 type Props$d = {
+    grayBackground?: boolean;
     customBackgroundColor?: string;
     children: React$1.ReactNode;
 };

package/package.json

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

package/src/components/CheckboxButton.tsx

@@ -23,7 +23,7 @@ import { isDarkModeOn } from '../client/initClient';
 
 type Props = {
   // Text of the button
-  text: string,
+  text: React.ReactNode,
   // Handler for when this item is toggled
   onChanged: (checked: boolean) => void,
   // Aria label

package/src/components/Drawer.tsx

@@ -12,6 +12,8 @@ import React from 'react';
 
 // Props definition
 type Props = {
+  // If true, the background color is gray
+  grayBackground?: boolean,
   // Custom background color
   customBackgroundColor?: string,
   // Children to display
@@ -51,6 +53,7 @@ const Drawer: React.FC<Props> = (props) => {
 
   // Destructure all props
   const {
+    grayBackground,
     customBackgroundColor,
     children,
   } = props;
@@ -67,7 +70,11 @@ const Drawer: React.FC<Props> = (props) => {
     <div
       className="Drawer-container"
       style={{
-        backgroundColor: (customBackgroundColor ?? undefined),
+        backgroundColor: (
+          grayBackground
+            ? '#E2E3E5'
+            : (customBackgroundColor ?? undefined)
+        ),
       }}
     >
       <style>{style}</style>