Create Community stage implemented

app/components/type/HeaderLockup/HeaderLockup.types.ts

@@ -1,3 +1,5 @@
+import type { ReactNode } from "react";
+
 export type HeaderLockupJustificationValue =
   | "left"
   | "center"
@@ -16,9 +18,9 @@ export interface HeaderLockupProps {
    */
   title: string;
   /**
-   * Description text (optional)
+   * Description (optional). String for plain copy, or ReactNode for rich inline content (e.g. linked words).
    */
-  description?: string;
+  description?: ReactNode;
   /**
    * Text justification. Accepts both PascalCase (Figma) and lowercase (codebase).
    * Figma uses PascalCase, codebase uses lowercase - both are supported.
@@ -38,7 +40,7 @@ export interface HeaderLockupProps {
 
 export interface HeaderLockupViewProps {
   title: string;
-  description?: string;
+  description?: ReactNode;
   justification: "left" | "center";
   size: "L" | "M";
   palette: "default" | "inverse";

app/components/type/HeaderLockup/HeaderLockup.view.tsx

@@ -43,17 +43,18 @@ function HeaderLockupView({
       </div>
 
       {/* Description */}
-      {description && (
-        <p
-          className={`font-inter font-normal max-w-[640px] overflow-hidden relative shrink-0 ${descriptionColorClass} text-ellipsis w-full whitespace-pre-wrap ${
-            isLeft ? "" : "text-center"
-          } ${
-            isL ? "text-[18px] leading-[1.3]" : "text-[14px] leading-[20px]"
-          }`}
-        >
-          {description}
-        </p>
-      )}
+      {description != null &&
+        !(typeof description === "string" && description.length === 0) && (
+          <p
+            className={`font-inter font-normal max-w-[640px] overflow-hidden relative shrink-0 ${descriptionColorClass} text-ellipsis w-full whitespace-pre-wrap ${
+              isLeft ? "" : "text-center"
+            } ${
+              isL ? "text-[18px] leading-[1.3]" : "text-[14px] leading-[20px]"
+            }`}
+          >
+            {description}
+          </p>
+        )}
     </div>
   );
 }