beem-component 1.1.1 → 1.1.5

package/dist/assets/css/sidebar.css

@@ -77,4 +77,24 @@
     overflow: auto;
     width: 25%;
     border: 1px solid #E2E2E2;
+}
+
+.chat-header-buttons {
+    display: flex;
+    flex-direction: row;
+    margin-left: auto;
+}
+
+.chat-header-buttons>*:not(:last-child) {
+    margin-right: 0.5rem;
+}
+
+.chat-footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.chat-footer>*:not(:last-child) {
+    margin-right: 0.5rem;
 }

package/dist/components/ChatBody/chatBody.js

@@ -133,8 +133,12 @@ BmChat.Details = function (_ref6) {
   }));
 };
 
-BmChat.Footer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  border-top: 0.071rem solid ", ";\n  padding: 0.5rem 0rem;\n  align-items: center;\n  justify-content: center;\n  ", "\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n"])), _colors.BmGrey400, ''
-/* background: ${BmGrey50}; */
+BmChat.Footer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ", "\n  padding: 0.5rem 0.5rem;\n  ", "\n  ", "\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n"])), ''
+/* border-top: 0.071rem solid ${BmGrey200}; */
+, ''
+/* align-items: center; */
+, ''
+/* justify-content: center; */
 );
 var _default = BmChat;
 exports.default = _default;

package/dist/components/ChatHeader/chatHeader.js

@@ -14,7 +14,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 // import { BmGrey400 } from "../colors";
-var BmChatHeader = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  ", "\n  padding: 1rem;\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n  button {\n    margin-left: auto;\n  }\n"])), ''
+var BmChatHeader = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  ", "\n  padding: 1rem;\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n"])), ""
 /* border: 0.071rem solid ${BmGrey400}; */
 );
 

package/dist/components/Forms/forms.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var BmForm = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n"])));
+
+BmForm.Label = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0rem;\n  text-align: left;\n  width: 50%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+BmForm.Input = _styledComponents.default.input(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  text-align: right;\n  width: 50%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border: none;\n  &:visited,\n  &:active,\n  &:hover,\n  &:focus {\n    outline: none !important;\n    text-decoration: none;\n  }\n  background: transparent;\n"])));
+var _default = BmForm;
+exports.default = _default;

package/dist/components/index.js

@@ -84,6 +84,24 @@ Object.defineProperty(exports, "BmContactCard", {
     return _contactCards.default;
   }
 });
