beem-component 1.7.5 → 1.7.8

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

@@ -264,12 +264,7 @@ BmChat.Details = function (_ref15) {
       feedPostComments = _ref15.feedPostComments,
       rest = _objectWithoutProperties(_ref15, _excluded3);
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sessionTimeline && /*#__PURE__*/_react.default.createElement(_sessionTimeline.SessionTimeline, _extends({
-    message: sessionTimeline.message
-  }, rest)), sessionDetails && /*#__PURE__*/_react.default.createElement(_sessionDetails.SessionDetails, _extends({
-    time: sessionDetails.time,
-    message: sessionDetails.message
-  }, rest)), /*#__PURE__*/_react.default.createElement(Details, _extends({
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Details, _extends({
     state: state
   }, rest), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'inbound' && session && handleState({
     state: state,
@@ -302,7 +297,12 @@ BmChat.Details = function (_ref15) {
   }))), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'outbound' && session && handleState({
     state: state,
     session: session
-  }))));
+  }))), sessionTimeline && /*#__PURE__*/_react.default.createElement(_sessionTimeline.SessionTimeline, _extends({
+    message: sessionTimeline.message
+  }, rest)), sessionDetails && /*#__PURE__*/_react.default.createElement(_sessionDetails.SessionDetails, _extends({
+    time: sessionDetails.time,
+    message: sessionDetails.message
+  }, rest)));
 };
 
 BmChat.Footer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0.5rem 0.5rem;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n"])));

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

@@ -58,6 +58,9 @@ var ChatBody = function ChatBody() {
     session: "sms",
     displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
     status: "sent",
+    sessionTimeline: {
+      message: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm")
+    },
     sessionDetails: {
       message: /*#__PURE__*/_react.default.createElement("h3", null, "Session Message"),
       time: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm")

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

@@ -25,7 +25,7 @@ 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 SessionTimelineWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n"])));
+var SessionTimelineWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  margin-bottom: 0.5rem;\n  margin-top: 0.5rem;\n"])));
 
 var container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: 0.714rem 0.714rem 0.714rem 0.714rem;\n  border: 0.071rem solid ", ";\n  padding: 0.5rem;\n  background-color: ", ";\n"])), _colors.BmBgGreyBlue, _colors.BmSecondaryBlue12);
 

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/package.json

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

package/src/App.js

@@ -10,9 +10,18 @@ import {
   BmIcons,
   GlobalStyle,
   BmProfileIcon,
+  BmContactCard,
+  BmTag,
+  BmCounter,
+  BmAvatar,
+
+  // BmCheckboxToggle,
 } 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 (
@@ -22,14 +31,15 @@ const Chat = () => {
       <BmChat>
         <BmChat.Body>
           <BmChat.Details
-            state="outbound"
+            state="inbound"
             session="sms"
             displayTime={<p>12:00pm</p>}
             status="sent"
-            sessionDetails={{
-              message: <h3>Session Message</h3>,
-              time: <p>12:00pm</p>,
-            }}
+            sessionTimeline={{ message: <p>12:00pm</p> }}
+            // sessionDetails={{
+            //   message: <h3>Session Message</h3>,
+            //   time: <p>12:00pm</p>,
+            // }}
             feedPostComments={{
               header: <p>Comment Reply</p>,
               body: {
@@ -37,15 +47,25 @@ const Chat = () => {
                 image,
               },
               footer: <p>This is a Footer</p>,
-              state: 'outbound',
+              state: 'inbound',
               status: 'comment',
             }}
           />
           <BmChat.Details
+            state="inbound"
+            session="live"
+            displayTime={<p>10:00am</p>}
+            sessionTimeline={{ message: <p>12:00pm</p> }}
+            status="failed"
+            fileName={<p>file.csv</p>}
+            file={image}
+          />
+          {/* <BmChat.Details
             state="inbound"
             session="sms"
             displayTime={<p>12:00pm</p>}
             status="sent"
+            sessionTimeline={{ message: <p>12:00pm</p> }}
             sessionDetails={{
               message: <h3>Session Message</h3>,
               time: <p>12:00pm</p>,
@@ -66,6 +86,7 @@ const Chat = () => {
             session="sms"
             displayTime={<p>12:00pm</p>}
             status="sent"
+            sessionTimeline={{ message: <p>12:00pm</p> }}
             sessionDetails={{
               message: <h3>Session Message</h3>,
               time: <p>12:00pm</p>,
@@ -86,6 +107,7 @@ const Chat = () => {
             session="sms"
             displayTime={<p>12:00pm</p>}
             status="sent"
+            sessionTimeline={{ message: <p>12:00pm</p> }}
             sessionDetails={{
               message: <h3>Session Message</h3>,
               time: <p>12:00pm</p>,
@@ -106,6 +128,7 @@ const Chat = () => {
             session="live"
             displayTime={<p>12:00pm</p>}
             status="sent"
+            sessionTimeline={{ message: <p>12:00pm</p> }}
             fileName={<p>chat.png</p>}
             src={image}
             sessionDetails={{
@@ -117,6 +140,7 @@ const Chat = () => {
             state="inbound"
             session="live"
             displayTime={<p>10:00am</p>}
+            sessionTimeline={{ message: <p>12:00pm</p> }}
             status="failed"
             fileName={<p>file.csv</p>}
             file={image}
@@ -124,6 +148,7 @@ const Chat = () => {
           <BmChat.Details
             state="outbound"
             session="bot"
+            sessionTimeline={{ message: <p>12:00pm</p> }}
             displayTime={<p>12:00pm</p>}
             status="sent"
           >
@@ -132,6 +157,7 @@ const Chat = () => {
           <BmChat.Details
             state="outbound"
             session="live"
+            sessionTimeline={{ message: <p>12:00pm</p> }}
             displayTime={<p>12:00pm</p>}
             status="sent"
             fileName={<p>chat.png</p>}
@@ -143,12 +169,13 @@ const Chat = () => {
             displayTime={<p>10:00am</p>}
             status="failed"
             fileName={<p>file.csv</p>}
+            sessionTimeline={{ message: <p>12:00pm</p> }}
             file={image}
             link={image}
             onDownload={() => {
               alert('hello');
             }}
-          />
+          /> */}
         </BmChat.Body>
         <BmChat.Footer>
           <div className="chat-footer">
@@ -160,6 +187,48 @@ 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);
+        }}
+
+        
+      /> */}
+
+      <BmContactCard>
+        <BmContactCard.Profile>
+          <BmAvatar user="chatbot" size="medium" />
+        </BmContactCard.Profile>
+        <BmContactCard.Details>
+          <BmContactCard.SubDetails>
+            <h3>Contact Names</h3>
+          </BmContactCard.SubDetails>
+          <BmContactCard.SubDetails>
+            <p>
+              Message ijofdsg fogijfdogi odfigj ofdigj fdoigj odfigj ofdigj
+              odfigj ofdigj ofdijg dofigj dfoig jodfigj text
+            </p>
+            <BmCounter>10</BmCounter>
+          </BmContactCard.SubDetails>
+          <BmContactCard.SubDetails>
+            <BmTag variant="success">label</BmTag>
+            <p>10:00 am</p>
+          </BmContactCard.SubDetails>
+        </BmContactCard.Details>
+      </BmContactCard>
     </>
   );
 };

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

