@citygross/components 0.7.15 → 0.7.16
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/build/@types/components/CustomerInfoBlock/CustomerInfoBlock.d.ts +1 -1
- package/build/@types/containers/TwoColumnsContainer/TwoColumnsPageContainer.d.ts +2 -1
- package/build/@types/containers/TwoColumnsContainer/TwoColumnsPageContainer.stories.d.ts +1 -1
- package/build/@types/containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.d.ts +1 -0
- package/build/cjs/components/src/components/Box/Box.styles.js +1 -1
- package/build/cjs/components/src/components/CustomerInfoBlock/CustomerInfoBlock.js +4 -6
- package/build/cjs/components/src/components/CustomerInfoBlock/CustomerInfoBlock.js.map +1 -1
- package/build/cjs/components/src/components/LayoutBox/LayoutBox.styles.js +5 -5
- package/build/cjs/components/src/containers/PageContainer/PageContainer.styles.js +1 -5
- package/build/cjs/components/src/containers/PageContainer/PageContainer.styles.js.map +1 -1
- package/build/cjs/components/src/containers/TwoColumnsContainer/TwoColumnsPageContainer.js +2 -2
- package/build/cjs/components/src/containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js +5 -2
- package/build/cjs/components/src/containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js.map +1 -1
- package/build/es/components/src/components/Box/Box.styles.js +1 -1
- package/build/es/components/src/components/CustomerInfoBlock/CustomerInfoBlock.js +4 -6
- package/build/es/components/src/components/CustomerInfoBlock/CustomerInfoBlock.js.map +1 -1
- package/build/es/components/src/components/LayoutBox/LayoutBox.styles.js +5 -5
- package/build/es/components/src/containers/PageContainer/PageContainer.styles.js +1 -5
- package/build/es/components/src/containers/PageContainer/PageContainer.styles.js.map +1 -1
- package/build/es/components/src/containers/TwoColumnsContainer/TwoColumnsPageContainer.js +2 -2
- package/build/es/components/src/containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js +5 -2
- package/build/es/components/src/containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -5,4 +5,4 @@ export declare type TCustomerInfoBlock = {
|
|
|
5
5
|
background?: string;
|
|
6
6
|
children: React.ReactNode;
|
|
7
7
|
};
|
|
8
|
-
export declare function CustomerInfoBlock({ title, boldTitle,
|
|
8
|
+
export declare function CustomerInfoBlock({ title, boldTitle, children }: TCustomerInfoBlock): JSX.Element;
|
|
@@ -6,5 +6,6 @@ export declare type TTwoColumnsPageContainer = {
|
|
|
6
6
|
rightColumnWidth?: number;
|
|
7
7
|
containerBackground?: string;
|
|
8
8
|
breakpoint?: number;
|
|
9
|
+
hideRightColumnBefore?: number;
|
|
9
10
|
};
|
|
10
|
-
export declare const TwoColumnsPageContainer: ({ rightColumnWidth, leftColumn, rightColumn, containerBackground, rightColumnCollapsebleHeader, breakpoint, ...props }: TTwoColumnsPageContainer) => JSX.Element;
|
|
11
|
+
export declare const TwoColumnsPageContainer: ({ rightColumnWidth, leftColumn, rightColumn, containerBackground, rightColumnCollapsebleHeader, hideRightColumnBefore, breakpoint, ...props }: TTwoColumnsPageContainer) => JSX.Element;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { Story } from '@storybook/react';
|
|
3
3
|
import { TTwoColumnsPageContainer } from './TwoColumnsPageContainer';
|
|
4
4
|
declare const _default: {
|
|
5
|
-
component: ({ rightColumnWidth, leftColumn, rightColumn, containerBackground, rightColumnCollapsebleHeader, breakpoint, ...props }: TTwoColumnsPageContainer) => JSX.Element;
|
|
5
|
+
component: ({ rightColumnWidth, leftColumn, rightColumn, containerBackground, rightColumnCollapsebleHeader, hideRightColumnBefore, breakpoint, ...props }: TTwoColumnsPageContainer) => JSX.Element;
|
|
6
6
|
title: string;
|
|
7
7
|
argTypes: {
|
|
8
8
|
leftColumn: {
|
|
@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
9
9
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
11
|
|
|
12
|
-
var BoxContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n padding: ", "px;\n background: ", ";\n border-radius: ", ";\n @media (min-width: ", "px) {\n padding: ", "px;\n }\n\n ", ";\n"], ["\n padding: ", "px;\n background: ", ";\n border-radius: ", ";\n @media (min-width: ", "px) {\n padding: ", "px;\n }\n\n ", ";\n"])), function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.
|
|
12
|
+
var BoxContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n padding: ", "px;\n background: ", ";\n border-radius: ", ";\n @media (min-width: ", "px) {\n padding: ", "px;\n }\n\n ", ";\n"], ["\n padding: ", "px;\n background: ", ";\n border-radius: ", ";\n @media (min-width: ", "px) {\n padding: ", "px;\n }\n\n ", ";\n"])), function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.md; }, function (props) { return props.background; }, function (props) { return (props.rounded ? '5px' : '0'); }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.lg; }, function (props) { var _a, _b; return props.padding ? props.padding : (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.lg; }, function (props) { return props.padding && "padding: " + props.padding + "px"; });
|
|
13
13
|
var templateObject_1;
|
|
14
14
|
|
|
15
15
|
exports.BoxContainer = BoxContainer;
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var typography = require('@citygross/typography');
|
|
7
|
-
var Box = require('../Box/Box.js');
|
|
8
7
|
var CustomerInfoBlock_styles = require('./CustomerInfoBlock.styles.js');
|
|
9
8
|
|
|
10
9
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -12,11 +11,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
12
11
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
12
|
|
|
14
13
|
function CustomerInfoBlock(_a) {
|
|
15
|
-
var _b = _a.title, title = _b === void 0 ? 'Dina Uppgifter' : _b, _c = _a.boldTitle, boldTitle = _c === void 0 ? true : _c,
|
|
16
|
-
return (React__default['default'].createElement(
|
|
17
|
-
React__default['default'].createElement(
|
|
18
|
-
|
|
19
|
-
children)));
|
|
14
|
+
var _b = _a.title, title = _b === void 0 ? 'Dina Uppgifter' : _b, _c = _a.boldTitle, boldTitle = _c === void 0 ? true : _c, children = _a.children;
|
|
15
|
+
return (React__default['default'].createElement(CustomerInfoBlock_styles.CustomerInfoBlock, null,
|
|
16
|
+
React__default['default'].createElement(typography.H3, { fontWeight: boldTitle ? 'semiBold' : 'regular' }, title),
|
|
17
|
+
children));
|
|
20
18
|
}
|
|
21
19
|
|
|
22
20
|
exports.CustomerInfoBlock = CustomerInfoBlock;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomerInfoBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CustomerInfoBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -9,12 +9,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
9
9
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
11
|
|
|
12
|
-
var LayoutBoxContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n background: ", ";\n
|
|
13
|
-
var _a, _b;
|
|
12
|
+
var LayoutBoxContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n background: ", ";\n box-shadow: ", ";\n overflow: hidden;\n @media (min-width: ", "px) {\n border-radius: ", "px;\n }\n"], ["\n background: ", ";\n box-shadow: ", ";\n overflow: hidden;\n @media (min-width: ", "px) {\n border-radius: ", "px;\n }\n"])), function (props) { return props.background; }, function (props) {
|
|
13
|
+
var _a, _b, _c, _d;
|
|
14
14
|
return props.shadowInset
|
|
15
|
-
? (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.layoutShadowInset
|
|
16
|
-
: (
|
|
17
|
-
});
|
|
15
|
+
? (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow) === null || _b === void 0 ? void 0 : _b.layoutShadowInset
|
|
16
|
+
: (_d = (_c = props.theme.attributes) === null || _c === void 0 ? void 0 : _c.boxShadow) === null || _d === void 0 ? void 0 : _d.layoutShadow;
|
|
17
|
+
}, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a; return props.borderRadius || ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small); });
|
|
18
18
|
var templateObject_1;
|
|
19
19
|
|
|
20
20
|
exports.LayoutBoxContainer = LayoutBoxContainer;
|
|
@@ -10,11 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
11
|
|
|
12
12
|
var CommonPageWrapper = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n padding: ", "px 0;\n background: ", ";\n\n @media (min-width: ", "px) {\n padding: ", ";\n }\n"], ["\n padding: ", "px 0;\n background: ", ";\n\n @media (min-width: ", "px) {\n padding: ", ";\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a, _b; return (_a = props.background) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.lightest; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a, _b; return ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl) + "px " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.md) + "px"; });
|
|
13
|
-
var CommonPage = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n margin-left: auto;\n margin-right: auto;\n max-width: ", "px;\n
|
|
14
|
-
var _a;
|
|
15
|
-
return props.shadow &&
|
|
16
|
-
"box-shadow: " + ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.layoutShadow);
|
|
17
|
-
}, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
|
|
13
|
+
var CommonPage = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n margin-left: auto;\n margin-right: auto;\n max-width: ", "px;\n\n background: ", ";\n"], ["\n margin-left: auto;\n margin-right: auto;\n max-width: ", "px;\n\n background: ", ";\n"])), function (props) { var _a; return props.maxWidth || ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.pageContentMaxWidth); }, function (props) { var _a, _b; return (_a = props.background) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.none; });
|
|
18
14
|
var templateObject_1, templateObject_2;
|
|
19
15
|
|
|
20
16
|
exports.CommonPage = CommonPage;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageContainer.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PageContainer.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
|
|
@@ -15,12 +15,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
15
15
|
|
|
16
16
|
var TwoColumnsPageContainer = function (_a) {
|
|
17
17
|
var _b, _c;
|
|
18
|
-
var _d = _a.rightColumnWidth, rightColumnWidth = _d === void 0 ? 30 : _d, leftColumn = _a.leftColumn, rightColumn = _a.rightColumn, containerBackground = _a.containerBackground, rightColumnCollapsebleHeader = _a.rightColumnCollapsebleHeader, _e = _a.breakpoint, breakpoint = _e === void 0 ? (_b = index.theme.breakpoints) === null || _b === void 0 ? void 0 : _b.xl : _e, props = _tslib.__rest(_a, ["rightColumnWidth", "leftColumn", "rightColumn", "containerBackground", "rightColumnCollapsebleHeader", "breakpoint"]);
|
|
18
|
+
var _d = _a.rightColumnWidth, rightColumnWidth = _d === void 0 ? 30 : _d, leftColumn = _a.leftColumn, rightColumn = _a.rightColumn, containerBackground = _a.containerBackground, rightColumnCollapsebleHeader = _a.rightColumnCollapsebleHeader, hideRightColumnBefore = _a.hideRightColumnBefore, _e = _a.breakpoint, breakpoint = _e === void 0 ? (_b = index.theme.breakpoints) === null || _b === void 0 ? void 0 : _b.xl : _e, props = _tslib.__rest(_a, ["rightColumnWidth", "leftColumn", "rightColumn", "containerBackground", "rightColumnCollapsebleHeader", "hideRightColumnBefore", "breakpoint"]);
|
|
19
19
|
var width = index$1.useWindowSize().width;
|
|
20
20
|
return (React__default['default'].createElement(TwoColumnsPageContainer_styles.Container, _tslib.__assign({ background: containerBackground }, props),
|
|
21
21
|
React__default['default'].createElement(TwoColumnsPageContainer_styles.ColumnWraper, null,
|
|
22
22
|
React__default['default'].createElement(TwoColumnsPageContainer_styles.LeftColumn, null, leftColumn),
|
|
23
|
-
React__default['default'].createElement(TwoColumnsPageContainer_styles.RightColumn, { columnWidth: rightColumnWidth }, width > ((breakpoint && breakpoint) || 1060) ? (React__default['default'].createElement(React__default['default'].Fragment, null, rightColumn)) : (React__default['default'].createElement(Collapsable.Collapsable, { heading: rightColumnCollapsebleHeader, backgroundColor: (_c = index.theme.palette) === null || _c === void 0 ? void 0 : _c.white }, rightColumn))))));
|
|
23
|
+
React__default['default'].createElement(TwoColumnsPageContainer_styles.RightColumn, { columnWidth: rightColumnWidth, hideRightColumnBefore: hideRightColumnBefore }, width > ((breakpoint && breakpoint) || 1060) ? (React__default['default'].createElement(React__default['default'].Fragment, null, rightColumn)) : (React__default['default'].createElement(Collapsable.Collapsable, { heading: rightColumnCollapsebleHeader, backgroundColor: (_c = index.theme.palette) === null || _c === void 0 ? void 0 : _c.white }, rightColumn))))));
|
|
24
24
|
};
|
|
25
25
|
|
|
26
26
|
exports.TwoColumnsPageContainer = TwoColumnsPageContainer;
|
package/build/cjs/components/src/containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js
CHANGED
|
@@ -10,9 +10,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
11
|
|
|
12
12
|
var Container = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n padding: ", "px 0px;\n background: ", ";\n\n @media (min-width: ", "px) {\n padding: ", "px\n ", "px;\n }\n"], ["\n padding: ", "px 0px;\n background: ", ";\n\n @media (min-width: ", "px) {\n padding: ", "px\n ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a, _b; return (_a = props.background) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.lightest; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
|
|
13
|
-
var ColumnWraper = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column-reverse;\n gap: ", "px;\n max-width: ", "px;\n margin: 0 auto;\n\n @media (min-width: ", "px) {\n flex-direction: row;\n gap: ", "px;\n }\n"], ["\n display: flex;\n flex-direction: column-reverse;\n gap: ", "px;\n max-width: ", "px;\n margin: 0 auto;\n\n @media (min-width: ", "px) {\n flex-direction: row;\n gap: ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.
|
|
13
|
+
var ColumnWraper = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column-reverse;\n gap: ", "px;\n max-width: ", "px;\n margin: 0 auto;\n\n @media (min-width: ", "px) {\n flex-direction: row;\n gap: ", "px;\n }\n"], ["\n display: flex;\n flex-direction: column-reverse;\n gap: ", "px;\n max-width: ", "px;\n margin: 0 auto;\n\n @media (min-width: ", "px) {\n flex-direction: row;\n gap: ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.pageContentMaxWidth; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xl; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
|
|
14
14
|
var LeftColumn = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n flex-grow: 1;\n"], ["\n flex-grow: 1;\n"])));
|
|
15
|
-
var RightColumn = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n width: 100%;\n\n @media (min-width: ", "px) {\n width: ", "%;\n }\n"], ["\n width: 100%;\n\n @media (min-width: ", "px) {\n width: ", "%;\n }\n"])), function (props) {
|
|
15
|
+
var RightColumn = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n width: 100%;\n ", "\n\n @media (min-width: ", "px) {\n width: ", "%;\n }\n"], ["\n width: 100%;\n ", "\n\n @media (min-width: ", "px) {\n width: ", "%;\n }\n"])), function (props) {
|
|
16
|
+
return props.hideRightColumnBefore &&
|
|
17
|
+
"display: none;\n\n @media(min-width: " + props.hideRightColumnBefore + "px){\n display:block;\n };\n ";
|
|
18
|
+
}, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xl; }, function (props) { return props.columnWidth; });
|
|
16
19
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
17
20
|
|
|
18
21
|
exports.ColumnWraper = ColumnWraper;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TwoColumnsPageContainer.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TwoColumnsPageContainer.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
|
-
var BoxContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: ", "px;\n background: ", ";\n border-radius: ", ";\n @media (min-width: ", "px) {\n padding: ", "px;\n }\n\n ", ";\n"], ["\n padding: ", "px;\n background: ", ";\n border-radius: ", ";\n @media (min-width: ", "px) {\n padding: ", "px;\n }\n\n ", ";\n"])), function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.
|
|
4
|
+
var BoxContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: ", "px;\n background: ", ";\n border-radius: ", ";\n @media (min-width: ", "px) {\n padding: ", "px;\n }\n\n ", ";\n"], ["\n padding: ", "px;\n background: ", ";\n border-radius: ", ";\n @media (min-width: ", "px) {\n padding: ", "px;\n }\n\n ", ";\n"])), function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.md; }, function (props) { return props.background; }, function (props) { return (props.rounded ? '5px' : '0'); }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.lg; }, function (props) { var _a, _b; return props.padding ? props.padding : (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.lg; }, function (props) { return props.padding && "padding: " + props.padding + "px"; });
|
|
5
5
|
var templateObject_1;
|
|
6
6
|
|
|
7
7
|
export { BoxContainer };
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { H3 } from '@citygross/typography';
|
|
3
|
-
import { Box } from '../Box/Box.js';
|
|
4
3
|
import { CustomerInfoBlock as CustomerInfoBlock$1 } from './CustomerInfoBlock.styles.js';
|
|
5
4
|
|
|
6
5
|
function CustomerInfoBlock(_a) {
|
|
7
|
-
var _b = _a.title, title = _b === void 0 ? 'Dina Uppgifter' : _b, _c = _a.boldTitle, boldTitle = _c === void 0 ? true : _c,
|
|
8
|
-
return (React.createElement(
|
|
9
|
-
React.createElement(
|
|
10
|
-
|
|
11
|
-
children)));
|
|
6
|
+
var _b = _a.title, title = _b === void 0 ? 'Dina Uppgifter' : _b, _c = _a.boldTitle, boldTitle = _c === void 0 ? true : _c, children = _a.children;
|
|
7
|
+
return (React.createElement(CustomerInfoBlock$1, null,
|
|
8
|
+
React.createElement(H3, { fontWeight: boldTitle ? 'semiBold' : 'regular' }, title),
|
|
9
|
+
children));
|
|
12
10
|
}
|
|
13
11
|
|
|
14
12
|
export { CustomerInfoBlock };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomerInfoBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CustomerInfoBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
|
-
var LayoutBoxContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n
|
|
5
|
-
var _a, _b;
|
|
4
|
+
var LayoutBoxContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n box-shadow: ", ";\n overflow: hidden;\n @media (min-width: ", "px) {\n border-radius: ", "px;\n }\n"], ["\n background: ", ";\n box-shadow: ", ";\n overflow: hidden;\n @media (min-width: ", "px) {\n border-radius: ", "px;\n }\n"])), function (props) { return props.background; }, function (props) {
|
|
5
|
+
var _a, _b, _c, _d;
|
|
6
6
|
return props.shadowInset
|
|
7
|
-
? (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.layoutShadowInset
|
|
8
|
-
: (
|
|
9
|
-
});
|
|
7
|
+
? (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow) === null || _b === void 0 ? void 0 : _b.layoutShadowInset
|
|
8
|
+
: (_d = (_c = props.theme.attributes) === null || _c === void 0 ? void 0 : _c.boxShadow) === null || _d === void 0 ? void 0 : _d.layoutShadow;
|
|
9
|
+
}, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a; return props.borderRadius || ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small); });
|
|
10
10
|
var templateObject_1;
|
|
11
11
|
|
|
12
12
|
export { LayoutBoxContainer };
|
|
@@ -2,11 +2,7 @@ import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
4
|
var CommonPageWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: ", "px 0;\n background: ", ";\n\n @media (min-width: ", "px) {\n padding: ", ";\n }\n"], ["\n padding: ", "px 0;\n background: ", ";\n\n @media (min-width: ", "px) {\n padding: ", ";\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a, _b; return (_a = props.background) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.lightest; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a, _b; return ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl) + "px " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.md) + "px"; });
|
|
5
|
-
var CommonPage = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-left: auto;\n margin-right: auto;\n max-width: ", "px;\n
|
|
6
|
-
var _a;
|
|
7
|
-
return props.shadow &&
|
|
8
|
-
"box-shadow: " + ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.layoutShadow);
|
|
9
|
-
}, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
|
|
5
|
+
var CommonPage = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-left: auto;\n margin-right: auto;\n max-width: ", "px;\n\n background: ", ";\n"], ["\n margin-left: auto;\n margin-right: auto;\n max-width: ", "px;\n\n background: ", ";\n"])), function (props) { var _a; return props.maxWidth || ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.pageContentMaxWidth); }, function (props) { var _a, _b; return (_a = props.background) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.none; });
|
|
10
6
|
var templateObject_1, templateObject_2;
|
|
11
7
|
|
|
12
8
|
export { CommonPage, CommonPageWrapper };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageContainer.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PageContainer.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
|
@@ -7,12 +7,12 @@ import { Container, ColumnWraper, LeftColumn, RightColumn } from './TwoColumnsPa
|
|
|
7
7
|
|
|
8
8
|
var TwoColumnsPageContainer = function (_a) {
|
|
9
9
|
var _b, _c;
|
|
10
|
-
var _d = _a.rightColumnWidth, rightColumnWidth = _d === void 0 ? 30 : _d, leftColumn = _a.leftColumn, rightColumn = _a.rightColumn, containerBackground = _a.containerBackground, rightColumnCollapsebleHeader = _a.rightColumnCollapsebleHeader, _e = _a.breakpoint, breakpoint = _e === void 0 ? (_b = theme_1.breakpoints) === null || _b === void 0 ? void 0 : _b.xl : _e, props = __rest(_a, ["rightColumnWidth", "leftColumn", "rightColumn", "containerBackground", "rightColumnCollapsebleHeader", "breakpoint"]);
|
|
10
|
+
var _d = _a.rightColumnWidth, rightColumnWidth = _d === void 0 ? 30 : _d, leftColumn = _a.leftColumn, rightColumn = _a.rightColumn, containerBackground = _a.containerBackground, rightColumnCollapsebleHeader = _a.rightColumnCollapsebleHeader, hideRightColumnBefore = _a.hideRightColumnBefore, _e = _a.breakpoint, breakpoint = _e === void 0 ? (_b = theme_1.breakpoints) === null || _b === void 0 ? void 0 : _b.xl : _e, props = __rest(_a, ["rightColumnWidth", "leftColumn", "rightColumn", "containerBackground", "rightColumnCollapsebleHeader", "hideRightColumnBefore", "breakpoint"]);
|
|
11
11
|
var width = useWindowSize_1().width;
|
|
12
12
|
return (React.createElement(Container, __assign({ background: containerBackground }, props),
|
|
13
13
|
React.createElement(ColumnWraper, null,
|
|
14
14
|
React.createElement(LeftColumn, null, leftColumn),
|
|
15
|
-
React.createElement(RightColumn, { columnWidth: rightColumnWidth }, width > ((breakpoint && breakpoint) || 1060) ? (React.createElement(React.Fragment, null, rightColumn)) : (React.createElement(Collapsable, { heading: rightColumnCollapsebleHeader, backgroundColor: (_c = theme_1.palette) === null || _c === void 0 ? void 0 : _c.white }, rightColumn))))));
|
|
15
|
+
React.createElement(RightColumn, { columnWidth: rightColumnWidth, hideRightColumnBefore: hideRightColumnBefore }, width > ((breakpoint && breakpoint) || 1060) ? (React.createElement(React.Fragment, null, rightColumn)) : (React.createElement(Collapsable, { heading: rightColumnCollapsebleHeader, backgroundColor: (_c = theme_1.palette) === null || _c === void 0 ? void 0 : _c.white }, rightColumn))))));
|
|
16
16
|
};
|
|
17
17
|
|
|
18
18
|
export { TwoColumnsPageContainer };
|
package/build/es/components/src/containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js
CHANGED
|
@@ -2,9 +2,12 @@ import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
4
|
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: ", "px 0px;\n background: ", ";\n\n @media (min-width: ", "px) {\n padding: ", "px\n ", "px;\n }\n"], ["\n padding: ", "px 0px;\n background: ", ";\n\n @media (min-width: ", "px) {\n padding: ", "px\n ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a, _b; return (_a = props.background) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.lightest; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
|
|
5
|
-
var ColumnWraper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column-reverse;\n gap: ", "px;\n max-width: ", "px;\n margin: 0 auto;\n\n @media (min-width: ", "px) {\n flex-direction: row;\n gap: ", "px;\n }\n"], ["\n display: flex;\n flex-direction: column-reverse;\n gap: ", "px;\n max-width: ", "px;\n margin: 0 auto;\n\n @media (min-width: ", "px) {\n flex-direction: row;\n gap: ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.
|
|
5
|
+
var ColumnWraper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column-reverse;\n gap: ", "px;\n max-width: ", "px;\n margin: 0 auto;\n\n @media (min-width: ", "px) {\n flex-direction: row;\n gap: ", "px;\n }\n"], ["\n display: flex;\n flex-direction: column-reverse;\n gap: ", "px;\n max-width: ", "px;\n margin: 0 auto;\n\n @media (min-width: ", "px) {\n flex-direction: row;\n gap: ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.pageContentMaxWidth; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xl; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
|
|
6
6
|
var LeftColumn = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-grow: 1;\n"], ["\n flex-grow: 1;\n"])));
|
|
7
|
-
var RightColumn = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 100%;\n\n @media (min-width: ", "px) {\n width: ", "%;\n }\n"], ["\n width: 100%;\n\n @media (min-width: ", "px) {\n width: ", "%;\n }\n"])), function (props) {
|
|
7
|
+
var RightColumn = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 100%;\n ", "\n\n @media (min-width: ", "px) {\n width: ", "%;\n }\n"], ["\n width: 100%;\n ", "\n\n @media (min-width: ", "px) {\n width: ", "%;\n }\n"])), function (props) {
|
|
8
|
+
return props.hideRightColumnBefore &&
|
|
9
|
+
"display: none;\n\n @media(min-width: " + props.hideRightColumnBefore + "px){\n display:block;\n };\n ";
|
|
10
|
+
}, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xl; }, function (props) { return props.columnWidth; });
|
|
8
11
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
9
12
|
|
|
10
13
|
export { ColumnWraper, Container, LeftColumn, RightColumn };
|
package/build/es/components/src/containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TwoColumnsPageContainer.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TwoColumnsPageContainer.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.16",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"moment": "^2.29.1",
|
|
71
71
|
"react-loading-skeleton": "^2.2.0"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "83c987fe526f14519ec1f02100cbb83c5d09d1aa"
|
|
74
74
|
}
|