@onepercentio/one-ui 0.28.8 → 0.28.9

package/src/components/MutableHamburgerButton/MutableHamburgerButton.module.scss

@@ -0,0 +1,220 @@
+@use 'sass:math';
+@import "../../assets/styles/index.scss";
+
+$slice: math.div(1, 7);
+
+.container {
+  box-sizing: content-box;
+  cursor: pointer;
+  width: 1em;
+  height: 1em;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  background-size: 0 0;
+  background-repeat: no-repeat;
+  transition: transform 250ms;
+  transition-timing-function: ease-in-out;
+  &:active {
+    transform: scale(0.9);
+  }
+  > * {
+    position: relative;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    width: 0.8em;
+    height: #{$slice}em;
+    border-radius: #{math.div($slice, 2)}em;
+    transition: transform $veryFast, width $veryFast, height $veryFast,
+      border-width $veryFast, background-color $veryFast,
+      border-radius $veryFast, top $veryFast;
+    background: var(--mutable-hamburger-background, $digitalBlue);
+    background-size: 1em 1em;
+    background-repeat: no-repeat;
+    border: 0em solid #0000;
+    top: 0px;
+    &:nth-child(1) {
+      border-top-color: var(--mutable-hamburger-background, $digitalBlue);
+    }
+    &:nth-child(2) {
+      border-right-color: var(--mutable-hamburger-background, $digitalBlue);
+    }
+    &:nth-child(3) {
+      border-bottom-color: var(--mutable-hamburger-background, $digitalBlue);
+      border-left-color: var(--mutable-hamburger-background, $digitalBlue);
+    }
+  }
+  & > * {
+    background-position-x: -0.1em;
+  }
+  & > :nth-child(1) {
+    background-position-y: #{$slice * -1}em;
+  }
+  & > :nth-child(2) {
+    background-position-y: #{$slice * -3}em;
+  }
+  & > :nth-child(3) {
+    background-position-y: #{$slice * -5}em;
+  }
+
+  &.closed {
+    > :nth-child(1) {
+      transform: translateY(#{$slice * 2}em) rotateZ(-45deg);
+    }
+    > :nth-child(2) {
+      transform: rotateZ(45deg);
+    }
+    > :nth-child(3) {
+      transform: translateY(-#{$slice * 2}em) rotateZ(-45deg);
+    }
+  }
+
+  &.arrow-up {
+    > * {
+      width: 0.4em;
+    }
+    > :nth-child(1) {
+      transform: translateX(0.1em) translateY(#{$slice * 2}em) rotateZ(45deg);
+    }
+    > :nth-child(2) {
+      transform: translateX(0.1em) rotateZ(45deg);
+    }
+    > :nth-child(3) {
+      transform: translateX(-0.1em) translateY(-#{$slice * 2}em) rotateZ(-45deg);
+    }
+  }
+
+  &.arrow-down {
+    > * {
+      width: 0.4em;
+    }
+    > :nth-child(1) {
+      transform: translateX(0.1em) translateY(#{$slice * 2}em) rotateZ(-45deg);
+    }
+    > :nth-child(2) {
+      transform: translateX(0.1em) rotateZ(-45deg);
+    }
+    > :nth-child(3) {
+      transform: translateX(-0.1em) translateY(-#{$slice * 2}em) rotateZ(45deg);
+    }
+  }
+
+  &.search {
+    > :nth-child(1) {
+      $rate: 1.8;
+      width: #{$slice * $rate + math.div($slice, 1.35)}em;
+      height: #{$slice * $rate + math.div($slice, 1.35)}em;
+      border-radius: #{$slice * $rate * 2}em;
+      background-color: transparent;
+      border: #{math.div($slice, 1.35)}em solid
+        var(--mutable-hamburger-background, $digitalBlue);
+      transform: translateX(-0.15em);
+    }
+    > :nth-child(2) {
+      transform: translateX(0.12em) translateY(-0.05em) rotateZ(45deg);
+      height: #{math.div($slice, 1.35)}em;
+      width: 0.55em;
+    }
+    > :nth-child(3) {
+      transform: translateX(0.12em) translateY(-#{($slice * 1.3) + 0.085}em)
+        rotateZ(45deg);
+      height: #{math.div($slice, 1.35)}em;
+      width: 0.55em;
+    }
+  }
+
+  &.checkmark {
+    > :nth-child(1) {
+      transform: translateY(#{$slice * 2}em) translateX(-0.178em)
+        translateY(0.13em) rotate(45deg);
+      height: #{$slice}em;
+      width: 0.45em;
+    }
+    > :nth-child(2) {
+      height: #{$slice}em;
+      width: 0.7em;
+      transform: translateX(0.1em) rotate(-55deg);
+    }
+    > :nth-child(3) {
+      transform: translateY(-#{$slice * 2}em) translateX(0.1em) rotate(-55deg);
+      height: #{$slice}em;
+      width: 0.7em;
+    }
+  }
+
+  &.loading {
+    $slice: math.div(1, 6);
+    @keyframes rotate {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+    animation-name: rotate;
+    animation-duration: 1s;
+    animation-delay: $veryFast;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    > * {
+      background-color: #0000;
+      width: #{$slice * 4.5}em;
+      height: #{$slice * 4.5}em;
+      border-radius: #{$slice * 4.5}em;
+      border-width: #{$slice}em;
+    }
+    > :nth-child(1) {
+      top: (#{$slice * 4.5}em);
+    }
+    > :nth-child(2) {
+      transform: rotateZ(-5deg);
+    }
+    > :nth-child(3) {
+      transform: rotateZ(-95deg);
+      top: (-#{$slice * 4.5}em);
+    }
+  }
+  &.pencil {
+    perspective: 600px;
+
+    > :nth-child(1) {
+      height: #{$slice}em;
+      width: 0.15em;
+      transform: translateX(0.3em) rotate(-45deg);
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+
+    > :nth-child(2) {
+      width: 0.6em;
+      transform: rotate(-45deg);
+      border-radius: 0;
+    }
+
+    > :nth-child(3) {
+      $slice: $slice * 0.6;
+
+      height: 0em;
+      width: 0em;
+      border-radius: 0;
+      transform: translateX(-0.27em) translateY(0.027em) rotate(-80deg)
+        rotateY(45deg) skew(12deg, 12deg);
+
+      border-left: #{$slice}em solid transparent;
+      border-right: #{$slice}em solid transparent;
+      border-bottom: 0em solid transparent;
+      border-top: #{$slice}em solid;
+      background-color: transparent;
+    }
+  }
+  &.hamburger {
+    > :nth-child(1) {
+      width: 0.7em;
+    }
+    > :nth-child(3) {
+      width: 0.7em;
+    }
+  }
+}

package/src/components/MutableHamburgerButton/MutableHamburgerButton.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import Styles from "./MutableHamburgerButton.module.scss";
+
+/**
+ * A hamburger button that mutates according to it's state
+ **/
+export default function MutableHamburgerButton({
+  state = "default",
+  size,
+  className = "",
+  ...props
+}: {
+  state?:
+    | "default"
+    | "closed"
+    | "arrow-up"
+    | "arrow-down"
+    | "search"
+    | "loading"
+    | "checkmark"
+    | "pencil"
+    | "hamburger";
+  size: number;
+} & React.HTMLProps<HTMLDivElement>) {
+  const stateClass = state in Styles ? Styles[state] : "";
+
+  return (
+    <div
+      {...props}
+      className={`${Styles.container} ${stateClass} ${className}`}
+      style={{ fontSize: `${size}px` }}
+    >
+      <div />
+      <div />
+      <div />
+    </div>
+  );
+}

package/src/components/MutableHamburgerButton/index.tsx

@@ -0,0 +1 @@
+export { default } from './MutableHamburgerButton';

package/src/components/Notification/Notification.module.scss

@@ -0,0 +1,25 @@
+@import "../../assets/styles/variables.scss";
+
+.container {
+  animation-fill-mode: forwards;
+  animation-duration: $fast;
+  animation-name: expand;
+  width: auto;
+  min-width: 250px;
+}
+
+.success {
+  background-color: $success;
+}
+
+@keyframes expand {
+  0% {
+    padding: 0px 12px;
+    max-height: 0%;
+  }
+
+  100% {
+    padding: 12px 12px;
+    max-height: 100%;
+  }
+}

package/src/components/Notification/Notification.tsx

@@ -0,0 +1,13 @@
+import React, { PropsWithChildren } from "react";
+import Card from "../Card";
+import Styles from "./Notification.module.scss";
+
+/**
+ * A layout for the notification card
+ **/
+export default function Notification({
+  type,
+  children
+}: PropsWithChildren<{ type: "success" }>) {
+  return <Card className={`${Styles.container} ${Styles[type]}`}>{children}</Card>;
+}

package/src/components/Notification/index.tsx

@@ -0,0 +1 @@
+export { default } from './Notification';

package/src/components/OrderableList/OrderableList.module.scss

@@ -0,0 +1,98 @@
+$baseSpeed: 300ms;
+$fast: var(--orderable-list--speed);
+
+.unselectable * {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.clone {
+  --orderable-list--speed: #{$baseSpeed};
+  transition: max-height $fast linear;
+  pointer-events: none;
+  position: fixed;
+  overflow: hidden;
+}
+
+.ordering {
+  > * {
+    opacity: 0;
+  }
+  .visible {
+    opacity: 1;
+    * {
+      pointer-events: none;
+    }
+  }
+}
+
+.shrinkable.ordering section.visible,
+.shrinkable.ordering section.currentOrdering {
+  max-height: var(--shrink-to) !important;
+}
+.shrinkable.ordering > section:not(.visible):not(.currentOrdering) > * {
+  max-height: var(--shrink-to) !important;
+}
+.transitionHeight {
+  transition: max-height $fast linear;
+}
+
+.root {
+  position: relative;
+  --orderable-list--speed: #{$baseSpeed};
+  transition: padding-top $fast linear;
+  > * {
+    transition: max-height $fast linear;
+    overflow: hidden;
+    > * > * {
+      flex-shrink: 0;
+    }
+  }
+
+  &::before {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    content: " ";
+  }
+}
+
+.transition {
+  width: 100%;
+  align-items: flex-start !important;
+  overflow: visible !important;
+  > * {
+    flex-direction: row !important;
+    flex-wrap: wrap;
+    // &:first-child {
+    //   visibility: hidden;
+    // }
+    &:last-child {
+      visibility: visible;
+    }
+  }
+}
+
+div.stub {
+  animation-name: stub;
+  position: absolute;
+  pointer-events: none;
+  opacity: 0 !important;
+}
+
+div.stubEntering {
+  animation-name: stub;
+  z-index: -1;
+}
+@keyframes stub {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}