quicksnack 3.5.0 → 3.6.0

package/dist/components/Footer/Footer.js

@@ -11,10 +11,11 @@ exports.Footer = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Box_1 = require("../Box/Box");
+var SideBar_1 = require("../Menu/SideBar");
 var StyledBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-top: 1px solid #DDDDDD;\n  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.04);  \n  box-sizing: border-box;\n"], ["\n  background-color: ", ";\n  border-top: 1px solid #DDDDDD;\n  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.04);  \n  box-sizing: border-box;\n"])), function (props) { return props.theme.palette.common.white; });
 var Footer = function (_a) {
     var children = _a.children;
-    return (react_1.default.createElement(StyledBox, { pt: 2, pb: 2, pr: 5, pl: 5 }, children));
+    return (react_1.default.createElement(StyledBox, { pt: 2, pb: 2, pr: 5, pl: { mobile: 5, laptop: SideBar_1.SIDEBAR_COLLAPSED_WIDTH + 5 } }, children));
 };
 exports.Footer = Footer;
 var templateObject_1;

package/dist/components/Menu/Menu.js

@@ -31,7 +31,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var react_1 = __importDefault(require("react"));
 var SlideOpen_1 = require("../../animation/SlideOpen/SlideOpen");
 exports.Menu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n"], ["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n"])));
