beem-component 1.4.0 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/ChatComponents/ChatBody/chatBody.js +37 -35
  2. package/dist/components/ChatComponents/ChatBody/chatBody.stories.js +7 -3
  3. package/package.json +75 -75
  4. package/src/App.js +78 -11
  5. package/src/lib/components/ChatComponents/ChatBody/chatBody.js +55 -48
  6. package/src/lib/components/ChatComponents/ChatBody/chatBody.stories.js +38 -35
package/dist/components/ChatComponents/ChatBody/chatBody.js CHANGED
@@ -21,7 +21,7 @@ var _iconStyles = require("../../iconStyles");
21
21
 
22
22
  var _colors = require("../../colors");
23
23
 
24
- var _excluded = ["state", "file", "src", "fileName"],
24
+ var _excluded = ["state", "file", "src", "fileName", "onDownload"],
25
25
  _excluded2 = ["state", "src", "fileName"],
26
26
  _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName"];
27
27
 
@@ -37,7 +37,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
37
37
 
38
38
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
39
39
 
40
- var BmChat = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n height: 100%;\n ", "\n"])), ""
40
+ var BmChat = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n height: 100%;\n ", "\n"])), ''
41
41
  /* border: 0.071rem solid ${BmGrey400}; */
42
42
  );
43
43
 
