Replace fieldset with Card component (#1159)

extensions/src/platform-scripture/src/checks/configure-checks/configure-checks.component.scss

@@ -19,13 +19,10 @@
   // Places checkboxes in their given order, but does not shrink to one column when window is only wide enough for one
   .configure-checks-check-names {
     columns: 2;
-    column-fill: balance;
-    height: 50%;
-    width: 100%;
     overflow-y: auto;
   }
 
-  .configure-checks-books {
+  .configure-checks-card {
     width: 100%;
   }
 }

extensions/src/platform-scripture/src/checks/configure-checks/configure-checks.component.tsx

@@ -4,6 +4,10 @@ import {
   BOOK_SELECTOR_STRING_KEYS,
   BookSelectionMode,
   BookSelector,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
   Checklist,
   Label,
   ScriptureReference,
@@ -156,31 +160,38 @@ export default function ConfigureChecks({
           <Label>{localizedStrings['%webView_configureChecks_loadingChecks%']}</Label>
         </div>
       ) : (
-        <Checklist
-          className="configure-checks-check-names"
-          legend={localizedStrings['%webView_configureChecks_checks%']}
-          listItems={availableChecks.map((check) => check.checkDescription)}
-          selectedListItems={selectedChecks}
-          handleSelectListItem={handleSelectCheck}
-        />
+        <Card className="configure-checks-card">
+          <CardHeader>
+            <CardTitle>{localizedStrings['%webView_configureChecks_checks%']}</CardTitle>
+          </CardHeader>
+          <CardContent className="configure-checks-check-names">
+            <Checklist
+              listItems={availableChecks.map((check) => check.checkDescription)}
+              selectedListItems={selectedChecks}
+              handleSelectListItem={handleSelectCheck}
+            />
+          </CardContent>
+        </Card>
       )}
-      <fieldset className="configure-checks-books">
-        <legend>
-          <Label>{localizedStrings['%webView_configureChecks_activeRanges%']}</Label>
-        </legend>
-        <BookSelector
-          handleBookSelectionModeChange={toggleShouldUseCurrentBook}
-          currentBookName={Canon.bookIdToEnglishName(currentBookId)}
-          onSelectBooks={selectBooks}
-          selectedBookIds={selectedBookIds}
-          chapterCount={chapterCount}
-          handleSelectStartChapter={setStartChapter}
-          handleSelectEndChapter={setEndChapter}
-          startChapter={startChapter}
-          endChapter={endChapter}
-          localizedStrings={bookSelectorLocalizedStrings}
-        />
-      </fieldset>
+      <Card className="configure-checks-card">
+        <CardHeader>
+          <CardTitle>{localizedStrings['%webView_configureChecks_activeRanges%']}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BookSelector
+            handleBookSelectionModeChange={toggleShouldUseCurrentBook}
+            currentBookName={Canon.bookIdToEnglishName(currentBookId)}
+            onSelectBooks={selectBooks}
+            selectedBookIds={selectedBookIds}
+            chapterCount={chapterCount}
+            handleSelectStartChapter={setStartChapter}
+            handleSelectEndChapter={setEndChapter}
+            startChapter={startChapter}
+            endChapter={endChapter}
+            localizedStrings={bookSelectorLocalizedStrings}
+          />
+        </CardContent>
+      </Card>
     </div>
   );
 }

lib/platform-bible-react/dist/index.d.ts

@@ -534,29 +534,31 @@ export type SettingsListHeaderProps = {
  */
 export declare function SettingsListHeader({ primary, secondary, includeSeparator, }: SettingsListHeaderProps): import("react/jsx-runtime").JSX.Element;
 export type ChecklistProps = {
-	/** Optional string representing the id attribute of the fieldset element */
+	/** Optional string representing the id attribute of the Checklist */
 	id?: string;
 	/** Optional string representing CSS class name(s) for styling */
 	className?: string;
-	/** Optional string representing legend for fieldset element */
-	legend?: string;
-	/** Array of strings representing the legend text for the fieldset element */
+	/** Array of strings representing the checkable items */
 	listItems: string[];
-	/** Array of strings representing items to be displayed as checkboxes in the checklist */
+	/** Array of strings representing the checked items */
 	selectedListItems: string[];
-	/** Function that takes a string param and is called when a checkbox item is selected or deselected */
+	/**
+	 * Function that is called when a checkbox item is selected or deselected
+	 *
+	 * @param item The string description for this item
+	 * @param selected True if selected, false if not selected
+	 */
 	handleSelectListItem: (item: string, selected: boolean) => void;
 	/**
-	 * Optional function that takes a string param and returns a string representing the label text
-	 * for the checkbox associated with that item
+	 * Optional function creates a label for a provided checkable item
+	 *
+	 * @param item The item for which a label is to be created
+	 * @returns A string representing the label text for the checkbox associated with that item
 	 */
 	createLabel?: (item: string) => string;
 };
-/**
- * Renders a list of checkboxes wrapped in a fieldset element. Each checkbox corresponds to an item
- * from the `listItems` array.
- */
-export function Checklist({ id, className, legend, listItems, selectedListItems, handleSelectListItem, createLabel, }: ChecklistProps): import("react/jsx-runtime").JSX.Element;
+/** Renders a list of checkboxes. Each checkbox corresponds to an item from the `listItems` array. */
+export function Checklist({ id, className, listItems, selectedListItems, handleSelectListItem, createLabel, }: ChecklistProps): import("react/jsx-runtime").JSX.Element;
 export declare const buttonVariants: (props?: ({
 	variant?: "link" | "default" | "outline" | "destructive" | "secondary" | "ghost" | null | undefined;
 	size?: "default" | "icon" | "sm" | "lg" | null | undefined;