beem-component 0.9.5 → 0.9.9

package/dist/components/Accordicon.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BmAccordicon = exports.BmAccordiconDetails = exports.BmAccordiconMenu = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _colors = require("./colors");
+
+var _iconStyles = require("./iconStyles");
+
+var _excluded = ["children", "isOpen", "dropdown", "trailingIcon"];
+
+var _templateObject, _templateObject2;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var BmAccordiconMenu = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  ", "\n  padding: 0.571rem 1.143rem;\n  background: ", ";\n  box-shadow: ", ";\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n"])), ""
+/* justify-content: space-between; */
+, _colors.BmPrimaryWhite, function (isOpen) {
+  if (isOpen) return "inset 0rem 0.071rem 0rem ".concat(_colors.BmGrey400);
+  return "inset 0rem -0.071rem 0rem ".concat(_colors.BmGrey400, ", inset 0rem 0.071rem 0rem ").concat(_colors.BmGrey400, ";");
+});
+
+exports.BmAccordiconMenu = BmAccordiconMenu;
+
+var BmAccordiconDetails = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n"])));
+
+exports.BmAccordiconDetails = BmAccordiconDetails;
+
+var BmAccordicon = function BmAccordicon(_ref) {
+  var children = _ref.children,
+      isOpen = _ref.isOpen,
+      dropdown = _ref.dropdown,
+      trailingIcon = _ref.trailingIcon,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BmAccordiconMenu, rest, dropdown && (isOpen ? /*#__PURE__*/_react.default.createElement(_iconStyles.BmDropupIcon, rest) : /*#__PURE__*/_react.default.createElement(_iconStyles.BmDropdownIcon, rest)), /*#__PURE__*/_react.default.createElement(BmAccordiconDetails, null, children)));
+};
+
+exports.BmAccordicon = BmAccordicon;

package/dist/components/Accordion.js

@@ -0,0 +1,138 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _colors = require("./colors");
+
+var _iconStyles = require("./iconStyles");
+
+var _excluded = ["children", "disabled", "expandIcon"],
+    _excluded2 = ["children", "leadingIcon", "trailingIcon", "size"];
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var _React$createContext = /*#__PURE__*/_react.default.createContext({}),
+    Provider = _React$createContext.Provider,
+    Consumer = _React$createContext.Consumer;
+
+var Dropdown = function Dropdown(value, rest) {
+  if (value.expandIcon && value.expandIcon === "none") {
+    return;
+  }
+
+  if (!value.expandIcon) {
+    return value.toggle ? /*#__PURE__*/_react.default.createElement(_iconStyles.BmDropupIcon, rest) : /*#__PURE__*/_react.default.createElement(_iconStyles.BmDropdownIcon, rest);
+  }
+
+  if (value.expandIcon && value.expandIcon !== "none") {
+    return /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+      icon: value.expandIcon
+    });
+  }
+};
+
+var BmAccordionMenu = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  ", "\n  padding: 0.571rem 1.143rem;\n  border: 1px solid \n  background: ", ";\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n"])), ""
+/* padding: 0.571rem; */
+, _colors.BmPrimaryWhite);
+
+var BmAccordionDetails = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n"])));
+
+var BmAccordionWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+
+var BmAccordion = function BmAccordion(_ref) {
+  var children = _ref.children,
+      disabled = _ref.disabled,
+      expandIcon = _ref.expandIcon,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      toggle = _useState2[0],
+      setToggle = _useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement(BmAccordionWrapper, null, /*#__PURE__*/_react.default.createElement(Provider, {
+    value: {
+      toggle: toggle,
+      setToggle: setToggle,
+      disabled: disabled,
+      expandIcon: expandIcon
+    }
+  }, children));
+};
+
+BmAccordion.Title = function (_ref2) {
+  var children = _ref2.children,
+      leadingIcon = _ref2.leadingIcon,
+      trailingIcon = _ref2.trailingIcon,
+      size = _ref2.size,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  return /*#__PURE__*/_react.default.createElement(Consumer, null, function (value) {
+    return /*#__PURE__*/_react.default.createElement(BmAccordionMenu, _extends({}, rest, {
+      onClick: function onClick() {
+        return !value.disabled || value.disabled === false ? value.setToggle(!value.toggle) : value.setToggle(false);
+      }
+    }), Dropdown(value, rest), leadingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+      icon: leadingIcon,
+      size: size
+    }), /*#__PURE__*/_react.default.createElement(BmAccordionDetails, null, children), trailingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+      icon: trailingIcon,
+      size: size
+    }));
+  });
+};
+
+BmAccordion.Body = function (_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/_react.default.createElement(Consumer, null, function (value) {
+    return value.toggle && /*#__PURE__*/_react.default.createElement("div", null, children);
+  });
+};
+
+BmAccordion.propTypes = {
+  children: _propTypes.default.object,
+  size: _propTypes.default.string,
+  expandIcon: _propTypes.default.string,
+  leadingIcon: _propTypes.default.node,
+  trailingIcon: _propTypes.default.node,
+  disabled: _propTypes.default.bool
+};
+var _default = BmAccordion;
+exports.default = _default;

