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

package/dist/esm/assets/scripts/notification/MessageNotification.js

@@ -1,6 +1,6 @@
 import { FeaturedIcon } from '../featuredIcon';
 import { sanitizeHtml } from '../utils/sanitize';
-import { CLASS_NAMES, MESSAGE_BLOCK_SIZES, MESSAGE_ICON_MAP, MESSAGE_SIZES } from './const';
+import { CLASS_NAMES, MESSAGE_BLOCK_ICON_MAP, MESSAGE_BLOCK_SIZES, MESSAGE_ICON_MAP, MESSAGE_SIZES } from './const';
 import { buildMessageTemplate } from './messageTemplate';
 import { applySupportTextLinkTarget, bindNotificationEvents, createWrapperElement, setupAutoClose } from './utils';
 export class MessageNotification {
@@ -34,16 +34,14 @@ export class MessageNotification {
       supportTextLinkTarget
     } = this.options;
     const isBlock = variant === 'block';
-    // default 는 neutral, error, warning, success 4가지 색상만 지원 — info 는 block 에서만 유지한다.
-    const actualColor = !isBlock && color === 'info' ? 'neutral' : color;
     const wrapperClassName = [isBlock ? CLASS_NAMES.MESSAGE.BLOCK : '', className].filter(Boolean).join(' ');
-    const wrapper = createWrapperElement(CLASS_NAMES.MESSAGE.BASE, actualColor, wrapperClassName);
-    const featuredIconElement = this.createFeaturedIcon(actualColor, isBlock);
+    const wrapper = createWrapperElement(CLASS_NAMES.MESSAGE.BASE, color, wrapperClassName);
+    const featuredIconElement = this.createFeaturedIcon(color, isBlock);
     wrapper.innerHTML = sanitizeHtml(buildMessageTemplate({
       title,
       supportingText,
       supportTextLink: isBlock ? supportTextLink : undefined,
-      color: actualColor,
+      color,
       actions,
       onClose,
       hideCloseButton,
@@ -60,15 +58,14 @@ export class MessageNotification {
     }
     return wrapper;
   }
-  /** 색상별 FeaturedIcon. default 는 md(40/20), block 은 sm(32/16). */
+  /** 색상별 FeaturedIcon. default 는 md(40/20), block 은 sm(32/16). info 아이콘만 variant 별로 다르다. */
   createFeaturedIcon(color, isBlock) {
-    const iconFunction = MESSAGE_ICON_MAP[color];
-    if (!iconFunction) return null;
+    const iconFunction = (isBlock ? MESSAGE_BLOCK_ICON_MAP : MESSAGE_ICON_MAP)[color];
     const sizes = isBlock ? MESSAGE_BLOCK_SIZES : MESSAGE_SIZES;
     this.featuredIcon = FeaturedIcon.create({
       svgString: iconFunction(sizes.ICON_PIXEL),
       theme: 'light-circle',
-      // FeaturedIcon 에는 info 색이 없다. block+info 의 violet 톤은 message SCSS 가 덮어쓴다.
+      // FeaturedIcon 에는 info 색이 없다. info 의 violet 톤은 message SCSS 가 덮어쓴다.
       color: color === 'info' ? 'neutral' : color,
       size: sizes.FEATURED_ICON,
       // React 구현과 동일하게 `__icon`(flex-shrink: 0)을 부여한다.

package/dist/esm/assets/scripts/notification/const/icons.js

@@ -1,3 +1,8 @@
+/**
+ * message block 변형의 InfoCircle. `SVG_ICONS['info-circle']`은 full-width 전용 class·color 가 박혀 있어
+ * 쓰지 않는다 (`.ncua-full-width-notification__icon`은 모바일에서 숨겨진다).
+ */
+const INFO_CIRCLE_ICON = size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 16v-4m0-4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`;
 // SVG 아이콘들 (크기는 동적으로 설정)
 export const SVG_ICONS = {
   'pin-02': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.377 15.616 2.72 21.273m8.974-14.631-1.56 1.56a2 2 0 0 1-.264.242 1 1 0 0 1-.207.111c-.082.032-.17.05-.347.085l-3.665.733c-.952.19-1.428.286-1.65.537a1 1 0 0 0-.243.8c.046.333.39.677 1.076 1.363l7.086 7.086c.686.687 1.03 1.03 1.362 1.076a1 1 0 0 0 .801-.242c.251-.223.346-.7.537-1.651l.733-3.665c.035-.176.053-.265.085-.347a1 1 0 0 1 .11-.207c.051-.072.115-.136.242-.263l1.561-1.561c.082-.082.122-.122.167-.158q.06-.047.126-.085c.05-.029.103-.051.208-.097l2.495-1.069c.727-.312 1.091-.467 1.256-.72a1 1 0 0 0 .144-.747c-.06-.295-.34-.575-.9-1.135l-5.142-5.143c-.56-.56-.84-.84-1.135-.9a1 1 0 0 0-.748.145c-.252.165-.407.529-.72 1.256l-1.068 2.495a2 2 0 0 1-.097.208 1 1 0 0 1-.085.126 2 2 0 0 1-.158.167"></path></svg>`,
@@ -23,12 +28,16 @@ export const FULL_WIDTH_ICON_MAP = {
   info: SVG_ICONS['info-circle']
 };
 export const ICON_MAP = FULL_WIDTH_ICON_MAP;
-/**
- * message 타입 아이콘. floating 과 같은 4색에 block 변형 전용 info 를 더한다.
- * `SVG_ICONS['info-circle']`은 full-width 전용 class·color 가 박혀 있어 쓰지 않는다
- * (`.ncua-full-width-notification__icon`은 모바일에서 숨겨진다).
- */
+/** message 기본 타입 아이콘. floating 과 같은 4색에 info(neutral 과 같은 핀)를 더한다. */
 export const MESSAGE_ICON_MAP = {
-  ...FLOATING_ICON_MAP,
-  info: size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 16v-4m0-4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`
+  neutral: SVG_ICONS['pin-02'],
+  error: SVG_ICONS['alert-triangle'],
+  warning: SVG_ICONS['alert-circle'],
+  success: SVG_ICONS['check-circle'],
+  info: SVG_ICONS['pin-02']
+};
+/** block 변형 아이콘. info 만 InfoCircle 로 다르다 (#536 유지). */
+export const MESSAGE_BLOCK_ICON_MAP = {
+  ...MESSAGE_ICON_MAP,
+  info: INFO_CIRCLE_ICON
 };

package/dist/esm/assets/scripts/notification/const/index.js

@@ -1,4 +1,4 @@
 // Re-export all constants and types from separate files
 export { CLASS_NAMES } from './classNames';
-export { FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP, ICON_MAP, MESSAGE_ICON_MAP, SVG_ICONS } from './icons';
+export { FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP, ICON_MAP, MESSAGE_BLOCK_ICON_MAP, MESSAGE_ICON_MAP, SVG_ICONS } from './icons';
 export { CLOSE_BUTTON_SIZES, CLOSE_BUTTON_SVG_SIZES, FEATURED_ICON_SIZES, FULL_WIDTH_SIZES, getSizes, ICON_PIXEL_SIZES, MESSAGE_BLOCK_SIZES, MESSAGE_SIZES } from './sizes';

package/dist/esm/constant/notification.js

@@ -18,7 +18,6 @@ export const HIDE_PERMANENTLY_LABEL = {
  * message 타입 닫기(X) 아이콘의 color 별 색.
  *
  * React(`MessageNotification.tsx`)와 Vanilla(`messageTemplate.ts`)가 함께 참조하는 단일 출처다.
- * `info`는 `variant: 'block'`에서만 렌더된다(default 는 neutral 로 폴백).
  */
 export const MESSAGE_CLOSE_ICON_COLOR = {
   neutral: COLOR.gray700,

package/dist/esm/src/components/overlays/notification/FloatingNotification.js

@@ -27,7 +27,7 @@ const iconMap = {
   error: AlertTriangle,
   warning: AlertCircle,
   success: CheckCircle
-  // info 는 full-width 전용이라 floating 아이콘 매핑 없음.
+  // info 는 floating 에서 지원하지 않으므로 아이콘 매핑 없음.
 };
 /**
  * NotificationColor → FeaturedIconColor 매핑.

package/dist/esm/src/components/overlays/notification/MessageNotification.js

@@ -5,12 +5,17 @@ import { forwardRef } from 'react';
 import { MESSAGE_CLOSE_ICON_COLOR } from '../../../../constant/notification';
 import { MessageNotificationActions, MessageNotificationContent } from './MessageNotificationParts';
 import { useAutoClose } from './useAutoClose';
-const iconMap = {
+const DEFAULT_ICON_MAP = {
   neutral: Pin02,
   error: AlertTriangle,
   warning: AlertCircle,
   success: CheckCircle,
-  // info 는 variant="block" 에서만 도달한다 (default 는 neutral 로 폴백).
+  // 디자인 기준 default 의 info 는 neutral 과 같은 핀이다.
+  info: Pin02
+};
+// block 의 info 는 InfoCircle 을 유지한다 (#536).
+const BLOCK_ICON_MAP = {
+  ...DEFAULT_ICON_MAP,
   info: InfoCircle
 };
 const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -32,10 +37,9 @@ const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...rest
   } = _ref;
   const isBlock = variant === 'block';
-  // default 는 neutral, error, warning, success 4가지 색상만 지원 — info 는 block 에서만 유지한다.
-  const validColor = !isBlock && color === 'info' ? 'neutral' : color;
-  // FeaturedIcon 에는 info 색이 없다. block+info 의 violet 톤은 message SCSS 가 덮어쓴다.
-  const featuredIconColor = validColor === 'info' ? 'neutral' : validColor;
+  const iconMap = isBlock ? BLOCK_ICON_MAP : DEFAULT_ICON_MAP;
+  // FeaturedIcon 에는 info 색이 없다. info 의 violet 톤은 message SCSS 가 덮어쓴다.
+  const featuredIconColor = color === 'info' ? 'neutral' : color;
   // message 는 부모가 언마운트로 닫으므로 hideCloseButton 기본 autoClose 를 적용하지 않는다.
   const shouldRemove = useAutoClose({
     autoClose,
@@ -46,7 +50,7 @@ const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
   }
   return _jsx("div", {
     ref: ref,
-    className: classNames('ncua-message-notification', `ncua-message-notification--${validColor}`, {
+    className: classNames('ncua-message-notification', `ncua-message-notification--${color}`, {
       'ncua-message-notification--block': isBlock
     }, className),
     role: "alert",
@@ -60,7 +64,7 @@ const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
           supportingText: supportingText,
           supportTextLink: isBlock ? supportTextLink : undefined,
           supportTextLinkTarget: supportTextLinkTarget,
-          icon: Icon || iconMap[validColor],
+          icon: Icon || iconMap[color],
           iconColor: featuredIconColor,
           iconSize: isBlock ? 'sm' : 'md'
         }), _jsx(MessageNotificationActions, {
@@ -69,7 +73,7 @@ const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
           hideCloseButton: hideCloseButton,
           onHidePermanently: onHidePermanently,
           hidePermanentlyLabel: hidePermanentlyLabel,
-          closeIconColor: MESSAGE_CLOSE_ICON_COLOR[validColor]
+          closeIconColor: MESSAGE_CLOSE_ICON_COLOR[color]
         })]
       })
     })

package/dist/esm/src/components/overlays/notification/__tests__/MessageNotification.test.js

@@ -1,4 +1,5 @@
 // @vitest-environment jsdom
+import { InfoCircle, Pin02 } from '@ncds/ui-admin-icon';
 import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
@@ -18,16 +19,12 @@ const SELECTOR = {
   CLOSE_BUTTON: '.ncua-message-notification__close-button'
 };
 const mounted = [];
-function renderMessageNotification() {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+function mount(element) {
   const container = document.createElement('div');
   document.body.appendChild(container);
   const root = createRoot(container);
   act(() => {
-    root.render(/*#__PURE__*/createElement(MessageNotification, {
-      title: '알림 제목',
-      ...props
-    }));
+    root.render(element);
   });
   mounted.push({
     root,
@@ -35,6 +32,20 @@ function renderMessageNotification() {
   });
   return container;
 }
+function renderMessageNotification() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return mount(/*#__PURE__*/createElement(MessageNotification, {
+    title: '알림 제목',
+    ...props
+  }));
+}
+/** 아이콘 컴포넌트를 단독 렌더해 `path[d]` 를 얻는다. 아이콘 판정은 d 비교로 한다. */
+function iconPathD(Icon) {
+  return mount(/*#__PURE__*/createElement(Icon)).querySelector('path')?.getAttribute('d') ?? null;
+}
+function renderedIconPathD(container) {
+  return container.querySelector(`${SELECTOR.ICON} svg path`)?.getAttribute('d') ?? null;
+}
 afterEach(() => {
   for (const {
     root,
@@ -143,17 +154,48 @@ describe('MessageNotification (React) — DOM 구조 계약', () => {
     expect(hideLink?.className.split(' ').filter(Boolean).sort()).toEqual(['ncua-message-notification__hide-link', 'ncua-notification__action-button']);
   });
 });
-describe('MessageNotification (React) — 공개 API 회귀 방지', () => {
-  it('지원하지 않는 color("info")는 neutral로 폴백한다', () => {
-    // Given/When: message 타입이 지원하지 않는 info 색상을 넘기면
+describe('MessageNotification (React) — color="info" (#568)', () => {
+  it('R-01: color="info" 는 neutral 로 폴백하지 않고 --info 수식자로 렌더한다', () => {
+    // Given/When: variant 미지정, info 색상으로 렌더하면
+    const root = renderMessageNotification({
+      color: 'info'
+    }).querySelector(SELECTOR.ROOT);
+    // Then: info 수식자가 있고 neutral 수식자는 없다
+    expect(root?.classList.contains('ncua-message-notification--info')).toBe(true);
+    expect(root?.classList.contains('ncua-message-notification--neutral')).toBe(false);
+  });
+  it('R-02: 기본 info 아이콘은 neutral 과 같은 Pin02 다', () => {
+    // Given/When: variant 미지정, info 색상으로 렌더하면
     const container = renderMessageNotification({
       color: 'info'
     });
-    // Then: neutral 수식자로 렌더되고 info 수식자는 없다
-    const root = container.querySelector(SELECTOR.ROOT);
-    expect(root?.classList.contains('ncua-message-notification--neutral')).toBe(true);
-    expect(root?.classList.contains('ncua-message-notification--info')).toBe(false);
+    // Then: 아이콘 path 가 Pin02 와 같다
+    const expected = iconPathD(Pin02);
+    expect(expected).not.toBeNull();
+    expect(renderedIconPathD(container)).toBe(expected);
   });
+  it('R-03: info 의 FeaturedIcon 은 neutral·md 로 렌더한다 (violet 톤은 SCSS 가 덮는다)', () => {
+    // Given/When: variant 미지정, info 색상으로 렌더하면
+    const icon = renderMessageNotification({
+      color: 'info'
+    }).querySelector(SELECTOR.ICON);
+    // Then: FeaturedIcon 에는 info 색이 없으므로 neutral 수식자와 md 사이즈가 유지된다
+    expect(icon?.classList.contains('ncua-featured-icon--neutral')).toBe(true);
+    expect(icon?.classList.contains('ncua-featured-icon--md')).toBe(true);
+  });
+  it('R-04: block 의 info 아이콘은 InfoCircle 을 유지한다', () => {
+    // Given/When: block 변형에 info 색상으로 렌더하면
+    const container = renderMessageNotification({
+      variant: 'block',
+      color: 'info'
+    });
+    // Then: 아이콘 path 가 InfoCircle 과 같다 (#536 회귀)
+    const expected = iconPathD(InfoCircle);
+    expect(expected).not.toBeNull();
+    expect(renderedIconPathD(container)).toBe(expected);
+  });
+});
+describe('MessageNotification (React) — 공개 API 회귀 방지', () => {
   it('닫기/다시 보지 않기 클릭 시 핸들러가 호출되고 접근성 속성이 유지된다', () => {
     // Given: 핸들러를 지정해 렌더하고
     const onClose = vi.fn();