@ncds/ui-admin 1.8.21-alpha.5 → 1.8.21-alpha.6

package/dist/types/assets/scripts/notification/FullWidthNotification.d.ts

@@ -9,6 +9,12 @@ export declare class FullWidthNotification {
     constructor(options: FullWidthNotificationOptions);
     private createElement;
     private buildTemplate;
+    /**
+     * 다시보지 않기 버튼.
+     *
+     * `label`은 이 함수의 반환값이 `wrapper.innerHTML`에 들어가기 전에 `sanitizeHtml`로
+     * 처리되므로 별도 이스케이프하지 않는다 — `renderSupportingText`와 같은 정책이다.
+     */
     private renderHidePermanentlyButton;
     private renderCloseButton;
     private bindEvents;

package/dist/types/assets/scripts/notification/const/types.d.ts

@@ -33,5 +33,15 @@ export interface BaseNotificationOptions {
     autoClose?: number;
     supportTextLink?: string;
     onHidePermanently?: () => void;
+    /**
+     * 다시보지 않기 버튼의 라벨. full-width, message 타입에서 사용 가능하며
+     * `onHidePermanently`를 지정했을 때만 렌더된다.
+     *
+     * 기본값은 타입별로 다르다 — message는 `'다시 보지 않기'`, full-width는 `'다시보지 않기'`.
+     * 표기가 통일되어 있지 않은 것은 현행 유지이며, 통일은 별도 결정 사항이다.
+     *
+     * 값은 HTML에 삽입되기 전 `sanitizeHtml`을 거친다.
+     */
+    hidePermanentlyLabel?: string;
 }
 export declare const MESSAGE_CLOSE_ICON_COLORS: Record<NotificationColor, string>;

package/dist/types/assets/scripts/notification/messageTemplate.d.ts

@@ -5,6 +5,7 @@ export interface MessageTemplateParams {
     actions?: NotificationAction[];
     onClose?: () => void;
     onHidePermanently?: () => void;
+    hidePermanentlyLabel?: string;
 }
 /**
  * Message Notification의 마크업을 만든다.

package/dist/types/constant/notification.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 다시보지 않기 버튼의 타입별 기본 문구.
+ *
+ * `hidePermanentlyLabel`을 지정하지 않았을 때 쓰인다.
+ * React(`src/components/overlays/notification/`)와 Vanilla(`assets/scripts/notification/`)
+ * 두 구현이 이 상수를 함께 참조한다 — 문구가 하드코딩으로 흩어져 서로 어긋나던 문제(#460)를
+ * 막기 위한 단일 출처다.
+ *
+ * `message`와 `fullWidth`의 띄어쓰기가 다른 것은 오타가 아니라 현행 유지다.
+ * 표기 통일은 별도 결정 사항이며, 결정되면 이 파일 한 곳만 고치면 된다.
+ */
+export declare const HIDE_PERMANENTLY_LABEL: {
+    readonly message: "다시 보지 않기";
+    readonly fullWidth: "다시보지 않기";
+};

package/dist/types/src/components/overlays/notification/FullWidthNotification.d.ts

@@ -40,6 +40,12 @@ interface FullWidthNotificationProps extends Omit<ComponentPropsWithoutRef<'div'
      * 다시보지 않기 이벤트 핸들러 (선택사항)
      */
     onHidePermanently?: () => void;
+    /**
+     * 다시보지 않기 버튼의 라벨 (선택사항)
+     * `onHidePermanently`를 지정했을 때만 렌더된다.
+     * @default '다시보지 않기'
+     */
+    hidePermanentlyLabel?: ReactNode;
 }
 declare const FullWidthNotification: import("react").ForwardRefExoticComponent<FullWidthNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { FullWidthNotificationProps };

package/dist/types/src/components/overlays/notification/MessageNotification.d.ts

@@ -35,6 +35,12 @@ interface MessageNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>,
      * 다시보지 않기 이벤트 핸들러 (선택사항)
      */
     onHidePermanently?: () => void;
+    /**
+     * 다시보지 않기 버튼의 라벨 (선택사항)
+     * `onHidePermanently`를 지정했을 때만 렌더된다.
+     * @default '다시 보지 않기'
+     */
+    hidePermanentlyLabel?: ReactNode;
 }
 declare const MessageNotification: import("react").ForwardRefExoticComponent<MessageNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { MessageNotificationProps };

package/dist/types/src/components/overlays/notification/MessageNotificationParts.d.ts

@@ -15,6 +15,7 @@ interface MessageNotificationActionsProps {
     actions?: NotificationAction[];
     onClose?: () => void;
     onHidePermanently?: () => void;
+    hidePermanentlyLabel?: ReactNode;
     closeIconColor: string;
 }
 /**
@@ -22,6 +23,6 @@ interface MessageNotificationActionsProps {
  * 이 컨테이너의 gap(12px)이 두 그룹 사이 간격을 만든다.
  * 표시할 요소가 하나도 없으면 빈 컨테이너를 남기지 않는다.
  */
