@citygross/components 0.7.12 → 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/components/FormElements/TextArea/TextArea.stories.d.ts +7 -0
- package/build/@types/components/LayoutBox/LayoutBox.d.ts +2 -0
- package/build/@types/components/LayoutBox/LayoutBox.styles.d.ts +2 -0
- package/build/@types/components/ListItemWithRadio/ListItemWithRadio.d.ts +18 -0
- package/build/@types/components/ListItemWithRadio/ListItemWithRadio.stories.d.ts +9 -0
- package/build/@types/components/ListItemWithRadio/ListItemWithRadio.styles.d.ts +7 -0
- package/build/@types/components/RadioBox/RadioBoxItem.styles.d.ts +2 -2
- package/build/@types/components/RadioGroup/RadioListItem.d.ts +3 -1
- package/build/@types/components/RadioGroup/RadioListItem.styles.d.ts +6 -5
- 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/@types/index.d.ts +1 -0
- package/build/cjs/components/src/components/Box/Box.styles.js +1 -1
- package/build/cjs/components/src/components/Button/Button.styles.js +1 -0
- package/build/cjs/components/src/components/Button/Button.styles.js.map +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/FormElements/TextArea/TextArea.styles.js +2 -7
- package/build/cjs/components/src/components/FormElements/TextArea/TextArea.styles.js.map +1 -1
- package/build/cjs/components/src/components/InfoTextBlock/InfoTextBlock.styles.js +1 -1
- package/build/cjs/components/src/components/LayoutBox/LayoutBox.js +2 -2
- package/build/cjs/components/src/components/LayoutBox/LayoutBox.styles.js +6 -1
- package/build/cjs/components/src/components/LayoutBox/LayoutBox.styles.js.map +1 -1
- package/build/cjs/components/src/components/ListItem/ListItem.styles.js +1 -1
- package/build/cjs/components/src/components/ListItemWithRadio/ListItemWithRadio.js +43 -0
- package/build/cjs/components/src/components/ListItemWithRadio/ListItemWithRadio.js.map +1 -0
- package/build/cjs/components/src/components/ListItemWithRadio/ListItemWithRadio.styles.js +27 -0
- package/build/cjs/components/src/components/ListItemWithRadio/ListItemWithRadio.styles.js.map +1 -0
- package/build/cjs/components/src/components/RadioBox/RadioBoxItem.js +1 -1
- package/build/cjs/components/src/components/RadioBox/RadioBoxItem.styles.js +1 -5
- package/build/cjs/components/src/components/RadioBox/RadioBoxItem.styles.js.map +1 -1
- package/build/cjs/components/src/components/RadioGroup/RadioListItem.js +9 -7
- package/build/cjs/components/src/components/RadioGroup/RadioListItem.js.map +1 -1
- package/build/cjs/components/src/components/RadioGroup/RadioListItem.styles.js +3 -4
- package/build/cjs/components/src/components/RadioGroup/RadioListItem.styles.js.map +1 -1
- 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/cjs/components/src/index.js +2 -0
- package/build/cjs/components/src/index.js.map +1 -1
- package/build/cjs/design-tokens/build/index.js +4 -3
- package/build/cjs/design-tokens/build/index.js.map +1 -1
- package/build/es/components/src/components/Box/Box.styles.js +1 -1
- package/build/es/components/src/components/Button/Button.styles.js +1 -0
- package/build/es/components/src/components/Button/Button.styles.js.map +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/FormElements/TextArea/TextArea.styles.js +2 -7
- package/build/es/components/src/components/FormElements/TextArea/TextArea.styles.js.map +1 -1
- package/build/es/components/src/components/InfoTextBlock/InfoTextBlock.styles.js +1 -1
- package/build/es/components/src/components/LayoutBox/LayoutBox.js +2 -2
- package/build/es/components/src/components/LayoutBox/LayoutBox.styles.js +6 -1
- package/build/es/components/src/components/LayoutBox/LayoutBox.styles.js.map +1 -1
- package/build/es/components/src/components/ListItem/ListItem.styles.js +1 -1
- package/build/es/components/src/components/ListItemWithRadio/ListItemWithRadio.js +34 -0
- package/build/es/components/src/components/ListItemWithRadio/ListItemWithRadio.js.map +1 -0
- package/build/es/components/src/components/ListItemWithRadio/ListItemWithRadio.styles.js +14 -0
- package/build/es/components/src/components/ListItemWithRadio/ListItemWithRadio.styles.js.map +1 -0
- package/build/es/components/src/components/RadioBox/RadioBoxItem.js +1 -1
- package/build/es/components/src/components/RadioBox/RadioBoxItem.styles.js +1 -5
- package/build/es/components/src/components/RadioBox/RadioBoxItem.styles.js.map +1 -1
- package/build/es/components/src/components/RadioGroup/RadioListItem.js +10 -8
- package/build/es/components/src/components/RadioGroup/RadioListItem.js.map +1 -1
- package/build/es/components/src/components/RadioGroup/RadioListItem.styles.js +3 -4
- package/build/es/components/src/components/RadioGroup/RadioListItem.styles.js.map +1 -1
- 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/build/es/components/src/index.js +1 -0
- package/build/es/components/src/index.js.map +1 -1
- package/build/es/design-tokens/build/index.js +4 -3
- package/build/es/design-tokens/build/index.js.map +1 -1
- package/package.json +4 -4
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":";;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -28,6 +28,7 @@ var FormGroup = require('./components/FormGroup/FormGroup.js');
|
|
|
28
28
|
var InfoTextBlock = require('./components/InfoTextBlock/InfoTextBlock.js');
|
|
29
29
|
var LayoutBox = require('./components/LayoutBox/LayoutBox.js');
|
|
30
30
|
var ListItem = require('./components/ListItem/ListItem.js');
|
|
31
|
+
var ListItemWithRadio = require('./components/ListItemWithRadio/ListItemWithRadio.js');
|
|
31
32
|
var Link = require('./components/Links/Link.js');
|
|
32
33
|
var Modal = require('./components/Modal/Modal.js');
|
|
33
34
|
var RadioBoxItem = require('./components/RadioBox/RadioBoxItem.js');
|
|
@@ -93,6 +94,7 @@ exports.FormGroup = FormGroup.FormGroup;
|
|
|
93
94
|
exports.InfoWithButtonBlock = InfoTextBlock.InfoWithButtonBlock;
|
|
94
95
|
exports.LayoutBox = LayoutBox.LayoutBox;
|
|
95
96
|
exports.ListItem = ListItem.ListItem;
|
|
97
|
+
exports.ListItemWithRadio = ListItemWithRadio.ListItemWithRadio;
|
|
96
98
|
exports.LinkButton = Link.LinkButton;
|
|
97
99
|
Object.defineProperty(exports, 'LinkColors', {
|
|
98
100
|
enumerable: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -19,8 +19,9 @@ var attributes = {
|
|
|
19
19
|
buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',
|
|
20
20
|
buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',
|
|
21
21
|
iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',
|
|
22
|
-
|
|
23
|
-
layoutShadow: '
|
|
22
|
+
layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',
|
|
23
|
+
layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',
|
|
24
|
+
stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)'
|
|
24
25
|
},
|
|
25
26
|
zIndex: {
|
|
26
27
|
modal: 5,
|
|
@@ -54,7 +55,7 @@ var constants = {
|
|
|
54
55
|
deliverySlotItemWidth: 80,
|
|
55
56
|
deliverySlotItemWidthDesktop: 120,
|
|
56
57
|
itemGap: 2,
|
|
57
|
-
|
|
58
|
+
ListImageMaxWidth: 64,
|
|
58
59
|
infoBlockImageMaxWidthDesktop: 100,
|
|
59
60
|
chipCheckBox: 12,
|
|
60
61
|
pageContentMaxWidth: 1280,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n borderRadius: {\n extraSmall: 2,\n small: 5,\n default: 10,\n big: 20\n },\n boxShadow: {\n small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n borderRadius: {\n extraSmall: 2,\n small: 5,\n default: 10,\n big: 20\n },\n boxShadow: {\n small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',\n layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',\n stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)'\n },\n zIndex: {\n modal: 5,\n footer: 4,\n high: 3,\n middle: 2,\n low: 1\n },\n transition: {\n t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n inputTransition: 'box-shadow 250ms ease'\n }\n};\n\nvar breakpoints = {\n xs: 480,\n sm: 576,\n md: 768,\n lg: 960,\n xl: 1060,\n xxl: 1280,\n xxxl: 1400\n};\n\nvar constants = {\n headerScrollFadeRange: 50,\n modalContainerMaxWidth: 615,\n modalConfirmMaxWidth: 480,\n pageContainerMaxWidth: 776,\n twoColumnsContainerMaxWidth: 1024,\n deliverySlotItemWidth: 80,\n deliverySlotItemWidthDesktop: 120,\n itemGap: 2,\n ListImageMaxWidth: 64,\n infoBlockImageMaxWidthDesktop: 100,\n chipCheckBox: 12,\n pageContentMaxWidth: 1280,\n infoBlockBorderWidth: 4\n};\n\nvar palette = {\n // pallette same as brand colors\n primary: '#FFE522',\n secondary: '#0069AE',\n // brand colors\n brandYellow: '#FFE522',\n brandBlue: '#0069AE',\n brandPurple: '#A71680',\n // shades\n yellowLighter: '#FFFBE7',\n yellowLight: '#FFF7D1',\n blueLight: '#ECF7FE',\n blueMedium: '#92B9D3',\n greenLight: '#F2FDF2',\n greenMedium: '#BEE5BE',\n // link same as alert blue\n link: '#0072BB',\n // black / white\n white: '#FFFFFF',\n black: '#000000',\n // grayscale\n lightest: '#F7F7F7',\n lighter: '#F1F1F1',\n light: '#E8E8E8',\n medium: '#DBDBDB',\n dark: '#979797',\n darker: '#4A4A4A',\n darkest: '#333333',\n border: '#0069AE',\n boxShadow: '#E1E1E1',\n boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n // Alerts\n alertRed: '#E02721',\n alertBlue: '#0072BB',\n alertGreen: '#3F9A3C',\n // overlay\n darkOverlay: 'rgba(0, 0, 0, 0.6)',\n // transparent\n transparent: '#ffffff00',\n none: 'none'\n};\n\nvar spacings = {\n xxs: 4,\n xs: 8,\n sm: 16,\n md: 24,\n lg: 32,\n xl: 40,\n xxl: 56\n // More in figma, but talk with Johan to generalize it more.\n // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n type: {\n primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n },\n weight: {\n regular: '400',\n medium: '500',\n semiBold: '600',\n bold: '700'\n },\n size: {\n // s all from 0-20\n s1: 12,\n s2: 13,\n s3: 15,\n s4: 18,\n // m all from 21-40\n m1: 24,\n m2: 30,\n // l all from 41 >\n code: 90\n },\n lineHeight: {\n // s all from 0-20\n s1: 18,\n s2: 19,\n // m all from 21-40\n m1: 22,\n m2: 27,\n m3: 36,\n // l all from 41 >\n l1: 45\n }\n};\n\nvar animations = {\n tapScale: 0.9,\n hoverScale: 1.1,\n buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n return ({\n palette: palette,\n typography: typography,\n attributes: attributes,\n breakpoints: breakpoints,\n spacings: spacings,\n constants: constants,\n animations: animations\n });\n};\nvar theme = createTheme({\n palette: palette,\n typography: typography,\n attributes: attributes,\n breakpoints: breakpoints,\n spacings: spacings,\n constants: constants,\n animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":["build"],"mappings":"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"}
|
|
@@ -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 };
|
|
@@ -33,6 +33,7 @@ import '../FormGroup/FormGroup.styles.js';
|
|
|
33
33
|
import '../InfoTextBlock/InfoTextBlock.styles.js';
|
|
34
34
|
import '../LayoutBox/LayoutBox.styles.js';
|
|
35
35
|
import '../ListItem/ListItem.styles.js';
|
|
36
|
+
import '../ListItemWithRadio/ListItemWithRadio.styles.js';
|
|
36
37
|
import '../Links/Link.js';
|
|
37
38
|
import 'react-dom';
|
|
38
39
|
import '../Modal/Modal.styles.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Button.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -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,17 +1,12 @@
|
|
|
1
1
|
import { __makeTemplateObject } from '../../../../../_virtual/_tslib.js';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
|
-
var TextArea = styled.textarea(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
4
|
+
var TextArea = styled.textarea(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid\n ", ";\n outline: none;\n padding: ", "px;\n border-radius: 2px;\n background: ", ";\n color: ", ";\n flex-grow: ", ";\n font-size: ", "px;\n resize: vertical;\n width: 100%;\n ", ";\n\n transition: ", ";\n\n &:focus,\n &:hover {\n border: 1px solid ", ";\n }\n\n &:focus {\n box-shadow: ", ";\n }\n\n ::placeholder {\n color: ", ";\n }\n\n ::-webkit-scrollbar {\n width: 4px;\n background: ", ";\n }\n\n ::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background-color: ", ";\n }\n /* for mozilla */\n scrollbar-width: thin;\n scrollbar-color: ", ";\n"], ["\n border: 1px solid\n ", ";\n outline: none;\n padding: ", "px;\n border-radius: 2px;\n background: ", ";\n color: ", ";\n flex-grow: ", ";\n font-size: ", "px;\n resize: vertical;\n width: 100%;\n ", ";\n\n transition: ", ";\n\n &:focus,\n &:hover {\n border: 1px solid ", ";\n }\n\n &:focus {\n box-shadow: ", ";\n }\n\n ::placeholder {\n color: ", ";\n }\n\n ::-webkit-scrollbar {\n width: 4px;\n background: ", ";\n }\n\n ::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background-color: ", ";\n }\n /* for mozilla */\n scrollbar-width: thin;\n scrollbar-color: ", ";\n"])), function (props) {
|
|
5
5
|
var _a, _b, _c, _d;
|
|
6
6
|
return props.disabled
|
|
7
7
|
? (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium
|
|
8
8
|
: (_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.dark;
|
|
9
|
-
}, function (props) { var _a, _b, _c, _d; 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.xs) + 'px' + ' ' + ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.spacings) === null || _d === void 0 ? void 0 : _d.sm); }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.darkest; }, function (props) { var _a; return (_a = props.flexGrow) !== null && _a !== void 0 ? _a : 1; }, function (props) { var _a, _b, _c; return props.fontSize ? props.fontSize : (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3; }, function (props) {
|
|
10
|
-
var _a, _b, _c, _d, _e;
|
|
11
|
-
return props.theme.typography &&
|
|
12
|
-
((_c = (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3) + 1 +
|
|
13
|
-
((_e = (_d = props === null || props === void 0 ? void 0 : props.theme.typography) === null || _d === void 0 ? void 0 : _d.lineHeight) === null || _e === void 0 ? void 0 : _e.m2);
|
|
14
|
-
}, function (props) { return props.flexGrow && "flex: " + props.flexGrow; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition.inputTransition; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.brandBlue; }, function (props) {
|
|
9
|
+
}, function (props) { var _a, _b, _c, _d; 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.xs) + 'px' + ' ' + ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.spacings) === null || _d === void 0 ? void 0 : _d.sm); }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.darkest; }, function (props) { var _a; return (_a = props.flexGrow) !== null && _a !== void 0 ? _a : 1; }, function (props) { var _a, _b, _c; return props.fontSize ? props.fontSize : (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3; }, function (props) { return props.flexGrow && "flex: " + props.flexGrow; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition.inputTransition; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.brandBlue; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonHover; }, function (props) {
|
|
15
10
|
var _a, _b, _c, _d;
|
|
16
11
|
return props.disabled
|
|
17
12
|
? (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TextArea.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
|
|
@@ -7,7 +7,7 @@ var InfoBlock = styled.div(templateObject_1 || (templateObject_1 = __makeTemplat
|
|
|
7
7
|
? ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md) + "px"
|
|
8
8
|
: ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.sm) + "px " + ((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.md) + "px";
|
|
9
9
|
}, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; });
|
|
10
|
-
var ImageContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n max-width: ", "px;\n width: 100%;\n @media (min-width: ", "px) {\n max-width: ", "px;\n }\n"], ["\n max-width: ", "px;\n width: 100%;\n @media (min-width: ", "px) {\n max-width: ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.
|
|
10
|
+
var ImageContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n max-width: ", "px;\n width: 100%;\n @media (min-width: ", "px) {\n max-width: ", "px;\n }\n"], ["\n max-width: ", "px;\n width: 100%;\n @media (min-width: ", "px) {\n max-width: ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.infoBlockImageMaxWidthDesktop; });
|
|
11
11
|
var Image = styled.img(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n object-fit: contain;\n"], ["\n width: 100%;\n height: 100%;\n object-fit: contain;\n"])));
|
|
12
12
|
var InfoTextWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n gap: ", "px;\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n"], ["\n display: flex;\n gap: ", "px;\n @media (min-width: ", "px) {\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.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
|
|
13
13
|
var ButtonContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n width: 100%;\n @media (min-width: ", "px) {\n max-width: max-content;\n }\n"], ["\n display: flex;\n width: 100%;\n @media (min-width: ", "px) {\n max-width: max-content;\n }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; });
|
|
@@ -2,8 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import { LayoutBoxContainer } from './LayoutBox.styles.js';
|
|
3
3
|
|
|
4
4
|
var LayoutBox = function (_a) {
|
|
5
|
-
var background = _a.background, children = _a.children;
|
|
6
|
-
return (React.createElement(LayoutBoxContainer, { background: background || '#fff' }, children));
|
|
5
|
+
var background = _a.background, borderRadius = _a.borderRadius, shadowInset = _a.shadowInset, children = _a.children;
|
|
6
|
+
return (React.createElement(LayoutBoxContainer, { borderRadius: borderRadius, shadowInset: shadowInset, background: background || '#fff' }, children));
|
|
7
7
|
};
|
|
8
8
|
|
|
9
9
|
export { LayoutBox };
|
|
@@ -1,7 +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
|
|
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
|
+
return props.shadowInset
|
|
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); });
|
|
5
10
|
var templateObject_1;
|
|
6
11
|
|
|
7
12
|
export { LayoutBoxContainer };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayoutBox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"LayoutBox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
|
|
@@ -5,7 +5,7 @@ var ItemInformationContainer = styled.div(templateObject_1 || (templateObject_1
|
|
|
5
5
|
var ListItemContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n\n p {\n padding: 1px 0px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n\n p {\n padding: 1px 0px;\n }\n"])));
|
|
6
6
|
var ListLeft = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n @media (min-width: ", "px) {\n gap: 20px;\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n @media (min-width: ", "px) {\n gap: 20px;\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.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
7
7
|
var ListRight = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n justify-content: space-between;\n text-align: right;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n justify-content: space-between;\n text-align: right;\n"])));
|
|
8
|
-
var ListImageContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: row;\n width:
|
|
8
|
+
var ListImageContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: row;\n width: ", "px;\n height: ", "px;\n"], ["\n display: flex;\n align-items: center;\n flex-direction: row;\n width: ", "px;\n height: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; });
|
|
9
9
|
var ListImage = styled.img(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n max-width: 100%;\n max-height: 50px;\n"], ["\n max-width: 100%;\n max-height: 50px;\n"])));
|
|
10
10
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
11
11
|
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { BodyText, TextTypes } from '@citygross/typography';
|
|
3
|
+
import Skeleton from 'react-loading-skeleton';
|
|
4
|
+
import FallbackIcon from '../ListItem/assets/fallback_grocery.svg.js';
|
|
5
|
+
import { ListItemContainer, ListLeft, ListImageContainer, ListImage, ListItemHeader, RadioWrapper } from './ListItemWithRadio.styles.js';
|
|
6
|
+
import { theme as theme_1 } from '../../../../design-tokens/build/index.js';
|
|
7
|
+
|
|
8
|
+
function ListItemWithRadio(_a) {
|
|
9
|
+
var _b, _c;
|
|
10
|
+
var item = _a.item, loading = _a.loading, rightChildren = _a.rightChildren, radioChildren = _a.radioChildren;
|
|
11
|
+
return (React.createElement(ListItemContainer, null,
|
|
12
|
+
React.createElement(ListLeft, null,
|
|
13
|
+
React.createElement(ListImageContainer, null,
|
|
14
|
+
React.createElement(ListImage, { src: (item === null || item === void 0 ? void 0 : item.image) || FallbackIcon, alt: item === null || item === void 0 ? void 0 : item.name })),
|
|
15
|
+
loading ? (React.createElement(React.Fragment, null,
|
|
16
|
+
React.createElement(ListItemHeader, null,
|
|
17
|
+
React.createElement(Skeleton, { width: 180 })),
|
|
18
|
+
React.createElement(RadioWrapper, null,
|
|
19
|
+
React.createElement(Skeleton, { width: 140, count: 2, style: {
|
|
20
|
+
display: 'flex',
|
|
21
|
+
flexDirection: 'column',
|
|
22
|
+
marginBottom: ((_b = theme_1.spacings) === null || _b === void 0 ? void 0 : _b.xs) + "px"
|
|
23
|
+
} })))) : (React.createElement(React.Fragment, null,
|
|
24
|
+
React.createElement(ListItemHeader, null,
|
|
25
|
+
React.createElement(BodyText, { fontWeight: 'semiBold' }, item === null || item === void 0 ? void 0 :
|
|
26
|
+
item.name,
|
|
27
|
+
" "),
|
|
28
|
+
React.createElement(BodyText, { size: TextTypes.TextSize.SMALL, color: (_c = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _c === void 0 ? void 0 : _c.dark }, item === null || item === void 0 ? void 0 : item.description)),
|
|
29
|
+
React.createElement(RadioWrapper, null, radioChildren && radioChildren)))),
|
|
30
|
+
rightChildren && rightChildren));
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export { ListItemWithRadio };
|
|
34
|
+
//# sourceMappingURL=ListItemWithRadio.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListItemWithRadio.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
|
|
4
|
+
var ListImageContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: row;\n width: ", "px;\n height: ", "px;\n grid-area: img;\n"], ["\n display: flex;\n align-items: center;\n flex-direction: row;\n width: ", "px;\n height: ", "px;\n grid-area: img;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; });
|
|
5
|
+
var ListImage = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n max-width: 100%;\n max-height: 100%;\n"], ["\n max-width: 100%;\n max-height: 100%;\n"])));
|
|
6
|
+
var ListItemContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
7
|
+
var ListLeft = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: grid;\n flex: 1;\n gap: ", "px;\n grid-template-columns: ", "px 1fr;\n grid-template-areas:\n 'img header'\n 'radio radio';\n\n @media (min-width: ", "px) {\n grid-template-rows: ", "px 1fr;\n grid-template-areas:\n 'img header'\n '. radio';\n }\n"], ["\n display: grid;\n flex: 1;\n gap: ", "px;\n grid-template-columns: ", "px 1fr;\n grid-template-areas:\n 'img header'\n 'radio radio';\n\n @media (min-width: ", "px) {\n grid-template-rows: ", "px 1fr;\n grid-template-areas:\n 'img header'\n '. radio';\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.ListImageMaxWidth; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight) === null || _b === void 0 ? void 0 : _b.m1; });
|
|
8
|
+
var ListItemHeader = styled(ListItemContainer)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n flex-direction: column;\n gap: 2px;\n padding-left: ", "px;\n grid-area: header;\n @media (min-width: ", "px) {\n flex-direction: row;\n gap: ", "px;\n align-items: center;\n }\n"], ["\n flex-direction: column;\n gap: 2px;\n padding-left: ", "px;\n grid-area: header;\n @media (min-width: ", "px) {\n flex-direction: row;\n gap: ", "px;\n align-items: center;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
9
|
+
styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n flex-direction: column;\n gap: ", "px;\n"], ["\n flex-direction: column;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
|
|
10
|
+
var RadioWrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n grid-area: radio;\n @media (min-width: ", "px) {\n padding-left: ", "px;\n }\n"], ["\n grid-area: radio;\n @media (min-width: ", "px) {\n padding-left: ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
|
|
11
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
12
|
+
|
|
13
|
+
export { ListImage, ListImageContainer, ListItemContainer, ListItemHeader, ListLeft, RadioWrapper };
|
|
14
|
+
//# sourceMappingURL=ListItemWithRadio.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListItemWithRadio.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
|
|
@@ -5,7 +5,7 @@ import { BaseRadioBox } from './RadioBoxItem.styles.js';
|
|
|
5
5
|
|
|
6
6
|
function RadioBoxItem(_a) {
|
|
7
7
|
var _b, _c;
|
|
8
|
-
var _d = _a.radioColor, radioColor = _d === void 0 ? 'alertGreen' : _d, checked = _a.checked, isDisabled = _a.isDisabled, name = _a.name, _e = _a.align, align = _e === void 0 ? 'flex-start' : _e, setActive = _a.setActive, _f = _a.background, background = _f === void 0 ? (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.
|
|
8
|
+
var _d = _a.radioColor, radioColor = _d === void 0 ? 'alertGreen' : _d, checked = _a.checked, isDisabled = _a.isDisabled, name = _a.name, _e = _a.align, align = _e === void 0 ? 'flex-start' : _e, setActive = _a.setActive, _f = _a.background, background = _f === void 0 ? (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.white : _f, _g = _a.border, border = _g === void 0 ? (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.border : _g, _h = _a.boxShadow, boxShadow = _h === void 0 ? true : _h, children = _a.children;
|
|
9
9
|
return (React.createElement(BaseRadioBox, { align: align, checked: checked, isDisabled: isDisabled, onClick: !isDisabled ? setActive : function () { }, background: background, border: border, boxShadow: boxShadow },
|
|
10
10
|
React.createElement(Radio, { customColor: radioColor, checked: checked, disabled: isDisabled, name: name, onChange: function () { return setActive; } }),
|
|
11
11
|
children));
|
|
@@ -6,11 +6,7 @@ var Alignment;
|
|
|
6
6
|
Alignment[Alignment["flex-start"] = 0] = "flex-start";
|
|
7
7
|
Alignment[Alignment["center"] = 1] = "center";
|
|
8
8
|
})(Alignment || (Alignment = {}));
|
|
9
|
-
var BaseRadioBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-basis: 100%;\n padding: ", ";\n align-items: ", ";\n gap: ", "px;\n cursor: ", ";\n ", ";\n ", ";\n border: solid 1px ", ";\n ", ";\n border-radius: 5px;\n ", ";\n -webkit-transition: background-color 400ms linear;\n -ms-transition: background-color 400ms linear;\n transition: background-color 400ms linear;\n"], ["\n display: flex;\n flex-basis: 100%;\n padding: ", ";\n align-items: ", ";\n gap: ", "px;\n cursor: ", ";\n ", ";\n ", ";\n border: solid 1px ", ";\n ", ";\n border-radius: 5px;\n ", ";\n -webkit-transition: background-color 400ms linear;\n -ms-transition: background-color 400ms linear;\n transition: background-color 400ms linear;\n"])), function (props) { var _a; return ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md) + "px "; }, function (props) { return props.align; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return (props.isDisabled ? 'default' : 'pointer'); }, function (props) { return props.isDisabled && 'opacity: 0.4'; }, function (props) {
|
|
10
|
-
return !props.checked &&
|
|
11
|
-
props.background &&
|
|
12
|
-
"background-color: " + (props.background && props.background);
|
|
13
|
-
}, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.transparent; }, function (props) {
|
|
9
|
+
var BaseRadioBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-basis: 100%;\n padding: ", ";\n align-items: ", ";\n gap: ", "px;\n cursor: ", ";\n ", ";\n\n background: ", ";\n border: solid 1px ", ";\n ", ";\n border-radius: 5px;\n ", ";\n -webkit-transition: background-color 400ms linear;\n -ms-transition: background-color 400ms linear;\n transition: background-color 400ms linear;\n"], ["\n display: flex;\n flex-basis: 100%;\n padding: ", ";\n align-items: ", ";\n gap: ", "px;\n cursor: ", ";\n ", ";\n\n background: ", ";\n border: solid 1px ", ";\n ", ";\n border-radius: 5px;\n ", ";\n -webkit-transition: background-color 400ms linear;\n -ms-transition: background-color 400ms linear;\n transition: background-color 400ms linear;\n"])), function (props) { var _a; return ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md) + "px "; }, function (props) { return props.align; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return (props.isDisabled ? 'default' : 'pointer'); }, function (props) { return props.isDisabled && 'opacity: 0.4'; }, function (props) { var _a; return props.checked ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight : props.background; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) {
|
|
14
10
|
return props.checked &&
|
|
15
11
|
props.border &&
|
|
16
12
|
"border: 1px solid " + (props.border && props.border);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioBoxItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioBoxItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -3,17 +3,19 @@ import { BodyText, TextTypes } from '@citygross/typography';
|
|
|
3
3
|
import { Radio } from '../FormElements/Radio/Radio.js';
|
|
4
4
|
import { Dot } from '../DotIndicator/DotIndicator.js';
|
|
5
5
|
import { theme } from '@citygross/design-tokens';
|
|
6
|
-
import {
|
|
6
|
+
import { BaseRadioListItemContainer, BaseRadioItemLeftWrapper, StyledH3, ExtraTextContainer } from './RadioListItem.styles.js';
|
|
7
7
|
|
|
8
8
|
function RadioListItem(_a) {
|
|
9
|
-
var _b, _c;
|
|
10
|
-
var item = _a.item, onClick = _a.onClick, selected = _a.selected, name = _a.name,
|
|
9
|
+
var _b, _c, _d;
|
|
10
|
+
var item = _a.item, onClick = _a.onClick, selected = _a.selected, name = _a.name, _e = _a.radioColor, radioColor = _e === void 0 ? 'alertBlue' : _e, defaultDisabledString = _a.defaultDisabledString, _f = _a.flexGrow, flexGrow = _f === void 0 ? 1 : _f, isDisabled = _a.isDisabled, dotIndicator = _a.dotIndicator, transparent = _a.transparent, noPadding = _a.noPadding;
|
|
11
11
|
var checked = item.value === selected;
|
|
12
|
-
return (React.createElement(
|
|
13
|
-
?
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
return (React.createElement(BaseRadioListItemContainer, { background: transparent
|
|
13
|
+
? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.transparent
|
|
14
|
+
: theme && theme.palette
|
|
15
|
+
? checked
|
|
16
|
+
? (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.blueLight
|
|
17
|
+
: (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.white
|
|
18
|
+
: 'white', noPadding: noPadding, onClick: item.isDisabled || isDisabled ? function () { } : function () { return onClick(item.value); } },
|
|
17
19
|
React.createElement(BaseRadioItemLeftWrapper, { isDisabled: item.isDisabled, flexGrow: flexGrow },
|
|
18
20
|
React.createElement(Radio, { customColor: radioColor, checked: checked, disabled: item.isDisabled, name: name, onChange: function () { return onClick(item.value); }, value: item.value }),
|
|
19
21
|
React.createElement(StyledH3, { lineThrough: item.isDisabled }, item.label)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
|
-
import { BoxContainer } from '../Box/Box.styles.js';
|
|
3
2
|
import { H3 } from '@citygross/typography';
|
|
4
3
|
import styled from 'styled-components';
|
|
5
4
|
|
|
6
|
-
var
|
|
7
|
-
var BaseRadioItemLeftWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: flex-
|
|
5
|
+
var BaseRadioListItemContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n padding: ", "px;\n align-items: center;\n cursor: pointer;\n flex-wrap: wrap;\n border-radius: ", "px;\n background: ", ";\n > p:first-of-type {\n margin-left: ", "px;\n }\n"], ["\n display: flex;\n padding: ", "px;\n align-items: center;\n cursor: pointer;\n flex-wrap: wrap;\n border-radius: ", "px;\n background: ", ";\n > p:first-of-type {\n margin-left: ", "px;\n }\n"])), function (props) { var _a; return (props.noPadding ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { return props.background; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
6
|
+
var BaseRadioItemLeftWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n ", ";\n > * {\n &:first-child {\n margin-right: ", "px;\n }\n }\n ", ";\n"], ["\n display: flex;\n align-items: flex-start;\n ", ";\n > * {\n &:first-child {\n margin-right: ", "px;\n }\n }\n ", ";\n"])), function (props) { return props.flexGrow && "flex-grow: " + props.flexGrow; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.isDisabled && 'opacity: 0.4'; });
|
|
8
7
|
var ExtraTextContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-basis: 100%;\n margin-left: ", "px;\n text-align: start;\n"], ["\n flex-basis: 100%;\n margin-left: ", "px;\n text-align: start;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
|
|
9
8
|
var StyledH3 = styled(H3).attrs({ as: 'label' })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n cursor: pointer;\n"], ["\n cursor: pointer;\n"])));
|
|
10
9
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
11
10
|
|
|
12
|
-
export { BaseRadioItemLeftWrapper,
|
|
11
|
+
export { BaseRadioItemLeftWrapper, BaseRadioListItemContainer, ExtraTextContainer, StyledH3 };
|
|
13
12
|
//# sourceMappingURL=RadioListItem.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
|
|
@@ -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":";;;;;;;;;;;;;;"}
|
|
@@ -24,6 +24,7 @@ export { FormGroup } from './components/FormGroup/FormGroup.js';
|
|
|
24
24
|
export { InfoWithButtonBlock } from './components/InfoTextBlock/InfoTextBlock.js';
|
|
25
25
|
export { LayoutBox } from './components/LayoutBox/LayoutBox.js';
|
|
26
26
|
export { ListItem } from './components/ListItem/ListItem.js';
|
|
27
|
+
export { ListItemWithRadio } from './components/ListItemWithRadio/ListItemWithRadio.js';
|
|
27
28
|
export { LinkButton, LinkColors, LinkSize } from './components/Links/Link.js';
|
|
28
29
|
export { Modal } from './components/Modal/Modal.js';
|
|
29
30
|
export { RadioBoxItem } from './components/RadioBox/RadioBoxItem.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -16,8 +16,9 @@ var attributes = {
|
|
|
16
16
|
buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',
|
|
17
17
|
buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',
|
|
18
18
|
iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',
|
|
19
|
-
|
|
20
|
-
layoutShadow: '
|
|
19
|
+
layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',
|
|
20
|
+
layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',
|
|
21
|
+
stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)'
|
|
21
22
|
},
|
|
22
23
|
zIndex: {
|
|
23
24
|
modal: 5,
|
|
@@ -51,7 +52,7 @@ var constants = {
|
|
|
51
52
|
deliverySlotItemWidth: 80,
|
|
52
53
|
deliverySlotItemWidthDesktop: 120,
|
|
53
54
|
itemGap: 2,
|
|
54
|
-
|
|
55
|
+
ListImageMaxWidth: 64,
|
|
55
56
|
infoBlockImageMaxWidthDesktop: 100,
|
|
56
57
|
chipCheckBox: 12,
|
|
57
58
|
pageContentMaxWidth: 1280,
|