Scipaper/front-end
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

closed issue #72 add ability to custom styles for button

Browse Source
This commit is contained in:
Maximus 2022-08-12 17:00:15 +03:00
parent 4083efda62
commit a17af4002f
1 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/Button/Button.tsx
View File

@ -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,
])}