beem-component 1.7.2 → 1.7.5

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 +99 -21
  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 +68 -7
  6. package/src/lib/components/ChatComponents/ChatBody/FeedPostComments.js +130 -43
  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,14 +25,16 @@ 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: 50%;\n max-width: 50%;\n margin-left: ", ";\n"])), function (_ref) {
35
- var state = _ref.state;
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;
36
38
 
37
39
  if (state) {
38
40
  if (state === 'inbound') return '0rem';
@@ -40,21 +42,97 @@ var CardWrapper = _styledComponents.default.div(_templateObject4 || (_templateOb
40
42
  }
41
43
 
42
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%';
43
62
  });
44
63
 
45
- var BmFeedPostComments = function BmFeedPostComments(_ref2) {
46
- var story = _ref2.story,
47
- state = _ref2.state,
48
- rest = _objectWithoutProperties(_ref2, _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;
49
66
 
50
- return story && /*#__PURE__*/_react.default.createElement(CardWrapper, _extends({
51
- state: state
52
- }, rest), /*#__PURE__*/_react.default.createElement(_cards.default, _extends({
53
- state: state
54
- }, 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, null, story.body.link), story.body.image && /*#__PURE__*/_react.default.createElement(Image, {
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.143rem 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, {
55
131
  src: story.body.image,
56
132
  alt: "src"
57
- }))), 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));
58
136
  };
59
137
 
60
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.2",
3
+ "version": "1.7.5",
4
4
  "private": false,
5
5
  "main": "dist/components/index.js",
6
6
  "scripts": {
package/src/App.js CHANGED
@@ -26,20 +26,81 @@ const Chat = () => {
26
26
  session="sms"
27
27
  displayTime={<p>12:00pm</p>}
28
28
  status="sent"
29
- sessionTimeline={{
30
- message: <p>2022-07-28</p>,
31
- // time: <p>12:00pm</p>,
29
+ sessionDetails={{
30
+ message: <h3>Session Message</h3>,
31
+ time: <p>12:00pm</p>,
32
32
  }}
33
33
  feedPostComments={{
34
- header: <p>hello</p>,
34
+ header: <p>Comment Reply</p>,
35
35
  body: {
36
- link: <p>This is a body</p>,
36
+ link: <p>This is an outbound link</p>,
37
37
  image,
38
38
  },
39
- footer: <p>This is a footer</p>,
39
+ footer: <p>This is a Footer</p>,
40
+ state: 'outbound',
41
+ status: 'comment',
42
+ }}
43
+ />
44
+ <BmChat.Details
45
+ state="inbound"
46
+ session="sms"
47
+ displayTime={<p>12:00pm</p>}
48
+ status="sent"
49
+ sessionDetails={{
50
+ message: <h3>Session Message</h3>,
51
+ time: <p>12:00pm</p>,
52
+ }}
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',
40
102
  }}
41
103
  />
42
-
43
104
  <BmChat.Details
44
105
  state="inbound"
45
106
  session="live"
package/src/lib/components/ChatComponents/ChatBody/FeedPostComments.js CHANGED
@@ -1,67 +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;
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.143rem 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;
14
81
  > * {
15
- word-wrap: break-word !important;
82
+ margin-bottom: 0.5rem;
16
83
  word-break: break-word;
17
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%;
18
99
  `;
19
100
 
20
- const Wrapper = styled.div`
101
+ BmFeedPost.Footer = styled.div`
21
102
  display: flex;
22
103
  flex-direction: row;
23
- word-wrap: break-word !important;
24
104
  word-break: break-word;
25
105
  > * {
26
- word-wrap: break-word !important;
27
106
  word-break: break-word !important;
28
107
  }
29
- `;
30
-
31
- const CardWrapper = styled.div`
32
- display: flex;
33
- width: 50%;
34
- max-width: 50%;
35
- margin-left: ${({ state }) => {
36
- if (state) {
37
- if (state === 'inbound') return '0rem';
38
- if (state === 'outbound') return 'auto';
39
- }
40
- return '0rem';
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}`;
41
116
  }};
42
117
  `;
43
118
 
44
- export const BmFeedPostComments = ({ story, state, ...rest }) => {
119
+ export const BmFeedPostComments = ({
120
+ story,
121
+ state,
122
+ status,
123
+ image,
124
+ ...rest
125
+ }) => {
45
126
  return (
46
127
  story && (
47
- <CardWrapper state={state} {...rest}>
48
- <BmCard state={state} {...rest}>
49
- {story.header && <BmCard.Header>{story.header}</BmCard.Header>}
50
- {story.body && (
51
- <BmCard.Body>
52
- <Wrapper>
53
- <LinkText>{story.body.link}</LinkText>
54
- {story.body.image && <Image src={story.body.image} alt="src" />}
55
- </Wrapper>
56
- </BmCard.Body>
57
- )}
58
- {story.footer && (
59
- <BmCard.Footer>
60
- <Wrapper>{story.footer}</Wrapper>
61
- </BmCard.Footer>
62
- )}
63
- </BmCard>
64
- </CardWrapper>
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>
65
152
  )
66
153
  );
67
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)';