@ncds/ui-admin 1.8.22 → 1.8.23-alpha.1

package/dist/temp/src/components/feedback-and-status/badge/Badge.d.ts

@@ -16,4 +16,4 @@ type BadgeProps = {
 };
 declare const Badge: ({ label, type, color, className, leadingIcon, trailingIcon, size, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export { Badge };
-export type { BadgeType, BadgeColor, BadgeSize, BadgeProps };
+export type { BadgeColor, BadgeProps, BadgeSize, BadgeType };

package/dist/temp/src/components/feedback-and-status/badge/Badge.js

@@ -7,7 +7,7 @@ import { sideSlotRender } from './utils';
  */
 const BADGE_ICON_SIZE = 12;
 /** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
-const NEW_BADGE_ICON_SIZE = { sm: 12, md: 16 };
+const NEW_BADGE_ICON_SIZE = { sm: 12, md: 14 };
 const Badge = ({ label, type = 'pill-outline', color = 'neutral', className, leadingIcon, trailingIcon, size = 'xs', }) => {
     // new-badge: 신규 콘텐츠 'N' 마크 전용 타입. label·color·leadingIcon·trailingIcon은 무시되고
     // 색은 --pink-600 으로 고정된다. (디자이너 명세: Icon/FeaturedIcon/Badge로 대체 불가한 전용 표시)

package/dist/temp/src/components/navigation/bread-crumb/BreadCrumb.d.ts

@@ -4,8 +4,10 @@ interface BreadcrumbItemProps {
 }
 interface BreadcrumbProps {
     items: BreadcrumbItemProps[];
+    /** 첫 항목을 홈 아이콘으로 렌더링할지 여부. false 이면 label 텍스트로 렌더링한다. */
+    showHomeIcon?: boolean;
     className?: string;
 }
-declare const BreadCrumb: ({ items, className }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const BreadCrumb: ({ items, showHomeIcon, className }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element | null;
 export { BreadCrumb };
 export type { BreadcrumbItemProps, BreadcrumbProps };

package/dist/temp/src/components/navigation/bread-crumb/BreadCrumb.js

@@ -1,19 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Home01 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
-const BreadcrumbItem = ({ href, children }) => {
+const BreadcrumbItem = ({ href, ariaLabel, children }) => {
     const ElementType = href ? 'a' : 'span';
-    return (_jsx(ElementType, { href: href, className: "ncua-breadcrumb__item", children: children }));
+    return (_jsx(ElementType, { href: href, 
+        // <span> 은 generic role 이라 aria-label 이 무시될 수 있다. 링크는 이미 이름을 지원하므로 그대로 둔다
+        role: !href && ariaLabel ? 'img' : undefined, "aria-label": ariaLabel, className: "ncua-breadcrumb__item", children: children }));
 };
-const BreadCrumb = ({ items, className }) => {
+const BreadCrumb = ({ items, showHomeIcon = true, className }) => {
     if (!items || items.length === 0)
         return null;
     const renderItem = (item, index) => {
         const isLast = index === items.length - 1;
-        const content = index === 0 ? _jsx(Home01, { width: 16, height: 16, color: "gray500" }) : item.label;
+        // 아이콘 여부는 한 곳에서만 판정한다 — 콘텐츠·모디파이어·aria-label 이 모두 이 값을 따른다
+        const isHome = showHomeIcon && index === 0;
         return (_jsx("li", { className: classNames('ncua-breadcrumb__list-item', {
+                'ncua-breadcrumb__list-item--home': isHome,
                 'ncua-breadcrumb__list-item--active': isLast,
-            }), children: _jsx(BreadcrumbItem, { href: isLast ? undefined : item.href, children: content }) }, index));
+            }), children: _jsx(BreadcrumbItem, { href: isLast ? undefined : item.href, ariaLabel: isHome ? item.label : undefined, children: isHome ? _jsx(Home01, { width: 16, height: 16, color: "gray500" }) : item.label }) }, index));
     };
     return (_jsx("nav", { "aria-label": "breadcrumb", className: classNames('ncua-breadcrumb', className), children: _jsx("ol", { className: "ncua-breadcrumb__list", children: items.map(renderItem) }) }));
 };

package/dist/temp/src/components/navigation/bread-crumb/__tests__/BreadCrumb.test.d.ts

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

package/dist/temp/src/components/navigation/bread-crumb/__tests__/BreadCrumb.test.js

