quicksnack 3.22.5 → 3.24.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/index.d.ts
CHANGED
|
@@ -38,6 +38,8 @@ export * from './form/Checkbox/Checkbox';
|
|
|
38
38
|
export * from './form/FileField/FileField';
|
|
39
39
|
export * from './form/Select/Select';
|
|
40
40
|
export * from './form/TextField/TextField';
|
|
41
|
+
export * from './form/ScaffoldForm/FormGrid/FormGrid';
|
|
42
|
+
export * from './form/ScaffoldForm/FormGrid/FormGridWrapper';
|
|
41
43
|
export * from './layouts/BasicLayout/BasicLayout';
|
|
42
44
|
export * from './layouts/FloatingPanelLayout/FloatingPanelLayout';
|
|
43
45
|
export * from './layouts/constants';
|
package/dist/index.js
CHANGED
|
@@ -54,6 +54,8 @@ __exportStar(require("./form/Checkbox/Checkbox"), exports);
|
|
|
54
54
|
__exportStar(require("./form/FileField/FileField"), exports);
|
|
55
55
|
__exportStar(require("./form/Select/Select"), exports);
|
|
56
56
|
__exportStar(require("./form/TextField/TextField"), exports);
|
|
57
|
+
__exportStar(require("./form/ScaffoldForm/FormGrid/FormGrid"), exports);
|
|
58
|
+
__exportStar(require("./form/ScaffoldForm/FormGrid/FormGridWrapper"), exports);
|
|
57
59
|
__exportStar(require("./layouts/BasicLayout/BasicLayout"), exports);
|
|
58
60
|
__exportStar(require("./layouts/FloatingPanelLayout/FloatingPanelLayout"), exports);
|
|
59
61
|
__exportStar(require("./layouts/constants"), exports);
|
|
@@ -5,6 +5,8 @@ interface Props {
|
|
|
5
5
|
imageUrl: string;
|
|
6
6
|
panelProps: React.ComponentProps<typeof Panel>;
|
|
7
7
|
alert?: JSX.Element;
|
|
8
|
+
backgroundBaseColor?: string;
|
|
9
|
+
backgroundOpacity?: number;
|
|
8
10
|
}
|
|
9
11
|
export declare const FloatingPanelLayout: React.FC<React.PropsWithChildren<Props>>;
|
|
10
12
|
export {};
|
|
@@ -26,17 +26,19 @@ var Panel_1 = require("../../components/Panel/Panel");
|
|
|
26
26
|
var SlideInFromTop_1 = require("../../animation/SlideInFromTop/SlideInFromTop");
|
|
27
27
|
var constants_1 = require("../constants");
|
|
28
28
|
var responsiveProps_1 = require("../../responsiveness/responsiveProps");
|
|
29
|
-
var Wrapper = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n min-width: 100%;\n min-height: 100
|
|
30
|
-
var
|
|
31
|
-
var
|
|
32
|
-
var
|
|
29
|
+
var Wrapper = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n position: absolute;\n min-width: 100%;\n min-height: 100%; \n"], ["\n background-color: ", ";\n position: absolute;\n min-width: 100%;\n min-height: 100%; \n"])), function (props) { return props.baseColor || 'white'; });
|
|
30
|
+
var Background = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n \n opacity: ", " ;\n background: url(\"", "\");\n background-size: cover;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n \n opacity: ", " ;\n background: url(\"", "\");\n background-size: cover;\n"])), function (props) { var _a; return (_a = props.opacity) !== null && _a !== void 0 ? _a : 1; }, function (props) { return props.imageUrl; });
|
|
31
|
+
var StyledAnimation = (0, styled_components_1.default)(SlideInFromTop_1.SlideInFromTop)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n z-index: 10;\n margin: auto auto;\n"], ["\n z-index: 10;\n margin: auto auto;\n"])));
|
|
32
|
+
var StyledPanel = (0, styled_components_1.default)(Panel_1.Panel)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-shadow: 0 8px 8px 0 rgba(34,36,38,.15); \n min-width: 280px; \n"], ["\n box-shadow: 0 8px 8px 0 rgba(34,36,38,.15); \n min-width: 280px; \n"])));
|
|
33
|
+
var Logo = styled_components_1.default.img(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display:none;\n position: absolute;\n left: 0;\n top: ", ";\n ", "\n"], ["\n display:none;\n position: absolute;\n left: 0;\n top: ", ";\n ", "\n"])), function (props) { return props.theme.spacing(8); }, (0, responsiveProps_1.mq)("tablet", "display: block;"));
|
|
33
34
|
var FloatingPanelLayout = function (_a) {
|
|
34
|
-
var panelProps = _a.panelProps, imageUrl = _a.imageUrl, alert = _a.alert, logoUrl = _a.logoUrl;
|
|
35
|
-
return (react_1.default.createElement(Wrapper, { display: "flex", alignItems: "center",
|
|
35
|
+
var panelProps = _a.panelProps, imageUrl = _a.imageUrl, alert = _a.alert, logoUrl = _a.logoUrl, backgroundBaseColor = _a.backgroundBaseColor, backgroundOpacity = _a.backgroundOpacity;
|
|
36
|
+
return (react_1.default.createElement(Wrapper, { display: "flex", alignItems: "center", baseColor: backgroundBaseColor },
|
|
37
|
+
react_1.default.createElement(Background, { imageUrl: imageUrl, opacity: backgroundOpacity }),
|
|
36
38
|
logoUrl && (react_1.default.createElement(Logo, { src: logoUrl, alt: "Logo" })),
|
|
37
39
|
react_1.default.createElement(StyledAnimation, null,
|
|
38
40
|
alert && (react_1.default.createElement(Box_1.Box, { pb: constants_1.VerticalRhythmLaptop }, alert)),
|
|
39
41
|
react_1.default.createElement(StyledPanel, __assign({}, panelProps)))));
|
|
40
42
|
};
|
|
41
43
|
exports.FloatingPanelLayout = FloatingPanelLayout;
|
|
42
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
44
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|