@citygross/components 0.13.19 → 0.14.0

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 (18) hide show
  1. package/build/@types/components/RadioListItem/RadioListItem.d.ts +1 -3
  2. package/build/@types/components/RadioListItem/RadioListItem.styles.d.ts +1 -0
  3. package/build/@types/components/WarningLabel/WarningLabel.d.ts +3 -3
  4. package/build/@types/components/WarningLabel/WarningLabel.styles.d.ts +9 -0
  5. package/build/cjs/components/src/components/RadioListItem/RadioListItem.js +3 -3
  6. package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js +8 -4
  7. package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js.map +1 -1
  8. package/build/cjs/components/src/components/WarningLabel/WarningLabel.js +5 -110
  9. package/build/cjs/components/src/components/WarningLabel/WarningLabel.js.map +1 -1
  10. package/build/cjs/components/src/components/WarningLabel/WarningLabel.styles.js +7 -5
  11. package/build/cjs/components/src/components/WarningLabel/WarningLabel.styles.js.map +1 -1
  12. package/build/es/components/src/components/RadioListItem/RadioListItem.js +4 -4
  13. package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js +8 -4
  14. package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js.map +1 -1
  15. package/build/es/components/src/components/WarningLabel/WarningLabel.js +6 -111
  16. package/build/es/components/src/components/WarningLabel/WarningLabel.js.map +1 -1
  17. package/build/es/components/src/components/WarningLabel/WarningLabel.styles.js +6 -6
  18. package/package.json +2 -2
package/build/@types/components/RadioListItem/RadioListItem.d.ts CHANGED
@@ -3,16 +3,14 @@ import * as styles from './RadioListItem.styles';
3
3
  export declare type TRadioListItemProps = styles.TBaseRadioItemInputWrapper & {
4
4
  onClick: (value: string | number) => void;
5
5
  selected?: boolean;
6
- defaultDisabledString?: string;
7
6
  transparent?: boolean;
8
7
  noPadding?: boolean;
9
8
  label: string;
10
9
  secondaryLabel?: string;
11
10
  isDisabled?: boolean;
12
- disabledText?: string;
13
11
  value: string | number;
14
12
  wrapMobile?: boolean;
15
13
  children?: JSX.Element;
16
14
  additionalInfo?: JSX.Element;
17
15
  };
18
- export declare function RadioListItem({ onClick, selected, defaultDisabledString, flexGrow, isDisabled, transparent, noPadding, label, disabledText, value, wrapMobile, additionalInfo, children }: TRadioListItemProps): JSX.Element;
16
+ export declare function RadioListItem({ onClick, selected, flexGrow, isDisabled, transparent, noPadding, label, value, wrapMobile, additionalInfo, children }: TRadioListItemProps): JSX.Element;
package/build/@types/components/RadioListItem/RadioListItem.styles.d.ts CHANGED
@@ -30,3 +30,4 @@ export declare const DisableText: import("styled-components").StyledComponent<({
30
30
  } & import("react").HTMLAttributes<HTMLParagraphElement>) => JSX.Element, import("styled-components").DefaultTheme, TWrapMobile, never>;
31
31
  export declare const RadioFlex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TWrapMobile, never>;
32
32
  export declare const SecondaryColumn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
33
+ export declare const LabelContentWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
package/build/@types/components/WarningLabel/WarningLabel.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  export declare type TWarningLabel = {
3
- children: React.ReactNode;
3
+ text: string;
4
4
  background: string;
5
- toolTip?: React.ReactNode;
5
+ icon?: React.ReactNode;
6
6
  };
7
- export declare function WarningLabel({ children, background, toolTip }: TWarningLabel): JSX.Element;
7
+ export declare function WarningLabel({ text, background, icon }: TWarningLabel): JSX.Element;
package/build/@types/components/WarningLabel/WarningLabel.styles.d.ts CHANGED
@@ -4,3 +4,12 @@ export declare type TWarningIndicator = {
4
4
  toolTip?: React.ReactNode;
5
5
  };
