feat(cat-voices): Add "No Internet Connection Banner" widget

catalyst_voices/lib/widgets/indicators/voices_no_internet_connection_banner.dart

@@ -0,0 +1,90 @@
+import 'package:catalyst_voices/widgets/widgets.dart';
+import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
+import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
+import 'package:flutter/material.dart';
+
+class NoInternetConnectionBanner extends StatelessWidget {
+  final VoidCallback onRefresh;
+
+  const NoInternetConnectionBanner({
+    super.key,
+    this.onRefresh = _noop,
+  });
+
+  static void _noop() {}
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final shouldButtonDisplay = constraints.maxWidth > 744;
+
+        return Container(
+          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+          margin: const EdgeInsets.symmetric(horizontal: 16),
+          decoration: BoxDecoration(
+            color: VoicesColors.darkAvatarsError,
+            borderRadius: BorderRadius.circular(8),
+          ),
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Row(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        CatalystSvgIcon.asset(
+                          VoicesAssets.icons.wifi.path,
+                          color: VoicesColors.darkIconsOnImage,
+                        ),
+                        const SizedBox(width: 8),
+                        Expanded(
+                          child: Text(
+                            context.l10n.noConnectionBannerTitle,
+                            style: Theme.of(context)
+                                .textTheme
+                                .titleLarge!
+                                .copyWith(
+                                  color: VoicesColors.darkTextOnPrimaryLevel0,
+                                ),
+                          ),
+                        ),
+                      ],
+                    ),
+                    Text(
+                      context.l10n.noConnectionBannerDescription,
+                      style: Theme.of(context).textTheme.bodySmall!.copyWith(
+                            color: VoicesColors.darkTextOnPrimaryLevel0,
+                          ),
+                      softWrap: true,
+                    ),
+                  ],
+                ),
+              ),
+              if (shouldButtonDisplay) const SizedBox(height: 16),
+              if (shouldButtonDisplay)
+                Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    VoicesTextButton(
+                      onTap: onRefresh,
+                      child: Text(
+                        context.l10n.noConnectionBannerRefreshButtonText,
+                        style: Theme.of(context).textTheme.labelLarge!.copyWith(
+                              color: VoicesColors.darkTextOnPrimaryLevel0,
+                            ),
+                      ),
+                    ),
+                  ],
+                ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}

catalyst_voices/lib/widgets/widgets.dart

@@ -27,6 +27,7 @@ export 'headers/segment_header.dart';
 export 'indicators/process_progress_indicator.dart';
 export 'indicators/voices_circular_progress_indicator.dart';
 export 'indicators/voices_linear_progress_indicator.dart';
+export 'indicators/voices_no_internet_connection_banner.dart';
 export 'indicators/voices_status_indicator.dart';
 export 'menu/voices_list_tile.dart';
 export 'menu/voices_menu.dart';

catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations.dart

@@ -621,6 +621,24 @@ abstract class VoicesLocalizations {
   /// In en, this message translates to:
   /// **'Guest'**
   String get guest;
+
+  /// Text shown in the No Internet Connection Banner widget for the refresh button.
+  ///
+  /// In en, this message translates to:
+  /// **'Refresh'**
+  String get noConnectionBannerRefreshButtonText;
+
+  /// Text shown in the No Internet Connection Banner widget for the title.
+  ///
+  /// In en, this message translates to:
+  /// **'No internet connection'**
+  String get noConnectionBannerTitle;
+
+  /// Text shown in the No Internet Connection Banner widget for the description below the title.
+  ///
+  /// In en, this message translates to:
+  /// **'Your internet is playing hide and seek. Check your internet connection, or try again in a moment.'**
+  String get noConnectionBannerDescription;
 }
 
 class _VoicesLocalizationsDelegate extends LocalizationsDelegate<VoicesLocalizations> {

catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_en.dart

@@ -324,4 +324,13 @@ class VoicesLocalizationsEn extends VoicesLocalizations {
 
   @override
   String get guest => 'Guest';
+
+  @override
+  String get noConnectionBannerRefreshButtonText => 'Refresh';
+
+  @override
+  String get noConnectionBannerTitle => 'No internet connection';
+
+  @override
+  String get noConnectionBannerDescription => 'Your internet is playing hide and seek. Check your internet connection, or try again in a moment.';
 }

catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_es.dart

@@ -324,4 +324,13 @@ class VoicesLocalizationsEs extends VoicesLocalizations {
 
   @override
   String get guest => 'Guest';
+
+  @override
+  String get noConnectionBannerRefreshButtonText => 'Refresh';
+
+  @override
+  String get noConnectionBannerTitle => 'No internet connection';
+
+  @override
+  String get noConnectionBannerDescription => 'Your internet is playing hide and seek. Check your internet connection, or try again in a moment.';
 }

catalyst_voices/packages/catalyst_voices_localization/lib/l10n/intl_en.arb

@@ -397,5 +397,17 @@
   "guest": "Guest",
   "@guest": {
     "description": "Refers to guest user."
+  },
+  "noConnectionBannerRefreshButtonText": "Refresh",
+  "@noConnectionBannerRefreshButtonText": {
+    "description": "Text shown in the No Internet Connection Banner widget for the refresh button."
+  },
+  "noConnectionBannerTitle": "No internet connection",
+  "@noConnectionBannerTitle": {
+    "description": "Text shown in the No Internet Connection Banner widget for the title."
+  },
+  "noConnectionBannerDescription": "Your internet is playing hide and seek. Check your internet connection, or try again in a moment.",
+  "@noConnectionBannerDescription": {
+    "description": "Text shown in the No Internet Connection Banner widget for the description below the title."
   }
 }

catalyst_voices/uikit_example/lib/examples/voices_indicators_example.dart

@@ -79,6 +79,8 @@ class VoicesIndicatorsExample extends StatelessWidget {
               VoicesCircularProgressIndicator(value: 0.75, showTrack: false),
             ],
           ),
+          Text('No Internet Connection Banner'),
+          NoInternetConnectionBanner(),
         ].separatedByIndexed(
           (index, value) {
             return switch (value.runtimeType) {