-var StyledMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: ", ";\n    \n  ", "\n           \n  & button:hover, & button:active, & button:focus {\n     color: ", " !important;\n  }\n  \n  & button {\n    width: 100%;\n  }\n  \n  ", "  \n"], ["\n  padding: ", ";\n    \n  ", "\n           \n  & button:hover, & button:active, & button:focus {\n     color: ", " !important;\n  }\n  \n  & button {\n    width: 100%;\n  }\n  \n  ", "  \n"])), function (props) { return props.theme.spacing(.5, 5); }, function (props) { return props.isOpen && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["  \n      border-left: 4px solid ", ";\n      background: #293846;\n  "], ["  \n      border-left: 4px solid ", ";\n      background: #293846;\n  "])), props.theme.palette.colors.blue); }, function (props) { return props.theme.palette.common.white; }, function (props) { return props.isActive && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    & button { \n      color: ", ";\n    }\n  "], ["\n    & button { \n      color: ", ";\n    }\n  "])), props.theme.palette.common.white); });
+var StyledMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: ", ";\n    \n  ", "\n           \n  & button:hover, & button:active, & button:focus {\n     color: ", " !important;\n  }\n  \n  & button {\n    width: 100%;\n  }\n  \n  ", "  \n"], ["\n  padding: ", ";\n    \n  ", "\n           \n  & button:hover, & button:active, & button:focus {\n     color: ", " !important;\n  }\n  \n  & button {\n    width: 100%;\n  }\n  \n  ", "  \n"])), function (props) { return props.theme.spacing(.5, 5); }, function (props) { return props.isOpen && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["  \n      border-left: ", " solid ", ";      \n      background: #293846;\n      \n      & > * {\n        margin-left: ", ";\n      }\n  "], ["  \n      border-left: ", " solid ", ";      \n      background: #293846;\n      \n      & > * {\n        margin-left: ", ";\n      }\n  "])), props.theme.spacing(1), props.theme.palette.colors.blue, props.theme.spacing(-1)); }, function (props) { return props.theme.palette.common.white; }, function (props) { return props.isActive && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    & button { \n      color: ", ";\n    }\n  "], ["\n    & button { \n      color: ", ";\n    }\n  "])), props.theme.palette.common.white); });
 var MenuItem = function (_a) {
     var item = _a.item, isOpen = _a.isOpen, isActive = _a.isActive, children = _a.children;
     var _b = react_1.default.useState(!!isOpen), isDelayedOpen = _b[0], setDelayedOpen = _b[1];

package/dist/components/Menu/MenuSlideOpenIndicator.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MenuSlideOpenIndicator: React.FC;

package/dist/components/Menu/MenuSlideOpenIndicator.js

@@ -0,0 +1,22 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuSlideOpenIndicator = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var responsiveProps_1 = require("../../responsiveness/responsiveProps");
+var SideBar_1 = require("./SideBar");
+var Box_1 = require("../Box/Box");
+var StyledBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: none;\n    ", "\n    \n    height: 100%;\n    flex-direction: row;\n    align-items: center;\n    padding: ", ";    \n    \n    ", ":hover & {\n        display:none;\n    }\n"], ["\n    display: none;\n    ", "\n    \n    height: 100%;\n    flex-direction: row;\n    align-items: center;\n    padding: ", ";    \n    \n    ", ":hover & {\n        display:none;\n    }\n"])), (0, responsiveProps_1.mq)("laptop", "display: flex;"), function (props) { return props.theme.spacing(0, 5); }, SideBar_1.SideBar);
+var MenuSlideOpenIndicator = function (_a) {
+    var children = _a.children;
+    return (react_1.default.createElement(StyledBox, null, children));
+};
+exports.MenuSlideOpenIndicator = MenuSlideOpenIndicator;
+var templateObject_1;

package/dist/components/Menu/SideBar.d.ts

@@ -1,3 +1,4 @@
+export declare const SIDEBAR_COLLAPSED_WIDTH = 15;
 declare type SideBarProps = {
     width?: number;
     isOpen?: boolean;

package/dist/components/Menu/SideBar.js

@@ -23,9 +23,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SideBar = void 0;
+exports.SideBar = exports.SIDEBAR_COLLAPSED_WIDTH = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var Box_1 = require("../Box/Box");
 var responsiveProps_1 = require("../../responsiveness/responsiveProps");
-exports.SideBar = (0, styled_components_1.default)(Box_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  float: left;\n    \n  height: 100%;\n  width: 100%;  \n    \n  background-color: #243646;\n    \n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  \n  z-index: 900;\n     \n  display: ", ";   \n     \n  ", "  \n"], ["\n  float: left;\n    \n  height: 100%;\n  width: 100%;  \n    \n  background-color: #243646;\n    \n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  \n  z-index: 900;\n     \n  display: ", ";   \n     \n  ", "  \n"])), function (props) { return props.isOpen ? 'block' : 'none'; }, (0, responsiveProps_1.mq)("laptop", (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: static;    \n    display: block;\n    width: ", ";  \n  "], ["\n    position: static;    \n    display: block;\n    width: ", ";  \n  "])), function (props) { return props.theme.spacing(props.width || 50); })));
+exports.SIDEBAR_COLLAPSED_WIDTH = 15;
+exports.SideBar = (0, styled_components_1.default)(Box_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  float: left;\n    \n  height: 100%;\n  width: 100%;  \n    \n  background-color: #243646;\n    \n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  \n  z-index: 900;\n     \n  display: ", ";     \n  pointer-events: auto;\n     \n  ", "  \n"], ["\n  float: left;\n    \n  height: 100%;\n  width: 100%;  \n    \n  background-color: #243646;\n    \n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  \n  z-index: 900;\n     \n  display: ", ";     \n  pointer-events: auto;\n     \n  ", "  \n"])), function (props) { return props.isOpen ? 'block' : 'none'; }, (0, responsiveProps_1.mq)("laptop", (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: static;    \n    display: block;\n    width: auto;  \n    box-shadow: 2px 0px 6px -1px rgba(0,0,0,0.74);\n    \n    // width: ", ";\n    \n    transition: transform .1s ease-out;\n    transform: translateX(calc(-100% + ", "));\n           \n    &:hover {\n      transform: translateX(0);\n    }\n    \n    & > ul {\n      margin-right: ", "\n    }\n       \n  "], ["\n    position: static;    \n    display: block;\n    width: auto;  \n    box-shadow: 2px 0px 6px -1px rgba(0,0,0,0.74);\n    \n    // width: ", ";\n    \n    transition: transform .1s ease-out;\n    transform: translateX(calc(-100% + ", "));\n           \n    &:hover {\n      transform: translateX(0);\n    }\n    \n    & > ul {\n      margin-right: ", "\n    }\n       \n  "])), function (props) { return props.theme.spacing(props.width || 50); }, function (props) { return props.theme.spacing(exports.SIDEBAR_COLLAPSED_WIDTH); }, function (props) { return props.theme.spacing(exports.SIDEBAR_COLLAPSED_WIDTH); })));
 var templateObject_1, templateObject_2;

package/dist/components/TopBar/TopBar.js

@@ -11,11 +11,12 @@ exports.TopBar = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Box_1 = require("../Box/Box");
+var SideBar_1 = require("../Menu/SideBar");
 var StyledBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: #FFFFFF;\n  border-bottom: 1px solid #DDDDDD;\n  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.04);   \n  box-sizing: border-box;\n"], ["\n  background-color: #FFFFFF;\n  border-bottom: 1px solid #DDDDDD;\n  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.04);   \n  box-sizing: border-box;\n"])));
 var TopBar = function (_a) {
     var left = _a.left, right = _a.right;
     return (react_1.default.createElement(StyledBox, null,
-        react_1.default.createElement(Box_1.Box, { display: "flex", alignItems: "center", pb: 1, pt: 1, pr: 5, pl: 5 },
+        react_1.default.createElement(Box_1.Box, { display: "flex", alignItems: "center", pb: 1, pt: 1, pr: 5, pl: { mobile: 5, laptop: 5 + SideBar_1.SIDEBAR_COLLAPSED_WIDTH } },
             react_1.default.createElement(Box_1.Box, { flexGrow: 1, display: "flex", pl: 2 }, left),
             react_1.default.createElement(Box_1.Box, { flexGrow: 1, display: "flex", justifyContent: 'flex-end' }, right))));
 };

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export * from './components/Footer/Footer';
 export * from './components/Menu/HamburgerButton';
 export * from './components/Menu/Menu';
 export * from './components/Menu/MenuCloseButton';
+export * from './components/Menu/MenuSlideOpenIndicator';
 export * from './components/Menu/useToggleMobileMenu';
 export * from './components/Menu/SideBarHeader';
 export * from './components/Modal/Modal';

package/dist/index.js

@@ -27,6 +27,7 @@ __exportStar(require("./components/Footer/Footer"), exports);
 __exportStar(require("./components/Menu/HamburgerButton"), exports);
 __exportStar(require("./components/Menu/Menu"), exports);
 __exportStar(require("./components/Menu/MenuCloseButton"), exports);
+__exportStar(require("./components/Menu/MenuSlideOpenIndicator"), exports);
 __exportStar(require("./components/Menu/useToggleMobileMenu"), exports);
 __exportStar(require("./components/Menu/SideBarHeader"), exports);
 __exportStar(require("./components/Modal/Modal"), exports);

package/dist/layouts/BasicLayout/BasicLayout.js

@@ -27,18 +27,21 @@ var Footer_1 = require("../../components/Footer/Footer");
 var constants_1 = require("../constants");
 var SideBar_1 = require("../../components/Menu/SideBar");
 var Wrapper = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject([" \n  background-color: #F3F3F4;\n"], [" \n  background-color: #F3F3F4;\n"])));
-var ContentBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
+var WrapperInner = (0, styled_components_1.default)(Box_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject([" \n  position: relative;\n"], [" \n  position: relative;\n"])));
+var SidebarWrapper = (0, styled_components_1.default)(Box_1.Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject([" \n  position: absolute;\n  height: 100%;\n  z-index: 50;\n  pointer-events: none;\n"], [" \n  position: absolute;\n  height: 100%;\n  z-index: 50;\n  pointer-events: none;\n"])));
+var ContentBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
 var BasicLayout = function (_a) {
     var sideBarProps = _a.sideBarProps, topBarProps = _a.topBarProps, footerProps = _a.footerProps, isLoading = _a.isLoading, loader = _a.loader, children = _a.children;
     return (react_1.default.createElement(Wrapper, { flexGrow: 1, display: "flex", flexDirection: "column" },
-        react_1.default.createElement(Box_1.Box, { flexGrow: 1, flexShrink: 0 },
-            sideBarProps && (react_1.default.createElement(SideBar_1.SideBar, __assign({}, sideBarProps))),
+        react_1.default.createElement(WrapperInner, { flexGrow: 1, flexShrink: 0 },
+            sideBarProps && (react_1.default.createElement(SidebarWrapper, null,
+                react_1.default.createElement(SideBar_1.SideBar, __assign({}, sideBarProps, { className: 'sidebar' })))),
             react_1.default.createElement(ContentBox, { display: "flex", flexDirection: "column" },
                 react_1.default.createElement(TopBar_1.TopBar, __assign({}, topBarProps)),
-                react_1.default.createElement(Box_1.Box, { p: { laptop: constants_1.VerticalRhythmLaptop, mobile: constants_1.VerticalRhythmMobile }, flexGrow: 1 }, isLoading && loader
+                react_1.default.createElement(Box_1.Box, { p: { laptop: constants_1.VerticalRhythmLaptop, mobile: constants_1.VerticalRhythmMobile }, pl: { laptop: constants_1.VerticalRhythmLaptop + SideBar_1.SIDEBAR_COLLAPSED_WIDTH }, flexGrow: 1 }, isLoading && loader
                     ? loader
                     : children),
                 react_1.default.createElement(Footer_1.Footer, __assign({}, footerProps))))));
 };
 exports.BasicLayout = BasicLayout;
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quicksnack",
   "description": "Quickly create beautiful admin layouts using react",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "private": false,
   "files": [
     "dist/**"
@@ -54,23 +54,23 @@
     "@semantic-release/git": "10.0.1",
     "@semantic-release/gitlab": "7.0.4",
     "@semantic-release/npm": "9.0.0",
-    "@storybook/addon-actions": "6.4.18",
-    "@storybook/addon-essentials": "6.4.18",
-    "@storybook/addon-links": "6.4.18",
-    "@storybook/builder-webpack5": "6.4.18",
-    "@storybook/manager-webpack5": "6.4.18",
-    "@storybook/node-logger": "6.4.18",
-    "@storybook/preset-create-react-app": "4.0.0",
-    "@storybook/react": "6.4.18",
+    "@storybook/addon-actions": "6.4.19",
+    "@storybook/addon-essentials": "6.4.19",
+    "@storybook/addon-links": "6.4.19",
+    "@storybook/builder-webpack5": "6.4.19",
+    "@storybook/manager-webpack5": "6.4.19",
+    "@storybook/node-logger": "6.4.19",
+    "@storybook/preset-create-react-app": "4.0.1",
+    "@storybook/react": "6.4.19",
     "@testing-library/jest-dom": "5.16.2",
-    "@testing-library/react": "12.1.2",
+    "@testing-library/react": "12.1.3",
     "@testing-library/user-event": "13.5.0",
     "@types/jest": "27.4.0",
     "@types/lodash": "4.14.178",
-    "@types/node": "16.11.22",
+    "@types/node": "16.11.25",
     "@types/react": "17.0.39",
     "@types/react-dom": "17.0.11",
-    "@types/styled-components": "5.1.21",
+    "@types/styled-components": "5.1.22",
     "babel-loader": "8.2.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",