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

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

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

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

@@ -13,6 +13,8 @@ const Notification = /*#__PURE__*/forwardRef(
     color = 'neutral',
     width,
     supportTextLink,
+    supportTextLinkTarget,
+    variant,
     ...rest
   } = _ref;
   if (type === 'floating') {
@@ -26,6 +28,7 @@ const Notification = /*#__PURE__*/forwardRef(
     return _jsx(FullWidthNotification, {
       color: color,
       supportTextLink: supportTextLink,
+      supportTextLinkTarget: supportTextLinkTarget,
       ...rest,
       ref: ref
     });
@@ -33,6 +36,9 @@ const Notification = /*#__PURE__*/forwardRef(
   if (type === 'message') {
     return _jsx(MessageNotification, {
       color: color,
+      variant: variant,
+      supportTextLink: supportTextLink,
+      supportTextLinkTarget: supportTextLinkTarget,
       ...rest,
       ref: ref
     });

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../../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 _jsx(_Fragment, {
+    children: actions.map(action => _jsx(Button, {
+      size: "xs",
+      hierarchy: action.hierarchy || 'text',
+      label: action.label,
+      onClick: action.onClick
+    }, `${action.label}-${action.hierarchy}`))
+  });
+};
+export { NotificationActionButtons };

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

@@ -0,0 +1,55 @@
+// @vitest-environment jsdom
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it } from 'vitest';
+import { FullWidthNotification } from '../FullWidthNotification';
+import { MessageNotification } from '../MessageNotification';
+/**
+ * React 텍스트 링크(`supportTextLink`)의 프로토콜 검사 (#538 리뷰 H2).
+ * Vanilla `renderSupportingText` 와 같은 정책 — unsafe URL 이면 링크 없이 텍스트만 렌더한다.
+ */
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const cleanups = [];
+afterEach(() => {
+  for (const cleanup of cleanups.splice(0)) cleanup();
+});
+function mount(element) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  act(() => {
+    root.render(element);
+  });
+  cleanups.push(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+  return container;
+}
+const IMPLEMENTATIONS = [['MessageNotification(block)', supportTextLink => mount(/*#__PURE__*/createElement(MessageNotification, {
+  title: '공지',
+  variant: 'block',
+  supportingText: '자세히 보기',
+  supportTextLink
+})), '.ncua-message-notification__supporting-text'], ['FullWidthNotification', supportTextLink => mount(/*#__PURE__*/createElement(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'];
+describe.each(IMPLEMENTATIONS)('%s — supportTextLink 프로토콜 검사', (_, render, supportingTextSelector) => {
+  it.each(UNSAFE)('unsafe %j → 링크 없이 텍스트만 렌더한다', url => {
+    const container = render(url);
+    expect(container.querySelector('a')).toBeNull();
+    expect(container.querySelector(supportingTextSelector)?.textContent).toBe('자세히 보기');
+  });
+  it.each(SAFE)('safe %j → 그대로 링크로 렌더한다', url => {
+    const container = render(url);
+    const anchors = container.querySelectorAll('a');
+    expect(anchors).toHaveLength(1);
+    expect(anchors[0].getAttribute('href')).toBe(url);
+    expect(anchors[0].querySelector(supportingTextSelector)?.textContent).toBe('자세히 보기');
+  });
+});

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

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