beem-component 1.3.6 → 1.3.9

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/BannerCard/bannerCards.js

@@ -61,9 +61,12 @@ var BannerCardWrapper = _styledComponents.default.div(_templateObject || (_templ
   if (border === "dashed") return "dashed";
   if (border === "solid") return "solid";
   return "none";
-}, _colors.BmPrimaryBlue, function (_ref3) {
-  var content = _ref3.content,
-      closeButton = _ref3.closeButton;
+}, function (_ref3) {
+  var color = _ref3.color;
+  return color ? color : _colors.BmPrimaryBlue;
+}, function (_ref4) {
+  var content = _ref4.content,
+      closeButton = _ref4.closeButton;
 
   if (!closeButton) {
     if (content === "center") return "center";
@@ -71,8 +74,8 @@ var BannerCardWrapper = _styledComponents.default.div(_templateObject || (_templ
     if (content === "right") return "flex-end";
     return "center";
   }
-}, function (_ref4) {
-  var bannerBg = _ref4.bannerBg;
+}, function (_ref5) {
+  var bannerBg = _ref5.bannerBg;
   if (bannerBg === "default") return "".concat(_colors.BmGrey50);
   if (!bannerBg) return "none";
   return bannerBg;
@@ -80,10 +83,10 @@ var BannerCardWrapper = _styledComponents.default.div(_templateObject || (_templ
 
 var BannerComponent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
 
-var BmBanner = function BmBanner(_ref5) {
-  var closeButton = _ref5.closeButton,
-      children = _ref5.children,
-      rest = _objectWithoutProperties(_ref5, _excluded);
+var BmBanner = function BmBanner(_ref6) {
+  var closeButton = _ref6.closeButton,
+      children = _ref6.children,
+      rest = _objectWithoutProperties(_ref6, _excluded);
 
   var _useState = (0, _react.useState)(true),
       _useState2 = _slicedToArray(_useState, 2),

package/dist/components/Buttons/Stories/basicbutton.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.BasicButton = void 0;
+exports.default = exports.ColoredButton = exports.BasicButton = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -44,6 +44,9 @@ var _default = {
     trailingIcon: {
       description: "Material UI Icons"
     },
+    color: {
+      description: "Color of the Button"
+    },
     children: {
       description: "Text of the button",
       default: "Button"
@@ -64,4 +67,14 @@ BasicButton.args = {
   children: "Button",
   leadingIcon: /*#__PURE__*/_react.default.createElement(_icons.Home, null),
   trailingIcon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null)
+};
+var ColoredButton = MainButton.bind({});
+exports.ColoredButton = ColoredButton;
+ColoredButton.args = {
+  variant: "primary",
+  size: "large",
+  children: "Button",
+  leadingIcon: /*#__PURE__*/_react.default.createElement(_icons.Home, null),
+  trailingIcon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null),
+  color: "pink"
 };

package/dist/components/Buttons/buttonIconsOnly.js

@@ -31,7 +31,8 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var BeemButtonIcon = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n  border: 0.071rem solid\n    ", ";\n  box-sizing: border-box;\n  border-radius: 0.25rem;\n  padding: 0rem;\n"])), function (_ref) {
   var variant = _ref.variant,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      color = _ref.color;
 
   if (!disabled) {
     if (variant === "active") return "".concat(_colors.BmPrimaryBlue);
@@ -39,16 +40,17 @@ var BeemButtonIcon = _styledComponents.default.button(_templateObject || (_templ
     if (variant === "destructive") return "".concat(_colors.BmSecondaryRed);
     if (variant === "success") return "".concat(_colors.BmSecondaryDarkGreen);
     if (variant === "neutral") return "".concat(_colors.BmPrimaryWhite);
-    if (variant === "primary") return "".concat(_colors.BmPrimaryBlue);
+    if (variant === "primary") return "".concat(color ? color : _colors.BmPrimaryBlue);
     if (variant === "secondary") return "".concat(_colors.BmPrimaryWhite);
     if (variant === "tertiary") return "".concat(_colors.BmPrimaryWhite);
-    return "".concat(_colors.BmPrimaryBlue);
+    return "".concat(color ? color : _colors.BmPrimaryBlue);
   } else {
     return "".concat(_colors.BmGrey100);
   }
 }, function (_ref2) {
   var variant = _ref2.variant,
-      disabled = _ref2.disabled;
+      disabled = _ref2.disabled,
+      color = _ref2.color;
 
   if (!disabled) {
     if (variant === "active") return "".concat(_colors.BmPrimaryBlue);
@@ -56,10 +58,10 @@ var BeemButtonIcon = _styledComponents.default.button(_templateObject || (_templ
     if (variant === "destructive") return "".concat(_colors.BmSecondaryRed);
     if (variant === "success") return "".concat(_colors.BmSecondaryDarkGreen);
     if (variant === "neutral") return "".concat(_colors.BmGrey400);
-    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 "".concat(_colors.BmPrimaryWhite);
-    return "".concat(_colors.BmPrimaryBlue);
+    return "".concat(color ? color : _colors.BmPrimaryBlue);
   } else {
     return "".concat(_colors.BmGrey100);
   }
@@ -79,6 +81,7 @@ var BmBtnIcon = function BmBtnIcon(props) {
       rest = _objectWithoutProperties(props, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(BeemButtonIcon, _extends({
+    color: color,
     size: size,
     variant: variant,
     disabled: disabled

package/dist/components/Buttons/buttons.js

@@ -11,6 +11,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _polished = require("polished");
+
 var _colors = require("../colors");
 
 var _iconStyles = require("../iconStyles");
@@ -41,15 +43,14 @@ var ButtonText = _styledComponents.default.div(_templateObject || (_templateObje
   var variant = _ref2.variant,
       disabled = _ref2.disabled,
       color = _ref2.color;
-  if (color) return color;
 
   if (!disabled) {
     if (variant === "primary") return "".concat(_colors.BmPrimaryWhite);
-    if (variant === "secondary") return "".concat(_colors.BmPrimaryBlue);
-    if (variant === "tertiary") return "".concat(_colors.BmPrimaryBlue);
+    if (variant === "secondary") return "".concat(color ? color : _colors.BmPrimaryBlue);
+    if (variant === "tertiary") return "".concat(color ? color : _colors.BmPrimaryBlue);
     if (variant === "destructive") return "".concat(_colors.BmPrimaryWhite);
     if (variant === "success") return "".concat(_colors.BmPrimaryWhite);
-    if (variant === "neutral") return "".concat(_colors.BmPrimaryBlue);
+    if (variant === "neutral") return "".concat(color ? color : _colors.BmPrimaryBlue);
     return "".concat(_colors.BmPrimaryWhite);
   } else {
     return "".concat(_colors.BmGrey400);
@@ -64,16 +65,17 @@ var BeemButton = _styledComponents.default.button(_templateObject2 || (_template
   return "0.625rem 1.5rem";
 }, function (_ref4) {
   var variant = _ref4.variant,
-      disabled = _ref4.disabled;
+      disabled = _ref4.disabled,
+      color = _ref4.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";
@@ -82,16 +84,17 @@ var BeemButton = _styledComponents.default.button(_templateObject2 || (_template
   }
 }, function (_ref5) {
   var variant = _ref5.variant,
-      disabled = _ref5.disabled;
+      disabled = _ref5.disabled,
+      color = _ref5.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);
@@ -99,39 +102,42 @@ var BeemButton = _styledComponents.default.button(_templateObject2 || (_template
   }
 }, function (_ref6) {
   var variant = _ref6.variant,
-      disabled = _ref6.disabled;
+      disabled = _ref6.disabled,
+      color = _ref6.color;
 
   if (!disabled) {
-    if (variant === "primary") return "".concat(_colors.BmSecondaryCyan);
+    if (variant === "primary") return "".concat((0, _polished.darken)(0.1, color ? color : _colors.BmPrimaryBlue));
     if (variant === "neutral") return "".concat(_colors.BmGrey50);
     if (variant === "success") return "".concat(_colors.BmSecondaryGreen8);
     if (variant === "destructive") return "".concat(_colors.BmSecondaryRed8);
 
     if (!variant) {
-      return "".concat(_colors.BmSecondaryCyan);
+      return "".concat((0, _polished.darken)(0.1, color ? color : _colors.BmPrimaryBlue));
     }
   }
 }, function (_ref7) {
   var variant = _ref7.variant,
-      disabled = _ref7.disabled;
+      disabled = _ref7.disabled,
+      color = _ref7.color;
 
   if (!disabled) {
-    if (variant === "secondary") return "".concat(_colors.BmSecondaryCyan);
+    if (variant === "secondary") return "".concat((0, _polished.darken)(0.1, color ? color : _colors.BmPrimaryBlue));
   }
 
   return "none";
 }, function (_ref8) {
   var variant = _ref8.variant,
-      disabled = _ref8.disabled;
+      disabled = _ref8.disabled,
+      color = _ref8.color;
 
   if (!disabled) {
-    if (variant === "primary") return "".concat(_colors.BmPrimaryBlue);
+    if (variant === "primary") return "".concat((0, _polished.darken)(0.1, color ? color : _colors.BmPrimaryBlue));
     if (variant === "neutral") return "".concat(_colors.BmGrey100);
     if (variant === "success") return "".concat(_colors.BmSecondaryDarkGreen);
     if (variant === "destructive") return "".concat(_colors.BmSecondaryRed);
 
     if (!variant) {
-      return "".concat(_colors.BmPrimaryBlue);
+      return "".concat((0, _polished.darken)(0.1, color ? color : _colors.BmPrimaryBlue));
     }
   }
 }, function (_ref9) {
@@ -147,28 +153,29 @@ var BeemButton = _styledComponents.default.button(_templateObject2 || (_template
   }
 }, function (_ref10) {
   var variant = _ref10.variant,
-      disabled = _ref10.disabled;
+      disabled = _ref10.disabled,
+      color = _ref10.color;
 
   if (!disabled) {
-    if (variant === "secondary") return "".concat(_colors.BmPrimaryBlue);
+    if (variant === "secondary") return "".concat((0, _polished.darken)(0.1, color ? color : _colors.BmPrimaryBlue));
   }
 
   return "none";
 }, ButtonText, function (_ref11) {
   var variant = _ref11.variant,
-      disabled = _ref11.disabled;
+      disabled = _ref11.disabled,
+      color = _ref11.color;
 
   if (!disabled) {
-    if (variant === "secondary") return "".concat(_colors.BmSecondaryCyan);
-    if (variant === "tertiary") return "".concat(_colors.BmSecondaryCyan);
+    if (variant === "secondary" || variant === "tertiary") return "".concat((0, _polished.darken)(0.1, color ? color : _colors.BmPrimaryBlue));
   }
 }, ButtonText, function (_ref12) {
   var variant = _ref12.variant,
-      disabled = _ref12.disabled;
+      disabled = _ref12.disabled,
+      color = _ref12.color;
 
   if (!disabled) {
-    if (variant === "secondary") return "".concat(_colors.BmPrimaryBlue);
-    if (variant === "tertiary") return "".concat(_colors.BmPrimaryBlue);
+    if (variant === "secondary" || variant === "tertiary") return "".concat((0, _polished.darken)(0.1, color ? color : _colors.BmPrimaryBlue));
   }
 });
 

package/dist/components/Lists/listHeader.stories.js

@@ -37,7 +37,7 @@ var _default = {
       }
     },
     color: {
-      description: "Color of the Icon"
+      description: "Color of the Icon and Border"
     },
     children: {
       description: "List header text"

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/dist/components/iconStyles.js

@@ -40,17 +40,16 @@ var ButtonIcon = {
       var variant = _ref.variant,
           disabled = _ref.disabled,
           color = _ref.color;
-      if (color) return color;
 
       if (!disabled) {
         if (variant === "active") return "".concat(_colors.BmPrimaryWhite);
         if (variant === "enabled") return "".concat(_colors.BmPrimaryBlack);
         if (variant === "destructive") return "".concat(_colors.BmPrimaryWhite);
         if (variant === "success") return "".concat(_colors.BmPrimaryWhite);
-        if (variant === "neutral") return "".concat(_colors.BmPrimaryBlue);
+        if (variant === "neutral") return "".concat(color ? color : _colors.BmPrimaryBlue);
         if (variant === "primary") return "".concat(_colors.BmPrimaryWhite);
-        if (variant === "secondary") return "".concat(_colors.BmPrimaryBlue);
-        if (variant === "tertiary") return "".concat(_colors.BmPrimaryBlue);
+        if (variant === "secondary") return "".concat(color ? color : _colors.BmPrimaryBlue);
+        if (variant === "tertiary") return "".concat(color ? color : _colors.BmPrimaryBlue);
         return "".concat(_colors.BmPrimaryWhite);
       } else {
         return "".concat(_colors.BmGrey400);
@@ -69,8 +68,8 @@ var ButtonIcon = {
         if (variant === "success") return "".concat(_colors.BmPrimaryWhite);
         if (variant === "neutral") return "".concat(_colors.BmPrimaryBlue);
         if (variant === "primary") return "".concat(_colors.BmPrimaryWhite);
-        if (variant === "secondary") return "".concat(_colors.BmPrimaryBlue);
-        if (variant === "tertiary") return "".concat(_colors.BmPrimaryBlue);
+        if (variant === "secondary") return "".concat(_color ? _color : _colors.BmPrimaryBlue);
+        if (variant === "tertiary") return "".concat(_color ? _color : _colors.BmPrimaryBlue);
         return "".concat(_colors.BmPrimaryWhite);
       } else {
         return "".concat(_colors.BmGrey400);

package/dist/components/text.js

@@ -3,18 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.p = exports.input = exports.h4 = exports.h3 = exports.h2 = exports.h1 = exports.a = void 0;
+exports.p = exports.input = exports.h5 = exports.h4 = exports.h3 = exports.h2 = exports.h1 = exports.a = void 0;
 
 var _typography = require("./typography");
 
 var h1 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 2.571rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 exports.h1 = h1;
-var h2 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.714rem;\ntext-align: center;\nletter-spacing: -0.02em;\nmargin: 0rem;");
+var h2 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.714rem;\nletter-spacing: -0.02em;\nmargin: 0rem;");
 exports.h2 = h2;
 var h3 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 exports.h3 = h3;
 var h4 = " font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 exports.h4 = h4;
+var h5 = " font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+exports.h5 = h5;
 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;");

package/package.json

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

package/src/App.js

@@ -1,55 +1,20 @@
 import React from "react";
 import "../src/main.scss";
 import {
-  BmButton,
-  BmCard,
-  BmIcons,
-  BmNoteBar,
-  BmTab,
   BmAccordion,
-  MainWrapper,
 } from "./lib/components";
 import { GlobalStyle } from "./lib/components/globalStyles";
 import "./lib/assets/css/sidebar.scss";
-import BmBanner from "./lib/components/BannerCard/bannerCards";
-import { FileCopyOutlined } from "@material-ui/icons";
-import BmProgressRing from "./lib/components/ProgressRing/progressRing";
 
 export const App = () => {
   return (
     <>
       <GlobalStyle />
       {/* <MainWrapper> */}
-      <BmBanner border="dashed" content="center" bannerBg="default" closeButton>
-        <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>
       {/* </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/BannerCard/bannerCards.js

@@ -19,7 +19,9 @@ const BannerCardWrapper = styled.div`
       if (border === "solid") return "solid";
       return "none";
     }}
-    ${BmPrimaryBlue};
+    ${({ color }) => {
+      return color ? color : BmPrimaryBlue;
+    }};
   border-radius: 0.25rem;
   align-items: ${({ content, closeButton }) => {
     if (!closeButton) {

package/src/lib/components/Buttons/Stories/basicbutton.stories.js

@@ -32,6 +32,9 @@ export default {
     trailingIcon: {
       description: "Material UI Icons",
     },
+    color: {
+      description: "Color of the Button",
+    },
     children: {
       description: "Text of the button",
       default: "Button",
@@ -49,3 +52,13 @@ BasicButton.args = {
   leadingIcon: <Home />,
   trailingIcon: <Favorite />,
 };
+
+export const ColoredButton = MainButton.bind({});
+ColoredButton.args = {
+  variant: "primary",
+  size: "large",
+  children: "Button",
+  leadingIcon: <Home />,
+  trailingIcon: <Favorite />,
+  color: "pink",
+};

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

@@ -18,33 +18,33 @@ const BeemButtonIcon = styled.button`
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  background: ${({ variant, disabled }) => {
+  background: ${({ variant, disabled, color }) => {
     if (!disabled) {
       if (variant === "active") return `${BmPrimaryBlue}`;
       if (variant === "enabled") return `${BmGrey50}`;
       if (variant === "destructive") return `${BmSecondaryRed}`;
       if (variant === "success") return `${BmSecondaryDarkGreen}`;
       if (variant === "neutral") return `${BmPrimaryWhite}`;
-      if (variant === "primary") return `${BmPrimaryBlue}`;
+      if (variant === "primary") return `${color ? color : BmPrimaryBlue}`;
       if (variant === "secondary") return `${BmPrimaryWhite}`;
       if (variant === "tertiary") return `${BmPrimaryWhite}`;
-      return `${BmPrimaryBlue}`;
+      return `${color ? color : BmPrimaryBlue}`;
     } else {
       return `${BmGrey100}`;
     }
   }};
   border: 0.071rem solid
-    ${({ variant, disabled }) => {
+    ${({ variant, disabled, color }) => {
       if (!disabled) {
         if (variant === "active") return `${BmPrimaryBlue}`;
         if (variant === "enabled") return `${BmGrey50}`;
         if (variant === "destructive") return `${BmSecondaryRed}`;
         if (variant === "success") return `${BmSecondaryDarkGreen}`;
         if (variant === "neutral") return `${BmGrey400}`;
-        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 `${BmPrimaryWhite}`;
-        return `${BmPrimaryBlue}`;
+        return `${color ? color : BmPrimaryBlue}`;
       } else {
         return `${BmGrey100}`;
       }
@@ -62,7 +62,7 @@ export const BmBtnIcon = (props) => {
   const { variant, size, disabled, children, icon, color, ...rest } = props;
 
   return (
-    <BeemButtonIcon size={size} variant={variant} disabled={disabled} {...rest}>
+    <BeemButtonIcon color={color} size={size} variant={variant} disabled={disabled} {...rest}>
       {icon && (
         <BmIconWrapper>
           <BmButtonIcon

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

@@ -1,6 +1,8 @@
 import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
+import { darken } from "polished";
+
 //TODO: Button Links Pending
 import {
   BmPrimaryWhite,
@@ -10,7 +12,6 @@ import {
   BmGrey400,
   BmGrey100,
   BmGrey50,
-  BmSecondaryCyan,
   BmSecondaryGreen8,
   BmSecondaryRed8,
 } from "../colors";
@@ -26,14 +27,13 @@ const ButtonText = styled.div`
   }}
   text-align: center;
   color: ${({ variant, disabled, color }) => {
-    if (color) return color;
     if (!disabled) {
       if (variant === "primary") return `${BmPrimaryWhite}`;
-      if (variant === "secondary") return `${BmPrimaryBlue}`;
-      if (variant === "tertiary") return `${BmPrimaryBlue}`;
+      if (variant === "secondary") return `${color ? color : BmPrimaryBlue}`
+      if (variant === "tertiary") return `${color ? color : BmPrimaryBlue}`
       if (variant === "destructive") return `${BmPrimaryWhite}`;
       if (variant === "success") return `${BmPrimaryWhite}`;
-      if (variant === "neutral") return `${BmPrimaryBlue}`;
+      if (variant === "neutral") return `${color ? color : BmPrimaryBlue}`
       return `${BmPrimaryWhite}`;
     } else {
       return `${BmGrey400}`;
@@ -54,15 +54,15 @@ const BeemButton = styled.button`
     if (size === "small") return "0.375rem 0.75rem";
     return "0.625rem 1.5rem";
   }};
-  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";
@@ -72,15 +72,15 @@ const BeemButton = styled.button`
   }};
 
   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}`;
@@ -89,34 +89,37 @@ const BeemButton = styled.button`
     }};
 
   &:hover {
-    background: ${({ variant, disabled }) => {
+    background: ${({ variant, disabled, color }) => {
       if (!disabled) {
-        if (variant === "primary") return `${BmSecondaryCyan}`;
+        if (variant === "primary")
+          return `${darken(0.1, color ? color : BmPrimaryBlue)}`;
         if (variant === "neutral") return `${BmGrey50}`;
         if (variant === "success") return `${BmSecondaryGreen8}`;
         if (variant === "destructive") return `${BmSecondaryRed8}`;
         if (!variant) {
-          return `${BmSecondaryCyan}`;
+          return `${darken(0.1, color ? color : BmPrimaryBlue)}`;
         }
       }
     }};
     border: 0.071rem solid
-      ${({ variant, disabled }) => {
+      ${({ variant, disabled, color }) => {
         if (!disabled) {
-          if (variant === "secondary") return `${BmSecondaryCyan}`;
+          if (variant === "secondary")
+            return `${darken(0.1, color ? color : BmPrimaryBlue)}`;
         }
         return "none";
       }};
   }
   &:active {
-    background: ${({ variant, disabled }) => {
+    background: ${({ variant, disabled, color }) => {
       if (!disabled) {
-        if (variant === "primary") return `${BmPrimaryBlue}`;
+        if (variant === "primary")
+          return `${darken(0.1, color ? color : BmPrimaryBlue)}`;
         if (variant === "neutral") return `${BmGrey100}`;
         if (variant === "success") return `${BmSecondaryDarkGreen}`;
         if (variant === "destructive") return `${BmSecondaryRed}`;
         if (!variant) {
-          return `${BmPrimaryBlue}`;
+          return `${darken(0.1, color ? color : BmPrimaryBlue)}`;
         }
       }
     }};
@@ -134,27 +137,28 @@ const BeemButton = styled.button`
       }
     }};
     border: 0.071rem solid
-      ${({ variant, disabled }) => {
+      ${({ variant, disabled, color }) => {
         if (!disabled) {
-          if (variant === "secondary") return `${BmPrimaryBlue}`;
+          if (variant === "secondary")
+            return `${darken(0.1, color ? color : BmPrimaryBlue)}`;
         }
         return "none";
       }};
   }
 
   &:hover ${ButtonText} {
-    color: ${({ variant, disabled }) => {
+    color: ${({ variant, disabled, color }) => {
       if (!disabled) {
-        if (variant === "secondary") return `${BmSecondaryCyan}`;
-        if (variant === "tertiary") return `${BmSecondaryCyan}`;
+        if (variant === "secondary" || variant === "tertiary")
+          return `${darken(0.1, color ? color : BmPrimaryBlue)}`;
       }
     }};
   }
   &:active ${ButtonText} {
-    color: ${({ variant, disabled }) => {
+    color: ${({ variant, disabled, color }) => {
       if (!disabled) {
-        if (variant === "secondary") return `${BmPrimaryBlue}`;
-        if (variant === "tertiary") return `${BmPrimaryBlue}`;
+        if (variant === "secondary" || variant === "tertiary")
+          return `${darken(0.1, color ? color : BmPrimaryBlue)}`;
       }
     }};
   }

package/src/lib/components/Lists/listHeader.stories.js

@@ -19,7 +19,7 @@ export default {
       defaultValue: { summary: undefined },
     },
     color: {
-      description: "Color of the Icon",
+      description: "Color of the Icon and Border",
     },
     children: {
       description: "List header text",

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;
 `;

package/src/lib/components/iconStyles.js

@@ -27,16 +27,15 @@ const ButtonIcon = {
     height: (props) => size(props),
     width: (props) => size(props),
     fill: ({ variant, disabled, color }) => {
-      if (color) return color;
       if (!disabled) {
         if (variant === "active") return `${BmPrimaryWhite}`;
         if (variant === "enabled") return `${BmPrimaryBlack}`;
         if (variant === "destructive") return `${BmPrimaryWhite}`;
         if (variant === "success") return `${BmPrimaryWhite}`;
-        if (variant === "neutral") return `${BmPrimaryBlue}`;
+        if (variant === "neutral") return `${color ? color : BmPrimaryBlue}`;
         if (variant === "primary") return `${BmPrimaryWhite}`;
-        if (variant === "secondary") return `${BmPrimaryBlue}`;
-        if (variant === "tertiary") return `${BmPrimaryBlue}`;
+        if (variant === "secondary") return `${color ? color : BmPrimaryBlue}`;
+        if (variant === "tertiary") return `${color ? color : BmPrimaryBlue}`;
         return `${BmPrimaryWhite}`;
       } else {
         return `${BmGrey400}`;
@@ -51,8 +50,8 @@ const ButtonIcon = {
         if (variant === "success") return `${BmPrimaryWhite}`;
         if (variant === "neutral") return `${BmPrimaryBlue}`;
         if (variant === "primary") return `${BmPrimaryWhite}`;
-        if (variant === "secondary") return `${BmPrimaryBlue}`;
-        if (variant === "tertiary") return `${BmPrimaryBlue}`;
+        if (variant === "secondary") return `${color ? color : BmPrimaryBlue}`;
+        if (variant === "tertiary") return `${color ? color : BmPrimaryBlue}`;
         return `${BmPrimaryWhite}`;
       } else {
         return `${BmGrey400}`;

package/src/lib/components/text.js

@@ -11,7 +11,6 @@ export const h2 = `font-family: ${PoppinsMedium};
 font-style: normal;
 font-weight: 500;
 font-size: 1.714rem;
-text-align: center;
 letter-spacing: -0.02em;
 margin: 0rem;`;
 
@@ -29,6 +28,13 @@ font-size: 1rem;
 letter-spacing: -0.02rem;
 margin: 0rem;`;
 
+export const h5 = ` font-family: ${PoppinsMedium};
+font-style: normal;
+font-weight: 500;
+font-size: 1rem;
+letter-spacing: -0.02rem;
+margin: 0rem;`;
+
 export const p = `font-family: ${OpenSans};
 font-style: normal;
 font-weight: normal;