-declare const MessageNotificationActions: ({ actions, onClose, onHidePermanently, closeIconColor, }: MessageNotificationActionsProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const MessageNotificationActions: ({ actions, onClose, onHidePermanently, hidePermanentlyLabel, closeIconColor, }: MessageNotificationActionsProps) => import("react/jsx-runtime").JSX.Element | null;
 export type { MessageNotificationActionsProps, MessageNotificationContentProps };
 export { MessageNotificationActions, MessageNotificationContent };

package/dist/types/src/components/overlays/notification/Notification.d.ts

@@ -68,6 +68,14 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
      * message, full-width 타입에서 사용 가능
      */
     onHidePermanently?: () => void;
+    /**
+     * 다시보지 않기 버튼의 라벨 (선택사항)
+     * message, full-width 타입에서 사용 가능하며 `onHidePermanently`를 지정했을 때만 렌더된다.
+     *
+     * 기본값은 타입별로 다르다 — message는 `'다시 보지 않기'`, full-width는 `'다시보지 않기'`.
+     * 표기가 통일되어 있지 않은 것은 현행 유지이며, 통일은 별도 결정 사항이다.
+     */
+    hidePermanentlyLabel?: ReactNode;
     /**
      * Portal 마운트 여부. `floating` 타입에서만 동작한다.
      *

package/dist/types/src/components/overlays/notification/__tests__/hidePermanentlyLabel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui-admin/assets/styles/style.css

@@ -2759,9 +2759,6 @@ button {
 .ncua-message-notification--neutral .ncua-notification__action-button--text, .ncua-message-notification--neutral .ncua-notification__action-button--text-gray {
   color: var(--gray-600);
 }
-.ncua-message-notification--neutral .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .ncua-message-notification--error {
   color: var(--primary-red-600);
   background-color: var(--primary-red-50);
@@ -2781,9 +2778,6 @@ button {
 .ncua-message-notification--error .ncua-notification__action-button--text, .ncua-message-notification--error .ncua-notification__action-button--text-gray {
   color: var(--primary-red-600);
 }
-.ncua-message-notification--error .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .ncua-message-notification--warning {
   color: var(--orange-600);
   background-color: var(--orange-50);
@@ -2803,9 +2797,6 @@ button {
 .ncua-message-notification--warning .ncua-notification__action-button--text, .ncua-message-notification--warning .ncua-notification__action-button--text-gray {
   color: var(--orange-600);
 }
-.ncua-message-notification--warning .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .ncua-message-notification--success {
   color: var(--green-600);
   background-color: var(--green-50);
@@ -2825,9 +2816,6 @@ button {
 .ncua-message-notification--success .ncua-notification__action-button--text, .ncua-message-notification--success .ncua-notification__action-button--text-gray {
   color: var(--green-600);
 }
-.ncua-message-notification--success .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .ncua-message-notification .ncua-notification__action-button {
   background: transparent;
   border: none;
@@ -2840,7 +2828,8 @@ button {
 .ncua-message-notification .ncua-notification__action-button--text, .ncua-message-notification .ncua-notification__action-button--text-gray {
   font-weight: var(--font-weights-commerce-sans-1);
 }
-.ncua-message-notification__hide-link.ncua-notification__action-button {
+.ncua-message-notification .ncua-message-notification__hide-link.ncua-notification__action-button {
+  color: var(--gray-500);
   font-weight: var(--font-weights-commerce-sans-1);
 }
 

package/dist/ui-admin/assets/styles/style.scoped.css

@@ -2751,9 +2751,6 @@
 .ncua-message-notification--neutral .ncua-notification__action-button--text, .ncua-message-notification--neutral .ncua-notification__action-button--text-gray {
   color: var(--gray-600);
 }
-.ncua-message-notification--neutral .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .ncua-message-notification--error {
   color: var(--primary-red-600);
   background-color: var(--primary-red-50);
@@ -2773,9 +2770,6 @@
 .ncua-message-notification--error .ncua-notification__action-button--text, .ncua-message-notification--error .ncua-notification__action-button--text-gray {
   color: var(--primary-red-600);
 }
-.ncua-message-notification--error .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .ncua-message-notification--warning {
   color: var(--orange-600);
   background-color: var(--orange-50);
@@ -2795,9 +2789,6 @@
 .ncua-message-notification--warning .ncua-notification__action-button--text, .ncua-message-notification--warning .ncua-notification__action-button--text-gray {
   color: var(--orange-600);
 }
-.ncua-message-notification--warning .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .ncua-message-notification--success {
   color: var(--green-600);
   background-color: var(--green-50);
@@ -2817,9 +2808,6 @@
 .ncua-message-notification--success .ncua-notification__action-button--text, .ncua-message-notification--success .ncua-notification__action-button--text-gray {
   color: var(--green-600);
 }
-.ncua-message-notification--success .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .ncua-message-notification .ncua-notification__action-button {
   background: transparent;
   border: none;
@@ -2832,7 +2820,8 @@
 .ncua-message-notification .ncua-notification__action-button--text, .ncua-message-notification .ncua-notification__action-button--text-gray {
   font-weight: var(--font-weights-commerce-sans-1);
 }
-.ncua-message-notification__hide-link.ncua-notification__action-button {
+.ncua-message-notification .ncua-message-notification__hide-link.ncua-notification__action-button {
+  color: var(--gray-500);
   font-weight: var(--font-weights-commerce-sans-1);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.8.21-alpha.5",
+  "version": "1.8.21-alpha.6",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",