fix: fix types, label → description & suffixElement → suffix

daangn · Dec 5, 2024 · 0f73285 · 0f73285
1 parent 721d287
commit 0f73285
Show file tree

Hide file tree

Showing 86 changed files with 375 additions and 291 deletions.
diff --git a/docs/components/example/actionable-callout-danger.tsx b/docs/components/example/actionable-callout-danger.tsx
@@ -1,13 +1,13 @@
 "use client";
 
-import { ActionableCallout, ActionableCalloutLabel } from "seed-design/ui/actionable-callout";
+import { ActionableCallout, ActionableCalloutDescription } from "seed-design/ui/actionable-callout";
 
 export default function ActionableCalloutDanger() {
   return (
     <ActionableCallout onClick={() => window.alert("Hello World")} variant="danger">
-      <ActionableCalloutLabel>
+      <ActionableCalloutDescription>
         Dolore ex occaecat Lorem ad eu. Consectetur consectetur magna pariatur aliquip enim non.
-      </ActionableCalloutLabel>
+      </ActionableCalloutDescription>
     </ActionableCallout>
   );
 }
diff --git a/docs/components/example/actionable-callout-informative.tsx b/docs/components/example/actionable-callout-informative.tsx
@@ -1,13 +1,13 @@
 "use client";
 
-import { ActionableCallout, ActionableCalloutLabel } from "seed-design/ui/actionable-callout";
+import { ActionableCallout, ActionableCalloutDescription } from "seed-design/ui/actionable-callout";
 
 export default function ActionableCalloutInformative() {
   return (
     <ActionableCallout onClick={() => window.alert("Hello World")} variant="informative">
-      <ActionableCalloutLabel>
+      <ActionableCalloutDescription>
         Dolore ex occaecat Lorem ad eu. Consectetur consectetur magna pariatur aliquip enim non.
-      </ActionableCalloutLabel>
+      </ActionableCalloutDescription>
     </ActionableCallout>
   );
 }
diff --git a/docs/components/example/actionable-callout-magic.tsx b/docs/components/example/actionable-callout-magic.tsx
@@ -1,13 +1,13 @@
 "use client";
 
-import { ActionableCallout, ActionableCalloutLabel } from "seed-design/ui/actionable-callout";
+import { ActionableCallout, ActionableCalloutDescription } from "seed-design/ui/actionable-callout";
 
 export default function ActionableCalloutNeutral() {
   return (
     <ActionableCallout onClick={() => window.alert("Hello World")} variant="magic">
-      <ActionableCalloutLabel>
+      <ActionableCalloutDescription>
         Dolore ex occaecat Lorem ad eu. Consectetur consectetur magna pariatur aliquip enim non.
-      </ActionableCalloutLabel>
+      </ActionableCalloutDescription>
     </ActionableCallout>
   );
 }
diff --git a/docs/components/example/actionable-callout-neutral.tsx b/docs/components/example/actionable-callout-neutral.tsx
@@ -1,13 +1,13 @@
 "use client";
 
-import { ActionableCallout, ActionableCalloutLabel } from "seed-design/ui/actionable-callout";
+import { ActionableCallout, ActionableCalloutDescription } from "seed-design/ui/actionable-callout";
 
 export default function ActionableCalloutNeutral() {
   return (
     <ActionableCallout onClick={() => window.alert("Hello World")} variant="neutral">
-      <ActionableCalloutLabel>
+      <ActionableCalloutDescription>
         Dolore ex occaecat Lorem ad eu. Consectetur consectetur magna pariatur aliquip enim non.
-      </ActionableCalloutLabel>
+      </ActionableCalloutDescription>
     </ActionableCallout>
   );
 }
diff --git a/docs/components/example/actionable-callout-preview.tsx b/docs/components/example/actionable-callout-preview.tsx
@@ -1,20 +1,20 @@
 "use client";
 
