@citygross/components 0.7.241 → 0.7.243

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 (34) hide show
  1. package/build/@types/components/CartSubTotal/CartSubTotal.d.ts +2 -1
  2. package/build/@types/components/CgButton/CgButton.d.ts +1 -2
  3. package/build/@types/components/ProgressBar/ProgressBar.d.ts +2 -1
  4. package/build/@types/components/ProgressBar/ProgressBar.styled.d.ts +1 -0
  5. package/build/@types/components/ToolTipDialog/ToolTipDialog.d.ts +2 -1
  6. package/build/@types/components/ToolTipDialog/ToolTipDialog.styles.d.ts +4 -1
  7. package/build/cjs/components/src/components/CartSubTotal/CartSubTotal.js +2 -2
  8. package/build/cjs/components/src/components/CartSubTotal/CartSubTotal.styles.js +1 -1
  9. package/build/cjs/components/src/components/CgButton/CgButton.js +22 -3
  10. package/build/cjs/components/src/components/CgButton/CgButton.js.map +1 -1
  11. package/build/cjs/components/src/components/CgButton/CgButton.styles.js +5 -1
  12. package/build/cjs/components/src/components/CgButton/CgButton.styles.js.map +1 -1
  13. package/build/cjs/components/src/components/ProgressBar/ProgressBar.js +2 -2
  14. package/build/cjs/components/src/components/ProgressBar/ProgressBar.styled.js +6 -1
  15. package/build/cjs/components/src/components/ProgressBar/ProgressBar.styled.js.map +1 -1
  16. package/build/cjs/components/src/components/ToolTipDialog/ToolTipDialog.js +2 -2
  17. package/build/cjs/components/src/components/ToolTipDialog/ToolTipDialog.styles.js +6 -1
  18. package/build/cjs/components/src/components/ToolTipDialog/ToolTipDialog.styles.js.map +1 -1
  19. package/build/cjs/components/src/index.js +1 -0
  20. package/build/cjs/components/src/index.js.map +1 -1
  21. package/build/es/components/src/components/CartSubTotal/CartSubTotal.js +2 -2
  22. package/build/es/components/src/components/CartSubTotal/CartSubTotal.styles.js +1 -1
  23. package/build/es/components/src/components/CgButton/CgButton.js +17 -4
  24. package/build/es/components/src/components/CgButton/CgButton.js.map +1 -1
  25. package/build/es/components/src/components/CgButton/CgButton.styles.js +3 -1
  26. package/build/es/components/src/components/CgButton/CgButton.styles.js.map +1 -1
  27. package/build/es/components/src/components/ProgressBar/ProgressBar.js +2 -2
  28. package/build/es/components/src/components/ProgressBar/ProgressBar.styled.js +6 -1
  29. package/build/es/components/src/components/ProgressBar/ProgressBar.styled.js.map +1 -1
  30. package/build/es/components/src/components/ToolTipDialog/ToolTipDialog.js +2 -2
  31. package/build/es/components/src/components/ToolTipDialog/ToolTipDialog.styles.js +6 -1
  32. package/build/es/components/src/components/ToolTipDialog/ToolTipDialog.styles.js.map +1 -1
  33. package/build/es/components/src/index.js +1 -1
  34. package/package.json +2 -2
@@ -6,9 +6,10 @@ export declare type TCartSubTotal = {
6
6
  info?: React.ReactNode;
7
7
  type?: ECartSubTotalTypes;
8
8
  fromPriceLabel?: string;
9
+ infoOnBottom?: boolean;
9
10
  };
10
11
  export declare enum ECartSubTotalTypes {
11
12
  items = "items",
12
13
  charges = "charges"
13
14
  }
14
- export declare const CartSubTotal: ({ label, value, children, info, type, fromPriceLabel }: TCartSubTotal) => JSX.Element;
15
+ export declare const CartSubTotal: ({ label, value, children, info, type, fromPriceLabel, infoOnBottom }: TCartSubTotal) => JSX.Element;
@@ -21,5 +21,4 @@ export declare type TCgButton = {
21
21
  disabled?: boolean;
22
22
  onClick?: () => void;
23
23
  };
