@citygross/components 0.15.7 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/@types/components/CartItemSummary/CartItemSummary.styles.d.ts +1 -1
- package/build/@types/components/ListItem/ListItem.d.ts +1 -0
- package/build/cjs/components/src/components/CartItemSummary/CartItemSummary.styles.js +1 -1
- package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.js +1 -1
- package/build/cjs/components/src/components/ListItem/ListItem.js +14 -11
- package/build/cjs/components/src/components/ListItem/ListItem.js.map +1 -1
- package/build/cjs/components/src/components/ListItem/ListItem.styles.js +2 -2
- package/build/cjs/components/src/components/MinimalHeader/MinimalHeader.styles.js +1 -1
- package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js +3 -2
- package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js.map +1 -1
- package/build/cjs/components/src/components/ToolTipDialog/ToolTipDialog.styles.js +5 -1
- package/build/cjs/components/src/components/ToolTipDialog/ToolTipDialog.styles.js.map +1 -1
- package/build/es/components/src/components/CartItemSummary/CartItemSummary.styles.js +2 -2
- package/build/es/components/src/components/FormElements/Checkbox/Checkbox.js +1 -1
- package/build/es/components/src/components/ListItem/ListItem.js +14 -11
- package/build/es/components/src/components/ListItem/ListItem.js.map +1 -1
- package/build/es/components/src/components/ListItem/ListItem.styles.js +2 -2
- package/build/es/components/src/components/MinimalHeader/MinimalHeader.styles.js +1 -1
- package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js +3 -2
- package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js.map +1 -1
- package/build/es/components/src/components/ToolTipDialog/ToolTipDialog.styles.js +5 -1
- package/build/es/components/src/components/ToolTipDialog/ToolTipDialog.styles.js.map +1 -1
- package/package.json +3 -3
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
export declare const CartItemSummaryWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
3
3
|
export declare const CancelledWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
4
4
|
export declare const ItemInformationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
5
|
-
export declare const AmountText: import("styled-components").StyledComponent<({ children,
|
|
5
|
+
export declare const AmountText: import("styled-components").StyledComponent<({ children, color, fontWeight, size, textAlign, ...props }: import("@citygross/typography/build/bodyText/bodyText").TBodyText) => import("react").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -13,7 +13,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
13
13
|
var CartItemSummaryWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n @media (min-width: ", "px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n gap: 20px;\n @media (min-width: ", "px) {\n flex-direction: row;\n }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
14
14
|
var CancelledWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
15
15
|
var ItemInformationContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
16
|
-
var AmountText = styled__default["default"](typography.
|
|
16
|
+
var AmountText = styled__default["default"](typography.BodyText)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n white-space: nowrap;\n"], ["\n white-space: nowrap;\n"])));
|
|
17
17
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
18
18
|
|
|
19
19
|
exports.AmountText = AmountText;
|
|
@@ -22,7 +22,7 @@ var Checkbox = function (_a) {
|
|
|
22
22
|
React__default["default"].createElement(FormElement_styles.HiddenInput, _tslib.__assign({ checked: checked, disabled: disabled, type: "checkbox" }, props)),
|
|
23
23
|
React__default["default"].createElement(Checkbox_styles.CheckboxContainer, { attributes: attributes },
|
|
24
24
|
React__default["default"].createElement(Checkbox_styles.IconContainer, null,
|
|
25
|
-
React__default["default"].createElement(icons.Icons.CheckMark, { color: iconColor }))),
|
|
25
|
+
React__default["default"].createElement(icons.Icons.CheckMark, { color: iconColor, "aria-hidden": "true" }))),
|
|
26
26
|
hideLabel ? (React__default["default"].createElement(ScreenReader.ScreenReader, { string: label })) : (React__default["default"].createElement(typography.BodyText, { color: labelColor }, label))));
|
|
27
27
|
};
|
|
28
28
|
|
|
@@ -10,6 +10,7 @@ var ProductHeader = require('../ProductHeader/ProductHeader.js');
|
|
|
10
10
|
var PriceStripe = require('../PriceStripe/PriceStripe.js');
|
|
11
11
|
var ListItem_styles = require('./ListItem.styles.js');
|
|
12
12
|
var PriceTag_types = require('../PriceTag/PriceTag.types.js');
|
|
13
|
+
var Fieldset = require('../Fieldset/Fieldset.js');
|
|
13
14
|
|
|
14
15
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
16
|
|
|
@@ -40,7 +41,7 @@ function buildCheckboxContext(item) {
|
|
|
40
41
|
return "".concat(productPart).concat(pricePart).concat(quantityPart);
|
|
41
42
|
}
|
|
42
43
|
var ListItem = function (_a) {
|
|
43
|
-
var _b = _a.alignment, alignment = _b === void 0 ? exports.EListItemAlignment.CENTER : _b, children = _a.children, checkboxes = _a.checkboxes, fallBackImage = _a.fallBackImage, imageAutoHeight = _a.imageAutoHeight, item = _a.item, isSmall = _a.isSmall, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.showPriceStripe, showPriceStripe = _d === void 0 ? false : _d, smallSkeleton = _a.smallSkeleton;
|
|
44
|
+
var _b = _a.alignment, alignment = _b === void 0 ? exports.EListItemAlignment.CENTER : _b, children = _a.children, checkboxes = _a.checkboxes, fallBackImage = _a.fallBackImage, checkboxLegendLabel = _a.checkboxLegendLabel, imageAutoHeight = _a.imageAutoHeight, item = _a.item, isSmall = _a.isSmall, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.showPriceStripe, showPriceStripe = _d === void 0 ? false : _d, smallSkeleton = _a.smallSkeleton;
|
|
44
45
|
var checkboxContext = checkboxes && checkboxes.length > 0 && ((item === null || item === void 0 ? void 0 : item.name) || (item === null || item === void 0 ? void 0 : item.subtitle))
|
|
45
46
|
? buildCheckboxContext(item)
|
|
46
47
|
: '';
|
|
@@ -64,16 +65,18 @@ var ListItem = function (_a) {
|
|
|
64
65
|
checkboxes && checkboxes.length > 0 && (React__default["default"].createElement(Skeleton__default["default"], { height: 20, width: smallSkeleton ? 150 : 200, count: checkboxes.length, style: { marginTop: '8px' } })))) : (React__default["default"].createElement(React.Fragment, null,
|
|
65
66
|
showPriceStripe && (React__default["default"].createElement(PriceStripe.PriceStripe, { size: PriceTag_types.EPriceSize.SMALL, variant: PriceTag_types.EPriceVariant.PRIO })),
|
|
66
67
|
React__default["default"].createElement(ProductHeader.ProductHeader, { location: ProductHeader.EProductHeader.LIST_ITEM, subtitle: item === null || item === void 0 ? void 0 : item.subtitle, title: item === null || item === void 0 ? void 0 : item.name }),
|
|
67
|
-
checkboxes && checkboxes.length > 0 && (React__default["default"].createElement(
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
68
|
+
checkboxes && checkboxes.length > 0 && (React__default["default"].createElement(Fieldset.Fieldset, null,
|
|
69
|
+
checkboxLegendLabel && (React__default["default"].createElement("legend", null, checkboxLegendLabel)),
|
|
70
|
+
React__default["default"].createElement(ListItem_styles.CheckboxContainer, null, checkboxes.map(function (checkbox, index) {
|
|
71
|
+
var ariaLabel = checkboxContext
|
|
72
|
+
? "".concat(checkbox.label, ". ").concat(checkboxContext)
|
|
73
|
+
: checkbox.label;
|
|
74
|
+
return (React__default["default"].createElement(Checkbox.Checkbox, { key: index, checked: checkbox.checked, disabled: checkbox.disabled, label: checkbox.label, name: checkbox.name, "aria-label": ariaLabel, onChange: function (e) {
|
|
75
|
+
if (checkbox.onChange) {
|
|
76
|
+
checkbox.onChange(e.target.checked);
|
|
77
|
+
}
|
|
78
|
+
}, value: checkbox.value, alignItems: "flex-start" }));
|
|
79
|
+
})))))),
|
|
77
80
|
(item === null || item === void 0 ? void 0 : item.secondaryDescription) && item.secondaryDescription)),
|
|
78
81
|
children && (React__default["default"].createElement(ListItem_styles.ListRight, { alignment: alignment }, children))));
|
|
79
82
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -18,7 +18,7 @@ var ListLeft = styled__default["default"].div(templateObject_3 || (templateObjec
|
|
|
18
18
|
var ListRight = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: ", ";\n justify-content: space-between;\n text-align: right;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: ", ";\n justify-content: space-between;\n text-align: right;\n"])), function (props) {
|
|
19
19
|
return props.alignment === ListItem.EListItemAlignment.TOP ? 'flex-start' : 'center';
|
|
20
20
|
});
|
|
21
|
-
var ListImageContainer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n width: ", "px;\n height: ", "px;\n\n @media (max-width: ", "px) {\n width: ", "px;\n height: ", "px;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n width: ", "px;\n height: ", "px;\n\n @media (max-width: ", "px) {\n width: ", "px;\n height: ", "px;\n }\n"])), function (props) {
|
|
21
|
+
var ListImageContainer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-shrink: 0;\n width: ", "px;\n height: ", "px;\n\n @media (max-width: ", "px) {\n width: ", "px;\n height: ", "px;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-shrink: 0;\n width: ", "px;\n height: ", "px;\n\n @media (max-width: ", "px) {\n width: ", "px;\n height: ", "px;\n }\n"])), function (props) {
|
|
22
22
|
var _a, _b;
|
|
23
23
|
return (props === null || props === void 0 ? void 0 : props.isSmall)
|
|
24
24
|
? (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listImageMaxWidthSmall
|
|
@@ -37,7 +37,7 @@ var ListImage = styled__default["default"].img(templateObject_6 || (templateObje
|
|
|
37
37
|
? (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listImageMaxHeightSmall
|
|
38
38
|
: (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.listImageMaxHeight, "px");
|
|
39
39
|
});
|
|
40
|
-
var CheckboxContainer = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n display: flex;\n
|
|
40
|
+
var CheckboxContainer = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n display: flex;\n row-gap: ", "px;\n margin-top: ", "px;\n flex-wrap: wrap;\n column-gap: ", "px;\n"], ["\n display: flex;\n row-gap: ", "px;\n margin-top: ", "px;\n flex-wrap: wrap;\n column-gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, 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.spacings) === null || _a === void 0 ? void 0 : _a.md; });
|
|
41
41
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
42
42
|
|
|
43
43
|
exports.CheckboxContainer = CheckboxContainer;
|
|
@@ -37,7 +37,7 @@ var HeaderContainer = styled__default["default"].div(templateObject_3 || (templa
|
|
|
37
37
|
return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.minimalHeaderMaxWidth;
|
|
38
38
|
});
|
|
39
39
|
var LogoContainer = styled__default["default"].a(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"])));
|
|
40
|
-
var HeaderLink = styled__default["default"].a(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n color: ", ";\n font-family: ", ";\n font-size: ", "px;\n text-decoration: underline;\n\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n"], ["\n color: ", ";\n font-family: ", ";\n font-size: ", "px;\n text-decoration: underline;\n\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n"])), function (_a) {
|
|
40
|
+
var HeaderLink = styled__default["default"].a(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n color: ", ";\n font-family: ", ";\n font-size: ", "px;\n text-decoration: underline;\n text-align: right;\n\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n"], ["\n color: ", ";\n font-family: ", ";\n font-size: ", "px;\n text-decoration: underline;\n text-align: right;\n\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n"])), function (_a) {
|
|
41
41
|
var _b;
|
|
42
42
|
var theme = _a.theme;
|
|
43
43
|
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.brandBlue;
|
|
@@ -37,12 +37,13 @@ var BaseRadioListItemContainer = styled__default["default"].div(templateObject_1
|
|
|
37
37
|
var BaseRadioItemLeftWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n flex: 5;\n align-items: flex-start;\n ", ";\n"], ["\n display: flex;\n flex: 5;\n align-items: flex-start;\n ", ";\n"])), function (props) { return props.flexGrow && "flex-grow: ".concat(props.flexGrow); });
|
|
38
38
|
var StyledH3 = styled__default["default"](typography.H3).attrs({ as: 'span' })(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n cursor: ", ";\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"], ["\n cursor: ", ";\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"])), function (props) { return (props.isDisabled ? 'not-allowed' : 'pointer'); }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m1; }, function (props) {
|
|
39
39
|
var _a;
|
|
40
|
-
return props.isDisabled &&
|
|
40
|
+
return props.isDisabled &&
|
|
41
|
+
"\n color: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledDarkGray, ";\n text-decoration: line-through;\n ");
|
|
41
42
|
});
|
|
42
43
|
var RadioRightWrapper = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n"], ["\n display: flex;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
|
|
43
44
|
styled__default["default"](typography.BodyText)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n font-size: ", "px;\n color: ", ";\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"], ["\n font-size: ", "px;\n color: ", ";\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) {
|
|
44
45
|
return (props === null || props === void 0 ? void 0 : props.wrapMobile) &&
|
|
45
|
-
"\n
|
|
46
|
+
"\n text-align: left;\n ";
|
|
46
47
|
}, 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.typography) === null || _a === void 0 ? void 0 : _a.size.s3; });
|
|
47
48
|
var RadioFlex = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n display: flex;\n gap: ", "px;\n ", "\n"], ["\n display: flex;\n gap: ", "px;\n ", "\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) {
|
|
48
49
|
var _a;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -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 DialogContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n background: ", ";\n border-radius: ", "px;\n color: ", ";\n display: flex;\n align-items: flex-start;\n gap: ", "px;\n font-size: ", "px;\n padding: ", "px;\n position: absolute;\n\n ", "\n"], ["\n background: ", ";\n border-radius: ", "px;\n color: ", ";\n display: flex;\n align-items: flex-start;\n gap: ", "px;\n font-size: ", "px;\n padding: ", "px;\n position: absolute;\n\n ", "\n"])), function (_a) {
|
|
12
|
+
var DialogContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n background: ", ";\n border-radius: ", "px;\n color: ", ";\n display: flex;\n align-items: flex-start;\n gap: ", "px;\n font-size: ", "px;\n padding: ", "px;\n position: absolute;\n z-index: ", ";\n\n ", "\n"], ["\n background: ", ";\n border-radius: ", "px;\n color: ", ";\n display: flex;\n align-items: flex-start;\n gap: ", "px;\n font-size: ", "px;\n padding: ", "px;\n position: absolute;\n z-index: ", ";\n\n ", "\n"])), function (_a) {
|
|
13
13
|
var _b;
|
|
14
14
|
var theme = _a.theme;
|
|
15
15
|
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.black;
|
|
@@ -33,6 +33,10 @@ var DialogContainer = styled__default["default"].div(templateObject_1 || (templa
|
|
|
33
33
|
var _b;
|
|
34
34
|
var theme = _a.theme;
|
|
35
35
|
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs2;
|
|
36
|
+
}, function (_a) {
|
|
37
|
+
var _b;
|
|
38
|
+
var theme = _a.theme;
|
|
39
|
+
return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.zIndex.low;
|
|
36
40
|
}, function (_a) {
|
|
37
41
|
var _b, _c;
|
|
38
42
|
var onBottom = _a.onBottom, theme = _a.theme;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolTipDialog.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToolTipDialog.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
|
-
import {
|
|
2
|
+
import { BodyText } from '@citygross/typography';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
|
|
5
5
|
var CartItemSummaryWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n @media (min-width: ", "px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n gap: 20px;\n @media (min-width: ", "px) {\n flex-direction: row;\n }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
6
6
|
var CancelledWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
7
7
|
var ItemInformationContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
8
|
-
var AmountText = styled(
|
|
8
|
+
var AmountText = styled(BodyText)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n white-space: nowrap;\n"], ["\n white-space: nowrap;\n"])));
|
|
9
9
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
10
10
|
|
|
11
11
|
export { AmountText, CancelledWrapper, CartItemSummaryWrapper, ItemInformationContainer };
|
|
@@ -14,7 +14,7 @@ var Checkbox = function (_a) {
|
|
|
14
14
|
React.createElement(HiddenInput, __assign({ checked: checked, disabled: disabled, type: "checkbox" }, props)),
|
|
15
15
|
React.createElement(CheckboxContainer, { attributes: attributes },
|
|
16
16
|
React.createElement(IconContainer, null,
|
|
17
|
-
React.createElement(Icons.CheckMark, { color: iconColor }))),
|
|
17
|
+
React.createElement(Icons.CheckMark, { color: iconColor, "aria-hidden": "true" }))),
|
|
18
18
|
hideLabel ? (React.createElement(ScreenReader, { string: label })) : (React.createElement(BodyText, { color: labelColor }, label))));
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -6,6 +6,7 @@ import { ProductHeader, EProductHeader } from '../ProductHeader/ProductHeader.js
|
|
|
6
6
|
import { PriceStripe } from '../PriceStripe/PriceStripe.js';
|
|
7
7
|
import { ListItemContainer, ListLeft, ListImageContainer, ListImage, ItemInformationContainer, CheckboxContainer, ListRight } from './ListItem.styles.js';
|
|
8
8
|
import { EPriceSize, EPriceVariant } from '../PriceTag/PriceTag.types.js';
|
|
9
|
+
import { Fieldset } from '../Fieldset/Fieldset.js';
|
|
9
10
|
|
|
10
11
|
var EListItemAlignment;
|
|
11
12
|
(function (EListItemAlignment) {
|
|
@@ -31,7 +32,7 @@ function buildCheckboxContext(item) {
|
|
|
31
32
|
return "".concat(productPart).concat(pricePart).concat(quantityPart);
|
|
32
33
|
}
|
|
33
34
|
var ListItem = function (_a) {
|
|
34
|
-
var _b = _a.alignment, alignment = _b === void 0 ? EListItemAlignment.CENTER : _b, children = _a.children, checkboxes = _a.checkboxes, fallBackImage = _a.fallBackImage, imageAutoHeight = _a.imageAutoHeight, item = _a.item, isSmall = _a.isSmall, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.showPriceStripe, showPriceStripe = _d === void 0 ? false : _d, smallSkeleton = _a.smallSkeleton;
|
|
35
|
+
var _b = _a.alignment, alignment = _b === void 0 ? EListItemAlignment.CENTER : _b, children = _a.children, checkboxes = _a.checkboxes, fallBackImage = _a.fallBackImage, checkboxLegendLabel = _a.checkboxLegendLabel, imageAutoHeight = _a.imageAutoHeight, item = _a.item, isSmall = _a.isSmall, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.showPriceStripe, showPriceStripe = _d === void 0 ? false : _d, smallSkeleton = _a.smallSkeleton;
|
|
35
36
|
var checkboxContext = checkboxes && checkboxes.length > 0 && ((item === null || item === void 0 ? void 0 : item.name) || (item === null || item === void 0 ? void 0 : item.subtitle))
|
|
36
37
|
? buildCheckboxContext(item)
|
|
37
38
|
: '';
|
|
@@ -55,16 +56,18 @@ var ListItem = function (_a) {
|
|
|
55
56
|
checkboxes && checkboxes.length > 0 && (React.createElement(Skeleton, { height: 20, width: smallSkeleton ? 150 : 200, count: checkboxes.length, style: { marginTop: '8px' } })))) : (React.createElement(Fragment, null,
|
|
56
57
|
showPriceStripe && (React.createElement(PriceStripe, { size: EPriceSize.SMALL, variant: EPriceVariant.PRIO })),
|
|
57
58
|
React.createElement(ProductHeader, { location: EProductHeader.LIST_ITEM, subtitle: item === null || item === void 0 ? void 0 : item.subtitle, title: item === null || item === void 0 ? void 0 : item.name }),
|
|
58
|
-
checkboxes && checkboxes.length > 0 && (React.createElement(
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
59
|
+
checkboxes && checkboxes.length > 0 && (React.createElement(Fieldset, null,
|
|
60
|
+
checkboxLegendLabel && (React.createElement("legend", null, checkboxLegendLabel)),
|
|
61
|
+
React.createElement(CheckboxContainer, null, checkboxes.map(function (checkbox, index) {
|
|
62
|
+
var ariaLabel = checkboxContext
|
|
63
|
+
? "".concat(checkbox.label, ". ").concat(checkboxContext)
|
|
64
|
+
: checkbox.label;
|
|
65
|
+
return (React.createElement(Checkbox, { key: index, checked: checkbox.checked, disabled: checkbox.disabled, label: checkbox.label, name: checkbox.name, "aria-label": ariaLabel, onChange: function (e) {
|
|
66
|
+
if (checkbox.onChange) {
|
|
67
|
+
checkbox.onChange(e.target.checked);
|
|
68
|
+
}
|
|
69
|
+
}, value: checkbox.value, alignItems: "flex-start" }));
|
|
70
|
+
})))))),
|
|
68
71
|
(item === null || item === void 0 ? void 0 : item.secondaryDescription) && item.secondaryDescription)),
|
|
69
72
|
children && (React.createElement(ListRight, { alignment: alignment }, children))));
|
|
70
73
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -10,7 +10,7 @@ var ListLeft = styled.div(templateObject_3 || (templateObject_3 = __makeTemplate
|
|
|
10
10
|
var ListRight = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: ", ";\n justify-content: space-between;\n text-align: right;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: ", ";\n justify-content: space-between;\n text-align: right;\n"])), function (props) {
|
|
11
11
|
return props.alignment === EListItemAlignment.TOP ? 'flex-start' : 'center';
|
|
12
12
|
});
|
|
13
|
-
var ListImageContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n width: ", "px;\n height: ", "px;\n\n @media (max-width: ", "px) {\n width: ", "px;\n height: ", "px;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n width: ", "px;\n height: ", "px;\n\n @media (max-width: ", "px) {\n width: ", "px;\n height: ", "px;\n }\n"])), function (props) {
|
|
13
|
+
var ListImageContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-shrink: 0;\n width: ", "px;\n height: ", "px;\n\n @media (max-width: ", "px) {\n width: ", "px;\n height: ", "px;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-shrink: 0;\n width: ", "px;\n height: ", "px;\n\n @media (max-width: ", "px) {\n width: ", "px;\n height: ", "px;\n }\n"])), function (props) {
|
|
14
14
|
var _a, _b;
|
|
15
15
|
return (props === null || props === void 0 ? void 0 : props.isSmall)
|
|
16
16
|
? (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listImageMaxWidthSmall
|
|
@@ -29,7 +29,7 @@ var ListImage = styled.img(templateObject_6 || (templateObject_6 = __makeTemplat
|
|
|
29
29
|
? (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listImageMaxHeightSmall
|
|
30
30
|
: (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.listImageMaxHeight, "px");
|
|
31
31
|
});
|
|
32
|
-
var CheckboxContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n
|
|
32
|
+
var CheckboxContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n row-gap: ", "px;\n margin-top: ", "px;\n flex-wrap: wrap;\n column-gap: ", "px;\n"], ["\n display: flex;\n row-gap: ", "px;\n margin-top: ", "px;\n flex-wrap: wrap;\n column-gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, 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.spacings) === null || _a === void 0 ? void 0 : _a.md; });
|
|
33
33
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
34
34
|
|
|
35
35
|
export { CheckboxContainer, ItemInformationContainer, ListImage, ListImageContainer, ListItemContainer, ListLeft, ListRight };
|
|
@@ -29,7 +29,7 @@ var HeaderContainer = styled.div(templateObject_3 || (templateObject_3 = __makeT
|
|
|
29
29
|
return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.minimalHeaderMaxWidth;
|
|
30
30
|
});
|
|
31
31
|
var LogoContainer = styled.a(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"])));
|
|
32
|
-
var HeaderLink = styled.a(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: ", ";\n font-family: ", ";\n font-size: ", "px;\n text-decoration: underline;\n\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n"], ["\n color: ", ";\n font-family: ", ";\n font-size: ", "px;\n text-decoration: underline;\n\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n"])), function (_a) {
|
|
32
|
+
var HeaderLink = styled.a(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: ", ";\n font-family: ", ";\n font-size: ", "px;\n text-decoration: underline;\n text-align: right;\n\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n"], ["\n color: ", ";\n font-family: ", ";\n font-size: ", "px;\n text-decoration: underline;\n text-align: right;\n\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n"])), function (_a) {
|
|
33
33
|
var _b;
|
|
34
34
|
var theme = _a.theme;
|
|
35
35
|
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.brandBlue;
|
|
@@ -29,12 +29,13 @@ var BaseRadioListItemContainer = styled.div(templateObject_1 || (templateObject_
|
|
|
29
29
|
var BaseRadioItemLeftWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex: 5;\n align-items: flex-start;\n ", ";\n"], ["\n display: flex;\n flex: 5;\n align-items: flex-start;\n ", ";\n"])), function (props) { return props.flexGrow && "flex-grow: ".concat(props.flexGrow); });
|
|
30
30
|
var StyledH3 = styled(H3).attrs({ as: 'span' })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: ", ";\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"], ["\n cursor: ", ";\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"])), function (props) { return (props.isDisabled ? 'not-allowed' : 'pointer'); }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m1; }, function (props) {
|
|
31
31
|
var _a;
|
|
32
|
-
return props.isDisabled &&
|
|
32
|
+
return props.isDisabled &&
|
|
33
|
+
"\n color: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledDarkGray, ";\n text-decoration: line-through;\n ");
|
|
33
34
|
});
|
|
34
35
|
var RadioRightWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n"], ["\n display: flex;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
|
|
35
36
|
styled(BodyText)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: ", "px;\n color: ", ";\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"], ["\n font-size: ", "px;\n color: ", ";\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) {
|
|
36
37
|
return (props === null || props === void 0 ? void 0 : props.wrapMobile) &&
|
|
37
|
-
"\n
|
|
38
|
+
"\n text-align: left;\n ";
|
|
38
39
|
}, 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.typography) === null || _a === void 0 ? void 0 : _a.size.s3; });
|
|
39
40
|
var RadioFlex = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n gap: ", "px;\n ", "\n"], ["\n display: flex;\n gap: ", "px;\n ", "\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) {
|
|
40
41
|
var _a;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioListItem.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 DialogContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n border-radius: ", "px;\n color: ", ";\n display: flex;\n align-items: flex-start;\n gap: ", "px;\n font-size: ", "px;\n padding: ", "px;\n position: absolute;\n\n ", "\n"], ["\n background: ", ";\n border-radius: ", "px;\n color: ", ";\n display: flex;\n align-items: flex-start;\n gap: ", "px;\n font-size: ", "px;\n padding: ", "px;\n position: absolute;\n\n ", "\n"])), function (_a) {
|
|
4
|
+
var DialogContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n border-radius: ", "px;\n color: ", ";\n display: flex;\n align-items: flex-start;\n gap: ", "px;\n font-size: ", "px;\n padding: ", "px;\n position: absolute;\n z-index: ", ";\n\n ", "\n"], ["\n background: ", ";\n border-radius: ", "px;\n color: ", ";\n display: flex;\n align-items: flex-start;\n gap: ", "px;\n font-size: ", "px;\n padding: ", "px;\n position: absolute;\n z-index: ", ";\n\n ", "\n"])), function (_a) {
|
|
5
5
|
var _b;
|
|
6
6
|
var theme = _a.theme;
|
|
7
7
|
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.black;
|
|
@@ -25,6 +25,10 @@ var DialogContainer = styled.div(templateObject_1 || (templateObject_1 = __makeT
|
|
|
25
25
|
var _b;
|
|
26
26
|
var theme = _a.theme;
|
|
27
27
|
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs2;
|
|
28
|
+
}, function (_a) {
|
|
29
|
+
var _b;
|
|
30
|
+
var theme = _a.theme;
|
|
31
|
+
return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.zIndex.low;
|
|
28
32
|
}, function (_a) {
|
|
29
33
|
var _b, _c;
|
|
30
34
|
var onBottom = _a.onBottom, theme = _a.theme;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolTipDialog.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToolTipDialog.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.16.0",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"@citygross/design-tokens": "^0.5.0",
|
|
68
68
|
"@citygross/icons": "^0.3.4",
|
|
69
69
|
"@citygross/react-use-bg-wizard": "^0.0.13",
|
|
70
|
-
"@citygross/typography": "^0.0.
|
|
70
|
+
"@citygross/typography": "^0.0.122",
|
|
71
71
|
"@citygross/utils": "^0.0.46",
|
|
72
72
|
"moment": "^2.29.1",
|
|
73
73
|
"motion": "^12.34.3",
|
|
@@ -75,5 +75,5 @@
|
|
|
75
75
|
"react-slick": "^0.30.1",
|
|
76
76
|
"slick-carousel": "^1.8.1"
|
|
77
77
|
},
|
|
78
|
-
"gitHead": "
|
|
78
|
+
"gitHead": "680db5bc2f749bb2efe1d1dcf34f54b32efa1a04"
|
|
79
79
|
}
|