beem-component 1.6.1 → 1.6.4

package/dist/components/Buttons/buttons.js

@@ -19,7 +19,7 @@ var _iconStyles = require("../iconStyles");
 
 var _text = require("../text");
 
-var _excluded = ["variant", "size", "disabled", "children", "leadingIcon", "trailingIcon", "color"];
+var _excluded = ["variant", "size", "disabled", "children", "leadingIcon", "trailingIcon", "color", "type"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
@@ -192,13 +192,15 @@ var BmButton = function BmButton(props) {
       leadingIcon = props.leadingIcon,
       trailingIcon = props.trailingIcon,
       color = props.color,
+      type = props.type,
       rest = _objectWithoutProperties(props, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(BeemButton, _extends({
     size: size,
     variant: variant,
     disabled: disabled,
-    color: color
+    color: color,
+    type: type
   }, rest), leadingIcon && /*#__PURE__*/_react.default.createElement(BmLeftIcon, {
     disabled: disabled,
     icon: leadingIcon,
@@ -209,7 +211,8 @@ var BmButton = function BmButton(props) {
     disabled: disabled,
     variant: variant,
     size: size,
-    color: color // {...rest}
+    color: color,
+    type: type // {...rest}
 
   }, children), trailingIcon && /*#__PURE__*/_react.default.createElement(BmRightIcon, {
     icon: trailingIcon,

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

@@ -23,7 +23,7 @@ var _sessionDetails = require("./sessionDetails");
 
 var _colors = require("../../colors");
 
-var _excluded = ["state", "file", "src", "fileName", "onDownload"],
+var _excluded = ["state", "file", "src", "fileName", "onDownload", "link"],
     _excluded2 = ["state", "src", "fileName"],
     _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails"];
 
@@ -168,16 +168,19 @@ var BmFileAttachment = function BmFileAttachment(_ref10) {
       src = _ref10.src,
       fileName = _ref10.fileName,
       onDownload = _ref10.onDownload,
+      link = _ref10.link,
       rest = _objectWithoutProperties(_ref10, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(FileAttachmentWrapper, _extends({
     state: state
   }, rest), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_FilePresent.default, null)
-  }), fileName, /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
-    icon: /*#__PURE__*/_react.default.createElement(_Download.default, null),
-    onClick: onDownload
-  }));
+  }), fileName, /*#__PURE__*/_react.default.createElement("a", {
+    href: link,
+    download: true
+  }, /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_Download.default, null)
+  })));
 }; // Start of Component for Images
 
 

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

@@ -80,6 +80,7 @@ var ChatBody = function ChatBody() {
     status: "failed",
     fileName: /*#__PURE__*/_react.default.createElement("p", null, "file.csv"),
     file: _chartImg.default,
+    link: _chartImg.default,
     onDownload: function onDownload() {
       alert('hello');
     }

package/dist/components/PaymentBox/paymentBox.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _colors = require("../colors");
+
+var _excluded = ["children"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 BmPaymentBoxWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  flex-direction: column;\n  min-width: 240px;\n  min-height: 280px;\n  border: 0.071rem solid ", ";\n  border-radius: 0.5rem;\n  > * {\n    margin-bottom: 1rem;\n  }\n  &:hover {\n    box-shadow: 0 0 60px rgba(0, 0, 0, 0.08);\n  }\n"])), _colors.BmGrey200);
+
+var BmPaymentBox = function BmPaymentBox(_ref) {
+  var children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(BmPaymentBoxWrapper, rest, children);
+};
+
+BmPaymentBox.Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 0.5rem 0rem;\n  border-radius: 0.5rem 0.5rem 0rem 0rem;\n  background: ", "} \n"])), function (_ref2) {
+  var headerColor = _ref2.headerColor;
+  return headerColor || _colors.BmPrimaryBlue;
+});
+BmPaymentBox.Body = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n"])));
+BmPaymentBox.Footer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  margin-top: auto;\n"])));
+BmPaymentBox.propTypes = {
+  children: _propTypes.default.node.isRequired
+};
+var _default = BmPaymentBox;
+exports.default = _default;

