beem-component 1.5.9 → 1.6.2

package/dist/components/search.js

@@ -1,14 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BmSearch = void 0;
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -21,15 +17,23 @@ var _iconStyles = require("./iconStyles");
 
 var _excluded = ["dropdown"];
 
-var BmSearchField = _styledComponents.default.input.withConfig({
-  displayName: "search__BmSearchField"
-})(["color:", ";border:none;padding:0rem;&:visited,&:active,&:hover,&:focus{outline:none !important;text-decoration:none;color:", ";}", ""], _colors.BmSecondaryGrey, _colors.BmPrimaryBlack, function (props) {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 BmSearchField = _styledComponents.default.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  border: none;\n  padding: 0rem;\n  &:visited,\n  &:active,\n  &:hover,\n  &:focus {\n    outline: none !important;\n    text-decoration: none;\n    color: ", ";\n  }\n  ", "\n"])), _colors.BmSecondaryGrey, _colors.BmPrimaryBlack, function (props) {
   return props.dropdown === "yes" && "margin-right: 1.714rem;";
 });
 
-var BmSearchWrapper = _styledComponents.default.div.withConfig({
-  displayName: "search__BmSearchWrapper"
-})(["display:flex;flex-direction:row;align-items:center;background:", ";border:0.071rem solid ", ";box-sizing:border-box;border-radius:0.25rem;", " padding:", ";"], _colors.BmPrimaryWhite, _colors.BmGrey400, ""
+var BmSearchWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  box-sizing: border-box;\n  border-radius: 0.25rem;\n  ", "\n  padding: ", ";\n"])), _colors.BmPrimaryWhite, _colors.BmGrey400, ""
 /* height: 2.929rem; */
 , function (_ref) {
   var dropdown = _ref.dropdown;
@@ -41,22 +45,19 @@ var BmSearchWrapper = _styledComponents.default.div.withConfig({
   }
 });
 
-var BmStretch = _styledComponents.default.div.withConfig({
-  displayName: "search__BmStretch"
-})(["display:flex;flex-direction:row;"]);
+var BmStretch = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n"])));
 
-var SearchIcon = (0, _styledComponents.default)(_iconStyles.BmSearchIcon).withConfig({
-  displayName: "search__SearchIcon"
-})(["margin-right:0.714rem;display:flex;"]);
+var SearchIcon = (0, _styledComponents.default)(_iconStyles.BmSearchIcon)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-right: 0.714rem;\n  display: flex;\n"])));
 
 var BmSearch = function BmSearch(_ref2) {
   var dropdown = _ref2.dropdown,
-      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(BmStretch, rest, /*#__PURE__*/_react.default.createElement(BmSearchWrapper, Object.assign({
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(BmStretch, rest, /*#__PURE__*/_react.default.createElement(BmSearchWrapper, _extends({
     dropdown: dropdown
-  }, rest), /*#__PURE__*/_react.default.createElement(SearchIcon, Object.assign({
+  }, rest), /*#__PURE__*/_react.default.createElement(SearchIcon, _extends({
     size: "small"
-  }, rest)), /*#__PURE__*/_react.default.createElement(BmSearchField, Object.assign({}, rest, {
+  }, rest)), /*#__PURE__*/_react.default.createElement(BmSearchField, _extends({}, rest, {
     dropdown: dropdown
   }))), dropdown === "yes" && /*#__PURE__*/_react.default.createElement(_dropdown.BmDropdown, null)));
 };

package/dist/components/wrapper.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,17 +7,19 @@ exports.BmChatMenuWrapper = exports.BmChatInfoWrapper = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var BmChatInfoWrapper = _styledComponents.default.div.withConfig({
-  displayName: "wrapper__BmChatInfoWrapper"
-})(["display:flex;flex-direction:column;max-height:100%;height:100%;flex-grow:1;max-width:75%;width:75%;", " max-height:100%;height:100%;"], ''
+var _templateObject, _templateObject2;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var BmChatInfoWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  height: 100%;\n  flex-grow: 1;\n  max-width: 75%;\n  width: 75%;\n  ", "\n  max-height: 100%;\n  height: 100%;\n"])), ''
 /* border: 0.714rem solid orange; */
 );
 
 exports.BmChatInfoWrapper = BmChatInfoWrapper;
 
-var BmChatMenuWrapper = _styledComponents.default.div.withConfig({
-  displayName: "wrapper__BmChatMenuWrapper"
-})(["display:flex;flex-direction:row;justify-content:space-between;max-height:100%;height:100%;max-width:100%;width:100%;", " max-height:85%;height:85%;"], ''
+var BmChatMenuWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  max-height: 100%;\n  height: 100%;\n  max-width: 100%;\n  width: 100%;\n  ", "\n  max-height: 85%;\n  height: 85%;\n"])), ''
 /* border: 0.714rem solid orange; */
 );
 

package/package.json

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

package/src/App.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { GlobalStyle, BmModal, BmButton } from './lib/components';
 import { BmCheckboxToggle } from './lib/components/Checkbox/checkboxToggler';
+import BmPaymentBox from './lib/components/PaymentBox/paymentBox';
 
 const Chat = () => {
   const [checked, setChecked] = useState(false);
@@ -31,6 +32,18 @@ const Chat = () => {
           <p>This is a footer</p>
         </BmModal.Footer>
       </BmModal>
+
+      <BmPaymentBox>
+        <BmPaymentBox.Header>
+          <h2>Header</h2>
+        </BmPaymentBox.Header>
+        <BmPaymentBox.Body>
+          <p>This is a body</p>
+        </BmPaymentBox.Body>
+        <BmPaymentBox.Footer>
+          <p>This is a footer</p>
+        </BmPaymentBox.Footer>
+      </BmPaymentBox>
     </>
   );
 };

package/src/lib/components/Avatars/avatars.js

@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import SmartToyIcon from '@mui/icons-material/SmartToy';
+import ChatIcon from '@mui/icons-material/Chat';
 import { BmGrey100, BmPrimaryBlue } from '../colors';
 import { BmAvatarIcon } from '../iconStyles';
 
@@ -29,6 +30,7 @@ export const BmAvatarWrapper = styled.div`
   background: ${({ user }) => {
     if (user === 'chatbot') return `${BmPrimaryBlue}`;
     if (user === 'employee') return `${BmPrimaryBlue}`;
+    if (user === 'sms') return `${BmPrimaryBlue}`;
     return `${BmGrey100}`;
   }};
   border-radius: ${({ type }) => {
@@ -40,6 +42,8 @@ export const BmAvatarWrapper = styled.div`
     ${({ user }) => {
       if (user === 'chatbot') return `${BmPrimaryBlue}`;
       if (user === 'employee') return `${BmPrimaryBlue}`;
+      if (user === 'sms') return `${BmPrimaryBlue}`;
+
       return `${BmGrey100}`;
     }};
 `;
@@ -59,9 +63,15 @@ const BmAvatar = (props) => {
           {...rest}
         />
       )}
-      {user !== 'chatbot' && user !== 'employee' && user !== 'default' && (
-        <BmAvatarIcon icon={user} size={size} color={color} {...rest} />
+      {user === 'sms' && (
+        <BmAvatarIcon icon={<ChatIcon />} size={size} color={color} {...rest} />
       )}
+      {user !== 'chatbot' &&
+        user !== 'employee' &&
+        user !== 'sms' &&
+        user !== 'default' && (
+          <BmAvatarIcon icon={user} size={size} color={color} {...rest} />
+        )}
     </BmAvatarWrapper>
   );
 };

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

@@ -111,6 +111,9 @@ const handleState = ({ session }) => {
   if (session === 'live') {
     return <BmAvatar size="small" user="employee" />;
   }
+  if (session === 'sms') {
+    return <BmAvatar size="small" user="sms" />;
+  }
 };
 
 // Start of File Attachment

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

@@ -20,7 +20,7 @@ export const ChatBody = () => {
       <BmChat.Body>
         <BmChat.Details
           state="inbound"
-          session="bot"
+          session="sms"
           displayTime={<p>12:00pm</p>}
           status="sent"
           sessionDetails={{

package/src/lib/components/PaymentBox/paymentBox.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { BmGrey200, BmPrimaryBlue } from '../colors';
+
+const BmPaymentBoxWrapper = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 240px;
+  min-height: 280px;
+  border: 0.071rem solid ${BmGrey200};
+  border-radius: 0.5rem;
+  > * {
+    margin-bottom: 1rem;
+  }
+  &:hover {
+    box-shadow: 0 0 60px rgba(0, 0, 0, 0.08);
+  }
+`;
+
+const BmPaymentBox = ({ children, ...rest }) => {
+  return <BmPaymentBoxWrapper {...rest}>{children}</BmPaymentBoxWrapper>;
+};
+
+BmPaymentBox.Header = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0.5rem 0rem;
+  border-radius: 0.5rem 0.5rem 0rem 0rem;
+  background: ${({ headerColor }) => headerColor || BmPrimaryBlue}} 
+`;
+
+BmPaymentBox.Body = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+BmPaymentBox.Footer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-top: auto;
+`;
+
+BmPaymentBox.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default BmPaymentBox;

package/src/lib/components/PaymentBox/paymentBox.stories.js

@@ -0,0 +1,30 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from 'react';
+import BmPaymentBox from './paymentBox';
+
+export default {
+  component: BmPaymentBox,
+  title: 'components/PaymentBox',
+  argTypes: {
+    headerColor: {
+      description: 'Color of the box header ',
+      defaultValue: { summary: undefined },
+    },
+  },
+};
+
+export const SamplePaymentBox = () => {
+  return (
+    <BmPaymentBox>
+      <BmPaymentBox.Header>
+        <h2>Header</h2>
+      </BmPaymentBox.Header>
+      <BmPaymentBox.Body>
+        <p>This is a body</p>
+      </BmPaymentBox.Body>
+      <BmPaymentBox.Footer>
+        <p>This is a footer</p>
+      </BmPaymentBox.Footer>
+    </BmPaymentBox>
+  );
+};

package/src/lib/components/index.js

@@ -22,6 +22,7 @@ import BmBanner from './BannerCard/bannerCards';
 import BmProgressRing from './ProgressRing/progressRing';
 import { BmProfileIcon } from './ProfileIcon/ProfileIcon';
 import { BmCheckboxToggle } from './Checkbox/checkboxToggler';
+import BmPaymentBox from './PaymentBox/paymentBox';
 import {
   BmTagIcon,
   BmAvatarIcon,
@@ -80,6 +81,7 @@ export {
   BmProgressRing,
   BmProfileIcon,
   BmCheckboxToggle,
+  BmPaymentBox,
   // Fix height and if there is dropdown option inside the modal body
   BmModal,
   BmNoteBar,

package/.babelrc

@@ -1,17 +0,0 @@
-{
-  "presets": ["react-app"],
-  "plugins": [
-    [
-      "babel-plugin-styled-components",
-      {
-        "ssr": false
-      }
-    ],
-    [
-      "react-intl",
-      {
-        "messagesDir": "./build/messages/"
-      }
-    ]
-  ]
-}