beem-component 1.7.9 → 1.8.0

package/src/App.js

@@ -1,262 +1,259 @@
 import React from 'react';
 
-import AttachFileIcon from '@mui/icons-material/AttachFile';
-import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions';
-import SendIcon from '@mui/icons-material/Send';
-import QuickreplyIcon from '@mui/icons-material/Quickreply';
 import {
-  BmChat,
   BmInput,
-  BmIcons,
   GlobalStyle,
-  BmProfileIcon,
-  BmContactCard,
-  BmTag,
-  BmCounter,
-  BmAvatar,
 
   // BmCheckboxToggle,
 } from './lib/components';
 
-const Chat = () => {
-  // const [test, setTest] = useState(false);
-  // const [test1, setTest1] = useState(false);
+// const Chat = () => {
+//   // const [test, setTest] = useState(false);
+//   // const [test1, setTest1] = useState(false);
 
-  const image =
-    'https://scontent.fnbo1-1.fna.fbcdn.net/v/t39.30808-6/298879098_10161724947807542_5252175668064009159_n.jpg?stp=dst-jpg_p720x720&_nc_cat=100&ccb=1-7&_nc_sid=9e2e56&_nc_ohc=9uDHII_ETpUAX_KNS3Y&_nc_ht=scontent.fnbo1-1.fna&edm=APCh5TUEAAAA&oh=00_AT8sOJmRGYwgXF48_GPOCWx1soil0yK8V3AiEPkce9WJIw&oe=6304120B';
-  return (
-    <>
-      <GlobalStyle />
-      <BmProfileIcon channel="google_business_messaging" />
-      <BmChat>
-        <BmChat.Body>
-          <BmChat.Details
-            state="inbound"
-            session="sms"
-            displayTime={<p>12:00pm</p>}
-            status="sent"
-            sessionTimeline={{ message: <p>12:00pm</p> }}
-            // sessionDetails={{
-            //   message: <h3>Session Message</h3>,
-            //   time: <p>12:00pm</p>,
-            // }}
-            feedPostComments={{
-              header: <p>Comment Reply</p>,
-              body: {
-                link: <p>This is an outbound link</p>,
-                image,
-              },
-              footer: <p>This is a Footer</p>,
-              state: 'inbound',
-              status: 'comment',
-            }}
-          />
-          <BmChat.Details
-            state="inbound"
-            session="live"
-            displayTime={<p>10:00am</p>}
-            sessionTimeline={{ message: <p>12:00pm</p> }}
-            status="failed"
-            fileName={<p>file.csv</p>}
-            file={image}
-          />
-          {/* <BmChat.Details
-            state="inbound"
-            session="sms"
-            displayTime={<p>12:00pm</p>}
-            status="sent"
-            sessionTimeline={{ message: <p>12:00pm</p> }}
-            sessionDetails={{
-              message: <h3>Session Message</h3>,
-              time: <p>12:00pm</p>,
-            }}
-            feedPostComments={{
-              header: <p>Comment Reply</p>,
-              body: {
-                link: <p>This is an inbound link</p>,
-                image,
-              },
-              footer: <p>This is a Footer</p>,
-              state: 'inbound',
-              status: 'comment',
-            }}
-          />
-          <BmChat.Details
-            state="outbound"
-            session="sms"
-            displayTime={<p>12:00pm</p>}
-            status="sent"
-            sessionTimeline={{ message: <p>12:00pm</p> }}
-            sessionDetails={{
-              message: <h3>Session Message</h3>,
-              time: <p>12:00pm</p>,
-            }}
-            feedPostComments={{
-              header: <p>Story Reply</p>,
-              body: {
-                link: <p>This is an outbound link</p>,
-                image,
-              },
-              footer: <p>This is a Footer</p>,
-              state: 'outbound',
-              status: 'story',
-            }}
-          />
-          <BmChat.Details
-            agentName="Agent Name"
-            state="outbound"
-            session="live"
-            displayTime={<p>12:00pm</p>}
-            status="sent"
-            sessionDetails={{
-              message: <h3>Session Message</h3>,
-              time: <p>12:00pm</p>,
-            }}
-          >
-            <p>Outbound Text Message2</p>
-          </BmChat.Details>
+//   const image =
+//     'https://scontent.fnbo1-1.fna.fbcdn.net/v/t39.30808-6/298879098_10161724947807542_5252175668064009159_n.jpg?stp=dst-jpg_p720x720&_nc_cat=100&ccb=1-7&_nc_sid=9e2e56&_nc_ohc=9uDHII_ETpUAX_KNS3Y&_nc_ht=scontent.fnbo1-1.fna&edm=APCh5TUEAAAA&oh=00_AT8sOJmRGYwgXF48_GPOCWx1soil0yK8V3AiEPkce9WJIw&oe=6304120B';
+//   return (
+//     <>
+//       <GlobalStyle />
+//       <BmProfileIcon channel="google_business_messaging" />
+//       <BmChat>
+//         <BmChat.Body>
+//           <BmChat.Details
+//             state="inbound"
+//             session="sms"
+//             displayTime={<p>12:00pm</p>}
+//             status="sent"
+//             sessionTimeline={{ message: <p>12:00pm</p> }}
+//             // sessionDetails={{
+//             //   message: <h3>Session Message</h3>,
+//             //   time: <p>12:00pm</p>,
+//             // }}
+//             feedPostComments={{
+//               header: <p>Comment Reply</p>,
+//               body: {
+//                 link: <p>This is an outbound link</p>,
+//                 image,
+//               },
+//               footer: <p>This is a Footer</p>,
+//               state: 'inbound',
+//               status: 'comment',
+//             }}
+//           />
+//           <BmChat.Details
+//             state="inbound"
+//             session="live"
+//             displayTime={<p>10:00am</p>}
+//             sessionTimeline={{ message: <p>12:00pm</p> }}
+//             status="failed"
+//             fileName={<p>file.csv</p>}
+//             file={image}
+//           />
+//           {/* <BmChat.Details
+//             state="inbound"
+//             session="sms"
+//             displayTime={<p>12:00pm</p>}
+//             status="sent"
+//             sessionTimeline={{ message: <p>12:00pm</p> }}
+//             sessionDetails={{
+//               message: <h3>Session Message</h3>,
+//               time: <p>12:00pm</p>,
+//             }}
+//             feedPostComments={{
+//               header: <p>Comment Reply</p>,
+//               body: {
+//                 link: <p>This is an inbound link</p>,
+//                 image,
+//               },
+//               footer: <p>This is a Footer</p>,
+//               state: 'inbound',
+//               status: 'comment',
+//             }}
+//           />
+//           <BmChat.Details
+//             state="outbound"
+//             session="sms"
+//             displayTime={<p>12:00pm</p>}
+//             status="sent"
+//             sessionTimeline={{ message: <p>12:00pm</p> }}
+//             sessionDetails={{
+//               message: <h3>Session Message</h3>,
+//               time: <p>12:00pm</p>,
+//             }}
+//             feedPostComments={{
+//               header: <p>Story Reply</p>,
+//               body: {
+//                 link: <p>This is an outbound link</p>,
+//                 image,
+//               },
+//               footer: <p>This is a Footer</p>,
+//               state: 'outbound',
+//               status: 'story',
+//             }}
+//           />
+//           <BmChat.Details
+//             agentName="Agent Name"
+//             state="outbound"
+//             session="live"
+//             displayTime={<p>12:00pm</p>}
+//             status="sent"
+//             sessionDetails={{
+//               message: <h3>Session Message</h3>,
+//               time: <p>12:00pm</p>,
+//             }}
+//           >
+//             <p>Outbound Text Message2</p>
+//           </BmChat.Details>
+
+//           <BmChat.Details
+//             agentName="Test Agent"
+//             state="outbound"
+//             session="live"
+//             displayTime={<p>12:00pm</p>}
+//             status="sent"
+//             sessionDetails={{
+//               message: <h3>Session Message</h3>,
+//               time: <p>12:00pm</p>,
+//             }}
+//           >
+//             <p>Outbound Text Message2</p>
+//           </BmChat.Details>
 
-          <BmChat.Details
-            agentName="Test Agent"
-            state="outbound"
-            session="live"
-            displayTime={<p>12:00pm</p>}
-            status="sent"
-            sessionDetails={{
-              message: <h3>Session Message</h3>,
-              time: <p>12:00pm</p>,
-            }}
-          >
-            <p>Outbound Text Message2</p>
-          </BmChat.Details>
+//           <BmChat.Details
+//             state="inbound"
+//             session="sms"
+//             displayTime={<p>12:00pm</p>}
+//             status="sent"
+//             sessionTimeline={{ message: <p>12:00pm</p> }}
+//             sessionDetails={{
+//               message: <h3>Session Message</h3>,
+//               time: <p>12:00pm</p>,
+//             }}
+//             feedPostComments={{
+//               header: <p>Story Reply</p>,
+//               body: {
+//                 link: <p>This is an inbound link</p>,
+//                 image,
+//               },
+//               footer: <p>This is a Footer</p>,
+//               state: 'inbound',
+//               status: 'story',
+//             }}
+//           />
+//           <BmChat.Details
+//             state="inbound"
+//             session="live"
+//             displayTime={<p>12:00pm</p>}
+//             status="sent"
+//             sessionTimeline={{ message: <p>12:00pm</p> }}
+//             fileName={<p>chat.png</p>}
+//             src={image}
+//             sessionDetails={{
+//               message: <h3>Session Message</h3>,
+//               time: <p>12:00pm</p>,
+//             }}
+//           />
+//           <BmChat.Details
+//             state="inbound"
+//             session="live"
+//             displayTime={<p>10:00am</p>}
+//             sessionTimeline={{ message: <p>12:00pm</p> }}
+//             status="failed"
+//             fileName={<p>file.csv</p>}
+//             file={image}
+//           />
+//           <BmChat.Details
+//             state="outbound"
+//             session="bot"
+//             sessionTimeline={{ message: <p>12:00pm</p> }}
+//             displayTime={<p>12:00pm</p>}
+//             status="sent"
+//           >
+//             <p>Outbound Text Message</p>
+//           </BmChat.Details>
+//           <BmChat.Details
+//             state="outbound"
+//             session="live"
+//             sessionTimeline={{ message: <p>12:00pm</p> }}
+//             displayTime={<p>12:00pm</p>}
+//             status="sent"
+//             fileName={<p>chat.png</p>}
+//             src={image}
+//           />
+//           <BmChat.Details
+//             state="outbound"
+//             session="live"
+//             displayTime={<p>10:00am</p>}
+//             status="failed"
+//             fileName={<p>file.csv</p>}
+//             sessionTimeline={{ message: <p>12:00pm</p> }}
+//             file={image}
+//             link={image}
+//             onDownload={() => {
+//               alert('hello');
+//             }}
+//           /> */}
+//         </BmChat.Body>
+//         <BmChat.Footer>
+//           <div className="chat-footer">
+//             <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+//             <BmIcons icon={<AttachFileIcon />} size="xlarge" />
+//             <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
+//             <BmInput placeholder="Enter Message" style={{ flex: '1' }} />
+//             <BmIcons icon={<SendIcon />} size="xlarge" />
+//           </div>
+//         </BmChat.Footer>
+//       </BmChat>
 
-          <BmChat.Details
-            state="inbound"
-            session="sms"
-            displayTime={<p>12:00pm</p>}
-            status="sent"
-            sessionTimeline={{ message: <p>12:00pm</p> }}
-            sessionDetails={{
-              message: <h3>Session Message</h3>,
-              time: <p>12:00pm</p>,
-            }}
-            feedPostComments={{
-              header: <p>Story Reply</p>,
-              body: {
-                link: <p>This is an inbound link</p>,
-                image,
-              },
-              footer: <p>This is a Footer</p>,
-              state: 'inbound',
-              status: 'story',
-            }}
-          />
-          <BmChat.Details
-            state="inbound"
-            session="live"
-            displayTime={<p>12:00pm</p>}
-            status="sent"
-            sessionTimeline={{ message: <p>12:00pm</p> }}
-            fileName={<p>chat.png</p>}
-            src={image}
-            sessionDetails={{
-              message: <h3>Session Message</h3>,
-              time: <p>12:00pm</p>,
-            }}
-          />
-          <BmChat.Details
-            state="inbound"
-            session="live"
-            displayTime={<p>10:00am</p>}
-            sessionTimeline={{ message: <p>12:00pm</p> }}
-            status="failed"
-            fileName={<p>file.csv</p>}
-            file={image}
-          />
-          <BmChat.Details
-            state="outbound"
-            session="bot"
-            sessionTimeline={{ message: <p>12:00pm</p> }}
-            displayTime={<p>12:00pm</p>}
-            status="sent"
-          >
-            <p>Outbound Text Message</p>
-          </BmChat.Details>
-          <BmChat.Details
-            state="outbound"
-            session="live"
-            sessionTimeline={{ message: <p>12:00pm</p> }}
-            displayTime={<p>12:00pm</p>}
-            status="sent"
-            fileName={<p>chat.png</p>}
-            src={image}
-          />
-          <BmChat.Details
-            state="outbound"
-            session="live"
-            displayTime={<p>10:00am</p>}
-            status="failed"
-            fileName={<p>file.csv</p>}
-            sessionTimeline={{ message: <p>12:00pm</p> }}
-            file={image}
-            link={image}
-            onDownload={() => {
-              alert('hello');
-            }}
-          /> */}
-        </BmChat.Body>
-        <BmChat.Footer>
-          <div className="chat-footer">
-            <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
-            <BmIcons icon={<AttachFileIcon />} size="xlarge" />
-            <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
-            <BmInput placeholder="Enter Message" style={{ flex: '1' }} />
-            <BmIcons icon={<SendIcon />} size="xlarge" />
-          </div>
-        </BmChat.Footer>
-      </BmChat>
+//       {/* <BmCheckboxToggle
+//         key="test"
+//         checked={test}
+//         onChange={(check) => {
+//           console.log(check);
+//           setTest(check);
+//         }}
+//       />
 
-      {/* <BmCheckboxToggle
-        key="test"
-        checked={test}
-        onChange={(check) => {
-          console.log(check);
-          setTest(check);
-        }}
-      />
+//       <BmCheckboxToggle
+//         key="test1"
+//         checked={test1}
+//         onChange={(check) => {
+//           console.log(check);
+//           setTest(check);
+//         }}
 
-      <BmCheckboxToggle
-        key="test1"
-        checked={test1}
-        onChange={(check) => {
-          console.log(check);
-          setTest(check);
-        }}
+//       /> */}
 
-        
-      /> */}
+//       <BmContactCard>
+//         <BmContactCard.Profile>
+//           <BmAvatar user="chatbot" size="medium" />
+//         </BmContactCard.Profile>
+//         <BmContactCard.Details>
+//           <BmContactCard.SubDetails>
+//             <h3>Contact Names</h3>
+//           </BmContactCard.SubDetails>
+//           <BmContactCard.SubDetails>
+//             <p>
+//               Message ijofdsg fogijfdogi odfigj ofdigj fdoigj odfigj ofdigj
+//               odfigj ofdigj ofdijg dofigj dfoig jodfigj text
+//             </p>
+//             <BmCounter>10</BmCounter>
+//           </BmContactCard.SubDetails>
+//           <BmContactCard.SubDetails>
+//             <BmTag variant="success">label</BmTag>
+//             <p>10:00 am</p>
+//           </BmContactCard.SubDetails>
+//         </BmContactCard.Details>
+//       </BmContactCard>
+//     </>
+//   );
+// };
 
-      <BmContactCard>
-        <BmContactCard.Profile>
-          <BmAvatar user="chatbot" size="medium" />
-        </BmContactCard.Profile>
-        <BmContactCard.Details>
-          <BmContactCard.SubDetails>
-            <h3>Contact Names</h3>
-          </BmContactCard.SubDetails>
-          <BmContactCard.SubDetails>
-            <p>
-              Message ijofdsg fogijfdogi odfigj ofdigj fdoigj odfigj ofdigj
-              odfigj ofdigj ofdijg dofigj dfoig jodfigj text
-            </p>
-            <BmCounter>10</BmCounter>
-          </BmContactCard.SubDetails>
-          <BmContactCard.SubDetails>
-            <BmTag variant="success">label</BmTag>
-            <p>10:00 am</p>
-          </BmContactCard.SubDetails>
-        </BmContactCard.Details>
-      </BmContactCard>
+const Chat = () => {
+  return (
+    <>
+      <GlobalStyle />
+      <BmInput placeholder="tejal" state="complete" action="pending" />
     </>
   );
 };

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 && (