Search updates

packages/openneuro-components/src/accordion/Accordion.stories.tsx

@@ -15,7 +15,7 @@ const singleTabAccordion = (
   <AccordionTab
     accordionStyle="plain"
     name="single"
-    tabId="tab1"
+    id="tab1"
     label="Single Tab"
     children="This is a single accordion"
   />

packages/openneuro-components/src/accordion/AccordionTab.tsx

@@ -6,12 +6,11 @@ import './accordion.scss'
 
 export interface AccordionTabProps {
   children: React.ReactNode
-  tabId: string
+  id: string
   className: string
   label: string
-  plainStyle: boolean
-  startOpen: boolean
-  dropdown: boolean
+  startOpen?: boolean
+  dropdown?: boolean
   accordionStyle: 'plain' | 'file-tree' | 'bids-wrappper'
 }
 
@@ -20,7 +19,7 @@ export interface AccordionTabProps {
  */
 export const AccordionTab: React.FC<AccordionTabProps> = ({
   children,
-  tabId,
+  id,
   label,
   className,
   accordionStyle,
@@ -37,7 +36,7 @@ export const AccordionTab: React.FC<AccordionTabProps> = ({
 
   return (
     <>
-      <span className={`${accordionStyle}` + ' ' + `${className}`} id={tabId}>
+      <span className={`${accordionStyle}` + ' ' + `${className}`} id={id}>
         <div
           className={`accordion-title ${isOpen ? 'open' : ''}`}
           onClick={() => setOpen(!isOpen)}>

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

@@ -16,7 +16,7 @@ export interface FacetRadioProps {
   accordionStyle: string
   startOpen: boolean
   label: string
-  dropdown: boolean
+  dropdown?: boolean
   active: number
   setActive: (index) => void
 }

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

@@ -0,0 +1,60 @@
+import React from 'react'
+import { AccordionTab } from '../accordion/AccordionTab'
+import { AccordionWrap } from '../accordion/AccordionWrap'
+import { TwoHandleRange } from '../range/TwoHandleRange'
+import './facet.scss'
+
+export interface FacetRangeProps {
+  accordionStyle: string
+  startOpen: boolean
+  label: string
+  dropdown?: boolean
+  min: number
+  max: number
+  step: number
+  dots: boolean
+  pushable: boolean
+  defaultValue: [number, number]
+  marks: { number: string }
+  newvalue: [number, number]
+  setNewValue: (newvalue) => void
+}
+
+export const FacetRange = ({
+  startOpen,
+  label,
+  accordionStyle,
+  dropdown,
+  min,
+  max,
+  step,
+  dots,
+  pushable,
+  defaultValue,
+  marks,
+  newvalue,
+  setNewValue,
+}: FacetRangeProps) => {
+  return (
+    <AccordionWrap className="facet-accordion">
+      <AccordionTab
+        accordionStyle={accordionStyle}
+        label={label}
+        startOpen={startOpen}
+        dropdown={dropdown}>
+        <div className="facet-radio">
+          <TwoHandleRange
+            min={min}
+            max={max}
+            step={step}
+            dots={dots}
+            pushable={pushable}
+            defaultValue={defaultValue}
+            newvalue={newvalue}
+            setNewValue={setNewValue}
+          />
+        </div>
+      </AccordionTab>
+    </AccordionWrap>
+  )
+}

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

@@ -9,7 +9,7 @@ export interface FacetSelectProps {
     value: string
     count: number
     children?: null | { label: string; value: string; count: number }[]
-  }
+  }[]
   accordionStyle: string
   startOpen: boolean
   label: string

packages/openneuro-components/src/input/Input.tsx

@@ -19,6 +19,7 @@ export const Input: React.FC<InputProps> = ({
   name,
   labelStyle,
   setValue,
+  value,
 }) => {
   return (
     <>
@@ -27,6 +28,7 @@ export const Input: React.FC<InputProps> = ({
           <input
             type={type}
             name={name}
+            value={value}
             placeholder={placeholder}
             onChange={e => setValue(e.target.value)}
           />
@@ -36,6 +38,7 @@ export const Input: React.FC<InputProps> = ({
         <div className="form-control inline">
           {label ? <label htmlFor={name}>{label}</label> : null}
           <input
+            value={value}
             type={type}
             name={name}
             placeholder={placeholder}
@@ -46,6 +49,7 @@ export const Input: React.FC<InputProps> = ({
         <div className="form-control ">
           {label ? <label htmlFor={name}>{label}</label> : null}
           <input
+            value={value}
             type={type}
             name={name}
             placeholder={placeholder}

packages/openneuro-components/src/input/input.scss

@@ -16,20 +16,29 @@ textarea {
   box-sizing: border-box;
   border-radius: 0;
   border: 0.1rem solid #ddd;
-  padding: 12px;
+  padding: 10px 12px;
   max-width: 100%;
+  line-height: 12px;
   &:focus {
     border-color: rgb(76, 104, 230);
   }
 
   &::placeholder {
-    /* Chrome, Firefox, Opera, Safari 10.1+ */
     color: rgb(160, 160, 160);
-
     opacity: 1; /* Firefox */
   }
 }
 
+input[type='search'] {
+  &::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    background: url('../assets/close-button.png') no-repeat center;
+    background-size: contain;
+    height: 10px;
+    width: 10px;
+  }
+}
+
 select {
   border-radius: 0;
 }
@@ -51,6 +60,10 @@ input[type='submit'] {
 .form-control {
   display: flex;
   flex-direction: column;
+  label {
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
 }
 
 .form-control.inline {
@@ -121,4 +134,3 @@ input[type='submit'] {
     }
   }
 }
-

packages/openneuro-components/src/mock-content/facet-content.jsx

@@ -32,6 +32,12 @@ export const modalities = [
     label: 'EEG',
     value: 'EEG',
     count: 303,
+    children: null,
+  },
+  {
+    label: 'iEEG',
+    value: 'iEEG',
+    count: 303,
     children: [
       {
         label: 'ECoG',
@@ -70,22 +76,134 @@ export const modalities = [
   },
 ]
 
-export const showDatasetsRadio = [
+export const show_available = [
+  { label: 'All', value: 'all' },
+  { label: 'Following', value: 'following' },
+  { label: 'My Uploads', value: 'my_uploads' },
+  { label: 'My Bookmarks', value: 'bookmarked' },
+]
+
+export const showMyUploads_available = [
+  { label: 'Public', value: 'public' },
+  { label: 'Shared with Me', value: 'shared_with_me' },
+  { label: 'Invalid', value: 'invalid' },
+]
+
+export const diagnosis = [
+  {
+    label: "Alzheimer's",
+    value: 'alzheimers',
+    children: null,
+  },
+  {
+    label: 'Another',
+    value: 'Another',
+    children: null,
+  },
+  {
+    label: 'Other',
+    value: 'Other',
+    children: null,
+  },
+]
+
+export const task = [
+  {
+    label: 'Rest',
+    value: 'rest',
+    children: null,
+  },
+  {
+    label: 'Another',
+    value: 'Another',
+    children: null,
+  },
+  {
+    label: 'Other',
+    value: 'Other',
+    children: null,
+  },
+]
+
+export const author_pi = [
+  {
+    label: 'Author 1',
+    value: 'author-1',
+    children: null,
+  },
+  {
+    label: 'Author 2',
+    value: 'author-2',
+    children: null,
+  },
+  {
+    label: 'Author 3',
+    value: 'author-3',
+    children: null,
+  },
+]
+
+export const gender = [
+  { label: 'All', value: 'all' },
+  { label: 'Male', value: 'male' },
+  { label: 'Female', value: 'female' },
+]
+
+export const species = [
+  {
+    label: 'Human',
+    value: 'human',
+    children: null,
+  },
+  {
+    label: 'Pig',
+    value: 'pig',
+    children: null,
+  },
+  {
+    label: 'Rat',
+    value: 'rat',
+    children: null,
+  },
+  {
+    label: 'Other',
+    value: 'other',
+    children: null,
+  },
+]
+
+export const section = [
   {
-    label: 'All',
-    value: 'All',
+    label: 'Cross',
+    value: 'cross',
+    children: null,
   },
+  {
+    label: 'Longitudinal',
+    value: 'longitudinal',
+    children: null,
+  },
+  {
+    label: 'Other',
+    value: 'other',
+    children: null,
+  },
+]
 
+export const domain = [
   {
-    label: 'Following',
-    value: 'following',
+    label: 'Domain 1',
+    value: '1',
+    children: null,
   },
   {
-    label: 'My Datasets',
-    value: 'datasets',
+    label: 'Domain 2',
+    value: '2',
+    children: null,
   },
   {
-    label: 'My Bookmarks',
-    value: 'bookmarks',
+    label: 'Ontology',
+    value: 'ontology',
+    children: null,
   },
 ]

packages/openneuro-components/src/modal/UserModalInner.tsx

@@ -38,8 +38,9 @@ export const UserModalInner: React.FC = ({}) => {
             />
             <AccordionWrap>
               <AccordionTab
+                name="single"
                 tabId="orcid-info-accordion"
-                tabLable="What is this?"
+                label="What is this?"
                 children={
                   <>
                     ORCID users are identified and connected to their

packages/openneuro-components/src/page/Page.stories.tsx

@@ -3,7 +3,7 @@ import { Story, Meta } from '@storybook/react'
 
 import { Page, PageProps } from './Page'
 import { FrontPage } from '../front-page/FrontPage'
-import { SearchPageContainer } from '../search-page/SearchPageContainer'
+import { SearchPageContainerExample } from '../search-page/SearchPageContainerExample'
 import * as HeaderStories from '../header/Header.stories'
 
 import { MRIPortalContent } from '../mock-content/portal-content'
@@ -25,14 +25,16 @@ FrontPageExample.args = {
 
 export const SearchPageExample = Template.bind({})
 SearchPageExample.args = {
-  children: <SearchPageContainer searchResults={mri.data.datasets.edges} />,
+  children: (
+    <SearchPageContainerExample searchResults={mri.data.datasets.edges} />
+  ),
   headerArgs: HeaderStories.LoggedOut.args,
   className: 'search-page search-page-mri',
 }
 export const MRIPortalPageExample = Template.bind({})
 MRIPortalPageExample.args = {
   children: (
-    <SearchPageContainer
+    <SearchPageContainerExample
       searchResults={mri.data.datasets.edges}
       portalContent={MRIPortalContent}
     />