@wishket/design-system 3.1.0 → 3.2.0
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/dist/Components/DataDisplays/ProductIcon/Icons/WebSearch.d.ts +4 -0
- package/dist/Components/DataDisplays/ProductIcon/Icons/WebSearch.js +25 -0
- package/dist/Components/DataDisplays/ProductIcon/Icons/index.d.ts +1 -0
- package/dist/Components/DataDisplays/ProductIcon/ProductIcon.constants.d.ts +1 -1
- package/dist/Components/DataDisplays/ProductIcon/ProductIcon.constants.js +1 -1
- package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.d.ts +18 -3
- package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.js +17 -5
- package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.parts.d.ts +5 -2
- package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.parts.js +5 -3
- package/dist/cjs/Components/DataDisplays/ProductIcon/Icons/WebSearch.js +25 -0
- package/dist/cjs/Components/DataDisplays/ProductIcon/ProductIcon.constants.js +1 -1
- package/dist/cjs/Components/Inputs/TextFieldDropdown/TextFieldDropdown.js +3 -3
- package/dist/cjs/Components/Inputs/TextFieldDropdown/TextFieldDropdown.parts.js +5 -3
- package/package.json +1 -1
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import{jsxs as t,jsx as e}from"react/jsx-runtime";import"react";const r=({disabled:r})=>/*#__PURE__*/t("svg",r?{xmlns:"http://www.w3.org/2000/svg",width:"60",height:"60",viewBox:"0 0 60 60",fill:"none","data-testid":"design-system-productIcon-icon-web_search--disabled",children:[
|
|
2
|
+
/*#__PURE__*/e("rect",{x:"6",y:"10",width:"48",height:"40",rx:"6",fill:"white",stroke:"#9E9E9E",strokeWidth:"1.4"}),
|
|
3
|
+
/*#__PURE__*/e("path",{d:"M6 14C6 11.7909 7.79086 10 10 10H50C52.2091 10 54 11.7909 54 14V21H6V14Z",fill:"#E0E0E0",stroke:"#9E9E9E",strokeWidth:"1.4"}),
|
|
4
|
+
/*#__PURE__*/e("circle",{cx:"49",cy:"15.5",r:"1",fill:"white"}),
|
|
5
|
+
/*#__PURE__*/e("circle",{cx:"45",cy:"15.5",r:"1",fill:"white"}),
|
|
6
|
+
/*#__PURE__*/e("circle",{cx:"41",cy:"15.5",r:"1",fill:"white"}),
|
|
7
|
+
/*#__PURE__*/t("g",{transform:"translate(18.36 22.36)",children:[
|
|
8
|
+
/*#__PURE__*/e("path",{d:"M11.6551 23.2175C17.6717 23.185 22.5219 18.1179 22.4882 11.8999C22.4546 5.6819 17.5499 0.667605 11.5333 0.700158C5.51668 0.732712 0.666531 5.79979 0.700174 12.0178C0.733817 18.2358 5.63851 23.2501 11.6551 23.2175Z",fill:"white",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
9
|
+
/*#__PURE__*/e("path",{d:"M18.469 20.6893L21.1584 23.7206",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
10
|
+
/*#__PURE__*/e("path",{d:"M30.1267 33.1687L29.5455 33.7271C28.896 34.3539 27.8818 34.3083 27.2892 33.636L21.1811 26.9012C20.5886 26.2288 20.6228 25.169 21.2723 24.5537L21.8535 23.9953C22.503 23.3685 23.5172 23.4141 24.1098 24.0864L30.2179 30.8212C30.8104 31.4936 30.7762 32.5534 30.1267 33.1687Z",fill:"white",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})]}),
|
|
11
|
+
/*#__PURE__*/t("g",{transform:"translate(24.3 27.3)",children:[
|
|
12
|
+
/*#__PURE__*/e("path",{d:"M0.7 12.7V12.3465C0.778172 11.2347 1.36146 7.7 5.70301 7.7H5.69699C10.0385 7.7 10.6218 11.2283 10.7 12.3465V12.7",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
13
|
+
/*#__PURE__*/e("path",{d:"M5.7 5.7C7.08071 5.7 8.2 4.58071 8.2 3.2C8.2 1.81929 7.08071 0.7 5.7 0.7C4.31929 0.7 3.2 1.81929 3.2 3.2C3.2 4.58071 4.31929 5.7 5.7 5.7Z",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})]})]}:{xmlns:"http://www.w3.org/2000/svg",width:"60",height:"60",viewBox:"0 0 60 60",fill:"none","data-testid":"design-system-productIcon-icon-web_search",className:"text-primary",children:[
|
|
14
|
+
/*#__PURE__*/e("rect",{x:"6",y:"10",width:"48",height:"40",rx:"6",fill:"white",stroke:"#212121",strokeWidth:"1.4"}),
|
|
15
|
+
/*#__PURE__*/e("path",{d:"M6 14C6 11.7909 7.79086 10 10 10H50C52.2091 10 54 11.7909 54 14V21H6V14Z",fill:"currentColor",stroke:"#212121",strokeWidth:"1.4"}),
|
|
16
|
+
/*#__PURE__*/e("circle",{cx:"49",cy:"15.5",r:"1",fill:"white"}),
|
|
17
|
+
/*#__PURE__*/e("circle",{cx:"45",cy:"15.5",r:"1",fill:"white"}),
|
|
18
|
+
/*#__PURE__*/e("circle",{cx:"41",cy:"15.5",r:"1",fill:"white"}),
|
|
19
|
+
/*#__PURE__*/t("g",{transform:"translate(18.36 22.36)",children:[
|
|
20
|
+
/*#__PURE__*/e("path",{d:"M11.6551 23.2175C17.6717 23.185 22.5219 18.1179 22.4882 11.8999C22.4546 5.6819 17.5499 0.667605 11.5333 0.700158C5.51668 0.732712 0.666531 5.79979 0.700174 12.0178C0.733817 18.2358 5.63851 23.2501 11.6551 23.2175Z",fill:"white",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
21
|
+
/*#__PURE__*/e("path",{d:"M18.469 20.6893L21.1584 23.7206",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
22
|
+
/*#__PURE__*/e("path",{d:"M30.1267 33.1687L29.5455 33.7271C28.896 34.3539 27.8818 34.3083 27.2892 33.636L21.1811 26.9012C20.5886 26.2288 20.6228 25.169 21.2723 24.5537L21.8535 23.9953C22.503 23.3685 23.5172 23.4141 24.1098 24.0864L30.2179 30.8212C30.8104 31.4936 30.7762 32.5534 30.1267 33.1687Z",fill:"white",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})]}),
|
|
23
|
+
/*#__PURE__*/t("g",{transform:"translate(24.3 27.3)",children:[
|
|
24
|
+
/*#__PURE__*/e("path",{d:"M0.7 12.7V12.3465C0.778172 11.2347 1.36146 7.7 5.70301 7.7H5.69699C10.0385 7.7 10.6218 11.2283 10.7 12.3465V12.7",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
25
|
+
/*#__PURE__*/e("path",{d:"M5.7 5.7C7.08071 5.7 8.2 4.58071 8.2 3.2C8.2 1.81929 7.08071 0.7 5.7 0.7C4.31929 0.7 3.2 1.81929 3.2 3.2C3.2 4.58071 4.31929 5.7 5.7 5.7Z",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})]})]});export{r as WebSearch};
|
|
@@ -2,6 +2,7 @@ export { WebDevelopment } from './WebDevelopment';
|
|
|
2
2
|
export { WebDomain } from './WebDomain';
|
|
3
3
|
export { WebSecurity } from './WebSecurity';
|
|
4
4
|
export { WebPayment } from './WebPayment';
|
|
5
|
+
export { WebSearch } from './WebSearch';
|
|
5
6
|
export { WidePaperStructure } from './WidePaperStructure';
|
|
6
7
|
export { WidePaperPlan } from './WidePaperPlan';
|
|
7
8
|
export { WidePaperPayment } from './WidePaperPayment';
|
|
@@ -4,7 +4,7 @@ export declare const SmallProductIconNames: readonly ["bookmark", "download", "w
|
|
|
4
4
|
export type SmallProductIconName = (typeof SmallProductIconNames)[number];
|
|
5
5
|
export declare const MediumProductIconNames: readonly ["person_smile", "lock", "logout", "contract_pen", "paper_pen", "paper_hold", "person_office_confirm", "paper_payment_confirm", "search", "search_confirm", "won", "connect", "security", "service", "package", "bubble_person", "write"];
|
|
6
6
|
export type MediumProductIconName = (typeof MediumProductIconNames)[number];
|
|
7
|
-
export declare const LargeProductIconNames: readonly ["web_development", "web_domain", "web_security", "web_payment", "wide_paper_structure", "wide_paper_plan", "wide_paper_payment", "wide_paper_confirm", "paper_project", "paper_contract", "paper_certify", "paper_security", "paper_clock", "paper_confirm", "paper_clip", "paper_clip_clock", "paper_overlap", "paper_hold", "memo_write", "receipt", "document_success", "document_cloud", "person_freelancer", "person_office", "person_smile", "building", "hand_shake", "hand_thumb", "search", "search_confirm", "design", "repair", "card_confirm", "card_write", "bookmark", "idea", "mobile_confirm", "database", "email", "credit", "shield_confirm", "shield_won", "shopping", "bubble_star", "bubble_stars", "calendar", "public", "lock", "logout", "congrats", "discount", "achieve"];
|
|
7
|
+
export declare const LargeProductIconNames: readonly ["web_development", "web_domain", "web_security", "web_payment", "web_search", "wide_paper_structure", "wide_paper_plan", "wide_paper_payment", "wide_paper_confirm", "paper_project", "paper_contract", "paper_certify", "paper_security", "paper_clock", "paper_confirm", "paper_clip", "paper_clip_clock", "paper_overlap", "paper_hold", "memo_write", "receipt", "document_success", "document_cloud", "person_freelancer", "person_office", "person_smile", "building", "hand_shake", "hand_thumb", "search", "search_confirm", "design", "repair", "card_confirm", "card_write", "bookmark", "idea", "mobile_confirm", "database", "email", "credit", "shield_confirm", "shield_won", "shopping", "bubble_star", "bubble_stars", "calendar", "public", "lock", "logout", "congrats", "discount", "achieve"];
|
|
8
8
|
export type LargeProductIconName = (typeof LargeProductIconNames)[number];
|
|
9
9
|
export type ProductIconName = SmallProductIconName | MediumProductIconName | LargeProductIconName;
|
|
10
10
|
export declare const productIcons: Map<ProductIconName, (props: ProductIconPartProps) => React.JSX.Element>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as o}from"react/jsx-runtime";import"react";import{WebDevelopment as r}from"./Icons/WebDevelopment.js";import{WebDomain as e}from"./Icons/WebDomain.js";import{WebSecurity as n}from"./Icons/WebSecurity.js";import{WebPayment as
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import"react";import{WebDevelopment as r}from"./Icons/WebDevelopment.js";import{WebDomain as e}from"./Icons/WebDomain.js";import{WebSecurity as n}from"./Icons/WebSecurity.js";import{WebPayment as c}from"./Icons/WebPayment.js";import{WebSearch as p}from"./Icons/WebSearch.js";import{WidePaperStructure as i}from"./Icons/WidePaperStructure.js";import{WidePaperPlan as s}from"./Icons/WidePaperPlan.js";import{WidePaperPayment as m}from"./Icons/WidePaperPayment.js";import{WidePaperConfirm as t}from"./Icons/WidePaperConfirm.js";import{PaperProject as a}from"./Icons/PaperProject.js";import{PaperContract as f}from"./Icons/PaperContract.js";import{PaperCertify as _}from"./Icons/PaperCertify.js";import{PaperSecurity as l}from"./Icons/PaperSecurity.js";import{PaperClock as j}from"./Icons/PaperClock.js";import{PaperConfirm as d}from"./Icons/PaperConfirm.js";import{PaperClip as b}from"./Icons/PaperClip.js";import{PaperOverlap as I}from"./Icons/PaperOverlap.js";import{PaperHold as u}from"./Icons/PaperHold.js";import{MemoWrite as h}from"./Icons/MemoWrite.js";import{Receipt as w}from"./Icons/Receipt.js";import{DocumentSuccess as P}from"./Icons/DocumentSuccess.js";import{DocumentCloud as y}from"./Icons/DocumentCloud.js";import{PersonFreelancer as g}from"./Icons/PersonFreelancer.js";import{PersonOffice as k}from"./Icons/PersonOffice.js";import{PersonSmile as C}from"./Icons/PersonSmile.js";import{Building as S}from"./Icons/Building.js";import{HandShake as v}from"./Icons/HandShake.js";import{HandThumb as W}from"./Icons/HandThumb.js";import{Search as O}from"./Icons/Search.js";import{SearchConfirm as D}from"./Icons/SearchConfirm.js";import{Design as B}from"./Icons/Design.js";import{Repair as H}from"./Icons/Repair.js";import{CardConfirm as M}from"./Icons/CardConfirm.js";import{CardWrite as x}from"./Icons/CardWrite.js";import{Bookmark as E}from"./Icons/Bookmark.js";import{Idea as L}from"./Icons/Idea.js";import{MobileConfirm as R}from"./Icons/MobileConfirm.js";import{Database as A}from"./Icons/Database.js";import{Email as F}from"./Icons/Email.js";import{Credit as T}from"./Icons/Credit.js";import{ShieldConfirm as q}from"./Icons/ShieldConfirm.js";import{ShieldWon as z}from"./Icons/ShieldWon.js";import{Shopping as G}from"./Icons/Shopping.js";import{BubbleStar as J}from"./Icons/BubbleStar.js";import{BubbleStars as K}from"./Icons/BubbleStars.js";import{Calendar as N}from"./Icons/Calendar.js";import{Lock as Q}from"./Icons/Lock.js";import{Logout as U}from"./Icons/Logout.js";import{Congrats as V}from"./Icons/Congrats.js";import{Discount as X}from"./Icons/Discount.js";import{PersonOfficeConfirm as Y}from"./Icons/PersonOfficeConfirm.js";import{PaperPaymentConfirm as Z}from"./Icons/PaperPaymentConfirm.js";import{Won as $}from"./Icons/Won.js";import{Connect as oo}from"./Icons/Connect.js";import{Security as ro}from"./Icons/Security.js";import{Service as eo}from"./Icons/Service.js";import{Download as no}from"./Icons/Download.js";import{Waiting as co}from"./Icons/Waiting.js";import{Achieve as po}from"./Icons/Achieve.js";import{ContractPen as io}from"./Icons/ContractPen.js";import{Package as so}from"./Icons/Package.js";import{PaperClipClock as mo}from"./Icons/PaperClipClock.js";import{PaperPen as to}from"./Icons/PaperPen.js";import{Public as ao}from"./Icons/Public.js";import{BubblePerson as fo}from"./Icons/BubblePerson.js";import{Write as _o}from"./Icons/Write.js";function lo(o,r,e){return r in o?Object.defineProperty(o,r,{value:e,enumerable:!0,configurable:!0,writable:!0}):o[r]=e,o}function jo(o){for(var r=1;r<arguments.length;r++){var e=null!=arguments[r]?arguments[r]:{},n=Object.keys(e);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(e).filter((function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})))),n.forEach((function(r){lo(o,r,e[r])}))}return o}const bo=["bookmark","download","waiting","search","contract_pen","paper_pen","paper_confirm","won","package"],Io=["person_smile","lock","logout","contract_pen","paper_pen","paper_hold","person_office_confirm","paper_payment_confirm","search","search_confirm","won","connect","security","service","package","bubble_person","write"],uo=["web_development","web_domain","web_security","web_payment","web_search","wide_paper_structure","wide_paper_plan","wide_paper_payment","wide_paper_confirm","paper_project","paper_contract","paper_certify","paper_security","paper_clock","paper_confirm","paper_clip","paper_clip_clock","paper_overlap","paper_hold","memo_write","receipt","document_success","document_cloud","person_freelancer","person_office","person_smile","building","hand_shake","hand_thumb","search","search_confirm","design","repair","card_confirm","card_write","bookmark","idea","mobile_confirm","database","email","credit","shield_confirm","shield_won","shopping","bubble_star","bubble_stars","calendar","public","lock","logout","congrats","discount","achieve"],ho=new Map([["web_development",e=>/*#__PURE__*/o(r,jo({},e))],["web_domain",r=>/*#__PURE__*/o(e,jo({},r))],["web_security",r=>/*#__PURE__*/o(n,jo({},r))],["web_payment",r=>/*#__PURE__*/o(c,jo({},r))],["web_search",r=>/*#__PURE__*/o(p,jo({},r))],["wide_paper_structure",r=>/*#__PURE__*/o(i,jo({},r))],["wide_paper_plan",r=>/*#__PURE__*/o(s,jo({},r))],["wide_paper_payment",r=>/*#__PURE__*/o(m,jo({},r))],["wide_paper_confirm",r=>/*#__PURE__*/o(t,jo({},r))],["paper_project",r=>/*#__PURE__*/o(a,jo({},r))],["paper_contract",r=>/*#__PURE__*/o(f,jo({},r))],["paper_certify",r=>/*#__PURE__*/o(_,jo({},r))],["paper_security",r=>/*#__PURE__*/o(l,jo({},r))],["paper_clock",r=>/*#__PURE__*/o(j,jo({},r))],["paper_confirm",r=>/*#__PURE__*/o(d,jo({},r))],["paper_clip",r=>/*#__PURE__*/o(b,jo({},r))],["paper_overlap",r=>/*#__PURE__*/o(I,jo({},r))],["paper_hold",r=>/*#__PURE__*/o(u,jo({},r))],["memo_write",r=>/*#__PURE__*/o(h,jo({},r))],["receipt",r=>/*#__PURE__*/o(w,jo({},r))],["document_success",r=>/*#__PURE__*/o(P,jo({},r))],["document_cloud",r=>/*#__PURE__*/o(y,jo({},r))],["person_freelancer",r=>/*#__PURE__*/o(g,jo({},r))],["person_office",r=>/*#__PURE__*/o(k,jo({},r))],["person_smile",r=>/*#__PURE__*/o(C,jo({},r))],["building",r=>/*#__PURE__*/o(S,jo({},r))],["hand_shake",r=>/*#__PURE__*/o(v,jo({},r))],["hand_thumb",r=>/*#__PURE__*/o(W,jo({},r))],["search",r=>/*#__PURE__*/o(O,jo({},r))],["search_confirm",r=>/*#__PURE__*/o(D,jo({},r))],["design",r=>/*#__PURE__*/o(B,jo({},r))],["repair",r=>/*#__PURE__*/o(H,jo({},r))],["card_confirm",r=>/*#__PURE__*/o(M,jo({},r))],["card_write",r=>/*#__PURE__*/o(x,jo({},r))],["bookmark",r=>/*#__PURE__*/o(E,jo({},r))],["idea",r=>/*#__PURE__*/o(L,jo({},r))],["mobile_confirm",r=>/*#__PURE__*/o(R,jo({},r))],["database",r=>/*#__PURE__*/o(A,jo({},r))],["email",r=>/*#__PURE__*/o(F,jo({},r))],["credit",r=>/*#__PURE__*/o(T,jo({},r))],["shield_confirm",r=>/*#__PURE__*/o(q,jo({},r))],["shield_won",r=>/*#__PURE__*/o(z,jo({},r))],["shopping",r=>/*#__PURE__*/o(G,jo({},r))],["bubble_star",r=>/*#__PURE__*/o(J,jo({},r))],["bubble_stars",r=>/*#__PURE__*/o(K,jo({},r))],["calendar",r=>/*#__PURE__*/o(N,jo({},r))],["lock",r=>/*#__PURE__*/o(Q,jo({},r))],["logout",r=>/*#__PURE__*/o(U,jo({},r))],["congrats",r=>/*#__PURE__*/o(V,jo({},r))],["discount",r=>/*#__PURE__*/o(X,jo({},r))],["person_office_confirm",()=>/*#__PURE__*/o(Y,{})],["paper_payment_confirm",()=>/*#__PURE__*/o(Z,{})],["won",r=>/*#__PURE__*/o($,jo({},r))],["connect",()=>/*#__PURE__*/o(oo,{})],["security",()=>/*#__PURE__*/o(ro,{})],["service",()=>/*#__PURE__*/o(eo,{})],["download",()=>/*#__PURE__*/o(no,{})],["waiting",()=>/*#__PURE__*/o(co,{})],["achieve",r=>/*#__PURE__*/o(po,jo({},r))],["contract_pen",r=>/*#__PURE__*/o(io,jo({},r))],["package",r=>/*#__PURE__*/o(so,jo({},r))],["paper_clip_clock",r=>/*#__PURE__*/o(mo,jo({},r))],["paper_pen",r=>/*#__PURE__*/o(to,jo({},r))],["public",r=>/*#__PURE__*/o(ao,jo({},r))],["bubble_person",()=>/*#__PURE__*/o(fo,{})],["write",()=>/*#__PURE__*/o(_o,{})]]);export{uo as LargeProductIconNames,Io as MediumProductIconNames,bo as SmallProductIconNames,ho as productIcons};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { SystemIconName } from '../../DataDisplays/SystemIcon';
|
|
2
|
+
import { SelectBoxVariant } from './TextFieldDropdown.parts';
|
|
2
3
|
export type Item = {
|
|
3
4
|
key: number | string;
|
|
4
5
|
value: string;
|
|
@@ -6,14 +7,16 @@ export type Item = {
|
|
|
6
7
|
};
|
|
7
8
|
export interface TextFieldDropdownProps {
|
|
8
9
|
items: Item[];
|
|
9
|
-
placeholder: string;
|
|
10
10
|
onItemClick: (item: Item) => void;
|
|
11
|
+
placeholder?: string;
|
|
11
12
|
selectedItem?: Item;
|
|
12
13
|
disabled?: boolean;
|
|
13
14
|
supportMessage?: string;
|
|
14
15
|
errorMessage?: string;
|
|
15
16
|
className?: string;
|
|
16
17
|
isError?: boolean;
|
|
18
|
+
variant?: SelectBoxVariant;
|
|
19
|
+
label?: string;
|
|
17
20
|
}
|
|
18
21
|
/**
|
|
19
22
|
* 드롭다운 형태의 텍스트 필드 컴포넌트입니다.
|
|
@@ -22,14 +25,16 @@ export interface TextFieldDropdownProps {
|
|
|
22
25
|
*
|
|
23
26
|
* @param {Object} props
|
|
24
27
|
* @param {Item[]} props.items - 드롭다운에 표시될 아이템 배열 ({key, value, leadingIcon}[])
|
|
25
|
-
* @param {string} props.placeholder - 선택되지 않은 상태에서 표시될 안내 텍스트
|
|
26
28
|
* @param {(item: Item) => void} props.onItemClick - 아이템 선택 시 호출되는 콜백 함수
|
|
29
|
+
* @param {string} [props.placeholder] - 선택되지 않은 상태에서 표시될 안내 텍스트
|
|
27
30
|
* @param {Item} [props.selectedItem] - 현재 선택된 아이템
|
|
28
31
|
* @param {boolean} [props.disabled] - 비활성화 여부
|
|
29
32
|
* @param {string} [props.supportMessage] - 입력 필드 아래에 표시될 도움말 메시지
|
|
30
33
|
* @param {string} [props.errorMessage] - 오류 발생 시 표시될 메시지
|
|
31
34
|
* @param {string} [props.className] - 추가적인 CSS 클래스명
|
|
32
35
|
* @param {boolean} [props.isError] - 오류 상태 여부
|
|
36
|
+
* @param {'default' | 'label'} [props.variant='default'] - 트리거(SelectBox)의 디자인 변형 타입. `TextField`의 variant와 동일한 시맨틱입니다.
|
|
37
|
+
* @param {string} [props.label] - `variant="label"`일 때 트리거 위에 플로팅되는 라벨
|
|
33
38
|
*
|
|
34
39
|
* @example
|
|
35
40
|
* ```tsx
|
|
@@ -38,6 +43,7 @@ export interface TextFieldDropdownProps {
|
|
|
38
43
|
* { key: 2, value: '옵션 2', leadingIcon: 'settings' }
|
|
39
44
|
* ];
|
|
40
45
|
*
|
|
46
|
+
* // 기본 동작 — placeholder 기반 트리거
|
|
41
47
|
* <TextFieldDropdown
|
|
42
48
|
* items={items}
|
|
43
49
|
* placeholder="옵션을 선택하세요"
|
|
@@ -45,7 +51,16 @@ export interface TextFieldDropdownProps {
|
|
|
45
51
|
* selectedItem={items[0]}
|
|
46
52
|
* supportMessage="추가 설명이 필요한 경우 이곳에 표시됩니다"
|
|
47
53
|
* />
|
|
54
|
+
*
|
|
55
|
+
* // TextField variant="label"과 동일한 플로팅 라벨 트리거
|
|
56
|
+
* <TextFieldDropdown
|
|
57
|
+
* variant="label"
|
|
58
|
+
* label="업종"
|
|
59
|
+
* items={items}
|
|
60
|
+
* onItemClick={(item) => console.log('선택된 아이템:', item)}
|
|
61
|
+
* selectedItem={items[0]}
|
|
62
|
+
* />
|
|
48
63
|
* ```
|
|
49
64
|
*/
|
|
50
|
-
declare const TextFieldDropdown: ({ selectedItem, items, onItemClick, placeholder, disabled, isError, errorMessage, supportMessage, className, }: TextFieldDropdownProps) => import("react/jsx-runtime").JSX.Element;
|
|
65
|
+
declare const TextFieldDropdown: ({ selectedItem, items, onItemClick, placeholder, disabled, isError, errorMessage, supportMessage, className, variant, label, }: TextFieldDropdownProps) => import("react/jsx-runtime").JSX.Element;
|
|
51
66
|
export { TextFieldDropdown };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use client";import{jsxs as e,jsx as o}from"react/jsx-runtime";import"tailwind-merge";import"react";import{Box as t}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{List as s}from"../List/List.js";import{SupportTextContainer as
|
|
1
|
+
"use client";import{jsxs as e,jsx as o}from"react/jsx-runtime";import{twJoin as l}from"tailwind-merge";import"react";import{Box as t}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{List as s}from"../List/List.js";import{SupportTextContainer as r}from"../SupportTextContainer/SupportTextContainer.js";import{useDropdown as i}from"../../../hooks/useDropdown.js";import{SelectBox as a}from"./TextFieldDropdown.parts.js";
|
|
2
2
|
/**
|
|
3
3
|
* 드롭다운 형태의 텍스트 필드 컴포넌트입니다.
|
|
4
4
|
*
|
|
@@ -6,14 +6,16 @@
|
|
|
6
6
|
*
|
|
7
7
|
* @param {Object} props
|
|
8
8
|
* @param {Item[]} props.items - 드롭다운에 표시될 아이템 배열 ({key, value, leadingIcon}[])
|
|
9
|
-
* @param {string} props.placeholder - 선택되지 않은 상태에서 표시될 안내 텍스트
|
|
10
9
|
* @param {(item: Item) => void} props.onItemClick - 아이템 선택 시 호출되는 콜백 함수
|
|
10
|
+
* @param {string} [props.placeholder] - 선택되지 않은 상태에서 표시될 안내 텍스트
|
|
11
11
|
* @param {Item} [props.selectedItem] - 현재 선택된 아이템
|
|
12
12
|
* @param {boolean} [props.disabled] - 비활성화 여부
|
|
13
13
|
* @param {string} [props.supportMessage] - 입력 필드 아래에 표시될 도움말 메시지
|
|
14
14
|
* @param {string} [props.errorMessage] - 오류 발생 시 표시될 메시지
|
|
15
15
|
* @param {string} [props.className] - 추가적인 CSS 클래스명
|
|
16
16
|
* @param {boolean} [props.isError] - 오류 상태 여부
|
|
17
|
+
* @param {'default' | 'label'} [props.variant='default'] - 트리거(SelectBox)의 디자인 변형 타입. `TextField`의 variant와 동일한 시맨틱입니다.
|
|
18
|
+
* @param {string} [props.label] - `variant="label"`일 때 트리거 위에 플로팅되는 라벨
|
|
17
19
|
*
|
|
18
20
|
* @example
|
|
19
21
|
* ```tsx
|
|
@@ -22,6 +24,7 @@
|
|
|
22
24
|
* { key: 2, value: '옵션 2', leadingIcon: 'settings' }
|
|
23
25
|
* ];
|
|
24
26
|
*
|
|
27
|
+
* // 기본 동작 — placeholder 기반 트리거
|
|
25
28
|
* <TextFieldDropdown
|
|
26
29
|
* items={items}
|
|
27
30
|
* placeholder="옵션을 선택하세요"
|
|
@@ -29,7 +32,16 @@
|
|
|
29
32
|
* selectedItem={items[0]}
|
|
30
33
|
* supportMessage="추가 설명이 필요한 경우 이곳에 표시됩니다"
|
|
31
34
|
* />
|
|
35
|
+
*
|
|
36
|
+
* // TextField variant="label"과 동일한 플로팅 라벨 트리거
|
|
37
|
+
* <TextFieldDropdown
|
|
38
|
+
* variant="label"
|
|
39
|
+
* label="업종"
|
|
40
|
+
* items={items}
|
|
41
|
+
* onItemClick={(item) => console.log('선택된 아이템:', item)}
|
|
42
|
+
* selectedItem={items[0]}
|
|
43
|
+
* />
|
|
32
44
|
* ```
|
|
33
|
-
*/const n=({selectedItem:n,items:
|
|
34
|
-
return e("div",{"data-testid":"design-system--textFieldDropdown",ref:
|
|
35
|
-
/*#__PURE__*/o(
|
|
45
|
+
*/const n=({selectedItem:n,items:d,onItemClick:p,placeholder:m,disabled:c,isError:u,errorMessage:f,supportMessage:x,className:g,variant:I="default",label:v})=>{const{isListOpen:h,focusedIndex:k,ref:b,handleItemClick:w,toggleListOpen:y,handleKeyDown:j}=i({items:d,onItemClick:p,disabled:c}),C=!!x||!!f;/*#__PURE__*/
|
|
46
|
+
return e("div",{"data-testid":"design-system--textFieldDropdown",ref:b,className:"relative flex w-full flex-col gap-2 outline-hidden",onKeyDown:j,tabIndex:0,children:[
|
|
47
|
+
/*#__PURE__*/o(a,{placeholder:m,value:null==n?void 0:n.value,leadingIcon:null==n?void 0:n.leadingIcon,disabled:c,isListOpen:h,onClick:y,error:u,className:g,variant:I,label:v}),C&&/*#__PURE__*/o(r,{errorMessage:f,supportMessage:x}),h&&/*#__PURE__*/o(t,{className:l("absolute z-40 w-full","label"===I?"top-[72px]":"top-[54px]"),children:/*#__PURE__*/o(s.Root,{children:d.map(((e,l)=>/*#__PURE__*/o(s.Item,{text:e.value,leadingIcon:e.leadingIcon,onClick:()=>w(e),selected:e.key===(null==n?void 0:n.key),isFocused:l===k},e.key)))})})]})};export{n as TextFieldDropdown};
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import { SystemIconName } from '../../DataDisplays/SystemIcon';
|
|
2
|
+
export type SelectBoxVariant = 'default' | 'label';
|
|
2
3
|
interface SelectBoxProps {
|
|
3
|
-
placeholder: string;
|
|
4
4
|
isListOpen: boolean;
|
|
5
|
+
placeholder?: string;
|
|
5
6
|
value?: string;
|
|
6
7
|
leadingIcon?: SystemIconName;
|
|
7
8
|
disabled?: boolean;
|
|
8
9
|
error?: boolean;
|
|
9
10
|
onClick?: () => void;
|
|
10
11
|
className?: string;
|
|
12
|
+
variant?: SelectBoxVariant;
|
|
13
|
+
label?: string;
|
|
11
14
|
}
|
|
12
|
-
export declare const SelectBox: ({ placeholder, value, isListOpen, disabled, error, onClick, className, }: SelectBoxProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const SelectBox: ({ placeholder, value, isListOpen, disabled, error, onClick, className, variant, label, }: SelectBoxProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
16
|
export {};
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
-
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twJoin as s}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import{Typography as
|
|
2
|
-
/*#__PURE__*/e(
|
|
3
|
-
|
|
1
|
+
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twJoin as a,twMerge as s}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import{Typography as r}from"../../Base/Typography/Typography.js";import{Box as o}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react";import{SystemIcon as i}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";import{TextFieldContainer as l}from"../TextFieldContainer/TextFieldContainer.js";const n=({placeholder:s="",value:o="",isListOpen:n,disabled:c=!1,error:m,onClick:y,className:p,variant:x="default",label:g})=>/*#__PURE__*/t(l,{isDisabled:c,isFocused:n,isError:m,testId:"design-system--selectBox",onClick:y,className:p,children:["label"===x?/*#__PURE__*/e(d,{label:g,value:o,placeholder:s,isFocused:n,isError:m,disabled:c}):/*#__PURE__*/e(r,{"data-testid":"design-system--selectBox-text",variant:"body16",className:a(c&&o?"text-w-gray-300":c&&!o?"text-w-gray-200":o?"text-w-gray-600":"text-w-gray-300","w-full"),children:o||s}),
|
|
2
|
+
/*#__PURE__*/e("div",{className:a("transition-transform duration-300",n&&"rotate-180"),children:/*#__PURE__*/e(i,{name:"medium_arrow_down",className:c?"text-w-gray-300":"text-w-gray-600",testId:"design-system--selectBox-icon"})})]}),d=({label:i,value:l,placeholder:n,isFocused:d,isError:c,disabled:m})=>{const y=!!n;/*#__PURE__*/
|
|
3
|
+
return t(o,{className:"relative flex h-[42px] w-full flex-col gap-0.5 py-px","data-testid":"design-system--selectBox-label",children:[
|
|
4
|
+
/*#__PURE__*/e("div",{className:s("tracking-default absolute",m?"text-w-gray-400":c?"text-w-red-500":d?"text-primary-500":"text-w-gray-400 group-hover:text-primary-500",y?"typo-caption11":d||l?"scale-[0.6875] -translate-y-0.5 origin-top-left transition-transform duration-300":"typo-body16 transition-transform duration-300 translate-y-2 origin-top-left"),"data-testid":"design-system--label-text",children:i}),
|
|
5
|
+
/*#__PURE__*/e(r,{"data-testid":"design-system--selectBox-text",variant:"body16",className:a(m?"text-w-gray-300":l?"text-w-gray-600":"text-w-gray-300","w-full pt-[14px]"),children:l||(y?n:"")})]})};export{n as SelectBox};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime");require("react");exports.WebSearch=({disabled:t})=>t?/*#__PURE__*/e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"60",height:"60",viewBox:"0 0 60 60",fill:"none","data-testid":"design-system-productIcon-icon-web_search--disabled",children:[
|
|
2
|
+
/*#__PURE__*/e.jsx("rect",{x:"6",y:"10",width:"48",height:"40",rx:"6",fill:"white",stroke:"#9E9E9E",strokeWidth:"1.4"}),
|
|
3
|
+
/*#__PURE__*/e.jsx("path",{d:"M6 14C6 11.7909 7.79086 10 10 10H50C52.2091 10 54 11.7909 54 14V21H6V14Z",fill:"#E0E0E0",stroke:"#9E9E9E",strokeWidth:"1.4"}),
|
|
4
|
+
/*#__PURE__*/e.jsx("circle",{cx:"49",cy:"15.5",r:"1",fill:"white"}),
|
|
5
|
+
/*#__PURE__*/e.jsx("circle",{cx:"45",cy:"15.5",r:"1",fill:"white"}),
|
|
6
|
+
/*#__PURE__*/e.jsx("circle",{cx:"41",cy:"15.5",r:"1",fill:"white"}),
|
|
7
|
+
/*#__PURE__*/e.jsxs("g",{transform:"translate(18.36 22.36)",children:[
|
|
8
|
+
/*#__PURE__*/e.jsx("path",{d:"M11.6551 23.2175C17.6717 23.185 22.5219 18.1179 22.4882 11.8999C22.4546 5.6819 17.5499 0.667605 11.5333 0.700158C5.51668 0.732712 0.666531 5.79979 0.700174 12.0178C0.733817 18.2358 5.63851 23.2501 11.6551 23.2175Z",fill:"white",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
9
|
+
/*#__PURE__*/e.jsx("path",{d:"M18.469 20.6893L21.1584 23.7206",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
10
|
+
/*#__PURE__*/e.jsx("path",{d:"M30.1267 33.1687L29.5455 33.7271C28.896 34.3539 27.8818 34.3083 27.2892 33.636L21.1811 26.9012C20.5886 26.2288 20.6228 25.169 21.2723 24.5537L21.8535 23.9953C22.503 23.3685 23.5172 23.4141 24.1098 24.0864L30.2179 30.8212C30.8104 31.4936 30.7762 32.5534 30.1267 33.1687Z",fill:"white",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})]}),
|
|
11
|
+
/*#__PURE__*/e.jsxs("g",{transform:"translate(24.3 27.3)",children:[
|
|
12
|
+
/*#__PURE__*/e.jsx("path",{d:"M0.7 12.7V12.3465C0.778172 11.2347 1.36146 7.7 5.70301 7.7H5.69699C10.0385 7.7 10.6218 11.2283 10.7 12.3465V12.7",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
13
|
+
/*#__PURE__*/e.jsx("path",{d:"M5.7 5.7C7.08071 5.7 8.2 4.58071 8.2 3.2C8.2 1.81929 7.08071 0.7 5.7 0.7C4.31929 0.7 3.2 1.81929 3.2 3.2C3.2 4.58071 4.31929 5.7 5.7 5.7Z",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})]})]}):/*#__PURE__*/e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"60",height:"60",viewBox:"0 0 60 60",fill:"none","data-testid":"design-system-productIcon-icon-web_search",className:"text-primary",children:[
|
|
14
|
+
/*#__PURE__*/e.jsx("rect",{x:"6",y:"10",width:"48",height:"40",rx:"6",fill:"white",stroke:"#212121",strokeWidth:"1.4"}),
|
|
15
|
+
/*#__PURE__*/e.jsx("path",{d:"M6 14C6 11.7909 7.79086 10 10 10H50C52.2091 10 54 11.7909 54 14V21H6V14Z",fill:"currentColor",stroke:"#212121",strokeWidth:"1.4"}),
|
|
16
|
+
/*#__PURE__*/e.jsx("circle",{cx:"49",cy:"15.5",r:"1",fill:"white"}),
|
|
17
|
+
/*#__PURE__*/e.jsx("circle",{cx:"45",cy:"15.5",r:"1",fill:"white"}),
|
|
18
|
+
/*#__PURE__*/e.jsx("circle",{cx:"41",cy:"15.5",r:"1",fill:"white"}),
|
|
19
|
+
/*#__PURE__*/e.jsxs("g",{transform:"translate(18.36 22.36)",children:[
|
|
20
|
+
/*#__PURE__*/e.jsx("path",{d:"M11.6551 23.2175C17.6717 23.185 22.5219 18.1179 22.4882 11.8999C22.4546 5.6819 17.5499 0.667605 11.5333 0.700158C5.51668 0.732712 0.666531 5.79979 0.700174 12.0178C0.733817 18.2358 5.63851 23.2501 11.6551 23.2175Z",fill:"white",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
21
|
+
/*#__PURE__*/e.jsx("path",{d:"M18.469 20.6893L21.1584 23.7206",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
22
|
+
/*#__PURE__*/e.jsx("path",{d:"M30.1267 33.1687L29.5455 33.7271C28.896 34.3539 27.8818 34.3083 27.2892 33.636L21.1811 26.9012C20.5886 26.2288 20.6228 25.169 21.2723 24.5537L21.8535 23.9953C22.503 23.3685 23.5172 23.4141 24.1098 24.0864L30.2179 30.8212C30.8104 31.4936 30.7762 32.5534 30.1267 33.1687Z",fill:"white",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})]}),
|
|
23
|
+
/*#__PURE__*/e.jsxs("g",{transform:"translate(24.3 27.3)",children:[
|
|
24
|
+
/*#__PURE__*/e.jsx("path",{d:"M0.7 12.7V12.3465C0.778172 11.2347 1.36146 7.7 5.70301 7.7H5.69699C10.0385 7.7 10.6218 11.2283 10.7 12.3465V12.7",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
25
|
+
/*#__PURE__*/e.jsx("path",{d:"M5.7 5.7C7.08071 5.7 8.2 4.58071 8.2 3.2C8.2 1.81929 7.08071 0.7 5.7 0.7C4.31929 0.7 3.2 1.81929 3.2 3.2C3.2 4.58071 4.31929 5.7 5.7 5.7Z",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})]})]});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime");require("react");var r=require("./Icons/WebDevelopment.js"),s=require("./Icons/WebDomain.js"),o=require("./Icons/WebSecurity.js"),n=require("./Icons/WebPayment.js"),i=require("./Icons/
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime");require("react");var r=require("./Icons/WebDevelopment.js"),s=require("./Icons/WebDomain.js"),o=require("./Icons/WebSecurity.js"),n=require("./Icons/WebPayment.js"),i=require("./Icons/WebSearch.js"),c=require("./Icons/WidePaperStructure.js"),a=require("./Icons/WidePaperPlan.js"),p=require("./Icons/WidePaperPayment.js"),t=require("./Icons/WidePaperConfirm.js"),u=require("./Icons/PaperProject.js"),j=require("./Icons/PaperContract.js"),l=require("./Icons/PaperCertify.js"),_=require("./Icons/PaperSecurity.js"),m=require("./Icons/PaperClock.js"),d=require("./Icons/PaperConfirm.js"),b=require("./Icons/PaperClip.js"),I=require("./Icons/PaperOverlap.js"),x=require("./Icons/PaperHold.js"),q=require("./Icons/MemoWrite.js"),f=require("./Icons/Receipt.js"),P=require("./Icons/DocumentSuccess.js"),h=require("./Icons/DocumentCloud.js"),C=require("./Icons/PersonFreelancer.js"),w=require("./Icons/PersonOffice.js"),g=require("./Icons/PersonSmile.js"),y=require("./Icons/Building.js"),S=require("./Icons/HandShake.js"),k=require("./Icons/HandThumb.js"),W=require("./Icons/Search.js"),v=require("./Icons/SearchConfirm.js"),D=require("./Icons/Design.js"),O=require("./Icons/Repair.js"),B=require("./Icons/CardConfirm.js"),H=require("./Icons/CardWrite.js"),M=require("./Icons/Bookmark.js"),L=require("./Icons/Idea.js"),R=require("./Icons/MobileConfirm.js"),E=require("./Icons/Database.js"),N=require("./Icons/Email.js"),A=require("./Icons/Credit.js"),F=require("./Icons/ShieldConfirm.js"),T=require("./Icons/ShieldWon.js"),z=require("./Icons/Shopping.js"),G=require("./Icons/BubbleStar.js"),J=require("./Icons/BubbleStars.js"),K=require("./Icons/Calendar.js"),Q=require("./Icons/Lock.js"),U=require("./Icons/Logout.js"),V=require("./Icons/Congrats.js"),X=require("./Icons/Discount.js"),Y=require("./Icons/PersonOfficeConfirm.js"),Z=require("./Icons/PaperPaymentConfirm.js"),$=require("./Icons/Won.js"),ee=require("./Icons/Connect.js"),re=require("./Icons/Security.js"),se=require("./Icons/Service.js"),oe=require("./Icons/Download.js"),ne=require("./Icons/Waiting.js"),ie=require("./Icons/Achieve.js"),ce=require("./Icons/ContractPen.js"),ae=require("./Icons/Package.js"),pe=require("./Icons/PaperClipClock.js"),te=require("./Icons/PaperPen.js"),ue=require("./Icons/Public.js"),je=require("./Icons/BubblePerson.js"),le=require("./Icons/Write.js");function _e(e,r,s){return r in e?Object.defineProperty(e,r,{value:s,enumerable:!0,configurable:!0,writable:!0}):e[r]=s,e}function me(e){for(var r=1;r<arguments.length;r++){var s=null!=arguments[r]?arguments[r]:{},o=Object.keys(s);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(s).filter((function(e){return Object.getOwnPropertyDescriptor(s,e).enumerable})))),o.forEach((function(r){_e(e,r,s[r])}))}return e}const de=new Map([["web_development",s=>/*#__PURE__*/e.jsx(r.WebDevelopment,me({},s))],["web_domain",r=>/*#__PURE__*/e.jsx(s.WebDomain,me({},r))],["web_security",r=>/*#__PURE__*/e.jsx(o.WebSecurity,me({},r))],["web_payment",r=>/*#__PURE__*/e.jsx(n.WebPayment,me({},r))],["web_search",r=>/*#__PURE__*/e.jsx(i.WebSearch,me({},r))],["wide_paper_structure",r=>/*#__PURE__*/e.jsx(c.WidePaperStructure,me({},r))],["wide_paper_plan",r=>/*#__PURE__*/e.jsx(a.WidePaperPlan,me({},r))],["wide_paper_payment",r=>/*#__PURE__*/e.jsx(p.WidePaperPayment,me({},r))],["wide_paper_confirm",r=>/*#__PURE__*/e.jsx(t.WidePaperConfirm,me({},r))],["paper_project",r=>/*#__PURE__*/e.jsx(u.PaperProject,me({},r))],["paper_contract",r=>/*#__PURE__*/e.jsx(j.PaperContract,me({},r))],["paper_certify",r=>/*#__PURE__*/e.jsx(l.PaperCertify,me({},r))],["paper_security",r=>/*#__PURE__*/e.jsx(_.PaperSecurity,me({},r))],["paper_clock",r=>/*#__PURE__*/e.jsx(m.PaperClock,me({},r))],["paper_confirm",r=>/*#__PURE__*/e.jsx(d.PaperConfirm,me({},r))],["paper_clip",r=>/*#__PURE__*/e.jsx(b.PaperClip,me({},r))],["paper_overlap",r=>/*#__PURE__*/e.jsx(I.PaperOverlap,me({},r))],["paper_hold",r=>/*#__PURE__*/e.jsx(x.PaperHold,me({},r))],["memo_write",r=>/*#__PURE__*/e.jsx(q.MemoWrite,me({},r))],["receipt",r=>/*#__PURE__*/e.jsx(f.Receipt,me({},r))],["document_success",r=>/*#__PURE__*/e.jsx(P.DocumentSuccess,me({},r))],["document_cloud",r=>/*#__PURE__*/e.jsx(h.DocumentCloud,me({},r))],["person_freelancer",r=>/*#__PURE__*/e.jsx(C.PersonFreelancer,me({},r))],["person_office",r=>/*#__PURE__*/e.jsx(w.PersonOffice,me({},r))],["person_smile",r=>/*#__PURE__*/e.jsx(g.PersonSmile,me({},r))],["building",r=>/*#__PURE__*/e.jsx(y.Building,me({},r))],["hand_shake",r=>/*#__PURE__*/e.jsx(S.HandShake,me({},r))],["hand_thumb",r=>/*#__PURE__*/e.jsx(k.HandThumb,me({},r))],["search",r=>/*#__PURE__*/e.jsx(W.Search,me({},r))],["search_confirm",r=>/*#__PURE__*/e.jsx(v.SearchConfirm,me({},r))],["design",r=>/*#__PURE__*/e.jsx(D.Design,me({},r))],["repair",r=>/*#__PURE__*/e.jsx(O.Repair,me({},r))],["card_confirm",r=>/*#__PURE__*/e.jsx(B.CardConfirm,me({},r))],["card_write",r=>/*#__PURE__*/e.jsx(H.CardWrite,me({},r))],["bookmark",r=>/*#__PURE__*/e.jsx(M.Bookmark,me({},r))],["idea",r=>/*#__PURE__*/e.jsx(L.Idea,me({},r))],["mobile_confirm",r=>/*#__PURE__*/e.jsx(R.MobileConfirm,me({},r))],["database",r=>/*#__PURE__*/e.jsx(E.Database,me({},r))],["email",r=>/*#__PURE__*/e.jsx(N.Email,me({},r))],["credit",r=>/*#__PURE__*/e.jsx(A.Credit,me({},r))],["shield_confirm",r=>/*#__PURE__*/e.jsx(F.ShieldConfirm,me({},r))],["shield_won",r=>/*#__PURE__*/e.jsx(T.ShieldWon,me({},r))],["shopping",r=>/*#__PURE__*/e.jsx(z.Shopping,me({},r))],["bubble_star",r=>/*#__PURE__*/e.jsx(G.BubbleStar,me({},r))],["bubble_stars",r=>/*#__PURE__*/e.jsx(J.BubbleStars,me({},r))],["calendar",r=>/*#__PURE__*/e.jsx(K.Calendar,me({},r))],["lock",r=>/*#__PURE__*/e.jsx(Q.Lock,me({},r))],["logout",r=>/*#__PURE__*/e.jsx(U.Logout,me({},r))],["congrats",r=>/*#__PURE__*/e.jsx(V.Congrats,me({},r))],["discount",r=>/*#__PURE__*/e.jsx(X.Discount,me({},r))],["person_office_confirm",()=>/*#__PURE__*/e.jsx(Y.PersonOfficeConfirm,{})],["paper_payment_confirm",()=>/*#__PURE__*/e.jsx(Z.PaperPaymentConfirm,{})],["won",r=>/*#__PURE__*/e.jsx($.Won,me({},r))],["connect",()=>/*#__PURE__*/e.jsx(ee.Connect,{})],["security",()=>/*#__PURE__*/e.jsx(re.Security,{})],["service",()=>/*#__PURE__*/e.jsx(se.Service,{})],["download",()=>/*#__PURE__*/e.jsx(oe.Download,{})],["waiting",()=>/*#__PURE__*/e.jsx(ne.Waiting,{})],["achieve",r=>/*#__PURE__*/e.jsx(ie.Achieve,me({},r))],["contract_pen",r=>/*#__PURE__*/e.jsx(ce.ContractPen,me({},r))],["package",r=>/*#__PURE__*/e.jsx(ae.Package,me({},r))],["paper_clip_clock",r=>/*#__PURE__*/e.jsx(pe.PaperClipClock,me({},r))],["paper_pen",r=>/*#__PURE__*/e.jsx(te.PaperPen,me({},r))],["public",r=>/*#__PURE__*/e.jsx(ue.Public,me({},r))],["bubble_person",()=>/*#__PURE__*/e.jsx(je.BubblePerson,{})],["write",()=>/*#__PURE__*/e.jsx(le.Write,{})]]);exports.LargeProductIconNames=["web_development","web_domain","web_security","web_payment","web_search","wide_paper_structure","wide_paper_plan","wide_paper_payment","wide_paper_confirm","paper_project","paper_contract","paper_certify","paper_security","paper_clock","paper_confirm","paper_clip","paper_clip_clock","paper_overlap","paper_hold","memo_write","receipt","document_success","document_cloud","person_freelancer","person_office","person_smile","building","hand_shake","hand_thumb","search","search_confirm","design","repair","card_confirm","card_write","bookmark","idea","mobile_confirm","database","email","credit","shield_confirm","shield_won","shopping","bubble_star","bubble_stars","calendar","public","lock","logout","congrats","discount","achieve"],exports.MediumProductIconNames=["person_smile","lock","logout","contract_pen","paper_pen","paper_hold","person_office_confirm","paper_payment_confirm","search","search_confirm","won","connect","security","service","package","bubble_person","write"],exports.SmallProductIconNames=["bookmark","download","waiting","search","contract_pen","paper_pen","paper_confirm","won","package"],exports.productIcons=de;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use client";"use strict";var e=require("react/jsx-runtime")
|
|
2
|
-
return e.jsxs("div",{"data-testid":"design-system--textFieldDropdown",ref:
|
|
3
|
-
/*#__PURE__*/e.jsx(
|
|
1
|
+
"use client";"use strict";var e=require("react/jsx-runtime"),s=require("tailwind-merge");require("react");var l=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var r=require("../List/List.js"),t=require("../SupportTextContainer/SupportTextContainer.js"),i=require("../../../hooks/useDropdown.js"),o=require("./TextFieldDropdown.parts.js");exports.TextFieldDropdown=({selectedItem:a,items:n,onItemClick:d,placeholder:u,disabled:c,isError:p,errorMessage:x,supportMessage:m,className:g,variant:j="default",label:v})=>{const{isListOpen:w,focusedIndex:I,ref:h,handleItemClick:k,toggleListOpen:q,handleKeyDown:L}=i.useDropdown({items:n,onItemClick:d,disabled:c}),b=!!m||!!x;/*#__PURE__*/
|
|
2
|
+
return e.jsxs("div",{"data-testid":"design-system--textFieldDropdown",ref:h,className:"relative flex w-full flex-col gap-2 outline-hidden",onKeyDown:L,tabIndex:0,children:[
|
|
3
|
+
/*#__PURE__*/e.jsx(o.SelectBox,{placeholder:u,value:null==a?void 0:a.value,leadingIcon:null==a?void 0:a.leadingIcon,disabled:c,isListOpen:w,onClick:q,error:p,className:g,variant:j,label:v}),b&&/*#__PURE__*/e.jsx(t.SupportTextContainer,{errorMessage:x,supportMessage:m}),w&&/*#__PURE__*/e.jsx(l.Box,{className:s.twJoin("absolute z-40 w-full","label"===j?"top-[72px]":"top-[54px]"),children:/*#__PURE__*/e.jsx(r.List.Root,{children:n.map(((s,l)=>/*#__PURE__*/e.jsx(r.List.Item,{text:s.value,leadingIcon:s.leadingIcon,onClick:()=>k(s),selected:s.key===(null==a?void 0:a.key),isFocused:l===I},s.key)))})})]})};
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),
|
|
2
|
-
|
|
3
|
-
/*#__PURE__*/e.jsx("div",{className:
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge");require("../../DataDisplays/Avatar/Avatar.js");var a=require("../../Base/Typography/Typography.js"),s=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js"),require("react");var r=require("../../DataDisplays/SystemIcon/SystemIcon.js");require("../../DataDisplays/SystemIcon/SystemIcon.constants.js"),require("../../DataDisplays/Accordion/Accordion.js");var i=require("../TextFieldContainer/TextFieldContainer.js");const l=({label:r,value:i,placeholder:l,isFocused:o,isError:n,disabled:d})=>{const c=!!l;/*#__PURE__*/
|
|
2
|
+
return e.jsxs(s.Box,{className:"relative flex h-[42px] w-full flex-col gap-0.5 py-px","data-testid":"design-system--selectBox-label",children:[
|
|
3
|
+
/*#__PURE__*/e.jsx("div",{className:t.twMerge("tracking-default absolute",d?"text-w-gray-400":n?"text-w-red-500":o?"text-primary-500":"text-w-gray-400 group-hover:text-primary-500",c?"typo-caption11":o||i?"scale-[0.6875] -translate-y-0.5 origin-top-left transition-transform duration-300":"typo-body16 transition-transform duration-300 translate-y-2 origin-top-left"),"data-testid":"design-system--label-text",children:r}),
|
|
4
|
+
/*#__PURE__*/e.jsx(a.Typography,{"data-testid":"design-system--selectBox-text",variant:"body16",className:t.twJoin(d?"text-w-gray-300":i?"text-w-gray-600":"text-w-gray-300","w-full pt-[14px]"),children:i||(c?l:"")})]})};exports.SelectBox=({placeholder:s="",value:o="",isListOpen:n,disabled:d=!1,error:c,onClick:y,className:x,variant:u="default",label:p})=>/*#__PURE__*/e.jsxs(i.TextFieldContainer,{isDisabled:d,isFocused:n,isError:c,testId:"design-system--selectBox",onClick:y,className:x,children:["label"===u?/*#__PURE__*/e.jsx(l,{label:p,value:o,placeholder:s,isFocused:n,isError:c,disabled:d}):/*#__PURE__*/e.jsx(a.Typography,{"data-testid":"design-system--selectBox-text",variant:"body16",className:t.twJoin(d&&o?"text-w-gray-300":d&&!o?"text-w-gray-200":o?"text-w-gray-600":"text-w-gray-300","w-full"),children:o||s}),
|
|
5
|
+
/*#__PURE__*/e.jsx("div",{className:t.twJoin("transition-transform duration-300",n&&"rotate-180"),children:/*#__PURE__*/e.jsx(r.SystemIcon,{name:"medium_arrow_down",className:d?"text-w-gray-300":"text-w-gray-600",testId:"design-system--selectBox-icon"})})]});
|