-import { ActionableCallout, ActionableCalloutLabel } from "seed-design/ui/actionable-callout";
+import { ActionableCallout, ActionableCalloutDescription } from "seed-design/ui/actionable-callout";
 
 export default function ActionableCalloutPreview() {
   const onClick = () => window.alert("Hello World");
 
   return (
     <div className="flex flex-col gap-3 w-full">
       <ActionableCallout onClick={onClick}>
-        <ActionableCalloutLabel>veniam</ActionableCalloutLabel>
+        <ActionableCalloutDescription>veniam</ActionableCalloutDescription>
       </ActionableCallout>
       <ActionableCallout onClick={onClick}>
-        <ActionableCalloutLabel>
+        <ActionableCalloutDescription>
           기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여
           사용해요.
-        </ActionableCalloutLabel>
+        </ActionableCalloutDescription>
       </ActionableCallout>
     </div>
   );

diff --git a/docs/components/example/actionable-callout-text-only.tsx b/docs/components/example/actionable-callout-text-only.tsx
@@ -1,13 +1,13 @@
 "use client";
 
-import { ActionableCallout, ActionableCalloutLabel } from "seed-design/ui/actionable-callout";
+import { ActionableCallout, ActionableCalloutDescription } from "seed-design/ui/actionable-callout";
 
 export default function ActionableCalloutTextOnly() {
   return (
     <ActionableCallout onClick={() => window.alert("Hello World")} variant="magic">
-      <ActionableCalloutLabel>
+      <ActionableCalloutDescription>
         Aliquip laboris excepteur enim sunt eiusmod laboris anim.
-      </ActionableCalloutLabel>
+      </ActionableCalloutDescription>
     </ActionableCallout>
   );
 }
diff --git a/docs/components/example/actionable-callout-warning.tsx b/docs/components/example/actionable-callout-warning.tsx
@@ -1,13 +1,13 @@
 "use client";
 
-import { ActionableCallout, ActionableCalloutLabel } from "seed-design/ui/actionable-callout";
+import { ActionableCallout, ActionableCalloutDescription } from "seed-design/ui/actionable-callout";
 
 export default function ActionableCalloutWarning() {
   return (
     <ActionableCallout onClick={() => window.alert("Hello World")} variant="warning">
-      <ActionableCalloutLabel>
+      <ActionableCalloutDescription>
         Dolore ex occaecat Lorem ad eu. Consectetur consectetur magna pariatur aliquip enim non.
-      </ActionableCalloutLabel>
+      </ActionableCalloutDescription>
     </ActionableCallout>
   );
 }
diff --git a/docs/components/example/actionable-callout-with-title-text.tsx b/docs/components/example/actionable-callout-with-title-text.tsx
@@ -2,17 +2,17 @@
 
 import {
   ActionableCallout,
-  ActionableCalloutLabel,
+  ActionableCalloutDescription,
   ActionableCalloutTitle,
 } from "seed-design/ui/actionable-callout";
 
 export default function ActionableCalloutWithTitleText() {
   return (
     <ActionableCallout onClick={() => window.alert("Hello World")} variant="magic">
       <ActionableCalloutTitle>새로운 기능</ActionableCalloutTitle>
-      <ActionableCalloutLabel>
+      <ActionableCalloutDescription>
         Aliquip laboris excepteur enim sunt eiusmod laboris anim.
-      </ActionableCalloutLabel>
+      </ActionableCalloutDescription>
     </ActionableCallout>
   );
 }
diff --git a/docs/components/example/actionable-inline-banner-activity.tsx b/docs/components/example/actionable-inline-banner-activity.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 
 import {
   ActionableInlineBanner,
-  ActionableInlineBannerLabel,
+  ActionableInlineBannerDescription,
   type ActionableInlineBannerProps,
 } from "seed-design/ui/actionable-inline-banner";
 import { ActionButton } from "seed-design/ui/action-button";
@@ -31,9 +31,9 @@ const ActionableInlineBannerActivity: ActivityComponentType<"ActionableInlineBan
         style={variant === "dangerSolid" ? { position: "sticky", top: 0 } : undefined}
         onClick={() => window.alert("Hello World")}
       >
-        <ActionableInlineBannerLabel>
+        <ActionableInlineBannerDescription>
           Lorem ipsum dolor sit amet consectetur adipisicing elit.
-        </ActionableInlineBannerLabel>
+        </ActionableInlineBannerDescription>
       </ActionableInlineBanner>
       <div style={{ display: "flex", flexDirection: "column", padding: "1rem", gap: "0.75rem" }}>
         <ActionButton

diff --git a/docs/components/example/actionable-inline-banner-danger-solid.tsx b/docs/components/example/actionable-inline-banner-danger-solid.tsx
@@ -2,7 +2,7 @@
 
 import {
   ActionableInlineBanner,
-  ActionableInlineBannerLabel,
+  ActionableInlineBannerDescription,
 } from "seed-design/ui/actionable-inline-banner";
 import { IconExclamationmarkCircleFill } from "@daangn/react-monochrome-icon";
 
@@ -13,7 +13,9 @@ export default function ActionableInlineBannerDangerSolid() {
       variant="dangerSolid"
       icon={<IconExclamationmarkCircleFill />}
     >
-      <ActionableInlineBannerLabel>사업자 정보를 등록해주세요.</ActionableInlineBannerLabel>
+      <ActionableInlineBannerDescription>
+        사업자 정보를 등록해주세요.
+      </ActionableInlineBannerDescription>
     </ActionableInlineBanner>
   );
 }