24
- declare const CgButton: ({ size, variant, icon, flexReverse, disabled, onClick, children }: TCgButton) => JSX.Element;
25
- export default CgButton;
24
+ export declare const CgButton: ({ size, variant, icon, flexReverse, disabled, onClick, children }: TCgButton) => JSX.Element;
@@ -4,5 +4,6 @@ export declare type TProgressBar = {
4
4
  currentValue: number;
5
5
  background?: string;
6
6
  color?: string;
7
+ small?: boolean;
7
8
  };
8
- export declare function ProgressBar({ maxValue, currentValue, background, color }: TProgressBar): JSX.Element;
9
+ export declare function ProgressBar({ maxValue, currentValue, background, color, small }: TProgressBar): JSX.Element;
@@ -1,5 +1,6 @@
1
1
  export declare type TProgressContainer = {
2
2
  color?: string;
3
+ small?: boolean;
3
4
  };
4
5
  export declare type TProgress = TProgressContainer & {
5
6
  width: number;
@@ -2,5 +2,6 @@ import React from 'react';
2
2
  export declare type TToolTipDialog = {
3
3
  info: React.ReactNode;
4
4
  toggle: () => void;
5
+ onBottom?: boolean;
5
6
  };
6
- export declare const ToolTipDialog: ({ info, toggle }: TToolTipDialog) => JSX.Element;
7
+ export declare const ToolTipDialog: ({ info, toggle, onBottom }: TToolTipDialog) => JSX.Element;
@@ -1,2 +1,5 @@
1
- export declare const DialogContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
1
+ export declare type TDialogContainer = {
2
+ onBottom?: boolean;
3
+ };
4
+ export declare const DialogContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TDialogContainer, never>;
2
5
  export declare const DialogClose: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
@@ -18,7 +18,7 @@ exports.ECartSubTotalTypes = void 0;
18
18
  ECartSubTotalTypes["charges"] = "charges";
19
19
  })(exports.ECartSubTotalTypes || (exports.ECartSubTotalTypes = {}));
