@citygross/components 0.7.39 → 0.7.43
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/DeliverySlotItem/DeliverySlotItem.d.ts +4 -3
- package/build/@types/components/DeliverySlotItem/DeliverySlotItem.styles.d.ts +0 -2
- package/build/@types/components/RadioListItem/RadioListItem.d.ts +2 -1
- package/build/@types/components/RadioListItem/RadioListItem.stories.d.ts +1 -0
- package/build/@types/components/RadioListItem/RadioListItem.styles.d.ts +2 -0
- package/build/cjs/components/src/components/DeliverySlotItem/DeliverySlotItem.js +6 -11
- package/build/cjs/components/src/components/DeliverySlotItem/DeliverySlotItem.js.map +1 -1
- package/build/cjs/components/src/components/DeliverySlotItem/DeliverySlotItem.styles.js +1 -5
- package/build/cjs/components/src/components/DeliverySlotItem/DeliverySlotItem.styles.js.map +1 -1
- package/build/cjs/components/src/components/RadioListItem/RadioListItem.js +4 -7
- package/build/cjs/components/src/components/RadioListItem/RadioListItem.js.map +1 -1
- package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js +4 -1
- package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js.map +1 -1
- package/build/es/components/src/components/DeliverySlotItem/DeliverySlotItem.js +8 -13
- package/build/es/components/src/components/DeliverySlotItem/DeliverySlotItem.js.map +1 -1
- package/build/es/components/src/components/DeliverySlotItem/DeliverySlotItem.styles.js +2 -4
- package/build/es/components/src/components/DeliverySlotItem/DeliverySlotItem.styles.js.map +1 -1
- package/build/es/components/src/components/RadioListItem/RadioListItem.js +5 -8
- package/build/es/components/src/components/RadioListItem/RadioListItem.js.map +1 -1
- package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js +4 -2
- package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js.map +1 -1
- package/package.json +4 -4
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
export declare type TDeliverySlotItem = {
|
|
2
3
|
date: string;
|
|
3
4
|
selected: boolean;
|
|
4
|
-
|
|
5
|
-
|
|
5
|
+
disabled: boolean;
|
|
6
|
+
children: React.ReactNode;
|
|
6
7
|
onSelect: () => void;
|
|
7
8
|
};
|
|
8
|
-
export declare function DeliverySlotItem({ date,
|
|
9
|
+
export declare function DeliverySlotItem({ date, selected, disabled, children, onSelect }: TDeliverySlotItem): JSX.Element;
|
|
@@ -8,6 +8,4 @@ export declare const DeliverySlotHeaderContainer: import("styled-components").St
|
|
|
8
8
|
export declare const DeliverySlotHeaderText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TDeliverySlotItem, never>;
|
|
9
9
|
export declare const DeliverySlotContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TDeliverySlotItem, never>;
|
|
10
10
|
export declare const DeliverySlotBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TDeliverySlotItem, never>;
|
|
11
|
-
export declare const DisabledLabel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
12
|
-
export declare const DotContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
13
11
|
export {};
|
|
@@ -16,5 +16,6 @@ export declare type TRadioListItemProps = styles.TBaseRadioItemInputWrapper & {
|
|
|
16
16
|
disabledText?: string;
|
|
17
17
|
textOnSelected?: string;
|
|
18
18
|
value: string | number;
|
|
19
|
+
children?: JSX.Element;
|
|
19
20
|
};
|
|
20
|
-
export declare function RadioListItem({ onClick, selected, name, radioColor, defaultDisabledString, flexGrow, isDisabled, dotIndicator, transparent, noPadding, label,
|
|
21
|
+
export declare function RadioListItem({ onClick, selected, name, radioColor, defaultDisabledString, flexGrow, isDisabled, dotIndicator, transparent, noPadding, label, disabledText, secondaryLabel, textOnSelected, value, children }: TRadioListItemProps): JSX.Element;
|
|
@@ -17,3 +17,4 @@ export default _default;
|
|
|
17
17
|
export declare const Default: Story<TRadioListItemProps>;
|
|
18
18
|
export declare const Selected: Story<TRadioListItemProps>;
|
|
19
19
|
export declare const Disabled: Story<TRadioListItemProps>;
|
|
20
|
+
export declare const withChildren: Story<TRadioListItemProps>;
|
|
@@ -14,3 +14,5 @@ export declare const StyledH3: import("styled-components").StyledComponent<({ ch
|
|
|
14
14
|
as: string;
|
|
15
15
|
}, "as">;
|
|
16
16
|
export declare const RadioSecondaryWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
17
|
+
export declare const RadioFlex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
18
|
+
export declare const SecondaryColumn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -7,23 +7,21 @@ var designTokens = require('@citygross/design-tokens');
|
|
|
7
7
|
var utils = require('@citygross/utils');
|
|
8
8
|
var typography = require('@citygross/typography');
|
|
9
9
|
var DeliverySlotItem_styles = require('./DeliverySlotItem.styles.js');
|
|
10
|
-
var DotIndicator = require('../DotIndicator/DotIndicator.js');
|
|
11
10
|
|
|
12
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
12
|
|
|
14
13
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
15
14
|
|
|
16
15
|
function DeliverySlotItem(_a) {
|
|
17
|
-
var _b
|
|
18
|
-
var date = _a.date,
|
|
16
|
+
var _b;
|
|
17
|
+
var date = _a.date, selected = _a.selected, disabled = _a.disabled, children = _a.children, onSelect = _a.onSelect;
|
|
19
18
|
var momentDate = utils.moment(date);
|
|
20
19
|
var width = utils.useWindowSize().width;
|
|
21
|
-
var
|
|
20
|
+
var _c = React.useState(momentDate
|
|
22
21
|
.format(width < (((_b = designTokens.theme.breakpoints) === null || _b === void 0 ? void 0 : _b.md) || 768) ? 'ddd' : 'dddd')
|
|
23
|
-
.toLocaleLowerCase()), weekDay =
|
|
22
|
+
.toLocaleLowerCase()), weekDay = _c[0], setWeekDay = _c[1];
|
|
24
23
|
var dayNumber = momentDate.format('D');
|
|
25
24
|
var month = momentDate.format('MMM').toLocaleLowerCase();
|
|
26
|
-
var disabled = disabledLabel !== undefined;
|
|
27
25
|
React.useEffect(function () {
|
|
28
26
|
var _a;
|
|
29
27
|
setWeekDay(momentDate
|
|
@@ -31,7 +29,7 @@ function DeliverySlotItem(_a) {
|
|
|
31
29
|
.toLocaleLowerCase());
|
|
32
30
|
}, [width]);
|
|
33
31
|
var slotRef = React.useRef(null);
|
|
34
|
-
var
|
|
32
|
+
var _d = React.useState(true), isVisible = _d[0], setIsVisible = _d[1];
|
|
35
33
|
var callbackFn = function (entries) {
|
|
36
34
|
var entry = entries[0];
|
|
37
35
|
// gets zoom level
|
|
@@ -83,10 +81,7 @@ function DeliverySlotItem(_a) {
|
|
|
83
81
|
React__default['default'].createElement(DeliverySlotItem_styles.DeliverySlotBody, { disabled: disabled },
|
|
84
82
|
React__default['default'].createElement(typography.H2, { color: 'darkest' }, removeLeadingZero(dayNumber)),
|
|
85
83
|
React__default['default'].createElement(typography.BodyText, { color: 'darker' }, utils.capitalizeFirstLetter(month))),
|
|
86
|
-
|
|
87
|
-
React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.EXTRASMALL }, disabledLabel))),
|
|
88
|
-
!disabledLabel && showWarningIndicator && (React__default['default'].createElement(DeliverySlotItem_styles.DotContainer, null,
|
|
89
|
-
React__default['default'].createElement(DotIndicator.Dot, { color: (_c = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.alertRed }))))));
|
|
84
|
+
children)));
|
|
90
85
|
}
|
|
91
86
|
|
|
92
87
|
exports.DeliverySlotItem = DeliverySlotItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DeliverySlotItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DeliverySlotItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -29,15 +29,11 @@ var DeliverySlotContainer = styled__default['default'].div(templateObject_4 || (
|
|
|
29
29
|
: (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.white;
|
|
30
30
|
});
|
|
31
31
|
var DeliverySlotBody = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n ", ";\n"])), function (props) { return props.disabled && 'opacity: 0.4'; });
|
|
32
|
-
var
|
|
33
|
-
var DotContainer = styled__default['default'].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n justify-content: center;\n display: flex;\n padding: ", "px 0;\n"], ["\n justify-content: center;\n display: flex;\n padding: ", "px 0;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
34
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
32
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
35
33
|
|
|
36
34
|
exports.DeliverySlotBody = DeliverySlotBody;
|
|
37
35
|
exports.DeliverySlotContainer = DeliverySlotContainer;
|
|
38
36
|
exports.DeliverySlotHeaderContainer = DeliverySlotHeaderContainer;
|
|
39
37
|
exports.DeliverySlotHeaderText = DeliverySlotHeaderText;
|
|
40
38
|
exports.DeliverySlotItemContainer = DeliverySlotItemContainer;
|
|
41
|
-
exports.DisabledLabel = DisabledLabel;
|
|
42
|
-
exports.DotContainer = DotContainer;
|
|
43
39
|
//# sourceMappingURL=DeliverySlotItem.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DeliverySlotItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DeliverySlotItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -15,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
15
15
|
|
|
16
16
|
function RadioListItem(_a) {
|
|
17
17
|
var _b, _c, _d, _e;
|
|
18
|
-
var onClick = _a.onClick, selected = _a.selected, name = _a.name, _f = _a.radioColor, radioColor = _f === void 0 ? 'alertBlue' : _f, defaultDisabledString = _a.defaultDisabledString, _g = _a.flexGrow, flexGrow = _g === void 0 ? 1 : _g, isDisabled = _a.isDisabled, dotIndicator = _a.dotIndicator, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label,
|
|
18
|
+
var onClick = _a.onClick, selected = _a.selected, name = _a.name, _f = _a.radioColor, radioColor = _f === void 0 ? 'alertBlue' : _f, defaultDisabledString = _a.defaultDisabledString, _g = _a.flexGrow, flexGrow = _g === void 0 ? 1 : _g, isDisabled = _a.isDisabled, dotIndicator = _a.dotIndicator, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, disabledText = _a.disabledText, secondaryLabel = _a.secondaryLabel, textOnSelected = _a.textOnSelected, value = _a.value, children = _a.children;
|
|
19
19
|
var checked = value === selected;
|
|
20
20
|
return (React__default['default'].createElement(RadioListItem_styles.BaseRadioListItemContainer, { background: transparent
|
|
21
21
|
? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.transparent
|
|
@@ -24,16 +24,13 @@ function RadioListItem(_a) {
|
|
|
24
24
|
? (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.blueLight
|
|
25
25
|
: (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.white
|
|
26
26
|
: 'white', noPadding: noPadding, onClick: isDisabled ? function () { } : function () { return onClick(value); } },
|
|
27
|
-
React__default['default'].createElement(
|
|
27
|
+
React__default['default'].createElement(RadioListItem_styles.RadioFlex, null,
|
|
28
28
|
React__default['default'].createElement(RadioListItem_styles.BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow },
|
|
29
29
|
React__default['default'].createElement(Radio.Radio, { customColor: radioColor, checked: checked, disabled: isDisabled, name: name, onChange: function () { return onClick(value); }, value: value }),
|
|
30
30
|
React__default['default'].createElement(RadioListItem_styles.StyledH3, { lineThrough: isDisabled }, label)),
|
|
31
31
|
React__default['default'].createElement(RadioListItem_styles.RadioSecondaryWrapper, null,
|
|
32
|
-
React__default['default'].createElement("
|
|
33
|
-
|
|
34
|
-
isDisabled
|
|
35
|
-
? disabledText || defaultDisabledString
|
|
36
|
-
: secondaryLabel))),
|
|
32
|
+
React__default['default'].createElement("span", null, dotIndicator && checked && (React__default['default'].createElement(DotIndicator.Dot, { color: dotIndicator.color, shadow: dotIndicator.shadow }))),
|
|
33
|
+
isDisabled ? (React__default['default'].createElement(typography.BodyText, null, disabledText || defaultDisabledString)) : (children || secondaryLabel))),
|
|
37
34
|
textOnSelected && checked && (React__default['default'].createElement(RadioListItem_styles.ExtraTextContainer, null,
|
|
38
35
|
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)))));
|
|
39
36
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -15,11 +15,14 @@ var BaseRadioItemLeftWrapper = styled__default['default'].div(templateObject_2 |
|
|
|
15
15
|
var ExtraTextContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n margin-left: ", "px;\n margin-top: ", "px;\n"], ["\n margin-left: ", "px;\n margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
16
16
|
var StyledH3 = styled__default['default'](typography.H3).attrs({ as: 'label' })(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n"], ["\n cursor: pointer;\n white-space: nowrap;\n"])));
|
|
17
17
|
var RadioSecondaryWrapper = styled__default['default'].div(templateObject_5 || (templateObject_5 = _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; });
|
|
18
|
-
var
|
|
18
|
+
var RadioFlex = styled__default['default'].div(templateObject_6 || (templateObject_6 = _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; });
|
|
19
|
+
styled__default['default'].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
19
21
|
|
|
20
22
|
exports.BaseRadioItemLeftWrapper = BaseRadioItemLeftWrapper;
|
|
21
23
|
exports.BaseRadioListItemContainer = BaseRadioListItemContainer;
|
|
22
24
|
exports.ExtraTextContainer = ExtraTextContainer;
|
|
25
|
+
exports.RadioFlex = RadioFlex;
|
|
23
26
|
exports.RadioSecondaryWrapper = RadioSecondaryWrapper;
|
|
24
27
|
exports.StyledH3 = StyledH3;
|
|
25
28
|
//# 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,21 +1,19 @@
|
|
|
1
1
|
import React, { useState, useEffect, useRef } from 'react';
|
|
2
2
|
import { theme } from '@citygross/design-tokens';
|
|
3
3
|
import { moment, useWindowSize, capitalizeFirstLetter } from '@citygross/utils';
|
|
4
|
-
import { BodyText, H2
|
|
5
|
-
import { DeliverySlotItemContainer, DeliverySlotHeaderContainer, DeliverySlotHeaderText, DeliverySlotContainer, DeliverySlotBody
|
|
6
|
-
import { Dot } from '../DotIndicator/DotIndicator.js';
|
|
4
|
+
import { BodyText, H2 } from '@citygross/typography';
|
|
5
|
+
import { DeliverySlotItemContainer, DeliverySlotHeaderContainer, DeliverySlotHeaderText, DeliverySlotContainer, DeliverySlotBody } from './DeliverySlotItem.styles.js';
|
|
7
6
|
|
|
8
7
|
function DeliverySlotItem(_a) {
|
|
9
|
-
var _b
|
|
10
|
-
var date = _a.date,
|
|
8
|
+
var _b;
|
|
9
|
+
var date = _a.date, selected = _a.selected, disabled = _a.disabled, children = _a.children, onSelect = _a.onSelect;
|
|
11
10
|
var momentDate = moment(date);
|
|
12
11
|
var width = useWindowSize().width;
|
|
13
|
-
var
|
|
12
|
+
var _c = useState(momentDate
|
|
14
13
|
.format(width < (((_b = theme.breakpoints) === null || _b === void 0 ? void 0 : _b.md) || 768) ? 'ddd' : 'dddd')
|
|
15
|
-
.toLocaleLowerCase()), weekDay =
|
|
14
|
+
.toLocaleLowerCase()), weekDay = _c[0], setWeekDay = _c[1];
|
|
16
15
|
var dayNumber = momentDate.format('D');
|
|
17
16
|
var month = momentDate.format('MMM').toLocaleLowerCase();
|
|
18
|
-
var disabled = disabledLabel !== undefined;
|
|
19
17
|
useEffect(function () {
|
|
20
18
|
var _a;
|
|
21
19
|
setWeekDay(momentDate
|
|
@@ -23,7 +21,7 @@ function DeliverySlotItem(_a) {
|
|
|
23
21
|
.toLocaleLowerCase());
|
|
24
22
|
}, [width]);
|
|
25
23
|
var slotRef = useRef(null);
|
|
26
|
-
var
|
|
24
|
+
var _d = useState(true), isVisible = _d[0], setIsVisible = _d[1];
|
|
27
25
|
var callbackFn = function (entries) {
|
|
28
26
|
var entry = entries[0];
|
|
29
27
|
// gets zoom level
|
|
@@ -75,10 +73,7 @@ function DeliverySlotItem(_a) {
|
|
|
75
73
|
React.createElement(DeliverySlotBody, { disabled: disabled },
|
|
76
74
|
React.createElement(H2, { color: 'darkest' }, removeLeadingZero(dayNumber)),
|
|
77
75
|
React.createElement(BodyText, { color: 'darker' }, capitalizeFirstLetter(month))),
|
|
78
|
-
|
|
79
|
-
React.createElement(BodyText, { size: TextTypes.TextSize.EXTRASMALL }, disabledLabel))),
|
|
80
|
-
!disabledLabel && showWarningIndicator && (React.createElement(DotContainer, null,
|
|
81
|
-
React.createElement(Dot, { color: (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.alertRed }))))));
|
|
76
|
+
children)));
|
|
82
77
|
}
|
|
83
78
|
|
|
84
79
|
export { DeliverySlotItem };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DeliverySlotItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DeliverySlotItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -21,9 +21,7 @@ var DeliverySlotContainer = styled.div(templateObject_4 || (templateObject_4 = _
|
|
|
21
21
|
: (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.white;
|
|
22
22
|
});
|
|
23
23
|
var DeliverySlotBody = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n ", ";\n"])), function (props) { return props.disabled && 'opacity: 0.4'; });
|
|
24
|
-
var
|
|
25
|
-
var DotContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n justify-content: center;\n display: flex;\n padding: ", "px 0;\n"], ["\n justify-content: center;\n display: flex;\n padding: ", "px 0;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
26
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
24
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
27
25
|
|
|
28
|
-
export { DeliverySlotBody, DeliverySlotContainer, DeliverySlotHeaderContainer, DeliverySlotHeaderText, DeliverySlotItemContainer
|
|
26
|
+
export { DeliverySlotBody, DeliverySlotContainer, DeliverySlotHeaderContainer, DeliverySlotHeaderText, DeliverySlotItemContainer };
|
|
29
27
|
//# sourceMappingURL=DeliverySlotItem.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DeliverySlotItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DeliverySlotItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -3,11 +3,11 @@ 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, BaseRadioItemLeftWrapper, StyledH3, RadioSecondaryWrapper, ExtraTextContainer } from './RadioListItem.styles.js';
|
|
6
|
+
import { BaseRadioListItemContainer, RadioFlex, BaseRadioItemLeftWrapper, StyledH3, RadioSecondaryWrapper, ExtraTextContainer } from './RadioListItem.styles.js';
|
|
7
7
|
|
|
8
8
|
function RadioListItem(_a) {
|
|
9
9
|
var _b, _c, _d, _e;
|
|
10
|
-
var onClick = _a.onClick, selected = _a.selected, name = _a.name, _f = _a.radioColor, radioColor = _f === void 0 ? 'alertBlue' : _f, defaultDisabledString = _a.defaultDisabledString, _g = _a.flexGrow, flexGrow = _g === void 0 ? 1 : _g, isDisabled = _a.isDisabled, dotIndicator = _a.dotIndicator, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label,
|
|
10
|
+
var onClick = _a.onClick, selected = _a.selected, name = _a.name, _f = _a.radioColor, radioColor = _f === void 0 ? 'alertBlue' : _f, defaultDisabledString = _a.defaultDisabledString, _g = _a.flexGrow, flexGrow = _g === void 0 ? 1 : _g, isDisabled = _a.isDisabled, dotIndicator = _a.dotIndicator, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, disabledText = _a.disabledText, secondaryLabel = _a.secondaryLabel, textOnSelected = _a.textOnSelected, value = _a.value, children = _a.children;
|
|
11
11
|
var checked = value === selected;
|
|
12
12
|
return (React.createElement(BaseRadioListItemContainer, { background: transparent
|
|
13
13
|
? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.transparent
|
|
@@ -16,16 +16,13 @@ function RadioListItem(_a) {
|
|
|
16
16
|
? (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.blueLight
|
|
17
17
|
: (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.white
|
|
18
18
|
: 'white', noPadding: noPadding, onClick: isDisabled ? function () { } : function () { return onClick(value); } },
|
|
19
|
-
React.createElement(
|
|
19
|
+
React.createElement(RadioFlex, null,
|
|
20
20
|
React.createElement(BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow },
|
|
21
21
|
React.createElement(Radio, { customColor: radioColor, checked: checked, disabled: isDisabled, name: name, onChange: function () { return onClick(value); }, value: value }),
|
|
22
22
|
React.createElement(StyledH3, { lineThrough: isDisabled }, label)),
|
|
23
23
|
React.createElement(RadioSecondaryWrapper, null,
|
|
24
|
-
React.createElement("
|
|
25
|
-
|
|
26
|
-
isDisabled
|
|
27
|
-
? disabledText || defaultDisabledString
|
|
28
|
-
: secondaryLabel))),
|
|
24
|
+
React.createElement("span", null, dotIndicator && checked && (React.createElement(Dot, { color: dotIndicator.color, shadow: dotIndicator.shadow }))),
|
|
25
|
+
isDisabled ? (React.createElement(BodyText, null, disabledText || defaultDisabledString)) : (children || secondaryLabel))),
|
|
29
26
|
textOnSelected && checked && (React.createElement(ExtraTextContainer, null,
|
|
30
27
|
React.createElement(BodyText, { size: TextTypes.TextSize.SMALL, color: (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.dark }, textOnSelected)))));
|
|
31
28
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -7,7 +7,9 @@ var BaseRadioItemLeftWrapper = styled.div(templateObject_2 || (templateObject_2
|
|
|
7
7
|
var ExtraTextContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-left: ", "px;\n margin-top: ", "px;\n"], ["\n margin-left: ", "px;\n margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
8
8
|
var StyledH3 = styled(H3).attrs({ as: 'label' })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n"], ["\n cursor: pointer;\n white-space: nowrap;\n"])));
|
|
9
9
|
var RadioSecondaryWrapper = styled.div(templateObject_5 || (templateObject_5 = __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; });
|
|
10
|
-
var
|
|
10
|
+
var RadioFlex = styled.div(templateObject_6 || (templateObject_6 = __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; });
|
|
11
|
+
styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
12
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
11
13
|
|
|
12
|
-
export { BaseRadioItemLeftWrapper, BaseRadioListItemContainer, ExtraTextContainer, RadioSecondaryWrapper, StyledH3 };
|
|
14
|
+
export { BaseRadioItemLeftWrapper, BaseRadioListItemContainer, ExtraTextContainer, RadioFlex, RadioSecondaryWrapper, StyledH3 };
|
|
13
15
|
//# 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":";;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.43",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -63,13 +63,13 @@
|
|
|
63
63
|
},
|
|
64
64
|
"dependencies": {
|
|
65
65
|
"@citygross/design-tokens": "^0.2.15",
|
|
66
|
-
"@citygross/icons": "^0.1.
|
|
67
|
-
"@citygross/react-use-bg-wizard": "^0.0.
|
|
66
|
+
"@citygross/icons": "^0.1.2",
|
|
67
|
+
"@citygross/react-use-bg-wizard": "^0.0.8",
|
|
68
68
|
"@citygross/typography": "^0.0.42",
|
|
69
69
|
"@citygross/utils": "^0.0.19",
|
|
70
70
|
"framer-motion": "^4.1.17",
|
|
71
71
|
"moment": "^2.29.1",
|
|
72
72
|
"react-loading-skeleton": "^2.2.0"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "76434a7df07ef540cc7f4158380cb9884ffb70cd"
|
|
75
75
|
}
|