@@ -46,15 +46,15 @@ BmChat.Body = _styledComponents.default.div(_templateObject2 || (_templateObject
46
46
  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) {
47
47
  var state = _ref.state;
48
48
 
49
- if (state === "inbound") {
50
- return "flex-start";
49
+ if (state === 'inbound') {
50
+ return 'flex-start';
51
51
  }
52
52
 
53
- if (state === "outbound") {
54
- return "flex-end";
53
+ if (state === 'outbound') {
54
+ return 'flex-end';
55
55
  }
56
56
 
57
- return "row";
57
+ return 'row';
58
58
  });
59
59
 
60
60
  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"])));
@@ -63,8 +63,8 @@ var Messages = _styledComponents.default.div(_templateObject5 || (_templateObjec
63
63
  var state = _ref2.state;
64
64
 
65
65
  if (state) {
66
- if (state === "inbound") return "".concat(_colors.BmPrimaryWhite);
67
- if (state === "outbound") return "".concat(_colors.BmPrimaryBlue);
66
+ if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
67
+ if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
68
68
  }
69
69
 
70
70
  return "".concat(_colors.BmPrimaryWhite);
@@ -72,8 +72,8 @@ var Messages = _styledComponents.default.div(_templateObject5 || (_templateObjec
72
72
  var state = _ref3.state;
73
73
 
74
74
  if (state) {
75
- if (state === "inbound") return "".concat(_colors.BmPrimaryBlack);
76
- if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
75
+ if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
76
+ if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
77
77
  }
78
78
 
79
79
  return "".concat(_colors.BmPrimaryWhite);
@@ -81,8 +81,8 @@ var Messages = _styledComponents.default.div(_templateObject5 || (_templateObjec
81
81
  var state = _ref4.state;
82
82
 
83
83
  if (state) {
84
- if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
85
- if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
84
+ if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
85
+ if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
86
86
  }
87
87
 
88
88
  return "".concat(_colors.BmPrimaryWhite);
@@ -93,14 +93,14 @@ var MessagesSubDetails = _styledComponents.default.div(_templateObject6 || (_tem
93
93
  var handleState = function handleState(_ref5) {
94
94
  var session = _ref5.session;
95
95
 
96
- if (session === "bot") {
96
+ if (session === 'bot') {
97
97
  return /*#__PURE__*/_react.default.createElement(_avatars.default, {
98
98
  size: "small",
99
99
  user: "chatbot"
100
100
  });
101
101
  }
102
102
 
103
- if (session === "live") {
103
+ if (session === 'live') {
104
104
  return /*#__PURE__*/_react.default.createElement(_avatars.default, {
105
105
  size: "small",
106
106
  user: "employee"
@@ -113,8 +113,8 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
113
113
  var state = _ref6.state;
114
114
 
115
115
  if (state) {
116
- if (state === "inbound") return "".concat(_colors.BmPrimaryWhite);
117
- if (state === "outbound") return "".concat(_colors.BmPrimaryBlue);
116
+ if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
117
+ if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
118
118
  }
119
119
 
120
120
  return "".concat(_colors.BmPrimaryWhite);
@@ -122,8 +122,8 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
122
122
  var state = _ref7.state;
123
123
 
124
124
  if (state) {
125
- if (state === "inbound") return "".concat(_colors.BmPrimaryBlack);
126
- if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
125
+ if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
126
+ if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
127
127
  }
128
128
 
129
129
  return "".concat(_colors.BmPrimaryWhite);
@@ -131,8 +131,8 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
131
131
  var state = _ref8.state;
132
132
 
133
133
  if (state) {
134
- if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
135
- if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
134
+ if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
135
+ if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
136
136
  }
137
137
 
138
138
  return "".concat(_colors.BmPrimaryWhite);
@@ -140,14 +140,14 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
140
140
  var state = _ref9.state;
141
141
 
142
142
  if (state) {
143
- if (state === "inbound") return "".concat(_colors.BmPrimaryBlue);
144
- if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
143
+ if (state === 'inbound') return "".concat(_colors.BmPrimaryBlue);
144
+ if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
145
145
  }
146
146
 
147
147
  return "".concat(_colors.BmPrimaryWhite);
148
- }, ""
148
+ }, ''
149
149
  /* max-width: 100%; */
150
- , ""
150
+ , ''
151
151
  /* max-height: 100%; */
152
152
  );
153
153
 
@@ -156,6 +156,7 @@ var BmFileAttachment = function BmFileAttachment(_ref10) {
156
156
  file = _ref10.file,
157
157
  src = _ref10.src,
158
158
  fileName = _ref10.fileName,
159
+ onDownload = _ref10.onDownload,
159
160
  rest = _objectWithoutProperties(_ref10, _excluded);
160
161
 
161
162
  return /*#__PURE__*/_react.default.createElement(FileAttachmentWrapper, _extends({
@@ -163,7 +164,8 @@ var BmFileAttachment = function BmFileAttachment(_ref10) {
163
164
  }, rest), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
164
165
  icon: /*#__PURE__*/_react.default.createElement(_FilePresent.default, null)
165
166
  }), fileName, /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
166
- icon: /*#__PURE__*/_react.default.createElement(_Download.default, null)
167
+ icon: /*#__PURE__*/_react.default.createElement(_Download.default, null),
168
+ onClick: onDownload
167
169
  }));
168
170
  }; //Start of Component for Images
169
171
 
@@ -172,8 +174,8 @@ var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templat
172
174
  var state = _ref11.state;
173
175
 
174
176
  if (state) {
175
- if (state === "inbound") return "".concat(_colors.BmPrimaryBlack);
176
- if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
177
+ if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
178
+ if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
177
179
  }
178
180
 
179
181
  return "".concat(_colors.BmPrimaryWhite);
@@ -181,8 +183,8 @@ var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templat
181
183
  var state = _ref12.state;
182
184
 
183
185
  if (state) {
184
- if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
185
- if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
186
+ if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
187
+ if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
186
188
  }
187
189
 
188
190
  return "".concat(_colors.BmPrimaryWhite);
@@ -190,7 +192,7 @@ var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templat
190
192
 
191
193
  exports.BmImageWrapper = BmImageWrapper;
192
194
 
193
- var BmImage = _styledComponents.default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n ", "\n width: 100%;\n object-fit: cover;\n flex-grow: 1;\n"])), ""
195
+ var BmImage = _styledComponents.default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n ", "\n width: 100%;\n object-fit: cover;\n flex-grow: 1;\n"])), ''
194
196
  /* Fix width */
195
197
  );
196
198
 
@@ -234,7 +236,7 @@ BmChat.Details = function (_ref14) {
234
236
 
235
237
  return /*#__PURE__*/_react.default.createElement(Details, _extends({
236
238
  state: state
237
- }, rest), /*#__PURE__*/_react.default.createElement(MessageState, null, state === "inbound" && session && handleState({
239
+ }, rest), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'inbound' && session && handleState({
238
240
  state: state,
239
241
  session: session
240
242
  })), /*#__PURE__*/_react.default.createElement(MessageDetails, null, src && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
@@ -247,15 +249,15 @@ BmChat.Details = function (_ref14) {
247
249
  file: file,
248
250
  fileName: fileName,
249
251
  state: state
250
- }, rest)), /*#__PURE__*/_react.default.createElement(MessagesSubDetails, null, displayTime && displayTime, status === "sent" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
252
+ }, rest)), /*#__PURE__*/_react.default.createElement(MessagesSubDetails, null, displayTime && displayTime, status === 'sent' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
251
253
  icon: /*#__PURE__*/_react.default.createElement(_icons.DoneAll, null),
252
254
  color: "".concat(_colors.BmSecondaryDarkGreen),
253
255
  size: "small"
254
- }), status === "failed" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
256
+ }), status === 'failed' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
255
257
  icon: /*#__PURE__*/_react.default.createElement(_icons.Done, null),
256
258
  color: "".concat(_colors.BmPrimaryBlack),
257
259
  size: "small"
258
- }))), /*#__PURE__*/_react.default.createElement(MessageState, null, state === "outbound" && session && handleState({
260
+ }))), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'outbound' && session && handleState({
259
261
  state: state,
260
262
  session: session
261
263
  })));
