Scipaper/Frontend
5
0
Fork 0
Code Issues 15 Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'feature/add-button-component' into feature/modal-bottom-sheet-bar

Browse Source
This commit is contained in:
Maximus 2022-08-12 17:09:05 +03:00
commit 2913a3368a
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 */ /* Component props */
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
type ButtonProps = { type ButtonProps = {
defaultStyle?: boolean;
emphasis?: StyleType | undefined; //Choose one of three variants of button. By default it will be "high" emphasis?: StyleType | undefined; //Choose one of three variants of button. By default it will be "high"
disabled?: boolean; disabled?: boolean;
} & Omit<React.ComponentPropsWithoutRef<"button">, "">; } & Omit<React.ComponentPropsWithoutRef<"button">, "">;
@ -30,6 +31,7 @@ type ButtonProps = {
/* Component implementation */ /* Component implementation */
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
export const Button: React.FC<ButtonProps> & ButtonExtentions = ({ export const Button: React.FC<ButtonProps> & ButtonExtentions = ({
defaultStyle = true,
emphasis = "high", emphasis = "high",
disabled = false, disabled = false,
className, className,
@ -62,17 +64,24 @@ export const Button: React.FC<ButtonProps> & ButtonExtentions = ({
}, },
{ {
// Define high emphasis // Define high emphasis
[`${btnEmphasis.EnableHigh}`]: !disabled && emphasis === "high", [`${btnEmphasis.EnableHigh}`]:
[`${btnEmphasis.DisabledHigh}`]: disabled && emphasis === "high", defaultStyle && !disabled && emphasis === "high",
[`${btnEmphasis.GeneralHigh}`]: emphasis === "high", [`${btnEmphasis.DisabledHigh}`]:
// Dbtnefine medium emphasis defaultStyle && disabled && emphasis === "high",
[`${btnEmphasis.EnabledMedium}`]: !disabled && emphasis === "medium", [`${btnEmphasis.GeneralHigh}`]: defaultStyle && emphasis === "high",
[`${btnEmphasis.DisabledMedium}`]: disabled && emphasis === "medium", // Define medium emphasis
[`${btnEmphasis.GeneralMedium}`]: emphasis === "medium", [`${btnEmphasis.EnabledMedium}`]:
// Dbtnefine low emphasis defaultStyle && !disabled && emphasis === "medium",
[`${btnEmphasis.EnabledLow}`]: !disabled && emphasis === "low", [`${btnEmphasis.DisabledMedium}`]:
[`${btnEmphasis.DisabledLow}`]: disabled && emphasis === "low", defaultStyle && disabled && emphasis === "medium",
[`${btnEmphasis.GenerealLow}`]: emphasis === "low", [`${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, className,
])} ])}