feat : create component top app bar

NOTICE.txt

@@ -26,6 +26,11 @@ ouds-flutter/app/assets/illustration/token/il_tokens_typography_dark.svg
 ouds-flutter/app/assets/illustration/token/il_tokens_border.svg
 ouds-flutter/app/assets/illustration/token/il_tokens_border_dark.svg
 
+# Communication - Assistance
+ouds-flutter/app/assets/orange/communication/assistance/tips-and-tricks.svg
+ouds-flutter/app/assets/sosh/communication/assistance/tips-and-tricks.svg
+ouds-flutter/app/assets/wireframe/communication/assistance/tips-and-tricks.svg
+
 # Design - Component
 ouds-flutter/app/assets/orange/communication/design/component-atom.svg
 ouds-flutter/app/assets/orange/communication/design/design-token.svg
@@ -105,9 +110,11 @@ ouds_theme_orange/assets/component/link/previous.svg
 ouds_theme_orange/assets/component/radio-button/radio-button-selected.svg
 ouds_theme_orange/assets/component/switch/selected-switch.svg
 ouds_theme_orange/assets/component/tag/close.svg
-ouds_theme_orange/assets/functional/actions/copy.svg
 ouds_theme_orange/assets/functional/social-and-engagement/heart-empty.svg
 ouds_theme_orange/assets/functional/settings-and-tools/hide.svg
+ouds_theme_orange/assets/functional/navigation/menu.svg
+ouds_theme_orange/assets/functional/navigation/form-chevron-left.svg
+ouds_theme_orange/assets/functional/actions/delete.svg
 
 
 ouds_theme_orange/fonts/Roboto-Black.ttf
@@ -196,6 +203,9 @@ ouds_theme_sosh/assets/component/switch/selected-switch.svg
 ouds_theme_sosh/assets/component/tag/close.svg
 ouds_theme_sosh/assets/functional/social-and-engagement/heart-empty.svg
 ouds_theme_sosh/assets/functional/settings-and-tools/hide.svg
+ouds_theme_sosh/assets/functional/navigation/menu.svg
+ouds_theme_sosh/assets/functional/navigation/form-chevron-left.svg
+ouds_theme_sosh/assets/functional/actions/delete.svg
 
 ouds_theme_sosh/fonts/Sosh-Black.ttf
 ouds_theme_sosh/fonts/Sosh-Bold.ttf
@@ -234,6 +244,9 @@ ouds_theme_wireframe/assets/component/switch/selected-switch.svg
 ouds_theme_wireframe/assets/component/tag/close.svg
 ouds_theme_wireframe/assets/functional/social-and-engagement/heart-empty.svg
 ouds_theme_wireframe/assets/functional/settings-and-tools/hide.svg
+ouds_theme_wireframe/assets/functional/navigation/menu.svg
+ouds_theme_wireframe/assets/functional/navigation/form-chevron-left.svg
+ouds_theme_wireframe/assets/functional/actions/delete.svg
 
 ouds_theme_wireframe/fonts/ShantellSans-Bold.ttf
 ouds_theme_wireframe/fonts/ShantellSans-BoldItalic.ttf

app/CHANGELOG.md

@@ -6,6 +6,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/Orange-OpenSource/ouds-flutter/compare/1.0.0...develop)
 
 ### Added
