Notification

الإشعار

التثبيت

$bunx --bun shadcn@latest add @dga/notification

الاستخدام

page.tsx

tsx

import { Notification } from "@/components/ui/notification";

export function MaintenanceNotice() {
  return (
    <Notification
      variant="warning"
      title="تنبيه:"
      dismissible
      dismissLabel="تجاهل"
      action={<a href="/status">التفاصيل</a>}
    >
      ستتوقف البوابة للصيانة يوم الجمعة.
    </Notification>
  );
}

استخدم Notification في أعلى صفحة أو قسم لما يخصها كلها: صيانة مجدولة أو خدمة جديدة أو مشكلة في الحساب. ويبقى حتى يتجاهله الشخص أو يزول سببه. ولرسالة تخص نموذجًا أو بطاقة واحدة استخدم Inline Alert؛ وللحدث الذي وقع للتو استخدم Toast. أضف Notification عند انطباقه لا قبله: فالمنطقة الحية تُعلَن عند ظهور محتواها. وابدأه بـ title قصير بخط عريض («مهم:»).

البنية

الشريط (role="status" أو role="alert" لـ critical): بعرض كامل وحشوة 8 في 24px وانحناء radius-xs وحد سفلي بسمك 2px بلون النوع.
الأيقونة (اختيارية) والعنوان (نص افتتاحي بخط عريض) والرسالة.
الإجراء (رابط أو Button صغير) وزر الإغلاق، في جهة النهاية.

أمثلة

الأنواع

قيمة variant هي neutral أو info أو success أو warning أو critical. ولكل نوع تظليل 50 ونص وأيقونة بلونه. تجاهل أحدها لتراه يزول.

دون أيقونة ومُغلق

تزيل hideIcon أيقونة الحالة: ويبقى اللون والعنوان العريض حاملين للنوع. وبعد أن يغلق الشخص الإشعار تُستدعى onDismiss ولا يُعرض شيء مكانه، فاحتفظ بالحالة في الصفحة إن أردت إعادته.

RTL

الأيقونة على اليمين، والإجراء وزر الإغلاق على اليسار، ويبدأ النص من اليمين. ولا شيء يُعكس يدويًا.

LTR (الإنجليزية)

RTL (العربية)

إمكانية الوصول

المفتاح	الإجراء
`Tab`	ينقل التركيز إلى الإجراء ثم إلى زر الإغلاق.
`Enter`	يضغط الرابط أو الزر المركَّز.
`Space`	يضغط الزر المركَّز.

منطقة حية: لـ critical الدور role="alert" ويقاطع؛ وغيره role="status" وينتظر فاصلًا. ولا يتحرك التركيز.
يظهر النوع من الأيقونة والنص الافتتاحي إضافة إلى اللون. والنص بنسبة 4.5:1 والأيقونات 3:1 أو أفضل على التظليل، فاتحًا وداكنًا.
لزر الإغلاق اسم (dismissLabel) وحد تركيز بسمك 2px. وتحتفظ الروابط في الرسالة بخطها السفلي.

مرجع API

شريط بعرض كامل لرسالة تخص الصفحة كلها (في DGA: Notification)، في أعلى الصفحة أو قسم منها. هو منطقة حية: تُعلَن `critical` فورًا (`role="alert"`) وغيرها بأدب (`role="status"`). أضفه عند انطباق الرسالة لا قبله ليُعلَن.

خصائص Notification
الخاصية	النوع	القيمة الافتراضية
	`"neutral" \| "critical" \| "success" \| "warning" \| "info"` النوع: `neutral` أو `info` أو `success` أو `warning` أو `critical`.	`"neutral"`
النوع "neutral" \| "critical" \| "success" \| "warning" \| "info" القيمة الافتراضية "neutral" الوصف النوع: `neutral` أو `info` أو `success` أو `warning` أو `critical`.
	`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` نص افتتاحي بخط عريض قبل الرسالة، مثل «مهم:».	لا توجد قيمة افتراضية
النوع string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode> القيمة الافتراضية لا شيء الوصف نص افتتاحي بخط عريض قبل الرسالة، مثل «مهم:».
	`boolean` يخفي أيقونة الحالة.	لا توجد قيمة افتراضية
