Skip to content

Commit

Permalink
chore: added new variants
Browse files Browse the repository at this point in the history
  • Loading branch information
@aizad-deriv
aizad-deriv committed Feb 28, 2024
1 parent 1fe5658 commit f90df98
Show file tree
Hide file tree
Showing 2 changed files with 186 additions and 91 deletions.
227 changes: 172 additions & 55 deletions lib/components/Button/Button.scss
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,19 @@
$color-map: (
"primary": (
backgroundcolor: #ff444f,
hover: #eb3e48,
),
"primary-light": (
backgroundcolor: #ff444f29,
hover: #ff444f3d,
color: #ff444f,
),
"white": (
backgroundcolor: #fff,
hover: #d6dadb,
),
"black": (
backgroundcolor: #0e0e0e,
hover: #323738,
),
);

$size-map: (
"sm": (
height: auto,
padding: 0.3rem 0.8rem,
),
"md": (
height: 3.2rem,
padding: 0.6rem 1.6rem,
),
"lg": (
height: 4rem,
padding: 1rem 1.6rem,
),
);
$primary: #ff444f;
$primary-light: #ff444f29;
$white: #fff;
$black: #0e0e0e;

$primary-hover: #eb3e48;
$primary-light-hover: #ff444f3d;
$white-hover: #d6dadb;
$black-hover: #323738;

.deriv-button {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
gap: 8px;
gap: 0.8rem;
cursor: pointer;
transition: ease-in-out 0.3s;

Expand All @@ -47,19 +22,18 @@ $size-map: (
cursor: not-allowed;
}

@each $size, $values in $size-map {
&__size--#{$size} {
padding: map-get($values, padding);
height: map-get($values, height);
&__size {
&--sm {
height: auto;
padding: 0.3rem 0.8rem;
}
}

@each $color, $values in $color-map {
&__color--#{$color} {
background-color: map-get($values, backgroundcolor);
&:hover:not(:disabled) {
background-color: map-get($values, hover);
}
&--md {
height: 3.2rem;
padding: 0.6rem 1.6rem;
}
&--lg {
height: 4rem;
padding: 1rem 1.6rem;
}
}

Expand All @@ -68,18 +42,12 @@ $size-map: (
border: none;
}
&--outlined {
border: 1px solid var(--system-light-3-less-prominent-text, #999);
border: 2px solid;
background: none;
&:hover:not(:disabled) {
background: #00000014;
}
}
&--ghost {
background: none;
border: none;
&:hover:not(:disabled) {
background: #ff444f14;
}
background: none;
}
}

Expand Down Expand Up @@ -111,3 +79,152 @@ $size-map: (
}
}
}

.deriv-button__variant--contained {
&.deriv-button__color--primary {
background-color: $primary;
span {
color: $white;
}
&:hover:not(:disabled) {
background-color: $primary-hover;
}
}
}

.deriv-button__variant--contained {
&.deriv-button__color--primary-light {
background-color: $primary-light;
span {
color: $primary;
}
&:hover:not(:disabled) {
background-color: $primary-light-hover;
}
}
}

.deriv-button__variant--contained {
&.deriv-button__color--white {
background-color: $white;
span {
color: $black;
}
&:hover:not(:disabled) {
background-color: $white-hover;
}
}
}

.deriv-button__variant--contained {
&.deriv-button__color--black {
background-color: $black;
span {
color: $white;
}
&:hover:not(:disabled) {
background-color: $black-hover;
}
}
}

.deriv-button__variant--outlined {
&.deriv-button__color--primary {
border-color: $primary;
span {
color: $primary;
}
&:hover:not(:disabled) {
background: $primary;
span {
color: $white;
}
}
}
}

.deriv-button__variant--outlined {
&.deriv-button__color--primary-light {
border-color: $primary;
span {
color: $primary;
}
&:hover:not(:disabled) {
background: $primary-light;
}
}
}

.deriv-button__variant--outlined {
&.deriv-button__color--white {
border-color: $white;
span {
color: $white;
}
&:hover:not(:disabled) {
background: #ffffff14;
}
}
}

.deriv-button__variant--outlined {
&.deriv-button__color--black {
border-color: #999;
span {
color: #333;
}
&:hover:not(:disabled) {
background: rgba(0, 0, 0, 0.08);
}
}
}

.deriv-button__variant--ghost {
&.deriv-button__color--primary {
span {
color: $primary;
}
&:hover:not(:disabled) {
background-color: #eb3e48;
span {
color: $white;
}
}
}
}

.deriv-button__variant--ghost {
&.deriv-button__color--primary-light {
span {
color: $primary;
}
&:hover:not(:disabled) {
background-color: #ff444f3d;
}
}
}

.deriv-button__variant--ghost {
&.deriv-button__color--white {
span {
color: $black;
}
&:hover:not(:disabled) {
background-color: $white-hover;
}
}
}

.deriv-button__variant--ghost {
&.deriv-button__color--black {
span {
color: $black;
}
&:hover:not(:disabled) {
background-color: $black;
span {
color: $white;
}
}
}
}
50 changes: 14 additions & 36 deletions lib/components/Button/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,13 @@ const ButtonVariants = {
outlined: "deriv-button__variant--outlined",
} as const;

const ButtonColor = {
black: "deriv-button__color--black",
primary: "deriv-button__color--primary",
"primary-light": "deriv-button__color--primary-light",
white: "deriv-button__color--white",
} as const;

const ButtonSize = {
lg: "deriv-button__size--lg",
md: "deriv-button__size--md",
Expand All @@ -37,25 +44,6 @@ const ButtonRounded = {
sm: "deriv-button__rounded--sm",
} as const;

const ButtonColor = {
black: "deriv-button__color--black",
primary: "deriv-button__color--primary",
"primary-light": "deriv-button__color--primary-light",
white: "deriv-button__color--white",
} as const;

const FontColor = {
ghost: "error",
outlined: "general",
} as const;

const FontColorContained = {
black: "white",
primary: "white",
"primary-light": "error",
white: "general",
} as const;

const FontSize = {
lg: "md",
md: "sm",
Expand All @@ -70,7 +58,7 @@ const LoaderColor = {
} as const;

export const Button = ({
children,
className,
color = "primary",
icon,
isFullWidth = false,
Expand All @@ -79,22 +67,21 @@ export const Button = ({
size = "md",
textSize,
variant = "contained",
className,
...rest
}: ButtonProps) => {
const isContained = variant === "contained";
return (
<button
className={clsx(
"deriv-button",
ButtonSize[size],
ButtonVariants[variant],
ButtonColor[color],
ButtonSize[size],
ButtonRounded[rounded],
{
[ButtonColor[color]]: isContained,
"deriv-button__full-width": isFullWidth,
},
className
className,
)}
disabled={rest.disabled || isLoading}
{...rest}
Expand All @@ -108,18 +95,9 @@ export const Button = ({
</div>
)}
{icon && !isLoading && icon}
{children && !isLoading && (
<Text
align="center"
color={
isContained
? FontColorContained[color]
: FontColor[variant]
}
size={textSize ?? FontSize[size]}
weight="bold"
>
{children}
{rest.children && !isLoading && (
<Text align="center" weight="bold" as="span">
{rest.children}
</Text>
)}
</button>
Expand Down

0 comments on commit f90df98

Please sign in to comment.