package/dist/components/ChatComponents/ChatBody/chatBody.stories.js CHANGED
@@ -26,9 +26,10 @@ var _chartImg = _interopRequireDefault(require("../../../assets/chart-img.png"))
26
26
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
27
27
 
28
28
  /* eslint-disable import/no-anonymous-default-export */
29
+ // TODO: ADD DESCRIPTION
29
30
  var _default = {
30
31
  component: _chatBody.default,
31
- title: "components/Chat/MainChat/ChatBody"
32
+ title: 'components/Chat/MainChat/ChatBody'
32
33
  };
33
34
  exports.default = _default;
34
35
 
@@ -70,7 +71,10 @@ var ChatBody = function ChatBody() {
70
71
  displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
71
72
  status: "failed",
72
73
  fileName: /*#__PURE__*/_react.default.createElement("p", null, "file.csv"),
73
- file: _chartImg.default
74
+ file: _chartImg.default,
75
+ onDownload: function onDownload() {
76
+ alert('hello');
77
+ }
74
78
  })), /*#__PURE__*/_react.default.createElement(_chatBody.default.Footer, null, /*#__PURE__*/_react.default.createElement("div", {
75
79
  className: "chat-footer"
76
80
  }, /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
@@ -85,7 +89,7 @@ var ChatBody = function ChatBody() {
85
89
  }), /*#__PURE__*/_react.default.createElement(_input.BmInput, {
86
90
  placeholder: "Enter Message",
87
91
  style: {
88
- flex: "1"
92
+ flex: '1'
89
93
  }
90
94
  }), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
91
95
  icon: /*#__PURE__*/_react.default.createElement(_Send.default, null),
package/package.json CHANGED
@@ -1,76 +1,76 @@
1
1
  {
2
- "name": "beem-component",
3
- "version": "1.4.0",
4
- "private": false,
5
- "main": "dist/components/index.js",
6
- "scripts": {
7
- "start": "react-scripts start",
8
- "build": "react-scripts build",
9
- "test": "react-scripts test",
10
- "eject": "react-scripts eject",
11
- "clean": "rimraf dist",
12
- "compile": "npm run clean && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,stories.js,__snapshots__",
13
- "storybook": "start-storybook -p 6006",
14
- "build-storybook": "build-storybook"
15
- },
16
- "peerDependencies": {
17
- "react": "^17.0.2",
18
- "react-dom": "^17.0.2",
19
- "react-scripts": "4.0.3",
20
- "web-vitals": "^1.1.2"
21
- },
22
- "dependencies": {
23
- "@emotion/react": "^11.7.1",
24
- "@emotion/styled": "^11.6.0",
25
- "@material-ui/core": "^4.11.4",
26
- "@material-ui/icons": "^4.11.2",
27
- "@mui/icons-material": "^5.2.1",
28
- "@mui/material": "^5.2.3",
29
- "js-file-download": "^0.4.12",
30
- "node-sass": "^6.0.1",
31
- "polished": "^4.1.3",
32
- "react": "^17.0.2",
33
- "react-dom": "^17.0.2",
34
- "react-router-dom": "^5.3.0",
35
- "react-scripts": "4.0.3",
36
- "save": "^2.4.0",
37
- "styled-components": "^5.3.0",
38
- "web-vitals": "^1.1.2"
39
- },
40
- "eslintConfig": {
41
- "extends": [
42
- "react-app",
43
- "react-app/jest"
44
- ]
45
- },
46
- "browserslist": {
47
- "production": [
48
- ">0.2%",
49
- "not dead",
50
- "not op_mini all"
51
- ],
52
- "development": [
53
- "last 1 chrome version",
54
- "last 1 firefox version",
55
- "last 1 safari version"
56
- ]
57
- },
58
- "devDependencies": {
59
- "@babel/cli": "^7.14.8",
60
- "@babel/preset-env": "^7.14.8",
61
- "@babel/preset-react": "^7.14.5",
62
- "cross-env": "^7.0.3",
63
- "@storybook/addon-actions": "^6.3.2",
64
- "@storybook/addon-controls": "^6.3.12",
65
- "@storybook/addon-docs": "^6.3.12",
66
- "@storybook/addon-essentials": "^6.3.12",
67
- "@storybook/addon-knobs": "^6.3.1",
68
- "@storybook/addon-links": "^6.3.2",
69
- "@storybook/addons": "^6.4.9",
70
- "@storybook/node-logger": "^6.3.2",
71
- "@storybook/preset-create-react-app": "^3.2.0",
72
- "@storybook/react": "^6.3.2",
73
- "@storybook/theming": "^6.4.9",
74
- "storybook-addon-jsx": "^7.3.14"
75
- }
76
- }
2
+ "name": "beem-component",
3
+ "version": "1.4.1",
4
+ "private": false,
5
+ "main": "dist/components/index.js",
6
+ "scripts": {
7
+ "start": "react-scripts start",
8
+ "build": "react-scripts build",
9
+ "test": "react-scripts test",
10
+ "eject": "react-scripts eject",
11
+ "clean": "rimraf dist",
12
+ "compile": "npm run clean && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,stories.js,__snapshots__",
13
+ "storybook": "start-storybook -p 6006",
14
+ "build-storybook": "build-storybook"
15
+ },
16
+ "peerDependencies": {
17
+ "react": "^17.0.2",
18
+ "react-dom": "^17.0.2",
19
+ "react-scripts": "4.0.3",
20
+ "web-vitals": "^1.1.2"
21
+ },
22
+ "dependencies": {
23
+ "@emotion/react": "^11.7.1",
24
+ "@emotion/styled": "^11.6.0",
25
+ "@material-ui/core": "^4.11.4",
26
+ "@material-ui/icons": "^4.11.2",
27
+ "@mui/icons-material": "^5.2.1",
28
+ "@mui/material": "^5.2.3",
29
+ "js-file-download": "^0.4.12",
30
+ "node-sass": "^6.0.1",
31
+ "polished": "^4.1.3",
32
+ "react": "^17.0.2",
33
+ "react-dom": "^17.0.2",
34
+ "react-router-dom": "^5.3.0",
35
+ "react-scripts": "4.0.3",
36
+ "save": "^2.4.0",
37
+ "styled-components": "^5.3.0",
38
+ "web-vitals": "^1.1.2"
39
+ },
40
+ "eslintConfig": {
41
+ "extends": [
42
+ "react-app",
43
+ "react-app/jest"
44
+ ]
45
+ },
46
+ "browserslist": {
47
+ "production": [
48
+ ">0.2%",
49
+ "not dead",
50
+ "not op_mini all"
51
+ ],
52
+ "development": [
53
+ "last 1 chrome version",
54
+ "last 1 firefox version",
55
+ "last 1 safari version"
56
+ ]
57
+ },
58
+ "devDependencies": {
59
+ "@babel/cli": "^7.14.8",
60
+ "@babel/preset-env": "^7.14.8",
61
+ "@babel/preset-react": "^7.14.5",
62
+ "cross-env": "^7.0.3",
63
+ "@storybook/addon-actions": "^6.3.2",
64
+ "@storybook/addon-controls": "^6.3.12",
65
+ "@storybook/addon-docs": "^6.3.12",
66
+ "@storybook/addon-essentials": "^6.3.12",
67
+ "@storybook/addon-knobs": "^6.3.1",
68
+ "@storybook/addon-links": "^6.3.2",
69
+ "@storybook/addons": "^6.4.9",
70
+ "@storybook/node-logger": "^6.3.2",
71
+ "@storybook/preset-create-react-app": "^3.2.0",
72
+ "@storybook/react": "^6.3.2",
73
+ "@storybook/theming": "^6.4.9",
74
+ "storybook-addon-jsx": "^7.3.14"
75
+ }
76
+ }
package/src/App.js CHANGED
@@ -1,20 +1,87 @@
1
- import React from "react";
2
- import "../src/main.scss";
3
- import { BmAccordion, BmTab } from "./lib/components";
4
- import { GlobalStyle } from "./lib/components/globalStyles";
5
- import "./lib/assets/css/sidebar.scss";
1
+ import React from 'react';
2
+ import '../src/main.scss';
3
+ import { BmAccordion, BmTab, BmChat } from './lib/components';
4
+ import { GlobalStyle } from './lib/components/globalStyles';
5
+ import './lib/assets/css/sidebar.scss';
6
6
 
