beem-component 1.1.6 → 1.2.0

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

@@ -0,0 +1,81 @@
+/* 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 { BmInput } from "../../input";
+import image from "../../../assets/chart-img.png";
+
+export default {
+  component: BmChat,
+  title: "components/Chat/MainChat/ChatBody",
+};
+
+export const ChatBody = () => {
+  return (
+    <BmChat>
+      <BmChat.Body>
+        <BmChat.Details
+          state="inbound"
+          session="bot"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+        >
+          <p>Inbound Text Message</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="inbound"
+          session="live"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+          fileName={<p>chat.png</p>}
+          src={image}
+        />
+        <BmChat.Details
+          state="inbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+          fileName={<p>file.csv</p>}
+          file={image}
+        />
+        <BmChat.Details
+          state="outbound"
+          session="bot"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+        >
+          <p>Outbound Text Message</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          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>}
+          file={image}
+        />
+      </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>
+  );
+};

package/src/lib/components/{ChatHeader → ChatComponents/ChatHeader}/chatHeader.stories.js

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

package/src/lib/components/ChatComponents/ColorPicker/colorPicker.stories.js

@@ -0,0 +1,17 @@
+import { BmColorPicker } from "./colorPicker";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  component: BmColorPicker,
+  title: "components/Chat/Components/ColorPicker",
+};
+
+export const ColorPicker = () => {
+  return (
+    <>
+      {["#33b1ba", "#000000", "#F62E48", "#8CC63F"].map((color) => (
+        <BmColorPicker key={color} color={color} />
+      ))}
+    </>
+  );
+};

package/src/lib/components/{ContactCards → ChatComponents/ContactCards}/contactCards.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { BmGrey100 } from "../colors";
+import { BmSecondaryBlue12 } from "../../colors";
 
 export const BmContactCard = styled.div`
   display: flex;
@@ -9,13 +9,13 @@ export const BmContactCard = styled.div`
     margin-right: 1rem;
   }
   &:hover {
-    background: ${BmGrey100};
+    background: ${BmSecondaryBlue12};
   }
 
   ${({ active }) =>
     active &&
     `    
-    background: ${BmGrey100};
+    background: ${BmSecondaryBlue12};
   `}
   cursor: pointer;
   padding: 1rem 1.5rem;

package/src/lib/components/{ContactCards → ChatComponents/ContactCards}/contactCards.stories.js

@@ -1,13 +1,13 @@
 /* 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";
+import BmAvatar from "../../Avatars/avatars";
+import BmCounter from "../../MessageCounter/messageCounter";
+import { BmTag } from "../../tags";
 
 export default {
   component: { BmContactCard, BmAvatar, BmTag, BmCounter },
-  title: "components/ContactCard",
+  title: "components/Chat/Components/ContactCard",
 };
 
 export const ContactCard = () => {

package/src/lib/components/ChatComponents/FormAccordion/FormAccordion.stories.js

@@ -0,0 +1,37 @@
+import { BmAccordion, BmChatForm } from "../..";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  component: BmChatForm,
+  title: "components/Chat/Components/FormAccordion",
+};
+
+export const FormAccordion = () => {
+  return (
+    <>
+      <div style={{ width: "30%" }}>
+        <BmAccordion>
+          <BmAccordion.Title>
+            <h3>Information</h3>
+          </BmAccordion.Title>
+          <BmAccordion.Body>
+            <BmChatForm>
+              <BmChatForm.Group>
+                <BmChatForm.Label>
+                  <h4>Account No.</h4>
+                </BmChatForm.Label>
+                <BmChatForm.Input placeholder="Enter here" />
+              </BmChatForm.Group>
+              <BmChatForm.Group>
+                <BmChatForm.Label>
+                  <h4>Preferred Language</h4>
+                </BmChatForm.Label>
+                <BmChatForm.Input placeholder="Enter here" />
+              </BmChatForm.Group>
+            </BmChatForm>
+          </BmAccordion.Body>
+        </BmAccordion>
+      </div>
+    </>
+  );
+};

package/src/lib/components/{InfoTab → ChatComponents/InfoTab}/infoTab.js

@@ -1,5 +1,4 @@
 import styled from "styled-components";
-// import { BmGrey400 } from "../colors";
 
 const BmInfoTab = styled.div`
   display: flex;

package/src/lib/components/{InfoTab → ChatComponents/InfoTab}/infoTab.stories.js

@@ -1,14 +1,13 @@
 /* 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 { BmBtnIcon } from "../../Buttons/buttonIconsOnly";
 import { MoreVert, Phone } from "@material-ui/icons";
-import { BmIcons } from "../iconStyles";
+import { BmIcons } from "../../iconStyles";
 
 export default {
   component: BmInfoTab,
-  title: "components/InfoTab",
+  title: "components/Chat/Components/InfoTab",
 };
 
 export const InfoTab = () => {

package/src/lib/components/ChatComponents/LabelAccordion/LabelAccordion.stories.js

@@ -0,0 +1,38 @@
+import { BmAccordion, BmChatLabels, BmTag } from "../..";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  component: BmChatLabels,
+  title: "components/Chat/Components/LabelAccordion",
+};
+
+export const LabelAccordion = () => {
+  return (
+    <>
+      <div style={{ width: "30%" }}>
+        <BmAccordion>
+          <BmAccordion.Title>
+            <h3>Labels</h3>
+            <a>Manage Labels</a>
+          </BmAccordion.Title>
+          <BmAccordion.Body>
+            <BmChatLabels>
+              <h4>Added labels</h4>
+              <div>
+                <BmTag variant="success">
+                  <p>label</p>
+                </BmTag>
+                <BmTag variant="warning">
+                  <p>label</p>
+                </BmTag>
+                <BmTag variant="error">
+                  <p>label</p>
+                </BmTag>
+              </div>
+            </BmChatLabels>
+          </BmAccordion.Body>
+        </BmAccordion>
+      </div>
+    </>
+  );
+};

package/src/lib/components/ChatComponents/NoteAccordion/NoteAccordion.stories.js

@@ -0,0 +1,47 @@
+import { BmAccordion, BmChatLabels, BmChatNotes, BmIcons } from "../..";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import { Delete, Edit } from "@material-ui/icons";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  component: BmChatLabels,
+  title: "components/Chat/Components/NoteAccordion",
+};
+
+export const NoteAccordion = () => {
+  return (
+    <>
+      <div style={{ width: "30%" }}>
+        <BmAccordion>
+          <BmAccordion.Title>
+            <h3>Notes</h3>
+          </BmAccordion.Title>
+          <BmAccordion.Body>
+            <BmChatNotes>
+              <BmChatNotes.Input type="text" placeholder="Add Note" />
+              {/* Display Note */}
+              <BmChatNotes.Details>
+                <div>
+                  <p>Description</p>
+                </div>
+                <div>
+                  <BmIcons icon={<Edit />} size="xsmall" />
+                  <BmIcons icon={<ContentCopyIcon />} size="xsmall" />
+                  <BmIcons icon={<Delete />} size="xsmall" />
+                </div>
+                <div>
+                  <p>
+                    <i>By User</i>
+                  </p>
+                  <p>
+                    <i>12:00pm</i>
+                  </p>
+                </div>
+              </BmChatNotes.Details>
+            </BmChatNotes>
+          </BmAccordion.Body>
+        </BmAccordion>
+      </div>
+    </>
+  );
+};

