@openneuro/app 4.33.4 → 4.34.0-alpha.0

package/src/scripts/components/input/input.scss

@@ -0,0 +1,147 @@
+@import '../scss/variables';
+
+form,
+fieldset {
+  margin: 0;
+  padding: 0;
+  border-style: none;
+}
+input:not([type='range'], [type='checkbox'], [type='radio']),
+input[type='text'],
+input[type='tel'],
+input[type='email'],
+input[type='search'],
+input[type='password'],
+textarea {
+  display: inline-block;
+  appearance: none;
+  box-sizing: border-box;
+  border-radius: 0;
+  border: 1px solid $newspaper;
+  padding: 10px 12px;
+  max-width: 100%;
+  line-height: 12px;
+  &:focus {
+    border-color: rgb(76, 104, 230);
+  }
+
+  &::placeholder {
+    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: 4px;
+  -webkit-appearance: none;
+  border: 1px solid $newspaper;
+}
+
+textarea {
+  resize: vertical;
+  vertical-align: top;
+}
+
+input[type='button'],
+input[type='reset'],
+input[type='file'],
+input[type='submit'] {
+  appearance: none;
+  border-radius: 0;
+  cursor: pointer;
+}
+
+.form-control {
+  display: flex;
+  flex-direction: column;
+  label {
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+}
+
+.form-control.inline {
+  display: flex;
+  flex-direction: row;
+  label {
+    padding: 12px 10px 0 0;
+    min-width: 100px;
+    text-align: right;
+  }
+}
+
+.float-form-style.form-control {
+  display: flex;
+  flex-flow: column-reverse;
+  margin-bottom: 1em;
+
+  label,
+  input,
+  textarea {
+    transition: all 0.2s;
+    touch-action: manipulation;
+  }
+
+  input,
+  textarea {
+    border-radius: 0;
+    cursor: text;
+    z-index: 2;
+    background: none;
+  }
+
+  label {
+    z-index: 1;
+  }
+
+  textarea:placeholder-shown,
+  input:placeholder-shown {
+    + label {
+      cursor: text;
+      max-width: 66.66%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      transform-origin: left bottom;
+      transform: translate(12px, 36px) scale(1.5);
+      font-size: 13px;
+    }
+  }
+  textarea,
+  input {
+    &::-moz-placeholder {
+      opacity: 0;
+      transition: inherit;
+    }
+    &::-webkit-input-placeholder {
+      opacity: 0;
+      transition: inherit;
+    }
+    &:focus::-moz-placeholder {
+      opacity: 1;
+    }
+    &:focus::-webkit-input-placeholder {
+      opacity: 1;
+    }
+  }
+  textarea:not(:placeholder-shown),
+  textarea:focus,
+  input:not(:placeholder-shown),
+  input:focus {
+    + label {
+      transform: translate(0, 0) scale(1);
+      font-size: 13px;
+      cursor: pointer;
+    }
+  }
+}

package/src/scripts/components/input/term-search.scss

@@ -0,0 +1,68 @@
+@import "../scss/variables";
+
+.term-input {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+
+  .form-control {
+    flex-grow: 1;
+    margin-right: 10px;
+  }
+  @media (max-width: 450px) {
+    flex-wrap: wrap;
+    .on-button {
+      width: 100%;
+    }
+    .form-control {
+      margin: 0 0 10px;
+    }
+  }
+}
+
+.term-block {
+  margin: 0 0 30px;
+  position: relative;
+  .active-search-terms {
+    padding: 0;
+    margin: 0 20px 0 0;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    li {
+      margin-right: 10px;
+      margin-bottom: 15px;
+      font-size: 13px;
+      line-height: 1.7em;
+      &:last-child {
+        margin-right: 0;
+      }
+      strong {
+        margin-right: 10px;
+        text-transform: uppercase;
+        color: #777;
+      }
+      > span {
+        word-break: break-word;
+        display: flex;
+        padding: 6px 10px;
+        color: #fff;
+        border-radius: $border-radius-default;
+        background-color: $chiclet-color;
+        transition: background-color 0.3s;
+        justify-content: center;
+        cursor: pointer;
+        &:hover {
+          background-color: darken($chiclet-color, 10%);
+        }
+        span {
+          color: #fff;
+          font-size: 22px;
+          margin-left: 8px;
+          margin-top: -1px;
+        }
+      }
+    }
+  }
+}

package/src/scripts/components/json-tree/ExpandableProperty.tsx

@@ -0,0 +1,35 @@
+import * as React from "react"
+import "./json-tree.scss"
+
+interface Props {
+  title: string
+  expanded?: boolean
+}
+
+interface State {
+  isOpen: boolean
+}
+
+export default class ExpandableProperty extends React.Component<Props, State> {
+  state = {
+    isOpen: !!this.props.expanded,
+  }
+
+  render() {
+    return (
+      <>
+        <div
+          className="expand-prop-name"
+          onClick={() => this.setState({ isOpen: !this.state.isOpen })}
+        >
+          {this.props.title}
+          {this.state.isOpen ? "-" : "+"}
+        </div>
+        {this.state.isOpen ? this.props.children : null}
+        {React.Children.count(this.props.children) === 0 && this.state.isOpen
+          ? "The list is empty!"
+          : null}
+      </>
+    )
+  }
+}

package/src/scripts/components/json-tree/RecursiveProperty.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import ExpandableProperty from "./ExpandableProperty"
+import "./json-tree.scss"
+
+const camelCaseToNormal = (str: string) =>
+  str.replace(/([A-Z])/g, " $1").replace(/^./, (str2) => str2.toUpperCase())
+
+interface IterableObject {
+  [s: number]: number | string | boolean | IterableObject
+}
+
+interface Props {
+  property: number | string | boolean | IterableObject
+  propertyName: string
+  emptyPropertyLabel?: string
+  rootProperty?: boolean
+  propertyNameProcessor?: (name: string) => string
+}
+
+export const RecursiveProperty: React.FC<Props> = (props) => {
+  return (
+    <div className="json-container">
+      {props.property
+        ? (
+          typeof props.property === "number" ||
+            typeof props.property === "string" ||
+            typeof props.property === "boolean"
+            ? (
+              <>
+                <span className="prop-name">
+                  {props.propertyNameProcessor!(props.propertyName)}:{" "}
+                </span>
+                {props.property.toString()}
+              </>
+            )
+            : (
+              <ExpandableProperty
+                title={props.propertyNameProcessor!(props.propertyName)}
+                expanded={!!props.rootProperty}
+              >
+                {Object.values(props.property).map(
+                  /* eslint-disable-next-line */
+                  (property, index, { length }) => (
+                    <RecursiveProperty
+                      key={index}
+                      property={property}
+                      propertyName={Object.getOwnPropertyNames(
+                        props.property,
+                      )[index]}
+                      propertyNameProcessor={props.propertyNameProcessor}
+                    />
+                  ),
+                )}
+              </ExpandableProperty>
+            )
+        )
+        : (
+          props.emptyPropertyLabel
+        )}
+    </div>
+  )
+}
+
+RecursiveProperty.defaultProps = {
+  emptyPropertyLabel: "Property is empty",
+  propertyNameProcessor: camelCaseToNormal,
+}

package/src/scripts/components/json-tree/json-tree.scss

@@ -0,0 +1,19 @@
+.json-container {
+  padding-top: 10px;
+  padding-left: 3px;
+  margin-left: 10px;
+  color: #666;
+  font-size: 16px;
+  .prop-name {
+    color: black;
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  .expand-prop-name {
+    color: #008080;
+    font-size: 14px;
+    font-weight: bold;
+    cursor: pointer;
+  }
+}

package/src/scripts/components/loading/Loading.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+import "./loading.scss"
+
+export const Loading: React.FC = () => (
+  <div
+    className="cxq-spinner cxq-spinner--waveStretchDelay"
+    role="alert"
+    aria-busy="true"
+  >
+    <div className="cxq-spinner-hexagon "></div>
+    <div className="rects">
+      <div className="rect rect1"></div>
+      <div className="rect rect2"></div>
+      <div className="rect rect3"></div>
+      <div className="rect rect4"></div>
+      <div className="rect rect5"></div>
+    </div>
+  </div>
+)

package/src/scripts/components/loading/__tests__/Loading.spec.tsx

@@ -0,0 +1,12 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { Loading } from "../Loading"
+
+describe("Loading component", () => {
+  it("loading animation is labeled alert and aria-busy", async () => {
+    render(<Loading />)
+    const loader = await screen.getByRole("alert")
+    expect(loader).toBeInTheDocument()
+    expect(loader.hasAttribute("aria-busy")).toBe(true)
+  })
+})

package/src/scripts/components/loading/loading.scss

@@ -0,0 +1,141 @@
+@use 'sass:math';
+
+$spinner-base-value: 20px;
+$spinner-width: $spinner-base-value * 2 * 1.732;
+$spinner-height: $spinner-base-value * 2;
+$spinner-hexagon-width: $spinner-width;
+$spinner-hexagon-height: $spinner-height * 2;
+$spinner-hexagon-bg-color: var(--current-theme-primary);
+
+.cxq-spinner {
+  position: relative;
+  width: $spinner-hexagon-width;
+  height: $spinner-hexagon-height;
+  margin: 0 auto;
+}
+.cxq-spinner-hexagon {
+  position: absolute;
+  width: $spinner-width;
+  height: $spinner-height;
+  border-radius: 0;
+  background: var(--current-theme-primary-light);
+  opacity: 1;
+  top: $spinner-base-value;
+}
+.cxq-spinner-hexagon:before,
+.cxq-spinner-hexagon:after {
+  position: absolute;
+  width: inherit;
+  height: inherit;
+  border-radius: inherit;
+  background: inherit;
+  content: '';
+}
+.cxq-spinner-hexagon:before {
+  transform: rotate(60deg);
+}
+.cxq-spinner-hexagon:after {
+  transform: rotate(-60deg);
+}
+
+// rotating plane
+.cxq-spinner--rotatePlane .cxq-spinner-hexagon {
+  animation: rotatePlane 2s infinite ease-in-out;
+}
+
+// double bounce
+.cxq-spinner--doubleBounce .cxq-spinner-hexagon {
+  animation: doubleBounce 2s infinite ease-in-out;
+}
+.cxq-spinner--doubleBounce .cxq-spinner-hexagon:nth-child(2) {
+  animation-delay: -1s;
+}
+
+// wave stretch
+.cxq-spinner--waveStretchDelay .rects {
+  width: $spinner-hexagon-width;
+  height: math.div($spinner-hexagon-height, 3);
+  text-align: center;
+  position: relative;
+  top: $spinner-hexagon-height * math.div(1, 3);
+}
+.cxq-spinner--waveStretchDelay .rect {
+  position: relative;
+  height: 100%;
+  width: math.div($spinner-base-value, 10);
+  display: inline-block;
+  background-color: $spinner-hexagon-bg-color;
+  opacity: 1;
+  margin: 0 2px;
+  animation: waveStretchDelay 1.4s infinite ease-in-out;
+
+  &:nth-child(1) {
+    animation-delay: -1.2s;
+  }
+  &:nth-child(2) {
+    animation-delay: -1.1s;
+  }
+  &:nth-child(3) {
+    animation-delay: -1s;
+  }
+  &:nth-child(4) {
+    animation-delay: -0.9s;
+  }
+  &:nth-child(5) {
+    animation-delay: -0.8s;
+  }
+}
+
+@keyframes doubleBounce {
+  0%,
+  100% {
+    -webkit-transform: scale(0.2);
+    transform: scale(0.2);
+  }
+  50% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes rotatePlane {
+  0% {
+    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+  }
+  50% {
+    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+  }
+  100% {
+    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+  }
+}
+
+@keyframes waveStretchDelay {
+  0%,
+  40%,
+  100% {
+    -webkit-transform: scaleY(0.4);
+    transform: scaleY(0.4);
+  }
+  20% {
+    -webkit-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+}
+
+.search-loading {
+  padding-top: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(255, 255, 255, 0.7);
+  z-index: 1;
+}

package/src/scripts/components/logo/Logo.tsx

@@ -0,0 +1,44 @@
+import React from "react"
+
+import logodh from "../assets/on-dark-horz.svg"
+import logodv from "../assets/on-dark.svg"
+import logolh from "../assets/on-light-horz.svg"
+import logolv from "../assets/on-light.svg"
+
+export interface LogoProps {
+  dark?: boolean
+  width?: string
+  horizontal?: boolean
+}
+
+export const Logo: React.FC<LogoProps> = ({
+  dark = true,
+  width = "300px",
+  horizontal = true,
+  ...props
+}) => {
+  const logoStyle = dark && horizontal
+    ? logodh
+    : horizontal
+    ? logolh
+    : dark
+    ? logodv
+    : logolv
+
+  return (
+    <div
+      className="logo-wrap"
+      style={{
+        width: width,
+        maxWidth: "100%",
+      }}
+      {...props}
+    >
+      <img
+        src={logoStyle}
+        loading="lazy"
+        alt="box with connection dots and lines that says openneuro next to it "
+      />
+    </div>
+  )
+}

package/src/scripts/components/logo/__tests__/Logo.spec.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { Logo } from "../Logo"
+
+describe("Logo component", () => {
+  it("renders dark/horizontal", async () => {
+    render(<Logo />)
+    expect(await screen.getByRole("img")).toBeInTheDocument()
+  })
+  it("renders light/horizontal", async () => {
+    render(<Logo dark={false} />)
+    expect(await screen.getByRole("img")).toBeInTheDocument()
+  })
+  it("renders dark/vertical", async () => {
+    render(<Logo horizontal={false} />)
+    expect(await screen.getByRole("img")).toBeInTheDocument()
+  })
+  it("renders light/vertical", async () => {
+    render(<Logo dark={false} horizontal={false} />)
+    expect(await screen.getByRole("img")).toBeInTheDocument()
+  })
+})

package/src/scripts/components/modal/Modal.tsx

@@ -0,0 +1,51 @@
+import React from "react"
+import { Button } from "../button/Button"
+import "./modal.scss"
+
+export interface ModalProps {
+  children?: React.ReactNode
+  isOpen?: boolean
+  toggle?: () => void
+  closeText?: string
+  className?: string
+}
+
+export const Modal: React.FC<ModalProps> = ({
+  children,
+  isOpen,
+  toggle,
+  closeText,
+  className,
+}) => {
+  const showModal = isOpen ? "show-modal" : "hide-modal"
+  return (
+    <div className={"modal-wrapper " + showModal + " " + className}>
+      <div className="overlay" onClick={toggle}></div>
+
+      <div className="grid modal">
+        <div className="col">
+          <span className="modal-close-x" onClick={toggle}>
+            &times;
+          </span>
+          <div className="grid modal-body">
+            <div className="col">{children}</div>
+          </div>
+          {closeText
+            ? (
+              <div className="grid grid-end">
+                <div className="m-b-20 m-r-20">
+                  <Button
+                    className="modal-close-button"
+                    size="small"
+                    onClick={toggle}
+                    label={closeText}
+                  />
+                </div>
+              </div>
+            )
+            : null}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/scripts/components/modal/ModalExample.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from "react"
+
+import { Button } from "../button/Button"
+import { Modal } from "../modal/Modal"
+
+export interface ModalExampleProps {
+  closeText: string
+  buttonText: string
+}
+
+export const ModalExample: React.FC<ModalExampleProps> = ({
+  closeText,
+  buttonText,
+}) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const toggle = () => setIsOpen(!isOpen)
+  return (
+    <>
+      <Button size="small" primary onClick={toggle} label={buttonText} />
+      <Modal isOpen={isOpen} toggle={toggle} closeText={closeText}>
+        <p>This is the content.</p>
+      </Modal>
+    </>
+  )
+}