beem-component 1.5.8 → 1.5.9

package/dist/components/navbar.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,36 +13,45 @@ var _colors = require("./colors");
 
 var _search = require("./search");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-
-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) } })); }
-
+// import React from 'react';
 // Old with NavbarContent Main wrapper for navbar
-var BmNavbar = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background: ", ";\n    box-shadow:  0rem 0.286rem 0.214rem rgba(0, 0, 0, 0.25);\n    padding: 0rem 2.5rem !important;\n    flex-wrap: wrap;\n    ", "\n  }\n"])), _colors.BmPrimaryWhite, ""
+var BmNavbar = _styledComponents.default.div.withConfig({
+  displayName: "navbar__BmNavbar"
+})(["background:", ";box-shadow:0rem 0.286rem 0.214rem rgba(0,0,0,0.25);padding:0rem 2.5rem !important;flex-wrap:wrap;", "}"], _colors.BmPrimaryWhite, ""
 /* width: 100vw; */
 ); //  Spacing between the contents of navbar
 
 
 exports.BmNavbar = BmNavbar;
 
-var BmNavbarItems = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.429rem 0rem !important;\n  flex-wrap: wrap;\n"])));
+var BmNavbarItems = _styledComponents.default.div.withConfig({
+  displayName: "navbar__BmNavbarItems"
+})(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:1.429rem 0rem !important;flex-wrap:wrap;"]);
 
 exports.BmNavbarItems = BmNavbarItems;
 
-var GlobalNavbarWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n"]))); // Main wrapper for navbar
+var GlobalNavbarWrapper = _styledComponents.default.div.withConfig({
+  displayName: "navbar__GlobalNavbarWrapper"
+})(["display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;"]); // Main wrapper for navbar
 
 
 exports.GlobalNavbarWrapper = GlobalNavbarWrapper;
-var OldBmNavbar = (0, _styledComponents.default)(GlobalNavbarWrapper)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    flex-direction: row;\n    padding: 1.429rem 2.5rem !important;\n    background: ", ";\n    box-shadow:  0rem 0.286rem 0.214rem rgba(0, 0, 0, 0.25);\n  }\n"])), _colors.BmPrimaryWhite); // Navbar Profile Icon Wrapper
+var OldBmNavbar = (0, _styledComponents.default)(GlobalNavbarWrapper).withConfig({
+  displayName: "navbar__OldBmNavbar"
+})(["flex-direction:row;padding:1.429rem 2.5rem !important;background:", ";box-shadow:0rem 0.286rem 0.214rem rgba(0,0,0,0.25);}"], _colors.BmPrimaryWhite); // Navbar Profile Icon Wrapper
 
 exports.OldBmNavbar = OldBmNavbar;
-var BmNavBarProfile = (0, _styledComponents.default)(GlobalNavbarWrapper)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  @media (max-width: 768px) {\n   display: none !important;\n  }\n"]))); // Navbar Search Icon Wrapper
+var BmNavBarProfile = (0, _styledComponents.default)(GlobalNavbarWrapper).withConfig({
+  displayName: "navbar__BmNavBarProfile"
+})(["@media (max-width:768px){display:none !important;}"]); // Navbar Search Icon Wrapper
 
 exports.BmNavBarProfile = BmNavBarProfile;
-var BmNavbarSearch = (0, _styledComponents.default)(_search.BmSearch)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 30vw;\n  @media (max-width: 768px) {\n    display: none !important;\n  }\n"]))); // Navbar Logo Icon Wrapper
+var BmNavbarSearch = (0, _styledComponents.default)(_search.BmSearch).withConfig({
+  displayName: "navbar__BmNavbarSearch"
+})(["width:30vw;@media (max-width:768px){display:none !important;}"]); // Navbar Logo Icon Wrapper
 
 exports.BmNavbarSearch = BmNavbarSearch;
-var BmNavbarLogo = (0, _styledComponents.default)(GlobalNavbarWrapper)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
+var BmNavbarLogo = (0, _styledComponents.default)(GlobalNavbarWrapper).withConfig({
+  displayName: "navbar__BmNavbarLogo"
+})([""]);
 exports.BmNavbarLogo = BmNavbarLogo;

package/dist/components/search.js

