@openneuro/app 4.33.4 → 4.34.0-alpha.0

package/src/scripts/components/search-page/search-sort.scss

@@ -0,0 +1,56 @@
+@import '../scss/variables';
+
+.search-sort-list-label {
+  padding: 0 0 5px;
+  color: var(--current-theme-primary);
+  font-size: 14px;
+  &:hover {
+    color: var(--current-theme-primary-hover);
+  }
+  i {
+    margin-left: 5px;
+    font-size: 12px;
+    position: relative;
+    top: -2px;
+  }
+  span {
+    color: $charcoal;
+  }
+}
+.search-sort-dropdown-list {
+  .label {
+    margin: 0 0px 0 30px;
+    b {
+      margin-right: 20px;
+    }
+  }
+  i + .label {
+    margin-left: 12px;
+  }
+  ul {
+    list-style: none;
+    padding: 10px;
+    margin: 0;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+
+    background-color: #fff;
+
+    li {
+      cursor: pointer;
+      width: 100%;
+      padding: 0;
+      transition: background 0.25s, color 0.25s;
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      color: var(--current-theme-primary);
+      justify-content: flex-end;
+      font-size: 14px;
+      &:hover {
+        color: var(--current-theme-primary-hover);
+        background: rgba(0, 0, 0, 0.025);
+      }
+    }
+  }
+}

package/src/scripts/components/select/SelectGroup.tsx

@@ -0,0 +1,41 @@
+import React from "react"
+import "./select.scss"
+
+export interface SelectGroupProps {
+  options: {
+    label: string
+    value: string
+  }[]
+  value: string
+  setValue: (string) => void
+  label?: string
+  id: string
+  layout: "inline" | "stacked"
+}
+
+export const SelectGroup = ({
+  setValue,
+  options,
+  label,
+  id,
+  layout,
+}: SelectGroupProps) => {
+  return (
+    <span
+      className={layout === "stacked"
+        ? "on-select-wrapper stacked"
+        : "on-select-wrapper"}
+    >
+      {label && <label htmlFor={id}>{label}</label>}
+      <select
+        className="on-select"
+        onChange={(e) => setValue(e.target.value)}
+        id={id}
+      >
+        {options.map((item, index) => (
+          <option key={index} label={item.label} value={item.value} />
+        ))}
+      </select>
+    </span>
+  )
+}

package/src/scripts/components/select/__tests__/SelectGroup.spec.tsx

@@ -0,0 +1,43 @@
+import { vi } from "vitest"
+import React from "react"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { SelectGroup } from "../SelectGroup"
+
+const SelectContent = [
+  { label: "--Select--", value: "" },
+  { label: "Option-1", value: "option1" },
+  { label: "Option-2", value: "option2" },
+  { label: "Option-3", value: "option3" },
+  { label: "Option-4", value: "option4" },
+]
+
+describe("SelectGroup component", () => {
+  it("renders options", async () => {
+    const setValue = vi.fn()
+    render(
+      <SelectGroup
+        id="test-select"
+        options={SelectContent}
+        value=""
+        layout="inline"
+        setValue={setValue}
+      />,
+    )
+    expect(await screen.queryAllByRole("option")).toHaveLength(5)
+  })
+  it("is selectable", async () => {
+    const setValue = vi.fn()
+    render(
+      <SelectGroup
+        id="test-select"
+        options={SelectContent}
+        value=""
+        setValue={setValue}
+        layout="inline"
+      />,
+    )
+    const select = await screen.getByRole("combobox")
+    fireEvent.change(select, { target: { value: "option4" } })
+    expect(setValue).toHaveBeenCalledWith("option4")
+  })
+})

package/src/scripts/components/select/select.scss

