@teselagen/ui 0.7.33-beta.3 → 0.7.33-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.7.33-beta.3",
+  "version": "0.7.33-beta.4",
   "main": "./src/index.js",
   "type": "module",
   "exports": {

package/src/AdvancedOptions.spec.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import AdvancedOptions from "./AdvancedOptions";
+
+describe("AdvancedOptions", () => {
+  test("renders correctly with given props and default state", () => {
+    const { queryByText, container } = render(
+      <AdvancedOptions label="Test Label" content="Test Content" />
+    );
+    expect(queryByText("Test Label")).toBeInTheDocument();
+    expect(queryByText("Test Content")).not.toBeInTheDocument();
+
+    expect(
+      container.querySelector(".bp3-icon-caret-right")
+    ).toBeInTheDocument();
+  });
+
+  test("toggles content when clicked", () => {
+    const { getByText, queryByText, container } = render(
+      <AdvancedOptions label="Test Label" content="Test Content" />
+    );
+    fireEvent.click(getByText("Test Label"));
+    expect(queryByText("Test Content")).toBeInTheDocument();
+    expect(container.querySelector(".bp3-icon-caret-down")).toBeInTheDocument();
+  });
+});

package/src/AsyncValidateFieldSpinner/index.js

@@ -0,0 +1,12 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+
+import React from "react";
+import { Spinner } from "@blueprintjs/core";
+
+export default function AsyncValidateFieldSpinner({ validating }) {
+  if (validating) {
+    return <Spinner size="18" />;
+  } else {
+    return null;
+  }
+}

package/src/BlueprintError/index.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { Classes } from "@blueprintjs/core";
+import classNames from "classnames";
+
+export default function BlueprintError({ error }) {
+  if (!error) return null;
+  return (
+    <div className={classNames(Classes.FORM_GROUP, Classes.INTENT_DANGER)}>
+      <div className={classNames(Classes.FORM_HELPER_TEXT, "preserve-newline")}>
+        {error}
+      </div>
+    </div>
+  );
+}

package/src/BounceLoader/index.js

@@ -0,0 +1,16 @@
+/* taken from http://tobiasahlin.com/spinkit/ */
+import React from "react";
+import classNames from "classnames";
+import "./style.css";
+
+export function BounceLoader({ style, className }) {
+  return (
+    <div className={classNames("tg-bounce-loader", className)} style={style}>
+      <div className="rect1" />
+      <div className="rect2" />
+      <div className="rect3" />
+      <div className="rect4" />
+      <div className="rect5" />
+    </div>
+  );
+}

package/src/BounceLoader/style.css

@@ -0,0 +1,45 @@
+.tg-bounce-loader {
+  width: 50px;
+  height: 40px;
+  text-align: center;
+  font-size: 10px;
+  display: flex;
+  align-items: center;
+}
+
+.tg-bounce-loader > div {
+  background-color: #006cab;
+  height: 100%;
+  max-height: 30px;
+  width: 6px;
+  display: inline-block;
+  margin-right: 3px;
+  animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+.tg-bounce-loader .rect2 {
+  animation-delay: -1.1s;
+}
+
+.tg-bounce-loader .rect3 {
+  animation-delay: -1s;
+}
+
+.tg-bounce-loader .rect4 {
+  animation-delay: -0.9s;
+}
+
+.tg-bounce-loader .rect5 {
+  animation-delay: -0.8s;
+}
+
+@keyframes sk-stretchdelay {
+  0%,
+  40%,
+  100% {
+    transform: scaleY(0.4);
+  }
+  20% {
+    transform: scaleY(1);
+  }
+}

package/src/CollapsibleCard/index.js

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import { Button, Classes, Icon } from "@blueprintjs/core";
+import classNames from "classnames";
+import "./style.css";
+
+export default function CollapsibleCard({
+  title,
+  icon,
+  openTitleElements,
+  noCard = false,
+  className,
+  style,
+  children,
+  initialClosed = false,
+  toggle,
+  isOpen
+}) {
+  let [open, setOpen] = useState(!initialClosed);
+  if (isOpen !== undefined) open = isOpen;
+
+  const toggleCardInfo = () => {
+    if (toggle) toggle();
+    else {
+      setOpen(!open);
+    }
+  };
+
+  return (
+    <div
+      className={classNames({ "tg-card": !noCard, open }, className)}
+      style={{
+        paddingTop: 10,
+        paddingBottom: 10,
+        paddingLeft: 15,
+        paddingRight: 15,
+        ...style
+      }}
+    >
+      <div className="tg-card-header" style={{ marginBottom: 8 }}>
+        <div className="tg-card-header-title">
+          {icon && <Icon icon={icon} />}
+          <h6
+            style={{
+              marginBottom: 0,
+              marginRight: 10,
+              marginLeft: 10
+            }}
+          >
+            {title}
+          </h6>
+          <div>{open && openTitleElements}</div>
+        </div>
+        <div>
+          <Button
+            icon={open ? "minimize" : "maximize"}
+            className={classNames(
+              Classes.MINIMAL,
+              "info-btn",
+              "tg-collapse-toggle"
+            )}
+            onClick={toggleCardInfo}
+          />
+        </div>
+      </div>
+      {open && children}
+    </div>
+  );
+}

package/src/CollapsibleCard/style.css

@@ -0,0 +1,23 @@
+/* Use in the place of .bp3-card */
+.tg-card {
+  padding: 20px;
+  margin-bottom: 20px;
+  border-radius: 5px;
+  background: white;
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    0 1px 2px rgba(0, 0, 0, 0.18);
+}
+
+.tg-card-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tg-card-header-title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}

package/src/DNALoader/index.js

@@ -0,0 +1,20 @@
+import React from "react";
+import classNames from "classnames";
+import "./style.css";
+
+export default function DNALoader({ style, className }) {
+  return (
+    <div className={classNames("dna-loader", className)} style={style}>
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+    </div>
+  );
+}

package/src/DNALoader/style.css

@@ -0,0 +1,251 @@
+.dna-loader {
+  display: inline-block;
+  position: relative;
+  transform: scale(0.45);
+}
+
+.nucleobase {
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+}
+
+.nucleobase:not(:last-child) {
+  margin-right: 4.86vh;
+}
+
+.nucleobase:before,
+.nucleobase:after {
+  content: "";
+  display: inline-block;
+  width: 3vh;
+  height: 3vh;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.nucleobase:nth-child(10) {
+  animation-delay: -1.869s;
+}
+
+.nucleobase:nth-child(10):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -1.869s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(10):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -1.869s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(9) {
+  animation-delay: -3.738s;
+}
+
+.nucleobase:nth-child(9):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -3.738s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(9):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -3.738s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(8) {
+  animation-delay: -5.607s;
+}
+
+.nucleobase:nth-child(8):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -5.607s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(8):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -5.607s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(7) {
+  animation-delay: -7.476s;
+}
+
+.nucleobase:nth-child(7):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -7.476s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(7):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -7.476s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(6) {
+  animation-delay: -9.345s;
+}
+
+.nucleobase:nth-child(6):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -9.345s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(6):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -9.345s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(5) {
+  animation-delay: -11.214s;
+}
+
+.nucleobase:nth-child(5):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -11.214s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(5):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -11.214s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(4) {
+  animation-delay: -13.083s;
+}
+
+.nucleobase:nth-child(4):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -13.083s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(4):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -13.083s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(3) {
+  animation-delay: -14.952s;
+}
+
+.nucleobase:nth-child(3):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -14.952s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(3):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -14.952s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(2) {
+  animation-delay: -16.821s;
+}
+
+.nucleobase:nth-child(2):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -16.821s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(2):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -16.821s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(1) {
+  animation-delay: -18.69s;
+}
+
+.nucleobase:nth-child(1):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -18.69s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(1):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -18.69s;
+  background-color: #006cab;
+}
+
+@keyframes animBefore {
+  0% {
+    top: -6vh;
+    z-index: 1;
+  }
+  25% {
+    transform: scale(1.2);
+    z-index: 1;
+  }
+  50% {
+    top: 6vh;
+    z-index: -1;
+  }
+  75% {
+    background-color: #5bc0de;
+    transform: scale(0.8);
+    z-index: -1;
+  }
+  100% {
+    top: -6vh;
+    z-index: -1;
+  }
+}
+
+@keyframes animAfter {
+  0% {
+    top: 6vh;
+    z-index: -1;
+  }
+  25% {
+    background-color: #055e75;
+    transform: scale(0.8);
+    z-index: -1;
+  }
+  50% {
+    top: -6vh;
+    z-index: 1;
+  }
+  75% {
+    transform: scale(1.2);
+    z-index: 1;
+  }
+  100% {
+    top: 6vh;
+    z-index: 1;
+  }
+}
+
+@keyframes animDotBar {
+  0% {
+    height: 8.25vh;
+  }
+  25% {
+    height: 0;
+  }
+  50% {
+    height: 8.25vh;
+  }
+  75% {
+    height: 0;
+  }
+  100% {
+    height: 8.25vh;
+  }
+}