beem-component 1.7.3 → 1.7.6

package/dist/components/ChatComponents/ChatBody/FeedPostComments.js

@@ -9,11 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _cards = _interopRequireDefault(require("../../Cards/cards"));
+var _colors = require("../../colors");
 
-var _excluded = ["story", "state"];
+var _excluded = ["story", "state", "status", "image"];
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -25,20 +25,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Image = _styledComponents.default.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  max-width: 30%;\n  width: 30%;\n"])));
-
-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"])));
-
-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"])));
-
-var CardWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  width: ", ";\n  max-width: ", ";\n  margin-left: ", ";\n"])), function (_ref) {
+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) {
   var image = _ref.image;
-  if (image) return '50%';
-  return '100%';
+  if (image) return '15vw';
+  return '20vw';
 }, function (_ref2) {
   var image = _ref2.image;
-  if (image) return '50%';
-  return '100%';
+  if (image) return '15vw';
+  return '20vw';
 }, function (_ref3) {
   var state = _ref3.state;
 
@@ -48,25 +42,97 @@ var CardWrapper = _styledComponents.default.div(_templateObject4 || (_templateOb
   }
 
   return '0rem';
+}, function (_ref4) {
+  var state = _ref4.state;
+
+  if (state) {
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
+  }
+
+  return "".concat(_colors.BmPrimaryWhite);
+}, _colors.BmGrey200, function (_ref5) {
+  var image = _ref5.image;
+  if (image) return '10vw';
+  return '100%';
+}, function (_ref6) {
+  var image = _ref6.image;
+  if (image) return '10vw';
+  return '100%';
 });
 
-var BmFeedPostComments = function BmFeedPostComments(_ref4) {
-  var story = _ref4.story,
-      state = _ref4.state,
-      rest = _objectWithoutProperties(_ref4, _excluded);
+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) {
+  var status = _ref7.status;
 
-  return story && /*#__PURE__*/_react.default.createElement(CardWrapper, _extends({
-    state: state
+  if (status) {
+    if (status === 'comment') return "0.143rem solid ".concat(_colors.BmSecondaryGreen);
+    if (status === 'story') return "0.143rem solid ".concat(_colors.BmSecondaryPurple);
+  }
+
+  return "0.143rem solid ".concat(_colors.BmSecondaryPurple);
+}, function (_ref8) {
+  var state = _ref8.state;
+
+  if (state) {
+    if (state === 'inbound') return "".concat(_colors.BmTransparentBg30);
+    if (state === 'outbound') return "".concat(_colors.BmTransparentBg30);
+  }
+
+  return "".concat(_colors.BmTransparentBg30);
+});
+
+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) {
+  var state = _ref9.state;
+  if (state && state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
+  if (state && state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
+  return "".concat(_colors.BmPrimaryBlack);
+}, function (_ref10) {
+  var image = _ref10.image;
+  if (image) return '75%';
+  return '100%';
+}, function (_ref11) {
+  var image = _ref11.image;
+  if (image) return '75%';
+  return '100%';
+});
+
+var Image = _styledComponents.default.img(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  max-width: 25%;\n  width: 25%;\n"])));
+
+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) {
+  var state = _ref12.state;
+  if (state && state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
+  if (state && state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
+  return "".concat(_colors.BmPrimaryBlack);
+});
+
+var BmFeedPostComments = function BmFeedPostComments(_ref13) {
+  var story = _ref13.story,
+      state = _ref13.state,
+      status = _ref13.status,
+      image = _ref13.image,
+      rest = _objectWithoutProperties(_ref13, _excluded);
+
+  return story && /*#__PURE__*/_react.default.createElement(BmFeedPost, _extends({
+    state: story.state
   }, rest, {
+    status: story.status,
+    image: story.body.image,
+    story: story
+  }), /*#__PURE__*/_react.default.createElement(MainContent, _extends({
+    status: story.status,
+    state: story.state
+  }, rest), /*#__PURE__*/_react.default.createElement(Content, {
+    header: story.header,
+    body: story.body && story.body.link,
+    state: story.state,
+    status: story.status,
     image: story.body && story.body.image
-  }), /*#__PURE__*/_react.default.createElement(_cards.default, _extends({
-    state: state
-  }, 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, {
-    image: story.body.image
-  }, story.body.link), story.body.image && /*#__PURE__*/_react.default.createElement(Image, {
+  }, story.header, story.body.link), story.body.image && /*#__PURE__*/_react.default.createElement(Image, {
     src: story.body.image,
     alt: "src"
-  }))), story.footer && /*#__PURE__*/_react.default.createElement(_cards.default.Footer, null, /*#__PURE__*/_react.default.createElement(Wrapper, null, story.footer))));
+  })), story.footer && /*#__PURE__*/_react.default.createElement(BmFeedPost.Footer, {
+    state: state
+  }, story.footer));
 };
 
 exports.BmFeedPostComments = BmFeedPostComments;

