@citygross/components 0.7.70 → 0.7.71

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.
@@ -16,6 +16,7 @@ export declare type TRadioListItemProps = styles.TBaseRadioItemInputWrapper & {
16
16
  disabledText?: string;
17
17
  textOnSelected?: string;
18
18
  value: string | number;
19
+ wrapMobile?: boolean;
19
20
  children?: JSX.Element;
20
21
  };
21
- export declare function RadioListItem({ onClick, selected, name, radioColor, defaultDisabledString, flexGrow, isDisabled, dotIndicator, transparent, noPadding, label, disabledText, secondaryLabel, textOnSelected, value, children }: TRadioListItemProps): JSX.Element;
22
+ export declare function RadioListItem({ onClick, selected, name, radioColor, defaultDisabledString, flexGrow, isDisabled, dotIndicator, transparent, noPadding, label, disabledText, secondaryLabel, textOnSelected, value, wrapMobile, children }: TRadioListItemProps): JSX.Element;
@@ -9,3 +9,4 @@ export default _default;
9
9
  export declare const Default: Story<TRadioListItemProps>;
10
10
  export declare const Disabled: Story<TRadioListItemProps>;
11
11
  export declare const withChildren: Story<TRadioListItemProps>;
12
+ export declare const DisableWrapTemplate: Story<TRadioListItemProps>;
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  export declare type TBaseRadioItemInputWrapper = {
2
3
  isDisabled?: boolean;
3
4
  flexGrow?: number;
@@ -8,11 +9,21 @@ export declare type TBaseRadiolistItemcontainer = {
8
9
  background?: string;
9
10
  noPadding?: boolean;
10
11
  };
12
+ export declare type TWrapMobile = {
13
+ wrapMobile?: boolean;
14
+ };
11
15
  export declare const BaseRadioListItemContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseRadiolistItemcontainer, never>;
12
16
  export declare const BaseRadioItemLeftWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseRadioItemInputWrapper, never>;
13
17
  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
18
  as: string;
15
19
  }, "as">;
16
20
  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>;
21
+ export declare const DisableText: import("styled-components").StyledComponent<({ size, color, children, lineThrough, fontWeight, ...props }: {
22
+ children: import("react").ReactNode;
23
+ size?: import("@citygross/typography/build/types/textTypes").TextSize | undefined;
24
+ color?: string | undefined;
25
+ lineThrough?: boolean | undefined;
26
+ fontWeight?: "medium" | "bold" | "regular" | "semiBold" | undefined;
27
+ }) => JSX.Element, import("styled-components").DefaultTheme, TWrapMobile, never>;
28
+ export declare const RadioFlex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TWrapMobile, never>;
18
29
  export declare const SecondaryColumn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -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, disabledText = _a.disabledText, secondaryLabel = _a.secondaryLabel, textOnSelected = _a.textOnSelected, value = _a.value, children = _a.children;
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, wrapMobile = _a.wrapMobile, children = _a.children;
19
19
  return (React__default['default'].createElement(RadioListItem_styles.BaseRadioListItemContainer, { background: transparent
20
20
  ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.transparent
21
21
  : designTokens.theme && designTokens.theme.palette
@@ -23,7 +23,7 @@ function RadioListItem(_a) {
23
23
  ? (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.blueLight
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
- React__default['default'].createElement(RadioListItem_styles.RadioFlex, null,
26
+ React__default['default'].createElement(RadioListItem_styles.RadioFlex, { wrapMobile: wrapMobile },
27
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
29
  React__default['default'].createElement("div", null,
@@ -31,7 +31,7 @@ function RadioListItem(_a) {
31
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)))),
32
32
  React__default['default'].createElement(RadioListItem_styles.RadioSecondaryWrapper, null,
33
33
  React__default['default'].createElement("span", null, dotIndicator && selected && (React__default['default'].createElement(DotIndicator.Dot, { color: dotIndicator.color, shadow: dotIndicator.shadow }))),
34
- isDisabled ? (React__default['default'].createElement(typography.BodyText, null, disabledText || defaultDisabledString)) : (children || secondaryLabel)))));
34
+ isDisabled ? (React__default['default'].createElement(RadioListItem_styles.DisableText, null, disabledText || defaultDisabledString)) : (children || secondaryLabel)))));
35
35
  }
36
36
 
37
37
  exports.RadioListItem = RadioListItem;
