@citygross/components 0.7.60 → 0.7.64
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/Chips/Chip.d.ts +1 -1
- package/build/@types/components/Chips/Chip.styles.d.ts +2 -1
- package/build/@types/components/RadioListItem/RadioListItem.stories.d.ts +0 -1
- package/build/@types/components/RadioListItem/RadioListItem.styles.d.ts +1 -1
- package/build/@types/index.d.ts +1 -0
- package/build/cjs/components/src/components/Chips/Chip.js +26 -0
- package/build/cjs/components/src/components/Chips/Chip.js.map +1 -0
- package/build/cjs/components/src/components/Chips/Chip.styles.js +29 -0
- package/build/cjs/components/src/components/Chips/Chip.styles.js.map +1 -0
- package/build/cjs/components/src/components/RadioListItem/RadioListItem.js +5 -5
- package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js +6 -8
- package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js.map +1 -1
- package/build/cjs/components/src/components/WarningLabel/WarningLabel.js +2 -1
- package/build/cjs/components/src/components/WarningLabel/WarningLabel.js.map +1 -1
- package/build/cjs/components/src/index.js +2 -0
- package/build/cjs/components/src/index.js.map +1 -1
- package/build/es/components/src/components/Chips/Chip.js +18 -0
- package/build/es/components/src/components/Chips/Chip.js.map +1 -0
- package/build/es/components/src/components/Chips/Chip.styles.js +19 -0
- package/build/es/components/src/components/Chips/Chip.styles.js.map +1 -0
- package/build/es/components/src/components/RadioListItem/RadioListItem.js +6 -6
- package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js +7 -8
- package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js.map +1 -1
- package/build/es/components/src/components/WarningLabel/WarningLabel.js +2 -1
- package/build/es/components/src/components/WarningLabel/WarningLabel.js.map +1 -1
- package/build/es/components/src/index.js +1 -0
- package/build/es/components/src/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import * as styles from './Chip.styles';
|
|
2
|
-
export declare function Chip({ label, checked, onClick, background, activeBackground }: styles.TChip): JSX.Element;
|
|
2
|
+
export declare function Chip({ label, checked, onClick, background, activeBackground, loading }: styles.TChip): JSX.Element;
|
|
@@ -5,8 +5,9 @@ export declare type TChip = {
|
|
|
5
5
|
onClick: () => void;
|
|
6
6
|
background?: string;
|
|
7
7
|
activeBackground?: string;
|
|
8
|
+
loading?: boolean;
|
|
8
9
|
};
|
|
9
|
-
export declare const BaseChip: import("styled-components").StyledComponent<
|
|
10
|
+
export declare const BaseChip: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TChip, never>;
|
|
10
11
|
export declare const ChipCheckbox: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
|
|
11
12
|
export declare const ChipLabel: import("styled-components").StyledComponent<({ size, color, children, lineThrough, fontWeight, ...props }: {
|
|
12
13
|
children: import("react").ReactNode;
|
|
@@ -7,6 +7,5 @@ declare const _default: {
|
|
|
7
7
|
};
|
|
8
8
|
export default _default;
|
|
9
9
|
export declare const Default: Story<TRadioListItemProps>;
|
|
10
|
-
export declare const Selected: Story<TRadioListItemProps>;
|
|
11
10
|
export declare const Disabled: Story<TRadioListItemProps>;
|
|
12
11
|
export declare const withChildren: Story<TRadioListItemProps>;
|
|
@@ -2,6 +2,7 @@ export declare type TBaseRadioItemInputWrapper = {
|
|
|
2
2
|
isDisabled?: boolean;
|
|
3
3
|
flexGrow?: number;
|
|
4
4
|
noPadding?: boolean;
|
|
5
|
+
center?: boolean;
|
|
5
6
|
};
|
|
6
7
|
export declare type TBaseRadiolistItemcontainer = {
|
|
7
8
|
background?: string;
|
|
@@ -9,7 +10,6 @@ export declare type TBaseRadiolistItemcontainer = {
|
|
|
9
10
|
};
|
|
10
11
|
export declare const BaseRadioListItemContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseRadiolistItemcontainer, never>;
|
|
11
12
|
export declare const BaseRadioItemLeftWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseRadioItemInputWrapper, never>;
|
|
12
|
-
export declare const ExtraTextContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
13
13
|
export declare const StyledH3: import("styled-components").StyledComponent<({ children, lineThrough, color, fontWeight, ...props }: import("@citygross/typography/build/headers/h3/h3").IH3) => JSX.Element, import("styled-components").DefaultTheme, {
|
|
14
14
|
as: string;
|
|
15
15
|
}, "as">;
|
package/build/@types/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ export * from './components/Badge/Badge';
|
|
|
7
7
|
export * from './components/Box/Box';
|
|
8
8
|
export * from './components/Button';
|
|
9
9
|
export * from './components/BackButton/BackButton';
|
|
10
|
+
export * from './components/Chips/Chip';
|
|
10
11
|
export * from './components/CartItemSummary/CartItemSummary';
|
|
11
12
|
export * from './components/CartSummary/CartSummary';
|
|
12
13
|
export * from './components/CustomerInfoBlock/CustomerInfoBlock';
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var Icon = require('@citygross/icons');
|
|
7
|
+
var typography = require('@citygross/typography');
|
|
8
|
+
var Chip_styles = require('./Chip.styles.js');
|
|
9
|
+
var designTokens = require('@citygross/design-tokens');
|
|
10
|
+
var Spinner = require('../Spinner/Spinner.js');
|
|
11
|
+
|
|
12
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
|
+
|
|
14
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
15
|
+
|
|
16
|
+
function Chip(_a) {
|
|
17
|
+
var _b, _c, _d;
|
|
18
|
+
var label = _a.label, checked = _a.checked, onClick = _a.onClick, _e = _a.background, background = _e === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.lighter : _e, _f = _a.activeBackground, activeBackground = _f === void 0 ? (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.white : _f, loading = _a.loading;
|
|
19
|
+
return (React__default['default'].createElement(Chip_styles.BaseChip, { checked: checked, onClick: onClick, background: background, activeBackground: activeBackground, loading: loading },
|
|
20
|
+
loading ? (React__default['default'].createElement(Spinner.Spinner, { size: 12 })) : (React__default['default'].createElement(React__default['default'].Fragment, null, checked ? (React__default['default'].createElement(Chip_styles.ChipCheckbox, null,
|
|
21
|
+
React__default['default'].createElement(Icon.Icons.CheckMark, { color: (_d = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.alertGreen, width: 12, height: 12, viewBox: '0 0 25 25' }))) : (React__default['default'].createElement(Chip_styles.ChipCheckbox, null)))),
|
|
22
|
+
React__default['default'].createElement(Chip_styles.ChipLabel, { forwardedAs: 'label', size: typography.TextTypes.TextSize.SMALL }, label)));
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
exports.Chip = Chip;
|
|
26
|
+
//# sourceMappingURL=Chip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Chip.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _tslib = require('../../../../_virtual/_tslib.js');
|
|
6
|
+
var styled = require('styled-components');
|
|
7
|
+
var typography = require('@citygross/typography');
|
|
8
|
+
|
|
9
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
|
+
|
|
11
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
12
|
+
|
|
13
|
+
var BaseChip = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", "px;\n border-radius: ", "px;\n background: ", ";\n /* static for height of chip */\n padding: ", "px\n ", "px;\n ", ";\n cursor: pointer;\n"], ["\n display: inline-flex;\n align-items: center;\n gap: ", "px;\n border-radius: ", "px;\n background: ", ";\n /* static for height of chip */\n padding: ", "px\n ", "px;\n ", ";\n cursor: pointer;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) {
|
|
14
|
+
return props.checked
|
|
15
|
+
? props.activeBackground && props.activeBackground
|
|
16
|
+
: props.background && props.background;
|
|
17
|
+
}, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) {
|
|
18
|
+
var _a;
|
|
19
|
+
return props.checked &&
|
|
20
|
+
"box-shadow: 0 0 0 1px inset " + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertGreen);
|
|
21
|
+
});
|
|
22
|
+
var ChipCheckbox = styled__default['default'].span(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n height: ", "px;\n width: ", "px;\n background: white;\n border: 1px solid ", ";\n border-radius: ", "px;\n"], ["\n display: flex;\n height: ", "px;\n width: ", "px;\n background: white;\n border: 1px solid ", ";\n border-radius: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.chipCheckBox; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.chipCheckBox; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.extraSmall; });
|
|
23
|
+
var ChipLabel = styled__default['default'](typography.BodyText)(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n pointer-events: none;\n"], ["\n pointer-events: none;\n"])));
|
|
24
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
25
|
+
|
|
26
|
+
exports.BaseChip = BaseChip;
|
|
27
|
+
exports.ChipCheckbox = ChipCheckbox;
|
|
28
|
+
exports.ChipLabel = ChipLabel;
|
|
29
|
+
//# sourceMappingURL=Chip.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Chip.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -24,14 +24,14 @@ function RadioListItem(_a) {
|
|
|
24
24
|
: (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.white
|
|
25
25
|
: 'white', noPadding: noPadding, onClick: isDisabled ? function () { } : function () { return onClick(value); } },
|
|
26
26
|
React__default['default'].createElement(RadioListItem_styles.RadioFlex, null,
|
|
27
|
-
React__default['default'].createElement(RadioListItem_styles.BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow },
|
|
27
|
+
React__default['default'].createElement(RadioListItem_styles.BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow, center: !textOnSelected },
|
|
28
28
|
React__default['default'].createElement(Radio.Radio, { customColor: radioColor, checked: selected, disabled: isDisabled, name: name, onChange: function () { return onClick(value); }, value: value }),
|
|
29
|
-
React__default['default'].createElement(
|
|
29
|
+
React__default['default'].createElement("div", null,
|
|
30
|
+
React__default['default'].createElement(RadioListItem_styles.StyledH3, { lineThrough: isDisabled }, label),
|
|
31
|
+
textOnSelected && selected && (React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL, color: (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.dark }, textOnSelected)))),
|
|
30
32
|
React__default['default'].createElement(RadioListItem_styles.RadioSecondaryWrapper, null,
|
|
31
33
|
React__default['default'].createElement("span", null, dotIndicator && selected && (React__default['default'].createElement(DotIndicator.Dot, { color: dotIndicator.color, shadow: dotIndicator.shadow }))),
|
|
32
|
-
isDisabled ? (React__default['default'].createElement(typography.BodyText, null, disabledText || defaultDisabledString)) : (children || secondaryLabel)))
|
|
33
|
-
textOnSelected && selected && (React__default['default'].createElement(RadioListItem_styles.ExtraTextContainer, null,
|
|
34
|
-
React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL, color: (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.dark }, textOnSelected)))));
|
|
34
|
+
isDisabled ? (React__default['default'].createElement(typography.BodyText, null, disabledText || defaultDisabledString)) : (children || secondaryLabel)))));
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
exports.RadioListItem = RadioListItem;
|
|
@@ -11,17 +11,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
11
11
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
12
12
|
|
|
13
13
|
var BaseRadioListItemContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n padding: ", "px;\n align-items: center;\n cursor: pointer;\n flex-wrap: wrap;\n border-radius: ", "px;\n background: ", ";\n > p:first-of-type {\n margin-left: ", "px;\n }\n"], ["\n padding: ", "px;\n align-items: center;\n cursor: pointer;\n flex-wrap: wrap;\n border-radius: ", "px;\n background: ", ";\n > p:first-of-type {\n margin-left: ", "px;\n }\n"])), function (props) { var _a; return (props.noPadding ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { return props.background; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
14
|
-
var BaseRadioItemLeftWrapper = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n flex: 5;\n align-items:
|
|
15
|
-
var
|
|
16
|
-
var
|
|
17
|
-
var
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
14
|
+
var BaseRadioItemLeftWrapper = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n flex: 5;\n align-items: ", ";\n ", ";\n > * {\n &:first-child {\n margin-right: ", "px;\n }\n }\n ", ";\n"], ["\n display: flex;\n flex: 5;\n align-items: ", ";\n ", ";\n > * {\n &:first-child {\n margin-right: ", "px;\n }\n }\n ", ";\n"])), function (props) { return (props.center ? 'center' : 'flex-start'); }, function (props) { return props.flexGrow && "flex-grow: " + props.flexGrow; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.isDisabled && 'opacity: 0.4'; });
|
|
15
|
+
var StyledH3 = styled__default['default'](typography.H3).attrs({ as: 'label' })(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n"], ["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n"])));
|
|
16
|
+
var RadioSecondaryWrapper = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
|
|
17
|
+
var RadioFlex = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n display: flex;\n gap: ", "px;\n"], ["\n display: flex;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
18
|
+
styled__default['default'].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
21
20
|
|
|
22
21
|
exports.BaseRadioItemLeftWrapper = BaseRadioItemLeftWrapper;
|
|
23
22
|
exports.BaseRadioListItemContainer = BaseRadioListItemContainer;
|
|
24
|
-
exports.ExtraTextContainer = ExtraTextContainer;
|
|
25
23
|
exports.RadioFlex = RadioFlex;
|
|
26
24
|
exports.RadioSecondaryWrapper = RadioSecondaryWrapper;
|
|
27
25
|
exports.StyledH3 = StyledH3;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -19,6 +19,8 @@ require('../Badge/Badge.styles.js');
|
|
|
19
19
|
require('../Box/Box.styles.js');
|
|
20
20
|
require('../Button/Button.styles.js');
|
|
21
21
|
require('../BackButton/BackButton.styles.js');
|
|
22
|
+
require('../Chips/Chip.styles.js');
|
|
23
|
+
require('../Spinner/Spinner.styles.js');
|
|
22
24
|
require('react-loading-skeleton');
|
|
23
25
|
require('../CartItemSummary/CartItemSummary.styles.js');
|
|
24
26
|
require('../Divider/Divider.styles.js');
|
|
@@ -55,7 +57,6 @@ require('../RadioGroup/RadioGroup.styles.js');
|
|
|
55
57
|
require('../RadioListItem/RadioListItem.styles.js');
|
|
56
58
|
require('../RippleContainer/RippleContainer.styles.js');
|
|
57
59
|
require('../Select/Select.styles.js');
|
|
58
|
-
require('../Spinner/Spinner.styles.js');
|
|
59
60
|
require('../Stepper/Stepper.styles.js');
|
|
60
61
|
var ToolTip = require('../ToolTip/ToolTip.js');
|
|
61
62
|
require('../StepperMobile/StepperMobile.styles.js');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -12,6 +12,7 @@ var Box = require('./components/Box/Box.js');
|
|
|
12
12
|
var IconButton = require('./components/Button/IconButton.js');
|
|
13
13
|
var PaginationButton = require('./components/Button/PaginationButton.js');
|
|
14
14
|
var BackButton = require('./components/BackButton/BackButton.js');
|
|
15
|
+
var Chip = require('./components/Chips/Chip.js');
|
|
15
16
|
var CartItemSummary = require('./components/CartItemSummary/CartItemSummary.js');
|
|
16
17
|
var CartSummary = require('./components/CartSummary/CartSummary.js');
|
|
17
18
|
var CustomerInfoBlock = require('./components/CustomerInfoBlock/CustomerInfoBlock.js');
|
|
@@ -86,6 +87,7 @@ exports.Box = Box.Box;
|
|
|
86
87
|
exports.IconButton = IconButton.IconButton;
|
|
87
88
|
exports.PaginationButton = PaginationButton.PaginationButton;
|
|
88
89
|
exports.BackButton = BackButton.BackButton;
|
|
90
|
+
exports.Chip = Chip.Chip;
|
|
89
91
|
exports.CartItemSummary = CartItemSummary.CartItemSummary;
|
|
90
92
|
exports.CartSummary = CartSummary.CartSummary;
|
|
91
93
|
exports.CustomerInfoBlock = CustomerInfoBlock.CustomerInfoBlock;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Icons } from '@citygross/icons';
|
|
3
|
+
import { TextTypes } from '@citygross/typography';
|
|
4
|
+
import { BaseChip, ChipCheckbox, ChipLabel } from './Chip.styles.js';
|
|
5
|
+
import { theme } from '@citygross/design-tokens';
|
|
6
|
+
import { Spinner } from '../Spinner/Spinner.js';
|
|
7
|
+
|
|
8
|
+
function Chip(_a) {
|
|
9
|
+
var _b, _c, _d;
|
|
10
|
+
var label = _a.label, checked = _a.checked, onClick = _a.onClick, _e = _a.background, background = _e === void 0 ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lighter : _e, _f = _a.activeBackground, activeBackground = _f === void 0 ? (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.white : _f, loading = _a.loading;
|
|
11
|
+
return (React.createElement(BaseChip, { checked: checked, onClick: onClick, background: background, activeBackground: activeBackground, loading: loading },
|
|
12
|
+
loading ? (React.createElement(Spinner, { size: 12 })) : (React.createElement(React.Fragment, null, checked ? (React.createElement(ChipCheckbox, null,
|
|
13
|
+
React.createElement(Icons.CheckMark, { color: (_d = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _d === void 0 ? void 0 : _d.alertGreen, width: 12, height: 12, viewBox: '0 0 25 25' }))) : (React.createElement(ChipCheckbox, null)))),
|
|
14
|
+
React.createElement(ChipLabel, { forwardedAs: 'label', size: TextTypes.TextSize.SMALL }, label)));
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export { Chip };
|
|
18
|
+
//# sourceMappingURL=Chip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Chip.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
import { BodyText } from '@citygross/typography';
|
|
4
|
+
|
|
5
|
+
var BaseChip = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", "px;\n border-radius: ", "px;\n background: ", ";\n /* static for height of chip */\n padding: ", "px\n ", "px;\n ", ";\n cursor: pointer;\n"], ["\n display: inline-flex;\n align-items: center;\n gap: ", "px;\n border-radius: ", "px;\n background: ", ";\n /* static for height of chip */\n padding: ", "px\n ", "px;\n ", ";\n cursor: pointer;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) {
|
|
6
|
+
return props.checked
|
|
7
|
+
? props.activeBackground && props.activeBackground
|
|
8
|
+
: props.background && props.background;
|
|
9
|
+
}, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) {
|
|
10
|
+
var _a;
|
|
11
|
+
return props.checked &&
|
|
12
|
+
"box-shadow: 0 0 0 1px inset " + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertGreen);
|
|
13
|
+
});
|
|
14
|
+
var ChipCheckbox = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n height: ", "px;\n width: ", "px;\n background: white;\n border: 1px solid ", ";\n border-radius: ", "px;\n"], ["\n display: flex;\n height: ", "px;\n width: ", "px;\n background: white;\n border: 1px solid ", ";\n border-radius: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.chipCheckBox; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.chipCheckBox; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.extraSmall; });
|
|
15
|
+
var ChipLabel = styled(BodyText)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n pointer-events: none;\n"], ["\n pointer-events: none;\n"])));
|
|
16
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
17
|
+
|
|
18
|
+
export { BaseChip, ChipCheckbox, ChipLabel };
|
|
19
|
+
//# sourceMappingURL=Chip.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Chip.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
|
|
@@ -3,7 +3,7 @@ import { BodyText, TextTypes } from '@citygross/typography';
|
|
|
3
3
|
import { Radio } from '../FormElements/Radio/Radio.js';
|
|
4
4
|
import { Dot } from '../DotIndicator/DotIndicator.js';
|
|
5
5
|
import { theme } from '@citygross/design-tokens';
|
|
6
|
-
import { BaseRadioListItemContainer, RadioFlex, BaseRadioItemLeftWrapper, StyledH3, RadioSecondaryWrapper
|
|
6
|
+
import { BaseRadioListItemContainer, RadioFlex, BaseRadioItemLeftWrapper, StyledH3, RadioSecondaryWrapper } from './RadioListItem.styles.js';
|
|
7
7
|
|
|
8
8
|
function RadioListItem(_a) {
|
|
9
9
|
var _b, _c, _d, _e;
|
|
@@ -16,14 +16,14 @@ function RadioListItem(_a) {
|
|
|
16
16
|
: (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.white
|
|
17
17
|
: 'white', noPadding: noPadding, onClick: isDisabled ? function () { } : function () { return onClick(value); } },
|
|
18
18
|
React.createElement(RadioFlex, null,
|
|
19
|
-
React.createElement(BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow },
|
|
19
|
+
React.createElement(BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow, center: !textOnSelected },
|
|
20
20
|
React.createElement(Radio, { customColor: radioColor, checked: selected, disabled: isDisabled, name: name, onChange: function () { return onClick(value); }, value: value }),
|
|
21
|
-
React.createElement(
|
|
21
|
+
React.createElement("div", null,
|
|
22
|
+
React.createElement(StyledH3, { lineThrough: isDisabled }, label),
|
|
23
|
+
textOnSelected && selected && (React.createElement(BodyText, { size: TextTypes.TextSize.SMALL, color: (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.dark }, textOnSelected)))),
|
|
22
24
|
React.createElement(RadioSecondaryWrapper, null,
|
|
23
25
|
React.createElement("span", null, dotIndicator && selected && (React.createElement(Dot, { color: dotIndicator.color, shadow: dotIndicator.shadow }))),
|
|
24
|
-
isDisabled ? (React.createElement(BodyText, null, disabledText || defaultDisabledString)) : (children || secondaryLabel)))
|
|
25
|
-
textOnSelected && selected && (React.createElement(ExtraTextContainer, null,
|
|
26
|
-
React.createElement(BodyText, { size: TextTypes.TextSize.SMALL, color: (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.dark }, textOnSelected)))));
|
|
26
|
+
isDisabled ? (React.createElement(BodyText, null, disabledText || defaultDisabledString)) : (children || secondaryLabel)))));
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
export { RadioListItem };
|
|
@@ -3,13 +3,12 @@ import { H3 } from '@citygross/typography';
|
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
|
|
5
5
|
var BaseRadioListItemContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: ", "px;\n align-items: center;\n cursor: pointer;\n flex-wrap: wrap;\n border-radius: ", "px;\n background: ", ";\n > p:first-of-type {\n margin-left: ", "px;\n }\n"], ["\n padding: ", "px;\n align-items: center;\n cursor: pointer;\n flex-wrap: wrap;\n border-radius: ", "px;\n background: ", ";\n > p:first-of-type {\n margin-left: ", "px;\n }\n"])), function (props) { var _a; return (props.noPadding ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { return props.background; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
6
|
-
var BaseRadioItemLeftWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex: 5;\n align-items:
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
6
|
+
var BaseRadioItemLeftWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex: 5;\n align-items: ", ";\n ", ";\n > * {\n &:first-child {\n margin-right: ", "px;\n }\n }\n ", ";\n"], ["\n display: flex;\n flex: 5;\n align-items: ", ";\n ", ";\n > * {\n &:first-child {\n margin-right: ", "px;\n }\n }\n ", ";\n"])), function (props) { return (props.center ? 'center' : 'flex-start'); }, function (props) { return props.flexGrow && "flex-grow: " + props.flexGrow; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.isDisabled && 'opacity: 0.4'; });
|
|
7
|
+
var StyledH3 = styled(H3).attrs({ as: 'label' })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n"], ["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n"])));
|
|
8
|
+
var RadioSecondaryWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
|
|
9
|
+
var RadioFlex = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n gap: ", "px;\n"], ["\n display: flex;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
10
|
+
styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
11
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
13
12
|
|
|
14
|
-
export { BaseRadioItemLeftWrapper, BaseRadioListItemContainer,
|
|
13
|
+
export { BaseRadioItemLeftWrapper, BaseRadioListItemContainer, RadioFlex, RadioSecondaryWrapper, StyledH3 };
|
|
15
14
|
//# sourceMappingURL=RadioListItem.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
|
|
@@ -15,6 +15,8 @@ import '../Badge/Badge.styles.js';
|
|
|
15
15
|
import '../Box/Box.styles.js';
|
|
16
16
|
import '../Button/Button.styles.js';
|
|
17
17
|
import '../BackButton/BackButton.styles.js';
|
|
18
|
+
import '../Chips/Chip.styles.js';
|
|
19
|
+
import '../Spinner/Spinner.styles.js';
|
|
18
20
|
import 'react-loading-skeleton';
|
|
19
21
|
import '../CartItemSummary/CartItemSummary.styles.js';
|
|
20
22
|
import '../Divider/Divider.styles.js';
|
|
@@ -51,7 +53,6 @@ import '../RadioGroup/RadioGroup.styles.js';
|
|
|
51
53
|
import '../RadioListItem/RadioListItem.styles.js';
|
|
52
54
|
import '../RippleContainer/RippleContainer.styles.js';
|
|
53
55
|
import '../Select/Select.styles.js';
|
|
54
|
-
import '../Spinner/Spinner.styles.js';
|
|
55
56
|
import '../Stepper/Stepper.styles.js';
|
|
56
57
|
import { ToolTip } from '../ToolTip/ToolTip.js';
|
|
57
58
|
import '../StepperMobile/StepperMobile.styles.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -8,6 +8,7 @@ export { Box } from './components/Box/Box.js';
|
|
|
8
8
|
export { IconButton } from './components/Button/IconButton.js';
|
|
9
9
|
export { PaginationButton } from './components/Button/PaginationButton.js';
|
|
10
10
|
export { BackButton } from './components/BackButton/BackButton.js';
|
|
11
|
+
export { Chip } from './components/Chips/Chip.js';
|
|
11
12
|
export { CartItemSummary } from './components/CartItemSummary/CartItemSummary.js';
|
|
12
13
|
export { CartSummary } from './components/CartSummary/CartSummary.js';
|
|
13
14
|
export { CustomerInfoBlock } from './components/CustomerInfoBlock/CustomerInfoBlock.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.64",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -71,5 +71,5 @@
|
|
|
71
71
|
"moment": "^2.29.1",
|
|
72
72
|
"react-loading-skeleton": "^2.2.0"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "da00c4e006da995494ffe2b7bf462b790e88271b"
|
|
75
75
|
}
|