20
20
  var CartSubTotal = function (_a) {
21
- var label = _a.label, value = _a.value, children = _a.children, info = _a.info, type = _a.type, fromPriceLabel = _a.fromPriceLabel;
21
+ var label = _a.label, value = _a.value, children = _a.children, info = _a.info, type = _a.type, fromPriceLabel = _a.fromPriceLabel, infoOnBottom = _a.infoOnBottom;
22
22
  var formattedPrice = utils.formatPriceWithDecimalsReduced(value);
23
23
  var _b = React.useState(false), infoOpen = _b[0], setInfoOpen = _b[1];
24
24
  var toggleInfoOpen = function () {
@@ -33,7 +33,7 @@ var CartSubTotal = function (_a) {
33
33
  React__default["default"].createElement("div", null, (value !== 0 && !value) || isNaN(value)
34
34
  ? '-'
35
35
  : "".concat(fromPriceLabel || '', " ").concat(formattedPrice === null || formattedPrice === void 0 ? void 0 : formattedPrice.value, ",").concat(formattedPrice === null || formattedPrice === void 0 ? void 0 : formattedPrice.decimal, " kr")),
36
- infoOpen && React__default["default"].createElement(ToolTipDialog.ToolTipDialog, { info: info, toggle: toggleInfoOpen }))) : (React__default["default"].createElement(CartSubTotal_styles.CartSubTotalContainer, { type: type },
36
+ infoOpen && (React__default["default"].createElement(ToolTipDialog.ToolTipDialog, { onBottom: infoOnBottom, info: info, toggle: toggleInfoOpen })))) : (React__default["default"].createElement(CartSubTotal_styles.CartSubTotalContainer, { type: type },
37
37
  React__default["default"].createElement(CartSubTotal_styles.SubTotalLabel, null,
38
38
  label,
39
39
  children),
@@ -18,7 +18,7 @@ var CartSubTotalContainer = styled__default["default"].div(templateObject_1 || (
18
18
  : "\n font-size: ".concat((_f = (_e = props.theme.typography) === null || _e === void 0 ? void 0 : _e.size) === null || _f === void 0 ? void 0 : _f.s2, "px;\n font-weight: ").concat((_h = (_g = props.theme.typography) === null || _g === void 0 ? void 0 : _g.weight) === null || _h === void 0 ? void 0 : _h.regular, ";\n ");
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
- 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 ", "\n"], ["\n outline: none;\n border: none;\n background: transparent;\n height: ", "px;\n ", "\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, global_styles.focusVisible);
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
22
  var templateObject_1, templateObject_2, templateObject_3;
23
23
 
24
24
  exports.CartSubTotalContainer = CartSubTotalContainer;
@@ -2,8 +2,12 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- require('react');
6
- require('./CgButton.styles.js');
5
+ var React = require('react');
6
+ var CgButton_styles = require('./CgButton.styles.js');
7
+
8
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
+
10
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
7
11
 
8
12
  exports.ECgButtonSize = void 0;
9
13
  (function (ECgButtonSize) {
@@ -18,5 +22,20 @@ exports.EButtonVariant = void 0;
18
22
  EButtonVariant[EButtonVariant["tertiary"] = 2] = "tertiary";
19
23
  EButtonVariant[EButtonVariant["prio"] = 3] = "prio";
20
24
  EButtonVariant[EButtonVariant["ghost"] = 4] = "ghost";
21
- })(exports.EButtonVariant || (exports.EButtonVariant = {}));
25
+ })(exports.EButtonVariant || (exports.EButtonVariant = {}));
26
+ var CgButton = function (_a) {
27
+ var size = _a.size, variant = _a.variant, icon = _a.icon, flexReverse = _a.flexReverse, disabled = _a.disabled, onClick = _a.onClick, children = _a.children;
28
+ return (React__default["default"].createElement(CgButton_styles.CgButtonContainer, { size: size, variant: variant, isIconOnly: !children, flexReverse: flexReverse, disabled: disabled, onKeyDown: function (event) {
29
+ if (event.key === 'Enter') {
30
+ onClick && onClick();
31
+ }
32
+ }, onClick: function (e) {
33
+ e.preventDefault();
34
+ onClick && onClick();
35
+ } },
36
+ icon,
37
+ children));
38
+ };
39
+
40
+ exports.CgButton = CgButton;
22
41
  //# sourceMappingURL=CgButton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CgButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"CgButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,5 +1,7 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  var _tslib = require('../../../../_virtual/_tslib.js');
4
6
  var styled = require('styled-components');
5
7
  var global_styles = require('../../shared/global.styles.js');
@@ -44,7 +46,7 @@ var buttonShadow = function (size, variant) {
44
46
  return 'inset 0px -2px 0px rgba(0, 0, 0, 0.15)';
45
47
  }
46
48
  };
47
- styled__default["default"].button(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n border-radius: ", "px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: ", "px;\n flex-direction: ", ";\n font-size ", ";\n padding: ", ";\n cursor: pointer;\n outline: none;\n border: none;\n position: relative;\n ", "\n &:disabled{\n cursor: default;\n }\n &:after{\n content: '';\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n box-shadow: ", ";\n border-radius: ", "px;\n top: 0;\n left: 0;\n }\n\n ", "\n"], ["\n border-radius: ", "px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: ", "px;\n flex-direction: ", ";\n font-size ", ";\n padding: ", ";\n cursor: pointer;\n outline: none;\n border: none;\n position: relative;\n ", "\n &:disabled{\n cursor: default;\n }\n &:after{\n content: '';\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n box-shadow: ", ";\n border-radius: ", "px;\n top: 0;\n left: 0;\n }\n\n ", "\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return (props.flexReverse ? 'row-reverse' : 'row'); }, function (props) { return buttonFontSize(props.size, props.theme.typography); }, function (props) {
49
+ var CgButtonContainer = styled__default["default"].button(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n border-radius: ", "px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: ", "px;\n flex-direction: ", ";\n font-size ", ";\n padding: ", ";\n cursor: pointer;\n outline: none;\n border: none;\n position: relative;\n ", "\n &:disabled{\n cursor: default;\n }\n &:after{\n content: '';\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n box-shadow: ", ";\n border-radius: ", "px;\n top: 0;\n left: 0;\n }\n\n ", "\n"], ["\n border-radius: ", "px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: ", "px;\n flex-direction: ", ";\n font-size ", ";\n padding: ", ";\n cursor: pointer;\n outline: none;\n border: none;\n position: relative;\n ", "\n &:disabled{\n cursor: default;\n }\n &:after{\n content: '';\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n box-shadow: ", ";\n border-radius: ", "px;\n top: 0;\n left: 0;\n }\n\n ", "\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return (props.flexReverse ? 'row-reverse' : 'row'); }, function (props) { return buttonFontSize(props.size, props.theme.typography); }, function (props) {
48
50
  var _a;
49
51
  return props.isIconOnly
50
52
  ? "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, "px")
@@ -66,4 +68,6 @@ styled__default["default"].button(templateObject_7 || (templateObject_7 = _tslib
66
68
  }
67
69
  });
68
70
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
71
+
72
+ exports.CgButtonContainer = CgButtonContainer;
69
73
  //# sourceMappingURL=CgButton.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CgButton.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"CgButton.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -12,9 +12,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
12
 
13
13
  function ProgressBar(_a) {
14
14
  var _b, _c;
15
- var maxValue = _a.maxValue, currentValue = _a.currentValue, _d = _a.background, background = _d === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white : _d, _e = _a.color, color = _e === void 0 ? (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.alertBlue : _e;
15
+ var maxValue = _a.maxValue, currentValue = _a.currentValue, _d = _a.background, background = _d === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white : _d, _e = _a.color, color = _e === void 0 ? (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.alertBlue : _e, small = _a.small;
16
16
  var progress = (currentValue / maxValue) * 100;
17
- return (React__default["default"].createElement(ProgressBar_styled.BarContainer, { color: background },
17
+ return (React__default["default"].createElement(ProgressBar_styled.BarContainer, { color: background, small: small },
18
18
  React__default["default"].createElement(ProgressBar_styled.Progress, { width: progress, color: color })));
19
19
  }
20
20
 
@@ -9,7 +9,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
9
9
 
10
10
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
11
 
12
- var BarContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n background: ", ";\n border-radius: ", "px;\n height: ", "px;\n overflow: hidden;\n"], ["\n background: ", ";\n border-radius: ", "px;\n height: ", "px;\n overflow: hidden;\n"])), function (props) { return props.color; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.default; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
12
+ var BarContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n background: ", ";\n border-radius: ", "px;\n height: ", "px;\n overflow: hidden;\n"], ["\n background: ", ";\n border-radius: ", "px;\n height: ", "px;\n overflow: hidden;\n"])), function (props) { return props.color; }, function (props) {
13
+ var _a, _b, _c;
14
+ return (props === null || props === void 0 ? void 0 : props.small)
15
+ ? (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.extraSmall
16
+ : (_c = props.theme.attributes) === null || _c === void 0 ? void 0 : _c.borderRadius.default;
17
+ }, function (props) { var _a, _b; return (props === null || props === void 0 ? void 0 : props.small) ? (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs; });
13
18
  var Progress = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n width: ", "%;\n background: ", ";\n height: 100%;\n"], ["\n width: ", "%;\n background: ", ";\n height: 100%;\n"])), function (props) { return props.width || 0; }, function (props) { return props.color; });
14
19
  var templateObject_1, templateObject_2;
15
20
 
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.styled.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"ProgressBar.styled.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
@@ -12,10 +12,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
12
12
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
 
14
14
  var ToolTipDialog = function (_a) {
15
- var info = _a.info, toggle = _a.toggle;
15
+ var info = _a.info, toggle = _a.toggle, onBottom = _a.onBottom;
16
16
  var infoRef = React.useRef(null);
17
17
  utils.useOutsideClick(infoRef, function () { return toggle(); });
18
- return (React__default["default"].createElement(ToolTipDialog_styles.DialogContainer, { ref: infoRef },
18
+ return (React__default["default"].createElement(ToolTipDialog_styles.DialogContainer, { ref: infoRef, onBottom: onBottom },
19
19
  info,
20
20
  React__default["default"].createElement(ToolTipDialog_styles.DialogClose, { onClick: toggle },
21
21
  React__default["default"].createElement(icons.Icons.Cross, { height: 20, width: 20, color: "white" }))));
@@ -10,7 +10,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
10
10
 
11
11
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
12
12
 
13
- var DialogContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n position: absolute;\n bottom: 100%;\n background: #000;\n border-radius: ", "px;\n opacity: 90%;\n padding: ", "px;\n display: flex;\n color: white;\n margin-bottom: ", "px;\n gap: ", "px;\n font-size: ", "px;\n"], ["\n position: absolute;\n bottom: 100%;\n background: #000;\n border-radius: ", "px;\n opacity: 90%;\n padding: ", "px;\n display: flex;\n color: white;\n margin-bottom: ", "px;\n gap: ", "px;\n font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs2; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
13
+ var DialogContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n position: absolute;\n background: #000;\n border-radius: ", "px;\n opacity: 90%;\n padding: ", "px;\n display: flex;\n color: white;\n gap: ", "px;\n font-size: ", "px;\n ", "\n"], ["\n position: absolute;\n background: #000;\n border-radius: ", "px;\n opacity: 90%;\n padding: ", "px;\n display: flex;\n color: white;\n gap: ", "px;\n font-size: ", "px;\n ", "\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) {
14
+ var _a, _b;
15
+ return (props === null || props === void 0 ? void 0 : props.onBottom)
16
+ ? "\n\n margin-top: ".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs2, "px;\n top: 100%;\n ")
17
+ : "\n margin-bottom: ".concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs2, "px;\n bottom: 100%;\n ");
18
+ });
14
19
  var DialogClose = styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n outline: none;\n border: none;\n display: inline-block;\n cursor: pointer;\n background: transparent;\n height: ", "px;\n ", "\n"], ["\n outline: none;\n border: none;\n display: inline-block;\n cursor: pointer;\n background: transparent;\n height: ", "px;\n ", "\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.toolTipCloseSize; }, global_styles.focusVisible);
15
20
  var templateObject_1, templateObject_2;
16
21
 
@@ -1 +1 @@
1
- {"version":3,"file":"ToolTipDialog.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"ToolTipDialog.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -202,6 +202,7 @@ Object.defineProperty(exports, 'ECartSubTotalTypes', {
202
202
  enumerable: true,
203
203
  get: function () { return CartSubTotal.ECartSubTotalTypes; }
204
204
  });
205
+ exports.CgButton = CgButton.CgButton;
205
206
  Object.defineProperty(exports, 'EButtonVariant', {
206
207
  enumerable: true,
207
208
  get: function () { return CgButton.EButtonVariant; }
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -10,7 +10,7 @@ var ECartSubTotalTypes;
10
10
  ECartSubTotalTypes["charges"] = "charges";
11
11
  })(ECartSubTotalTypes || (ECartSubTotalTypes = {}));
12
12
  var CartSubTotal = function (_a) {
13
- var label = _a.label, value = _a.value, children = _a.children, info = _a.info, type = _a.type, fromPriceLabel = _a.fromPriceLabel;
13
+ var label = _a.label, value = _a.value, children = _a.children, info = _a.info, type = _a.type, fromPriceLabel = _a.fromPriceLabel, infoOnBottom = _a.infoOnBottom;
14
14
  var formattedPrice = formatPriceWithDecimalsReduced(value);
15
15
  var _b = useState(false), infoOpen = _b[0], setInfoOpen = _b[1];
16
16
  var toggleInfoOpen = function () {
@@ -25,7 +25,7 @@ var CartSubTotal = function (_a) {
25
25
  React.createElement("div", null, (value !== 0 && !value) || isNaN(value)
26
26
  ? '-'
27
27
  : "".concat(fromPriceLabel || '', " ").concat(formattedPrice === null || formattedPrice === void 0 ? void 0 : formattedPrice.value, ",").concat(formattedPrice === null || formattedPrice === void 0 ? void 0 : formattedPrice.decimal, " kr")),
28
- infoOpen && React.createElement(ToolTipDialog, { info: info, toggle: toggleInfoOpen }))) : (React.createElement(CartSubTotalContainer, { type: type },
28
+ infoOpen && (React.createElement(ToolTipDialog, { onBottom: infoOnBottom, info: info, toggle: toggleInfoOpen })))) : (React.createElement(CartSubTotalContainer, { type: type },
29
29
  React.createElement(SubTotalLabel, null,
30
30
  label,
31
31
  children),
@@ -10,7 +10,7 @@ var CartSubTotalContainer = styled.div(templateObject_1 || (templateObject_1 = _
10
10
  : "\n font-size: ".concat((_f = (_e = props.theme.typography) === null || _e === void 0 ? void 0 : _e.size) === null || _f === void 0 ? void 0 : _f.s2, "px;\n font-weight: ").concat((_h = (_g = props.theme.typography) === null || _g === void 0 ? void 0 : _g.weight) === null || _h === void 0 ? void 0 : _h.regular, ";\n ");
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
- var ToolTipButton = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n outline: none;\n border: none;\n background: transparent;\n height: ", "px;\n ", "\n"], ["\n outline: none;\n border: none;\n background: transparent;\n height: ", "px;\n ", "\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, focusVisible);
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
14
  var templateObject_1, templateObject_2, templateObject_3;
15
15
 
16
16
  export { CartSubTotalContainer, SubTotalLabel, ToolTipButton };
@@ -1,5 +1,5 @@
1
- import 'react';
2
- import './CgButton.styles.js';
1
+ import React from 'react';
2
+ import { CgButtonContainer } from './CgButton.styles.js';
3
3
 
4
4
  var ECgButtonSize;
5
5
  (function (ECgButtonSize) {
@@ -14,7 +14,20 @@ var EButtonVariant;
14
14
  EButtonVariant[EButtonVariant["tertiary"] = 2] = "tertiary";
15
15
  EButtonVariant[EButtonVariant["prio"] = 3] = "prio";
16
16
  EButtonVariant[EButtonVariant["ghost"] = 4] = "ghost";
17
- })(EButtonVariant || (EButtonVariant = {}));
17
+ })(EButtonVariant || (EButtonVariant = {}));
18
+ var CgButton = function (_a) {
19
+ var size = _a.size, variant = _a.variant, icon = _a.icon, flexReverse = _a.flexReverse, disabled = _a.disabled, onClick = _a.onClick, children = _a.children;
20
+ return (React.createElement(CgButtonContainer, { size: size, variant: variant, isIconOnly: !children, flexReverse: flexReverse, disabled: disabled, onKeyDown: function (event) {
21
+ if (event.key === 'Enter') {
22
+ onClick && onClick();
23
+ }
24
+ }, onClick: function (e) {
25
+ e.preventDefault();
26
+ onClick && onClick();
27
+ } },
28
+ icon,
29
+ children));
30
+ };
18
31
 
19
- export { EButtonVariant, ECgButtonSize };
32
+ export { CgButton, EButtonVariant, ECgButtonSize };
20
33
  //# sourceMappingURL=CgButton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CgButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"CgButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -38,7 +38,7 @@ var buttonShadow = function (size, variant) {
38
38
  return 'inset 0px -2px 0px rgba(0, 0, 0, 0.15)';
39
39
  }
40
40
  };
41
- styled.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border-radius: ", "px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: ", "px;\n flex-direction: ", ";\n font-size ", ";\n padding: ", ";\n cursor: pointer;\n outline: none;\n border: none;\n position: relative;\n ", "\n &:disabled{\n cursor: default;\n }\n &:after{\n content: '';\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n box-shadow: ", ";\n border-radius: ", "px;\n top: 0;\n left: 0;\n }\n\n ", "\n"], ["\n border-radius: ", "px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: ", "px;\n flex-direction: ", ";\n font-size ", ";\n padding: ", ";\n cursor: pointer;\n outline: none;\n border: none;\n position: relative;\n ", "\n &:disabled{\n cursor: default;\n }\n &:after{\n content: '';\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n box-shadow: ", ";\n border-radius: ", "px;\n top: 0;\n left: 0;\n }\n\n ", "\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return (props.flexReverse ? 'row-reverse' : 'row'); }, function (props) { return buttonFontSize(props.size, props.theme.typography); }, function (props) {
41
+ var CgButtonContainer = styled.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border-radius: ", "px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: ", "px;\n flex-direction: ", ";\n font-size ", ";\n padding: ", ";\n cursor: pointer;\n outline: none;\n border: none;\n position: relative;\n ", "\n &:disabled{\n cursor: default;\n }\n &:after{\n content: '';\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n box-shadow: ", ";\n border-radius: ", "px;\n top: 0;\n left: 0;\n }\n\n ", "\n"], ["\n border-radius: ", "px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: ", "px;\n flex-direction: ", ";\n font-size ", ";\n padding: ", ";\n cursor: pointer;\n outline: none;\n border: none;\n position: relative;\n ", "\n &:disabled{\n cursor: default;\n }\n &:after{\n content: '';\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n box-shadow: ", ";\n border-radius: ", "px;\n top: 0;\n left: 0;\n }\n\n ", "\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return (props.flexReverse ? 'row-reverse' : 'row'); }, function (props) { return buttonFontSize(props.size, props.theme.typography); }, function (props) {
42
42
  var _a;
43
43
  return props.isIconOnly
44
44
  ? "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, "px")
@@ -60,4 +60,6 @@ styled.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n
60
60
  }
61
61
  });
62
62
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
63
+
64
+ export { CgButtonContainer };
63
65
  //# sourceMappingURL=CgButton.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CgButton.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"CgButton.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -4,9 +4,9 @@ import { BarContainer, Progress } from './ProgressBar.styled.js';
4
4
 
5
5
  function ProgressBar(_a) {
6
6
  var _b, _c;
7
- var maxValue = _a.maxValue, currentValue = _a.currentValue, _d = _a.background, background = _d === void 0 ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white : _d, _e = _a.color, color = _e === void 0 ? (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.alertBlue : _e;
7
+ var maxValue = _a.maxValue, currentValue = _a.currentValue, _d = _a.background, background = _d === void 0 ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white : _d, _e = _a.color, color = _e === void 0 ? (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.alertBlue : _e, small = _a.small;
8
8
  var progress = (currentValue / maxValue) * 100;
9
- return (React.createElement(BarContainer, { color: background },
9
+ return (React.createElement(BarContainer, { color: background, small: small },
10
10
  React.createElement(Progress, { width: progress, color: color })));
11
11
  }
12
12
 
@@ -1,7 +1,12 @@
1
1
  import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
2
2
  import styled from 'styled-components';
3
3
 
4
- var BarContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n border-radius: ", "px;\n height: ", "px;\n overflow: hidden;\n"], ["\n background: ", ";\n border-radius: ", "px;\n height: ", "px;\n overflow: hidden;\n"])), function (props) { return props.color; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.default; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
4
+ var BarContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n border-radius: ", "px;\n height: ", "px;\n overflow: hidden;\n"], ["\n background: ", ";\n border-radius: ", "px;\n height: ", "px;\n overflow: hidden;\n"])), function (props) { return props.color; }, function (props) {
5
+ var _a, _b, _c;
6
+ return (props === null || props === void 0 ? void 0 : props.small)
7
+ ? (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.extraSmall
8
+ : (_c = props.theme.attributes) === null || _c === void 0 ? void 0 : _c.borderRadius.default;
9
+ }, function (props) { var _a, _b; return (props === null || props === void 0 ? void 0 : props.small) ? (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs; });
5
10
  var Progress = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: ", "%;\n background: ", ";\n height: 100%;\n"], ["\n width: ", "%;\n background: ", ";\n height: 100%;\n"])), function (props) { return props.width || 0; }, function (props) { return props.color; });
6
11
  var templateObject_1, templateObject_2;
7
12
 
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.styled.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
1
+ {"version":3,"file":"ProgressBar.styled.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
@@ -4,10 +4,10 @@ import { Icons } from '@citygross/icons';
4
4
  import { DialogContainer, DialogClose } from './ToolTipDialog.styles.js';
5
5
 
6
6
  var ToolTipDialog = function (_a) {
7
- var info = _a.info, toggle = _a.toggle;
7
+ var info = _a.info, toggle = _a.toggle, onBottom = _a.onBottom;
8
8
  var infoRef = useRef(null);
9
9
  useOutsideClick(infoRef, function () { return toggle(); });
10
- return (React.createElement(DialogContainer, { ref: infoRef },
10
+ return (React.createElement(DialogContainer, { ref: infoRef, onBottom: onBottom },
11
11
  info,
12
12
  React.createElement(DialogClose, { onClick: toggle },
13
13
  React.createElement(Icons.Cross, { height: 20, width: 20, color: "white" }))));
@@ -2,7 +2,12 @@ import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
2
2
  import styled from 'styled-components';
3
3
  import { focusVisible } from '../../shared/global.styles.js';
4
4
 
5
- var DialogContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n bottom: 100%;\n background: #000;\n border-radius: ", "px;\n opacity: 90%;\n padding: ", "px;\n display: flex;\n color: white;\n margin-bottom: ", "px;\n gap: ", "px;\n font-size: ", "px;\n"], ["\n position: absolute;\n bottom: 100%;\n background: #000;\n border-radius: ", "px;\n opacity: 90%;\n padding: ", "px;\n display: flex;\n color: white;\n margin-bottom: ", "px;\n gap: ", "px;\n font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs2; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
5
+ var DialogContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n background: #000;\n border-radius: ", "px;\n opacity: 90%;\n padding: ", "px;\n display: flex;\n color: white;\n gap: ", "px;\n font-size: ", "px;\n ", "\n"], ["\n position: absolute;\n background: #000;\n border-radius: ", "px;\n opacity: 90%;\n padding: ", "px;\n display: flex;\n color: white;\n gap: ", "px;\n font-size: ", "px;\n ", "\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) {
6
+ var _a, _b;
7
+ return (props === null || props === void 0 ? void 0 : props.onBottom)
8
+ ? "\n\n margin-top: ".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs2, "px;\n top: 100%;\n ")
9
+ : "\n margin-bottom: ".concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs2, "px;\n bottom: 100%;\n ");
10
+ });
6
11
  var DialogClose = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n outline: none;\n border: none;\n display: inline-block;\n cursor: pointer;\n background: transparent;\n height: ", "px;\n ", "\n"], ["\n outline: none;\n border: none;\n display: inline-block;\n cursor: pointer;\n background: transparent;\n height: ", "px;\n ", "\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.toolTipCloseSize; }, focusVisible);
7
12
  var templateObject_1, templateObject_2;
8
13
 
@@ -1 +1 @@
1
- {"version":3,"file":"ToolTipDialog.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
1
+ {"version":3,"file":"ToolTipDialog.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
@@ -78,6 +78,6 @@ export { ZipCodeInput } from './components/ZipCodeInput/ZipCodeInput.js';
78
78
  export { MaxHeightText } from './components/MaxHeightText/MaxHeightText.js';
79
79
  export { ToolTipDialog } from './components/ToolTipDialog/ToolTipDialog.js';
80
80
  export { CartSubTotal, ECartSubTotalTypes } from './components/CartSubTotal/CartSubTotal.js';
81
- export { EButtonVariant, ECgButtonSize } from './components/CgButton/CgButton.js';
81
+ export { CgButton, EButtonVariant, ECgButtonSize } from './components/CgButton/CgButton.js';
82
82
  export { RecipeLabel } from './components/RecipeLabel/RecipeLabel.js';
83
83
  //# sourceMappingURL=index.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.7.241",
3
+ "version": "0.7.243",
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": "8ae197149878330159779e1fe4dbb93dcf646b8e"
79
+ "gitHead": "b79512646cf49743ce781fe5a23e89b815f92725"
80
80
  }