beem-component 1.1.5 → 1.1.6

package/dist/components/ChatComponents/ColorPicker/colorPicker.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BmColorPicker = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+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 BmColorPicker = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 1.429rem;\n  height: 1.429rem;\n  border-radius: 50%;\n  background: ", ";\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n"])), function (props) {
+  return props.color ? props.color : 'green';
+});
+
+exports.BmColorPicker = BmColorPicker;

package/dist/components/ChatComponents/FormAccordion/FormAccordion.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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 BmChatForm = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0rem 0.5rem;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n"])));
+
+BmChatForm.Group = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n"])));
+BmChatForm.Label = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0rem;\n  text-align: left;\n  width: 50%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+BmChatForm.Input = _styledComponents.default.input(_templateObject4 || (_templateObject4 = _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 = BmChatForm;
+exports.default = _default;

package/dist/components/ChatComponents/LabelAccordion/LabelAccordion.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+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 BmChatLabels = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0rem 0.5rem;\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n  > * {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    width: 100%;\n  }\n"])));
+
+var _default = BmChatLabels;
+exports.default = _default;

package/dist/components/ChatComponents/NoteAccordion/NoteAccordion.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _colors = require("../../colors");
+
+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 BmChatNotes = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0rem 0.5rem;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n"])));
+
+BmChatNotes.Input = _styledComponents.default.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 1rem 1.5rem;\n  display: flex;\n  flex-grow: 1;\n  background: ", ";\n  border: none !important;\n  &:visited,\n  &:active,\n  &:hover,\n  &:focus {\n    outline: none !important;\n    text-decoration: none !important;\n  }\n  width: 100%;\n"])), _colors.BmGrey100);
+BmChatNotes.Details = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0.5rem 1rem;\n  border: 1px solid ", ";\n  border-radius: 0.25rem;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n\n  > * {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n  }\n"])), _colors.BmGrey200);
+var _default = BmChatNotes;
+exports.default = _default;

package/dist/components/Modals/modal.js

@@ -153,7 +153,7 @@ BmModal.Header = function (_ref4) {
   });
 };
 
-BmModal.Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n"])));
+BmModal.Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n  > * {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    width: 100%;\n  }\n"])));
 BmModal.Footer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
 BmModal.propTypes = {
   size: _propTypes.default.string,

package/dist/components/index.js

@@ -59,12 +59,30 @@ Object.defineProperty(exports, "BmChat", {
     return _chatBody.default;
   }
 });
+Object.defineProperty(exports, "BmChatForm", {
+  enumerable: true,
+  get: function get() {
+    return _FormAccordion.default;
+  }
+});
 Object.defineProperty(exports, "BmChatHeader", {
   enumerable: true,
   get: function get() {
     return _chatHeader.BmChatHeader;
   }
 });
