Skip to content

Commit effc600

Browse files
nouha06nouha06
committed
feat(inline-alert): add inline alert component
1 parent 4f24bd1 commit effc600

32 files changed

Lines changed: 749 additions & 268 deletions

‎app/lib/l10n/gen/ouds_flutter_app_localizations.dart‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -667,6 +667,18 @@ abstract class AppLocalizations {
667667
/// **'Bullet {bulletNumber}'**
668668
String app_components_alert_alertMessage_bullet_tech(int bulletNumber);
669669

670+
/// No description provided for @app_components_alert_inlineAlert_tech.
671+
///
672+
/// In en, this message translates to:
673+
/// **'Inline alert'**
674+
String get app_components_alert_inlineAlert_tech;
675+
676+
/// No description provided for @app_components_alert_inlineAlert_description_text.
677+
///
678+
/// In en, this message translates to:
679+
/// **'Inline alert is a lightweight UI element, placed in the content flow, that displays information, system feedback, status changes throughout short, prominent, persistent and non actionable communication.'**
680+
String get app_components_alert_inlineAlert_description_text;
681+
670682
/// No description provided for @app_components_button_label.
671683
///
672684
/// In en, this message translates to:

‎app/lib/l10n/gen/ouds_flutter_app_localizations_ar.dart‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,13 @@ class AppLocalizationsAr extends AppLocalizations {
311311
return 'Bullet $bulletNumber';
312312
}
313313

314+
@override
315+
String get app_components_alert_inlineAlert_tech => 'Inline alert';
316+
317+
@override
318+
String get app_components_alert_inlineAlert_description_text =>
319+
'Inline alert هو عنصر واجهة مستخدم خفيف الوزن، يتم وضعه داخل تدفّق المحتوى، ويُستخدم لعرض المعلومات أو ملاحظات النظام أو تغيّرات الحالة، من خلال رسائل قصيرة وواضحة وبارزة ومستمرّة، وغير قابلة لاتخاذ إجراء.';
320+
314321
@override
315322
String get app_components_button_label => 'Button';
316323

‎app/lib/l10n/gen/ouds_flutter_app_localizations_en.dart‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,13 @@ class AppLocalizationsEn extends AppLocalizations {
311311
return 'Bullet $bulletNumber';
312312
}
313313

314+
@override
315+
String get app_components_alert_inlineAlert_tech => 'Inline alert';
316+
317+
@override
318+
String get app_components_alert_inlineAlert_description_text =>
319+
'Inline alert is a lightweight UI element, placed in the content flow, that displays information, system feedback, status changes throughout short, prominent, persistent and non actionable communication.';
320+
314321
@override
315322
String get app_components_button_label => 'Button';
316323

‎app/lib/l10n/gen/ouds_flutter_app_localizations_fr.dart‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -313,6 +313,13 @@ class AppLocalizationsFr extends AppLocalizations {
313313
return 'Bullet $bulletNumber';
314314
}
315315

316+
@override
317+
String get app_components_alert_inlineAlert_tech => 'Inline alert';
318+
319+
@override
320+
String get app_components_alert_inlineAlert_description_text =>
321+
'Une Inline alert est un élément d\'interface utilisateur léger, placé dans le flux de contenu, qui affiche des informations, des commentaires système et des changements d\'état au moyen d\'une communication courte, visible, persistante et non exploitable.';
322+
316323
@override
317324
String get app_components_button_label => 'Button';
318325

‎app/lib/l10n/ouds_flutter_ar.arb‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
"@_components_alert": {},
6565
"app_components_alert_description_text": "مكونات alerte هي عناصر واجهة المستخدم التي تعرض معلومات، ردود فعل النظام أو تغييرات الحالة.",
6666
"app_components_alert_alertMessage_description_text": "Alert message (أو رسالة التحذير) هي عنصر من عناصر واجهة المستخدم التي تعرض معلومات النظام، تغييرات الحالة أو إجراء مطلوب؛ وذلك من خلال تواصل مفصل، مرئي، مستمر وقابل للاستخدام.",
67+
"app_components_alert_inlineAlert_description_text": "Inline alert هو عنصر واجهة مستخدم خفيف الوزن، يتم وضعه داخل تدفّق المحتوى، ويُستخدم لعرض المعلومات أو ملاحظات النظام أو تغيّرات الحالة، من خلال رسائل قصيرة وواضحة وبارزة ومستمرّة، وغير قابلة لاتخاذ إجراء.",
6768

6869
"@_components_button": {},
6970
"app_components_button_description_text": "Button هو عنصر واجهة مستخدم يُستخدم لتحفيز إجراء أو حدث، ويستخدم لبدء المهام أو تأكيد إجراء معين.",

‎app/lib/l10n/ouds_flutter_en.arb‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,8 @@
153153
}
154154
}
155155
},
156+
"app_components_alert_inlineAlert_tech": "Inline alert",
157+
"app_components_alert_inlineAlert_description_text": "Inline alert is a lightweight UI element, placed in the content flow, that displays information, system feedback, status changes throughout short, prominent, persistent and non actionable communication.",
156158

