beem-component 1.4.9 → 1.5.2

package/dist/components/ChatComponents/ChatBody/chatBody.js

@@ -43,7 +43,7 @@ var BmChat = _styledComponents.default.div(_templateObject || (_templateObject =
 /* border: 0.071rem solid ${BmGrey400}; */
 );
 
-BmChat.Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column-reverse;\n  padding: 0rem 1rem;\n  flex-grow: 1;\n  overflow: auto;\n  height: 100%;\n  border: 10px solid green;\n"])));
+BmChat.Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column-reverse;\n  padding: 0rem 1rem;\n  flex-grow: 1;\n  overflow: auto;\n  height: 100%;\n"])));
 
 var Details = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: ", ";\n  > *:not(:last-child) {\n    margin-right: 1rem;\n    margin-bottom: 0.5rem;\n  }\n  overflow-wrap: break-word !important;\n  word-wrap: break-word !important;\n  margin: 0rem;\n  flex-grow: 1;\n  ", "\n"])), function (_ref) {
   var state = _ref.state;

package/dist/components/ChatComponents/ChatBody/chatBody.stories.js

@@ -49,7 +49,11 @@ var ChatBody = function ChatBody() {
     displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
     status: "sent",
     fileName: /*#__PURE__*/_react.default.createElement("p", null, "chat.png"),
-    src: _chartImg.default
+    src: _chartImg.default,
+    sessionDetails: {
+      message: /*#__PURE__*/_react.default.createElement("h3", null, "Session Message"),
+      time: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm")
+    }
   }), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
     state: "inbound",
     session: "live",

package/dist/components/ChatComponents/ChatBody/sessionDetails.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SessionDetails = void 0;
 
+var _react = _interopRequireDefault(require("react"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _colors = require("../../colors");
@@ -23,17 +25,17 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var SessionDetailsWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  text-align: center;\n  border-bottom: 0.071rem solid ", ";\n  margin: 0.5rem;\n"])), _colors.BmGrey200);
+var SessionDetailsWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  text-align: center;\n  border-bottom: 0.071rem solid ", ";\n  margin: 1rem 0.5rem;\n"])), _colors.BmGrey200);
 
 var SessionDetails = function SessionDetails(_ref) {
   var message = _ref.message,
       time = _ref.time,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(SessionDetailsWrapper, _extends({
+  return /*#__PURE__*/_react.default.createElement(SessionDetailsWrapper, _extends({
     time: time,
     message: message
-  }, rest), /*#__PURE__*/React.createElement("p", null, "\xA0"), message || /*#__PURE__*/React.createElement("p", null, "\xA0"), time || /*#__PURE__*/React.createElement("p", null, "\xA0"));
+  }, rest), /*#__PURE__*/_react.default.createElement("p", null, "\xA0"), message || /*#__PURE__*/_react.default.createElement("p", null, "\xA0"), time || /*#__PURE__*/_react.default.createElement("p", null, "\xA0"));
 };
 
 exports.SessionDetails = SessionDetails;

package/dist/components/Modals/modal.js

@@ -58,11 +58,11 @@ var Overlay = _styledComponents.default.div(_templateObject || (_templateObject
 
 exports.Overlay = Overlay;
 
-var ModalContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-radius: 0.25rem;\n  padding: 1rem;\n  margin: auto;\n  background: ", ";\n  width: auto;\n  max-width: 100%;\n\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n  @media (min-width: 576px) {\n    max-width: 500px;\n    width: 500px;\n  }\n"])), _colors.BmPrimaryWhite);
+var ModalContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-radius: 0.25rem;\n  padding: 1rem;\n  margin: 2rem auto;\n  background: ", ";\n  width: auto;\n  max-width: 100%;\n\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n  @media (min-width: 576px) {\n    max-width: 500px;\n    width: 500px;\n  }\n"])), _colors.BmPrimaryWhite);
 
 exports.ModalContent = ModalContent;
 
-var ModalWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  outline: 0;\n  margin: 2rem auto;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
+var ModalWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  outline: 0;\n  margin: auto;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
 
 exports.ModalWrapper = ModalWrapper;
 
@@ -133,19 +133,19 @@ BmModal.Header = function (_ref2) {
   });
 };
 
-BmModal.Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n  max-height: ", ";\n  overflow: auto;\n"])), function (_ref3) {
-  var size = _ref3.size;
-
-  if (size) {
-    if (size === "small") return "21.429rem";
-    if (size === "default") return "35.714rem";
-    if (size === "large") return "57.143rem";
-    if (size === "xlarge") return "81.429rem";
-    return size;
-  }
-
-  return "35.714rem";
-});
+BmModal.Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n  ", "\n"])), ''
+/* max-height: ${({ size }) => {
+if (size) {
+if (size === "small") return "21.429rem";
+if (size === "default") return "35.714rem";
+if (size === "large") return "57.143rem";
+if (size === "xlarge") return "81.429rem";
+return size;
+}
+return "35.714rem";
+}};
+overflow: auto; */
+);
 BmModal.Footer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
 BmModal.propTypes = {
   size: _propTypes.default.string,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "beem-component",
-    "version": "1.4.9",
+    "version": "1.5.2",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {

package/src/App.js

@@ -1,67 +1,49 @@
-import React from "react";
-import { GlobalStyle, BmChat } from "./lib/components";
-import image from "../src/lib/assets/chart-img.png";
+import React, { useState } from "react";
+import map from "lodash/map";
+import { GlobalStyle, BmModal, BmButton } from "./lib/components";
+import Select from "react-select";
 
 const App = () => {
+  const [showModal, setShowModal] = useState(false);
+
+  const VENDOR_ACCOUNT_STATUSES = {
+    0: "Inactive",
+    1: "Active",
+  };
+
+  const VENDOR_ACCOUNT_STATUS_OPTIONS = map(
+    VENDOR_ACCOUNT_STATUSES,
+    (type, key) => ({
+      value: key,
+      label: type,
+    }),
+  );
   return (
     <>
       <GlobalStyle />
-      <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}
-            sessionDetails={{ message: <h3>tejal</h3>, time: <p>today</p> }}
-          />
-          <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}
-            onDownload={() => {
-              alert("hello");
-            }}
+      <BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
+      <BmModal
+        size="small"
+        show={showModal}
+        onHide={() => setShowModal(false)}
+        centered
+      >
+        <BmModal.Header closeButton>
+          <h2>Header</h2>
+        </BmModal.Header>
+        <BmModal.Body>
+          <Select
+            options={VENDOR_ACCOUNT_STATUS_OPTIONS}
+            placeholder="Select"
           />
-        </BmChat.Body>
-      </BmChat>
+        </BmModal.Body>
+        <BmModal.Footer>
+          <BmButton size="small">Send</BmButton>
+          <BmButton size="small" variant="secondary">
+            View
+          </BmButton>
+        </BmModal.Footer>
+      </BmModal>
     </>
   );
 };

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

