fix: added icon and icon position prop into button

claudaniloxavier · Nov 22, 2023 · bbe3073 · bbe3073
1 parent e67cb7b
commit bbe3073
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 13 deletions.
diff --git a/lib/components/Button/index.tsx b/lib/components/Button/index.tsx
@@ -17,10 +17,13 @@ const Button: FC<Props> = ({
   raised = false,
   disabled = false,
   icon,
+  iconPosition = 'left',
+  onClick,
   ...rest 
 }: Props) => {
   return (
-    <button 
+    <button
+      onClick={disabled ? undefined : onClick} 
       disabled={disabled}
       className={classNames(className, styles.button, {
         [styles.primary]: variant === 'primary',
@@ -41,12 +44,22 @@ const Button: FC<Props> = ({
         [styles.radius]: radius === 'default',
         [styles.pill]: radius === 'pill',
 
-        [styles.raised]: raised === true && shape === 'solid'
+        [styles.raised]: raised === true && shape === 'solid',
+
+        [styles.row]: iconPosition === 'left',
+        [styles.rowReverse]: iconPosition === 'right'
       })} 
       {...rest} 
     >
-      {icon}
-      {children}
+      {icon && (
+        <span className={styles.icon}>
+          {icon}
+        </span>
+      )}
+
+      <span className={styles.label}>
+        {children}
+      </span>
     </button>
   )
 }

diff --git a/lib/components/Button/styles.module.scss b/lib/components/Button/styles.module.scss
@@ -7,17 +7,44 @@
 $disabled-opacity: 0.42;
 
 .button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: spacing.$spacing-xxs;
+  margin: spacing.$spacing-xxxs;
+  min-width: to-rem(54);
   font-family: font.$family-secondary;
   font-weight: font.$weight-medium;
   text-transform: uppercase;
   border: border.$width-thin solid transparent;
   transition: all 180ms ease-in-out;
+  user-select: none;
 
   &:disabled {
     cursor: not-allowed;
     opacity: $disabled-opacity;
   }
 
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg,
+    img {
+      width: 100%;
+      height: 100%;
+    }
+
+    svg {
+      color: inherit;
+    }
+  }
+
+  .label {
+    transform: translateY(1px);
+  }
+
   // -------------------
   // COLORS
   // -------------------
@@ -194,36 +221,72 @@ $disabled-opacity: 0.42;
   &.small {
     padding: spacing.$spacing-xxxs spacing.$spacing-xxs;
     font-size: font.$size-xxxs;
+    line-height: calc(font.$size-xxxs + font.$line-height-primary);
+
+    .icon {
+      width: to-rem(16);
+      height: to-rem(16);
+    }
   }
 
   &.medium {
-    padding: spacing.$spacing-xxs spacing.$spacing-xs;
+    padding: spacing.$spacing-xxxs spacing.$spacing-xxs;
     font-size: font.$size-xxs;
+    line-height: calc(font.$size-xxs + font.$line-height-primary);
+
+    .icon {
+      width: to-rem(18);
+      height: to-rem(18);
+    }
   }
 
   &.large {
-    padding: spacing.$spacing-xs spacing.$spacing-sm;
+    padding: spacing.$spacing-xxs spacing.$spacing-xs;
     font-size: font.$size-xs;
+    line-height: calc(font.$size-xs + font.$line-height-primary);
+
+    .icon {
+      width: to-rem(20);
+      height: to-rem(20);
+    }
   }
 
   &.xlarge {
-    padding: spacing.$spacing-sm spacing.$spacing-md;
+    padding: spacing.$spacing-xs spacing.$spacing-sm;
     font-size: font.$size-sm;
-  }
+    line-height: calc(font.$size-sm + font.$line-height-primary);
 
-  &.radius {
-    border-radius: border.$radius-sm;
+    .icon {
+      width: to-rem(22);
+      height: to-rem(22);
+    }
   }
 
   // -------------------
   // RADIUS
   // -------------------
 
+  &.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;
   }
+
+  // -------------------
+  // ICON ALIGNMENT
+  // -------------------
+
+  &.row {
+    flex-direction: row;
+  }
+
+  &.rowReverse {
+    flex-direction: row-reverse;
+  }
 }
diff --git a/lib/components/Button/types.ts b/lib/components/Button/types.ts
@@ -9,4 +9,5 @@ export interface ButtonProps extends buttonOwnProps {
   radius?: 'default' | 'pill',
   raised?: boolean,
   icon?: JSX.Element
+  iconPosition?: 'left' | 'right'
 }
diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
@@ -1,8 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from '../../lib/main';
 
-// import GithubIcon from './assets/github.svg'
-
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
   title: 'Button',
@@ -31,7 +29,7 @@ export const Primary: Story = {
     size: 'medium',
     radius: 'default',
     raised: false,
-    disabled: false
+    disabled: false,
   },
 };