beem-component 1.3.8 → 1.4.1

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/ChatComponents/ChatBody/chatBody.js

@@ -21,7 +21,7 @@ var _iconStyles = require("../../iconStyles");
 
 var _colors = require("../../colors");
 
-var _excluded = ["state", "file", "src", "fileName"],
+var _excluded = ["state", "file", "src", "fileName", "onDownload"],
     _excluded2 = ["state", "src", "fileName"],
     _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName"];
 
@@ -37,7 +37,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var BmChat = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  ", "\n"])), ""
+var BmChat = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  ", "\n"])), ''
 /* border: 0.071rem solid ${BmGrey400}; */
 );
 
@@ -46,15 +46,15 @@ BmChat.Body = _styledComponents.default.div(_templateObject2 || (_templateObject
 var Details = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: ", ";\n  > *:not(:last-child) {\n    margin-right: 1rem;\n    margin-bottom: 0.5rem;\n  }\n  overflow-wrap: break-word !important;\n  word-wrap: break-word !important;\n  margin: 0rem;\n  flex-grow: 1;\n"])), function (_ref) {
   var state = _ref.state;
 
-  if (state === "inbound") {
-    return "flex-start";
+  if (state === 'inbound') {
+    return 'flex-start';
   }
 
-  if (state === "outbound") {
-    return "flex-end";
+  if (state === 'outbound') {
+    return 'flex-end';
   }
 
-  return "row";
+  return 'row';
 });
 
 var MessageDetails = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  max-width: 70%;\n  > * {\n    margin-top: 0.5rem;\n    margin-bottom: 0.5rem;\n  }\n"])));
@@ -63,8 +63,8 @@ var Messages = _styledComponents.default.div(_templateObject5 || (_templateObjec
   var state = _ref2.state;
 
   if (state) {
-    if (state === "inbound") return "".concat(_colors.BmPrimaryWhite);
-    if (state === "outbound") return "".concat(_colors.BmPrimaryBlue);
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -72,8 +72,8 @@ var Messages = _styledComponents.default.div(_templateObject5 || (_templateObjec
   var state = _ref3.state;
 
   if (state) {
-    if (state === "inbound") return "".concat(_colors.BmPrimaryBlack);
-    if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -81,8 +81,8 @@ var Messages = _styledComponents.default.div(_templateObject5 || (_templateObjec
   var state = _ref4.state;
 
   if (state) {
-    if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
-    if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+    if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
+    if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -93,14 +93,14 @@ var MessagesSubDetails = _styledComponents.default.div(_templateObject6 || (_tem
 var handleState = function handleState(_ref5) {
   var session = _ref5.session;
 
-  if (session === "bot") {
+  if (session === 'bot') {
     return /*#__PURE__*/_react.default.createElement(_avatars.default, {
       size: "small",
       user: "chatbot"
     });
   }
 
-  if (session === "live") {
+  if (session === 'live') {
     return /*#__PURE__*/_react.default.createElement(_avatars.default, {
       size: "small",
       user: "employee"
@@ -113,8 +113,8 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
   var state = _ref6.state;
 
   if (state) {
-    if (state === "inbound") return "".concat(_colors.BmPrimaryWhite);
-    if (state === "outbound") return "".concat(_colors.BmPrimaryBlue);
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -122,8 +122,8 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
   var state = _ref7.state;
 
   if (state) {
-    if (state === "inbound") return "".concat(_colors.BmPrimaryBlack);
-    if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -131,8 +131,8 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
   var state = _ref8.state;
 
   if (state) {
-    if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
-    if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+    if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
+    if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -140,14 +140,14 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
   var state = _ref9.state;
 
   if (state) {
-    if (state === "inbound") return "".concat(_colors.BmPrimaryBlue);
-    if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlue);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
-}, ""
+}, ''
 /* max-width: 100%; */
-, ""
+, ''
 /* max-height: 100%; */
 );
 
@@ -156,6 +156,7 @@ var BmFileAttachment = function BmFileAttachment(_ref10) {
       file = _ref10.file,
       src = _ref10.src,
       fileName = _ref10.fileName,
+      onDownload = _ref10.onDownload,
       rest = _objectWithoutProperties(_ref10, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(FileAttachmentWrapper, _extends({
@@ -163,7 +164,8 @@ var BmFileAttachment = function BmFileAttachment(_ref10) {
   }, rest), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_FilePresent.default, null)
   }), fileName, /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
-    icon: /*#__PURE__*/_react.default.createElement(_Download.default, null)
+    icon: /*#__PURE__*/_react.default.createElement(_Download.default, null),
+    onClick: onDownload
   }));
 }; //Start of Component for Images
 
@@ -172,8 +174,8 @@ var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templat
   var state = _ref11.state;
 
   if (state) {
-    if (state === "inbound") return "".concat(_colors.BmPrimaryBlack);
-    if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -181,8 +183,8 @@ var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templat
   var state = _ref12.state;
 
   if (state) {
-    if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
-    if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+    if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
+    if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -190,7 +192,7 @@ var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templat
 
 exports.BmImageWrapper = BmImageWrapper;
 
-var BmImage = _styledComponents.default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  width: 100%;\n  object-fit: cover;\n  flex-grow: 1;\n"])), ""
+var BmImage = _styledComponents.default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  width: 100%;\n  object-fit: cover;\n  flex-grow: 1;\n"])), ''
 /* Fix width */
 );
 
@@ -234,7 +236,7 @@ BmChat.Details = function (_ref14) {
 
   return /*#__PURE__*/_react.default.createElement(Details, _extends({
     state: state
-  }, rest), /*#__PURE__*/_react.default.createElement(MessageState, null, state === "inbound" && session && handleState({
+  }, rest), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'inbound' && session && handleState({
     state: state,
     session: session
   })), /*#__PURE__*/_react.default.createElement(MessageDetails, null, src && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
@@ -247,15 +249,15 @@ BmChat.Details = function (_ref14) {
     file: file,
     fileName: fileName,
     state: state
-  }, rest)), /*#__PURE__*/_react.default.createElement(MessagesSubDetails, null, displayTime && displayTime, status === "sent" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+  }, rest)), /*#__PURE__*/_react.default.createElement(MessagesSubDetails, null, displayTime && displayTime, status === 'sent' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_icons.DoneAll, null),
     color: "".concat(_colors.BmSecondaryDarkGreen),
     size: "small"
-  }), status === "failed" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+  }), status === 'failed' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_icons.Done, null),
     color: "".concat(_colors.BmPrimaryBlack),
     size: "small"
-  }))), /*#__PURE__*/_react.default.createElement(MessageState, null, state === "outbound" && session && handleState({
+  }))), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'outbound' && session && handleState({
     state: state,
     session: session
   })));

package/dist/components/ChatComponents/ChatBody/chatBody.stories.js

@@ -26,9 +26,10 @@ var _chartImg = _interopRequireDefault(require("../../../assets/chart-img.png"))
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* eslint-disable import/no-anonymous-default-export */
+// TODO: ADD DESCRIPTION
 var _default = {
   component: _chatBody.default,
-  title: "components/Chat/MainChat/ChatBody"
+  title: 'components/Chat/MainChat/ChatBody'
 };
 exports.default = _default;
 
@@ -70,7 +71,10 @@ var ChatBody = function ChatBody() {
     displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
     status: "failed",
     fileName: /*#__PURE__*/_react.default.createElement("p", null, "file.csv"),
-    file: _chartImg.default
+    file: _chartImg.default,
+    onDownload: function onDownload() {
+      alert('hello');
+    }
   })), /*#__PURE__*/_react.default.createElement(_chatBody.default.Footer, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "chat-footer"
   }, /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
@@ -85,7 +89,7 @@ var ChatBody = function ChatBody() {
   }), /*#__PURE__*/_react.default.createElement(_input.BmInput, {
     placeholder: "Enter Message",
     style: {
-      flex: "1"
+      flex: '1'
     }
   }), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_Send.default, null),

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/package.json

