@ncds/ui-admin 1.8.25 → 1.8.26-alpha.0

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

@@ -11,10 +11,10 @@ var _react = require("react");
 var _reactDom = require("react-dom");
 var _breakpoint = require("../../../constant/breakpoint");
 var _useMediaQuery = require("../../../hooks/useMediaQuery");
-var _button = require("../../action/button");
 var _ButtonCloseX = require("../../action/button/ButtonCloseX");
 var _FeaturedIcon = require("../../image-and-icons/featured-icon/FeaturedIcon");
 var _host = require("./host");
+var _NotificationActionButtons = require("./NotificationActionButtons");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // 호스트 싱글톤은 vanilla/React 양쪽이 동일한 함수를 공유한다 — host.ts 가 가까운 진입점 역할을
 // 하므로 React 컴포넌트는 deep relative path 로 vanilla internals 를 직접 import 하지 않는다.
@@ -157,12 +157,9 @@ const FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _re
             children: supportingText
           }), actions && (0, _jsxRuntime.jsx)("div", {
             className: "ncua-floating-notification__actions",
-            children: actions.map(action => (0, _jsxRuntime.jsx)(_button.Button, {
-              size: "xs",
-              hierarchy: action.hierarchy || 'text',
-              label: action.label,
-              onClick: action?.onClick
-            }, `${action.label}-${action.hierarchy}`))
+            children: (0, _jsxRuntime.jsx)(_NotificationActionButtons.NotificationActionButtons, {
+              actions: actions
+            })
           })]
         })]
       })

package/dist/cjs/src/components/overlays/notification/FullWidthNotification.js

@@ -10,6 +10,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _color = require("../../../../constant/color");
 var _notification = require("../../../../constant/notification");
+var _url = require("../../../utils/url");
+var _linkTarget = require("./linkTarget");
+var _NotificationActionButtons = require("./NotificationActionButtons");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const iconMap = {
   neutral: _uiAdminIcon.MessageChatSquare,
@@ -35,11 +38,14 @@ const FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _
     actions,
     autoClose = 0,
     supportTextLink,
+    supportTextLinkTarget,
     onHidePermanently,
     hidePermanentlyLabel = _notification.HIDE_PERMANENTLY_LABEL.fullWidth,
     ...rest
   } = _ref;
   const [shouldRemove, setShouldRemove] = (0, _react.useState)(false);
