File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-18
08-14
08-18
08-18
08-18
File name
Commit message
Commit date
import type { ReactNode } from "react";
import { cx } from "../../utils";
import { FoxFormLabel } from "../fox-form-label";
export interface FoxDescriptionItem {
/** 목록 안에서 고유해야 한다. */
key: string;
/** 항목 이름. */
term: ReactNode;
/** 값. 글자든 토글이든 무엇이든 온다. */
description: ReactNode;
/** 참이면 이 줄만 렌더하지 않는다. */
hidden?: boolean;
}
export interface FoxDescriptionListProps {
items: FoxDescriptionItem[];
hidden?: boolean;
className?: string;
}
/**
* @fox 조회 목록 — 이름과 값을 한 쌍씩 세로로 쌓는다. 조회 팝업·상세 화면이 쓰는 모양이다.
*
* 마크업 계약 (React 밖 소비자용):
* <dl class="fox-description-list">
* <div class="fox-description-list__item">
* <dt class="fox-description-list__term"><span class="fox-form-label">이름</span></dt>
* <dd class="fox-description-list__description">홍길동</dd>
* </div>
* </dl>
*
* `<dl>`로 그린다 — 이름·값 쌍이라는 관계가 보조기술에 그대로 전달된다. 이름 쪽은 `<dt>` 안에
* `FoxFormLabel`을 `span`으로 넣어 서식을 디자인시스템과 맞춘다(`<dt>` 자체가 라벨 요소라
* `<label>`을 쓰면 가리킬 대상이 없다).
*
* 짝을 `<div>`로 감싸는 것은 `<dl>`이 허용하는 유일한 묶음 방법이다 — 줄마다 여백과 구분선을
* 주려면 감싸는 상자가 필요하다.
*
* ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
* (또는 개별 파티셜)로 한 번 불러와야 한다.
*/
export function FoxDescriptionList({
items,
hidden = false,
className,
}: FoxDescriptionListProps) {
if (hidden) {
return null;
}
return (
<dl className={cx("fox-description-list", className)}>
{items
.filter((item) => !item.hidden)
.map((item) => (
<div key={item.key} className="fox-description-list__item">
<dt className="fox-description-list__term">
<FoxFormLabel as="span">{item.term}</FoxFormLabel>
</dt>
<dd className="fox-description-list__description">
{item.description}
</dd>
</div>
))}
</dl>
);
}