beem-component 1.0.9 → 1.1.3

package/src/App.js

@@ -1,94 +1,38 @@
-import React, { useState } from "react";
+import React from "react";
 import "../src/main.scss";
-import { BmAvatar, BmInput, BmTab, MainWrapper } from "./lib/components";
+import { MainWrapper } from "./lib/components";
 import { GlobalStyle } from "./lib/components/globalStyles";
-import { BmSideBar } from "./lib/components/sidebar";
 import "./lib/assets/css/sidebar.css";
-import BmChat from "./lib/components/ChatBody/chatBody";
-import { DoneAll, Home, MoreVert, Person, Phone } from "@material-ui/icons";
-import { BmIcons } from "./lib/components/iconStyles";
-import EmojiEmotionsIcon from "@mui/icons-material/EmojiEmotions";
-import AttachFileIcon from "@mui/icons-material/AttachFile";
-import QuickreplyIcon from "@mui/icons-material/Quickreply";
-import SendIcon from "@mui/icons-material/Send";
-import BmInfoTab from "./lib/components/InfoTab/infoTab";
-import { BmButton } from "./lib/components/Buttons/buttons";
-import {
-  BmCustomizedDropdown,
-  BmDropDownMenu,
-  BmDropDownItem,
-  BmButtonDropdownItem,
-} from "./lib/components/dropdownItems";
-
-import { BmButtonDropDown } from "./lib/components/dropdownButton";
-import { BmListBox } from "./lib/components/Lists/listBox";
-import { BmRowLabel } from "./lib/components/Lists/rowLabels";
+import SideBar from "./SideBar";
+import ChatHeader from "./ChatHeader";
+import Chat from "./Chat";
+import CustomerInfo from "./CustomerInfo";
+import { BmTag } from "./lib/components/Tags/tags";
+import { Home } from "@material-ui/icons";
 
 export const App = () => {
-  const [dropDownItem, setDropdownItem] = useState(false);
-
   return (
     <>
       <GlobalStyle />
       <MainWrapper>
-        <BmSideBar>
-          <div className="main-sidebar-tabs">
-            <BmTab state="active" className="sidebar-tabs">
-              <h3>Tabs</h3>
-            </BmTab>
-            <BmTab state="inactive" className="sidebar-tabs">
-              <h3>Tabs</h3>
-            </BmTab>
-          </div>
-        </BmSideBar>
+        <BmTag leadingIcon={<Home/>} trailingIcon={<Home/>}><p>Hello</p></BmTag>
 
-        <BmChat>
-          <BmChat.Body>
-            <BmChat.Details
-              state="inbound"
-              session="bot"
-              displayTime={<p>12:00pm</p>}
-              status="sent"
-            >
-              <p>Inbound</p>
-            </BmChat.Details>
-            <BmChat.Details
-              state="outbound"
-              session="live"
-              displayTime={<p>10:00am</p>}
-              status="failed"
-            >
-              <p>Outbound</p>
-            </BmChat.Details>
-          </BmChat.Body>
-          <BmChat.Footer>
-            <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
-            <BmIcons icon={<AttachFileIcon />} size="xlarge" />
-            <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
-            <BmInput placeholder="Enter Message" />
-            <BmIcons icon={<SendIcon />} size="xlarge" />
-          </BmChat.Footer>
-        </BmChat>
-        {/* <BmCustomizedDropdown> */}
-        <BmButton>Create Ticket</BmButton>
-        <BmButtonDropDown
-          size="medium"
-          onClick={() => {
-            setDropdownItem(!dropDownItem);
-          }}
-          variant="primary"
-        >
-          Session
-        </BmButtonDropDown>
-        <BmListBox isOpen={dropDownItem}>
-          <BmRowLabel trailingIcon={<Person />} size="large">
-            <h4>Row Label</h4>
-          </BmRowLabel>
-          <BmRowLabel size="large">
-            <h4>Row Label</h4>
-          </BmRowLabel>
-        </BmListBox>
-        {/* </BmCustomizedDropdown> */}
+        <div className="main-chat-container">
+          <div className="sidebar">
+            <SideBar />
+          </div>
+          <div className="chat">
+            <ChatHeader />
+            <div className="chat-menu">
+              <div className="chat-messages">
+                <Chat />
+              </div>
+              <div className="chat-contact-info">
+                <CustomerInfo />
+              </div>
+            </div>
+          </div>
+        </div>
       </MainWrapper>
     </>
   );

package/src/Chat.js

@@ -0,0 +1,130 @@
+import React from "react";
+import { AttachFile } from "@material-ui/icons";
+import EmojiEmotionsIcon from "@material-ui/icons/EmojiEmotions";
+import QuickreplyIcon from "@mui/icons-material/Quickreply";
+import SendIcon from "@mui/icons-material/Send";
+import { BmChat, BmIcons, BmInput } from "./lib/components";
+import "../src/lib/assets/css/sidebar.css";
+import { BmMessage, BmMessageTabInput } from "./lib/components/Chats/chatInput";
+
+const Chat = () => {
+  return (
+    <BmChat>
+      <BmChat.Body>
+        <BmChat.Details
+          state="inbound"
+          session="bot"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+        >
+          <p>Inbound</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>
+      </BmChat.Body>
+      <BmChat.Footer>
+        <div class="footer">
+          <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+        </div>
+        <div class="footer">
+          <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+          <BmIcons icon={<AttachFile />} size="xlarge" />
+          <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
+          {/* <BmInput placeholder="Enter Message" /> */}
+          <BmMessage>
+            <BmMessageTabInput placeholder="Type your message" />
+          </BmMessage>
+          <BmIcons icon={<SendIcon />} size="xlarge" />
+        </div>
+      </BmChat.Footer>
+    </BmChat>
+  );
+};
+
+export default Chat;

package/src/ChatHeader.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { BmChatHeader, BmButton } from "../src/lib/components/";
+import "../src/lib/assets/css/sidebar.css";
+
+export const ChatHeader = () => {
+  return (
+    <>
+      <div className="chat-header">
+        <BmChatHeader>
+          <h2>Contact Name</h2>
+          <p>Last seen: 00:00</p>
+          <div className="chat-header-buttons">
+            <BmButton size="medium">End Session</BmButton>
+            <BmButton size="medium">End Session</BmButton>
+          </div>
+        </BmChatHeader>
+      </div>
+    </>
+  );
+};
+
+export default ChatHeader;

package/src/CustomerInfo.js

@@ -0,0 +1,46 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { BmBtnIcon, BmInfoTab, BmIcons } from '../src/lib/components/';
+import CallIcon from '@material-ui/icons/Call';
+import EmailIcon from '@material-ui/icons/Email';
+import NoteAddIcon from '@material-ui/icons/NoteAdd';
+import AddIcon from '@material-ui/icons/Add';
+import PriorityHighIcon from '@material-ui/icons/PriorityHigh';
+import { MoreVert } from '@material-ui/icons';
+
+const CustomerInfo = () => {
+  return (
+    <>
+      <BmInfoTab>
+        <BmInfoTab.Content>
+          <h3>Contact Name</h3>
+          <BmIcons icon={<MoreVert />} />
+        </BmInfoTab.Content>
+        <BmInfoTab.Content>
+          <BmInfoTab.Tabs>
+            <BmBtnIcon icon={<CallIcon />} />
+            <h4>Call</h4>
+          </BmInfoTab.Tabs>
+          <BmInfoTab.Tabs>
+            <BmBtnIcon icon={<EmailIcon />} />
+            <h4>Email</h4>
+          </BmInfoTab.Tabs>
+          <BmInfoTab.Tabs>
+            <BmBtnIcon icon={<NoteAddIcon />} />
+            <h4>Note</h4>
+          </BmInfoTab.Tabs>
+          <BmInfoTab.Tabs>
+            <BmBtnIcon icon={<AddIcon />} />
+            <h4>Log</h4>
+          </BmInfoTab.Tabs>
+          <BmInfoTab.Tabs>
+            <BmBtnIcon icon={<PriorityHighIcon />} variant="enabled" />
+            <h4>Priority</h4>
+          </BmInfoTab.Tabs>
+        </BmInfoTab.Content>
+      </BmInfoTab>
+    </>
+  );
+};
+
+export default CustomerInfo;

package/src/SideBar.js

@@ -0,0 +1,81 @@
+import React from "react";
+import { BmTab } from "./lib/components/Tabs/tabs";
+import { BmTag } from "./lib/components/Tags/tags";
+import ForumIcon from "@material-ui/icons/Forum";
+import { BmContactCard, BmAvatar, BmCounter } from "./lib/components";
+
+const SideBar = () => {
+  return (
+    <>
+      <div className="main-sidebar-tabs">
+        <BmTab
+          state="active"
+          className="sidebar-tabs"
+          leadingIcon={<ForumIcon />}
+        >
+          <h3>Chats</h3>
+        </BmTab>
+      </div>
+      <div className="sidebar-contacts">
+        <BmContactCard>
+          <BmContactCard.Profile>
+            <BmAvatar user="employee" size="small" color="{$BmPrimaryBlack}" />
+          </BmContactCard.Profile>
+          <BmContactCard.Details>
+            <BmContactCard.SubDetails>
+              <h3>Contact Names</h3>
+            </BmContactCard.SubDetails>
+            <BmContactCard.SubDetails>
+              <p>Message text</p>
+              <BmCounter>10</BmCounter>
+            </BmContactCard.SubDetails>
+            <BmContactCard.SubDetails>
+              <BmTag variant="success">
+                <p>label</p>
+              </BmTag>
+              <p>10:00 am</p>
+            </BmContactCard.SubDetails>
+          </BmContactCard.Details>
+        </BmContactCard>
+        <BmContactCard>
+          <BmContactCard.Profile>
+            <BmAvatar user="employee" size="small" color="{$BmPrimaryBlack}" />
+          </BmContactCard.Profile>
+          <BmContactCard.Details>
+            <BmContactCard.SubDetails>
+              <h3>Contact Names</h3>
+            </BmContactCard.SubDetails>
+            <BmContactCard.SubDetails>
+              <p>Message 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="employee" size="small" color="{$BmPrimaryBlack}" />
+          </BmContactCard.Profile>
+          <BmContactCard.Details>
+            <BmContactCard.SubDetails>
+              <h3>Contact Names</h3>
+            </BmContactCard.SubDetails>
+            <BmContactCard.SubDetails>
+              <p>Message text</p>
+              <BmCounter>10</BmCounter>
+            </BmContactCard.SubDetails>
+            <BmContactCard.SubDetails>
+              {/* <BmTag variant="success">label</BmTag> */}
+              <p>10:00 am</p>
+            </BmContactCard.SubDetails>
+          </BmContactCard.Details>
+        </BmContactCard>
+      </div>
+    </>
+  );
+};
+
+export default SideBar;

package/src/lib/assets/css/sidebar.css

@@ -6,6 +6,11 @@
     overflow: auto;
     max-width: 20%;
     width: 20%;
+    border: 1px solid #E2E2E2;
+}
+
+.sidebar>* {
+    margin-bottom: 1.5rem;
 }
 
 .main-sidebar-tabs {
@@ -19,4 +24,77 @@
 .main-sidebar-tabs>.sidebar-tabs {
     padding: 1.714rem;
     flex: 1;
+}
+
+.sidebar-contacts {
+    display: flex;
+    flex-direction: column;
+    margin: 0rem;
+    overflow: auto;
+}
+
+.main-chat-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: calc(100vh - 180px);
+    max-width: 100%;
+    width: 100%;
+    background: white;
+}
+
+.chat {
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+    height: 100%;
+    flex-grow: 1;
+    max-height: 100%;
+    height: 100%;
+}
+
+.chat-menu {
+    display: flex;
+    flex-direction: row;
+    height: 0%;
+    flex-grow: 1;
+    width: 100%;
+}
+
+.chat-messages {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: auto;
+    width: 80%;
+    border: 1px solid #E2E2E2;
+}
+
+.chat-contact-info {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: auto;
+    width: 25%;
+    border: 1px solid #E2E2E2;
+}
+
+.chat-header-buttons {
+    display: flex;
+    flex-direction: row;
+    margin-left: auto;
+}
+
+.chat-header-buttons>*:not(:last-child) {
+    margin-right: 0.5rem;
+}
+
+.chat-footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.chat-footer>*:not(:last-child) {
+    margin-right: 0.5rem;
 }

