@wishket/design-system 1.0.6 → 1.0.7
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/Atoms/Label/Label.d.ts +2 -1
- package/dist/Components/Atoms/Label/Label.js +1 -1
- package/dist/Components/Atoms/Label/Label.stories.d.ts +4 -1
- package/dist/Components/Atoms/ModalContext/ModalContext.d.ts +1 -0
- package/dist/Components/Atoms/ModalContext/ModalContext.js +1 -1
- package/dist/Components/Atoms/ModalContext/ModalContext.parts.d.ts +2 -1
- package/dist/Components/Atoms/ModalContext/ModalContext.parts.js +1 -1
- package/dist/Components/Atoms/ModalContext/ModalContext.types.d.ts +6 -0
- package/dist/Components/Molecules/RangeSlider/RangeSlider.js +1 -1
- package/dist/Components/Molecules/Tooltip/Tooltip.d.ts +4 -1
- package/dist/Components/Molecules/Tooltip/Tooltip.js +1 -1
- package/dist/Components/Molecules/Tooltip/Tooltip.stories.d.ts +8 -1
- package/dist/Components/Organisms/Dialog/Dialog.d.ts +11 -0
- package/dist/Components/Organisms/Dialog/Dialog.js +2 -0
- package/dist/Components/Organisms/Dialog/Dialog.stories.d.ts +7 -0
- package/dist/Components/Organisms/Dialog/index.d.ts +2 -0
- package/dist/Components/Organisms/Dialog/index.js +1 -0
- package/dist/Components/Organisms/index.d.ts +1 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
|
@@ -4,12 +4,13 @@ export interface LabelRootProps extends ComponentProps<'div'> {
|
|
|
4
4
|
variant?: 'text' | 'outlined' | 'filled';
|
|
5
5
|
color?: 'primary' | 'gray';
|
|
6
6
|
size?: 'sm' | 'md';
|
|
7
|
+
canHover?: boolean;
|
|
7
8
|
}
|
|
8
9
|
export interface LabelIconProps extends ComponentProps<'div'> {
|
|
9
10
|
icon?: SystemIconName;
|
|
10
11
|
}
|
|
11
12
|
declare const Label: {
|
|
12
|
-
Root: ({ children, className, size, variant, color, ref, ...rest }: LabelRootProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
Root: ({ children, className, size, variant, color, ref, canHover, ...rest }: LabelRootProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
14
|
Text: ({ children, className }: ComponentProps<'div'>) => import("react/jsx-runtime").JSX.Element;
|
|
14
15
|
Icon: ({ children, className, icon }: LabelIconProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
16
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"use strict";var
|
|
2
|
+
"use strict";var r=require("../../../_virtual/_tslib.js"),e=require("react/jsx-runtime"),a=require("react"),t=require("tailwind-merge"),i=require("../Box/Box.js"),o=require("../Typography/Typography.js"),s=require("../SystemIcon/SystemIcon.js"),n=a.createContext({variant:"",color:"",size:""}),c={Root:function(a){var o=a.children,s=a.className,c=a.size,c=void 0===c?"md":c,d=a.variant,l=void 0===d?"text":d,d=a.color,y=void 0===d?"primary":d,d=(a.ref,a.canHover),g=void 0!==d&&d,d=r.__rest(a,["children","className","size","variant","color","ref","canHover"]);return e.jsx(n.Provider,{value:{variant:l,color:y,size:c},children:e.jsx(i,r.__assign({"data-testid":"design-system-label",className:t.twMerge("flex w-fit items-center gap-1.5","filled"===l&&"rounded-lg px-2 py-0.5","outlined"===l&&"rounded-lg border px-2 py-px",g&&"cursor-pointer",function(){var r="outlined"===l;if("text"!==l)return"gray"===y?r?g?"bg-w-gray-10 border-w-gray-200 hover:border-w-gray-400":"bg-w-gray-10 border-w-gray-200":g?"bg-w-gray-10 hover:bg-w-gray-200":"bg-w-gray-10":r?g?"bg-primary-50 border-primary-200 hover:border-primary":"bg-primary-50 border-primary-200":g?"bg-primary-50 hover:bg-primary-100":"bg-primary-50"}(),s)},d,{children:o}))})},Text:function(r){var i=r.children,r=r.className,s=a.useContext(n),c=s.variant,d=s.color,s=s.size;return e.jsx(o,{variant:"md"===s?"body2":"caption1","data-testid":"design-system-label--text",className:t.twMerge("select-none text-w-gray-600",!("text"===c)&&"primary"===d&&"text-primary",r),children:i})},Icon:function(r){var o=r.children,c=r.className,r=r.icon,d=a.useContext(n),l=d.variant,d=d.color;return e.jsxs(i,{"data-testid":"design-system-label--icon",className:t.twMerge("aspect-w-[14px] size-[14px] shrink-0 object-contain",!r&&c),children:[r&&e.jsx(s,{name:r,className:t.twMerge("text-w-gray-400","primary"===d&&"text-primary","text"===l&&"text-w-gray-400",c)}),o]})}};module.exports=c;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { StoryObj } from '@storybook/react';
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: ({ children, className, size, variant, color, ref, ...rest }: import("./Label").LabelRootProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
component: ({ children, className, size, variant, color, ref, canHover, ...rest }: import("./Label").LabelRootProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
tags: string[];
|
|
6
6
|
argTypes: {
|
|
7
7
|
variant: {
|
|
@@ -12,6 +12,9 @@ declare const meta: {
|
|
|
12
12
|
control: string;
|
|
13
13
|
options: string[];
|
|
14
14
|
};
|
|
15
|
+
canHover: {
|
|
16
|
+
control: string;
|
|
17
|
+
};
|
|
15
18
|
};
|
|
16
19
|
};
|
|
17
20
|
export default meta;
|
|
@@ -6,5 +6,6 @@ declare const ModalContext: {
|
|
|
6
6
|
Root: ({ isOpen: externalIsOpen, setIsOpen: externalSetIsOpen, children, hasBackground, isPreventClose, size, }: ModalRootProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
Trigger: ({ children, testId }: import("./ModalContext.types").ModalTriggerProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
Content: ({ children, testId, role, className, }: import("./ModalContext.types").ModalContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
Close: ({ children, testId }: import("./ModalContext.types").ModalCloseProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
10
|
};
|
|
10
11
|
export default ModalContext;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var e=require("./ModalContext.parts.js"),o={Root:e.Root,Trigger:e.Trigger,Content:e.Content,Close:e.Close};module.exports=o;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { ModalContentProps, ModalRootProps, ModalTriggerProps } from './ModalContext.types';
|
|
1
|
+
import { ModalCloseProps, ModalContentProps, ModalRootProps, ModalTriggerProps } from './ModalContext.types';
|
|
2
2
|
export declare const Root: ({ isOpen: externalIsOpen, setIsOpen: externalSetIsOpen, children, hasBackground, isPreventClose, size, }: ModalRootProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export declare const Trigger: ({ children, testId }: ModalTriggerProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export declare const Close: ({ children, testId }: ModalCloseProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
5
|
export declare const Content: ({ children, testId, role, className, }: ModalContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),s=require("react"),n=s.createContext({isOpen:!1,setOpen:function(){},hasBackground:!0,isPreventClose:!1,size:"md"}),r=function(){var r=s.useContext(n),i=r.isOpen,r=r.hasBackground;return e.jsx(e.Fragment,{children:i&&e.jsx("div",{"data-testid":"design-system-modalContext--background",className:t.twMerge("fixed left-0 top-0 z-30 h-[100vh] w-[100vw]",r?" bg-black bg-opacity-50":"bg-transparent")})})};exports.Content=function(i){var o=i.children,a=i.testId,d=i.role,i=i.className,l=s.useContext(n),c=l.isOpen,u=l.size,l=l.isPreventClose;return s.useEffect(function(){return c&&(document.body.style.overflow="hidden"),function(){document.body.style.overflow=""}},[c]),e.jsxs(e.Fragment,{children:[c&&l&&e.jsx(r,{}),e.jsx("div",{role:d,"data-testid":a,className:t.twMerge("fixed left-[50%] z-40 box-border flex translate-x-[-50%] transform items-center justify-center overflow-auto rounded-3xl bg-w-white px-[15px] py-[15px] shadow-modal transition-all duration-100 ease-in",c?"visible top-[50%] translate-y-[-50%]":"invisible top-[60%] translate-y-[-40%] opacity-0","sm"===u&&"size-[400px]","md"===u&&"size-[500px]","lg"===u&&"size-[600px]","xl"===u&&"size-[1000px]",i),children:o})]})},exports.Root=function(t){var r=t.isOpen,i=t.setIsOpen,o=t.children,a=t.hasBackground,a=void 0===a||a,d=t.isPreventClose,d=void 0!==d&&d,t=t.size,t=void 0===t?"md":t,l=s.useState(!1),c=l[0],u=l[1];return e.jsx(n.Provider,{value:{isOpen:void 0!==r?r:c,setOpen:i||function(){return u(!c)},hasBackground:a,isPreventClose:d,size:t},children:o})},exports.Trigger=function(t){var i=t.children,t=t.testId,o=s.useContext(n),a=o.isOpen,d=o.setOpen,o=o.isPreventClose;return e.jsxs("div",{"data-testid":t,onClick:d,children:[i,a&&!o&&e.jsx(r,{})]})};
|
|
2
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),s=require("react"),n=s.createContext({isOpen:!1,setOpen:function(){},hasBackground:!0,isPreventClose:!1,size:"md"}),r=function(){var r=s.useContext(n),i=r.isOpen,r=r.hasBackground;return e.jsx(e.Fragment,{children:i&&e.jsx("div",{"data-testid":"design-system-modalContext--background",className:t.twMerge("fixed left-0 top-0 z-30 h-[100vh] w-[100vw]",r?" bg-black bg-opacity-50":"bg-transparent")})})};exports.Close=function(t){var r=t.children,t=t.testId,i=s.useContext(n).setOpen;return e.jsx(e.Fragment,{children:e.jsx("div",{"data-testid":t,onClick:i,children:r})})},exports.Content=function(i){var o=i.children,a=i.testId,d=i.role,i=i.className,l=s.useContext(n),c=l.isOpen,u=l.size,l=l.isPreventClose;return s.useEffect(function(){return c&&(document.body.style.overflow="hidden"),function(){document.body.style.overflow=""}},[c]),e.jsxs(e.Fragment,{children:[c&&l&&e.jsx(r,{}),e.jsx("div",{role:d,"data-testid":a,className:t.twMerge("fixed left-[50%] z-40 box-border flex translate-x-[-50%] transform items-center justify-center overflow-auto rounded-3xl bg-w-white px-[15px] py-[15px] shadow-modal transition-all duration-100 ease-in",c?"visible top-[50%] translate-y-[-50%]":"invisible top-[60%] translate-y-[-40%] opacity-0","sm"===u&&"size-[400px]","md"===u&&"size-[500px]","lg"===u&&"size-[600px]","xl"===u&&"size-[1000px]",i),children:o})]})},exports.Root=function(t){var r=t.isOpen,i=t.setIsOpen,o=t.children,a=t.hasBackground,a=void 0===a||a,d=t.isPreventClose,d=void 0!==d&&d,t=t.size,t=void 0===t?"md":t,l=s.useState(!1),c=l[0],u=l[1];return e.jsx(n.Provider,{value:{isOpen:void 0!==r?r:c,setOpen:i||function(){return u(!c)},hasBackground:a,isPreventClose:d,size:t},children:o})},exports.Trigger=function(t){var i=t.children,t=t.testId,o=s.useContext(n),a=o.isOpen,d=o.setOpen,o=o.isPreventClose;return e.jsxs("div",{"data-testid":t,onClick:d,children:[i,a&&!o&&e.jsx(r,{})]})};
|
|
@@ -12,6 +12,12 @@ export interface ModalTriggerProps {
|
|
|
12
12
|
children?: ReactNode;
|
|
13
13
|
testId?: string;
|
|
14
14
|
}
|
|
15
|
+
export interface ModalCloseProps {
|
|
16
|
+
setOpen?: () => void;
|
|
17
|
+
children?: ReactNode;
|
|
18
|
+
testId?: string;
|
|
19
|
+
onClick?: () => void;
|
|
20
|
+
}
|
|
15
21
|
export interface ModalBackgroundProps {
|
|
16
22
|
isOpen?: boolean;
|
|
17
23
|
hasBackground?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("tailwind-merge"),r=require("react"),a=(require("../../Atoms/Checkbox/Checkbox.js"),require("../../Atoms/Box/Box.js")),i=(require("../../Atoms/Radio/Radio.js"),require("../../Atoms/SystemIcon/Icons/Small/SmallScrap.js"),require("../../Atoms/SystemIcon/Icons/Small/SmallBell.js"),require("../../Atoms/SystemIcon/Icons/Medium/MediumEdit.js"),require("../../Atoms/TextField/TextField.js"),require("../../Atoms/ChoiceChip/ChoiceChip.js"),require("../../Atoms/Label/Label.js"),require("../../Atoms/ModalContext/ModalContext.parts.js"),"\n [&::-moz-range-thumb]:pointer-events-auto\n [&::-moz-range-thumb]:mr-2\n [&::-moz-range-thumb]
|
|
1
|
+
"use strict";var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("tailwind-merge"),r=require("react"),a=(require("../../Atoms/Checkbox/Checkbox.js"),require("../../Atoms/Box/Box.js")),i=(require("../../Atoms/Radio/Radio.js"),require("../../Atoms/SystemIcon/Icons/Small/SmallScrap.js"),require("../../Atoms/SystemIcon/Icons/Small/SmallBell.js"),require("../../Atoms/SystemIcon/Icons/Medium/MediumEdit.js"),require("../../Atoms/TextField/TextField.js"),require("../../Atoms/ChoiceChip/ChoiceChip.js"),require("../../Atoms/Label/Label.js"),require("../../Atoms/ModalContext/ModalContext.parts.js"),"\n [&::-moz-range-thumb]:pointer-events-auto\n [&::-moz-range-thumb]:mr-2\n [&::-moz-range-thumb]:-translate-x-1/4\n [&::-moz-range-thumb]:transform\n [&::-moz-range-thumb]:appearance-none\n [&::-moz-range-thumb]:rounded-full\n [&::-moz-range-thumb]:border\n [&::-moz-range-thumb]:border-w-gray-200\n [&::-moz-range-thumb]:bg-transparent\n [&::-moz-range-thumb]:bg-white\n [&::-moz-range-thumb]:shadow-graymedium\n [&::-moz-range-thumb]:outline\n [&::-moz-range-thumb]:ring-1\n [&::-moz-range-thumb]:ring-inset\n [&::-moz-range-thumb]:ring-w-gray-200\n [&::-moz-range-thumb]:transition-all \n [&::-moz-range-thumb]:duration-150\n [&::-moz-range-thumb]:ease-in-out\n [&::-moz-range-thumb]:dark:bg-w-white\n\n [&::-webkit-slider-thumb]:pointer-events-auto\n [&::-webkit-slider-thumb]:mr-2\n [&::-webkit-slider-thumb]:-translate-x-1/4\n [&::-webkit-slider-thumb]:transform\n [&::-webkit-slider-thumb]:appearance-none\n [&::-webkit-slider-thumb]:rounded-full\n [&::-webkit-slider-thumb]:border\n [&::-webkit-slider-thumb]:border-w-gray-200\n [&::-webkit-slider-thumb]:bg-transparent\n [&::-webkit-slider-thumb]:bg-white\n [&::-webkit-slider-thumb]:shadow-graymedium\n [&::-webkit-slider-thumb]:outline\n [&::-webkit-slider-thumb]:ring-1\n [&::-webkit-slider-thumb]:ring-inset\n [&::-webkit-slider-thumb]:ring-w-gray-200\n [&::-webkit-slider-thumb]:transition-all \n [&::-webkit-slider-thumb]:duration-150\n [&::-webkit-slider-thumb]:ease-in-out\n [&::-webkit-slider-thumb]:dark:bg-w-white\n ");module.exports=function(s){function m(t,n){var r=(a="min"===n)?"start":"end",a=a?Math.min(Number(t.target.value),x.max-1):Math.max(Number(t.target.value),x.min+1);f(r),z(e.__assign(e.__assign({},x),((t={})[n]=a,t))),null!=w&&w(e.__assign(e.__assign({},x),((r={})[n]=a,r)))}function u(){return"sm"===d?i+"[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4":i+"[&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5"}var l=s.variant,l=void 0===l?"single":l,o=s.size,d=void 0===o?"sm":o,o=s.step,o=void 0===o?10:o,b=s.value,b=void 0===b?{min:0,max:0}:b,g=s.min,g=void 0===g?0:g,h=s.max,h=void 0===h?100:h,w=s.onChange,c=s.className,s=e.__rest(s,["variant","size","step","value","min","max","onChange","className"]),l="dual"===l,p=b.min,b=b.max,p=r.useState({min:l?p:0,max:b}),x=p[0],z=p[1],b=r.useState("end"),p=b[0],f=b[1],b=Math.floor(Number(h)/Number(o))+1;return t.jsxs(a,{className:n.twMerge("relative px-1",c),"data-testid":"design-system-rangeSlider",children:[l&&t.jsx("input",e.__assign({"data-testid":"design-system-rangeSlider--start-thumb-input",type:"range",min:g,max:h,step:o,value:x.min,onInput:function(e){return m(e,"min")},className:n.twMerge("pointer-events-none absolute z-30 h-full w-full cursor-grab appearance-none rounded-full bg-transparent text-transparent",u(),"start"===p&&"z-50")},s)),t.jsx("input",e.__assign({"data-testid":"design-system-rangeSlider--end-thumb-input",type:"range",min:g,max:h,value:x.max,onInput:function(e){return m(e,"max")},step:o,className:n.twMerge("pointer-events-auto absolute z-30 h-full w-full cursor-grab appearance-none rounded-full bg-transparent text-transparent",u(),l&&"pointer-events-none","end"===p&&"z-50")},s)),t.jsxs(a,{"data-testid":"design-system-rangeSlider--container",className:n.twMerge("relative overflow-hidden","sm"===d&&"h-1 rounded-sm","md"===d&&"h-2 rounded"),children:["md"===d&&t.jsx(a,{className:"absolute z-20 flex h-2 w-full items-center justify-between bg-transparent p-0.5",children:e.__spreadArray([],Array(b),!0).map(function(e,n){return t.jsx(a,{"data-testid":"design-system-rangeSlider--unit-dot",className:"size-1 rounded-full bg-w-white"},n)})}),t.jsx(a,{className:"absolute left-0 top-0 z-0 h-full w-full bg-w-gray-50","data-testid":"design-system-rangeSlider--rail"}),t.jsx(a,{className:"absolute left-0 top-0 z-10 h-full bg-primary","data-testid":"design-system-rangeSlider--fill-track",style:{width:"".concat(l?x.max-x.min:x.max,"%"),left:l?"".concat(x.min,"%"):0}})]})]})};
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { ComponentProps } from 'react';
|
|
2
2
|
export interface TooltipProps extends ComponentProps<'div'> {
|
|
3
|
+
variant?: 'plain' | 'rich';
|
|
3
4
|
direction?: 'up' | 'down' | 'left' | 'right';
|
|
5
|
+
title?: string;
|
|
6
|
+
description?: string;
|
|
4
7
|
}
|
|
5
|
-
declare const Tooltip: ({ direction, children, className }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare const Tooltip: ({ direction, children, className, variant, title, description, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
9
|
export default Tooltip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),s=require("../../Atoms/Typography/Typography.js"),r=(require("../../Atoms/Checkbox/Checkbox.js"),require("../../Atoms/Box/Box.js")),a=(require("../../../_virtual/_tslib.js"),require("../../Atoms/Radio/Radio.js"),require("react"),require("../../Atoms/SystemIcon/Icons/Small/SmallScrap.js"),require("../../Atoms/SystemIcon/Icons/Small/SmallBell.js"),require("../../Atoms/SystemIcon/Icons/Medium/MediumEdit.js"),require("../../Atoms/TextField/TextField.js"),require("../../Atoms/ChoiceChip/ChoiceChip.js"),require("../../Atoms/Label/Label.js"),require("../../Atoms/ModalContext/ModalContext.parts.js"),require("./Tooltip.parts.js"));module.exports=function(i){var o=i.direction,o=void 0===o?"up":o,l=i.children,n=i.className,d=i.variant,m=i.title,i=i.description;return e.jsx(r,{"data-testid":"design-system-toolTip",className:n,children:"rich"===(void 0===d?"plain":d)?e.jsxs(r,{className:t.twMerge("flex w-full flex-col gap-1 rounded-xl bg-white px-6 py-5 shadow-graymedium tablet:w-80 desktop:w-80"),"data-testid":"design-system-toolTip--rich",children:[e.jsx(r,{className:"flex w-full items-start justify-between gap-4",children:e.jsx(s,{variant:"body2",className:"font-medium text-w-gray-900",children:m})}),e.jsx(s,{variant:"body3",className:"text-w-gray-400",children:i})]}):e.jsxs(r,{className:"relative h-fit w-full select-none border-none opacity-80 outline-none","data-testid":"design-system-toolTip--plain",children:[e.jsx(a.Arrow,{testId:"design-system-toolTip--arrow",className:t.twMerge("absolute z-10","down"===o&&"-bottom-[7px] left-1/2 translate-x-[-50%] -rotate-90","up"===o&&"-top-[7px] left-1/2 translate-x-[-50%] rotate-90","left"===o&&"-left-[4.8px] top-1/2 translate-y-[-50%] rotate-0","right"===o&&"-right-[4.8px] top-1/2 translate-y-[-50%] rotate-180")}),e.jsx(r,{className:"z-0 flex h-auto min-h-[28px] w-full items-center rounded-lg bg-w-black px-3 py-1",children:e.jsx(s,{variant:"body3",className:"whitespace-pre text-wrap break-all font-medium text-w-white opacity-100",children:l})})]})})};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { StoryObj } from '@storybook/react';
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: ({ direction, children, className }: import("./Tooltip").TooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
component: ({ direction, children, className, variant, title, description, }: import("./Tooltip").TooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
tags: string[];
|
|
6
6
|
argTypes: {
|
|
7
7
|
direction: {
|
|
@@ -11,6 +11,12 @@ declare const meta: {
|
|
|
11
11
|
className: {
|
|
12
12
|
control: string;
|
|
13
13
|
};
|
|
14
|
+
title: {
|
|
15
|
+
control: string;
|
|
16
|
+
};
|
|
17
|
+
description: {
|
|
18
|
+
control: string;
|
|
19
|
+
};
|
|
14
20
|
};
|
|
15
21
|
};
|
|
16
22
|
export default meta;
|
|
@@ -19,3 +25,4 @@ export declare const Up: Story;
|
|
|
19
25
|
export declare const Down: Story;
|
|
20
26
|
export declare const Left: Story;
|
|
21
27
|
export declare const Right: Story;
|
|
28
|
+
export declare const Rich: Story;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { PropsWithChildren } from 'react';
|
|
2
|
+
export interface DialogProps extends PropsWithChildren {
|
|
3
|
+
title: string;
|
|
4
|
+
description: string;
|
|
5
|
+
variant?: 'primary' | 'caution';
|
|
6
|
+
onClick?: () => void;
|
|
7
|
+
confirm?: string;
|
|
8
|
+
close?: string;
|
|
9
|
+
}
|
|
10
|
+
declare const Dialog: ({ children, title, description, variant, onClick, confirm, close, }: DialogProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export default Dialog;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),s=require("../../Atoms/Typography/Typography.js"),i=(require("../../Atoms/Checkbox/Checkbox.js"),require("../../Atoms/Box/Box.js")),o=(require("../../../_virtual/_tslib.js"),require("../../Atoms/Radio/Radio.js"),require("../../Atoms/Button/Button.js")),t=(require("../../Atoms/TextField/TextField.js"),require("../../Atoms/SystemIcon/Icons/Small/SmallScrap.js"),require("../../Atoms/SystemIcon/Icons/Small/SmallBell.js"),require("../../Atoms/SystemIcon/Icons/Medium/MediumEdit.js"),require("../../Atoms/ChoiceChip/ChoiceChip.js"),require("react"),require("../../Atoms/Label/Label.js"),require("../../Atoms/ModalContext/ModalContext.js"));module.exports=function(l){var a=l.children,n=l.title,d=l.description,c=l.variant,m=l.onClick,u=l.confirm,l=l.close,l=void 0===l?"닫기":l,c="caution"===(void 0===c?"primary":c);return e.jsxs(t.Root,{size:"sm",children:[e.jsx(t.Trigger,{testId:"design-system-dialog--trigger",children:a}),e.jsxs(t.Content,{testId:"design-system-dialog--content",className:"box-border flex h-auto min-h-[250px] w-[320px] flex-col gap-8 overflow-hidden bg-w-white p-8 tablet:w-[400px] desktop:w-[400px]",children:[e.jsxs(i,{className:"flex w-full flex-col gap-6",children:[e.jsx(s,{variant:"subTitle2",className:"font-medium text-w-gray-900",children:n}),e.jsx(s,{variant:"body1",className:"whitespace-break-spaces text-w-gray-800",children:d})]}),e.jsxs(i,{className:"flex w-full items-center justify-end gap-4",children:[e.jsx(t.Close,{testId:"design-system-dialog--close-button",children:e.jsx(o,{variant:"solid",className:"border-w-bluegray-200 bg-w-bluegray-200 hover:border-w-bluegray-200 hover:bg-w-bluegray-200",children:l})}),e.jsx(t.Close,{testId:"design-system-dialog--confirm-button",children:e.jsx(o,{onClick:m,variant:"solid",className:r.twJoin(c&&"border-w-orange-500 bg-w-orange-500 hover:border-w-orange-500 hover:bg-w-orange-500"),children:u})})]})]})]})};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import Dialog from './Dialog';
|
|
3
|
+
declare const meta: Meta<typeof Dialog>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Primary: Story;
|
|
7
|
+
export declare const Caution: Story;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var e=require("./Dialog.js");module.exports=e;
|
|
@@ -7,3 +7,4 @@ export { Autocomplete } from './Autocomplete';
|
|
|
7
7
|
export type { SkillItem, LegacySkillItem } from './Autocomplete';
|
|
8
8
|
export { default as TableOfContents } from './TableOfContents';
|
|
9
9
|
export type { TableOfContentsProps, ContentItem } from './TableOfContents';
|
|
10
|
+
export { default as Dialog } from './Dialog';
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("./Components/Atoms/Typography/Typography.js"),o=require("./Components/Atoms/Checkbox/Checkbox.js"),t=require("./Components/Atoms/CountBadge/CountBadge.js"),s=require("./Components/Atoms/Box/Box.js"),r=require("./Components/Atoms/ProductIcon/ProductIcon.js"),n=require("./Components/Atoms/Radio/Radio.js"),i=require("./Components/Atoms/Button/Button.js"),p=require("./Components/Atoms/LoadingIndicator/LoadingIndicator.js"),a=require("./Components/Atoms/TextField/TextField.js"),u=require("./Components/Atoms/Divider/Divider.js"),m=require("./Components/Atoms/ServiceLogo/ServiceLogo.js"),x=require("./Components/Atoms/Avatar/Avatar.js"),C=require("./Components/Atoms/Switch/Switch.js"),l=require("./Components/Atoms/SystemIcon/SystemIcon.js"),c=require("./Components/Atoms/NewBadge/NewBadge.js"),d=require("./Components/Atoms/ChoiceChip/ChoiceChip.js"),j=require("./Components/Atoms/Textarea/Textarea.js"),q=require("./Components/Atoms/IconButton/IconButton.js"),g=require("./Components/Atoms/SkillChip/SkillChip.js"),B=require("./Components/Atoms/ImageLabel/ImageLabel.js"),h=require("./Components/Atoms/Label/Label.js"),T=require("./Components/Atoms/ModalContext/ModalContext.js"),A=require("./Components/Molecules/WithBadge/WithBadge.js"),L=require("./Components/Molecules/GridLayout/GridLayout.js"),b=require("./Components/Molecules/CheckboxList/CheckboxList.js"),M=require("./Components/Molecules/CheckboxCard/CheckboxCard.js"),S=require("./Components/Molecules/RadioList/RadioList.js"),k=require("./Components/Molecules/MessageBox/MessageBox.js"),I=require("./Components/Molecules/TextButton/TextButton.js"),w=require("./Components/Molecules/InputChip/InputChip.js"),
|
|
1
|
+
"use strict";var e=require("./Components/Atoms/Typography/Typography.js"),o=require("./Components/Atoms/Checkbox/Checkbox.js"),t=require("./Components/Atoms/CountBadge/CountBadge.js"),s=require("./Components/Atoms/Box/Box.js"),r=require("./Components/Atoms/ProductIcon/ProductIcon.js"),n=require("./Components/Atoms/Radio/Radio.js"),i=require("./Components/Atoms/Button/Button.js"),p=require("./Components/Atoms/LoadingIndicator/LoadingIndicator.js"),a=require("./Components/Atoms/TextField/TextField.js"),u=require("./Components/Atoms/Divider/Divider.js"),m=require("./Components/Atoms/ServiceLogo/ServiceLogo.js"),x=require("./Components/Atoms/Avatar/Avatar.js"),C=require("./Components/Atoms/Switch/Switch.js"),l=require("./Components/Atoms/SystemIcon/SystemIcon.js"),c=require("./Components/Atoms/NewBadge/NewBadge.js"),d=require("./Components/Atoms/ChoiceChip/ChoiceChip.js"),j=require("./Components/Atoms/Textarea/Textarea.js"),q=require("./Components/Atoms/IconButton/IconButton.js"),g=require("./Components/Atoms/SkillChip/SkillChip.js"),B=require("./Components/Atoms/ImageLabel/ImageLabel.js"),h=require("./Components/Atoms/Label/Label.js"),T=require("./Components/Atoms/ModalContext/ModalContext.js"),A=require("./Components/Molecules/WithBadge/WithBadge.js"),L=require("./Components/Molecules/GridLayout/GridLayout.js"),b=require("./Components/Molecules/CheckboxList/CheckboxList.js"),M=require("./Components/Molecules/CheckboxCard/CheckboxCard.js"),S=require("./Components/Molecules/RadioList/RadioList.js"),k=require("./Components/Molecules/MessageBox/MessageBox.js"),I=require("./Components/Molecules/TextButton/TextButton.js"),w=require("./Components/Molecules/InputChip/InputChip.js"),D=require("./Components/Molecules/List/List.js"),y=require("./Components/Molecules/Pagination/Pagination.js"),R=require("./Components/Molecules/Drawer/Drawer.js"),O=require("./Components/Molecules/SnackBar/SnackBar.js"),v=require("./Components/Molecules/Tooltip/Tooltip.js"),G=require("./Components/Molecules/RangeSlider/RangeSlider.js"),F=require("./Components/Molecules/RadioGroup/RadioGroup.js"),N=require("./Components/Organisms/TextTab/TextTab.js"),P=require("./Components/Organisms/GNBList/GNBList.js"),W=require("./Components/Organisms/TextFieldDropdown/TextFieldDropdown.js"),f=require("./Components/Organisms/TextButtonsDropdown/TextButtonsDropdown.js"),z=require("./Components/Organisms/WithSnackBar/WithSnackBar.js"),E=require("./Components/Organisms/Autocomplete/Autocomplete.js"),H=require("./Components/Organisms/TableOfContents/TableOfContents.js"),J=require("./Components/Organisms/Dialog/Dialog.js");exports.Typography=e,exports.Checkbox=o,exports.CountBadge=t,exports.Box=s,exports.ProductIcon=r,exports.Radio=n,exports.Button=i,exports.LoadingIndicator=p,exports.TextField=a,exports.Divider=u,exports.ServiceLogo=m,exports.Avatar=x,exports.Switch=C,exports.SystemIcon=l,exports.NewBadge=c,exports.ChoiceChip=d,exports.Textarea=j,exports.IconButton=q,exports.SkillChip=g,exports.ImageLabel=B,exports.Label=h,exports.ModalContext=T,exports.WithBadge=A,exports.GridLayout=L,exports.CheckboxList=b,exports.CheckboxCard=M,exports.RadioList=S,exports.MessageBox=k,exports.TextButton=I,exports.InputChip=w,exports.List=D,exports.Pagination=y,exports.Drawer=R,exports.SnackBar=O,exports.Tooltip=v,exports.RangeSlider=G,exports.RadioGroup=F,exports.TextTab=N,exports.GNBList=P,exports.TextFieldDropdown=W,exports.TextButtonsDropdown=f,exports.WithSnackBar=z,exports.Autocomplete=E,exports.TableOfContents=H,exports.Dialog=J;
|