@openneuro/app 4.33.4 → 4.34.0

package/src/scripts/components/radio/radio.scss

@@ -0,0 +1,335 @@
+@import '../scss/variables';
+.custom-radio {
+  margin: 10px 0 20px;
+  [type='radio']:checked,
+  [type='radio']:not(:checked) {
+    position: absolute;
+    left: -9999px;
+  }
+  [type='radio']:checked + label,
+  [type='radio']:not(:checked) + label {
+    font-size: 14px;
+    position: relative;
+    padding-left: 25px;
+    cursor: pointer;
+    line-height: 20px;
+    display: inline-block;
+    color: #666;
+  }
+  [type='radio']:checked + label:before,
+  [type='radio']:not(:checked) + label:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 18px;
+    height: 18px;
+    border: 1px solid $newspaper;
+    border-radius: 100%;
+    background: #fff;
+  }
+  [type='radio']:checked + label:after,
+  [type='radio']:not(:checked) + label:after {
+    content: '';
+    width: 12px;
+    height: 12px;
+    background: var(--current-theme-primary);
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    border-radius: 100%;
+    -webkit-transition: all 0.2s ease;
+    transition: all 0.2s ease;
+  }
+  [type='radio']:not(:checked) + label:after {
+    opacity: 0;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+  [type='radio']:checked + label:after {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+.custom-checkbox {
+  margin: 10px 0 20px;
+  [type='checkbox']:checked,
+  [type='checkbox']:not(:checked) {
+    position: absolute;
+    left: -9999px;
+  }
+  [type='checkbox']:checked + label,
+  [type='checkbox']:not(:checked) + label {
+    font-size: 14px;
+    position: relative;
+    padding-left: 25px;
+    cursor: pointer;
+    line-height: 20px;
+    display: inline-block;
+    color: #666;
+  }
+  [type='checkbox']:checked + label:before,
+  [type='checkbox']:not(:checked) + label:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 18px;
+    height: 18px;
+    border: 1px solid $newspaper;
+    border-radius: 0;
+    background: #fff;
+  }
+  [type='checkbox']:checked + label:after,
+  [type='checkbox']:not(:checked) + label:after {
+    content: '';
+    width: 12px;
+    height: 12px;
+    background: var(--current-theme-primary);
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    border-radius: 0;
+    -webkit-transition: all 0.2s ease;
+    transition: all 0.2s ease;
+  }
+  [type='checkbox']:not(:checked) + label:after {
+    opacity: 0;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+  [type='checkbox']:checked + label:after {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+.on-radio-wrapper {
+  &.row {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    .custom-radio {
+      margin-right: 20px;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+  &.column {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    .custom-radio {
+      margin-bottom: 20px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.on-radio-wrapper.chiclet {
+  display: flex;
+  justify-content: space-between;
+  .custom-radio {
+    margin: 0 0 10px;
+
+    > label {
+      margin: 0 10px 0 0;
+    }
+    &:last-child {
+      > label {
+        margin-right: 0;
+      }
+    }
+    [type='radio']:checked + label:before,
+    [type='radio']:not(:checked) + label:before,
+    [type='radio']:not(:checked) + label:after,
+    [type='radio']:checked + label:after {
+      content: '';
+      width: auto;
+      height: auto;
+      background: none;
+      position: relative;
+      top: 0;
+      left: 0;
+      border-radius: 0;
+      transition: none;
+      font-size: 20px;
+
+      line-height: 0;
+      border: 0;
+    }
+
+    [type='radio']:checked + label:after {
+      content: '\d7';
+      margin: 0 0 0 10px;
+    }
+
+    [type='radio']:not(:checked) + label {
+      border-radius: 4px;
+      border: 1px solid $chiclet-color;
+      color: $chiclet-color;
+      transition: background-color 0.3s;
+      cursor: pointer;
+      font-size: 13px;
+      line-height: 1.7em;
+      position: relative;
+      padding: 6px 10px;
+      display: flex;
+      align-items: center;
+      &:nth-child(1) {
+        margin: 0 10px 0 0;
+      }
+    }
+    [type='radio']:checked + label {
+      color: #fff;
+      border-radius: 4px;
+      background-color: $chiclet-color;
+      transition: background-color 0.3s;
+      cursor: pointer;
+      font-size: 13px;
+      line-height: 1.7em;
+      position: relative;
+      padding: 6px 10px;
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+.facet-radio.btn-group-wrapper {
+  position: relative;
+  margin: 0 0 10px;
+  background-color: #f6f6f6;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  @media (max-width: 450px) {
+    .on-radio-wrapper.btn-group {
+      flex-direction: column;
+      button,
+      .custom-radio {
+        height: 50px;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 100%;
+      }
+    }
+  }
+
+  &:after {
+    content: '';
+    min-width: 25%;
+    height: 100%;
+    background-color: var(--current-theme-primary);
+    position: absolute;
+    display: block;
+    top: 0;
+    transition: margin 0.3s;
+    border-radius: 4px 0 0 4px;
+    @media (max-width: 450px) {
+      min-width: 100%;
+      height: 50px;
+      border-radius: 0;
+    }
+  }
+  &.Following {
+    &:after {
+      margin-left: 25%;
+      border-radius: 0;
+      @media (max-width: 450px) {
+        margin-left: 0;
+        margin-top: 50px;
+      }
+    }
+  }
+  &.MyDatasets {
+    &:after {
+      margin-left: 50%;
+      border-radius: 0;
+      @media (max-width: 450px) {
+        margin-left: 0;
+        margin-top: 100px;
+      }
+    }
+  }
+  &.MyBookmarks {
+    &:after {
+      margin-left: 75%;
+      border-radius: 0 4px 4px 0;
+      @media (max-width: 450px) {
+        margin-left: 0;
+        border-radius: 0;
+        margin-top: 150px;
+      }
+    }
+  }
+}
+.on-radio-wrapper.btn-group {
+  display: flex;
+  justify-content: space-between;
+  z-index: 1;
+  position: relative;
+  .custom-radio {
+    min-width: 25%;
+    margin: 0;
+
+    > label {
+      margin: 0;
+    }
+
+    [type='radio']:checked + label:before,
+    [type='radio']:not(:checked) + label:before,
+    [type='radio']:not(:checked) + label:after,
+    [type='radio']:checked + label:after {
+      display: none;
+    }
+
+    [type='radio']:checked + label,
+    [type='radio']:not(:checked) + label {
+      border-radius: 0;
+      border: none;
+      color: var(--current-theme-primary);
+      cursor: pointer;
+      font-size: 13px;
+      line-height: 1.7em;
+      position: relative;
+      padding: 6px 2px;
+      display: block;
+      text-align: center;
+      transition: color 0s;
+      transition-delay: 0s;
+      border-right: 1px solid var(--current-theme-primary);
+      @media (max-width: 450px) {
+        border-right: 0;
+        border-bottom: 1px solid var(--current-theme-primary);
+        height: 50px;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 100%;
+      }
+    }
+    [type='radio']:not(:checked) + label:hover {
+      background-color: var(--current-theme-primary-light);
+    }
+    [type='radio']:checked + label {
+      color: #fff;
+      transition-delay: 0.15s;
+    }
+    &:last-child {
+      [type='radio']:checked + label,
+      [type='radio']:not(:checked) + label {
+        border: 0;
+      }
+    }
+  }
+}

package/src/scripts/components/range/TwoHandleRange.scss

@@ -0,0 +1,108 @@
+@import '../scss/variables';
+$rangeWidth: 90%;
+
+.formRange-inner {
+  max-width: 80%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  min-width: $rangeWidth;
+  position: relative;
+  padding: 0 0 30px;
+}
+
+.slider {
+  position: relative;
+  width: $rangeWidth;
+}
+
+.slider__track,
+.slider__range,
+.slider__left-value,
+.slider__right-value {
+  position: absolute;
+}
+
+.slider__track,
+.slider__range {
+  border-radius: 3px;
+  height: 5px;
+}
+
+.slider__track {
+  background-color: #ced4da;
+  width: 100%;
+  z-index: 1;
+}
+
+.slider__range {
+  background-color: var(--current-theme-primary);
+  z-index: 2;
+}
+
+.slider__left-value,
+.slider__right-value {
+  color: #333;
+  font-size: 12px;
+  margin-top: 20px;
+}
+
+.slider__left-value {
+  left: 6px;
+}
+
+.slider__right-value {
+  right: -4px;
+}
+
+/* Removing the default appearance */
+.thumb,
+.thumb::-webkit-slider-thumb {
+  -webkit-appearance: none;
+}
+
+.thumb {
+  pointer-events: none;
+  position: absolute;
+  height: 0;
+  width: $rangeWidth;
+  outline: none;
+}
+
+.thumb--left {
+  z-index: 3;
+}
+
+.thumb--right {
+  z-index: 4;
+}
+
+/* For Chrome browsers */
+.thumb::-webkit-slider-thumb {
+  background-color: #fff;
+  border: 1px solid var(--current-theme-primary-light);
+  border-radius: 50%;
+  box-shadow: 0 0 5px -1px var(--current-theme-primary);
+  cursor: pointer;
+  height: 18px;
+  width: 18px;
+  margin-top: 4px;
+  pointer-events: all;
+  position: relative;
+}
+
+/* For Firefox browsers */
+.thumb::-moz-range-thumb {
+  background-color: #fff;
+  border: 1px solid var(--current-theme-primary-light);
+  border-radius: 50%;
+  box-shadow: 0 0 5px -1px var(--current-theme-primary);
+  cursor: pointer;
+  height: 18px;
+  width: 18px;
+  margin-top: 4px;
+  pointer-events: all;
+  position: relative;
+}

package/src/scripts/components/range/TwoHandleRange.tsx

@@ -0,0 +1,128 @@
+import React, { useCallback, useEffect, useRef } from "react"
+import "./TwoHandleRange.scss"
+
+export function stepping(value, step) {
+  return Math.round(value / step) * step
+}
+
+export interface TwoHandleRangeProps {
+  // Minimum value for range
+  min: number
+  // Maximum value for range
+  max: number
+  // Integer step for range values
+  step: number
+  // [min, max] starting values
+  value: [number, number]
+  // Change event handler for either value changing, returns [minVal, maxVal]
+  onChange: (value: [number, number]) => void
+  // At max value interpret this as any value greater than min
+  uncappedMax?: boolean
+}
+
+export const TwoHandleRange: React.FC<TwoHandleRangeProps> = ({
+  min,
+  max,
+  step,
+  value,
+  onChange,
+  uncappedMax = false,
+}) => {
+  const range = useRef<HTMLDivElement>(null)
+
+  // Convert to percentage
+  const getPercent = useCallback(
+    (value: number) => Math.round(((value - min) / (max - min)) * 100),
+    [min, max],
+  )
+
+  // Set width of the range to decrease from the left side
+  useEffect(() => {
+    const minPercent = getPercent(value[0])
+    const maxPercent = getPercent(value[1])
+
+    if (range.current) {
+      range.current.style.left = `${minPercent}%`
+      range.current.style.width = `${maxPercent - minPercent}%`
+    }
+  }, [value[0], getPercent])
+
+  // Set width of the range to decrease from the right side
+  useEffect(() => {
+    const minPercent = getPercent(value[0])
+    const maxPercent = getPercent(value[1])
+
+    if (range.current) {
+      range.current.style.width = `${maxPercent - minPercent}%`
+    }
+  }, [value[1], getPercent])
+
+  const minChangeHandler = (
+    event:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.KeyboardEvent<HTMLInputElement>,
+  ) => {
+    const changeEvent = event as React.ChangeEvent<HTMLInputElement>
+    const discreteValue = stepping(
+      Math.min(Number(changeEvent.target.value), value[1] - 1),
+      step,
+    )
+    onChange([discreteValue, value[1]])
+  }
+  const maxChangeHandler = (
+    event:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.KeyboardEvent<HTMLInputElement>,
+  ) => {
+    const changeEvent = event as React.ChangeEvent<HTMLInputElement>
+    const discreteValue = stepping(
+      Math.max(Number(changeEvent.target.value), value[0] + 1),
+      step,
+    )
+    onChange([value[0], discreteValue])
+  }
+
+  const leftValue = value[0]
+  const rightValue = uncappedMax
+    ? (value[1] === max && `${value[1]}+`) || value[1]
+    : value[1]
+
+  return (
+    <div className="formRange-inner">
+      <input
+        type="range"
+        min={min}
+        max={max}
+        value={value[0]}
+        step={step}
+        onChange={minChangeHandler}
+        onKeyDown={minChangeHandler}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={value[0]}
+        className="thumb thumb--left"
+        style={{ zIndex: value[0] > max - 100 && 5 }}
+      />
+      <input
+        type="range"
+        min={min}
+        max={max}
+        value={value[1]}
+        step={step}
+        onChange={maxChangeHandler}
+        onKeyDown={maxChangeHandler}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={value[1]}
+        className="thumb thumb--right"
+      />
+
+      <div className="slider">
+        <div className="slider__track"></div>
+        <div ref={range} className="slider__range"></div>
+        <div className="slider__left-value">{leftValue}</div>
+        <div className="slider__right-value">{rightValue}</div>
+      </div>
+    </div>
+  )
+}

package/src/scripts/components/range/__tests__/TwoHandleRange.spec.tsx

@@ -0,0 +1,34 @@
+import { vi } from "vitest"
+import React from "react"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { TwoHandleRange } from "../TwoHandleRange"
+
+import { stepping } from "../TwoHandleRange"
+
+describe("TwoHandleRange component", () => {
+  describe("stepping()", () => {
+    it("rounds to ten based steps", () => {
+      expect(stepping(4, 10)).toBe(0)
+      expect(stepping(15, 10)).toBe(20)
+      expect(stepping(99, 10)).toBe(100)
+    })
+  })
+  it("fires event when changed", () => {
+    const onChange = vi.fn()
+    render(
+      <TwoHandleRange
+        min={0}
+        max={100}
+        step={10}
+        value={[0, 20]}
+        onChange={onChange}
+      />,
+    )
+    const ranges = screen.queryAllByRole("slider")
+    fireEvent.focus(ranges[0])
+    fireEvent.keyDown(ranges[0], { key: "ArrowRight", code: "ArrowRight" })
+    fireEvent.focus(ranges[1])
+    fireEvent.keyDown(ranges[1], { key: "ArrowRight", code: "ArrowRight" })
+    expect(onChange).toHaveBeenCalledTimes(2)
+  })
+})

package/src/scripts/components/read-more/ReadMore.tsx

@@ -0,0 +1,50 @@
+import React, { useEffect, useRef, useState } from "react"
+import "./read-more.scss"
+
+export interface ReadMoreProps {
+  children: React.ReactNode
+  id: string
+  collapseLabel: string
+  expandLabel: string
+}
+
+export const ReadMore = ({
+  children,
+  id,
+  expandLabel,
+  collapseLabel,
+}: ReadMoreProps) => {
+  const readmoreRef = useRef<HTMLDivElement>()
+  const [dimensions, setDimensions] = useState({ height: 0 })
+  useEffect(() => {
+    if (readmoreRef.current) {
+      setDimensions({
+        height: readmoreRef.current.offsetHeight,
+      })
+    }
+  }, [])
+
+  return (
+    <div ref={readmoreRef}>
+      {dimensions.height > 400
+        ? (
+          <article className="has-read-more file-tree">
+            <input type="checkbox" className="show-more" id={id} />
+
+            <section>
+              {children}
+              <label htmlFor={id} className="expand-collapse">
+                <span>{expandLabel}</span>
+                <span>{collapseLabel}</span>
+              </label>
+            </section>
+          </article>
+        )
+        : (
+          <article>
+            <section>{children}</section>
+          </article>
+        )}
+    </div>
+  )
+}

package/src/scripts/components/read-more/__tests__/ReadMore.spec.tsx

@@ -0,0 +1,14 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { ReadMore } from "../ReadMore"
+
+describe("ReadMore component", () => {
+  it("renders children", async () => {
+    render(
+      <ReadMore id="readmoretest" expandLabel="expand" collapseLabel="hide">
+        Hidden children
+      </ReadMore>,
+    )
+    expect(await screen.getByText(/Hidden children/)).toBeInTheDocument()
+  })
+})