beem-component 1.3.7 → 1.4.0

package/dist/components/Accordion/Accordion.js

@@ -19,7 +19,7 @@ var _iconStyles = require("../iconStyles");
 
 var _icons = require("@material-ui/icons");
 
-var _excluded = ["children", "disabled", "expandIcon", "Open"],
+var _excluded = ["children", "disabled", "expandIcon", "Open", "expandIconPosition"],
     _excluded2 = ["children", "leadingIcon", "trailingIcon", "size"];
 
 var _templateObject, _templateObject2, _templateObject3;
@@ -30,6 +30,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 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."); }
@@ -85,6 +91,7 @@ var BmAccordion = function BmAccordion(_ref) {
       disabled = _ref.disabled,
       expandIcon = _ref.expandIcon,
       Open = _ref.Open,
+      expandIconPosition = _ref.expandIconPosition,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(Open ? true : false),
@@ -93,12 +100,13 @@ var BmAccordion = function BmAccordion(_ref) {
       setToggle = _useState2[1];
 
   return /*#__PURE__*/_react.default.createElement(BmAccordionWrapper, null, /*#__PURE__*/_react.default.createElement(Provider, {
-    value: {
+    value: _objectSpread({
       toggle: toggle,
       setToggle: setToggle,
       disabled: disabled,
-      expandIcon: expandIcon
-    }
+      expandIcon: expandIcon,
+      expandIconPosition: expandIconPosition
+    }, rest)
   }, children));
 };
 
@@ -114,13 +122,13 @@ BmAccordion.Title = function (_ref2) {
       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, {
+    }), value.expandIconPosition === "left" || value.expandIconPosition === undefined && 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
-    }));
+    }), value.expandIconPosition === "right" && Dropdown(value, rest));
   });
 };
 
@@ -135,6 +143,7 @@ BmAccordion.propTypes = {
   children: _propTypes.default.object,
   size: _propTypes.default.string,
   expandIcon: _propTypes.default.string,
+  expandIconPosition: _propTypes.default.string,
   leadingIcon: _propTypes.default.node,
   trailingIcon: _propTypes.default.node,
   disabled: _propTypes.default.bool,

package/dist/components/Accordion/Accordion.stories.js

@@ -61,6 +61,16 @@ var _default = {
         summary: undefined
       }
     },
+    expandIconPosition: {
+      options: ["left", "right"],
+      control: {
+        type: "select"
+      },
+      description: "Position of the expand Icon",
+      defaultValue: {
+        summary: "left"
+      }
+    },
     leadingIcon: {
       description: "Material-UI icon(optional)",
       defaultValue: {
@@ -81,6 +91,10 @@ var optionSize = {
   medium: "medium",
   large: "large"
 };
+var optionExpandIcon = {
+  left: "left",
+  right: "medium"
+};
 
 var Accordion = function Accordion() {
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Accordion.default, {
@@ -89,7 +103,8 @@ var Accordion = function Accordion() {
   }, /*#__PURE__*/_react.default.createElement(_Accordion.default.Title, {
     leadingIcon: /*#__PURE__*/_react.default.createElement(_icons.Home, null),
     trailingIcon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null),
-    size: (0, _addonKnobs.select)("size", optionSize, "large")
+    size: (0, _addonKnobs.select)("size", optionSize, "large"),
+    expandIconPosition: (0, _addonKnobs.select)("expandIconPosition", optionExpandIcon, "left")
   }, /*#__PURE__*/_react.default.createElement("h3", null, (0, _addonKnobs.text)("children", "Accordion"))), /*#__PURE__*/_react.default.createElement(_Accordion.default.Body, null, "Accordion Body")));
 };
 

package/dist/components/ProgressRing/progressRing.js

