@citygross/components 0.16.19 → 0.16.21

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 (20) hide show
  1. package/build/@types/components/ListItem/ListItem.styles.d.ts +1 -1
  2. package/build/cjs/components/src/components/CartSummary/CartSummary.js +1 -1
  3. package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.js +2 -2
  4. package/build/cjs/components/src/components/ListItem/ListItem.js +1 -1
  5. package/build/cjs/components/src/components/ListItem/ListItem.styles.js +1 -3
  6. package/build/cjs/components/src/components/ListItem/ListItem.styles.js.map +1 -1
  7. package/build/cjs/components/src/components/RadioListItem/RadioListItem.js +6 -2
  8. package/build/cjs/components/src/components/RadioListItem/RadioListItem.js.map +1 -1
  9. package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js +1 -1
  10. package/build/cjs/components/src/helpers/form-element.js +1 -1
  11. package/build/es/components/src/components/CartSummary/CartSummary.js +1 -1
  12. package/build/es/components/src/components/FormElements/Checkbox/Checkbox.js +2 -2
  13. package/build/es/components/src/components/ListItem/ListItem.js +1 -1
  14. package/build/es/components/src/components/ListItem/ListItem.styles.js +1 -3
  15. package/build/es/components/src/components/ListItem/ListItem.styles.js.map +1 -1
  16. package/build/es/components/src/components/RadioListItem/RadioListItem.js +6 -2
  17. package/build/es/components/src/components/RadioListItem/RadioListItem.js.map +1 -1
  18. package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js +1 -1
  19. package/build/es/components/src/helpers/form-element.js +1 -1
  20. package/package.json +2 -2
package/build/@types/components/ListItem/ListItem.styles.d.ts CHANGED
@@ -5,7 +5,7 @@ export declare type TListItem = {
5
5
  export declare const ItemInformationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TListItem, never>;
6
6
  export declare const ListItemContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
7
7
  export declare const ListLeft: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TListItem, never>;
8
- export declare const ListRight: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<TListItem, "alignment">, never>;
8
+ export declare const ListRight: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
9
9
  export declare type TListImageContainer = {
10
10
  isSmall?: boolean;
11
11
  };
package/build/cjs/components/src/components/CartSummary/CartSummary.js CHANGED
@@ -88,7 +88,7 @@ function CartSummary(_a) {
88
88
  cartSummary.title && (React__default["default"].createElement(CartSummary_styles.CartSummaryTitle, null,
89
89
  React__default["default"].createElement(typography.BodyText, { fontWeight: "semiBold" }, cartSummary.title),
90
90
  React__default["default"].createElement(typography.BodyText, null, cartSummary.subtitle))),
91
- React__default["default"].createElement(CartSummary_styles.CartSummaryContent, { title: cartSummary.title, role: "list", "aria-label": "Order summary" },
91
+ React__default["default"].createElement(CartSummary_styles.CartSummaryContent, { title: cartSummary.title, role: "list", "aria-label": "Ordersammanfattning" },
92
92
  ((groceries === null || groceries === void 0 ? void 0 : groceries.length) > 0 || (cateredMeals === null || cateredMeals === void 0 ? void 0 : cateredMeals.length) > 0) && (React__default["default"].createElement(CartSummary_styles.CartLine, { role: "listitem" },
93
93
  React__default["default"].createElement(typography.BodyText, { fontWeight: "medium" },
94
94
  itemsLabel,
package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.js CHANGED
@@ -18,11 +18,11 @@ var Checkbox = function (_a) {
18
18
  var alignItems = _a.alignItems, checked = _a.checked, disabled = _a.disabled, hideLabel = _a.hideLabel, label = _a.label, props = _tslib.__rest(_a, ["alignItems", "checked", "disabled", "hideLabel", "label"]);
19
19
  var _b = formElement.getColorAttributes(checked, disabled), iconColor = _b.iconColor, labelColor = _b.labelColor, attributes = _tslib.__rest(_b, ["iconColor", "labelColor"]);
20
20
  return (React__default["default"].createElement(FormElement_styles.OptionInputWrapper, { alignItems: alignItems, as: "label", disabled: disabled },
21
- React__default["default"].createElement(Checkbox_styles.CheckboxInput, _tslib.__assign({ "aria-label": label, checked: checked, disabled: disabled, type: "checkbox" }, props)),
21
+ React__default["default"].createElement(Checkbox_styles.CheckboxInput, _tslib.__assign({ "aria-label": hideLabel ? label : undefined, checked: checked, disabled: disabled, type: "checkbox" }, props)),
22
22
  React__default["default"].createElement(Checkbox_styles.CheckboxContainer, { "aria-hidden": "true", attributes: attributes, alignItems: alignItems },
23
23
  React__default["default"].createElement(Checkbox_styles.IconContainer, null,
24
24
  React__default["default"].createElement(icons.Icons.CheckMark, { color: iconColor }))),
25
- !hideLabel && (React__default["default"].createElement(typography.BodyText, { "aria-hidden": "true", color: labelColor }, label))));
25
+ !hideLabel && React__default["default"].createElement(typography.BodyText, { color: labelColor }, label)));
26
26
  };
27
27
 
28
28
  exports.Checkbox = Checkbox;
package/build/cjs/components/src/components/ListItem/ListItem.js CHANGED
@@ -53,7 +53,7 @@ var ListItem = function (_a) {
53
53
  }, value: checkbox.value, alignItems: "flex-start" }));
54
54
  })))))),
