Search updates

packages/openneuro-components/package.json

@@ -8,7 +8,9 @@
   "license": "MIT",
   "dependencies": {
     "@mdx-js/react": "^1.6.22",
+    "bytes": "^3.1.0",
     "date-fns": "^2.21.1",
+    "pluralize": "^8.0.0",
     "rc-slider": "^9.7.2",
     "react": "^17.0.1",
     "react-router-dom": "^5.2.0",
@@ -27,6 +29,7 @@
     "@storybook/theming": "^6.2.8",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
+    "@types/bytes": "^3",
     "@types/mdx-js__react": "^1",
     "@types/react-router-dom": "^5",
     "@types/react-slick": "^0",

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

@@ -11,6 +11,7 @@ export interface AccordionTabProps {
   label: string
   plainStyle: boolean
   startOpen: boolean
+  dropdown: boolean
   accordionStyle: 'plain' | 'file-tree' | 'bids-wrappper'
 }
 
@@ -24,6 +25,7 @@ export const AccordionTab: React.FC<AccordionTabProps> = ({
   className,
   accordionStyle,
   startOpen,
+  dropdown,
 }) => {
   const [isOpen, setOpen] = React.useState(startOpen)
   const fileTreeIcon = accordionStyle == 'file-tree' && (
@@ -41,7 +43,10 @@ export const AccordionTab: React.FC<AccordionTabProps> = ({
           onClick={() => setOpen(!isOpen)}>
           {fileTreeIcon} {label}
         </div>
-        <div className={`accordion-item ${!isOpen ? 'collapsed' : ''}`}>
+        <div
+          className={`accordion-item ${!isOpen ? ' collapsed' : ''} ${
+            dropdown ? ' dropdown-style' : ''
+          }`}>
           <div className="accordion-content">{children}</div>
         </div>
       </span>

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

@@ -1,6 +1,8 @@
 /* Accordion styles */
 
 .on-accordion-wrapper {
+  background-color: #fff;
+  position: relative;
   .accordion-item {
     overflow: hidden;
     transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);
@@ -12,6 +14,15 @@
     max-height: 0;
     transition: max-height 0.35s cubic-bezier(0, 1, 0, 1);
   }
+  .accordion-item.dropdown-style {
+    position: absolute;
+    background-color: #fff;
+    left: 0;
+    right: 0;
+    .accordion-content {
+      padding: 10px;
+    }
+  }
 
   .accordion-title {
     cursor: pointer;

packages/openneuro-components/src/count-toggle/CountToggle.stories.tsx

@@ -13,22 +13,23 @@ const CountToggleTemplate: Story<CountToggleProps> = ({
   disabled,
   tooltip,
 }) => {
-  const [displayOptions, setDisplayOptions] = React.useState(false)
+  const [clicked, showClicked] = React.useState(false)
   const [count, setCount] = React.useState(1)
 
-  const onClick = () => {
+  const toggleClick = () => {
     setCount(count === 1 ? 2 : 1)
+    showClicked(!clicked)
   }
 
   return (
     <CountToggle
       label={label}
       icon={icon}
       disabled={disabled}
-      onClick={onClick}
+      toggleClick={toggleClick}
       tooltip={tooltip}
-      displayOptions={displayOptions}
-      setDisplayOptions={setDisplayOptions}
+      clicked={clicked}
+      showClicked={showClicked}
       count={count}
     />
   )

packages/openneuro-components/src/count-toggle/CountToggle.tsx

@@ -10,62 +10,55 @@ export interface CountToggleProps {
   icon?: string
   disabled?: boolean
   tooltip?: string
-  onClick?: () => void
+  toggleClick?: () => void
   lock?: boolean
-  displayOptions: boolean
-  setDisplayOptions: (boolean) => void
+  clicked: boolean
+  showClicked: (boolean) => void
   count: number
 }
 export const CountToggle = ({
   label,
   icon,
   disabled,
   tooltip,
-  onClick,
-  displayOptions,
-  setDisplayOptions,
+  toggleClick,
+  clicked,
   count,
 }: CountToggleProps) => {
-  const toggleClick = () => {
-    onClick()
-    setDisplayOptions(!displayOptions)
-  }
   const [isOpen, setIsOpen] = React.useState(false)
   const toggleLogin = () => setIsOpen(!isOpen)
   const toggleButton = (
     <span className="toggle-counter">
       <Button
-        className={displayOptions ? 'toggle-btn active' : 'toggle-btn'}
+        className={clicked ? 'toggle-btn active' : 'toggle-btn'}
         iconSize="12px"
         icon={'fa ' + icon}
-        onClick={() => toggleClick()}>
+        onClick={toggleClick}>
         {label} <span>{count}</span>
       </Button>
     </span>
   )
   const disabledToggleButton = (
     <span className="toggle-counter disabled">
       <Button
-        className={displayOptions ? 'toggle-btn active' : 'toggle-btn'}
+        className={clicked ? 'toggle-btn active' : 'toggle-btn'}
         iconSize="12px"
         icon={'fa ' + icon}
-        onClick={() => toggleLogin()}>
+        onClick={toggleLogin}>
         {label} <span>{count}</span>
       </Button>
     </span>
   )
-
+  const button = disabled ? disabledToggleButton : toggleButton
   return (
     <>
       <div className="toggle-counter-wrap">
         {tooltip ? (
           <Tooltip flow="up" tooltip={tooltip}>
-            {disabled ? disabledToggleButton : toggleButton}
+            {button}
           </Tooltip>
-        ) : disabled ? (
-          disabledToggleButton
         ) : (
-          toggleButton
+          button
         )}
       </div>
       <Modal isOpen={isOpen} toggle={toggleLogin} closeText="Close">