Merge pull request #264 from web3ui/feat/button-transparent-bg

feat: Add transparent button, without hover effect
web3ui · Mar 10, 2022 · 60df703 · 60df703
2 parents 29c0a35 + a3061f8
commit 60df703
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
 }