@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.
Files changed (22) hide show
  1. package/build/@types/components/DeliverySlotItem/DeliverySlotItem.d.ts +4 -3
  2. package/build/@types/components/DeliverySlotItem/DeliverySlotItem.styles.d.ts +0 -2
  3. package/build/@types/components/RadioListItem/RadioListItem.d.ts +2 -1
  4. package/build/@types/components/RadioListItem/RadioListItem.stories.d.ts +1 -0
  5. package/build/@types/components/RadioListItem/RadioListItem.styles.d.ts +2 -0
  6. package/build/cjs/components/src/components/DeliverySlotItem/DeliverySlotItem.js +6 -11
  7. package/build/cjs/components/src/components/DeliverySlotItem/DeliverySlotItem.js.map +1 -1
  8. package/build/cjs/components/src/components/DeliverySlotItem/DeliverySlotItem.styles.js +1 -5
  9. package/build/cjs/components/src/components/DeliverySlotItem/DeliverySlotItem.styles.js.map +1 -1
  10. package/build/cjs/components/src/components/RadioListItem/RadioListItem.js +4 -7
  11. package/build/cjs/components/src/components/RadioListItem/RadioListItem.js.map +1 -1
  12. package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js +4 -1
  13. package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js.map +1 -1
  14. package/build/es/components/src/components/DeliverySlotItem/DeliverySlotItem.js +8 -13
  15. package/build/es/components/src/components/DeliverySlotItem/DeliverySlotItem.js.map +1 -1
  16. package/build/es/components/src/components/DeliverySlotItem/DeliverySlotItem.styles.js +2 -4
  17. package/build/es/components/src/components/DeliverySlotItem/DeliverySlotItem.styles.js.map +1 -1
  18. package/build/es/components/src/components/RadioListItem/RadioListItem.js +5 -8
  19. package/build/es/components/src/components/RadioListItem/RadioListItem.js.map +1 -1
  20. package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js +4 -2
  21. package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js.map +1 -1
  22. 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
- disabledLabel?: string;
5
- showWarningIndicator?: boolean;
5
+ disabled: boolean;
6
+ children: React.ReactNode;
6
7
  onSelect: () => void;
7
8
  };
8
- export declare function DeliverySlotItem({ date, disabledLabel, showWarningIndicator, selected, onSelect }: TDeliverySlotItem): JSX.Element;
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, secondaryLabel, disabledText, textOnSelected, value }: TRadioListItemProps): JSX.Element;
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, _c;
18
- var date = _a.date, disabledLabel = _a.disabledLabel, showWarningIndicator = _a.showWarningIndicator, selected = _a.selected, onSelect = _a.onSelect;
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 _d = React.useState(momentDate
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 = _d[0], setWeekDay = _d[1];
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 _e = React.useState(true), isVisible = _e[0], setIsVisible = _e[1];
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
- disabledLabel && (React__default['default'].createElement(DeliverySlotItem_styles.DisabledLabel, null,
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 DisabledLabel = styled__default['default'].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n display: flex;\n justify-content: center;\n padding: ", "px 0;\n"], ["\n display: flex;\n justify-content: center;\n padding: ", "px 0;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
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, secondaryLabel = _a.secondaryLabel, disabledText = _a.disabledText, textOnSelected = _a.textOnSelected, value = _a.value;
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("div", { style: { display: 'flex' } },
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("p", null,
33
- React__default['default'].createElement("span", { style: { marginRight: '8px' } }, dotIndicator && checked && (React__default['default'].createElement(DotIndicator.Dot, { color: dotIndicator.color, shadow: dotIndicator.shadow }))),
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 templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
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, TextTypes } from '@citygross/typography';
5
- import { DeliverySlotItemContainer, DeliverySlotHeaderContainer, DeliverySlotHeaderText, DeliverySlotContainer, DeliverySlotBody, DisabledLabel, DotContainer } from './DeliverySlotItem.styles.js';
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, _c;
10
- var date = _a.date, disabledLabel = _a.disabledLabel, showWarningIndicator = _a.showWarningIndicator, selected = _a.selected, onSelect = _a.onSelect;
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 _d = useState(momentDate
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 = _d[0], setWeekDay = _d[1];
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 _e = useState(true), isVisible = _e[0], setIsVisible = _e[1];
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
- disabledLabel && (React.createElement(DisabledLabel, null,
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 DisabledLabel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n padding: ", "px 0;\n"], ["\n display: flex;\n justify-content: center;\n padding: ", "px 0;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
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, DisabledLabel, DotContainer };
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, secondaryLabel = _a.secondaryLabel, disabledText = _a.disabledText, textOnSelected = _a.textOnSelected, value = _a.value;
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("div", { style: { display: 'flex' } },
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("p", null,
25
- React.createElement("span", { style: { marginRight: '8px' } }, dotIndicator && checked && (React.createElement(Dot, { color: dotIndicator.color, shadow: dotIndicator.shadow }))),
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 templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
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.39",
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.1",
67
- "@citygross/react-use-bg-wizard": "^0.0.7",
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": "33bdc32d15bcacaaa914dd3a0c1befd5c90de964"
74
+ "gitHead": "76434a7df07ef540cc7f4158380cb9884ffb70cd"
75
75
  }