55
55
  (item === null || item === void 0 ? void 0 : item.secondaryDescription) && item.secondaryDescription)),
56
- children && (React__default["default"].createElement(ListItem_styles.ListRight, { alignment: alignment }, children))));
56
+ children && (React__default["default"].createElement(ListItem_styles.ListRight, null, children))));
57
57
  };
58
58
 
59
59
  exports.ListItem = ListItem;
package/build/cjs/components/src/components/ListItem/ListItem.styles.js CHANGED
@@ -15,9 +15,7 @@ var ListItemContainer = styled__default["default"].div(templateObject_2 || (temp
15
15
  var ListLeft = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: ", ";\n gap: ", "px;\n\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n }\n"], ["\n display: flex;\n align-items: ", ";\n gap: ", "px;\n\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n }\n"])), function (props) {
16
16
  return props.alignment === ListItem.EListItemAlignment.TOP ? 'inherit' : 'center';
17
17
  }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, 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.constants) === null || _a === void 0 ? void 0 : _a.listItemFlexGap; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
18
- var ListRight = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: ", ";\n justify-content: space-between;\n text-align: right;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: ", ";\n justify-content: space-between;\n text-align: right;\n"])), function (props) {
19
- return props.alignment === ListItem.EListItemAlignment.TOP ? 'flex-start' : 'center';
20
- });
18
+ var ListRight = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: space-between;\n text-align: right;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: space-between;\n text-align: right;\n"])));
21
19
  var ListImageContainer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-shrink: 0;\n width: ", "px;\n height: ", "px;\n\n @media (max-width: ", "px) {\n width: ", "px;\n height: ", "px;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-shrink: 0;\n width: ", "px;\n height: ", "px;\n\n @media (max-width: ", "px) {\n width: ", "px;\n height: ", "px;\n }\n"])), function (props) {
22
20
  var _a, _b;
23
21
  return (props === null || props === void 0 ? void 0 : props.isSmall)
package/build/cjs/components/src/components/ListItem/ListItem.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"ListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/RadioListItem/RadioListItem.js CHANGED
@@ -5,13 +5,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var React = require('react');
6
6
  var RadioListItem_styles = require('./RadioListItem.styles.js');
7
7
  var utils = require('@citygross/utils');
8
+ var designTokens = require('@citygross/design-tokens');
9
+ var typography = require('@citygross/typography');
8
10
 
9
11
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
10
12
 
11
13
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
14
 
13
15
  function RadioListItem(_a) {
14
- var onClick = _a.onClick, selected = _a.selected, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children, tabIndex = _a.tabIndex, onFocus = _a.onFocus, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown;
16
+ var _b;
17
+ var onClick = _a.onClick, selected = _a.selected, _c = _a.flexGrow, flexGrow = _c === void 0 ? 1 : _c, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children, tabIndex = _a.tabIndex, onFocus = _a.onFocus, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown;
15
18
  var defaultTabIndex = isDisabled ? -1 : selected ? 0 : -1;
16
19
  return (React__default["default"].createElement(RadioListItem_styles.BaseRadioListItemContainer, { tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : defaultTabIndex, role: "radio", "aria-checked": selected, "aria-disabled": isDisabled, transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onFocus: onFocus, onBlur: onBlur, onKeyDown: function (event) { return utils.selectKeyboardEventHandler({ event: event, isDisabled: isDisabled, onClick: onClick, value: value, onKeyDown: onKeyDown }); } },
17
20
  React__default["default"].createElement(RadioListItem_styles.RadioFlex, { wrapMobile: wrapMobile },
@@ -19,7 +22,8 @@ function RadioListItem(_a) {
19
22
  React__default["default"].createElement(RadioListItem_styles.LabelContentWrapper, null,
20
23
  React__default["default"].createElement(RadioListItem_styles.StyledH3, { isDisabled: isDisabled }, label),
21
24
  additionalInfo && additionalInfo)),
22
- !isDisabled && (React__default["default"].createElement(RadioListItem_styles.RadioRightWrapper, null, children)))));
25
+ isDisabled ? (React__default["default"].createElement(RadioListItem_styles.RadioRightWrapper, null,
26
+ React__default["default"].createElement(typography.BodyText, { color: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.disabledDarkGray }, "Ej tillg\u00E4nglig"))) : (React__default["default"].createElement(RadioListItem_styles.RadioRightWrapper, null, children)))));
23
27
  }