package/src/lib/components/Buttons/buttonIconsOnly.js

@@ -50,7 +50,7 @@ const BeemButtonIcon = styled.button`
       }
     }};
   box-sizing: border-box;
-  border-radius: 0.21875rem;
+  border-radius: 0.25rem;
   padding: 0rem;
 `;
 

package/src/lib/components/Buttons/buttons.js

@@ -47,7 +47,7 @@ const BeemButton = styled.button`
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  border-radius: 0.21875rem;
+  border-radius: 0.25rem;
   padding: ${({ size }) => {
     if (size === "large") return "0.625rem 1.5rem";
     if (size === "medium") return "0.4375rem 1rem";

package/src/lib/components/Cards/cards.js

@@ -6,7 +6,7 @@ const BmCard = styled.div`
   flex-direction: column;
   background: ${BmPrimaryWhite};
   border: 0.071rem solid ${BmGrey400};
-  border-radius: 0.21875rem;
+  border-radius: 0.25rem;
 `;
 
 BmCard.Header = styled.div`

package/src/lib/components/ChatBody/chatBody.js

@@ -5,16 +5,17 @@ import BmAvatar from "../Avatars/avatars";
 import { BmIcons } from "../iconStyles";
 import {
   BmGrey400,
-  BmGrey50,
   BmPrimaryWhite,
   BmPrimaryBlue,
   BmPrimaryBlack,
   BmSecondaryDarkGreen,
+  BmGrey200,
 } from "../colors";
 
 const BmChat = styled.div`
   display: flex;
   flex-direction: column;
+  height: 100%;
   ${"" /* border: 0.071rem solid ${BmGrey400}; */}
 `;
 