diff --git a/docs/components/example/actionable-inline-banner-danger-weak.tsx b/docs/components/example/actionable-inline-banner-danger-weak.tsx
@@ -2,7 +2,7 @@
 
 import {
   ActionableInlineBanner,
-  ActionableInlineBannerLabel,
+  ActionableInlineBannerDescription,
 } from "seed-design/ui/actionable-inline-banner";
 import { IconExclamationmarkCircleFill } from "@daangn/react-monochrome-icon";
 
@@ -13,7 +13,9 @@ export default function ActionableInlineBannerDangerWeak() {
       variant="dangerWeak"
       icon={<IconExclamationmarkCircleFill />}
     >
-      <ActionableInlineBannerLabel>사업자 정보를 등록해주세요.</ActionableInlineBannerLabel>
+      <ActionableInlineBannerDescription>
+        사업자 정보를 등록해주세요.
+      </ActionableInlineBannerDescription>
     </ActionableInlineBanner>
   );
 }
diff --git a/docs/components/example/actionable-inline-banner-informative-weak.tsx b/docs/components/example/actionable-inline-banner-informative-weak.tsx
@@ -2,7 +2,7 @@
 
 import {
   ActionableInlineBanner,
-  ActionableInlineBannerLabel,
+  ActionableInlineBannerDescription,
 } from "seed-design/ui/actionable-inline-banner";
 import { IconExclamationmarkCircleFill } from "@daangn/react-monochrome-icon";
 
@@ -13,7 +13,9 @@ export default function ActionableInlineBannerInformativeWeak() {
       variant="informativeWeak"
       icon={<IconExclamationmarkCircleFill />}
     >
-      <ActionableInlineBannerLabel>사업자 정보를 등록해주세요.</ActionableInlineBannerLabel>
+      <ActionableInlineBannerDescription>
+        사업자 정보를 등록해주세요.
+      </ActionableInlineBannerDescription>
     </ActionableInlineBanner>
   );
 }
diff --git a/docs/components/example/actionable-inline-banner-neutral-weak.tsx b/docs/components/example/actionable-inline-banner-neutral-weak.tsx
@@ -2,7 +2,7 @@
 
 import {
   ActionableInlineBanner,
-  ActionableInlineBannerLabel,
+  ActionableInlineBannerDescription,
 } from "seed-design/ui/actionable-inline-banner";
 import { IconExclamationmarkCircleFill } from "@daangn/react-monochrome-icon";
 
