beem-component 1.2.2 → 1.2.6

package/dist/assets/css/breakpoints.scss

@@ -0,0 +1,42 @@
+$breakpoints: ( xs: 0, sm: 480px, md: 720px, lg: 960px, xl: 1200px, xxl: 1400px);
+@mixin xs {
+    @media (min-width: map-get($breakpoints, 'xs')) {
+        @content;
+    }
+}
+
+@mixin sm {
+    @media (min-width: map-get($breakpoints, 'sm')) {
+        @content;
+    }
+}
+
+@mixin md {
+    @media (min-width: map-get($breakpoints, 'md')) {
+        @content;
+    }
+}
+
+@mixin lg {
+    @media (min-width: map-get($breakpoints, 'lg')) {
+        @content;
+    }
+}
+
+@mixin xl {
+    @media (min-width: map-get($breakpoints, 'xl')) {
+        @content;
+    }
+}
+
+@mixin xxl {
+    @media (min-width: map-get($breakpoints, 'xxl')) {
+        @content;
+    }
+}
+
+@mixin breakpoint($bp: 0) {
+    @media (min-width: $bp) {
+        @content;
+    }
+}

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

@@ -41,11 +41,9 @@ 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;\n  padding: 0rem 1.5rem;\n  flex-grow: 1;\n  overflow: auto;\n"])));
+BmChat.Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column-reverse;\n  padding: 0rem 1.5rem;\n  flex-grow: 1;\n  overflow: auto;\n  height: 100%;\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    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"])), ""
-/* align-items: center; */
-, function (_ref) {
+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"])), function (_ref) {
   var state = _ref.state;
 
   if (state === "inbound") {
@@ -59,7 +57,7 @@ var Details = _styledComponents.default.div(_templateObject3 || (_templateObject
   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    margin-bottom: 0.5rem;\n  }\n"])));
+var MessageDetails = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  max-width: 70%;\n  > * {\n    margin-top: 0.5rem;\n    margin-bottom: 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: 0.5rem;\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;

package/dist/components/Modals/modal.js

@@ -54,57 +54,37 @@ var _React$createContext = /*#__PURE__*/_react.default.createContext(),
     Provider = _React$createContext.Provider,
     Consumer = _React$createContext.Consumer;
 
-var Overlay = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n \tposition: fixed;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n}\n"])), _colors.BmBgGrey45);
+var Overlay = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n \tposition: fixed;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  width: 100vw;\n  height: 100vh;\n  background-color: ", ";\n}\n"])), _colors.BmBgGrey45);
 
 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: ", ";\n  max-width: ", ";\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])), _colors.BmPrimaryWhite, function (_ref) {
+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: ", ";\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, function (_ref) {
   var size = _ref.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";
+    if (size === "small") return "300px";
+    if (size === "default") return "500px";
+    if (size === "large") return "800px";
+    if (size === "xlarge") return "1140px";
     return size;
   }
 
-  return "35.714rem";
-}, function (_ref2) {
-  var size = _ref2.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";
+  return "500px";
 });
 
 exports.ModalContent = ModalContent;
 
-var ModalWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  z-index: 9999;\n  overflow-x: auto;\n  overflow-y: auto;\n  outline: 0;\n  position: fixed;\n  height: auto;\n  top: ", ";\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])), function (_ref3) {
-  var centered = _ref3.centered;
-
-  if (centered) {
-    return "50%";
-  }
-
-  return "15%";
-});
+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"])));
 
 exports.ModalWrapper = ModalWrapper;
 
