update styles for nih button and add single select list

packages/openneuro-app/src/scripts/search/inputs/nih-select.tsx

@@ -1,12 +1,10 @@
 import React, { useContext } from "react"
 import type { FC } from "react"
-import type { FC } from "react"
 import { useNavigate } from "react-router-dom"
 import { SearchParamsCtx } from "../search-params-ctx"
 import { flattenedModalities } from "../initial-search-params"
 import type { SearchParams } from "../initial-search-params"
-import { FacetSelect } from "@openneuro/components/facets"
-import { AccordionTab, AccordionWrap } from "@openneuro/components/accordion"
+import { SingleSelect } from "@openneuro/components/facets"
 import initialSearchParams from "../initial-search-params"
 
 interface NIHSelectProps {
@@ -44,8 +42,8 @@ const NIHSelect: FC<NIHSelectProps> = ({
   }
   return (
     <>
-      <FacetSelect
-        className="modality-facet facet-open"
+      <SingleSelect
+        className="nih-facet facet-open"
         label={label}
         selected={modality_selected}
         setSelected={setModality}

packages/openneuro-app/src/scripts/search/search-container.tsx

@@ -169,7 +169,7 @@ const SearchContainer: FC<SearchContainerProps> = ({ portalContent }) => {
             {!portalContent
               ? <ModalitySelect portalStyles={true} label="Modalities" />
               : <ModalitySelect portalStyles={false} label="Choose Modality" />}
-            <NIHSelect portalStyles={true} />
+            <NIHSelect portalStyles={true} label="NIH Brain Initiative" />
             <DatasetTypeSelect />
             <AgeRangeInput />
             <SubjectCountRangeInput />

packages/openneuro-components/src/facets/SingleSelect.tsx

@@ -0,0 +1,38 @@
+import React from "react"
+
+export interface SingleSelectProps {
+  items: string[]
+  className?: string
+  label?: string
+  selected: string | null
+  setSelected: (selected: string | null) => void
+}
+
+export const SingleSelect = ({
+  items,
+  className,
+  label,
+  selected,
+  setSelected,
+}: SingleSelectProps) => {
+  const handleSelect = (e: React.MouseEvent, value: string) => {
+    e.stopPropagation()
+    setSelected(value)
+  }
+
+  return (
+    <div className={className}>
+      <ul className="single-select-list">
+        {items.map((item, index) => (
+          <li
+            key={index}
+            onClick={(e) => handleSelect(e, item)}
+            className={selected === item ? "selected-item" : "item"}
+          >
+            {label ? label : item}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

packages/openneuro-components/src/facets/facet.scss

@@ -235,6 +235,75 @@
     }
   }
 }
+.search-nav .facet-open.nih-facet {
+  margin: 20px 0;
+  border: 0;
+  border-radius: $border-radius-default;
+  padding: 0;
+  .single-select-list {
+    padding: 0;
+    color: var(--current-theme-primary);
+    margin: 0;
+    list-style: none;
+    li {
+      padding: 10px 20px;
+      cursor: pointer;
+      color: rgba(33, 85, 138, 1);
+      display: block;
+      background:rgba(155, 211, 221, 1);
+      border-radius: 4px;
+      &:hover{
+        background-color: lighten(rgba(155, 211, 221, 1), 5%);
+      }
+    }
+
+    .label {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+
+      span {
+        margin-left: 10px;
+        display: inline-block;
+        font-size: 14px;
+      }
+    }
+
+    .level-1 > li {
+      > .label {
+        padding: 10px;
+      }
+    }
+    .level-2 {
+      margin-bottom: 10px;
+      font-size: 14px;
+      > li {
+        display: flex;
+        justify-content: flex-start;
+
+        .label {
+          margin-left: 15px;
+        }
+        &:before {
+          content: '-';
+          margin-left: 12px;
+        }
+      }
+    }
+  }
+  .facet-list ul li {
+    > .label {
+      font-weight: 500;
+    }
+    &.selected-facet > .label {
+      color: var(--current-theme-primary);
+      font-weight: 600;
+      span {
+        color: var(--current-theme-primary);
+      }
+    }
+  }
+}
 
 .facet-search {
   padding-bottom: 30px;

packages/openneuro-components/src/facets/index.ts

@@ -2,4 +2,5 @@ import { FacetSelect } from "./FacetSelect"
 import { FacetRadio } from "./FacetRadio"
 import { FacetRange } from "./FacetRange"
 import { FacetSearch } from "./FacetSearch"
-export { FacetRadio, FacetRange, FacetSearch, FacetSelect }
+import { SingleSelect } from "./SingleSelect"
+export { FacetRadio, FacetRange, FacetSearch, FacetSelect, SingleSelect }