6
6
  export declare const WarningIndicator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TWarningIndicator, never>;
7
+ export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
8
+ export declare const BodyTextStyled: import("styled-components").StyledComponent<({ children, color, fontWeight, id, lineThrough, size, textAlign, ...props }: {
9
+ color?: string | undefined;
10
+ fontWeight?: "regular" | "medium" | "semiBold" | "bold" | "extraBold" | undefined;
11
+ id?: string | undefined;
12
+ lineThrough?: boolean | undefined;
13
+ size?: import("@citygross/typography/build/types/textTypes").TextSize | undefined;
14
+ textAlign?: "center" | "left" | "right" | undefined;
15
+ } & import("react").HTMLAttributes<HTMLParagraphElement>) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
package/build/cjs/components/src/components/RadioListItem/RadioListItem.js CHANGED
@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
10
10
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
11
11
 
12
12
  function RadioListItem(_a) {
13
- var onClick = _a.onClick, selected = _a.selected, defaultDisabledString = _a.defaultDisabledString, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, disabledText = _a.disabledText, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children;
13
+ 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;
14
14
  return (React__default["default"].createElement(RadioListItem_styles.BaseRadioListItemContainer, { tabIndex: 0, role: 'checkbox', transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onKeyDown: function (event) {
15
15
  if (event.key === 'Enter' && !isDisabled) {
16
16
  onClick(value);
@@ -18,10 +18,10 @@ function RadioListItem(_a) {
18
18
  } },
19
19
  React__default["default"].createElement(RadioListItem_styles.RadioFlex, { wrapMobile: wrapMobile },
20
20
  React__default["default"].createElement(RadioListItem_styles.BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow },
21
- React__default["default"].createElement("div", null,
21
+ React__default["default"].createElement(RadioListItem_styles.LabelContentWrapper, null,
22
22
  React__default["default"].createElement(RadioListItem_styles.StyledH3, { isDisabled: isDisabled }, label),
23
23
  additionalInfo && additionalInfo)),
24
- React__default["default"].createElement(RadioListItem_styles.RadioRightWrapper, null, isDisabled ? (React__default["default"].createElement(RadioListItem_styles.DisableText, null, disabledText || defaultDisabledString)) : (children)))));
24
+ !isDisabled && (React__default["default"].createElement(RadioListItem_styles.RadioRightWrapper, null, children)))));
25
25
  }
26
26
 
27
27
  exports.RadioListItem = RadioListItem;
package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js CHANGED
@@ -35,9 +35,12 @@ var BaseRadioListItemContainer = styled__default["default"].div(templateObject_1
35
35
  "background: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter));
36
36
  });
37
37
  var BaseRadioItemLeftWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n flex: 5;\n align-items: flex-start;\n ", ";\n"], ["\n display: flex;\n flex: 5;\n align-items: flex-start;\n ", ";\n"])), function (props) { return props.flexGrow && "flex-grow: ".concat(props.flexGrow); });
38
- 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 line-height: ", "px;\n ", ";\n"], ["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m1; }, function (props) { var _a; return props.isDisabled && "color:".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark); });
38
+ 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 line-height: ", "px;\n ", ";\n"], ["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m1; }, function (props) {
39
+ var _a;
40
+ return props.isDisabled && "\n color: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark, ";\n text-decoration: line-through;\n ");
41
+ });
39
42
  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; });
40
- var DisableText = 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) {
43
+ 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) {
41
44
  return (props === null || props === void 0 ? void 0 : props.wrapMobile) &&
42
45
  "\n text-align: left;\n \n";
43
46
  }, 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; });
