@uniai-fe/uds-primitives 0.12.8 → 0.12.9

package/dist/styles.css

@@ -3,13 +3,12 @@
   --alternate-unit-text-color: var(--color-cool-gray-70);
   --alternate-unit-text-font-size: 1.4rem;
   --alternate-unit-text-line-height: 1.5;
-  --alternate-unit-gap: var(--spacing-gap-6);
+  --alternate-figure-text-gap-ratio: 0.344444;
   --alternate-loading-icon-color: var(--color-primary-default);
   --alternate-loading-icon-small-size: 2.4rem;
   --alternate-loading-icon-medium-size: 3.6rem;
   --alternate-loading-icon-large-size: 5.2rem;
   --alternate-layout-min-block-size: 320px;
-  --alternate-layout-gap: var(--spacing-gap-7);
   --alternate-layout-content-gap: var(--spacing-gap-4);
   --alternate-layout-figure-size: 120px;
   --alternate-layout-title-color: var(--color-label-strong);
@@ -1045,6 +1044,10 @@
 }
 
 .alternate {
+  --alternate-unit-gap: calc(
+    var(--alternate-loading-icon-small-size) *
+      var(--alternate-figure-text-gap-ratio)
+  );
   width: 100%;
   height: 100%;
   display: flex;
@@ -1102,6 +1105,9 @@
 }
 
 .alternate-layout {
+  --alternate-layout-gap: calc(
+    var(--alternate-layout-figure-size) * var(--alternate-figure-text-gap-ratio)
+  );
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1122,6 +1128,13 @@
   margin: 0;
 }
 
+.alternate-layout-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--alternate-layout-content-gap);
+}
+
 .alternate-layout-title {
   margin: 0;
   color: var(--alternate-layout-title-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.12.8",
+  "version": "0.12.9",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -88,10 +88,10 @@
     "sass": "^1.102.0",
     "typescript": "6.0.3",
     "@uniai-fe/eslint-config": "0.4.3",
-    "@uniai-fe/tsconfig": "0.2.0",
-    "@uniai-fe/next-devkit": "0.4.1",
+    "@uniai-fe/uds-foundation": "0.6.0",
     "@uniai-fe/util-functions": "0.4.3",
-    "@uniai-fe/uds-foundation": "0.6.0"
+    "@uniai-fe/next-devkit": "0.4.1",
+    "@uniai-fe/tsconfig": "0.2.0"
   },
   "scripts": {
     "check:pre-commit": "pnpm --dir ../../.. run check:pre-commit",

package/src/components/alternate/layout/Layout.tsx

@@ -2,6 +2,7 @@ import AlternateLayoutButton from "./Button";
 import AlternateLayoutContainer from "./Container";
 import AlternateLayoutContents from "./Contents";
 import AlternateLayoutFigure from "./Figure";
+import AlternateLayoutText from "./Text";
 import AlternateLayoutTextButton from "./TextButton";
 import AlternateLayoutTitle from "./Title";
 
@@ -10,6 +11,7 @@ import AlternateLayoutTitle from "./Title";
  * @desc
  * - `Container`: 화면 상태 조합 루트다.
  * - `Figure`: 도입 측이 제어하는 visual 영역이다.
+ * - `Text`: 제목과 본문을 묶는 텍스트 영역이다.
  * - `Title`: 제목 텍스트 영역이다.
  * - `Contents`: 본문 텍스트 영역이다.
  * - `TextButton`: paragraph 내부 text action이다.
@@ -18,6 +20,7 @@ import AlternateLayoutTitle from "./Title";
 const AlternateLayout = {
   Container: AlternateLayoutContainer,
   Figure: AlternateLayoutFigure,
+  Text: AlternateLayoutText,
   Title: AlternateLayoutTitle,
   Contents: AlternateLayoutContents,
   TextButton: AlternateLayoutTextButton,

package/src/components/alternate/layout/Text.tsx

@@ -0,0 +1,23 @@
+import { clsx } from "clsx";
+import type { AlternateLayoutTextProps } from "../types";
+
+/**
+ * Alternate Layout Text; 제목과 본문을 묶는 텍스트 영역
+ * @component
+ * @param {AlternateLayoutTextProps} props
+ * @param {string} [props.className] 텍스트 영역 className override다.
+ * @param {React.ReactNode} [props.children] 제목과 본문 콘텐츠다.
+ * @example
+ * <Alternate.Layout.Text>
+ *   <Alternate.Layout.Title>데이터가 없습니다.</Alternate.Layout.Title>
+ *   <Alternate.Layout.Contents>다른 조건으로 검색해 주세요.</Alternate.Layout.Contents>
+ * </Alternate.Layout.Text>
+ */
+export default function AlternateLayoutText({
+  className,
+  children,
+}: AlternateLayoutTextProps) {
+  return (
+    <div className={clsx("alternate-layout-text", className)}>{children}</div>
+  );
+}

package/src/components/alternate/styles/layout.scss

@@ -1,4 +1,8 @@
 .alternate-layout {
+  --alternate-layout-gap: calc(
+    var(--alternate-layout-figure-size) * var(--alternate-figure-text-gap-ratio)
+  );
+
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -19,6 +23,13 @@
   margin: 0;
 }
 
+.alternate-layout-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--alternate-layout-content-gap);
+}
+
 .alternate-layout-title {
   margin: 0;
   color: var(--alternate-layout-title-color);

package/src/components/alternate/styles/unit.scss

@@ -25,6 +25,11 @@
 }
 
 .alternate {
+  --alternate-unit-gap: calc(
+    var(--alternate-loading-icon-small-size) *
+      var(--alternate-figure-text-gap-ratio)
+  );
+
   width: 100%;
   height: 100%;
   display: flex;

package/src/components/alternate/styles/variables.scss

@@ -2,14 +2,13 @@
   --alternate-unit-text-color: var(--color-cool-gray-70);
   --alternate-unit-text-font-size: 1.4rem;
   --alternate-unit-text-line-height: 1.5;
-  --alternate-unit-gap: var(--spacing-gap-6);
+  --alternate-figure-text-gap-ratio: 0.344444;
   --alternate-loading-icon-color: var(--color-primary-default);
   --alternate-loading-icon-small-size: 2.4rem;
   --alternate-loading-icon-medium-size: 3.6rem;
   --alternate-loading-icon-large-size: 5.2rem;
 
   --alternate-layout-min-block-size: 320px;
-  --alternate-layout-gap: var(--spacing-gap-7);
   --alternate-layout-content-gap: var(--spacing-gap-4);
   --alternate-layout-figure-size: 120px;
   --alternate-layout-title-color: var(--color-label-strong);

package/src/components/alternate/types/layout.ts

@@ -38,6 +38,22 @@ export interface AlternateLayoutFigureProps {
   children?: ReactNode;
 }
 
+/**
+ * Alternate Layout Text Props; 제목과 본문을 묶는 텍스트 영역 props
+ * @property {string} [className] 텍스트 영역 className override다.
+ * @property {ReactNode} [children] 제목과 본문 콘텐츠다.
+ */
+export interface AlternateLayoutTextProps {
+  /**
+   * 텍스트 영역 className override다.
+   */
+  className?: string;
+  /**
+   * 제목과 본문 콘텐츠다.
+   */
+  children?: ReactNode;
+}
+
 /**
  * Alternate Layout Title Props; 제목 텍스트 props
  * @property {ElementType} [as] 렌더링할 제목 요소다. 기본값은 strong이다.