beem-component 1.7.8 → 1.8.0

package/src/lib/components/input.js

@@ -1,4 +1,4 @@
-import { Done, ErrorOutline } from '@material-ui/icons';
+import { Done, ErrorOutline, Update } from '@material-ui/icons';
 import React from 'react';
 import styled from 'styled-components';
 import { BmIcons } from './iconStyles';
@@ -13,16 +13,10 @@ import {
   BmSecondaryDarkGreen,
   BmSecondaryRed15,
   BmGrey100,
+  BmPrimaryGold,
 } from './colors';
 
 const BmInputLabel = styled.div`
-  font-family: Open Sans;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 0.929rem;
-  line-height: 1.286rem;
-  height: 1.286rem;
-  letter-spacing: -0.02em;
   color: ${({ state }) => {
     if (state) {
       if (state === 'incomplete') return `${BmSecondaryRed}`;
@@ -30,12 +24,12 @@ const BmInputLabel = styled.div`
     }
     return `${BmSecondaryGrey}`;
   }};
-  padding-top: 0.571rem;
+  padding-top: 0.5rem;
 `;
 
 export const BmInputField = styled.input`
-  padding: 0.786rem 1.143rem;
-  letter-spacing: -0.02em;
+
+  padding: 0.7rem 1rem;
   color: ${({ state }) => {
     if (state) {
       if (state === 'disabled') return `${BmGrey400}`;
@@ -44,7 +38,6 @@ export const BmInputField = styled.input`
     return `${BmPrimaryBlack}`;
   }};
   border: none;
-  letter-spacing: -0.02em;
   text-align: left;
   margin: 0rem; /*added */
 
@@ -72,10 +65,9 @@ export const BmInputField = styled.input`
   }
 `;
 const BmInputWrapper = styled.div`
-  display: flex;
+  display: inline-flex;
   flex-direction: center;
   align-items: center;
-  height: 2.929rem;
   border-radius: 0.25rem;
   padding: 0rem;
   background: ${({ state }) => {
@@ -83,9 +75,9 @@ const BmInputWrapper = styled.div`
       if (state === 'pressed') return `${BmGrey50}`;
       if (state === 'positive') return `${BmSecondaryGreen15}`;
       if (state === 'disabled') return `${BmGrey100}`;
-      return `${BmPrimaryWhite}`;
+      return 'transparent';
     }
-    return `${BmPrimaryWhite}`;
+    return 'transparent';
   }};
 
   border: ${({ state }) => {
@@ -103,9 +95,12 @@ const BmInputWrapper = styled.div`
   &:focus {
     border: 0.071rem solid ${BmPrimaryBlack};
   }
+  > * {
+    margin-right: 0.5rem;
+  }
 `;
 
-export const BmInput = ({ id, iconSize, label, state, ...rest }) => {
+export const BmInput = ({ id, iconSize, label, state, action, ...rest }) => {
   return (
     <>
       <BmInputWrapper state={state} {...rest}>
@@ -115,11 +110,26 @@ export const BmInput = ({ id, iconSize, label, state, ...rest }) => {
           state={state}
           disabled={state === 'disabled'}
         />
-        {state && state === 'complete' && (
-          <BmIcons icon={<ErrorOutline />} size="small" />
+        {action && action === 'complete' && (
+          <BmIcons
+            icon={<ErrorOutline />}
+            size={iconSize || 'small'}
+            color={BmSecondaryDarkGreen}
+          />
+        )}
+        {action && action === 'incomplete' && (
+          <BmIcons
+            size={iconSize || 'small'}
+            icon={<Done />}
+            color={BmSecondaryRed}
+          />
         )}
-        {state && state === 'incomplete' && (
-          <BmIcons icon={<Done />} size="small" />
+        {action && action === 'pending' && (
+          <BmIcons
+            size={iconSize || 'small'}
+            icon={<Update />}
+            color={BmPrimaryGold}
+          />
         )}
       </BmInputWrapper>
       {label && (