contentoh-components-library 21.4.18 → 21.4.19
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.
|
@@ -12,8 +12,10 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
12
12
|
var PanelLayout = function PanelLayout(_ref) {
|
|
13
13
|
var header = _ref.header,
|
|
14
14
|
children = _ref.children,
|
|
15
|
-
footer = _ref.footer
|
|
15
|
+
footer = _ref.footer,
|
|
16
|
+
className = _ref.className;
|
|
16
17
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
|
|
18
|
+
className: className,
|
|
17
19
|
children: [header ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Header, {
|
|
18
20
|
children: header
|
|
19
21
|
}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Body, {
|
|
@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
|
|
|
15
15
|
|
|
16
16
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
17
17
|
|
|
18
|
-
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: grid;\n grid-auto-rows: 1fr;\n grid-template-columns: 1fr;\n grid-template-rows: 34px 1fr
|
|
18
|
+
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: grid;\n grid-auto-rows: 1fr;\n grid-template-columns: 1fr;\n grid-template-rows: 34px 1fr 100%;\n gap: 0px 0px;\n grid-template-areas:\n \"header\"\n \"body\"\n \"footer\";\n font-family: ", ", sans-serif;\n font-size: 12px;\n"])), _variables.FontFamily.RobotoMedium);
|
|
19
19
|
|
|
20
20
|
exports.Container = Container;
|
|
21
21
|
|
|
@@ -23,10 +23,10 @@ var Header = _styledComponents.default.div(_templateObject2 || (_templateObject2
|
|
|
23
23
|
|
|
24
24
|
exports.Header = Header;
|
|
25
25
|
|
|
26
|
-
var Body = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n grid-area: body;\n"])));
|
|
26
|
+
var Body = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n grid-area: body;\n border-left: 1px solid #f0f0f0;\n border-right: 1px solid #f0f0f0;\n"])));
|
|
27
27
|
|
|
28
28
|
exports.Body = Body;
|
|
29
29
|
|
|
30
|
-
var Footer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n grid-area: footer;\n"])));
|
|
30
|
+
var Footer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n grid-area: footer;\n display: flex;\n align-items: center;\n border: 1px solid #f0f0f0;\n border-radius: 0 0 5px 5px;\n"])));
|
|
31
31
|
|
|
32
32
|
exports.Footer = Footer;
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { Container, Header, Body, Footer } from "./styles";
|
|
2
2
|
|
|
3
|
-
export const PanelLayout = ({ header, children, footer }) => {
|
|
3
|
+
export const PanelLayout = ({ header, children, footer, className }) => {
|
|
4
4
|
return (
|
|
5
|
-
<Container>
|
|
5
|
+
<Container className={className}>
|
|
6
6
|
{header ? <Header>{header}</Header> : null}
|
|
7
7
|
<Body>{children}</Body>
|
|
8
8
|
{footer ? <Footer>{footer}</Footer> : null}
|
|
@@ -5,7 +5,7 @@ export const Container = styled.div`
|
|
|
5
5
|
display: grid;
|
|
6
6
|
grid-auto-rows: 1fr;
|
|
7
7
|
grid-template-columns: 1fr;
|
|
8
|
-
grid-template-rows: 34px 1fr
|
|
8
|
+
grid-template-rows: 34px 1fr 100%;
|
|
9
9
|
gap: 0px 0px;
|
|
10
10
|
grid-template-areas:
|
|
11
11
|
"header"
|
|
@@ -26,8 +26,14 @@ export const Header = styled.div`
|
|
|
26
26
|
|
|
27
27
|
export const Body = styled.div`
|
|
28
28
|
grid-area: body;
|
|
29
|
+
border-left: 1px solid #f0f0f0;
|
|
30
|
+
border-right: 1px solid #f0f0f0;
|
|
29
31
|
`;
|
|
30
32
|
|
|
31
33
|
export const Footer = styled.div`
|
|
32
34
|
grid-area: footer;
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
border: 1px solid #f0f0f0;
|
|
38
|
+
border-radius: 0 0 5px 5px;
|
|
33
39
|
`;
|