@@ -14,12 +14,21 @@ var BaseRadioListItemContainer = styled__default['default'].div(templateObject_1
14
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
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
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;
17
+ var DisableText = styled__default['default'](typography.BodyText)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n font-size: ", "px;\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"], ["\n font-size: ", "px;\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) {
18
+ return (props === null || props === void 0 ? void 0 : props.wrapMobile) &&
19
+ "\n text-align: left;\n \n";
20
+ }, function (props) { var _a; return (_a = props.theme.breakpoints) === 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.s3; });
21
+ var RadioFlex = styled__default['default'].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n display: flex;\n gap: ", "px;\n ", "\n"], ["\n display: flex;\n gap: ", "px;\n ", "\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) {
22
+ var _a;
23
+ return (props === null || props === void 0 ? void 0 : props.wrapMobile) &&
24
+ "\n flex-wrap: wrap;\n @media (min-width: " + ((_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs) + "px) {\n flex-wrap: nowrap;\n }\n ";
25
+ });
26
+ 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"])));
27
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
20
28
 
21
29
  exports.BaseRadioItemLeftWrapper = BaseRadioItemLeftWrapper;
22
30
  exports.BaseRadioListItemContainer = BaseRadioListItemContainer;
31
+ exports.DisableText = DisableText;
23
32
  exports.RadioFlex = RadioFlex;
24
33
  exports.RadioSecondaryWrapper = RadioSecondaryWrapper;
25
34
  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,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, RadioFlex, BaseRadioItemLeftWrapper, StyledH3, RadioSecondaryWrapper } from './RadioListItem.styles.js';
6
+ import { BaseRadioListItemContainer, RadioFlex, BaseRadioItemLeftWrapper, StyledH3, RadioSecondaryWrapper, DisableText } 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, disabledText = _a.disabledText, secondaryLabel = _a.secondaryLabel, textOnSelected = _a.textOnSelected, value = _a.value, children = _a.children;
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, wrapMobile = _a.wrapMobile, children = _a.children;
11
11
  return (React.createElement(BaseRadioListItemContainer, { background: transparent
12
12
  ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.transparent
13
13
  : theme && theme.palette
@@ -15,7 +15,7 @@ function RadioListItem(_a) {
15
15
  ? (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.blueLight
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
- React.createElement(RadioFlex, null,
18
+ React.createElement(RadioFlex, { wrapMobile: wrapMobile },
19
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
21
  React.createElement("div", null,
@@ -23,7 +23,7 @@ function RadioListItem(_a) {
23
23
  textOnSelected && selected && (React.createElement(BodyText, { size: TextTypes.TextSize.SMALL, color: (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.dark }, textOnSelected)))),
24
24
  React.createElement(RadioSecondaryWrapper, null,
25
25
  React.createElement("span", null, dotIndicator && selected && (React.createElement(Dot, { color: dotIndicator.color, shadow: dotIndicator.shadow }))),
26
- isDisabled ? (React.createElement(BodyText, null, disabledText || defaultDisabledString)) : (children || secondaryLabel)))));
26
+ isDisabled ? (React.createElement(DisableText, null, disabledText || defaultDisabledString)) : (children || secondaryLabel)))));
27
27
  }
28
28
 
29
29
  export { RadioListItem };
@@ -1,14 +1,22 @@
1
1
  import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
2
- import { H3 } from '@citygross/typography';
2
+ import { H3, BodyText } 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
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
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
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;
9
+ var DisableText = styled(BodyText)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: ", "px;\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"], ["\n font-size: ", "px;\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) {
10
+ return (props === null || props === void 0 ? void 0 : props.wrapMobile) &&
11
+ "\n text-align: left;\n \n";
12
+ }, function (props) { var _a; return (_a = props.theme.breakpoints) === 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.s3; });
13
+ var RadioFlex = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n gap: ", "px;\n ", "\n"], ["\n display: flex;\n gap: ", "px;\n ", "\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) {
14
+ var _a;
15
+ return (props === null || props === void 0 ? void 0 : props.wrapMobile) &&
16
+ "\n flex-wrap: wrap;\n @media (min-width: " + ((_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs) + "px) {\n flex-wrap: nowrap;\n }\n ";
17
+ });
18
+ styled.div(templateObject_7 || (templateObject_7 = __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, templateObject_7;
12
20
 
13
- export { BaseRadioItemLeftWrapper, BaseRadioListItemContainer, RadioFlex, RadioSecondaryWrapper, StyledH3 };
21
+ export { BaseRadioItemLeftWrapper, BaseRadioListItemContainer, DisableText, RadioFlex, RadioSecondaryWrapper, StyledH3 };
14
22
  //# 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.70",
3
+ "version": "0.7.71",
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": "42123de4fd41df07008cc53f537cd5ac35e79196"
74
+ "gitHead": "ea1baad49b5bb535b7547925d6bc48d9654c5f16"
75
75
  }