beem-component 1.3.9 → 1.4.0

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,6 +1,6 @@
 {
     "name": "beem-component",
-    "version": "1.3.9",
+    "version": "1.4.0",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {

package/src/App.js

@@ -1,8 +1,6 @@
 import React from "react";
 import "../src/main.scss";
-import {
-  BmAccordion,
-} from "./lib/components";
+import { BmAccordion, BmTab } from "./lib/components";
 import { GlobalStyle } from "./lib/components/globalStyles";
 import "./lib/assets/css/sidebar.scss";
 
@@ -16,6 +14,7 @@ export const App = () => {
           <p>Hello</p>
         </BmAccordion.Title>
       </BmAccordion>
+      <BmTab state="active" stateColor="red">Hello</BmTab>
       {/* </MainWrapper> */}
     </>
   );

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