@uniai-fe/uds-primitives 0.7.3 → 0.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/info-box/markup/InfoBox.tsx +17 -10
  3. package/src/components/info-box/types/props.ts +5 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uniai-fe/uds-primitives",
3
- "version": "0.7.3",
3
+ "version": "0.7.4",
4
4
  "description": "UNIAI Design System; Primitives Components Package",
5
5
  "type": "module",
6
6
  "private": false,
package/src/components/info-box/markup/InfoBox.tsx CHANGED
@@ -8,6 +8,7 @@ import { InfoBoxIcon } from "./Icon";
8
8
  * @component
9
9
  * @param {InfoBoxProps} props
10
10
  * @param {"info" | "caution" | "success" | "error"} [props.state="info"] 안내/상태 메시지 시각 축이다.
11
+ * @param {React.ReactNode} [props.icon] 상태 기본 아이콘을 대체할 서비스 주입 아이콘 콘텐츠.
11
12
  * @param {React.ReactNode} [props.heading] 상단 제목 영역.
12
13
  * @param {React.ReactNode} [props.children] 본문 콘텐츠.
13
14
  * @param {string} [props.className] 루트 section className.
@@ -16,9 +17,19 @@ import { InfoBoxIcon } from "./Icon";
16
17
  */
17
18
  const InfoBox = forwardRef<HTMLElementTagNameMap["section"], InfoBoxProps>(
18
19
  (
19
- { state = "info", heading, children, className, role, ...restProps },
20
+ { state = "info", icon, heading, children, className, role, ...restProps },
20
21
  ref,
21
22
  ) => {
23
+ const renderedIcon =
24
+ icon === undefined
25
+ ? createElement(
26
+ // 변경: InfoBoxState(success/error)를 아이콘 키(check/ban)와 명시적으로 매핑한다.
27
+ InfoBoxIcon[
28
+ state === "success" ? "check" : state === "error" ? "ban" : state
29
+ ],
30
+ )
31
+ : icon;
32
+
22
33
  return (
23
34
  <section
24
35
  {...restProps}
@@ -28,15 +39,11 @@ const InfoBox = forwardRef<HTMLElementTagNameMap["section"], InfoBoxProps>(
28
39
  // 변경: 기본 role은 인라인으로 note를 적용한다.
29
40
  role={role ?? "note"}
30
41
  >
31
- {/* 변경: 아이콘은 figure 래퍼 내부에서 상태별 Icon.tsx 맵으로 렌더링한다. */}
32
- <figure className="info-box-icon" aria-hidden="true">
33
- {createElement(
34
- // 변경: InfoBoxState(success/error)를 아이콘 키(check/ban)와 명시적으로 매핑한다.
35
- InfoBoxIcon[
36
- state === "success" ? "check" : state === "error" ? "ban" : state
37
- ],
38
- )}
39
- </figure>
42
+ {renderedIcon != null && typeof renderedIcon !== "boolean" ? (
43
+ <figure className="info-box-icon" aria-hidden="true">
44
+ {renderedIcon}
45
+ </figure>
46
+ ) : null}
40
47
  <div className="info-box-content">
41
48
  {heading ? (
42
49
  ["string", "number"].includes(typeof heading) ? (
package/src/components/info-box/types/props.ts CHANGED
@@ -8,6 +8,7 @@ type NativeSectionProps = Omit<ComponentPropsWithoutRef<"section">, "title">;
8
8
  /**
9
9
  * InfoBox Props; info-box 루트 속성
10
10
  * @property {"info" | "caution" | "success" | "error"} [state] info/caution/success/error 상태 축이다.
11
+ * @property {ReactNode} [icon] 상태 기본 아이콘을 대체할 서비스 주입 아이콘 콘텐츠
11
12
  * @property {ReactNode} [heading] 상단 제목 콘텐츠
12
13
  * @property {ReactNode} [children] 본문 콘텐츠
13
14
  * @property {string} [className] 루트 section className
@@ -19,6 +20,10 @@ export interface InfoBoxProps extends Omit<NativeSectionProps, "children"> {
19
20
  * - info, caution, success, error
20
21
  */
21
22
  state?: InfoBoxState;
23
+ /**
24
+ * 상태 기본 아이콘을 대체할 서비스 주입 아이콘 콘텐츠
25
+ */
26
+ icon?: ReactNode;
22
27
  /**
23
28
  * 상단 제목 콘텐츠
24
29
  */