@@ -28,7 +28,6 @@ BmChat.Body = styled.div`
   flex-grow: 1;
   overflow: auto;
   height: 100%;
-  border: 10px solid green;
 `;
 
 const Details = styled.div`

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

@@ -34,6 +34,7 @@ export const ChatBody = () => {
           status='sent'
           fileName={<p>chat.png</p>}
           src={image}
+          sessionDetails={{ message: <h3>Session Message</h3>, time: <p>12:00pm</p> }}
         />
         <BmChat.Details
           state='inbound'

package/src/lib/components/ChatComponents/ChatBody/sessionDetails.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from "styled-components";
 import { BmGrey200 } from "../../colors";
 
@@ -8,7 +9,7 @@ const SessionDetailsWrapper = styled.div`
   align-items: center;
   text-align: center;
   border-bottom: 0.071rem solid ${BmGrey200};
-  margin: 0.5rem;
+  margin: 1rem 0.5rem;
 `;
 
 export const SessionDetails = ({ message, time, ...rest }) => {

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

@@ -22,7 +22,7 @@ export const ModalContent = styled.div`
   flex-direction: column;
   border-radius: 0.25rem;
   padding: 1rem;
-  margin: auto;
+  margin: 2rem auto;
   background: ${BmPrimaryWhite};
   width: auto;
   max-width: 100%;
@@ -46,7 +46,7 @@ export const ModalWrapper = styled.div`
   height: 100%;
   overflow: hidden;
   outline: 0;
-  margin: 2rem auto;
+  margin: auto;
   overflow-x: hidden;
   overflow-y: auto;
 `;
@@ -134,7 +134,7 @@ BmModal.Body = styled.div`
   > *:not(:last-child) {
     margin-bottom: 0.5rem;
   }
-  max-height: ${({ size }) => {
+  ${'' /* max-height: ${({ size }) => {
     if (size) {
       if (size === "small") return "21.429rem";
       if (size === "default") return "35.714rem";
@@ -144,7 +144,7 @@ BmModal.Body = styled.div`
     }
     return "35.714rem";
   }};
-  overflow: auto;
+  overflow: auto; */}
 `;
 
 BmModal.Footer = styled.div`