beem-component 1.0.5 → 1.0.6

package/dist/components/ContactCards/contactCards.stories.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ContactCard = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _contactCards = _interopRequireDefault(require("./contactCards"));
+
+var _avatars = _interopRequireDefault(require("../Avatars/avatars"));
+
+var _messageCounter = _interopRequireDefault(require("../MessageCounter/messageCounter"));
+
+var _tags = require("../tags");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/no-anonymous-default-export */
+var _default = {
+  component: {
+    BmContactCard: _contactCards.default,
+    BmAvatar: _avatars.default,
+    BmTag: _tags.BmTag,
+    BmCounter: _messageCounter.default
+  },
+  title: "components/ContactCard"
+};
+exports.default = _default;
+
+var ContactCard = function ContactCard() {
+  return /*#__PURE__*/_react.default.createElement(_contactCards.default, null, /*#__PURE__*/_react.default.createElement(_contactCards.default.Profile, null, /*#__PURE__*/_react.default.createElement(_avatars.default, {
+    user: "chatbot",
+    size: "medium"
+  })), /*#__PURE__*/_react.default.createElement(_contactCards.default.Details, null, /*#__PURE__*/_react.default.createElement(_contactCards.default.SubDetails, null, /*#__PURE__*/_react.default.createElement("h3", null, "Contact Names")), /*#__PURE__*/_react.default.createElement(_contactCards.default.SubDetails, null, /*#__PURE__*/_react.default.createElement("p", null, "Message text"), /*#__PURE__*/_react.default.createElement(_messageCounter.default, null, "10")), /*#__PURE__*/_react.default.createElement(_contactCards.default.SubDetails, null, /*#__PURE__*/_react.default.createElement(_tags.BmTag, {
+    variant: "success"
+  }, "label"), /*#__PURE__*/_react.default.createElement("p", null, "10:00 am"))));
+};
+
+exports.ContactCard = ContactCard;

package/dist/components/InfoTab/infoTab.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 BmInfoTab = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 1.5rem;\n  border: 0.071rem solid ", ";\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])), _colors.BmGrey400);
+
+BmInfoTab.Content = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
+BmInfoTab.Tabs = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  >*:not(:first-child) {\n    margin-top: 0.5rem;\n  }\n"])));
+var _default = BmInfoTab;
+exports.default = _default;

package/dist/components/InfoTab/infoTab.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InfoTab = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _infoTab = _interopRequireDefault(require("./infoTab"));
+
+var _tags = require("../tags");
+
+var _buttonIconsOnly = require("../Buttons/buttonIconsOnly");
+
+var _icons = require("@material-ui/icons");
+
+var _iconStyles = require("../iconStyles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/no-anonymous-default-export */
+var _default = {
+  component: _infoTab.default,
+  title: "components/InfoTab"
+};
+exports.default = _default;
+
+var InfoTab = function InfoTab() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      maxWidth: "30%"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_infoTab.default, null, /*#__PURE__*/_react.default.createElement(_infoTab.default.Content, null, /*#__PURE__*/_react.default.createElement("h2", null, "Contact Name"), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.MoreVert, null)
+  })), /*#__PURE__*/_react.default.createElement(_infoTab.default.Content, null, /*#__PURE__*/_react.default.createElement(_infoTab.default.Tabs, null, /*#__PURE__*/_react.default.createElement(_buttonIconsOnly.BmBtnIcon, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.Phone, null)
+  }), /*#__PURE__*/_react.default.createElement("h4", null, "Call")), /*#__PURE__*/_react.default.createElement(_infoTab.default.Tabs, null, /*#__PURE__*/_react.default.createElement(_buttonIconsOnly.BmBtnIcon, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.Phone, null)
+  }), /*#__PURE__*/_react.default.createElement("h4", null, "Call")), /*#__PURE__*/_react.default.createElement(_infoTab.default.Tabs, null, /*#__PURE__*/_react.default.createElement(_buttonIconsOnly.BmBtnIcon, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.Phone, null)
+  }), /*#__PURE__*/_react.default.createElement("h4", null, "Call")), /*#__PURE__*/_react.default.createElement(_infoTab.default.Tabs, null, /*#__PURE__*/_react.default.createElement(_buttonIconsOnly.BmBtnIcon, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.Phone, null)
+  }), /*#__PURE__*/_react.default.createElement("h4", null, "Call")), /*#__PURE__*/_react.default.createElement(_infoTab.default.Tabs, null, /*#__PURE__*/_react.default.createElement(_buttonIconsOnly.BmBtnIcon, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.Phone, null)
+  }), /*#__PURE__*/_react.default.createElement("h4", null, "Call")))));
+};
+
+exports.InfoTab = InfoTab;