@@ -0,0 +1,40 @@
+@import "../scss/variables.scss";
+
+.on-select-wrapper {
+  label {
+    margin-right: 15px;
+    font-size: 14px;
+    font-weight: 400;
+    letter-spacing: 0.05em;
+    color: #444;
+  }
+  select {
+    padding: 20px;
+    background-color: #fff;
+    background: linear-gradient(45deg, transparent 50%, $charcoal 50%),
+      linear-gradient(135deg, $charcoal 50%, transparent 50%),
+      linear-gradient(to right, #fff, #fff);
+    background-position: calc(100% - 21px) calc(1em + 2px),
+      calc(100% - 16px) calc(1em + 2px), 100% 0;
+    background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
+    background-repeat: no-repeat;
+
+    border: thin solid #aaa;
+    line-height: 1.5em;
+    padding: 0.5em 3.5em 0.5em 1em;
+    border-radius: $border-radius-default;
+    font-size: 14px;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+  }
+  &.stacked {
+    label {
+      margin: 0 0 10px;
+      display: block;
+    }
+  }
+}

package/src/scripts/components/textarea/Textarea.tsx

@@ -0,0 +1,68 @@
+import React from "react"
+
+export interface TextareaProps {
+  placeholder: string
+  label?: string
+  name: string
+  type?: "inline" | "float" | "default"
+  setValue: (e: React.FormEvent<HTMLTextAreaElement>) => void
+  value?: string
+}
+
+export const Textarea = ({
+  placeholder,
+  label,
+  name,
+  type,
+  setValue,
+  value,
+}: TextareaProps) => {
+  return (
+    <>
+      {type == "float"
+        ? (
+          <div className="float-form-style form-control">
+            <textarea
+              name={name}
+              placeholder={placeholder}
+              onChange={(e) => setValue(e)}
+              rows={5}
+              cols={100}
+              value={value}
+            >
+            </textarea>
+            {label ? <label htmlFor={name}>{label}</label> : null}
+          </div>
+        )
+        : type == "inline"
+        ? (
+          <div className="form-control inline">
+            {label ? <label htmlFor={name}>{label}</label> : null}
+            <textarea
+              name={name}
+              placeholder={placeholder}
+              onChange={(e) => setValue(e)}
+              rows={5}
+              cols={100}
+              value={value}
+            >
+            </textarea>
+          </div>
+        )
+        : (
+          <div className="form-control">
+            {label ? <label htmlFor={name}>{label}</label> : null}
+            <textarea
+              name={name}
+              placeholder={placeholder}
+              onChange={(e) => setValue(e)}
+              rows={5}
+              cols={100}
+              value={value}
+            >
+            </textarea>
+          </div>
+        )}
+    </>
+  )
+}

package/src/scripts/components/textarea/__tests__/Textarea.spec.tsx

@@ -0,0 +1,53 @@
+import { vi } from "vitest"
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { Textarea } from "../Textarea"
+
+describe("Textarea component", () => {
+  it("supports inline type", () => {
+    render(
+      <Textarea
+        placeholder="test"
+        type="inline"
+        name="inline test"
+        label="in-label"
+        setValue={vi.fn()}
+      />,
+    )
+    const textbox = screen.getByRole("textbox")
+    expect(textbox).toBeInTheDocument()
+    expect(textbox.closest("div")).toHaveClass("inline")
+    expect(screen.getByText("in-label")).toBeInTheDocument()
+  })
+  it("supports float type", () => {
+    render(
+      <Textarea
+        placeholder="test"
+        type="float"
+        name="float test"
+        label="float-label"
+        setValue={vi.fn()}
+      />,
+    )
+    const textbox = screen.getByRole("textbox")
+    expect(textbox).toBeInTheDocument()
+    expect(textbox.closest("div")).toHaveClass("float-form-style")
+    expect(screen.getByText("float-label")).toBeInTheDocument()
+  })
+  it("supports default type", () => {
+    render(
+      <Textarea
+        name="default test"
+        label="default-label"
+        placeholder=""
+        setValue={() => {}}
+      />,
+    )
+    const textbox = screen.getByRole("textbox")
+    expect(textbox).toBeInTheDocument()
+    expect(textbox.closest("div")).toHaveClass("form-control")
+    expect(textbox.closest("div")).not.toHaveClass("inline")
+    expect(textbox.closest("div")).not.toHaveClass("float-form-style")
+    expect(screen.getByText("default-label")).toBeInTheDocument()
+  })
+})

package/src/scripts/components/tooltip/Tooltip.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import type { FC } from "react"
+import "./tooltip.scss"
+
+export interface TooltipProps {
+  tooltip: string
+  flow?: "up" | "down" | "left" | "right"
+  children: React.ReactNode
+  className?: string
+  wrapText?: boolean
+}
+
+export const Tooltip: FC<TooltipProps> = ({
+  children,
+  tooltip,
+  flow = "up",
+  className,
+  wrapText,
+}) => {
+  const wrap = wrapText && " wrap-text"
+  return (
+    <span
+      className={(wrap || "") + " " + (className || "")}
+      data-tooltip={tooltip}
+      data-flow={flow}
+    >
+      {children}
+    </span>
+  )
+}

package/src/scripts/components/tooltip/__tests__/Tooltip.spec.tsx

@@ -0,0 +1,14 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { Tooltip } from "../Tooltip"
+
+describe("Tooltip component", () => {
+  it("renders children", async () => {
+    render(
+      <Tooltip tooltip="tooltiptest" flow="up">
+        hover
+      </Tooltip>,
+    )
+    expect(await screen.getByText(/hover/)).toBeInTheDocument()
+  })
+})

package/src/scripts/components/tooltip/tooltip.scss

@@ -0,0 +1,159 @@
+@import '../scss/variables';
+
+/* START TOOLTIP STYLES */
+[data-tooltip] {
+  position: relative;
+  display: flex;
+  z-index: 1201;
+}
+
+/* Applies to all tooltips */
+[data-tooltip]::before,
+[data-tooltip]::after {
+  text-transform: none;
+  font-size: 0.9em;
+  line-height: 1;
+  user-select: none;
+  pointer-events: none;
+  position: absolute;
+  display: none;
+  opacity: 0;
+}
+[data-tooltip]::before {
+  content: '';
+  border: 5px solid transparent;
+  z-index: 1201;
+}
+[data-tooltip]::after {
+  content: attr(data-tooltip);
+  min-width: 3em;
+  max-width: 21em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 1ch 1.5ch;
+  border-radius: 0.3ch;
+  box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
+  background: $charcoal;
+  color: #fff;
+  z-index: 1000;
+}
+[data-tooltip].wrap-text::after {
+  min-width: 18em;
+  max-width: 21em;
+  white-space: normal;
+  overflow: visible;
+  text-overflow: initial;
+  line-height: 1.3em;
+  text-align: center;
+}
+
+[data-tooltip]:hover::before,
+[data-tooltip]:hover::after {
+  display: block;
+}
+
+[tooltip='']::before,
+[tooltip='']::after {
+  display: none !important;
+}
+
+/* FLOW: UP */
+[data-tooltip]:not([data-flow])::before,
+[data-tooltip][data-flow^='up']::before {
+  bottom: 100%;
+  border-bottom-width: 0;
+  border-top-color: $charcoal;
+}
+[data-tooltip]:not([data-flow])::after,
+[data-tooltip][data-flow^='up']::after {
+  bottom: calc(100% + 5px);
+}
+[data-tooltip]:not([data-flow])::before,
+[data-tooltip]:not([data-flow])::after,
+[data-tooltip][data-flow^='up']::before,
+[data-tooltip][data-flow^='up']::after {
+  left: 50%;
+  transform: translate(-50%, -0.5em);
+}
+
+/* FLOW: DOWN */
+[data-tooltip][data-flow^='down']::before {
+  top: 100%;
+  border-top-width: 0;
+  border-bottom-color: $charcoal;
+}
+[data-tooltip][data-flow^='down']::after {
+  top: calc(100% + 5px);
+}
+[data-tooltip][data-flow^='down']::before,
+[data-tooltip][data-flow^='down']::after {
+  left: 50%;
+  transform: translate(-50%, 0.5em);
+}
+
+/* FLOW: LEFT */
+[data-tooltip][data-flow^='left']::before {
+  top: 50%;
+  border-right-width: 0;
+  border-left-color: $charcoal;
+  left: calc(0em - 5px);
+  transform: translate(-0.5em, -50%);
+}
+[data-tooltip][data-flow^='left']::after {
+  top: 50%;
+  right: calc(100% + 5px);
+  transform: translate(-0.5em, -50%);
+}
+
+/* FLOW: RIGHT */
+[data-tooltip][data-flow^='right']::before {
+  top: 50%;
+  border-left-width: 0;
+  border-right-color: $charcoal;
+  right: calc(0em - 5px);
+  transform: translate(0.5em, -50%);
+}
+[data-tooltip][data-flow^='right']::after {
+  top: 50%;
+  left: calc(100% + 5px);
+  transform: translate(0.5em, -50%);
+}
+
+/* KEYFRAMES */
+@keyframes tooltips-vert {
+  to {
+    opacity: 0.9;
+    transform: translate(-50%, 0);
+  }
+}
+
+@keyframes tooltips-horz {
+  to {
+    opacity: 0.9;
+    transform: translate(0, -50%);
+  }
+}
+
+[data-tooltip]:not([data-flow]):hover::before,
+[data-tooltip]:not([data-flow]):hover::after,
+[data-tooltip][data-flow^='up']:hover::before,
+[data-tooltip][data-flow^='up']:hover::after,
+[data-tooltip][data-flow^='down']:hover::before,
+[data-tooltip][data-flow^='down']:hover::after {
+  animation: tooltips-vert 300ms ease-out forwards;
+}
+
+[data-tooltip][data-flow^='left']:hover::before,
+[data-tooltip][data-flow^='left']:hover::after,
+[data-tooltip][data-flow^='right']:hover::before,
+[data-tooltip][data-flow^='right']:hover::after {
+  animation: tooltips-horz 300ms ease-out forwards;
+}
+
+@media (max-width: 767px) {
+  [data-tooltip]::before,
+  [data-tooltip]::after {
+    display: none !important;
+  }
+}

package/src/scripts/components/user/UserMenu.tsx

@@ -0,0 +1,72 @@
+import React from "react"
+import { Link } from "react-router-dom"
+import { Dropdown } from "../dropdown/Dropdown"
+import "./user-menu.scss"
+
+export interface UserMenuProps {
+  profile: {
+    name: string
+    admin: boolean
+    email: string
+    provider: string
+  }
+  signOutAndRedirect: () => void
+}
+
+export const UserMenu = ({ profile, signOutAndRedirect }: UserMenuProps) => {
+  return (
+    <Dropdown
+      className={"user-menu-dropdown"}
+      label={<div className="user-menu-label">My Account</div>}
+      children={
+        <div className="user-menu-dropdown-list">
+          <ul>
+            <li className="dropdown-header">
+              <p>
+                <span>Hello</span> <br />
+                {profile.name}
+              </p>
+              <p>
+                <span>signed in as</span>
+                <br />
+                {profile.email}
+                {" "}
+              </p>
+              <p>
+                <span>via</span>
+                <br /> {profile.provider}
+              </p>
+            </li>
+            <li>
+              <Link to="/search?mydatasets">My Datasets</Link>
+            </li>
+            <li className="user-menu-link">
+              <Link to="/keygen">Obtain an API Key</Link>
+            </li>
+            {profile.provider !== "orcid" && (
+              <li className="user-menu-link">
+                <a href="/crn/auth/orcid?link=true">
+                  {" "}
+                  Link ORCID to my account{" "}
+                </a>
+              </li>
+            )}
+            {profile.admin && (
+              <li className="user-menu-link">
+                <Link to="/admin">Admin</Link>
+              </li>
+            )}
+            <li className="user-menu-link">
+              <a
+                onClick={() => signOutAndRedirect()}
+                className="btn-submit-other"
+              >
+                Sign Out
+              </a>
+            </li>
+          </ul>
+        </div>
+      }
+    />
+  )
+}

package/src/scripts/components/user/user-menu.scss

@@ -0,0 +1,88 @@
+@import '../scss/variables';
+
+.user-menu-dropdown {
+  position: relative;
+  .menu {
+    box-shadow: 0px 0px 5px -4px black;
+    background-color: #fff;
+    border-radius: $border-radius-default;
+    width: 100%;
+    min-width: 250px;
+    right: 0px;
+    top: 60px;
+  }
+
+  .user-menu-dropdown-list {
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 20px;
+      li {
+        text-align: center;
+        border-bottom: 1px solid $newspaper;
+        &.dropdown-header {
+          padding: 10px 0;
+          font-size: 14px;
+          p:first-child {
+            margin-top: 0;
+          }
+          span {
+            color: #3d3d3d;
+            font-weight: bold;
+            font-size: 12px;
+          }
+        }
+        a {
+          display: block;
+          text-decoration: none;
+          padding: 10px 0;
+          &:hover {
+            background-color: #eee;
+          }
+        }
+        &:last-child {
+          border: 0;
+          margin: 0;
+          padding: 0;
+        }
+      }
+    }
+  }
+
+  .active {
+    img {
+      opacity: 0.5;
+    }
+    i {
+      color: $on-light-aqua;
+    }
+  }
+}
+
+.header-account-btn {
+  display: flex;
+  align-items: center;
+  background: #eee;
+  border-radius: $border-radius-default;
+
+  button.on-no-background.icon-text {
+    color: $on-dark-aqua;
+    margin: 5px 20px 0;
+    font-size: 16px;
+  }
+}
+.header-account-btn .toggle {
+  color: #204e5a;
+  font-weight: bold;
+  font-size: 14px;
+  padding: 20px 24px;
+  @media (max-width: 800px) {
+    padding: 10px;
+  }
+}
+@media (max-width: 800px) {
+  .header-account-btn .dropdown-wrapper .menu {
+    right: -25vw;
+    left: -25vw;
+  }
+}