@citygross/components 0.8.8 → 0.8.10

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 (15) hide show
  1. package/build/@types/components/CartSubTotal/CartSubTotal.d.ts +2 -1
  2. package/build/@types/components/CartSubTotal/CartSubTotal.styles.d.ts +4 -0
  3. package/build/cjs/components/src/components/CartSubTotal/CartSubTotal.js +6 -4
  4. package/build/cjs/components/src/components/CartSubTotal/CartSubTotal.js.map +1 -1
  5. package/build/cjs/components/src/components/CartSubTotal/CartSubTotal.styles.js +3 -1
  6. package/build/cjs/components/src/components/CartSubTotal/CartSubTotal.styles.js.map +1 -1
  7. package/build/cjs/components/src/components/QuantitySelector/QuantitySelector.js +6 -1
  8. package/build/cjs/components/src/components/QuantitySelector/QuantitySelector.js.map +1 -1
  9. package/build/es/components/src/components/CartSubTotal/CartSubTotal.js +7 -5
  10. package/build/es/components/src/components/CartSubTotal/CartSubTotal.js.map +1 -1
  11. package/build/es/components/src/components/CartSubTotal/CartSubTotal.styles.js +3 -2
  12. package/build/es/components/src/components/CartSubTotal/CartSubTotal.styles.js.map +1 -1
  13. package/build/es/components/src/components/QuantitySelector/QuantitySelector.js +7 -2
  14. package/build/es/components/src/components/QuantitySelector/QuantitySelector.js.map +1 -1
  15. package/package.json +2 -2
package/build/@types/components/CartSubTotal/CartSubTotal.d.ts CHANGED
@@ -7,9 +7,10 @@ export declare type TCartSubTotal = {
7
7
  type?: ECartSubTotalTypes;
8
8
  fromPriceLabel?: string;
9
9
  infoOnBottom?: boolean;
10
+ priceColor?: string;
10
11
  };
11
12
  export declare enum ECartSubTotalTypes {
12
13
  items = "items",
13
14
  charges = "charges"
14
15
  }
15
- export declare const CartSubTotal: ({ label, value, children, info, type, fromPriceLabel, infoOnBottom }: TCartSubTotal) => JSX.Element;
16
+ export declare const CartSubTotal: ({ label, value, children, info, type, fromPriceLabel, infoOnBottom, priceColor }: TCartSubTotal) => JSX.Element;
package/build/@types/components/CartSubTotal/CartSubTotal.styles.d.ts CHANGED
@@ -2,7 +2,11 @@ import { ECartSubTotalTypes } from './CartSubTotal';
2
2
  declare type TCartSubTotalContainer = {
3
3
  type?: ECartSubTotalTypes;
4
4
  };
5
+ declare type TCartSubTotalPrice = {
6
+ priceColor?: string;
7
+ };
5
8
  export declare const CartSubTotalContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TCartSubTotalContainer, never>;
6
9
  export declare const SubTotalLabel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
7
10
  export declare const ToolTipButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
11
+ export declare const Price: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TCartSubTotalPrice, never>;
8
12
  export {};
package/build/cjs/components/src/components/CartSubTotal/CartSubTotal.js CHANGED
@@ -7,6 +7,7 @@ var icons = require('@citygross/icons');
7
7
  var utils = require('@citygross/utils');
8
8
  var ToolTipDialog = require('../ToolTipDialog/ToolTipDialog.js');
9
9
  var CartSubTotal_styles = require('./CartSubTotal.styles.js');
10
+ var designTokens = require('@citygross/design-tokens');
10
11
 
11
12
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
13
 
@@ -18,9 +19,10 @@ exports.ECartSubTotalTypes = void 0;
18
19
  ECartSubTotalTypes["charges"] = "charges";
19
20
  })(exports.ECartSubTotalTypes || (exports.ECartSubTotalTypes = {}));
