beem-component 1.7.1 → 1.7.4

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 (10) hide show
  1. package/dist/components/ChatComponents/ChatBody/FeedPostComments.js +138 -0
  2. package/dist/components/ChatComponents/ChatBody/chatBody.js +63 -44
  3. package/dist/components/ChatComponents/ChatBody/chatBody.stories.js +68 -1
  4. package/dist/components/colors.js +8 -3
  5. package/package.json +1 -1
  6. package/src/App.js +75 -7
  7. package/src/lib/components/ChatComponents/ChatBody/FeedPostComments.js +154 -0
  8. package/src/lib/components/ChatComponents/ChatBody/chatBody.js +19 -3
  9. package/src/lib/components/ChatComponents/ChatBody/chatBody.stories.js +71 -3
  10. package/src/lib/components/colors.js +5 -0
package/dist/components/ChatComponents/ChatBody/FeedPostComments.js ADDED
@@ -0,0 +1,138 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.BmFeedPostComments = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
11
+
12
+ var _colors = require("../../colors");
13
+
14
+ var _excluded = ["story", "state", "status", "image"];
15
+
16
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
17
+
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
+
20
+ 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); }
21
+
22
+ 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; }
23
+
24
+ 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; }
25
+
26
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
27
+
28
+ var BmFeedPost = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: inline-block;\n flex-direction: column;\n padding: 0.5rem;\n width: ", ";\n max-width: ", ";\n margin-left: ", ";\n background-color: ", ";\n border: 0.071rem solid ", ";\n border-radius: 0.25rem;\n max-height: ", ";\n height: ", ";\n"])), function (_ref) {
29
+ var image = _ref.image;
30
+ if (image) return '15vw';
31
+ return '20vw';
32
+ }, function (_ref2) {
33
+ var image = _ref2.image;
34
+ if (image) return '15vw';
35
+ return '20vw';
36
+ }, function (_ref3) {
37
+ var state = _ref3.state;
38
+
39
+ if (state) {
40
+ if (state === 'inbound') return '0rem';
41
+ if (state === 'outbound') return 'auto';
42
+ }
43
+
44
+ return '0rem';
45
+ }, function (_ref4) {
46
+ var state = _ref4.state;
47
+
48
+ if (state) {
49
+ if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
50
+ if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
51
+ }
52
+
53
+ return "".concat(_colors.BmPrimaryWhite);
54
+ }, _colors.BmGrey200, function (_ref5) {
55
+ var image = _ref5.image;
56
+ if (image) return '10vw';
57
+ return '100%';
58
+ }, function (_ref6) {
59
+ var image = _ref6.image;
60
+ if (image) return '10vw';
61
+ return '100%';
62
+ });
63
+
64
+ var MainContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n border-left: ", ";\n background-color: ", ";\n max-height: 80%;\n height: 80%;\n"])), function (_ref7) {
65
+ var status = _ref7.status;
66
+
67
+ if (status) {
68
+ if (status === 'comment') return "0.143rem solid ".concat(_colors.BmSecondaryGreen);
69
+ if (status === 'story') return "0.143rem solid ".concat(_colors.BmSecondaryPurple);
70
+ }
71
+
72
+ return "0.071rem solid ".concat(_colors.BmSecondaryPurple);
73
+ }, function (_ref8) {
74
+ var state = _ref8.state;
75
+
76
+ if (state) {
77
+ if (state === 'inbound') return "".concat(_colors.BmTransparentBg30);
78
+ if (state === 'outbound') return "".concat(_colors.BmTransparentBg30);
79
+ }
80
+
81
+ return "".concat(_colors.BmTransparentBg30);
82
+ });
83
+
84
+ var Content = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n color: ", ";\n word-break: break-word;\n > * {\n margin-bottom: 0.5rem;\n word-break: break-word;\n }\n width: ", ";\n max-width: ", ";\n padding: 0.5rem;\n"])), function (_ref9) {
85
+ var state = _ref9.state;
86
+ if (state && state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
87
+ if (state && state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
88
+ return "".concat(_colors.BmPrimaryBlack);
89
+ }, function (_ref10) {
90
+ var image = _ref10.image;
91
+ if (image) return '75%';
92
+ return '100%';
93
+ }, function (_ref11) {
94
+ var image = _ref11.image;
95
+ if (image) return '75%';
96
+ return '100%';
97
+ });
98
+
99
+ var Image = _styledComponents.default.img(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n max-width: 25%;\n width: 25%;\n"])));
100
+
101
+ BmFeedPost.Footer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n word-break: break-word;\n > * {\n word-break: break-word !important;\n }\n align-items: center;\n margin-top: 0.5rem;\n max-height: 20%;\n height: 20%;\n color: ", ";\n"])), function (_ref12) {
102
+ var state = _ref12.state;
103
+ if (state && state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
104
+ if (state && state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
105
+ return "".concat(_colors.BmPrimaryBlack);
106
+ });
107
+
108
+ var BmFeedPostComments = function BmFeedPostComments(_ref13) {
109
+ var story = _ref13.story,
110
+ state = _ref13.state,
111
+ status = _ref13.status,
112
+ image = _ref13.image,
113
+ rest = _objectWithoutProperties(_ref13, _excluded);
114
+
115
+ return story && /*#__PURE__*/_react.default.createElement(BmFeedPost, _extends({
116
+ state: story.state
117
+ }, rest, {
118
+ status: story.status,
119
+ image: story.body.image,
120
+ story: story
121
+ }), /*#__PURE__*/_react.default.createElement(MainContent, _extends({
122
+ status: story.status,
123
+ state: story.state
124
+ }, rest), /*#__PURE__*/_react.default.createElement(Content, {
125
+ header: story.header,
126
+ body: story.body && story.body.link,
127
+ state: story.state,
128
+ status: story.status,
129
+ image: story.body && story.body.image
130
+ }, story.header, story.body.link), story.body.image && /*#__PURE__*/_react.default.createElement(Image, {
131
+ src: story.body.image,
132
+ alt: "src"
133
+ })), story.footer && /*#__PURE__*/_react.default.createElement(BmFeedPost.Footer, {
134
+ state: state
135
+ }, story.footer));
136
+ };
137
+
138
+ exports.BmFeedPostComments = BmFeedPostComments;
package/dist/components/ChatComponents/ChatBody/chatBody.js CHANGED
@@ -25,9 +25,11 @@ var _sessionTimeline = require("./sessionTimeline");
25
25
 
26
26
  var _colors = require("../../colors");
27
27
 
28
+ var _FeedPostComments = require("./FeedPostComments");
29
+
28
30
  var _excluded = ["state", "file", "src", "fileName", "onDownload", "link"],
29
31
  _excluded2 = ["state", "src", "fileName"],
30
- _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails", "sessionTimeline"];
32
+ _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails", "sessionTimeline", "feedPostComments"];
31
33
 
32
34
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
33
35
 
@@ -65,7 +67,7 @@ var Details = _styledComponents.default.div(_templateObject3 || (_templateObject
65
67
 
66
68
  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"])));
67
69
 
68
- 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: keep-all;\n margin: 0rem;\n"])), function (_ref2) {
70
+ 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-word;\n margin: 0rem;\n"])), function (_ref2) {
69
71
  var state = _ref2.state;
70
72
 
71
73
  if (state) {
@@ -94,10 +96,19 @@ var Messages = _styledComponents.default.div(_templateObject5 || (_templateObjec
94
96
  return "".concat(_colors.BmPrimaryWhite);
95
97
  }, _colors.BmGrey200);
96
98
 
97
- var MessagesSubDetails = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n > *:not(:last-child) {\n margin-right: 0.5rem;\n }\n margin-top: 0.5rem;\n"])));
99
+ var MessagesSubDetails = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n > *:not(:last-child) {\n margin-right: 0.5rem;\n }\n margin-left: ", ";\n margin-top: 0.5rem;\n"])), function (_ref5) {
100
+ var state = _ref5.state;
101
+
102
+ if (state) {
103
+ if (state === 'inbound') return '0px';
104
+ if (state === 'outbound') return 'auto';
105
+ }
106
+
107
+ return "".concat(_colors.BmPrimaryWhite);
108
+ });
98
109
 
99
- var handleState = function handleState(_ref5) {
100
- var session = _ref5.session;
110
+ var handleState = function handleState(_ref6) {
111
+ var session = _ref6.session;
101
112
 
102
113
  if (session === 'bot') {
103
114
  return /*#__PURE__*/_react.default.createElement(_avatars.default, {
@@ -122,8 +133,8 @@ var handleState = function handleState(_ref5) {
122
133
  }; // Start of File Attachment
123
134
 
124
135
 
125
- var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n cursor: pointer;\n flex-direction: row;\n padding: 1rem;\n background: ", ";\n color: ", ";\n border-radius: ", ";\n border: 0.071rem solid ", ";\n > * {\n &:last-child {\n margin-left: auto;\n }\n :not(:last-child) {\n margin-right: 0.5rem;\n }\n }\n &&& > * {\n align-items: center;\n color: ", ";\n }\n ", "\n ", "\n"])), function (_ref6) {
126
- var state = _ref6.state;
136
+ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n cursor: pointer;\n flex-direction: row;\n padding: 1rem;\n background: ", ";\n color: ", ";\n border-radius: ", ";\n border: 0.071rem solid ", ";\n > * {\n &:last-child {\n margin-left: auto;\n }\n :not(:last-child) {\n margin-right: 0.5rem;\n }\n }\n &&& > * {\n align-items: center;\n color: ", ";\n }\n ", "\n ", "\n"])), function (_ref7) {
137
+ var state = _ref7.state;
127
138
 
128
139
  if (state) {
129
140
  if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
@@ -131,8 +142,8 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
131
142
  }
132
143
 
133
144
  return "".concat(_colors.BmPrimaryWhite);
134
- }, function (_ref7) {
135
- var state = _ref7.state;
145
+ }, function (_ref8) {
146
+ var state = _ref8.state;
136
147
 
137
148
  if (state) {
138
149
  if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
@@ -140,8 +151,8 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
140
151
  }
141
152
 
142
153
  return "".concat(_colors.BmPrimaryWhite);
143
- }, function (_ref8) {
144
- var state = _ref8.state;
154
+ }, function (_ref9) {
155
+ var state = _ref9.state;
145
156
 
146
157
  if (state) {
147
158
  if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
@@ -149,8 +160,8 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
149
160
  }
150
161
 
151
162
  return "".concat(_colors.BmPrimaryWhite);
152
- }, _colors.BmGrey200, function (_ref9) {
153
- var state = _ref9.state;
163
+ }, _colors.BmGrey200, function (_ref10) {
164
+ var state = _ref10.state;
154
165
 
155
166
  if (state) {
156
167
  if (state === 'inbound') return "".concat(_colors.BmPrimaryBlue);
@@ -164,14 +175,14 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
164
175
  /* max-height: 100%; */
165
176
  );
166
177
 
167
- var BmFileAttachment = function BmFileAttachment(_ref10) {
168
- var state = _ref10.state,
169
- file = _ref10.file,
170
- src = _ref10.src,
171
- fileName = _ref10.fileName,
172
- onDownload = _ref10.onDownload,
173
- link = _ref10.link,
174
- rest = _objectWithoutProperties(_ref10, _excluded);
178
+ var BmFileAttachment = function BmFileAttachment(_ref11) {
179
+ var state = _ref11.state,
180
+ file = _ref11.file,
181
+ src = _ref11.src,
182
+ fileName = _ref11.fileName,
183
+ onDownload = _ref11.onDownload,
184
+ link = _ref11.link,
185
+ rest = _objectWithoutProperties(_ref11, _excluded);
175
186
 
176
187
  return /*#__PURE__*/_react.default.createElement(FileAttachmentWrapper, _extends({
177
188
  state: state
@@ -186,8 +197,8 @@ var BmFileAttachment = function BmFileAttachment(_ref10) {
186
197
  }; // Start of Component for Images
187
198
 
188
199
 
189
- var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n color: ", ";\n border-radius: ", ";\n border: 0.071rem solid ", ";\n"])), function (_ref11) {
190
- var state = _ref11.state;
200
+ var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n color: ", ";\n border-radius: ", ";\n border: 0.071rem solid ", ";\n"])), function (_ref12) {
201
+ var state = _ref12.state;
191
202
 
192
203
  if (state) {
193
204
  if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
@@ -195,8 +206,8 @@ var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templat
195
206
  }
196
207
 
197
208
  return "".concat(_colors.BmPrimaryWhite);
198
- }, function (_ref12) {
199
- var state = _ref12.state;
209
+ }, function (_ref13) {
210
+ var state = _ref13.state;
200
211
 
201
212
  if (state) {
202
213
  if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
@@ -214,11 +225,11 @@ var BmImage = _styledComponents.default.img(_templateObject9 || (_templateObject
214
225
 
215
226
  exports.BmImage = BmImage;
216
227
 
217
- var BmImageChat = function BmImageChat(_ref13) {
218
- var state = _ref13.state,
219
- src = _ref13.src,
220
- fileName = _ref13.fileName,
221
- rest = _objectWithoutProperties(_ref13, _excluded2);
228
+ var BmImageChat = function BmImageChat(_ref14) {
229
+ var state = _ref14.state,
230
+ src = _ref14.src,
231
+ fileName = _ref14.fileName,
232
+ rest = _objectWithoutProperties(_ref14, _excluded2);
222
233
 
223
234
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BmImageWrapper, _extends({
224
235
  state: state
@@ -239,18 +250,19 @@ var MessageState = _styledComponents.default.div(_templateObject10 || (_template
239
250
 
240
251
  exports.MessageState = MessageState;
241
252
 
242
- BmChat.Details = function (_ref14) {
243
- var children = _ref14.children,
244
- state = _ref14.state,
245
- displayTime = _ref14.displayTime,
246
- status = _ref14.status,
247
- session = _ref14.session,
248
- src = _ref14.src,
249
- file = _ref14.file,
250
- fileName = _ref14.fileName,
251
- sessionDetails = _ref14.sessionDetails,
252
- sessionTimeline = _ref14.sessionTimeline,
253
- rest = _objectWithoutProperties(_ref14, _excluded3);
253
+ BmChat.Details = function (_ref15) {
254
+ var children = _ref15.children,
255
+ state = _ref15.state,
256
+ displayTime = _ref15.displayTime,
257
+ status = _ref15.status,
258
+ session = _ref15.session,
259
+ src = _ref15.src,
260
+ file = _ref15.file,
261
+ fileName = _ref15.fileName,
262
+ sessionDetails = _ref15.sessionDetails,
263
+ sessionTimeline = _ref15.sessionTimeline,
264
+ feedPostComments = _ref15.feedPostComments,
265
+ rest = _objectWithoutProperties(_ref15, _excluded3);
254
266
 
255
267
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sessionTimeline && /*#__PURE__*/_react.default.createElement(_sessionTimeline.SessionTimeline, _extends({
256
268
  message: sessionTimeline.message
@@ -262,7 +274,9 @@ BmChat.Details = function (_ref14) {
262
274
  }, rest), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'inbound' && session && handleState({
263
275
  state: state,
264
276
  session: session
265
- })), /*#__PURE__*/_react.default.createElement(MessageDetails, null, src && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
277
+ })), /*#__PURE__*/_react.default.createElement(MessageDetails, {
278
+ feedPostComments: feedPostComments
279
+ }, src && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
266
280
  state: state,
267
281
  src: src,
268
282
  fileName: fileName
@@ -272,7 +286,12 @@ BmChat.Details = function (_ref14) {
272
286
  file: file,
273
287
  fileName: fileName,
274
288
  state: state
275
- }, rest)), /*#__PURE__*/_react.default.createElement(MessagesSubDetails, null, displayTime && displayTime, status === 'sent' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
289
+ }, rest)), feedPostComments && /*#__PURE__*/_react.default.createElement(_FeedPostComments.BmFeedPostComments, _extends({
290
+ state: state,
291
+ story: feedPostComments
292
+ }, rest)), /*#__PURE__*/_react.default.createElement(MessagesSubDetails, {
293
+ state: state
294
+ }, displayTime && displayTime, status === 'sent' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
276
295
  icon: /*#__PURE__*/_react.default.createElement(_icons.DoneAll, null),
277
296
  color: "".concat(_colors.BmSecondaryDarkGreen),
278
297
  size: "small"
package/dist/components/ChatComponents/ChatBody/chatBody.stories.js CHANGED
@@ -35,6 +35,63 @@ exports.default = _default;
35
35
 
36
36
  var ChatBody = function ChatBody() {
37
37
  return /*#__PURE__*/_react.default.createElement(_chatBody.default, null, /*#__PURE__*/_react.default.createElement(_chatBody.default.Body, null, /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
38
+ state: "outbound",
39
+ session: "sms",
40
+ displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
41
+ status: "sent",
42
+ sessionDetails: {
43
+ message: /*#__PURE__*/_react.default.createElement("h3", null, "Session Message"),
44
+ time: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm")
45
+ },
46
+ feedPostComments: {
47
+ header: /*#__PURE__*/_react.default.createElement("p", null, "Comment Reply"),
48
+ body: {
49
+ link: /*#__PURE__*/_react.default.createElement("p", null, "This is an outbound link"),
50
+ image: _chartImg.default
51
+ },
52
+ footer: /*#__PURE__*/_react.default.createElement("p", null, "This is a Footer"),
53
+ state: 'outbound',
54
+ status: 'comment'
55
+ }
56
+ }), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
57
+ state: "inbound",
58
+ session: "sms",
59
+ displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
60
+ status: "sent",
61
+ sessionDetails: {
62
+ message: /*#__PURE__*/_react.default.createElement("h3", null, "Session Message"),
63
+ time: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm")
64
+ },
65
+ feedPostComments: {
66
+ header: /*#__PURE__*/_react.default.createElement("p", null, "Comment Reply"),
67
+ body: {
68
+ link: /*#__PURE__*/_react.default.createElement("p", null, "This is an inbound link"),
69
+ image: _chartImg.default
70
+ },
71
+ footer: /*#__PURE__*/_react.default.createElement("p", null, "This is a Footer"),
72
+ state: 'inbound',
73
+ status: 'comment'
74
+ }
75
+ }), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
76
+ state: "outbound",
77
+ session: "sms",
78
+ displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
79
+ status: "sent",
80
+ sessionDetails: {
81
+ message: /*#__PURE__*/_react.default.createElement("h3", null, "Session Message"),
82
+ time: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm")
83
+ },
84
+ feedPostComments: {
85
+ header: /*#__PURE__*/_react.default.createElement("p", null, "Story Reply"),
86
+ body: {
87
+ link: /*#__PURE__*/_react.default.createElement("p", null, "This is an outbound link"),
88
+ image: _chartImg.default
89
+ },
90
+ footer: /*#__PURE__*/_react.default.createElement("p", null, "This is a Footer"),
91
+ state: 'outbound',
92
+ status: 'story'
93
+ }
94
+ }), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
38
95
  state: "inbound",
39
96
  session: "sms",
40
97
  displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
@@ -42,8 +99,18 @@ var ChatBody = function ChatBody() {
42
99
  sessionDetails: {
43
100
  message: /*#__PURE__*/_react.default.createElement("h3", null, "Session Message"),
44
101
  time: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm")
102
+ },
103
+ feedPostComments: {
104
+ header: /*#__PURE__*/_react.default.createElement("p", null, "Comment Reply"),
105
+ body: {
106
+ link: /*#__PURE__*/_react.default.createElement("p", null, "This is an inbound link"),
107
+ image: _chartImg.default
108
+ },
109
+ footer: /*#__PURE__*/_react.default.createElement("p", null, "This is a Footer"),
110
+ state: 'inbound',
111
+ status: 'story'
45
112
  }
46
- }, /*#__PURE__*/_react.default.createElement("p", null, "Inbound Text Message")), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
113
+ }), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
47
114
  state: "inbound",
48
115
  session: "live",
49
116
  displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
package/dist/components/colors.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.BmSecondaryYellow = exports.BmSecondaryRed8 = exports.BmSecondaryRed15 = exports.BmSecondaryRed = exports.BmSecondaryPurple = exports.BmSecondaryGrey = exports.BmSecondaryGreen8 = exports.BmSecondaryGreen15 = exports.BmSecondaryGreen = exports.BmSecondaryGold15 = exports.BmSecondaryDarkGreen = exports.BmSecondaryCyan = exports.BmSecondaryBlue12 = exports.BmPrimaryWhite = exports.BmPrimaryGold = exports.BmPrimaryBlue = exports.BmPrimaryBlack = exports.BmPictogramGold = exports.BmPictogramBlue = exports.BmGrey600 = exports.BmGrey500 = exports.BmGrey50 = exports.BmGrey400 = exports.BmGrey200 = exports.BmGrey100 = exports.BmBgLightBlue = exports.BmBgGreyBlue = exports.BmBgGrey45 = exports.BmBgGrey38 = void 0;
6
+ exports.BmTransparentBg60 = exports.BmTransparentBg30 = exports.BmSecondaryYellow = exports.BmSecondaryRed8 = exports.BmSecondaryRed15 = exports.BmSecondaryRed = exports.BmSecondaryPurple = exports.BmSecondaryGrey = exports.BmSecondaryGreen8 = exports.BmSecondaryGreen15 = exports.BmSecondaryGreen = exports.BmSecondaryGold15 = exports.BmSecondaryDarkGreen = exports.BmSecondaryCyan = exports.BmSecondaryBlue12 = exports.BmPrimaryWhite = exports.BmPrimaryGold = exports.BmPrimaryBlue = exports.BmPrimaryBlack = exports.BmPictogramGold = exports.BmPictogramBlue = exports.BmGrey600 = exports.BmGrey500 = exports.BmGrey50 = exports.BmGrey400 = exports.BmGrey200 = exports.BmGrey100 = exports.BmBgLightBlue = exports.BmBgGreyBlue = exports.BmBgGrey45 = exports.BmBgGrey38 = void 0;
7
7
  // Primary Colors
8
8
  var BmPrimaryBlue = '#33B1BA';
9
9
  exports.BmPrimaryBlue = BmPrimaryBlue;
@@ -66,5 +66,10 @@ var BmGrey50 = '#F6F6F6'; // Pictogram Colors
66
66
  exports.BmGrey50 = BmGrey50;
67
67
  var BmPictogramBlue = '#CCEAEB';
68
68
  exports.BmPictogramBlue = BmPictogramBlue;
69
- var BmPictogramGold = '#F8D8A2';
70
- exports.BmPictogramGold = BmPictogramGold;
69
+ var BmPictogramGold = '#F8D8A2'; // Transparent Background
70
+
71
+ exports.BmPictogramGold = BmPictogramGold;
72
+ var BmTransparentBg30 = 'rgba(217, 217, 217, 0.3)';
73
+ exports.BmTransparentBg30 = BmTransparentBg30;
74
+ var BmTransparentBg60 = 'rgba(217, 217, 217, 0.6)';
75
+ exports.BmTransparentBg60 = BmTransparentBg60;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "beem-component",
3
- "version": "1.7.1",
3
+ "version": "1.7.4",
4
4
  "private": false,
5
5
  "main": "dist/components/index.js",
6
6
  "scripts": {
package/src/App.js CHANGED
@@ -14,25 +14,93 @@ import {
14
14
 
15
15
  const Chat = () => {
16
16
  const image =
17
- 'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/1225211.jpg?AWSAccessKeyId=AKIAVCAYXA54EPKHSRGL&Expires=1734873821&Signature=ySZ23PaUxUeUVA4lCZCE1RZIrnc%3D';
17
+ 'https://scontent.fnbo1-1.fna.fbcdn.net/v/t39.30808-6/298879098_10161724947807542_5252175668064009159_n.jpg?stp=dst-jpg_p720x720&_nc_cat=100&ccb=1-7&_nc_sid=9e2e56&_nc_ohc=9uDHII_ETpUAX_KNS3Y&_nc_ht=scontent.fnbo1-1.fna&edm=APCh5TUEAAAA&oh=00_AT8sOJmRGYwgXF48_GPOCWx1soil0yK8V3AiEPkce9WJIw&oe=6304120B';
18
18
  return (
19
19
  <>
20
20
  <GlobalStyle />
21
21
  <BmProfileIcon channel="google_business_messaging" />
22
22
  <BmChat>
23
23
  <BmChat.Body>
24
+ <BmChat.Details
25
+ state="outbound"
26
+ session="sms"
27
+ displayTime={<p>12:00pm</p>}
28
+ status="sent"
29
+ sessionDetails={{
30
+ message: <h3>Session Message</h3>,
31
+ time: <p>12:00pm</p>,
32
+ }}
33
+ feedPostComments={{
34
+ header: <p>Comment Reply</p>,
35
+ body: {
36
+ link: <p>This is an outbound link</p>,
37
+ image,
38
+ },
39
+ footer: <p>This is a Footer</p>,
40
+ state: 'outbound',
41
+ status: 'comment',
42
+ }}
43
+ />
24
44
  <BmChat.Details
25
45
  state="inbound"
26
46
  session="sms"
27
47
  displayTime={<p>12:00pm</p>}
28
48
  status="sent"
29
- sessionTimeline={{
30
- message: <p>2022-07-28</p>,
31
- // time: <p>12:00pm</p>,
49
+ sessionDetails={{
50
+ message: <h3>Session Message</h3>,
51
+ time: <p>12:00pm</p>,
32
52
  }}
33
- >
34
- <p>Inbound Text Message</p>
35
- </BmChat.Details>
53
+ feedPostComments={{
54
+ header: <p>Comment Reply</p>,
55
+ body: {
56
+ link: <p>This is an inbound link</p>,
57
+ image,
58
+ },
59
+ footer: <p>This is a Footer</p>,
60
+ state: 'inbound',
61
+ status: 'comment',
62
+ }}
63
+ />
64
+ <BmChat.Details
65
+ state="outbound"
66
+ session="sms"
67
+ displayTime={<p>12:00pm</p>}
68
+ status="sent"
69
+ sessionDetails={{
70
+ message: <h3>Session Message</h3>,
71
+ time: <p>12:00pm</p>,
72
+ }}
73
+ feedPostComments={{
74
+ header: <p>Story Reply</p>,
75
+ body: {
76
+ link: <p>This is an outbound link</p>,
77
+ image,
78
+ },
79
+ footer: <p>This is a Footer</p>,
80
+ state: 'outbound',
81
+ status: 'story',
82
+ }}
83
+ />
84
+ <BmChat.Details
85
+ state="inbound"
86
+ session="sms"
87
+ displayTime={<p>12:00pm</p>}
88
+ status="sent"
89
+ sessionDetails={{
90
+ message: <h3>Session Message</h3>,
91
+ time: <p>12:00pm</p>,
92
+ }}
93
+ feedPostComments={{
94
+ header: <p>Story Reply</p>,
95
+ body: {
96
+ link: <p>This is an inbound link</p>,
97
+ image,
98
+ },
99
+ footer: <p>This is a Footer</p>,
100
+ state: 'inbound',
101
+ status: 'story',
102
+ }}
103
+ />
36
104
  <BmChat.Details
37
105
  state="inbound"
38
106
  session="live"
package/src/lib/components/ChatComponents/ChatBody/FeedPostComments.js ADDED
@@ -0,0 +1,154 @@
1
+ import React from 'react';
2
+ import styled from 'styled-components';
3
+ import {
4
+ BmSecondaryGreen,
5
+ BmSecondaryPurple,
6
+ BmGrey200,
7
+ BmPrimaryBlue,
8
+ BmPrimaryBlack,
9
+ BmPrimaryWhite,
10
+ BmTransparentBg30,
11
+ } from '../../colors';
12
+
13
+ const BmFeedPost = styled.div`
14
+ display: inline-block;
15
+ flex-direction: column;
16
+ padding: 0.5rem;
17
+ width: ${({ image }) => {
18
+ if (image) return '15vw';
19
+ return '20vw';
20
+ }};
21
+ max-width: ${({ image }) => {
22
+ if (image) return '15vw';
23
+ return '20vw';
24
+ }};
25
+ margin-left: ${({ state }) => {
26
+ if (state) {
27
+ if (state === 'inbound') return '0rem';
28
+ if (state === 'outbound') return 'auto';
29
+ }
30
+ return '0rem';
31
+ }};
32
+ background-color: ${({ state }) => {
33
+ if (state) {
34
+ if (state === 'inbound') return `${BmPrimaryWhite}`;
35
+ if (state === 'outbound') return `${BmPrimaryBlue}`;
36
+ }
37
+ return `${BmPrimaryWhite}`;
38
+ }};
39
+ border: 0.071rem solid ${BmGrey200};
40
+ border-radius: 0.25rem;
41
+ max-height: ${({ image }) => {
42
+ if (image) return '10vw';
43
+ return '100%';
44
+ }};
45
+ height: ${({ image }) => {
46
+ if (image) return '10vw';
47
+ return '100%';
48
+ }};
49
+ `;
50
+
51
+ const MainContent = styled.div`
52
+ display: flex;
53
+ flex-direction: row;
54
+ border-left: ${({ status }) => {
55
+ if (status) {
56
+ if (status === 'comment') return `0.143rem solid ${BmSecondaryGreen}`;
57
+ if (status === 'story') return `0.143rem solid ${BmSecondaryPurple}`;
58
+ }
59
+ return `0.071rem solid ${BmSecondaryPurple}`;
60
+ }};
61
+ background-color: ${({ state }) => {
62
+ if (state) {
63
+ if (state === 'inbound') return `${BmTransparentBg30}`;
64
+ if (state === 'outbound') return `${BmTransparentBg30}`;
65
+ }
66
+ return `${BmTransparentBg30}`;
67
+ }};
68
+ max-height: 80%;
69
+ height: 80%;
70
+ `;
71
+
72
+ const Content = styled.div`
73
+ display: flex;
74
+ flex-direction: column;
75
+ color: ${({ state }) => {
76
+ if (state && state === 'inbound') return `${BmPrimaryBlack}`;
77
+ if (state && state === 'outbound') return `${BmPrimaryWhite}`;
78
+ return `${BmPrimaryBlack}`;
79
+ }};
80
+ word-break: break-word;
81
+ > * {
82
+ margin-bottom: 0.5rem;
83
+ word-break: break-word;
84
+ }
85
+ width: ${({ image }) => {
86
+ if (image) return '75%';
87
+ return '100%';
88
+ }};
89
+ max-width: ${({ image }) => {
90
+ if (image) return '75%';
91
+ return '100%';
92
+ }};
93
+ padding: 0.5rem;
94
+ `;
95
+
96
+ const Image = styled.img`
97
+ max-width: 25%;
98
+ width: 25%;
99
+ `;
100
+
101
+ BmFeedPost.Footer = styled.div`
102
+ display: flex;
103
+ flex-direction: row;
104
+ word-break: break-word;
105
+ > * {
106
+ word-break: break-word !important;
107
+ }
108
+ align-items: center;
109
+ margin-top: 0.5rem;
110
+ max-height: 20%;
111
+ height: 20%;
112
+ color: ${({ state }) => {
113
+ if (state && state === 'inbound') return `${BmPrimaryBlack}`;
114
+ if (state && state === 'outbound') return `${BmPrimaryWhite}`;
115
+ return `${BmPrimaryBlack}`;
116
+ }};
117
+ `;
118
+
119
+ export const BmFeedPostComments = ({
120
+ story,
121
+ state,
122
+ status,
123
+ image,
124
+ ...rest
125
+ }) => {
126
+ return (
127
+ story && (
128
+ <BmFeedPost
129
+ state={story.state}
130
+ {...rest}
131
+ status={story.status}
132
+ image={story.body.image}
133
+ story={story}
134
+ >
135
+ <MainContent status={story.status} state={story.state} {...rest}>
136
+ <Content
137
+ header={story.header}
138
+ body={story.body && story.body.link}
139
+ state={story.state}
140
+ status={story.status}
141
+ image={story.body && story.body.image}
142
+ >
143
+ {story.header}
144
+ {story.body.link}
145
+ </Content>
146
+ {story.body.image && <Image src={story.body.image} alt="src" />}
147
+ </MainContent>
148
+ {story.footer && (
149
+ <BmFeedPost.Footer state={state}>{story.footer}</BmFeedPost.Footer>
150
+ )}
151
+ </BmFeedPost>
152
+ )
153
+ );
154
+ };
package/src/lib/components/ChatComponents/ChatBody/chatBody.js CHANGED
@@ -15,6 +15,7 @@ import {
15
15
  BmSecondaryDarkGreen,
16
16
  BmGrey200,
17
17
  } from '../../colors';
18
+ import { BmFeedPostComments } from './FeedPostComments';
18
19
 
19
20
  const BmChat = styled.div`
20
21
  display: flex;
@@ -91,7 +92,7 @@ const Messages = styled.div`
91
92
  return `${BmPrimaryWhite}`;
92
93
  }};
93
94
  border: 0.071rem solid ${BmGrey200};
94
- word-break: keep-all;
95
+ word-break: break-word;
95
96
  margin: 0rem;
96
97
  `;
97
98
 
@@ -102,6 +103,13 @@ const MessagesSubDetails = styled.div`
102
103
  > *:not(:last-child) {
103
104
  margin-right: 0.5rem;
104
105
  }
106
+ margin-left: ${({ state }) => {
107
+ if (state) {
108
+ if (state === 'inbound') return '0px';
109
+ if (state === 'outbound') return 'auto';
110
+ }
111
+ return `${BmPrimaryWhite}`;
112
+ }};
105
113
  margin-top: 0.5rem;
106
114
  `;
107
115
 
@@ -252,6 +260,7 @@ BmChat.Details = ({
252
260
  fileName,
253
261
  sessionDetails,
254
262
  sessionTimeline,
263
+ feedPostComments,
255
264
  ...rest
256
265
  }) => {
257
266
  return (
@@ -271,7 +280,7 @@ BmChat.Details = ({
271
280
  <MessageState>
272
281
  {state === 'inbound' && session && handleState({ state, session })}
273
282
  </MessageState>
274
- <MessageDetails>
283
+ <MessageDetails feedPostComments={feedPostComments}>
275
284
  {/* For Images */}
276
285
  {src && (
277
286
  <BmImageChat
@@ -292,7 +301,14 @@ BmChat.Details = ({
292
301
  {...rest}
293
302
  />
294
303
  )}
295
- <MessagesSubDetails>
304
+ {feedPostComments && (
305
+ <BmFeedPostComments
306
+ state={state}
307
+ story={feedPostComments}
308
+ {...rest}
309
+ />
310
+ )}
311
+ <MessagesSubDetails state={state}>
296
312
  {displayTime && displayTime}
297
313
  {status === 'sent' && (
298
314
  <BmIcons
package/src/lib/components/ChatComponents/ChatBody/chatBody.stories.js CHANGED
@@ -18,6 +18,26 @@ export const ChatBody = () => {
18
18
  return (
19
19
  <BmChat>
20
20
  <BmChat.Body>
21
+ <BmChat.Details
22
+ state="outbound"
23
+ session="sms"
24
+ displayTime={<p>12:00pm</p>}
25
+ status="sent"
26
+ sessionDetails={{
27
+ message: <h3>Session Message</h3>,
28
+ time: <p>12:00pm</p>,
29
+ }}
30
+ feedPostComments={{
31
+ header: <p>Comment Reply</p>,
32
+ body: {
33
+ link: <p>This is an outbound link</p>,
34
+ image,
35
+ },
36
+ footer: <p>This is a Footer</p>,
37
+ state: 'outbound',
38
+ status: 'comment',
39
+ }}
40
+ />
21
41
  <BmChat.Details
22
42
  state="inbound"
23
43
  session="sms"
@@ -27,9 +47,57 @@ export const ChatBody = () => {
27
47
  message: <h3>Session Message</h3>,
28
48
  time: <p>12:00pm</p>,
29
49
  }}
30
- >
31
- <p>Inbound Text Message</p>
32
- </BmChat.Details>
50
+ feedPostComments={{
51
+ header: <p>Comment Reply</p>,
52
+ body: {
53
+ link: <p>This is an inbound link</p>,
54
+ image,
55
+ },
56
+ footer: <p>This is a Footer</p>,
57
+ state: 'inbound',
58
+ status: 'comment',
59
+ }}
60
+ />
61
+ <BmChat.Details
62
+ state="outbound"
63
+ session="sms"
64
+ displayTime={<p>12:00pm</p>}
65
+ status="sent"
66
+ sessionDetails={{
67
+ message: <h3>Session Message</h3>,
68
+ time: <p>12:00pm</p>,
69
+ }}
70
+ feedPostComments={{
71
+ header: <p>Story Reply</p>,
72
+ body: {
73
+ link: <p>This is an outbound link</p>,
74
+ image,
75
+ },
76
+ footer: <p>This is a Footer</p>,
77
+ state: 'outbound',
78
+ status: 'story',
79
+ }}
80
+ />
81
+ <BmChat.Details
82
+ state="inbound"
83
+ session="sms"
84
+ displayTime={<p>12:00pm</p>}
85
+ status="sent"
86
+ sessionDetails={{
87
+ message: <h3>Session Message</h3>,
88
+ time: <p>12:00pm</p>,
89
+ }}
90
+ feedPostComments={{
91
+ header: <p>Comment Reply</p>,
92
+ body: {
93
+ link: <p>This is an inbound link</p>,
94
+ image,
95
+ },
96
+ footer: <p>This is a Footer</p>,
97
+ state: 'inbound',
98
+ status: 'story',
99
+ }}
100
+ />
33
101
  <BmChat.Details
34
102
  state="inbound"
35
103
  session="live"
package/src/lib/components/colors.js CHANGED
@@ -61,3 +61,8 @@ export const BmGrey50 = '#F6F6F6';
61
61
  export const BmPictogramBlue = '#CCEAEB';
62
62
 
63
63
  export const BmPictogramGold = '#F8D8A2';
64
+
65
+ // Transparent Background
66
+ export const BmTransparentBg30 = 'rgba(217, 217, 217, 0.3)';
67
+
68
+ export const BmTransparentBg60 = 'rgba(217, 217, 217, 0.6)';