157159
"@_components_button": {},
158160
"app_components_button_label": "Button",

‎app/lib/l10n/ouds_flutter_fr.arb‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@
7777
"@_components_alert": {},
7878
"app_components_alert_description_text": "Les composants d'alerte sont des éléments d'interface utilisateur qui affichent des informations, des retours système ou des changements d'état.",
7979
"app_components_alert_alertMessage_description_text": "Un Alert message (ou message d'alerte) est un élément d'interface utilisateur qui affiche des informations système, des changements d'état ou une action requise; le tout grâce à une communication détaillée, visible, persistante et exploitable.",
80+
"app_components_alert_inlineAlert_description_text": "Une Inline alert est un élément d'interface utilisateur léger, placé dans le flux de contenu, qui affiche des informations, des commentaires système et des changements d'état au moyen d'une communication courte, visible, persistante et non exploitable.",
8081

8182
"@_components_badge": {},
8283
"app_components_badge_description_text": "Un Badge est un élément d'interface utilisateur qui met en évidence les notifications système, l'état ou la catégorisation d'une information, uniquement par le biais de la couleur.",

app/lib/ui/components/alert/alert_message/aler_message_code_generator.dart renamed to app/lib/ui/components/alert/alert_code_generator.dart

Lines changed: 33 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,19 @@
1212
*/
1313

1414
import 'package:flutter/material.dart';
15-
import 'package:ouds_core/components/alert_message/ouds_alert_message.dart';
16-
import 'package:ouds_flutter_demo/ui/components/alert/alert_message/alert_message_customization.dart';
15+
import 'package:ouds_core/components/alert/ouds_alert_message.dart';
16+
import 'package:ouds_core/components/alert/ouds_inline_alert.dart';
17+
import 'package:ouds_flutter_demo/ui/components/alert/alert_customization.dart';
1718
import 'package:ouds_flutter_demo/ui/utilities/component/status_enum.dart';
1819