20
21
  var CartSubTotal = function (_a) {
21
- var label = _a.label, value = _a.value, children = _a.children, info = _a.info, type = _a.type, fromPriceLabel = _a.fromPriceLabel, infoOnBottom = _a.infoOnBottom;
22
+ var _b;
23
+ var label = _a.label, value = _a.value, children = _a.children, info = _a.info, type = _a.type, fromPriceLabel = _a.fromPriceLabel, infoOnBottom = _a.infoOnBottom, _c = _a.priceColor, priceColor = _c === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkest : _c;
22
24
  var formattedPrice = utils.formatPriceWithDecimalsReduced(value);
23
- var _b = React.useState(false), infoOpen = _b[0], setInfoOpen = _b[1];
25
+ var _d = React.useState(false), infoOpen = _d[0], setInfoOpen = _d[1];
24
26
  var toggleInfoOpen = function () {
25
27
  setInfoOpen(!infoOpen);
26
28
  };
@@ -30,14 +32,14 @@ var CartSubTotal = function (_a) {
30
32
  children,
31
33
  React__default["default"].createElement(CartSubTotal_styles.ToolTipButton, { onClick: toggleInfoOpen },
32
34
  React__default["default"].createElement(icons.Icons.Info, { height: 16, width: 16 }))),
33
- React__default["default"].createElement("div", null, (value !== 0 && !value) || isNaN(value)
35
+ React__default["default"].createElement(CartSubTotal_styles.Price, { priceColor: priceColor }, (value !== 0 && !value) || isNaN(value)
34
36
  ? '-'
35
37
  : "".concat(fromPriceLabel || '', " ").concat(formattedPrice === null || formattedPrice === void 0 ? void 0 : formattedPrice.value, ",").concat(formattedPrice === null || formattedPrice === void 0 ? void 0 : formattedPrice.decimal, " kr")),
36
38
  infoOpen && (React__default["default"].createElement(ToolTipDialog.ToolTipDialog, { onBottom: infoOnBottom, info: info, toggle: toggleInfoOpen })))) : (React__default["default"].createElement(CartSubTotal_styles.CartSubTotalContainer, { type: type },
37
39
  React__default["default"].createElement(CartSubTotal_styles.SubTotalLabel, null,
38
40
  label,
39
41
  children),
40
- value !== undefined ? (React__default["default"].createElement("div", null, formattedPrice === null || formattedPrice === void 0 ? void 0 :
42
+ value !== undefined ? (React__default["default"].createElement(CartSubTotal_styles.Price, { priceColor: priceColor }, formattedPrice === null || formattedPrice === void 0 ? void 0 :
41
43
  formattedPrice.value,
42
44
  ",", formattedPrice === null || formattedPrice === void 0 ? void 0 :
43
45
  formattedPrice.decimal,
package/build/cjs/components/src/components/CartSubTotal/CartSubTotal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CartSubTotal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"CartSubTotal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/CartSubTotal/CartSubTotal.styles.js CHANGED
@@ -19,9 +19,11 @@ var CartSubTotalContainer = styled__default["default"].div(templateObject_1 || (
19
19
  });
20
20
  var SubTotalLabel = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
21
21
  var ToolTipButton = styled__default["default"].button(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n outline: none;\n border: none;\n background: transparent;\n height: ", "px;\n padding: 0;\n margin-bottom: ", "px;\n cursor: pointer;\n ", "\n"], ["\n outline: none;\n border: none;\n background: transparent;\n height: ", "px;\n padding: 0;\n margin-bottom: ", "px;\n cursor: pointer;\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.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, global_styles.focusVisible);
22
- var templateObject_1, templateObject_2, templateObject_3;
22
+ var Price = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (props) { return props.priceColor; });
23
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
23
24
 
24
25
  exports.CartSubTotalContainer = CartSubTotalContainer;
26
+ exports.Price = Price;
25
27
  exports.SubTotalLabel = SubTotalLabel;
26
28
  exports.ToolTipButton = ToolTipButton;
27
29
  //# sourceMappingURL=CartSubTotal.styles.js.map
package/build/cjs/components/src/components/CartSubTotal/CartSubTotal.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CartSubTotal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"CartSubTotal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/QuantitySelector/QuantitySelector.js CHANGED
@@ -13,12 +13,17 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
  function QuantitySelector(_a) {
14
14
  var onAdd = _a.onAdd, onSubtract = _a.onSubtract, onChange = _a.onChange, maxValue = _a.maxValue, value = _a.value, onBlur = _a.onBlur;
15
15
  var _b = React.useState(false), customFocus = _b[0], setCustomFocus = _b[1];
16
+ var inputRef = React.useRef(null);
16
17
  return (React__default["default"].createElement(QuantitySelector_styles.QuantitySelectorContainer, null,
17
18
  React__default["default"].createElement(QuantitySelector_styles.QuantityButton, { direction: "left", disabled: value <= 0, onClick: onSubtract, tabIndex: -1 },
18
19
  React__default["default"].createElement(QuantitySelector_styles.IconContainer, null,
19
20
  React__default["default"].createElement(icons.Icons.Minus, { width: 16, height: 16 }))),
20
- React__default["default"].createElement(QuantitySelector_styles.QuantityInput, { customFocus: customFocus, max: maxValue, value: value, type: "number", onMouseDown: function () {
21
+ React__default["default"].createElement(QuantitySelector_styles.QuantityInput, { customFocus: customFocus, max: maxValue, value: value, ref: inputRef, type: "number", onMouseDown: function () {
21
22
  setCustomFocus(true);
23
+ }, onClick: function () {
24
+ if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
25
+ inputRef.current.select();
26
+ }
22
27
  }, onKeyDown: function (event) {
23
28
  if (event.key === 'Enter' || event.key === 'Escape') {
24
29
  event.currentTarget.blur();
package/build/cjs/components/src/components/QuantitySelector/QuantitySelector.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"QuantitySelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"QuantitySelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/CartSubTotal/CartSubTotal.js CHANGED
@@ -2,7 +2,8 @@ import React, { useState } from 'react';
2
2
  import { Icons } from '@citygross/icons';
3
3
  import { formatPriceWithDecimalsReduced } from '@citygross/utils';
4
4
  import { ToolTipDialog } from '../ToolTipDialog/ToolTipDialog.js';
5
- import { CartSubTotalContainer, SubTotalLabel, ToolTipButton } from './CartSubTotal.styles.js';
5
+ import { CartSubTotalContainer, SubTotalLabel, ToolTipButton, Price } from './CartSubTotal.styles.js';
6
+ import { theme } from '@citygross/design-tokens';
6
7
 
7
8
  var ECartSubTotalTypes;
8
9
  (function (ECartSubTotalTypes) {
@@ -10,9 +11,10 @@ var ECartSubTotalTypes;
10
11
  ECartSubTotalTypes["charges"] = "charges";
11
12
  })(ECartSubTotalTypes || (ECartSubTotalTypes = {}));
12
13
  var CartSubTotal = function (_a) {
13
- var label = _a.label, value = _a.value, children = _a.children, info = _a.info, type = _a.type, fromPriceLabel = _a.fromPriceLabel, infoOnBottom = _a.infoOnBottom;
14
+ var _b;
15
+ var label = _a.label, value = _a.value, children = _a.children, info = _a.info, type = _a.type, fromPriceLabel = _a.fromPriceLabel, infoOnBottom = _a.infoOnBottom, _c = _a.priceColor, priceColor = _c === void 0 ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest : _c;
14
16
  var formattedPrice = formatPriceWithDecimalsReduced(value);
15
- var _b = useState(false), infoOpen = _b[0], setInfoOpen = _b[1];
17
+ var _d = useState(false), infoOpen = _d[0], setInfoOpen = _d[1];
16
18
  var toggleInfoOpen = function () {
17
19
  setInfoOpen(!infoOpen);
18
20
  };
@@ -22,14 +24,14 @@ var CartSubTotal = function (_a) {
22
24
  children,
23
25
  React.createElement(ToolTipButton, { onClick: toggleInfoOpen },
24
26
  React.createElement(Icons.Info, { height: 16, width: 16 }))),
25
- React.createElement("div", null, (value !== 0 && !value) || isNaN(value)
27
+ React.createElement(Price, { priceColor: priceColor }, (value !== 0 && !value) || isNaN(value)
26
28
  ? '-'
27
29
  : "".concat(fromPriceLabel || '', " ").concat(formattedPrice === null || formattedPrice === void 0 ? void 0 : formattedPrice.value, ",").concat(formattedPrice === null || formattedPrice === void 0 ? void 0 : formattedPrice.decimal, " kr")),
28
30
  infoOpen && (React.createElement(ToolTipDialog, { onBottom: infoOnBottom, info: info, toggle: toggleInfoOpen })))) : (React.createElement(CartSubTotalContainer, { type: type },
29
31
  React.createElement(SubTotalLabel, null,
30
32
  label,
31
33
  children),
32
- value !== undefined ? (React.createElement("div", null, formattedPrice === null || formattedPrice === void 0 ? void 0 :
34
+ value !== undefined ? (React.createElement(Price, { priceColor: priceColor }, formattedPrice === null || formattedPrice === void 0 ? void 0 :
33
35
  formattedPrice.value,
34
36
  ",", formattedPrice === null || formattedPrice === void 0 ? void 0 :
35
37
  formattedPrice.decimal,
package/build/es/components/src/components/CartSubTotal/CartSubTotal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CartSubTotal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"CartSubTotal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/CartSubTotal/CartSubTotal.styles.js CHANGED
@@ -11,7 +11,8 @@ var CartSubTotalContainer = styled.div(templateObject_1 || (templateObject_1 = _
11
11
  });
12
12
  var SubTotalLabel = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
13
13
  var ToolTipButton = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n outline: none;\n border: none;\n background: transparent;\n height: ", "px;\n padding: 0;\n margin-bottom: ", "px;\n cursor: pointer;\n ", "\n"], ["\n outline: none;\n border: none;\n background: transparent;\n height: ", "px;\n padding: 0;\n margin-bottom: ", "px;\n cursor: pointer;\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.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, focusVisible);
14
- var templateObject_1, templateObject_2, templateObject_3;
14
+ var Price = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (props) { return props.priceColor; });
15
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
15
16
 
16
- export { CartSubTotalContainer, SubTotalLabel, ToolTipButton };
17
+ export { CartSubTotalContainer, Price, SubTotalLabel, ToolTipButton };
17
18
  //# sourceMappingURL=CartSubTotal.styles.js.map
package/build/es/components/src/components/CartSubTotal/CartSubTotal.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CartSubTotal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"CartSubTotal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/QuantitySelector/QuantitySelector.js CHANGED
@@ -1,16 +1,21 @@
1
- import React, { useState } from 'react';
1
+ import React, { useState, useRef } from 'react';
2
2
  import { QuantitySelectorContainer, QuantityButton, IconContainer, QuantityInput } from './QuantitySelector.styles.js';
3
3
  import { Icons } from '@citygross/icons';
4
4
 
5
5
  function QuantitySelector(_a) {
6
6
  var onAdd = _a.onAdd, onSubtract = _a.onSubtract, onChange = _a.onChange, maxValue = _a.maxValue, value = _a.value, onBlur = _a.onBlur;
7
7
  var _b = useState(false), customFocus = _b[0], setCustomFocus = _b[1];
8
+ var inputRef = useRef(null);
8
9
  return (React.createElement(QuantitySelectorContainer, null,
9
10
  React.createElement(QuantityButton, { direction: "left", disabled: value <= 0, onClick: onSubtract, tabIndex: -1 },
10
11
  React.createElement(IconContainer, null,
11
12
  React.createElement(Icons.Minus, { width: 16, height: 16 }))),
12
- React.createElement(QuantityInput, { customFocus: customFocus, max: maxValue, value: value, type: "number", onMouseDown: function () {
13
+ React.createElement(QuantityInput, { customFocus: customFocus, max: maxValue, value: value, ref: inputRef, type: "number", onMouseDown: function () {
13
14
  setCustomFocus(true);
15
+ }, onClick: function () {
16
+ if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
17
+ inputRef.current.select();
18
+ }
14
19
  }, onKeyDown: function (event) {
15
20
  if (event.key === 'Enter' || event.key === 'Escape') {
16
21
  event.currentTarget.blur();
package/build/es/components/src/components/QuantitySelector/QuantitySelector.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"QuantitySelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"QuantitySelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.8.8",
3
+ "version": "0.8.10",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -76,5 +76,5 @@
76
76
  "react-slick": "^0.30.1",
77
77
  "slick-carousel": "^1.8.1"
78
78
  },
79
- "gitHead": "4aa29a29d8c4b262915f1a286ecfbf73ab3fe3f4"
79
+ "gitHead": "1c892d32f97f739e8dbf1e344be03ca9702ad8ee"
80
80
  }