beem-component 1.3.3 → 1.3.6

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

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

package/dist/components/RouteLink/link.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "beem-component",
-    "version": "1.3.3",
+    "version": "1.3.6",
     "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 />}

package/src/lib/components/Lists/listheader.js

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

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

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