19-
/// A utility class to generate the code for an [OudsAlertMessage] based on customization settings.
20-
class AlertMessageCodeGenerator {
20+
/// A utility class to generate the code for an [OudsAlertMessage] and [OudsInlineAlert] based on customization settings.
21+
class AlertCodeGenerator {
2122
/// Generates the Dart code for the [OudsAlertMessage] widget.
2223
///
2324
/// The generated code reflects the current state of the customization
24-
/// options provided by [AlertMessageCustomization].
25-
static String updateCode(BuildContext context) {
26-
final customization = AlertMessageCustomization.of(context)!;
25+
/// options provided by [AlertCustomization].
26+
static String updateAlertMessageCode(BuildContext context) {
27+
final customization = AlertCustomization.of(context)!;
2728
final buffer = StringBuffer();
2829

2930
buffer.writeln('OudsAlertMessage(');
@@ -78,10 +79,32 @@ class AlertMessageCodeGenerator {
7879
return buffer.toString();
7980
}
8081

82+
/// Generates the Dart code for the [OudsInlineAlert] widget.
83+
///
84+
/// The generated code reflects the current state of the customization
85+
/// options provided by [AlertCustomization].
86+
static String updateInlineAlertCode(BuildContext context) {
87+
final customization = AlertCustomization.of(context)!;
88+
final buffer = StringBuffer();
89+
90+
buffer.writeln('OudsInlineAlert(');
91+
92+
// label
93+
buffer.writeln(" label: '${customization.label}',");
94+
95+
// status
96+
final status = _getIconStatusCode(customization);
97+
if (status != null) {
98+
buffer.writeln(' status: $status,');
99+
}
100+
101+
buffer.write(')');
102+
103+
return buffer.toString();
104+
}
105+
81106
/// Generates the code snippet for the `status` property.
82-
static String? _getIconStatusCode(
83-
AlertMessageCustomizationState customization,
84-
) {
107+
static String? _getIconStatusCode(AlertCustomizationState customization) {
85108
if (!customization.hasIconStatus) {
86109
return null;
87110
}

app/lib/ui/components/alert/alert_message/alert_message_customization.dart renamed to app/lib/ui/components/alert/alert_customization.dart

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,41 +12,39 @@
1212
*/
1313

1414
import 'package:flutter/material.dart';
15-
import 'package:ouds_flutter_demo/ui/components/alert/alert_message/alert_enum.dart';
15+
import 'package:ouds_flutter_demo/ui/components/alert/alert_enum.dart';
1616
import 'package:ouds_flutter_demo/ui/utilities/component/status_enum.dart';
1717
import 'package:ouds_flutter_demo/ui/utilities/customizable/customizable_widget_state.dart';
1818

1919
/// Section for InheritedWidget to pass data down the widget tree
20-
class _AlertMessageCustomization extends InheritedWidget {
21-
const _AlertMessageCustomization({required super.child, required this.data});
20+
class _AlertCustomization extends InheritedWidget {
21+
const _AlertCustomization({required super.child, required this.data});
2222

23-
final AlertMessageCustomizationState data;
23+
final AlertCustomizationState data;
2424

2525
@override
26-
bool updateShouldNotify(_AlertMessageCustomization oldWidget) => true;
26+
bool updateShouldNotify(_AlertCustomization oldWidget) => true;
2727
}
2828

29-
/// Main Widget class for AlertMessage customization
30-
class AlertMessageCustomization extends StatefulWidget {
31-
const AlertMessageCustomization({super.key, required this.child});
29+
/// Main Widget class for Alert customization
30+
class AlertCustomization extends StatefulWidget {
31+
const AlertCustomization({super.key, required this.child});
3232

3333
final Widget child;
3434

3535
@override
36-
AlertMessageCustomizationState createState() =>
37-
AlertMessageCustomizationState();
36+
AlertCustomizationState createState() => AlertCustomizationState();
3837

3938
/// The state from the closest instance of this class that encloses the given context.
40-
static AlertMessageCustomizationState? of(BuildContext context) {
41-
return (context
42-
.dependOnInheritedWidgetOfExactType<_AlertMessageCustomization>())
39+
static AlertCustomizationState? of(BuildContext context) {
40+
return (context.dependOnInheritedWidgetOfExactType<_AlertCustomization>())
4341
?.data;
4442
}
4543
}
4644

47-
/// State for [AlertMessageCustomization].
48-
class AlertMessageCustomizationState
49-
extends CustomizationWidgetState<AlertMessageCustomization> {
45+
/// State for [AlertCustomization].
46+
class AlertCustomizationState
47+
extends CustomizationWidgetState<AlertCustomization> {
5048
late final StatusState statusState;
5149
late final LabelTextState labelTextState;
5250
late final DescriptionTextState descriptionTextState;
@@ -117,7 +115,7 @@ class AlertMessageCustomizationState
117115

118116
@override
119117
Widget build(BuildContext context) {
120-
return _AlertMessageCustomization(data: this, child: widget.child);
118+
return _AlertCustomization(data: this, child: widget.child);
121119
}
122120
}
123121

app/lib/ui/components/alert/alert_message/alert_message_customization_utils.dart renamed to app/lib/ui/components/alert/alert_customization_utils.dart

Lines changed: 33 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,21 @@
1111
* //
1212
*/
1313
import 'package:flutter/cupertino.dart';
14-
import 'package:ouds_core/components/alert_message/ouds_alert_message.dart';
14+
import 'package:ouds_core/components/alert/ouds_alert_message.dart';
1515
import 'package:ouds_core/components/common/ouds_icon_status.dart';
16-
import 'package:ouds_flutter_demo/ui/components/alert/alert_message/alert_enum.dart';
17-
import 'package:ouds_flutter_demo/ui/components/alert/alert_message/alert_message_customization.dart';
16+
import 'package:ouds_flutter_demo/ui/components/alert/alert_customization.dart';
17+
import 'package:ouds_flutter_demo/ui/components/alert/alert_enum.dart';
1818
import 'package:ouds_flutter_demo/ui/theme/theme_controller.dart';
1919
import 'package:ouds_flutter_demo/ui/utilities/app_assets.dart';
2020
import 'package:ouds_flutter_demo/ui/utilities/component/status_enum.dart';
2121
import 'package:ouds_theme_contract/ouds_theme.dart';
2222

23-
/// Utility class for `AlertMessageCustomization`.
24-
class AlertMessageCustomizationUtils {
25-
/// Returns the background color based on the alert_message message status.
26-
static Color getStatusColor(
23+
/// Utility class for `AlertCustomization`.
24+
class AlertCustomizationUtils {
25+
/// Returns the background color based on the alert message status.
26+
static Color getAlertMessageStatusColor(
2727
BuildContext context,
2828
StatusEnum enumStatus,
29-
bool isEnabled,
3029
) {
3130
final theme = OudsTheme.of(context).colorScheme(context);
3231
final status = getStatus(enumStatus);
@@ -47,10 +46,34 @@ class AlertMessageCustomizationUtils {
4746
}
4847
}
4948

50-
/// Returns the icon status based on the alert_message message status.
49+
/// Returns the status color based on the inline alert status.
50+
static Color getInlineAlertStatusColor(
51+
BuildContext context,
52+
StatusEnum enumStatus,
53+
) {
54+
final theme = OudsTheme.of(context).colorScheme(context);
55+
final status = getStatus(enumStatus);
56+
57+
switch (status) {
58+
case Neutral():
59+
return theme.surfaceInverseHigh;
60+
case Accent():
61+
return theme.surfaceStatusAccentEmphasized;
62+
case Positive():
63+
return theme.surfaceStatusPositiveEmphasized;
64+
case Info():
65+
return theme.surfaceStatusInfoEmphasized;
66+
case Warning():
67+
return theme.surfaceStatusWarningEmphasized;
68+
case Negative():
69+
return theme.surfaceStatusNegativeEmphasized;
70+
}
71+
}
72+
73+
/// Returns the icon status based on the alert message status.
5174
static OudsIconStatus getIconStatus(
5275
BuildContext context,
53-
AlertMessageCustomizationState customizationState,
76+
AlertCustomizationState customizationState,
5477
ThemeController themeController,
5578
) {
5679
switch (customizationState.selectedStatus) {

0 commit comments

Comments
 (0)