7
7
  export const App = () => {
8
+ const image =
9
+ 'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/Vector.jpg?AWSAccessKeyId=AKIAVCAYXA54EPKHSRGL&Expires=1726995050&Signature=kP4gVPac4c7Sol2PBgGZbQ2TjLM%3D';
8
10
  return (
9
11
  <>
10
12
  <GlobalStyle />
11
13
  {/* <MainWrapper> */}
12
- <BmAccordion>
13
- <BmAccordion.Title>
14
- <p>Hello</p>
15
- </BmAccordion.Title>
16
- </BmAccordion>
17
- <BmTab state="active" stateColor="red">Hello</BmTab>
14
+ <BmChat>
15
+ <BmChat.Body>
16
+ <BmChat.Details
17
+ state='inbound'
18
+ session='bot'
19
+ displayTime={<p>12:00pm</p>}
20
+ status='sent'
21
+ >
22
+ <p>Inbound Text Message</p>
23
+ </BmChat.Details>
24
+ <BmChat.Details
25
+ state='inbound'
26
+ session='live'
27
+ displayTime={<p>12:00pm</p>}
28
+ status='sent'
29
+ fileName={<p>chat.png</p>}
30
+ src={image}
31
+ />
32
+ <BmChat.Details
33
+ state='inbound'
34
+ session='live'
35
+ displayTime={<p>10:00am</p>}
36
+ status='failed'
37
+ fileName={<p>file.csv</p>}
38
+ onDownload={() => {
39
+ alert('hello');
40
+ }}
41
+ file={image}
42
+ />
43
+ <BmChat.Details
44
+ state='outbound'
45
+ session='bot'
46
+ displayTime={<p>12:00pm</p>}
47
+ status='sent'
48
+ >
49
+ <p>Outbound Text Message</p>
50
+ </BmChat.Details>
51
+ <BmChat.Details
52
+ state='outbound'
53
+ session='live'
54
+ displayTime={<p>12:00pm</p>}
55
+ status='sent'
56
+ fileName={<p>chat.png</p>}
57
+ onDownload={() => {
58
+ alert('hello');
59
+ }}
60
+ src={image}
61
+ />
62
+ <BmChat.Details
63
+ state='outbound'
64
+ session='live'
65
+ displayTime={<p>10:00am</p>}
66
+ status='failed'
67
+ fileName={<p>file.csv</p>}
68
+ file={image}
69
+
70
+ />
71
+ </BmChat.Body>
72
+ {/* <BmChat.Footer>
73
+ <div className='chat-footer'>
74
+ <BmIcons icon={<EmojiEmotionsIcon />} size='xlarge' />
75
+ <BmIcons icon={<AttachFileIcon />} size='xlarge' />
76
+ <BmIcons icon={<QuickreplyIcon />} size='xlarge' />
77
+ <BmInput placeholder='Enter Message' style={{ flex: '1' }} />
78
+ <BmIcons icon={<SendIcon />} size='xlarge' />
79
+ </div>
80
+ </BmChat.Footer> */}
81
+ </BmChat>
82
+ <BmTab state='active' stateColor='red'>
83
+ Hello
84
+ </BmTab>
18
85
  {/* </MainWrapper> */}
19
86
  </>
20
87
  );
package/src/lib/components/ChatComponents/ChatBody/chatBody.js CHANGED
@@ -1,10 +1,10 @@
1
- import React from "react";
2
- import { Done, DoneAll } from "@material-ui/icons";
3
- import FilePresentIcon from "@mui/icons-material/FilePresent";
4
- import DownloadIcon from "@mui/icons-material/Download";
5
- import styled from "styled-components";
6
- import BmAvatar from "../../Avatars/avatars";
7
- import { BmIcons } from "../../iconStyles";
1
+ import React from 'react';
2
+ import { Done, DoneAll } from '@material-ui/icons';
3
+ import FilePresentIcon from '@mui/icons-material/FilePresent';
4
+ import DownloadIcon from '@mui/icons-material/Download';
5
+ import styled from 'styled-components';
6
+ import BmAvatar from '../../Avatars/avatars';
7
+ import { BmIcons } from '../../iconStyles';
8
8
 
9
9
  import {
10
10
  BmPrimaryWhite,
@@ -12,13 +12,13 @@ import {
12
12
  BmPrimaryBlack,
13
13
  BmSecondaryDarkGreen,
14
14
  BmGrey200,
15
- } from "../../colors";
15
+ } from '../../colors';
16
16
 
17
17
  const BmChat = styled.div`
18
18
  display: flex;
19
19
  flex-direction: column;
20
20
  height: 100%;
21
- ${"" /* border: 0.071rem solid ${BmGrey400}; */}
21
+ ${'' /* border: 0.071rem solid ${BmGrey400}; */}
22
22
  `;
23
23
 
24
24
  BmChat.Body = styled.div`
@@ -33,13 +33,13 @@ BmChat.Body = styled.div`
33
33
  const Details = styled.div`
34
34
  display: flex;
35
35
  justify-content: ${({ state }) => {
36
- if (state === "inbound") {
37
- return "flex-start";
36
+ if (state === 'inbound') {
37
+ return 'flex-start';
38
38
  }
39
- if (state === "outbound") {
40
- return "flex-end";
39
+ if (state === 'outbound') {
40
+ return 'flex-end';
41
41
  }
42
- return "row";
42
+ return 'row';
43
43
  }};
44
44
  > *:not(:last-child) {
45
45
  margin-right: 1rem;
@@ -68,22 +68,22 @@ const Messages = styled.div`
68
68
  padding: 0.5rem;
69
69
  background: ${({ state }) => {
70
70
  if (state) {
71
- if (state === "inbound") return `${BmPrimaryWhite}`;
72
- if (state === "outbound") return `${BmPrimaryBlue}`;
71
+ if (state === 'inbound') return `${BmPrimaryWhite}`;
72
+ if (state === 'outbound') return `${BmPrimaryBlue}`;
73
73
  }
74
74
  return `${BmPrimaryWhite}`;
75
75
  }};
76
76
  color: ${({ state }) => {
77
77
  if (state) {
78
- if (state === "inbound") return `${BmPrimaryBlack}`;
79
- if (state === "outbound") return `${BmPrimaryWhite}`;
78
+ if (state === 'inbound') return `${BmPrimaryBlack}`;
79
+ if (state === 'outbound') return `${BmPrimaryWhite}`;
80
80
  }
81
81
  return `${BmPrimaryWhite}`;
82
82
  }};
83
83
  border-radius: ${({ state }) => {
84
84
  if (state) {
85
- if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
86
- if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
85
+ if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
86
+ if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
87
87
  }
88
88
  return `${BmPrimaryWhite}`;
89
89
  }};
@@ -103,11 +103,11 @@ const MessagesSubDetails = styled.div`
103
103
  `;
104
104
 
105
105
  const handleState = ({ session }) => {
106
- if (session === "bot") {
107
- return <BmAvatar size="small" user="chatbot" />;
106
+ if (session === 'bot') {
107
+ return <BmAvatar size='small' user='chatbot' />;
108
108
  }
109
- if (session === "live") {
110
- return <BmAvatar size="small" user="employee" />;
109
+ if (session === 'live') {
110
+ return <BmAvatar size='small' user='employee' />;
111
111
  }
112
112
  };
113
113
 
@@ -119,22 +119,22 @@ const FileAttachmentWrapper = styled.div`
119
119
  padding: 1rem;
120
120
  background: ${({ state }) => {
121
121
  if (state) {
122
- if (state === "inbound") return `${BmPrimaryWhite}`;
123
- if (state === "outbound") return `${BmPrimaryBlue}`;
122
+ if (state === 'inbound') return `${BmPrimaryWhite}`;
123
+ if (state === 'outbound') return `${BmPrimaryBlue}`;
124
124
  }
125
125
  return `${BmPrimaryWhite}`;
126
126
  }};
127
127
  color: ${({ state }) => {
128
128
  if (state) {
129
- if (state === "inbound") return `${BmPrimaryBlack}`;
130
- if (state === "outbound") return `${BmPrimaryWhite}`;
129
+ if (state === 'inbound') return `${BmPrimaryBlack}`;
130
+ if (state === 'outbound') return `${BmPrimaryWhite}`;
131
131
  }
132
132
  return `${BmPrimaryWhite}`;
133
133
  }};
134
134
  border-radius: ${({ state }) => {
135
135
  if (state) {
136
- if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
137
- if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
136
+ if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
137
+ if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
138
138
  }
139
139
  return `${BmPrimaryWhite}`;
140
140
  }};
@@ -151,22 +151,29 @@ const FileAttachmentWrapper = styled.div`
151
151
  align-items: center;
152
152
  color: ${({ state }) => {
153
153
  if (state) {
154
- if (state === "inbound") return `${BmPrimaryBlue}`;
155
- if (state === "outbound") return `${BmPrimaryWhite}`;
154
+ if (state === 'inbound') return `${BmPrimaryBlue}`;
155
+ if (state === 'outbound') return `${BmPrimaryWhite}`;
156
156
  }
157
157
  return `${BmPrimaryWhite}`;
158
158
  }};
159
159
  }
160
- ${"" /* max-width: 100%; */}
161
- ${"" /* max-height: 100%; */}
160
+ ${'' /* max-width: 100%; */}
161
+ ${'' /* max-height: 100%; */}
162
162
  `;
163
163
 
164
- const BmFileAttachment = ({ state, file, src, fileName, ...rest }) => {
164
+ const BmFileAttachment = ({
165
+ state,
166
+ file,
167
+ src,
168
+ fileName,
169
+ onDownload,
170
+ ...rest
171
+ }) => {
165
172
  return (
166
173
  <FileAttachmentWrapper state={state} {...rest}>
167
174
  <BmIcons icon={<FilePresentIcon />} />
168
175
  {fileName}
169
- <BmIcons icon={<DownloadIcon />} />
176
+ <BmIcons icon={<DownloadIcon />} onClick={onDownload} />
170
177
  </FileAttachmentWrapper>
171
178
  );
172
179
  };
@@ -176,15 +183,15 @@ export const BmImageWrapper = styled.div`
176
183
  flex-direction: column;
177
184
  color: ${({ state }) => {
178
185
  if (state) {
179
- if (state === "inbound") return `${BmPrimaryBlack}`;
180
- if (state === "outbound") return `${BmPrimaryWhite}`;
186
+ if (state === 'inbound') return `${BmPrimaryBlack}`;
187
+ if (state === 'outbound') return `${BmPrimaryWhite}`;
181
188
  }
182
189
  return `${BmPrimaryWhite}`;
183
190
  }};
184
191
  border-radius: ${({ state }) => {
185
192
  if (state) {
186
- if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
187
- if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
193
+ if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
194
+ if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
188
195
  }
189
196
  return `${BmPrimaryWhite}`;
190
197
  }};
@@ -192,7 +199,7 @@ export const BmImageWrapper = styled.div`
192
199
  `;
193
200
 
194
201
  export const BmImage = styled.img`
195
- ${"" /* Fix width */}
202
+ ${'' /* Fix width */}
196
203
  width: 100%;
197
204
  object-fit: cover;
198
205
  flex-grow: 1;
@@ -202,7 +209,7 @@ export const BmImageChat = ({ state, src, fileName, ...rest }) => {
202
209
  return (
203
210
  <>
204
211
  <BmImageWrapper state={state} {...rest}>
205
- <BmImage src={src} alt="src" />
212
+ <BmImage src={src} alt='src' />
206
213
  {fileName && (
207
214
  <BmFileAttachment
208
215
  state={state}
@@ -239,7 +246,7 @@ BmChat.Details = ({
239
246
  <Details state={state} {...rest}>
240
247
  {/* Adding for mobile */}
241
248
  <MessageState>
242
- {state === "inbound" && session && handleState({ state, session })}
249
+ {state === 'inbound' && session && handleState({ state, session })}
243
250
  </MessageState>
244
251
  <MessageDetails>
245
252
  {/* For Images */}
@@ -259,20 +266,20 @@ BmChat.Details = ({
259
266
  )}
260
267
  <MessagesSubDetails>
261
268
  {displayTime && displayTime}
262
- {status === "sent" && (
269
+ {status === 'sent' && (
263
270
  <BmIcons
264
271
  icon={<DoneAll />}
265
272
  color={`${BmSecondaryDarkGreen}`}
266
- size="small"
273
+ size='small'
267
274
  />
268
275
  )}
269
- {status === "failed" && (
270
- <BmIcons icon={<Done />} color={`${BmPrimaryBlack}`} size="small" />
276
+ {status === 'failed' && (
277
+ <BmIcons icon={<Done />} color={`${BmPrimaryBlack}`} size='small' />
271
278
  )}
272
279
  </MessagesSubDetails>
273
280
  </MessageDetails>
274
281
  <MessageState>
275
- {state === "outbound" && session && handleState({ state, session })}
282
+ {state === 'outbound' && session && handleState({ state, session })}
276
283
  </MessageState>
277
284
  </Details>
278
285
  );
package/src/lib/components/ChatComponents/ChatBody/chatBody.stories.js CHANGED
@@ -1,17 +1,17 @@
1
1
  /* eslint-disable import/no-anonymous-default-export */
2
- import React from "react";
3
- import BmChat from "./chatBody";
4
- import { BmIcons } from "../../iconStyles";
5
- import EmojiEmotionsIcon from "@mui/icons-material/EmojiEmotions";
6
- import AttachFileIcon from "@mui/icons-material/AttachFile";
7
- import QuickreplyIcon from "@mui/icons-material/Quickreply";
8
- import SendIcon from "@mui/icons-material/Send";
9
- import { BmInput } from "../../input";
10
- import image from "../../../assets/chart-img.png";
11
-
2
+ import React from 'react';
3
+ import BmChat from './chatBody';
4
+ import { BmIcons } from '../../iconStyles';
5
+ import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions';
6
+ import AttachFileIcon from '@mui/icons-material/AttachFile';
7
+ import QuickreplyIcon from '@mui/icons-material/Quickreply';
8
+ import SendIcon from '@mui/icons-material/Send';
9
+ import { BmInput } from '../../input';
10
+ import image from '../../../assets/chart-img.png';
11
+ // TODO: ADD DESCRIPTION
12
12
  export default {
13
13
  component: BmChat,
14
- title: "components/Chat/MainChat/ChatBody",
14
+ title: 'components/Chat/MainChat/ChatBody',
15
15
  };
16
16
 
17
17
  export const ChatBody = () => {
@@ -19,61 +19,64 @@ export const ChatBody = () => {
19
19
  <BmChat>
20
20
  <BmChat.Body>
21
21
  <BmChat.Details
22
- state="inbound"
23
- session="bot"
22
+ state='inbound'
23
+ session='bot'
24
24
  displayTime={<p>12:00pm</p>}
25
- status="sent"
25
+ status='sent'
26
26
  >
27
27
  <p>Inbound Text Message</p>
28
28
  </BmChat.Details>
29
29
  <BmChat.Details
30
- state="inbound"
31
- session="live"
30
+ state='inbound'
31
+ session='live'
32
32
  displayTime={<p>12:00pm</p>}
33
- status="sent"
33
+ status='sent'
34
34
  fileName={<p>chat.png</p>}
35
35
  src={image}
36
36
  />
37
37
  <BmChat.Details
38
- state="inbound"
39
- session="live"
38
+ state='inbound'
39
+ session='live'
40
40
  displayTime={<p>10:00am</p>}
41
- status="failed"
41
+ status='failed'
42
42
  fileName={<p>file.csv</p>}
43
43
  file={image}
44
44
  />
45
45
  <BmChat.Details
46
- state="outbound"
47
- session="bot"
46
+ state='outbound'
47
+ session='bot'
48
48
  displayTime={<p>12:00pm</p>}
49
- status="sent"
49
+ status='sent'
50
50
  >
51
51
  <p>Outbound Text Message</p>
52
52
  </BmChat.Details>
53
53
  <BmChat.Details
54
- state="outbound"
55
- session="live"
54
+ state='outbound'
55
+ session='live'
56
56
  displayTime={<p>12:00pm</p>}
57
- status="sent"
57
+ status='sent'
58
58
  fileName={<p>chat.png</p>}
59
59
  src={image}
60
60
  />
61
61
  <BmChat.Details
62
- state="outbound"
63
- session="live"
62
+ state='outbound'
63
+ session='live'
64
64
  displayTime={<p>10:00am</p>}
65
- status="failed"
65
+ status='failed'
66
66
  fileName={<p>file.csv</p>}
67
67
  file={image}
68
+ onDownload={() => {
69
+ alert('hello');
70
+ }}
68
71
  />
69
72
  </BmChat.Body>
70
73
  <BmChat.Footer>
71
- <div className="chat-footer">
72
- <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
73
- <BmIcons icon={<AttachFileIcon />} size="xlarge" />
74
- <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
75
- <BmInput placeholder="Enter Message" style={{ flex: "1" }} />
76
- <BmIcons icon={<SendIcon />} size="xlarge" />
74
+ <div className='chat-footer'>
75
+ <BmIcons icon={<EmojiEmotionsIcon />} size='xlarge' />
76
+ <BmIcons icon={<AttachFileIcon />} size='xlarge' />
77
+ <BmIcons icon={<QuickreplyIcon />} size='xlarge' />
78
+ <BmInput placeholder='Enter Message' style={{ flex: '1' }} />
79
+ <BmIcons icon={<SendIcon />} size='xlarge' />
77
80
  </div>
78
81
  </BmChat.Footer>
79
82
  </BmChat>