@citygross/components 0.8.152 → 0.8.154
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 +11 -11
- package/build/@types/components/AlertBox/AlertBox.styles.d.ts +4 -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 +19 -8
- package/build/cjs/components/src/components/AlertBox/AlertBox.js.map +1 -1
- package/build/cjs/components/src/components/AlertBox/AlertBox.styles.js +30 -3
- package/build/cjs/components/src/components/AlertBox/AlertBox.styles.js.map +1 -1
- package/build/cjs/components/src/components/CgButton/CgButton.styles.js +1 -1
- package/build/cjs/components/src/components/FormElements/Input/Input.js +2 -2
- 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 +21 -10
- package/build/es/components/src/components/AlertBox/AlertBox.js.map +1 -1
- package/build/es/components/src/components/AlertBox/AlertBox.styles.js +30 -3
- package/build/es/components/src/components/AlertBox/AlertBox.styles.js.map +1 -1
- package/build/es/components/src/components/CgButton/CgButton.styles.js +1 -1
- package/build/es/components/src/components/FormElements/Input/Input.js +3 -3
- 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,13 @@
|
|
|
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
|
-
|
|
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
|
+
customElement?: React.ReactNode;
|
|
9
|
+
headLine?: string;
|
|
10
|
+
text?: string;
|
|
11
|
+
variant?: EAlertBoxVariant;
|
|
12
|
+
} & React.HTMLAttributes<HTMLDivElement>;
|
|
13
|
+
export declare function AlertBox({ customElement, headLine, text, variant, ...props }: TAlertBox): JSX.Element;
|
|
@@ -1,11 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
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>;
|
|
4
|
+
export declare const AlertBoxContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
11
5
|
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,34 @@
|
|
|
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 customElement = _a.customElement, headLine = _a.headLine, text = _a.text, _d = _a.variant, variant = _d === void 0 ? exports.EAlertBoxVariant.info : _d, props = _tslib.__rest(_a, ["customElement", "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(AlertBox_styles.AlertBoxContent, 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),
|
|
32
|
+
customElement && customElement)));
|
|
22
33
|
}
|
|
23
34
|
|
|
24
35
|
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,37 @@ 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
|
|
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 AlertBoxContent = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"])), function (_a) {
|
|
37
|
+
var _b;
|
|
38
|
+
var theme = _a.theme;
|
|
39
|
+
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
|
|
40
|
+
});
|
|
14
41
|
var templateObject_1, templateObject_2;
|
|
15
42
|
|
|
16
43
|
exports.AlertBox = AlertBox;
|
|
17
|
-
exports.
|
|
44
|
+
exports.AlertBoxContent = AlertBoxContent;
|
|
18
45
|
//# 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -62,7 +62,7 @@ var sharedButtonStyles = styled.css(templateObject_1 || (templateObject_1 = _tsl
|
|
|
62
62
|
var variantAttributes = _a.variantAttributes;
|
|
63
63
|
return variantAttributes.backgroundActive;
|
|
64
64
|
}, global_styles.focusVisible);
|
|
65
|
-
var ButtonStyle = styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n ", "\n cursor: pointer;\n\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor:
|
|
65
|
+
var ButtonStyle = styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n ", "\n cursor: pointer;\n\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n"], ["\n ", "\n cursor: pointer;\n\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n"])), sharedButtonStyles, function (_a) {
|
|
66
66
|
var variantAttributes = _a.variantAttributes;
|
|
67
67
|
return variantAttributes.backgroundDisabled;
|
|
68
68
|
}, (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.placeholder);
|
|
@@ -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)),
|
|
@@ -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,28 @@
|
|
|
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, AlertBoxContent } 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 customElement = _a.customElement, headLine = _a.headLine, text = _a.text, _d = _a.variant, variant = _d === void 0 ? EAlertBoxVariant.info : _d, props = __rest(_a, ["customElement", "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(AlertBoxContent, 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),
|
|
24
|
+
customElement && customElement)));
|
|
14
25
|
}
|
|
15
26
|
|
|
16
|
-
export { AlertBox };
|
|
27
|
+
export { AlertBox, EAlertBoxVariant };
|
|
17
28
|
//# 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,36 @@
|
|
|
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
|
|
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 AlertBoxContent = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"])), function (_a) {
|
|
29
|
+
var _b;
|
|
30
|
+
var theme = _a.theme;
|
|
31
|
+
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
|
|
32
|
+
});
|
|
6
33
|
var templateObject_1, templateObject_2;
|
|
7
34
|
|
|
8
|
-
export { AlertBox,
|
|
35
|
+
export { AlertBox, AlertBoxContent };
|
|
9
36
|
//# 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -54,7 +54,7 @@ var sharedButtonStyles = css(templateObject_1 || (templateObject_1 = __makeTempl
|
|
|
54
54
|
var variantAttributes = _a.variantAttributes;
|
|
55
55
|
return variantAttributes.backgroundActive;
|
|
56
56
|
}, focusVisible);
|
|
57
|
-
var ButtonStyle = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n cursor: pointer;\n\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor:
|
|
57
|
+
var ButtonStyle = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n cursor: pointer;\n\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n"], ["\n ", "\n cursor: pointer;\n\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n"])), sharedButtonStyles, function (_a) {
|
|
58
58
|
var variantAttributes = _a.variantAttributes;
|
|
59
59
|
return variantAttributes.backgroundDisabled;
|
|
60
60
|
}, (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.placeholder);
|
|
@@ -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,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.154",
|
|
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": "7dece2008e3030329121941ae7982b9c063883d7"
|
|
78
78
|
}
|