@citygross/components 0.7.97 → 0.7.98
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/@types/components/DeliverySelectionButton/DeliverySelectionButton.d.ts +11 -0
- package/build/@types/components/DeliverySelectionButton/DeliverySelectionButton.stories.d.ts +13 -0
- package/build/@types/components/DeliverySelectionButton/DeliverySelectionButton.styles.d.ts +2 -0
- package/build/@types/components/RadioBox/RadioBoxItem.d.ts +3 -1
- package/build/@types/components/RadioBox/RadioBoxItem.styles.d.ts +2 -0
- package/build/cjs/components/src/components/RadioBox/RadioBoxItem.js +3 -3
- package/build/cjs/components/src/components/RadioBox/RadioBoxItem.styles.js +3 -1
- package/build/cjs/components/src/components/RadioBox/RadioBoxItem.styles.js.map +1 -1
- package/build/es/components/src/components/RadioBox/RadioBoxItem.js +3 -3
- package/build/es/components/src/components/RadioBox/RadioBoxItem.styles.js +3 -1
- package/build/es/components/src/components/RadioBox/RadioBoxItem.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare type TDeliverySelectionButton = {
|
|
3
|
+
icon: React.ReactElement;
|
|
4
|
+
label: string;
|
|
5
|
+
active: boolean;
|
|
6
|
+
onClick: () => number;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
name: string;
|
|
9
|
+
backgroundColor?: string;
|
|
10
|
+
};
|
|
11
|
+
export declare const DeliverySelectionButton: React.FunctionComponent<TDeliverySelectionButton>;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Story } from '@storybook/react';
|
|
3
|
+
import { TDeliverySelectionButton } from './DeliverySelectionButton';
|
|
4
|
+
declare const _default: {
|
|
5
|
+
component: React.FunctionComponent<TDeliverySelectionButton>;
|
|
6
|
+
title: string;
|
|
7
|
+
};
|
|
8
|
+
export default _default;
|
|
9
|
+
export declare const HomeDelivery: Story<TDeliverySelectionButton>;
|
|
10
|
+
export declare const PickupInStore: Story<TDeliverySelectionButton>;
|
|
11
|
+
export declare const Disabled: Story<TDeliverySelectionButton>;
|
|
12
|
+
export declare const differentBackgroundColor: Story<TDeliverySelectionButton>;
|
|
13
|
+
export declare const MultipleIcons: Story<TDeliverySelectionButton>;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export declare const DeliverySelectionButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
2
|
+
export declare const IconAndTextWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -8,5 +8,7 @@ export declare type TRadioBox = styles.TBaseRadioBox & {
|
|
|
8
8
|
setActive?: () => void;
|
|
9
9
|
background?: string;
|
|
10
10
|
border?: string;
|
|
11
|
+
flexDirection?: string;
|
|
12
|
+
padding?: number;
|
|
11
13
|
};
|
|
12
|
-
export declare function RadioBoxItem({ radioColor, checked, isDisabled, name, align, setActive, background, border, boxShadow, children }: TRadioBox): JSX.Element;
|
|
14
|
+
export declare function RadioBoxItem({ radioColor, checked, isDisabled, name, align, setActive, background, border, boxShadow, children, flexDirection, padding }: TRadioBox): JSX.Element;
|
|
@@ -13,4 +13,6 @@ export declare type TBaseRadioBox = {
|
|
|
13
13
|
export declare const BaseRadioBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseRadioBox & {
|
|
14
14
|
border?: string | undefined;
|
|
15
15
|
background?: string | undefined;
|
|
16
|
+
flexDirection?: string | undefined;
|
|
17
|
+
padding?: number | undefined;
|
|
16
18
|
}, never>;
|
|
@@ -12,9 +12,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
12
12
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
13
|
|
|
14
14
|
function RadioBoxItem(_a) {
|
|
15
|
-
var _b, _c;
|
|
16
|
-
var
|
|
17
|
-
return (React__default["default"].createElement(RadioBoxItem_styles.BaseRadioBox, { align: align, checked: checked, isDisabled: isDisabled, onClick: !isDisabled ? setActive : function () { }, background: background, border: border, boxShadow: boxShadow },
|
|
15
|
+
var _b, _c, _d;
|
|
16
|
+
var _e = _a.radioColor, radioColor = _e === void 0 ? 'alertGreen' : _e, checked = _a.checked, isDisabled = _a.isDisabled, name = _a.name, _f = _a.align, align = _f === void 0 ? 'flex-start' : _f, setActive = _a.setActive, _g = _a.background, background = _g === void 0 ? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white : _g, _h = _a.border, border = _h === void 0 ? (_c = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.border : _h, _j = _a.boxShadow, boxShadow = _j === void 0 ? true : _j, children = _a.children, flexDirection = _a.flexDirection, _k = _a.padding, padding = _k === void 0 ? (_d = designTokens.theme.spacings) === null || _d === void 0 ? void 0 : _d.md : _k;
|
|
17
|
+
return (React__default["default"].createElement(RadioBoxItem_styles.BaseRadioBox, { align: align, checked: checked, isDisabled: isDisabled, onClick: !isDisabled ? setActive : function () { }, background: background, border: border, boxShadow: boxShadow, flexDirection: flexDirection, padding: padding },
|
|
18
18
|
React__default["default"].createElement(Radio.Radio, { customColor: radioColor, checked: checked, disabled: isDisabled, name: name, onChange: function () { return setActive; } }),
|
|
19
19
|
children));
|
|
20
20
|
}
|
|
@@ -14,7 +14,9 @@ exports.Alignment = void 0;
|
|
|
14
14
|
Alignment[Alignment["flex-start"] = 0] = "flex-start";
|
|
15
15
|
Alignment[Alignment["center"] = 1] = "center";
|
|
16
16
|
})(exports.Alignment || (exports.Alignment = {}));
|
|
17
|
-
var BaseRadioBox = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-basis: 100%;\n padding: ", ";\n align-items: ", ";\n gap: ", "px;\n cursor: ", ";\n ", ";\n\n background: ", ";\n border: solid 1px ", ";\n ", ";\n border-radius: 5px;\n ", ";\n -webkit-transition: background-color 400ms linear;\n -ms-transition: background-color 400ms linear;\n transition: background-color 400ms linear;\n"], ["\n display: flex;\n flex-basis: 100%;\n padding: ", ";\n align-items: ", ";\n gap: ", "px;\n cursor: ", ";\n ", ";\n\n background: ", ";\n border: solid 1px ", ";\n ", ";\n border-radius: 5px;\n ", ";\n -webkit-transition: background-color 400ms linear;\n -ms-transition: background-color 400ms linear;\n transition: background-color 400ms linear;\n"])), function (props) {
|
|
17
|
+
var BaseRadioBox = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n flex-basis: 100%;\n padding: ", "px;\n align-items: ", ";\n gap: ", "px;\n cursor: ", ";\n ", ";\n\n background: ", ";\n border: solid 1px ", ";\n ", ";\n border-radius: 5px;\n ", ";\n -webkit-transition: background-color 400ms linear;\n -ms-transition: background-color 400ms linear;\n transition: background-color 400ms linear;\n"], ["\n display: flex;\n flex-direction: ", ";\n flex-basis: 100%;\n padding: ", "px;\n align-items: ", ";\n gap: ", "px;\n cursor: ", ";\n ", ";\n\n background: ", ";\n border: solid 1px ", ";\n ", ";\n border-radius: 5px;\n ", ";\n -webkit-transition: background-color 400ms linear;\n -ms-transition: background-color 400ms linear;\n transition: background-color 400ms linear;\n"])), function (props) {
|
|
18
|
+
return props.flexDirection ? props.flexDirection : 'row';
|
|
19
|
+
}, function (props) { return props.padding; }, function (props) { return props.align; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return (props.isDisabled ? 'default' : 'pointer'); }, function (props) { return props.isDisabled && 'opacity: 0.4'; }, function (props) { var _a; return props.checked ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight : props.background; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) {
|
|
18
20
|
return props.checked &&
|
|
19
21
|
props.border &&
|
|
20
22
|
"border: 1px solid ".concat(props.border && props.border);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioBoxItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioBoxItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -4,9 +4,9 @@ import { Radio } from '../FormElements/Radio/Radio.js';
|
|
|
4
4
|
import { BaseRadioBox } from './RadioBoxItem.styles.js';
|
|
5
5
|
|
|
6
6
|
function RadioBoxItem(_a) {
|
|
7
|
-
var _b, _c;
|
|
8
|
-
var
|
|
9
|
-
return (React.createElement(BaseRadioBox, { align: align, checked: checked, isDisabled: isDisabled, onClick: !isDisabled ? setActive : function () { }, background: background, border: border, boxShadow: boxShadow },
|
|
7
|
+
var _b, _c, _d;
|
|
8
|
+
var _e = _a.radioColor, radioColor = _e === void 0 ? 'alertGreen' : _e, checked = _a.checked, isDisabled = _a.isDisabled, name = _a.name, _f = _a.align, align = _f === void 0 ? 'flex-start' : _f, setActive = _a.setActive, _g = _a.background, background = _g === void 0 ? (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.white : _g, _h = _a.border, border = _h === void 0 ? (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.border : _h, _j = _a.boxShadow, boxShadow = _j === void 0 ? true : _j, children = _a.children, flexDirection = _a.flexDirection, _k = _a.padding, padding = _k === void 0 ? (_d = theme.spacings) === null || _d === void 0 ? void 0 : _d.md : _k;
|
|
9
|
+
return (React.createElement(BaseRadioBox, { align: align, checked: checked, isDisabled: isDisabled, onClick: !isDisabled ? setActive : function () { }, background: background, border: border, boxShadow: boxShadow, flexDirection: flexDirection, padding: padding },
|
|
10
10
|
React.createElement(Radio, { customColor: radioColor, checked: checked, disabled: isDisabled, name: name, onChange: function () { return setActive; } }),
|
|
11
11
|
children));
|
|
12
12
|
}
|
|
@@ -6,7 +6,9 @@ var Alignment;
|
|
|
6
6
|
Alignment[Alignment["flex-start"] = 0] = "flex-start";
|
|
7
7
|
Alignment[Alignment["center"] = 1] = "center";
|
|
8
8
|
})(Alignment || (Alignment = {}));
|
|
9
|
-
var BaseRadioBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-basis: 100%;\n padding: ", ";\n align-items: ", ";\n gap: ", "px;\n cursor: ", ";\n ", ";\n\n background: ", ";\n border: solid 1px ", ";\n ", ";\n border-radius: 5px;\n ", ";\n -webkit-transition: background-color 400ms linear;\n -ms-transition: background-color 400ms linear;\n transition: background-color 400ms linear;\n"], ["\n display: flex;\n flex-basis: 100%;\n padding: ", ";\n align-items: ", ";\n gap: ", "px;\n cursor: ", ";\n ", ";\n\n background: ", ";\n border: solid 1px ", ";\n ", ";\n border-radius: 5px;\n ", ";\n -webkit-transition: background-color 400ms linear;\n -ms-transition: background-color 400ms linear;\n transition: background-color 400ms linear;\n"])), function (props) {
|
|
9
|
+
var BaseRadioBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n flex-basis: 100%;\n padding: ", "px;\n align-items: ", ";\n gap: ", "px;\n cursor: ", ";\n ", ";\n\n background: ", ";\n border: solid 1px ", ";\n ", ";\n border-radius: 5px;\n ", ";\n -webkit-transition: background-color 400ms linear;\n -ms-transition: background-color 400ms linear;\n transition: background-color 400ms linear;\n"], ["\n display: flex;\n flex-direction: ", ";\n flex-basis: 100%;\n padding: ", "px;\n align-items: ", ";\n gap: ", "px;\n cursor: ", ";\n ", ";\n\n background: ", ";\n border: solid 1px ", ";\n ", ";\n border-radius: 5px;\n ", ";\n -webkit-transition: background-color 400ms linear;\n -ms-transition: background-color 400ms linear;\n transition: background-color 400ms linear;\n"])), function (props) {
|
|
10
|
+
return props.flexDirection ? props.flexDirection : 'row';
|
|
11
|
+
}, function (props) { return props.padding; }, function (props) { return props.align; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return (props.isDisabled ? 'default' : 'pointer'); }, function (props) { return props.isDisabled && 'opacity: 0.4'; }, function (props) { var _a; return props.checked ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight : props.background; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) {
|
|
10
12
|
return props.checked &&
|
|
11
13
|
props.border &&
|
|
12
14
|
"border: 1px solid ".concat(props.border && props.border);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioBoxItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioBoxItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.98",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -71,5 +71,5 @@
|
|
|
71
71
|
"moment": "^2.29.1",
|
|
72
72
|
"react-loading-skeleton": "^2.2.0"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "a2574bd403bc62e4ce2a87c6acf5bb623bb6ea8a"
|
|
75
75
|
}
|