+- [DemoApp][Library] Create component - `Top app bar` ([#91](https://github.com/Orange-OpenSource/ouds-flutter/issues/91))
 - [DemoApp][Library] Create component - `Navigation bar` ([#464](https://github.com/Orange-OpenSource/ouds-flutter/issues/464))
 - [DemoApp][Library] Create component - `Bottom Navigation` ([#90](https://github.com/Orange-OpenSource/ouds-flutter/issues/90))
 

app/lib/l10n/gen/ouds_flutter_app_localizations.dart

@@ -521,6 +521,18 @@ abstract class AppLocalizations {
   /// **'Dot'**
   String get app_components_common_dot_label;
 
+  /// No description provided for @app_components_common_style_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Style'**
+  String get app_components_common_style_label;
+
+  /// No description provided for @app_components_common_title_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Title'**
+  String get app_components_common_title_label;
+
   /// No description provided for @app_components_button_label.
   ///
   /// In en, this message translates to:
@@ -1043,6 +1055,126 @@ abstract class AppLocalizations {
   /// **'Last item badge'**
   String get app_components_navigationBar_lastItemBadge_label;
 
+  /// No description provided for @app_components_topAppBar_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Top app bar'**
+  String get app_components_topAppBar_label;
+
+  /// No description provided for @app_components_topAppBar_description_text.
+  ///
+  /// In en, this message translates to:
+  /// **'App bar is a top-aligned component that displays the screen title and provides access to key actions and navigation elements.'**
+  String get app_components_topAppBar_description_text;
+
+  /// No description provided for @app_components_topAppBar_smallSize_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Small'**
+  String get app_components_topAppBar_smallSize_label;
+
+  /// No description provided for @app_components_topAppBar_mediumSize_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Medium'**
+  String get app_components_topAppBar_mediumSize_label;
+
+  /// No description provided for @app_components_topAppBar_largeSize_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Large'**
+  String get app_components_topAppBar_largeSize_label;
+
+  /// No description provided for @app_components_topAppBar_centerAligned_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Center aligned'**
+  String get app_components_topAppBar_centerAligned_label;
+
+  /// No description provided for @app_components_topAppBar_navigationIcon_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Navigation icon'**
+  String get app_components_topAppBar_navigationIcon_label;
+
+  /// No description provided for @app_components_topAppBar_actionIconBadge_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Action icon badge'**
+  String get app_components_topAppBar_actionIconBadge_label;
+
+  /// No description provided for @app_components_topAppBar_actionAvatar_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Action avatar'**
+  String get app_components_topAppBar_actionAvatar_label;
+
+  /// No description provided for @app_components_topAppBar_showAvatar_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Show avatar'**
+  String get app_components_topAppBar_showAvatar_label;
+
+  /// No description provided for @app_components_topAppBar_actionAvatarMonogram_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Action avatar monogram'**
+  String get app_components_topAppBar_actionAvatarMonogram_label;
+
+  /// No description provided for @app_components_topAppBar_actionCount_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Action count'**
+  String get app_components_topAppBar_actionCount_label;
+
+  /// No description provided for @app_components_topAppBar_expandedHeight_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Expanded Height'**
+  String get app_components_topAppBar_expandedHeight_label;
+
+  /// No description provided for @app_components_topAppBar_titleMaxLines_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Title max lines'**
+  String get app_components_topAppBar_titleMaxLines_label;
+
+  /// No description provided for @app_components_topAppBar_mediumHelperTextHeight_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Specify the maximum value of the app bar height, default value 112. Note that this proposed value is set to support one line of text and you should expand it to support more.'**
+  String get app_components_topAppBar_mediumHelperTextHeight_label;
+
+  /// No description provided for @app_components_topAppBar_largeHelperTextHeight_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Specify the maximum value of the app bar height, default value 152. Note that this proposed value is set to support 2 lines of text and you should expand it to support more.'**
+  String get app_components_topAppBar_largeHelperTextHeight_label;
+
+  /// No description provided for @app_components_topAppBar_titleMaxLineHelperText_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Specify the maximum lines for the title, default value 1.'**
+  String get app_components_topAppBar_titleMaxLineHelperText_label;
+
+  /// No description provided for @app_components_topAppBar_action_a11y.
+  ///
+  /// In en, this message translates to:
+  /// **'Action'**
+  String get app_components_topAppBar_action_a11y;
+
+  /// No description provided for @app_components_topAppBar_mediumErrorMessage_label.
+  ///
+  /// In en, this message translates to:
+  /// **'The value must be at least 112.'**
+  String get app_components_topAppBar_mediumErrorMessage_label;
+
+  /// No description provided for @app_components_topAppBar_largeErrorMessage_label.
+  ///
+  /// In en, this message translates to:
+  /// **'The value must be at least 152.'**
+  String get app_components_topAppBar_largeErrorMessage_label;
+
   /// No description provided for @app_about_name_label.
   ///
   /// In en, this message translates to:

app/lib/l10n/gen/ouds_flutter_app_localizations_ar.dart

@@ -229,6 +229,12 @@ class AppLocalizationsAr extends AppLocalizations {
   @override
   String get app_components_common_dot_label => 'Dot';
 
+  @override
+  String get app_components_common_style_label => 'Style';
+
+  @override
+  String get app_components_common_title_label => 'Title';
+
   @override
   String get app_components_button_label => 'Button';
 
@@ -524,6 +530,74 @@ class AppLocalizationsAr extends AppLocalizations {
   String get app_components_navigationBar_lastItemBadge_label =>
       'Last item badge';
 
+  @override
+  String get app_components_topAppBar_label => 'Top app bar';
+
+  @override
+  String get app_components_topAppBar_description_text =>
+      'App bar هو مكون موجه من الأعلى يعرض عنوان الشاشة ويوفر الوصول إلى الإجراءات الرئيسية وعناصر التنقل.';
+
+  @override
+  String get app_components_topAppBar_smallSize_label => 'Small';
+
+  @override
+  String get app_components_topAppBar_mediumSize_label => 'Medium';
+
+  @override
+  String get app_components_topAppBar_largeSize_label => 'Large';
+
+  @override
+  String get app_components_topAppBar_centerAligned_label => 'Center aligned';
+
+  @override
+  String get app_components_topAppBar_navigationIcon_label => 'Navigation icon';
+
+  @override
+  String get app_components_topAppBar_actionIconBadge_label =>
+      'Action icon badge';
+
+  @override
+  String get app_components_topAppBar_actionAvatar_label => 'Action avatar';
+
+  @override
+  String get app_components_topAppBar_showAvatar_label => 'Show avatar';
+
+  @override
+  String get app_components_topAppBar_actionAvatarMonogram_label =>
+      'Action avatar monogram';
+
+  @override
+  String get app_components_topAppBar_actionCount_label => 'Action count';
+
+  @override
+  String get app_components_topAppBar_expandedHeight_label => 'Expanded Height';
+
+  @override
+  String get app_components_topAppBar_titleMaxLines_label => 'Title max lines';
+
+  @override
+  String get app_components_topAppBar_mediumHelperTextHeight_label =>
+      'حدد القيمة القصوى لارتفاع App bar، القيمة الافتراضية 112. لاحظ أن هذه القيمة المقترحة مصممة لدعم سطر واحد من النص ويجب توسيعها لدعم المزيد.';
+
+  @override
+  String get app_components_topAppBar_largeHelperTextHeight_label =>
+      'حدد القيمة القصوى لارتفاع App bar، القيمة الافتراضية 152. لاحظ أن هذه القيمة المقترحة مصممة لدعم سطرين من النص ويجب توسيعها لدعم المزيد.';
+
+  @override
+  String get app_components_topAppBar_titleMaxLineHelperText_label =>
+      'حدد الحد الأقصى لعدد الأسطر للعنوان، القيمة الأولية 1.';
+
+  @override
+  String get app_components_topAppBar_action_a11y => 'إجراء';
+
+  @override
+  String get app_components_topAppBar_mediumErrorMessage_label =>
+      'يجب أن تكون القيمة على الأقل 112.';
+
+  @override
+  String get app_components_topAppBar_largeErrorMessage_label =>
+      'يجب أن تكون القيمة على الأقل 152.';
+
   @override
   String get app_about_name_label => 'أداة نظام التصميم';
 

app/lib/l10n/gen/ouds_flutter_app_localizations_en.dart

@@ -229,6 +229,12 @@ class AppLocalizationsEn extends AppLocalizations {
   @override
   String get app_components_common_dot_label => 'Dot';
 
+  @override
+  String get app_components_common_style_label => 'Style';
+
+  @override
+  String get app_components_common_title_label => 'Title';
+
   @override
   String get app_components_button_label => 'Button';
 
@@ -524,6 +530,74 @@ class AppLocalizationsEn extends AppLocalizations {
   String get app_components_navigationBar_lastItemBadge_label =>
       'Last item badge';
 
+  @override
+  String get app_components_topAppBar_label => 'Top app bar';
+
+  @override
+  String get app_components_topAppBar_description_text =>
+      'App bar is a top-aligned component that displays the screen title and provides access to key actions and navigation elements.';
+
+  @override
+  String get app_components_topAppBar_smallSize_label => 'Small';
+
+  @override
+  String get app_components_topAppBar_mediumSize_label => 'Medium';
+
+  @override
+  String get app_components_topAppBar_largeSize_label => 'Large';
+
+  @override
+  String get app_components_topAppBar_centerAligned_label => 'Center aligned';
+
+  @override
+  String get app_components_topAppBar_navigationIcon_label => 'Navigation icon';
+
+  @override
+  String get app_components_topAppBar_actionIconBadge_label =>
+      'Action icon badge';
+
+  @override
+  String get app_components_topAppBar_actionAvatar_label => 'Action avatar';
+
+  @override
+  String get app_components_topAppBar_showAvatar_label => 'Show avatar';
+
+  @override
+  String get app_components_topAppBar_actionAvatarMonogram_label =>
+      'Action avatar monogram';
+
+  @override
+  String get app_components_topAppBar_actionCount_label => 'Action count';
+
+  @override
+  String get app_components_topAppBar_expandedHeight_label => 'Expanded Height';
+
+  @override
+  String get app_components_topAppBar_titleMaxLines_label => 'Title max lines';
+
+  @override
+  String get app_components_topAppBar_mediumHelperTextHeight_label =>
+      'Specify the maximum value of the app bar height, default value 112. Note that this proposed value is set to support one line of text and you should expand it to support more.';
+
+  @override
+  String get app_components_topAppBar_largeHelperTextHeight_label =>
+      'Specify the maximum value of the app bar height, default value 152. Note that this proposed value is set to support 2 lines of text and you should expand it to support more.';
+
+  @override
+  String get app_components_topAppBar_titleMaxLineHelperText_label =>
+      'Specify the maximum lines for the title, default value 1.';
+
+  @override
+  String get app_components_topAppBar_action_a11y => 'Action';
+
+  @override
+  String get app_components_topAppBar_mediumErrorMessage_label =>
+      'The value must be at least 112.';
+
+  @override
+  String get app_components_topAppBar_largeErrorMessage_label =>
+      'The value must be at least 152.';
+
   @override
   String get app_about_name_label => 'Design System Toolbox';