techsbcn-storybook 0.20.0 → 0.21.0

package/dist/components/fields/TextFieldComponent/TextFieldComponent.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import { StandardTextFieldProps } from '@mui/material/';
 import './TextFieldComponent.scss';
 export declare type InputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
-export interface TextFieldComponentProps {
+export interface TextFieldComponentProps extends StandardTextFieldProps {
     id?: string;
     label?: string;
     name?: string;

package/dist/components/layouts/Standard/AppHeader/AppHeader.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import './AppHeader.scss';
 interface AppHeaderProps {
-    handleDrawerOpen: () => void;
+    handleDrawerOpen?: () => void;
     children?: React.ReactNode;
+    className?: string;
 }
 export declare const AppHeader: React.FC<AppHeaderProps>;
 export {};

package/dist/components/navigation/VerticalNav/NavIcon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface NavIconProps {
+    iconClassName?: string;
+    iconComponent?: any;
+}
+export declare const NavIcon: React.FC<NavIconProps>;
+export {};

package/dist/components/navigation/VerticalNav/VerticalNav.d.ts

@@ -9,6 +9,8 @@ export interface NavigationProps {
     title?: string;
     route?: string;
     type?: NavigationType;
+    iconClassName?: string;
+    iconComponent?: any;
     persmisionAvailable?: string | string[];
     children?: NavigationProps[] | NavigationProps;
 }

package/dist/components/wrappers/MainWrapperComponent/MainWrapperComponent.d.ts

@@ -8,6 +8,7 @@ interface MainWrapperComponentProps {
     headerProps?: SearchComponentProps;
     divider?: boolean;
     children?: React.ReactNode;
+    height?: string;
 }
 export declare const MainWrapperComponent: React.FC<MainWrapperComponentProps>;
 export {};

package/dist/techsbcn-storybook.cjs.development.js

@@ -261,9 +261,11 @@ var css_248z$3 = ".main-wrapper-component {\n  background-color: white;\n  box-s
 styleInject(css_248z$3);
 
 var MainWrapperComponent = function MainWrapperComponent(props) {
+  var _props$height;
+
   return React__default.createElement(_.Box, {
     className: "main-wrapper-component",
-    height: "100%"
+    height: "" + ((_props$height = props.height) != null ? _props$height : '100%')
   }, React__default.createElement(_.Box, {
     height: "4px"
   }, props.loadingProgressBar && React__default.createElement(LinearProgressComponent, null)), React__default.createElement(_.Box, {
@@ -1224,6 +1226,22 @@ var MainLayoutSimple = function MainLayoutSimple(props) {
   }, props.mainComponent))));
 };
 
+var NavIcon = function NavIcon(props) {
+  if (props.iconClassName) {
+    return React__default.createElement(material.Box, {
+      className: "pcoded-micon"
+    }, React__default.createElement("i", {
+      className: props.iconClassName
+    }));
+  } else if (props.iconComponent) {
+    return React__default.createElement(material.Box, {
+      className: "pcoded-micon"
+    }, props.iconComponent);
+  }
+
+  return React__default.createElement(React__default.Fragment, null);
+};
+
 var VerticalNavItem = function VerticalNavItem(props) {
   var _useLocation = reactRouterDom.useLocation(),
       pathname = _useLocation.pathname;
@@ -1244,10 +1262,16 @@ var VerticalNavItem = function VerticalNavItem(props) {
     onClick: props.onHide
   }, React__default.createElement(material.Box, {
     p: 2,
+    display: "flex",
+    alignContent: "flex-end",
+    alignItems: "center",
     className: "nav-item " + (reactRouterDom.matchPath({
       path: props.item.route + "/*" || ''
     }, pathname) ? 'main-background-color' : '')
-  }, React__default.createElement(material.Box, {
+  }, React__default.createElement(NavIcon, {
+    iconClassName: props.item.iconClassName,
+    iconComponent: props.item.iconComponent
+  }), React__default.createElement(material.Box, {
     className: "nav-item-text"
   }, props.item.title)));
 };
@@ -1319,7 +1343,10 @@ var VerticalNavItemCollapse = function VerticalNavItemCollapse(props) {
     alignItems: "center",
     className: "nav-item " + (open ? 'open' : '') + " " + (needsToBeOpened(pathname, props.item) ? 'active' : ''),
     onClick: handleClick
-  }, React__default.createElement(material.Box, {
+  }, React__default.createElement(NavIcon, {
+    iconClassName: props.item.iconClassName,
+    iconComponent: props.item.iconComponent
+  }), React__default.createElement(material.Box, {
     className: "nav-item-text"
   }, props.item.title), React__default.createElement(material.Box, {
     ml: "auto",
@@ -1348,7 +1375,7 @@ var VerticalNavItemCollapse = function VerticalNavItemCollapse(props) {
 
 var VerticalNavItemCollapse$1 = /*#__PURE__*/React__default.memo(VerticalNavItemCollapse);
 
-var css_248z$8 = ".vertical-navigation {\n  background: transparent;\n  color: white;\n}\n.vertical-navigation .nav-item {\n  cursor: pointer;\n}\n.vertical-navigation .nav-item svg {\n  font-size: 28px;\n}\n.vertical-navigation .nav-item {\n  padding: 12px;\n}\n.vertical-navigation .nav-item:hover {\n  background-color: #333f54;\n}\n.vertical-navigation .active .nav-item {\n  background-color: #3299C7;\n  border-radius: 0 25px 25px 0;\n  margin-right: 16px;\n}\n.vertical-navigation .active .nav-item .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .active .nav-item:hover {\n  color: white !important;\n}\n.vertical-navigation .active .nav-item:hover .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .active {\n  background-color: #333f54;\n}\n.vertical-navigation .nav-item-collapse .active .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .active:hover {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .active:hover .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .open {\n  background-color: #333f54;\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .open .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .collapse-children {\n  background-color: #39465e;\n}\n.vertical-navigation .nav-item-collapse .collapse-children .nav-item-text {\n  padding-left: 16px;\n  padding-right: 16px;\n}";
+var css_248z$8 = ".vertical-navigation {\n  background: transparent;\n  color: white;\n}\n.vertical-navigation .pcoded-micon {\n  font-size: 1rem;\n  margin-right: 7px;\n  border-radius: 4px;\n  width: 30px;\n  display: inline-flex;\n  align-items: center;\n  height: 30px;\n  text-align: center;\n}\n.vertical-navigation .nav-item {\n  cursor: pointer;\n}\n.vertical-navigation .nav-item {\n  padding: 12px;\n}\n.vertical-navigation .nav-item:hover {\n  background-color: #333f54;\n}\n.vertical-navigation .active .nav-item {\n  background-color: #3299C7;\n  border-radius: 0 25px 25px 0;\n  margin-right: 16px;\n}\n.vertical-navigation .active .nav-item .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .active .nav-item:hover {\n  color: white !important;\n}\n.vertical-navigation .active .nav-item:hover .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .active {\n  background-color: #333f54;\n}\n.vertical-navigation .nav-item-collapse .active .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .active:hover {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .active:hover .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .open {\n  background-color: #333f54;\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .open .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .collapse-children {\n  background-color: #39465e;\n}\n.vertical-navigation .nav-item-collapse .collapse-children .nav-item-text {\n  padding-left: 16px;\n  padding-right: 16px;\n}";
 styleInject(css_248z$8);
 
 (function (NavigationType) {
@@ -1521,12 +1548,14 @@ var css_248z$c = ".app-bar {\n  background-color: white !important;\n  border-bo
 styleInject(css_248z$c);
 
 var AppHeader = function AppHeader(props) {
+  var _props$className;
+
   return React__default.createElement(material.AppBar, {
     position: "sticky",
-    className: "app-bar main-background-body"
+    className: "app-bar main-background-body " + ((_props$className = props.className) != null ? _props$className : '')
   }, React__default.createElement(material.Toolbar, {
     className: "app-toolbar"
-  }, React__default.createElement(material.IconButton, {
+  }, props.handleDrawerOpen && React__default.createElement(material.IconButton, {
     sx: {
       display: {
         xs: 'inline-flex',