Update button styles: loadind, disabled, badge

src/stories/Button.module.scss

@@ -1,34 +1,50 @@
 @import "../shared/_colors";
 
 .button {
+  position: relative;
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-weight: 700;
   border: 0;
   border-radius: 4px;
   cursor: pointer;
-  display: inline-block;
   line-height: 17px;
   font-size: 16px;
   color: $light-primary;
+  align-items: center;
+  display: inline-flex;
 
   &-primary {
     background-color: $lilac-primary;
+
+    &:hover {
+      background-color: $lilac-secondary;
+    }
+    &:active {
+      background-color: $lilac-dark;
+    }
+    &:disabled,
+    &.button-loading {
+      color: $light-secondary;
+      background-color: $lilac-light;
+    }
   }
 
   &-secondary {
     background-color: $dark-secondary;
-  }
 
-  &:hover {
-    background-color: $lilac-secondary;
-  }
-  &:active {
-    background-color: $lilac-dark;
-  }
-  &:disabled {
-    color: $light-secondary;
-    background-color: $lilac-light;
+    &:hover {
+      background-color: $grey-primary;
+    }
+    &:active {
+      background-color: $grey-secondary;
+    }
+    &:disabled,
+    &.button-loading {
+      color: $light-secondary;
+      background-color: $grey-light;
+    }
   }
+
   &-small {
     padding: 4px 16px;
   }
@@ -38,19 +54,51 @@
   &-large {
     padding: 10px 16px;
   }
-  & span {
+  &-iconLoading {
     display: none;
+    width: 16px;
+    height: 16px;
+    background: url(./assets/loading.svg) no-repeat;
+    background-position: center;
+    margin-right: 10px;
+    vertical-align: text-top;
+    position: absolute;
+    margin: auto;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
   }
   &-loading {
-    & span {
+    .button-iconLoading {
       display: inline-block;
-      width: 16px;
-      height: 16px;
-      background: url(./assets/loading.svg) no-repeat;
-      background-position: center;
-      margin-right: 10px;
-      vertical-align: text-top;
     }
+    .button-badge,
+    .button-iconLeft,
+    .button-iconRight,
+    .button-label
+     {
+      visibility: hidden;
+      opacity: 0;
+    }
+  }
+
+  &-iconLeft {
+    margin-right: 10px;
+  }
+
+  &-iconRight {
+    margin-left: 10px;
   }
 
+  &-badge {
+    display: inline-block;
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    top: -5px;
+    right: -5px;
+    background-color: $red-primary;
+    border-radius: 50%;
+  }
 }

src/stories/Button.stories.tsx

@@ -2,14 +2,32 @@ import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
+import { ReactComponent as ArrowDownIcon } from './assets/arrowDown.svg';
+import { ReactComponent as EmailIcon } from './assets/email.svg';
 import design from '../../.storybook/utils';
 
+const icons = { ArrowDownIcon, EmailIcon, 'No icon': undefined };
+const iconsSelect = {
+  options: Object.keys(icons),
+  mapping: icons,
+  control: {
+    type: 'select',
+    labels: {
+      ArrowDownIcon: 'Down Icon',
+      EmailIcon: 'Email Icon',
+      'No icon': 'No icon',
+    },
+  },
+};
+
 export default {
   title: 'Example/Button',
   component: Button,
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
+    IconLeft: iconsSelect,
+    IconRight: iconsSelect,
   },
 } as ComponentMeta<typeof Button>;
 
@@ -23,6 +41,7 @@ Primary.args = {
   label: 'Button',
   loading: false,
   disabled: false,
+  badge: false,
 };
 
 Primary.parameters = {
@@ -32,9 +51,12 @@ Primary.parameters = {
 export const Secondary = Template.bind({});
 Secondary.args = {
   label: 'Button',
+  loading: false,
+  disabled: false,
+  badge: false,
 };
 Secondary.parameters = {
-  ...design('3%3A210'),
+  ...design('8%3A219'),
 };
 
 export const Large = Template.bind({});

src/stories/Button.tsx

@@ -9,6 +9,9 @@ interface ButtonProps {
   onClick?: () => void;
   loading?: boolean;
   disabled?: boolean;
+  badge?: boolean;
+  IconLeft?: typeof React.Component;
+  IconRight?: typeof React.Component;
 }
 
 export const Button = ({
@@ -17,6 +20,10 @@ export const Button = ({
   backgroundColor,
   label,
   loading,
+  badge,
+  IconLeft,
+  IconRight,
+  disabled,
   ...props
 }: ButtonProps) => {
   const mode = primary ? styles['button-primary'] : styles['button-secondary'];
@@ -28,10 +35,16 @@ export const Button = ({
         ' '
       )}
       style={{ backgroundColor }}
+      disabled={disabled}
       {...props}
     >
-      <span className="loading" data-testid="loading" />
-      {label}
+      {IconLeft ? <IconLeft className={styles['button-iconLeft']} /> : null}
+      <span className={styles['button-iconLoading']} data-testid="loading" />
+      <span className={styles['button-label']}>{label}</span>
+      {IconRight ? <IconRight className={styles['button-iconRight']} /> : null}
+      {badge && !disabled ? (
+        <span className={styles['button-badge']} data-testid="badge" />
+      ) : null}
     </button>
   );
 };