@ncds/ui-admin 1.8.21-alpha.11 → 1.8.21-alpha.13

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

@@ -8,16 +8,21 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const WIDTH_CLASS = {
+  full: 'ncua-callout-notification--full',
+  fit: 'ncua-callout-notification--fit'
+};
 const CalloutNotification = exports.CalloutNotification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     color = 'neutral',
     className,
     title,
+    width,
     ...rest
   } = _ref;
   return (0, _jsxRuntime.jsx)("div", {
     ref: ref,
-    className: (0, _classnames.default)('ncua-callout-notification', `ncua-callout-notification--${color}`, className),
+    className: (0, _classnames.default)('ncua-callout-notification', `ncua-callout-notification--${color}`, width && WIDTH_CLASS[width], className),
     ...rest,
     children: title
   });

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

@@ -10,10 +10,15 @@ var _CalloutNotification = require("./CalloutNotification");
 var _FloatingNotification = require("./FloatingNotification");
 var _FullWidthNotification = require("./FullWidthNotification");
 var _MessageNotification = require("./MessageNotification");
-const Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)(
+// 단일 type 에만 유효한 prop 은 rest 에서 분리해 해당 분기로만 명시 전달한다.
+// rest 에 남기면 다른 type 의 하위 컴포넌트가 div 로 스프레드해 DOM 속성으로 출력된다.
+(_ref, ref) => {
   let {
     type = 'floating',
     color = 'neutral',
+    width,
+    supportTextLink,
     ...rest
   } = _ref;
   if (type === 'floating') {
@@ -26,6 +31,7 @@ const Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)(
   if (type === 'full-width') {
     return (0, _jsxRuntime.jsx)(_FullWidthNotification.FullWidthNotification, {
       color: color,
+      supportTextLink: supportTextLink,
       ...rest,
       ref: ref
     });
@@ -38,9 +44,23 @@ const Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)(
     });
   }
   if (type === 'callout') {
+    // 나머지 3개 type 이 공유하는 prop 은 callout 이 지원하지 않으므로 여기서 제외한다.
+    const {
+      icon: _icon,
+      supportingText: _supportingText,
+      actions: _actions,
+      autoClose: _autoClose,
+      onClose: _onClose,
+      onHidePermanently: _onHidePermanently,
+      hidePermanentlyLabel: _hidePermanentlyLabel,
+      portal: _portal,
+      ...calloutProps
+    } = rest;
     return (0, _jsxRuntime.jsx)(_CalloutNotification.CalloutNotification, {
       color: color,
-      ...rest
+      width: width,
+      ...calloutProps,
+      ref: ref
     });
   }
   return null;

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

@@ -0,0 +1,128 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _CalloutNotification = require("../CalloutNotification");
+var _Notification = require("../Notification");
+// @vitest-environment jsdom
+
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const BASE = 'ncua-callout-notification';
+let root = null;
+let container = null;
+const mount = element => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = (0, _client.createRoot)(container);
+  (0, _testUtils.act)(() => {
+    root?.render(element);
+  });
+  const rendered = container.firstElementChild;
+  if (!(rendered instanceof HTMLElement)) throw new Error('callout 이 렌더되지 않았다');
+  return rendered;
+};
+const renderCallout = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return mount(/*#__PURE__*/(0, _react.createElement)(_CalloutNotification.CalloutNotification, {
+    title: '안내 문구',
+    ...props
+  }));
+};
+const renderNotification = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return mount(/*#__PURE__*/(0, _react.createElement)(_Notification.Notification, {
+    type: 'callout',
+    title: '안내 문구',
+    ...props
+  }));
+};
+(0, _vitest.afterEach)(() => {
+  (0, _testUtils.act)(() => {
+    root?.unmount();
+  });
+  container?.remove();
+  root = null;
+  container = null;
+});
+(0, _vitest.describe)('CalloutNotification — width prop', () => {
+  (0, _vitest.it)('width 미지정 시 너비 클래스를 붙이지 않는다 (부모 너비를 채우는 기본 스타일 유지)', () => {
+    const element = renderCallout();
+    (0, _vitest.expect)(element.classList.contains('ncua-callout-notification--full')).toBe(false);
+    (0, _vitest.expect)(element.classList.contains('ncua-callout-notification--fit')).toBe(false);
+  });
+  (0, _vitest.it)("width='full' 은 --full modifier 를 붙인다", () => {
+    const element = renderCallout({
+      width: 'full'
+    });
+    (0, _vitest.expect)(element.classList.contains('ncua-callout-notification--full')).toBe(true);
+    (0, _vitest.expect)(element.classList.contains('ncua-callout-notification--fit')).toBe(false);
+  });
+  (0, _vitest.it)("width='fit' 은 --fit modifier 를 붙인다", () => {
+    const element = renderCallout({
+      width: 'fit'
+    });
+    (0, _vitest.expect)(element.classList.contains('ncua-callout-notification--fit')).toBe(true);
+    (0, _vitest.expect)(element.classList.contains('ncua-callout-notification--full')).toBe(false);
+  });
+  (0, _vitest.it)('width 는 DOM 속성으로 새지 않는다', () => {
+    const element = renderCallout({
+      width: 'fit'
+    });
+    (0, _vitest.expect)(element.hasAttribute('width')).toBe(false);
+  });
+  (0, _vitest.it)('width 는 베이스/컬러 클래스와 외부 className 을 유지한 채 추가된다', () => {
+    const element = renderCallout({
+      width: 'fit',
+      color: 'info',
+      className: 'custom'
+    });
+    (0, _vitest.expect)(element.classList.contains(BASE)).toBe(true);
+    (0, _vitest.expect)(element.classList.contains(`${BASE}--info`)).toBe(true);
+    (0, _vitest.expect)(element.classList.contains('custom')).toBe(true);
+  });
+});
+(0, _vitest.describe)('Notification type="callout" — 위임 계약', () => {
+  (0, _vitest.it)('width 를 CalloutNotification 으로 전달한다', () => {
+    const element = renderNotification({
+      width: 'fit'
+    });
+    (0, _vitest.expect)(element.classList.contains(BASE)).toBe(true);
+    (0, _vitest.expect)(element.classList.contains('ncua-callout-notification--fit')).toBe(true);
+  });
+  // Notification 의 callout 분기가 제외하는 prop 전체. 여기 누락된 prop 은 DOM 속성으로 출력된다.
+  (0, _vitest.it)('callout 이 지원하지 않는 prop 은 DOM 속성으로 새지 않는다', () => {
+    const element = renderNotification({
+      icon: () => null,
+      supportingText: '보조 문구',
+      supportTextLink: 'https://example.com',
+      actions: [{
+        label: '확인',
+        onClick: () => undefined
+      }],
+      autoClose: 3000,
+      portal: true,
+      onClose: () => undefined,
+      onHidePermanently: () => undefined,
+      hidePermanentlyLabel: '다시 보지 않기'
+    });
+    for (const attr of ['icon', 'supportingtext', 'supporttextlink', 'actions', 'autoclose', 'portal', 'onclose', 'onhidepermanently', 'hidepermanentlylabel']) {
+      (0, _vitest.expect)(element.hasAttribute(attr), attr).toBe(false);
+    }
+    (0, _vitest.expect)(element.textContent).toBe('안내 문구');
+  });
+  (0, _vitest.it)('ref 를 callout 루트 엘리먼트로 전달한다', () => {
+    let captured = null;
+    mount(/*#__PURE__*/(0, _react.createElement)(_Notification.Notification, {
+      type: 'callout',
+      title: '안내 문구',
+      ref: node => {
+        captured = node;
+      }
+    }));
+    (0, _vitest.expect)(captured).not.toBeNull();
+    (0, _vitest.expect)(captured.classList.contains(BASE)).toBe(true);
+  });
+});

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

