beem-component 1.1.6 → 1.1.7

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

@@ -1,147 +0,0 @@
-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,
-  BmPrimaryWhite,
-  BmPrimaryBlue,
-  BmPrimaryBlack,
-  BmSecondaryDarkGreen,
-} from "../colors";
-
-const BmChat = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  ${"" /* border: 0.071rem solid ${BmGrey400}; */}
-`;
-
-BmChat.Body = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 0rem 1.5rem;
-  flex-grow: 1;
-  overflow: auto;
-`;
-
-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;
-  flex-grow: 1;
-`;
-
-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: column;
-  ${'' /* border-top: 0.071rem solid ${BmGrey200}; */}
-  padding: 0.5rem 0.5rem;
-  ${'' /* align-items: center; */}
-  ${'' /* justify-content: center; */}
-  > *:not(:last-child) {
-    margin-bottom: 0.5rem;
-  }
-`;
-
-export default BmChat;

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

@@ -1,48 +0,0 @@
-/* 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>
-  );
-};