Merge pull request #136 from NASA-PDS/develop

Merging `develop` to `main` to prep for release.
NASA-PDS · Dec 9, 2024 · f033ba4 · f033ba4
2 parents 18e7bcc + 9125a87
commit f033ba4
Show file tree

Hide file tree

Showing 8 changed files with 663 additions and 324 deletions.
diff --git a/apps/frontend/package-lock.json b/apps/frontend/package-lock.json
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "pds-portal-frontend",
   "private": true,
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,7 +18,7 @@
     "@fontsource/public-sans": "^5.0.18",
     "@mui/icons-material": "^5.15.11",
     "@mui/material": "^5.15.11",
-    "@nasapds/wds-react": "^0.0.2",
+    "@nasapds/wds-react": "^0.0.3",
     "@reduxjs/toolkit": "^2.2.1",
     "axios": "^1.6.7",
     "classnames": "^2.5.1",

diff --git a/apps/frontend/src/components/Filters/Filter.tsx b/apps/frontend/src/components/Filters/Filter.tsx
@@ -22,13 +22,17 @@ export type FilterOptionProps = {
   isChecked: boolean;
 };
 
+export type FilterVariant = "single" | "multi";
+
 export type FilterProps = {
   displayTitle: string;
   value: string;
   title: string;
   options: FilterOptionProps[];
   onChecked: (event: ChangeEvent<HTMLInputElement>) => void;
+  onCheckedRadio: (event: ChangeEvent<HTMLInputElement>) => void;
   collapseAll?: boolean;
+  variant: FilterVariant;
 };
 
 import "./filter.scss";
@@ -39,6 +43,8 @@ const Filter = ({
   options,
   onChecked,
   collapseAll = false,
+  onCheckedRadio,
+  variant = "multi",
 }: FilterProps) => {
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [subFilter, setSubFilter] = useState("");
@@ -134,7 +140,7 @@ const Filter = ({
               >
                 <Checkbox
                   sx={{ padding: 0 }}
-                  onChange={onChecked}
+                  onChange={variant === "single" ? onCheckedRadio : onChecked}
                   name={option.value}
                   value={value}
                   checked={option.isChecked}

diff --git a/apps/frontend/src/components/Filters/Filters.tsx b/apps/frontend/src/components/Filters/Filters.tsx
@@ -7,6 +7,7 @@ import { Chip, Typography } from "@nasapds/wds-react";
 export type FiltersProps = {
   filters: FilterProps[];
   onChecked: (event: ChangeEvent<HTMLInputElement>) => void;
+  onCheckedRadio: (event: ChangeEvent<HTMLInputElement>) => void;
   onFilterChipDelete: (value: string, parentValue: string) => void;
   onFilterClear: () => void;
   collapseAll?: boolean;
@@ -17,6 +18,7 @@ type Option = FilterOptionProps & { parentValue: string };
 const Filters = ({
   filters,
   onChecked,
+  onCheckedRadio,
   onFilterChipDelete,
   onFilterClear,
   collapseAll = false,
@@ -102,6 +104,8 @@ const Filters = ({
           options={filter.options}
           onChecked={onChecked}
           collapseAll={collapseAll}
+          onCheckedRadio={onCheckedRadio}
+          variant={filter.value === "page_type" ? "single" : "multi"}
         />
       ))}
     </>

diff --git a/apps/frontend/src/components/Filters/filter.scss b/apps/frontend/src/components/Filters/filter.scss
@@ -18,6 +18,7 @@
 .pds-search-filter-checkbox-container {
    max-height: 400px;
    overflow-y: scroll;
+   overflow-wrap: anywhere;
 }
 
 .pds-search-filter-checkbox-container::-webkit-scrollbar {