@egov3/system-design 1.0.25 → 1.0.29

package/src/components/InputField/InputField.module.scss

@@ -1,57 +0,0 @@
-@import '/src/styles/colors.module';
-@import '/src/styles/typography.module';
-
-.inputContainer {
-  display: flex;
-  align-items: center;
-  background-color: $Surface-Surface-1;
-  border-radius: 8px;
-  padding: 12px 16px;
-}
-
-.inputContainerLabeled {
-  display: block;
-  background-color: $Surface-Surface-1;
-  border-radius: 8px;
-  padding: 12px 16px;
-
-  label {
-    color: $Text-Secondary;
-  }
-}
-
-.input {
-  width: 100%;
-  border: none;
-  background-color: $Surface-Surface-1;
-
-  &:active,
-  &:focus {
-    outline: none;
-  }
-
-  &::placeholder {
-    color: $Text-Disabled-color;
-  }
-
-  &::-webkit-inner-spin-button,
-  &::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-}
-
-.clearIcon {
-  cursor: pointer;
-}
-
-.input--onfocus {
-  background-color: $Surface-Surface-3-color;
-  .input {
-    background-color: $Surface-Surface-3-color;
-  }
-}
-
-.input-text {
-  @include Body1Regular;
-}

package/src/components/InputField/index.d.ts

@@ -1,20 +0,0 @@
-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;
-//# sourceMappingURL=index.d.ts.map

package/src/components/InputField/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,sBAAsB,EAAY,MAAM,OAAO,CAAC;AAOhE,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;AAEtC,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,sBAAsB,CAAC;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,UAAU,mJAepB,gBAAgB,KAAG,KAAK,CAAC,SAgE3B,CAAC"}

package/src/components/InputField/index.js

@@ -1,60 +0,0 @@
-"use strict";
-"use client";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputField = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const ClassNamesFn_1 = require("~utils/ClassNamesFn");
-const InputField_module_scss_1 = __importDefault(require("./InputField.module.scss"));
-const _svg_1 = require("~svg");
-const InputField = ({ onFocus, onBlur, onChange, onEnterPress, value = "", inputLeftIcon, placeholder = "", className = "", style, isClearable = false, type = "text", id, labelText = "", ariaLabel = "", }) => {
-    const [focused, setFocused] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)("div", { "data-testid": "InputField_MAIN", className: (0, ClassNamesFn_1.ClassNamesFn)(InputField_module_scss_1.default[labelText.length ? "inputContainerLabeled" : "inputContainer"], className, focused ? InputField_module_scss_1.default[`input--onfocus`] : undefined, InputField_module_scss_1.default[`input-${type === null || type === void 0 ? void 0 : type.toLocaleLowerCase()}`]), style: style, children: [labelText.length > 0 && ((0, jsx_runtime_1.jsx)("label", { htmlFor: id, "data-testid": "InputField_LABEL", children: labelText })), inputLeftIcon, (0, jsx_runtime_1.jsx)("input", { "data-testid": "InputField_INPUT", "aria-label": ariaLabel, id: id, type: type, className: InputField_module_scss_1.default.input, placeholder: placeholder, "aria-placeholder": placeholder, onFocus: () => {
-                    setFocused(true);
-                    if (onFocus) {
-                        onFocus();
-                    }
-                }, onBlur: () => {
-                    setFocused(false);
-                    if (onBlur) {
-                        onBlur();
-                    }
-                }, onChange: onChange, onKeyDown: (event) => {
-                    if (onEnterPress && event.key === "Enter") {
-                        onEnterPress(event);
-                    }
-                }, value: value, readOnly: !onChange }), isClearable && value && ((0, jsx_runtime_1.jsx)(_svg_1.ClearIcon, { fill: "red", pathFill: "#758393", className: InputField_module_scss_1.default.clearIcon, onClick: () => {
-                    if (onChange) {
-                        onChange({
-                            target: { value: "" },
-                        });
-                    }
-                } }))] }));
-};
-exports.InputField = InputField;

package/src/components/InputField/index.tsx

@@ -1,108 +0,0 @@
-"use client";
-
-import React, { HTMLInputTypeAttribute, useState } from "react";
-
-import { ClassNamesFn } from "~utils/ClassNamesFn";
-
-import styles from "./InputField.module.scss";
-import { ClearIcon } from "~svg";
-
-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 const InputField = ({
-  onFocus,
-  onBlur,
-  onChange,
-  onEnterPress,
-  value = "",
-  inputLeftIcon,
-  placeholder = "",
-  className = "",
-  style,
-  isClearable = false,
-  type = "text",
-  id,
-  labelText = "",
-  ariaLabel = "",
-}: IInputFieldProps): React.ReactNode => {
-  const [focused, setFocused] = useState<boolean>(false);
-  return (
-    <div
-      data-testid="InputField_MAIN"
-      className={ClassNamesFn(
-        styles[labelText.length ? "inputContainerLabeled" : "inputContainer"],
-        className,
-        focused ? styles[`input--onfocus`] : undefined,
-        styles[`input-${type?.toLocaleLowerCase()}`]
-      )}
-      style={style}
-    >
-      {labelText.length > 0 && (
-        <label htmlFor={id} data-testid="InputField_LABEL">
-          {labelText}
-        </label>
-      )}
-      {inputLeftIcon}
-      <input
-        data-testid="InputField_INPUT"
-        aria-label={ariaLabel}
-        id={id}
-        type={type}
-        className={styles.input}
-        placeholder={placeholder}
-        aria-placeholder={placeholder}
-        onFocus={() => {
-          setFocused(true);
-          if (onFocus) {
-            onFocus();
-          }
-        }}
-        onBlur={() => {
-          setFocused(false);
-          if (onBlur) {
-            onBlur();
-          }
-        }}
-        onChange={onChange}
-        onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
-          if (onEnterPress && event.key === "Enter") {
-            onEnterPress(event);
-          }
-        }}
-        value={value}
-        readOnly={!onChange}
-      />
-      {isClearable && value && (
-        <ClearIcon
-          fill="red"
-          pathFill="#758393"
-          className={styles.clearIcon}
-          onClick={() => {
-            if (onChange) {
-              onChange({
-                target: { value: "" },
-              } as React.ChangeEvent<HTMLInputElement>);
-            }
-          }}
-        />
-      )}
-    </div>
-  );
-};

package/src/components/index.d.ts

@@ -1,4 +0,0 @@
-export declare const Components: {
-    InputField: ({ onFocus, onBlur, onChange, onEnterPress, value, inputLeftIcon, placeholder, className, style, isClearable, type, id, labelText, ariaLabel, }: import("./InputField").IInputFieldProps) => React.ReactNode;
-};
-//# sourceMappingURL=index.d.ts.map

package/src/components/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;CAAiB,CAAC"}

package/src/components/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Components = void 0;
-const InputField_1 = require("./InputField");
-exports.Components = { InputField: InputField_1.InputField };

package/src/components/index.tsx

@@ -1,3 +0,0 @@
-import { InputField } from "./InputField";
-
-export const Components = { InputField };

package/src/stories/CardWrapperItem.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-
-export const CardWrapperItem = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => (
-  <div
-    style={{
-      display: 'flex',
-      justifyContent: 'center',
-      minHeight: '100px',
-    }}
-  >
-    <div
-      style={{
-        backgroundColor: 'bisque',
-        padding: '9px',
-        display: 'flex',
-        width: '80%',
-        flexDirection: 'column',
-        borderRadius: '20px',
-        justifyContent: 'center',
-      }}
-    >
-      {children}
-    </div>
-  </div>
-);