@citygross/components 0.7.42 → 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 (12) hide show
  1. package/build/@types/components/RadioListItem/RadioListItem.d.ts +2 -1
  2. package/build/@types/components/RadioListItem/RadioListItem.stories.d.ts +1 -0
  3. package/build/@types/components/RadioListItem/RadioListItem.styles.d.ts +2 -0
  4. package/build/cjs/components/src/components/RadioListItem/RadioListItem.js +4 -7
  5. package/build/cjs/components/src/components/RadioListItem/RadioListItem.js.map +1 -1
  6. package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js +4 -1
  7. package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js.map +1 -1
  8. package/build/es/components/src/components/RadioListItem/RadioListItem.js +5 -8
  9. package/build/es/components/src/components/RadioListItem/RadioListItem.js.map +1 -1
  10. package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js +4 -2
  11. package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js.map +1 -1
  12. package/package.json +2 -2
package/build/@types/components/RadioListItem/RadioListItem.d.ts CHANGED
@@ -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;
package/build/@types/components/RadioListItem/RadioListItem.stories.d.ts CHANGED
@@ -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>;
package/build/@types/components/RadioListItem/RadioListItem.styles.d.ts CHANGED
@@ -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>;
package/build/cjs/components/src/components/RadioListItem/RadioListItem.js CHANGED
@@ -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
  }
package/build/cjs/components/src/components/RadioListItem/RadioListItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js CHANGED
@@ -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
package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js.map CHANGED
@@ -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/build/es/components/src/components/RadioListItem/RadioListItem.js CHANGED
@@ -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
  }
package/build/es/components/src/components/RadioListItem/RadioListItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js CHANGED
@@ -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
package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js.map CHANGED
@@ -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.42",
3
+ "version": "0.7.43",
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": "c798a4e09ec67571f1d42c3fb6aaec4c9c2b8198"
74
+ "gitHead": "76434a7df07ef540cc7f4158380cb9884ffb70cd"
75
75
  }