beem-component 1.0.5 → 1.0.6

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

@@ -33,7 +33,7 @@ const BeemButtonIcon = styled.button`
       return `${BmGrey100}`;
     }
   }};
-  border: 0.0625rem solid
+  border: 0.071rem solid
     ${({ variant, disabled }) => {
       if (!disabled) {
         if (variant === "active") return `${BmPrimaryBlue}`;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
-
+//TODO: Button Links Pending
 import {
   BmPrimaryWhite,
   BmPrimaryBlue,
@@ -71,7 +71,7 @@ const BeemButton = styled.button`
     }
   }};
 
-  border: 0.0625rem solid
+  border: 0.071rem solid
     ${({ variant, disabled }) => {
       if (!disabled) {
         if (variant === "primary") return `${BmPrimaryBlue}`;
@@ -100,7 +100,7 @@ const BeemButton = styled.button`
         }
       }
     }};
-    border: 0.0625rem solid
+    border: 0.071rem solid
       ${({ variant, disabled }) => {
         if (!disabled) {
           if (variant === "secondary") return `${BmSecondaryCyan}`;
@@ -133,7 +133,7 @@ const BeemButton = styled.button`
         }
       }
     }};
-    border: 0.0625rem solid
+    border: 0.071rem solid
       ${({ variant, disabled }) => {
         if (!disabled) {
           if (variant === "secondary") return `${BmPrimaryBlue}`;

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

@@ -1,23 +1,18 @@
-import React from "react";
 import styled from "styled-components";
-import {
-  BmGrey400,
-  BmPrimaryBlack,
-  BmPrimaryWhite,
-  BmPrimaryBlue,
-} from "../colors";
+import { BmGrey400, BmPrimaryWhite } from "../colors";
 
-export const BmCard = styled.div`
+const BmCard = styled.div`
   display: flex;
   flex-direction: column;
   background: ${BmPrimaryWhite};
-  border: 0.0625rem solid ${BmGrey400};
+  border: 0.071rem solid ${BmGrey400};
   border-radius: 0.21875rem;
 `;
 
 BmCard.Header = styled.div`
   display: flex;
   flex-direction: row;
+  justify-content: space-between;
   padding: 1rem 1rem 0rem 1rem;
 `;
 
@@ -30,41 +25,13 @@ BmCard.Body = styled.div`
   padding: 0rem 1rem;
 `;
 
-export const CardTitleText = styled.h3`
-  color: ${BmPrimaryBlack};
-`;
-
-export const BmCardBodyText = styled.h1`
-  display: flex;
-  color: ${BmPrimaryBlack};
-  align-items: center;
-`;
-
-export const BmCardBodyImg = styled.div`
-  display: flex;
-  background: ${BmPrimaryBlue};
-  height: 3rem;
-  width: 3rem;
-`;
-
 BmCard.Footer = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  border-top: 0.0625rem solid ${BmGrey400};
+  border-top: 0.071rem solid ${BmGrey400};
   padding: 1rem;
   align-items: center;
 `;
 
-export const BmCardFooterText = styled.p`
-  display: flex;
-  color: ${BmPrimaryBlack};
-  align-items: center;
-`;
-
-export const BmCardDetails = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-export default BmCard;
+export default BmCard;

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

@@ -1,11 +1,9 @@
 /* eslint-disable import/no-anonymous-default-export */
 import React from "react";
 import BmCard from "./cards";
-import { text, boolean, select } from "@storybook/addon-knobs";
+import { text, boolean } from "@storybook/addon-knobs";
 import "../../../main.scss";
-import { Favorite, Home } from "@material-ui/icons";
 import { BmButton } from "../Buttons/buttons";
-import { BmTag } from "../tags";
 import Image from "../../assets/beem.jpeg";
 
 export default {

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

@@ -0,0 +1,145 @@
+import { Done, DoneAll } from "@material-ui/icons";
+import React from "react";
+import styled from "styled-components";
+import BmAvatar from "../Avatars/avatars";
+import { BmIcons } from "../iconStyles";
+import {
+  BmGrey400,
+  BmGrey50,
+  BmPrimaryWhite,
+  BmPrimaryBlue,
+  BmPrimaryBlack,
+  BmSecondaryDarkGreen,
+} from "../colors";
+
+const BmChat = styled.div`
+  display: flex;
+  flex-direction: column;
+  ${"" /* border: 0.071rem solid ${BmGrey400}; */}
+`;
+
+BmChat.Body = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0rem 1.5rem;
+`;
+
+const Details = styled.div`
+  display: flex;
+  ${"" /* align-items: center; */}
+  justify-content: ${({ state }) => {
+    if (state === "inbound") {
+      return "flex-start";
+    }
+    if (state === "outbound") {
+      return "flex-end";
+    }
+    return "row";
+  }};
+  > *:not(:last-child) {
+    margin-right: 1rem;
+  }
+  overflow-wrap: break-word !important;
+  word-wrap: break-word !important;
+  margin: 0rem;
+`;
+
+const MessageDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  max-width: 50%;
+  > * {
+    margin-top: 0.5rem;
+  }
+`;
+
+const Messages = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 1.143rem;
+  background: ${({ state }) => {
+    if (state) {
+      if (state === "inbound") return `${BmPrimaryWhite}`;
+      if (state === "outbound") return `${BmPrimaryBlue}`;
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+  color: ${({ state }) => {
+    if (state) {
+      if (state === "inbound") return `${BmPrimaryBlack}`;
+      if (state === "outbound") return `${BmPrimaryWhite}`;
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+  border-radius: ${({ state }) => {
+    if (state) {
+      if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
+      if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+  border: 0.071rem solid ${BmGrey400};
+  word-break: break-all;
+  margin: 0rem;
+`;
+
+const MessagesSubDetails = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  > *:not(:last-child) {
+    margin-right: 0.5rem;
+  }
+  margin-top: 0.5rem;
+`;
+
+const handleState = ({ session }) => {
+  if (session === "bot") {
+    return <BmAvatar size="small" user="chatbot" />;
+  }
+  if (session === "live") {
+    return <BmAvatar size="small" user="employee" />;
+  }
+};
+
+BmChat.Details = ({
+  children,
+  state,
+  displayTime,
+  status,
+  session,
+  ...rest
+}) => {
+  return (
+    <Details state={state} {...rest}>
+      {state === "inbound" && session && handleState({ state, session })}
+      <MessageDetails>
+        <Messages state={state}>{children}</Messages>
+        <MessagesSubDetails>
+          {displayTime && displayTime}
+          {status === "sent" && (
+            <BmIcons icon={<DoneAll />} color={`${BmSecondaryDarkGreen}`} size="small" />
+          )}
+          {status === "failed" && <BmIcons icon={<Done />} color={`${BmPrimaryBlack}`} size="small" />}
+        </MessagesSubDetails>
+      </MessageDetails>
+      {state === "outbound" && session && handleState({ state, session })}
+    </Details>
+  );
+};
+
+BmChat.Footer = styled.div`
+  display: flex;
+  flex-direction: row;
+  border-top: 0.071rem solid ${BmGrey400};
+  padding: 0.5rem 0rem;
+  align-items: center;
+  justify-content: center;
+  background: ${BmGrey50};
+  > *:not(:last-child) {
+    margin-right: 0.5rem;
+  }
+`;
+
+export default BmChat;

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

@@ -0,0 +1,48 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import BmChat from "./chatBody";
+import { BmIcons } from "../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 BmAvatar from "../Avatars/avatars";
+import { DoneAll } from "@material-ui/icons";
+import { BmInput } from "../input";
+
+export default {
+  component: BmChat,
+  title: "components/Chat/ChatBody",
+};
+
+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>
+  );
+};

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

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

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

@@ -0,0 +1,19 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import { BmButton } from "../Buttons/buttons";
+import { BmChatHeader } from "./chatHeader";
+
+export default {
+  component: BmChatHeader,
+  title: "components/Chat/ChatHeader",
+};
+
+export const ChatHeader = () => {
+  return (
+    <BmChatHeader>
+      <h2>Contact Name</h2>
+      <p>Last seen: 00:00</p>
+      <BmButton size="medium">End Session</BmButton>
+    </BmChatHeader>
+  );
+};

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

@@ -0,0 +1,58 @@
+import styled from "styled-components";
+import { BmGrey100 } from "../colors";
+
+export const BmContactCard = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  > *:not(:last-child) {
+    margin-right: 1rem;
+  }
+  &:hover {
+    background: ${BmGrey100};
+  }
+
+  ${({ active }) =>
+    active &&
+    `    
+    background: ${BmGrey100};
+  `}
+  cursor: pointer;
+`;
+
+BmContactCard.Profile = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+BmContactCard.Details = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  > *:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+`;
+
+BmContactCard.SubDetails = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  > * {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    align-items: flex-start;
+  }
+  ${'' /* TODO */}
+  ${'' /* > :last-child {
+    margin-left: auto;
+  } */}
+`;
+
+export default BmContactCard;

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

@@ -0,0 +1,34 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import BmContactCard from "./contactCards";
+import BmAvatar from "../Avatars/avatars";
+import BmCounter from "../MessageCounter/messageCounter";
+import { BmTag } from "../tags";
+
+export default {
+  component: { BmContactCard, BmAvatar, BmTag, BmCounter },
+  title: "components/ContactCard",
+};
+
+export const ContactCard = () => {
+  return (
+    <BmContactCard>
+      <BmContactCard.Profile>
+        <BmAvatar user="chatbot" size="medium" />
+      </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>
+  );
+};

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

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+import { BmGrey400 } from "../colors";
+
+const BmInfoTab = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem;
+  border: 0.071rem solid ${BmGrey400};
+  > *:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+`;
+
+BmInfoTab.Content = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+BmInfoTab.Tabs = styled.div`
+  display: flex;
+  flex-direction: column;
+  >*:not(:first-child) {
+    margin-top: 0.5rem;
+  }
+`;
+
+export default BmInfoTab;

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

@@ -0,0 +1,47 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import BmInfoTab from "./infoTab";
+import { BmTag } from "../tags";
+import { BmBtnIcon } from "../Buttons/buttonIconsOnly";
+import { MoreVert, Phone } from "@material-ui/icons";
+import { BmIcons } from "../iconStyles";
+
+export default {
+  component: BmInfoTab,
+  title: "components/InfoTab",
+};
+
+export const InfoTab = () => {
+  return (
+    <div style={{ maxWidth: "30%" }}>
+      <BmInfoTab>
+        <BmInfoTab.Content>
+          <h2>Contact Name</h2>
+          <BmIcons icon={<MoreVert />} />
+        </BmInfoTab.Content>
+        <BmInfoTab.Content>
+          <BmInfoTab.Tabs>
+            <BmBtnIcon icon={<Phone />} />
+            <h4>Call</h4>
+          </BmInfoTab.Tabs>
+          <BmInfoTab.Tabs>
+            <BmBtnIcon icon={<Phone />} />
+            <h4>Call</h4>
+          </BmInfoTab.Tabs>
+          <BmInfoTab.Tabs>
+            <BmBtnIcon icon={<Phone />} />
+            <h4>Call</h4>
+          </BmInfoTab.Tabs>
+          <BmInfoTab.Tabs>
+            <BmBtnIcon icon={<Phone />} />
+            <h4>Call</h4>
+          </BmInfoTab.Tabs>
+          <BmInfoTab.Tabs>
+            <BmBtnIcon icon={<Phone />} />
+            <h4>Call</h4>
+          </BmInfoTab.Tabs>
+        </BmInfoTab.Content>
+      </BmInfoTab>
+    </div>
+  );
+};

package/src/lib/components/MessageCounter/MessageCounter.stories.js

@@ -0,0 +1,35 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import BmCounter from "./messageCounter";
+import { text, select } from "@storybook/addon-knobs";
+
+export default {
+  component: BmCounter,
+  title: "components/MessageCounter",
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: { type: "select" },
+      description: "Size of the counter (can also be custom example: 10px)",
+      defaultValue: { summary: "small" },
+    },
+    children: {
+      description: "Counter Text",
+      defaultValue: { summary: undefined },
+    },
+  },
+};
+
+const optionSize = {
+  small: "small",
+  medium: "medium",
+  large: "large",
+};
+
+export const MessageCounter = () => {
+  return (
+    <BmCounter size={select("size", optionSize, "large")}>
+      {text("children", "00")}
+    </BmCounter>
+  );
+};

package/src/lib/components/MessageCounter/messageCounter.js

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import PropTypes from "prop-types";
+import { BmPrimaryWhite, BmPrimaryBlue } from "../colors";
+import { h3, h4, p } from "../text";
+
+const BmCounter = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: ${BmPrimaryWhite};
+  width: ${({ size }) => {
+    if (size === "small") return "1.429rem";
+    if (size === "medium") return "1.714rem";
+    if (size === "large") return "2.286rem";
+    if (!size) return "1.429rem";
+    return size;
+  }};
+  height: ${({ size }) => {
+    if (size === "small") return "1.429rem";
+    if (size === "medium") return "1.714rem";
+    if (size === "large") return "2.286rem";
+    if (!size) return "1.429rem";
+    return size;
+  }};
+  ${({ size }) => {
+    if (size === "large") return `${h3}`;
+    if (size === "medium") return `${h4}`;
+    if (size === "small") return `${p}`;
+    return `${p}`;
+  }}
+  border-radius: 50%;
+  text-align: center;
+  background: ${BmPrimaryBlue};
+`;
+
+BmCounter.propTypes = {
+  children: PropTypes.string,
+  size: PropTypes.string,
+};
+
+export default BmCounter;

package/src/lib/components/Tabs/tabs.js

@@ -5,7 +5,7 @@ import { BmGrey400, BmPrimaryBlue, BmPrimaryWhite } from "../colors";
 import { BmIcons } from "../iconStyles";
 
 const BmTabWrapper = styled.div`
-  display: inline-flex;
+  display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;

package/src/lib/components/Tabs/tabs.stories.js

@@ -33,4 +33,5 @@ Tabs.args = {
   leadingIcon: <Favorite />,
   trailingIcon: <KeyboardArrowDown />,
   disabled: false,
+  state: 'active',
 };

package/src/lib/components/iconStyles.js

@@ -106,11 +106,10 @@ const Avatarsize = (props) => {
   if (props.size === "small") return "1.143rem !important";
   if (props.size === "medium") return "1.429rem !important";
   if (props.size === "large") return "2.286rem !important";
-  if(!props.size) return "2.286rem !important";
+  if (!props.size) return "2.286rem !important";
   return props.size;
 };
 
-
 const AvatarIcon = {
   root: {
     fill: (props) => props.color || `${BmPrimaryWhite}`,
@@ -236,4 +235,3 @@ export const CopyToClipBoard = withStyles(icon)((props) => {
     </SvgIcon>
   );
 });
-

package/src/lib/components/index.js

@@ -1,5 +1,5 @@
 import BmAccordion from "./Accordion/Accordion";
-import { BmAvatar } from "./Avatars/avatars";
+import BmAvatar from "./Avatars/avatars";
 import { BmAlertIcon } from "./Buttons/buttonAlertIcons";
 import { BmBtnIcon } from "./Buttons/buttonIconsOnly";
 import { BmButton } from "./Buttons/buttons";
@@ -26,9 +26,16 @@ import {
   BmSupport,
   CopyToClipBoard,
 } from "./iconStyles";
-import { BmNoteBar } from "./NoteBar.js/noteBar";
+import { BmNoteBar } from "./NoteBar/noteBar";
 import { MainWrapper } from "../components/MainWrapper";
 
+//Chat Components
+import BmChat from "../components/ChatBody/chatBody";
+import { BmChatHeader } from "./ChatHeader/chatHeader";
+import BmContactCard from "./ContactCards/contactCards";
+import BmInfoTab from "./InfoTab/infoTab";
+import BmCounter from "./MessageCounter/messageCounter";
+
 export {
   BmAccordion,
   BmAvatar,
@@ -60,4 +67,10 @@ export {
   BmQuickReplyIcon,
   BmSupport,
   CopyToClipBoard,
+  //Chat Components
+  BmChatHeader,
+  BmChat,
+  BmInfoTab,
+  BmContactCard,
+  BmCounter,
 };