Add link type to Button Component

actualbudget · Sep 22, 2023 · 2ec8464 · 2ec8464
1 parent ba5174d
commit 2ec8464
Showing 1 changed file with 11 additions and 1 deletion.
diff --git a/packages/desktop-client/src/components/common/Button.tsx b/packages/desktop-client/src/components/common/Button.tsx
@@ -22,7 +22,7 @@ type ButtonProps = HTMLProps<HTMLButtonElement> & {
   as?: ElementType;
 };
 
-type ButtonType = 'normal' | 'primary' | 'bare';
+type ButtonType = 'normal' | 'primary' | 'bare' | 'link';
 
 const backgroundColor = {
   normal: theme.buttonNormalBackground,
@@ -33,6 +33,7 @@ const backgroundColor = {
   bareDisabled: theme.buttonBareDisabledBackground,
   menu: theme.buttonMenuBackground,
   menuSelected: theme.buttonMenuSelectedBackground,
+  link: theme.buttonBareBackground,
 };
 
 const backgroundColorHover = {
@@ -41,6 +42,7 @@ const backgroundColorHover = {
   bare: theme.buttonBareBackgroundHover,
   menu: theme.buttonMenuBackgroundHover,
   menuSelected: theme.buttonMenuSelectedBackgroundHover,
+  link: theme.buttonBareBackground,
 };
 
 const borderColor = {
@@ -50,6 +52,7 @@ const borderColor = {
   primaryDisabled: theme.buttonPrimaryDisabledBorder,
   menu: theme.buttonMenuBorder,
   menuSelected: theme.buttonMenuSelectedBorder,
+  link: theme.buttonBareBackground,
 };
 
 const textColor = {
@@ -61,6 +64,7 @@ const textColor = {
   bareDisabled: theme.buttonBareDisabledText,
   menu: theme.buttonMenuText,
   menuSelected: theme.buttonMenuSelectedText,
+  link: theme.pageTextLink,
 };
 
 const textColorHover = {
@@ -71,6 +75,11 @@ const textColorHover = {
   menuSelected: theme.buttonMenuSelectedTextHover,
 };
 
+const linkButtonHoverStyles = {
+  textDecoration: 'underline',
+  boxShadow: 'none',
+};
+
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
@@ -94,6 +103,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     hoveredStyle = {
       ...(type !== 'bare' && styles.shadow),
+      ...(type === 'link' && linkButtonHoverStyles),
       backgroundColor: backgroundColorHover[type],
       color: color || textColorHover[type],
       ...hoveredStyle,