@@ -13,7 +13,9 @@ export default function ActionableInlineBannerNeutralWeak() {
       variant="neutralWeak"
       icon={<IconExclamationmarkCircleFill />}
     >
-      <ActionableInlineBannerLabel>사업자 정보를 등록해주세요.</ActionableInlineBannerLabel>
+      <ActionableInlineBannerDescription>
+        사업자 정보를 등록해주세요.
+      </ActionableInlineBannerDescription>
     </ActionableInlineBanner>
   );
 }
diff --git a/docs/components/example/actionable-inline-banner-positive-weak.tsx b/docs/components/example/actionable-inline-banner-positive-weak.tsx
@@ -2,7 +2,7 @@
 
 import {
   ActionableInlineBanner,
-  ActionableInlineBannerLabel,
+  ActionableInlineBannerDescription,
 } from "seed-design/ui/actionable-inline-banner";
 import { IconExclamationmarkCircleFill } from "@daangn/react-monochrome-icon";
 
@@ -13,7 +13,9 @@ export default function ActionableInlineBannerPositiveWeak() {
       variant="positiveWeak"
       icon={<IconExclamationmarkCircleFill />}
     >
-      <ActionableInlineBannerLabel>사업자 정보를 등록해주세요.</ActionableInlineBannerLabel>
+      <ActionableInlineBannerDescription>
+        사업자 정보를 등록해주세요.
+      </ActionableInlineBannerDescription>
     </ActionableInlineBanner>
   );
 }
diff --git a/docs/components/example/actionable-inline-banner-preview.tsx b/docs/components/example/actionable-inline-banner-preview.tsx
@@ -2,7 +2,7 @@
 
 import {
   ActionableInlineBanner,
-  ActionableInlineBannerLabel,
+  ActionableInlineBannerDescription,
 } from "seed-design/ui/actionable-inline-banner";
 
 export default function ActionableInlineBannerPreview() {
@@ -11,12 +11,12 @@ export default function ActionableInlineBannerPreview() {
   return (
     <div className="flex flex-col gap-3 w-full">
       <ActionableInlineBanner onClick={onClick}>
-        <ActionableInlineBannerLabel>ullamco</ActionableInlineBannerLabel>
+        <ActionableInlineBannerDescription>ullamco</ActionableInlineBannerDescription>
       </ActionableInlineBanner>
       <ActionableInlineBanner onClick={onClick}>
-        <ActionableInlineBannerLabel>
+        <ActionableInlineBannerDescription>
           Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet.
-        </ActionableInlineBannerLabel>
+        </ActionableInlineBannerDescription>
       </ActionableInlineBanner>
     </div>
   );

diff --git a/docs/components/example/actionable-inline-banner-text-only.tsx b/docs/components/example/actionable-inline-banner-text-only.tsx
@@ -2,13 +2,16 @@
 
 import {
   ActionableInlineBanner,
-  ActionableInlineBannerLabel,
+  ActionableInlineBannerDescription,
 } from "seed-design/ui/actionable-inline-banner";
 
 export default function ActionableInlineBannerTextOnly() {
   return (
     <ActionableInlineBanner variant="informativeWeak" onClick={() => window.alert("Hello World")}>
-      <ActionableInlineBannerLabel>다른 사람과 예약된 물품이 있</ActionableInlineBannerLabel>어요.
+      <ActionableInlineBannerDescription>
+        다른 사람과 예약된 물품이 있
+      </ActionableInlineBannerDescription>
+      어요.
     </ActionableInlineBanner>
   );
 }
diff --git a/docs/components/example/actionable-inline-banner-warning-solid.tsx b/docs/components/example/actionable-inline-banner-warning-solid.tsx
@@ -2,7 +2,7 @@
 
 import {
   ActionableInlineBanner,
-  ActionableInlineBannerLabel,
+  ActionableInlineBannerDescription,
 } from "seed-design/ui/actionable-inline-banner";
 import { IconExclamationmarkCircleFill } from "@daangn/react-monochrome-icon";
 
@@ -13,7 +13,9 @@ export default function ActionableInlineBannerWarningSolid() {
       variant="warningSolid"
       icon={<IconExclamationmarkCircleFill />}
     >
-      <ActionableInlineBannerLabel>사업자 정보를 등록해주세요.</ActionableInlineBannerLabel>
+      <ActionableInlineBannerDescription>
+        사업자 정보를 등록해주세요.
+      </ActionableInlineBannerDescription>
     </ActionableInlineBanner>
   );
 }
diff --git a/docs/components/example/actionable-inline-banner-warning-weak.tsx b/docs/components/example/actionable-inline-banner-warning-weak.tsx
@@ -2,7 +2,7 @@
 
 import {
   ActionableInlineBanner,
-  ActionableInlineBannerLabel,
+  ActionableInlineBannerDescription,
 } from "seed-design/ui/actionable-inline-banner";
 import { IconExclamationmarkCircleFill } from "@daangn/react-monochrome-icon";
 
@@ -13,7 +13,9 @@ export default function ActionableInlineBannerWarningWeak() {
       variant="warningWeak"
       icon={<IconExclamationmarkCircleFill />}
     >
-      <ActionableInlineBannerLabel>사업자 정보를 등록해주세요.</ActionableInlineBannerLabel>
+      <ActionableInlineBannerDescription>
+        사업자 정보를 등록해주세요.
+      </ActionableInlineBannerDescription>
     </ActionableInlineBanner>
   );
 }