package/dist/components/CustomerInfo/infoAccordion.js

@@ -69,9 +69,7 @@ var BmInfoContentItem = _styledComponents.default.div(_templateObject7 || (_temp
 
 exports.BmInfoContentItem = BmInfoContentItem;
 
-var BmInfoContentLabel = _styledComponents.default.h4(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin: 0rem;\n  ", "\n  text-align: left;\n  width: 50%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), _colors.BmPrimaryBlack, ""
-/* padding: 0rem; */
-);
+var BmInfoContentLabel = _styledComponents.default.h4(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin: 0rem;\n  text-align: left;\n  width: 50%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), _colors.BmPrimaryBlack);
 
 exports.BmInfoContentLabel = BmInfoContentLabel;
 

package/dist/components/CustomerInfo/labelsInfo.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BmLabelInfo = exports.BmColorLabelPicker = exports.BmColorLabel = exports.BmLabels = exports.BmAddLabel = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _input = require("../input");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+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 BmAddLabel = (0, _styledComponents.default)(_input.BmInput)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  margin-bottom: 0.5rem;\n"])));
+exports.BmAddLabel = BmAddLabel;
+
+var BmLabels = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  flex-wrap: wrap;\n"])));
+
+exports.BmLabels = BmLabels;
+
+var BmColorLabel = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
+
+exports.BmColorLabel = BmColorLabel;
+
+var BmColorLabelPicker = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 1.429rem;\n  height: 1.429rem;\n  border-radius: 50%;\n  margin: 0.5rem;\n  background: ", ";\n"])), function (props) {
+  return props.color ? props.color : "green";
+});
+
+exports.BmColorLabelPicker = BmColorLabelPicker;
+
+var BmLabelInfo = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  > *:not(:first-child) {\n    margin-top: 1.143rem;\n  }\n"])));
+
+exports.BmLabelInfo = BmLabelInfo;

package/dist/components/CustomerInfo/notesInfo.js

@@ -30,14 +30,10 @@ var BmNote = _styledComponents.default.div(_templateObject3 || (_templateObject3
 
 exports.BmNote = BmNote;
 
-var BmNoteDetails = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-top: 0.857rem;\n  width: 50%;\n  ", "\n"])), ""
-/* padding: 1rem 1.143rem; */
-);
+var BmNoteDetails = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-top: 0.857rem;\n  width: 50%;\n"])));
 
 exports.BmNoteDetails = BmNoteDetails;
 
-var BmNoteFooter = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-top: 0.857rem;\n  width: 100%;\n  > * {\n    &:last-child {\n      margin-left: auto;\n    }\n  }\n  ", "\n"])), ""
-/* padding: 1rem 1.143rem; */
-);
+var BmNoteFooter = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-top: 0.857rem;\n  width: 100%;\n  > * {\n    &:last-child {\n      margin-left: auto;\n    }\n  }\n"])));
 
 exports.BmNoteFooter = BmNoteFooter;

package/dist/components/Modals/noteModalFooter.js