@@ -1,76 +1,76 @@
 {
-    "name": "beem-component",
-    "version": "1.3.8",
-    "private": false,
-    "main": "dist/components/index.js",
-    "scripts": {
-        "start": "react-scripts start",
-        "build": "react-scripts build",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject",
-        "clean": "rimraf dist",
-        "compile": "npm run clean && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,stories.js,__snapshots__",
-        "storybook": "start-storybook -p 6006",
-        "build-storybook": "build-storybook"
-    },
-    "peerDependencies": {
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "react-scripts": "4.0.3",
-        "web-vitals": "^1.1.2"
-    },
-    "dependencies": {
-        "@emotion/react": "^11.7.1",
-        "@emotion/styled": "^11.6.0",
-        "@material-ui/core": "^4.11.4",
-        "@material-ui/icons": "^4.11.2",
-        "@mui/icons-material": "^5.2.1",
-        "@mui/material": "^5.2.3",
-        "js-file-download": "^0.4.12",
-        "node-sass": "^6.0.1",
-        "polished": "^4.1.3",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "react-router-dom": "^5.3.0",
-        "react-scripts": "4.0.3",
-        "save": "^2.4.0",
-        "styled-components": "^5.3.0",
-        "web-vitals": "^1.1.2"
-    },
-    "eslintConfig": {
-        "extends": [
-            "react-app",
-            "react-app/jest"
-        ]
-    },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
-    },
-    "devDependencies": {
-        "@babel/cli": "^7.14.8",
-        "@babel/preset-env": "^7.14.8",
-        "@babel/preset-react": "^7.14.5",
-        "cross-env": "^7.0.3",
-        "@storybook/addon-actions": "^6.3.2",
-        "@storybook/addon-controls": "^6.3.12",
-        "@storybook/addon-docs": "^6.3.12",
-        "@storybook/addon-essentials": "^6.3.12",
-        "@storybook/addon-knobs": "^6.3.1",
-        "@storybook/addon-links": "^6.3.2",
-        "@storybook/addons": "^6.4.9",
-        "@storybook/node-logger": "^6.3.2",
-        "@storybook/preset-create-react-app": "^3.2.0",
-        "@storybook/react": "^6.3.2",
-        "@storybook/theming": "^6.4.9",
-        "storybook-addon-jsx": "^7.3.14"
-    }
-}
+  "name": "beem-component",
+  "version": "1.4.1",
+  "private": false,
+  "main": "dist/components/index.js",
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "clean": "rimraf dist",
+    "compile": "npm run clean && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,stories.js,__snapshots__",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "web-vitals": "^1.1.2"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@material-ui/core": "^4.11.4",
+    "@material-ui/icons": "^4.11.2",
+    "@mui/icons-material": "^5.2.1",
+    "@mui/material": "^5.2.3",
+    "js-file-download": "^0.4.12",
+    "node-sass": "^6.0.1",
+    "polished": "^4.1.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.3.0",
+    "react-scripts": "4.0.3",
+    "save": "^2.4.0",
+    "styled-components": "^5.3.0",
+    "web-vitals": "^1.1.2"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.14.8",
+    "@babel/preset-env": "^7.14.8",
+    "@babel/preset-react": "^7.14.5",
+    "cross-env": "^7.0.3",
+    "@storybook/addon-actions": "^6.3.2",
+    "@storybook/addon-controls": "^6.3.12",
+    "@storybook/addon-docs": "^6.3.12",
+    "@storybook/addon-essentials": "^6.3.12",
+    "@storybook/addon-knobs": "^6.3.1",
+    "@storybook/addon-links": "^6.3.2",
+    "@storybook/addons": "^6.4.9",
+    "@storybook/node-logger": "^6.3.2",
+    "@storybook/preset-create-react-app": "^3.2.0",
+    "@storybook/react": "^6.3.2",
+    "@storybook/theming": "^6.4.9",
+    "storybook-addon-jsx": "^7.3.14"
+  }
+}