@@ -47,11 +50,12 @@ var RadioFlex = styled__default["default"].div(templateObject_6 || (templateObje
47
50
  "\n flex-wrap: wrap;\n @media (min-width: ".concat((_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs, "px) {\n flex-wrap: nowrap;\n }\n ");
48
51
  });
49
52
  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"])));
50
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
53
+ var LabelContentWrapper = styled__default["default"].div(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
54
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
51
55
 
52
56
  exports.BaseRadioItemLeftWrapper = BaseRadioItemLeftWrapper;
53
57
  exports.BaseRadioListItemContainer = BaseRadioListItemContainer;
54
- exports.DisableText = DisableText;
58
+ exports.LabelContentWrapper = LabelContentWrapper;
55
59
  exports.RadioFlex = RadioFlex;
56
60
  exports.RadioRightWrapper = RadioRightWrapper;
57
61
  exports.StyledH3 = StyledH3;
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/cjs/components/src/components/WarningLabel/WarningLabel.js CHANGED
@@ -3,123 +3,18 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
- require('@citygross/typography');
7
- require('../AddressBlock/AddressBlock.styles.js');
8
- require('@citygross/design-tokens');
9
- require('@citygross/icons');
10
- require('../Accordion/Accordion.styles.js');
11
- require('../AlertBox/AlertBox.js');
12
- require('../BackButton/BackButton.styles.js');
13
- require('../BackgroundImage/BackgroundImage.styles.js');
14
- require('../Badge/Badge.styles.js');
15
- require('../../../../_virtual/_tslib.js');
16
- require('../BoxArrow/BoxArrow.styles.js');
17
- require('../Box/Box.styles.js');
18
- require('../Button/Button.js');
19
- require('../Button/Button.styles.js');
20
- require('../Button/NavButton.js');
21
- require('../CartCard/CartCard.styles.js');
22
- require('../CgButton/CgButton.js');
23
- require('../CgButton/CgButton.types.js');
24
- require('../CartCardLabel/CartCardLabel.styles.js');
25
- require('@citygross/utils');
26
- require('react-loading-skeleton');
27
- require('../CartItemSummary/CartItemSummary.styles.js');
28
- require('../CartSubTotal/CartSubTotal.js');
29
- require('../ToolTipDialog/ToolTipDialog.styles.js');
30
- require('../CartSummary/CartSummary.styles.js');
31
- require('../../../../design-tokens/build/index.js');
32
- require('../CgButton/ButtonAsLink/ButtonAsLink.styles.js');
33
- require('../CgButton/CgButton.styles.js');
34
- require('../Chips/Chip.styles.js');
35
- require('../Spinner/Spinner.styles.js');
36
- require('../Collapsable/Collapsable.styles.js');
37
- require('../CouponCode/CouponCode.js');
38
- require('../CustomerInfoBlock/CustomerInfoBlock.styles.js');
39
- require('../DateBox/DateBox.styles.js');
40
- require('../DeliverySlotItem/DeliverySlotItem.styles.js');
41
- require('../DeliveryTimeBlock/DeliveryTimeBlock.styles.js');
42
- require('../Divider/Divider.styles.js');
43
- require('../DotIndicator/DotIndicator.styles.js');
44
- require('../Fieldset/Fieldset.styles.js');
45
- require('../Flex/Flex.styles.js');
46
- require('../Form/Form.styles.js');
47
- require('../FormControl/FormControl.js');
48
- require('../ScreenReader/ScreenReader.styles.js');
49
- require('../FormElements/FormElement.types.js');
50
- require('../FormElements/Checkbox/Checkbox.styles.js');
51
- require('../FormElements/FormElement.styles.js');
52
- require('../FormElements/Input/Input.js');
53
- require('../FormElements/InputOld/InputOld.styles.js');
54
- require('../FormElements/Radio/Radio.styles.js');
55
- require('../FormElements/Select/Select.styles.js');
56
- require('../FormElements/Switch/Switch.styles.js');
57
- require('../FormElements/TextArea/TextArea.styles.js');
58
- require('../FormGroup/FormGroup.styles.js');
59
- require('../GridContainer/GridContainer.styles.js');
60
- require('../Logo/Logo.styles.js');
61
- require('../Header/Header.styles.js');
62
- require('../HeaderLink/HeaderLink.styles.js');
63
- require('../HighlightBox/HighlightBox.styles.js');
64
- require('../IconText/IconText.styles.js');
65
- require('../IconToolTip/IconToolTip.styles.js');
66
- require('../Spacer/Spacer.styles.js');
67
- require('../InfoTextBlock/InfoTextBlock.styles.js');
68
- require('../LayoutBox/LayoutBox.styles.js');
69
- require('../Links/Link.js');
70
- require('../ListItem/ListItem.js');
71
- require('../ListItemWithRadio/ListItemWithRadio.styles.js');
72
- require('../MaxHeightText/styles.js');
73
- require('../Menu/Menu.styles.js');
74
- require('../MenuListItem/MenuListItem.styles.js');
75
- require('../MenuListDropdown/MenuListDropdown.styles.js');
76
- require('../MobileTable/MobileTable.styles.js');
77
- require('../Modal/Modal.js');
78
- require('../NavMainLink/NavMainLink.styled.js');
79
- require('../Pagination/Pagination.styles.js');
80
- require('../Pill/Pill.styles.js');
81
- require('../PriceTag/PriceTag.types.js');
82
- require('../PriceStripe/PriceStripe.styles.js');
83
- require('../PriceTag/PriceTag.styles.js');
84
- require('../ProductHeader/ProductHeader.js');
85
- require('../ProgressBar/ProgressBar.styled.js');
86
- require('../QuantitySelector/QuantitySelector.styles.js');
87
- require('../QuantitySelector/QuantitySelector.types.js');
88
- require('../RadioBox/RadioBoxItem.styles.js');
89
- require('../RadioBox/RadioBoxList.styles.js');
90
- require('../RadioGroup/RadioGroup.styles.js');
91
- require('../RadioListItem/RadioListItem.styles.js');
92
- require('../RippleContainer/RippleContainer.styles.js');
93
- require('../SearchListItem/SearchListItem.styles.js');
94
- require('../SearchSuggestionChip/SearchSuggestionChip.styles.js');
95
- require('../SelectButton/SelectButton.styles.js');
96
- require('../SkipTo/SkipTo.styles.js');
97
- require('../SideModal/SideModal.js');
98
- require('../SlideInOutContainer/SlideInOutContainer.styles.js');
99
- require('../Slider/Slider.styles.js');
100
- require('react-slick');
101
- require('../Stepper/Stepper.styles.js');
102
- var ToolTip = require('../ToolTip/ToolTip.js');
103
- require('../StepperMobile/StepperMobile.styles.js');
104
- require('../Table/Table.styles.js');
105
- require('../Tag/Tag.styles.js');
106
- require('../Timeline/Timeline.styles.js');
107
- require('../UnorderedList/UnorderedList.styles.js');
108
6
  var WarningLabel_styles = require('./WarningLabel.styles.js');
109
- require('../ZipCodeInput/ZipCodeInput.styles.js');
110
- require('../../containers/PageContainer/PageContainer.styles.js');
111
- require('../../../../utils/build/index.js');
112
- require('../../containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js');
7
+ var typography = require('@citygross/typography');
113
8
 
114
9
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
115
10
 
116
11
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
117
12
 
118
13
  function WarningLabel(_a) {
119
- var children = _a.children, background = _a.background, toolTip = _a.toolTip;
120
- return (React__default["default"].createElement(WarningLabel_styles.WarningIndicator, { background: background, toolTip: toolTip },
121
- toolTip && React__default["default"].createElement(ToolTip.ToolTip, null, toolTip),
122
- children));
14
+ var text = _a.text, background = _a.background, icon = _a.icon;
15
+ return (React__default["default"].createElement(WarningLabel_styles.WarningIndicator, { background: background },
16
+ icon && (React__default["default"].createElement(WarningLabel_styles.IconWrapper, null, icon)),
17
+ React__default["default"].createElement(WarningLabel_styles.BodyTextStyled, { size: typography.TextTypes.TextSize.TINY }, text)));
123
18
  }
124
19
 
125
20
  exports.WarningLabel = WarningLabel;
package/build/cjs/components/src/components/WarningLabel/WarningLabel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/WarningLabel/WarningLabel.styles.js CHANGED
@@ -4,16 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _tslib = require('../../../../_virtual/_tslib.js');
6
6
  var styled = require('styled-components');
7
+ var typography = require('@citygross/typography');
7
8
 
8
9
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
10
 
10
11
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
12
 
12
- var WarningIndicator = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n padding: ", "px\n ", "px;\n background-color: ", ";\n border-radius: ", "px;\n display: inline-block;\n position: relative;\n ", ";\n"], ["\n padding: ", "px\n ", "px;\n background-color: ", ";\n border-radius: ", "px;\n display: inline-block;\n position: relative;\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return props.background; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.big; }, function (props) {
13
- return props.toolTip &&
14
- "\n > {\n &:first-child {\n display: none;\n }\n }\n\n &:hover {\n > {\n &:first-child {\n display: block;\n }\n }\n }\n ";
15
- });
16
- var templateObject_1;
13
+ var WarningIndicator = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n padding: ", "px\n ", "px;\n background-color: ", ";\n border-radius: ", "px;\n position: relative;\n display: flex;\n align-items: center;\n gap: ", "px;\n width: fit-content;\n"], ["\n padding: ", "px\n ", "px;\n background-color: ", ";\n border-radius: ", "px;\n position: relative;\n display: flex;\n align-items: center;\n gap: ", "px;\n width: fit-content;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return props.background; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.big; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
14
+ var IconWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n"])));
15
+ var BodyTextStyled = styled__default["default"](typography.BodyText)(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n margin-top: ", "px;\n"], ["\n margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; });
16
+ var templateObject_1, templateObject_2, templateObject_3;
17
17
 
