feat(Button): created xs size and added success and alert types

package.json

@@ -97,9 +97,7 @@
     "pretty-quick": "^1.6.0",
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
-    "react-highlight": "^0.12.0",
     "react-native-vector-icons": "^5.0.0",
-    "react-prism": "^4.3.2",
     "react-test-renderer": "^16.4.2",
     "rimraf": "^2.6.2",
     "rollup": "^0.63.5",

src/components/Button.tsx

@@ -1,65 +1,76 @@
 import * as React from "react";
-import { cx } from "emotion";
-import {
-  buttonStyle,
-  iconStyle,
-  getDynamicButtonStyle
-} from "./styles/Button.styles";
+import { css, cx } from "emotion";
+import { iconStyle, getButtonStyle } from "./styles/Button.styles";
 import Ink from "react-ink";
-import { ButtonProps } from "./typings/Button";
+import { ButtonProps, DropDownButtonProps } from "./typings/Button";
 import Loader from "./Loader";
-import { colors } from "../theme";
+import { colors, constants } from "../theme";
 
 const Button: React.SFC<ButtonProps> = ({
-  large,
   type = "primary",
   disabled,
   children,
   onClick,
   width,
-  isOpen,
   showShadow,
   className,
   showRipple = true,
-  isSelected,
-  loading
+  loading,
+  size = "small"
 }) => {
+  const disableAction = disabled || loading;
+
+  const filled = size !== "x-small";
   const _className = cx(
-    buttonStyle,
-    getDynamicButtonStyle(large, type, showShadow),
-    {
-      _pebble_btn_disabled: disabled,
-      _pebble_btn_link: type === "link",
-      _pebble_btn_dropdown: type === "dropdown",
-      _pebble_btn_dropdown_open: type === "dropdown" && isOpen,
-      _pebble_btn_dropdown_selected: type === "dropdown" && isSelected,
-      _pebble_btn_loading: loading
-    }
+    getButtonStyle(size, type, showShadow, filled),
+    className
   );
 
-  const disableAction = disabled || loading;
-
   return (
     <button
-      className={cx(_className, className)}
+      className={_className}
       onClick={!disableAction ? onClick : undefined}
       style={{ width }}
+      disabled={disabled}
     >
       {loading ? <Loader color={colors.white.base} scale={0.4} /> : children}
-      {type === "dropdown" && (
-        <React.Fragment>
-          {" "}
-          <i
-            className={cx("icon-arrow-down", iconStyle)}
-            style={{
-              transform: isOpen ? "rotate(180deg)" : "none"
-            }}
-          />
-        </React.Fragment>
-      )}
       {!disableAction && showRipple && type !== "link" && <Ink />}
     </button>
   );
 };
 
+export const DropDownButton: React.SFC<DropDownButtonProps> = ({
+  isOpen,
+  isSelected,
+  children,
+  className,
+  ...props
+}) => {
+  const _className = cx(
+    css({
+      border: constants.border.base
+    }),
+    {
+      [css({
+        backgroundColor: colors.white.base,
+        color: colors.gray.darker
+      })]: !(isOpen || isSelected)
+    }
+  );
+
+  return (
+    <Button {...props} type="secondary" className={cx(_className, className)}>
+      <React.Fragment>
+        {children}{" "}
+        <i
+          className={cx("icon-arrow-down", iconStyle)}
+          style={{
+            transform: isOpen ? "rotate(180deg)" : "none"
+          }}
+        />
+      </React.Fragment>
+    </Button>
+  );
+};
+
 export default Button;

src/components/DropDown.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { DropdownProps, DropdownState } from "./typings/Dropdown";
-import Button from "./Button";
+import { DropDownButton } from "./Button";
 import { dropDownStyle } from "./styles/Dropdown.styles";
 import { cx } from "emotion";
 import OutsideClick from "./OutsideClick";
@@ -11,8 +11,7 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
   };
 
   static defaultProps: Partial<DropdownProps> = {
-    closeOnClickOutside: true,
-    type: "dropdown"
+    closeOnClickOutside: true
   };
 
   private toggleDropdown = () => {
@@ -25,7 +24,6 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
     const {
       buttonLabel,
       children,
-      type,
       labelComponent,
       padding,
       className,
@@ -48,16 +46,14 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
           {labelComponent ? (
             labelComponent({ isOpen, toggleDropdown: this.toggleDropdown })
           ) : (
-            <Button
+            <DropDownButton
               isSelected={isSelected}
-              showShadow
-              type={type}
               isOpen={isOpen}
               onClick={this.toggleDropdown}
               disabled={disabled}
             >
               {buttonLabel}
-            </Button>
+            </DropDownButton>
           )}
           {this.state.isOpen && (
             <div

src/components/Stepper.tsx

@@ -30,15 +30,15 @@ class Stepper extends React.PureComponent<StepperProps, StepperState> {
       return (
         <footer className={footerStyle}>
           <Button
-            large
+            size="large"
             width={100}
             type={"secondary"}
             onClick={leftButtonData.action}
           >
             {leftButtonData.label}
           </Button>
           <Button
-            large
+            size="large"
             width={100}
             loading={props.isRightButtonLoading}
             onClick={rightButtonData.action}