@egov3/system-design 1.0.32 → 1.0.33
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/README.md +6 -982
- package/dist/cjs/components/Typography/index.d.ts +8 -0
- package/dist/cjs/index.js +5 -5
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/utils/CombineClassNames.d.ts +1 -0
- package/dist/esm/components/Typography/index.d.ts +8 -0
- package/dist/esm/index.js +5 -5
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/CombineClassNames.d.ts +1 -0
- package/package.json +1 -1
- package/dist/cjs/utils/ClassNamesFn.d.ts +0 -1
- package/dist/esm/utils/ClassNamesFn.d.ts +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const CombineClassNames: (...args: unknown[]) => string;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React, { FC } from "react";
|
|
2
|
+
type FontClass = "Heading1" | "Heading3" | "Subtitles3" | "Body1Medium" | "Body1Regular" | "Body2Medium" | "Body2Regular" | "Body3Regular" | "Caption1Medium" | "Caption1Regular" | "Caption1Semibold" | "Caption2Medium" | "Caption2Regular";
|
|
3
|
+
export interface ITypographyProps extends React.HTMLAttributes<HTMLElement> {
|
|
4
|
+
tag: keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>;
|
|
5
|
+
fontClass?: FontClass;
|
|
6
|
+
}
|
|
7
|
+
export declare const Typography: FC<ITypographyProps>;
|
|
8
|
+
export {};
|
package/dist/esm/index.js
CHANGED
|
@@ -2779,7 +2779,7 @@ if (process.env.NODE_ENV === 'production') {
|
|
|
2779
2779
|
|
|
2780
2780
|
var React = react.exports;
|
|
2781
2781
|
|
|
2782
|
-
var
|
|
2782
|
+
var CombineClassNames = function () {
|
|
2783
2783
|
var args = [];
|
|
2784
2784
|
for (var _i = 0; _i < arguments.length; _i++) {
|
|
2785
2785
|
args[_i] = arguments[_i];
|
|
@@ -2829,7 +2829,7 @@ var Accordion = function (_a) {
|
|
|
2829
2829
|
transform: !open ? "rotate(0.5turn)" : "none",
|
|
2830
2830
|
} },
|
|
2831
2831
|
React.createElement("path", { d: "M15.8346 7.5L10.0013 13.3333L4.16797 7.5", stroke: "#758393" }))),
|
|
2832
|
-
React.createElement("div", { "data-testid": "Accordion_CONTENT", className:
|
|
2832
|
+
React.createElement("div", { "data-testid": "Accordion_CONTENT", className: CombineClassNames(styles$4.accordionContent, !open && styles$4["accordionContent--hidden"]) }, children)));
|
|
2833
2833
|
};
|
|
2834
2834
|
|
|
2835
2835
|
var css_248z$3 = "/* Headings/Heading 1 */\n/* Headings/Heading 3 */\n/* Subtitles/Subtitle 3 */\n/* Body/Body 1, Medium */\n/* Body/Body 1, Regular */\n/* Body/Body 2, Medium */\n/* Body/Body 2, Regular */\n/* Body/Body 3, Regular */\n/* Caption/Caption 1, Medium */\n/* Caption/Caption 1, Regular */\n/* Caption/Caption 1, Semibold */\n/* Caption/Caption 2, Medium */\n/* Caption/Caption 2, Regular */\n.button-module_button__WDVlB {\n border: none;\n transition: background-color 0.2s ease;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n}\n\n.button-module_btn-default__upnYC {\n color: #fff;\n background-color: #0581da;\n}\n\n.button-module_btn-default--disabled__tlBX8 {\n color: #929daa;\n background-color: #c5ccd3;\n}\n\n.button-module_btn-tinted__hE7vU {\n color: #0581da;\n background-color: #e1f0fb;\n}\n\n.button-module_btn-tinted--disabled__KYbnK {\n color: #9bcdf0;\n background-color: #e1f0fb;\n}\n\n.button-module_btn-secondary__C8isQ {\n color: #000;\n background-color: #e3e7eb;\n}\n\n.button-module_btn-secondary--disabled__2Y-Q3 {\n color: #758393;\n background-color: #e3e7eb;\n}\n\n.button-module_btn-default__upnYC:hover {\n background-color: #1a9cfa;\n}\n\n.button-module_btn-tinted__hE7vU:hover {\n background-color: #b2d9f5;\n}\n\n.button-module_btn-secondary__C8isQ:hover {\n background-color: #c5ccd3;\n}\n\n.button-module_btn--mini__7zJ2M {\n gap: 4px;\n padding: 6px 12px;\n font-family: Inter;\n font-size: 10px;\n font-style: normal;\n font-weight: 500;\n line-height: 12px; /* 120% */\n}\n\n.button-module_btn--small__IGPOx {\n gap: 8px;\n padding: 8px 16px;\n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px; /* 133.333% */\n}\n\n.button-module_btn--medium__WaM0q {\n gap: 8px;\n padding: 8px 20px;\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px; /* 142.857% */\n}\n\n.button-module_btn--large__qrwDc {\n gap: 8px;\n padding: 14px 24px;\n font-family: Inter;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n line-height: 24px; /* 150% */\n}\n\n.button-module_btn-square--mini__Ak5mN {\n border-radius: 4px;\n}\n\n.button-module_btn-square--small__O58ux {\n border-radius: 6px;\n}\n\n.button-module_btn-square--medium__xNiKL {\n border-radius: 10px;\n}\n\n.button-module_btn-square--large__9JUii {\n border-radius: 12px;\n}\n\n.button-module_btn-rounded--mini__7ZTyL {\n border-radius: 32px;\n}\n\n.button-module_btn-rounded--small__KJhsk {\n border-radius: 32px;\n}\n\n.button-module_btn-rounded--medium__wT5Uc {\n border-radius: 32px;\n}\n\n.button-module_btn-rounded--large__46yFD {\n border-radius: 40px;\n}";
|
|
@@ -2838,7 +2838,7 @@ styleInject(css_248z$3);
|
|
|
2838
2838
|
|
|
2839
2839
|
var Button = function (_a) {
|
|
2840
2840
|
var onClick = _a.onClick, children = _a.children, style = _a.style, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.isRounded, isRounded = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, _f = _a.size, size = _f === void 0 ? 'medium' : _f, _g = _a.ariaLabel, ariaLabel = _g === void 0 ? 'Кнопка' : _g;
|
|
2841
|
-
return (React.createElement("button", { "data-testid": "Button_MAIN", "aria-label": ariaLabel, disabled: disabled, "aria-disabled": disabled, onClick: onClick, className:
|
|
2841
|
+
return (React.createElement("button", { "data-testid": "Button_MAIN", "aria-label": ariaLabel, disabled: disabled, "aria-disabled": disabled, onClick: onClick, className: CombineClassNames(styles$3["btn--".concat(size)], isRounded
|
|
2842
2842
|
? styles$3["btn-rounded--".concat(size)]
|
|
2843
2843
|
: styles$3["btn-square--".concat(size)], disabled ? styles$3["btn-".concat(variant, "--disabled")] : styles$3["btn-".concat(variant)], styles$3.button, className), style: style }, children));
|
|
2844
2844
|
};
|
|
@@ -2898,7 +2898,7 @@ var ClearIcon = function (_a) {
|
|
|
2898
2898
|
|
|
2899
2899
|
var InputField = function (_a) {
|
|
2900
2900
|
var onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, onEnterPress = _a.onEnterPress, _b = _a.value, value = _b === void 0 ? "" : _b, inputLeftIcon = _a.inputLeftIcon, _c = _a.placeholder, placeholder = _c === void 0 ? "" : _c, _d = _a.className, className = _d === void 0 ? "" : _d, style = _a.style, _e = _a.isClearable, isClearable = _e === void 0 ? false : _e, _f = _a.type, type = _f === void 0 ? "text" : _f, id = _a.id, _g = _a.labelText, labelText = _g === void 0 ? "" : _g, _h = _a.ariaLabel, ariaLabel = _h === void 0 ? "" : _h, _j = _a.focused, focused = _j === void 0 ? false : _j, _k = _a.setFocused, setFocused = _k === void 0 ? function () { } : _k;
|
|
2901
|
-
return (React.createElement("div", { "data-testid": "InputField_MAIN", className:
|
|
2901
|
+
return (React.createElement("div", { "data-testid": "InputField_MAIN", className: CombineClassNames(styles$2[labelText.length ? "inputContainerLabeled" : "inputContainer"], className, focused ? styles$2["input--onfocus"] : undefined, styles$2["input-".concat(type === null || type === void 0 ? void 0 : type.toLocaleLowerCase())]), style: style },
|
|
2902
2902
|
labelText.length > 0 && (React.createElement("label", { htmlFor: id, "data-testid": "InputField_LABEL" }, labelText)),
|
|
2903
2903
|
inputLeftIcon,
|
|
2904
2904
|
React.createElement("input", { "data-testid": "InputField_INPUT", "aria-label": ariaLabel, id: id, type: type, className: styles$2.input, placeholder: placeholder, "aria-placeholder": placeholder, onFocus: function () {
|
|
@@ -2955,7 +2955,7 @@ var RadioToggle = function (_a) {
|
|
|
2955
2955
|
return (React.createElement("button", { "data-testid": "RadioToggle_BUTTON", "aria-pressed": lock, "aria-label": "\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0435\u043D\u0438\u044F", onClick: function () {
|
|
2956
2956
|
setLock(!lock);
|
|
2957
2957
|
} },
|
|
2958
|
-
React.createElement("div", { "data-testid": "RadioToggle_WRAP", className:
|
|
2958
|
+
React.createElement("div", { "data-testid": "RadioToggle_WRAP", className: CombineClassNames(styles.wrap, lock && styles.wrapLock) },
|
|
2959
2959
|
React.createElement("div", { "data-testid": "RadioToggle_ROUND", className: styles.round }))));
|
|
2960
2960
|
};
|
|
2961
2961
|
|