package/dist/components/MessageCounter/MessageCounter.stories.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MessageCounter = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _messageCounter = _interopRequireDefault(require("./messageCounter"));
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/no-anonymous-default-export */
+var _default = {
+  component: _messageCounter.default,
+  title: "components/MessageCounter",
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: {
+        type: "select"
+      },
+      description: "Size of the counter (can also be custom example: 10px)",
+      defaultValue: {
+        summary: "small"
+      }
+    },
+    children: {
+      description: "Counter Text",
+      defaultValue: {
+        summary: undefined
+      }
+    }
+  }
+};
+exports.default = _default;
+var optionSize = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+};
+
+var MessageCounter = function MessageCounter() {
+  return /*#__PURE__*/_react.default.createElement(_messageCounter.default, {
+    size: (0, _addonKnobs.select)("size", optionSize, "large")
+  }, (0, _addonKnobs.text)("children", "00"));
+};
+
+exports.MessageCounter = MessageCounter;

package/dist/components/MessageCounter/messageCounter.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _colors = require("../colors");
+
+var _text = require("../text");
+
+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 BmCounter = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n  border-radius: 50%;\n  text-align: center;\n  background: ", ";\n"])), _colors.BmPrimaryWhite, function (_ref) {
+  var size = _ref.size;
+  if (size === "small") return "1.429rem";
+  if (size === "medium") return "1.714rem";
+  if (size === "large") return "2.286rem";
+  if (!size) return "1.429rem";
+  return size;
+}, function (_ref2) {
+  var size = _ref2.size;
+  if (size === "small") return "1.429rem";
+  if (size === "medium") return "1.714rem";
+  if (size === "large") return "2.286rem";
+  if (!size) return "1.429rem";
+  return size;
+}, function (_ref3) {
+  var size = _ref3.size;
+  if (size === "large") return "".concat(_text.h3);
+  if (size === "medium") return "".concat(_text.h4);
+  if (size === "small") return "".concat(_text.p);
+  return "".concat(_text.p);
+}, _colors.BmPrimaryBlue);
+
+BmCounter.propTypes = {
+  children: _propTypes.default.string,
+  size: _propTypes.default.string
+};
+var _default = BmCounter;
+exports.default = _default;

package/dist/components/Tabs/tabs.js

@@ -29,7 +29,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 BmTabWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 0.714rem 1.714rem;\n  background: ", ";\n  box-shadow: ", ";\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n  ", "\n"])), _colors.BmPrimaryWhite, function (_ref) {
+var BmTabWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 0.714rem 1.714rem;\n  background: ", ";\n  box-shadow: ", ";\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n  ", "\n"])), _colors.BmPrimaryWhite, function (_ref) {
   var state = _ref.state;
 
   if (state === "active") {

package/dist/components/Tabs/tabs.stories.js

@@ -55,5 +55,6 @@ Tabs.args = {
   children: /*#__PURE__*/_react.default.createElement("h3", null, "Tabs"),
   leadingIcon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null),
   trailingIcon: /*#__PURE__*/_react.default.createElement(_icons.KeyboardArrowDown, null),
-  disabled: false
+  disabled: false,
+  state: 'active'
 };

