@invoicebox/ui 0.1.0-alpha.321 → 0.1.0-alpha.322
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/dist/components/form/CountrySelect/components/CountryItem/index.d.ts +2 -1
- package/dist/components/form/CountrySelect/components/CountryItem/index.js +8 -3
- package/dist/components/form/CountrySelect/components/CountryItem/stlyes.d.ts +4 -0
- package/dist/components/form/CountrySelect/components/CountryItem/stlyes.js +18 -7
- package/dist/components/form/CountrySelect/index.d.ts +1 -0
- package/dist/components/form/CountrySelect/index.js +1 -0
- package/dist/components/form/PhoneInput/index.d.ts +1 -0
- package/dist/components/form/PhoneInput/index.stories.js +2 -1
- package/dist/components/form/PhoneInput/phoneInputLogic.d.ts +2 -0
- package/dist/components/form/PhoneInput/types.d.ts +1 -0
- package/dist/esm/components/form/CountrySelect/components/CountryItem/index.js +8 -3
- package/dist/esm/components/form/CountrySelect/components/CountryItem/stlyes.js +17 -6
- package/dist/esm/components/form/CountrySelect/index.js +1 -0
- package/dist/esm/components/form/PhoneInput/index.stories.js +2 -1
- package/package.json +1 -1
|
@@ -9,5 +9,6 @@ export type TProps<TValue> = {
|
|
|
9
9
|
selectedLabel: string;
|
|
10
10
|
palette: TCountrySelectPalette;
|
|
11
11
|
flag?: TFlagKey;
|
|
12
|
+
hint?: string;
|
|
12
13
|
};
|
|
13
|
-
export declare const CountryItem: <TValue>({ isSelected, flag, onSelect, description, value, countryLabel, selectedLabel, palette, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare const CountryItem: <TValue>({ isSelected, flag, onSelect, description, value, countryLabel, selectedLabel, palette, hint, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -19,7 +19,8 @@ var CountryItem = exports.CountryItem = function CountryItem(_ref) {
|
|
|
19
19
|
value = _ref.value,
|
|
20
20
|
countryLabel = _ref.countryLabel,
|
|
21
21
|
selectedLabel = _ref.selectedLabel,
|
|
22
|
-
palette = _ref.palette
|
|
22
|
+
palette = _ref.palette,
|
|
23
|
+
hint = _ref.hint;
|
|
23
24
|
var handleSelect = (0, _react.useCallback)(function () {
|
|
24
25
|
return onSelect(value);
|
|
25
26
|
}, [onSelect, value]);
|
|
@@ -33,9 +34,13 @@ var CountryItem = exports.CountryItem = function CountryItem(_ref) {
|
|
|
33
34
|
}, flag && /*#__PURE__*/_react["default"].createElement(_Flag.Flag, {
|
|
34
35
|
flag: flag,
|
|
35
36
|
isSmall: true
|
|
36
|
-
}), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
|
|
37
|
+
}), /*#__PURE__*/_react["default"].createElement(S.TitleTexts, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
|
|
37
38
|
variant: 'captionRegular'
|
|
38
|
-
}, countryLabel, " ", isSelected && selectedLabel)
|
|
39
|
+
}, countryLabel, " ", isSelected && selectedLabel), hint && /*#__PURE__*/_react["default"].createElement(S.Hint, {
|
|
40
|
+
$palette: palette
|
|
41
|
+
}, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
|
|
42
|
+
variant: 'captionSRegular'
|
|
43
|
+
}, hint)))), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
|
|
39
44
|
variant: 'captionRegular'
|
|
40
45
|
}, description));
|
|
41
46
|
};
|
|
@@ -4,6 +4,10 @@ export declare const Title: import("styled-components/dist/types").IStyledCompon
|
|
|
4
4
|
$isSelected: boolean;
|
|
5
5
|
$palette: TCountrySelectPalette;
|
|
6
6
|
}>> & string;
|
|
7
|
+
export declare const TitleTexts: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
8
|
+
export declare const Hint: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
9
|
+
$palette: TCountrySelectPalette;
|
|
10
|
+
}>> & string;
|
|
7
11
|
export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
|
|
8
12
|
$palette: TCountrySelectPalette;
|
|
9
13
|
}>> & string;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.Wrapper = exports.Title = void 0;
|
|
6
|
+
exports.Wrapper = exports.TitleTexts = exports.Title = exports.Hint = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
8
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
9
9
|
var Title = exports.Title = _styledComponents["default"].div.withConfig({
|
|
@@ -16,16 +16,27 @@ var Title = exports.Title = _styledComponents["default"].div.withConfig({
|
|
|
16
16
|
var $isSelected = _ref2.$isSelected;
|
|
17
17
|
return $isSelected ? 0.5 : 1;
|
|
18
18
|
});
|
|
19
|
-
var
|
|
20
|
-
displayName: "
|
|
19
|
+
var TitleTexts = exports.TitleTexts = _styledComponents["default"].div.withConfig({
|
|
20
|
+
displayName: "stlyes__TitleTexts",
|
|
21
21
|
componentId: "sc-cou0vg-1"
|
|
22
|
-
})(["
|
|
22
|
+
})(["text-align:left;"]);
|
|
23
|
+
var Hint = exports.Hint = _styledComponents["default"].div.withConfig({
|
|
24
|
+
displayName: "stlyes__Hint",
|
|
25
|
+
componentId: "sc-cou0vg-2"
|
|
26
|
+
})(["color:", ";"], function (_ref3) {
|
|
23
27
|
var $palette = _ref3.$palette;
|
|
24
|
-
return $palette.countryBg;
|
|
25
|
-
}, function (_ref4) {
|
|
26
|
-
var $palette = _ref4.$palette;
|
|
27
28
|
return $palette.countryDescription;
|
|
29
|
+
});
|
|
30
|
+
var Wrapper = exports.Wrapper = _styledComponents["default"].button.withConfig({
|
|
31
|
+
displayName: "stlyes__Wrapper",
|
|
32
|
+
componentId: "sc-cou0vg-3"
|
|
33
|
+
})(["padding:15px 20px;display:flex;align-items:center;justify-content:space-between;width:100%;border:none;cursor:pointer;background-color:", ";color:", ";&:hover{background-color:", ";", "{opacity:0.5;}}"], function (_ref4) {
|
|
34
|
+
var $palette = _ref4.$palette;
|
|
35
|
+
return $palette.countryBg;
|
|
28
36
|
}, function (_ref5) {
|
|
29
37
|
var $palette = _ref5.$palette;
|
|
38
|
+
return $palette.countryDescription;
|
|
39
|
+
}, function (_ref6) {
|
|
40
|
+
var $palette = _ref6.$palette;
|
|
30
41
|
return $palette.countryHoverBg;
|
|
31
42
|
}, Title);
|
|
@@ -15,6 +15,7 @@ type TControlProps = Pick<TPureInputProps, 'disabled' | 'id' | 'autoFocus' | 'us
|
|
|
15
15
|
countries?: Array<{
|
|
16
16
|
label: string;
|
|
17
17
|
value: TSupportedCountries;
|
|
18
|
+
hint?: string;
|
|
18
19
|
}>;
|
|
19
20
|
pureInputProps?: Pick<TPureInputProps, 'paddingTop' | 'paddingBottom' | 'autoFocus'>;
|
|
20
21
|
size?: TSizes;
|
|
@@ -11,11 +11,13 @@ export declare class PhoneInputLogic {
|
|
|
11
11
|
getCountriesSelectOptions(countries?: Array<{
|
|
12
12
|
label: string;
|
|
13
13
|
value: TSupportedCountries;
|
|
14
|
+
hint?: string;
|
|
14
15
|
}>): {
|
|
15
16
|
description: string;
|
|
16
17
|
flag: "RUS" | "BLR" | "KAZ" | "AZE" | "ARM" | "KGZ" | "MDA" | "TJK" | "UZB" | "CHN" | "ENG" | "ESP" | "ARE" | "AUS" | "DEU" | "ECU" | "FRA" | "IND" | "SAU" | "SRB" | "SVK" | "SVN" | "TUR" | "USA" | "CAN" | "UNKNOWN";
|
|
17
18
|
label: string;
|
|
18
19
|
value: TSupportedCountries;
|
|
20
|
+
hint?: string | undefined;
|
|
19
21
|
}[] | undefined;
|
|
20
22
|
getIsHaveCountriesSelectOptions(countrySelectOptions?: Array<TCountrySelectOption | TSupportedCountries>): boolean;
|
|
21
23
|
getCountriesPhoneRulesBySelectOptions(countrySelectOptions?: Array<TCountrySelectOption>): {
|
|
@@ -10,7 +10,8 @@ export var CountryItem = function CountryItem(_ref) {
|
|
|
10
10
|
value = _ref.value,
|
|
11
11
|
countryLabel = _ref.countryLabel,
|
|
12
12
|
selectedLabel = _ref.selectedLabel,
|
|
13
|
-
palette = _ref.palette
|
|
13
|
+
palette = _ref.palette,
|
|
14
|
+
hint = _ref.hint;
|
|
14
15
|
var handleSelect = useCallback(function () {
|
|
15
16
|
return onSelect(value);
|
|
16
17
|
}, [onSelect, value]);
|
|
@@ -24,9 +25,13 @@ export var CountryItem = function CountryItem(_ref) {
|
|
|
24
25
|
}, flag && /*#__PURE__*/React.createElement(Flag, {
|
|
25
26
|
flag: flag,
|
|
26
27
|
isSmall: true
|
|
27
|
-
}), /*#__PURE__*/React.createElement(Typography, {
|
|
28
|
+
}), /*#__PURE__*/React.createElement(S.TitleTexts, null, /*#__PURE__*/React.createElement(Typography, {
|
|
28
29
|
variant: 'captionRegular'
|
|
29
|
-
}, countryLabel, " ", isSelected && selectedLabel)
|
|
30
|
+
}, countryLabel, " ", isSelected && selectedLabel), hint && /*#__PURE__*/React.createElement(S.Hint, {
|
|
31
|
+
$palette: palette
|
|
32
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
33
|
+
variant: 'captionSRegular'
|
|
34
|
+
}, hint)))), /*#__PURE__*/React.createElement(Typography, {
|
|
30
35
|
variant: 'captionRegular'
|
|
31
36
|
}, description));
|
|
32
37
|
};
|
|
@@ -9,16 +9,27 @@ export var Title = styled.div.withConfig({
|
|
|
9
9
|
var $isSelected = _ref2.$isSelected;
|
|
10
10
|
return $isSelected ? 0.5 : 1;
|
|
11
11
|
});
|
|
12
|
-
export var
|
|
13
|
-
displayName: "
|
|
12
|
+
export var TitleTexts = styled.div.withConfig({
|
|
13
|
+
displayName: "stlyes__TitleTexts",
|
|
14
14
|
componentId: "sc-cou0vg-1"
|
|
15
|
-
})(["
|
|
15
|
+
})(["text-align:left;"]);
|
|
16
|
+
export var Hint = styled.div.withConfig({
|
|
17
|
+
displayName: "stlyes__Hint",
|
|
18
|
+
componentId: "sc-cou0vg-2"
|
|
19
|
+
})(["color:", ";"], function (_ref3) {
|
|
16
20
|
var $palette = _ref3.$palette;
|
|
17
|
-
return $palette.countryBg;
|
|
18
|
-
}, function (_ref4) {
|
|
19
|
-
var $palette = _ref4.$palette;
|
|
20
21
|
return $palette.countryDescription;
|
|
22
|
+
});
|
|
23
|
+
export var Wrapper = styled.button.withConfig({
|
|
24
|
+
displayName: "stlyes__Wrapper",
|
|
25
|
+
componentId: "sc-cou0vg-3"
|
|
26
|
+
})(["padding:15px 20px;display:flex;align-items:center;justify-content:space-between;width:100%;border:none;cursor:pointer;background-color:", ";color:", ";&:hover{background-color:", ";", "{opacity:0.5;}}"], function (_ref4) {
|
|
27
|
+
var $palette = _ref4.$palette;
|
|
28
|
+
return $palette.countryBg;
|
|
21
29
|
}, function (_ref5) {
|
|
22
30
|
var $palette = _ref5.$palette;
|
|
31
|
+
return $palette.countryDescription;
|
|
32
|
+
}, function (_ref6) {
|
|
33
|
+
var $palette = _ref6.$palette;
|
|
23
34
|
return $palette.countryHoverBg;
|
|
24
35
|
}, Title);
|