النوع boolean القيمة الافتراضية لا شيء الوصف يخفي أيقونة الحالة.
	`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` رابط أو Button صغير بعد الرسالة.	لا توجد قيمة افتراضية
النوع string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode> القيمة الافتراضية لا شيء الوصف رابط أو Button صغير بعد الرسالة.
	`() => void` تُستدعى بعد إغلاق الإشعار.	لا توجد قيمة افتراضية
النوع () => void القيمة الافتراضية لا شيء الوصف تُستدعى بعد إغلاق الإشعار.
	`boolean` يعرض زر الإغلاق. يخفي الإشعار نفسه ثم يستدعي `onDismiss`.	لا توجد قيمة افتراضية
النوع boolean القيمة الافتراضية لا شيء الوصف يعرض زر الإغلاق. يخفي الإشعار نفسه ثم يستدعي `onDismiss`.
	`string` الاسم الذي يقرؤه قارئ الشاشة لزر الإغلاق. ترجمه في الصفحات العربية.	`"Dismiss"`
النوع string القيمة الافتراضية "Dismiss" الوصف الاسم الذي يقرؤه قارئ الشاشة لزر الإغلاق. ترجمه في الصفحات العربية.

يقبل أيضًا خصائص العنصر الذي يُصيّره.

الاختلافات عن DGA

يلوّن Figma الأيقونة بـ icon-oncolor (أبيض) على تظليل 50: أي 1.0 إلى 1.1:1، فلا تُرى. وتستخدم الأيقونة لون أيقونة النوع.
يرسم CSS النجاح بأخضر العلامة بينما يستخدم Figma رموز النجاح؛ ويُعتمد Figma. وكل نوع يُعلَن بوصفه منطقة حية.

التغيير	السبب
`Notification: the icon colour`	A white icon on a 50 tint is 1.0 to 1.1:1: it cannot be seen. The kinds should read as one set.
`Notification, Inline Alert: live regions`	A message that appears on its own must be announced without moving focus (WCAG 4.1.3). Urgent kinds interrupt; the rest wait.

عرض جميع الاختلافات (2) لهذا المكوّن أسباب الاختلافات مكتوبة بالإنجليزية.

التباين

80 زوجًا لونيًا فُحص · جميعها تجتاز WCAG 2.1 AAعرض 20 حالة

النمط / الحالة	الفاتح	الداكن
neutral / text	9.73:1 AAA	12.93:1 AAA
neutral / icon	17.31:1 3:1	17.04:1 3:1
neutral / close icon	17.31:1 3:1	17.04:1 3:1
neutral / focus ring	17.31:1 3:1	18.77:1 3:1
info / text	5.57:1 AA	8.53:1 AAA
info / icon	5.57:1 3:1	8.53:1 3:1
info / close icon	16.83:1 3:1	13.69:1 3:1
info / focus ring	16.83:1 3:1	15.09:1 3:1
success / text	5.39:1 AA	9.08:1 AAA
success / icon	5.39:1 3:1	9.08:1 3:1
success / close icon	17.15:1 3:1	13.34:1 3:1
success / focus ring	17.15:1 3:1	14.70:1 3:1
warning / text	5.20:1 AA	9.75:1 AAA
warning / icon	5.20:1 3:1	9.75:1 3:1
warning / close icon	17.34:1 3:1	13.70:1 3:1
warning / focus ring	17.34:1 3:1	15.09:1 3:1
critical / text	6.04:1 AA	7.94:1 AAA
critical / icon	6.04:1 3:1	7.94:1 3:1
critical / close icon	16.64:1 3:1	14.00:1 3:1
critical / focus ring	16.64:1 3:1	15.42:1 3:1

يحتاج النص إلى تباين 4.5:1، والأيقونات وحلقات التركيز إلى 3:1. الحالات المعطّلة مستثناة. تقرير التباين الكامل

التثبيتنسخ رابط العنوان

الاستخدامنسخ رابط العنوان

البنيةنسخ رابط العنوان

أمثلةنسخ رابط العنوان

الأنواعنسخ رابط العنوان

دون أيقونة ومُغلقنسخ رابط العنوان

RTLنسخ رابط العنوان

إمكانية الوصولنسخ رابط العنوان

مرجع APIنسخ رابط العنوان