24
28
 
25
29
  exports.RadioListItem = RadioListItem;
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
@@ -40,7 +40,7 @@ var StyledH3 = styled__default["default"](typography.H3).attrs({
40
40
  })(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n cursor: ", ";\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"], ["\n cursor: ", ";\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"])), function (props) { return (props.isDisabled ? 'not-allowed' : 'pointer'); }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m1; }, function (props) {
41
41
  var _a;
42
42
  return props.isDisabled &&
43
- "\n color: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledDarkGray, ";\n text-decoration: line-through;\n ");
43
+ "\n color: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledDarkGray, ";\n ");
44
44
  });
45
45
  var RadioRightWrapper = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n"], ["\n display: flex;\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; });
46
46
  styled__default["default"](typography.BodyText)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n font-size: ", "px;\n color: ", ";\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"], ["\n font-size: ", "px;\n color: ", ";\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) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) {
package/build/cjs/components/src/helpers/form-element.js CHANGED
@@ -17,7 +17,7 @@ var getColorAttributes = function (checked, disabled, isRadio) {
17
17
  if (!checked) {
18
18
  if (!disabled) {
19
19
  return {
20
- backgroundColor: (_a = designTokens.theme.palette) === null || _a === void 0 ? void 0 : _a.transparent,
20
+ backgroundColor: (_a = designTokens.theme.palette) === null || _a === void 0 ? void 0 : _a.white,
21
21
  borderColor: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.placeholder,
22
22
  hoverBackgroundColor: (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.lightest,
23
23
  iconColor: (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.transparent,
package/build/es/components/src/components/CartSummary/CartSummary.js CHANGED
@@ -80,7 +80,7 @@ function CartSummary(_a) {
80
80
  cartSummary.title && (React.createElement(CartSummaryTitle, null,
81
81
  React.createElement(BodyText, { fontWeight: "semiBold" }, cartSummary.title),
82
82
  React.createElement(BodyText, null, cartSummary.subtitle))),
83
- React.createElement(CartSummaryContent, { title: cartSummary.title, role: "list", "aria-label": "Order summary" },
83
+ React.createElement(CartSummaryContent, { title: cartSummary.title, role: "list", "aria-label": "Ordersammanfattning" },
84
84
  ((groceries === null || groceries === void 0 ? void 0 : groceries.length) > 0 || (cateredMeals === null || cateredMeals === void 0 ? void 0 : cateredMeals.length) > 0) && (React.createElement(CartLine, { role: "listitem" },
85
85
  React.createElement(BodyText, { fontWeight: "medium" },
86
86
  itemsLabel,
package/build/es/components/src/components/FormElements/Checkbox/Checkbox.js CHANGED
@@ -10,11 +10,11 @@ var Checkbox = function (_a) {
10
10
  var alignItems = _a.alignItems, checked = _a.checked, disabled = _a.disabled, hideLabel = _a.hideLabel, label = _a.label, props = __rest(_a, ["alignItems", "checked", "disabled", "hideLabel", "label"]);
11
11
  var _b = getColorAttributes(checked, disabled), iconColor = _b.iconColor, labelColor = _b.labelColor, attributes = __rest(_b, ["iconColor", "labelColor"]);
12
12
  return (React.createElement(OptionInputWrapper, { alignItems: alignItems, as: "label", disabled: disabled },
13
- React.createElement(CheckboxInput, __assign({ "aria-label": label, checked: checked, disabled: disabled, type: "checkbox" }, props)),
13
+ React.createElement(CheckboxInput, __assign({ "aria-label": hideLabel ? label : undefined, checked: checked, disabled: disabled, type: "checkbox" }, props)),
14
14
  React.createElement(CheckboxContainer, { "aria-hidden": "true", attributes: attributes, alignItems: alignItems },
15
15
  React.createElement(IconContainer, null,
16
16
  React.createElement(Icons.CheckMark, { color: iconColor }))),
17
- !hideLabel && (React.createElement(BodyText, { "aria-hidden": "true", color: labelColor }, label))));
17
+ !hideLabel && React.createElement(BodyText, { color: labelColor }, label)));
18
18
  };
19
19
 
20
20
  export { Checkbox };
package/build/es/components/src/components/ListItem/ListItem.js CHANGED
@@ -44,7 +44,7 @@ var ListItem = function (_a) {
44
44
  }, value: checkbox.value, alignItems: "flex-start" }));
45
45
  })))))),
46
46
  (item === null || item === void 0 ? void 0 : item.secondaryDescription) && item.secondaryDescription)),
