@citygross/components 0.7.60 → 0.7.61
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/RadioListItem/RadioListItem.stories.d.ts +0 -1
- package/build/@types/components/RadioListItem/RadioListItem.styles.d.ts +1 -1
- 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/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/package.json +2 -2
|
@@ -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">;
|
|
@@ -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":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -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":";;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.61",
|
|
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": "f5fb6a88d185a6e67ea05065302c8aedb23c4da5"
|
|
75
75
|
}
|