diff --git a/docs/components/example/actionable-inline-banner-with-icon-and-title-text.tsx b/docs/components/example/actionable-inline-banner-with-icon-and-title-text.tsx
@@ -3,7 +3,7 @@
 import { IconILowercaseSerifCircleFill } from "@daangn/react-monochrome-icon";
 import {
   ActionableInlineBanner,
-  ActionableInlineBannerLabel,
+  ActionableInlineBannerDescription,
   ActionableInlineBannerTitle,
 } from "seed-design/ui/actionable-inline-banner";
 
@@ -15,7 +15,9 @@ export default function ActionableInlineBannerWithIconAndTitleText() {
       icon={<IconILowercaseSerifCircleFill />}
     >
       <ActionableInlineBannerTitle>예약</ActionableInlineBannerTitle>
-      <ActionableInlineBannerLabel>다른 사람과 예약된 물품이 있어요.</ActionableInlineBannerLabel>
+      <ActionableInlineBannerDescription>
+        다른 사람과 예약된 물품이 있어요.
+      </ActionableInlineBannerDescription>
     </ActionableInlineBanner>
   );
 }
diff --git a/docs/components/example/actionable-inline-banner-with-icon.tsx b/docs/components/example/actionable-inline-banner-with-icon.tsx
@@ -2,7 +2,7 @@
 
 import {
   ActionableInlineBanner,
-  ActionableInlineBannerLabel,
+  ActionableInlineBannerDescription,
 } from "seed-design/ui/actionable-inline-banner";
 import { IconILowercaseSerifCircleFill } from "@daangn/react-monochrome-icon";
 
@@ -13,7 +13,9 @@ export default function ActionableInlineBannerWithIcon() {
       variant="informativeWeak"
       icon={<IconILowercaseSerifCircleFill />}
     >
-      <ActionableInlineBannerLabel>다른 사람과 예약된 물품이 있어요.</ActionableInlineBannerLabel>
+      <ActionableInlineBannerDescription>
+        다른 사람과 예약된 물품이 있어요.
+      </ActionableInlineBannerDescription>
     </ActionableInlineBanner>
   );
 }