@citygross/components 0.8.76 → 0.8.78
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/@types/components/CartCard/CartCard.d.ts +2 -1
- package/build/@types/components/Stepper/StepperListItem.d.ts +1 -1
- package/build/cjs/components/src/components/Button/Button.styles.js +3 -2
- package/build/cjs/components/src/components/Button/Button.styles.js.map +1 -1
- package/build/cjs/components/src/components/CartCard/CartCard.js +2 -2
- package/build/cjs/components/src/components/CgButton/CgButton.js +1 -1
- package/build/cjs/components/src/components/CgButton/CgButton.styles.js +2 -2
- package/build/cjs/components/src/components/DeliverySlotItem/DeliverySlotItem.js +5 -1
- package/build/cjs/components/src/components/DeliverySlotItem/DeliverySlotItem.js.map +1 -1
- package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.js +6 -1
- package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.js.map +1 -1
- package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.styles.js +2 -2
- package/build/cjs/components/src/components/RadioListItem/RadioListItem.js +5 -1
- package/build/cjs/components/src/components/RadioListItem/RadioListItem.js.map +1 -1
- package/build/cjs/components/src/components/Stepper/StepperListItem.js +5 -1
- package/build/cjs/components/src/components/Stepper/StepperListItem.js.map +1 -1
- package/build/cjs/components/src/components/StepperMobile/StepperMobile.js +2 -2
- package/build/cjs/components/src/components/StepperMobile/StepperMobile.styles.js +1 -1
- package/build/es/components/src/components/Button/Button.styles.js +3 -2
- package/build/es/components/src/components/Button/Button.styles.js.map +1 -1
- package/build/es/components/src/components/CartCard/CartCard.js +2 -2
- package/build/es/components/src/components/CgButton/CgButton.js +1 -1
- package/build/es/components/src/components/CgButton/CgButton.styles.js +2 -2
- package/build/es/components/src/components/DeliverySlotItem/DeliverySlotItem.js +5 -1
- package/build/es/components/src/components/DeliverySlotItem/DeliverySlotItem.js.map +1 -1
- package/build/es/components/src/components/FormElements/Checkbox/Checkbox.js +6 -1
- package/build/es/components/src/components/FormElements/Checkbox/Checkbox.js.map +1 -1
- package/build/es/components/src/components/FormElements/Checkbox/Checkbox.styles.js +2 -2
- package/build/es/components/src/components/RadioListItem/RadioListItem.js +5 -1
- package/build/es/components/src/components/RadioListItem/RadioListItem.js.map +1 -1
- package/build/es/components/src/components/Stepper/StepperListItem.js +5 -1
- package/build/es/components/src/components/Stepper/StepperListItem.js.map +1 -1
- package/build/es/components/src/components/StepperMobile/StepperMobile.js +2 -2
- package/build/es/components/src/components/StepperMobile/StepperMobile.styles.js +1 -1
- package/package.json +2 -2
|
@@ -14,5 +14,6 @@ export declare type TCartCard = {
|
|
|
14
14
|
onDelete?: () => void;
|
|
15
15
|
quanitytSelector?: React.ReactNode;
|
|
16
16
|
titleLineClamp?: number;
|
|
17
|
+
titleLink?: React.ReactNode;
|
|
17
18
|
};
|
|
18
|
-
export declare const CartCard: ({ markings, title, description, showDelete, maxReachedWarning, value, price, image, onDelete, maxValue, secondaryDescription, quanitytSelector, titleLineClamp }: TCartCard) => JSX.Element;
|
|
19
|
+
export declare const CartCard: ({ markings, title, description, showDelete, maxReachedWarning, value, price, image, titleLink, onDelete, maxValue, secondaryDescription, quanitytSelector, titleLineClamp, }: TCartCard) => JSX.Element;
|
|
@@ -8,4 +8,4 @@ export declare type TStepperListItem = styles.TBaseStepper & {
|
|
|
8
8
|
onClick?: () => void;
|
|
9
9
|
firstChild?: boolean;
|
|
10
10
|
};
|
|
11
|
-
export declare function StepperListItem({ active, firstChild, step, onClick, disabled, complete, tooltip, children
|
|
11
|
+
export declare function StepperListItem({ active, firstChild, step, onClick, disabled, complete, tooltip, children }: TStepperListItem): JSX.Element;
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var _tslib = require('../../../../_virtual/_tslib.js');
|
|
6
6
|
var styled = require('styled-components');
|
|
7
7
|
var Spinner = require('../Spinner/Spinner.js');
|
|
8
|
+
var global_styles = require('../../shared/global.styles.js');
|
|
8
9
|
|
|
9
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
11
|
|
|
@@ -64,7 +65,7 @@ var SpinnerSize = function (size) {
|
|
|
64
65
|
return '26px';
|
|
65
66
|
}
|
|
66
67
|
};
|
|
67
|
-
var BaseButton = styled__default["default"].button(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n /* reset */\n
|
|
68
|
+
var BaseButton = styled__default["default"].button(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n /* reset */\n border: none;\n\n backface-visibility: hidden;\n cursor: pointer;\n border-radius: ", "px;\n /* overflow: hidden; */\n pointer-events: ", ";\n -webkit-font-smoothing: antialiased;\n user-select: ", ";\n\n position: relative;\n\n /* typography */\n\n font-family: ", ";\n font-weight: ", ";\n text-align: ", ";\n white-space: ", ";\n\n /* colors */\n\n background: ", ";\n\n color: ", ";\n\n /* Width & Height */\n\n width: ", ";\n\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n &::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n /* Hover Effect */\n\n &:hover {\n ::after {\n opacity: ", ";\n }\n ", ";\n }\n &:active {\n ::before {\n opacity: ", ";\n }\n ::after {\n opacity: 0;\n }\n }\n ", "\n /* Media Queries */\n\n @media (max-width: ", "px) {\n align-self: ", ";\n }\n"], ["\n /* reset */\n border: none;\n\n backface-visibility: hidden;\n cursor: pointer;\n border-radius: ", "px;\n /* overflow: hidden; */\n pointer-events: ", ";\n -webkit-font-smoothing: antialiased;\n user-select: ", ";\n\n position: relative;\n\n /* typography */\n\n font-family: ", ";\n font-weight: ", ";\n text-align: ", ";\n white-space: ", ";\n\n /* colors */\n\n background: ", ";\n\n color: ", ";\n\n /* Width & Height */\n\n width: ", ";\n\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n &::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n /* Hover Effect */\n\n &:hover {\n ::after {\n opacity: ", ";\n }\n ", ";\n }\n &:active {\n ::before {\n opacity: ", ";\n }\n ::after {\n opacity: 0;\n }\n }\n ", "\n /* Media Queries */\n\n @media (max-width: ", "px) {\n align-self: ", ";\n }\n"])), function (props) { var _a, _b; return (_a = props.borderRadius) !== null && _a !== void 0 ? _a : (_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall; }, function (props) { return (props.isDisabled ? 'none' : 'all'); }, function (props) { return props.isDisabled && 'none'; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.type.primary; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.weight.medium; }, function (props) { return (props.center ? 'center' : 'initial'); }, function (props) { return (props.noWrap ? 'nowrap' : 'normal'); }, function (props) { var _a, _b; return props.isDisabled ? (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium : props.color; }, function (props) {
|
|
68
69
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
69
70
|
return props.color === ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.secondary) ||
|
|
70
71
|
props.color === ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.darkest) ||
|
|
@@ -77,7 +78,7 @@ var BaseButton = styled__default["default"].button(templateObject_1 || (template
|
|
|
77
78
|
return !props.isDisabled &&
|
|
78
79
|
props.hoverBackground &&
|
|
79
80
|
"background: ".concat(props.hoverBackground);
|
|
80
|
-
}, function (props) { return ((props === null || props === void 0 ? void 0 : props.noShadow) ? 0 : 1); }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { return (props.center ? 'center' : 'initial'); });
|
|
81
|
+
}, function (props) { return ((props === null || props === void 0 ? void 0 : props.noShadow) ? 0 : 1); }, global_styles.focusVisible, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { return (props.center ? 'center' : 'initial'); });
|
|
81
82
|
var BasePrimaryCSS = styled.css(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n\n /* shadow */\n ", ";\n\n /* Padding */\n\n padding: ", ";\n\n @media (min-width: ", "px) {\n font-size: ", ";\n\n padding: ", ";\n ", ";\n }\n"], ["\n font-size: ", ";\n line-height: ", ";\n\n /* shadow */\n ", ";\n\n /* Padding */\n\n padding: ", ";\n\n @media (min-width: ", "px) {\n font-size: ", ";\n\n padding: ", ";\n ", ";\n }\n"])), function (props) { return ButtonFontSize(props.xsSize || props.size); }, function (props) {
|
|
82
83
|
var _a, _b;
|
|
83
84
|
return props.size === 'small'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Button.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -13,14 +13,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
13
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
14
|
|
|
15
15
|
var CartCard = function (_a) {
|
|
16
|
-
var markings = _a.markings, title = _a.title, description = _a.description, showDelete = _a.showDelete, maxReachedWarning = _a.maxReachedWarning, value = _a.value, price = _a.price, image = _a.image, onDelete = _a.onDelete, _b = _a.maxValue, maxValue = _b === void 0 ? 999 : _b, secondaryDescription = _a.secondaryDescription, quanitytSelector = _a.quanitytSelector, _c = _a.titleLineClamp, titleLineClamp = _c === void 0 ? 1 : _c;
|
|
16
|
+
var markings = _a.markings, title = _a.title, description = _a.description, showDelete = _a.showDelete, maxReachedWarning = _a.maxReachedWarning, value = _a.value, price = _a.price, image = _a.image, titleLink = _a.titleLink, onDelete = _a.onDelete, _b = _a.maxValue, maxValue = _b === void 0 ? 999 : _b, secondaryDescription = _a.secondaryDescription, quanitytSelector = _a.quanitytSelector, _c = _a.titleLineClamp, titleLineClamp = _c === void 0 ? 1 : _c;
|
|
17
17
|
return (React__default["default"].createElement(CartCard_styles.CartCardContainer, null,
|
|
18
18
|
React__default["default"].createElement(CartCard_styles.CartCardImage, { src: image || fallback_grocery }),
|
|
19
19
|
React__default["default"].createElement(CartCard_styles.CartCardInner, null,
|
|
20
20
|
React__default["default"].createElement(CartCard_styles.CartCardInnerTop, null,
|
|
21
21
|
React__default["default"].createElement(CartCard_styles.CartCardInfo, null,
|
|
22
22
|
markings && (React__default["default"].createElement(CartCard_styles.MarkingsContainer, null, markings)),
|
|
23
|
-
title && (React__default["default"].createElement(CartCard_styles.CartCardTitle, { titleLineClamp: titleLineClamp }, title)),
|
|
23
|
+
titleLink || title && (React__default["default"].createElement(CartCard_styles.CartCardTitle, { titleLineClamp: titleLineClamp }, title)),
|
|
24
24
|
description && description),
|
|
25
25
|
showDelete && (React__default["default"].createElement(CartCard_styles.CartCardDelete, null,
|
|
26
26
|
React__default["default"].createElement(CgButton.CgButton, { onClick: onDelete, variant: CgButton.EButtonVariant.secondary, icon: React__default["default"].createElement(icons.Icons.Trash, { width: 16, height: 16 }) })))),
|
|
@@ -27,7 +27,7 @@ exports.EButtonVariant = void 0;
|
|
|
27
27
|
var CgButton = function (_a) {
|
|
28
28
|
var size = _a.size, variant = _a.variant, icon = _a.icon, flexReverse = _a.flexReverse, disabled = _a.disabled, onClick = _a.onClick, children = _a.children, loading = _a.loading, fullWidth = _a.fullWidth, buttonRef = _a.buttonRef, round = _a.round, _b = _a.shouldPreventDefault, shouldPreventDefault = _b === void 0 ? true : _b;
|
|
29
29
|
return (React__default["default"].createElement(CgButton_styles.CgButtonContainer, { ref: buttonRef, round: round, size: size, variant: variant, isIconOnly: !children, flexReverse: flexReverse, disabled: disabled || loading, fullWidth: fullWidth, loading: loading, onKeyDown: function (event) {
|
|
30
|
-
if (event.key === 'Enter') {
|
|
30
|
+
if (event.key === 'Enter' && !disabled) {
|
|
31
31
|
onClick && onClick();
|
|
32
32
|
}
|
|
33
33
|
}, onClick: function (e) {
|
|
@@ -46,12 +46,12 @@ var buttonShadow = function (size, variant) {
|
|
|
46
46
|
return 'inset 0px -2px 0px rgba(0, 0, 0, 0.15)';
|
|
47
47
|
}
|
|
48
48
|
};
|
|
49
|
-
var CgButtonContainer = styled__default["default"].button(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n border-radius: ", "px;\n padding: ", ";\n cursor: pointer;\n outline: none;\n border: none;\n position: relative;\n ", "\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"], ["\n border-radius: ", "px;\n padding: ", ";\n cursor: pointer;\n outline: none;\n border: none;\n position: relative;\n ", "\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"])), function (props) { var _a; return props.round ? '100' : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
|
|
49
|
+
var CgButtonContainer = styled__default["default"].button(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n border-radius: ", "px;\n padding: ", ";\n cursor: pointer;\n outline: none;\n border: none;\n position: relative;\n ", "\n font-family: ", ";\n\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"], ["\n border-radius: ", "px;\n padding: ", ";\n cursor: pointer;\n outline: none;\n border: none;\n position: relative;\n ", "\n font-family: ", ";\n\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"])), function (props) { var _a; return props.round ? '100' : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
|
|
50
50
|
var _a;
|
|
51
51
|
return props.isIconOnly
|
|
52
52
|
? "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, "px")
|
|
53
53
|
: buttonPadding(props.size, props.theme.spacings);
|
|
54
|
-
}, function (props) { return (props === null || props === void 0 ? void 0 : props.fullWidth) && "width: 100%;"; }, global_styles.focusVisible, function (props) { return buttonShadow(props.size, props.variant); }, function (props) { var _a; return props.round ? '100' : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
|
|
54
|
+
}, function (props) { return (props === null || props === void 0 ? void 0 : props.fullWidth) && "width: 100%;"; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.type.primary; }, global_styles.focusVisible, function (props) { return buttonShadow(props.size, props.variant); }, function (props) { var _a; return props.round ? '100' : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
|
|
55
55
|
switch (props.variant) {
|
|
56
56
|
case CgButton.EButtonVariant.primary:
|
|
57
57
|
return CgPrimary;
|
|
@@ -22,7 +22,11 @@ function DeliverySlotItem(_a) {
|
|
|
22
22
|
setWeekDay(momentDate.format('dddd').toLocaleLowerCase());
|
|
23
23
|
}, [width]);
|
|
24
24
|
var slotRef = React.useRef(null);
|
|
25
|
-
return (React__default["default"].createElement(DeliverySlotItem_styles.DeliverySlotItemContainer, { onClick: onSelect,
|
|
25
|
+
return (React__default["default"].createElement(DeliverySlotItem_styles.DeliverySlotItemContainer, { onClick: onSelect, onKeyDown: function (event) {
|
|
26
|
+
if (event.key === 'Enter') {
|
|
27
|
+
onSelect && onSelect();
|
|
28
|
+
}
|
|
29
|
+
}, ref: slotRef, tabIndex: 0, role: "button", selected: selected },
|
|
26
30
|
React__default["default"].createElement(DeliverySlotItem_styles.DeliverySlotContainer, { selected: selected },
|
|
27
31
|
React__default["default"].createElement(DeliverySlotItem_styles.DeliverySlotHeaderText, null,
|
|
28
32
|
React__default["default"].createElement(typography.BodyText, { fontWeight: 'medium' }, utils.capitalizeFirstLetter(weekDay)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DeliverySlotItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DeliverySlotItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -15,7 +15,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
15
15
|
function Checkbox(_a) {
|
|
16
16
|
var onChange = _a.onChange, _b = _a.size, size = _b === void 0 ? 24 : _b, _c = _a.iconSize, iconSize = _c === void 0 ? 16 : _c, inputProps = _tslib.__rest(_a, ["onChange", "size", "iconSize"]);
|
|
17
17
|
return (React__default["default"].createElement(Checkbox_styles.CheckboxWrapper, { size: size, whileTap: { scale: 0.9 }, whileHover: { scale: 1.1 } },
|
|
18
|
-
React__default["default"].createElement(Checkbox_styles.Checkbox, _tslib.__assign({ type: "checkbox", onChange: onChange,
|
|
18
|
+
React__default["default"].createElement(Checkbox_styles.Checkbox, _tslib.__assign({ tabIndex: 0, type: "checkbox", onChange: onChange, onKeyDown: function (event) {
|
|
19
|
+
if (event.key === 'Enter' && onChange && !(inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled)) {
|
|
20
|
+
var syntheticEvent = _tslib.__assign(_tslib.__assign({}, event), { target: event.target });
|
|
21
|
+
onChange(syntheticEvent);
|
|
22
|
+
}
|
|
23
|
+
}, size: size }, inputProps)),
|
|
19
24
|
React__default["default"].createElement(Checkbox_styles.CheckIcon, null,
|
|
20
25
|
React__default["default"].createElement(icons.Icons.CheckMark, { color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette.alertGreen : 'white', width: iconSize }))));
|
|
21
26
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -11,8 +11,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
11
11
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
12
12
|
|
|
13
13
|
var CheckboxWrapper = styled__default["default"](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n position: relative;\n display: inline-flex;\n border-radius: 2px;\n box-shadow: 0 0 0 1px ", " inset;\n box-sizing: border-box;\n width: ", "px;\n height: ", "px;\n min-height: ", "px;\n min-width: ", "px;\n z-index: 1;\n"], ["\n position: relative;\n display: inline-flex;\n border-radius: 2px;\n box-shadow: 0 0 0 1px ", " inset;\n box-sizing: border-box;\n width: ", "px;\n height: ", "px;\n min-height: ", "px;\n min-width: ", "px;\n z-index: 1;\n"])), function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium; }, function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.size; });
|
|
14
|
-
var CheckIcon = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n position: absolute;\n display:
|
|
15
|
-
var Checkbox = styled__default["default"].input(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n width: ", "px;\n height: ", "px;\n min-height: ", "px;\n min-width: ", "px;\n cursor: pointer;\n opacity: 0;\n z-index: 3;\n\n &:
|
|
14
|
+
var CheckIcon = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n border-radius: 2px;\n background: 'transparent';\n z-index: 2;\n > svg {\n opacity: 0;\n }\n"], ["\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n border-radius: 2px;\n background: 'transparent';\n z-index: 2;\n > svg {\n opacity: 0;\n }\n"])), function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium; });
|
|
15
|
+
var Checkbox = styled__default["default"].input(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n width: ", "px;\n height: ", "px;\n min-height: ", "px;\n min-width: ", "px;\n cursor: pointer;\n opacity: 0;\n z-index: 3;\n\n &:focus-visible + ", " {\n box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000, 0 0 0 6px #fff;\n transition: all 0.1s ease-in-out;\n }\n &:checked + ", " {\n opacity: 1;\n border: 1px solid ", ";\n background: #f2fdf2;\n\n > svg {\n opacity: 1;\n }\n }\n"], ["\n width: ", "px;\n height: ", "px;\n min-height: ", "px;\n min-width: ", "px;\n cursor: pointer;\n opacity: 0;\n z-index: 3;\n\n &:focus-visible + ", " {\n box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000, 0 0 0 6px #fff;\n transition: all 0.1s ease-in-out;\n }\n &:checked + ", " {\n opacity: 1;\n border: 1px solid ", ";\n background: #f2fdf2;\n\n > svg {\n opacity: 1;\n }\n }\n"])), function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.size; }, CheckIcon, CheckIcon, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.alertGreen; });
|
|
16
16
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
17
17
|
|
|
18
18
|
exports.CheckIcon = CheckIcon;
|
|
@@ -11,7 +11,11 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
11
11
|
|
|
12
12
|
function RadioListItem(_a) {
|
|
13
13
|
var onClick = _a.onClick, selected = _a.selected, defaultDisabledString = _a.defaultDisabledString, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, disabledText = _a.disabledText, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children;
|
|
14
|
-
return (React__default["default"].createElement(RadioListItem_styles.BaseRadioListItemContainer, { transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }
|
|
14
|
+
return (React__default["default"].createElement(RadioListItem_styles.BaseRadioListItemContainer, { tabIndex: 0, role: 'checkbox', transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onKeyDown: function (event) {
|
|
15
|
+
if (event.key === 'Enter' && !isDisabled) {
|
|
16
|
+
onClick(value);
|
|
17
|
+
}
|
|
18
|
+
} },
|
|
15
19
|
React__default["default"].createElement(RadioListItem_styles.RadioFlex, { wrapMobile: wrapMobile },
|
|
16
20
|
React__default["default"].createElement(RadioListItem_styles.BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow },
|
|
17
21
|
React__default["default"].createElement("div", null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -19,7 +19,11 @@ function StepperListItem(_a) {
|
|
|
19
19
|
var active = _a.active, firstChild = _a.firstChild, step = _a.step, onClick = _a.onClick, disabled = _a.disabled, complete = _a.complete, tooltip = _a.tooltip, children = _a.children;
|
|
20
20
|
var _l = React.useState(false), isHover = _l[0], setIsHover = _l[1];
|
|
21
21
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
22
|
-
React__default["default"].createElement(Stepper_styles.BaseStepperItem, { active: active,
|
|
22
|
+
React__default["default"].createElement(Stepper_styles.BaseStepperItem, { active: active, tabIndex: 0, role: 'button', onClick: disabled ? function () { } : onClick, onKeyDown: function (event) {
|
|
23
|
+
if (event.key === 'Enter' && !disabled) {
|
|
24
|
+
onClick && onClick();
|
|
25
|
+
}
|
|
26
|
+
}, disabled: disabled, firstChild: firstChild, onMouseEnter: function () { return setIsHover(true); }, onMouseLeave: function () { return setIsHover(false); } },
|
|
23
27
|
React__default["default"].createElement(ToolTip.ToolTip, { align: step === 0 ? 'left' : 'center', width: step === 0 ? '190px' : '222px' }, tooltip),
|
|
24
28
|
React__default["default"].createElement(Badge.Badge, { width: '30px', height: '30px', background: isHover
|
|
25
29
|
? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepperListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"StepperListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var PaginationButton = require('../Button/PaginationButton.js');
|
|
7
|
-
var Button = require('../Button/Button.js');
|
|
8
7
|
var typography = require('@citygross/typography');
|
|
9
8
|
var icons = require('@citygross/icons');
|
|
10
9
|
var StepperMobile_styles = require('./StepperMobile.styles.js');
|
|
11
10
|
var designTokens = require('@citygross/design-tokens');
|
|
11
|
+
var CgButton = require('../CgButton/CgButton.js');
|
|
12
12
|
|
|
13
13
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
14
14
|
|
|
@@ -28,7 +28,7 @@ function StepperMobile(_a) {
|
|
|
28
28
|
"/",
|
|
29
29
|
steps.length),
|
|
30
30
|
React__default["default"].createElement(typography.H3, null, steps[current].text))),
|
|
31
|
-
current !== steps.length - 1 && (React__default["default"].createElement(
|
|
31
|
+
current !== steps.length - 1 && (React__default["default"].createElement(CgButton.CgButton, { icon: React__default["default"].createElement(icons.Icons.ChevronRight, { color: (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.white }), flexReverse: true, disabled: !steps[current].complete, onClick: setCurrent }, buttonText))));
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
exports.StepperMobile = StepperMobile;
|
|
@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
9
9
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
11
|
|
|
12
|
-
var MobileStepperContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n padding: ", ";\n background: ", ";\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: ", ";\n"], ["\n padding: ", ";\n background: ", ";\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: ", ";\n"])), function (props) { var _a, _b; return "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm, "px ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.md, "px"); }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.stepperShadow; });
|
|
12
|
+
var MobileStepperContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n padding: ", ";\n background: ", ";\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-family: ", ";\n box-shadow: ", ";\n"], ["\n padding: ", ";\n background: ", ";\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-family: ", ";\n box-shadow: ", ";\n"])), function (props) { var _a, _b; return "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm, "px ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.md, "px"); }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.type.primary; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.stepperShadow; });
|
|
13
13
|
var Leftside = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n gap: ", "px;\n align-items: center;\n"], ["\n display: flex;\n gap: ", "px;\n align-items: center;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
|
|
14
14
|
var templateObject_1, templateObject_2;
|
|
15
15
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
2
|
import styled, { css } from 'styled-components';
|
|
3
3
|
import { Spinner } from '../Spinner/Spinner.js';
|
|
4
|
+
import { focusVisible } from '../../shared/global.styles.js';
|
|
4
5
|
|
|
5
6
|
var ButtonFontSize = function (size) {
|
|
6
7
|
switch (size) {
|
|
@@ -56,7 +57,7 @@ var SpinnerSize = function (size) {
|
|
|
56
57
|
return '26px';
|
|
57
58
|
}
|
|
58
59
|
};
|
|
59
|
-
var BaseButton = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n /* reset */\n
|
|
60
|
+
var BaseButton = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n /* reset */\n border: none;\n\n backface-visibility: hidden;\n cursor: pointer;\n border-radius: ", "px;\n /* overflow: hidden; */\n pointer-events: ", ";\n -webkit-font-smoothing: antialiased;\n user-select: ", ";\n\n position: relative;\n\n /* typography */\n\n font-family: ", ";\n font-weight: ", ";\n text-align: ", ";\n white-space: ", ";\n\n /* colors */\n\n background: ", ";\n\n color: ", ";\n\n /* Width & Height */\n\n width: ", ";\n\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n &::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n /* Hover Effect */\n\n &:hover {\n ::after {\n opacity: ", ";\n }\n ", ";\n }\n &:active {\n ::before {\n opacity: ", ";\n }\n ::after {\n opacity: 0;\n }\n }\n ", "\n /* Media Queries */\n\n @media (max-width: ", "px) {\n align-self: ", ";\n }\n"], ["\n /* reset */\n border: none;\n\n backface-visibility: hidden;\n cursor: pointer;\n border-radius: ", "px;\n /* overflow: hidden; */\n pointer-events: ", ";\n -webkit-font-smoothing: antialiased;\n user-select: ", ";\n\n position: relative;\n\n /* typography */\n\n font-family: ", ";\n font-weight: ", ";\n text-align: ", ";\n white-space: ", ";\n\n /* colors */\n\n background: ", ";\n\n color: ", ";\n\n /* Width & Height */\n\n width: ", ";\n\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n &::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n /* Hover Effect */\n\n &:hover {\n ::after {\n opacity: ", ";\n }\n ", ";\n }\n &:active {\n ::before {\n opacity: ", ";\n }\n ::after {\n opacity: 0;\n }\n }\n ", "\n /* Media Queries */\n\n @media (max-width: ", "px) {\n align-self: ", ";\n }\n"])), function (props) { var _a, _b; return (_a = props.borderRadius) !== null && _a !== void 0 ? _a : (_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall; }, function (props) { return (props.isDisabled ? 'none' : 'all'); }, function (props) { return props.isDisabled && 'none'; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.type.primary; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.weight.medium; }, function (props) { return (props.center ? 'center' : 'initial'); }, function (props) { return (props.noWrap ? 'nowrap' : 'normal'); }, function (props) { var _a, _b; return props.isDisabled ? (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium : props.color; }, function (props) {
|
|
60
61
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
61
62
|
return props.color === ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.secondary) ||
|
|
62
63
|
props.color === ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.darkest) ||
|
|
@@ -69,7 +70,7 @@ var BaseButton = styled.button(templateObject_1 || (templateObject_1 = __makeTem
|
|
|
69
70
|
return !props.isDisabled &&
|
|
70
71
|
props.hoverBackground &&
|
|
71
72
|
"background: ".concat(props.hoverBackground);
|
|
72
|
-
}, function (props) { return ((props === null || props === void 0 ? void 0 : props.noShadow) ? 0 : 1); }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { return (props.center ? 'center' : 'initial'); });
|
|
73
|
+
}, function (props) { return ((props === null || props === void 0 ? void 0 : props.noShadow) ? 0 : 1); }, focusVisible, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { return (props.center ? 'center' : 'initial'); });
|
|
73
74
|
var BasePrimaryCSS = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n\n /* shadow */\n ", ";\n\n /* Padding */\n\n padding: ", ";\n\n @media (min-width: ", "px) {\n font-size: ", ";\n\n padding: ", ";\n ", ";\n }\n"], ["\n font-size: ", ";\n line-height: ", ";\n\n /* shadow */\n ", ";\n\n /* Padding */\n\n padding: ", ";\n\n @media (min-width: ", "px) {\n font-size: ", ";\n\n padding: ", ";\n ", ";\n }\n"])), function (props) { return ButtonFontSize(props.xsSize || props.size); }, function (props) {
|
|
74
75
|
var _a, _b;
|
|
75
76
|
return props.size === 'small'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Button.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -5,14 +5,14 @@ import { Icons } from '@citygross/icons';
|
|
|
5
5
|
import { CgButton, EButtonVariant } from '../CgButton/CgButton.js';
|
|
6
6
|
|
|
7
7
|
var CartCard = function (_a) {
|
|
8
|
-
var markings = _a.markings, title = _a.title, description = _a.description, showDelete = _a.showDelete, maxReachedWarning = _a.maxReachedWarning, value = _a.value, price = _a.price, image = _a.image, onDelete = _a.onDelete, _b = _a.maxValue, maxValue = _b === void 0 ? 999 : _b, secondaryDescription = _a.secondaryDescription, quanitytSelector = _a.quanitytSelector, _c = _a.titleLineClamp, titleLineClamp = _c === void 0 ? 1 : _c;
|
|
8
|
+
var markings = _a.markings, title = _a.title, description = _a.description, showDelete = _a.showDelete, maxReachedWarning = _a.maxReachedWarning, value = _a.value, price = _a.price, image = _a.image, titleLink = _a.titleLink, onDelete = _a.onDelete, _b = _a.maxValue, maxValue = _b === void 0 ? 999 : _b, secondaryDescription = _a.secondaryDescription, quanitytSelector = _a.quanitytSelector, _c = _a.titleLineClamp, titleLineClamp = _c === void 0 ? 1 : _c;
|
|
9
9
|
return (React.createElement(CartCardContainer, null,
|
|
10
10
|
React.createElement(CartCardImage, { src: image || FallbackIcon }),
|
|
11
11
|
React.createElement(CartCardInner, null,
|
|
12
12
|
React.createElement(CartCardInnerTop, null,
|
|
13
13
|
React.createElement(CartCardInfo, null,
|
|
14
14
|
markings && (React.createElement(MarkingsContainer, null, markings)),
|
|
15
|
-
title && (React.createElement(CartCardTitle, { titleLineClamp: titleLineClamp }, title)),
|
|
15
|
+
titleLink || title && (React.createElement(CartCardTitle, { titleLineClamp: titleLineClamp }, title)),
|
|
16
16
|
description && description),
|
|
17
17
|
showDelete && (React.createElement(CartCardDelete, null,
|
|
18
18
|
React.createElement(CgButton, { onClick: onDelete, variant: EButtonVariant.secondary, icon: React.createElement(Icons.Trash, { width: 16, height: 16 }) })))),
|
|
@@ -19,7 +19,7 @@ var EButtonVariant;
|
|
|
19
19
|
var CgButton = function (_a) {
|
|
20
20
|
var size = _a.size, variant = _a.variant, icon = _a.icon, flexReverse = _a.flexReverse, disabled = _a.disabled, onClick = _a.onClick, children = _a.children, loading = _a.loading, fullWidth = _a.fullWidth, buttonRef = _a.buttonRef, round = _a.round, _b = _a.shouldPreventDefault, shouldPreventDefault = _b === void 0 ? true : _b;
|
|
21
21
|
return (React.createElement(CgButtonContainer, { ref: buttonRef, round: round, size: size, variant: variant, isIconOnly: !children, flexReverse: flexReverse, disabled: disabled || loading, fullWidth: fullWidth, loading: loading, onKeyDown: function (event) {
|
|
22
|
-
if (event.key === 'Enter') {
|
|
22
|
+
if (event.key === 'Enter' && !disabled) {
|
|
23
23
|
onClick && onClick();
|
|
24
24
|
}
|
|
25
25
|
}, onClick: function (e) {
|
|
@@ -38,12 +38,12 @@ var buttonShadow = function (size, variant) {
|
|
|
38
38
|
return 'inset 0px -2px 0px rgba(0, 0, 0, 0.15)';
|
|
39
39
|
}
|
|
40
40
|
};
|
|
41
|
-
var CgButtonContainer = styled.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border-radius: ", "px;\n padding: ", ";\n cursor: pointer;\n outline: none;\n border: none;\n position: relative;\n ", "\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"], ["\n border-radius: ", "px;\n padding: ", ";\n cursor: pointer;\n outline: none;\n border: none;\n position: relative;\n ", "\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"])), function (props) { var _a; return props.round ? '100' : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
|
|
41
|
+
var CgButtonContainer = styled.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border-radius: ", "px;\n padding: ", ";\n cursor: pointer;\n outline: none;\n border: none;\n position: relative;\n ", "\n font-family: ", ";\n\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"], ["\n border-radius: ", "px;\n padding: ", ";\n cursor: pointer;\n outline: none;\n border: none;\n position: relative;\n ", "\n font-family: ", ";\n\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"])), function (props) { var _a; return props.round ? '100' : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, 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")
|
|
45
45
|
: buttonPadding(props.size, props.theme.spacings);
|
|
46
|
-
}, function (props) { return (props === null || props === void 0 ? void 0 : props.fullWidth) && "width: 100%;"; }, focusVisible, function (props) { return buttonShadow(props.size, props.variant); }, function (props) { var _a; return props.round ? '100' : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
|
|
46
|
+
}, function (props) { return (props === null || props === void 0 ? void 0 : props.fullWidth) && "width: 100%;"; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.type.primary; }, focusVisible, function (props) { return buttonShadow(props.size, props.variant); }, function (props) { var _a; return props.round ? '100' : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
|
|
47
47
|
switch (props.variant) {
|
|
48
48
|
case EButtonVariant.primary:
|
|
49
49
|
return CgPrimary;
|
|
@@ -14,7 +14,11 @@ function DeliverySlotItem(_a) {
|
|
|
14
14
|
setWeekDay(momentDate.format('dddd').toLocaleLowerCase());
|
|
15
15
|
}, [width]);
|
|
16
16
|
var slotRef = useRef(null);
|
|
17
|
-
return (React.createElement(DeliverySlotItemContainer, { onClick: onSelect,
|
|
17
|
+
return (React.createElement(DeliverySlotItemContainer, { onClick: onSelect, onKeyDown: function (event) {
|
|
18
|
+
if (event.key === 'Enter') {
|
|
19
|
+
onSelect && onSelect();
|
|
20
|
+
}
|
|
21
|
+
}, ref: slotRef, tabIndex: 0, role: "button", selected: selected },
|
|
18
22
|
React.createElement(DeliverySlotContainer, { selected: selected },
|
|
19
23
|
React.createElement(DeliverySlotHeaderText, null,
|
|
20
24
|
React.createElement(BodyText, { fontWeight: 'medium' }, capitalizeFirstLetter(weekDay)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DeliverySlotItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DeliverySlotItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -7,7 +7,12 @@ import { CheckboxWrapper, Checkbox as Checkbox$1, CheckIcon } from './Checkbox.s
|
|
|
7
7
|
function Checkbox(_a) {
|
|
8
8
|
var onChange = _a.onChange, _b = _a.size, size = _b === void 0 ? 24 : _b, _c = _a.iconSize, iconSize = _c === void 0 ? 16 : _c, inputProps = __rest(_a, ["onChange", "size", "iconSize"]);
|
|
9
9
|
return (React.createElement(CheckboxWrapper, { size: size, whileTap: { scale: 0.9 }, whileHover: { scale: 1.1 } },
|
|
10
|
-
React.createElement(Checkbox$1, __assign({ type: "checkbox", onChange: onChange,
|
|
10
|
+
React.createElement(Checkbox$1, __assign({ tabIndex: 0, type: "checkbox", onChange: onChange, onKeyDown: function (event) {
|
|
11
|
+
if (event.key === 'Enter' && onChange && !(inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled)) {
|
|
12
|
+
var syntheticEvent = __assign(__assign({}, event), { target: event.target });
|
|
13
|
+
onChange(syntheticEvent);
|
|
14
|
+
}
|
|
15
|
+
}, size: size }, inputProps)),
|
|
11
16
|
React.createElement(CheckIcon, null,
|
|
12
17
|
React.createElement(Icons.CheckMark, { color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette.alertGreen : 'white', width: iconSize }))));
|
|
13
18
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -3,8 +3,8 @@ import { motion } from 'framer-motion';
|
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
|
|
5
5
|
var CheckboxWrapper = styled(motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n border-radius: 2px;\n box-shadow: 0 0 0 1px ", " inset;\n box-sizing: border-box;\n width: ", "px;\n height: ", "px;\n min-height: ", "px;\n min-width: ", "px;\n z-index: 1;\n"], ["\n position: relative;\n display: inline-flex;\n border-radius: 2px;\n box-shadow: 0 0 0 1px ", " inset;\n box-sizing: border-box;\n width: ", "px;\n height: ", "px;\n min-height: ", "px;\n min-width: ", "px;\n z-index: 1;\n"])), function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium; }, function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.size; });
|
|
6
|
-
var CheckIcon = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n display:
|
|
7
|
-
var Checkbox = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", "px;\n height: ", "px;\n min-height: ", "px;\n min-width: ", "px;\n cursor: pointer;\n opacity: 0;\n z-index: 3;\n\n &:
|
|
6
|
+
var CheckIcon = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n border-radius: 2px;\n background: 'transparent';\n z-index: 2;\n > svg {\n opacity: 0;\n }\n"], ["\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n border-radius: 2px;\n background: 'transparent';\n z-index: 2;\n > svg {\n opacity: 0;\n }\n"])), function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium; });
|
|
7
|
+
var Checkbox = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", "px;\n height: ", "px;\n min-height: ", "px;\n min-width: ", "px;\n cursor: pointer;\n opacity: 0;\n z-index: 3;\n\n &:focus-visible + ", " {\n box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000, 0 0 0 6px #fff;\n transition: all 0.1s ease-in-out;\n }\n &:checked + ", " {\n opacity: 1;\n border: 1px solid ", ";\n background: #f2fdf2;\n\n > svg {\n opacity: 1;\n }\n }\n"], ["\n width: ", "px;\n height: ", "px;\n min-height: ", "px;\n min-width: ", "px;\n cursor: pointer;\n opacity: 0;\n z-index: 3;\n\n &:focus-visible + ", " {\n box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000, 0 0 0 6px #fff;\n transition: all 0.1s ease-in-out;\n }\n &:checked + ", " {\n opacity: 1;\n border: 1px solid ", ";\n background: #f2fdf2;\n\n > svg {\n opacity: 1;\n }\n }\n"])), function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.size; }, CheckIcon, CheckIcon, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.alertGreen; });
|
|
8
8
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
9
9
|
|
|
10
10
|
export { CheckIcon, Checkbox, CheckboxWrapper };
|
|
@@ -3,7 +3,11 @@ import { BaseRadioListItemContainer, RadioFlex, BaseRadioItemLeftWrapper, Styled
|
|
|
3
3
|
|
|
4
4
|
function RadioListItem(_a) {
|
|
5
5
|
var onClick = _a.onClick, selected = _a.selected, defaultDisabledString = _a.defaultDisabledString, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, disabledText = _a.disabledText, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children;
|
|
6
|
-
return (React.createElement(BaseRadioListItemContainer, { transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }
|
|
6
|
+
return (React.createElement(BaseRadioListItemContainer, { tabIndex: 0, role: 'checkbox', transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onKeyDown: function (event) {
|
|
7
|
+
if (event.key === 'Enter' && !isDisabled) {
|
|
8
|
+
onClick(value);
|
|
9
|
+
}
|
|
10
|
+
} },
|
|
7
11
|
React.createElement(RadioFlex, { wrapMobile: wrapMobile },
|
|
8
12
|
React.createElement(BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow },
|
|
9
13
|
React.createElement("div", null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -11,7 +11,11 @@ function StepperListItem(_a) {
|
|
|
11
11
|
var active = _a.active, firstChild = _a.firstChild, step = _a.step, onClick = _a.onClick, disabled = _a.disabled, complete = _a.complete, tooltip = _a.tooltip, children = _a.children;
|
|
12
12
|
var _l = useState(false), isHover = _l[0], setIsHover = _l[1];
|
|
13
13
|
return (React.createElement(React.Fragment, null,
|
|
14
|
-
React.createElement(BaseStepperItem, { active: active,
|
|
14
|
+
React.createElement(BaseStepperItem, { active: active, tabIndex: 0, role: 'button', onClick: disabled ? function () { } : onClick, onKeyDown: function (event) {
|
|
15
|
+
if (event.key === 'Enter' && !disabled) {
|
|
16
|
+
onClick && onClick();
|
|
17
|
+
}
|
|
18
|
+
}, disabled: disabled, firstChild: firstChild, onMouseEnter: function () { return setIsHover(true); }, onMouseLeave: function () { return setIsHover(false); } },
|
|
15
19
|
React.createElement(ToolTip, { align: step === 0 ? 'left' : 'center', width: step === 0 ? '190px' : '222px' }, tooltip),
|
|
16
20
|
React.createElement(Badge, { width: '30px', height: '30px', background: isHover
|
|
17
21
|
? (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.white
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepperListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"StepperListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { PaginationButton } from '../Button/PaginationButton.js';
|
|
3
|
-
import { Button } from '../Button/Button.js';
|
|
4
3
|
import { BodyText, TextTypes, H3 } from '@citygross/typography';
|
|
5
4
|
import { Icons } from '@citygross/icons';
|
|
6
5
|
import { MobileStepperContainer, Leftside } from './StepperMobile.styles.js';
|
|
7
6
|
import { theme } from '@citygross/design-tokens';
|
|
7
|
+
import { CgButton } from '../CgButton/CgButton.js';
|
|
8
8
|
|
|
9
9
|
function StepperMobile(_a) {
|
|
10
10
|
var _b, _c;
|
|
@@ -20,7 +20,7 @@ function StepperMobile(_a) {
|
|
|
20
20
|
"/",
|
|
21
21
|
steps.length),
|
|
22
22
|
React.createElement(H3, null, steps[current].text))),
|
|
23
|
-
current !== steps.length - 1 && (React.createElement(
|
|
23
|
+
current !== steps.length - 1 && (React.createElement(CgButton, { icon: React.createElement(Icons.ChevronRight, { color: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.white }), flexReverse: true, disabled: !steps[current].complete, onClick: setCurrent }, buttonText))));
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
export { StepperMobile };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
|
-
var MobileStepperContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: ", ";\n background: ", ";\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: ", ";\n"], ["\n padding: ", ";\n background: ", ";\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: ", ";\n"])), function (props) { var _a, _b; return "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm, "px ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.md, "px"); }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.stepperShadow; });
|
|
4
|
+
var MobileStepperContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: ", ";\n background: ", ";\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-family: ", ";\n box-shadow: ", ";\n"], ["\n padding: ", ";\n background: ", ";\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-family: ", ";\n box-shadow: ", ";\n"])), function (props) { var _a, _b; return "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm, "px ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.md, "px"); }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.type.primary; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.stepperShadow; });
|
|
5
5
|
var Leftside = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n gap: ", "px;\n align-items: center;\n"], ["\n display: flex;\n gap: ", "px;\n align-items: center;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
|
|
6
6
|
var templateObject_1, templateObject_2;
|
|
7
7
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.78",
|
|
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": "
|
|
79
|
+
"gitHead": "9f24dab92a2ab9367e8833fdbbc0555dde4b04e0"
|
|
80
80
|
}
|