@wishket/design-system 1.16.10 → 1.16.11
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.
|
@@ -9,8 +9,9 @@ export interface MenuProps {
|
|
|
9
9
|
isSelected?: boolean;
|
|
10
10
|
leadingIcon?: MediumSystemIconName;
|
|
11
11
|
iconButtonName?: SmallSystemIconName;
|
|
12
|
-
onClick
|
|
12
|
+
onClick?: () => void;
|
|
13
13
|
onOptionClick?: () => void;
|
|
14
|
+
href?: string;
|
|
14
15
|
children?: ReactNode;
|
|
15
16
|
items?: IconButtonDropdownItem[];
|
|
16
17
|
selectedItem?: IconButtonDropdownItem;
|
|
@@ -29,6 +30,7 @@ export interface MenuProps {
|
|
|
29
30
|
* @param {SystemIconName} [props.iconButtonName] - IconButtonDropdown 아이콘(small 사이즈)
|
|
30
31
|
* @param {() => void} props.onClick - 메뉴 클릭 시 실행될 함수
|
|
31
32
|
* @param {() => void} [props.onOptionClick] - 후행 아이콘 클릭 시 실행될 함수 (IconButtonDropdown이 아닌 IconButton으로만 사용 시 필요)
|
|
33
|
+
* @param {string} [props.href] - 메뉴 링크 주소
|
|
32
34
|
* @param {ReactNode} [props.children] - 메뉴 내부에 표시될 자식 요소 (IconButtonDropdown 컴포넌트 사용 시 필요, trailingIcon과 함께 사용하지 않도록 주의 필요)
|
|
33
35
|
* @param {Item[]} [props.items] - IconButtonDropdown 컴포넌트 사용 시 필요 {key: number, value: string}[]
|
|
34
36
|
* @param {Item} [props.selectedItem] - IconButtonDropdown 컴포넌트 사용 시 필요 {key: number, value: string}
|
|
@@ -69,6 +71,11 @@ export interface MenuProps {
|
|
|
69
71
|
* onClick={() => console.log('메뉴 클릭')}
|
|
70
72
|
* onOptionClick={() => console.log('옵션 클릭', '모달 오픈')}
|
|
71
73
|
* />
|
|
74
|
+
* // 링크로 사용해야하는 메뉴
|
|
75
|
+
* <Menu
|
|
76
|
+
* href="/test"
|
|
77
|
+
* name="테스트 메뉴"
|
|
78
|
+
* />
|
|
72
79
|
*/
|
|
73
|
-
declare const Menu: ({ type, variant, name, isSelected, badgeCount, leadingIcon, iconButtonName, onClick, onOptionClick, items, selectedItem, onItemClick, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
80
|
+
declare const Menu: ({ type, variant, name, isSelected, badgeCount, leadingIcon, iconButtonName, onClick, onOptionClick, href, items, selectedItem, onItemClick, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
74
81
|
export { Menu };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsxs as t,jsx as
|
|
1
|
+
import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import{twJoin as s,twMerge as i}from"tailwind-merge";import n from"next/link";import"react";import{SystemIcon as r}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{Typography as a}from"../../Base/Typography/Typography.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{CountBadge as m}from"../../DataDisplays/CountBadge/CountBadge.js";import"@wishket/yogokit";import"../../Inputs/AutoCompleteList/AutoCompleteList.parts.js";import"../../Inputs/Input/Input.js";import"../../Inputs/Input/PasswordInput.js";import"../../Inputs/Input/LableInput.js";import"../../Inputs/Input/InputTypeSelector.js";import"../../Inputs/Calendar/Calendar.utils.js";import"../../Inputs/Checkbox/Checkbox.js";import"../../Inputs/ChoiceChip/ChoiceChip.js";import{IconButton as p}from"../../Inputs/IconButton/IconButton.js";import"../../Inputs/Radio/Radio.js";import"../../Inputs/TextField/TextField.js";import"../../Inputs/CommentArea/CommentArea.js";import{IconButtonDropdown as l}from"../../Inputs/IconButtonDropdown/IconButtonDropdown.js";import"../../Inputs/FilterChip/FilterChip.js";
|
|
2
2
|
/**
|
|
3
3
|
* 메뉴 컴포넌트는 네비게이션에서 사용되는 클릭 가능한 항목을 표시합니다.
|
|
4
4
|
*
|
|
@@ -12,6 +12,7 @@ import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twJoin as o,twMerge as
|
|
|
12
12
|
* @param {SystemIconName} [props.iconButtonName] - IconButtonDropdown 아이콘(small 사이즈)
|
|
13
13
|
* @param {() => void} props.onClick - 메뉴 클릭 시 실행될 함수
|
|
14
14
|
* @param {() => void} [props.onOptionClick] - 후행 아이콘 클릭 시 실행될 함수 (IconButtonDropdown이 아닌 IconButton으로만 사용 시 필요)
|
|
15
|
+
* @param {string} [props.href] - 메뉴 링크 주소
|
|
15
16
|
* @param {ReactNode} [props.children] - 메뉴 내부에 표시될 자식 요소 (IconButtonDropdown 컴포넌트 사용 시 필요, trailingIcon과 함께 사용하지 않도록 주의 필요)
|
|
16
17
|
* @param {Item[]} [props.items] - IconButtonDropdown 컴포넌트 사용 시 필요 {key: number, value: string}[]
|
|
17
18
|
* @param {Item} [props.selectedItem] - IconButtonDropdown 컴포넌트 사용 시 필요 {key: number, value: string}
|
|
@@ -52,6 +53,10 @@ import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twJoin as o,twMerge as
|
|
|
52
53
|
* onClick={() => console.log('메뉴 클릭')}
|
|
53
54
|
* onOptionClick={() => console.log('옵션 클릭', '모달 오픈')}
|
|
54
55
|
* />
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
56
|
+
* // 링크로 사용해야하는 메뉴
|
|
57
|
+
* <Menu
|
|
58
|
+
* href="/test"
|
|
59
|
+
* name="테스트 메뉴"
|
|
60
|
+
* />
|
|
61
|
+
*/const u=({type:u="main",variant:c="white",name:d,isSelected:y=!1,badgeCount:I,leadingIcon:g,iconButtonName:h,onClick:C,onOptionClick:j,href:w,items:x,selectedItem:b,onItemClick:f})=>{const B=!!(h&&x&&f&&b),k=!!h&&!!j,v=(t,e,o)=>{const n="sub"===t?"pl-12":"",r={white:s("bg-w-white hover:bg-w-gray-50",o&&"bg-primary-10 text-primary hover:bg-primary-10"),gray:s("bg-w-gray-50 hover:bg-w-gray-100",o&&"bg-w-gray-100 hover:bg-w-gray-100")};return i("flex w-full cursor-pointer items-center gap-2 rounded-xl px-4 py-3 text-w-gray-900 text-left",n,r[e])},D=/*#__PURE__*/t(e,{children:[g&&/*#__PURE__*/o(r,{testId:"design-system-menu-leading-icon",name:g,className:s("white"===c&&y&&"text-primary")}),
|
|
62
|
+
/*#__PURE__*/o(a,{"data-testid":"design-system-menu-name",variant:"body1",className:"w-full select-none",children:d}),I&&/*#__PURE__*/o(m,{variant:((t,e)=>"white"!==t?"white_gray":e?"primary":"gray")(c,y),text:I,className:"relative",showZero:!0}),B&&/*#__PURE__*/o(l,{size:"sm",icon:h,items:x,selectedItem:b,onItemClick:f}),k&&/*#__PURE__*/o(p,{size:"sm",className:"shrink-0",onClick:t=>{t.stopPropagation(),j()},children:/*#__PURE__*/o(r,{name:h})})]});return w?/*#__PURE__*/o(n,{href:w,"data-testid":"design-system-menu",className:v(u,c,y),children:D}):/*#__PURE__*/o("button",{"data-testid":"design-system-menu",className:v(u,c,y),onClick:C,children:D})};export{u as Menu};
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge");require("react");var
|
|
2
|
-
|
|
3
|
-
/*#__PURE__*/e.jsx(s.Typography,{"data-testid":"design-system-menu-name",variant:"body1",className:"w-full select-none",children:l}),m&&/*#__PURE__*/e.jsx(i.CountBadge,{variant:((e,t)=>"white"!==e?"white_gray":t?"primary":"gray")(p,c),text:m,className:"relative",showZero:!0}),q&&/*#__PURE__*/e.jsx(o.IconButtonDropdown,{size:"sm",icon:y,items:j,selectedItem:h,onItemClick:w}),C&&/*#__PURE__*/e.jsx(a.IconButton,{size:"sm",className:"shrink-0",onClick:e=>{e.stopPropagation(),g()},children:/*#__PURE__*/e.jsx(r.SystemIcon,{name:y})})]})};
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),r=require("next/link");require("react");var s=require("../../DataDisplays/SystemIcon/SystemIcon.js");require("../../DataDisplays/SystemIcon/SystemIcon.constants.js");var n=require("../../Base/Typography/Typography.js");require("../../Base/Layouts/Box/Box.js"),require("../../Base/Layouts/FullBleed/FullBleed.js");var i=require("../../DataDisplays/CountBadge/CountBadge.js");require("@wishket/yogokit"),require("../../Inputs/AutoCompleteList/AutoCompleteList.parts.js"),require("../../Inputs/Input/Input.js"),require("../../Inputs/Input/PasswordInput.js"),require("../../Inputs/Input/LableInput.js"),require("../../Inputs/Input/InputTypeSelector.js"),require("../../Inputs/Calendar/Calendar.utils.js"),require("../../Inputs/Checkbox/Checkbox.js"),require("../../Inputs/ChoiceChip/ChoiceChip.js");var a=require("../../Inputs/IconButton/IconButton.js");require("../../Inputs/Radio/Radio.js"),require("../../Inputs/TextField/TextField.js"),require("../../Inputs/CommentArea/CommentArea.js");var o=require("../../Inputs/IconButtonDropdown/IconButtonDropdown.js");require("../../Inputs/FilterChip/FilterChip.js");exports.Menu=({type:u="main",variant:p="white",name:l,isSelected:c=!1,badgeCount:m,leadingIcon:d,iconButtonName:y,onClick:I,onOptionClick:g,href:h,items:j,selectedItem:w,onItemClick:x})=>{const q=!!(y&&j&&x&&w),C=!!y&&!!g,B=(e,r,s)=>{const n="sub"===e?"pl-12":"",i={white:t.twJoin("bg-w-white hover:bg-w-gray-50",s&&"bg-primary-10 text-primary hover:bg-primary-10"),gray:t.twJoin("bg-w-gray-50 hover:bg-w-gray-100",s&&"bg-w-gray-100 hover:bg-w-gray-100")};return t.twMerge("flex w-full cursor-pointer items-center gap-2 rounded-xl px-4 py-3 text-w-gray-900 text-left",n,i[r])},b=/*#__PURE__*/e.jsxs(e.Fragment,{children:[d&&/*#__PURE__*/e.jsx(s.SystemIcon,{testId:"design-system-menu-leading-icon",name:d,className:t.twJoin("white"===p&&c&&"text-primary")}),
|
|
2
|
+
/*#__PURE__*/e.jsx(n.Typography,{"data-testid":"design-system-menu-name",variant:"body1",className:"w-full select-none",children:l}),m&&/*#__PURE__*/e.jsx(i.CountBadge,{variant:((e,t)=>"white"!==e?"white_gray":t?"primary":"gray")(p,c),text:m,className:"relative",showZero:!0}),q&&/*#__PURE__*/e.jsx(o.IconButtonDropdown,{size:"sm",icon:y,items:j,selectedItem:w,onItemClick:x}),C&&/*#__PURE__*/e.jsx(a.IconButton,{size:"sm",className:"shrink-0",onClick:e=>{e.stopPropagation(),g()},children:/*#__PURE__*/e.jsx(s.SystemIcon,{name:y})})]});return h?/*#__PURE__*/e.jsx(r,{href:h,"data-testid":"design-system-menu",className:B(u,p,c),children:b}):/*#__PURE__*/e.jsx("button",{"data-testid":"design-system-menu",className:B(u,p,c),onClick:I,children:b})};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wishket/design-system",
|
|
3
|
-
"version": "1.16.
|
|
3
|
+
"version": "1.16.11",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Wishket Design System",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@savvywombat/tailwindcss-grid-areas": "^4.0.0",
|
|
46
|
-
"@wishket/yogokit": "^0.2.
|
|
46
|
+
"@wishket/yogokit": "^0.2.2",
|
|
47
47
|
"next": "15.3.3",
|
|
48
48
|
"react": "19.1.0",
|
|
49
49
|
"react-dom": "19.1.0",
|