@sellmate/design-system 1.20.1 → 1.22.0

package/dist/collection/components/sd-ghost-button/sd-ghost-button.js

@@ -1,14 +1,21 @@
 import { h } from "@stencil/core";
 import { GHOST_BUTTON_CONTENT_COLORS, GHOST_BUTTON_DISABLED_COLORS, GHOST_BUTTON_FOCUS_RING_COLOR, GHOST_BUTTON_HOVER_BG_COLORS, GHOST_BUTTON_HOVER_OPACITY, GHOST_BUTTON_RADIUS, GHOST_BUTTON_SIZES, } from "./sd-ghost-button.config";
 export class SdGhostButton {
+    /** 버튼에 표시할 아이콘명 */
     icon;
+    /** 버튼 크기 */
     size = 'sm';
+    /** 버튼 색상 의도 */
     intent = 'default';
+    /** 스크린리더용 접근성 레이블 */
     ariaLabel = '';
+    /** 호버 시 표시할 툴팁 텍스트 */
     tooltipText;
+    /** 비활성 상태 여부 */
     disabled = false;
     hostEl;
     isTooltipOpen = false;
+    /** 버튼 클릭 시 발생합니다. */
     click;
     hasWarnedMissingAriaLabel = false;
     componentWillLoad() {
@@ -23,10 +30,18 @@ export class SdGhostButton {
         }
         this.click.emit(event);
     };
-    handleMouseEnter = () => { this.isTooltipOpen = true; };
-    handleMouseLeave = () => { this.isTooltipOpen = false; };
-    handleFocus = () => { this.isTooltipOpen = true; };
-    handleBlur = () => { this.isTooltipOpen = false; };
+    handleMouseEnter = () => {
+        this.isTooltipOpen = true;
+    };
+    handleMouseLeave = () => {
+        this.isTooltipOpen = false;
+    };
+    handleFocus = () => {
+        this.isTooltipOpen = true;
+    };
+    handleBlur = () => {
+        this.isTooltipOpen = false;
+    };
     componentWillRender() {
         this.warnIfMissingAriaLabel();
     }
@@ -51,7 +66,7 @@ export class SdGhostButton {
         const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
         const tooltipText = (this.tooltipText ?? '').trim();
         const hasTooltip = tooltipText.length > 0;
-        return (h("button", { key: '59b95275f6acd737d4b0d5c2187e1d40b3a6543f', class: {
+        return (h("button", { key: 'a49c5b93f4dfcd434c20225acae4c7454e8f8e4f', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
@@ -60,7 +75,7 @@ export class SdGhostButton {
                 '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && !this.disabled && (h("sd-portal", { key: 'd8ca94b6a931208c2c56eb2dbfee843935c6b666', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, h("div", { key: '450d5dc528ad4eeb4a2a0d2920fe4553ab3f91f8', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, h("sd-tag", { key: 'cc25d0e2794d3d4dc418b0c0aa1a57e4b76b56e1', name: "square_xs_grey", label: tooltipText })))), h("sd-icon", { key: 'bf9bf8bcc779011635fd34566ec7320d76f8d16b', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && !this.disabled && (h("sd-portal", { key: '36ef78d79a99da1fd26c282ef68293b9fb9f87b1', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, h("div", { key: 'a0cf8b4e84a79841ab09e6a81ee6bcbfe57e6805', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, h("sd-tag", { key: 'a263167142b891add0a32900504f541dcb3a4959', name: "square_xs_grey", label: tooltipText })))), h("sd-icon", { key: 'ba90e9b489b4f43577313052635db598e3d30037', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
     static get is() { return "sd-ghost-button"; }
     static get originalStyleUrls() {
@@ -92,7 +107,7 @@ export class SdGhostButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC84\uD2BC\uC5D0 \uD45C\uC2DC\uD560 \uC544\uC774\uCF58\uBA85"
                 },
                 "getter": false,
                 "setter": false,
@@ -118,7 +133,7 @@ export class SdGhostButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC84\uD2BC \uD06C\uAE30"
                 },
                 "getter": false,
                 "setter": false,
@@ -145,7 +160,7 @@ export class SdGhostButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC84\uD2BC \uC0C9\uC0C1 \uC758\uB3C4"
                 },
                 "getter": false,
                 "setter": false,
@@ -165,7 +180,7 @@ export class SdGhostButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC2A4\uD06C\uB9B0\uB9AC\uB354\uC6A9 \uC811\uADFC\uC131 \uB808\uC774\uBE14"
                 },
                 "getter": false,
                 "setter": false,
@@ -185,7 +200,7 @@ export class SdGhostButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD638\uBC84 \uC2DC \uD45C\uC2DC\uD560 \uD234\uD301 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -204,7 +219,7 @@ export class SdGhostButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -228,7 +243,7 @@ export class SdGhostButton {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC84\uD2BC \uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "MouseEvent",

package/dist/collection/components/sd-guide/sd-guide.js

@@ -11,11 +11,17 @@ const ICON_BY_TYPE = {
 };
 export class SdGuide {
     el;
+    /** 가이드 타입 (tip: 팝업, notion: 외부 링크) */
     type = 'tip';
+    /** 버튼에 표시할 레이블 (없으면 type에 따른 기본값 사용) */
     label = '';
+    /** 팝업에 표시할 메시지 (배열이면 리스트로 렌더링) */
     message = '';
+    /** notion 타입일 때 클릭 시 이동할 URL */
     url = '';
+    /** 팝업 제목 (없으면 type에 따른 기본값 사용) */
     popupTitle = '';
+    /** 팝업 너비 (px, 없으면 426px) */
     popupWidth;
     popupShow = false;
     guideRef;
@@ -77,10 +83,10 @@ export class SdGuide {
         const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
         if (isActive)
             buttonClasses.push('sd-guide__button--active');
-        return (h("div", { key: 'ea4f220faf6165f7650360f74a19d9f781b81489', class: "sd-guide", style: this.guideStyle }, h("sd-button", { key: 'c90eaa6cc42a9a2f20b8fc79db16697db0cf2ff2', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (h("sd-portal", { key: '21f57a739141ffa36f3b799a2688ca5b3c1bd428', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '94e12fa797748a02334b97e13c5012ab95bc2bce', class: "sd-guide__popup", style: {
+        return (h("div", { key: 'd89a517d78a8f9624c94d320291e5a4b5bd0715d', class: "sd-guide", style: this.guideStyle }, h("sd-button", { key: '6e959f0f5fd6f816fd1cef4545852b860d30de85', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (h("sd-portal", { key: 'a837cababa5504400293729ad28e4dcd2450eeec', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '61dd3c574495f85021495d80865e162999368f9c', class: "sd-guide__popup", style: {
                 ...this.guideStyle,
                 width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
-            } }, h("sd-ghost-button", { key: '6fc71032016e7a3be0581508ef0ecc6772981185', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), h("div", { key: '385c0c18bc888be6a654525dc6f4359a56ad6de9', class: "sd-guide__popup__header" }, h("sd-icon", { key: '34624d2ac3397ba15b2dc7ba23dc460a87cb878b', name: iconName, size: 24, color: popupIconColor }), h("h3", { key: 'dd3527ec329698b0fd1ec82f2a7d0cf5865802c2', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), h("ul", { key: '429357d0203acdf31177353ceb45d9ac41fadae7', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+            } }, h("sd-ghost-button", { key: 'dbf8aebd1be4b5286bf726d22e0a5f80c29e867f', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), h("div", { key: '5a08fa823bb8839e654d7bb2ba027df2dc68b85b', class: "sd-guide__popup__header" }, h("sd-icon", { key: '1dda43d100b4f5f3b7fa81115a1ac4bfbd584a51', name: iconName, size: 24, color: popupIconColor }), h("h3", { key: 'cfe6342f44f4e1355397ed94d6db74807f917548', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), h("ul", { key: '9acc2f507ed3d3d6f1fda27a9e5cf66dcc2f619d', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {
@@ -128,7 +134,7 @@ export class SdGuide {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uAC00\uC774\uB4DC \uD0C0\uC785 (tip: \uD31D\uC5C5, notion: \uC678\uBD80 \uB9C1\uD06C)"
                 },
                 "getter": false,
                 "setter": false,
@@ -148,7 +154,7 @@ export class SdGuide {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC84\uD2BC\uC5D0 \uD45C\uC2DC\uD560 \uB808\uC774\uBE14 (\uC5C6\uC73C\uBA74 type\uC5D0 \uB530\uB978 \uAE30\uBCF8\uAC12 \uC0AC\uC6A9)"
                 },
                 "getter": false,
                 "setter": false,
@@ -168,7 +174,7 @@ export class SdGuide {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD31D\uC5C5\uC5D0 \uD45C\uC2DC\uD560 \uBA54\uC2DC\uC9C0 (\uBC30\uC5F4\uC774\uBA74 \uB9AC\uC2A4\uD2B8\uB85C \uB80C\uB354\uB9C1)"
                 },
                 "getter": false,
                 "setter": false,
@@ -188,7 +194,7 @@ export class SdGuide {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "notion \uD0C0\uC785\uC77C \uB54C \uD074\uB9AD \uC2DC \uC774\uB3D9\uD560 URL"
                 },
                 "getter": false,
                 "setter": false,
@@ -208,7 +214,7 @@ export class SdGuide {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD31D\uC5C5 \uC81C\uBAA9 (\uC5C6\uC73C\uBA74 type\uC5D0 \uB530\uB978 \uAE30\uBCF8\uAC12 \uC0AC\uC6A9)"
                 },
                 "getter": false,
                 "setter": false,
@@ -228,7 +234,7 @@ export class SdGuide {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD31D\uC5C5 \uB108\uBE44 (px, \uC5C6\uC73C\uBA74 426px)"
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/sd-icon/sd-icon.js

@@ -12,6 +12,7 @@ export class SdIcon {
     rotate;
     /** 접근성을 위한 라벨 */
     label;
+    /** 아이콘 i 엘리먼트에 적용할 인라인 스타일 */
     iconStyle = {};
     getIconClasses() {
         const classes = ['sd-icon'];
@@ -161,7 +162,7 @@ export class SdIcon {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC544\uC774\uCF58 i \uC5D8\uB9AC\uBA3C\uD2B8\uC5D0 \uC801\uC6A9\uD560 \uC778\uB77C\uC778 \uC2A4\uD0C0\uC77C"
                 },
                 "getter": false,
                 "setter": false,