+  // unsafe URL(javascript: 등)이면 링크 없이 텍스트만 렌더한다 — Vanilla `renderSupportingText` 와 같은 정책.
+  const safeSupportTextLink = supportTextLink && (0, _url.isSafeUrl)(supportTextLink) ? supportTextLink : undefined;
   const closeIconSize = {
     width: 20,
     height: 20
@@ -93,12 +99,13 @@ const FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _
             children: [(0, _jsxRuntime.jsx)("span", {
               className: "ncua-full-width-notification__title",
               children: title
-            }), !supportTextLink && supportingText && (0, _jsxRuntime.jsx)("span", {
+            }), !safeSupportTextLink && supportingText && (0, _jsxRuntime.jsx)("span", {
               className: "ncua-full-width-notification__supporting-text",
               children: supportingText
-            }), supportTextLink && supportingText && (0, _jsxRuntime.jsx)("a", {
-              href: supportTextLink,
+            }), safeSupportTextLink && supportingText && (0, _jsxRuntime.jsx)("a", {
+              href: safeSupportTextLink,
               className: "ncua-full-width-notification__link",
+              ...(0, _linkTarget.getLinkTargetAttributes)(supportTextLinkTarget),
               children: (0, _jsxRuntime.jsx)("span", {
                 className: "ncua-full-width-notification__supporting-text",
                 children: supportingText
@@ -109,11 +116,9 @@ const FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _
           className: "ncua-full-width-notification__actions-container",
           children: [actions && (0, _jsxRuntime.jsx)("div", {
             className: "ncua-full-width-notification__actions",
-            children: actions.map(action => (0, _jsxRuntime.jsx)("button", {
-              onClick: action.onClick,
-              className: (0, _classnames.default)('ncua-notification__action-button', `ncua-notification__action-button--${action.hierarchy || 'text'}`),
-              children: action.label
-            }, `${action.label}-${action.hierarchy}`))
+            children: (0, _jsxRuntime.jsx)(_NotificationActionButtons.NotificationActionButtons, {
+              actions: actions
+            })
           }), onHidePermanently && (0, _jsxRuntime.jsx)("button", {
             type: "button",
             className: (0, _classnames.default)('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-full-width-notification__link'),

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

@@ -8,20 +8,16 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _color = require("../../../../constant/color");
+var _notification = require("../../../../constant/notification");
 var _MessageNotificationParts = require("./MessageNotificationParts");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const iconMap = {
   neutral: _uiAdminIcon.Pin02,
   error: _uiAdminIcon.AlertTriangle,
   warning: _uiAdminIcon.AlertCircle,
-  success: _uiAdminIcon.CheckCircle
-};
-const iconColorMap = {
-  neutral: 'gray700',
-  error: 'red500',
-  warning: 'orange500',
-  success: 'green600'
+  success: _uiAdminIcon.CheckCircle,
+  // info 는 variant="block" 에서만 도달한다 (default 는 neutral 로 폴백).
+  info: _uiAdminIcon.InfoCircle
 };
 const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
@@ -34,13 +30,21 @@ const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _reac
     actions,
     onHidePermanently,
     hidePermanentlyLabel,
+    variant = 'default',
+    supportTextLink,
+    supportTextLinkTarget,
     ...rest
   } = _ref;
-  // message 타입은 neutral, error, warning, success 4가지 색상만 지원
-  const validColor = color === 'info' ? 'neutral' : color;
+  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;
   return (0, _jsxRuntime.jsx)("div", {
     ref: ref,
-    className: (0, _classnames.default)('ncua-message-notification', `ncua-message-notification--${validColor}`, className),
+    className: (0, _classnames.default)('ncua-message-notification', `ncua-message-notification--${validColor}`, {
+      'ncua-message-notification--block': isBlock
+    }, className),
     role: "alert",
     ...rest,
     children: (0, _jsxRuntime.jsx)("div", {
@@ -50,15 +54,17 @@ const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _reac
         children: [(0, _jsxRuntime.jsx)(_MessageNotificationParts.MessageNotificationContent, {
           title: title,
           supportingText: supportingText,
+          supportTextLink: isBlock ? supportTextLink : undefined,
+          supportTextLinkTarget: supportTextLinkTarget,
           icon: Icon || iconMap[validColor],
-          iconColor: validColor,
-          showIcon: Boolean(iconMap[validColor])
+          iconColor: featuredIconColor,
+          iconSize: isBlock ? 'sm' : 'md'
         }), (0, _jsxRuntime.jsx)(_MessageNotificationParts.MessageNotificationActions, {
           actions: actions,
           onClose: onClose,
           onHidePermanently: onHidePermanently,
           hidePermanentlyLabel: hidePermanentlyLabel,
-          closeIconColor: _color.COLOR[iconColorMap[validColor] || 'gray700']
+          closeIconColor: _notification.MESSAGE_CLOSE_ICON_COLOR[validColor]
         })]
       })
     })

package/dist/cjs/src/components/overlays/notification/MessageNotificationParts.js

@@ -7,26 +7,34 @@ exports.MessageNotificationContent = exports.MessageNotificationActions = void 0
 var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _notification = require("../../../../constant/notification");
-var _button = require("../../action/button");
+var _url = require("../../../utils/url");
 var _FeaturedIcon = require("../../image-and-icons/featured-icon/FeaturedIcon");
-/** 아이콘 + 제목/서포팅 텍스트 영역. */
+var _linkTarget = require("./linkTarget");
+var _NotificationActionButtons = require("./NotificationActionButtons");
+/** 아이콘 + 제목/서포팅 텍스트(또는 텍스트 링크) 영역. */
 const MessageNotificationContent = _ref => {
   let {
     title,
     supportingText,
+    supportTextLink,
+    supportTextLinkTarget,
     icon,
     iconColor,
-    showIcon
+    iconSize
   } = _ref;
   const featuredIconProps = {
     icon: icon || _uiAdminIcon.Pin02,
-    size: 'md',
+    size: iconSize,
     color: iconColor,
     theme: 'light-circle'
   };
+  const supportingTextNode = supportingText && (0, _jsxRuntime.jsx)("span", {
+    className: "ncua-message-notification__supporting-text",
+    children: supportingText
+  });
   return (0, _jsxRuntime.jsxs)("div", {
     className: "ncua-message-notification__content-wrapper",
-    children: [showIcon && (0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, {
+    children: [(0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, {
       ...featuredIconProps,
       className: "ncua-message-notification__icon"
     }), (0, _jsxRuntime.jsxs)("div", {
@@ -34,10 +42,12 @@ const MessageNotificationContent = _ref => {
       children: [(0, _jsxRuntime.jsx)("span", {
         className: "ncua-message-notification__title",
         children: title
-      }), supportingText && (0, _jsxRuntime.jsx)("span", {
-        className: "ncua-message-notification__supporting-text",
-        children: supportingText
-      })]
+      }), supportTextLink && (0, _url.isSafeUrl)(supportTextLink) && supportingTextNode ? (0, _jsxRuntime.jsx)("a", {
+        href: supportTextLink,
+        className: "ncua-message-notification__link",
+        ...(0, _linkTarget.getLinkTargetAttributes)(supportTextLinkTarget),
+        children: supportingTextNode
+      }) : supportingTextNode]
     })]
   });
 };
@@ -62,12 +72,9 @@ const MessageNotificationActions = _ref2 => {
     className: "ncua-message-notification__actions-container",
     children: [hasActions && (0, _jsxRuntime.jsx)("div", {
       className: "ncua-message-notification__actions",
-      children: actions?.map(action => (0, _jsxRuntime.jsx)(_button.Button, {
-        size: "xs",
-        hierarchy: action.hierarchy || 'text',
-        label: action.label,
-        onClick: action?.onClick
-      }, `${action.label}-${action.hierarchy}`))
+      children: (0, _jsxRuntime.jsx)(_NotificationActionButtons.NotificationActionButtons, {
+        actions: actions ?? []
+      })
     }), hasFooter && (0, _jsxRuntime.jsxs)("div", {
       className: "ncua-message-notification__footer-container",
       children: [onHidePermanently && (0, _jsxRuntime.jsx)("button", {

package/dist/cjs/src/components/overlays/notification/Notification.js

@@ -19,6 +19,8 @@ const Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)(
     color = 'neutral',
     width,
     supportTextLink,
+    supportTextLinkTarget,
+    variant,
     ...rest
   } = _ref;
   if (type === 'floating') {
@@ -32,6 +34,7 @@ const Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)(
     return (0, _jsxRuntime.jsx)(_FullWidthNotification.FullWidthNotification, {
       color: color,
       supportTextLink: supportTextLink,
+      supportTextLinkTarget: supportTextLinkTarget,
       ...rest,
       ref: ref
     });
@@ -39,6 +42,9 @@ const Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)(
   if (type === 'message') {
     return (0, _jsxRuntime.jsx)(_MessageNotification.MessageNotification, {
       color: color,
+      variant: variant,
+      supportTextLink: supportTextLink,
+      supportTextLinkTarget: supportTextLinkTarget,
       ...rest,
       ref: ref
     });

package/dist/cjs/src/components/overlays/notification/NotificationActionButtons.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NotificationActionButtons = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _button = require("../../action/button");
+/**
+ * 알림 액션 버튼 목록. 모든 type 이 같은 규격(`ncua-btn--xs` + hierarchy, 기본 `text`)을 쓴다(#535).
+ * Vanilla `renderActions`(assets/scripts/notification/utils.ts)와 같은 클래스를 산출해야 한다.
+ * 감싸는 래퍼(`__actions`)는 type 마다 클래스가 달라 호출부가 담당한다.
+ */
+const NotificationActionButtons = _ref => {
+  let {
+    actions
+  } = _ref;
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: actions.map(action => (0, _jsxRuntime.jsx)(_button.Button, {
+      size: "xs",
+      hierarchy: action.hierarchy || 'text',
+      label: action.label,
+      onClick: action.onClick
+    }, `${action.label}-${action.hierarchy}`))
+  });
+};
+exports.NotificationActionButtons = NotificationActionButtons;

package/dist/cjs/src/components/overlays/notification/__tests__/supportTextLink.test.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _FullWidthNotification = require("../FullWidthNotification");
+var _MessageNotification = require("../MessageNotification");
+// @vitest-environment jsdom
+
+/**
+ * React 텍스트 링크(`supportTextLink`)의 프로토콜 검사 (#538 리뷰 H2).
+ * Vanilla `renderSupportingText` 와 같은 정책 — unsafe URL 이면 링크 없이 텍스트만 렌더한다.
+ */
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const cleanups = [];
+(0, _vitest.afterEach)(() => {
+  for (const cleanup of cleanups.splice(0)) cleanup();
+});
+function mount(element) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = (0, _client.createRoot)(container);
+  (0, _testUtils.act)(() => {
+    root.render(element);
+  });
+  cleanups.push(() => {
+    (0, _testUtils.act)(() => root.unmount());
+    container.remove();
+  });
+  return container;
+}
+const IMPLEMENTATIONS = [['MessageNotification(block)', supportTextLink => mount(/*#__PURE__*/(0, _react.createElement)(_MessageNotification.MessageNotification, {
+  title: '공지',
+  variant: 'block',
+  supportingText: '자세히 보기',
+  supportTextLink
+})), '.ncua-message-notification__supporting-text'], ['FullWidthNotification', supportTextLink => mount(/*#__PURE__*/(0, _react.createElement)(_FullWidthNotification.FullWidthNotification, {
+  title: '공지',
+  supportingText: '자세히 보기',
+  supportTextLink
+})), '.ncua-full-width-notification__supporting-text']];
+const UNSAFE = ['javascript:alert(1)', ' JavaScript:alert(1)', 'JAVASCRIPT:alert(1)', '\tjavascript:alert(1)', 'data:text/html,<script>alert(1)</script>'];
+const SAFE = ['https://example.com/notice/1', 'http://example.com/notice/1', '/notice/1', 'notice/1'];
+_vitest.describe.each(IMPLEMENTATIONS)('%s — supportTextLink 프로토콜 검사', (_, render, supportingTextSelector) => {
+  _vitest.it.each(UNSAFE)('unsafe %j → 링크 없이 텍스트만 렌더한다', url => {
+    const container = render(url);
+    (0, _vitest.expect)(container.querySelector('a')).toBeNull();
+    (0, _vitest.expect)(container.querySelector(supportingTextSelector)?.textContent).toBe('자세히 보기');
+  });
+  _vitest.it.each(SAFE)('safe %j → 그대로 링크로 렌더한다', url => {
+    const container = render(url);
+    const anchors = container.querySelectorAll('a');
+    (0, _vitest.expect)(anchors).toHaveLength(1);
+    (0, _vitest.expect)(anchors[0].getAttribute('href')).toBe(url);
+    (0, _vitest.expect)(anchors[0].querySelector(supportingTextSelector)?.textContent).toBe('자세히 보기');
+  });
+});

package/dist/cjs/src/components/overlays/notification/linkTarget.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLinkTargetAttributes = getLinkTargetAttributes;
+/**
+ * 텍스트 링크(`supportTextLink`)의 `<a>`에 붙일 target·rel 속성.
+ *
+ * `'_blank'`일 때만 새 탭 + `rel="noopener noreferrer"`를 반환하고, `'_self'`(기본)는 아무 속성도 붙이지 않는다.
+ * Vanilla `applySupportTextLinkTarget`과 같은 마크업을 산출해야 한다.
+ */
+function getLinkTargetAttributes(target) {
+  return target === '_blank' ? {
+    target: '_blank',
+    rel: 'noopener noreferrer'
+  } : undefined;
+}