18
+ exports.BodyTextStyled = BodyTextStyled;
19
+ exports.IconWrapper = IconWrapper;
18
20
  exports.WarningIndicator = WarningIndicator;
19
21
  //# sourceMappingURL=WarningLabel.styles.js.map
package/build/cjs/components/src/components/WarningLabel/WarningLabel.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"WarningLabel.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"WarningLabel.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/RadioListItem/RadioListItem.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
- import { BaseRadioListItemContainer, RadioFlex, BaseRadioItemLeftWrapper, StyledH3, RadioRightWrapper, DisableText } from './RadioListItem.styles.js';
2
+ import { BaseRadioListItemContainer, RadioFlex, BaseRadioItemLeftWrapper, LabelContentWrapper, StyledH3, RadioRightWrapper } from './RadioListItem.styles.js';
3
3
 
4
4
  function RadioListItem(_a) {
5
- var onClick = _a.onClick, selected = _a.selected, defaultDisabledString = _a.defaultDisabledString, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, disabledText = _a.disabledText, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children;
5
+ 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;
6
6
  return (React.createElement(BaseRadioListItemContainer, { tabIndex: 0, role: 'checkbox', transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onKeyDown: function (event) {
7
7
  if (event.key === 'Enter' && !isDisabled) {
8
8
  onClick(value);
@@ -10,10 +10,10 @@ function RadioListItem(_a) {
10
10
  } },
11
11
  React.createElement(RadioFlex, { wrapMobile: wrapMobile },
12
12
  React.createElement(BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow },
13
- React.createElement("div", null,
13
+ React.createElement(LabelContentWrapper, null,
14
14
  React.createElement(StyledH3, { isDisabled: isDisabled }, label),
15
15
  additionalInfo && additionalInfo)),
16
- React.createElement(RadioRightWrapper, null, isDisabled ? (React.createElement(DisableText, null, disabledText || defaultDisabledString)) : (children)))));
16
+ !isDisabled && (React.createElement(RadioRightWrapper, null, children)))));
17
17
  }