47
- children && (React.createElement(ListRight, { alignment: alignment }, children))));
47
+ children && (React.createElement(ListRight, null, children))));
48
48
  };
49
49
 
50
50
  export { EListItemAlignment, ListItem };
package/build/es/components/src/components/ListItem/ListItem.styles.js CHANGED
@@ -7,9 +7,7 @@ var ListItemContainer = styled.div(templateObject_2 || (templateObject_2 = __mak
7
7
  var ListLeft = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: ", ";\n gap: ", "px;\n\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n }\n"], ["\n display: flex;\n align-items: ", ";\n gap: ", "px;\n\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n }\n"])), function (props) {
8
8
  return props.alignment === EListItemAlignment.TOP ? 'inherit' : 'center';
9
9
  }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, 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.constants) === null || _a === void 0 ? void 0 : _a.listItemFlexGap; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
10
- var ListRight = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: ", ";\n justify-content: space-between;\n text-align: right;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: ", ";\n justify-content: space-between;\n text-align: right;\n"])), function (props) {
11
- return props.alignment === EListItemAlignment.TOP ? 'flex-start' : 'center';
12
- });
10
+ var ListRight = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: space-between;\n text-align: right;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: space-between;\n text-align: right;\n"])));
13
11
  var ListImageContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-shrink: 0;\n width: ", "px;\n height: ", "px;\n\n @media (max-width: ", "px) {\n width: ", "px;\n height: ", "px;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-shrink: 0;\n width: ", "px;\n height: ", "px;\n\n @media (max-width: ", "px) {\n width: ", "px;\n height: ", "px;\n }\n"])), function (props) {
14
12
  var _a, _b;
15
13
  return (props === null || props === void 0 ? void 0 : props.isSmall)
package/build/es/components/src/components/ListItem/ListItem.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"ListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/RadioListItem/RadioListItem.js CHANGED
@@ -1,9 +1,12 @@
1
1
  import React from 'react';
2
2
  import { BaseRadioListItemContainer, RadioFlex, BaseRadioItemLeftWrapper, LabelContentWrapper, StyledH3, RadioRightWrapper } from './RadioListItem.styles.js';
3
3
  import { selectKeyboardEventHandler } from '@citygross/utils';
4
+ import { theme } from '@citygross/design-tokens';
5
+ import { BodyText } from '@citygross/typography';
4
6
 
5
7
  function RadioListItem(_a) {
6
- var onClick = _a.onClick, selected = _a.selected, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children, tabIndex = _a.tabIndex, onFocus = _a.onFocus, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown;
8
+ var _b;
9
+ var onClick = _a.onClick, selected = _a.selected, _c = _a.flexGrow, flexGrow = _c === void 0 ? 1 : _c, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children, tabIndex = _a.tabIndex, onFocus = _a.onFocus, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown;
7
10
  var defaultTabIndex = isDisabled ? -1 : selected ? 0 : -1;
8
11
  return (React.createElement(BaseRadioListItemContainer, { tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : defaultTabIndex, role: "radio", "aria-checked": selected, "aria-disabled": isDisabled, transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onFocus: onFocus, onBlur: onBlur, onKeyDown: function (event) { return selectKeyboardEventHandler({ event: event, isDisabled: isDisabled, onClick: onClick, value: value, onKeyDown: onKeyDown }); } },
9
12
  React.createElement(RadioFlex, { wrapMobile: wrapMobile },
@@ -11,7 +14,8 @@ function RadioListItem(_a) {
11
14
  React.createElement(LabelContentWrapper, null,
12
15
  React.createElement(StyledH3, { isDisabled: isDisabled }, label),
13
16
  additionalInfo && additionalInfo)),
14
- !isDisabled && (React.createElement(RadioRightWrapper, null, children)))));
17
+ isDisabled ? (React.createElement(RadioRightWrapper, null,
18
+ React.createElement(BodyText, { color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.disabledDarkGray }, "Ej tillg\u00E4nglig"))) : (React.createElement(RadioRightWrapper, null, children)))));
15
19
  }
