diff --git a/packages/openneuro-app/src/scripts/search/inputs/nih-select.tsx b/packages/openneuro-app/src/scripts/search/inputs/nih-select.tsx index 42306fe7a5..04bcea3e3d 100644 --- a/packages/openneuro-app/src/scripts/search/inputs/nih-select.tsx +++ b/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 = ({ } return ( <> - = ({ portalContent }) => { {!portalContent ? : } - + diff --git a/packages/openneuro-components/src/facets/SingleSelect.tsx b/packages/openneuro-components/src/facets/SingleSelect.tsx new file mode 100644 index 0000000000..c39bd51eaa --- /dev/null +++ b/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 ( +
+
    + {items.map((item, index) => ( +
  • handleSelect(e, item)} + className={selected === item ? "selected-item" : "item"} + > + {label ? label : item} +
  • + ))} +
+
+ ) +} diff --git a/packages/openneuro-components/src/facets/facet.scss b/packages/openneuro-components/src/facets/facet.scss index bcc9d01a41..38f1ec9d45 100644 --- a/packages/openneuro-components/src/facets/facet.scss +++ b/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; diff --git a/packages/openneuro-components/src/facets/index.ts b/packages/openneuro-components/src/facets/index.ts index 4efb1df04e..c514a05644 100644 --- a/packages/openneuro-components/src/facets/index.ts +++ b/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 }