beem-component 1.3.8 → 1.3.9

package/dist/components/Accordion/Accordion.js

@@ -19,7 +19,7 @@ var _iconStyles = require("../iconStyles");
 
 var _icons = require("@material-ui/icons");
 
-var _excluded = ["children", "disabled", "expandIcon", "Open"],
+var _excluded = ["children", "disabled", "expandIcon", "Open", "expandIconPosition"],
     _excluded2 = ["children", "leadingIcon", "trailingIcon", "size"];
 
 var _templateObject, _templateObject2, _templateObject3;
@@ -30,6 +30,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -85,6 +91,7 @@ var BmAccordion = function BmAccordion(_ref) {
       disabled = _ref.disabled,
       expandIcon = _ref.expandIcon,
       Open = _ref.Open,
+      expandIconPosition = _ref.expandIconPosition,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(Open ? true : false),
@@ -93,12 +100,13 @@ var BmAccordion = function BmAccordion(_ref) {
       setToggle = _useState2[1];
 
   return /*#__PURE__*/_react.default.createElement(BmAccordionWrapper, null, /*#__PURE__*/_react.default.createElement(Provider, {
-    value: {
+    value: _objectSpread({
       toggle: toggle,
       setToggle: setToggle,
       disabled: disabled,
-      expandIcon: expandIcon
-    }
+      expandIcon: expandIcon,
+      expandIconPosition: expandIconPosition
+    }, rest)
   }, children));
 };
 
@@ -114,13 +122,13 @@ BmAccordion.Title = function (_ref2) {
       onClick: function onClick() {
         return !value.disabled || value.disabled === false ? value.setToggle(!value.toggle) : value.setToggle(false);
       }
-    }), Dropdown(value, rest), leadingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    }), value.expandIconPosition === "left" || value.expandIconPosition === undefined && Dropdown(value, rest), leadingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
       icon: leadingIcon,
       size: size
     }), /*#__PURE__*/_react.default.createElement(BmAccordionDetails, null, children), trailingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
       icon: trailingIcon,
       size: size
-    }));
+    }), value.expandIconPosition === "right" && Dropdown(value, rest));
   });
 };
 
@@ -135,6 +143,7 @@ BmAccordion.propTypes = {
   children: _propTypes.default.object,
   size: _propTypes.default.string,
   expandIcon: _propTypes.default.string,
+  expandIconPosition: _propTypes.default.string,
   leadingIcon: _propTypes.default.node,
   trailingIcon: _propTypes.default.node,
   disabled: _propTypes.default.bool,

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

@@ -61,6 +61,16 @@ var _default = {
         summary: undefined
       }
     },
+    expandIconPosition: {
+      options: ["left", "right"],
+      control: {
+        type: "select"
+      },
+      description: "Position of the expand Icon",
+      defaultValue: {
+        summary: "left"
+      }
+    },
     leadingIcon: {
       description: "Material-UI icon(optional)",
       defaultValue: {
@@ -81,6 +91,10 @@ var optionSize = {
   medium: "medium",
   large: "large"
 };
+var optionExpandIcon = {
+  left: "left",
+  right: "medium"
+};
 
 var Accordion = function Accordion() {
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Accordion.default, {
@@ -89,7 +103,8 @@ var Accordion = function Accordion() {
   }, /*#__PURE__*/_react.default.createElement(_Accordion.default.Title, {
     leadingIcon: /*#__PURE__*/_react.default.createElement(_icons.Home, null),
     trailingIcon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null),
-    size: (0, _addonKnobs.select)("size", optionSize, "large")
+    size: (0, _addonKnobs.select)("size", optionSize, "large"),
+    expandIconPosition: (0, _addonKnobs.select)("expandIconPosition", optionExpandIcon, "left")
   }, /*#__PURE__*/_react.default.createElement("h3", null, (0, _addonKnobs.text)("children", "Accordion"))), /*#__PURE__*/_react.default.createElement(_Accordion.default.Body, null, "Accordion Body")));
 };
 

package/package.json

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

package/src/App.js

