@egov3/system-design 1.0.29 → 1.0.30

package/dist/cjs/components/Button/index.d.ts

@@ -1 +1,13 @@
-export { Button } from "./Button";
+import React from 'react';
+export interface IButtonProps {
+    ariaLabel?: string;
+    onClick?: () => void;
+    children: React.ReactNode;
+    className?: string;
+    isRounded?: boolean;
+    disabled?: boolean;
+    variant?: 'default' | 'tinted' | 'secondary';
+    size?: 'mini' | 'small' | 'medium' | 'large';
+    style?: React.CSSProperties;
+}
+export declare const Button: ({ onClick, children, style, className, isRounded, disabled, variant, size, ariaLabel, }: IButtonProps) => React.JSX.Element;

package/dist/cjs/components/InputField/index.d.ts

@@ -0,0 +1,19 @@
+import React, { HTMLInputTypeAttribute } from "react";
+export type TOtpType = "OTP" | "TEXT";
+export interface IInputFieldProps {
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onEnterPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    value?: string;
+    placeholder?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    isClearable?: boolean;
+    inputLeftIcon?: JSX.Element;
+    type?: HTMLInputTypeAttribute;
+    id: string;
+    labelText?: string;
+    ariaLabel: string;
+}
+export declare const InputField: ({ onFocus, onBlur, onChange, onEnterPress, value, inputLeftIcon, placeholder, className, style, isClearable, type, id, labelText, ariaLabel, }: IInputFieldProps) => React.ReactNode;

package/dist/cjs/components/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
 export declare const components: {
-    Button: (props: import("./Button/Button").ButtonProps) => import("react").JSX.Element;
+    Button: ({ onClick, children, style, className, isRounded, disabled, variant, size, ariaLabel, }: import("./Button").IButtonProps) => import("react").JSX.Element;
+    InputField: ({ onFocus, onBlur, onChange, onEnterPress, value, inputLeftIcon, placeholder, className, style, isClearable, type, id, labelText, ariaLabel, }: import("./InputField").IInputFieldProps) => import("react").ReactNode;
 };

package/dist/cjs/index.js

@@ -2783,6 +2783,14 @@ if (process.env.NODE_ENV === 'production') {
 
 var React = react.exports;
 
+var ClassNamesFn = function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return args.filter(function (item) { return !!item; }).join(" ");
+};
+
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -2810,15 +2818,103 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "button {\n  font-size: 60px;\n}";
+var css_248z$1 = "/* 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}";
+var styles$1 = {"button":"button-module_button__WDVlB","btn-default":"button-module_btn-default__upnYC","btn-default--disabled":"button-module_btn-default--disabled__tlBX8","btn-tinted":"button-module_btn-tinted__hE7vU","btn-tinted--disabled":"button-module_btn-tinted--disabled__KYbnK","btn-secondary":"button-module_btn-secondary__C8isQ","btn-secondary--disabled":"button-module_btn-secondary--disabled__2Y-Q3","btn--mini":"button-module_btn--mini__7zJ2M","btn--small":"button-module_btn--small__IGPOx","btn--medium":"button-module_btn--medium__WaM0q","btn--large":"button-module_btn--large__qrwDc","btn-square--mini":"button-module_btn-square--mini__Ak5mN","btn-square--small":"button-module_btn-square--small__O58ux","btn-square--medium":"button-module_btn-square--medium__xNiKL","btn-square--large":"button-module_btn-square--large__9JUii","btn-rounded--mini":"button-module_btn-rounded--mini__7ZTyL","btn-rounded--small":"button-module_btn-rounded--small__KJhsk","btn-rounded--medium":"button-module_btn-rounded--medium__wT5Uc","btn-rounded--large":"button-module_btn-rounded--large__46yFD"};
+styleInject(css_248z$1);
+
+var Button = function (_a) {
+    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;
+    return (React.createElement("button", { "data-testid": "Button_MAIN", "aria-label": ariaLabel, disabled: disabled, "aria-disabled": disabled, onClick: onClick, className: ClassNamesFn(styles$1["btn--".concat(size)], isRounded
+            ? styles$1["btn-rounded--".concat(size)]
+            : styles$1["btn-square--".concat(size)], disabled ? styles$1["btn-".concat(variant, "--disabled")] : styles$1["btn-".concat(variant)], styles$1.button, className), style: style }, children));
+};
+
+var css_248z = "/* 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.InputField-module_inputContainer__J1gSu {\n  display: flex;\n  align-items: center;\n  background-color: #f0f2f4;\n  border-radius: 8px;\n  padding: 12px 16px;\n}\n\n.InputField-module_inputContainerLabeled__63H-X {\n  display: block;\n  background-color: #f0f2f4;\n  border-radius: 8px;\n  padding: 12px 16px;\n}\n.InputField-module_inputContainerLabeled__63H-X label {\n  color: #758393;\n}\n\n.InputField-module_input__y6Hs- {\n  width: 100%;\n  border: none;\n  background-color: #f0f2f4;\n}\n.InputField-module_input__y6Hs-:active, .InputField-module_input__y6Hs-:focus {\n  outline: none;\n}\n.InputField-module_input__y6Hs-::placeholder {\n  color: #929daa;\n}\n.InputField-module_input__y6Hs-::-webkit-inner-spin-button, .InputField-module_input__y6Hs-::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.InputField-module_clearIcon__WFQKa {\n  cursor: pointer;\n}\n\n.InputField-module_input--onfocus__F5PRb {\n  background-color: #e3e7eb;\n}\n.InputField-module_input--onfocus__F5PRb .InputField-module_input__y6Hs- {\n  background-color: #e3e7eb;\n}\n\n.InputField-module_input-text__Cg-9A {\n  font-family: Inter;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px; /* 150% */\n}";
+var styles = {"inputContainer":"InputField-module_inputContainer__J1gSu","inputContainerLabeled":"InputField-module_inputContainerLabeled__63H-X","input":"InputField-module_input__y6Hs-","clearIcon":"InputField-module_clearIcon__WFQKa","input--onfocus":"InputField-module_input--onfocus__F5PRb","input-text":"InputField-module_input-text__Cg-9A"};
 styleInject(css_248z);
 
