beem-component 1.7.3 → 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 (8) hide show
  1. package/dist/components/ChatComponents/ChatBody/FeedPostComments.js +92 -26
  2. package/dist/components/ChatComponents/ChatBody/chatBody.stories.js +63 -4
  3. package/dist/components/colors.js +8 -3
  4. package/package.json +1 -1
  5. package/src/App.js +69 -12
  6. package/src/lib/components/ChatComponents/ChatBody/FeedPostComments.js +127 -50
  7. package/src/lib/components/ChatComponents/ChatBody/chatBody.stories.js +65 -5
  8. package/src/lib/components/colors.js +5 -0
package/dist/components/ChatComponents/ChatBody/FeedPostComments.js CHANGED
@@ -9,11 +9,11 @@ var _react = _interopRequireDefault(require("react"));
9
9
 
10
10
  var _styledComponents = _interopRequireDefault(require("styled-components"));
11
11
 
12
- var _cards = _interopRequireDefault(require("../../Cards/cards"));
12
+ var _colors = require("../../colors");
13
13
 
14
- var _excluded = ["story", "state"];
14
+ var _excluded = ["story", "state", "status", "image"];
15
15
 
16
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
16
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
17
17
 
18
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
19
 
@@ -25,20 +25,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
25
25
 
26
26
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
27
27
 
28
- var Image = _styledComponents.default.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n max-width: 30%;\n width: 30%;\n"])));
29
-
30
- var LinkText = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n max-width: 70%;\n width: 70%;\n align-items: center;\n > * {\n word-wrap: break-word !important;\n word-break: break-word;\n }\n"])));
31
-
32
- var Wrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n word-wrap: break-word !important;\n word-break: break-word;\n > * {\n word-wrap: break-word !important;\n word-break: break-word !important;\n }\n"])));
33
-
34
- var CardWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n width: ", ";\n max-width: ", ";\n margin-left: ", ";\n"])), function (_ref) {
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) {
35
29
  var image = _ref.image;
36
- if (image) return '50%';
37
- return '100%';
30
+ if (image) return '15vw';
31
+ return '20vw';
38
32
  }, function (_ref2) {
39
33
  var image = _ref2.image;
40
- if (image) return '50%';
41
- return '100%';
34
+ if (image) return '15vw';
35
+ return '20vw';
42
36
  }, function (_ref3) {
43
37
  var state = _ref3.state;
44
38
 
@@ -48,25 +42,97 @@ var CardWrapper = _styledComponents.default.div(_templateObject4 || (_templateOb
48
42
  }
49
43
 
50
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%';
51
62
  });
52
63
 
53
- var BmFeedPostComments = function BmFeedPostComments(_ref4) {
54
- var story = _ref4.story,
55
- state = _ref4.state,
56
- rest = _objectWithoutProperties(_ref4, _excluded);
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;
57
66
 
58
- return story && /*#__PURE__*/_react.default.createElement(CardWrapper, _extends({
59
- state: state
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
60
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,
61
129
  image: story.body && story.body.image
62
- }), /*#__PURE__*/_react.default.createElement(_cards.default, _extends({
63
- state: state
64
- }, rest), story.header && /*#__PURE__*/_react.default.createElement(_cards.default.Header, null, story.header), story.body && /*#__PURE__*/_react.default.createElement(_cards.default.Body, null, /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(LinkText, {
65
- image: story.body.image
66
- }, story.body.link), story.body.image && /*#__PURE__*/_react.default.createElement(Image, {
130
+ }, story.header, story.body.link), story.body.image && /*#__PURE__*/_react.default.createElement(Image, {
67
131
  src: story.body.image,
68
132
  alt: "src"
69
- }))), story.footer && /*#__PURE__*/_react.default.createElement(_cards.default.Footer, null, /*#__PURE__*/_react.default.createElement(Wrapper, null, story.footer))));
133
+ })), story.footer && /*#__PURE__*/_react.default.createElement(BmFeedPost.Footer, {
134
+ state: state
135
+ }, story.footer));
70
136
  };
71
137
 
72
138
  exports.BmFeedPostComments = BmFeedPostComments;
package/dist/components/ChatComponents/ChatBody/chatBody.stories.js CHANGED
@@ -44,14 +44,73 @@ var ChatBody = function ChatBody() {
44
44
  time: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm")
45
45
  },
46
46
  feedPostComments: {
47
- header: /*#__PURE__*/_react.default.createElement("p", null, "hello"),
47
+ header: /*#__PURE__*/_react.default.createElement("p", null, "Comment Reply"),
48
48
  body: {
49
- link: /*#__PURE__*/_react.default.createElement("p", null, "This is a text"),
49
+ link: /*#__PURE__*/_react.default.createElement("p", null, "This is an outbound link"),
50
50
  image: _chartImg.default
51
51
  },
52
- footer: /*#__PURE__*/_react.default.createElement("p", null, "This is a Footer")
52
+ footer: /*#__PURE__*/_react.default.createElement("p", null, "This is a Footer"),
53
+ state: 'outbound',
54
+ status: 'comment'
53
55
  }
54
- }, /*#__PURE__*/_react.default.createElement("p", null, "Inbound Text Message")), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
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, {
95
+ state: "inbound",
96
+ session: "sms",
97
+ displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
98
+ status: "sent",
99
+ sessionDetails: {
100
+ message: /*#__PURE__*/_react.default.createElement("h3", null, "Session Message"),
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'
112
+ }
113
+ }), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
55
114
  state: "inbound",
56
115
  session: "live",