@@ -1,10 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BmSearch = void 0;
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -17,23 +21,15 @@ var _iconStyles = require("./iconStyles");
 
 var _excluded = ["dropdown"];
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 BmSearchField = _styledComponents.default.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  border: none;\n  padding: 0rem;\n  &:visited,\n  &:active,\n  &:hover,\n  &:focus {\n    outline: none !important;\n    text-decoration: none;\n    color: ", ";\n  }\n  ", "\n"])), _colors.BmSecondaryGrey, _colors.BmPrimaryBlack, function (props) {
+var BmSearchField = _styledComponents.default.input.withConfig({
+  displayName: "search__BmSearchField"
+})(["color:", ";border:none;padding:0rem;&:visited,&:active,&:hover,&:focus{outline:none !important;text-decoration:none;color:", ";}", ""], _colors.BmSecondaryGrey, _colors.BmPrimaryBlack, function (props) {
   return props.dropdown === "yes" && "margin-right: 1.714rem;";
 });
 
-var BmSearchWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  box-sizing: border-box;\n  border-radius: 0.25rem;\n  ", "\n  padding: ", ";\n"])), _colors.BmPrimaryWhite, _colors.BmGrey400, ""
+var BmSearchWrapper = _styledComponents.default.div.withConfig({
+  displayName: "search__BmSearchWrapper"
+})(["display:flex;flex-direction:row;align-items:center;background:", ";border:0.071rem solid ", ";box-sizing:border-box;border-radius:0.25rem;", " padding:", ";"], _colors.BmPrimaryWhite, _colors.BmGrey400, ""
 /* height: 2.929rem; */
 , function (_ref) {
   var dropdown = _ref.dropdown;
@@ -45,19 +41,22 @@ var BmSearchWrapper = _styledComponents.default.div(_templateObject2 || (_templa
   }
 });
 
-var BmStretch = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n"])));
+var BmStretch = _styledComponents.default.div.withConfig({
+  displayName: "search__BmStretch"
+})(["display:flex;flex-direction:row;"]);
 
-var SearchIcon = (0, _styledComponents.default)(_iconStyles.BmSearchIcon)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-right: 0.714rem;\n  display: flex;\n"])));
+var SearchIcon = (0, _styledComponents.default)(_iconStyles.BmSearchIcon).withConfig({
+  displayName: "search__SearchIcon"
+})(["margin-right:0.714rem;display:flex;"]);
 
 var BmSearch = function BmSearch(_ref2) {
   var dropdown = _ref2.dropdown,
-      rest = _objectWithoutProperties(_ref2, _excluded);
-
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(BmStretch, rest, /*#__PURE__*/_react.default.createElement(BmSearchWrapper, _extends({
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(BmStretch, rest, /*#__PURE__*/_react.default.createElement(BmSearchWrapper, Object.assign({
     dropdown: dropdown
-  }, rest), /*#__PURE__*/_react.default.createElement(SearchIcon, _extends({
+  }, rest), /*#__PURE__*/_react.default.createElement(SearchIcon, Object.assign({
     size: "small"
-  }, rest)), /*#__PURE__*/_react.default.createElement(BmSearchField, _extends({}, rest, {
+  }, rest)), /*#__PURE__*/_react.default.createElement(BmSearchField, Object.assign({}, rest, {
     dropdown: dropdown
   }))), dropdown === "yes" && /*#__PURE__*/_react.default.createElement(_dropdown.BmDropdown, null)));
 };

package/dist/components/typography.js

@@ -4,31 +4,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.QuoteMark = exports.PullQuote = exports.PoppinsMedium = exports.Poppins = exports.P = exports.OpenSans = exports.Hero = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Captions = void 0;
-var H1 = "2.286rem";
+var H1 = '2.286rem';
 exports.H1 = H1;
-var H2 = "1.714rem";
+var H2 = '1.714rem';
 exports.H2 = H2;
-var H3 = "1.286rem";
+var H3 = '1.286rem';
 exports.H3 = H3;
-var H4 = "1.143rem";
+var H4 = '1.143rem';
 exports.H4 = H4;
-var H5 = "0.857rem";
+var H5 = '0.857rem';
 exports.H5 = H5;
-var H6 = "0.714rem";
+var H6 = '0.714rem';
 exports.H6 = H6;
-var P = "0.929rem";
+var P = '0.929rem';
 exports.P = P;
-var QuoteMark = "3.429rem";
+var QuoteMark = '3.429rem';
 exports.QuoteMark = QuoteMark;
-var PullQuote = "1.286rem";
+var PullQuote = '1.286rem';
 exports.PullQuote = PullQuote;
-var Captions = "0.714rem";
+var Captions = '0.714rem';
 exports.Captions = Captions;
-var Hero = "1rem";
+var Hero = '1rem';
 exports.Hero = Hero;
-var PoppinsMedium = "PoppinsMedium";
+var PoppinsMedium = 'PoppinsMedium';
 exports.PoppinsMedium = PoppinsMedium;
-var Poppins = "Poppins";
+var Poppins = 'Poppins';
 exports.Poppins = Poppins;
-var OpenSans = "OpenSans";
+var OpenSans = 'OpenSans';
 exports.OpenSans = OpenSans;

package/dist/components/wrapper.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,19 +9,17 @@ exports.BmChatMenuWrapper = exports.BmChatInfoWrapper = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _templateObject, _templateObject2;
-
-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 BmChatInfoWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  height: 100%;\n  flex-grow: 1;\n  max-width: 75%;\n  width: 75%;\n  ", "\n  max-height: 100%;\n  height: 100%;\n"])), ''
+var BmChatInfoWrapper = _styledComponents.default.div.withConfig({
+  displayName: "wrapper__BmChatInfoWrapper"
+})(["display:flex;flex-direction:column;max-height:100%;height:100%;flex-grow:1;max-width:75%;width:75%;", " max-height:100%;height:100%;"], ''
 /* border: 0.714rem solid orange; */
 );
 
 exports.BmChatInfoWrapper = BmChatInfoWrapper;
 
-var BmChatMenuWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  max-height: 100%;\n  height: 100%;\n  max-width: 100%;\n  width: 100%;\n  ", "\n  max-height: 85%;\n  height: 85%;\n"])), ''
+var BmChatMenuWrapper = _styledComponents.default.div.withConfig({
+  displayName: "wrapper__BmChatMenuWrapper"
+})(["display:flex;flex-direction:row;justify-content:space-between;max-height:100%;height:100%;max-width:100%;width:100%;", " max-height:85%;height:85%;"], ''
 /* border: 0.714rem solid orange; */
 );
 

package/package.json

@@ -1,24 +1,35 @@
 {
     "name": "beem-component",
-    "version": "1.5.8",
+    "version": "1.5.9",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {
-        "start": "PORT=3002 react-scripts start",
         "build": "react-scripts build",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject",
+        "build-storybook": "build-storybook",
         "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__",
+        "eject": "react-scripts eject",
+        "start": "PORT=3002 react-scripts start",
         "storybook": "start-storybook -p 6006",
-        "build-storybook": "build-storybook"
+        "test": "react-scripts test"
     },
-    "peerDependencies": {
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "react-scripts": "4.0.3",
-        "web-vitals": "^1.1.2",
-        "babel-loader": "8.1.0"
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
     },
     "dependencies": {
         "@emotion/react": "^11.7.1",
@@ -30,6 +41,7 @@
         "js-file-download": "^0.4.12",
         "node-sass": "^6.0.1",
         "polished": "^4.1.3",
+        "prop-types": "^15.8.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router-dom": "^5.3.0",
@@ -38,29 +50,14 @@
         "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/cli": "^7.16.0",
+        "@babel/core": "^7.16.0",
         "@babel/preset-env": "^7.14.8",
         "@babel/preset-react": "^7.14.5",
-        "cross-env": "^7.0.3",
+        "@commitlint/cli": "^14.1.0",
+        "@commitlint/config-conventional": "^14.1.0",
+        "@commitlint/travis-cli": "^14.1.0",
         "@storybook/addon-actions": "^6.3.2",
         "@storybook/addon-controls": "^6.3.12",
         "@storybook/addon-docs": "^6.3.12",
@@ -72,6 +69,32 @@
         "@storybook/preset-create-react-app": "^3.2.0",
         "@storybook/react": "^6.3.2",
         "@storybook/theming": "^6.4.9",
+        "babel-eslint": "^10.1.0",
+        "babel-plugin-react-intl": "^5.1.18",
+        "babel-plugin-styled-components": "^1.13.3",
+        "babel-preset-react-app": "^10.0.0",
+        "commitizen": "^4.2.4",
+        "cross-env": "^7.0.3",
+        "cz-conventional-changelog": "^3.3.0",
+        "eslint-config-airbnb": "^18.2.1",
+        "eslint-config-prettier": "^8.3.0",
+        "eslint-plugin-import": "^2.25.2",
+        "eslint-plugin-jest": "^25.2.2",
+        "eslint-plugin-jsdoc": "^32.2.0",
+        "eslint-plugin-jsx-a11y": "^6.4.1",
+        "eslint-plugin-prettier": "^4.0.0",
+        "eslint-plugin-react": "^7.26.1",
+        "generate-changelog": "^1.8.0",
+        "husky": "^7.0.4",
+        "lint-staged": "^11.2.6",
+        "prettier": "^2.4.1",
         "storybook-addon-jsx": "^7.3.14"
+    },
+    "peerDependencies": {
+        "babel-loader": "8.1.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "react-scripts": "4.0.3",
+        "web-vitals": "^1.1.2"
     }
 }

package/src/App.js

@@ -1,11 +1,10 @@
-import React, { useState } from "react";
-import { BmModal, BmButton, GlobalStyle } from "./lib/components";
-import { BmProfileIcon } from "./lib/components/ProfileIcon/ProfileIcon";
-import beem from './lib/assets/beem.jpeg';
+import React, { useState } from 'react';
+import { GlobalStyle, BmModal, BmButton } from './lib/components';
+import { BmCheckboxToggle } from './lib/components/Checkbox/checkboxToggler';
 
 const Chat = () => {
+  const [checked, setChecked] = useState(false);
   const [showModal, setShowModal] = useState(false);
-
   return (
     <>
       <GlobalStyle />
@@ -20,14 +19,18 @@ const Chat = () => {
           <h5>This modal has a sub heading</h5>
         </BmModal.SubHeader>
         <BmModal.Body>
-          <BmProfileIcon img={beem} content={<h3>TV</h3>} channel="facebook" size="xsmall" />
+          <BmCheckboxToggle
+            checked={checked}
+            onChange={() => setChecked(!checked)}
+            disabled
+            label={<h3>Field Label</h3>}
+          />
           <p>This is a body</p>
         </BmModal.Body>
         <BmModal.Footer>
           <p>This is a footer</p>
         </BmModal.Footer>
       </BmModal>
-      <BmProfileIcon img={beem} channel="instagram" />
     </>
   );
 };

package/src/index.js

@@ -1,15 +1,13 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
-import reportWebVitals from "./reportWebVitals";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root"),
+  document.getElementById('root')
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();

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

@@ -1,14 +1,16 @@
-import React, { useState } from "react";
-import styled from "styled-components";
-import PropTypes from "prop-types";
-import { BmPrimaryWhite } from "../colors";
-import { BmIcons } from "../iconStyles";
-import { KeyboardArrowDown, KeyboardArrowUp } from "@material-ui/icons";
+/* eslint-disable react/display-name */
+/* eslint-disable react/destructuring-assignment */
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { KeyboardArrowDown, KeyboardArrowUp } from '@material-ui/icons';
+import { BmPrimaryWhite } from '../colors';
+import { BmIcons } from '../iconStyles';
 
 const { Provider, Consumer } = React.createContext({});
 
 const Dropdown = (value, rest) => {
-  if (value.expandIcon && value.expandIcon === "none") {
+  if (value.expandIcon && value.expandIcon === 'none') {
     return;
   }
   if (!value.expandIcon) {
@@ -18,7 +20,7 @@ const Dropdown = (value, rest) => {
       <BmIcons icon={<KeyboardArrowDown />} {...rest} />
     );
   }
-  if (value.expandIcon && value.expandIcon !== "none") {
+  if (value.expandIcon && value.expandIcon !== 'none') {
     return <BmIcons icon={value.expandIcon} />;
   }
 };
@@ -44,12 +46,28 @@ const BmAccordionWrapper = styled.div`
   flex-direction: column;
 `;
 
-const BmAccordion = ({ children, disabled, expandIcon, Open, expandIconPosition, ...rest }) => {
-  const [toggle, setToggle] = useState(Open ? true : false);
+const BmAccordion = ({
+  children,
+  disabled,
+  expandIcon,
+  Open,
+  expandIconPosition,
+  ...rest
+}) => {
+  const [toggle, setToggle] = useState(!!Open);
 
   return (
     <BmAccordionWrapper>
-      <Provider value={{ toggle, setToggle, disabled, expandIcon, expandIconPosition, ...rest }}>
+      <Provider
+        value={{
+          toggle,
+          setToggle,
+          disabled,
+          expandIcon,
+          expandIconPosition,
+          ...rest,
+        }}
+      >
         {children}
       </Provider>
     </BmAccordionWrapper>
@@ -74,12 +92,12 @@ BmAccordion.Title = ({
               : value.setToggle(false)
           }
         >
-          {value.expandIconPosition === "left" ||
-          (value.expandIconPosition === undefined && 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)}
+          {value.expandIconPosition === 'right' && Dropdown(value, rest)}
         </BmAccordionMenu>
       )}
     </Consumer>

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

@@ -1,32 +1,32 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import BmAccordion from "./Accordion";
-import { text, boolean, select } from "@storybook/addon-knobs";
-import { Favorite, Home } from "@material-ui/icons";
+import React from 'react';
+import { text, boolean, select } from '@storybook/addon-knobs';
+import { Favorite, Home } from '@material-ui/icons';
+import BmAccordion from './Accordion';
 
 export default {
   component: BmAccordion,
   subcomponents: BmAccordion.Title,
-  title: "components/Accordion",
+  title: 'components/Accordion',
   argTypes: {
     size: {
-      options: ["small", "medium", "large"],
-      control: { type: "select" },
-      description: "Size of the icons",
-      defaultValue: { summary: "large" },
+      options: ['small', 'medium', 'large'],
+      control: { type: 'select' },
+      description: 'Size of the icons',
+      defaultValue: { summary: 'large' },
     },
     disabled: {
-      description: "Optional",
+      description: 'Optional',
       defaultValue: { summary: false },
-      control: { type: "boolean" },
+      control: { type: 'boolean' },
     },
     Open: {
-      description: "Accordion body will be open initially",
+      description: 'Accordion body will be open initially',
       defaultValue: { summary: false },
-      control: { type: "boolean" },
+      control: { type: 'boolean' },
     },
     children: {
-      description: "Accordion Title Text",
+      description: 'Accordion Title Text',
       defaultValue: { summary: undefined },
     },
     expandIcon: {
@@ -34,51 +34,51 @@ export default {
       defaultValue: { summary: undefined },
     },
     expandIconPosition: {
-      options: ["left", "right"],
-      control: { type: "select" },
-      description: "Position of the expand Icon",
-      defaultValue: { summary: "left" },
+      options: ['left', 'right'],
+      control: { type: 'select' },
+      description: 'Position of the expand Icon',
+      defaultValue: { summary: 'left' },
     },
     leadingIcon: {
-      description: "Material-UI icon(optional)",
+      description: 'Material-UI icon(optional)',
       defaultValue: { summary: undefined },
     },
     trailingIcon: {
-      description: "Material-UI icon(optional)",
+      description: 'Material-UI icon(optional)',
       defaultValue: { summary: undefined },
     },
   },
 };
 
 const optionSize = {
-  small: "small",
-  medium: "medium",
-  large: "large",
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
 };
 
 const optionExpandIcon = {
-  left: "left",
-  right: "medium",
+  left: 'left',
+  right: 'medium',
 };
 
 export const Accordion = () => {
   return (
     <div>
       <BmAccordion
-        disabled={boolean("disabled", false)}
-        Open={boolean("disabled", false)}
+        disabled={boolean('disabled', false)}
+        Open={boolean('disabled', false)}
       >
         <BmAccordion.Title
           leadingIcon={<Home />}
           trailingIcon={<Favorite />}
-          size={select("size", optionSize, "large")}
+          size={select('size', optionSize, 'large')}
           expandIconPosition={select(
-            "expandIconPosition",
+            'expandIconPosition',
             optionExpandIcon,
-            "left",
+            'left'
           )}
         >
-          <h3>{text("children", "Accordion")}</h3>
+          <h3>{text('children', 'Accordion')}</h3>
         </BmAccordion.Title>
         <BmAccordion.Body>Accordion Body</BmAccordion.Body>
       </BmAccordion>