@eduzz/apps-toolbar-react - npm Package Compare versions

Comparing version 1.1.10 to 1.1.11-beta

App.d.ts

 /// <reference types="react" />
 import { IEduzzToolbarSetupParams } from './interfaces';
 declare const _default: import("react").FC<IEduzzToolbarSetupParams> & {
+    IconMenu: import("react").FC<import("./components/Toolbar/IconMenu").IEduzzToolbarIconMenuProps>;
     Apps: import("@emotion/styled").StyledComponent<{
@@ -5,0 +6,0 @@ theme?: import("@emotion/react").Theme;

App.js

@@ -12,2 +12,3 @@ "use strict";
 var CustomAction_1 = (0, tslib_1.__importDefault)(require("./components/Toolbar/CustomAction"));
+var IconMenu_1 = (0, tslib_1.__importDefault)(require("./components/Toolbar/IconMenu"));
 var User_1 = (0, tslib_1.__importDefault)(require("./components/Toolbar/User"));
@@ -40,2 +41,3 @@ var Context_1 = (0, tslib_1.__importDefault)(require("./components/Toolbar/User/Menu/Context"));
 exports.default = (0, nestedComponent_1.default)(App, {
+    IconMenu: IconMenu_1.default,
     Apps: Apps_1.default,
@@ -42,0 +44,0 @@ User: User_1.default,

components/Toolbar/Belt/index.js

@@ -7,3 +7,2 @@ "use strict";
 var styled_1 = (0, tslib_1.__importDefault)(require("@emotion/styled"));
-var theme_1 = require("../../../assets/theme");
 var context_1 = require("../../../context");
@@ -38,7 +37,13 @@ var className_1 = (0, tslib_1.__importDefault)(require("../../../helpers/className"));
 });
-exports.default = (0, styled_1.default)(Belt)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  color: white;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 ", "px;\n\n  ", " {\n    display: none;\n  }\n\n  &.none {\n    display: none;\n  }\n\n  &.white {\n    background-color: ", ";\n    color: ", ";\n\n    & > .eduzz-toolbar-badge {\n      color: ", ";\n\n      & > svg > path {\n        fill: ", ";\n      }\n    }\n  }\n\n  &.red {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.orange {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.green {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.black {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.golden {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  .eduzz-toolbar-badge {\n    color: white;\n    display: flex;\n    align-items: center;\n\n    & > span {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 250px;\n      font-size: 14px;\n\n      ", " {\n        display: none;\n      }\n    }\n  }\n\n  .eduzz-toolbar-icon-elite {\n    height: 18px;\n    min-width: 43px;\n    margin-right: 4px;\n  }\n\n  .eduzz-toolbar-icon-avatar {\n    width: 30px;\n    height: 30px;\n  }\n"], ["\n  color: white;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 ", "px;\n\n  ", " {\n    display: none;\n  }\n\n  &.none {\n    display: none;\n  }\n\n  &.white {\n    background-color: ", ";\n    color: ", ";\n\n    & > .eduzz-toolbar-badge {\n      color: ", ";\n\n      & > svg > path {\n        fill: ", ";\n      }\n    }\n  }\n\n  &.red {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.orange {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.green {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.black {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.golden {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  .eduzz-toolbar-badge {\n    color: white;\n    display: flex;\n    align-items: center;\n\n    & > span {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 250px;\n      font-size: 14px;\n\n      ", " {\n        display: none;\n      }\n    }\n  }\n\n  .eduzz-toolbar-icon-elite {\n    height: 18px;\n    min-width: 43px;\n    margin-right: 4px;\n  }\n\n  .eduzz-toolbar-icon-avatar {\n    width: 30px;\n    height: 30px;\n  }\n"])), theme_1.TOOLBAR_HEIGHT, function (_a) {
+exports.default = (0, styled_1.default)(Belt)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  color: white;\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: ", "px ", "px;\n  border-radius: 20px;\n  margin: 0 ", "px;\n\n  ", " {\n    display: none;\n  }\n\n  &.none {\n    display: none;\n  }\n\n  &.white {\n    background-color: ", ";\n    color: ", ";\n\n    & > .eduzz-toolbar-badge {\n      color: ", ";\n\n      & > svg > path {\n        fill: ", ";\n      }\n    }\n  }\n\n  &.red {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.orange {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.green {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.black {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.golden {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  .eduzz-toolbar-badge {\n    color: white;\n    display: flex;\n    align-items: center;\n\n    & > span {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 250px;\n      font-size: 14px;\n\n      ", " {\n        display: none;\n      }\n    }\n  }\n\n  .eduzz-toolbar-icon-elite {\n    height: 16px;\n    min-width: 32px;\n    margin-right: 4px;\n  }\n\n  .eduzz-toolbar-icon-avatar {\n    width: 30px;\n    height: 30px;\n  }\n"], ["\n  color: white;\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: ", "px ", "px;\n  border-radius: 20px;\n  margin: 0 ", "px;\n\n  ", " {\n    display: none;\n  }\n\n  &.none {\n    display: none;\n  }\n\n  &.white {\n    background-color: ", ";\n    color: ", ";\n\n    & > .eduzz-toolbar-badge {\n      color: ", ";\n\n      & > svg > path {\n        fill: ", ";\n      }\n    }\n  }\n\n  &.red {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.orange {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.green {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.black {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.golden {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  .eduzz-toolbar-badge {\n    color: white;\n    display: flex;\n    align-items: center;\n\n    & > span {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 250px;\n      font-size: 14px;\n\n      ", " {\n        display: none;\n      }\n    }\n  }\n\n  .eduzz-toolbar-icon-elite {\n    height: 16px;\n    min-width: 32px;\n    margin-right: 4px;\n  }\n\n  .eduzz-toolbar-icon-avatar {\n    width: 30px;\n    height: 30px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing(3);
+    return theme.spacing(1.5);
 }, function (_a) {
     var theme = _a.theme;
+    return theme.spacing(4);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(2);
+}, function (_a) {
+    var theme = _a.theme;
     return theme.breakpoints.mobile;
@@ -45,0 +50,0 @@ }, function (_a) {

components/Toolbar/index.js

@@ -5,10 +5,12 @@ "use strict";
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = (0, tslib_1.__importStar)(require("react"));
 var react_2 = require("@emotion/react");
+var DragAndDrop_1 = (0, tslib_1.__importDefault)(require("@eduzz/houston-icons/DragAndDrop"));
 var context_1 = require("../../context");
 var className_1 = (0, tslib_1.__importDefault)(require("../../helpers/className"));
 var EduzzLogo_1 = (0, tslib_1.__importDefault)(require("../EduzzLogo"));
-var Belt_1 = (0, tslib_1.__importDefault)(require("./Belt"));
+var IconMenu_1 = (0, tslib_1.__importDefault)(require("./IconMenu"));
 var styles_1 = (0, tslib_1.__importDefault)(require("./styles"));
 var Toolbar = (0, react_1.memo)(function (_a) {
+    var _b;
     var className = _a.className, children = _a.children;
@@ -18,2 +20,3 @@ var user = (0, context_1.useToolbarContext)().user;
     var contentClicked = (0, react_1.useRef)({ clicked: false }).current;
+    var _c = (0, react_1.useState)(null), iconMenuProps = _c[0], setIconMenuProps = _c[1];
     var handleDocumentClick = (0, react_1.useCallback)(function () {
@@ -26,3 +29,11 @@ setTimeout(function () {
     }, [contentClicked]);
+    var verifyIconMenu = (0, react_1.useCallback)(function () {
+        var _a;
+        var IconMenuComponent = (_a = react_1.default.Children.toArray(children)) === null || _a === void 0 ? void 0 : _a.find(function (child) { return child.type === IconMenu_1.default; });
+        setIconMenuProps(IconMenuComponent === null || IconMenuComponent === void 0 ? void 0 : IconMenuComponent.props);
+    }, [children]);
     (0, react_1.useEffect)(function () {
+        verifyIconMenu();
+    }, [verifyIconMenu]);
+    (0, react_1.useEffect)(function () {
         document.body.classList.add('eduzz-toolbar-applied');
@@ -49,4 +60,4 @@ document.body.addEventListener('click', handleDocumentClick);
     var handleClickContainer = (0, react_1.useCallback)(function () { return (contentClicked.clicked = true); }, [contentClicked]);
-    return ((0, jsx_runtime_1.jsxs)("header", (0, tslib_1.__assign)({ className: (0, className_1.default)('eduzz-toolbar', className, (user === null || user === void 0 ? void 0 : user.isSupport) && '--support'), onClick: handleClickContainer }, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'eduzz-toolbar-start' }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'eduzz-toolbar-logo' }, { children: (0, jsx_runtime_1.jsx)(EduzzLogo_1.default, {}, void 0) }), void 0), (user === null || user === void 0 ? void 0 : user.isSupport) && (0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ className: 'eduzz-toolbar-support' }, { children: "SUPORTE" }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'eduzz-toolbar-quick-access' }, { children: [children, (0, jsx_runtime_1.jsx)(Belt_1.default, {}, void 0)] }), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("header", (0, tslib_1.__assign)({ className: (0, className_1.default)('eduzz-toolbar', className, (user === null || user === void 0 ? void 0 : user.isSupport) && '--support'), onClick: handleClickContainer }, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'eduzz-toolbar-start' }, { children: [iconMenuProps && Object.keys(iconMenuProps).length > 0 && ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: (0, className_1.default)('eduzz-toolbar-icon-menu', (iconMenuProps === null || iconMenuProps === void 0 ? void 0 : iconMenuProps.persist) && '--persist') }, iconMenuProps, { children: (_b = iconMenuProps.icon) !== null && _b !== void 0 ? _b : (0, jsx_runtime_1.jsx)(DragAndDrop_1.default, { size: 24 }, void 0) }), void 0)), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'eduzz-toolbar-logo' }, { children: (0, jsx_runtime_1.jsx)(EduzzLogo_1.default, {}, void 0) }), void 0), (user === null || user === void 0 ? void 0 : user.isSupport) && (0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ className: 'eduzz-toolbar-support' }, { children: "SUPORTE" }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'eduzz-toolbar-quick-access' }, { children: children }), void 0)] }), void 0));
 });
 exports.default = (0, styles_1.default)(Toolbar);

components/Toolbar/styles.js

@@ -6,3 +6,3 @@ "use strict";
 var theme_1 = require("../../assets/theme");
-exports.default = (function (Component) { return (0, styled_1.default)(Component)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  font-family: 'Open Sans', Roboto, Arial, sans-serif;\n  background-color: ", ";\n  color: ", ";\n  position: relative;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: ", "px;\n  display: flex;\n  justify-content: space-between;\n  z-index: 101;\n  transition: ", ";\n\n  .eduzz-toolbar-start {\n    display: flex;\n    align-items: center;\n\n    .eduzz-toolbar-logo {\n      width: auto;\n      display: flex;\n      align-items: center;\n      padding-left: ", "px;\n\n      ", " {\n        width: 44px;\n        min-width: 40px;\n      }\n\n      svg {\n        width: 86px;\n\n        ", " {\n          width: 32px;\n        }\n      }\n    }\n\n    .eduzz-toolbar-support {\n      font-size: 12px;\n      font-weight: 600;\n      color: ", ";\n      position: relative;\n      top: 2px;\n      margin-left: 16px;\n\n      ", " {\n        display: none;\n      }\n    }\n  }\n\n  .eduzz-toolbar-quick-access {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n"], ["\n  font-family: 'Open Sans', Roboto, Arial, sans-serif;\n  background-color: ", ";\n  color: ", ";\n  position: relative;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: ", "px;\n  display: flex;\n  justify-content: space-between;\n  z-index: 101;\n  transition: ", ";\n\n  .eduzz-toolbar-start {\n    display: flex;\n    align-items: center;\n\n    .eduzz-toolbar-logo {\n      width: auto;\n      display: flex;\n      align-items: center;\n      padding-left: ", "px;\n\n      ", " {\n        width: 44px;\n        min-width: 40px;\n      }\n\n      svg {\n        width: 86px;\n\n        ", " {\n          width: 32px;\n        }\n      }\n    }\n\n    .eduzz-toolbar-support {\n      font-size: 12px;\n      font-weight: 600;\n      color: ", ";\n      position: relative;\n      top: 2px;\n      margin-left: 16px;\n\n      ", " {\n        display: none;\n      }\n    }\n  }\n\n  .eduzz-toolbar-quick-access {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n"])), function (_a) {
+exports.default = (function (Component) { return (0, styled_1.default)(Component)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  font-family: 'Open Sans', Roboto, Arial, sans-serif;\n  background-color: ", ";\n  color: ", ";\n  position: relative;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: ", "px;\n  display: flex;\n  justify-content: space-between;\n  z-index: 101;\n  transition: ", ";\n\n  .eduzz-toolbar-start {\n    display: flex;\n    align-items: center;\n    padding-left: ", "px;\n\n    .eduzz-toolbar-icon-menu {\n      margin-right: ", "px;\n      line-height: 0;\n      cursor: pointer;\n      display: none;\n\n      &.--persist {\n        display: block;\n      }\n\n      ", " {\n        display: block;\n      }\n    }\n\n    .eduzz-toolbar-logo {\n      width: auto;\n      display: flex;\n      align-items: center;\n\n      ", " {\n        width: 44px;\n        min-width: 40px;\n      }\n\n      svg {\n        width: 86px;\n\n        ", " {\n          width: 32px;\n        }\n      }\n    }\n\n    .eduzz-toolbar-support {\n      font-size: 12px;\n      font-weight: 600;\n      color: ", ";\n      position: relative;\n      top: 2px;\n      margin-left: 16px;\n\n      ", " {\n        display: none;\n      }\n    }\n  }\n\n  .eduzz-toolbar-quick-access {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n"], ["\n  font-family: 'Open Sans', Roboto, Arial, sans-serif;\n  background-color: ", ";\n  color: ", ";\n  position: relative;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: ", "px;\n  display: flex;\n  justify-content: space-between;\n  z-index: 101;\n  transition: ", ";\n\n  .eduzz-toolbar-start {\n    display: flex;\n    align-items: center;\n    padding-left: ", "px;\n\n    .eduzz-toolbar-icon-menu {\n      margin-right: ", "px;\n      line-height: 0;\n      cursor: pointer;\n      display: none;\n\n      &.--persist {\n        display: block;\n      }\n\n      ", " {\n        display: block;\n      }\n    }\n\n    .eduzz-toolbar-logo {\n      width: auto;\n      display: flex;\n      align-items: center;\n\n      ", " {\n        width: 44px;\n        min-width: 40px;\n      }\n\n      svg {\n        width: 86px;\n\n        ", " {\n          width: 32px;\n        }\n      }\n    }\n\n    .eduzz-toolbar-support {\n      font-size: 12px;\n      font-weight: 600;\n      color: ", ";\n      position: relative;\n      top: 2px;\n      margin-left: 16px;\n\n      ", " {\n        display: none;\n      }\n    }\n  }\n\n  .eduzz-toolbar-quick-access {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -21,2 +21,8 @@ return theme.colors.barBackground;
     var theme = _a.theme;
+    return theme.spacing(3);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.breakpoints.tablet;
+}, function (_a) {
+    var theme = _a.theme;
     return theme.breakpoints.mobile;
@@ -23,0 +29,0 @@ }, function (_a) {

components/Toolbar/User/Avatar/index.js

@@ -23,6 +23,6 @@ "use strict";
     var theme = _a.theme;
-    return theme.spacing(7);
+    return theme.spacing(7.5);
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing(7);
+    return theme.spacing(7.5);
 }, function (_a) {
@@ -29,0 +29,0 @@ var theme = _a.theme;

components/Toolbar/User/index.js

@@ -14,2 +14,3 @@ "use strict";
 var useOutside_1 = require("../../../hooks/useOutside");
+var Belt_1 = (0, tslib_1.__importDefault)(require("../Belt"));
 var Avatar_1 = (0, tslib_1.__importDefault)(require("./Avatar"));
@@ -40,3 +41,3 @@ var context_2 = (0, tslib_1.__importDefault)(require("./context"));
     }
-    return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ ref: wrapperMenuUser, className: (0, className_1.default)('eduzz-toolbar-user', dropdown && '--active', hasMenu && '--has-menu', className) }, { children: (0, jsx_runtime_1.jsxs)(context_2.default.Provider, (0, tslib_1.__assign)({ value: { dropdown: dropdown, handleClickOutside: handleClickOutside } }, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, className_1.default)('eduzz-toolbar-user-label', dropdown && '--active'), onClick: handleClickOpenDropdown }, { children: [(0, jsx_runtime_1.jsx)(Avatar_1.default, {}, void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'eduzz-toolbar-user-name' }, { children: (0, truncateText_1.default)(user === null || user === void 0 ? void 0 : user.name) }), void 0), hasMenu && ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: (0, className_1.default)('eduzz-toolbar-user-menu-arrow', dropdown && '--open') }, { children: (0, jsx_runtime_1.jsx)(ChevronDown_1.default, { size: 18 }, void 0) }), void 0))] }), void 0), (0, jsx_runtime_1.jsx)(Menu_1.default, { children: children }, void 0)] }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Belt_1.default, {}, void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ ref: wrapperMenuUser, className: (0, className_1.default)('eduzz-toolbar-user', dropdown && '--active', hasMenu && '--has-menu', className) }, { children: (0, jsx_runtime_1.jsxs)(context_2.default.Provider, (0, tslib_1.__assign)({ value: { dropdown: dropdown, handleClickOutside: handleClickOutside } }, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, className_1.default)('eduzz-toolbar-user-label', dropdown && '--active'), onClick: handleClickOpenDropdown }, { children: [(0, jsx_runtime_1.jsx)(Avatar_1.default, {}, void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'eduzz-toolbar-user-name' }, { children: (0, truncateText_1.default)(user === null || user === void 0 ? void 0 : user.name) }), void 0), hasMenu && ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: (0, className_1.default)('eduzz-toolbar-user-menu-arrow', dropdown && '--open') }, { children: (0, jsx_runtime_1.jsx)(ChevronDown_1.default, { size: 18 }, void 0) }), void 0))] }), void 0), (0, jsx_runtime_1.jsx)(Menu_1.default, { children: children }, void 0)] }), void 0) }), void 0)] }, void 0));
 });
