From a3061f8340dd36c33671d500a935da58d65b2597 Mon Sep 17 00:00:00 2001
From: dani <martinelli.daniele7@gmail.com>
Date: Thu, 10 Mar 2022 15:39:34 +0100
Subject: [PATCH] feat: Add transparent button, without hover effect

---
 src/components/Button/Button.styles.ts         | 11 +++++++++--
 src/components/Button/Button.tsx               |  2 ++
 src/components/Button/styles/inititalStyles.ts | 18 ++++++++++++------
 src/components/Button/types.ts                 |  5 +++++
 4 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/components/Button/Button.styles.ts b/src/components/Button/Button.styles.ts
index bd6d3b5b9..fa0d8dd6c 100644
--- a/src/components/Button/Button.styles.ts
+++ b/src/components/Button/Button.styles.ts
@@ -1,7 +1,11 @@
 import styled from 'styled-components';
 import type { ButtonProps } from './types';
-
-import { initialStyles, isLoadingMode } from './styles/inititalStyles';
+import {
+    hoverEffect,
+    initialStyles,
+    isLoadingMode,
+    transparent,
+} from './styles/inititalStyles';
 import {
     primary,
     regular,
@@ -32,6 +36,7 @@ type TStyleProps = Pick<
     | 'isFullWidth'
     | 'isLoading'
     | 'radius'
+    | 'isTransparent'
 >;
 
 const getThemeStyles = (theme: string) => {
@@ -113,4 +118,6 @@ export const ButtonStyled = styled.button<TStyleProps>`
     ${(p) => p.isLoading && isLoadingMode}
 
     ${(p) => p.radius && `border-radius: ${p.radius}px`}
+
+    ${(p) => (p.isTransparent ? transparent : hoverEffect)}
 `;
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 1f25aff64..1d5d0772f 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -20,9 +20,11 @@ const Button: React.FC<ButtonProps> = ({
     type = 'button',
     loadingProps,
     radius,
+    isTransparent = false,
 }: ButtonProps) => {
     return (
         <ButtonStyled
+            isTransparent={isTransparent}
             color={color}
             data-testid="test-button"
             disabled={disabled || isLoading}
diff --git a/src/components/Button/styles/inititalStyles.ts b/src/components/Button/styles/inititalStyles.ts
index b35157dee..7af89a72e 100644
--- a/src/components/Button/styles/inititalStyles.ts
+++ b/src/components/Button/styles/inititalStyles.ts
@@ -45,12 +45,6 @@ export const initialStyles = css`
         z-index: 0;
     }
 
-    :hover {
-        :after {
-            background-color: ${getShade('dark', 10)};
-        }
-    }
-
     :active {
         border-color: ${color.blue};
     }
@@ -66,3 +60,15 @@ export const isLoadingMode = css`
         margin-left: 12px;
     }
 `;
+
+export const hoverEffect = css`
+    :hover {
+        :after {
+            background-color: ${getShade('dark', 10)};
+        }
+    }
+`;
+
+export const transparent = css`
+    background-color: transparent;
+`;
diff --git a/src/components/Button/types.ts b/src/components/Button/types.ts
index 381b43c34..8c0d8257e 100644
--- a/src/components/Button/types.ts
+++ b/src/components/Button/types.ts
@@ -77,4 +77,9 @@ export interface ButtonProps {
      * Border radius prop, allows a button to have a custom border radius
      */
     radius?: number;
+
+    /**
+     * The background color is set to `transparent` and the hover effect is disabled
+     */
+    isTransparent?: boolean;
 }