beem-component 1.3.3 → 1.3.4

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"],
+var _excluded = ["children", "disabled", "expandIcon", "Open"],
     _excluded2 = ["children", "leadingIcon", "trailingIcon", "size"];
 
 var _templateObject, _templateObject2, _templateObject3;
@@ -74,9 +74,7 @@ var Dropdown = function Dropdown(value, rest) {
   }
 };
 
-var BmAccordionMenu = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  ", "\n  padding: 0.571rem 1.143rem;\n  border: 1px solid \n  background: ", ";\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n"])), ""
-/* padding: 0.571rem; */
-, _colors.BmPrimaryWhite);
+var BmAccordionMenu = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  padding: 0.571rem 1.143rem;\n  background: ", ";\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n"])), _colors.BmPrimaryWhite);
 
 var BmAccordionDetails = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n"])));
 
@@ -86,9 +84,10 @@ var BmAccordion = function BmAccordion(_ref) {
   var children = _ref.children,
       disabled = _ref.disabled,
       expandIcon = _ref.expandIcon,
+      Open = _ref.Open,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)(Open ? true : false),
       _useState2 = _slicedToArray(_useState, 2),
       toggle = _useState2[0],
       setToggle = _useState2[1];
@@ -138,7 +137,8 @@ BmAccordion.propTypes = {
   expandIcon: _propTypes.default.string,
   leadingIcon: _propTypes.default.node,
   trailingIcon: _propTypes.default.node,
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+  Open: _propTypes.default.bool
 };
 var _default = BmAccordion;
 exports.default = _default;

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

@@ -40,6 +40,15 @@ var _default = {
         type: "boolean"
       }
     },
+    Open: {
+      description: "Accordion body will be open initially",
+      defaultValue: {
+        summary: false
+      },
+      control: {
+        type: "boolean"
+      }
+    },
     children: {
       description: "Accordion Title Text",
       defaultValue: {
@@ -75,7 +84,8 @@ var optionSize = {
 
 var Accordion = function Accordion() {
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Accordion.default, {
-    disabled: (0, _addonKnobs.boolean)("disabled", false)
+    disabled: (0, _addonKnobs.boolean)("disabled", false),
+    Open: (0, _addonKnobs.boolean)("disabled", false)
   }, /*#__PURE__*/_react.default.createElement(_Accordion.default.Title, {
     leadingIcon: /*#__PURE__*/_react.default.createElement(_icons.Home, null),
     trailingIcon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null),

package/package.json

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

package/src/App.js

@@ -6,6 +6,7 @@ import {
   BmIcons,
   BmNoteBar,
   BmTab,
+  BmAccordion,
   MainWrapper,
 } from "./lib/components";
 import { GlobalStyle } from "./lib/components/globalStyles";
@@ -46,6 +47,10 @@ export const App = () => {
       <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

@@ -26,9 +26,7 @@ const BmAccordionMenu = styled.div`
   display: flex;
   align-items: center;
   flex-direction: row;
-  ${"" /* padding: 0.571rem; */}
   padding: 0.571rem 1.143rem;
-  border: 1px solid 
   background: ${BmPrimaryWhite};
   > *:not(:last-child) {
     margin-right: 0.5rem;
@@ -46,8 +44,8 @@ const BmAccordionWrapper = styled.div`
   flex-direction: column;
 `;
 
-const BmAccordion = ({ children, disabled, expandIcon, ...rest }) => {
-  const [toggle, setToggle] = useState(false);
+const BmAccordion = ({ children, disabled, expandIcon, Open, ...rest }) => {
+  const [toggle, setToggle] = useState(Open ? true : false);
 
   return (
     <BmAccordionWrapper>
@@ -99,6 +97,7 @@ BmAccordion.propTypes = {
   leadingIcon: PropTypes.node,
   trailingIcon: PropTypes.node,
   disabled: PropTypes.bool,
+  Open: PropTypes.bool,
 };
 
 export default BmAccordion;

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

@@ -20,6 +20,11 @@ export default {
       defaultValue: { summary: false },
       control: { type: "boolean" },
     },
+    Open: {
+      description: "Accordion body will be open initially",
+      defaultValue: { summary: false },
+      control: { type: "boolean" },
+    },
     children: {
       description: "Accordion Title Text",
       defaultValue: { summary: undefined },
@@ -48,7 +53,7 @@ const optionSize = {
 export const Accordion = () => {
   return (
     <div>
-      <BmAccordion disabled={boolean("disabled", false)}>
+      <BmAccordion disabled={boolean("disabled", false)} Open={boolean("disabled", false)}>
         <BmAccordion.Title
           leadingIcon={<Home />}
           trailingIcon={<Favorite />}