-var BmModal = function BmModal(_ref4) {
-  var children = _ref4.children,
-      show = _ref4.show,
-      size = _ref4.size,
-      onHide = _ref4.onHide,
-      centered = _ref4.centered,
-      rest = _objectWithoutProperties(_ref4, _excluded);
+var BmModal = function BmModal(_ref2) {
+  var children = _ref2.children,
+      show = _ref2.show,
+      size = _ref2.size,
+      onHide = _ref2.onHide,
+      centered = _ref2.centered,
+      rest = _objectWithoutProperties(_ref2, _excluded);
 
   var _useState = (0, _react.useState)(show),
       _useState2 = _slicedToArray(_useState, 2),
@@ -146,13 +126,13 @@ exports.BmModal = BmModal;
 
 var ModalHeader = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
 
-BmModal.Header = function (_ref5) {
-  var children = _ref5.children,
-      size = _ref5.size,
-      onHide = _ref5.onHide,
-      closeButton = _ref5.closeButton,
-      show = _ref5.show,
-      rest = _objectWithoutProperties(_ref5, _excluded2);
+BmModal.Header = function (_ref3) {
+  var children = _ref3.children,
+      size = _ref3.size,
+      onHide = _ref3.onHide,
+      closeButton = _ref3.closeButton,
+      show = _ref3.show,
+      rest = _objectWithoutProperties(_ref3, _excluded2);
 
   return /*#__PURE__*/_react.default.createElement(Consumer, null, function (value) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ModalHeader, rest, children, closeButton && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, _extends({
@@ -165,8 +145,8 @@ BmModal.Header = function (_ref5) {
   });
 };
 
-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 (_ref6) {
-  var size = _ref6.size;
+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 (_ref4) {
+  var size = _ref4.size;
 
   if (size) {
     if (size === "small") return "21.429rem";

package/package.json

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

package/src/lib/assets/css/breakpoints.scss

@@ -0,0 +1,42 @@
+$breakpoints: ( xs: 0, sm: 480px, md: 720px, lg: 960px, xl: 1200px, xxl: 1400px);
+@mixin xs {
+    @media (min-width: map-get($breakpoints, 'xs')) {
+        @content;
+    }
+}
+
+@mixin sm {
+    @media (min-width: map-get($breakpoints, 'sm')) {
+        @content;
+    }
+}
+
+@mixin md {
+    @media (min-width: map-get($breakpoints, 'md')) {
+        @content;
+    }
+}
+
+@mixin lg {
+    @media (min-width: map-get($breakpoints, 'lg')) {
+        @content;
+    }
+}
+
+@mixin xl {
+    @media (min-width: map-get($breakpoints, 'xl')) {
+        @content;
+    }
+}
+
+@mixin xxl {
+    @media (min-width: map-get($breakpoints, 'xxl')) {
+        @content;
+    }
+}
+
+@mixin breakpoint($bp: 0) {
+    @media (min-width: $bp) {
+        @content;
+    }
+}

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

@@ -23,15 +23,15 @@ const BmChat = styled.div`
 
 BmChat.Body = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: column-reverse;
   padding: 0rem 1.5rem;
   flex-grow: 1;
   overflow: auto;
+  height: 100%;
 `;
 
 const Details = styled.div`
   display: flex;
-  ${"" /* align-items: center; */}
   justify-content: ${({ state }) => {
     if (state === "inbound") {
       return "flex-start";
@@ -54,7 +54,7 @@ const Details = styled.div`
 const MessageDetails = styled.div`
   display: flex;
   flex-direction: column;
-  max-width: 50%;
+  max-width: 70%;
   > * {
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;

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

@@ -12,8 +12,8 @@ export const Overlay = styled.div`
   top: 0;
   left: 0;
   z-index: 9999;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   background-color: ${BmBgGrey45};
 }
 `;
@@ -26,44 +26,36 @@ export const ModalContent = styled.div`
   background: ${BmPrimaryWhite};
   width: ${({ 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";
+      if (size === "small") return "300px"; 
+      if (size === "default") return "500px"; 
+      if (size === "large") return "800px"; 
+      if (size === "xlarge") return "1140px";
       return size;
     }
-    return "35.714rem";
-  }};
-  max-width: ${({ 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";
+    return "500px";
   }};
   > *:not(:last-child) {
     margin-bottom: 1rem;
   }
+  @media (min-width: 576px) {
+    max-width: 500px;
+    width: 500px;
+  }
 `;
 
 export const ModalWrapper = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
   z-index: 9999;
-  overflow-x: auto;
-  overflow-y: auto;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
   outline: 0;
-  position: fixed;
-  height: auto;
-  top: ${({ centered }) => {
-    if (centered) {
-      return "50%";
-    }
-    return "15%";
-  }};
-  left: 50%;
-  transform: translate(-50%, -50%);
+  margin: 2rem auto;
+  overflow-x: hidden;
+  overflow-y: auto;
 `;
 
 export const BmModal = ({