@@ -0,0 +1,161 @@
+// @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 { BreadCrumb } from '../BreadCrumb';
+const LIST_ITEM = '.ncua-breadcrumb__list-item';
+const HOME_MODIFIER = 'ncua-breadcrumb__list-item--home';
+const ACTIVE_MODIFIER = 'ncua-breadcrumb__list-item--active';
+const ITEM = '.ncua-breadcrumb__item';
+/** DocBreadcrumbs(유일한 사내 호출부)와 같은 형태의 입력 — AC-7 회귀 기준 */
+const DOC_ITEMS = [{ href: '/', label: '홈' }, { href: '/docs', label: '문서' }, { label: '현재 페이지' }];
+let root = null;
+let container = null;
+function render(props) {
+    if (!container) {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        root = createRoot(container);
+    }
+    act(() => {
+        root?.render(createElement(BreadCrumb, props));
+    });
+    return container;
+}
+afterEach(() => {
+    if (root && container) {
+        act(() => root?.unmount());
+        container.remove();
+    }
+    root = null;
+    container = null;
+});
+const listItems = (el) => Array.from(el.querySelectorAll(LIST_ITEM));
+/** <li> 안에서 실제 포커스를 받는 요소(<a> 또는 <span>) */
+const itemOf = (li) => li.querySelector(ITEM);
+describe('BreadCrumb — showHomeIcon 아이콘/라벨 분기', () => {
+    it('AC-1: showHomeIcon 미지정이면 첫 항목을 홈 아이콘으로 렌더한다', () => {
+        // Given/When: showHomeIcon 을 넘기지 않고 렌더하면
+        const el = render({ items: DOC_ITEMS });
+        // Then: 첫 항목은 --home 모디파이어를 달고 svg 를 품으며, label 텍스트는 노출되지 않는다
+        const [first] = listItems(el);
+        expect(first.classList.contains(HOME_MODIFIER)).toBe(true);
+        expect(first.querySelector('svg')).not.toBeNull();
+        expect(first.textContent).not.toContain(DOC_ITEMS[0].label);
+    });
+    it('AC-2: showHomeIcon={false} 이면 첫 항목을 label 텍스트로 렌더한다', () => {
+        // Given/When: 라벨 모드로 렌더하면
+        const el = render({ items: DOC_ITEMS, showHomeIcon: false });
+        // Then: 아이콘 대신 label 텍스트가 나오고 --home 은 붙지 않는다
+        const [first] = listItems(el);
+        expect(first.classList.contains(HOME_MODIFIER)).toBe(false);
+        expect(first.querySelector('svg')).toBeNull();
+        expect(first.textContent).toBe(DOC_ITEMS[0].label);
+    });
+    it('AC-3: 홈 아이콘 항목의 링크에 label 값이 aria-label 로 부여된다', () => {
+        // Given/When: 아이콘 모드로 렌더하면
+        const el = render({ items: DOC_ITEMS });
+        // Then: 접근 가능한 이름은 <li> 가 아니라 포커스를 받는 <a> 에 붙는다
+        const [first] = listItems(el);
+        const anchor = itemOf(first);
+        expect(anchor?.tagName).toBe('A');
+        expect(anchor?.getAttribute('aria-label')).toBe(DOC_ITEMS[0].label);
+    });
+    it('AC-4(라벨 모드): 어떤 항목에도 --home 과 aria-label 이 붙지 않는다', () => {
+        // Given/When: 라벨 모드로 렌더하면
+        const el = render({ items: DOC_ITEMS, showHomeIcon: false });
+        // Then: --home 은 전 항목에서 사라지고, 첫 항목의 aria-label 속성 자체가 출력되지 않는다
+        const items = listItems(el);
+        expect(items.every((li) => !li.classList.contains(HOME_MODIFIER))).toBe(true);
+        expect(itemOf(items[0])?.hasAttribute('aria-label')).toBe(false);
+    });
+    it('AC-4(아이콘 모드): --home 은 첫 항목에만 붙는다', () => {
+        // Given/When: 아이콘 모드로 렌더하면
+        const el = render({ items: DOC_ITEMS });
+        // Then: 홈 아이콘인 첫 항목에만 붙고 나머지에는 붙지 않는다
+        const items = listItems(el);
+        expect(items.filter((li) => li.classList.contains(HOME_MODIFIER))).toHaveLength(1);
+        expect(items[0].classList.contains(HOME_MODIFIER)).toBe(true);
+    });
+    it('AC-5: 마지막 항목은 showHomeIcon 과 무관하게 --active 를 달고 링크가 아니다', () => {
+        // Given/When: 아이콘 모드로 렌더하면
+        const iconMode = listItems(render({ items: DOC_ITEMS }));
+        const iconLast = iconMode[iconMode.length - 1];
+        // Then: --active 가 붙고 <span> 이라 클릭 이동이 없다
+        expect(iconLast.classList.contains(ACTIVE_MODIFIER)).toBe(true);
+        expect(itemOf(iconLast)?.tagName).toBe('SPAN');
+        // When: 라벨 모드로 다시 렌더해도
+        const labelMode = listItems(render({ items: DOC_ITEMS, showHomeIcon: false }));
+        const labelLast = labelMode[labelMode.length - 1];
+        // Then: 판정은 showHomeIcon 과 독립이다
+        expect(labelLast.classList.contains(ACTIVE_MODIFIER)).toBe(true);
+        expect(itemOf(labelLast)?.tagName).toBe('SPAN');
+    });
+    it('AC-6: 단일 항목이면 첫 항목이 곧 마지막 항목으로 처리된다', () => {
+        // Given/When: 항목이 하나뿐인 배열을 아이콘 모드로 렌더하면
+        const single = [{ href: '/', label: '홈' }];
+        const [iconOnly] = listItems(render({ items: single }));
+        // Then: --home 과 --active 가 동시에 붙고 링크가 아니다
+        expect(iconOnly.classList.contains(HOME_MODIFIER)).toBe(true);
+        expect(iconOnly.classList.contains(ACTIVE_MODIFIER)).toBe(true);
+        expect(itemOf(iconOnly)?.tagName).toBe('SPAN');
+        expect(iconOnly.querySelector('svg')).not.toBeNull();
+        // When: 같은 배열을 라벨 모드로 렌더하면
+        const [labelOnly] = listItems(render({ items: single, showHomeIcon: false }));
+        // Then: --active 만 붙고 label 텍스트가 나온다
+        expect(labelOnly.classList.contains(HOME_MODIFIER)).toBe(false);
+        expect(labelOnly.classList.contains(ACTIVE_MODIFIER)).toBe(true);
+        expect(labelOnly.textContent).toBe(single[0].label);
+    });
+    it('AC-7: 기존 호출부 입력의 렌더 결과는 --home·aria-label 추가분 외에 변하지 않는다', () => {
+        // Given/When: DocBreadcrumbs 와 같은 입력을 showHomeIcon 미지정으로 렌더하면
+        const el = render({ items: DOC_ITEMS });
+        const items = listItems(el);
+        // Then: 요소 종류·텍스트·href 는 변경 전과 같고, 첫 항목 svg 도 그대로다
+        expect(items).toHaveLength(DOC_ITEMS.length);
+        expect(items.map((li) => itemOf(li)?.tagName)).toEqual(['A', 'A', 'SPAN']);
+        expect(items.map((li) => itemOf(li)?.getAttribute('href'))).toEqual(['/', '/docs', null]);
+        expect(items.map((li) => li.textContent)).toEqual(['', DOC_ITEMS[1].label, DOC_ITEMS[2].label]);
+        expect(items[0].querySelector('svg')).not.toBeNull();
+        // Then: <li> 클래스는 기존 베이스/--active 를 그대로 유지하고, 늘어난 것은 --home 뿐이다
+        expect(items.map((li) => Array.from(li.classList).sort())).toEqual([
+            ['ncua-breadcrumb__list-item', HOME_MODIFIER].sort(),
+            ['ncua-breadcrumb__list-item'],
+            ['ncua-breadcrumb__list-item', ACTIVE_MODIFIER].sort(),
+        ]);
+        // Then: <a>/<span> 에 늘어난 속성은 첫 항목의 aria-label 뿐이다
+        expect(itemOf(items[1])?.hasAttribute('aria-label')).toBe(false);
+        expect(itemOf(items[2])?.hasAttribute('aria-label')).toBe(false);
+    });
+    it('비링크 홈 항목에는 role="img" 를 부여해 aria-label 이 무시되지 않게 한다', () => {
+        // Given/When: 첫 항목에 href 가 없어 <span> 으로 렌더되는 입력(meta usageExamples.default 형태)을 아이콘 모드로 렌더하면
+        const el = render({
+            items: [{ label: '대시보드' }, { href: '/products', label: '상품' }, { label: '상품 상세' }],
+        });
+        // Then: generic role 의 <span> 은 aria-label 을 노출하지 못하므로 role="img" 로 이름을 살린다
+        const [first] = listItems(el);
+        const home = itemOf(first);
+        expect(home?.tagName).toBe('SPAN');
+        expect(home?.getAttribute('role')).toBe('img');
+        expect(home?.getAttribute('aria-label')).toBe('대시보드');
+    });
+    it('링크인 홈 항목에는 role 을 부여하지 않는다', () => {
+        // Given/When: 첫 항목에 href 가 있어 <a> 로 렌더되는 입력을 아이콘 모드로 렌더하면
+        const el = render({ items: DOC_ITEMS });
+        // Then: 링크는 이미 접근 가능한 이름을 지원하므로 role 을 덧씌우지 않는다 (ADR-3)
+        const items = listItems(el);
+        const home = itemOf(items[0]);
+        expect(home?.tagName).toBe('A');
+        expect(home?.hasAttribute('role')).toBe(false);
+        // Then: 홈이 아닌 항목에도 role 은 출력되지 않는다
+        expect(items.slice(1).every((li) => !itemOf(li)?.hasAttribute('role'))).toBe(true);
+    });
+    it('경계: items 가 빈 배열이면 아무것도 렌더하지 않는다', () => {
+        // Given/When: 빈 배열을 양쪽 모드로 렌더하면
+        const el = render({ items: [], showHomeIcon: false });
+        // Then: <nav> 자체가 만들어지지 않는다 (기존 동작 유지)
+        expect(el.querySelector('.ncua-breadcrumb')).toBeNull();
+        expect(el.innerHTML).toBe('');
+    });
+});