From 01df85f7a52ae9d726432524d7344282431dcdb4 Mon Sep 17 00:00:00 2001
From: Mike Smith <mic-smith@users.noreply.github.com>
Date: Wed, 27 Nov 2024 16:50:45 +0000
Subject: [PATCH] FS-73 Add outline button component (#40)

---
 frontend/.prettierrc.json                 |  2 +-
 frontend/src/components/button.module.css | 25 ++++++++++++++++++++
 frontend/src/components/button.tsx        | 28 +++++++++++++++++++----
 3 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/frontend/.prettierrc.json b/frontend/.prettierrc.json
index 1d01da02..3baced41 100644
--- a/frontend/.prettierrc.json
+++ b/frontend/.prettierrc.json
@@ -1,4 +1,4 @@
 {
   "singleQuote": true,
-  "endOfLine": "lf"
+  "endOfLine": "auto"
 }
diff --git a/frontend/src/components/button.module.css b/frontend/src/components/button.module.css
index f5b8ad4e..bdbfad14 100644
--- a/frontend/src/components/button.module.css
+++ b/frontend/src/components/button.module.css
@@ -1,6 +1,11 @@
 .button_container {
   background-color: var(--primary);
   border-radius: 20px;
+  display: inline-block;
+}
+
+.button_container.outline {
+  background-color: transparent;
 }
 
 .button_container:not(:has(.withText)) {
@@ -45,11 +50,31 @@
   background-color: var(--primary-dark);
 }
 
+.outline {
+  .button {
+    border: 1px solid var(--grey-600);
+  }
+
+  .button:not(:disabled):hover {
+    background-color: rgb(224 221 220 / 0.4); /* --grey-300 */
+  }
+
+  .button.pressed,
+  .button:active:enabled {
+    background-color: rgb(224 221 220 / 0.7); /* --grey-300 */
+    border: 1px solid var(--primary);
+  }
+}
+
 .button_container:has(.button:disabled) {
   background-color: var(--grey-400);
   opacity: 0.5;
 }
 
+.button_container.outline:has(.button:disabled) {
+  background-color: transparent;
+}
+
 .iconBaseStyle {
   margin-right: 8px;
 }
diff --git a/frontend/src/components/button.tsx b/frontend/src/components/button.tsx
index 7e09adf9..ae6d767a 100644
--- a/frontend/src/components/button.tsx
+++ b/frontend/src/components/button.tsx
@@ -1,27 +1,47 @@
 import React from 'react';
 import styles from './button.module.css';
+import classNames from 'classnames';
 
 interface ButtonProps {
   text?: string;
   icon?: string;
   disabled?: boolean;
+  isOutline?: boolean;
+  isPressed?: boolean;
   onClick?: () => void;
 }
 
-export const Button = ({ text, icon, disabled, onClick }: ButtonProps) => {
+export const Button = ({
+  text,
+  icon,
+  disabled,
+  isOutline,
+  isPressed,
+  onClick,
+}: ButtonProps) => {
   const isIconOnly = !text && icon;
 
   return (
-    <div className={styles.button_container}>
+    <div
+      className={classNames(styles.button_container, {
+        [styles.outline]: isOutline,
+      })}
+    >
       <button
         disabled={disabled}
-        className={`${styles.button} ${isIconOnly ? styles.iconOnly : styles.withText}`}
+        className={classNames(styles.button, {
+          [styles.iconOnly]: isIconOnly,
+          [styles.withText]: !isIconOnly,
+          [styles.pressed]: isPressed,
+        })}
         onClick={onClick}
       >
         {icon && (
           <img
             src={icon}
-            className={`${styles.iconBaseStyle} ${isIconOnly ? styles.iconOnlyStyle : ''}`}
+            className={classNames(styles.iconBaseStyle, {
+              [styles.iconOnlyStyle]: isIconOnly,
+            })}
           />
         )}
         {text}