-var Button = function (props) {
-    return React.createElement("button", null, props.label);
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+  __assign = Object.assign || function __assign(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+      return t;
+  };
+  return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+          if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+              t[p[i]] = s[p[i]];
+      }
+  return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var ClearIcon = function (_a) {
+    var _b = _a.fill, fill = _b === void 0 ? "none" : _b, _c = _a.pathFill, pathFill = _c === void 0 ? "#fff" : _c, _d = _a.width, width = _d === void 0 ? 20 : _d, _e = _a.height, height = _e === void 0 ? 20 : _e, props = __rest(_a, ["fill", "pathFill", "width", "height"]);
+    return (React.createElement("svg", __assign({ "data-testid": "Icons_CLEAR", xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: fill, viewBox: "0 0 20 20" }, props),
+        React.createElement("path", { fill: pathFill, fillRule: "evenodd", d: "M10 18.333a8.333 8.333 0 100-16.666 8.333 8.333 0 000 16.666zM7.5 6.027L6.027 7.5l2.5 2.5-2.5 2.5L7.5 13.973l2.5-2.5 2.5 2.5 1.473-1.473-2.5-2.5 2.5-2.5L12.5 6.027l-2.5 2.5-2.5-2.5z", clipRule: "evenodd" })));
+};
+
+var InputField = function (_a) {
+    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;
+    var _j = react.exports.useState(false), focused = _j[0], setFocused = _j[1];
+    return (React.createElement("div", { "data-testid": "InputField_MAIN", className: ClassNamesFn(styles[labelText.length ? "inputContainerLabeled" : "inputContainer"], className, focused ? styles["input--onfocus"] : undefined, styles["input-".concat(type === null || type === void 0 ? void 0 : type.toLocaleLowerCase())]), style: style },
+        labelText.length > 0 && (React.createElement("label", { htmlFor: id, "data-testid": "InputField_LABEL" }, labelText)),
+        inputLeftIcon,
+        React.createElement("input", { "data-testid": "InputField_INPUT", "aria-label": ariaLabel, id: id, type: type, className: styles.input, placeholder: placeholder, "aria-placeholder": placeholder, onFocus: function () {
+                setFocused(true);
+                if (onFocus) {
+                    onFocus();
+                }
+            }, onBlur: function () {
+                setFocused(false);
+                if (onBlur) {
+                    onBlur();
+                }
+            }, onChange: onChange, onKeyDown: function (event) {
+                if (onEnterPress && event.key === "Enter") {
+                    onEnterPress(event);
+                }
+            }, value: value, readOnly: !onChange }),
+        isClearable && value && (React.createElement(ClearIcon, { fill: "red", pathFill: "#758393", className: styles.clearIcon, onClick: function () {
+                if (onChange) {
+                    onChange({
+                        target: { value: "" },
+                    });
+                }
+            } }))));
 };
 
 var components = {
-    Button: Button
+    Button: Button,
+    InputField: InputField
 };
 
 exports.components = components;