Button Component and Components Library PotLock (#548)

* Tip on Potlock Button Variatns * Components Library * Button Component and Component Library Draft * Comments Resolved * code cleanup --------- Co-authored-by: Elliot Braem <[email protected]>
PotLock · May 19, 2024 · f2927f3 · f2927f3
1 parent d03094a
commit f2927f3
Show file tree

Hide file tree

Showing 5 changed files with 706 additions and 0 deletions.
diff --git a/apps/potlock/widget/Components/Icons.jsx b/apps/potlock/widget/Components/Icons.jsx
@@ -0,0 +1,6 @@
+const { Volunteer } = VM.require("potlock.near/widget/Components.Icons.Volunteer");
+const { Component } = VM.require("potlock.near/widget/Components.Icons.Component");
+return {
+  Volunteer,
+  Component,
+};
diff --git a/apps/potlock/widget/Components/Icons/Component.jsx b/apps/potlock/widget/Components/Icons/Component.jsx
@@ -0,0 +1,14 @@
+const Component = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M6.35199 1H10.6497C10.7929 1 10.903 1 10.9987 1.01042C11.4235 1.05593 11.8181 1.25185 12.1111 1.56281C12.4042 1.87376 12.5764 2.27925 12.5966 2.70605C12.9787 2.82125 13.3143 3.05502 13.5547 3.37354C13.7952 3.69207 13.928 4.07882 13.9341 4.47786C14.3255 4.59507 14.6634 4.78065 14.9395 5.07888C15.3641 5.53795 15.4956 6.10251 15.5008 6.76279C15.5054 7.39768 15.3927 8.19991 15.2521 9.19554L14.9656 11.2233C14.8562 12.002 14.767 12.635 14.6283 13.1305C14.4831 13.6495 14.2688 14.076 13.8729 14.4042C13.4796 14.7298 13.0134 14.8698 12.4625 14.9362C11.9292 15 11.2585 15 10.4244 15H6.57729C5.7425 15 5.0718 15 4.53915 14.9362C3.98761 14.8698 3.52138 14.7298 3.12808 14.4042C2.73217 14.076 2.51794 13.6488 2.37273 13.1305C2.23403 12.635 2.14482 12.002 2.03478 11.2226L1.74892 9.19554C1.60892 8.19926 1.49496 7.39768 1.50017 6.76279C1.50538 6.10251 1.63692 5.53795 2.06147 5.07888C2.33757 4.78065 2.67487 4.59572 3.06622 4.47786C3.07249 4.07885 3.20552 3.69218 3.44608 3.37378C3.68664 3.05538 4.02224 2.82175 4.40436 2.7067C4.42446 2.27979 4.59659 1.87414 4.88965 1.56305C5.1827 1.25196 5.57736 1.05595 6.00231 1.01042C6.09803 1 6.20808 1 6.35068 1M4.0651 4.3066C4.66808 4.25581 5.4065 4.25581 6.29664 4.25581H10.7037C11.5932 4.25581 12.3316 4.25581 12.9352 4.3066C12.8902 4.10719 12.7786 3.92906 12.6188 3.80148C12.459 3.67391 12.2606 3.6045 12.0562 3.60465H4.94482C4.5092 3.60465 4.15561 3.9107 4.0664 4.3066M10.8951 1.98195C11.2533 2.01972 11.5365 2.2867 11.6062 2.62791H5.39608C5.43063 2.45861 5.51815 2.3047 5.64599 2.18845C5.77383 2.0722 5.93534 1.99965 6.10715 1.9813C6.14361 1.9774 6.19571 1.97674 6.37868 1.97674H10.623C10.8053 1.97674 10.8574 1.9774 10.8945 1.9813M2.77906 5.74177C2.97636 5.52884 3.27264 5.38754 3.84892 5.3107C4.43561 5.23256 5.22157 5.23191 6.33375 5.23191H10.6679C11.7801 5.23191 12.566 5.23321 13.1527 5.3107C13.729 5.38754 14.0253 5.52884 14.2226 5.74177C14.4153 5.95014 14.5202 6.2334 14.5241 6.76995C14.528 7.32344 14.4264 8.05274 14.2792 9.09851L14.0038 11.052C13.8879 11.8731 13.8071 12.4409 13.688 12.8668C13.5727 13.277 13.4379 13.4952 13.2498 13.6508C13.059 13.8097 12.8024 13.9113 12.3459 13.966C11.8778 14.022 11.2663 14.0226 10.3925 14.0226H6.6092C5.73533 14.0226 5.12389 14.022 4.65571 13.966C4.19989 13.9106 3.94268 13.8097 3.75189 13.6514C3.56371 13.4952 3.42892 13.2764 3.31366 12.8668C3.1945 12.4409 3.11375 11.8731 2.99785 11.052L2.7224 9.09851C2.57524 8.0534 2.47366 7.32344 2.47757 6.76995C2.48147 6.2334 2.58631 5.94949 2.77906 5.74177Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+return { Component };
diff --git a/apps/potlock/widget/Components/Icons/Volunteer.jsx b/apps/potlock/widget/Components/Icons/Volunteer.jsx
@@ -0,0 +1,16 @@
+const Volunteer = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+      <path
+        d="M12.375 9.5625C14.6925 7.455 16.875 5.4825 16.875 3.7875C16.875 2.4 15.7875 1.3125 14.4 1.3125C13.62 1.3125 12.8625 1.68 12.375 2.25C11.88 1.68 11.13 1.3125 10.35 1.3125C8.9625 1.3125 7.875 2.4 7.875 3.7875C7.875 5.4825 10.0575 7.455 12.375 9.5625ZM10.35 2.8125C10.68 2.8125 11.0175 2.97 11.235 3.225L12.375 4.5675L13.515 3.225C13.7325 2.97 14.07 2.8125 14.4 2.8125C14.955 2.8125 15.375 3.2325 15.375 3.7875C15.375 4.6275 13.845 6.165 12.375 7.53C10.905 6.165 9.375 4.62 9.375 3.7875C9.375 3.2325 9.795 2.8125 10.35 2.8125Z"
+        fill="#DBDBDB"
+      />
+      <path
+        d="M14.625 11.8125H13.125C13.125 10.9125 12.5625 10.1025 11.7225 9.7875L7.1025 8.0625H1.125V16.3125H5.625V15.2325L10.875 16.6875L16.875 14.8125V14.0625C16.875 12.8175 15.87 11.8125 14.625 11.8125ZM2.625 14.8125V9.5625H4.125V14.8125H2.625ZM10.8525 15.12L5.625 13.6725V9.5625H6.8325L11.1975 11.19C11.4525 11.2875 11.625 11.535 11.625 11.8125C11.625 11.8125 10.1325 11.775 9.9 11.7L8.115 11.1075L7.6425 12.5325L9.4275 13.125C9.81 13.2525 10.2075 13.32 10.6125 13.32H14.625C14.9175 13.32 15.18 13.4925 15.3 13.74L10.8525 15.12Z"
+        fill="#DBDBDB"
+      />
+    </svg>
+  );
+};
+
+return { Volunteer };
diff --git a/apps/potlock/widget/Components/ui/Button.jsx b/apps/potlock/widget/Components/ui/Button.jsx
@@ -0,0 +1,246 @@
+const { Volunteer } = VM.require("potlock.near/widget/Components.Icons") || {
+  Volunteer: () => <></>,
+};
+
+const StyledButton = styled.button`
+  all: unset;
+  width: 120px;
+  height: 22px;
+  border-radius: 6px;
+  padding: 9px 16px 9px 12px;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  // font-family: "Mona Sans", sans-serif;
+  line-height: 22px;
+  text-align: center;
+  font-feature-settings: "ss01" on, "salt" on;
+  /* Mona sans/Text sm/14px:Medium */
+
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 22px; /* 157.143% */
+  flex-shrink: 0;
+  transition: all 200ms cubic-bezier(0.17, 0.67, 0.83, 0.67);
+
+  flex-direction: ${(props) => {
+    if (props.direction === "right") {
+      return "row";
+    } else if (props.direction === "left") {
+      return "row-reverse";
+    }
+  }};
+
+  svg path {
+    fill: ${(props) => {
+      switch (props.variant) {
+        case "outline":
+          return "rgba(123, 123, 123, 1)";
+        case "tonal":
+          return "#656565";
+        case "standard":
+          return "#FFFFFF";
+        case "primary":
+          return "#FFFFFF";
+        case "brand-outline":
+          return "hsla(358, 88%, 71%, 1)";
+      }
+    }};
+  }
+
+  background: ${(props) => {
+    switch (props.variant) {
+      case "outline":
+        return "var(--button-outline-bg, Neutral/White)";
+      case "tonal":
+        return "var(--button-tonal-bg,#FEF6EE) ";
+      case "standard":
+        return "var(--button-standard-bg, #3D3D3D)";
+      case "primary":
+        return "var(--button-primary-bg, #DD3345)";
+      case "brand-outline":
+        return "hsla(0, 0%, 100%, 0.01)";
+    }
+  }};
+
+  color: ${(props) => {
+    switch (props.variant) {
+      case "outline":
+        return "var(--button-outline-color, #292929)";
+      case "tonal":
+        return "var(--button-tonal-color,#292929) ";
+      case "standard":
+        return "var(--button-standard-color, #FFFFFF)";
+      case "primary":
+        return "var(--button-primary-color, #FFFFFF)";
+      case "brand-outline":
+        return "hsla(354, 71%, 53%, 1)";
+    }
+  }};
+
+  box-shadow: ${(props) => {
+    switch (props.variant) {
+      case "outline":
+        return "0px 0px 0px 1px rgba(0, 0, 0, 0.22) inset, 0px -1px 0px 0px rgba(15, 15, 15, 0.15) inset, 0px 1px 2px -0.5px rgba(5, 5, 5, 0.08);";
+      case "tonal":
+        return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px #FFF inset, 0px 0px 0px 2px #FFF inset, 0px 1.5px 0px 0px rgba(0, 0, 0, 0.84);";
+      case "standard":
+        return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(166, 166, 166, 0.40) inset, 0px 0px 0px 2px rgba(166, 166, 166, 0.40) inset, 0px 1px 2px 0px rgba(15, 15, 15, 0.15), 0px 1px 3px -1px rgba(5, 5, 5, 0.08);";
+      case "primary":
+        return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(246, 118, 122, 0.50) inset, 0px 0px 0px 2px rgba(246, 118, 122, 0.50) inset, 0px 1.5px 0px 0px rgba(0, 0, 0, 0.84);";
+      case "brand-outline":
+        return "0px 0px 0px 1px rgba(243, 78, 95, 0.78) inset, 0px -1px 0px 0px rgba(73, 8, 19, 0.50) inset, 0px 1px 2px -0.5px rgba(73, 8, 19, 0.20);";
+    }
+  }};
+
+  &:hover:not(:disabled) {
+    transform: ${(props) => {
+      switch (props.variant) {
+        case "primary":
+        case "tonal":
+          return "translateY(1px)";
+      }
+    }};
+    box-shadow: ${(props) => {
+      switch (props.variant) {
+        case "primary":
+          return " 0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px #ED464F inset;";
+        case "outline":
+          return " 0px 0px 0px 1px rgba(0, 0, 0, 0.22) inset, 0px -1px 0px 0px rgba(15, 15, 15, 0.15) inset, 0px 1px 2px -0.5px rgba(5, 5, 5, 0.08);";
+        case "standard":
+          return " 0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(166, 166, 166, 0.40) inset, 0px 0px 0px 2px rgba(166, 166, 166, 0.40) inset, 0px 1px 2px 0px rgba(15, 15, 15, 0.15), 0px 1px 3px -1px rgba(5, 5, 5, 0.08);";
+        case "tonal":
+          return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px #FFF inset;";
+        case "brand-outline":
+          return "0px 0px 0px 1px rgba(243, 78, 95, 0.78) inset, 0px -1px 0px 0px rgba(73, 8, 19, 0.50) inset, 0px 1px 2px -0.5px rgba(73, 8, 19, 0.20);";
+      }
+    }};
+    background: ${(props) => {
+      switch (props.variant) {
+        case "primary":
+          return " #DD3345";
+        case "outline":
+          return "Neutral/50";
+        case "standard":
+          return " #525252";
+        case "tonal":
+          return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px #FFF inset;";
+        case "brand-outline":
+          return "#FEF3F2";
+      }
+    }};
+  }
+
+  &:focus:not(:disabled) {
+    box-shadow: ${(props) => {
+      switch (props.variant) {
+        case "outline":
+          return "0px 0px 0px 1px rgba(0, 0, 0, 0.22) inset, 0px -1px 0px 0px rgba(15, 15, 15, 0.15) inset, 0px 1px 2px -0.5px rgba(5, 5, 5, 0.08), 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);";
+        case "primary":
+          return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);";
+        case "standard":
+          return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(166, 166, 166, 0.30) inset, 0px 0px 0px 2px rgba(166, 166, 166, 0.30) inset, 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);";
+        case "tonal":
+          return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);";
+        case "brand-outline":
+          return "0px 0px 0px 1px rgba(243, 78, 95, 0.78) inset, 0px -1px 0px 0px rgba(73, 8, 19, 0.50) inset, 0px 1px 2px -0.5px rgba(5, 5, 5, 0.08), 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);";
+      }
+    }};
+  }
+
+  &:disabled {
+    color: ${(props) => {
+      switch (props.variant) {
+        case "outline":
+          return "hsla(0, 0%, 78%, 1)"; // Adjust color value
+        case "standard":
+          return "hsla(0, 0%, 65%, 1)"; // Use CSS variable for color or specify a fallback
+        default:
+          return "inherit"; // Fallback to default color
+      }
+    }};
+
+    box-shadow: ${(props) => {
+      switch (props.variant) {
+        case "outline":
+          return "0px 0px 0px 1px rgba(15, 15, 15, 0.15) inset;"; // Adjust box-shadow value
+        case "standard":
+          return "0px 0px 0px 1px rgba(15, 15, 15, 0.15) inset;"; // Adjust box-shadow value
+        default:
+          return "none"; // No box-shadow for other variants
+      }
+    }};
+    background: ${(props) => {
+      switch (props.variant) {
+        case "outline":
+          return "var(--button-outline-bg-disabled, #fff)"; // Use CSS variable for background or specify a fallback
+        case "standard":
+          return "var(--button-standard-bg-disabled, #EBEBEB)"; // Use CSS variable for background or specify a fallback
+        default:
+          return "inherit"; // Fallback to default background
+      }
+    }};
+  }
+`;
+
+const TipOnPotlock = ({ direction, variant, onClick, href, ...restProps }) => {
+  if (href) {
+    return (
+      <Link href={href}>
+        <StyledButton
+          direction={direction ?? "right"}
+          onClick={onClick}
+          {...restProps}
+          variant={variant ?? "primary"}
+        >
+          <Volunteer />
+          Tip on Potlock
+        </StyledButton>
+      </Link>
+    );
+  }
+  return (
+    <StyledButton
+      direction={direction ?? "right"}
+      onClick={onClick}
+      {...restProps}
+      variant={variant ?? "primary"}
+    >
+      <Volunteer />
+      Tip on Potlock
+    </StyledButton>
+  );
+};
+
+const Button = ({ direction, disabled, children, onClick, href, ...restProps }) => {
+  if (href) {
+    return (
+      <link to={href}>
+        <StyledButton
+          direction={direction ?? "right"}
+          onClick={onClick}
+          disabled={disabled}
+          {...restProps}
+        >
+          {children}
+        </StyledButton>
+      </link>
+    );
+  }
+  return (
+    <StyledButton
+      direction={direction ?? "right"}
+      onClick={onClick}
+      disabled={disabled}
+      {...restProps}
+    >
+      {children}
+    </StyledButton>
+  );
+};
+
+return { Button, TipOnPotlock };