feat: added sizes, radius and raises states into component

claudaniloxavier · Nov 21, 2023 · fbf27c2 · fbf27c2
1 parent 8dc035b
commit fbf27c2
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 82 deletions.
diff --git a/lib/components/Button/index.tsx b/lib/components/Button/index.tsx
@@ -9,13 +9,18 @@ import { ButtonProps as Props } from './types'
 
 const Button: FC<Props> = ({ 
   className,
+  children,
   shape = 'solid',
   variant = 'primary',
+  size = 'medium',
+  radius = 'default',
+  raised = false,
+  disabled = false,
   ...rest 
 }: Props) => {
   return (
     <button 
-      disabled
+      disabled={disabled}
       className={classNames(className, styles.button, {
         [styles.primary]: variant === 'primary',
         [styles.secondary]: variant === 'secondary',
@@ -25,10 +30,22 @@ const Button: FC<Props> = ({
 
         [styles.solid]: shape === 'solid',
         [styles.outlined]: shape === 'outlined',
-        [styles.text]: shape === 'text'
+        [styles.text]: shape === 'text',
+
+        [styles.small]: size === 'small',
+        [styles.medium]: size === 'medium',
+        [styles.large]: size === 'large',
+        [styles.xlarge]: size === 'x-large',
+
+        [styles.radius]: radius === 'default',
+        [styles.pill]: radius === 'pill',
+
+        [styles.raised]: raised === true && shape === 'solid'
       })} 
       {...rest} 
-    />
+    >
+      {children}
+    </button>
   )
 }
 

diff --git a/lib/components/Button/styles.module.scss b/lib/components/Button/styles.module.scss
@@ -1,162 +1,146 @@
+@use '../../theme/helpers.scss' as *;
 @use '../../theme/variables/color' as color;
 @use '../../theme/variables/border' as border;
 @use '../../theme/variables/spacing' as spacing;
 @use '../../theme/variables/font' as font;
 
-$disabled-opacity: 0.4;
+$disabled-opacity: 0.42;
 
 .button {
-  padding: spacing.$spacing-xs;
-  font-family: font.$family-primary;
-  font-weight: font.$weight-regular;
+  font-family: font.$family-secondary;
+  font-weight: font.$weight-medium;
+  text-transform: uppercase;
+  border: border.$width-thick solid transparent;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: $disabled-opacity;
+  }
 
   &.primary {
     &.solid {
       background-color: color.$primary-500;
-      border: border.$width-thin solid color.$primary-400;
-
-      &:disabled {
-        opacity: $disabled-opacity;
-      }
+      color: color.$white;
     }
 
     &.outlined {
-      border: border.$width-thin solid color.$primary-500;
+      border: border.$width-thick solid color.$primary-500;
+      color: color.$primary-500;
       background: none;
-
-      &:disabled {
-        opacity: $disabled-opacity;
-      }
     }
 
     &.text {
       color: color.$primary-500;
-      border: none;
+      border-color: transparent;
       background: none;
-
-      &:disabled {
-        opacity: $disabled-opacity;
-      }
     }
   }
 
   &.secondary {
     &.solid {
       background-color: color.$secondary-500;
-      border: border.$width-thin solid color.$secondary-400;
-
-      &:disabled {
-        opacity: $disabled-opacity;
-      }
+      color: color.$white;
     }
 
     &.outlined {
-      border: border.$width-thin solid color.$secondary-500;
+      border: border.$width-thick solid color.$secondary-500;
+      color: color.$secondary-500;
       background: none;
-
-      &:disabled {
-        opacity: $disabled-opacity;
-      }
     }
 
     &.text {
       color: color.$secondary-500;
-      border: none;
+      border-color: transparent;
       background: none;
-
-      &:disabled {
-        opacity: $disabled-opacity;
-      }
     }
   }
 
   &.success {
     &.solid {
       background-color: color.$success-500;
-      border: border.$width-thin solid color.$success-400;
-
-      &:disabled {
-        opacity: $disabled-opacity;
-      }
+      color: color.$white;
     }
 
     &.outlined {
-      border: border.$width-thin solid color.$success-500;
+      border: border.$width-thick solid color.$success-500;
+      color: color.$success-500;
       background: none;
-
-      &:disabled {
-        opacity: $disabled-opacity;
-      }
     }
 
     &.text {
       color: color.$success-500;
-      border: none;
+      border-color: transparent;
       background: none;
-
-      &:disabled {
-        opacity: $disabled-opacity;
-      }
     }
   }
 
   &.error {
     &.solid {
       background-color: color.$error-500;
-      border: border.$width-thin solid color.$error-400;
-
-      &:disabled {
-        opacity: $disabled-opacity;
-      }
+      color: color.$white;
     }
 
     &.outlined {
-      border: border.$width-thin solid color.$error-500;
+      border: border.$width-thick solid color.$error-500;
+      color: color.$error-500;
       background: none;
-
-      &:disabled {
-        opacity: $disabled-opacity;
-      }
     }
 
     &.text {
       color: color.$error-500;
-      border: none;
+      border-color: transparent;
       background: none;
-
-      &:disabled {
-        opacity: $disabled-opacity;
-      }
     }
   }
 
   &.warning {
     &.solid {
       background-color: color.$warning-500;
-      border: border.$width-thin solid color.$warning-400;
-
-      &:disabled {
-        opacity: $disabled-opacity;
-      }
+      color: color.$black;
     }
 
     &.outlined {
-      border: border.$width-thin solid color.$warning-500;
+      border: border.$width-thick solid color.$warning-500;
+      color: color.$warning-500;
       background: none;
-
-      &:disabled {
-        opacity: $disabled-opacity;
-      }
     }
 
     &.text {
       color: color.$warning-500;
-      border: none;
+      border-color: transparent;
       background: none;
-
-      &:disabled {
-        opacity: $disabled-opacity;
-      }
     }
   }
+
+  &.small {
+    padding: spacing.$spacing-xxxs spacing.$spacing-xxs;
+    font-size: font.$size-xxxs;
+  }
+
+  &.medium {
+    padding: spacing.$spacing-xxs spacing.$spacing-xs;
+    font-size: font.$size-xxs;
+  }
+
+  &.large {
+    padding: spacing.$spacing-xs spacing.$spacing-sm;
+    font-size: font.$size-xs;
+  }
+
+  &.xlarge {
+    padding: spacing.$spacing-sm spacing.$spacing-md;
+    font-size: font.$size-sm;
+  }
+
+  &.radius {
+    border-radius: border.$radius-sm;
+  }
+
+  &.pill {
+    border-radius: border.$radius-pill;
+  }
+
+  &.raised {
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
+  }
 }
diff --git a/lib/components/Button/types.ts b/lib/components/Button/types.ts
@@ -5,4 +5,7 @@ type buttonOwnProps = ButtonHTMLAttributes<HTMLButtonElement>
 export interface ButtonProps extends buttonOwnProps {
   shape?: 'solid' | 'outlined' | 'text'
   variant?: 'primary' | 'secondary' | 'success' | 'error' | 'warning'
+  size?: 'small' | 'medium' | 'large' | 'x-large',
+  radius?: 'default' | 'pill',
+  raised?: boolean
 }