package/dist/components/ChatComponents/ChatBody/chatBody.stories.js

@@ -44,14 +44,73 @@ var ChatBody = function ChatBody() {
       time: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm")
     },
     feedPostComments: {
-      header: /*#__PURE__*/_react.default.createElement("p", null, "hello"),
+      header: /*#__PURE__*/_react.default.createElement("p", null, "Comment Reply"),
       body: {
-        link: /*#__PURE__*/_react.default.createElement("p", null, "This is a text"),
+        link: /*#__PURE__*/_react.default.createElement("p", null, "This is an outbound link"),
         image: _chartImg.default
       },
-      footer: /*#__PURE__*/_react.default.createElement("p", null, "This is a Footer")
+      footer: /*#__PURE__*/_react.default.createElement("p", null, "This is a Footer"),
+      state: 'outbound',
+      status: 'comment'
     }
-  }, /*#__PURE__*/_react.default.createElement("p", null, "Inbound Text Message")), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
+  }), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
+    state: "inbound",
+    session: "sms",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
+    status: "sent",
+    sessionDetails: {
+      message: /*#__PURE__*/_react.default.createElement("h3", null, "Session Message"),
+      time: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm")
+    },
+    feedPostComments: {
+      header: /*#__PURE__*/_react.default.createElement("p", null, "Comment Reply"),
+      body: {
+        link: /*#__PURE__*/_react.default.createElement("p", null, "This is an inbound link"),
+        image: _chartImg.default
+      },
+      footer: /*#__PURE__*/_react.default.createElement("p", null, "This is a Footer"),
+      state: 'inbound',
+      status: 'comment'
+    }
+  }), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
+    state: "outbound",
+    session: "sms",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
+    status: "sent",
+    sessionDetails: {
+      message: /*#__PURE__*/_react.default.createElement("h3", null, "Session Message"),
+      time: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm")
+    },
+    feedPostComments: {
+      header: /*#__PURE__*/_react.default.createElement("p", null, "Story Reply"),
+      body: {
+        link: /*#__PURE__*/_react.default.createElement("p", null, "This is an outbound link"),
+        image: _chartImg.default
+      },
+      footer: /*#__PURE__*/_react.default.createElement("p", null, "This is a Footer"),
+      state: 'outbound',
+      status: 'story'
+    }
+  }), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
+    state: "inbound",
+    session: "sms",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
+    status: "sent",
+    sessionDetails: {
+      message: /*#__PURE__*/_react.default.createElement("h3", null, "Session Message"),
+      time: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm")
+    },
+    feedPostComments: {
+      header: /*#__PURE__*/_react.default.createElement("p", null, "Comment Reply"),
+      body: {
+        link: /*#__PURE__*/_react.default.createElement("p", null, "This is an inbound link"),
+        image: _chartImg.default
+      },
+      footer: /*#__PURE__*/_react.default.createElement("p", null, "This is a Footer"),
+      state: 'inbound',
+      status: 'story'
+    }
+  }), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
     state: "inbound",
     session: "live",
     displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),

package/dist/components/Checkbox/checkboxToggler.js