+Object.defineProperty(exports, "BmChatLabels", {
+  enumerable: true,
+  get: function get() {
+    return _LabelAccordion.default;
+  }
+});
+Object.defineProperty(exports, "BmChatNotes", {
+  enumerable: true,
+  get: function get() {
+    return _NoteAccordion.default;
+  }
+});
 Object.defineProperty(exports, "BmChatbotIcon", {
   enumerable: true,
   get: function get() {
@@ -77,6 +95,12 @@ Object.defineProperty(exports, "BmCheckbox", {
     return _checkbox.BmCheckbox;
   }
 });
+Object.defineProperty(exports, "BmColorPicker", {
+  enumerable: true,
+  get: function get() {
+    return _colorPicker.BmColorPicker;
+  }
+});
 exports.BmColors = void 0;
 Object.defineProperty(exports, "BmContactCard", {
   enumerable: true,
@@ -126,12 +150,6 @@ Object.defineProperty(exports, "BmFooterRight", {
     return _index2.BmFooterRight;
   }
 });
-Object.defineProperty(exports, "BmForm", {
-  enumerable: true,
-  get: function get() {
-    return _forms.default;
-  }
-});
 Object.defineProperty(exports, "BmIcons", {
   enumerable: true,
   get: function get() {
@@ -347,7 +365,13 @@ var _infoTab = _interopRequireDefault(require("./InfoTab/infoTab"));
 
 var _messageCounter = _interopRequireDefault(require("./MessageCounter/messageCounter"));
 
-var _forms = _interopRequireDefault(require("./Forms/forms"));
+var _FormAccordion = _interopRequireDefault(require("./ChatComponents/FormAccordion/FormAccordion"));
+
+var _LabelAccordion = _interopRequireDefault(require("./ChatComponents/LabelAccordion/LabelAccordion"));
+
+var _NoteAccordion = _interopRequireDefault(require("./ChatComponents/NoteAccordion/NoteAccordion"));
+
+var _colorPicker = require("./ChatComponents/ColorPicker/colorPicker");
 
 var _index = require("./SuperFluid/Content/index");
 

package/package.json

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

package/src/App.js

@@ -10,21 +10,33 @@ 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";
+import BmForm from "./lib/components/ChatComponents/FormAccordion/FormAccordion";
+import { BmColorPicker } from "./lib/components/ChatComponents/ColorPicker/colorPicker";
 
 export const App = () => {
   return (
     <>
       <GlobalStyle />
       <MainWrapper>
+        {["#33b1ba", "#000000", "#F62E48", "#8CC63F"].map((color) => (
+          <BmColorPicker key={color} color={color} />
+        ))}
         <BmTag leadingIcon={<Home />} trailingIcon={<Home />}>
           <p>Hello</p>
         </BmTag>
         <BmForm>
-          <BmForm.Label>
-            <h4>Hello</h4>
-          </BmForm.Label>
-          <BmForm.Input placeholder="Hello" />
+          <BmForm.Group>
+            <BmForm.Label>
+              <h4>Hello</h4>
+            </BmForm.Label>
+            <BmForm.Input placeholder="Hello" />
+          </BmForm.Group>
+          <BmForm.Group>
+            <BmForm.Label>
+              <h4>Hello</h4>
+            </BmForm.Label>
+            <BmForm.Input placeholder="Hello" />
+          </BmForm.Group>
         </BmForm>
         <div className="main-chat-container">
           <div className="sidebar">

package/src/InfoAccordion.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from "react";
 import { BmAccordion } from "./lib/components";
-import BmForm from "./lib/components/Forms/forms";
+import BmForm from "./lib/components/ChatComponents/FormAccordion/FormAccordion";
 
 const InfoAccordion = () => {
   return (

package/src/lib/components/ChatComponents/ColorPicker/colorPicker.js

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+export const BmColorPicker = styled.div`
+  width: 1.429rem;
+  height: 1.429rem;
+  border-radius: 50%;
+  background: ${(props) => (props.color ? props.color : 'green')};
+  > *:not(:last-child) {
+    margin-right: 0.5rem;
+  }
+`;

package/src/lib/components/{Forms/forms.js → ChatComponents/FormAccordion/FormAccordion.js}

@@ -1,13 +1,23 @@
 import styled from "styled-components";
 
-const BmForm = styled.div`
+const BmChatForm = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0rem 0.5rem;
+  justify-content: space-between;
+  > *:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+`;
+
+BmChatForm.Group = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
 `;
 
-BmForm.Label = styled.div`
+BmChatForm.Label = styled.div`
   margin: 0rem;
   text-align: left;
   width: 50%;
@@ -15,7 +25,7 @@ BmForm.Label = styled.div`
   text-overflow: ellipsis;
 `
 
-BmForm.Input = styled.input`
+BmChatForm.Input = styled.input`
   text-align: right;
   width: 50%;
   overflow: hidden;
@@ -31,4 +41,4 @@ BmForm.Input = styled.input`
   background: transparent;
 `
 
-export default BmForm;
+export default BmChatForm;

package/src/lib/components/ChatComponents/LabelAccordion/LabelAccordion.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+const BmChatLabels = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0rem 0.5rem;
+  > *:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+  > * {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+  }
+`;
+
+export default BmChatLabels;

package/src/lib/components/ChatComponents/NoteAccordion/NoteAccordion.js

@@ -0,0 +1,46 @@
+import styled from "styled-components";
+import { BmGrey100, BmGrey200 } from "../../colors";
+
+const BmChatNotes = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0rem 0.5rem;
+  > *:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+`;
+
+BmChatNotes.Input = styled.input`
+  padding: 1rem 1.5rem;
+  display: flex;
+  flex-grow: 1;
+  background: ${BmGrey100};
+  border: none !important;
+  &:visited,
+  &:active,
+  &:hover,
+  &:focus {
+    outline: none !important;
+    text-decoration: none !important;
+  }
+  width: 100%;
+`;
+
+BmChatNotes.Details = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem 1rem;
+  border: 1px solid ${BmGrey200};
+  border-radius: 0.25rem;
+  > *:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+
+  > * {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+`;
+
+export default BmChatNotes;

package/src/lib/components/Modals/modal.js

@@ -135,6 +135,15 @@ BmModal.Body = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  > *:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+  > * {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+  }
 `;
 
 BmModal.Footer = styled.div`

package/src/lib/components/index.js

@@ -37,9 +37,11 @@ import { BmChatHeader } from "./ChatHeader/chatHeader";
 import BmContactCard from "./ContactCards/contactCards";
 import BmInfoTab from "./InfoTab/infoTab";
 import BmCounter from "./MessageCounter/messageCounter";
-
-//Chat form components
-import BmForm from "./Forms/forms";
+//Chat Accordion components
+import BmChatForm from "./ChatComponents/FormAccordion/FormAccordion";
+import BmChatLabels from "./ChatComponents/LabelAccordion/LabelAccordion";
+import BmChatNotes from "./ChatComponents/NoteAccordion/NoteAccordion";
+import { BmColorPicker } from "./ChatComponents/ColorPicker/colorPicker";
 
 //SuperFluid Components
 import { BmContent } from "./SuperFluid/Content/index";
@@ -112,6 +114,9 @@ export {
   BmInfoTab,
   BmContactCard,
   BmCounter,
-  //Chat Form Components
-  BmForm,
+  //Chat Accordion Components
+  BmChatForm,
+  BmChatLabels,
+  BmChatNotes,
+  BmColorPicker,
 };

package/dist/components/Forms/forms.js

@@ -1,21 +0,0 @@
-"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;