components: Add Button/Btn

packages/components/package.json

@@ -2,7 +2,7 @@
   "name": "@dolthub/react-components",
   "author": "DoltHub",
   "description": "A collection of React components for common tasks",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",

packages/components/src/Btn/index.module.css

@@ -0,0 +1,4 @@
+.btn {
+  @apply bg-transparent;
+  background-image: none;
+}

packages/components/src/Btn/index.tsx

@@ -0,0 +1,20 @@
+import cx from "classnames";
+import React, { ButtonHTMLAttributes } from "react";
+import css from "./index.module.css";
+
+// Default button with no styling except for transparent background. This was
+// created due to this tailwind issue
+// https://github.com/tailwindlabs/tailwindcss/discussions/5969
+// We do not want to apply transparent backgrounds to buttons globally because it affects the
+// background of buttons of other colors in local development.
+export default function Btn({
+  children,
+  className,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button className={cx(css.btn, className)} type="button" {...props}>
+      {children}
+    </button>
+  );
+}

packages/components/src/Button/index.module.css

@@ -0,0 +1,141 @@
+.button {
+  @apply rounded px-8 py-1 outline-none text-white text-sm font-semibold leading-relaxed button-shadow bg-button-1;
+
+  &:hover {
+    @apply button-shadow-hover bg-button-2;
+  }
+
+  &:focus {
+    @apply outline-none widget-shadow-lightblue;
+  }
+
+  &:disabled {
+    @apply cursor-default bg-acc-light-text;
+
+    &:hover {
+      @apply button-shadow bg-acc-light-text;
+    }
+  }
+}
+
+.outlined {
+  @apply rounded px-12 py-1 outline-none font-semibold leading-relaxed border button-shadow bg-transparent text-button-1 border-button-1;
+
+  &:hover {
+    @apply border-button-2 text-button-2;
+  }
+
+  &:focus {
+    @apply outline-none widget-shadow-lightblue;
+  }
+
+  &:disabled {
+    @apply cursor-default border-acc-light-text text-acc-light-text;
+
+    &:hover {
+      @apply border-acc-light-text text-acc-light-text;
+    }
+  }
+}
+
+.link {
+  @apply text-link-1 font-semibold text-sm leading-relaxed bg-transparent;
+
+  &:hover {
+    @apply text-link-2;
+  }
+
+  &:disabled {
+    @apply text-ld-darkgrey;
+
+    &:hover {
+      @apply text-ld-darkgrey;
+    }
+  }
+
+  &:focus {
+    @apply outline-none widget-shadow-lightblue;
+  }
+}
+
+.dark {
+  @apply bg-primary;
+
+  &:hover {
+    @apply bg-acc-hoverblue;
+  }
+}
+
+.red {
+  @apply bg-acc-red;
+
+  &:hover {
+    @apply bg-acc-hoverred;
+  }
+}
+
+.green {
+  @apply bg-acc-green;
+
+  &:hover {
+    @apply bg-acc-hovergreen;
+  }
+}
+
+.white {
+  @apply bg-white text-link-1 shadow-none;
+
+  &:hover {
+    @apply bg-white/70;
+  }
+
+  &:disabled {
+    @apply text-white;
+  }
+}
+
+.gradient {
+  background: linear-gradient(92.21deg, #6db0fc 11.79%, #5deda2 113.81%);
+
+  &:disabled {
+    background: linear-gradient(92.21deg, #6db0fc 11.79%, #5deda2 113.81%);
+  }
+}
+
+.redText {
+  @apply text-acc-red;
+
+  &:hover {
+    @apply text-acc-hoverred;
+  }
+}
+
+.greenText {
+  @apply text-acc-green;
+
+  &:hover {
+    @apply text-acc-hovergreen;
+  }
+}
+
+.darkText {
+  @apply text-primary;
+
+  &:hover {
+    @apply text-acc-hoverblue;
+  }
+}
+
+.pill {
+  @apply rounded-full text-base;
+}
+
+.underlined {
+  @apply underline px-2;
+}
+
+.group {
+  button:not(:last-of-type) {
+    @apply mr-3;
+  }
+}

packages/components/src/Button/index.tsx

@@ -0,0 +1,114 @@
+import cx from "classnames";
+import React, { ButtonHTMLAttributes } from "react";
+import css from "./index.module.css";
+
+type VariantProps = {
+  red?: boolean;
+  green?: boolean;
+  dark?: boolean;
+  pill?: boolean;
+  white?: boolean;
+  gradient?: boolean;
+};
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+type Props = ButtonProps & VariantProps;
+
+const Button = ({
+  children,
+  className,
+  red = false,
+  green = false,
+  dark = false,
+  pill = false,
+  white = false,
+  gradient = false,
+  ...props
+}: Props) => (
+  <button
+    className={cx(
+      css.button,
+      {
+        [css.red]: red,
+        [css.green]: green,
+        [css.dark]: dark,
+        [css.pill]: pill,
+        [css.white]: white,
+        [css.gradient]: gradient,
+      },
+      className,
+    )}
+    type="button"
+    // These props need to come last
+    {...props}
+  >
+    {children}
+  </button>
+);
+
+const Outlined = ({
+  children,
+  className,
+  pill = false,
+  ...props
+}: ButtonProps & { pill?: boolean }) => (
+  <button
+    className={cx(css.outlined, { [css.pill]: pill }, className)}
+    type="button"
+    // These props need to come last
+    {...props}
+  >
+    {children}
+  </button>
+);
+
+Button.Outlined = Outlined;
+
+type LinkProps = Props & {
+  underlined?: boolean;
+};
+
+const Link = ({
+  children,
+  className,
+  red = false,
+  green = false,
+  dark = false,
+  underlined = false,
+  ...props
+}: LinkProps) => (
+  <button
+    className={cx(
+      css.link,
+      {
+        [css.redText]: red,
+        [css.greenText]: green,
+        [css.darkText]: dark,
+        [css.underlined]: underlined,
+      },
+      className,
+    )}
+    type="button"
+    // These props need to come last
+    {...props}
+  >
+    {children}
+  </button>
+);
+
+Button.Link = Link;
+
+type GroupProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+const Group = ({ children, className }: GroupProps) => (
+  <div className={cx(css.group, className)} aria-label="button-group">
+    {children}
+  </div>
+);
+
+Button.Group = Group;
+
+export default Button;

packages/components/src/ExternalLink/index.module.css

@@ -1,7 +1,7 @@
 .link {
-  @apply font-semibold text-link-2;
+  @apply font-semibold text-link-1;
 
   &:hover {
-    @apply text-link-1;
+    @apply text-link-2;
   }
 }

packages/components/src/Textarea/index.module.css

@@ -1,9 +1,5 @@
 .container {
   @apply max-w-xl w-full text-primary mb-4;
-
-  &:focus-within {
-    @apply bg-white;
-  }
 }
 
 .mobileFriendly {