لافتة التنبيه

نظرة عامة

تُستخدم اللافتة لمعلومات مهمة أو إجراءات مطلوبة تكون بارزة لكنها غير مشروطة (لا توقف تدفق الشاشة). اختر الصيغة حسب شدة الموقف.

الخصائص

خاصيتان أساسيتان: شدة اللافتة، وإمكانية إغلاقها. القيم المذكورة شاملة.

• variant: الشدة ولون التأكيد؛ راجع مفردات المكونات (اللافتة).
• dismissible: صحيح فقط إذا حلّ المستخدم المشكلة، أو كانت المعلومة اختيارية حقا؛ راجع قواعد اللافتة في مفردات المكونات.

الحالات

تعرّف اللافتة حالتين: الافتراضية، والتركيز (عند التنقل إليها أو إلى عنصر تحكم الإغلاق بلوحة المفاتيح).

السلوك

اللافتة ثابتة داخل التدفّق (inline) أعلى الشاشة أو القسم، تدفع المحتوى تحتها ولا تطفو فوقه ولا تحجبه. لا تختفي تلقائيا: تبقى ظاهرة ما دامت المشكلة قائمة، وتُزال فقط حين يحلّها المستخدم أو حين تكون المعلومة اختيارية حقا فيضغط زر الإغلاق. عند التنقّل بلوحة المفاتيح ينتقل التركيز إلى زر الإجراء ثم إلى زر الإغلاق، وضغط أيّ منهما يستجيب فورا دون أن يقفز باقي التخطيط.

المحتوى

التسمية جملة واحدة واضحة تسمّي المشكلة وتضيف خطوة تالية محددة، وليست وصفا وحده أبدا. الإجراء، عند وجوده، فعل أولا مثل راجع أو أرسل.

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

• عنصر تحكم الإغلاق، عند وجوده، مساحته 44×44 بكسل على الأقل.
• تُنقل الشدة عبر الأيقونة واللون والتسمية النصية معا، لا اللون وحده أبدا.
• تسمية وصول عربية على أيقونة الشدة، مثل تنبيه، تحذير.

الاتجاه والتوطين

الاتجاه منطقي: صمّم بخصائص منطقية (الحشو والأيقونات من البداية والنهاية، لا اليسار واليمين الصريحين) والمنصة تعكس تلقائيا عند التبديل إلى العربية.

افعل ولا تفعل

الرموز المستخدمة

أمثلة

<Banner variant="warning">تجاوزت حد البونص. قلّل الكمية أو تواصل مع المكتب.</Banner>

الشيفرة

اللافتة تُستورد من حزمة المكوّنات، ولونها وأيقونتها يأتيان من خريطة شدّة دلالية لا من قيم خام. الاستخدام في React أولا، ثم قلب التطبيق الذي يربط كل شدّة برمزها.

import { Banner } from "@mercato/components";

<Banner variant="warning" action="تواصل" dismissible>
  تجاوزت حد البونص. قلّل الكمية أو تواصل مع المكتب.
</Banner>
<Banner variant="info">عناصر غير مرتبطة في الطلبية تحتاج متابعة المكتب.</Banner>
<Banner variant="success">تم حفظ التغييرات.</Banner>

// Fill + icon color per intent, never a raw hex.
const BANNER_TONES = {
  info:     { bg: "var(--color-bg-intent-info-subtle)",     fg: "var(--color-fg-intent-info)",     icon: "info" },
  success:  { bg: "var(--color-bg-intent-positive-subtle)", fg: "var(--color-fg-intent-positive)", icon: "check_circle" },
  warning:  { bg: "var(--color-bg-intent-warning-subtle)",  fg: "var(--color-fg-intent-warning)",  icon: "warning" },
  critical: { bg: "var(--color-bg-intent-negative-subtle)", fg: "var(--color-fg-intent-negative)", icon: "error" },
};

const t = BANNER_TONES[variant];
<div role="status" style={{ backgroundColor: t.bg, borderRadius: "var(--shape-surface-base)" }}>
  {/* icon + color + label together carry the severity */}
  <span className="material-symbol" style={{ color: t.fg }}>{t.icon}</span>
  <div className="text-ink">{children}</div>
</div>

لا تحمل اللافتة قيمة لون أو استدارة مباشرة: تبديل الوضع الداكن أو إعادة العلامة يسري تلقائيا لأن كل شدّة تمرّ عبر رمزها الدلالي.

مكوّنات ذات صلة