+Object.defineProperty(exports, "BmContent", {
+  enumerable: true,
+  get: function get() {
+    return _index.BmContent;
+  }
+});
+Object.defineProperty(exports, "BmContentFooter", {
+  enumerable: true,
+  get: function get() {
+    return _index2.BmContentFooter;
+  }
+});
+Object.defineProperty(exports, "BmContentTitle", {
+  enumerable: true,
+  get: function get() {
+    return _index2.BmContentTitle;
+  }
+});
 Object.defineProperty(exports, "BmCounter", {
   enumerable: true,
   get: function get() {
@@ -96,6 +114,24 @@ Object.defineProperty(exports, "BmEmojiIcon", {
     return _iconStyles.BmEmojiIcon;
   }
 });
+Object.defineProperty(exports, "BmFooterLeft", {
+  enumerable: true,
+  get: function get() {
+    return _index2.BmFooterLeft;
+  }
+});
+Object.defineProperty(exports, "BmFooterRight", {
+  enumerable: true,
+  get: function get() {
+    return _index2.BmFooterRight;
+  }
+});
+Object.defineProperty(exports, "BmForm", {
+  enumerable: true,
+  get: function get() {
+    return _forms.default;
+  }
+});
 Object.defineProperty(exports, "BmIcons", {
   enumerable: true,
   get: function get() {
@@ -168,6 +204,48 @@ Object.defineProperty(exports, "BmRowLabel", {
     return _rowLabels.BmRowLabel;
   }
 });
+Object.defineProperty(exports, "BmSegment", {
+  enumerable: true,
+  get: function get() {
+    return _index3.BmSegment;
+  }
+});
+Object.defineProperty(exports, "BmSegmentCard", {
+  enumerable: true,
+  get: function get() {
+    return _index3.BmSegmentCard;
+  }
+});
+Object.defineProperty(exports, "BmSegmentCheckBox", {
+  enumerable: true,
+  get: function get() {
+    return _index3.BmSegmentCheckBox;
+  }
+});
+Object.defineProperty(exports, "BmSegmentCompleteContent", {
+  enumerable: true,
+  get: function get() {
+    return _index3.BmSegmentCompleteContent;
+  }
+});
+Object.defineProperty(exports, "BmSegmentCompleteIcon", {
+  enumerable: true,
+  get: function get() {
+    return _index3.BmSegmentCompleteIcon;
+  }
+});
+Object.defineProperty(exports, "BmSegmentCreateContent", {
+  enumerable: true,
+  get: function get() {
+    return _index3.BmSegmentCreateContent;
+  }
+});
+Object.defineProperty(exports, "BmSegmentSelector", {
+  enumerable: true,
+  get: function get() {
+    return _index3.BmSegmentSelector;
+  }
+});
 Object.defineProperty(exports, "BmSupport", {
   enumerable: true,
   get: function get() {
@@ -269,6 +347,14 @@ var _infoTab = _interopRequireDefault(require("./InfoTab/infoTab"));
 
 var _messageCounter = _interopRequireDefault(require("./MessageCounter/messageCounter"));
 
+var _forms = _interopRequireDefault(require("./Forms/forms"));
+
+var _index = require("./SuperFluid/Content/index");
+
+var _index2 = require("./SuperFluid/ContentTitle.js/index.js");
+
+var _index3 = require("./SuperFluid/SegmentCard/index");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/dist/components/input.js

@@ -15,8 +15,6 @@ var _ = require(".");
 
 var _colors = require("./colors");
 
-var _iconStyles = require("./iconStyles");
-
 var _excluded = ["id", "iconSize", "label", "state"];
 
 var _templateObject, _templateObject2, _templateObject3;

package/package.json

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

package/src/App.js

@@ -9,14 +9,23 @@ import Chat from "./Chat";
 import CustomerInfo from "./CustomerInfo";
 import { BmTag } from "./lib/components/Tags/tags";
 import { Home } from "@material-ui/icons";
+import InfoAccordion from "./InfoAccordion";
+import BmForm from "./lib/components/Forms/forms";
 
 export const App = () => {
   return (
     <>
       <GlobalStyle />
       <MainWrapper>
-        <BmTag leadingIcon={<Home/>} trailingIcon={<Home/>}><p>Hello</p></BmTag>
-
+        <BmTag leadingIcon={<Home />} trailingIcon={<Home />}>
+          <p>Hello</p>
+        </BmTag>
+        <BmForm>
+          <BmForm.Label>
+            <h4>Hello</h4>
+          </BmForm.Label>
+          <BmForm.Input placeholder="Hello" />
+        </BmForm>
         <div className="main-chat-container">
           <div className="sidebar">
             <SideBar />
@@ -29,6 +38,7 @@ export const App = () => {
               </div>
               <div className="chat-contact-info">
                 <CustomerInfo />
+                <InfoAccordion />
               </div>
             </div>
           </div>

package/src/Chat.js

@@ -1,14 +1,15 @@
-import React from 'react';
-import { AttachFile } from '@material-ui/icons';
-import EmojiEmotionsIcon from '@material-ui/icons/EmojiEmotions';
-import QuickreplyIcon from '@mui/icons-material/Quickreply';
-import SendIcon from '@mui/icons-material/Send';
-import { BmChat, BmIcons, BmInput } from './lib/components';
+import React from "react";
+import { AttachFile } from "@material-ui/icons";
+import EmojiEmotionsIcon from "@material-ui/icons/EmojiEmotions";
+import QuickreplyIcon from "@mui/icons-material/Quickreply";
+import SendIcon from "@mui/icons-material/Send";
+import { BmChat, BmIcons, BmInput } from "./lib/components";
+import "../src/lib/assets/css/sidebar.css";
 
 const Chat = () => {
   return (
     <BmChat>
-      <BmChat.Body style={{ flex: 1 }}>
+      <BmChat.Body>
         <BmChat.Details
           state="inbound"
           session="bot"
@@ -48,7 +49,7 @@ const Chat = () => {
           status="failed"
         >
           <p>Outbound</p>
-        </BmChat.Details>{' '}
+        </BmChat.Details>{" "}
         <BmChat.Details
           state="outbound"
           session="live"
@@ -56,7 +57,7 @@ const Chat = () => {
           status="failed"
         >
           <p>Outbound</p>
-        </BmChat.Details>{' '}
+        </BmChat.Details>{" "}
         <BmChat.Details
           state="outbound"
           session="live"
@@ -64,7 +65,7 @@ const Chat = () => {
           status="failed"
         >
           <p>Outbound</p>
-        </BmChat.Details>{' '}
+        </BmChat.Details>{" "}
         <BmChat.Details
           state="outbound"
           session="live"
@@ -72,7 +73,7 @@ const Chat = () => {
           status="failed"
         >
           <p>Outbound</p>
-        </BmChat.Details>{' '}
+        </BmChat.Details>{" "}
         <BmChat.Details
           state="outbound"
           session="live"
@@ -80,7 +81,7 @@ const Chat = () => {
           status="failed"
         >
           <p>Outbound</p>
-        </BmChat.Details>{' '}
+        </BmChat.Details>{" "}
         <BmChat.Details
           state="outbound"
           session="live"
@@ -88,7 +89,7 @@ const Chat = () => {
           status="failed"
         >
           <p>Outbound</p>
-        </BmChat.Details>{' '}
+        </BmChat.Details>{" "}
         <BmChat.Details
           state="outbound"
           session="live"
@@ -96,7 +97,7 @@ const Chat = () => {
           status="failed"
         >
           <p>Outbound</p>
-        </BmChat.Details>{' '}
+        </BmChat.Details>{" "}
         <BmChat.Details
           state="outbound"
           session="live"
@@ -106,12 +107,17 @@ const Chat = () => {
           <p>Outbound</p>
         </BmChat.Details>
       </BmChat.Body>
-      <BmChat.Footer>
-        <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
-        <BmIcons icon={<AttachFile />} size="xlarge" />
-        <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
-        <BmInput placeholder="Enter Message" />
-        <BmIcons icon={<SendIcon />} size="xlarge" />
+      <BmChat.Footer style={{ justifyContent: "flex-start" }}>
+        <div class="chat-footer">
+          <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+        </div>
+        <div class="chat-footer">
+          <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+          <BmIcons icon={<AttachFile />} size="xlarge" />
+          <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
+          <BmInput placeholder="Enter Message" style={{ flex: 1 }} />
+          <BmIcons icon={<SendIcon />} size="xlarge" />
+        </div>
       </BmChat.Footer>
     </BmChat>
   );

package/src/ChatHeader.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { BmChatHeader, BmButton } from "../src/lib/components/";
-import '../src/lib/assets/css/sidebar.css';
+import "../src/lib/assets/css/sidebar.css";
 
 export const ChatHeader = () => {
   return (
@@ -9,7 +9,10 @@ export const ChatHeader = () => {
         <BmChatHeader>
           <h2>Contact Name</h2>
           <p>Last seen: 00:00</p>
-          <BmButton size="medium">End Session</BmButton>
+          <div className="chat-header-buttons">
+            <BmButton size="medium">End Session</BmButton>
+            <BmButton size="medium">End Session</BmButton>
+          </div>
         </BmChatHeader>
       </div>
     </>

package/src/InfoAccordion.js

@@ -0,0 +1,24 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import { BmAccordion } from "./lib/components";
+import BmForm from "./lib/components/Forms/forms";
+
+const InfoAccordion = () => {
+  return (
+    <>
+      <BmAccordion>
+        <BmAccordion.Title>
+          <h3>Notes</h3>
+        </BmAccordion.Title>
+        <BmAccordion.Body>
+          <BmForm>
+            <BmForm.Label><h4>Hello</h4></BmForm.Label>
+            <BmForm.Input placeholder="Hello" />
+          </BmForm>
+        </BmAccordion.Body>
+      </BmAccordion>
+    </>
+  );
+};
+
+export default InfoAccordion;

package/src/SideBar.js

@@ -1,7 +1,8 @@
 import React from "react";
 import { BmTab } from "./lib/components/Tabs/tabs";
+import { BmTag } from "./lib/components/Tags/tags";
 import ForumIcon from "@material-ui/icons/Forum";
-import { BmContactCard, BmAvatar, BmCounter, BmTag } from "./lib/components";
+import { BmContactCard, BmAvatar, BmCounter } from "./lib/components";
 
 const SideBar = () => {
   return (

package/src/lib/assets/css/sidebar.css

@@ -77,4 +77,24 @@
     overflow: auto;
     width: 25%;
     border: 1px solid #E2E2E2;
+}
+
+.chat-header-buttons {
+    display: flex;
+    flex-direction: row;
+    margin-left: auto;
+}
+
+.chat-header-buttons>*:not(:last-child) {
+    margin-right: 0.5rem;
+}
+
+.chat-footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.chat-footer>*:not(:last-child) {
+    margin-right: 0.5rem;
 }

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

@@ -5,7 +5,6 @@ import BmAvatar from "../Avatars/avatars";
 import { BmIcons } from "../iconStyles";
 import {
   BmGrey400,
-  BmGrey50,
   BmPrimaryWhite,
   BmPrimaryBlue,
   BmPrimaryBlack,
@@ -135,14 +134,13 @@ BmChat.Details = ({
 
 BmChat.Footer = styled.div`
   display: flex;
-  flex-direction: row;
-  border-top: 0.071rem solid ${BmGrey400};
-  padding: 0.5rem 0rem;
-  align-items: center;
-  justify-content: center;
-  ${'' /* background: ${BmGrey50}; */}
+  flex-direction: column;
+  ${'' /* border-top: 0.071rem solid ${BmGrey200}; */}
+  padding: 0.5rem 0.5rem;
+  ${'' /* align-items: center; */}
+  ${'' /* justify-content: center; */}
   > *:not(:last-child) {
-    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
   }
 `;
 

package/src/lib/components/ChatHeader/chatHeader.js

@@ -5,12 +5,9 @@ export const BmChatHeader = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  ${'' /* border: 0.071rem solid ${BmGrey400}; */}
+  ${"" /* border: 0.071rem solid ${BmGrey400}; */}
   padding: 1rem;
   > *:not(:last-child) {
     margin-right: 0.5rem;
   }
-  button {
-    margin-left: auto;
-  }
 `;

package/src/lib/components/Forms/forms.js

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+
+const BmForm = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+BmForm.Label = styled.div`
+  margin: 0rem;
+  text-align: left;
+  width: 50%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`
+
+BmForm.Input = styled.input`
+  text-align: right;
+  width: 50%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: none;
+  &:visited,
+  &:active,
+  &:hover,
+  &:focus {
+    outline: none !important;
+    text-decoration: none;
+  }
+  background: transparent;
+`
+
+export default BmForm;

package/src/lib/components/index.js

@@ -38,6 +38,27 @@ import BmContactCard from "./ContactCards/contactCards";
 import BmInfoTab from "./InfoTab/infoTab";
 import BmCounter from "./MessageCounter/messageCounter";
 
+//Chat form components
+import BmForm from "./Forms/forms";
+
+//SuperFluid Components
+import { BmContent } from "./SuperFluid/Content/index";
+import {
+  BmContentFooter,
+  BmContentTitle,
+  BmFooterLeft,
+  BmFooterRight,
+} from "./SuperFluid/ContentTitle.js/index.js";
+import {
+  BmSegmentCard,
+  BmSegmentSelector,
+  BmSegment,
+  BmSegmentCheckBox,
+  BmSegmentCompleteContent,
+  BmSegmentCompleteIcon,
+  BmSegmentCreateContent,
+} from "./SuperFluid/SegmentCard/index";
+
 export {
   BmAccordion,
   BmAvatar,
@@ -49,6 +70,7 @@ export {
   BmListBox,
   BmListHeader,
   BmRowLabel,
+  // Fix height and if there is dropdown option inside the modal body
   BmModal,
   BmNoteBar,
   BmProgressBar,
@@ -57,11 +79,24 @@ export {
   GlobalStyle,
   MainWrapper,
   BmLoader,
+  BmTag,
   // Old components to be refactored
   BmButtonDropDown,
   BmCheckbox,
   BmInput,
-  BmTag,
+  //Old SFL componets to be refactored
+  BmContent,
+  BmContentFooter,
+  BmContentTitle,
+  BmFooterLeft,
+  BmFooterRight,
+  BmSegmentCard,
+  BmSegmentSelector,
+  BmSegment,
+  BmSegmentCheckBox,
+  BmSegmentCompleteContent,
+  BmSegmentCompleteIcon,
+  BmSegmentCreateContent,
   //Icons (Remove unused ones and check on the sizing for custom icons)
   BmAvatarIcon,
   BmIcons,
@@ -77,4 +112,6 @@ export {
   BmInfoTab,
   BmContactCard,
   BmCounter,
+  //Chat Form Components
+  BmForm,
 };

package/src/lib/components/input.js

@@ -14,7 +14,6 @@ import {
   BmSecondaryRed15,
   BmGrey100,
 } from "./colors";
-import { BmSuccessIcon, BmErrorIcon } from "./iconStyles";
 
 const BmInputLabel = styled.div`
   font-family: Open Sans;