package/src/App.js

@@ -1,78 +1,87 @@
-import React from "react";
-import "../src/main.scss";
-import {
-  BmButton,
-  BmCard,
-  BmIcons,
-  BmNoteBar,
-  BmTab,
-  BmAccordion,
-  BmBtnIcon,
-  MainWrapper,
-  BmButtonDropDown,
-} 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";
+import React from 'react';
+import '../src/main.scss';
+import { BmAccordion, BmTab, BmChat } from './lib/components';
+import { GlobalStyle } from './lib/components/globalStyles';
+import './lib/assets/css/sidebar.scss';
 
 export const App = () => {
+  const image =
+    'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/Vector.jpg?AWSAccessKeyId=AKIAVCAYXA54EPKHSRGL&Expires=1726995050&Signature=kP4gVPac4c7Sol2PBgGZbQ2TjLM%3D';
   return (
     <>
       <GlobalStyle />
       {/* <MainWrapper> */}
-      <BmButtonDropDown color="green">Hello</BmButtonDropDown>
-      <BmNoteBar type="warning" color="purple">
+      <BmChat>
+        <BmChat.Body>
+          <BmChat.Details
+            state='inbound'
+            session='bot'
+            displayTime={<p>12:00pm</p>}
+            status='sent'
+          >
+            <p>Inbound Text Message</p>
+          </BmChat.Details>
+          <BmChat.Details
+            state='inbound'
+            session='live'
+            displayTime={<p>12:00pm</p>}
+            status='sent'
+            fileName={<p>chat.png</p>}
+            src={image}
+          />
+          <BmChat.Details
+            state='inbound'
+            session='live'
+            displayTime={<p>10:00am</p>}
+            status='failed'
+            fileName={<p>file.csv</p>}
+            onDownload={() => {
+              alert('hello');
+            }}
+            file={image}
+          />
+          <BmChat.Details
+            state='outbound'
+            session='bot'
+            displayTime={<p>12:00pm</p>}
+            status='sent'
+          >
+            <p>Outbound Text Message</p>
+          </BmChat.Details>
+          <BmChat.Details
+            state='outbound'
+            session='live'
+            displayTime={<p>12:00pm</p>}
+            status='sent'
+            fileName={<p>chat.png</p>}
+            onDownload={() => {
+              alert('hello');
+            }}
+            src={image}
+          />
+          <BmChat.Details
+            state='outbound'
+            session='live'
+            displayTime={<p>10:00am</p>}
+            status='failed'
+            fileName={<p>file.csv</p>}
+            file={image}
+            
+          />
+        </BmChat.Body>
+        {/* <BmChat.Footer>
+          <div className='chat-footer'>
+            <BmIcons icon={<EmojiEmotionsIcon />} size='xlarge' />
+            <BmIcons icon={<AttachFileIcon />} size='xlarge' />
+            <BmIcons icon={<QuickreplyIcon />} size='xlarge' />
+            <BmInput placeholder='Enter Message' style={{ flex: '1' }} />
+            <BmIcons icon={<SendIcon />} size='xlarge' />
+          </div>
+        </BmChat.Footer> */}
+      </BmChat>
+      <BmTab state='active' stateColor='red'>
         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>
-          <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>
       {/* </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/ChatComponents/ChatBody/chatBody.js

@@ -1,10 +1,10 @@
-import React from "react";
-import { Done, DoneAll } from "@material-ui/icons";
-import FilePresentIcon from "@mui/icons-material/FilePresent";
-import DownloadIcon from "@mui/icons-material/Download";
-import styled from "styled-components";
-import BmAvatar from "../../Avatars/avatars";
-import { BmIcons } from "../../iconStyles";
+import React from 'react';
+import { Done, DoneAll } from '@material-ui/icons';
+import FilePresentIcon from '@mui/icons-material/FilePresent';
+import DownloadIcon from '@mui/icons-material/Download';
+import styled from 'styled-components';
+import BmAvatar from '../../Avatars/avatars';
+import { BmIcons } from '../../iconStyles';
 
 import {
   BmPrimaryWhite,
@@ -12,13 +12,13 @@ import {
   BmPrimaryBlack,
   BmSecondaryDarkGreen,
   BmGrey200,
-} from "../../colors";
+} from '../../colors';
 
 const BmChat = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
-  ${"" /* border: 0.071rem solid ${BmGrey400}; */}
+  ${'' /* border: 0.071rem solid ${BmGrey400}; */}
 `;
 
 BmChat.Body = styled.div`
@@ -33,13 +33,13 @@ BmChat.Body = styled.div`
 const Details = styled.div`
   display: flex;
   justify-content: ${({ state }) => {
-    if (state === "inbound") {
-      return "flex-start";
+    if (state === 'inbound') {
+      return 'flex-start';
     }
-    if (state === "outbound") {
-      return "flex-end";
+    if (state === 'outbound') {
+      return 'flex-end';
     }
-    return "row";
+    return 'row';
   }};
   > *:not(:last-child) {
     margin-right: 1rem;
@@ -68,22 +68,22 @@ const Messages = styled.div`
   padding: 0.5rem;
   background: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return `${BmPrimaryWhite}`;
-      if (state === "outbound") return `${BmPrimaryBlue}`;
+      if (state === 'inbound') return `${BmPrimaryWhite}`;
+      if (state === 'outbound') return `${BmPrimaryBlue}`;
     }
     return `${BmPrimaryWhite}`;
   }};
   color: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return `${BmPrimaryBlack}`;
-      if (state === "outbound") return `${BmPrimaryWhite}`;
+      if (state === 'inbound') return `${BmPrimaryBlack}`;
+      if (state === 'outbound') return `${BmPrimaryWhite}`;
     }
     return `${BmPrimaryWhite}`;
   }};
   border-radius: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
-      if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+      if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
+      if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
     }
     return `${BmPrimaryWhite}`;
   }};
@@ -103,11 +103,11 @@ const MessagesSubDetails = styled.div`
 `;
 
 const handleState = ({ session }) => {
-  if (session === "bot") {
-    return <BmAvatar size="small" user="chatbot" />;
+  if (session === 'bot') {
+    return <BmAvatar size='small' user='chatbot' />;
   }
-  if (session === "live") {
-    return <BmAvatar size="small" user="employee" />;
+  if (session === 'live') {
+    return <BmAvatar size='small' user='employee' />;
   }
 };
 
@@ -119,22 +119,22 @@ const FileAttachmentWrapper = styled.div`
   padding: 1rem;
   background: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return `${BmPrimaryWhite}`;
-      if (state === "outbound") return `${BmPrimaryBlue}`;
+      if (state === 'inbound') return `${BmPrimaryWhite}`;
+      if (state === 'outbound') return `${BmPrimaryBlue}`;
     }
     return `${BmPrimaryWhite}`;
   }};
   color: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return `${BmPrimaryBlack}`;
-      if (state === "outbound") return `${BmPrimaryWhite}`;
+      if (state === 'inbound') return `${BmPrimaryBlack}`;
+      if (state === 'outbound') return `${BmPrimaryWhite}`;
     }
     return `${BmPrimaryWhite}`;
   }};
   border-radius: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
