@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,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/cjs/index.js
CHANGED
|
@@ -2781,7 +2781,7 @@ if (process.env.NODE_ENV === 'production') {
|
|
|
2781
2781
|
|
|
2782
2782
|
var React = react.exports;
|
|
2783
2783
|
|
|
2784
|
-
var
|
|
2784
|
+
var CombineClassNames = function () {
|
|
2785
2785
|
var args = [];
|
|
2786
2786
|
for (var _i = 0; _i < arguments.length; _i++) {
|
|
2787
2787
|
args[_i] = arguments[_i];
|
|
@@ -2831,7 +2831,7 @@ var Accordion = function (_a) {
|
|
|
2831
2831
|
transform: !open ? "rotate(0.5turn)" : "none",
|
|
2832
2832
|
} },
|
|
2833
2833
|
React.createElement("path", { d: "M15.8346 7.5L10.0013 13.3333L4.16797 7.5", stroke: "#758393" }))),
|
|
2834
|
-
React.createElement("div", { "data-testid": "Accordion_CONTENT", className:
|
|
2834
|
+
React.createElement("div", { "data-testid": "Accordion_CONTENT", className: CombineClassNames(styles$4.accordionContent, !open && styles$4["accordionContent--hidden"]) }, children)));
|
|
2835
2835
|
};
|
|
2836
2836
|
|
|
2837
2837
|
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}";
|
|
@@ -2840,7 +2840,7 @@ styleInject(css_248z$3);
|
|
|
2840
2840
|
|
|
2841
2841
|
var Button = function (_a) {
|
|
2842
2842
|
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;
|
|
2843
|
-
return (React.createElement("button", { "data-testid": "Button_MAIN", "aria-label": ariaLabel, disabled: disabled, "aria-disabled": disabled, onClick: onClick, className:
|
|
2843
|
+
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
|
|
2844
2844
|
? styles$3["btn-rounded--".concat(size)]
|
|
2845
2845
|
: 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));
|
|
2846
2846
|
};
|
|
@@ -2900,7 +2900,7 @@ var ClearIcon = function (_a) {
|
|
|
2900
2900
|
|
|
2901
2901
|
var InputField = function (_a) {
|
|
2902
2902
|
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;
|
|
2903
|
-
return (React.createElement("div", { "data-testid": "InputField_MAIN", className:
|
|
2903
|
+
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 },
|
|
2904
2904
|
labelText.length > 0 && (React.createElement("label", { htmlFor: id, "data-testid": "InputField_LABEL" }, labelText)),
|
|
2905
2905
|
inputLeftIcon,
|
|
2906
2906
|
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 () {
|
|
@@ -2957,7 +2957,7 @@ var RadioToggle = function (_a) {
|
|
|
2957
2957
|
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 () {
|
|
2958
2958
|
setLock(!lock);
|
|
2959
2959
|
} },
|
|
2960
|
-
React.createElement("div", { "data-testid": "RadioToggle_WRAP", className:
|
|
2960
|
+
React.createElement("div", { "data-testid": "RadioToggle_WRAP", className: CombineClassNames(styles.wrap, lock && styles.wrapLock) },
|
|
2961
2961
|
React.createElement("div", { "data-testid": "RadioToggle_ROUND", className: styles.round }))));
|
|
2962
2962
|
};
|
|
2963
2963
|
|