package/src/lib/components/Modals/modal.js

@@ -138,12 +138,12 @@ BmModal.Body = styled.div`
   > *:not(:last-child) {
     margin-bottom: 0.5rem;
   }
-  > * {
+  ${'' /* > * {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     width: 100%;
-  }
+  } */}
 `;
 
 BmModal.Footer = styled.div`

package/src/lib/components/colors.js

@@ -32,6 +32,9 @@ export const BmSecondaryGreen15 = "rgba(4, 132, 75, 0.15)";
 
 export const BmSecondaryGold15 = "rgba(243, 169, 41, 0.15)";
 
+// #33B1BA 12%
+export const BmSecondaryBlue12="rgba(51, 177, 186, 0.12)"; 
+
 // Background Colors
 export const BmBgLightBlue = "#E1EAFC";
 

package/src/lib/components/index.js

@@ -32,10 +32,10 @@ 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 BmChat from "./ChatComponents/ChatBody/chatBody";
+import { BmChatHeader } from "./ChatComponents/ChatHeader/chatHeader";
+import BmContactCard from "./ChatComponents/ContactCards/contactCards";
+import BmInfoTab from "./ChatComponents/InfoTab/infoTab";
 import BmCounter from "./MessageCounter/messageCounter";
 //Chat Accordion components
 import BmChatForm from "./ChatComponents/FormAccordion/FormAccordion";

package/dist/components/ChatBody/chatBody.js

@@ -1,144 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _icons = require("@material-ui/icons");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _avatars = _interopRequireDefault(require("../Avatars/avatars"));
-
-var _iconStyles = require("../iconStyles");
-
-var _colors = require("../colors");
-
-var _excluded = ["children", "state", "displayTime", "status", "session"];
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var BmChat = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  ", "\n"])), ""
-/* border: 0.071rem solid ${BmGrey400}; */
-);
-
-BmChat.Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0rem 1.5rem;\n  flex-grow: 1;\n  overflow: auto;\n"])));
-
-var Details = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  ", "\n  justify-content: ", ";\n  > *:not(:last-child) {\n    margin-right: 1rem;\n  }\n  overflow-wrap: break-word !important;\n  word-wrap: break-word !important;\n  margin: 0rem;\n  flex-grow: 1;\n"])), ""
-/* align-items: center; */
-, function (_ref) {
-  var state = _ref.state;
-
-  if (state === "inbound") {
-    return "flex-start";
-  }
-
-  if (state === "outbound") {
-    return "flex-end";
-  }
-
-  return "row";
-});
-
-var MessageDetails = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  max-width: 50%;\n  > * {\n    margin-top: 0.5rem;\n  }\n"])));
-
-var Messages = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 1.143rem;\n  background: ", ";\n  color: ", ";\n  border-radius: ", ";\n  border: 0.071rem solid ", ";\n  word-break: break-all;\n  margin: 0rem;\n"])), function (_ref2) {
-  var state = _ref2.state;
-
-  if (state) {
-    if (state === "inbound") return "".concat(_colors.BmPrimaryWhite);
-    if (state === "outbound") return "".concat(_colors.BmPrimaryBlue);
-  }
-
-  return "".concat(_colors.BmPrimaryWhite);
-}, function (_ref3) {
-  var state = _ref3.state;
-
-  if (state) {
-    if (state === "inbound") return "".concat(_colors.BmPrimaryBlack);
-    if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
-  }
-
-  return "".concat(_colors.BmPrimaryWhite);
-}, function (_ref4) {
-  var state = _ref4.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 "".concat(_colors.BmPrimaryWhite);
-}, _colors.BmGrey400);
-
-var MessagesSubDetails = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n  margin-top: 0.5rem;\n"])));
-
-var handleState = function handleState(_ref5) {
-  var session = _ref5.session;
-
-  if (session === "bot") {
-    return /*#__PURE__*/_react.default.createElement(_avatars.default, {
-      size: "small",
-      user: "chatbot"
-    });
-  }
-
-  if (session === "live") {
-    return /*#__PURE__*/_react.default.createElement(_avatars.default, {
-      size: "small",
-      user: "employee"
-    });
-  }
-};
-
-BmChat.Details = function (_ref6) {
-  var children = _ref6.children,
-      state = _ref6.state,
-      displayTime = _ref6.displayTime,
-      status = _ref6.status,
-      session = _ref6.session,
-      rest = _objectWithoutProperties(_ref6, _excluded);
-
-  return /*#__PURE__*/_react.default.createElement(Details, _extends({
-    state: state
-  }, rest), state === "inbound" && session && handleState({
-    state: state,
-    session: session
-  }), /*#__PURE__*/_react.default.createElement(MessageDetails, null, /*#__PURE__*/_react.default.createElement(Messages, {
-    state: state
-  }, children), /*#__PURE__*/_react.default.createElement(MessagesSubDetails, null, displayTime && displayTime, status === "sent" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
-    icon: /*#__PURE__*/_react.default.createElement(_icons.DoneAll, null),
-    color: "".concat(_colors.BmSecondaryDarkGreen),
-    size: "small"
-  }), status === "failed" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
-    icon: /*#__PURE__*/_react.default.createElement(_icons.Done, null),
-    color: "".concat(_colors.BmPrimaryBlack),
-    size: "small"
-  }))), state === "outbound" && session && handleState({
-    state: state,
-    session: session
-  }));
-};
-
-BmChat.Footer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ", "\n  padding: 0.5rem 0.5rem;\n  ", "\n  ", "\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n"])), ''
-/* border-top: 0.071rem solid ${BmGrey200}; */
-, ''
-/* align-items: center; */
-, ''
-/* justify-content: center; */
-);
-var _default = BmChat;
-exports.default = _default;

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;