-      if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+      if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
+      if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
     }
     return `${BmPrimaryWhite}`;
   }};
@@ -151,22 +151,29 @@ const FileAttachmentWrapper = styled.div`
     align-items: center;
     color: ${({ state }) => {
       if (state) {
-        if (state === "inbound") return `${BmPrimaryBlue}`;
-        if (state === "outbound") return `${BmPrimaryWhite}`;
+        if (state === 'inbound') return `${BmPrimaryBlue}`;
+        if (state === 'outbound') return `${BmPrimaryWhite}`;
       }
       return `${BmPrimaryWhite}`;
     }};
   }
-  ${"" /* max-width: 100%; */}
-  ${"" /* max-height: 100%; */}
+  ${'' /* max-width: 100%; */}
+  ${'' /* max-height: 100%; */}
 `;
 
-const BmFileAttachment = ({ state, file, src, fileName, ...rest }) => {
+const BmFileAttachment = ({
+  state,
+  file,
+  src,
+  fileName,
+  onDownload,
+  ...rest
+}) => {
   return (
     <FileAttachmentWrapper state={state} {...rest}>
       <BmIcons icon={<FilePresentIcon />} />
       {fileName}
-      <BmIcons icon={<DownloadIcon />} />
+      <BmIcons icon={<DownloadIcon />} onClick={onDownload} />
     </FileAttachmentWrapper>
   );
 };
@@ -176,15 +183,15 @@ export const BmImageWrapper = styled.div`
   flex-direction: column;
   color: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return `${BmPrimaryBlack}`;
-      if (state === "outbound") return `${BmPrimaryWhite}`;
+      if (state === 'inbound') return `${BmPrimaryBlack}`;
+      if (state === 'outbound') return `${BmPrimaryWhite}`;
     }
     return `${BmPrimaryWhite}`;
   }};
   border-radius: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
-      if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+      if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
+      if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
     }
     return `${BmPrimaryWhite}`;
   }};
@@ -192,7 +199,7 @@ export const BmImageWrapper = styled.div`
 `;
 
 export const BmImage = styled.img`
-  ${"" /* Fix width */}
+  ${'' /* Fix width */}
   width: 100%;
   object-fit: cover;
   flex-grow: 1;
@@ -202,7 +209,7 @@ export const BmImageChat = ({ state, src, fileName, ...rest }) => {
   return (
     <>
       <BmImageWrapper state={state} {...rest}>
-        <BmImage src={src} alt="src" />
+        <BmImage src={src} alt='src' />
         {fileName && (
           <BmFileAttachment
             state={state}
@@ -239,7 +246,7 @@ BmChat.Details = ({
     <Details state={state} {...rest}>
       {/* Adding for mobile */}
       <MessageState>
-        {state === "inbound" && session && handleState({ state, session })}
+        {state === 'inbound' && session && handleState({ state, session })}
       </MessageState>
       <MessageDetails>
         {/* For Images */}
@@ -259,20 +266,20 @@ BmChat.Details = ({
         )}
         <MessagesSubDetails>
           {displayTime && displayTime}
-          {status === "sent" && (
+          {status === 'sent' && (
             <BmIcons
               icon={<DoneAll />}
               color={`${BmSecondaryDarkGreen}`}
-              size="small"
+              size='small'
             />
           )}
-          {status === "failed" && (
-            <BmIcons icon={<Done />} color={`${BmPrimaryBlack}`} size="small" />
+          {status === 'failed' && (
+            <BmIcons icon={<Done />} color={`${BmPrimaryBlack}`} size='small' />
           )}
         </MessagesSubDetails>
       </MessageDetails>
       <MessageState>
-        {state === "outbound" && session && handleState({ state, session })}
+        {state === 'outbound' && session && handleState({ state, session })}
       </MessageState>
     </Details>
   );

package/src/lib/components/ChatComponents/ChatBody/chatBody.stories.js

@@ -1,17 +1,17 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import BmChat from "./chatBody";
-import { BmIcons } from "../../iconStyles";
-import EmojiEmotionsIcon from "@mui/icons-material/EmojiEmotions";
-import AttachFileIcon from "@mui/icons-material/AttachFile";
-import QuickreplyIcon from "@mui/icons-material/Quickreply";
-import SendIcon from "@mui/icons-material/Send";
-import { BmInput } from "../../input";
-import image from "../../../assets/chart-img.png";
-
+import React from 'react';
+import BmChat from './chatBody';
+import { BmIcons } from '../../iconStyles';
+import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions';
+import AttachFileIcon from '@mui/icons-material/AttachFile';
+import QuickreplyIcon from '@mui/icons-material/Quickreply';
+import SendIcon from '@mui/icons-material/Send';
+import { BmInput } from '../../input';
+import image from '../../../assets/chart-img.png';
+// TODO: ADD DESCRIPTION
 export default {
   component: BmChat,
-  title: "components/Chat/MainChat/ChatBody",
+  title: 'components/Chat/MainChat/ChatBody',
 };
 
 export const ChatBody = () => {
@@ -19,61 +19,64 @@ export const ChatBody = () => {
     <BmChat>
       <BmChat.Body>
         <BmChat.Details
-          state="inbound"
-          session="bot"
+          state='inbound'
+          session='bot'
           displayTime={<p>12:00pm</p>}
-          status="sent"
+          status='sent'
         >
           <p>Inbound Text Message</p>
         </BmChat.Details>
         <BmChat.Details
-          state="inbound"
-          session="live"
+          state='inbound'
+          session='live'
           displayTime={<p>12:00pm</p>}
-          status="sent"
+          status='sent'
           fileName={<p>chat.png</p>}
           src={image}
         />
         <BmChat.Details
-          state="inbound"
-          session="live"
+          state='inbound'
+          session='live'
           displayTime={<p>10:00am</p>}
-          status="failed"
+          status='failed'
           fileName={<p>file.csv</p>}
           file={image}
         />
         <BmChat.Details
-          state="outbound"
-          session="bot"
+          state='outbound'
+          session='bot'
           displayTime={<p>12:00pm</p>}
-          status="sent"
+          status='sent'
         >
           <p>Outbound Text Message</p>
         </BmChat.Details>
         <BmChat.Details
-          state="outbound"
-          session="live"
+          state='outbound'
+          session='live'
           displayTime={<p>12:00pm</p>}
-          status="sent"
+          status='sent'
           fileName={<p>chat.png</p>}
           src={image}
         />
         <BmChat.Details
-          state="outbound"
-          session="live"
+          state='outbound'
+          session='live'
           displayTime={<p>10:00am</p>}
-          status="failed"
+          status='failed'
           fileName={<p>file.csv</p>}
           file={image}
+          onDownload={() => {
+            alert('hello');
+          }}
         />
       </BmChat.Body>
       <BmChat.Footer>
-        <div className="chat-footer">
-        <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
-        <BmIcons icon={<AttachFileIcon />} size="xlarge" />
-        <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
-        <BmInput placeholder="Enter Message" style={{ flex: "1" }} />
-        <BmIcons icon={<SendIcon />} size="xlarge" />
+        <div className='chat-footer'>
+          <BmIcons icon={<EmojiEmotionsIcon />} size='xlarge' />
+          <BmIcons icon={<AttachFileIcon />} size='xlarge' />
+          <BmIcons icon={<QuickreplyIcon />} size='xlarge' />
+          <BmInput placeholder='Enter Message' style={{ flex: '1' }} />
+          <BmIcons icon={<SendIcon />} size='xlarge' />
         </div>
       </BmChat.Footer>
     </BmChat>

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",
+};