@wishket/design-system 1.0.10 → 1.1.1
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 +3 -3
- package/dist/Components/Atoms/Label/Label.js +1 -1
- package/dist/Components/Atoms/Label/Label.stories.d.ts +2 -2
- package/dist/Components/Atoms/SkillLabel/SkillLabel.parts.js +1 -1
- package/dist/Components/Molecules/PlainTooltip/PlainTooltip.d.ts +8 -0
- package/dist/Components/Molecules/PlainTooltip/PlainTooltip.js +1 -0
- package/dist/Components/Molecules/{Tooltip/Tooltip.stories.d.ts → PlainTooltip/PlainTooltip.stories.d.ts} +2 -3
- package/dist/Components/Molecules/PlainTooltip/index.d.ts +2 -0
- package/dist/Components/Molecules/PlainTooltip/index.js +1 -0
- package/dist/Components/Molecules/RichTooltip/RichTooltip.d.ts +8 -0
- package/dist/Components/Molecules/RichTooltip/RichTooltip.js +1 -0
- package/dist/Components/Molecules/RichTooltip/RichTooltip.stories.d.ts +6 -0
- package/dist/Components/Molecules/RichTooltip/index.d.ts +2 -0
- package/dist/Components/Molecules/RichTooltip/index.js +1 -0
- package/dist/Components/Molecules/index.d.ts +2 -1
- package/dist/Components/Organisms/TextTab/TextTab.d.ts +2 -4
- package/dist/Components/Organisms/TextTab/TextTab.parts.d.ts +3 -3
- package/dist/Components/Organisms/TextTab/TextTab.parts.js +1 -1
- package/dist/Components/Organisms/TextTab/TextTab.stories.d.ts +1 -0
- package/dist/Components/Organisms/TextTab/TextTab.types.d.ts +2 -0
- package/dist/Components/Organisms/WithRichTooltip/WithRichTooltip.d.ts +10 -0
- package/dist/Components/Organisms/WithRichTooltip/WithRichTooltip.js +2 -0
- package/dist/Components/Organisms/WithRichTooltip/WithRichTooltip.stories.d.ts +6 -0
- package/dist/Components/Organisms/WithRichTooltip/index.d.ts +2 -0
- package/dist/Components/Organisms/WithRichTooltip/index.js +1 -0
- package/dist/Components/Organisms/index.d.ts +1 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/dist/Components/Molecules/Tooltip/Tooltip.d.ts +0 -9
- package/dist/Components/Molecules/Tooltip/Tooltip.js +0 -1
- package/dist/Components/Molecules/Tooltip/index.d.ts +0 -2
- package/dist/Components/Molecules/Tooltip/index.js +0 -1
- /package/dist/Components/Molecules/{Tooltip/Tooltip.parts.d.ts → PlainTooltip/PlainTooltip.parts.d.ts} +0 -0
- /package/dist/Components/Molecules/{Tooltip/Tooltip.parts.js → PlainTooltip/PlainTooltip.parts.js} +0 -0
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { ComponentProps } from 'react';
|
|
2
2
|
import { SystemIconName } from '../SystemIcon/SystemIcon.types';
|
|
3
3
|
export interface LabelRootProps extends ComponentProps<'div'> {
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
type?: 'text' | 'outlined' | 'filled';
|
|
5
|
+
variant?: 'primary' | 'gray';
|
|
6
6
|
size?: 'sm' | 'md';
|
|
7
7
|
canHover?: boolean;
|
|
8
8
|
}
|
|
@@ -10,7 +10,7 @@ export interface LabelIconProps extends ComponentProps<'div'> {
|
|
|
10
10
|
icon?: SystemIconName;
|
|
11
11
|
}
|
|
12
12
|
declare const Label: {
|
|
13
|
-
Root: ({ children, className, size,
|
|
13
|
+
Root: ({ children, className, size, type, variant, ref, canHover, ...rest }: LabelRootProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
14
|
Text: ({ children, className }: ComponentProps<'div'>) => import("react/jsx-runtime").JSX.Element;
|
|
15
15
|
Icon: ({ children, className, icon }: LabelIconProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
16
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"use strict";var
|
|
2
|
+
"use strict";var e=require("../../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),a=require("tailwind-merge"),i=require("../Box/Box.js"),n=require("../Typography/Typography.js"),s=require("../SystemIcon/SystemIcon.js"),o=t.createContext({type:"",variant:"",size:""}),y={Root:function(n){function s(r){return t.isValidElement(r)&&"function"==typeof r.type&&r.type.toString().includes("icon")}var y=n.children,p=n.className,c=n.size,d=void 0===c?"md":c,c=n.type,g=void 0===c?"text":c,c=n.variant,l=void 0===c?"primary":c,c=(n.ref,n.canHover),m=void 0!==c&&c,c=e.__rest(n,["children","className","size","type","variant","ref","canHover"]),n=t.Children.toArray(y),u=n.length-1,x=s(n[0]),v=s(n[u]);return r.jsx(o.Provider,{value:{type:g,variant:l,size:d},children:r.jsx(i,e.__assign({"data-testid":"design-system-label",className:a.twMerge("flex w-fit items-center","sm"===d&&"gap-1","md"===d&&"gap-1.5",function(){var r="sm"===d,e="rounded-lg px-2";if("text"!==g)return"outlined"===g?a.twMerge(e,r?"border py-px":"border py-0",x&&"pl-1.5",v&&"pr-1.5"):a.twMerge(e,r?"py-0.5":"py-px",x&&"pl-1.5",v&&"pr-1.5")}(),m&&"cursor-pointer",function(){var r="outlined"===g;if("text"!==g)return"gray"===l?r?m?"bg-w-gray-10 border-w-gray-200 hover:border-w-gray-400":"bg-w-gray-10 border-w-gray-200":m?"bg-w-gray-10 hover:bg-w-gray-200":"bg-w-gray-10":r?m?"bg-primary-50 border-primary-200 hover:border-primary":"bg-primary-50 border-primary-200":m?"bg-primary-50 hover:bg-primary-100":"bg-primary-50"}(),p)},c,{children:y}))})},Text:function(e){var i=e.children,e=e.className,s=t.useContext(o),y=s.type,p=s.variant,s=s.size;return r.jsx(n,{variant:"md"===s?"body2":"caption1","data-testid":"design-system-label--text",className:a.twMerge("select-none text-w-gray-600",!("text"===y)&&"primary"===p&&"text-primary",e),children:i})},Icon:function(e){var n=e.children,y=e.className,e=e.icon,p=t.useContext(o),c=p.type,p=p.variant;return r.jsxs(i,{"data-testid":"design-system-label--icon",className:a.twMerge("aspect-w-[14px] size-[14px] shrink-0 object-contain",!e&&y),children:[e&&r.jsx(s,{name:e,className:a.twMerge("text-w-gray-400","primary"===p&&"text-primary","text"===c&&"text-w-gray-400",y)}),n]})}};module.exports=y;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import type { StoryObj } from '@storybook/react';
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: ({ children, className, size,
|
|
4
|
+
component: ({ children, className, size, type, variant, ref, canHover, ...rest }: import("./Label").LabelRootProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
tags: string[];
|
|
6
6
|
argTypes: {
|
|
7
|
-
|
|
7
|
+
type: {
|
|
8
8
|
control: string;
|
|
9
9
|
options: string[];
|
|
10
10
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),s=require("../Box/Box.js"),t=require("../Typography/Typography.js");exports.Icon=function(s){var t=s.className,s=s.iconUrl;return e.jsx("img",{"data-testid":"design-system-skill-chip--icon",src:s,alt:"icon",width:24,height:24,className:r.twMerge("size-6 shrink-0 rounded-full object-cover",t)})},exports.Root=function(t){var i=t.children,t=t.className;return e.jsx(s,{"data-testid":"design-system-skill-chip",className:r.twMerge("flex h-9 w-fit shrink-0 select-none items-center gap-2 rounded-xl border border-gray-200 py-[5px] pl-[7px] pr-[15px]",t),children:i})},exports.Text=function(s){var i=s.children,s=s.className;return e.jsx(t,{variant:"body2",className:r.twMerge("text-w-gray-900",s),children:i})};
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),s=require("../Box/Box.js"),t=require("../Typography/Typography.js");exports.Icon=function(s){var t=s.className,s=s.iconUrl;return e.jsx("img",{"data-testid":"design-system-skill-chip--icon",src:s,alt:"icon",width:24,height:24,className:r.twMerge("size-6 shrink-0 rounded-full object-cover",t)})},exports.Root=function(t){var i=t.children,t=t.className;return e.jsx(s,{"data-testid":"design-system-skill-chip",className:r.twMerge("flex h-9 w-fit shrink-0 select-none items-center gap-2 rounded-xl border border-w-gray-200 py-[5px] pl-[7px] pr-[15px]",t),children:i})},exports.Text=function(s){var i=s.children,s=s.className;return e.jsx(t,{variant:"body2",className:r.twMerge("text-w-gray-900",s),children:i})};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ComponentProps } from 'react';
|
|
2
|
+
export interface TooltipProps extends ComponentProps<'div'> {
|
|
3
|
+
variant?: 'up' | 'down' | 'left' | 'right';
|
|
4
|
+
title?: string;
|
|
5
|
+
description?: string;
|
|
6
|
+
}
|
|
7
|
+
declare const PlainTooltip: ({ variant, children, className, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export default PlainTooltip;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),r=require("../../Atoms/Typography/Typography.js"),s=(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("./PlainTooltip.parts.js"));module.exports=function(i){var o=i.variant,o=void 0===o?"up":o,l=i.children,i=i.className;return e.jsx(s,{"data-testid":"design-system-plain-toolTip",className:i,children:e.jsxs(s,{className:"relative h-fit w-fit select-none border-none opacity-80 outline-none","data-testid":"design-system-plain-toolTip--container",children:[e.jsx(a.Arrow,{testId:"design-system-plain-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(s,{className:"z-0 flex h-auto min-h-[28px] w-full items-center justify-center rounded-lg bg-w-black px-3 py-1 text-center",children:e.jsx(r,{variant:"body3",className:"whitespace-pre text-wrap break-all font-medium text-w-white opacity-100",children:l})})]})})};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import type { StoryObj } from '@storybook/react';
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: ({
|
|
4
|
+
component: ({ variant, children, className, }: import("./PlainTooltip").TooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
tags: string[];
|
|
6
6
|
argTypes: {
|
|
7
|
-
|
|
7
|
+
variant: {
|
|
8
8
|
control: string;
|
|
9
9
|
options: string[];
|
|
10
10
|
};
|
|
@@ -25,4 +25,3 @@ export declare const Up: Story;
|
|
|
25
25
|
export declare const Down: Story;
|
|
26
26
|
export declare const Left: Story;
|
|
27
27
|
export declare const Right: Story;
|
|
28
|
-
export declare const Rich: Story;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var e=require("./PlainTooltip.js");module.exports=e;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { PropsWithChildren } from 'react';
|
|
2
|
+
export interface RichTooltipProps extends PropsWithChildren {
|
|
3
|
+
title?: string;
|
|
4
|
+
description?: string;
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
declare const RichTooltip: ({ title, description, className, children, }: RichTooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export default RichTooltip;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),s=require("../../Atoms/Typography/Typography.js"),t=(require("../../Atoms/Checkbox/Checkbox.js"),require("../../Atoms/Box/Box.js"));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"),module.exports=function(i){var a=i.title,o=i.description,l=i.className,i=i.children;return e.jsxs(t,{className:r.twMerge("flex w-full flex-col gap-1 rounded-xl bg-white px-6 py-5 shadow-graymedium tablet:w-80",l),"data-testid":"design-system-rich-tooltip",children:[a&&e.jsx(t,{className:"flex w-full items-start justify-between gap-4",children:e.jsx(s,{variant:"body2",className:"font-medium text-w-gray-900",children:a})}),o&&e.jsx(s,{variant:"body3",className:"text-w-gray-400",children:o}),i]})};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var e=require("./RichTooltip.js");module.exports=e;
|
|
@@ -11,6 +11,7 @@ export { default as Pagination } from './Pagination';
|
|
|
11
11
|
export { default as Drawer } from './Drawer';
|
|
12
12
|
export { default as SnackBar } from './SnackBar';
|
|
13
13
|
export type { SnackBarProps } from './SnackBar';
|
|
14
|
-
export { default as
|
|
14
|
+
export { default as PlainTooltip } from './PlainTooltip';
|
|
15
|
+
export { default as RichTooltip } from './RichTooltip';
|
|
15
16
|
export { default as RangeSlider } from './RangeSlider';
|
|
16
17
|
export { default as RadioGroup } from './RadioGroup';
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
declare const TextTab: {
|
|
3
|
-
Root: ({ children, defaultActive, isFit, hasPadding, onChange, }: import("./TextTab.types").RootProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
Tabs: ({ children }:
|
|
5
|
-
children?: import("react").ReactNode;
|
|
6
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
Root: ({ children, defaultActive, isFit, hasPadding, isFull, onChange, }: import("./TextTab.types").RootProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
Tabs: ({ children, className }: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
|
|
7
5
|
Tab: ({ children, index, className, barColor, disabled, badgeNumber, iconName, }: import("./TextTab.types").TabProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
6
|
Panel: ({ children, index }: import("./TextTab.types").PanelProps) => false | import("react/jsx-runtime").JSX.Element;
|
|
9
7
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ComponentProps } from 'react';
|
|
2
2
|
import { PanelProps, RootProps, TabProps } from './TextTab.types';
|
|
3
|
-
declare const Root: ({ children, defaultActive, isFit, hasPadding, onChange, }: RootProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
declare const Tabs: ({ children }:
|
|
3
|
+
declare const Root: ({ children, defaultActive, isFit, hasPadding, isFull, onChange, }: RootProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare const Tabs: ({ children, className }: ComponentProps<'div'>) => import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
declare const Tab: ({ children, index, className, barColor, disabled, badgeNumber, iconName, }: TabProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
declare const Panel: ({ children, index }: PanelProps) => false | import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export { Root, Tabs, Tab, Panel };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("react"),a=require("tailwind-merge"),r=require("../../Atoms/Typography/Typography.js"),i=(require("../../Atoms/Checkbox/Checkbox.js"),require("../../Atoms/CountBadge/CountBadge.js")),s=require("../../Atoms/Box/Box.js"),n=(require("../../../_virtual/_tslib.js"),require("../../Atoms/Radio/Radio.js"),require("../../Atoms/SystemIcon/SystemIcon.js")),o=(require("../../Atoms/TextField/TextField.js"),require("../../Atoms/Divider/Divider.js")),l=(require("../../Atoms/ChoiceChip/ChoiceChip.js"),require("../../Atoms/Label/Label.js"),require("../../Atoms/ModalContext/ModalContext.parts.js"),t.createContext({activeTab:0,defaultActive:0,animationDirection:"right",isFit:!0,hasPadding:!1,handleTabClick:function(e){}}));exports.Panel=function(a){var i=a.children,a=a.index;return t.useContext(l).activeTab===a&&e.jsx(s,{"data-testid":"design-system-textTab--content",children:i})},exports.Root=function(a){
|
|
2
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("react"),a=require("tailwind-merge"),r=require("../../Atoms/Typography/Typography.js"),i=(require("../../Atoms/Checkbox/Checkbox.js"),require("../../Atoms/CountBadge/CountBadge.js")),s=require("../../Atoms/Box/Box.js"),n=(require("../../../_virtual/_tslib.js"),require("../../Atoms/Radio/Radio.js"),require("../../Atoms/SystemIcon/SystemIcon.js")),o=(require("../../Atoms/TextField/TextField.js"),require("../../Atoms/Divider/Divider.js")),l=(require("../../Atoms/ChoiceChip/ChoiceChip.js"),require("../../Atoms/Label/Label.js"),require("../../Atoms/ModalContext/ModalContext.parts.js"),t.createContext({activeTab:0,defaultActive:0,animationDirection:"right",isFit:!0,hasPadding:!1,isFull:!1,handleTabClick:function(e){}}));exports.Panel=function(a){var i=a.children,a=a.index;return t.useContext(l).activeTab===a&&e.jsx(s,{"data-testid":"design-system-textTab--content",children:i})},exports.Root=function(a){var i=a.children,r=a.defaultActive,r=void 0===r?0:r,s=a.isFit,s=void 0===s||s,n=a.hasPadding,n=void 0!==n&&n,o=a.isFull,o=void 0!==o&&o,c=a.onChange,a=t.useState(r),d=a[0],u=a[1],a=t.useState(void 0),x=a[0],m=a[1];return e.jsx(l.Provider,{value:{activeTab:d,animationDirection:x,defaultActive:r,isFit:s,hasPadding:n,handleTabClick:function(e){if(e===d)return m(void 0);d<e&&m("right"),e<d&&m("left"),null!=c&&c(e),u(e)},isFull:o},children:i})},exports.Tab=function(o){var c=o.children,d=o.index,u=o.className,x=o.barColor,m=o.disabled,g=void 0!==m&&m,m=o.badgeNumber,o=o.iconName,h=t.useContext(l),f=h.isFit,v=h.handleTabClick,b=h.activeTab,j=h.animationDirection,h=h.isFull,b=d===b;return e.jsx(s,{tabIndex:0,"data-testid":"design-system-textTab--item-".concat(d),className:a.twMerge("group flex w-max cursor-pointer items-center rounded-xl hover:font-medium",g&&"cursor-not-allowed",h&&"w-full",u),onClick:function(){g||v(d)},children:e.jsxs(s,{className:a.twMerge("relative flex w-max flex-row items-center justify-center gap-2 py-4 font-normal text-w-gray-600 group-hover:text-w-gray-900",!f&&"px-[33.5px]",h&&"w-full px-0",b&&"font-medium text-w-gray-900"),children:[o&&e.jsx(s,{className:"flex size-4 flex-shrink-0 items-center justify-center",children:e.jsx(n,{name:o,className:a.twMerge("size-4 text-w-gray-600 group-hover:text-w-gray-900",b&&"text-w-gray-900")})}),e.jsx(r,{variant:"body1",className:"relative",children:c}),m&&e.jsx(i,{text:m,className:"relative",variant:"gray"}),e.jsx("span",{"data-testid":"design-system-textTab--underbar-".concat(d),className:a.twMerge("absolute -bottom-px left-0 h-0.5 w-full rounded-t-lg bg-transparent",b&&"bg-w-gray-900 transition duration-500 ease-out ".concat("right"===(j||"")?"-left-1/2 translate-x-1/2":"left-1/2 -translate-x-1/2"),x)})]})})},exports.Tabs=function(i){var r=i.children,i=i.className,n=t.useContext(l),c=n.hasPadding,n=n.isFull;return e.jsxs(e.Fragment,{children:[e.jsx(s,{className:a.twJoin("block w-full items-start overflow-x-scroll scrollbar-hide",c&&"px-9",i),"data-testid":"design-system-textTab--container",children:e.jsx(s,{className:a.twMerge("mb-px inline-flex w-full gap-10",n&&"gap-0"),children:r})}),e.jsx(o,{className:"w-full"})]})};
|
|
@@ -4,6 +4,7 @@ export interface RootProps extends PropsWithChildren {
|
|
|
4
4
|
defaultActive?: number;
|
|
5
5
|
isFit?: boolean;
|
|
6
6
|
hasPadding?: boolean;
|
|
7
|
+
isFull?: boolean;
|
|
7
8
|
onChange?: (index: number) => void;
|
|
8
9
|
}
|
|
9
10
|
export interface TabProps extends PropsWithChildren {
|
|
@@ -23,5 +24,6 @@ export type TabContextType = {
|
|
|
23
24
|
animationDirection: 'right' | 'left' | undefined;
|
|
24
25
|
isFit: boolean;
|
|
25
26
|
hasPadding: boolean;
|
|
27
|
+
isFull: boolean;
|
|
26
28
|
handleTabClick: (index: number) => void;
|
|
27
29
|
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { PropsWithChildren } from 'react';
|
|
2
|
+
export interface WithRichTooltipProps extends PropsWithChildren {
|
|
3
|
+
size?: 'sm' | 'md';
|
|
4
|
+
variant?: 'right' | 'down';
|
|
5
|
+
title?: string;
|
|
6
|
+
description?: string;
|
|
7
|
+
className?: string;
|
|
8
|
+
}
|
|
9
|
+
declare const WithRichTooltip: ({ size, variant, title, description, children, className, }: WithRichTooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export default WithRichTooltip;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),i=require("react"),r=(require("../../../_virtual/_tslib.js"),require("../../Atoms/Checkbox/Checkbox.js"),require("../../Atoms/Box/Box.js")),s=(require("../../Atoms/Radio/Radio.js"),require("../../Atoms/SystemIcon/SystemIcon.js")),o=(require("../../Atoms/TextField/TextField.js"),require("../../Atoms/ChoiceChip/ChoiceChip.js"),require("../../Atoms/Label/Label.js"),require("../../Atoms/ModalContext/ModalContext.parts.js"),require("../../Molecules/RichTooltip/RichTooltip.js"));module.exports=function(n){var c=n.size,c=void 0===c?"md":c,a=n.variant,a=void 0===a?"right":a,l=n.title,m=n.description,u=n.children,n=n.className,d="md"===c?"medium_information":"small_information",h="right"===a,a="down"===a,x=i.useState(!1),j=x[0],p=x[1];return e.jsxs(r,{className:"relative h-fit w-fit","data-testid":"design-system-withRichTooltip",children:[e.jsx(r,{"data-testid":"design-system-withRichTooltip--trigger",className:"flex h-fit w-fit shrink-0 items-center justify-center",onMouseEnter:function(){return p(!0)},onMouseLeave:function(){return p(!1)},onClick:function(){return p(function(e){return!e})},children:e.jsx(s,{name:d,className:"text-w-gray-400",testId:"md"===c?"design-system-withRichTooltip--trigger-icon-md":"design-system-withRichTooltip--trigger-icon-sm"})}),j&&e.jsx(o,{title:l,description:m,className:t.twMerge("absolute",h&&"left-[calc(100%_+_12px)] top-0",a&&"left-0 top-[calc(100%_+_12px)]",n),children:u})]})};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var e=require("./WithRichTooltip.js");module.exports=e;
|
|
@@ -8,3 +8,4 @@ export type { SkillItem, LegacySkillItem } from './Autocomplete';
|
|
|
8
8
|
export { default as TableOfContents } from './TableOfContents';
|
|
9
9
|
export type { TableOfContentsProps, ContentItem } from './TableOfContents';
|
|
10
10
|
export { default as Dialog } from './Dialog';
|
|
11
|
+
export { default as WithRichTooltip } from './WithRichTooltip';
|
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"),
|
|
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"),l=require("./Components/Atoms/Switch/Switch.js"),C=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/SkillLabel/SkillLabel.js"),h=require("./Components/Atoms/ImageLabel/ImageLabel.js"),B=require("./Components/Atoms/Label/Label.js"),T=require("./Components/Atoms/ModalContext/ModalContext.js"),L=require("./Components/Molecules/WithBadge/WithBadge.js"),A=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"),R=require("./Components/Molecules/InputChip/InputChip.js"),w=require("./Components/Molecules/List/List.js"),D=require("./Components/Molecules/Pagination/Pagination.js"),y=require("./Components/Molecules/Drawer/Drawer.js"),O=require("./Components/Molecules/SnackBar/SnackBar.js"),v=require("./Components/Molecules/PlainTooltip/PlainTooltip.js"),G=require("./Components/Molecules/RichTooltip/RichTooltip.js"),P=require("./Components/Molecules/RangeSlider/RangeSlider.js"),W=require("./Components/Molecules/RadioGroup/RadioGroup.js"),F=require("./Components/Organisms/TextTab/TextTab.js"),N=require("./Components/Organisms/GNBList/GNBList.js"),f=require("./Components/Organisms/TextFieldDropdown/TextFieldDropdown.js"),z=require("./Components/Organisms/TextButtonsDropdown/TextButtonsDropdown.js"),E=require("./Components/Organisms/WithSnackBar/WithSnackBar.js"),H=require("./Components/Organisms/Autocomplete/Autocomplete.js"),J=require("./Components/Organisms/TableOfContents/TableOfContents.js"),K=require("./Components/Organisms/Dialog/Dialog.js"),Q=require("./Components/Organisms/WithRichTooltip/WithRichTooltip.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=l,exports.SystemIcon=C,exports.NewBadge=c,exports.ChoiceChip=d,exports.Textarea=j,exports.IconButton=q,exports.SkillLabel=g,exports.ImageLabel=h,exports.Label=B,exports.ModalContext=T,exports.WithBadge=L,exports.GridLayout=A,exports.CheckboxList=b,exports.CheckboxCard=M,exports.RadioList=S,exports.MessageBox=k,exports.TextButton=I,exports.InputChip=R,exports.List=w,exports.Pagination=D,exports.Drawer=y,exports.SnackBar=O,exports.PlainTooltip=v,exports.RichTooltip=G,exports.RangeSlider=P,exports.RadioGroup=W,exports.TextTab=F,exports.GNBList=N,exports.TextFieldDropdown=f,exports.TextButtonsDropdown=z,exports.WithSnackBar=E,exports.Autocomplete=H,exports.TableOfContents=J,exports.Dialog=K,exports.WithRichTooltip=Q;
|
package/package.json
CHANGED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { ComponentProps } from 'react';
|
|
2
|
-
export interface TooltipProps extends ComponentProps<'div'> {
|
|
3
|
-
variant?: 'plain' | 'rich';
|
|
4
|
-
direction?: 'up' | 'down' | 'left' | 'right';
|
|
5
|
-
title?: string;
|
|
6
|
-
description?: string;
|
|
7
|
-
}
|
|
8
|
-
declare const Tooltip: ({ direction, children, className, variant, title, description, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
export default Tooltip;
|
|
@@ -1 +0,0 @@
|
|
|
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,c=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:c})}),e.jsx(s,{variant:"body3",className:"text-w-gray-400",children:i})]}):e.jsxs(r,{className:"relative h-fit w-fit 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 justify-center rounded-lg bg-w-black px-3 py-1 text-center",children:e.jsx(s,{variant:"body3",className:"whitespace-pre text-wrap break-all font-medium text-w-white opacity-100",children:l})})]})})};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";var e=require("./Tooltip.js");module.exports=e;
|
|
File without changes
|
/package/dist/Components/Molecules/{Tooltip/Tooltip.parts.js → PlainTooltip/PlainTooltip.parts.js}
RENAMED
|
File without changes
|