package/dist/components/PaymentBox/paymentBox.stories.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SamplePaymentBox = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _paymentBox = _interopRequireDefault(require("./paymentBox"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/no-anonymous-default-export */
+var _default = {
+  component: _paymentBox.default,
+  title: 'components/PaymentBox',
+  argTypes: {
+    headerColor: {
+      description: 'Color of the box header ',
+      defaultValue: {
+        summary: undefined
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var SamplePaymentBox = function SamplePaymentBox() {
+  return /*#__PURE__*/_react.default.createElement(_paymentBox.default, null, /*#__PURE__*/_react.default.createElement(_paymentBox.default.Header, null, /*#__PURE__*/_react.default.createElement("h2", null, "Header")), /*#__PURE__*/_react.default.createElement(_paymentBox.default.Body, null, /*#__PURE__*/_react.default.createElement("p", null, "This is a body")), /*#__PURE__*/_react.default.createElement(_paymentBox.default.Footer, null, /*#__PURE__*/_react.default.createElement("p", null, "This is a footer")));
+};
+
+exports.SamplePaymentBox = SamplePaymentBox;

package/dist/components/index.js

@@ -210,6 +210,12 @@ Object.defineProperty(exports, "BmNoteBar", {
     return _noteBar.BmNoteBar;
   }
 });
+Object.defineProperty(exports, "BmPaymentBox", {
+  enumerable: true,
+  get: function get() {
+    return _paymentBox.default;
+  }
+});
 Object.defineProperty(exports, "BmProfileIcon", {
   enumerable: true,
   get: function get() {
@@ -381,6 +387,8 @@ var _ProfileIcon = require("./ProfileIcon/ProfileIcon");
 
 var _checkboxToggler = require("./Checkbox/checkboxToggler");
 
+var _paymentBox = _interopRequireDefault(require("./PaymentBox/paymentBox"));
+
 var _iconStyles = require("./iconStyles");
 
 var _noteBar = require("./NoteBar/noteBar");

package/package.json

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

package/src/App copy.js

@@ -0,0 +1,117 @@
+import React from 'react';
+import { GlobalStyle, BmChat } from './lib/components';
+// import { BmCheckboxToggle } from './lib/components/Checkbox/checkboxToggler';
+// import BmChat from './lib/components';
+
+const Chat = () => {
+  // const [checked, setChecked] = useState(false);
+  // const [showModal, setShowModal] = useState(false);
+  const image =
+    'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/3ba5560f-5446-4623-940e-c92b0f50a9b1?AWSAccessKeyId=AKIAVCAYXA54IQYB6C7A&Expires=1733652431&Signature=WEt9my0kkm3SRkiJjvth2vQKcHc%3D';
+  const file =
+    'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/270e8552-064f-42aa-970c-0593b5cf3a20?AWSAccessKeyId=AKIAVCAYXA54IQYB6C7A&Expires=1733652558&Signature=0sTEvpH0UoKHeb8mrFSXlf65h24%3D';
+  return (
+    <>
+      <GlobalStyle />
+      <BmChat>
+        <BmChat.Body>
+          <BmChat.Details
+            state="inbound"
+            session="sms"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            sessionDetails={{
+              message: <h3>Session Message</h3>,
+              time: <p>12:00pm</p>,
+            }}
+          >
+            <p>Inbound Text Message</p>
+          </BmChat.Details>
+          <BmChat.Details
+            state="inbound"
+            session="live"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            fileName={<p>chahhhhhhhht.png</p>}
+            src={image}
+            link={image}
+            sessionDetails={{
+              message: <h3>Session Message</h3>,
+              time: <p>12:00pm</p>,
+            }}
+          />
+          <BmChat.Details
+            state="inbound"
+            session="live"
+            displayTime={<p>10:00am</p>}
+            status="failed"
+            fileName={<p>fifdsfdsfsdfsfle.csv</p>}
+            file={file}
+            link={file}
+          />
+          <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');
+            // }}
+          />
+        </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>
+      {/* <div>
+        <BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
+      </div>
+      <BmModal show={showModal} onHide={() => setShowModal(false)}>
+        <BmModal.Header closeButton>
+          <h2>Header</h2>
+        </BmModal.Header>
+        <BmModal.SubHeader>
+          <h5>This modal has a sub heading</h5>
+        </BmModal.SubHeader>
+        <BmModal.Body>
+          <BmCheckboxToggle
+            checked={checked}
+            onChange={() => setChecked(!checked)}
+            disabled
+            label={<h3>Field Label</h3>}
+          />
+          <p>This is a body</p>
+        </BmModal.Body>
+        <BmModal.Footer>
+          <p>This is a footer</p>
+        </BmModal.Footer> */}
+      {/* </BmModal> */}
+    </>
+  );
+};
+
+export default Chat;

package/src/App.js

@@ -1,38 +1,8 @@
-import React, { useState } from 'react';
-import { GlobalStyle, BmModal, BmButton } from './lib/components';
-import { BmCheckboxToggle } from './lib/components/Checkbox/checkboxToggler';
+import React from 'react';
+import { BmButton } from './lib/components';
 
 const Chat = () => {
-  const [checked, setChecked] = useState(false);
-  const [showModal, setShowModal] = useState(false);
-  return (
-    <>
-      <GlobalStyle />
-      <div>
-        <BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
-      </div>
-      <BmModal show={showModal} onHide={() => setShowModal(false)}>
-        <BmModal.Header closeButton>
-          <h2>Header</h2>
-        </BmModal.Header>
-        <BmModal.SubHeader>
-          <h5>This modal has a sub heading</h5>
-        </BmModal.SubHeader>
-        <BmModal.Body>
-          <BmCheckboxToggle
-            checked={checked}
-            onChange={() => setChecked(!checked)}
-            disabled
-            label={<h3>Field Label</h3>}
-          />
-          <p>This is a body</p>
-        </BmModal.Body>
-        <BmModal.Footer>
-          <p>This is a footer</p>
-        </BmModal.Footer>
-      </BmModal>
-    </>
-  );
+  return <BmButton type="submit">Hello</BmButton>;
 };
 
 export default Chat;

package/src/lib/components/Buttons/buttons.js

@@ -177,6 +177,7 @@ export const BmButton = (props) => {
     leadingIcon,
     trailingIcon,
     color,
+    type,
     ...rest
   } = props;
   return (
@@ -185,6 +186,7 @@ export const BmButton = (props) => {
       variant={variant}
       disabled={disabled}
       color={color}
+      type={type}
       {...rest}
     >
       {leadingIcon && (
@@ -201,6 +203,7 @@ export const BmButton = (props) => {
         variant={variant}
         size={size}
         color={color}
+        type={type}
         // {...rest}
       >
         {children}

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

@@ -172,13 +172,17 @@ const BmFileAttachment = ({
   src,
   fileName,
   onDownload,
+  link,
   ...rest
 }) => {
   return (
     <FileAttachmentWrapper state={state} {...rest}>
       <BmIcons icon={<FilePresentIcon />} />
+      {/* {fileName} */}
       {fileName}
-      <BmIcons icon={<DownloadIcon />} onClick={onDownload} />
+      <a href={link} download>
+        <BmIcons icon={<DownloadIcon />} />
+      </a>
     </FileAttachmentWrapper>
   );
 };

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

@@ -73,6 +73,7 @@ export const ChatBody = () => {
           status="failed"
           fileName={<p>file.csv</p>}
           file={image}
+          link={image}
           onDownload={() => {
             alert('hello');
           }}

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,