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
|
|
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.
|
|
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
|
|
17
|
-
"build-storybook": "build-storybook -
|
|
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.
|
|
58
|
-
"@storybook/addon-essentials": "6.4.
|
|
59
|
-
"@storybook/addon-links": "6.4.
|
|
60
|
-
"@storybook/
|
|
61
|
-
"@storybook/
|
|
62
|
-
"@storybook/
|
|
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
|
|
68
|
+
"@types/jest": "27.4.0",
|
|
67
69
|
"@types/lodash": "4.14.178",
|
|
68
|
-
"@types/node": "16.11.
|
|
69
|
-
"@types/react": "17.0.
|
|
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.
|
|
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": "
|
|
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"
|