components: Button props

Author: tbantle22

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

@@ -0,0 +1,87 @@
+.button {
+  @apply outline-none text-white font-semibold leading-relaxed button-shadow;
+
+  &:hover {
+    @apply button-shadow-hover;
+  }
+
+  &:focus {
+    @apply outline-none widget-shadow-lightblue;
+  }
+
+  &:disabled {
+    @apply cursor-default bg-acc-light-text text-white;
+
+    &:hover {
+      @apply button-shadow bg-acc-light-text;
+    }
+  }
+}
+
+/* COLOR VARIANTS */
+
+.color-default {
+  @apply bg-button-1 hover:bg-button-2;
+}
+
+.color-dark {
+  @apply bg-primary hover:bg-acc-hoverblue;
+}
+
+.color-red {
+  @apply bg-acc-red hover:bg-acc-hoverred;
+}
+
+.color-green {
+  @apply bg-acc-green hover:bg-acc-hovergreen;
+}
+
+.color-white {
+  @apply bg-white text-link-1 shadow-none;
+
+  &:hover {
+    @apply bg-white/70;
+  }
+}
+
+.color-gradient {
+  background: linear-gradient(92.21deg, #6db0fc 11.79%, #5deda2 113.81%);
+
+  &:disabled {
+    background: linear-gradient(92.21deg, #6db0fc 11.79%, #5deda2 113.81%);
+  }
+}
+
+/* SHAPE VARIANTS */
+
+.shape-default {
+  @apply rounded;
+}
+
+.shape-pill {
+  @apply rounded-full;
+}
+
+/* SIZE VARIANTS */
+
+.size-small {
+  @apply px-3 py-0.5 text-sm;
+}
+
+.size-medium {
+  @apply px-6 py-1.5 text-base;
+}
+
+.size-large {
+  @apply px-8 py-2 text-base;
+}
+
+/* ICON */
+
+.withIcon {
+  @apply flex items-center justify-center;
+
+  svg {
+    @apply mr-2;
+  }
+}

packages/components/src/Button/Default/index.tsx

@@ -0,0 +1,36 @@
+import cx from "classnames";
+import React from "react";
+import { Props } from "../types";
+import css from "./index.module.css";
+
+function Button({
+  children,
+  className,
+  icon,
+  color = "default",
+  size = "medium",
+  shape = "default",
+  ...props
+}: Props) {
+  return (
+    <button
+      className={cx(
+        css.button,
+        css[`color-${color}`],
+        css[`shape-${shape}`],
+        css[`size-${size}`],
+        { [css.withIcon]: !!icon },
+        className,
+      )}
+      type="button"
+      data-testid="default-button"
+      // These props need to come last
+      {...props}
+    >
+      {icon}
+      {children}
+    </button>
+  );
+}
+
+export default Button;

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

@@ -0,0 +1,5 @@
+.group {
+  button:not(:last-of-type) {
+    @apply mr-3;
+  }
+}

packages/components/src/Button/Group/index.tsx

@@ -0,0 +1,18 @@
+import cx from "classnames";
+import React from "react";
+import css from "./index.module.css";
+
+type GroupProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+function Group({ children, className }: GroupProps) {
+  return (
+    <div className={cx(css.group, className)} aria-label="button-group">
+      {children}
+    </div>
+  );
+}
+
+export default Group;

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

@@ -0,0 +1,61 @@
+.buttonLink {
+  @apply font-semibold text-sm leading-relaxed bg-transparent;
+
+  &:focus {
+    @apply outline-none widget-shadow-lightblue;
+  }
+
+  &:disabled {
+    @apply text-ld-darkgrey;
+
+    &:hover {
+      @apply text-ld-darkgrey;
+    }
+  }
+}
+
+.underlined {
+  @apply underline px-2;
+}
+
+/* COLOR VARIANTS */
+
+.color-default {
+  @apply text-link-1 hover:text-link-2;
+}
+
+.color-dark {
+  @apply text-primary hover:text-acc-hoverblue;
+}
+
+.color-red {
+  @apply text-acc-red hover:text-acc-hoverred;
+}
+
+.color-green {
+  @apply text-acc-green hover:text-acc-hovergreen;
+}
+
+/* SIZE VARIANTS */
+
+.size-small {
+  @apply text-sm;
+}
+
+.size-medium {
+  @apply text-base;
+}
+
+.size-large {
+  @apply text-lg;
+}
+
+/* ICON */
+
+.withIcon {
+  @apply flex items-center justify-center;
+
+  svg {
+    @apply mr-2;
+  }
+}

packages/components/src/Button/Link/index.tsx

@@ -0,0 +1,41 @@
+import cx from "classnames";
+import React from "react";
+import { Props } from "../types";
+import css from "./index.module.css";
+
+type LinkProps = Props & {
+  underlined?: boolean;
+};
+
+function Link({
+  children,
+  className,
+  icon,
+  color = "default",
+  size = "medium",
+  underlined = false,
+  ...props
+}: LinkProps) {
+  return (
+    <button
+      className={cx(
+        css.buttonLink,
+        css[`color-${color}`],
+        css[`size-${size}`],
+        {
+          [css.withIcon]: !!icon,
+          [css.underlined]: underlined,
+        },
+        className,
+      )}
+      type="button"
+      // These props need to come last
+      {...props}
+    >
+      {icon}
+      {children}
+    </button>
+  );
+}
+
+export default Link;

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

@@ -0,0 +1,83 @@
+.buttonOutlined {
+  @apply outline-none font-semibold leading-relaxed border button-shadow bg-transparent;
+
+  &: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;
+    }
+  }
+}
+
+/* COLOR VARIANTS */
+
+.color-default {
+  @apply border-button-1 text-button-1;
+
+  &:hover {
+    @apply border-button-2 text-button-2;
+  }
+}
+
+.color-dark {
+  @apply border-primary text-primary;
+
+  &:hover {
+    @apply border-acc-hoverblue text-acc-hoverblue;
+  }
+}
+
+.color-red {
+  @apply border-acc-red text-acc-red;
+
+  &:hover {
+    @apply border-acc-hoverred text-acc-hoverred;
+  }
+}
+
+.color-green {
+  @apply border-acc-green text-acc-green;
+
+  &:hover {
+    @apply border-acc-hovergreen text-acc-hovergreen;
+  }
+}
+
+/* SHAPE VARIANTS */
+
+.shape-default {
+  @apply rounded;
+}
+
+.shape-pill {
+  @apply rounded-full;
+}
+
+/* SIZE VARIANTS */
+
+.size-small {
+  @apply px-3 py-0.5 text-sm;
+}
+
+.size-medium {
+  @apply px-6 py-1.5 text-base;
+}
+
+.size-large {
+  @apply px-8 py-2 text-base;
+}
+
+/* ICON */
+
+.withIcon {
+  @apply flex items-center justify-center;
+
+  svg {
+    @apply mr-2;
+  }
+}

packages/components/src/Button/Outlined/index.tsx

@@ -0,0 +1,35 @@
+import cx from "classnames";
+import React from "react";
+import { Props } from "../types";
+import css from "./index.module.css";
+
+function Outlined({
+  children,
+  className,
+  icon,
+  color = "default",
+  size = "medium",
+  shape = "default",
+  ...props
+}: Props) {
+  return (
+    <button
+      className={cx(
+        css.buttonOutlined,
+        css[`color-${color}`],
+        css[`shape-${shape}`],
+        css[`size-${size}`],
+        { [css.withIcon]: !!icon },
+        className,
+      )}
+      type="button"
+      // These props need to come last
+      {...props}
+    >
+      {icon}
+      {children}
+    </button>
+  );
+}
+
+export default Outlined;