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

* feat: initial widget * feat: register widget * fix: layout * feat: expand banner * feat: button display on wide screen * refactor: using theme * refactor: theme color on white * refactor: var name * fix: warnings * fix: warnings * feat: i10n * fix: example removing row * fix: margin * refactor: remove noop * docs: widget * refactor: removing single child col * feat: theme colors * fix: localization --------- Co-authored-by: Dominik Toton <[email protected]>
input-output-hk · Sep 17, 2024 · 458a83b · 458a83b
1 parent 5bbc870
commit 458a83b
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 0 deletions.
diff --git a/catalyst_voices/lib/widgets/indicators/voices_no_internet_connection_banner.dart b/catalyst_voices/lib/widgets/indicators/voices_no_internet_connection_banner.dart
@@ -0,0 +1,94 @@
+import 'package:catalyst_voices/widgets/widgets.dart';
+import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
+import 'package:catalyst_voices_brands/catalyst_voices_brands.dart';
+import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
+import 'package:flutter/material.dart';
+
+/// A banner that indicates a lack of internet connection.
+///
+/// Includes a refresh button, which is displayed only on desktop-sized screens.
+/// The [onRefresh] callback is triggered when the refresh button is pressed.
+/// If no [onRefresh] callback is provided, the button will appear disabled.
+///
+/// The banner is only visible when there is no internet connection and is
+/// typically used in scenarios where users need to be alerted to connectivity
+/// issues.
+///
+/// **Example Usage:**
+/// ```dart
+/// NoInternetConnectionBanner(
+///   onRefresh: () {
+///     // Handle refresh logic here
+///   },
+/// )
+/// ```
+class NoInternetConnectionBanner extends StatelessWidget {
+  final VoidCallback? onRefresh;
+
+  const NoInternetConnectionBanner({
+    super.key,
+    this.onRefresh,
+  });
+
+  @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.all(16),
+          decoration: BoxDecoration(
+            color: Theme.of(context).colors.avatarsError,
+            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: Theme.of(context).colors.iconsForeground,
+                        ),
+                        const SizedBox(width: 8),
+                        Expanded(
+                          child: Text(
+                            context.l10n.noConnectionBannerTitle,
+                            style: Theme.of(context).textTheme.titleLarge,
+                          ),
+                        ),
+                      ],
+                    ),
+                    Text(
+                      context.l10n.noConnectionBannerDescription,
+                      style: Theme.of(context).textTheme.bodySmall,
+                      softWrap: true,
+                    ),
+                  ],
+                ),
+              ),
+              if (shouldButtonDisplay) ...[
+                const SizedBox(height: 16),
+                VoicesTextButton(
+                  onTap: onRefresh,
+                  child: Text(
+                    context.l10n.noConnectionBannerRefreshButtonText,
+                    style: Theme.of(context).textTheme.labelLarge,
+                  ),
+                ),
+              ],
+            ],
+          ),
+        );
+      },
+    );
+  }
+}
diff --git a/catalyst_voices/lib/widgets/widgets.dart b/catalyst_voices/lib/widgets/widgets.dart
@@ -29,6 +29,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';

diff --git a/...es/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations.dart b/...es/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations.dart
@@ -627,6 +627,24 @@ abstract class VoicesLocalizations {
   /// In en, this message translates to:
   /// **'Visitor'**
   String get visitor;
+
+  /// 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> {

diff --git a/...packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_en.dart b/...packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_en.dart
@@ -327,4 +327,13 @@ class VoicesLocalizationsEn extends VoicesLocalizations {
 
   @override
   String get visitor => 'Visitor';
+
+  @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.';
 }
diff --git a/...packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_es.dart b/...packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_es.dart
@@ -327,4 +327,13 @@ class VoicesLocalizationsEs extends VoicesLocalizations {
 
   @override
   String get visitor => 'Visitor';
+
+  @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.';
 }
diff --git a/catalyst_voices/packages/catalyst_voices_localization/lib/l10n/intl_en.arb b/catalyst_voices/packages/catalyst_voices_localization/lib/l10n/intl_en.arb
@@ -401,5 +401,17 @@
   "visitor": "Visitor",
   "@visitor": {
     "description": "Refers to user that created keychain but is locked"
+  },
+  "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."
   }
 }
diff --git a/catalyst_voices/uikit_example/lib/examples/voices_indicators_example.dart b/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) {