@@ -37,8 +37,9 @@ var BmCheckboxToggle = function BmCheckboxToggle(_ref2) {
   var checked = _ref2.checked,
       _onChange = _ref2.onChange,
       disabled = _ref2.disabled,
-      label = _ref2.label;
-  return /*#__PURE__*/_react.default.createElement(CheckBoxWrapper, null, /*#__PURE__*/_react.default.createElement(Label, {
+      label = _ref2.label,
+      hidden = _ref2.hidden;
+  return /*#__PURE__*/_react.default.createElement(CheckBoxWrapper, null, hidden ? null : /*#__PURE__*/_react.default.createElement(Label, {
     htmlFor: label,
     disabled: disabled
   }, label), /*#__PURE__*/_react.default.createElement(CheckBox, {

package/dist/components/Checkbox/checkboxToggler.stories.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Sample = exports.DisabledToggler = void 0;
+exports.hiddenToggleLabel = exports.default = exports.Sample = exports.DisabledToggler = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -51,6 +51,9 @@ var _default = {
     },
     disabled: {
       description: 'for disabling the checkbox toggler'
+    },
+    hidden: {
+      description: 'for hiding the label'
     }
   }
 };
@@ -89,4 +92,22 @@ var DisabledToggler = function DisabledToggler() {
   });
 };
 
-exports.DisabledToggler = DisabledToggler;
+exports.DisabledToggler = DisabledToggler;
+
+var hiddenToggleLabel = function hiddenToggleLabel() {
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      checked = _useState6[0],
+      setChecked = _useState6[1];
+
+  return /*#__PURE__*/_react.default.createElement(_checkboxToggler.BmCheckboxToggle, {
+    hidden: true,
+    checked: checked,
+    onChange: function onChange() {
+      return setChecked(!checked);
+    },
+    label: /*#__PURE__*/_react.default.createElement("h4", null, "Field Label")
+  });
+};
+
+exports.hiddenToggleLabel = hiddenToggleLabel;

package/dist/components/colors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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;
+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;
 // Primary Colors
 var BmPrimaryBlue = '#33B1BA';
 exports.BmPrimaryBlue = BmPrimaryBlue;
@@ -66,5 +66,10 @@ var BmGrey50 = '#F6F6F6'; // Pictogram Colors
 exports.BmGrey50 = BmGrey50;
 var BmPictogramBlue = '#CCEAEB';
 exports.BmPictogramBlue = BmPictogramBlue;
-var BmPictogramGold = '#F8D8A2';
-exports.BmPictogramGold = BmPictogramGold;
+var BmPictogramGold = '#F8D8A2'; // Transparent Background
+
+exports.BmPictogramGold = BmPictogramGold;
+var BmTransparentBg30 = 'rgba(217, 217, 217, 0.3)';
+exports.BmTransparentBg30 = BmTransparentBg30;
+var BmTransparentBg60 = 'rgba(217, 217, 217, 0.6)';
+exports.BmTransparentBg60 = BmTransparentBg60;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "beem-component",
-    "version": "1.7.3",
+    "version": "1.7.6",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {

package/src/App.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import AttachFileIcon from '@mui/icons-material/AttachFile';
 import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions';
 import SendIcon from '@mui/icons-material/Send';
 import QuickreplyIcon from '@mui/icons-material/Quickreply';
+import { BmCheckboxToggle } from './lib/components';
 import {
   BmChat,
   BmInput,
@@ -13,6 +14,9 @@ import {
 } from './lib/components';
 
 const Chat = () => {
+  const [test, setTest] = useState(false);
+  const [test1, setTest1] = useState(false);
+
   const image =
     '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';
   return (
@@ -21,29 +25,86 @@ const Chat = () => {
       <BmProfileIcon channel="google_business_messaging" />
       <BmChat>
         <BmChat.Body>
+          <BmChat.Details
+            state="outbound"
+            session="sms"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            sessionDetails={{
+              message: <h3>Session Message</h3>,
+              time: <p>12:00pm</p>,
+            }}
+            feedPostComments={{
+              header: <p>Comment Reply</p>,
+              body: {
+                link: <p>This is an outbound link</p>,
+                image,
+              },
+              footer: <p>This is a Footer</p>,
+              state: 'outbound',
+              status: 'comment',
+            }}
+          />
           <BmChat.Details
             state="inbound"
             session="sms"
             displayTime={<p>12:00pm</p>}
             status="sent"
-            sessionTimeline={{
-              message: <p>2022-07-28</p>,
-              // time: <p>12:00pm</p>,
+            sessionDetails={{
+              message: <h3>Session Message</h3>,
+              time: <p>12:00pm</p>,
             }}
             feedPostComments={{
-              header: <p>hello</p>,
+              header: <p>Comment Reply</p>,
               body: {
-                link: <p>This is a body</p>,
+                link: <p>This is an inbound link</p>,
                 image,
               },
-              footer: <p>This is a footer</p>,
+              footer: <p>This is a Footer</p>,
+              state: 'inbound',
+              status: 'comment',
             }}
-          >
-            <p>
-              Inbound Text
-              Messagejldkffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
-            </p>
-          </BmChat.Details>
+          />
+          <BmChat.Details
+            state="outbound"
+            session="sms"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            sessionDetails={{
+              message: <h3>Session Message</h3>,
+              time: <p>12:00pm</p>,
+            }}
+            feedPostComments={{
+              header: <p>Story Reply</p>,
+              body: {
+                link: <p>This is an outbound link</p>,
+                image,
+              },
+              footer: <p>This is a Footer</p>,
+              state: 'outbound',
+              status: 'story',
+            }}
+          />
+          <BmChat.Details
+            state="inbound"
+            session="sms"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            sessionDetails={{
+              message: <h3>Session Message</h3>,
+              time: <p>12:00pm</p>,
+            }}
+            feedPostComments={{
+              header: <p>Story Reply</p>,
+              body: {
+                link: <p>This is an inbound link</p>,
+                image,
+              },
+              footer: <p>This is a Footer</p>,
+              state: 'inbound',
+              status: 'story',
+            }}
+          />
           <BmChat.Details
             state="inbound"
             session="live"
@@ -103,6 +164,24 @@ const Chat = () => {
           </div>
         </BmChat.Footer>
       </BmChat>
+
+      <BmCheckboxToggle
+        key="test"
+        checked={test}
+        onChange={(check) => {
+          console.log(check);
+          setTest(check)
+        }}
+      />
+
+      <BmCheckboxToggle
+        key="test1"
+        checked={test1}
+        onChange={(check) => {
+          console.log(check);
+          setTest(check)
+        }}
+      />
     </>
   );
 };

package/src/lib/components/ChatComponents/ChatBody/FeedPostComments.js

@@ -1,77 +1,154 @@
 import React from 'react';
 import styled from 'styled-components';
-import BmCard from '../../Cards/cards';
+import {
+  BmSecondaryGreen,
+  BmSecondaryPurple,
+  BmGrey200,
+  BmPrimaryBlue,
+  BmPrimaryBlack,
+  BmPrimaryWhite,
+  BmTransparentBg30,
+} from '../../colors';
 
-const Image = styled.img`
-  max-width: 30%;
-  width: 30%;
+const BmFeedPost = styled.div`
+  display: inline-block;
+  flex-direction: column;
+  padding: 0.5rem;
+  width: ${({ image }) => {
+    if (image) return '15vw';
+    return '20vw';
+  }};
+  max-width: ${({ image }) => {
+    if (image) return '15vw';
+    return '20vw';
+  }};
+  margin-left: ${({ state }) => {
+    if (state) {
+      if (state === 'inbound') return '0rem';
+      if (state === 'outbound') return 'auto';
+    }
+    return '0rem';
+  }};
+  background-color: ${({ state }) => {
+    if (state) {
+      if (state === 'inbound') return `${BmPrimaryWhite}`;
+      if (state === 'outbound') return `${BmPrimaryBlue}`;
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+  border: 0.071rem solid ${BmGrey200};
+  border-radius: 0.25rem;
+  max-height: ${({ image }) => {
+    if (image) return '10vw';
+    return '100%';
+  }};
+  height: ${({ image }) => {
+    if (image) return '10vw';
+    return '100%';
+  }};
 `;
-const LinkText = styled.div`
+
+const MainContent = styled.div`
   display: flex;
-  max-width: 70%;
-  width: 70%;
-  align-items: center;
-  > * {
-    word-wrap: break-word !important;
-    word-break: break-word;
-  }
+  flex-direction: row;
+  border-left: ${({ status }) => {
+    if (status) {
+      if (status === 'comment') return `0.143rem solid ${BmSecondaryGreen}`;
+      if (status === 'story') return `0.143rem solid ${BmSecondaryPurple}`;
+    }
+    return `0.143rem solid ${BmSecondaryPurple}`;
+  }};
+  background-color: ${({ state }) => {
+    if (state) {
+      if (state === 'inbound') return `${BmTransparentBg30}`;
+      if (state === 'outbound') return `${BmTransparentBg30}`;
+    }
+    return `${BmTransparentBg30}`;
+  }};
+  max-height: 80%;
+  height: 80%;
 `;
 
-const Wrapper = styled.div`
+const Content = styled.div`
   display: flex;
-  flex-direction: row;
-  word-wrap: break-word !important;
+  flex-direction: column;
+  color: ${({ state }) => {
+    if (state && state === 'inbound') return `${BmPrimaryBlack}`;
+    if (state && state === 'outbound') return `${BmPrimaryWhite}`;
+    return `${BmPrimaryBlack}`;
+  }};
   word-break: break-word;
   > * {
-    word-wrap: break-word !important;
-    word-break: break-word !important;
+    margin-bottom: 0.5rem;
+    word-break: break-word;
   }
-`;
-
-const CardWrapper = styled.div`
-  display: flex;
   width: ${({ image }) => {
-    if (image) return '50%';
+    if (image) return '75%';
     return '100%';
   }};
   max-width: ${({ image }) => {
-    if (image) return '50%';
+    if (image) return '75%';
     return '100%';
   }};
-  margin-left: ${({ state }) => {
-    if (state) {
-      if (state === 'inbound') return '0rem';
-      if (state === 'outbound') return 'auto';
-    }
-    return '0rem';
+  padding: 0.5rem;
+`;
+
+const Image = styled.img`
+  max-width: 25%;
+  width: 25%;
+`;
+
+BmFeedPost.Footer = styled.div`
+  display: flex;
+  flex-direction: row;
+  word-break: break-word;
+  > * {
+    word-break: break-word !important;
+  }
+  align-items: center;
+  margin-top: 0.5rem;
+  max-height: 20%;
+  height: 20%;
+  color: ${({ state }) => {
+    if (state && state === 'inbound') return `${BmPrimaryBlack}`;
+    if (state && state === 'outbound') return `${BmPrimaryWhite}`;
+    return `${BmPrimaryBlack}`;
   }};
 `;
 
-export const BmFeedPostComments = ({ story, state, ...rest }) => {
+export const BmFeedPostComments = ({
+  story,
+  state,
+  status,
+  image,
+  ...rest
+}) => {
   return (
     story && (
-      <CardWrapper
-        state={state}
+      <BmFeedPost
+        state={story.state}
         {...rest}
-        image={story.body && story.body.image}
+        status={story.status}
+        image={story.body.image}
+        story={story}
       >
-        <BmCard state={state} {...rest}>
-          {story.header && <BmCard.Header>{story.header}</BmCard.Header>}
-          {story.body && (
-            <BmCard.Body>
-              <Wrapper>
-                <LinkText image={story.body.image}>{story.body.link}</LinkText>
-                {story.body.image && <Image src={story.body.image} alt="src" />}
-              </Wrapper>
-            </BmCard.Body>
-          )}
-          {story.footer && (
-            <BmCard.Footer>
-              <Wrapper>{story.footer}</Wrapper>
-            </BmCard.Footer>
-          )}
-        </BmCard>
-      </CardWrapper>
+        <MainContent status={story.status} state={story.state} {...rest}>
+          <Content
+            header={story.header}
+            body={story.body && story.body.link}
+            state={story.state}
+            status={story.status}
+            image={story.body && story.body.image}
+          >
+            {story.header}
+            {story.body.link}
+          </Content>
+          {story.body.image && <Image src={story.body.image} alt="src" />}
+        </MainContent>
+        {story.footer && (
+          <BmFeedPost.Footer state={state}>{story.footer}</BmFeedPost.Footer>
+        )}
+      </BmFeedPost>
     )
   );
 };

package/src/lib/components/ChatComponents/ChatBody/chatBody.stories.js

@@ -28,16 +28,76 @@ export const ChatBody = () => {
             time: <p>12:00pm</p>,
           }}
           feedPostComments={{
-            header: <p>hello</p>,
+            header: <p>Comment Reply</p>,
             body: {
-              link: <p>This is a text</p>,
+              link: <p>This is an outbound link</p>,
               image,
             },
             footer: <p>This is a Footer</p>,
+            state: 'outbound',
+            status: 'comment',
           }}
-        >
-          <p>Inbound Text Message</p>
-        </BmChat.Details>
+        />
+        <BmChat.Details
+          state="inbound"
+          session="sms"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+          sessionDetails={{
+            message: <h3>Session Message</h3>,
+            time: <p>12:00pm</p>,
+          }}
+          feedPostComments={{
+            header: <p>Comment Reply</p>,
+            body: {
+              link: <p>This is an inbound link</p>,
+              image,
+            },
+            footer: <p>This is a Footer</p>,
+            state: 'inbound',
+            status: 'comment',
+          }}
+        />
+        <BmChat.Details
+          state="outbound"
+          session="sms"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+          sessionDetails={{
+            message: <h3>Session Message</h3>,
+            time: <p>12:00pm</p>,
+          }}
+          feedPostComments={{
+            header: <p>Story Reply</p>,
+            body: {
+              link: <p>This is an outbound link</p>,
+              image,
+            },
+            footer: <p>This is a Footer</p>,
+            state: 'outbound',
+            status: 'story',
+          }}
+        />
+        <BmChat.Details
+          state="inbound"
+          session="sms"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+          sessionDetails={{
+            message: <h3>Session Message</h3>,
+            time: <p>12:00pm</p>,
+          }}
+          feedPostComments={{
+            header: <p>Comment Reply</p>,
+            body: {
+              link: <p>This is an inbound link</p>,
+              image,
+            },
+            footer: <p>This is a Footer</p>,
+            state: 'inbound',
+            status: 'story',
+          }}
+        />
         <BmChat.Details
           state="inbound"
           session="live"

package/src/lib/components/Checkbox/checkboxToggler.js

@@ -63,12 +63,21 @@ const CheckBox = styled.input`
   }
 `;
 
-export const BmCheckboxToggle = ({ checked, onChange, disabled, label }) => {
+export const BmCheckboxToggle = ({
+  checked,
+  onChange,
+  disabled,
+  label,
+  hidden,
+}) => {
   return (
     <CheckBoxWrapper>
-      <Label htmlFor={label} disabled={disabled}>
-        {label}
-      </Label>
+      {hidden ? null : (
+        <Label htmlFor={label} disabled={disabled}>
+          {label}
+        </Label>
+      )}
+
       <CheckBox
         id={label || 'checkbox'}
         type="checkbox"

package/src/lib/components/Checkbox/checkboxToggler.stories.js

@@ -22,6 +22,9 @@ export default {
     disabled: {
       description: 'for disabling the checkbox toggler',
     },
+    hidden: {
+      description: 'for hiding the label',
+    },
   },
 };
 export const Sample = () => {
@@ -46,3 +49,16 @@ export const DisabledToggler = () => {
     />
   );
 };
+
+export const hiddenToggleLabel = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <BmCheckboxToggle
+      hidden
+      checked={checked}
+      onChange={() => setChecked(!checked)}
+      label={<h4>Field Label</h4>}
+    />
+  );
+};
+

package/src/lib/components/colors.js

@@ -61,3 +61,8 @@ export const BmGrey50 = '#F6F6F6';
 export const BmPictogramBlue = '#CCEAEB';
 
 export const BmPictogramGold = '#F8D8A2';
+
+// Transparent Background
+export const BmTransparentBg30 = 'rgba(217, 217, 217, 0.3)';
+
+export const BmTransparentBg60 = 'rgba(217, 217, 217, 0.6)';