@@ -43,0 +44,0 @@ exports.default = (0, styled_1.default)(User)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  position: relative;\n  z-index: 1100;\n\n  &.--has-menu {\n    cursor: pointer;\n\n    &:hover,\n    &.--active {\n      background: rgba(0, 0, 0, 0.15);\n    }\n\n    &:focus {\n      background: none;\n    }\n  }\n\n  .eduzz-toolbar-user-label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 ", "px;\n    height: ", "px;\n\n    ", " {\n      padding: 0 ", "px;\n    }\n\n    .eduzz-toolbar-user-name {\n      font-size: 14px;\n      font-weight: 500;\n\n      ", " {\n        display: none;\n      }\n\n      &::selection {\n        background: none;\n      }\n    }\n\n    .eduzz-toolbar-user-menu-arrow {\n      margin-left: ", "px;\n      transition: ", ";\n\n      ", " {\n        display: none;\n      }\n\n      &.--open {\n        transform: rotate(-180deg);\n      }\n\n      span.houston-icon {\n        line-height: 0;\n        position: relative;\n        top: 2px;\n      }\n    }\n  }\n"], ["\n  position: relative;\n  z-index: 1100;\n\n  &.--has-menu {\n    cursor: pointer;\n\n    &:hover,\n    &.--active {\n      background: rgba(0, 0, 0, 0.15);\n    }\n\n    &:focus {\n      background: none;\n    }\n  }\n\n  .eduzz-toolbar-user-label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 ", "px;\n    height: ", "px;\n\n    ", " {\n      padding: 0 ", "px;\n    }\n\n    .eduzz-toolbar-user-name {\n      font-size: 14px;\n      font-weight: 500;\n\n      ", " {\n        display: none;\n      }\n\n      &::selection {\n        background: none;\n      }\n    }\n\n    .eduzz-toolbar-user-menu-arrow {\n      margin-left: ", "px;\n      transition: ", ";\n\n      ", " {\n        display: none;\n      }\n\n      &.--open {\n        transform: rotate(-180deg);\n      }\n\n      span.houston-icon {\n        line-height: 0;\n        position: relative;\n        top: 2px;\n      }\n    }\n  }\n"])), function (_a) {

