@egov3/system-design 1.0.6 → 1.0.10

package/public/img/language-1.svg

@@ -1,5 +1,5 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.72616 12.4244H1.6665L4.80482 3.3335H7.28174L10.4156 12.4244H8.35596L7.6829 10.3514H4.40054L3.72616 12.4244ZM6.07879 5.41091L7.19576 8.85107H4.88863L6.00777 5.41091H6.07879Z" fill="var(--default-black-color, #000)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3867 9.16683C14.3455 9.16683 15.1608 9.34883 15.8326 9.71282C16.5043 10.0768 17.0148 10.5814 17.364 11.2265C17.7162 11.8716 17.8922 12.6203 17.8922 13.4726V14.4314C17.8922 15.2245 17.7221 15.9273 17.3818 16.5399C17.0444 17.1524 16.5739 17.6333 15.9702 17.9825C15.3695 18.3317 14.6785 18.5063 13.8972 18.5063C13.0864 18.5063 12.3895 18.3391 11.8065 18.0047C11.2265 17.6674 10.7811 17.1865 10.4704 16.5621C10.1596 15.9377 10.0028 15.189 9.99984 14.316V13.2861H15.9482C15.9341 12.982 15.8853 12.6994 15.8015 12.4383C15.7009 12.1217 15.5426 11.8465 15.3265 11.6127C15.1105 11.3789 14.8323 11.1984 14.492 11.0711C14.1517 10.9409 13.7418 10.8758 13.2624 10.8758C13.0168 10.8758 12.7579 10.8921 12.4856 10.9246C12.2163 10.9572 11.9515 11.0016 11.6911 11.0578C11.4306 11.1111 11.1954 11.1688 10.9853 11.2309L10.6701 9.63736C10.8181 9.56929 11.0341 9.49975 11.3182 9.42873C11.6023 9.3577 11.9248 9.29704 12.2859 9.24673C12.6469 9.19346 13.0139 9.16683 13.3867 9.16683ZM11.9308 14.8531H15.9286C15.8941 15.1474 15.8221 15.4182 15.7127 15.6654C15.5559 16.0235 15.3206 16.3046 15.0069 16.5088C14.6933 16.713 14.3026 16.8151 13.8351 16.8151C13.4178 16.8151 13.0686 16.7411 12.7875 16.5931C12.5063 16.4422 12.2933 16.2336 12.1483 15.9673C12.0062 15.698 11.9337 15.3872 11.9308 15.0351V14.8531Z" fill="var(--default-black-color, #000)"/>
-<path d="M8.33317 14.1668H1.6665V15.8335H8.33317V14.1668Z" fill="var(--default-black-color, #000)"/>
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.72616 12.4244H1.6665L4.80482 3.3335H7.28174L10.4156 12.4244H8.35596L7.6829 10.3514H4.40054L3.72616 12.4244ZM6.07879 5.41091L7.19576 8.85107H4.88863L6.00777 5.41091H6.07879Z" fill="var(--default-black-color, #000)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3867 9.16683C14.3455 9.16683 15.1608 9.34883 15.8326 9.71282C16.5043 10.0768 17.0148 10.5814 17.364 11.2265C17.7162 11.8716 17.8922 12.6203 17.8922 13.4726V14.4314C17.8922 15.2245 17.7221 15.9273 17.3818 16.5399C17.0444 17.1524 16.5739 17.6333 15.9702 17.9825C15.3695 18.3317 14.6785 18.5063 13.8972 18.5063C13.0864 18.5063 12.3895 18.3391 11.8065 18.0047C11.2265 17.6674 10.7811 17.1865 10.4704 16.5621C10.1596 15.9377 10.0028 15.189 9.99984 14.316V13.2861H15.9482C15.9341 12.982 15.8853 12.6994 15.8015 12.4383C15.7009 12.1217 15.5426 11.8465 15.3265 11.6127C15.1105 11.3789 14.8323 11.1984 14.492 11.0711C14.1517 10.9409 13.7418 10.8758 13.2624 10.8758C13.0168 10.8758 12.7579 10.8921 12.4856 10.9246C12.2163 10.9572 11.9515 11.0016 11.6911 11.0578C11.4306 11.1111 11.1954 11.1688 10.9853 11.2309L10.6701 9.63736C10.8181 9.56929 11.0341 9.49975 11.3182 9.42873C11.6023 9.3577 11.9248 9.29704 12.2859 9.24673C12.6469 9.19346 13.0139 9.16683 13.3867 9.16683ZM11.9308 14.8531H15.9286C15.8941 15.1474 15.8221 15.4182 15.7127 15.6654C15.5559 16.0235 15.3206 16.3046 15.0069 16.5088C14.6933 16.713 14.3026 16.8151 13.8351 16.8151C13.4178 16.8151 13.0686 16.7411 12.7875 16.5931C12.5063 16.4422 12.2933 16.2336 12.1483 15.9673C12.0062 15.698 11.9337 15.3872 11.9308 15.0351V14.8531Z" fill="var(--default-black-color, #000)"/>
+<path d="M8.33317 14.1668H1.6665V15.8335H8.33317V14.1668Z" fill="var(--default-black-color, #000)"/>
+</svg>

package/public/img/logo.svg

@@ -1,7 +1,7 @@
-<svg width="61" height="24" viewBox="0 0 61 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M39.463 15.9813C43.7932 15.9813 47.3036 12.4038 47.3036 7.99065C47.3036 3.57754 43.7932 0 39.463 0C35.1327 0 31.6223 3.57754 31.6223 7.99065C31.6223 12.4038 35.1327 15.9813 39.463 15.9813ZM39.4909 12.4486C41.8916 12.4486 43.8377 10.4653 43.8377 8.01869C43.8377 5.57212 41.8916 3.58878 39.4909 3.58878C37.0903 3.58878 35.1442 5.57212 35.1442 8.01869C35.1442 10.4653 37.0903 12.4486 39.4909 12.4486Z" fill="var(--default-black-color, #000)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M31.244 1.86245e-06H23.433L23.4351 0.00626131C23.3312 0.00210278 23.2268 4.0315e-06 23.122 4.0315e-06C18.7917 4.0315e-06 15.2813 3.57754 15.2813 7.99066C15.2813 12.4038 18.7917 15.9813 23.122 15.9813C27.4522 15.9813 30.9626 12.4038 30.9626 7.99066C30.9626 6.11754 30.3302 4.39495 29.2711 3.03255H31.244V1.86245e-06ZM23.1487 12.4486C25.5493 12.4486 27.4954 10.4653 27.4954 8.0187C27.4954 5.57213 25.5493 3.58879 23.1487 3.58879C20.748 3.58879 18.8019 5.57213 18.8019 8.0187C18.8019 10.4653 20.748 12.4486 23.1487 12.4486Z" fill="var(--default-black-color, #000)"/>
-<path d="M23.1222 24C27.4524 24 30.9628 20.4225 30.9628 16.0093L27.4956 16.0093L27.4956 16.0374C27.4956 18.484 25.5495 20.4673 23.1489 20.4673C20.7483 20.4673 18.8022 18.484 18.8022 16.0374L18.8022 16.0093L15.2815 16.0093C15.2815 20.4225 18.7919 24 23.1222 24Z" fill="var(--default-black-color, #000)"/>
-<path d="M57.0732 0H61L55.4209 15.9813H51.3411L45.762 0H49.699L53.2994 11.8715H53.4626L57.0732 0Z" fill="var(--default-black-color, #000)"/>
-<path d="M10.5485 6.25419C10.36 5.21663 10.0206 4.42885 9.5304 3.89086C9.05907 3.35286 8.33321 3.08386 7.35283 3.08386C6.71182 3.08386 6.17449 3.19915 5.74086 3.42972C5.32609 3.64107 4.98673 3.91007 4.72278 4.23671C4.47769 4.56335 4.29858 4.9092 4.18546 5.27427C4.09119 5.63934 4.03463 5.96598 4.01578 6.25419H10.5485ZM4.01578 8.84809C4.07234 10.1739 4.40227 11.1346 5.00558 11.7302C5.60889 12.3258 6.47615 12.6237 7.60735 12.6237C8.41805 12.6237 9.11563 12.4219 9.70008 12.0184C10.2845 11.5957 10.6428 11.1538 10.7747 10.6926H14.3097C13.7441 12.4796 12.8769 13.7573 11.708 14.5259C10.5391 15.2944 9.12505 15.6787 7.46595 15.6787C6.31589 15.6787 5.27896 15.4962 4.35514 15.1311C3.43132 14.7468 2.6489 14.2088 2.00789 13.5171C1.36687 12.8254 0.867257 11.9992 0.509042 11.0385C0.169681 10.0778 0 9.02102 0 7.86818C0 6.75376 0.179107 5.7162 0.537322 4.75549C0.895537 3.79479 1.40458 2.96858 2.06445 2.27687C2.72432 1.56595 3.50673 1.00874 4.4117 0.605243C5.33552 0.201748 6.3536 0 7.46595 0C8.71028 0 9.79435 0.249784 10.7182 0.749351C11.642 1.2297 12.3961 1.88298 12.9806 2.70919C13.5839 3.5354 14.0175 4.47689 14.2815 5.53366C14.5454 6.59044 14.6397 7.69525 14.5643 8.84809H4.01578Z" fill="var(--default-black-color, #000)"/>
-</svg>
+<svg width="61" height="24" viewBox="0 0 61 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.463 15.9813C43.7932 15.9813 47.3036 12.4038 47.3036 7.99065C47.3036 3.57754 43.7932 0 39.463 0C35.1327 0 31.6223 3.57754 31.6223 7.99065C31.6223 12.4038 35.1327 15.9813 39.463 15.9813ZM39.4909 12.4486C41.8916 12.4486 43.8377 10.4653 43.8377 8.01869C43.8377 5.57212 41.8916 3.58878 39.4909 3.58878C37.0903 3.58878 35.1442 5.57212 35.1442 8.01869C35.1442 10.4653 37.0903 12.4486 39.4909 12.4486Z" fill="var(--default-black-color, #000)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.244 1.86245e-06H23.433L23.4351 0.00626131C23.3312 0.00210278 23.2268 4.0315e-06 23.122 4.0315e-06C18.7917 4.0315e-06 15.2813 3.57754 15.2813 7.99066C15.2813 12.4038 18.7917 15.9813 23.122 15.9813C27.4522 15.9813 30.9626 12.4038 30.9626 7.99066C30.9626 6.11754 30.3302 4.39495 29.2711 3.03255H31.244V1.86245e-06ZM23.1487 12.4486C25.5493 12.4486 27.4954 10.4653 27.4954 8.0187C27.4954 5.57213 25.5493 3.58879 23.1487 3.58879C20.748 3.58879 18.8019 5.57213 18.8019 8.0187C18.8019 10.4653 20.748 12.4486 23.1487 12.4486Z" fill="var(--default-black-color, #000)"/>
+<path d="M23.1222 24C27.4524 24 30.9628 20.4225 30.9628 16.0093L27.4956 16.0093L27.4956 16.0374C27.4956 18.484 25.5495 20.4673 23.1489 20.4673C20.7483 20.4673 18.8022 18.484 18.8022 16.0374L18.8022 16.0093L15.2815 16.0093C15.2815 20.4225 18.7919 24 23.1222 24Z" fill="var(--default-black-color, #000)"/>
+<path d="M57.0732 0H61L55.4209 15.9813H51.3411L45.762 0H49.699L53.2994 11.8715H53.4626L57.0732 0Z" fill="var(--default-black-color, #000)"/>
+<path d="M10.5485 6.25419C10.36 5.21663 10.0206 4.42885 9.5304 3.89086C9.05907 3.35286 8.33321 3.08386 7.35283 3.08386C6.71182 3.08386 6.17449 3.19915 5.74086 3.42972C5.32609 3.64107 4.98673 3.91007 4.72278 4.23671C4.47769 4.56335 4.29858 4.9092 4.18546 5.27427C4.09119 5.63934 4.03463 5.96598 4.01578 6.25419H10.5485ZM4.01578 8.84809C4.07234 10.1739 4.40227 11.1346 5.00558 11.7302C5.60889 12.3258 6.47615 12.6237 7.60735 12.6237C8.41805 12.6237 9.11563 12.4219 9.70008 12.0184C10.2845 11.5957 10.6428 11.1538 10.7747 10.6926H14.3097C13.7441 12.4796 12.8769 13.7573 11.708 14.5259C10.5391 15.2944 9.12505 15.6787 7.46595 15.6787C6.31589 15.6787 5.27896 15.4962 4.35514 15.1311C3.43132 14.7468 2.6489 14.2088 2.00789 13.5171C1.36687 12.8254 0.867257 11.9992 0.509042 11.0385C0.169681 10.0778 0 9.02102 0 7.86818C0 6.75376 0.179107 5.7162 0.537322 4.75549C0.895537 3.79479 1.40458 2.96858 2.06445 2.27687C2.72432 1.56595 3.50673 1.00874 4.4117 0.605243C5.33552 0.201748 6.3536 0 7.46595 0C8.71028 0 9.79435 0.249784 10.7182 0.749351C11.642 1.2297 12.3961 1.88298 12.9806 2.70919C13.5839 3.5354 14.0175 4.47689 14.2815 5.53366C14.5454 6.59044 14.6397 7.69525 14.5643 8.84809H4.01578Z" fill="var(--default-black-color, #000)"/>
+</svg>

package/src/baseComponents/InputField/InputField.module.scss

@@ -1,57 +1,57 @@
-@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;
-}
+@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/baseComponents/InputField/index.tsx

@@ -1,108 +1,108 @@
-"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";
-
-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>
-  );
-};
+"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";
+
+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/stories/CardWrapperItem.tsx

@@ -1,29 +1,29 @@
-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>
-);
+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>
+);