@@ -22,6 +23,8 @@ BmChat.Body = styled.div`
   display: flex;
   flex-direction: column;
   padding: 0rem 1.5rem;
+  flex-grow: 1;
+  overflow: auto;
 `;
 
 const Details = styled.div`
@@ -42,6 +45,7 @@ const Details = styled.div`
   overflow-wrap: break-word !important;
   word-wrap: break-word !important;
   margin: 0rem;
+  flex-grow: 1;
 `;
 
 const MessageDetails = styled.div`
@@ -131,14 +135,13 @@ BmChat.Details = ({
 
 BmChat.Footer = styled.div`
   display: flex;
-  flex-direction: row;
-  border-top: 0.071rem solid ${BmGrey400};
+  flex-direction: column;
+  ${'' /* border-top: 0.071rem solid ${BmGrey200}; */}
   padding: 0.5rem 0rem;
   align-items: center;
   justify-content: center;
-  ${'' /* background: ${BmGrey50}; */}
   > *:not(:last-child) {
-    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
   }
 `;
 

package/src/lib/components/ChatBody/chatBody.stories.js

@@ -17,32 +17,32 @@ export default {
 
 export const ChatBody = () => {
   return (
-    <BmChat>
-      <BmChat.Body>
-        <BmChat.Details
-          state="inbound"
-          session="bot"
-          displayTime={<p>12:00pm</p>}
-          status="sent"
-        >
-          <p>Inbound</p>
-        </BmChat.Details>
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>
-      </BmChat.Body>
-      <BmChat.Footer>
-        <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
-        <BmIcons icon={<AttachFileIcon />} size="xlarge" />
-        <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
-        <BmInput placeholder="Enter Message" />
-        <BmIcons icon={<SendIcon />} size="xlarge" />
-      </BmChat.Footer>
-    </BmChat>
+      <BmChat>
+        <BmChat.Body>
+          <BmChat.Details
+            state="inbound"
+            session="bot"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+          >
+            <p>Inbound</p>
+          </BmChat.Details>
+          <BmChat.Details
+            state="outbound"
+            session="live"
+            displayTime={<p>10:00am</p>}
+            status="failed"
+          >
+            <p>Outbound</p>
+          </BmChat.Details>
+        </BmChat.Body>
+        <BmChat.Footer>
+          <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+          <BmIcons icon={<AttachFileIcon />} size="xlarge" />
+          <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
+          <BmInput placeholder="Enter Message" />
+          <BmIcons icon={<SendIcon />} size="xlarge" />
+        </BmChat.Footer>
+      </BmChat>
   );
 };

package/src/lib/components/ChatHeader/chatHeader.js

@@ -5,12 +5,9 @@ export const BmChatHeader = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  ${'' /* border: 0.071rem solid ${BmGrey400}; */}
+  ${"" /* border: 0.071rem solid ${BmGrey400}; */}
   padding: 1rem;
   > *:not(:last-child) {
     margin-right: 0.5rem;
   }
-  button {
-    margin-left: auto;
-  }
 `;

package/src/lib/components/Chats/chat.js

@@ -25,7 +25,7 @@ export const BmChatWrapper = styled.div`
     return `${BmPrimaryWhite}`;
   }};
   border: 0.071rem solid ${BmGrey400};
-  border-radius: 0.21875rem 0.21875rem 0.21875rem 0rem;
+  border-radius: 0.25rem 0.21875rem 0.21875rem 0rem;
   max-width: 50%;
   overflow-wrap: break-word !important;
   word-wrap: break-word !important;
@@ -170,7 +170,7 @@ export const BmFileChat = ({ children, displayTime, type, ...rest }) => {
 export const BmImageWrapper = styled.div`
   background: ${BmGrey100};
   border: 0.071rem solid ${BmGrey400};
-  border-radius: 0.21875rem 0.21875rem 0rem 0.21875rem;
+  border-radius: 0.25rem 0.21875rem 0rem 0.21875rem;
   display: flex;
   flex-direction: column;
   max-width: 50%;

package/src/lib/components/Chats/chatInput.js

@@ -63,7 +63,7 @@ export const BmMessage = styled("div")`
   background: ${BmPrimaryWhite};
   border: 0.071rem solid ${BmGrey400};
   box-sizing: border-box;
-  border-radius: 0.21875rem;
+  border-radius: 0.25rem;
   flex-grow: 1;
   max-width: 75%;
 `;