quicksnack 3.10.0 → 3.12.0
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.
- package/dist/components/Box/Box.d.ts +1 -0
- package/dist/components/Box/Box.js +3 -2
- package/dist/components/Floater/Floater.d.ts +1 -0
- package/dist/components/Floater/Floater.js +3 -3
- package/dist/components/Floater/FloaterItem.d.ts +1 -0
- package/dist/components/Floater/FloaterItem.js +3 -2
- package/dist/components/Tabs/Tab.js +1 -1
- package/dist/form/ScaffoldForm/FormGrid/FormGridWrapper.d.ts +2 -1
- package/dist/form/ScaffoldForm/FormGrid/FormGridWrapper.js +6 -4
- package/dist/form/ScaffoldForm/scaffoldProps.d.ts +1 -0
- package/dist/form/ScaffoldForm/scaffoldProps.js +1 -0
- package/package.json +1 -1
|
@@ -10,6 +10,7 @@ export interface BoxProps {
|
|
|
10
10
|
mr?: Responsive<number>;
|
|
11
11
|
mb?: Responsive<number>;
|
|
12
12
|
ml?: Responsive<number>;
|
|
13
|
+
width?: Responsive<number | string>;
|
|
13
14
|
display?: Responsive<"inline" | "block" | "contents" | "flex" | "grid" | "inline-block" | "inline-flex" | "inline-grid" | "inline-table" | "list-item" | "run-in" | "table" | "table-caption" | "table-column-group" | "table-header-group" | "table-footer-group" | "table-row-group" | "table-cell" | "table-column" | "table-row" | "none" | "initial" | "inherit">;
|
|
14
15
|
flexGrow?: Responsive<"inherit" | "initial" | "unset" | number>;
|
|
15
16
|
flexShrink?: Responsive<"inherit" | "initial" | "unset" | number>;
|
|
@@ -26,7 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
26
26
|
exports.Box = void 0;
|
|
27
27
|
var responsiveProps_1 = require("../../responsiveness/responsiveProps");
|
|
28
28
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
29
|
-
exports.Box = styled_components_1.default.div(
|
|
29
|
+
exports.Box = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n box-sizing: border-box;\n \n ", "\n"], ["\n box-sizing: border-box;\n \n ", "\n"])), function (props) { return (0, responsiveProps_1.responsiveProps)(props, {
|
|
30
30
|
"p": function (unit) { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), props.theme.spacing(unit)); },
|
|
31
31
|
"pt": function (unit) { return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["padding-top: ", ";"], ["padding-top: ", ";"])), props.theme.spacing(unit)); },
|
|
32
32
|
"pr": function (unit) { return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["padding-right: ", ";"], ["padding-right: ", ";"])), props.theme.spacing(unit)); },
|
|
@@ -44,5 +44,6 @@ exports.Box = styled_components_1.default.div(templateObject_18 || (templateObje
|
|
|
44
44
|
"alignItems": function (unit) { return (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), unit); },
|
|
45
45
|
"textAlign": function (unit) { return (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["text-align: ", ";"], ["text-align: ", ";"])), unit); },
|
|
46
46
|
"justifyContent": function (unit) { return (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), unit); },
|
|
47
|
+
"width": function (unit) { return (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), typeof unit === 'number' ? props.theme.spacing(unit) : unit); },
|
|
47
48
|
}); });
|
|
48
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
|
|
49
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
@@ -36,13 +36,13 @@ var hasElement = function (item) {
|
|
|
36
36
|
return !!item.element;
|
|
37
37
|
};
|
|
38
38
|
var Floater = function (_a) {
|
|
39
|
-
var items = _a.items, _b = _a.
|
|
39
|
+
var items = _a.items, _b = _a.forceEqualWidth, forceEqualWidth = _b === void 0 ? false : _b, _c = _a.stretch, stretch = _c === void 0 ? false : _c, props = __rest(_a, ["items", "forceEqualWidth", "stretch"]);
|
|
40
40
|
return react_1.default.createElement(Box_1.Box, __assign({ mb: verticalMargin, mt: verticalMargin, ml: horizontalMargin, mr: horizontalMargin, display: display }, props), items
|
|
41
41
|
.filter(Boolean)
|
|
42
42
|
.map(function (item, i) {
|
|
43
43
|
return hasElement(item)
|
|
44
|
-
? react_1.default.createElement(FloaterItem_1.FloaterItem, { key: i, stretch: item.stretch }, item.element)
|
|
45
|
-
: react_1.default.createElement(FloaterItem_1.FloaterItem, { key: i, stretch: stretch }, item);
|
|
44
|
+
? (react_1.default.createElement(FloaterItem_1.FloaterItem, { key: i, laptopWidth: item.forceEqualWidth ? "".concat(100 / items.length, "%") : undefined, stretch: item.stretch }, item.element))
|
|
45
|
+
: react_1.default.createElement(FloaterItem_1.FloaterItem, { key: i, laptopWidth: forceEqualWidth ? "".concat(100 / items.length, "%") : undefined, stretch: stretch }, item);
|
|
46
46
|
}));
|
|
47
47
|
};
|
|
48
48
|
exports.Floater = Floater;
|
|
@@ -32,7 +32,8 @@ var horizontalPadding = { laptop: 1 };
|
|
|
32
32
|
var verticalPadding = { mobile: 1, laptop: 0 };
|
|
33
33
|
var flexGrow = { laptop: 1 };
|
|
34
34
|
var FloaterItem = function (_a) {
|
|
35
|
-
var stretch = _a.stretch, props = __rest(_a, ["stretch"]);
|
|
36
|
-
|
|
35
|
+
var stretch = _a.stretch, laptopWidth = _a.laptopWidth, props = __rest(_a, ["stretch", "laptopWidth"]);
|
|
36
|
+
var width = react_1.default.useMemo(function () { return ({ laptop: laptopWidth }); }, [laptopWidth]);
|
|
37
|
+
return react_1.default.createElement(Box_1.Box, __assign({ flexGrow: stretch ? flexGrow : undefined, width: width, pt: verticalPadding, pb: verticalPadding, pl: horizontalPadding, pr: horizontalPadding }, props));
|
|
37
38
|
};
|
|
38
39
|
exports.FloaterItem = FloaterItem;
|
|
@@ -52,7 +52,7 @@ exports.Tab = void 0;
|
|
|
52
52
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
53
53
|
var Box_1 = require("../Box/Box");
|
|
54
54
|
var react_1 = __importDefault(require("react"));
|
|
55
|
-
var StyledBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n \n padding: ", ";\n \n ", "\n \n ", " \n \n ", "\n \n"], ["\n \n padding: ", ";\n \n ", "\n \n ", " \n \n ", "\n \n"])), function (props) { return props.theme.spacing(2.5, 5); }, function (props) { return !props.isActive && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n cursor: pointer; \n color: #337ab7; \n &:hover,\n &:focus {\n color: #23527c;\n text-decoration: underline;\n }\n "], ["\n cursor: pointer; \n color: #337ab7; \n &:hover,\n &:focus {\n color: #23527c;\n text-decoration: underline;\n }\n "]))); }, function (props) { return props.isActive && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-weight: bold;\n border: 1px solid rgba(34,36,38,.15);\n border-bottom: 0px;\n margin-bottom: -1px;\n border-top-left-radius: 4px; \n border-top-right-radius: 4px; \n background-color: ", "; \n "], ["\n font-weight: bold;\n border: 1px solid rgba(34,36,38,.15);\n border-bottom: 0px;\n margin-bottom: -1px;\n border-top-left-radius: 4px; \n border-top-right-radius: 4px; \n background-color: ", "; \n "])), function (props) { return props.theme.palette.common.white; }); }, function (props) { return props.variant && "\n color: ".concat(props.theme.palette.form[props.variant], "
|
|
55
|
+
var StyledBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n \n padding: ", ";\n \n ", "\n \n ", " \n \n ", "\n \n"], ["\n \n padding: ", ";\n \n ", "\n \n ", " \n \n ", "\n \n"])), function (props) { return props.theme.spacing(2.5, 5); }, function (props) { return !props.isActive && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n cursor: pointer; \n color: #337ab7; \n &:hover,\n &:focus {\n color: #23527c;\n text-decoration: underline;\n }\n "], ["\n cursor: pointer; \n color: #337ab7; \n &:hover,\n &:focus {\n color: #23527c;\n text-decoration: underline;\n }\n "]))); }, function (props) { return props.isActive && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-weight: bold;\n border: 1px solid rgba(34,36,38,.15);\n border-bottom: 0px;\n margin-bottom: -1px;\n border-top-left-radius: 4px; \n border-top-right-radius: 4px; \n background-color: ", "; \n "], ["\n font-weight: bold;\n border: 1px solid rgba(34,36,38,.15);\n border-bottom: 0px;\n margin-bottom: -1px;\n border-top-left-radius: 4px; \n border-top-right-radius: 4px; \n background-color: ", "; \n "])), function (props) { return props.theme.palette.common.white; }); }, function (props) { return props.variant && "\n font-weight: bold;\n color: ".concat(props.theme.palette.form[props.variant], ";\n &:hover {\n color: ").concat(props.theme.palette.form[props.variant], ";\n }\n "); });
|
|
56
56
|
var Tab = function (_a) {
|
|
57
57
|
var id = _a.id, isActive = _a.isActive, onClick = _a.onClick, restProps = __rest(_a, ["id", "isActive", "onClick"]);
|
|
58
58
|
var handleClick = react_1.default.useCallback(function () {
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { FormGridCellProps } from "./FormGridCell";
|
|
3
3
|
export interface FormGridWrapperProps extends FormGridCellProps {
|
|
4
|
+
isRequired?: boolean;
|
|
4
5
|
label?: string | JSX.Element;
|
|
5
6
|
hint?: string | JSX.Element;
|
|
6
7
|
error?: string | JSX.Element;
|
|
7
8
|
}
|
|
8
|
-
export declare const getFormGridWrapperProps: ({ position, align, label, hint, error }: FormGridWrapperProps) => FormGridWrapperProps;
|
|
9
|
+
export declare const getFormGridWrapperProps: ({ position, align, label, hint, error, isRequired }: FormGridWrapperProps) => FormGridWrapperProps;
|
|
9
10
|
export declare const FormGridWrapper: React.FC<FormGridWrapperProps>;
|
|
@@ -15,15 +15,17 @@ var Label = styled_components_1.default.label(templateObject_1 || (templateObjec
|
|
|
15
15
|
var Hint = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: ", ";\n margin: ", ";\n line-height: 1.4em;\n font-size: .92857143em; \n"], ["\n color: ", ";\n margin: ", ";\n line-height: 1.4em;\n font-size: .92857143em; \n"])), (function (props) { return !!props.error ? "#da9796;" : props.theme.palette.form.hint; }), function (props) { return props.theme.spacing(-1, 0, 1, 0); });
|
|
16
16
|
var Error = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([" \n color: ", "; \n margin: ", ";\n font-weight: bold; \n font-style: italic; \n line-height: 1.4em;\n font-size: .92857143em; \n"], [" \n color: ", "; \n margin: ", ";\n font-weight: bold; \n font-style: italic; \n line-height: 1.4em;\n font-size: .92857143em; \n"])), function (props) { return props.theme.palette.form.error; }, function (props) { return props.theme.spacing(1, 0, 0, 0); });
|
|
17
17
|
var getFormGridWrapperProps = function (_a) {
|
|
18
|
-
var position = _a.position, align = _a.align, label = _a.label, hint = _a.hint, error = _a.error;
|
|
19
|
-
return ({ position: position, align: align, label: label, hint: hint, error: error });
|
|
18
|
+
var position = _a.position, align = _a.align, label = _a.label, hint = _a.hint, error = _a.error, isRequired = _a.isRequired;
|
|
19
|
+
return ({ position: position, align: align, label: label, hint: hint, error: error, isRequired: isRequired });
|
|
20
20
|
};
|
|
21
21
|
exports.getFormGridWrapperProps = getFormGridWrapperProps;
|
|
22
22
|
var FormGridWrapper = function (_a) {
|
|
23
|
-
var position = _a.position, align = _a.align, label = _a.label, hint = _a.hint, error = _a.error, children = _a.children;
|
|
23
|
+
var position = _a.position, align = _a.align, label = _a.label, hint = _a.hint, error = _a.error, isRequired = _a.isRequired, children = _a.children;
|
|
24
24
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
25
25
|
react_1.default.createElement(FormGridCell_1.FormGridCell, { position: position, align: align, className: 'form-grid-cell__label-hint' },
|
|
26
|
-
label && (react_1.default.createElement(Label, { error: error },
|
|
26
|
+
label && (react_1.default.createElement(Label, { error: error },
|
|
27
|
+
label,
|
|
28
|
+
isRequired && react_1.default.createElement(react_1.default.Fragment, null, " *"))),
|
|
27
29
|
hint && (react_1.default.createElement(Hint, { error: error }, hint))),
|
|
28
30
|
react_1.default.createElement(FormGridCell_1.FormGridCell, { position: position, align: align, rowOffset: 1, className: 'form-grid-cell__field-error' },
|
|
29
31
|
children,
|