@@ -126,8 +126,7 @@ var BmProgressRing = function BmProgressRing(props) {
   var circleRef = (0, _react.useRef)(null);
   var size = props.size,
       progress = props.progress,
-      variant = props.variant,
-      children = props.children;
+      variant = props.variant;
   var initialMeasure = measurement(size);
   circumference = initialMeasure.circumference;
   radius = initialMeasure.radius;

package/dist/components/Tabs/tabs.js

@@ -31,10 +31,11 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 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: 1rem;\n  background: ", ";\n  box-shadow: ", ";\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n  ", "\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"])), _colors.BmPrimaryWhite, function (_ref) {
   var state = _ref.state,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      stateColor = _ref.stateColor;
 
   if (state === "active" && !disabled) {
-    return "inset 0px -3px 0px ".concat(_colors.BmPrimaryBlue);
+    return "inset 0px -3px 0px ".concat(stateColor ? stateColor : _colors.BmPrimaryBlue);
   }
 
   return "none";
@@ -86,6 +87,7 @@ BmTab.propTypes = {
   leadingIcon: _propTypes.default.node,
   state: _propTypes.default.string,
   color: _propTypes.default.string,
+  stateColor: _propTypes.default.string,
   size: _propTypes.default.string,
   disabled: _propTypes.default.bool
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.DisabledTab = exports.BasicTab = void 0;
+exports.default = exports.DisabledTab = exports.ColoredTab = exports.BasicTab = void 0;
 
 var _icons = require("@material-ui/icons");
 
@@ -31,6 +31,15 @@ var _default = {
       },
       description: "State of the Tabs (optional)"
     },
+    stateColor: {
+      control: {
+        type: "text"
+      },
+      description: "Color of the active state",
+      defaultValue: {
+        summary: "primary blue"
+      }
+    },
     size: {
       options: ["small", "medium", "large"],
       control: {
@@ -59,7 +68,7 @@ BasicTab.args = {
   leadingIcon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null),
   trailingIcon: /*#__PURE__*/_react.default.createElement(_icons.KeyboardArrowDown, null),
   disabled: false,
-  state: 'active'
+  state: "active"
 };
 var DisabledTab = MainTab.bind({});
 exports.DisabledTab = DisabledTab;
@@ -68,4 +77,14 @@ DisabledTab.args = {
   leadingIcon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null),
   trailingIcon: /*#__PURE__*/_react.default.createElement(_icons.KeyboardArrowDown, null),
   disabled: true
+};
+var ColoredTab = MainTab.bind({});
+exports.ColoredTab = ColoredTab;
+ColoredTab.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,
+  state: "active",
+  stateColor: "red"
 };

package/dist/components/dropdownButton.js

