From a17af4002fd054749841d55f8bd2f53dabb030ce Mon Sep 17 00:00:00 2001
From: Maximus <ten.maksim97@gmail.com>
Date: Fri, 12 Aug 2022 17:00:15 +0300
Subject: [PATCH] closed issue #72 add ability to custom styles for button
---
src/components/Button/Button.tsx | 31 ++++++++++++++++++++-----------
1 file changed, 20 insertions(+), 11 deletions(-)
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index e5fd5fa..7928c33 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -22,6 +22,7 @@ type ButtonExtentions = {
/* Component props */
/* -------------------------------------------------------------------------- */
type ButtonProps = {
+ defaultStyle?: boolean;
emphasis?: StyleType | undefined; //Choose one of three variants of button. By default it will be "high"
disabled?: boolean;
} & Omit<React.ComponentPropsWithoutRef<"button">, "">;
@@ -30,6 +31,7 @@ type ButtonProps = {
/* Component implementation */
/* -------------------------------------------------------------------------- */
export const Button: React.FC<ButtonProps> & ButtonExtentions = ({
+ defaultStyle = true,
emphasis = "high",
disabled = false,
className,
@@ -62,17 +64,24 @@ export const Button: React.FC<ButtonProps> & ButtonExtentions = ({
},
{
// Define high emphasis
- [`${btnEmphasis.EnableHigh}`]: !disabled && emphasis === "high",
- [`${btnEmphasis.DisabledHigh}`]: disabled && emphasis === "high",
- [`${btnEmphasis.GeneralHigh}`]: emphasis === "high",
- // Dbtnefine medium emphasis
- [`${btnEmphasis.EnabledMedium}`]: !disabled && emphasis === "medium",
- [`${btnEmphasis.DisabledMedium}`]: disabled && emphasis === "medium",
- [`${btnEmphasis.GeneralMedium}`]: emphasis === "medium",
- // Dbtnefine low emphasis
- [`${btnEmphasis.EnabledLow}`]: !disabled && emphasis === "low",
- [`${btnEmphasis.DisabledLow}`]: disabled && emphasis === "low",
- [`${btnEmphasis.GenerealLow}`]: emphasis === "low",
+ [`${btnEmphasis.EnableHigh}`]:
+ defaultStyle && !disabled && emphasis === "high",
+ [`${btnEmphasis.DisabledHigh}`]:
+ defaultStyle && disabled && emphasis === "high",
+ [`${btnEmphasis.GeneralHigh}`]: defaultStyle && emphasis === "high",
+ // Define medium emphasis
+ [`${btnEmphasis.EnabledMedium}`]:
+ defaultStyle && !disabled && emphasis === "medium",
+ [`${btnEmphasis.DisabledMedium}`]:
+ defaultStyle && disabled && emphasis === "medium",
+ [`${btnEmphasis.GeneralMedium}`]:
+ defaultStyle && emphasis === "medium",
+ // Define low emphasis
+ [`${btnEmphasis.EnabledLow}`]:
+ defaultStyle && !disabled && emphasis === "low",
+ [`${btnEmphasis.DisabledLow}`]:
+ defaultStyle && disabled && emphasis === "low",
+ [`${btnEmphasis.GenerealLow}`]: defaultStyle && emphasis === "low",
},
className,
])}