beem-component 1.0.7 → 1.1.1

package/src/Chat.js

@@ -0,0 +1,120 @@
+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';
+
+const Chat = () => {
+  return (
+    <BmChat>
+      <BmChat.Body style={{ flex: 1 }}>
+        <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>
+        <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+        <BmIcons icon={<AttachFile />} size="xlarge" />
+        <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
+        <BmInput placeholder="Enter Message" />
+        <BmIcons icon={<SendIcon />} size="xlarge" />
+      </BmChat.Footer>
+    </BmChat>
+  );
+};
+
+export default Chat;

package/src/ChatHeader.js

@@ -0,0 +1,19 @@
+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>
+          <BmButton size="medium">End Session</BmButton>
+        </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,80 @@
+import React from "react";
+import { BmTab } from "./lib/components/Tabs/tabs";
+import ForumIcon from "@material-ui/icons/Forum";
+import { BmContactCard, BmAvatar, BmCounter, BmTag } 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

@@ -1,3 +1,18 @@
+.sidebar {
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+    height: 100%;
+    overflow: auto;
+    max-width: 20%;
+    width: 20%;
+    border: 1px solid #E2E2E2;
+}
+
+.sidebar>* {
+    margin-bottom: 1.5rem;
+}
+
 .main-sidebar-tabs {
     display: flex;
     flex-direction: row;
@@ -9,4 +24,57 @@
 .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;
 }

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

@@ -15,6 +15,7 @@ import {
 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`
@@ -136,7 +140,7 @@ BmChat.Footer = styled.div`
   padding: 0.5rem 0rem;
   align-items: center;
   justify-content: center;
-  background: ${BmGrey50};
+  ${'' /* background: ${BmGrey50}; */}
   > *:not(:last-child) {
     margin-right: 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

@@ -1,11 +1,11 @@
 import styled from "styled-components";
-import { BmGrey400 } from "../colors";
+// import { BmGrey400 } from "../colors";
 
 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;

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%;
 `;

package/src/lib/components/ContactCards/contactCards.js

@@ -18,6 +18,7 @@ export const BmContactCard = styled.div`
     background: ${BmGrey100};
   `}
   cursor: pointer;
+  padding: 1rem 1.5rem;
 `;
 
 BmContactCard.Profile = styled.div`

package/src/lib/components/InfoTab/infoTab.js

@@ -1,11 +1,11 @@
 import styled from "styled-components";
-import { BmGrey400 } from "../colors";
+// import { BmGrey400 } from "../colors";
 
 const BmInfoTab = styled.div`
   display: flex;
   flex-direction: column;
   padding: 1.5rem;
-  border: 0.071rem solid ${BmGrey400};
+  ${'' /* border: 0.071rem solid ${BmGrey400}; */}
   > *:not(:last-child) {
     margin-bottom: 1rem;
   }

package/src/lib/components/Lists/listBox.js

@@ -24,7 +24,7 @@ export const BmListBox = styled.div`
   background: ${BmPrimaryWhite};
   border: 0.071rem solid ${BmGrey400};
   box-shadow: 0rem 0.286rem 0.286rem rgba(0, 0, 0, 0.25);
-  border-radius: 0.21875rem;
+  border-radius: 0.25rem;
   z-index: 99999;
   cursor: pointer;
 `;

package/src/lib/components/Tags/tags.js

@@ -0,0 +1,109 @@
+import React from "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
+import { BmIcons } from "../iconStyles";
+import {
+  BmPrimaryWhite,
+  BmSecondaryDarkGreen,
+  BmSecondaryRed,
+  BmPrimaryBlack,
+  BmGrey100,
+  BmGrey400,
+  BmPrimaryGold,
+} from "../../components/colors";
+
+const Color = ({ variant, color }) => {
+  if (variant === "success" || variant === "warning" || variant === "danger") {
+    return `${BmPrimaryWhite}`;
+  }
+  if (!variant && color) {
+    return color;
+  }
+  return `${BmPrimaryBlack}`;
+};
+
+const BeemTag = styled.button`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0.214rem 0.571rem;
+  border-radius: 0.25rem;
+  background: ${({ variant }) => {
+    if (variant === "neutral") return `${BmGrey100}`;
+    if (variant === "success") return `${BmSecondaryDarkGreen}`;
+    if (variant === "warning") return `${BmPrimaryGold}`;
+    if (variant === "danger") return `${BmSecondaryRed}`;
+    if (variant === "light") return `${BmPrimaryWhite}`;
+    if (!variant) return `${BmGrey100}`;
+  }};
+  border: 0.071rem solid
+    ${({ variant }) => {
+      if (variant === "neutral") return `${BmGrey100}`;
+      if (variant === "success") return `${BmSecondaryDarkGreen}`;
+      if (variant === "warning") return `${BmPrimaryGold}`;
+      if (variant === "danger") return `${BmSecondaryRed}`;
+      if (variant === "light") return `${BmGrey400}`;
+      return `${BmGrey100}`;
+    }};
+  > * {
+    color: ${({ variant, color }) => Color({ variant, color })};
+    text-transform: uppercase;
+  }
+
+  > *:not(:last-child) {
+    margin-right: 0.5rem;
+  }
+`;
+
+export const BmTag = (props) => {
+  const {
+    variant,
+    size,
+    disabled,
+    children,
+    leadingIcon,
+    trailingIcon,
+    color,
+    ...rest
+  } = props;
+
+  return (
+    <BeemTag
+      size={size}
+      variant={variant}
+      disabled={disabled}
+      children={children}
+      color={color}
+      {...rest}
+    >
+      {leadingIcon && (
+        <BmIcons
+          disabled={disabled}
+          icon={leadingIcon}
+          variant={variant}
+          color={Color({color, variant})}
+          size={size || 'small'}
+        />
+      )}
+      {children}
+      {trailingIcon && (
+        <BmIcons
+          icon={trailingIcon}
+          disabled={disabled}
+          color={Color({color, variant})}
+          size={size || 'small'}
+        />
+      )}
+    </BeemTag>
+  );
+};
+
+BmTag.propTypes = {
+  children: PropTypes.object,
+  trailingIcon: PropTypes.node,
+  leadingIcon: PropTypes.node,
+  color: PropTypes.string,
+  size: PropTypes.string,
+  variant: PropTypes.string,
+};