@@ -35,16 +35,17 @@ var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject
 
 var Drop = (0, _styledComponents.default)(_buttonIconsOnly.BmBtnIcon)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 0.071rem solid\n    ", ";\n    border-left:  0.071rem solid\n    ", ";\n  border-top-left-radius: 0.071rem; */}\n  border-bottom-left-radius: 0.071rem; */}\n  padding: 0rem */}\n"])), function (_ref) {
   var variant = _ref.variant,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      color = _ref.color;
 
   if (!disabled) {
-    if (variant === "primary") return "".concat(_colors.BmPrimaryBlue);
+    if (variant === "primary") return "".concat(color ? color : _colors.BmPrimaryBlue);
     if (variant === "secondary") return "none";
     if (variant === "tertiary") return "none";
     if (variant === "destructive") return "".concat(_colors.BmSecondaryRed);
     if (variant === "success") return "".concat(_colors.BmSecondaryDarkGreen);
     if (variant === "neutral") return "".concat(_colors.BmPrimaryWhite);
-    return "".concat(_colors.BmPrimaryBlue);
+    return "".concat(color ? color : _colors.BmPrimaryBlue);
   } else {
     if (variant === "primary") return "".concat(_colors.BmGrey100);
     if (variant === "secondary") return "none";
@@ -53,16 +54,17 @@ var Drop = (0, _styledComponents.default)(_buttonIconsOnly.BmBtnIcon)(_templateO
   }
 }, function (_ref2) {
   var variant = _ref2.variant,
-      disabled = _ref2.disabled;
+      disabled = _ref2.disabled,
+      color = _ref2.color;
 
   if (!disabled) {
-    if (variant === "primary") return "".concat(_colors.BmPrimaryBlue);
-    if (variant === "secondary") return "".concat(_colors.BmPrimaryBlue);
+    if (variant === "primary") return "".concat(color ? color : _colors.BmPrimaryBlue);
+    if (variant === "secondary") return "".concat(color ? color : _colors.BmPrimaryBlue);
     if (variant === "tertiary") return "transparent";
     if (variant === "destructive") return "".concat(_colors.BmSecondaryRed);
     if (variant === "success") return "".concat(_colors.BmSecondaryDarkGreen);
     if (variant === "neutral") return "".concat(_colors.BmGrey400);
-    return "".concat(_colors.BmPrimaryBlue);
+    return "".concat(color ? color : _colors.BmPrimaryBlue);
   } else {
     if (variant === "primary") return "".concat(_colors.BmGrey100);
     if (variant === "secondary") return "".concat(_colors.BmGrey400);
@@ -70,11 +72,12 @@ var Drop = (0, _styledComponents.default)(_buttonIconsOnly.BmBtnIcon)(_templateO
   }
 }, function (_ref3) {
   var variant = _ref3.variant,
-      disabled = _ref3.disabled;
+      disabled = _ref3.disabled,
+      color = _ref3.color;
 
   if (!disabled) {
     if (variant === "primary") return "".concat(_colors.BmPrimaryWhite);
-    if (variant === "secondary") return "".concat(_colors.BmPrimaryBlue);
+    if (variant === "secondary") return "".concat(color ? color : _colors.BmPrimaryBlue);
     if (variant === "tertiary") return "transparent";
     if (variant === "destructive") return "".concat(_colors.BmSecondaryRed);
     if (variant === "success") return "".concat(_colors.BmSecondaryDarkGreen);
@@ -87,16 +90,7 @@ var Drop = (0, _styledComponents.default)(_buttonIconsOnly.BmBtnIcon)(_templateO
   }
 });
 exports.Drop = Drop;
-var Button = (0, _styledComponents.default)(_buttons.BmButton)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-top-right-radius: 0.071rem; */}\n  border-bottom-right-radius: 0.071rem; */}\n  ", "\n  ", "\n  border-radius: none;\n  border-right: none;\n"])), ""
-/* padding: 0.714rem 1.143rem 0.714rem 1.714rem; */
-, ""
-/* padding: ${({ size }) => {
-if (size === "large") return "0.714rem 1.714rem";
-if (size === "medium") return "0.5rem 1.143rem";
-if (size === "small") return "0.429rem 0.857rem";
-return "0.714rem 1.714rem";
-}}; */
-);
+var Button = (0, _styledComponents.default)(_buttons.BmButton)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-top-right-radius: 0.071rem; */}\n  border-bottom-right-radius: 0.071rem; */}\n  border-radius: none;\n  border-right: none;\n"])));
 exports.Button = Button;
 
 var BmButtonDropDown = function BmButtonDropDown(_ref4) {

package/package.json

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

package/src/App.js

@@ -1,76 +1,20 @@
 import React from "react";
 import "../src/main.scss";
-import {
-  BmButton,
-  BmCard,
-  BmIcons,
-  BmNoteBar,
-  BmTab,
-  BmAccordion,
-  BmBtnIcon,
-  MainWrapper,
-} from "./lib/components";
+import { BmAccordion, BmTab } from "./lib/components";
 import { GlobalStyle } from "./lib/components/globalStyles";
 import "./lib/assets/css/sidebar.scss";
-import BmBanner from "./lib/components/BannerCard/bannerCards";
-import { FileCopyOutlined, Home } from "@material-ui/icons";
-import BmProgressRing from "./lib/components/ProgressRing/progressRing";
 
 export const App = () => {
   return (
     <>
       <GlobalStyle />
       {/* <MainWrapper> */}
-      <BmNoteBar type="warning" color="purple">
-        Hello
-      </BmNoteBar>
-      <BmButton color="purple" variant="neutral" leadingIcon={<Home />}>
-        Hello
-      </BmButton>
-      <BmBtnIcon icon={<Home />} color="red" />
-      <BmButton color="pink" variant="secondary">
-        Hello
-      </BmButton>
-      <BmButton color="pink" variant="tertiary" disabled>
-        Hello
-      </BmButton>
-      <BmBanner
-        border="dashed"
-        content="center"
-        bannerBg="default"
-        closeButton
-        color="red"
-      >
-        <BmIcons icon={<FileCopyOutlined />} />
-        <h3>Message Title</h3>
-        <p>Message Text</p>
-        <div>
-          <BmButton variant="neutral" size="small">
-            Label
-          </BmButton>
-        </div>
-      </BmBanner>
-      <BmCard>
-        <BmCard.Header>
-          <h3>Card Header</h3>
-        </BmCard.Header>
-        <BmCard.Body>
+      <BmAccordion>
+        <BmAccordion.Title>
           <p>Hello</p>
-          <BmProgressRing progress="70" size="50" />
-        </BmCard.Body>
-        <BmCard.Footer>Card Footer</BmCard.Footer>
-      </BmCard>
-      <BmProgressRing progress="70" size="45" />
-      <BmTab state="active">
-        <h3>Tabs</h3>
-      </BmTab>
-      <BmNoteBar closeButton>
-        <p>Hello</p>
-      </BmNoteBar>
-      <BmAccordion Open>
-        <BmAccordion.Title>Hello</BmAccordion.Title>
-        <BmAccordion.Body>Helloooo</BmAccordion.Body>
+        </BmAccordion.Title>
       </BmAccordion>
+      <BmTab state="active" stateColor="red">Hello</BmTab>
       {/* </MainWrapper> */}
     </>
   );

package/src/lib/components/Accordion/Accordion.js

@@ -44,12 +44,12 @@ const BmAccordionWrapper = styled.div`
   flex-direction: column;
 `;
 
-const BmAccordion = ({ children, disabled, expandIcon, Open, ...rest }) => {
+const BmAccordion = ({ children, disabled, expandIcon, Open, expandIconPosition, ...rest }) => {
   const [toggle, setToggle] = useState(Open ? true : false);
 
   return (
     <BmAccordionWrapper>
-      <Provider value={{ toggle, setToggle, disabled, expandIcon }}>
+      <Provider value={{ toggle, setToggle, disabled, expandIcon, expandIconPosition, ...rest }}>
         {children}
       </Provider>
     </BmAccordionWrapper>
@@ -74,10 +74,12 @@ BmAccordion.Title = ({
               : value.setToggle(false)
           }
         >
-          {Dropdown(value, rest)}
+          {value.expandIconPosition === "left" ||
+          (value.expandIconPosition === undefined && Dropdown(value, rest))}
           {leadingIcon && <BmIcons icon={leadingIcon} size={size} />}
           <BmAccordionDetails>{children}</BmAccordionDetails>
           {trailingIcon && <BmIcons icon={trailingIcon} size={size} />}
+          {value.expandIconPosition === "right" && Dropdown(value, rest)}
         </BmAccordionMenu>
       )}
     </Consumer>
@@ -94,6 +96,7 @@ BmAccordion.propTypes = {
   children: PropTypes.object,
   size: PropTypes.string,
   expandIcon: PropTypes.string,
+  expandIconPosition: PropTypes.string,
   leadingIcon: PropTypes.node,
   trailingIcon: PropTypes.node,
   disabled: PropTypes.bool,

package/src/lib/components/Accordion/Accordion.stories.js

@@ -33,6 +33,12 @@ export default {
       description: "'none' or Material-UI icon (optional)",
       defaultValue: { summary: undefined },
     },
+    expandIconPosition: {
+      options: ["left", "right"],
+      control: { type: "select" },
+      description: "Position of the expand Icon",
+      defaultValue: { summary: "left" },
+    },
     leadingIcon: {
       description: "Material-UI icon(optional)",
       defaultValue: { summary: undefined },
@@ -50,14 +56,27 @@ const optionSize = {
   large: "large",
 };
 
+const optionExpandIcon = {
+  left: "left",
+  right: "medium",
+};
+
 export const Accordion = () => {
   return (
     <div>
-      <BmAccordion disabled={boolean("disabled", false)} Open={boolean("disabled", false)}>
+      <BmAccordion
+        disabled={boolean("disabled", false)}
+        Open={boolean("disabled", false)}
+      >
         <BmAccordion.Title
           leadingIcon={<Home />}
           trailingIcon={<Favorite />}
           size={select("size", optionSize, "large")}
+          expandIconPosition={select(
+            "expandIconPosition",
+            optionExpandIcon,
+            "left",
+          )}
         >
           <h3>{text("children", "Accordion")}</h3>
         </BmAccordion.Title>

package/src/lib/components/ProgressRing/progressRing.js

@@ -88,7 +88,7 @@ const Text = styled.text`
 const BmProgressRing = (props) => {
   const [offset, setOffset] = useState(0);
   const circleRef = useRef(null);
-  const { size, progress, variant, children } = props;
+  const { size, progress, variant } = props;
 
   const initialMeasure = measurement(size);
 

package/src/lib/components/Tabs/tabs.js

@@ -11,9 +11,9 @@ const BmTabWrapper = styled.div`
   align-items: center;
   padding: 1rem;
   background: ${BmPrimaryWhite};
-  box-shadow: ${({ state, disabled }) => {
+  box-shadow: ${({ state, disabled, stateColor }) => {
     if (state === "active" && !disabled) {
-      return `inset 0px -3px 0px ${BmPrimaryBlue}`;
+      return `inset 0px -3px 0px ${stateColor ? stateColor : BmPrimaryBlue}`;
     }
     return "none";
   }};
@@ -86,6 +86,7 @@ BmTab.propTypes = {
   leadingIcon: PropTypes.node,
   state: PropTypes.string,
   color: PropTypes.string,
+  stateColor: PropTypes.string,
   size: PropTypes.string,
   disabled: PropTypes.bool,
 };

package/src/lib/components/Tabs/tabs.stories.js

@@ -16,6 +16,11 @@ export default {
       control: { type: "select" },
       description: "State of the Tabs (optional)",
     },
+    stateColor: {
+      control: { type: "text" },
+      description: "Color of the active state",
+      defaultValue: { summary: "primary blue" },
+    },
     size: {
       options: ["small", "medium", "large"],
       control: { type: "select" },
@@ -23,8 +28,7 @@ export default {
       defaultValue: { summary: "large" },
     },
     disabled: {
-      description:
-        "Disabled tab",
+      description: "Disabled tab",
     },
   },
 };
@@ -37,7 +41,7 @@ BasicTab.args = {
   leadingIcon: <Favorite />,
   trailingIcon: <KeyboardArrowDown />,
   disabled: false,
-  state: 'active',
+  state: "active",
 };
 
 export const DisabledTab = MainTab.bind({});
@@ -47,3 +51,13 @@ DisabledTab.args = {
   trailingIcon: <KeyboardArrowDown />,
   disabled: true,
 };
+
+export const ColoredTab = MainTab.bind({});
+ColoredTab.args = {
+  children: <h3>Tabs</h3>,
+  leadingIcon: <Favorite />,
+  trailingIcon: <KeyboardArrowDown />,
+  disabled: false,
+  state: "active",
+  stateColor: "red",
+};

package/src/lib/components/dropdownButton.js

@@ -19,15 +19,15 @@ const Wrapper = styled.div`
 `;
 
 export const Drop = styled(BmBtnIcon)`
-  background: ${({ variant, disabled }) => {
+  background: ${({ variant, disabled, color }) => {
     if (!disabled) {
-      if (variant === "primary") return `${BmPrimaryBlue}`;
+      if (variant === "primary") return `${color ? color : 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}`;
+      return `${color ? color : BmPrimaryBlue}`
     } else {
       if (variant === "primary") return `${BmGrey100}`;
       if (variant === "secondary") return "none";
@@ -36,15 +36,15 @@ export const Drop = styled(BmBtnIcon)`
     }
   }};
   border: 0.071rem solid
-    ${({ variant, disabled }) => {
+    ${({ variant, disabled, color }) => {
       if (!disabled) {
-        if (variant === "primary") return `${BmPrimaryBlue}`;
-        if (variant === "secondary") return `${BmPrimaryBlue}`;
+        if (variant === "primary") return `${color ? color : BmPrimaryBlue}`
+        if (variant === "secondary") return `${color ? color : BmPrimaryBlue}`
         if (variant === "tertiary") return "transparent";
         if (variant === "destructive") return `${BmSecondaryRed}`;
         if (variant === "success") return `${BmSecondaryDarkGreen}`;
         if (variant === "neutral") return `${BmGrey400}`;
-        return `${BmPrimaryBlue}`;
+        return `${color ? color : BmPrimaryBlue}`
       } else {
         if (variant === "primary") return `${BmGrey100}`;
         if (variant === "secondary") return `${BmGrey400}`;
@@ -52,10 +52,10 @@ export const Drop = styled(BmBtnIcon)`
       }
     }};
     border-left:  0.071rem solid
-    ${({ variant, disabled }) => {
+    ${({ variant, disabled, color }) => {
       if (!disabled) {
         if (variant === "primary") return `${BmPrimaryWhite}`;
-        if (variant === "secondary") return `${BmPrimaryBlue}`;
+        if (variant === "secondary") return `${color ? color : BmPrimaryBlue}`
         if (variant === "tertiary") return "transparent";
         if (variant === "destructive") return `${BmSecondaryRed}`;
         if (variant === "success") return `${BmSecondaryDarkGreen}`;
@@ -75,15 +75,6 @@ export const Drop = styled(BmBtnIcon)`
 export const Button = styled(BmButton)`
   border-top-right-radius: 0.071rem; */}
   border-bottom-right-radius: 0.071rem; */}
-  ${"" /* padding: 0.714rem 1.143rem 0.714rem 1.714rem; */}
-  ${
-    "" /* padding: ${({ size }) => {
-    if (size === "large") return "0.714rem 1.714rem";
-    if (size === "medium") return "0.5rem 1.143rem";
-    if (size === "small") return "0.429rem 0.857rem";
-    return "0.714rem 1.714rem";
-  }}; */
-  }
   border-radius: none;
   border-right: none;
 `;