beem-component 1.5.1 → 1.5.2

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

@@ -25,7 +25,7 @@ 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,

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,7 +133,7 @@ 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  ", "\n  ", "\n"])), ''
+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";
@@ -143,9 +143,8 @@ if (size === "xlarge") return "81.429rem";
 return size;
 }
 return "35.714rem";
-}}; */
-, ''
-/* overflow: auto; */
+}};
+overflow: auto; */
 );
 BmModal.Footer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
 BmModal.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "beem-component",
-    "version": "1.5.1",
+    "version": "1.5.2",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {
@@ -32,7 +32,7 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router-dom": "^5.3.0",
-        "react-scripts": "^5.0.1",
+        "react-scripts": "4.0.3",
         "save": "^2.4.0",
         "styled-components": "^5.3.0",
         "web-vitals": "^1.1.2"

package/src/App.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import map from "lodash/map";
 import { GlobalStyle, BmModal, BmButton } from "./lib/components";
-import Select from 'react-select';
+import Select from "react-select";
 
 const App = () => {
   const [showModal, setShowModal] = useState(false);
@@ -33,14 +33,9 @@ const App = () => {
         </BmModal.Header>
         <BmModal.Body>
           <Select
-            // value={{
-            //   label: VENDOR_ACCOUNT_STATUSES[values.active],
-            //   value: values.active,
-            // }}
             options={VENDOR_ACCOUNT_STATUS_OPTIONS}
             placeholder="Select"
-            // onChange={(option) => setFieldValue("active", option.value)}
-          />{" "}
+          />
         </BmModal.Body>
         <BmModal.Footer>
           <BmButton size="small">Send</BmButton>

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

@@ -9,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;
 `;
@@ -143,8 +143,8 @@ BmModal.Body = styled.div`
       return size;
     }
     return "35.714rem";
-  }}; */}
-  ${'' /* overflow: auto; */}
+  }};
+  overflow: auto; */}
 `;
 
 BmModal.Footer = styled.div`