diff --git a/src/org-chart/core-component-preview.tsx b/src/org-chart/core-component-preview.tsx index aab2823..d7ec988 100644 --- a/src/org-chart/core-component-preview.tsx +++ b/src/org-chart/core-component-preview.tsx @@ -18,11 +18,11 @@ import { createDepartmentColors, updateDepartmentColorValues } from '../../packa import fixture from '../../examples/org-chart/data-p1.json'; type PreviewKind = 'Logo' | 'DepartmentColors' | 'PositionSummary' | 'AffiliationSummary' | 'StatusSummary' | 'EmployeeCard' | 'OrganizationCards'; -interface Props { kind: PreviewKind; data?: unknown; variant?: number; cardKind?: EmployeeCardOptions['kind']; presentation?: 'standalone' | 'workdesk' | 'design' } +interface Props { kind: PreviewKind; data?: unknown; variant?: number; cardKind?: EmployeeCardOptions['kind']; presentation?: 'standalone' | 'workdesk' | 'design'; hideLogoHeading?: boolean } /** Story host only. Every pixel/card/count is rendered by the same Core modules * used by Vanilla HTML and the production React Wrapper, not JSX copies. */ -export function CoreComponentPreview({ kind, data = fixture, variant = 0, cardKind = 'employee', presentation = 'standalone' }: Props) { +export function CoreComponentPreview({ kind, data = fixture, variant = 0, cardKind = 'employee', presentation = 'standalone', hideLogoHeading = false }: Props) { const ref = useRef(null); useLayoutEffect(() => { const validation = validateOrgChartDataset(data); @@ -54,7 +54,11 @@ export function CoreComponentPreview({ kind, data = fixture, variant = 0, cardKi // Share Fixed's passive presenters/styles without its stage coordinates. shell.className = presentation === 'workdesk' ? 'hm-orgchart-shell hm-orgchart-summary-preview' : 'hm-orgchart-shell'; let component: HTMLElement; - if (kind === 'Logo') component = createLogoLegend(document, context, controller.signal); + if (kind === 'Logo') { + component = createLogoLegend(document, context, controller.signal); + // Overview already supplies the section heading; keep the shared logo list intact. + if (hideLogoHeading) component.querySelector(':scope > h2')?.remove(); + } else if (kind === 'DepartmentColors') component = createDepartmentColors(document, context, controller.signal); else if (kind === 'PositionSummary') component = presentation === 'workdesk' ? createOrganizationTotals(document, context) : createPositionSummary(document, context); else if (kind === 'AffiliationSummary') component = presentation === 'workdesk' ? createAffiliationBar(document, context, controller.signal) : createAffiliationSummary(document, context); @@ -108,7 +112,34 @@ export function CoreComponentPreview({ kind, data = fixture, variant = 0, cardKi row.classList.add('tunnel-reference__sample'); row.replaceChildren(header, stage); } - component.replaceChildren(...(representative ? [representative] : []), ...rows); + // Reuse Fixed's compact status presenter, retaining its card ancestry/styles. + // One specimen per status is enough; the original fixture remains untouched. + const employees = ['dispatched', 'onLeave'].flatMap(status => { + const employee = dataset.employees.find(person => person.workStatus === status); + return employee ? [employee] : []; + }); + const statusData = { ...dataset, employees }; + const statuses = createStatusSummary(document, { + ...context, data: statusData, summary: calculateSummary(statusData), readOnly: true, + }, controller.signal, { compact: true }); + const statusPreviews = Array.from(statuses.querySelectorAll(':scope > .hm-orgchart-status-group')).map(group => { + const preview = document.createElement('section'); + preview.className = 'hm-orgchart-status-preview tunnel-reference__sample'; + const header = document.createElement('header'); + const title = document.createElement('h2'); + title.textContent = group.dataset.workStatus === 'dispatched' ? '파견자 카드' : '휴직자 카드'; + header.append(title); + const stage = document.createElement('div'); + stage.className = 'tunnel-reference__stage hm-orgchart-department-stage'; + const composition = document.createElement('div'); + composition.className = 'hm-orgchart-composition hm-orgchart-status-preview-composition'; + composition.dataset.displayMode = 'readOnly'; + const summary = statuses.cloneNode(false) as HTMLElement; + summary.append(group); composition.append(summary); stage.append(composition); + preview.append(header, stage); + return preview; + }); + component.replaceChildren(...(representative ? [representative] : []), ...rows, ...statusPreviews); component.classList.add('hm-orgchart-department-colors-design', 'tunnel-reference__variant-grid'); for (const name of component.querySelectorAll('.hm-orgchart-person-name')) name.setAttribute('aria-label', sampleName); } @@ -118,6 +149,6 @@ export function CoreComponentPreview({ kind, data = fixture, variant = 0, cardKi const observer = kind === 'DepartmentColors' && !compactDepartmentPreview ? new ResizeObserver(() => updateDepartmentColorValues(shell)) : undefined; observer?.observe(root); return () => { observer?.disconnect(); controller.abort(); root.remove(); }; - }, [kind, data, variant, cardKind, presentation]); + }, [kind, data, variant, cardKind, presentation, hideLogoHeading]); return
; } diff --git a/src/org-chart/department-colors-preview.css b/src/org-chart/department-colors-preview.css index 1beb250..343f396 100644 --- a/src/org-chart/department-colors-preview.css +++ b/src/org-chart/department-colors-preview.css @@ -36,6 +36,13 @@ gap: var(--sb-center-column-gap); } +/* Keep Fixed's status presenter inside the existing review surface, without + introducing the full canvas background or coordinates into the specimen. */ +.hm-orgchart-department-preview .hm-orgchart-status-preview-composition { + width: max-content; + background: transparent; +} + @media (max-width: 760px) { .hm-orgchart-department-preview .hm-orgchart-department-colors-design { grid-template-columns: minmax(0, 1fr); diff --git a/src/org-chart/org-chart-page-previews.tsx b/src/org-chart/org-chart-page-previews.tsx index 851b893..873fdb6 100644 --- a/src/org-chart/org-chart-page-previews.tsx +++ b/src/org-chart/org-chart-page-previews.tsx @@ -40,8 +40,8 @@ export function DepartmentTypographyPreview() { export function OverviewPreview() { return - -
+ +