@@ -265,16 +265,6 @@ BmChat.Details = ({
 }) => {
   return (
     <>
-      {sessionTimeline && (
-        <SessionTimeline message={sessionTimeline.message} {...rest} />
-      )}
-      {sessionDetails && (
-        <SessionDetails
-          time={sessionDetails.time}
-          message={sessionDetails.message}
-          {...rest}
-        />
-      )}
       <Details state={state} {...rest}>
         {/* Adding for mobile */}
         <MessageState>
@@ -330,6 +320,17 @@ BmChat.Details = ({
           {state === 'outbound' && session && handleState({ state, session })}
         </MessageState>
       </Details>
+
+      {sessionTimeline && (
+        <SessionTimeline message={sessionTimeline.message} {...rest} />
+      )}
+      {sessionDetails && (
+        <SessionDetails
+          time={sessionDetails.time}
+          message={sessionDetails.message}
+          {...rest}
+        />
+      )}
     </>
   );
 };

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

@@ -43,6 +43,7 @@ export const ChatBody = () => {
           session="sms"
           displayTime={<p>12:00pm</p>}
           status="sent"
+          sessionTimeline={{ message: <p>12:00pm</p> }}
           sessionDetails={{
             message: <h3>Session Message</h3>,
             time: <p>12:00pm</p>,

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

@@ -8,6 +8,8 @@ const SessionTimelineWrapper = styled.div`
   justify-content: center;
   align-items: center;
   text-align: center;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
 `;
 
 const container = styled.div`

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>}
+    />
+  );
+};
+