quicksnack 3.3.0 → 3.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -11,7 +11,7 @@ exports.HorizontalScroller = void 0;
11
11
  var react_1 = __importDefault(require("react"));
12
12
  var Box_1 = require("../Box/Box");
13
13
  var styled_components_1 = __importDefault(require("styled-components"));
14
- var Scroller = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n overflow-x: auto;\n"], ["\n overflow-x: auto;\n"])));
14
+ var Scroller = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n overflow-x: auto;\n overflow-y: hidden;\n"], ["\n overflow-x: auto;\n overflow-y: hidden;\n"])));
15
15
  var HorizontalScroller = function (_a) {
16
16
  var children = _a.children;
17
17
  return (react_1.default.createElement(Scroller, null, children));
@@ -31,7 +31,7 @@ var styled_components_1 = __importStar(require("styled-components"));
31
31
  var react_1 = __importDefault(require("react"));
32
32
  var SlideOpen_1 = require("../../animation/SlideOpen/SlideOpen");
33
33
  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"])));
34
- 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: ", ";\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: ", ";\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); });
34
+ 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); });
35
35
  var MenuItem = function (_a) {
36
36
  var item = _a.item, isOpen = _a.isOpen, isActive = _a.isActive, children = _a.children;
37
37
  var _b = react_1.default.useState(!!isOpen), isDelayedOpen = _b[0], setDelayedOpen = _b[1];
@@ -55,7 +55,7 @@ var theme_1 = require("../../theme");
55
55
  var responsiveProps_1 = require("../../responsiveness/responsiveProps");
56
56
  var Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", " \n"], ["\n ", " \n"])), function (props) { return props.actionButton
57
57
  ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["margin: 0;"], ["margin: 0;"]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), function (props) { return props.theme.spacing(0, 2, 0, 0); }); });
58
- var StyledButton = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: bold;\n letter-spacing: 1px; \n line-height: 1em; \n outline: 0;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n text-decoration: none;\n font-family: \"Open Sans\", Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif; \n transition: background-color .1s ease, color .1s ease; \n display: flex;\n flex-direction: row;\n align-items: center;\n user-select: none;\n min-height: 38px; \n \n ", "\n \n ", " \n \n &:focus {\n background-blend-mode: darken;\n } \n \n ", "\n \n ", " \n"], ["\n font-size: 14px;\n font-weight: bold;\n letter-spacing: 1px; \n line-height: 1em; \n outline: 0;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n text-decoration: none;\n font-family: \"Open Sans\", Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif; \n transition: background-color .1s ease, color .1s ease; \n display: flex;\n flex-direction: row;\n align-items: center;\n user-select: none;\n min-height: 38px; \n \n ", "\n \n ", " \n \n &:focus {\n background-blend-mode: darken;\n } \n \n ", "\n \n ", " \n"])), function (props) { return props.actionButton && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 100%; \n ", "\n "], ["\n width: 100%; \n ", "\n "])), (0, responsiveProps_1.mq)('laptop', "width: auto")); }, function (props) { return props.variant !== 'text'
58
+ var StyledButton = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: bold;\n letter-spacing: 1px; \n line-height: 1em; \n outline: 0;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n text-decoration: none;\n font-family: \"Open Sans\", Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif; \n transition: background-color .1s ease, color .1s ease; \n display: flex;\n flex-direction: row;\n align-items: center;\n user-select: none;\n min-height: 38px; \n \n ", "\n \n \n ", " \n \n &:disabled {\n opacity: .5;\n } \n \n &:focus {\n background-blend-mode: darken;\n } \n \n ", "\n \n ", " \n"], ["\n font-size: 14px;\n font-weight: bold;\n letter-spacing: 1px; \n line-height: 1em; \n outline: 0;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n text-decoration: none;\n font-family: \"Open Sans\", Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif; \n transition: background-color .1s ease, color .1s ease; \n display: flex;\n flex-direction: row;\n align-items: center;\n user-select: none;\n min-height: 38px; \n \n ", "\n \n \n ", " \n \n &:disabled {\n opacity: .5;\n } \n \n &:focus {\n background-blend-mode: darken;\n } \n \n ", "\n \n ", " \n"])), function (props) { return props.actionButton && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 100%; \n ", "\n "], ["\n width: 100%; \n ", "\n "])), (0, responsiveProps_1.mq)('laptop', "width: auto")); }, function (props) { return props.variant !== 'text'
59
59
  ? !props.icon
60
60
  ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["padding: ", "; min-width: ", ";"], ["padding: ", "; min-width: ", ";"])), props.theme.spacing(3, 5), function (props) { return props.theme.spacing(10); }) : props.hasChildren && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["position: relative; padding: ", ";"], ["position: relative; padding: ", ";"])), props.theme.spacing(3, 5, 3, 13))
