@citygross/components 0.14.11 → 0.14.13

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.
Files changed (21) hide show
  1. package/build/@types/components/ListItem/ListItem.d.ts +4 -0
  2. package/build/@types/components/RadioListItem/RadioListItem.d.ts +1 -2
  3. package/build/cjs/components/src/components/CartSummary/CartSummary.js +19 -21
  4. package/build/cjs/components/src/components/CartSummary/CartSummary.js.map +1 -1
  5. package/build/cjs/components/src/components/CartSummary/CartSummary.styles.js +1 -1
  6. package/build/cjs/components/src/components/CgButton/CgButton.styles.js +1 -1
  7. package/build/cjs/components/src/components/ListItem/ListItem.js +35 -8
  8. package/build/cjs/components/src/components/ListItem/ListItem.js.map +1 -1
  9. package/build/cjs/components/src/components/ListItem/ListItem.styles.js +2 -2
  10. package/build/cjs/components/src/components/RadioListItem/RadioListItem.js +2 -2
  11. package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js +2 -2
  12. package/build/es/components/src/components/CartSummary/CartSummary.js +20 -22
  13. package/build/es/components/src/components/CartSummary/CartSummary.js.map +1 -1
  14. package/build/es/components/src/components/CartSummary/CartSummary.styles.js +1 -1
  15. package/build/es/components/src/components/CgButton/CgButton.styles.js +1 -1
  16. package/build/es/components/src/components/ListItem/ListItem.js +35 -8
  17. package/build/es/components/src/components/ListItem/ListItem.js.map +1 -1
  18. package/build/es/components/src/components/ListItem/ListItem.styles.js +2 -2
  19. package/build/es/components/src/components/RadioListItem/RadioListItem.js +2 -2
  20. package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js +2 -2
  21. package/package.json +3 -3
package/build/@types/components/ListItem/ListItem.d.ts CHANGED
@@ -1,7 +1,11 @@
1
1
  import React from 'react';
2
2
  export declare type TItem = {
3
+ amount?: number;
3
4
  image?: string;
4
5
  name?: string;
6
+ quantity?: number | {
7
+ value: number;
8
+ };
5
9
  secondaryDescription?: React.ReactNode;
6
10
  subtitle?: string;
7
11
  };
package/build/@types/components/RadioListItem/RadioListItem.d.ts CHANGED
@@ -12,6 +12,5 @@ export declare type TRadioListItemProps = styles.TBaseRadioItemInputWrapper & {
12
12
  wrapMobile?: boolean;
13
13
  children?: JSX.Element;
14
14
  additionalInfo?: JSX.Element;
15
- ariaLabel?: string;
16
15
  };
17
- export declare function RadioListItem({ onClick, selected, flexGrow, isDisabled, transparent, noPadding, label, value, wrapMobile, additionalInfo, children, ariaLabel }: TRadioListItemProps): React.JSX.Element;
16
+ export declare function RadioListItem({ onClick, selected, flexGrow, isDisabled, transparent, noPadding, label, value, wrapMobile, additionalInfo, children, }: TRadioListItemProps): React.JSX.Element;
package/build/cjs/components/src/components/CartSummary/CartSummary.js CHANGED
@@ -33,8 +33,8 @@ var calculateSummaryLine = function (items) {
33
33
  return sumOfItems;
34
34
  };
35
35
  function CartSummary(_a) {
36
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
37
- var _u = _a.saveLabel, saveLabel = _u === void 0 ? 'Varav rabatt' : _u, _v = _a.totalLabel, totalLabel = _v === void 0 ? 'Totalt' : _v, _w = _a.itemsLabel, itemsLabel = _w === void 0 ? 'Varor' : _w, cartSummary = _tslib.__rest(_a, ["saveLabel", "totalLabel", "itemsLabel"]);
36
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
37
+ var _q = _a.saveLabel, saveLabel = _q === void 0 ? 'Varav rabatt' : _q, _r = _a.totalLabel, totalLabel = _r === void 0 ? 'Totalt' : _r, _s = _a.itemsLabel, itemsLabel = _s === void 0 ? 'Varor' : _s, cartSummary = _tslib.__rest(_a, ["saveLabel", "totalLabel", "itemsLabel"]);
38
38
  var charges = (_b = cartSummary.charges) !== null && _b !== void 0 ? _b : [];
39
39
  var bags = (_c = cartSummary.bags) !== null && _c !== void 0 ? _c : [];
40
40
  var groceries = (_d = cartSummary.groceries) !== null && _d !== void 0 ? _d : [];
@@ -71,46 +71,44 @@ function CartSummary(_a) {
71
71
  React__default["default"].createElement(ToolTipButton.ToolTipButton, { "aria-expanded": infoOpen, "aria-label": charge.tooltipAriaLabel || "Mer information om ".concat(chargeName), "aria-describedby": infoOpen ? tooltipId : undefined, onClick: toggleInfoOpen }),
72
72
  infoOpen && (React__default["default"].createElement(ToolTipDialog.ToolTipDialog, { id: tooltipId, toggle: toggleInfoOpen }, charge.info))))),
73
73
  React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
74
- charge.cancelledAmount > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_c = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _c === void 0 ? void 0 : _c.dark, "aria-label": "Original price ".concat(utils.formatPrice(charge.cancelledAmount)) }, utils.formatPrice(charge.cancelledAmount))),
75
- React__default["default"].createElement(typography.BodyText, { "aria-label": "".concat(chargeName, " ").concat(utils.formatPrice(charge.amount)) }, utils.formatPrice(charge.amount)))));
74
+ charge.cancelledAmount > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_c = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _c === void 0 ? void 0 : _c.dark }, utils.formatPrice(charge.cancelledAmount))),
75
+ React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(charge.amount)))));
76
76
  };
77
77
  return (React__default["default"].createElement(CartSummary_styles.CartSummaryContainer, { role: "region" },
78
78
  React__default["default"].createElement(CartSummary_styles.CartPaymentContainer, null,
79
79
  cartSummary.title && (React__default["default"].createElement(CartSummary_styles.CartSummaryTitle, null,
80
- React__default["default"].createElement(typography.H3, null, cartSummary.title),
80
+ React__default["default"].createElement(typography.BodyText, { fontWeight: "semiBold" }, cartSummary.title),
81
81
  React__default["default"].createElement(typography.BodyText, null, cartSummary.subtitle))),
82
82
  React__default["default"].createElement(CartSummary_styles.CartSummaryContent, { title: cartSummary.title, role: "list", "aria-label": "Order summary" },
83
83
  ((groceries === null || groceries === void 0 ? void 0 : groceries.length) > 0 || (cateredMeals === null || cateredMeals === void 0 ? void 0 : cateredMeals.length) > 0) && (React__default["default"].createElement(CartSummary_styles.CartLine, { role: "listitem" },
84
84
  React__default["default"].createElement(typography.BodyText, null,
85
85
  itemsLabel,
86
- React__default["default"].createElement(CartSummary_styles.QuantitySpan, { "aria-label": "".concat(((_h = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.quantity) !== null && _h !== void 0 ? _h : 0) +
87
- ((_j = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.quantity) !== null && _j !== void 0 ? _j : 0), " items") },
86
+ React__default["default"].createElement(CartSummary_styles.QuantitySpan, null,
88
87
  "\u00A0(",
89
- ((_k = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.quantity) !== null && _k !== void 0 ? _k : 0) +
90
- ((_l = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.quantity) !== null && _l !== void 0 ? _l : 0),
88
+ ((_h = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.quantity) !== null && _h !== void 0 ? _h : 0) +
89
+ ((_j = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.quantity) !== null && _j !== void 0 ? _j : 0),
91
90
  ")")),
92
91
  React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
93
- (sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_m = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _m === void 0 ? void 0 : _m.dark, "aria-label": "Original price ".concat(utils.formatPrice(((_o = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) !== null && _o !== void 0 ? _o : 0) +
94
- ((_p = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.cancelledAmount) !== null && _p !== void 0 ? _p : 0))) }, utils.formatPrice(((_q = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) !== null && _q !== void 0 ? _q : 0) +
95
- ((_r = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.cancelledAmount) !== null && _r !== void 0 ? _r : 0)))),
96
- React__default["default"].createElement(typography.BodyText, { "aria-label": "".concat(itemsLabel, " ").concat(utils.formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount)) }, utils.formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount))))),
92
+ (sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_k = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _k === void 0 ? void 0 : _k.dark }, utils.formatPrice(((_l = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) !== null && _l !== void 0 ? _l : 0) +
93
+ ((_m = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.cancelledAmount) !== null && _m !== void 0 ? _m : 0)))),
94
+ React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount))))),
97
95
  bags.length > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, { role: "listitem" },
98
96
  React__default["default"].createElement(typography.BodyText, null,
99
97
  "Matkassar",
100
- React__default["default"].createElement(CartSummary_styles.QuantitySpan, { "aria-label": "".concat(sumOfBags.quantity, " bags") },
98
+ React__default["default"].createElement(CartSummary_styles.QuantitySpan, null,
101
99
  "(",
102
100
  sumOfBags.quantity,
103
101
  ")")),
104
102
  React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
105
- sumOfBags.cancelledAmount > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_s = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _s === void 0 ? void 0 : _s.dark, "aria-label": "Original price ".concat(utils.formatPrice(sumOfBags.cancelledAmount)) }, utils.formatPrice(sumOfBags.cancelledAmount))),
106
- React__default["default"].createElement(typography.BodyText, { fontWeight: "semiBold", "aria-label": "Matkassar ".concat(utils.formatPrice(sumOfBags.amount)) }, utils.formatPrice(sumOfBags.amount))))), charges === null || charges === void 0 ? void 0 :
103
+ sumOfBags.cancelledAmount > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_o = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _o === void 0 ? void 0 : _o.dark }, utils.formatPrice(sumOfBags.cancelledAmount))),
104
+ React__default["default"].createElement(typography.BodyText, { fontWeight: "semiBold" }, utils.formatPrice(sumOfBags.amount))))), charges === null || charges === void 0 ? void 0 :
107
105
  charges.map(function (charge) { return (React__default["default"].createElement(ChargeLine, { key: charge.name, charge: charge })); }),
108
- React__default["default"].createElement(CartSummary_styles.TotalLine, { role: "listitem", "aria-label": "".concat(totalLabel, " ").concat(utils.formatPrice(cartSummary.totalAmount)) },
109
- React__default["default"].createElement(typography.H3, { fontWeight: "semiBold" }, totalLabel),
110
- React__default["default"].createElement(typography.H3, { fontWeight: "semiBold" }, utils.formatPrice(cartSummary.totalAmount))),
111
- cartSummary.totalDiscount > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, { role: "listitem", "aria-label": "".concat(saveLabel, " ").concat(utils.formatPrice(cartSummary.totalDiscount)) },
106
+ React__default["default"].createElement(CartSummary_styles.TotalLine, { role: "listitem" },
107
+ React__default["default"].createElement(typography.BodyText, { fontWeight: "semiBold" }, totalLabel),
108
+ React__default["default"].createElement(typography.BodyText, { fontWeight: "semiBold" }, utils.formatPrice(cartSummary.totalAmount))),
109
+ cartSummary.totalDiscount > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, { role: "listitem" },
112
110
  React__default["default"].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL }, saveLabel),
113
- React__default["default"].createElement(typography.BodyText, { color: (_t = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _t === void 0 ? void 0 : _t.alertRed, size: typography.TextTypes.TextSize.SMALL, "aria-label": "Discount ".concat(utils.formatPrice(cartSummary.totalDiscount)) }, utils.formatPrice(cartSummary.totalDiscount))))))));
111
+ React__default["default"].createElement(typography.BodyText, { color: (_p = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _p === void 0 ? void 0 : _p.alertRed, size: typography.TextTypes.TextSize.SMALL }, utils.formatPrice(cartSummary.totalDiscount))))))));
114
112
  }
115
113
 
116
114
  exports.CartSummary = CartSummary;
package/build/cjs/components/src/components/CartSummary/CartSummary.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CartSummary.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"CartSummary.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/CartSummary/CartSummary.styles.js CHANGED
@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
10
10
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
11
 
12
12
  var CartSummaryContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n &:focus {\n outline-offset: ", "px;\n }\n &:focus:not(:focus-visible) {\n outline: none;\n }\n"], ["\n &:focus {\n outline-offset: ", "px;\n }\n &:focus:not(:focus-visible) {\n outline: none;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; });
13
- var CartPaymentContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n background: ", ";\n"], ["\n background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; });
13
+ var CartPaymentContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n background: ", ";\n overflow-wrap: break-word;\n word-break: break-word;\n"], ["\n background: ", ";\n overflow-wrap: break-word;\n word-break: break-word;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; });
14
14
  var CartSummaryContent = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n ", ";\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"], ["\n ", ";\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"])), function (props) { var _a; return props.title && "padding-top: ".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm, "px"); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
15
15
  var CartLine = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n text-decoration: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n text-decoration: ", ";\n"])), function (props) { return props.cancelled && 'line-through'; });
16
16
  var AmountWrapper = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n display: flex;\n gap: ", "px;\n"], ["\n display: flex;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
package/build/cjs/components/src/components/CgButton/CgButton.styles.js CHANGED
@@ -78,7 +78,7 @@ var ButtonStyle = styled__default["default"].button(templateObject_2 || (templat
78
78
  }, function (_a) {
79
79
  var _b;
80
80
  var theme = _a.theme;
81
- return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.placeholder;
81
+ return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.disabledDarkGray;
82
82
  });
83
83
  var ChildrenContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n opacity: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n opacity: ", ";\n"])), function (_a) {
84
84
  var _b;
package/build/cjs/components/src/components/ListItem/ListItem.js CHANGED
@@ -4,11 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
6
  var Skeleton = require('react-loading-skeleton');
7
- var ListItem_styles = require('./ListItem.styles.js');
7
+ var utils = require('@citygross/utils');
8
+ var Checkbox = require('../FormElements/Checkbox/Checkbox.js');
8
9
  var ProductHeader = require('../ProductHeader/ProductHeader.js');
9
- var PriceTag_types = require('../PriceTag/PriceTag.types.js');
10
10
  var PriceStripe = require('../PriceStripe/PriceStripe.js');
11
- var Checkbox = require('../FormElements/Checkbox/Checkbox.js');
11
+ var ListItem_styles = require('./ListItem.styles.js');
12
+ var PriceTag_types = require('../PriceTag/PriceTag.types.js');
12
13
 
13
14
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
15
 
@@ -20,8 +21,29 @@ exports.EListItemAlignment = void 0;
20
21
  EListItemAlignment["CENTER"] = "center";
21
22
  EListItemAlignment["TOP"] = "flex-start";
22
23
  })(exports.EListItemAlignment || (exports.EListItemAlignment = {}));
24
+ function getQuantityValue(quantity) {
25
+ if (quantity === undefined)
26
+ return 1;
27
+ return typeof quantity === 'object' && quantity !== null && 'value' in quantity
28
+ ? quantity.value
29
+ : Number(quantity);
30
+ }
31
+ function buildCheckboxContext(item) {
32
+ var parts = [item === null || item === void 0 ? void 0 : item.name, item === null || item === void 0 ? void 0 : item.subtitle].filter(Boolean);
33
+ if (parts.length === 0)
34
+ return '';
35
+ var productPart = "i varan ".concat(parts.join(', '));
36
+ var amount = item === null || item === void 0 ? void 0 : item.amount;
37
+ var pricePart = amount !== undefined ? " till ".concat(utils.formatPrice(amount)) : '';
38
+ var quantity = getQuantityValue(item === null || item === void 0 ? void 0 : item.quantity);
39
+ var quantityPart = quantity === 1 ? ', en styck' : ", ".concat(quantity, " styck");
40
+ return "".concat(productPart).concat(pricePart).concat(quantityPart);
41
+ }
23
42
  var ListItem = function (_a) {
24
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 checkboxContext = checkboxes && checkboxes.length > 0 && ((item === null || item === void 0 ? void 0 : item.name) || (item === null || item === void 0 ? void 0 : item.subtitle))
45
+ ? buildCheckboxContext(item)
46
+ : '';
25
47
  return (React__default["default"].createElement(ListItem_styles.ListItemContainer, null,
26
48
  React__default["default"].createElement(ListItem_styles.ListLeft, { alignment: alignment },
27
49
  React__default["default"].createElement(ListItem_styles.ListImageContainer, { isSmall: isSmall },
@@ -42,11 +64,16 @@ var ListItem = function (_a) {
42
64
  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,
43
65
  showPriceStripe && (React__default["default"].createElement(PriceStripe.PriceStripe, { size: PriceTag_types.EPriceSize.SMALL, variant: PriceTag_types.EPriceVariant.PRIO })),
44
66
  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 }),
45
- checkboxes && checkboxes.length > 0 && (React__default["default"].createElement(ListItem_styles.CheckboxContainer, null, checkboxes.map(function (checkbox, index) { return (React__default["default"].createElement(Checkbox.Checkbox, { checked: checkbox.checked, disabled: checkbox.disabled, key: index, label: checkbox.label, name: checkbox.name, onChange: function (e) {
46
- if (checkbox.onChange) {
47
- checkbox.onChange(e.target.checked);
48
- }
49
- }, value: checkbox.value })); }))))),
67
+ checkboxes && checkboxes.length > 0 && (React__default["default"].createElement(ListItem_styles.CheckboxContainer, null, checkboxes.map(function (checkbox, index) {
68
+ var ariaLabel = checkboxContext
69
+ ? "".concat(checkbox.label, ". ").concat(checkboxContext)
70
+ : checkbox.label;
71
+ 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) {
72
+ if (checkbox.onChange) {
73
+ checkbox.onChange(e.target.checked);
74
+ }
75
+ }, value: checkbox.value }));
76
+ }))))),
50
77
  (item === null || item === void 0 ? void 0 : item.secondaryDescription) && item.secondaryDescription)),
51
78
  children && (React__default["default"].createElement(ListItem_styles.ListRight, { alignment: alignment }, children))));
52
79
  };
package/build/cjs/components/src/components/ListItem/ListItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/ListItem/ListItem.styles.js CHANGED
@@ -10,9 +10,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
10
10
 
11
11
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
12
12
 
13
- var ItemInformationContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n"])));
13
+ var ItemInformationContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n overflow-wrap: break-word;\n word-break: break-word;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n overflow-wrap: break-word;\n word-break: break-word;\n"])));
14
14
  var ListItemContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n gap: ", "px;\n\n p {\n padding: 1px 0px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n }\n\n &:focus {\n outline-offset: ", "px;\n }\n &:focus:not(:focus-visible) {\n outline: none;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n gap: ", "px;\n\n p {\n padding: 1px 0px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n }\n\n &:focus {\n outline-offset: ", "px;\n }\n &:focus:not(:focus-visible) {\n outline: none;\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; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; });
15
- var ListLeft = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: ", ";\n gap: ", "px;\n\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n } \n"], ["\n display: flex;\n align-items: ", ";\n gap: ", "px;\n\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n } \n"])), function (props) {
15
+ var ListLeft = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: ", ";\n gap: ", "px;\n\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n }\n"], ["\n display: flex;\n align-items: ", ";\n gap: ", "px;\n\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n }\n"])), function (props) {
16
16
  return props.alignment === ListItem.EListItemAlignment.TOP ? 'inherit' : 'center';
17
17
  }, 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; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listItemFlexGap; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
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) {
package/build/cjs/components/src/components/RadioListItem/RadioListItem.js CHANGED
@@ -10,8 +10,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
10
10
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
11
11
 
12
12
  function RadioListItem(_a) {
13
- var onClick = _a.onClick, selected = _a.selected, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children, ariaLabel = _a.ariaLabel;
14
- return (React__default["default"].createElement(RadioListItem_styles.BaseRadioListItemContainer, { tabIndex: isDisabled ? -1 : 0, role: "radio", "aria-checked": selected, "aria-disabled": isDisabled, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label, "aria-live": "polite", transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onKeyDown: function (event) {
13
+ var onClick = _a.onClick, selected = _a.selected, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children;
14
+ return (React__default["default"].createElement(RadioListItem_styles.BaseRadioListItemContainer, { tabIndex: isDisabled ? -1 : 0, role: "radio", "aria-checked": selected, "aria-disabled": isDisabled, "aria-live": "polite", transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onKeyDown: function (event) {
15
15
  if ((event.key === 'Enter' || event.key === ' ') && !isDisabled) {
16
16
  event.preventDefault();
17
17
  onClick(value);
package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js CHANGED
@@ -35,9 +35,9 @@ var BaseRadioListItemContainer = styled__default["default"].div(templateObject_1
35
35
  "background: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter));
36
36
  });
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
- var StyledH3 = styled__default["default"](typography.H3).attrs({ as: 'label' })(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"], ["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m1; }, function (props) {
38
+ var StyledH3 = styled__default["default"](typography.H3).attrs({ as: 'span' })(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"], ["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"])), 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 && "\n color: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark, ";\n text-decoration: line-through;\n ");
40
+ return props.isDisabled && "\n color: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledDarkGray, ";\n text-decoration: line-through;\n ");
41
41
  });
42
42
  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
43
  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) {
package/build/es/components/src/components/CartSummary/CartSummary.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { __rest } from '../../../../_virtual/_tslib.js';
2
2
  import React, { useState, Fragment } from 'react';
3
- import { H3, BodyText, TextTypes } from '@citygross/typography';
3
+ import { BodyText, TextTypes } from '@citygross/typography';
4
4
  import { formatPrice } from '@citygross/utils';
5
5
  import { theme as theme_1 } from '../../../../design-tokens/build/index.js';
6
6
  import { ToolTipButton } from '../CgButton/ToolTipButton/ToolTipButton.js';
@@ -25,8 +25,8 @@ var calculateSummaryLine = function (items) {
25
25
  return sumOfItems;
26
26
  };
27
27
  function CartSummary(_a) {
28
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
29
- var _u = _a.saveLabel, saveLabel = _u === void 0 ? 'Varav rabatt' : _u, _v = _a.totalLabel, totalLabel = _v === void 0 ? 'Totalt' : _v, _w = _a.itemsLabel, itemsLabel = _w === void 0 ? 'Varor' : _w, cartSummary = __rest(_a, ["saveLabel", "totalLabel", "itemsLabel"]);
28
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
29
+ var _q = _a.saveLabel, saveLabel = _q === void 0 ? 'Varav rabatt' : _q, _r = _a.totalLabel, totalLabel = _r === void 0 ? 'Totalt' : _r, _s = _a.itemsLabel, itemsLabel = _s === void 0 ? 'Varor' : _s, cartSummary = __rest(_a, ["saveLabel", "totalLabel", "itemsLabel"]);
30
30
  var charges = (_b = cartSummary.charges) !== null && _b !== void 0 ? _b : [];
31
31
  var bags = (_c = cartSummary.bags) !== null && _c !== void 0 ? _c : [];
32
32
  var groceries = (_d = cartSummary.groceries) !== null && _d !== void 0 ? _d : [];
@@ -63,46 +63,44 @@ function CartSummary(_a) {
63
63
  React.createElement(ToolTipButton, { "aria-expanded": infoOpen, "aria-label": charge.tooltipAriaLabel || "Mer information om ".concat(chargeName), "aria-describedby": infoOpen ? tooltipId : undefined, onClick: toggleInfoOpen }),
64
64
  infoOpen && (React.createElement(ToolTipDialog, { id: tooltipId, toggle: toggleInfoOpen }, charge.info))))),
65
65
  React.createElement(AmountWrapper, null,
66
- charge.cancelledAmount > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_c = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _c === void 0 ? void 0 : _c.dark, "aria-label": "Original price ".concat(formatPrice(charge.cancelledAmount)) }, formatPrice(charge.cancelledAmount))),
67
- React.createElement(BodyText, { "aria-label": "".concat(chargeName, " ").concat(formatPrice(charge.amount)) }, formatPrice(charge.amount)))));
66
+ charge.cancelledAmount > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_c = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _c === void 0 ? void 0 : _c.dark }, formatPrice(charge.cancelledAmount))),
67
+ React.createElement(BodyText, null, formatPrice(charge.amount)))));
68
68
  };
69
69
  return (React.createElement(CartSummaryContainer, { role: "region" },
70
70
  React.createElement(CartPaymentContainer, null,
71
71
  cartSummary.title && (React.createElement(CartSummaryTitle, null,
72
- React.createElement(H3, null, cartSummary.title),
72
+ React.createElement(BodyText, { fontWeight: "semiBold" }, cartSummary.title),
73
73
  React.createElement(BodyText, null, cartSummary.subtitle))),
74
74
  React.createElement(CartSummaryContent, { title: cartSummary.title, role: "list", "aria-label": "Order summary" },
75
75
  ((groceries === null || groceries === void 0 ? void 0 : groceries.length) > 0 || (cateredMeals === null || cateredMeals === void 0 ? void 0 : cateredMeals.length) > 0) && (React.createElement(CartLine, { role: "listitem" },
76
76
  React.createElement(BodyText, null,
77
77
  itemsLabel,
78
- React.createElement(QuantitySpan, { "aria-label": "".concat(((_h = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.quantity) !== null && _h !== void 0 ? _h : 0) +
79
- ((_j = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.quantity) !== null && _j !== void 0 ? _j : 0), " items") },
78
+ React.createElement(QuantitySpan, null,
80
79
  "\u00A0(",
81
- ((_k = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.quantity) !== null && _k !== void 0 ? _k : 0) +
82
- ((_l = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.quantity) !== null && _l !== void 0 ? _l : 0),
80
+ ((_h = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.quantity) !== null && _h !== void 0 ? _h : 0) +
81
+ ((_j = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.quantity) !== null && _j !== void 0 ? _j : 0),
83
82
  ")")),
84
83
  React.createElement(AmountWrapper, null,
85
- (sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_m = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _m === void 0 ? void 0 : _m.dark, "aria-label": "Original price ".concat(formatPrice(((_o = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) !== null && _o !== void 0 ? _o : 0) +
86
- ((_p = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.cancelledAmount) !== null && _p !== void 0 ? _p : 0))) }, formatPrice(((_q = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) !== null && _q !== void 0 ? _q : 0) +
87
- ((_r = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.cancelledAmount) !== null && _r !== void 0 ? _r : 0)))),
88
- React.createElement(BodyText, { "aria-label": "".concat(itemsLabel, " ").concat(formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount)) }, formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount))))),
84
+ (sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_k = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _k === void 0 ? void 0 : _k.dark }, formatPrice(((_l = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) !== null && _l !== void 0 ? _l : 0) +
85
+ ((_m = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.cancelledAmount) !== null && _m !== void 0 ? _m : 0)))),
86
+ React.createElement(BodyText, null, formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount))))),
89
87
  bags.length > 0 && (React.createElement(CartLine, { role: "listitem" },
90
88
  React.createElement(BodyText, null,
91
89
  "Matkassar",
92
- React.createElement(QuantitySpan, { "aria-label": "".concat(sumOfBags.quantity, " bags") },
90
+ React.createElement(QuantitySpan, null,
93
91
  "(",
94
92
  sumOfBags.quantity,
95
93
  ")")),
96
94
  React.createElement(AmountWrapper, null,
97
- sumOfBags.cancelledAmount > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_s = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _s === void 0 ? void 0 : _s.dark, "aria-label": "Original price ".concat(formatPrice(sumOfBags.cancelledAmount)) }, formatPrice(sumOfBags.cancelledAmount))),
98
- React.createElement(BodyText, { fontWeight: "semiBold", "aria-label": "Matkassar ".concat(formatPrice(sumOfBags.amount)) }, formatPrice(sumOfBags.amount))))), charges === null || charges === void 0 ? void 0 :
95
+ sumOfBags.cancelledAmount > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_o = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _o === void 0 ? void 0 : _o.dark }, formatPrice(sumOfBags.cancelledAmount))),
96
+ React.createElement(BodyText, { fontWeight: "semiBold" }, formatPrice(sumOfBags.amount))))), charges === null || charges === void 0 ? void 0 :
99
97
  charges.map(function (charge) { return (React.createElement(ChargeLine, { key: charge.name, charge: charge })); }),
100
- React.createElement(TotalLine, { role: "listitem", "aria-label": "".concat(totalLabel, " ").concat(formatPrice(cartSummary.totalAmount)) },
101
- React.createElement(H3, { fontWeight: "semiBold" }, totalLabel),
102
- React.createElement(H3, { fontWeight: "semiBold" }, formatPrice(cartSummary.totalAmount))),
103
- cartSummary.totalDiscount > 0 && (React.createElement(CartLine, { role: "listitem", "aria-label": "".concat(saveLabel, " ").concat(formatPrice(cartSummary.totalDiscount)) },
98
+ React.createElement(TotalLine, { role: "listitem" },
99
+ React.createElement(BodyText, { fontWeight: "semiBold" }, totalLabel),
100
+ React.createElement(BodyText, { fontWeight: "semiBold" }, formatPrice(cartSummary.totalAmount))),
101
+ cartSummary.totalDiscount > 0 && (React.createElement(CartLine, { role: "listitem" },
104
102
  React.createElement(BodyText, { size: TextTypes.TextSize.SMALL }, saveLabel),
105
- React.createElement(BodyText, { color: (_t = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _t === void 0 ? void 0 : _t.alertRed, size: TextTypes.TextSize.SMALL, "aria-label": "Discount ".concat(formatPrice(cartSummary.totalDiscount)) }, formatPrice(cartSummary.totalDiscount))))))));
103
+ React.createElement(BodyText, { color: (_p = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _p === void 0 ? void 0 : _p.alertRed, size: TextTypes.TextSize.SMALL }, formatPrice(cartSummary.totalDiscount))))))));
106
104
  }
107
105
 
108
106
  export { CartSummary };
package/build/es/components/src/components/CartSummary/CartSummary.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CartSummary.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"CartSummary.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/CartSummary/CartSummary.styles.js CHANGED
@@ -2,7 +2,7 @@ import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
2
2
  import styled from 'styled-components';
3
3
 
4
4
  var CartSummaryContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &:focus {\n outline-offset: ", "px;\n }\n &:focus:not(:focus-visible) {\n outline: none;\n }\n"], ["\n &:focus {\n outline-offset: ", "px;\n }\n &:focus:not(:focus-visible) {\n outline: none;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; });
5
- var CartPaymentContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n"], ["\n background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; });
5
+ var CartPaymentContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n overflow-wrap: break-word;\n word-break: break-word;\n"], ["\n background: ", ";\n overflow-wrap: break-word;\n word-break: break-word;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; });
6
6
  var CartSummaryContent = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"], ["\n ", ";\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"])), function (props) { var _a; return props.title && "padding-top: ".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm, "px"); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
7
7
  var CartLine = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n text-decoration: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n text-decoration: ", ";\n"])), function (props) { return props.cancelled && 'line-through'; });
8
8
  var AmountWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n gap: ", "px;\n"], ["\n display: flex;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
package/build/es/components/src/components/CgButton/CgButton.styles.js CHANGED
@@ -70,7 +70,7 @@ var ButtonStyle = styled.button(templateObject_2 || (templateObject_2 = __makeTe
70
70
  }, function (_a) {
71
71
  var _b;
72
72
  var theme = _a.theme;
73
- return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.placeholder;
73
+ return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.disabledDarkGray;
74
74
  });
75
75
  var ChildrenContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n opacity: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n opacity: ", ";\n"])), function (_a) {
76
76
  var _b;
package/build/es/components/src/components/ListItem/ListItem.js CHANGED
@@ -1,18 +1,40 @@
1
1
  import React, { Fragment } from 'react';
2
2
  import Skeleton from 'react-loading-skeleton';
3
- import { ListItemContainer, ListLeft, ListImageContainer, ListImage, ItemInformationContainer, CheckboxContainer, ListRight } from './ListItem.styles.js';
3
+ import { formatPrice } from '@citygross/utils';
4
+ import { Checkbox } from '../FormElements/Checkbox/Checkbox.js';
4
5
  import { ProductHeader, EProductHeader } from '../ProductHeader/ProductHeader.js';
5
- import { EPriceSize, EPriceVariant } from '../PriceTag/PriceTag.types.js';
6
6
  import { PriceStripe } from '../PriceStripe/PriceStripe.js';
7
- import { Checkbox } from '../FormElements/Checkbox/Checkbox.js';
7
+ import { ListItemContainer, ListLeft, ListImageContainer, ListImage, ItemInformationContainer, CheckboxContainer, ListRight } from './ListItem.styles.js';
8
+ import { EPriceSize, EPriceVariant } from '../PriceTag/PriceTag.types.js';
8
9
 
9
10
  var EListItemAlignment;
10
11
  (function (EListItemAlignment) {
11
12
  EListItemAlignment["CENTER"] = "center";
12
13
  EListItemAlignment["TOP"] = "flex-start";
13
14
  })(EListItemAlignment || (EListItemAlignment = {}));
15
+ function getQuantityValue(quantity) {
16
+ if (quantity === undefined)
17
+ return 1;
18
+ return typeof quantity === 'object' && quantity !== null && 'value' in quantity
19
+ ? quantity.value
20
+ : Number(quantity);
21
+ }
22
+ function buildCheckboxContext(item) {
23
+ var parts = [item === null || item === void 0 ? void 0 : item.name, item === null || item === void 0 ? void 0 : item.subtitle].filter(Boolean);
24
+ if (parts.length === 0)
25
+ return '';
26
+ var productPart = "i varan ".concat(parts.join(', '));
27
+ var amount = item === null || item === void 0 ? void 0 : item.amount;
28
+ var pricePart = amount !== undefined ? " till ".concat(formatPrice(amount)) : '';
29
+ var quantity = getQuantityValue(item === null || item === void 0 ? void 0 : item.quantity);
30
+ var quantityPart = quantity === 1 ? ', en styck' : ", ".concat(quantity, " styck");
31
+ return "".concat(productPart).concat(pricePart).concat(quantityPart);
32
+ }
14
33
  var ListItem = function (_a) {
15
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 checkboxContext = checkboxes && checkboxes.length > 0 && ((item === null || item === void 0 ? void 0 : item.name) || (item === null || item === void 0 ? void 0 : item.subtitle))
36
+ ? buildCheckboxContext(item)
37
+ : '';
16
38
  return (React.createElement(ListItemContainer, null,
17
39
  React.createElement(ListLeft, { alignment: alignment },
18
40
  React.createElement(ListImageContainer, { isSmall: isSmall },
@@ -33,11 +55,16 @@ var ListItem = function (_a) {
33
55
  checkboxes && checkboxes.length > 0 && (React.createElement(Skeleton, { height: 20, width: smallSkeleton ? 150 : 200, count: checkboxes.length, style: { marginTop: '8px' } })))) : (React.createElement(Fragment, null,
34
56
  showPriceStripe && (React.createElement(PriceStripe, { size: EPriceSize.SMALL, variant: EPriceVariant.PRIO })),
35
57
  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 }),
36
- checkboxes && checkboxes.length > 0 && (React.createElement(CheckboxContainer, null, checkboxes.map(function (checkbox, index) { return (React.createElement(Checkbox, { checked: checkbox.checked, disabled: checkbox.disabled, key: index, label: checkbox.label, name: checkbox.name, onChange: function (e) {
37
- if (checkbox.onChange) {
38
- checkbox.onChange(e.target.checked);
39
- }
40
- }, value: checkbox.value })); }))))),
58
+ checkboxes && checkboxes.length > 0 && (React.createElement(CheckboxContainer, null, checkboxes.map(function (checkbox, index) {
59
+ var ariaLabel = checkboxContext
60
+ ? "".concat(checkbox.label, ". ").concat(checkboxContext)
61
+ : checkbox.label;
62
+ return (React.createElement(Checkbox, { key: index, checked: checkbox.checked, disabled: checkbox.disabled, label: checkbox.label, name: checkbox.name, "aria-label": ariaLabel, onChange: function (e) {
63
+ if (checkbox.onChange) {
64
+ checkbox.onChange(e.target.checked);
65
+ }
66
+ }, value: checkbox.value }));
67
+ }))))),
41
68
  (item === null || item === void 0 ? void 0 : item.secondaryDescription) && item.secondaryDescription)),
42
69
  children && (React.createElement(ListRight, { alignment: alignment }, children))));
43
70
  };
package/build/es/components/src/components/ListItem/ListItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/ListItem/ListItem.styles.js CHANGED
@@ -2,9 +2,9 @@ import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
2
2
  import styled from 'styled-components';
3
3
  import { EListItemAlignment } from './ListItem.js';
4
4
 
5
- var ItemInformationContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n"])));
5
+ var ItemInformationContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n overflow-wrap: break-word;\n word-break: break-word;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n overflow-wrap: break-word;\n word-break: break-word;\n"])));
6
6
  var ListItemContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n gap: ", "px;\n\n p {\n padding: 1px 0px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n }\n\n &:focus {\n outline-offset: ", "px;\n }\n &:focus:not(:focus-visible) {\n outline: none;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n gap: ", "px;\n\n p {\n padding: 1px 0px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n }\n\n &:focus {\n outline-offset: ", "px;\n }\n &:focus:not(:focus-visible) {\n outline: none;\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; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; });
7
- var ListLeft = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: ", ";\n gap: ", "px;\n\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n } \n"], ["\n display: flex;\n align-items: ", ";\n gap: ", "px;\n\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n } \n"])), function (props) {
7
+ var ListLeft = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: ", ";\n gap: ", "px;\n\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n }\n"], ["\n display: flex;\n align-items: ", ";\n gap: ", "px;\n\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n }\n"])), function (props) {
8
8
  return props.alignment === EListItemAlignment.TOP ? 'inherit' : 'center';
9
9
  }, 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; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listItemFlexGap; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
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) {
package/build/es/components/src/components/RadioListItem/RadioListItem.js CHANGED
@@ -2,8 +2,8 @@ import React from 'react';
2
2
  import { BaseRadioListItemContainer, RadioFlex, BaseRadioItemLeftWrapper, LabelContentWrapper, StyledH3, RadioRightWrapper } from './RadioListItem.styles.js';
3
3
 
4
4
  function RadioListItem(_a) {
5
- var onClick = _a.onClick, selected = _a.selected, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children, ariaLabel = _a.ariaLabel;
6
- return (React.createElement(BaseRadioListItemContainer, { tabIndex: isDisabled ? -1 : 0, role: "radio", "aria-checked": selected, "aria-disabled": isDisabled, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label, "aria-live": "polite", transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onKeyDown: function (event) {
5
+ var onClick = _a.onClick, selected = _a.selected, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children;
6
+ return (React.createElement(BaseRadioListItemContainer, { tabIndex: isDisabled ? -1 : 0, role: "radio", "aria-checked": selected, "aria-disabled": isDisabled, "aria-live": "polite", transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onKeyDown: function (event) {
7
7
  if ((event.key === 'Enter' || event.key === ' ') && !isDisabled) {
8
8
  event.preventDefault();
9
9
  onClick(value);
package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js CHANGED
@@ -27,9 +27,9 @@ var BaseRadioListItemContainer = styled.div(templateObject_1 || (templateObject_
27
27
  "background: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter));
28
28
  });
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
- var StyledH3 = styled(H3).attrs({ as: 'label' })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"], ["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m1; }, function (props) {
30
+ var StyledH3 = styled(H3).attrs({ as: 'span' })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"], ["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"])), 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 && "\n color: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark, ";\n text-decoration: line-through;\n ");
32
+ return props.isDisabled && "\n color: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledDarkGray, ";\n text-decoration: line-through;\n ");
33
33
  });
34
34
  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
35
  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) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.14.11",
3
+ "version": "0.14.13",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -65,7 +65,7 @@
65
65
  },
66
66
  "dependencies": {
67
67
  "@citygross/design-tokens": "^0.4.0",
68
- "@citygross/icons": "^0.3.3",
68
+ "@citygross/icons": "^0.3.4",
69
69
  "@citygross/react-use-bg-wizard": "^0.0.13",
70
70
  "@citygross/typography": "^0.0.120",
71
71
  "@citygross/utils": "^0.0.45",
@@ -75,5 +75,5 @@
75
75
  "react-slick": "^0.30.1",
76
76
  "slick-carousel": "^1.8.1"
77
77
  },
78
- "gitHead": "244f117122954be99ba89d7ce484f3faf849f408"
78
+ "gitHead": "c2a9a87469718f8906f0a10e11659e6ef961e19c"
79
79
  }