@@ -17,6 +17,8 @@ var ModalFooter = _styledComponents.default.div(_templateObject || (_templateObj
 
 exports.ModalFooter = ModalFooter;
 
-var BmFooterButtons = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: auto;\n  width: 50%;\n  align-items: center;\n  justify-content: space-between;\n"])));
+var BmFooterButtons = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: auto;\n  ", "\n  align-items: center;\n  justify-content: space-between;\n"])), ''
+/* width: 50%; */
+);
 
 exports.BmFooterButtons = BmFooterButtons;

package/dist/components/globalStyles.js

@@ -13,5 +13,5 @@ var _templateObject;
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n* { font-size: 14px;}\n  h1 { ", " }\n  h2 { ", " }\n  h3 { ", " }\n  h4 { ", " }\n  p  { ", " }\n  input {", "}\n"])), _text.h1, _text.h2, _text.h3, _text.h4, _text.p, _text.input);
+var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n* { font-size: 14px;}\n  h1 { ", " }\n  h2 { ", " }\n  h3 { ", " }\n  h4 { ", " }\n  p  { ", " }\n  input {", "}\n  a {", "}\n"])), _text.h1, _text.h2, _text.h3, _text.h4, _text.p, _text.input, _text.a);
 exports.GlobalStyle = GlobalStyle;

package/dist/components/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "BmAccordion", {
+  enumerable: true,
+  get: function get() {
+    return _Accordion.default;
+  }
+});
 Object.defineProperty(exports, "BmAvatar", {
   enumerable: true,
   get: function get() {
@@ -333,12 +339,6 @@ Object.defineProperty(exports, "BmMessageTabInput", {
     return _chatInput.BmMessageTabInput;
   }
 });
-Object.defineProperty(exports, "BmSendIcon", {
-  enumerable: true,
-  get: function get() {
-    return _chatInput.BmSendIcon;
-  }
-});
 Object.defineProperty(exports, "BmSend", {
   enumerable: true,
   get: function get() {
@@ -1149,6 +1149,44 @@ Object.defineProperty(exports, "BmNoteDetails", {
     return _notesInfo.BmNoteDetails;
   }
 });
+Object.defineProperty(exports, "BmAddLabel", {
+  enumerable: true,
+  get: function get() {
+    return _labelsInfo.BmAddLabel;
+  }
+});
+Object.defineProperty(exports, "BmLabelInfo", {
+  enumerable: true,
+  get: function get() {
+    return _labelsInfo.BmLabelInfo;
+  }
+});
+Object.defineProperty(exports, "BmLabels", {
+  enumerable: true,
+  get: function get() {
+    return _labelsInfo.BmLabels;
+  }
+});
+Object.defineProperty(exports, "BmColorLabel", {
+  enumerable: true,
+  get: function get() {
+    return _labelsInfo.BmColorLabel;
+  }
+});
+Object.defineProperty(exports, "BmColorLabelPicker", {
+  enumerable: true,
+  get: function get() {
+    return _labelsInfo.BmColorLabelPicker;
+  }
+});
+Object.defineProperty(exports, "BmAccordicon", {
+  enumerable: true,
+  get: function get() {
+    return _Accordicon.BmAccordicon;
+  }
+});
+
+var _Accordion = _interopRequireDefault(require("./Accordion"));
 
 var _avatars = require("./avatars");
 
@@ -1240,4 +1278,10 @@ var _infoNote = require("./infoNote");
 
 var _checkbox = require("./checkbox");
 
-var _notesInfo = require("./CustomerInfo/notesInfo");
+var _notesInfo = require("./CustomerInfo/notesInfo");
+
+var _labelsInfo = require("./CustomerInfo/labelsInfo");
+
+var _Accordicon = require("./Accordicon");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/tags.js

@@ -44,7 +44,8 @@ var BeemTag = _styledComponents.default.button(_templateObject || (_templateObje
   if (variant === "warning") return "".concat(_colors.BmPrimaryGold);
   if (variant === "error") return "".concat(_colors.BmSecondaryRed);
   if (variant === "light") return "".concat(_colors.BmPrimaryWhite);
-  return "".concat(_colors.BmGrey100);
+  if (variant === undefined) return "".concat(_colors.BmGrey100);
+  return variant;
 }, function (_ref4) {
   var variant = _ref4.variant;
   if (variant === "neutral") return "".concat(_colors.BmGrey100);
@@ -61,9 +62,9 @@ var TagText = _styledComponents.default.p(_templateObject2 || (_templateObject2
   return "".concat(_colors.BmPrimaryWhite);
 });
 
-var BmLeftIcon = (0, _styledComponents.default)(_iconStyles.BmTagIcon)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding-right: 0.643rem;\n"])));
+var BmLeftIcon = (0, _styledComponents.default)(_iconStyles.BmTagIcon)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-right: 0.643rem;\n"])));
 exports.BmLeftIcon = BmLeftIcon;
-var BmRightIcon = (0, _styledComponents.default)(_iconStyles.BmTagIcon)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding-left: 0.643rem;\n"])));
+var BmRightIcon = (0, _styledComponents.default)(_iconStyles.BmTagIcon)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-left: 0.643rem;\n"])));
 exports.BmRightIcon = BmRightIcon;
 
 var BmTag = function BmTag(props) {

package/dist/components/text.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.input = exports.p = exports.h4 = exports.h3 = exports.h2 = exports.h1 = void 0;
+exports.a = exports.input = exports.p = exports.h4 = exports.h3 = exports.h2 = exports.h1 = void 0;
 
 var _typography = require("./typography");
 
@@ -18,4 +18,6 @@ exports.h4 = h4;
 var p = "font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 exports.p = p;
 var input = " font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
-exports.input = input;
+exports.input = input;
+var a = "font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+exports.a = a;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "beem-component",
-    "version": "0.9.5",
+    "version": "0.9.9",
     "private": false,
     "main": "dist/components/index.js",
     "peerDependencies": {
@@ -13,7 +13,7 @@
         "@material-ui/core": "^4.11.4",
         "@material-ui/icons": "^4.11.2",
         "@mui/icons-material": "^5.0.3",
-        "node-sass": "^5.0.0",
+        "node-sass": "^6.0.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-scripts": "4.0.3",

package/src/App.js

@@ -7,12 +7,21 @@ import { Complete } from "./Complete";
 import { CreateSegment } from "./CreateSegments";
 // import Buttons from "../src/examples/Buttons";
 import Chat from "./CHAT";
-
+import { BmAccordicon } from "./lib/components/Accordicon";
+import BmAccordion from "./lib/components/Accordion";
 export const App = () => {
   return (
     <>
       <GlobalStyle />
+      <BmAccordicon dropdown trailingIcon>
+        <h4>jclkdj</h4>
+        <h2>kghgfih</h2>
+      </BmAccordicon>
       <Chat />
+      <BmAccordion>
+        <BmAccordion.Title>SMS</BmAccordion.Title>
+        <BmAccordion.Body>Reports</BmAccordion.Body>
+      </BmAccordion>
       {/* <Buttons /> */}
       {/* <h1>hello</h1> */}
       {/* <MainWrapper>

package/src/examples/CustomerInfo.js

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import React, { useState } from "react";
 import {
   BmCustomer,
@@ -32,12 +33,41 @@ import {
   BmNoteDetails,
   BmNoteFooter,
 } from "../lib/components/CustomerInfo/notesInfo";
-import { BmIcons, CopyToClipBoard } from "../lib/components/iconStyles";
+import {
+  BmAddLabel,
+  BmColorLabel,
+  BmColorLabelContainer,
+  BmColorLabelPicker,
+  BmLabelInfo,
+  BmLabels,
+} from "../lib/components/CustomerInfo/labelsInfo";
+import {
+  BmIcons,
+  BmTagIcon,
+  CopyToClipBoard,
+} from "../lib/components/iconStyles";
 import { Delete, Edit } from "@material-ui/icons";
+import { BmTag } from "../lib/components/tags";
+import { BmAccordicon } from "../lib/components/Accordicon";
+import { ModalBody } from "../lib/components/Modals/noteModalBody";
+import {
+  BmFooterButtons,
+  ModalFooter,
+} from "../lib/components/Modals/noteModalFooter";
+import {
+  CloseModal,
+  HeaderText,
+  Modal,
+  ModalHeader,
+} from "../lib/components/Modals/noteModalHeader";
+import { BmInput } from "../lib/components/input";
+import { BmButton } from "../lib/components/buttons";
 
 const CustomerInformation = () => {
   const [isOpen, setIsOpen] = useState(true);
   const toggling = () => setIsOpen(!isOpen);
+  const [showModal, setShowModal] = useState(false);
+
   return (
     <>
       {/* Main Customer SideBar */}
@@ -111,9 +141,9 @@ const CustomerInformation = () => {
           </BmInformation>
           <BmInformation>
             {/* Notes */}
-            <BmInfoHeader onClick={toggling} isOpen={isOpen}>
-              Notes
-            </BmInfoHeader>
+            <BmAccordicon dropdown onClick={toggling} isOpen={isOpen}>
+              <h3>Notes</h3>
+            </BmAccordicon>
             <BmInfoContent isOpen={isOpen}>
               <BmInfoContentItem>
                 <BmNoteInfo>
@@ -124,7 +154,11 @@ const CustomerInformation = () => {
                       despite following the instructions
                     </p>
                     <BmNoteDetails>
-                      <BmIcons icon={<Edit />} size="xsmall" onClick={() =>alert('hello')} />
+                      <BmIcons
+                        icon={<Edit />}
+                        size="xsmall"
+                        onClick={() => alert("hello")}
+                      />
                       <BmIcons icon={<CopyToClipBoard />} size="xsmall" />
                       <BmIcons icon={<Delete />} size="xsmall" />
                     </BmNoteDetails>
@@ -137,8 +171,76 @@ const CustomerInformation = () => {
               </BmInfoContentItem>
             </BmInfoContent>
           </BmInformation>
+          {/* Labels */}
+          <BmInformation>
+            <BmAccordicon dropdown onClick={toggling} isOpen={isOpen}>
+              <h3>Labels</h3>
+              <a
+                onClick={() => {
+                  setShowModal(true);
+                }}
+              >
+                Manage Labels
+              </a>
+            </BmAccordicon>
+            <BmInfoContent isOpen={isOpen}>
+              <BmInfoContentItem>
+                <BmLabelInfo>
+                  {/* SearchIcon */}
+                  <BmAddNote type="text" placeholder="Add Note" />
+                  <h4>Added Labels</h4>
+                  <BmLabels>
+                    <BmTag variant="#33b1ba" trailingIcon={<Delete />}>
+                      A
+                    </BmTag>
+                    <BmTag variant="purple" trailingIcon={<Delete />}>
+                      B
+                    </BmTag>
+                    <BmTag variant="orange" trailingIcon={<Delete />}>
+                      C
+                    </BmTag>
+                  </BmLabels>
+                </BmLabelInfo>
+              </BmInfoContentItem>
+            </BmInfoContent>
+          </BmInformation>
         </BmCustomerInfoAccordicon>
       </BmCustomerBar>
+      <Modal
+        show={showModal}
+        setShowModal={() => {
+          setShowModal(!showModal);
+        }}
+      >
+        <ModalHeader>
+          <HeaderText>Add Labels</HeaderText>
+          <CloseModal
+            onClick={() => {
+              setShowModal(!showModal);
+            }}
+          />
+        </ModalHeader>
+        <ModalBody>
+          <BmAddLabel type="text" placeholder="Add label" />
+          <BmColorLabel>
+            {["#33b1ba", "#000000", "#F62E48", "#8CC63F"].map((color) => (
+              <BmColorLabelPicker
+                color={color}
+                onClick={() => {
+                  alert(color);
+                }}
+              />
+            ))}
+          </BmColorLabel>
+        </ModalBody>
+        <ModalFooter>
+          <BmFooterButtons>
+            <BmButton variant="primary" size="medium">
+              Save
+            </BmButton>
+          </BmFooterButtons>
+        </ModalFooter>
+      </Modal>
     </>
   );
 };

package/src/lib/components/Accordicon.js

@@ -0,0 +1,43 @@
+import React from "react";
+import styled from "styled-components";
+import { BmPrimaryWhite, BmGrey400 } from "./colors";
+import { BmDropdownIcon, BmDropupIcon } from "./iconStyles";
+
+export const BmAccordiconMenu = styled.div`
+  display: flex;
+  flex-direction: row;
+  ${"" /* justify-content: space-between; */}
+  padding: 0.571rem 1.143rem;
+  background: ${BmPrimaryWhite};
+  box-shadow: ${(isOpen) => {
+    if (isOpen) return `inset 0rem 0.071rem 0rem ${BmGrey400}`;
+    return `inset 0rem -0.071rem 0rem ${BmGrey400}, inset 0rem 0.071rem 0rem ${BmGrey400};`;
+  }};
+  > *:not(:last-child) {
+    margin-right: 0.5rem;
+  }
+`;
+
+export const BmAccordiconDetails = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+export const BmAccordicon = ({
+  children,
+  isOpen,
+  dropdown,
+  trailingIcon,
+  ...rest
+}) => {
+  return (
+    <>
+      <BmAccordiconMenu {...rest}>
+        {dropdown &&
+          (isOpen ? <BmDropupIcon {...rest} /> : <BmDropdownIcon {...rest} />)}
+        <BmAccordiconDetails>{children}</BmAccordiconDetails>
+      </BmAccordiconMenu>
+    </>
+  );
+};

package/src/lib/components/Accordion.js

@@ -0,0 +1,103 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
+import { BmPrimaryWhite } from "./colors";
+import { BmDropdownIcon, BmDropupIcon, BmIcons } from "./iconStyles";
+
+const { Provider, Consumer } = React.createContext({});
+
+const Dropdown = (value, rest) => {
+  if (value.expandIcon && value.expandIcon === "none") {
+    return;
+  }
+  if (!value.expandIcon) {
+    return value.toggle ? (
+      <BmDropupIcon {...rest} />
+    ) : (
+      <BmDropdownIcon {...rest} />
+    );
+  }
+  if (value.expandIcon && value.expandIcon !== "none") {
+    return <BmIcons icon={value.expandIcon} />;
+  }
+};
+const BmAccordionMenu = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  ${"" /* padding: 0.571rem; */}
+  padding: 0.571rem 1.143rem;
+  border: 1px solid 
+  background: ${BmPrimaryWhite};
+  > *:not(:last-child) {
+    margin-right: 0.5rem;
+  }
+`;
+
+const BmAccordionDetails = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+const BmAccordionWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const BmAccordion = ({ children, disabled, expandIcon, ...rest }) => {
+  const [toggle, setToggle] = useState(false);
+
+  return (
+    <BmAccordionWrapper>
+      <Provider value={{ toggle, setToggle, disabled, expandIcon }}>
+        {children}
+      </Provider>
+    </BmAccordionWrapper>
+  );
+};
+
+BmAccordion.Title = ({
+  children,
+  leadingIcon,
+  trailingIcon,
+  size,
+  ...rest
+}) => {
+  return (
+    <Consumer>
+      {(value) => (
+        <BmAccordionMenu
+          {...rest}
+          onClick={() =>
+            !value.disabled || value.disabled === false
+              ? value.setToggle(!value.toggle)
+              : value.setToggle(false)
+          }
+        >
+          {Dropdown(value, rest)}
+          {leadingIcon && <BmIcons icon={leadingIcon} size={size} />}
+          <BmAccordionDetails>{children}</BmAccordionDetails>
+          {trailingIcon && <BmIcons icon={trailingIcon} size={size} />}
+        </BmAccordionMenu>
+      )}
+    </Consumer>
+  );
+};
+
+BmAccordion.Body = ({ children }) => {
+  return (
+    <Consumer>{(value) => value.toggle && <div>{children}</div>}</Consumer>
+  );
+};
+
+BmAccordion.propTypes = {
+  children: PropTypes.object,
+  size: PropTypes.string,
+  expandIcon: PropTypes.string,
+  leadingIcon: PropTypes.node,
+  trailingIcon: PropTypes.node,
+  disabled: PropTypes.bool,
+};
+
+export default BmAccordion;

package/src/lib/components/CustomerInfo/infoAccordion.js

@@ -71,7 +71,6 @@ export const BmInfoContentItem = styled.div`
 export const BmInfoContentLabel = styled.h4`
   color: ${BmPrimaryBlack};
   margin: 0rem;
-  ${"" /* padding: 0rem; */}
   text-align: left;
   width: 50%;
   overflow: hidden;

package/src/lib/components/CustomerInfo/labelsInfo.js

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+import { BmInput } from "../input";
+
+export const BmAddLabel = styled(BmInput)`
+  width: 100%;
+  margin-bottom: 0.5rem;
+`;
+
+export const BmLabels = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  flex-wrap: wrap;
+`;
+
+export const BmColorLabel = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+export const BmColorLabelPicker = styled.div`
+  width: 1.429rem;
+  height: 1.429rem;
+  border-radius: 50%;
+  margin: 0.5rem;
+  background: ${(props) => (props.color ? props.color : "green")};
+`;
+
+export const BmLabelInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  > *:not(:first-child) {
+    margin-top: 1.143rem;
+  }
+`;

package/src/lib/components/CustomerInfo/notesInfo.js

@@ -45,7 +45,6 @@ export const BmNoteDetails = styled.div`
   justify-content: space-between;
   margin-top: 0.857rem;
   width: 50%;
-  ${"" /* padding: 1rem 1.143rem; */}
 `;
 
 export const BmNoteFooter = styled.div`
@@ -59,5 +58,4 @@ export const BmNoteFooter = styled.div`
       margin-left: auto;
     }
   }
-  ${"" /* padding: 1rem 1.143rem; */}
 `;

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

@@ -10,7 +10,7 @@ export const ModalFooter = styled.div`
 export const BmFooterButtons = styled.div`
   display: flex;
   margin-left: auto;
-  width: 50%;
+  ${'' /* width: 50%; */}
   align-items: center;
   justify-content: space-between;
 `;

package/src/lib/components/globalStyles.js

@@ -1,5 +1,5 @@
 import { createGlobalStyle } from "styled-components";
-import { h1, h2, h3, h4, p, input } from "./text";
+import { h1, h2, h3, h4, p, input, a } from "./text";
 
 export const GlobalStyle = createGlobalStyle`
 * { font-size: 14px;}
@@ -9,4 +9,5 @@ export const GlobalStyle = createGlobalStyle`
   h4 { ${h4} }
   p  { ${p} }
   input {${input}}
+  a {${a}}
 `;

package/src/lib/components/index.js

@@ -1,3 +1,4 @@
+import BmAccordion from "./Accordion";
 import { BmAvatar } from "./avatars";
 import { BmAlertIcon } from "./buttonAlertIcons";
 import { BmBtnIcon } from "./buttonIconsOnly";
@@ -69,7 +70,6 @@ import {
 import {
   BmMessageTab,
   BmMessageTabInput,
-  BmSendIcon,
   BmSend,
   BmAttachment,
   BmMessage,
@@ -257,8 +257,17 @@ import {
   BmNoteFooter,
   BmNoteDetails,
 } from "./CustomerInfo/notesInfo";
+import {
+  BmAddLabel,
+  BmLabelInfo,
+  BmLabels,
+  BmColorLabel,
+  BmColorLabelPicker,
+} from "./CustomerInfo/labelsInfo";
+import { BmAccordicon } from "./Accordicon";
 
 export {
+  BmAccordion,
   BmButton,
   BmAvatar,
   BmAlertIcon,
@@ -296,7 +305,6 @@ export {
   BmImageChat,
   BmMessageTab,
   BmMessageTabInput,
-  BmSendIcon,
   BmSend,
   BmAttachment,
   BmMessage,
@@ -449,5 +457,11 @@ export {
   BmNote,
   BmNoteFooter,
   BmNoteDetails,
-  CopyToClipBoard
+  CopyToClipBoard,
+  BmAddLabel,
+  BmLabelInfo,
+  BmLabels,
+  BmColorLabel,
+  BmColorLabelPicker,
+  BmAccordicon,
 };

package/src/lib/components/tags.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import styled from "styled-components";
 import {
   BmPrimaryWhite,
@@ -33,7 +33,8 @@ const BeemTag = styled.button`
     if (variant === "warning") return `${BmPrimaryGold}`;
     if (variant === "error") return `${BmSecondaryRed}`;
     if (variant === "light") return `${BmPrimaryWhite}`;
-    return `${BmGrey100}`;
+    if (variant === undefined) return `${BmGrey100}`;
+    return variant;
   }};
   border: 0.071rem solid
     ${({ variant }) => {
@@ -57,11 +58,11 @@ const TagText = styled.p`
 `;
 
 export const BmLeftIcon = styled(BmTagIcon)`
-  padding-right: 0.643rem;
+  margin-right: 0.643rem;
 `;
 
 export const BmRightIcon = styled(BmTagIcon)`
-  padding-left: 0.643rem;
+  margin-left: 0.643rem;
 `;
 
 export const BmTag = (props) => {

package/src/lib/components/text.js

@@ -42,3 +42,10 @@ font-weight: normal;
 font-size: 1rem;
 letter-spacing: -0.02rem;
 margin: 0rem;`;
+
+export const a = `font-family: ${OpenSans};
+font-style: normal;
+font-weight: normal;
+font-size: 1rem;
+letter-spacing: -0.02rem;
+margin: 0rem;`;