18
18
 
19
19
  export { RadioListItem };
package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js CHANGED
@@ -27,9 +27,12 @@ var BaseRadioListItemContainer = styled.div(templateObject_1 || (templateObject_
27
27
  "background: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter));
28
28
  });
29
29
  var BaseRadioItemLeftWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex: 5;\n align-items: flex-start;\n ", ";\n"], ["\n display: flex;\n flex: 5;\n align-items: flex-start;\n ", ";\n"])), function (props) { return props.flexGrow && "flex-grow: ".concat(props.flexGrow); });
30
- var StyledH3 = styled(H3).attrs({ as: 'label' })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"], ["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m1; }, function (props) { var _a; return props.isDisabled && "color:".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark); });
30
+ var StyledH3 = styled(H3).attrs({ as: 'label' })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"], ["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m1; }, function (props) {
31
+ var _a;
32
+ return props.isDisabled && "\n color: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark, ";\n text-decoration: line-through;\n ");
33
+ });
31
34
  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; });
32
- var DisableText = 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) {
35
+ 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) {
33
36
  return (props === null || props === void 0 ? void 0 : props.wrapMobile) &&
34
37
  "\n text-align: left;\n \n";
35
38
  }, 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; });
@@ -39,7 +42,8 @@ var RadioFlex = styled.div(templateObject_6 || (templateObject_6 = __makeTemplat
39
42
  "\n flex-wrap: wrap;\n @media (min-width: ".concat((_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs, "px) {\n flex-wrap: nowrap;\n }\n ");
40
43
  });
41
44
  styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
42
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
45
+ var LabelContentWrapper = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
46
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
43
47
 
44
- export { BaseRadioItemLeftWrapper, BaseRadioListItemContainer, DisableText, RadioFlex, RadioRightWrapper, StyledH3 };
48
+ export { BaseRadioItemLeftWrapper, BaseRadioListItemContainer, LabelContentWrapper, RadioFlex, RadioRightWrapper, StyledH3 };
45
49
  //# 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/build/es/components/src/components/WarningLabel/WarningLabel.js CHANGED
@@ -1,117 +1,12 @@
1
1
  import React from 'react';
2
- import '@citygross/typography';
3
- import '../AddressBlock/AddressBlock.styles.js';
4
- import '@citygross/design-tokens';
5
- import '@citygross/icons';
6
- import '../Accordion/Accordion.styles.js';
7
- import '../AlertBox/AlertBox.js';
8
- import '../BackButton/BackButton.styles.js';
9
- import '../BackgroundImage/BackgroundImage.styles.js';
10
- import '../Badge/Badge.styles.js';
11
- import '../../../../_virtual/_tslib.js';
12
- import '../BoxArrow/BoxArrow.styles.js';
13
- import '../Box/Box.styles.js';
14
- import '../Button/Button.js';
15
- import '../Button/Button.styles.js';
16
- import '../Button/NavButton.js';
17
- import '../CartCard/CartCard.styles.js';
18
- import '../CgButton/CgButton.js';
19
- import '../CgButton/CgButton.types.js';
20
- import '../CartCardLabel/CartCardLabel.styles.js';
21
- import '@citygross/utils';
22
- import 'react-loading-skeleton';
23
- import '../CartItemSummary/CartItemSummary.styles.js';
24
- import '../CartSubTotal/CartSubTotal.js';
25
- import '../ToolTipDialog/ToolTipDialog.styles.js';
26
- import '../CartSummary/CartSummary.styles.js';
27
- import '../../../../design-tokens/build/index.js';
28
- import '../CgButton/ButtonAsLink/ButtonAsLink.styles.js';
29
- import '../CgButton/CgButton.styles.js';
30
- import '../Chips/Chip.styles.js';
31
- import '../Spinner/Spinner.styles.js';
32
- import '../Collapsable/Collapsable.styles.js';
33
- import '../CouponCode/CouponCode.js';
34
- import '../CustomerInfoBlock/CustomerInfoBlock.styles.js';
35
- import '../DateBox/DateBox.styles.js';
36
- import '../DeliverySlotItem/DeliverySlotItem.styles.js';
37
- import '../DeliveryTimeBlock/DeliveryTimeBlock.styles.js';
38
- import '../Divider/Divider.styles.js';
39
- import '../DotIndicator/DotIndicator.styles.js';
40
- import '../Fieldset/Fieldset.styles.js';
41
- import '../Flex/Flex.styles.js';
42
- import '../Form/Form.styles.js';
43
- import '../FormControl/FormControl.js';
44
- import '../ScreenReader/ScreenReader.styles.js';
45
- import '../FormElements/FormElement.types.js';
46
- import '../FormElements/Checkbox/Checkbox.styles.js';
47
- import '../FormElements/FormElement.styles.js';
48
- import '../FormElements/Input/Input.js';
49
- import '../FormElements/InputOld/InputOld.styles.js';
50
- import '../FormElements/Radio/Radio.styles.js';
51
- import '../FormElements/Select/Select.styles.js';
52
- import '../FormElements/Switch/Switch.styles.js';
53
- import '../FormElements/TextArea/TextArea.styles.js';
54
- import '../FormGroup/FormGroup.styles.js';
55
- import '../GridContainer/GridContainer.styles.js';
56
- import '../Logo/Logo.styles.js';
57
- import '../Header/Header.styles.js';
58
- import '../HeaderLink/HeaderLink.styles.js';
59
- import '../HighlightBox/HighlightBox.styles.js';
60
- import '../IconText/IconText.styles.js';
61
- import '../IconToolTip/IconToolTip.styles.js';
62
- import '../Spacer/Spacer.styles.js';
63
- import '../InfoTextBlock/InfoTextBlock.styles.js';
64
- import '../LayoutBox/LayoutBox.styles.js';
65
- import '../Links/Link.js';
66
- import '../ListItem/ListItem.js';
67
- import '../ListItemWithRadio/ListItemWithRadio.styles.js';
68
- import '../MaxHeightText/styles.js';
69
- import '../Menu/Menu.styles.js';
70
- import '../MenuListItem/MenuListItem.styles.js';
71
- import '../MenuListDropdown/MenuListDropdown.styles.js';
72
- import '../MobileTable/MobileTable.styles.js';
73
- import '../Modal/Modal.js';
74
- import '../NavMainLink/NavMainLink.styled.js';
75
- import '../Pagination/Pagination.styles.js';
76
- import '../Pill/Pill.styles.js';
77
- import '../PriceTag/PriceTag.types.js';
78
- import '../PriceStripe/PriceStripe.styles.js';
79
- import '../PriceTag/PriceTag.styles.js';
80
- import '../ProductHeader/ProductHeader.js';
81
- import '../ProgressBar/ProgressBar.styled.js';
82
- import '../QuantitySelector/QuantitySelector.styles.js';
83
- import '../QuantitySelector/QuantitySelector.types.js';
84
- import '../RadioBox/RadioBoxItem.styles.js';
85
- import '../RadioBox/RadioBoxList.styles.js';
86
- import '../RadioGroup/RadioGroup.styles.js';
87
- import '../RadioListItem/RadioListItem.styles.js';
88
- import '../RippleContainer/RippleContainer.styles.js';
89
- import '../SearchListItem/SearchListItem.styles.js';
90
- import '../SearchSuggestionChip/SearchSuggestionChip.styles.js';
91
- import '../SelectButton/SelectButton.styles.js';
92
- import '../SkipTo/SkipTo.styles.js';
93
- import '../SideModal/SideModal.js';
94
- import '../SlideInOutContainer/SlideInOutContainer.styles.js';
95
- import '../Slider/Slider.styles.js';
96
- import 'react-slick';
97
- import '../Stepper/Stepper.styles.js';
98
- import { ToolTip } from '../ToolTip/ToolTip.js';
99
- import '../StepperMobile/StepperMobile.styles.js';
100
- import '../Table/Table.styles.js';
101
- import '../Tag/Tag.styles.js';
102
- import '../Timeline/Timeline.styles.js';
103
- import '../UnorderedList/UnorderedList.styles.js';
104
- import { WarningIndicator } from './WarningLabel.styles.js';
105
- import '../ZipCodeInput/ZipCodeInput.styles.js';
106
- import '../../containers/PageContainer/PageContainer.styles.js';
107
- import '../../../../utils/build/index.js';
108
- import '../../containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js';
2
+ import { WarningIndicator, IconWrapper, BodyTextStyled } from './WarningLabel.styles.js';
3
+ import { TextTypes } from '@citygross/typography';
109
4
 
110
5
  function WarningLabel(_a) {
111
- var children = _a.children, background = _a.background, toolTip = _a.toolTip;
112
- return (React.createElement(WarningIndicator, { background: background, toolTip: toolTip },
113
- toolTip && React.createElement(ToolTip, null, toolTip),
114
- children));
6
+ var text = _a.text, background = _a.background, icon = _a.icon;
7
+ return (React.createElement(WarningIndicator, { background: background },
8
+ icon && (React.createElement(IconWrapper, null, icon)),
9
+ React.createElement(BodyTextStyled, { size: TextTypes.TextSize.TINY }, text)));
115
10
  }
116
11
 
117
12
  export { WarningLabel };
package/build/es/components/src/components/WarningLabel/WarningLabel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
package/build/es/components/src/components/WarningLabel/WarningLabel.styles.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
2
2
  import styled from 'styled-components';
3
+ import { BodyText } from '@citygross/typography';
3
4
 
4
- var WarningIndicator = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: ", "px\n ", "px;\n background-color: ", ";\n border-radius: ", "px;\n display: inline-block;\n position: relative;\n ", ";\n"], ["\n padding: ", "px\n ", "px;\n background-color: ", ";\n border-radius: ", "px;\n display: inline-block;\n position: relative;\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return props.background; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.big; }, function (props) {
5
- return props.toolTip &&
6
- "\n > {\n &:first-child {\n display: none;\n }\n }\n\n &:hover {\n > {\n &:first-child {\n display: block;\n }\n }\n }\n ";
7
- });
8
- var templateObject_1;
5
+ var WarningIndicator = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: ", "px\n ", "px;\n background-color: ", ";\n border-radius: ", "px;\n position: relative;\n display: flex;\n align-items: center;\n gap: ", "px;\n width: fit-content;\n"], ["\n padding: ", "px\n ", "px;\n background-color: ", ";\n border-radius: ", "px;\n position: relative;\n display: flex;\n align-items: center;\n gap: ", "px;\n width: fit-content;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return props.background; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.big; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
6
+ var IconWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n"])));
7
+ var BodyTextStyled = styled(BodyText)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: ", "px;\n"], ["\n margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; });
8
+ var templateObject_1, templateObject_2, templateObject_3;
9
9
 
10
- export { WarningIndicator };
10
+ export { BodyTextStyled, IconWrapper, WarningIndicator };
11
11
  //# sourceMappingURL=WarningLabel.styles.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.13.19",
3
+ "version": "0.14.0",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -75,5 +75,5 @@
75
75
  "react-slick": "^0.30.1",
76
76
  "slick-carousel": "^1.8.1"
77
77
  },
78
- "gitHead": "90b890a0fd785bd46de3bdbb15523d6f7d782c4f"
78
+ "gitHead": "5f2386ab9ff7ae8a5ee4e97c77f3c7c85ba9d7a2"
79
79
  }