beem-component 1.3.4 → 1.3.7

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/Lists/listheader.js

@@ -15,25 +15,40 @@ var _iconStyles = require("../iconStyles");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _excluded = ["children", "trailingIcon", "size", "color"];
+
 var _templateObject;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding: 0rem 1rem 1rem 1rem;\n  border-bottom: 0.125rem solid ", ";\n"])), _colors.BmPrimaryBlue);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding: 0rem 1rem 1rem 1rem;\n  border-bottom: 0.125rem solid\n    ", ";\n"])), function (_ref) {
+  var color = _ref.color;
+  return color ? color : "".concat(_colors.BmPrimaryBlue);
+});
 
 exports.Container = Container;
 
-var BmListHeader = function BmListHeader(_ref) {
-  var children = _ref.children,
-      trailingIcon = _ref.trailingIcon,
-      size = _ref.size,
-      color = _ref.color;
-  return /*#__PURE__*/_react.default.createElement(Container, null, children, trailingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+var BmListHeader = function BmListHeader(_ref2) {
+  var children = _ref2.children,
+      trailingIcon = _ref2.trailingIcon,
+      size = _ref2.size,
+      color = _ref2.color,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(Container, _extends({
+    color: color
+  }, rest), children, trailingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: trailingIcon,
     color: color || "".concat(_colors.BmPrimaryBlack),
-    size: size || 'large'
+    size: size || "large"
   }));
 };
 

package/dist/components/RouteLink/link.js

@@ -13,16 +13,18 @@ var _colors = require("../colors");
 
 var _text = require("../text");
 
+var _polished = require("polished");
+
 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 BmRouteLink = (0, _styledComponents.default)(_reactRouterDom.Link)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  color: ", ";\n  text-decoration: none;\n  &:hover,\n  &:focus,\n  &:active {\n    ", "\n    font-weight: 600;\n    &:before {\n      font-weight: normal;\n    }\n  }\n"])), _text.p, function (props) {
+//TODO: To be fixed for hover states
+var BmRouteLink = (0, _styledComponents.default)(_reactRouterDom.Link)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  color: ", " !important;\n  text-decoration: none;\n  &:hover,\n  &:focus,\n  &:active {\n    font-weight: 600;\n    &:before {\n      font-weight: normal;\n    }\n    color: ", " !important;\n  }\n"])), _text.p, function (props) {
   return props.color ? props.color : "".concat(_colors.BmPrimaryBlue, " ");
-}, ''
-/* color: ${(props) =>
-darken(0.1, props.color ? props.color : `${BmPrimaryBlue} `)} !important; */
-);
+}, function (props) {
+  return (0, _polished.darken)(0.1, props.color ? props.color : "".concat(_colors.BmPrimaryBlue));
+});
 exports.BmRouteLink = BmRouteLink;

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.4",
+    "version": "1.3.7",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {

package/src/App.js

@@ -7,12 +7,13 @@ import {
   BmNoteBar,
   BmTab,
   BmAccordion,
+  BmBtnIcon,
   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 { FileCopyOutlined, Home } from "@material-ui/icons";
 import BmProgressRing from "./lib/components/ProgressRing/progressRing";
 
 export const App = () => {
@@ -20,7 +21,26 @@ export const App = () => {
     <>
       <GlobalStyle />
       {/* <MainWrapper> */}
-      <BmBanner border="dashed" content="center" bannerBg="default" closeButton>
+      <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>

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/Lists/listheader.js

@@ -9,18 +9,27 @@ export const Container = styled.div`
   flex-direction: row;
   justify-content: space-between;
   padding: 0rem 1rem 1rem 1rem;
-  border-bottom: 0.125rem solid ${BmPrimaryBlue};
+  border-bottom: 0.125rem solid
+    ${({ color }) => {
+      return color ? color : `${BmPrimaryBlue}`;
+    }};
 `;
 
-export const BmListHeader = ({ children, trailingIcon, size, color }) => {
+export const BmListHeader = ({
+  children,
+  trailingIcon,
+  size,
+  color,
+  ...rest
+}) => {
   return (
-    <Container>
+    <Container color={color} {...rest}>
       {children}
       {trailingIcon && (
         <BmIcons
           icon={trailingIcon}
-          color={color || `${BmPrimaryBlack}` }
-          size={size || 'large'}
+          color={color || `${BmPrimaryBlack}`}
+          size={size || "large"}
         />
       )}
     </Container>

package/src/lib/components/RouteLink/link.js

@@ -2,19 +2,20 @@ import styled from "styled-components";
 import { Link } from "react-router-dom";
 import { BmPrimaryBlue } from "../colors";
 import { p } from "../text";
+import { darken } from "polished";
 
+//TODO: To be fixed for hover states
 export const BmRouteLink = styled(Link)`
   ${p}
-  color: ${(props) => (props.color ? props.color : `${BmPrimaryBlue} `)};
+  color: ${(props) => (props.color ? props.color : `${BmPrimaryBlue} `)} !important;
   text-decoration: none;
   &:hover,
   &:focus,
   &:active {
-    ${'' /* color: ${(props) =>
-      darken(0.1, props.color ? props.color : `${BmPrimaryBlue} `)} !important; */}
     font-weight: 600;
     &:before {
       font-weight: normal;
     }
+    color: ${(props) => darken(0.1, props.color ? props.color : `${BmPrimaryBlue}`)} !important;
   }
 `;

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;