feat(project): add styling and icon props to button

jwplayer · May 28, 2021 · a1302d2 · a1302d2
1 parent 14917da
commit a1302d2
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 5 deletions.
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
@@ -15,13 +15,21 @@
   text-align: center;
   text-decoration: none;
 
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: theme.$btn-primary-bg;
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 4px;
 
   cursor: pointer;
   transition: background 0.1s ease, transform 0.1s ease;
 
+  &.fullWidth {
+    width: 100%;
+  }
+
+  &.secondary {
+    background-color: theme.$btn-secondary-bg;
+  }
+
   &.active {
     color: var(--background-color, black);
     background-color: var(--highlight-color, white);
@@ -35,11 +43,23 @@
       z-index: 1;
       background-color: rgba(variables.$black, 0.8);
       border-color: var(--highlight-color, white);
-      transform: scale(1.1);
       opacity: 1;
+      transform: scale(1.1);
+      &.secondary {
+        background-color: theme.$btn-secondary-bg;
+      }
+      &.fullWidth {
+        transform: scale(1.04);
+      }
     }
     &:focus.active {
       transform: scale(1.1);
+      &.fullWidth {
+        transform: scale(1.04);
+      }
     }
   }
 }
+.startIcon {
+  margin-right: 13px;
+}
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -3,19 +3,34 @@ import classNames from 'classnames';
 
 import styles from './Button.module.scss';
 
+type Color = 'primary' | 'secondary';
+
 type Props = {
   label: string;
-  active: boolean;
+  active?: boolean;
+  color?: Color;
+  fullWidth?: boolean;
+  startIcon?: JSX.Element;
   onClick: () => void;
 };
-const Button: React.FC<Props> = ({ label, active, onClick }: Props) => {
+const Button: React.FC<Props> = ({
+  label,
+  color = 'primary',
+  startIcon,
+  fullWidth = false,
+  active = false,
+  onClick,
+}: Props) => {
   return (
     <button
       className={classNames(styles.button, {
         [styles.active]: active,
+        [styles.secondary]: color === 'secondary',
+        [styles.fullWidth]: fullWidth,
       })}
       onClick={onClick}
     >
+      {startIcon ? <div className={styles.startIcon}>{startIcon}</div> : null}
       <span className={styles.buttonLabel}>{label}</span>
     </button>
   );

diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
@@ -23,9 +23,12 @@ $body-alt-font-family: Trebuchet MS, Helvetica, Arial, sans-serif !default;
 
 // Buttons
 
-$btn-primary-bg: $primary-color !default;
+$btn-primary-bg: rgba(0, 0, 0, 0.7) !default;
 $btn-primary-color: variables.$white !default;
 
+$btn-secondary-bg: $secondary-color !default;
+$btn-secondary-color: variables.$white !default;
+
 $btn-facebook-bg: #3b5998 !default;
 $btn-twitter-bg: #55acee !default;