beem-component 1.6.2 → 1.6.5

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "beem-component",
-    "version": "1.6.2",
+    "version": "1.6.5",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {
@@ -45,7 +45,7 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router-dom": "^5.3.0",
-        "react-scripts": "4.0.3",
+        "react-scripts": "^5.0.1",
         "save": "^2.4.0",
         "styled-components": "^5.3.0",
         "web-vitals": "^1.1.2"
@@ -70,6 +70,7 @@
         "@storybook/react": "^6.3.2",
         "@storybook/theming": "^6.4.9",
         "babel-eslint": "^10.1.0",
+        "babel-loader": "^8.2.3",
         "babel-plugin-react-intl": "^5.1.18",
         "babel-plugin-styled-components": "^1.13.3",
         "babel-preset-react-app": "^10.0.0",
@@ -79,22 +80,15 @@
         "eslint-config-airbnb": "^18.2.1",
         "eslint-config-prettier": "^8.3.0",
         "eslint-plugin-import": "^2.25.2",
-        "eslint-plugin-jest": "^25.2.2",
+        "eslint-plugin-jest": "^25.2.4",
         "eslint-plugin-jsdoc": "^32.2.0",
         "eslint-plugin-jsx-a11y": "^6.4.1",
-        "eslint-plugin-prettier": "^4.0.0",
-        "eslint-plugin-react": "^7.26.1",
+        "eslint-plugin-prettier": "^4.2.1",
+        "eslint-plugin-react": "^7.29.4",
         "generate-changelog": "^1.8.0",
         "husky": "^7.0.4",
         "lint-staged": "^11.2.6",
-        "prettier": "^2.4.1",
+        "prettier": "^2.7.1",
         "storybook-addon-jsx": "^7.3.14"
-    },
-    "peerDependencies": {
-        "babel-loader": "8.1.0",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "react-scripts": "4.0.3",
-        "web-vitals": "^1.1.2"
     }
 }

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,51 +1,8 @@
-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';
+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>
-
-      <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>
-    </>
-  );
+  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');
           }}