16
20
 
17
21
  export { RadioListItem };
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
@@ -32,7 +32,7 @@ var StyledH3 = styled(H3).attrs({
32
32
  })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: ", ";\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"], ["\n cursor: ", ";\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"])), function (props) { return (props.isDisabled ? 'not-allowed' : 'pointer'); }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m1; }, function (props) {
33
33
  var _a;
34
34
  return props.isDisabled &&
35
- "\n color: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledDarkGray, ";\n text-decoration: line-through;\n ");
35
+ "\n color: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledDarkGray, ";\n ");
36
36
  });
37
37
  var RadioRightWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n"], ["\n display: flex;\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; });
38
38
  styled(BodyText)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: ", "px;\n color: ", ";\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"], ["\n font-size: ", "px;\n color: ", ";\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) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) {
package/build/es/components/src/helpers/form-element.js CHANGED
@@ -13,7 +13,7 @@ var getColorAttributes = function (checked, disabled, isRadio) {
13
13
  if (!checked) {
14
14
  if (!disabled) {
15
15
  return {
16
- backgroundColor: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.transparent,
16
+ backgroundColor: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.white,
17
17
  borderColor: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.placeholder,
18
18
  hoverBackgroundColor: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.lightest,
19
19
  iconColor: (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.transparent,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.16.19",
3
+ "version": "0.16.21",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -74,5 +74,5 @@
74
74
  "react-slick": "^0.30.1",
75
75
  "slick-carousel": "^1.8.1"
76
76
  },
77
- "gitHead": "781acd9ee91e8b16021851b56aff5deac25e53e2"
77
+ "gitHead": "7b4f1484cc989162b71dbb218d25c1b141bdd8f6"
78
78
  }