@citygross/components 0.8.151 → 0.8.153
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/AlertBox/AlertBox.d.ts +10 -11
- package/build/@types/components/AlertBox/AlertBox.styles.d.ts +3 -10
- package/build/@types/components/ScreenReader/ScreenReader.d.ts +2 -2
- package/build/@types/helpers/alert-box.d.ts +7 -0
- package/build/cjs/components/src/components/AddressBlock/AddressBlock.js +4 -4
- package/build/cjs/components/src/components/AlertBox/AlertBox.js +18 -8
- package/build/cjs/components/src/components/AlertBox/AlertBox.js.map +1 -1
- package/build/cjs/components/src/components/AlertBox/AlertBox.styles.js +25 -4
- package/build/cjs/components/src/components/AlertBox/AlertBox.styles.js.map +1 -1
- package/build/cjs/components/src/components/FormElements/Input/Input.js +2 -2
- package/build/cjs/components/src/components/SideModal/SideModal.js +3 -2
- package/build/cjs/components/src/components/SideModal/SideModal.js.map +1 -1
- package/build/cjs/components/src/components/WarningLabel/WarningLabel.js +4 -4
- package/build/cjs/components/src/helpers/alert-box.js +35 -0
- package/build/cjs/components/src/helpers/alert-box.js.map +1 -0
- package/build/cjs/components/src/index.js +4 -0
- package/build/cjs/components/src/index.js.map +1 -1
- package/build/es/components/src/components/AddressBlock/AddressBlock.js +4 -4
- package/build/es/components/src/components/AlertBox/AlertBox.js +20 -10
- package/build/es/components/src/components/AlertBox/AlertBox.js.map +1 -1
- package/build/es/components/src/components/AlertBox/AlertBox.styles.js +26 -4
- package/build/es/components/src/components/AlertBox/AlertBox.styles.js.map +1 -1
- package/build/es/components/src/components/FormElements/Input/Input.js +3 -3
- package/build/es/components/src/components/SideModal/SideModal.js +3 -2
- package/build/es/components/src/components/SideModal/SideModal.js.map +1 -1
- package/build/es/components/src/components/WarningLabel/WarningLabel.js +4 -4
- package/build/es/components/src/helpers/alert-box.js +31 -0
- package/build/es/components/src/helpers/alert-box.js.map +1 -0
- package/build/es/components/src/index.js +1 -1
- package/package.json +2 -2
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
export declare enum EAlertBoxVariant {
|
|
3
|
+
alert = "alert",
|
|
4
|
+
info = "info",
|
|
5
|
+
warning = "warning"
|
|
6
|
+
}
|
|
2
7
|
export declare type TAlertBox = {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
withArrow?: boolean;
|
|
9
|
-
arrowPlacement?: 'left' | 'right';
|
|
10
|
-
arrowSpacing?: number;
|
|
11
|
-
padding?: number;
|
|
12
|
-
};
|
|
13
|
-
export declare function AlertBox({ background, borderColor, icon, iconMinWidth, withArrow, arrowSpacing, arrowPlacement, padding, children }: TAlertBox): JSX.Element;
|
|
8
|
+
headLine?: string;
|
|
9
|
+
text?: string;
|
|
10
|
+
variant: EAlertBoxVariant;
|
|
11
|
+
} & React.HTMLAttributes<HTMLDivElement>;
|
|
12
|
+
export declare function AlertBox({ headLine, text, variant, ...props }: TAlertBox): JSX.Element;
|
|
@@ -1,11 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
padding: number;
|
|
5
|
-
};
|
|
6
|
-
declare type TAlertBoxIcon = {
|
|
7
|
-
minWidth?: number;
|
|
8
|
-
};
|
|
9
|
-
export declare const AlertBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseAlertBox, never>;
|
|
10
|
-
export declare const IconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TAlertBoxIcon, never>;
|
|
1
|
+
import { TAlertBoxVariantAttributes } from '../../helpers/alert-box';
|
|
2
|
+
declare type TAlertBoxStyle = Omit<TAlertBoxVariantAttributes, 'iconColor'>;
|
|
3
|
+
export declare const AlertBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TAlertBoxStyle, never>;
|
|
11
4
|
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { EAlertBoxVariant } from '../components/AlertBox/AlertBox';
|
|
2
|
+
export declare type TAlertBoxVariantAttributes = {
|
|
3
|
+
backgroundColor?: string;
|
|
4
|
+
borderColor?: string;
|
|
5
|
+
iconColor?: string;
|
|
6
|
+
};
|
|
7
|
+
export declare const getAlertBoxAttributes: (alertBoxVariant: EAlertBoxVariant) => TAlertBoxVariantAttributes;
|
|
@@ -5,14 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var typography = require('@citygross/typography');
|
|
7
7
|
var AddressBlock_styles = require('./AddressBlock.styles.js');
|
|
8
|
-
require('
|
|
9
|
-
require('@citygross/icons');
|
|
10
|
-
require('../BoxArrow/BoxArrow.styles.js');
|
|
11
|
-
require('../AlertBox/AlertBox.styles.js');
|
|
8
|
+
require('../AlertBox/AlertBox.js');
|
|
12
9
|
require('../BackButton/BackButton.styles.js');
|
|
10
|
+
require('@citygross/icons');
|
|
13
11
|
require('../BackgroundImage/BackgroundImage.styles.js');
|
|
14
12
|
require('../Badge/Badge.styles.js');
|
|
15
13
|
require('../../../../_virtual/_tslib.js');
|
|
14
|
+
require('../BoxArrow/BoxArrow.styles.js');
|
|
16
15
|
require('../Box/Box.styles.js');
|
|
17
16
|
require('../Button/Button.js');
|
|
18
17
|
require('@citygross/design-tokens');
|
|
@@ -27,6 +26,7 @@ require('../CartItemSummary/CartItemSummary.styles.js');
|
|
|
27
26
|
require('../CartSubTotal/CartSubTotal.js');
|
|
28
27
|
require('../Divider/Divider.styles.js');
|
|
29
28
|
require('../CartSummary/CartSummary.styles.js');
|
|
29
|
+
require('../../../../design-tokens/build/index.js');
|
|
30
30
|
require('../CgButton/CgButton.styles.js');
|
|
31
31
|
require('../Chips/Chip.styles.js');
|
|
32
32
|
require('../Spinner/Spinner.styles.js');
|
|
@@ -2,23 +2,33 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var _tslib = require('../../../../_virtual/_tslib.js');
|
|
5
6
|
var React = require('react');
|
|
6
|
-
var
|
|
7
|
-
var
|
|
7
|
+
var icons = require('@citygross/icons');
|
|
8
|
+
var alertBox = require('../../helpers/alert-box.js');
|
|
8
9
|
var AlertBox_styles = require('./AlertBox.styles.js');
|
|
10
|
+
var typography = require('@citygross/typography');
|
|
11
|
+
var designTokens = require('@citygross/design-tokens');
|
|
9
12
|
|
|
10
13
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
14
|
|
|
12
15
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
16
|
|
|
17
|
+
exports.EAlertBoxVariant = void 0;
|
|
18
|
+
(function (EAlertBoxVariant) {
|
|
19
|
+
EAlertBoxVariant["alert"] = "alert";
|
|
20
|
+
EAlertBoxVariant["info"] = "info";
|
|
21
|
+
EAlertBoxVariant["warning"] = "warning";
|
|
22
|
+
})(exports.EAlertBoxVariant || (exports.EAlertBoxVariant = {}));
|
|
14
23
|
function AlertBox(_a) {
|
|
15
24
|
var _b, _c;
|
|
16
|
-
var
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
React__default["default"].createElement(
|
|
20
|
-
|
|
21
|
-
|
|
25
|
+
var headLine = _a.headLine, text = _a.text, _d = _a.variant, variant = _d === void 0 ? exports.EAlertBoxVariant.info : _d, props = _tslib.__rest(_a, ["headLine", "text", "variant"]);
|
|
26
|
+
var _e = alertBox.getAlertBoxAttributes(variant), backgroundColor = _e.backgroundColor, borderColor = _e.borderColor, iconColor = _e.iconColor;
|
|
27
|
+
return (React__default["default"].createElement(AlertBox_styles.AlertBox, _tslib.__assign({ backgroundColor: backgroundColor, borderColor: borderColor }, props),
|
|
28
|
+
React__default["default"].createElement(icons.Icons.Info, { color: iconColor, height: 16, width: 16 }),
|
|
29
|
+
React__default["default"].createElement("div", null,
|
|
30
|
+
headLine && (React__default["default"].createElement(typography.BodyText, { color: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkest, fontWeight: "medium" }, headLine)),
|
|
31
|
+
text && React__default["default"].createElement(typography.BodyText, { color: (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.darkest }, text))));
|
|
22
32
|
}
|
|
23
33
|
|
|
24
34
|
exports.AlertBox = AlertBox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertBox.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AlertBox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -9,10 +9,31 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
9
9
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
11
|
|
|
12
|
-
var AlertBox = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n background: ", ";\n border-left: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n
|
|
13
|
-
var
|
|
14
|
-
|
|
12
|
+
var AlertBox = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n background: ", ";\n border-left: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n display: flex;\n gap: ", "px;\n padding: ", "px;\n\n svg {\n margin-top: ", "px;\n }\n"], ["\n background: ", ";\n border-left: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n display: flex;\n gap: ", "px;\n padding: ", "px;\n\n svg {\n margin-top: ", "px;\n }\n"])), function (_a) {
|
|
13
|
+
var backgroundColor = _a.backgroundColor;
|
|
14
|
+
return backgroundColor;
|
|
15
|
+
}, function (_a) {
|
|
16
|
+
var _b;
|
|
17
|
+
var borderColor = _a.borderColor, theme = _a.theme;
|
|
18
|
+
return "".concat((_b = theme.constants) === null || _b === void 0 ? void 0 : _b.infoBlockBorderWidth, "px solid ").concat(borderColor);
|
|
19
|
+
}, function (_a) {
|
|
20
|
+
var _b;
|
|
21
|
+
var theme = _a.theme;
|
|
22
|
+
return "".concat((_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall, "px");
|
|
23
|
+
}, function (_a) {
|
|
24
|
+
var _b;
|
|
25
|
+
var theme = _a.theme;
|
|
26
|
+
return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.layoutShadow;
|
|
27
|
+
}, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (_a) {
|
|
28
|
+
var _b;
|
|
29
|
+
var theme = _a.theme;
|
|
30
|
+
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
|
|
31
|
+
}, function (_a) {
|
|
32
|
+
var _b;
|
|
33
|
+
var theme = _a.theme;
|
|
34
|
+
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxxs;
|
|
35
|
+
});
|
|
36
|
+
var templateObject_1;
|
|
15
37
|
|
|
16
38
|
exports.AlertBox = AlertBox;
|
|
17
|
-
exports.IconContainer = IconContainer;
|
|
18
39
|
//# sourceMappingURL=AlertBox.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertBox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AlertBox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -23,9 +23,9 @@ var Input = function (_a) {
|
|
|
23
23
|
var sizeAttributes = formElement.getSizeAttributes(size);
|
|
24
24
|
var errorId = "".concat(id, "-error");
|
|
25
25
|
return (React__default["default"].createElement(FormElement_styles.Wrapper, null,
|
|
26
|
-
hideLabel ? (React__default["default"].createElement(ScreenReader.ScreenReader, { string: label })) : (React__default["default"].createElement(
|
|
26
|
+
React__default["default"].createElement(FormElement_styles.Label, { htmlFor: id }, hideLabel ? (React__default["default"].createElement(ScreenReader.ScreenReader, { string: label })) : (React__default["default"].createElement(React.Fragment, null,
|
|
27
27
|
label,
|
|
28
|
-
required ? ' *' : '')),
|
|
28
|
+
required ? ' *' : ''))),
|
|
29
29
|
React__default["default"].createElement(Input_styles.InputWrapper, null,
|
|
30
30
|
React__default["default"].createElement(Input_styles.InputContainer, null,
|
|
31
31
|
elementLeft && (React__default["default"].createElement(Input_styles.AbsoluteContainer, null, elementLeft)),
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var _tslib = require('../../../../_virtual/_tslib.js');
|
|
5
6
|
var React = require('react');
|
|
6
7
|
var framerMotion = require('framer-motion');
|
|
7
8
|
var reactDom = require('react-dom');
|
|
@@ -14,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
14
15
|
|
|
15
16
|
var SideModal = React.forwardRef(function (_a, ref) {
|
|
16
17
|
var _b, _c, _d;
|
|
17
|
-
var _e = _a.background, background = _e === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white : _e, children = _a.children, isVisible = _a.isVisible, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, onBackdropClick = _a.onBackdropClick, _f = _a.overlayBackground, overlayBackground = _f === void 0 ? (_d = (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.darkOverlay) !== null && _d !== void 0 ? _d : '' : _f, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, slideFrom = _a.slideFrom, _h = _a.width, width = _h === void 0 ? 375 : _h;
|
|
18
|
+
var _e = _a.background, background = _e === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white : _e, children = _a.children, isVisible = _a.isVisible, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, onBackdropClick = _a.onBackdropClick, _f = _a.overlayBackground, overlayBackground = _f === void 0 ? (_d = (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.darkOverlay) !== null && _d !== void 0 ? _d : '' : _f, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, slideFrom = _a.slideFrom, _h = _a.width, width = _h === void 0 ? 375 : _h, props = _tslib.__rest(_a, ["background", "children", "isVisible", "maxHeight", "maxWidth", "onBackdropClick", "overlayBackground", "querySelector", "slideFrom", "width"]);
|
|
18
19
|
var domSafe = typeof document !== 'undefined';
|
|
19
20
|
return domSafe
|
|
20
21
|
? reactDom.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, isVisible && (React__default["default"].createElement(SideModal_styles.SideModalOverlay, { animate: { opacity: 1 }, exit: { opacity: 0 }, initial: { opacity: 0 }, maxHeight: maxHeight, onMouseDown: function (e) {
|
|
@@ -24,7 +25,7 @@ var SideModal = React.forwardRef(function (_a, ref) {
|
|
|
24
25
|
}, overlayBackground: overlayBackground, ref: ref, transition: {
|
|
25
26
|
type: 'just'
|
|
26
27
|
} },
|
|
27
|
-
React__default["default"].createElement(SideModal_styles.SideModalContainer, { animate: { x: 0 }, "aria-modal": "true", background: background, exit: { x: slideFrom === 'left' ? '-100%' : '100%' }, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, maxHeight: maxHeight, maxWidth: maxWidth, onClick: function (e) { return e.stopPropagation(); }, role: "dialog", slideFrom: slideFrom, transition: { type: 'just' }, width: width }, children)))), document.querySelector(querySelector) || document.body)
|
|
28
|
+
React__default["default"].createElement(SideModal_styles.SideModalContainer, _tslib.__assign({ animate: { x: 0 }, "aria-modal": "true", background: background, exit: { x: slideFrom === 'left' ? '-100%' : '100%' }, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, maxHeight: maxHeight, maxWidth: maxWidth, onClick: function (e) { return e.stopPropagation(); }, role: "dialog", slideFrom: slideFrom, transition: { type: 'just' }, width: width }, props), children)))), document.querySelector(querySelector) || document.body)
|
|
28
29
|
: null;
|
|
29
30
|
});
|
|
30
31
|
SideModal.displayName = 'SideModal';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SideModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -5,14 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
require('@citygross/typography');
|
|
7
7
|
require('../AddressBlock/AddressBlock.styles.js');
|
|
8
|
-
require('
|
|
9
|
-
require('@citygross/icons');
|
|
10
|
-
require('../BoxArrow/BoxArrow.styles.js');
|
|
11
|
-
require('../AlertBox/AlertBox.styles.js');
|
|
8
|
+
require('../AlertBox/AlertBox.js');
|
|
12
9
|
require('../BackButton/BackButton.styles.js');
|
|
10
|
+
require('@citygross/icons');
|
|
13
11
|
require('../BackgroundImage/BackgroundImage.styles.js');
|
|
14
12
|
require('../Badge/Badge.styles.js');
|
|
15
13
|
require('../../../../_virtual/_tslib.js');
|
|
14
|
+
require('../BoxArrow/BoxArrow.styles.js');
|
|
16
15
|
require('../Box/Box.styles.js');
|
|
17
16
|
require('../Button/Button.js');
|
|
18
17
|
require('@citygross/design-tokens');
|
|
@@ -27,6 +26,7 @@ require('../CartItemSummary/CartItemSummary.styles.js');
|
|
|
27
26
|
require('../CartSubTotal/CartSubTotal.js');
|
|
28
27
|
require('../Divider/Divider.styles.js');
|
|
29
28
|
require('../CartSummary/CartSummary.styles.js');
|
|
29
|
+
require('../../../../design-tokens/build/index.js');
|
|
30
30
|
require('../CgButton/CgButton.styles.js');
|
|
31
31
|
require('../Chips/Chip.styles.js');
|
|
32
32
|
require('../Spinner/Spinner.styles.js');
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var designTokens = require('@citygross/design-tokens');
|
|
6
|
+
var AlertBox = require('../components/AlertBox/AlertBox.js');
|
|
7
|
+
|
|
8
|
+
var getAlertBoxAttributes = function (alertBoxVariant) {
|
|
9
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
10
|
+
switch (alertBoxVariant) {
|
|
11
|
+
case AlertBox.EAlertBoxVariant.alert:
|
|
12
|
+
return {
|
|
13
|
+
backgroundColor: (_a = designTokens.theme.palette) === null || _a === void 0 ? void 0 : _a.yellowLighter,
|
|
14
|
+
borderColor: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.brandYellow,
|
|
15
|
+
iconColor: (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.darkest
|
|
16
|
+
};
|
|
17
|
+
case AlertBox.EAlertBoxVariant.info:
|
|
18
|
+
return {
|
|
19
|
+
backgroundColor: (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.blueLight,
|
|
20
|
+
borderColor: (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.brandBlue,
|
|
21
|
+
iconColor: (_f = designTokens.theme.palette) === null || _f === void 0 ? void 0 : _f.brandBlue
|
|
22
|
+
};
|
|
23
|
+
case AlertBox.EAlertBoxVariant.warning:
|
|
24
|
+
return {
|
|
25
|
+
backgroundColor: (_g = designTokens.theme.palette) === null || _g === void 0 ? void 0 : _g.redLight,
|
|
26
|
+
borderColor: (_h = designTokens.theme.palette) === null || _h === void 0 ? void 0 : _h.priceTagRed,
|
|
27
|
+
iconColor: (_j = designTokens.theme.palette) === null || _j === void 0 ? void 0 : _j.alertRed
|
|
28
|
+
};
|
|
29
|
+
default:
|
|
30
|
+
return {};
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
exports.getAlertBoxAttributes = getAlertBoxAttributes;
|
|
35
|
+
//# sourceMappingURL=alert-box.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert-box.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -105,6 +105,10 @@ var button = require('./helpers/button.js');
|
|
|
105
105
|
|
|
106
106
|
exports.AddressBlock = AddressBlock.AddressBlock;
|
|
107
107
|
exports.AlertBox = AlertBox.AlertBox;
|
|
108
|
+
Object.defineProperty(exports, 'EAlertBoxVariant', {
|
|
109
|
+
enumerable: true,
|
|
110
|
+
get: function () { return AlertBox.EAlertBoxVariant; }
|
|
111
|
+
});
|
|
108
112
|
exports.BackButton = BackButton.BackButton;
|
|
109
113
|
exports.BackgroundImage = BackgroundImage.BackgroundImage;
|
|
110
114
|
exports.Badge = Badge.Badge;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { H3, BodyText } from '@citygross/typography';
|
|
3
3
|
import { AddressOption } from './AddressBlock.styles.js';
|
|
4
|
-
import '
|
|
5
|
-
import '@citygross/icons';
|
|
6
|
-
import '../BoxArrow/BoxArrow.styles.js';
|
|
7
|
-
import '../AlertBox/AlertBox.styles.js';
|
|
4
|
+
import '../AlertBox/AlertBox.js';
|
|
8
5
|
import '../BackButton/BackButton.styles.js';
|
|
6
|
+
import '@citygross/icons';
|
|
9
7
|
import '../BackgroundImage/BackgroundImage.styles.js';
|
|
10
8
|
import '../Badge/Badge.styles.js';
|
|
11
9
|
import '../../../../_virtual/_tslib.js';
|
|
10
|
+
import '../BoxArrow/BoxArrow.styles.js';
|
|
12
11
|
import '../Box/Box.styles.js';
|
|
13
12
|
import '../Button/Button.js';
|
|
14
13
|
import '@citygross/design-tokens';
|
|
@@ -23,6 +22,7 @@ import '../CartItemSummary/CartItemSummary.styles.js';
|
|
|
23
22
|
import '../CartSubTotal/CartSubTotal.js';
|
|
24
23
|
import '../Divider/Divider.styles.js';
|
|
25
24
|
import '../CartSummary/CartSummary.styles.js';
|
|
25
|
+
import '../../../../design-tokens/build/index.js';
|
|
26
26
|
import '../CgButton/CgButton.styles.js';
|
|
27
27
|
import '../Chips/Chip.styles.js';
|
|
28
28
|
import '../Spinner/Spinner.styles.js';
|
|
@@ -1,17 +1,27 @@
|
|
|
1
|
+
import { __rest, __assign } from '../../../../_virtual/_tslib.js';
|
|
1
2
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import { AlertBox as AlertBox$1
|
|
3
|
+
import { Icons } from '@citygross/icons';
|
|
4
|
+
import { getAlertBoxAttributes } from '../../helpers/alert-box.js';
|
|
5
|
+
import { AlertBox as AlertBox$1 } from './AlertBox.styles.js';
|
|
6
|
+
import { BodyText } from '@citygross/typography';
|
|
7
|
+
import { theme } from '@citygross/design-tokens';
|
|
5
8
|
|
|
9
|
+
var EAlertBoxVariant;
|
|
10
|
+
(function (EAlertBoxVariant) {
|
|
11
|
+
EAlertBoxVariant["alert"] = "alert";
|
|
12
|
+
EAlertBoxVariant["info"] = "info";
|
|
13
|
+
EAlertBoxVariant["warning"] = "warning";
|
|
14
|
+
})(EAlertBoxVariant || (EAlertBoxVariant = {}));
|
|
6
15
|
function AlertBox(_a) {
|
|
7
16
|
var _b, _c;
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
React.createElement(
|
|
12
|
-
|
|
13
|
-
|
|
17
|
+
var headLine = _a.headLine, text = _a.text, _d = _a.variant, variant = _d === void 0 ? EAlertBoxVariant.info : _d, props = __rest(_a, ["headLine", "text", "variant"]);
|
|
18
|
+
var _e = getAlertBoxAttributes(variant), backgroundColor = _e.backgroundColor, borderColor = _e.borderColor, iconColor = _e.iconColor;
|
|
19
|
+
return (React.createElement(AlertBox$1, __assign({ backgroundColor: backgroundColor, borderColor: borderColor }, props),
|
|
20
|
+
React.createElement(Icons.Info, { color: iconColor, height: 16, width: 16 }),
|
|
21
|
+
React.createElement("div", null,
|
|
22
|
+
headLine && (React.createElement(BodyText, { color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest, fontWeight: "medium" }, headLine)),
|
|
23
|
+
text && React.createElement(BodyText, { color: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.darkest }, text))));
|
|
14
24
|
}
|
|
15
25
|
|
|
16
|
-
export { AlertBox };
|
|
26
|
+
export { AlertBox, EAlertBoxVariant };
|
|
17
27
|
//# sourceMappingURL=AlertBox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertBox.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AlertBox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,9 +1,31 @@
|
|
|
1
1
|
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
|
-
var AlertBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n border-left: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n
|
|
5
|
-
var
|
|
6
|
-
|
|
4
|
+
var AlertBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n border-left: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n display: flex;\n gap: ", "px;\n padding: ", "px;\n\n svg {\n margin-top: ", "px;\n }\n"], ["\n background: ", ";\n border-left: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n display: flex;\n gap: ", "px;\n padding: ", "px;\n\n svg {\n margin-top: ", "px;\n }\n"])), function (_a) {
|
|
5
|
+
var backgroundColor = _a.backgroundColor;
|
|
6
|
+
return backgroundColor;
|
|
7
|
+
}, function (_a) {
|
|
8
|
+
var _b;
|
|
9
|
+
var borderColor = _a.borderColor, theme = _a.theme;
|
|
10
|
+
return "".concat((_b = theme.constants) === null || _b === void 0 ? void 0 : _b.infoBlockBorderWidth, "px solid ").concat(borderColor);
|
|
11
|
+
}, function (_a) {
|
|
12
|
+
var _b;
|
|
13
|
+
var theme = _a.theme;
|
|
14
|
+
return "".concat((_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall, "px");
|
|
15
|
+
}, function (_a) {
|
|
16
|
+
var _b;
|
|
17
|
+
var theme = _a.theme;
|
|
18
|
+
return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.layoutShadow;
|
|
19
|
+
}, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (_a) {
|
|
20
|
+
var _b;
|
|
21
|
+
var theme = _a.theme;
|
|
22
|
+
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
|
|
23
|
+
}, function (_a) {
|
|
24
|
+
var _b;
|
|
25
|
+
var theme = _a.theme;
|
|
26
|
+
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxxs;
|
|
27
|
+
});
|
|
28
|
+
var templateObject_1;
|
|
7
29
|
|
|
8
|
-
export { AlertBox
|
|
30
|
+
export { AlertBox };
|
|
9
31
|
//# sourceMappingURL=AlertBox.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertBox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AlertBox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __rest, __assign } from '../../../../../_virtual/_tslib.js';
|
|
2
|
-
import React from 'react';
|
|
2
|
+
import React, { Fragment } from 'react';
|
|
3
3
|
import { theme } from '@citygross/design-tokens';
|
|
4
4
|
import { BodyText } from '@citygross/typography';
|
|
5
5
|
import { getSizeAttributes } from '../../../helpers/form-element.js';
|
|
@@ -15,9 +15,9 @@ var Input = function (_a) {
|
|
|
15
15
|
var sizeAttributes = getSizeAttributes(size);
|
|
16
16
|
var errorId = "".concat(id, "-error");
|
|
17
17
|
return (React.createElement(Wrapper, null,
|
|
18
|
-
hideLabel ? (React.createElement(ScreenReader, { string: label })) : (React.createElement(
|
|
18
|
+
React.createElement(Label, { htmlFor: id }, hideLabel ? (React.createElement(ScreenReader, { string: label })) : (React.createElement(Fragment, null,
|
|
19
19
|
label,
|
|
20
|
-
required ? ' *' : '')),
|
|
20
|
+
required ? ' *' : ''))),
|
|
21
21
|
React.createElement(InputWrapper, null,
|
|
22
22
|
React.createElement(InputContainer, null,
|
|
23
23
|
elementLeft && (React.createElement(AbsoluteContainer, null, elementLeft)),
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { __rest, __assign } from '../../../../_virtual/_tslib.js';
|
|
1
2
|
import React, { forwardRef } from 'react';
|
|
2
3
|
import { AnimatePresence } from 'framer-motion';
|
|
3
4
|
import { createPortal } from 'react-dom';
|
|
@@ -6,7 +7,7 @@ import { theme } from '@citygross/design-tokens';
|
|
|
6
7
|
|
|
7
8
|
var SideModal = forwardRef(function (_a, ref) {
|
|
8
9
|
var _b, _c, _d;
|
|
9
|
-
var _e = _a.background, background = _e === void 0 ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white : _e, children = _a.children, isVisible = _a.isVisible, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, onBackdropClick = _a.onBackdropClick, _f = _a.overlayBackground, overlayBackground = _f === void 0 ? (_d = (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.darkOverlay) !== null && _d !== void 0 ? _d : '' : _f, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, slideFrom = _a.slideFrom, _h = _a.width, width = _h === void 0 ? 375 : _h;
|
|
10
|
+
var _e = _a.background, background = _e === void 0 ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white : _e, children = _a.children, isVisible = _a.isVisible, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, onBackdropClick = _a.onBackdropClick, _f = _a.overlayBackground, overlayBackground = _f === void 0 ? (_d = (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.darkOverlay) !== null && _d !== void 0 ? _d : '' : _f, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, slideFrom = _a.slideFrom, _h = _a.width, width = _h === void 0 ? 375 : _h, props = __rest(_a, ["background", "children", "isVisible", "maxHeight", "maxWidth", "onBackdropClick", "overlayBackground", "querySelector", "slideFrom", "width"]);
|
|
10
11
|
var domSafe = typeof document !== 'undefined';
|
|
11
12
|
return domSafe
|
|
12
13
|
? createPortal(React.createElement(AnimatePresence, null, isVisible && (React.createElement(SideModalOverlay, { animate: { opacity: 1 }, exit: { opacity: 0 }, initial: { opacity: 0 }, maxHeight: maxHeight, onMouseDown: function (e) {
|
|
@@ -16,7 +17,7 @@ var SideModal = forwardRef(function (_a, ref) {
|
|
|
16
17
|
}, overlayBackground: overlayBackground, ref: ref, transition: {
|
|
17
18
|
type: 'just'
|
|
18
19
|
} },
|
|
19
|
-
React.createElement(SideModalContainer, { animate: { x: 0 }, "aria-modal": "true", background: background, exit: { x: slideFrom === 'left' ? '-100%' : '100%' }, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, maxHeight: maxHeight, maxWidth: maxWidth, onClick: function (e) { return e.stopPropagation(); }, role: "dialog", slideFrom: slideFrom, transition: { type: 'just' }, width: width }, children)))), document.querySelector(querySelector) || document.body)
|
|
20
|
+
React.createElement(SideModalContainer, __assign({ animate: { x: 0 }, "aria-modal": "true", background: background, exit: { x: slideFrom === 'left' ? '-100%' : '100%' }, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, maxHeight: maxHeight, maxWidth: maxWidth, onClick: function (e) { return e.stopPropagation(); }, role: "dialog", slideFrom: slideFrom, transition: { type: 'just' }, width: width }, props), children)))), document.querySelector(querySelector) || document.body)
|
|
20
21
|
: null;
|
|
21
22
|
});
|
|
22
23
|
SideModal.displayName = 'SideModal';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SideModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import '@citygross/typography';
|
|
3
3
|
import '../AddressBlock/AddressBlock.styles.js';
|
|
4
|
-
import '
|
|
5
|
-
import '@citygross/icons';
|
|
6
|
-
import '../BoxArrow/BoxArrow.styles.js';
|
|
7
|
-
import '../AlertBox/AlertBox.styles.js';
|
|
4
|
+
import '../AlertBox/AlertBox.js';
|
|
8
5
|
import '../BackButton/BackButton.styles.js';
|
|
6
|
+
import '@citygross/icons';
|
|
9
7
|
import '../BackgroundImage/BackgroundImage.styles.js';
|
|
10
8
|
import '../Badge/Badge.styles.js';
|
|
11
9
|
import '../../../../_virtual/_tslib.js';
|
|
10
|
+
import '../BoxArrow/BoxArrow.styles.js';
|
|
12
11
|
import '../Box/Box.styles.js';
|
|
13
12
|
import '../Button/Button.js';
|
|
14
13
|
import '@citygross/design-tokens';
|
|
@@ -23,6 +22,7 @@ import '../CartItemSummary/CartItemSummary.styles.js';
|
|
|
23
22
|
import '../CartSubTotal/CartSubTotal.js';
|
|
24
23
|
import '../Divider/Divider.styles.js';
|
|
25
24
|
import '../CartSummary/CartSummary.styles.js';
|
|
25
|
+
import '../../../../design-tokens/build/index.js';
|
|
26
26
|
import '../CgButton/CgButton.styles.js';
|
|
27
27
|
import '../Chips/Chip.styles.js';
|
|
28
28
|
import '../Spinner/Spinner.styles.js';
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { theme } from '@citygross/design-tokens';
|
|
2
|
+
import { EAlertBoxVariant } from '../components/AlertBox/AlertBox.js';
|
|
3
|
+
|
|
4
|
+
var getAlertBoxAttributes = function (alertBoxVariant) {
|
|
5
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
6
|
+
switch (alertBoxVariant) {
|
|
7
|
+
case EAlertBoxVariant.alert:
|
|
8
|
+
return {
|
|
9
|
+
backgroundColor: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.yellowLighter,
|
|
10
|
+
borderColor: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.brandYellow,
|
|
11
|
+
iconColor: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.darkest
|
|
12
|
+
};
|
|
13
|
+
case EAlertBoxVariant.info:
|
|
14
|
+
return {
|
|
15
|
+
backgroundColor: (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.blueLight,
|
|
16
|
+
borderColor: (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.brandBlue,
|
|
17
|
+
iconColor: (_f = theme.palette) === null || _f === void 0 ? void 0 : _f.brandBlue
|
|
18
|
+
};
|
|
19
|
+
case EAlertBoxVariant.warning:
|
|
20
|
+
return {
|
|
21
|
+
backgroundColor: (_g = theme.palette) === null || _g === void 0 ? void 0 : _g.redLight,
|
|
22
|
+
borderColor: (_h = theme.palette) === null || _h === void 0 ? void 0 : _h.priceTagRed,
|
|
23
|
+
iconColor: (_j = theme.palette) === null || _j === void 0 ? void 0 : _j.alertRed
|
|
24
|
+
};
|
|
25
|
+
default:
|
|
26
|
+
return {};
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export { getAlertBoxAttributes };
|
|
31
|
+
//# sourceMappingURL=alert-box.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert-box.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { AddressBlock } from './components/AddressBlock/AddressBlock.js';
|
|
2
|
-
export { AlertBox } from './components/AlertBox/AlertBox.js';
|
|
2
|
+
export { AlertBox, EAlertBoxVariant } from './components/AlertBox/AlertBox.js';
|
|
3
3
|
export { BackButton } from './components/BackButton/BackButton.js';
|
|
4
4
|
export { BackgroundImage } from './components/BackgroundImage/BackgroundImage.js';
|
|
5
5
|
export { Badge } from './components/Badge/Badge.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.153",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"react-slick": "^0.30.1",
|
|
75
75
|
"slick-carousel": "^1.8.1"
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "3c69bf977ba68d250a121384897d95ad80f8d117"
|
|
78
78
|
}
|