@@ -0,0 +1,83 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _Notification = require("../Notification");
+// @vitest-environment jsdom
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let root = null;
+let container = null;
+(0, _vitest.beforeAll)(() => {
+  // jsdom 미구현 API 보정 — FloatingNotification 의 모바일 리스너가 window.matchMedia 를 호출한다.
+  if (typeof window.matchMedia !== 'function') {
+    const stub = query => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addEventListener: () => undefined,
+      removeEventListener: () => undefined,
+      addListener: () => undefined,
+      removeListener: () => undefined,
+      dispatchEvent: () => false
+    });
+    window.matchMedia = stub;
+  }
+});
+// 정의되지 않은 type 의 런타임 동작까지 고정하므로 props 를 넓게 받는다.
+const render = props => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = (0, _client.createRoot)(container);
+  (0, _testUtils.act)(() => {
+    root?.render(/*#__PURE__*/(0, _react.createElement)(_Notification.Notification, {
+      title: '안내 문구',
+      ...props
+    }));
+  });
+  const rendered = container.firstElementChild;
+  return rendered instanceof HTMLElement ? rendered : null;
+};
+(0, _vitest.afterEach)(() => {
+  (0, _testUtils.act)(() => {
+    root?.unmount();
+  });
+  container?.remove();
+  root = null;
+  container = null;
+});
+(0, _vitest.describe)('Notification — type 별 위임', () => {
+  _vitest.it.each([['floating', 'ncua-floating-notification'], ['full-width', 'ncua-full-width-notification'], ['message', 'ncua-message-notification'], ['callout', 'ncua-callout-notification']])('type=%s 는 %s 를 렌더한다', (type, baseClass) => {
+    const element = render({
+      type
+    });
+    (0, _vitest.expect)(element?.classList.contains(baseClass)).toBe(true);
+  });
+  (0, _vitest.it)('type 미지정은 floating 으로 렌더한다', () => {
+    const element = render({});
+    (0, _vitest.expect)(element?.classList.contains('ncua-floating-notification')).toBe(true);
+  });
+  _vitest.it.each(['floating', 'full-width', 'message'])('type=%s 에 callout 전용 width 를 주어도 DOM 속성으로 새지 않는다', type => {
+    const element = render({
+      type,
+      width: 'fit'
+    });
+    (0, _vitest.expect)(element?.hasAttribute('width')).toBe(false);
+  });
+  _vitest.it.each(['floating', 'message'])('type=%s 에 full-width 전용 supportTextLink 를 주어도 DOM 속성으로 새지 않는다', type => {
+    const element = render({
+      type,
+      supportingText: '보조',
+      supportTextLink: 'https://example.com'
+    });
+    (0, _vitest.expect)(element?.hasAttribute('supporttextlink')).toBe(false);
+  });
+  (0, _vitest.it)('정의되지 않은 type 은 아무것도 렌더하지 않는다', () => {
+    const element = render({
+      type: 'banner'
+    });
+    (0, _vitest.expect)(element).toBeNull();
+  });
+});