57
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.3",
3
+ "version": "1.7.4",
4
4
  "private": false,
5
5
  "main": "dist/components/index.js",
6
6
  "scripts": {
package/src/App.js CHANGED
@@ -21,29 +21,86 @@ const Chat = () => {
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
53
  feedPostComments={{
34
- header: <p>hello</p>,
54
+ header: <p>Comment Reply</p>,
35
55
  body: {
36
- link: <p>This is a body</p>,
56
+ link: <p>This is an inbound link</p>,
37
57
  image,
38
58
  },
39
- footer: <p>This is a footer</p>,
59
+ footer: <p>This is a Footer</p>,
60
+ state: 'inbound',
61
+ status: 'comment',
40
62
  }}
41
- >
42
- <p>
43
- Inbound Text
44
- Messagejldkffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
45
- </p>
46
- </BmChat.Details>
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
+ />
47
104
  <BmChat.Details
48
105
  state="inbound"
49
106
  session="live"
package/src/lib/components/ChatComponents/ChatBody/FeedPostComments.js CHANGED
@@ -1,77 +1,154 @@
1
1
  import React from 'react';
2
2
  import styled from 'styled-components';
3
- import BmCard from '../../Cards/cards';
3
+ import {
4
+ BmSecondaryGreen,
5
+ BmSecondaryPurple,
6
+ BmGrey200,
7
+ BmPrimaryBlue,
8
+ BmPrimaryBlack,
9
+ BmPrimaryWhite,
10
+ BmTransparentBg30,
11
+ } from '../../colors';
4
12
 
5
- const Image = styled.img`
6
- max-width: 30%;
7
- width: 30%;
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
+ }};
8
49
  `;
9
- const LinkText = styled.div`
50
+
51
+ const MainContent = styled.div`
10
52
  display: flex;
11
- max-width: 70%;
12
- width: 70%;
13
- align-items: center;
14
- > * {
15
- word-wrap: break-word !important;
16
- word-break: break-word;
17
- }
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%;
18
70
  `;
19
71
 
20
- const Wrapper = styled.div`
72
+ const Content = styled.div`
21
73
  display: flex;
22
- flex-direction: row;
23
- word-wrap: break-word !important;
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
+ }};
24
80
  word-break: break-word;
25
81
  > * {
26
- word-wrap: break-word !important;
27
- word-break: break-word !important;
82
+ margin-bottom: 0.5rem;
83
+ word-break: break-word;
28
84
  }
29
- `;
30
-
31
- const CardWrapper = styled.div`
32
- display: flex;
33
85
  width: ${({ image }) => {
34
- if (image) return '50%';
86
+ if (image) return '75%';
35
87
  return '100%';
36
88
  }};
37
89
  max-width: ${({ image }) => {
38
- if (image) return '50%';
90
+ if (image) return '75%';
39
91
  return '100%';
40
92
  }};
41
- margin-left: ${({ state }) => {
42
- if (state) {
43
- if (state === 'inbound') return '0rem';
44
- if (state === 'outbound') return 'auto';
45
- }
46
- return '0rem';
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}`;
47
116
  }};
48
117
  `;
49
118
 
50
- export const BmFeedPostComments = ({ story, state, ...rest }) => {
119
+ export const BmFeedPostComments = ({
120
+ story,
121
+ state,
122
+ status,
123
+ image,
124
+ ...rest
125
+ }) => {
51
126
  return (
52
127
  story && (
53
- <CardWrapper
54
- state={state}
128
+ <BmFeedPost
129
+ state={story.state}
55
130
  {...rest}
56
- image={story.body && story.body.image}
131
+ status={story.status}
132
+ image={story.body.image}
133
+ story={story}
57
134
  >
58
- <BmCard state={state} {...rest}>
59
- {story.header && <BmCard.Header>{story.header}</BmCard.Header>}
60
- {story.body && (
61
- <BmCard.Body>
62
- <Wrapper>
63
- <LinkText image={story.body.image}>{story.body.link}</LinkText>
64
- {story.body.image && <Image src={story.body.image} alt="src" />}
65
- </Wrapper>
66
- </BmCard.Body>
67
- )}
68
- {story.footer && (
69
- <BmCard.Footer>
70
- <Wrapper>{story.footer}</Wrapper>
71
- </BmCard.Footer>
72
- )}
73
- </BmCard>
74
- </CardWrapper>
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>
75
152
  )
76
153
  );
77
154
  };
package/src/lib/components/ChatComponents/ChatBody/chatBody.stories.js CHANGED
@@ -28,16 +28,76 @@ export const ChatBody = () => {
28
28
  time: <p>12:00pm</p>,
29
29
  }}
30
30
  feedPostComments={{
31
- header: <p>hello</p>,
31
+ header: <p>Comment Reply</p>,
32
32
  body: {
33
- link: <p>This is a text</p>,
33
+ link: <p>This is an outbound link</p>,
34
34
  image,
35
35
  },
36
36
  footer: <p>This is a Footer</p>,
37
+ state: 'outbound',
38
+ status: 'comment',
37
39
  }}
38
- >
39
- <p>Inbound Text Message</p>
40
- </BmChat.Details>
40
+ />
41
+ <BmChat.Details
42
+ state="inbound"
43
+ session="sms"
44
+ displayTime={<p>12:00pm</p>}
45
+ status="sent"
46
+ sessionDetails={{
47
+ message: <h3>Session Message</h3>,
48
+ time: <p>12:00pm</p>,
49
+ }}
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
+ />
41
101
  <BmChat.Details
42
102
  state="inbound"
43
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)';