بنر بحران (PostCrisisBanner)

معرفی

PostCrisisBanner نوار باریکی است که روی لبه بالایی PostCard رندر می‌شود تا منشن‌های بحرانی یا پرشدت را در نگاه اول قابل تشخیص کند. طراحی آن عمداً ظریف است — به جای قرمز کردن کل کارت، فقط یک نوار کم‌ارتفاع با رنگ ملایم اضافه می‌کند تا پست همچنان اسکن‌پذیر بماند. در شدت بحرانی، نقطه تپنده متحرک نیز نمایش داده می‌شود.

چه زمانی استفاده کنیم:

• برجسته کردن پست‌های بحرانی در فید پایش برند — مثلاً موج گسترده بازخورد منفی درباره بسته‌بندی محصول جدید
• صف‌های triage که تحلیل‌گر باید موارد نیازمند رسیدگی فوری را سریع از بقیه تشخیص دهد
• کارت‌های سفارشی (خارج از PostCard) که به همان زبان بصری شدت در سراسر محصول نیاز دارند

چه زمانی استفاده نکنیم:

• برای اعلان‌های سراسری صفحه یا محصول (اطلاع‌رسانی، به‌روزرسانی) — از Banner استفاده کنید
• برای نمایش شدت به‌صورت چیپ فشرده داخل متادیتا، جدول یا فوتر کارت — از SeverityBadge استفاده کنید
• وقتی از PostCard استفاده می‌کنید و severity پست برابر critical است — کارت خودش این بنر را رندر می‌کند؛ دوباره اضافه نکنید

استفاده

import { PostCrisisBanner } from '@partodata/ui'

<PostCrisisBanner severity="high" />

حالت‌ها و انواع

چهار سطح شدت

هر چهار مقدار PostSeverity پشتیبانی می‌شود. سه سطح low، medium و high از توکن‌های --severity-* رنگ می‌گیرند و سطح critical از توکن --status-critical. برچسب پیش‌فرض هر سطح به فارسی است: «شدت پایین»، «شدت متوسط»، «شدت بالا» و «بحرانی». فقط در سطح critical نقطه کنار آیکن با انیمیشن ping می‌تپد.

<PostCrisisBanner severity="low" />
<PostCrisisBanner severity="medium" />
<PostCrisisBanner severity="high" />
<PostCrisisBanner severity="critical" />

برچسب سفارشی

با prop اختیاری label می‌توانید به جای نام پیش‌فرض شدت، متن دقیق‌تری نمایش دهید. رنگ و آیکن همچنان از severity پیروی می‌کنند.

<PostCrisisBanner severity="high" label="نیاز به پاسخ تیم برند" />

نشستن روی لبه کارت

بنر فقط گوشه‌های بالایی گرد (rounded-t-md) و حاشیه بالا و کناری دارد — یعنی برای نشستن روی لبه بالایی یک کارت طراحی شده است. بدنه زیرین را بدون حاشیه بالا رندر کنید تا یکپارچه دیده شوند:

<div>
  <PostCrisisBanner severity="critical" />
  <div className="rounded-b-md border border-t-0 border-border bg-background-surface-100 px-3 py-2 text-sm">
    موج گسترده انتقاد از کمپین تخفیف فصلی در چند پلتفرم
  </div>
</div>

ترکیب خودکار با PostCard

PostCard وقتی post.severity === 'critical' باشد، این بنر را به‌صورت خودکار بالای کارت رندر می‌کند — نیازی به ترکیب دستی نیست. برای سایر سطوح شدت، PostCard بنر نمایش نمی‌دهد و در صورت نیاز باید خودتان آن را در layout سفارشی اضافه کنید.

راهنمای استفاده

Props

PostCrisisBanner علاوه بر props زیر، همه ویژگی‌های React.HTMLAttributes<HTMLDivElement> (مانند className) را می‌پذیرد و ref را با forwardRef به عنصر ریشه منتقل می‌کند. عنصر ریشه دارای data-slot="post-crisis-banner" و data-severity است که برای استایل‌دهی سفارشی قابل استفاده‌اند.

دسترسی‌پذیری

• در شدت critical، عنصر ریشه role="alert" می‌گیرد — صفحه‌خوان‌ها ظاهر شدن بنر را بلافاصله اعلام می‌کنند.
• در شدت‌های low، medium و high هیچ role تنظیم نمی‌شود و متن بنر در جریان عادی سند خوانده می‌شود.
• کامپوننت غیرتعاملی است: فوکوس‌پذیر نیست، در ترتیب Tab قرار نمی‌گیرد و تعامل کیبورد ندارد.
• معنا تنها با رنگ منتقل نمی‌شود — برچسب متنی و آیکن مثلث هشدار در همه سطوح شدت حاضرند.
• انیمیشن تپش نقطه صرفاً تزئینی است و هیچ اطلاعاتی فقط از طریق حرکت منتقل نمی‌شود؛ بلاک سراسری prefers-reduced-motion در استایل‌های دیزاین‌سیستم، این انیمیشن را برای کاربرانی که کاهش حرکت را انتخاب کرده‌اند عملاً غیرفعال می‌کند.

کامپوننت‌های مرتبط

• PostCard — در فید پست‌ها از خود PostCard استفاده کنید؛ وقتی شدت پست بحرانی باشد، این بنر به‌صورت خودکار بالای کارت رندر می‌شود.
• SeverityBadge — اگر شدت را به‌صورت چیپ فشرده داخل متادیتا، جدول یا لیست لازم دارید، نه نوار روی لبه کارت.
• Banner — برای اعلان سراسری صفحه یا بخش (اطلاع‌رسانی محصول، وضعیت سرویس)، نه هشدار متصل به یک پست مشخص.
• Alert — برای پیام درون‌صفحه‌ای با عنوان و توضیح، وقتی پیام به کارت پست خاصی وابسته نیست.