61
61
  : (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["font-weight: 700; padding: 0;"], ["font-weight: 700; padding: 0;"]))); }, function (props) {
@@ -65,7 +65,7 @@ var StyledButton = styled_components_1.default.button(templateObject_8 || (templ
65
65
  }, function (props) {
66
66
  var _a;
67
67
  var _b = theme_1.theme.palette.button[(_a = props.variant) !== null && _a !== void 0 ? _a : 'default'], idle = _b.idle, hover = _b.hover, active = _b.active;
68
- return "\n color: ".concat(idle.text, ";\n background-color: ").concat(idle.background, "; \n \n &:hover, &:focus {\n color: ").concat(hover.text, ";\n background-color: ").concat(hover.background, "; \n } \n\n &:active {\n color: ").concat(active.text, ";\n background-color: ").concat(active.background, "; \n } \n ");
68
+ return "\n color: ".concat(idle.text, ";\n background-color: ").concat(idle.background, "; \n \n &:not(:disabled) {\n &:hover, &:focus {\n color: ").concat(hover.text, ";\n background-color: ").concat(hover.background, "; \n } \n \n &:active {\n color: ").concat(active.text, ";\n background-color: ").concat(active.background, "; \n } \n }\n \n ");
69
69
  });
70
70
  var IconWrapper = styled_components_1.default.span(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n \n ", " \n"], ["\n ", "\n \n ", " \n"])), function (props) { return props.variant !== "text" && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n min-width: ", ";\n "], ["\n min-width: ", ";\n "])), props.theme.spacing(10)); }, function (props) { return props.variant === "text"
71
71
  ? props.hasChildren && (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n padding-right: ", ";\n "], ["\n padding-right: ", ";\n "])), props.theme.spacing(2))
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "quicksnack",
3
3
  "description": "Quickly create beautiful admin layouts using react",
4
- "version": "3.3.0",
4
+ "version": "3.4.2",
5
5
  "private": false,
6
6
  "files": [
7
7
  "dist/**"
@@ -13,8 +13,8 @@
13
13
  "start": "react-scripts start",
14
14
  "test": "react-scripts test",
15
15
  "eject": "react-scripts eject",
16
- "storybook": "start-storybook -p 6006 -s static",
17
- "build-storybook": "build-storybook -s static -o ./public",
16
+ "storybook": "start-storybook -p 6006",
17
+ "build-storybook": "build-storybook -o ./public",
18
18
  "prepublish": "tsc",
19
19
  "semantic-release": "semantic-release"
20
20
  },
@@ -54,26 +54,28 @@
54
54
  "@semantic-release/git": "10.0.1",
55
55
  "@semantic-release/gitlab": "7.0.4",
56
56
  "@semantic-release/npm": "8.0.3",
57
- "@storybook/addon-actions": "6.4.9",
58
- "@storybook/addon-essentials": "6.4.9",
59
- "@storybook/addon-links": "6.4.9",
60
- "@storybook/node-logger": "6.4.9",
61
- "@storybook/preset-create-react-app": "3.2.0",
62
- "@storybook/react": "6.4.9",
57
+ "@storybook/addon-actions": "6.4.10",
58
+ "@storybook/addon-essentials": "6.4.10",
59
+ "@storybook/addon-links": "6.4.10",
60
+ "@storybook/builder-webpack5": "^6.4.10",
61
+ "@storybook/manager-webpack5": "^6.4.10",
62
+ "@storybook/node-logger": "6.4.10",
63
+ "@storybook/preset-create-react-app": "4.0.0",
64
+ "@storybook/react": "6.4.10",
63
65
  "@testing-library/jest-dom": "5.16.1",
64
66
  "@testing-library/react": "12.1.2",
65
67
  "@testing-library/user-event": "13.5.0",
66
- "@types/jest": "27.0.3",
68
+ "@types/jest": "27.4.0",
67
69
  "@types/lodash": "4.14.178",
68
- "@types/node": "16.11.13",
69
- "@types/react": "17.0.37",
70
+ "@types/node": "16.11.17",
71
+ "@types/react": "17.0.38",
70
72
  "@types/react-dom": "17.0.11",
71
- "@types/styled-components": "5.1.18",
73
+ "@types/styled-components": "5.1.19",
72
74
  "babel-loader": "8.2.3",
73
75
  "react": "17.0.2",
74
76
  "react-dom": "17.0.2",
75
77
  "react-icons": "4.3.1",
76
- "react-scripts": "4.0.3",
78
+ "react-scripts": "5.0.0",
77
79
  "semantic-release": "18.0.1",
78
80
  "styled-components": "5.3.3",
79
81
  "typescript": "4.5.4"