package/dist/components/index.js

@@ -20,7 +20,7 @@ Object.defineProperty(exports, "BmAlertIcon", {
 Object.defineProperty(exports, "BmAvatar", {
   enumerable: true,
   get: function get() {
-    return _avatars.BmAvatar;
+    return _avatars.default;
   }
 });
 Object.defineProperty(exports, "BmAvatarIcon", {
@@ -53,6 +53,18 @@ Object.defineProperty(exports, "BmCard", {
     return _cards.default;
   }
 });
+Object.defineProperty(exports, "BmChat", {
+  enumerable: true,
+  get: function get() {
+    return _chatBody.default;
+  }
+});
+Object.defineProperty(exports, "BmChatHeader", {
+  enumerable: true,
+  get: function get() {
+    return _chatHeader.BmChatHeader;
+  }
+});
 Object.defineProperty(exports, "BmChatbotIcon", {
   enumerable: true,
   get: function get() {
@@ -66,6 +78,18 @@ Object.defineProperty(exports, "BmCheckbox", {
   }
 });
 exports.BmColors = void 0;
+Object.defineProperty(exports, "BmContactCard", {
+  enumerable: true,
+  get: function get() {
+    return _contactCards.default;
+  }
+});
+Object.defineProperty(exports, "BmCounter", {
+  enumerable: true,
+  get: function get() {
+    return _messageCounter.default;
+  }
+});
 Object.defineProperty(exports, "BmEmojiIcon", {
   enumerable: true,
   get: function get() {
@@ -78,6 +102,12 @@ Object.defineProperty(exports, "BmIcons", {
     return _iconStyles.BmIcons;
   }
 });
+Object.defineProperty(exports, "BmInfoTab", {
+  enumerable: true,
+  get: function get() {
+    return _infoTab.default;
+  }
+});
 Object.defineProperty(exports, "BmInput", {
   enumerable: true,
   get: function get() {
@@ -171,7 +201,7 @@ Object.defineProperty(exports, "MainWrapper", {
 
 var _Accordion = _interopRequireDefault(require("./Accordion/Accordion"));
 
-var _avatars = require("./Avatars/avatars");
+var _avatars = _interopRequireDefault(require("./Avatars/avatars"));
 
 var _buttonAlertIcons = require("./Buttons/buttonAlertIcons");
 
@@ -209,10 +239,20 @@ var _checkbox = require("./checkbox");
 
 var _iconStyles = require("./iconStyles");
 
-var _noteBar = require("./NoteBar.js/noteBar");
+var _noteBar = require("./NoteBar/noteBar");
 
 var _MainWrapper = require("../components/MainWrapper");
 
+var _chatBody = _interopRequireDefault(require("../components/ChatBody/chatBody"));
+
+var _chatHeader = require("./ChatHeader/chatHeader");
+
+var _contactCards = _interopRequireDefault(require("./ContactCards/contactCards"));
+
+var _infoTab = _interopRequireDefault(require("./InfoTab/infoTab"));
+
+var _messageCounter = _interopRequireDefault(require("./MessageCounter/messageCounter"));
+
 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/sidebar.js

@@ -19,13 +19,11 @@ 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) } })); }
 
-var BmSideBar = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  max-height: 100%;\n  height: 100%;\n  overflow: auto;\n  max-width: 25%;\n  width: 25%;\n  ", "\n"])), _colors.BmPrimaryWhite, _colors.BmGrey400, ''
-/* border: 0.714rem solid black; */
-);
+var BmSideBar = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  max-height: 100%;\n  height: 100%;\n  overflow: auto;\n  max-width: 20%;\n  width: 20%;\n"])), _colors.BmPrimaryWhite, _colors.BmGrey400);
 
 exports.BmSideBar = BmSideBar;
 
-var BmSideBarSearch = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: flex-start;\n  align-items: center;\n  padding: 1.714rem !important;\n"])));
+var BmSideBarSearch = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: flex-start;\n  align-items: center;\n  padding: 1.714rem !important;\n  flex-wrap: wrap;\n"])));
 
 exports.BmSideBarSearch = BmSideBarSearch;
 var BmSideBarBtnIcon = (0, _styledComponents.default)(_buttonIconsOnly.BmBtnIcon)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: 0.571rem;\n"])));

package/package.json

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

package/src/App.js

@@ -1,21 +1,94 @@
-import React from "react";
-import { Switch, BrowserRouter } from "react-router-dom";
+import React, { useState } from "react";
 import "../src/main.scss";
-import { BmRouteLink, MainWrapper } from "./lib/components";
+import { BmAvatar, BmInput, BmTab, MainWrapper } from "./lib/components";
 import { GlobalStyle } from "./lib/components/globalStyles";
+import { BmSideBar } from "./lib/components/sidebar";
+import "./lib/assets/css/sidebar.css";
+import BmChat from "./lib/components/ChatBody/chatBody";
+import { DoneAll, Home, MoreVert, Person, Phone } from "@material-ui/icons";
+import { BmIcons } from "./lib/components/iconStyles";
+import EmojiEmotionsIcon from "@mui/icons-material/EmojiEmotions";
+import AttachFileIcon from "@mui/icons-material/AttachFile";
+import QuickreplyIcon from "@mui/icons-material/Quickreply";
+import SendIcon from "@mui/icons-material/Send";
+import BmInfoTab from "./lib/components/InfoTab/infoTab";
+import { BmButton } from "./lib/components/Buttons/buttons";
+import {
+  BmCustomizedDropdown,
+  BmDropDownMenu,
+  BmDropDownItem,
+  BmButtonDropdownItem,
+} from "./lib/components/dropdownItems";
+
+import { BmButtonDropDown } from "./lib/components/dropdownButton";
+import { BmListBox } from "./lib/components/Lists/listBox";
+import { BmRowLabel } from "./lib/components/Lists/rowLabels";
 
 export const App = () => {
+  const [dropDownItem, setDropdownItem] = useState(false);
+
   return (
     <>
       <GlobalStyle />
       <MainWrapper>
-        <BrowserRouter>
-          <Switch>
-            <BmRouteLink to="#" color="red">
-              BkhkdxA
-            </BmRouteLink>
-          </Switch>
-        </BrowserRouter>
+        <BmSideBar>
+          <div className="main-sidebar-tabs">
+            <BmTab state="active" className="sidebar-tabs">
+              <h3>Tabs</h3>
+            </BmTab>
+            <BmTab state="inactive" className="sidebar-tabs">
+              <h3>Tabs</h3>
+            </BmTab>
+          </div>
+        </BmSideBar>
+
+        <BmChat>
+          <BmChat.Body>
+            <BmChat.Details
+              state="inbound"
+              session="bot"
+              displayTime={<p>12:00pm</p>}
+              status="sent"
+            >
+              <p>Inbound</p>
+            </BmChat.Details>
+            <BmChat.Details
+              state="outbound"
+              session="live"
+              displayTime={<p>10:00am</p>}
+              status="failed"
+            >
+              <p>Outbound</p>
+            </BmChat.Details>
+          </BmChat.Body>
+          <BmChat.Footer>
+            <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+            <BmIcons icon={<AttachFileIcon />} size="xlarge" />
+            <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
+            <BmInput placeholder="Enter Message" />
+            <BmIcons icon={<SendIcon />} size="xlarge" />
+          </BmChat.Footer>
+        </BmChat>
+        {/* <BmCustomizedDropdown> */}
+        <BmButton>Create Ticket</BmButton>
+        <BmButtonDropDown
+          size="medium"
+          onClick={() => {
+            setDropdownItem(!dropDownItem);
+          }}
+          variant="primary"
+        >
+          Session
+        </BmButtonDropDown>
+        <BmListBox isOpen={dropDownItem}>
+          <BmRowLabel trailingIcon={<Person />} size="large">
+            <h4>Row Label</h4>
+          </BmRowLabel>
+          <BmRowLabel size="large">
+            <h4>Row Label</h4>
+          </BmRowLabel>
+        </BmListBox>
+        {/* </BmCustomizedDropdown> */}
       </MainWrapper>
     </>
   );

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

@@ -0,0 +1,12 @@
+.main-sidebar-tabs {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.main-sidebar-tabs>.sidebar-tabs {
+    padding: 1.714rem;
+    flex: 1;
+}

package/src/lib/components/Avatars/avatars.js

@@ -46,7 +46,7 @@ export const BmAvatarWrapper = styled.div`
     }};
 `;
 
-export const BmAvatar = (props) => {
+const BmAvatar = (props) => {
   const { user, size, color, ...rest } = props;
   return (
     <BmAvatarWrapper user={user} size={size} {...rest}>
@@ -69,3 +69,5 @@ BmAvatar.propTypes = {
   color: PropTypes.string,
   user: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 };
+
+export default BmAvatar;

package/src/lib/components/Avatars/avatars.stories.js

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-anonymous-default-export */
 import React from "react";
-import { BmAvatar } from "./avatars";
+import BmAvatar from "./avatars";
 import { Home } from "@material-ui/icons";
 
 export default {

package/src/lib/components/Buttons/buttonDropdown copy.js

@@ -0,0 +1,147 @@
+import React from "react";
+import { KeyboardArrowDown } from "@material-ui/icons";
+import styled from "styled-components";
+import { BmBtnIcon } from "./buttonIconsOnly";
+import { BmButton } from "./buttons";
+import {
+  BmPrimaryWhite,
+  BmPrimaryBlue,
+  BmSecondaryRed,
+  BmSecondaryDarkGreen,
+  BmGrey400,
+  BmGrey100,
+  BmSecondaryCyan,
+  BmGrey50,
+  BmSecondaryGreen8,
+  BmSecondaryRed8,
+} from "../colors";
+
+const ButtonDropdownWrapper = styled.div`
+  display: flex;
+  &:hover {
+    background: ${({ variant, disabled }) => {
+      if (!disabled) {
+        if (variant === "primary") return `${BmSecondaryCyan}`;
+        if (variant === "neutral") return `${BmGrey50}`;
+        if (variant === "success") return `${BmSecondaryGreen8}`;
+        if (variant === "destructive") return `${BmSecondaryRed8}`;
+        if (!variant) {
+          return `${BmSecondaryCyan}`;
+        }
+      }
+    }};
+    border: 0.071rem solid
+      ${({ variant, disabled }) => {
+        if (!disabled) {
+          if (variant === "secondary") return `${BmSecondaryCyan}`;
+        }
+        return "none";
+      }};
+  }
+  &:active {
+    background: ${({ variant, disabled }) => {
+      if (!disabled) {
+        if (variant === "primary") return `${BmPrimaryBlue}`;
+        if (variant === "neutral") return `${BmGrey100}`;
+        if (variant === "success") return `${BmSecondaryDarkGreen}`;
+        if (variant === "destructive") return `${BmSecondaryRed}`;
+        if (!variant) {
+          return `${BmPrimaryBlue}`;
+        }
+      }
+    }};
+    box-shadow: ${({ variant, disabled }) => {
+      if (!disabled) {
+        if (
+          variant === "primary" ||
+          variant === "success" ||
+          variant === "destructive"
+        )
+          return "inset 0rem 0.125rem 0.25rem rgba(0, 0, 0, 0.25)";
+        if (!variant) {
+          return "inset 0rem 0.125rem 0.25rem rgba(0, 0, 0, 0.25)";
+        }
+      }
+    }};
+    border: 0.071rem solid
+      ${({ variant, disabled }) => {
+        if (!disabled) {
+          if (variant === "secondary") return `${BmPrimaryBlue}`;
+        }
+        return "none";
+      }};
+  }
+`;
+
+const Dropdown = styled(BmBtnIcon)`
+  background: ${({ variant, disabled }) => {
+    if (!disabled) {
+      if (variant === "primary") return `${BmPrimaryBlue}`;
+      if (variant === "secondary") return "none";
+      if (variant === "tertiary") return "none";
+      if (variant === "destructive") return `${BmSecondaryRed}`;
+      if (variant === "success") return `${BmSecondaryDarkGreen}`;
+      if (variant === "neutral") return `${BmPrimaryWhite}`;
+      return `${BmPrimaryBlue}`;
+    } else {
+      if (variant === "primary") return `${BmGrey100}`;
+      if (variant === "secondary") return "none";
+      if (variant === "tertiary") return "none";
+      return `${BmGrey100}`;
+    }
+  }};
+  border: 0.0625rem solid
+    ${({ variant, disabled }) => {
+      if (!disabled) {
+        if (variant === "primary") return `${BmPrimaryBlue}`;
+        if (variant === "secondary") return `${BmPrimaryBlue}`;
+        if (variant === "tertiary") return "transparent";
+        if (variant === "destructive") return `${BmSecondaryRed}`;
+        if (variant === "success") return `${BmSecondaryDarkGreen}`;
+        if (variant === "neutral") return `${BmGrey400}`;
+        return `${BmPrimaryBlue}`;
+      } else {
+        if (variant === "primary") return `${BmGrey100}`;
+        if (variant === "secondary") return `${BmGrey400}`;
+        if (variant === "tertiary") return "transparent";
+      }
+    }};
+
+  border-left: 0.071rem solid
+    ${({ variant, disabled }) => {
+      if (!disabled) {
+        if (variant === "primary") return `${BmPrimaryWhite}`;
+        if (variant === "secondary") return `${BmPrimaryBlue}`;
+        if (variant === "tertiary") return "transparent";
+        if (variant === "destructive") return `${BmSecondaryRed}`;
+        if (variant === "success") return `${BmSecondaryDarkGreen}`;
+        if (variant === "neutral") return `${BmGrey400}`;
+        return `${BmPrimaryWhite}`;
+      } else {
+        if (variant === "primary") return `${BmGrey400}`;
+        if (variant === "secondary") return `${BmGrey400}`;
+        if (variant === "tertiary") return "transparent";
+      }
+    }};
+  border-top-left-radius: 0.071rem;
+  border-bottom-left-radius: 0.071rem;
+  padding: 0rem;
+`;
+
+export const Button = styled(BmButton)`
+  border-top-right-radius: 0.071rem;
+  border-bottom-right-radius: 0.071rem;
+  border-radius: none;
+  border-right: none;
+`;
+
+export const BmButtonDropDown = ({ children, ...rest }) => {
+  return (
+    <>
+      <ButtonDropdownWrapper {...rest}>
+        <Button {...rest}>{children}</Button>
+        <Dropdown {...rest} icon={<KeyboardArrowDown />} />
+      </ButtonDropdownWrapper>
+    </>
+  );
+};

package/src/lib/components/Buttons/buttonDropdown.js

@@ -0,0 +1,13 @@
+import { Home, KeyboardArrowDown } from "@material-ui/icons";
+import styled from "styled-components";
+import { BmBtnIcon } from "./buttonIconsOnly";
+import { BmButton } from "./buttons";
+
+export const BmButtonDropdown = ({ children }) => {
+  return (
+    <div style={{ display: "flex", flexDirection: "row" }}>
+      <BmButton>{children}</BmButton>
+      <BmButton leadingIcon={<KeyboardArrowDown />}></BmButton>
+    </div>
+  );
+};