@@ -1,77 +1,20 @@
 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";
 
 export const App = () => {
   return (
     <>
       <GlobalStyle />
       {/* <MainWrapper> */}
-      <BmButtonDropDown color="green">Hello</BmButtonDropDown>
-      <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>
-        <div>
-          <BmButton variant="neutral" size="small">
-            Label
-          </BmButton>
-        </div>
-      </BmBanner>
-      <BmCard>
-        <BmCard.Header>
-          <h3>Card Header</h3>
-        </BmCard.Header>
-        <BmCard.Body>
+      <BmAccordion>
+        <BmAccordion.Title>
           <p>Hello</p>
-          <BmProgressRing progress="70" size="50" />
-        </BmCard.Body>
-        <BmCard.Footer>Card Footer</BmCard.Footer>
-      </BmCard>
-      <BmProgressRing progress="70" size="45" />
-      <BmTab state="active">
-        <h3>Tabs</h3>
-      </BmTab>
-      <BmNoteBar closeButton>
-        <p>Hello</p>
-      </BmNoteBar>
-      <BmAccordion Open>
-        <BmAccordion.Title>Hello</BmAccordion.Title>
-        <BmAccordion.Body>Helloooo</BmAccordion.Body>
+        </BmAccordion.Title>
       </BmAccordion>
       {/* </MainWrapper> */}
     </>

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

@@ -44,12 +44,12 @@ const BmAccordionWrapper = styled.div`
   flex-direction: column;
 `;
 
-const BmAccordion = ({ children, disabled, expandIcon, Open, ...rest }) => {
+const BmAccordion = ({ children, disabled, expandIcon, Open, expandIconPosition, ...rest }) => {
   const [toggle, setToggle] = useState(Open ? true : false);
 
   return (
     <BmAccordionWrapper>
-      <Provider value={{ toggle, setToggle, disabled, expandIcon }}>
+      <Provider value={{ toggle, setToggle, disabled, expandIcon, expandIconPosition, ...rest }}>
         {children}
       </Provider>
     </BmAccordionWrapper>
@@ -74,10 +74,12 @@ BmAccordion.Title = ({
               : value.setToggle(false)
           }
         >
-          {Dropdown(value, rest)}
+          {value.expandIconPosition === "left" ||
+          (value.expandIconPosition === undefined && Dropdown(value, rest))}
           {leadingIcon && <BmIcons icon={leadingIcon} size={size} />}
           <BmAccordionDetails>{children}</BmAccordionDetails>
           {trailingIcon && <BmIcons icon={trailingIcon} size={size} />}
+          {value.expandIconPosition === "right" && Dropdown(value, rest)}
         </BmAccordionMenu>
       )}
     </Consumer>
@@ -94,6 +96,7 @@ BmAccordion.propTypes = {
   children: PropTypes.object,
   size: PropTypes.string,
   expandIcon: PropTypes.string,
+  expandIconPosition: PropTypes.string,
   leadingIcon: PropTypes.node,
   trailingIcon: PropTypes.node,
   disabled: PropTypes.bool,

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

@@ -33,6 +33,12 @@ export default {
       description: "'none' or Material-UI icon (optional)",
       defaultValue: { summary: undefined },
     },
+    expandIconPosition: {
+      options: ["left", "right"],
+      control: { type: "select" },
+      description: "Position of the expand Icon",
+      defaultValue: { summary: "left" },
+    },
     leadingIcon: {
       description: "Material-UI icon(optional)",
       defaultValue: { summary: undefined },
@@ -50,14 +56,27 @@ const optionSize = {
   large: "large",
 };
 
+const optionExpandIcon = {
+  left: "left",
+  right: "medium",
+};
+
 export const Accordion = () => {
   return (
     <div>
-      <BmAccordion disabled={boolean("disabled", false)} Open={boolean("disabled", false)}>
+      <BmAccordion
+        disabled={boolean("disabled", false)}
+        Open={boolean("disabled", false)}
+      >
         <BmAccordion.Title
           leadingIcon={<Home />}
           trailingIcon={<Favorite />}
           size={select("size", optionSize, "large")}
+          expandIconPosition={select(
+            "expandIconPosition",
+            optionExpandIcon,
+            "left",
+          )}
         >
           <h3>{text("children", "Accordion")}</h3>
         </BmAccordion.Title>