Merge pull request #228 from jim-deriv/jim/feq-2472/add-border-width-…

…prop-and-variants [FEQ] Jim/FEQ-2472/add border width prop and variants
deriv-com · Jul 15, 2024 · d2bf5a9 · d2bf5a9
2 parents 8fb37dc + cc06340
commit d2bf5a9
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -205,4 +205,19 @@ $black-outline-hover: rgba(0, 0, 0, 0.08);
         }
     }
 
+    &__border-width {
+        &--none {
+            border-width: 0;
+        }
+        &--sm {
+            border-width: 1px;
+        }
+        &--md {
+            border-width: 2px;
+        }
+        &--lg {
+            border-width: 3px;
+        }
+    }
+
 }
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -7,8 +7,10 @@ import "./Button.scss";
 
 type TVariant = "contained" | "ghost" | "outlined";
 type TColor = "black" | "primary-light" | "primary" | "white";
+type TBorderWidth = Extract<TGenericSizes, 'md' | 'sm' | 'lg'> | 'none';
 
 interface ButtonProps extends ComponentProps<"button"> {
+    borderWidth?: TBorderWidth;
     color?: TColor;
     icon?: ReactElement | ReactNode;
     isFullWidth?: boolean;
@@ -58,7 +60,15 @@ const LoaderColor = {
     white: "#85ACB0",
 } as const;
 
+const BorderWidth = {
+    none: "deriv-button__border-width--none",
+    sm: "deriv-button__border-width--sm",
+    md: "deriv-button__border-width--md",
+    lg: "deriv-button__border-width--lg",
+} as const;
+
 export const Button = ({
+    borderWidth = 'md',
     className,
     color = "primary",
     icon,
@@ -80,6 +90,7 @@ export const Button = ({
                 ButtonColor[color],
                 ButtonSize[size],
                 ButtonRounded[rounded],
+                BorderWidth[borderWidth],
                 {
                     "deriv-button__full-width": isFullWidth,
                     "deriv-button__hover--disabled": hideHoverStyles,

diff --git a/stories/Button.stories.ts b/stories/Button.stories.ts
@@ -9,6 +9,7 @@ const meta = {
     },
     tags: ["autodocs"],
     args: {
+        borderWidth: "md",
         variant: "contained",
         children: "Click Me!",
         color: "primary",
@@ -23,6 +24,10 @@ const meta = {
     },
 
     argTypes: {
+        borderWidth: {
+            options: ["none", "sm", "md", "lg"],
+            control: { type: "radio" },
+        },
         variant: {
             options: ["contained", "outlined", "ghost"],
             control: { type: "radio" },