package.json

 {
   "name": "@eduzz/apps-toolbar-react",
-  "version": "1.1.10",
+  "version": "1.1.11-beta",
   "private": false,
@@ -5,0 +5,0 @@ "author": "Eduzz Team",

README.md

@@ -79,6 +79,17 @@ # Eduzz Toolbar React
 
-No arquivo `src/index.tsx` implemente o código abaixo.
+No arquivo `src/index.tsx` copie e cole o código abaixo.
 
 ```js
+import ReactDOM from 'react-dom';
+
+import EduzzToolbar from './App';
+import { IEduzzToolbarSetupParams } from './interfaces';
+
+const { Apps, User, UserMenuItem: MenuItem, IconMenu, UserMenuDivider: Divider } = EduzzToolbar;
+
 function DevApp() {
+  function toggleMobileMenu() {
+    console.log('toggle menu');
+  }
+
   const params: IEduzzToolbarSetupParams = {
@@ -89,4 +100,5 @@ application: 'blinket',
       id: 1,
-      name: 'John Doe',
-      email: '[e-mail]'
+      name: 'EDUZZ TECNOLOGIA E DESENVOLVIMENTO',
+      email: '[e-mail]',
+      belt: 'Red Belt'
     }
@@ -97,4 +109,12 @@ };
     <EduzzToolbar {...params}>
-      <EduzzToolbar.Apps />
-      <EduzzToolbar.User />
+      <IconMenu onClick={toggleMobileMenu} />
+
+      <Apps />
+
+      <User>
+        <MenuItem>Meus Dados</MenuItem>
+        <MenuItem>Minhas Compras</MenuItem>
+        <Divider />
+        <MenuItem>Sair</MenuItem>
+      </User>
     </EduzzToolbar>
@@ -105,2 +125,4 @@ );
 ReactDOM.render(<DevApp />, document.getElementById('root'));
+
+export default EduzzToolbar;
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

126469

increased by2.67%

Number of package files

85

increased by2.41%

Lines of code

1860

increased by2.31%

Number of lines in readme file

125

increased by21.36%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes