@citygross/components 0.16.24 → 0.16.26

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 (17) hide show
  1. package/build/@types/components/Modal/Modal.d.ts +2 -1
  2. package/build/@types/components/Modal/Modal.styles.d.ts +2 -3
  3. package/build/cjs/components/src/components/CartSummary/CartSummary.js +8 -8
  4. package/build/cjs/components/src/components/Modal/Modal.js +7 -6
  5. package/build/cjs/components/src/components/Modal/Modal.js.map +1 -1
  6. package/build/cjs/components/src/components/Modal/Modal.styles.js +5 -12
  7. package/build/cjs/components/src/components/Modal/Modal.styles.js.map +1 -1
  8. package/build/cjs/utils/build/index.js +19 -18
  9. package/build/cjs/utils/build/index.js.map +1 -1
  10. package/build/es/components/src/components/CartSummary/CartSummary.js +8 -8
  11. package/build/es/components/src/components/Modal/Modal.js +8 -7
  12. package/build/es/components/src/components/Modal/Modal.js.map +1 -1
  13. package/build/es/components/src/components/Modal/Modal.styles.js +6 -12
  14. package/build/es/components/src/components/Modal/Modal.styles.js.map +1 -1
  15. package/build/es/utils/build/index.js +19 -18
  16. package/build/es/utils/build/index.js.map +1 -1
  17. package/package.json +3 -3
package/build/@types/components/Modal/Modal.d.ts CHANGED
@@ -12,6 +12,7 @@ export declare type TModal = {
12
12
  inertSelectors: string[];
13
13
  labelCancel?: string;
14
14
  labelCta?: string;
15
+ noOverlay?: boolean;
15
16
  onClose: () => void;
16
17
  onConfirm: () => void;
17
18
  portalHostSelector: string;
@@ -19,4 +20,4 @@ export declare type TModal = {
19
20
  title: string;
20
21
  variant: EModalVariant;
21
22
  } & React.HTMLAttributes<HTMLDivElement>;
22
- export declare const Modal: ({ children, inertSelectors, labelCancel, labelCta, onClose, onConfirm, portalHostSelector, size, title, variant }: TModal) => React.ReactPortal | null;
23
+ export declare const Modal: ({ children, inertSelectors, labelCancel, labelCta, noOverlay, onClose, onConfirm, portalHostSelector, size, title, variant }: TModal) => React.ReactPortal | null;
package/build/@types/components/Modal/Modal.styles.d.ts CHANGED
@@ -1,9 +1,8 @@
1
- /// <reference types="react" />
2
1
  import { type TModal } from './Modal';
3
- export declare const Overlay: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
2
+ declare type TOverlay = Pick<TModal, 'noOverlay'>;
3
+ export declare const Overlay: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TOverlay, never>;
4
4
  declare type TFrame = Pick<TModal, 'size'>;
5
5
  export declare const Frame: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TFrame, never>;
6
6
  export declare const Header: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
7
- export declare const Title: 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>;
8
7
  export declare const Footer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
9
8
  export {};
package/build/cjs/components/src/components/CartSummary/CartSummary.js CHANGED
@@ -70,7 +70,7 @@ function CartSummary(_a) {
70
70
  ? pickingFeeFromLabel.trim()
71
71
  : undefined;
72
72
  var chargeColor = charge.color;
73
- return (React__default["default"].createElement(CartSummary_styles.CartLine, { key: charge.name, role: "listitem" },
73
+ return (React__default["default"].createElement(CartSummary_styles.CartLine, null,
74
74
  React__default["default"].createElement(CartSummary_styles.LabelWrapper, null,
75
75
  React__default["default"].createElement(typography.BodyText, null, baseChargeName),
76
76
  charge.info && (React__default["default"].createElement(React.Fragment, null,
@@ -90,8 +90,8 @@ function CartSummary(_a) {
90
90
  cartSummary.title && (React__default["default"].createElement(CartSummary_styles.CartSummaryTitle, null,
91
91
  React__default["default"].createElement(typography.BodyText, { fontWeight: "semiBold" }, cartSummary.title),
92
92
  React__default["default"].createElement(typography.BodyText, null, cartSummary.subtitle))),
93
- React__default["default"].createElement(CartSummary_styles.CartSummaryContent, { title: cartSummary.title, role: "list", "aria-label": "Ordersammanfattning" },
94
- ((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" },
93
+ React__default["default"].createElement(CartSummary_styles.CartSummaryContent, { title: cartSummary.title, role: "group", "aria-label": "Ordersammanfattning" },
94
+ ((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, null,
95
95
  React__default["default"].createElement(typography.BodyText, { fontWeight: "medium" },
96
96
  itemsLabel,
97
97
  React__default["default"].createElement(CartSummary_styles.QuantitySpan, null, " (".concat(((_h = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.quantity) !== null && _h !== void 0 ? _h : 0) + ((_j = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.quantity) !== null && _j !== void 0 ? _j : 0), ")"))),
@@ -99,7 +99,7 @@ function CartSummary(_a) {
99
99
  (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) +
100
100
  ((_m = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.cancelledAmount) !== null && _m !== void 0 ? _m : 0)))),
101
101
  React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount))))),
102
- bags.length > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, { role: "listitem" },
102
+ bags.length > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, null,
103
103
  React__default["default"].createElement(typography.BodyText, null,
104
104
  "Matkassar",
105
105
  React__default["default"].createElement(CartSummary_styles.QuantitySpan, null,
@@ -109,12 +109,12 @@ function CartSummary(_a) {
109
109
  React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
110
110
  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))),
111
111
  React__default["default"].createElement(typography.BodyText, { fontWeight: "semiBold" }, utils.formatPrice(sumOfBags.amount))))),
112
- (charges === null || charges === void 0 ? void 0 : charges.length) > 0 && (React__default["default"].createElement(CartSummary_styles.ChargesContainer, { role: "presentation" }, charges === null || charges === void 0 ? void 0 : charges.map(function (charge) { return (React__default["default"].createElement(ChargeLine, { key: charge.name, charge: charge })); }))),
113
- React__default["default"].createElement(CartSummary_styles.ChargesContainer, { role: "presentation" },
114
- React__default["default"].createElement(CartSummary_styles.CartLine, { role: "listitem" },
112
+ (charges === null || charges === void 0 ? void 0 : charges.length) > 0 && (React__default["default"].createElement(CartSummary_styles.ChargesContainer, null, charges === null || charges === void 0 ? void 0 : charges.map(function (charge) { return (React__default["default"].createElement(ChargeLine, { key: charge.name, charge: charge })); }))),
113
+ React__default["default"].createElement(CartSummary_styles.ChargesContainer, null,
114
+ React__default["default"].createElement(CartSummary_styles.CartLine, null,
115
115
  React__default["default"].createElement(typography.BodyText, { fontWeight: "semiBold" }, totalLabel),
116
116
  React__default["default"].createElement(typography.BodyText, { fontWeight: "semiBold" }, utils.formatPrice(cartSummary.totalAmount))),
117
- cartSummary.totalDiscount > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, { role: "listitem" },
117
+ cartSummary.totalDiscount > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, null,
118
118
  React__default["default"].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL }, saveLabel),
119
119
  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)))))))));
120
120
  }
package/build/cjs/components/src/components/Modal/Modal.js CHANGED
@@ -6,6 +6,7 @@ var React = require('react');
6
6
  var reactDom = require('react-dom');
7
7
  var designTokens = require('@citygross/design-tokens');
8
8
  var icons = require('@citygross/icons');
9
+ var typography = require('@citygross/typography');
9
10
  var utils = require('@citygross/utils');
10
11
  var CgButton = require('../CgButton/CgButton.js');
11
12
  var Modal_styles = require('./Modal.styles.js');
@@ -34,8 +35,8 @@ var getPortalRoot = function (portalHostSelector) {
34
35
  return (_a = hostElement === null || hostElement === void 0 ? void 0 : hostElement.parentElement) !== null && _a !== void 0 ? _a : document.body;
35
36
  };
36
37
  var Modal = function (_a) {
37
- var _b, _c;
38
- var children = _a.children, inertSelectors = _a.inertSelectors, _d = _a.labelCancel, labelCancel = _d === void 0 ? 'Avbryt' : _d, _e = _a.labelCta, labelCta = _e === void 0 ? 'Okej' : _e, onClose = _a.onClose, onConfirm = _a.onConfirm, portalHostSelector = _a.portalHostSelector, _f = _a.size, size = _f === void 0 ? exports.EModalSize.medium : _f, title = _a.title, variant = _a.variant;
38
+ var _b, _c, _d;
39
+ var children = _a.children, inertSelectors = _a.inertSelectors, _e = _a.labelCancel, labelCancel = _e === void 0 ? 'Avbryt' : _e, _f = _a.labelCta, labelCta = _f === void 0 ? 'Okej' : _f, _g = _a.noOverlay, noOverlay = _g === void 0 ? false : _g, onClose = _a.onClose, onConfirm = _a.onConfirm, portalHostSelector = _a.portalHostSelector, _h = _a.size, size = _h === void 0 ? exports.EModalSize.medium : _h, title = _a.title, variant = _a.variant;
39
40
  var titleId = React.useId();
40
41
  var modalRef = React.useRef(null);
41
42
  var cancelButtonRef = React.useRef(null);
@@ -72,7 +73,7 @@ var Modal = function (_a) {
72
73
  (_b = modalRef.current) === null || _b === void 0 ? void 0 : _b.focus();
73
74
  });
74
75
  return function () {
75
- restoreInert === null || restoreInert === void 0 ? void 0 : restoreInert();
76
+ restoreInert();
76
77
  body.style.overflow = previousBodyOverflow;
77
78
  html.style.overflow = previousHtmlOverflow;
78
79
  document.removeEventListener('keydown', handleEscape);
@@ -83,12 +84,12 @@ var Modal = function (_a) {
83
84
  }, [inertSelectors, onClose, variant]);
84
85
  if (!portalRoot)
85
86
  return null;
86
- return reactDom.createPortal(React__default["default"].createElement(Modal_styles.Overlay, { onClick: onClose },
87
+ return reactDom.createPortal(React__default["default"].createElement(Modal_styles.Overlay, { noOverlay: noOverlay, onClick: onClose },
87
88
  React__default["default"].createElement(Modal_styles.Frame, { "aria-labelledby": titleId, "aria-modal": "true", onClick: function (event) { return event.stopPropagation(); }, ref: modalRef, role: variant === exports.EModalVariant.destructive ? 'alertdialog' : 'dialog', size: size },
88
89
  React__default["default"].createElement(Modal_styles.Header, null,
89
- React__default["default"].createElement(Modal_styles.Title, { fontWeight: "semiBold", id: titleId }, title),
90
+ React__default["default"].createElement(typography.H2, { color: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkest, id: titleId }, title),
90
91
  variant !== exports.EModalVariant.destructive && (React__default["default"].createElement(CgButton.CgButton, { "aria-label": labelCancel, circle: true, onClick: onClose, variant: CgButton_types.EButtonVariant.ghost },
91
- React__default["default"].createElement(icons.Icons.Cross, { "aria-hidden": "true", height: (_b = designTokens.theme.spacings) === null || _b === void 0 ? void 0 : _b.sm2, width: (_c = designTokens.theme.spacings) === null || _c === void 0 ? void 0 : _c.sm2 })))),
92
+ React__default["default"].createElement(icons.Icons.Cross, { "aria-hidden": "true", height: (_c = designTokens.theme.spacings) === null || _c === void 0 ? void 0 : _c.sm2, width: (_d = designTokens.theme.spacings) === null || _d === void 0 ? void 0 : _d.sm2 })))),
92
93
  children,
93
94
  React__default["default"].createElement(Modal_styles.Footer, null,
94
95
  React__default["default"].createElement(CgButton.CgButton, { onClick: onConfirm, variant: CgButton_types.EButtonVariant.primary }, labelCta),
package/build/cjs/components/src/components/Modal/Modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Modal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/Modal/Modal.styles.js CHANGED
@@ -3,7 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _tslib = require('../../../../_virtual/_tslib.js');
6
- var typography = require('@citygross/typography');
7
6
  var styled = require('styled-components');
8
7
  var Modal = require('./Modal.js');
9
8
 
@@ -12,9 +11,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
12
11
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
13
12
 
14
13
  var Overlay = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n background: ", ";\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n inset: 0;\n min-height: 100%;\n overflow-y: auto;\n padding: ", ";\n position: fixed;\n z-index: ", ";\n"], ["\n background: ", ";\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n inset: 0;\n min-height: 100%;\n overflow-y: auto;\n padding: ", ";\n position: fixed;\n z-index: ", ";\n"])), function (_a) {
15
- var _b;
16
- var theme = _a.theme;
17
- return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkOverlay;
14
+ var _b, _c;
15
+ var theme = _a.theme, noOverlay = _a.noOverlay;
16
+ return noOverlay ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.transparent : (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.darkOverlay;
18
17
  }, function (_a) {
19
18
  var _b, _c, _d;
20
19
  var theme = _a.theme;
@@ -60,12 +59,7 @@ var Header = styled__default["default"].div(templateObject_3 || (templateObject_
60
59
  var theme = _a.theme;
61
60
  return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
62
61
  });
63
- var Title = styled__default["default"](typography.BodyText)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n font-size: ", "px;\n"], ["\n font-size: ", "px;\n"])), function (_a) {
64
- var _b, _c;
65
- var theme = _a.theme;
66
- return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s4;
67
- });
68
- var Footer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n display: flex;\n gap: ", "px;\n margin-top: ", "px;\n width: 100%;\n\n > * {\n flex: 1 1 0;\n min-width: 0;\n }\n"], ["\n display: flex;\n gap: ", "px;\n margin-top: ", "px;\n width: 100%;\n\n > * {\n flex: 1 1 0;\n min-width: 0;\n }\n"])), function (_a) {
62
+ var Footer = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n gap: ", "px;\n margin-top: ", "px;\n width: 100%;\n\n > * {\n flex: 1 1 0;\n min-width: 0;\n }\n"], ["\n display: flex;\n gap: ", "px;\n margin-top: ", "px;\n width: 100%;\n\n > * {\n flex: 1 1 0;\n min-width: 0;\n }\n"])), function (_a) {
69
63
  var _b;
70
64
  var theme = _a.theme;
71
65
  return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
@@ -74,11 +68,10 @@ var Footer = styled__default["default"].div(templateObject_5 || (templateObject_
74
68
  var theme = _a.theme;
75
69
  return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.lg;
76
70
  });
77
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
71
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
78
72
 
79
73
  exports.Footer = Footer;
80
74
  exports.Frame = Frame;
81
75
  exports.Header = Header;
82
76
  exports.Overlay = Overlay;
83
- exports.Title = Title;
84
77
  //# sourceMappingURL=Modal.styles.js.map
package/build/cjs/components/src/components/Modal/Modal.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Modal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/utils/build/index.js CHANGED
@@ -535,31 +535,32 @@ var selectKeyboardEventHandler = function (_a) {
535
535
 
536
536
  var toggleInert = function (_a) {
537
537
  var elements = _a.elements, isInert = _a.isInert;
538
- var snapshots = elements
539
- .filter(function (element) { return Boolean(element); })
540
- .map(function (element) { return ({
538
+ var list = elements.filter(function (element) {
539
+ return Boolean(element);
540
+ });
541
+ if (!isInert) {
542
+ list.forEach(function (element) {
543
+ var hadInert = element.hasAttribute('inert');
544
+ if (!hadInert) {
545
+ element.removeAttribute('inert');
546
+ }
547
+ });
548
+ return function () { };
549
+ }
550
+ var snapshots = list.map(function (element) { return ({
541
551
  element: element,
542
- hadInert: element.hasAttribute('inert')
552
+ setByThisCall: !element.hasAttribute('inert')
543
553
  }); });
544
554
  snapshots.forEach(function (_a) {
545
- var element = _a.element, hadInert = _a.hadInert;
546
- if (isInert) {
547
- if (!hadInert) {
548
- element.setAttribute('inert', '');
549
- }
550
- return;
551
- }
552
- if (!hadInert) {
553
- element.removeAttribute('inert');
555
+ var element = _a.element, setByThisCall = _a.setByThisCall;
556
+ if (setByThisCall) {
557
+ element.setAttribute('inert', '');
554
558
  }
555
559
  });
556
560
  return function () {
557
561
  snapshots.forEach(function (_a) {
558
- var element = _a.element, hadInert = _a.hadInert;
559
- if (hadInert) {
560
- element.setAttribute('inert', '');
561
- }
562
- else {
562
+ var element = _a.element, setByThisCall = _a.setByThisCall;
563
+ if (setByThisCall) {
563
564
  element.removeAttribute('inert');
564
565
  }
565
566
  });