@wishket/design-system 1.6.2 → 1.8.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/Base/Layouts/FullBleed/FullBleed.d.ts +2 -0
- package/dist/Components/Base/Layouts/FullBleed/FullBleed.js +1 -1
- package/dist/Components/DataDisplays/SystemIcon/Icons/Small/SmallCat.js +1 -1
- package/dist/Components/DataDisplays/SystemIcon/Icons/Small/SmallPlay.js +1 -1
- package/dist/Components/Feedbacks/MessageBar/MessageBar.js +1 -1
- package/dist/Components/Inputs/Checkbox/Checkbox.parts.js +1 -1
- package/dist/Components/Inputs/Checkbox/Checkbox.types.d.ts +1 -0
- package/dist/Components/Inputs/CheckboxListItem/CheckboxListItem.d.ts +4 -2
- package/dist/Components/Inputs/CheckboxListItem/CheckboxListItem.js +1 -1
- package/dist/Components/Inputs/CommentArea/CommentArea.d.ts +1 -1
- package/dist/Components/Inputs/CommentArea/CommentArea.js +1 -1
- package/dist/Components/Inputs/FilterList/FilterList.d.ts +6 -3
- package/dist/Components/Inputs/SearchField/SearchField.js +1 -1
- package/dist/Components/Inputs/SegmentedControl/SegmentedControl.d.ts +4 -1
- package/dist/Components/Inputs/SegmentedControl/SegmentedControl.js +1 -1
- package/dist/Components/Inputs/TextFieldContainer/TextFieldContainer.d.ts +2 -1
- package/dist/Components/Inputs/TextFieldContainer/TextFieldContainer.js +1 -1
- package/dist/Components/Navigations/BoxTab/BoxTab.parts.js +1 -1
- package/dist/Components/Navigations/Menu/Menu.d.ts +16 -7
- package/dist/Components/Navigations/Menu/Menu.js +1 -1
- package/dist/config/tailwind-plugins.js +1 -0
- package/dist/config/tailwind.config.js +2 -2
- package/package.json +1 -1
|
@@ -3,6 +3,7 @@ interface FullBleedProps extends ComponentPropsWithRef<'div'> {
|
|
|
3
3
|
className?: string;
|
|
4
4
|
insideContainerClassName?: string;
|
|
5
5
|
maxWidth?: string;
|
|
6
|
+
paddingAdjustment?: string | number;
|
|
6
7
|
}
|
|
7
8
|
/**
|
|
8
9
|
* 화면 전체 너비를 활용하는 레이아웃 컴포넌트
|
|
@@ -11,6 +12,7 @@ interface FullBleedProps extends ComponentPropsWithRef<'div'> {
|
|
|
11
12
|
* @param {string} [props.maxWidth] - 최대 너비 설정
|
|
12
13
|
* @param {string} [props.className] - 외부 컨테이너 클래스
|
|
13
14
|
* @param {string} [props.insideContainerClassName] - 내부 컨테이너 클래스
|
|
15
|
+
* @param {string | number} [props.paddingAdjustment] - 패딩 보정값(단위 : px)
|
|
14
16
|
*/
|
|
15
17
|
declare const FullBleed: import("react").ForwardRefExoticComponent<Omit<FullBleedProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
16
18
|
export default FullBleed;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"use strict";var e=require("../../../../_virtual/_tslib.js"),a=require("react/jsx-runtime"),t=require("react"),d=require("tailwind-merge"),i=require("./FullBleed.utils.js"),l=t.forwardRef(function(l,
|
|
2
|
+
"use strict";var e=require("../../../../_virtual/_tslib.js"),a=require("react/jsx-runtime"),t=require("react"),d=require("tailwind-merge"),i=require("./FullBleed.utils.js"),l=t.forwardRef(function(l,c){var n=l.className,r=l.insideContainerClassName,s=l.maxWidth,s=void 0===s?"1200px":s,o=l.paddingAdjustment,o=void 0===o?8.5:o,m=l.children,l=e.__rest(l,["className","insideContainerClassName","maxWidth","paddingAdjustment","children"]),p=t.useState(function(){return i.calculateScrollbarWidth()}),x=p[0],g=p[1],p=i.getPaddingFromClassName(r,"mobile"),u=i.getPaddingFromClassName(r,"tablet"),f=i.getPaddingFromClassName(r,"desktop"),u=(t.useEffect(function(){g(i.calculateScrollbarWidth())},[]),{"--dynamic-padding-left-tablet":"max(".concat(u.left||u.x,"px, ").concat(p.left||p.x,"px)"),"--dynamic-padding-right-tablet":"max(".concat(u.right||u.x,"px, ").concat(p.right||p.x,"px)"),"--dynamic-padding-left-desktop":"calc(max(calc((100dvw - ".concat(s,")/2 + ").concat(p.left||p.x,"px + ").concat(o,"px), ").concat(f.x,"px))"),"--dynamic-padding-right-desktop":"calc(max(calc((100dvw - ".concat(s,")/2 + ").concat(p.right||p.x,"px + ").concat(o,"px), ").concat(f.x,"px))")}),s={"--dynamic-bleed-width":"calc(100dvw - ".concat(x,"px)")};return a.jsx("div",{"data-testid":"design-system-full-bleed",children:a.jsx("div",{"data-testid":"design-system-full-bleed--container",className:d.twMerge("relative left-1/2 top-0 h-full w-[var(--dynamic-bleed-width)] -translate-x-1/2",n),style:s,children:a.jsx("div",e.__assign({"data-testid":"design-system-full-bleed--container-inside",className:d.twMerge("flex w-full overflow-x-auto px-5 scrollbar-hide","tablet:pl-[var(--dynamic-padding-left-tablet)] tablet:pr-[var(--dynamic-padding-right-tablet)]","desktop:pl-[var(--dynamic-padding-left-desktop)] desktop:pr-[var(--dynamic-padding-right-desktop)]",r),style:u,ref:c},l,{children:m}))})})});l.displayName="FullBleed",module.exports=l;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var C=require("react/jsx-runtime");module.exports=function(l){var r=l.testId,l=l.className;return C.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 14 14",fill:"none","data-testid":r,className:l,children:[C.jsxs("g",{clipPath:"url(#clip0_9258_9310)",children:[C.jsx("path",{d:"M10.7487 9.0463H10.7507L10.7406 9.03213C10.6717 8.9248 10.5948 8.82557 10.5097 8.73444L8.73979 6.44205C8.34895 5.95603 7.75155 5.64417 7.07923 5.64417C7.0529 5.64417 7.02657 5.64619 7.00025 5.64822C6.97392 5.64822 6.94759 5.64417 6.92127 5.64417C6.24894 5.64417 5.65154 5.95603 5.2607 6.44205L3.49078 8.73444C3.40573 8.82759 3.32877 8.92682 3.25992 9.03213L3.24979 9.0463C3.24979 9.0463 3.24979 9.0463 3.25182 9.0463C3.04729 9.37437 2.92578 9.75913 2.92578 10.1743C2.92578 11.3508 3.8796 12.3047 5.05617 12.3047C5.30728 12.3047 5.54624 12.2581 5.77102 12.1791V12.1811C5.77102 12.1811 6.28134 12.0009 7.00025 12.013C7.71915 12.0009 8.22947 12.1811 8.22947 12.1811C8.22947 12.1811 8.22947 12.1811 8.22947 12.1791C8.45223 12.2581 8.69322 12.3047 8.94433 12.3047C10.1209 12.3047 11.0747 11.3508 11.0747 10.1743C11.0747 9.75913 10.9532 9.37234 10.7487 9.0463Z",fill:"currentColor"}),C.jsx("path",{d:"M5.66078 5.15935C6.4565 4.94002 6.86956 3.92049 6.58336 2.88218C6.29716 1.84386 5.4201 1.17993 4.62438 1.39926C3.82865 1.61859 3.4156 2.63811 3.7018 3.67643C3.98799 4.71475 4.86506 5.37867 5.66078 5.15935Z",fill:"currentColor"}),C.jsx("path",{d:"M3.24444 7.64064C3.95925 7.22795 4.10217 6.13725 3.56365 5.2045C3.02513 4.27176 2.0091 3.85018 1.29428 4.26288C0.579471 4.67557 0.436557 5.76627 0.975077 6.69902C1.5136 7.63176 2.52963 8.05334 3.24444 7.64064Z",fill:"currentColor"}),C.jsx("path",{d:"M10.2997 3.67428C10.5859 2.63596 10.1728 1.61644 9.37709 1.39711C8.58137 1.17778 7.7043 1.84171 7.41811 2.88003C7.13191 3.91835 7.54496 4.93787 8.34068 5.1572C9.13641 5.37653 10.0135 4.7126 10.2997 3.67428Z",fill:"currentColor"}),C.jsx("path",{d:"M13.0248 6.69747C13.5633 5.76473 13.4204 4.67403 12.7056 4.26134C11.9908 3.84864 10.9748 4.27022 10.4363 5.20296C9.89774 6.13571 10.0407 7.2264 10.7555 7.6391C11.4703 8.0518 12.4863 7.63022 13.0248 6.69747Z",fill:"currentColor"})]}),C.jsx("defs",{children:C.jsx("clipPath",{id:"clip0_9258_9310",children:C.jsx("rect",{width:"14",height:"14",fill:"white"})})})]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var t=require("react/jsx-runtime");module.exports=function(e){var s=e.testId,
|
|
1
|
+
"use strict";var t=require("react/jsx-runtime");module.exports=function(e){var s=e.testId,i=e.className,e=e.solid;return t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 14 14",fill:"none","data-testid":s,className:i,children:e?t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:t.jsx("path",{d:"M6.3496 1.69167L11.1471 4.95493C11.1753 4.97414 11.2018 4.99514 11.2264 5.0177C11.8469 5.48124 12.2 6.22679 12.2 7.00706C12.2 7.82411 11.8128 8.60309 11.1369 9.06006L6.33427 12.3177C5.96687 12.564 5.53886 12.7 5.10005 12.7C4.71017 12.7 4.32244 12.5901 3.97341 12.3861L3.96664 12.3821C3.22634 11.9381 2.80005 11.138 2.80005 10.2629V3.74208C2.80005 2.87815 3.22472 2.06797 3.96667 1.62297C4.70867 1.17794 5.61812 1.18551 6.3496 1.69167Z",fill:"currentColor"})}):t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:t.jsx("path",{d:"M10.7533 5.5337L5.95333 2.26872C5.45556 1.92312 4.84222 1.91403 4.32667 2.22325C3.81111 2.53246 3.5 3.10543 3.5 3.74205V10.2629C3.5 10.9086 3.81111 11.4725 4.32667 11.7817C4.57556 11.9272 4.84222 12 5.1 12C5.39333 12 5.68667 11.9091 5.94444 11.7363L10.7444 8.48037C11.2156 8.16206 11.5 7.60728 11.5 7.00703C11.5 6.40679 11.2156 5.85201 10.7444 5.5337H10.7533Z",stroke:"currentColor",strokeWidth:"1.4",strokeMiterlimit:"10",strokeLinejoin:"round"})})})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),s=require("tailwind-merge"),r=require("../../Base/Typography/Typography.js"),t=require("../../Base/Layouts/Box/Box.js"),i=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../../_virtual/_tslib.js"),require("react"),require("@wishket/yogokit"),require("../../DataDisplays/Avatar/Avatar.js"),require("../../DataDisplays/Label/Label.js"),require("../../DataDisplays/ProductIcon/ProductIcon.js")),a=(require("../../DataDisplays/SystemIcon/Icons/Medium/MediumBell.js"),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/Button/Button.js"));require("../../Inputs/Calendar/Calendar.utils.js"),require("../../Inputs/Checkbox/Checkbox.js"),require("../../Inputs/ChoiceChip/ChoiceChip.js"),require("../../Inputs/Radio/Radio.js"),require("../../Inputs/TextField/TextField.js"),require("../../Inputs/CommentArea/CommentArea.js"),require("../../Inputs/MultiColumnList/MultiColumnList.parts.js"),require("../../Inputs/FilterChip/FilterChip.js"),module.exports=function(u){var n=u.variant,n=void 0===n?"primary":n,l=u.icon,o=u.title,p=u.text,d=u.buttonName,u=u.onClick;return e.jsxs(t,{"data-testid":"design-system-message-bar",className:s.twMerge("flex w-full items-center gap-5 rounded-2xl border px-8 py-5","primary"===n&&"border-primary-100 bg-primary-10","white"===n&&"border-w-gray-200 bg-white"),children:[e.jsx(t,{className:"shrink-0","data-testid":"design-system-message-bar--icon",children:e.jsx(i,{name:l,size:"medium"})}),e.jsxs(t,{className:"flex w-full flex-col gap-1",children:[o&&e.jsx(r,{variant:"subTitle2",className:"font-medium text-w-gray-900","data-testid":"design-system-message-bar--title",children:o}),e.jsx(r,{variant:"
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),s=require("tailwind-merge"),r=require("../../Base/Typography/Typography.js"),t=require("../../Base/Layouts/Box/Box.js"),i=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../../_virtual/_tslib.js"),require("react"),require("@wishket/yogokit"),require("../../DataDisplays/Avatar/Avatar.js"),require("../../DataDisplays/Label/Label.js"),require("../../DataDisplays/ProductIcon/ProductIcon.js")),a=(require("../../DataDisplays/SystemIcon/Icons/Medium/MediumBell.js"),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/Button/Button.js"));require("../../Inputs/Calendar/Calendar.utils.js"),require("../../Inputs/Checkbox/Checkbox.js"),require("../../Inputs/ChoiceChip/ChoiceChip.js"),require("../../Inputs/Radio/Radio.js"),require("../../Inputs/TextField/TextField.js"),require("../../Inputs/CommentArea/CommentArea.js"),require("../../Inputs/MultiColumnList/MultiColumnList.parts.js"),require("../../Inputs/FilterChip/FilterChip.js"),module.exports=function(u){var n=u.variant,n=void 0===n?"primary":n,l=u.icon,o=u.title,p=u.text,d=u.buttonName,u=u.onClick;return e.jsxs(t,{"data-testid":"design-system-message-bar",className:s.twMerge("flex w-full items-center gap-5 rounded-2xl border px-8 py-5","primary"===n&&"border-primary-100 bg-primary-10","white"===n&&"border-w-gray-200 bg-white"),children:[e.jsx(t,{className:"shrink-0","data-testid":"design-system-message-bar--icon",children:e.jsx(i,{name:l,size:"medium"})}),e.jsxs(t,{className:"flex w-full flex-col gap-1",children:[o&&e.jsx(r,{variant:"subTitle2",className:"font-medium text-w-gray-900","data-testid":"design-system-message-bar--title",children:o}),e.jsx(r,{variant:"body1",className:"text-w-gray-600","data-testid":"design-system-message-bar--text",children:p})]}),d&&u&&e.jsx(a,{variant:"outlined",size:"sm",className:"shrink-0",onClick:u,"data-testid":"design-system-message-bar--button",children:d})]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var r=require("react/jsx-runtime"),e=require("tailwind-merge"),t="text-w-white group-hover:text-w-white",o="text-w-gray-200 group-hover:text-w-gray-200",s="stroke-dasharray-[16] stroke-dashoffset-[16] animate-checkbox-check",a=function(a){var i=a.checked,d=a.isError,a=a.disabled;return r.jsx("svg",{width:"10",height:"8",viewBox:"0 0 10 8",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:e.twMerge("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",i&&t,d&&a&&o,!i&&"text-transparent",a&&(!d&&i?t:"text-transparent")),style:{strokeDasharray:i?"16":"0",strokeDashoffset:i?"16":"0"},children:r.jsx("path",{d:"M1 3.8L4 7L9 1",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",className:i?s:""})})},i=function(a){var i=a.checked,d=a.isError,a=a.disabled;return r.jsx("svg",{width:"10",height:"8",viewBox:"0 0 10 8",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:e.twMerge("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",i&&t,d&&a&&o,!i&&"text-w-gray-200 group-hover:text-w-primary",d&&!i&&"text-w-red-500 group-hover:text-w-red-500",a&&(!d&&i?t:o)),style:{strokeDasharray:i?"16":"0",strokeDashoffset:i?"16":"0"},children:r.jsx("path",{d:"M1 3.8L4 7L9 1",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",className:i?s:""})})},d=function(t){var o=t.
|
|
1
|
+
"use strict";var r=require("react/jsx-runtime"),e=require("tailwind-merge"),t="text-w-white group-hover:text-w-white",o="text-w-gray-200 group-hover:text-w-gray-200",s="stroke-dasharray-[16] stroke-dashoffset-[16] animate-checkbox-check",a=function(a){var i=a.checked,d=a.isError,a=a.disabled;return r.jsx("svg",{width:"10",height:"8",viewBox:"0 0 10 8",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:e.twMerge("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",i&&t,d&&a&&o,!i&&"text-transparent",a&&(!d&&i?t:"text-transparent")),style:{strokeDasharray:i?"16":"0",strokeDashoffset:i?"16":"0"},children:r.jsx("path",{d:"M1 3.8L4 7L9 1",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",className:i?s:""})})},i=function(a){var i=a.checked,d=a.isError,a=a.disabled;return r.jsx("svg",{width:"10",height:"8",viewBox:"0 0 10 8",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:e.twMerge("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",i&&t,d&&a&&o,!i&&"text-w-gray-200 group-hover:text-w-primary",d&&!i&&"text-w-red-500 group-hover:text-w-red-500",a&&(!d&&i?t:o)),style:{strokeDasharray:i?"16":"0",strokeDashoffset:i?"16":"0"},children:r.jsx("path",{d:"M1 3.8L4 7L9 1",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",className:i?s:""})})},d=function(t){var o=t.role,s=t.className,a=t.checked,i=t.disabled,t=t.isError,d="text-w-gray-100";return r.jsx("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg",role:o,className:e.twMerge("cursor-pointer",i&&"cursor-not-allowed",t?i?d:"text-w-red-500":i?a?"text-primary-100":d:a?"text-primary":"text-w-gray-200",s),"data-testid":"design-system--sub-checkbox",children:r.jsx("path",{d:"M4 8.76667L7.75004 12.5L14.0001 5.5",stroke:"currentColor",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})})};exports.CheckboxButton=function(t){var o=t.type,o=void 0===o?"box":o,s=t.disabled,n=t.checked,n=void 0!==n&&n,c=t.isError,l=t.isFocused,t=t.className,w="circle"===o?"rounded-full":"rounded";return"sub"===o?r.jsx(d,{role:"checkbox-button",className:t,checked:n,disabled:s,isError:c}):r.jsxs("div",{className:e.twMerge("group relative box-border cursor-pointer border",{box:"size-4 m-px",circle:"size-[18px]"}[o],w,s?n?c?"bg-w-gray-50 border-w-gray-200 cursor-not-allowed":"bg-primary-100 border-primary-100 cursor-not-allowed":"border-w-gray-200 bg-w-gray-50 cursor-not-allowed":l&&!c?n?"bg-primary-500 border-primary-500":"border-primary-500 bg-w-white":c?n?"border-w-red-500 bg-w-red-500":"border-w-red-500 bg-w-white":n?"bg-primary-500 border-primary-500":"group-hover:border-primary-500 border-w-gray-200 bg-white",t),role:"checkbox-button",children:["box"===o&&r.jsx(a,{checked:n,isError:c,disabled:s}),"circle"===o&&r.jsx(i,{checked:n,isError:c,disabled:s})]})};
|
|
@@ -4,6 +4,7 @@ import { CheckboxType } from '../../Inputs/Checkbox/Checkbox.types';
|
|
|
4
4
|
export interface CheckboxListItemProps extends CheckboxStatus, ComponentPropsWithRef<'input'> {
|
|
5
5
|
label?: string;
|
|
6
6
|
description?: string;
|
|
7
|
+
errorMessage?: string;
|
|
7
8
|
CheckboxClassName?: string;
|
|
8
9
|
type?: CheckboxType;
|
|
9
10
|
}
|
|
@@ -14,6 +15,7 @@ export interface CheckboxListItemProps extends CheckboxStatus, ComponentPropsWit
|
|
|
14
15
|
* @param {Object} props
|
|
15
16
|
* @param {string} [props.label] - 체크박스 옆에 표시될 라벨 텍스트
|
|
16
17
|
* @param {string} [props.description] - 라벨 아래에 표시될 설명 텍스트
|
|
18
|
+
* @param {string} [props.errorMessage] - 체크박스 오류 메시지
|
|
17
19
|
* @param {string} [props.CheckboxClassName] - 체크박스에 적용될 커스텀 클래스
|
|
18
20
|
* @param {CheckboxType} [props.type='box'] - 체크박스 타입 ('box' | 'circle' | 'sub')
|
|
19
21
|
* @param {boolean} [props.checked] - 체크박스의 선택 상태
|
|
@@ -41,7 +43,7 @@ export interface CheckboxListItemProps extends CheckboxStatus, ComponentPropsWit
|
|
|
41
43
|
* <CheckboxListItem
|
|
42
44
|
* label="필수 선택 항목"
|
|
43
45
|
* isError={true}
|
|
44
|
-
*
|
|
46
|
+
* errorMessage="이 항목은 필수로 선택해야 합니다."
|
|
45
47
|
* />
|
|
46
48
|
*
|
|
47
49
|
* // 원형 체크박스
|
|
@@ -50,5 +52,5 @@ export interface CheckboxListItemProps extends CheckboxStatus, ComponentPropsWit
|
|
|
50
52
|
* type="circle"
|
|
51
53
|
* />
|
|
52
54
|
*/
|
|
53
|
-
declare const CheckboxListItem: ({ label, description, type, checked, disabled, isError, className, CheckboxClassName, onChange, children, ...rest }: CheckboxListItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
55
|
+
declare const CheckboxListItem: ({ label, description, type, checked, disabled, isError, errorMessage, className, CheckboxClassName, onChange, children, ...rest }: CheckboxListItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
54
56
|
export default CheckboxListItem;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"use strict";var e=require("../../../_virtual/_tslib.js"),s=require("react/jsx-runtime"),
|
|
2
|
+
"use strict";var e=require("../../../_virtual/_tslib.js"),s=require("react/jsx-runtime"),r=require("tailwind-merge"),i=require("../../Base/Typography/Typography.js"),a=require("../../Base/Layouts/Box/Box.js"),t=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../Checkbox/Checkbox.js")),c=function(i){var a=i.children,t=i.disabled,c=i.hasDescription,l=i.className,i=e.__rest(i,["children","disabled","hasDescription","className"]);return s.jsx("label",e.__assign({className:r.twMerge("grid h-min grid-cols-checkbox-list-item-container grid-rows-checkbox-list-item-container gap-x-3 grid-areas-checkbox-list-item-container",c?"gap-y-0.5":"gap-y-0",t?"cursor-not-allowed":"cursor-pointer",l)},i,{children:a}))};module.exports=function(l){var d=l.label,o=l.description,n=l.type,n=void 0===n?"box":n,h=l.checked,m=l.disabled,m=void 0!==m&&m,x=l.isError,x=void 0!==x&&x,g=l.errorMessage,b=l.className,u=l.CheckboxClassName,p=l.onChange,y=l.children,l=e.__rest(l,["label","description","type","checked","disabled","isError","errorMessage","className","CheckboxClassName","onChange","children"]);return s.jsxs(c,{"data-testid":"design-system-checkboxList--item",disabled:m,hasDescription:!!o,className:r.twMerge("group",b),children:[s.jsx(a,{className:"cursor-pointer pt-1 grid-in-checkbox",children:s.jsx(t,e.__assign({checked:h,isError:x,disabled:m,onChange:p,className:u,type:n},l))}),s.jsxs(a,{className:"flex w-full items-center grid-in-label","data-testid":"design-system-checkboxList--item-label-root",children:[d&&s.jsx(i,{variant:"body1",className:r.twJoin("w-full whitespace-normal break-words",m?"text-w-gray-300":"text-w-gray-900"),"data-testid":"design-system-checkboxList--item-label",children:d}),y]}),x&&g&&s.jsx(a,{className:"flex items-center grid-in-error",children:s.jsx(i,{variant:"body2",className:"text-w-red-500","data-testid":"design-system-checkboxList--item-error",children:g})}),o&&s.jsx(a,{className:"flex items-center grid-in-description",children:s.jsx(i,{variant:"body2",className:m?"text-w-gray-300":"text-w-gray-600","data-testid":"design-system-checkboxList--item-description",children:o})})]})};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentPropsWithRef, ReactNode } from 'react';
|
|
2
2
|
interface InformationBoxProps {
|
|
3
3
|
imgUrl?: string;
|
|
4
|
-
|
|
4
|
+
userId?: string;
|
|
5
5
|
}
|
|
6
6
|
export interface CommentAreaProps extends ComponentPropsWithRef<'textarea'>, InformationBoxProps {
|
|
7
7
|
isReply?: boolean;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"use strict";var e=require("../../../_virtual/_tslib.js"),s=require("react/jsx-runtime"),
|
|
2
|
+
"use strict";var e=require("../../../_virtual/_tslib.js"),s=require("react/jsx-runtime"),r=require("react"),a=require("tailwind-merge"),t=require("../../Base/Typography/Typography.js"),l=require("../../Base/Layouts/Box/Box.js"),i=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Avatar/Avatar.js")),n=(require("../../DataDisplays/Label/Label.js"),require("../../DataDisplays/SystemIcon/SystemIcon.js")),o=require("../../DataDisplays/Divider/Divider.js"),c=require("../Button/Button.js"),d=require("../CheckboxListItem/CheckboxListItem.js"),m=function(e){var r=e.userId,e=e.imgUrl;return s.jsxs(l,{className:"flex items-center gap-2",children:[s.jsx(i,{imgUrl:void 0===e?"":e,size:"sm"}),s.jsx(t,{variant:"body1",className:"w-full font-medium text-w-gray-600",children:r})]})},u=function(e){e=e.guideText;return s.jsx(l,{className:"w-full bg-w-gray-10 text-w-gray-500",children:s.jsx("ul",{className:"flex flex-col gap-0.5 typo-body2",children:"string"==typeof e?s.jsx("li",{className:'before:mr-2 before:inline-flex before:items-center before:justify-center before:content-["•"]',children:e}):s.jsx(s.Fragment,{children:null==e?void 0:e.map(function(e){return s.jsx("li",{className:'before:mr-2 before:inline-flex before:items-center before:justify-center before:content-["•"]',children:e},e)})})})})},x=r.forwardRef(function(r,t){var i=r.imgUrl,x=r.userId,g=r.isReply,f=r.guideText,y=r.buttonName,j=r.isSelected,p=r.optionMessage,h=r.cancelButtonName,h=void 0===h?"취소":h,b=r.onClose,w=r.onSubmit,N=r.onCheck,r=e.__rest(r,["imgUrl","userId","isReply","guideText","buttonName","isSelected","optionMessage","cancelButtonName","onClose","onSubmit","onCheck"]),v=r.value,k=r.className,q=r.disabled,C=r.spellCheck,C=void 0!==C&&C,B=r.children,r=e.__rest(r,["value","className","disabled","spellCheck","children"]),D=""===v.trim(),D=!x||D||q;return s.jsxs(l,{"data-testid":"design-system-commentArea--full-container",className:a.twMerge("flex w-full items-start gap-4",k),children:[g&&s.jsx(n,{name:"medium_reply",className:"shrink-0 text-w-gray-400"}),s.jsxs(l,{"data-testid":"design-system-commentArea--container",className:"w-full rounded-xl border border-w-gray-200 bg-w-white",children:[s.jsx(l,{className:"flex w-full flex-col gap-2 px-4 py-3",children:B?s.jsx(l,{className:"h-[98px]",children:B}):s.jsxs(s.Fragment,{children:[x&&s.jsx(m,{imgUrl:i,userId:x}),s.jsx("textarea",e.__assign({"data-testid":"design-system-commentArea",ref:t,value:v,spellCheck:C,disabled:q||!x,className:"h-[63px] w-full resize-none border-none bg-transparent tracking-default text-w-gray-900 outline-none placeholder:font-normal placeholder:text-w-gray-300 placeholder:typo-body1"},r))]})}),f&&s.jsx(l,{"data-testid":"design-system-commentArea--guide-message",className:"w-full bg-w-gray-10 px-4 py-2 text-w-gray-500",children:s.jsx(u,{guideText:f})}),s.jsx(o,{}),s.jsxs(l,{"data-testid":"design-system-commentArea--buttons",className:a.twMerge("flex w-full items-center justify-end px-4 py-3",p&&"justify-between"),children:[p&&s.jsx(d,{label:p,checked:j,onChange:N,disabled:q||!x}),s.jsxs(l,{className:"flex w-fit shrink-0 items-center gap-3",children:[g&&s.jsx(c,{size:"sm",onClick:b,children:h}),s.jsx(c,{variant:"solid",size:"sm",disabled:D,onClick:w,children:y})]})]})]})]})});x.displayName="CommentArea",module.exports=x;
|
|
@@ -8,6 +8,7 @@ export interface FilterListProps {
|
|
|
8
8
|
title: string;
|
|
9
9
|
buttonName: string;
|
|
10
10
|
data: FilterItem[];
|
|
11
|
+
name?: string;
|
|
11
12
|
className?: string;
|
|
12
13
|
selectedValues?: string[];
|
|
13
14
|
isAllSelected?: boolean;
|
|
@@ -25,14 +26,15 @@ export interface FilterListProps {
|
|
|
25
26
|
* @param {object} props
|
|
26
27
|
* @param {string} props.title - 필터 목록의 제목
|
|
27
28
|
* @param {string} props.buttonName - 적용 버튼에 표시될 텍스트 (기본값: '적용하기')
|
|
29
|
+
* @param {string} [props.name] - 필터 목록의 이름
|
|
28
30
|
* @param {FilterItem[]} props.data - 필터 항목 배열
|
|
29
31
|
* @param {string} [props.className] - 컴포넌트에 적용할 추가 클래스명
|
|
30
32
|
* @param {string[]} [props.selectedValues] - 선택된 필터 값들의 배열
|
|
31
33
|
* @param {boolean} [props.isAllSelected] - 전체 선택 여부
|
|
32
34
|
* @param {boolean} [props.isViewOnly] - 선택한 항목만 보기 모드 여부
|
|
33
|
-
* @param {() => void} [props.onSelectAll] - 전체 선택 버튼 클릭 시 호출될
|
|
35
|
+
* @param {() => void} [props.onSelectAll] - 전체 선택 버튼 클릭 시 호출될 함수, 존재할 때 전체선택 버튼 노출됨
|
|
34
36
|
* @param {() => void} [props.onReset] - 초기화 버튼 클릭 시 호출될 함수
|
|
35
|
-
* @param {() => void} [props.onViewOnly] - 선택한 항목만 보기 토글 시 호출될
|
|
37
|
+
* @param {() => void} [props.onViewOnly] - 선택한 항목만 보기 토글 시 호출될 함수, 존재할 때 선택한 카테고리만 보기 CheckboxListItem 노출됨
|
|
36
38
|
* @param {() => void} [props.onSubmit] - 적용 버튼 클릭 시 호출될 함수
|
|
37
39
|
*
|
|
38
40
|
* @example
|
|
@@ -47,6 +49,7 @@ export interface FilterListProps {
|
|
|
47
49
|
*
|
|
48
50
|
* <FilterList
|
|
49
51
|
* title="필터"
|
|
52
|
+
* name="filter"
|
|
50
53
|
* buttonName="적용하기"
|
|
51
54
|
* data={filterItems}
|
|
52
55
|
* selectedValues={['category1']}
|
|
@@ -56,5 +59,5 @@ export interface FilterListProps {
|
|
|
56
59
|
* />
|
|
57
60
|
* ```
|
|
58
61
|
*/
|
|
59
|
-
declare const FilterList: ({ title, buttonName, onSelectAll, isAllSelected, isViewOnly, data, className, selectedValues, onReset, onViewOnly, onSubmit, }: FilterListProps) => import("react/jsx-runtime").JSX.Element;
|
|
62
|
+
declare const FilterList: ({ title, buttonName, name, onSelectAll, isAllSelected, isViewOnly, data, className, selectedValues, onReset, onViewOnly, onSubmit, }: FilterListProps) => import("react/jsx-runtime").JSX.Element;
|
|
60
63
|
export default FilterList;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"use strict";var e=require("../../../_virtual/_tslib.js"),s=require("react/jsx-runtime"),r=require("react"),t=(require("tailwind-merge"),require("../../Base/Layouts/Box/Box.js")),a=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Avatar/Avatar.js"),require("../../DataDisplays/Label/Label.js"),require("../../DataDisplays/SystemIcon/SystemIcon.js")),
|
|
2
|
+
"use strict";var e=require("../../../_virtual/_tslib.js"),s=require("react/jsx-runtime"),r=require("react"),t=(require("tailwind-merge"),require("../../Base/Layouts/Box/Box.js")),a=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Avatar/Avatar.js"),require("../../DataDisplays/Label/Label.js"),require("../../DataDisplays/SystemIcon/SystemIcon.js")),i=require("../TextButtonDropdown/TextButtonDropdown.js"),n=require("../TextFieldContainer/TextFieldContainer.js"),l=require("../Input/Input.js");require("../Input/PasswordInput.js"),require("../Input/LableInput.js"),require("../Input/InputTypeSelector.js"),module.exports=function(u){u.type;var o=u.onSearch,c=(u.className,u.disabled),d=u.spellCheck,p=u.onFocus,j=u.onBlur,m=u.filters,u=e.__rest(u,["type","onSearch","className","disabled","spellCheck","onFocus","onBlur","filters"]),x=r.useState(!1),q=x[0],h=x[1];return s.jsx("form",{onSubmit:function(e){e.preventDefault(),o()},"data-testid":"design-system-search-field",children:s.jsx("label",{className:"cursor-text",children:s.jsxs(n,{isFocused:q,isDisabled:c,className:"overflow-visible",children:[!!m&&s.jsx(t,{className:"shrink-0",children:s.jsx(i,e.__assign({},m))}),s.jsx(l,e.__assign({onFocus:function(e){h(!0),null!=p&&p(e)},onBlur:function(e){h(!1),null!=j&&j(e)},spellCheck:d||!1,disabled:c},u)),s.jsx("button",{type:"submit",className:"shrink-0",children:s.jsx(a,{name:"medium_search",className:"pointer-events-none text-w-gray-600"})})]})})})};
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
+
type SegmentedControlSize = 'sm' | 'md';
|
|
1
2
|
interface SegmentedControlProps {
|
|
2
3
|
valueList: {
|
|
3
4
|
key: string;
|
|
4
5
|
name: string;
|
|
5
6
|
}[];
|
|
6
7
|
selectedValue: string;
|
|
8
|
+
size?: SegmentedControlSize;
|
|
7
9
|
name?: string;
|
|
8
10
|
onChange: (value: string) => void;
|
|
9
11
|
}
|
|
@@ -11,6 +13,7 @@ interface SegmentedControlProps {
|
|
|
11
13
|
* 여러 옵션 중 하나를 선택할 수 있는 세그먼트 컨트롤 컴포넌트입니다.
|
|
12
14
|
*
|
|
13
15
|
* @param {Object} props
|
|
16
|
+
* @param {'sm' | 'md'} [props.size='md'] - 세그먼트 컨트롤 크기
|
|
14
17
|
* @param {Array<{key: string, name: string}>} props.valueList - 선택 가능한 옵션들의 배열 ({key, name}[])
|
|
15
18
|
* @param {string} props.selectedValue - 현재 선택된 옵션의 key 값
|
|
16
19
|
* @param {string} [props.name='segmented-control'] - 라디오 그룹의 name 속성
|
|
@@ -35,5 +38,5 @@ interface SegmentedControlProps {
|
|
|
35
38
|
* );
|
|
36
39
|
* ```
|
|
37
40
|
*/
|
|
38
|
-
declare const SegmentedControl: ({ valueList, selectedValue, name, onChange, }: SegmentedControlProps) => import("react/jsx-runtime").JSX.Element;
|
|
41
|
+
declare const SegmentedControl: ({ valueList, selectedValue, size, name, onChange, }: SegmentedControlProps) => import("react/jsx-runtime").JSX.Element;
|
|
39
42
|
export default SegmentedControl;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),t=require("../../Base/Typography/Typography.js"),a=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js"),module.exports=function(s){var o=s.valueList,i=s.selectedValue,n=s.size,u=void 0===n?"md":n,n=s.name,c=void 0===n?"segmented-control":n,m=s.onChange,p={sm:{selected:"px-[15px] py-[7px]",unselected:"px-4 py-2"},md:{selected:"px-[15px] py-[11px]",unselected:"px-4 py-3"}};return e.jsx(a,{className:"flex w-full overflow-hidden rounded-xl",role:"radiogroup","aria-label":"segmented control","data-testid":"design-system--segmented-control",children:o.map(function(a,s){var n=s===o.length-1,l=i===a.key,d=l&&"sm"===u;return e.jsxs("label",{className:r.twJoin("relative cursor-pointer select-none text-center",l?"border border-primary bg-primary-10 text-primary":"bg-w-gray-50 text-w-gray-300",l?p[u].selected:p[u].unselected,0===s&&"rounded-l-xl",n&&"rounded-r-xl"),"data-testid":"design-system--segmented-control-item",children:[e.jsx("input",{type:"radio",name:c,value:a.key,checked:l,"aria-checked":l,onChange:function(e){return m(e.target.value)},className:"absolute h-0 w-0 opacity-0"}),e.jsx(t,{variant:"md"===u?"body1":"body2",className:r.twJoin(d?"font-medium":"font-normal"),children:a.name})]},a.key)})})};
|
|
@@ -12,7 +12,8 @@ interface TextFieldContainerProps extends PropsWithChildren {
|
|
|
12
12
|
isTextarea?: boolean;
|
|
13
13
|
isAutoComplete?: boolean;
|
|
14
14
|
testId?: string;
|
|
15
|
+
className?: string;
|
|
15
16
|
onClick?: () => void;
|
|
16
17
|
}
|
|
17
|
-
declare const TextFieldContainer: ({ children, leadingIcon, trailingIcon, isLeadingIconSolid, isTrailingIconSolid, measure, isFocused, isDisabled, isError, onClick, isTextarea, isAutoComplete, testId, }: TextFieldContainerProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
declare const TextFieldContainer: ({ children, className, leadingIcon, trailingIcon, isLeadingIconSolid, isTrailingIconSolid, measure, isFocused, isDisabled, isError, onClick, isTextarea, isAutoComplete, testId, }: TextFieldContainerProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
19
|
export default TextFieldContainer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),s=require("../../Base/Typography/Typography.js"),a=require("../../Base/Layouts/Box/Box.js"),i=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Avatar/Avatar.js"),require("../../DataDisplays/Label/Label.js"),require("../../../_virtual/_tslib.js"),require("../../DataDisplays/SystemIcon/SystemIcon.js"));module.exports=function(t){var l=t.children,o=t.className,n=t.leadingIcon,d=t.trailingIcon,c=t.isLeadingIconSolid,u=t.isTrailingIconSolid,y=t.measure,g=t.isFocused,m=t.isDisabled,x=t.isError,p=t.onClick,w=t.isTextarea,b=t.isAutoComplete,t=t.testId;return e.jsxs(a,{className:r.twMerge("group flex w-full items-center gap-3 overflow-hidden rounded-xl border bg-w-white px-4 py-[11px]",m?"border-w-gray-200":x?"border-w-red-500":g?"border-primary":"border-w-gray-200 hover:border-primary",m&&"cursor-not-allowed bg-w-gray-10",w&&"relative p-0",b&&"flex-wrap",o),"data-testid":t||"design-system--text-field-container",onClick:p,children:[n&&e.jsx(i,{name:n,solid:c,className:"shrink-0 text-w-gray-600",testId:"design-system--text-field-container-leading-icon"}),l,y&&e.jsx(s,{variant:"body1",className:"w-fit shrink-0 text-w-gray-400",children:y}),d&&e.jsx(i,{name:d,solid:u,className:"shrink-0 text-w-gray-600",testId:"design-system--text-field-container-trailing-icon"})]})};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("tailwind-merge"),a=require("../../Base/Typography/Typography.js"),
|
|
2
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("tailwind-merge"),a=require("../../Base/Typography/Typography.js"),i=require("../../Base/Layouts/Box/Box.js"),n=(require("../../Base/Layouts/FullBleed/FullBleed.js"),r.createContext({activeTab:0,currentActiveTab:0,handleTabClick:function(e){}}));exports.Panel=function(t){var a=t.children,t=t.index;return r.useContext(n).activeTab===t&&e.jsx(i,{"data-testid":"design-system-boxTab--content",children:a})},exports.Root=function(t){var i=t.children,a=t.currentActiveTab,s=void 0===a?0:a,l=t.onChange,a=r.useState(s),t=a[0],c=a[1];return r.useEffect(function(){c(s)},[s]),e.jsx(n.Provider,{value:{activeTab:t,currentActiveTab:s,handleTabClick:function(e){null!=l&&l(e),c(e)}},children:i})},exports.Tab=function(s){var l=s.children,c=s.index,o=s.className,d=s.isFirst,u=s.isLast,s=s.disabled,x=void 0!==s&&s,s=r.useContext(n),b=s.handleTabClick,s=s.activeTab,s=c===s;return e.jsx(i,{tabIndex:0,"data-testid":"design-system-boxTab--item-".concat(c),className:t.twMerge("group flex w-full cursor-pointer items-center border border-w-gray-200 bg-w-white px-6 py-4 hover:bg-w-gray-10","relative","-ml-px",s&&"z-[1] border-primary bg-primary-10 hover:bg-primary-10",d&&"ml-0 rounded-l-xl",u&&"rounded-r-xl",o),onClick:function(){x||b(c)},children:e.jsx(i,{className:t.twMerge("relative flex w-full flex-row items-center justify-center font-normal text-w-gray-600",s&&"font-medium text-primary"),children:e.jsx(a,{variant:"body1",className:"relative",children:l})})})},exports.Tabs=function(a){var n=a.children,a=a.className,s=r.Children.toArray(n);return e.jsx(i,{className:t.twJoin("relative block w-full",a),"data-testid":"design-system-boxTab--container",children:e.jsx(i,{children:e.jsx(i,{className:t.twMerge("inline-flex w-full"),children:s.map(function(t,i){t=r.cloneElement(t,{isFirst:0===i,isLast:i===s.length-1});return e.jsx(r.Fragment,{children:t},i)})})})})};
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { MediumSystemIconName, SmallSystemIconName } from '../../DataDisplays/SystemIcon';
|
|
3
3
|
export interface MenuProps {
|
|
4
4
|
type?: 'main' | 'sub';
|
|
5
5
|
variant?: 'white' | 'gray';
|
|
6
6
|
name: string;
|
|
7
7
|
badgeCount?: string;
|
|
8
8
|
isSelected?: boolean;
|
|
9
|
-
leadingIcon?:
|
|
10
|
-
trailingIcon?:
|
|
9
|
+
leadingIcon?: MediumSystemIconName;
|
|
10
|
+
trailingIcon?: SmallSystemIconName;
|
|
11
11
|
onClick: () => void;
|
|
12
12
|
onOptionClick?: () => void;
|
|
13
13
|
children?: ReactNode;
|
|
@@ -21,11 +21,11 @@ export interface MenuProps {
|
|
|
21
21
|
* @param {string} props.name - 메뉴에 표시될 텍스트
|
|
22
22
|
* @param {string} [props.badgeCount] - 메뉴 항목에 표시될 뱃지 숫자
|
|
23
23
|
* @param {boolean} [props.isSelected=false] - 메뉴 선택 상태
|
|
24
|
-
* @param {SystemIconName} [props.leadingIcon] - 메뉴 앞쪽에 표시될 아이콘
|
|
25
|
-
* @param {SystemIconName} [props.trailingIcon] - 메뉴 뒤쪽에 표시될 아이콘
|
|
24
|
+
* @param {SystemIconName} [props.leadingIcon] - 메뉴 앞쪽에 표시될 아이콘(medium 사이즈)
|
|
25
|
+
* @param {SystemIconName} [props.trailingIcon] - 메뉴 뒤쪽에 표시될 아이콘(small 사이즈)
|
|
26
26
|
* @param {() => void} props.onClick - 메뉴 클릭 시 실행될 함수
|
|
27
|
-
* @param {() => void} [props.onOptionClick] - 후행 아이콘 클릭 시 실행될 함수
|
|
28
|
-
* @param {ReactNode} [props.children] - 메뉴 내부에 표시될 자식 요소
|
|
27
|
+
* @param {() => void} [props.onOptionClick] - 후행 아이콘 클릭 시 실행될 함수 (trailingIcon 사용 시 필요)
|
|
28
|
+
* @param {ReactNode} [props.children] - 메뉴 내부에 표시될 자식 요소 (IconButtonDropdown 컴포넌트 사용 시 필요, trailingIcon과 함께 사용하지 않도록 주의 필요)
|
|
29
29
|
*
|
|
30
30
|
* @example
|
|
31
31
|
* // 기본 메뉴
|
|
@@ -52,6 +52,15 @@ export interface MenuProps {
|
|
|
52
52
|
* onClick={() => console.log('메뉴 클릭')}
|
|
53
53
|
* onOptionClick={() => console.log('옵션 클릭')}
|
|
54
54
|
* />
|
|
55
|
+
*
|
|
56
|
+
* // IconButtonDropdown과 함께 사용시
|
|
57
|
+
* <Menu
|
|
58
|
+
* name="메뉴"
|
|
59
|
+
* onClick={() => console.log('메뉴 클릭')}
|
|
60
|
+
* onOptionClick={() => console.log('옵션 클릭')}
|
|
61
|
+
* >
|
|
62
|
+
* <IconButtonDropdown items={items} />
|
|
63
|
+
* </Menu>
|
|
55
64
|
*/
|
|
56
65
|
declare const Menu: ({ type, variant, name, isSelected, badgeCount, leadingIcon, trailingIcon, children, onClick, onOptionClick, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
57
66
|
export default Menu;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),t=(require("../../DataDisplays/Avatar/Avatar.js"),require("../../DataDisplays/CountBadge/CountBadge.js")),i=require("../../Base/Typography/Typography.js"),s=require("../../Base/Layouts/Box/Box.js"),a=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Label/Label.js"),require("../../../_virtual/_tslib.js"),require("../../DataDisplays/SystemIcon/SystemIcon.js")),n=(require("react"),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"),require("../../Inputs/IconButton/IconButton.js"));require("../../Inputs/Radio/Radio.js"),require("../../Inputs/TextField/TextField.js"),require("../../Inputs/CommentArea/CommentArea.js"),require("../../Inputs/MultiColumnList/MultiColumnList.parts.js"),require("../../Inputs/FilterChip/FilterChip.js"),module.exports=function(u){var o,l,p=u.type,p=void 0===p?"main":p,m=u.variant,m=void 0===m?"white":m,d=u.name,c=u.isSelected,c=void 0!==c&&c,y=u.badgeCount,g=u.leadingIcon,j=u.trailingIcon,I=u.children,h=u.onClick,q=u.onOptionClick,u=!I&&j&&q;return e.jsxs(s,{"data-testid":"design-system-menu",className:(o=m,l=c,p="sub"===p?"pl-12":"",l={white:r.twJoin("bg-w-white hover:bg-w-gray-50",l&&"bg-primary-10 text-primary hover:bg-primary-10"),gray:r.twJoin("bg-w-gray-50 hover:bg-w-gray-100",l&&"bg-w-gray-100 hover:bg-w-gray-100")},r.twMerge("flex w-full cursor-pointer items-center gap-2 rounded-xl px-4 py-3 text-w-gray-900",p,l[o])),onClick:h,children:[g&&e.jsx(a,{testId:"design-system-menu-leading-icon",name:g,className:r.twJoin("white"===m&&c&&"text-primary")}),e.jsx(i,{"data-testid":"design-system-menu-name",variant:"body1",className:"w-full select-none",children:d}),y&&e.jsx(t,{variant:"white"!==m?"white_gray":c?"primary":"gray",text:y,className:"relative",showZero:!0}),I,u&&e.jsx(n,{size:"sm",className:"shrink-0",onClick:function(e){e.stopPropagation(),q()},children:e.jsx(a,{name:j})})]})};
|
|
@@ -88,8 +88,8 @@ module.exports = {
|
|
|
88
88
|
'default-desktop': [
|
|
89
89
|
'content content content content content content content content content content content content',
|
|
90
90
|
],
|
|
91
|
-
'checkbox-list-item-container': ['checkbox label', '. description'],
|
|
92
|
-
'radio-list-item-container': ['radio label', '. description'],
|
|
91
|
+
'checkbox-list-item-container': ['checkbox label', '. error','. description'],
|
|
92
|
+
'radio-list-item-container': ['radio label','. error', '. description'],
|
|
93
93
|
},
|
|
94
94
|
gridTemplateRows: {
|
|
95
95
|
'checkbox-list-item-container': 'min-content min-content',
|