feat(UX-1231): created avatar rail (#196)

feat: created avatar rail test: created tests for avatar rail feat: added label to avatar test: fixed parent folder for stepper chore(automated): Lint commit and format fix: added MainAxisSize.min to avatar column to regulate height fix: widgetbook max lines avatar rail
ZebraDevs · Oct 28, 2024 · 823370e · 823370e
1 parent 17a6995
commit 823370e
Show file tree

Hide file tree

Showing 18 changed files with 869 additions and 53 deletions.
diff --git a/example/lib/home.dart b/example/lib/home.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:zeta_example/pages/components/accordion_example.dart';
+import 'package:zeta_example/pages/components/avatar_rail_example.dart';
 import 'package:zeta_example/pages/components/avatar_example.dart';
 import 'package:zeta_example/pages/components/badges_example.dart';
 import 'package:zeta_example/pages/components/banner_example.dart';
@@ -61,6 +62,7 @@ class Component {
 final List<Component> components = [
   Component(AccordionExample.name, (context) => const AccordionExample()),
   Component(TopAppBarExample.name, (context) => const TopAppBarExample()),
+  Component(AvatarRailExample.name, (context) => const AvatarRailExample()),
   Component(AvatarExample.name, (context) => const AvatarExample()),
   Component(BannerExample.name, (context) => const BannerExample()),
   Component(BadgesExample.name, (context) => const BadgesExample()),

diff --git a/example/lib/pages/components/avatar_rail_example.dart b/example/lib/pages/components/avatar_rail_example.dart
@@ -0,0 +1,96 @@
+// import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class AvatarRailExample extends StatefulWidget {
+  static const String name = 'AvatarRail';
+
+  const AvatarRailExample({super.key});
+
+  @override
+  State<AvatarRailExample> createState() => _AvatarRailExampleState();
+}
+
+class _AvatarRailExampleState extends State<AvatarRailExample> {
+  int? selected;
+  @override
+  Widget build(BuildContext context) {
+    final avatarList = [
+      ZetaAvatar.initials(
+        initials: 'AZ',
+        label: 'Archie',
+      ),
+      ZetaAvatar.initials(
+        initials: 'BY',
+        label: 'Beth',
+      ),
+      ZetaAvatar.initials(
+        initials: 'CX',
+        label: 'Clara',
+      ),
+      ZetaAvatar.initials(
+        initials: 'DW',
+        label: 'Dan',
+      ),
+      ZetaAvatar.initials(
+        initials: 'EV',
+        label: 'Emily',
+      ),
+      ZetaAvatar.initials(
+        initials: 'FU',
+        label: 'Frank',
+      ),
+      ZetaAvatar.initials(
+        initials: 'GT',
+        label: 'George',
+      ),
+      ZetaAvatar.initials(
+        initials: 'HS',
+        label: 'Harith',
+      ),
+      ZetaAvatar.initials(
+        initials: 'IR',
+        label: 'Irene',
+      ),
+      ZetaAvatar.initials(
+        initials: 'KQ',
+        label: 'Katie',
+      ),
+    ];
+    return ExampleScaffold(
+      name: AvatarRailExample.name,
+      child: SingleChildScrollView(
+        child: Column(
+          children: [
+            for (final size in ZetaAvatarSize.values)
+              Row(
+                children: [
+                  Text(size.toString()),
+                  SizedBox(
+                    width: 500,
+                    child: ZetaAvatarRail(
+                      gap: 10,
+                      size: size,
+                      labelMaxLines: 3,
+                      onTap: (key) => {
+                        setState(() {
+                          selected = int.parse(key.toString().replaceAll(RegExp(r'[^0-9]'), ''));
+                        })
+                      },
+                      avatars: avatarList,
+                    ),
+                  ),
+                  if (selected != null)
+                    Padding(
+                      padding: const EdgeInsets.all(8.0),
+                      child: avatarList[selected!].copyWith(size: size),
+                    ),
+                ].gap(50),
+              )
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart
@@ -11,6 +11,7 @@ import 'pages/components/notification_list_item_widgetbook.dart';
 import 'pages/components/slider_widgetbook.dart';
 import 'pages/components/text_input_widgetbook.dart';
 import 'pages/components/top_app_bar_widgetbook.dart';
+import 'pages/components/avatar_rail_widgetbook.dart';
 import 'pages/components/avatar_widgetbook.dart';
 import 'pages/components/badges_widgetbook.dart';
 import 'pages/components/banner_widgetbook.dart';
@@ -121,6 +122,13 @@ class _HotReloadState extends State<HotReload> {
           name: 'Components',
           isInitiallyExpanded: false,
           children: [
+            WidgetbookComponent(
+              name: 'Avatar',
+              useCases: [
+                WidgetbookUseCase(name: 'Avatar', builder: (context) => avatarUseCase(context)),
+                WidgetbookUseCase(name: 'Avatar Rail', builder: (context) => avatarRailUseCase(context)),
+              ],
+            ),
             WidgetbookComponent(
               name: 'Top App Bar',
               useCases: [
@@ -181,7 +189,6 @@ class _HotReloadState extends State<HotReload> {
               ],
             ),
             WidgetbookUseCase(name: 'Accordion', builder: (context) => accordionUseCase(context)),
-            WidgetbookUseCase(name: 'Avatar', builder: (context) => avatarUseCase(context)),
             WidgetbookUseCase(name: 'Banners', builder: (context) => bannerUseCase(context)),
             WidgetbookUseCase(name: 'Bottom Sheet', builder: (context) => bottomSheetContentUseCase(context)),
             WidgetbookUseCase(name: 'BreadCrumbs', builder: (context) => breadCrumbsUseCase(context)),

diff --git a/example/widgetbook/pages/components/avatar_rail_widgetbook.dart b/example/widgetbook/pages/components/avatar_rail_widgetbook.dart
@@ -0,0 +1,174 @@
+import 'package:flutter/material.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+import '../../utils/scaffold.dart';
+
+Widget avatarRailUseCase(BuildContext context) {
+  final Widget image = Image.asset('assets/Omer.jpg', fit: BoxFit.cover);
+  final colors = Zeta.of(context).colors;
+
+  return WidgetbookScaffold(
+    builder: (context, _) => ZetaAvatarRail(
+      labelMaxLines: context.knobs.int.slider(label: 'Label Max Lines', min: 1, max: 3, initialValue: 1),
+      avatars: [
+        ZetaAvatar(
+          image: context.knobs.boolean(label: 'Image') ? image : null,
+          size: context.knobs.list(
+            label: 'Size',
+            options: ZetaAvatarSize.values,
+            labelBuilder: (value) => value.name.split('.').last.toUpperCase(),
+            initialOption: ZetaAvatarSize.m,
+          ),
+          upperBadge: context.knobs.boolean(label: 'Status Badge', initialValue: false)
+              ? ZetaAvatarBadge.icon(
+                  icon: ZetaIcons.close,
+                  color: context.knobs.colorOrNull(label: "Upper Badge Color", initialValue: colors.green) ??
+                      colors.iconDefault,
+                )
+              : null,
+          borderColor: context.knobs.colorOrNull(label: 'Outline', initialValue: colors.green),
+          lowerBadge: context.knobs.boolean(label: 'Notification Badge', initialValue: false)
+              ? ZetaAvatarBadge.notification(
+                  value: context.knobs.intOrNull.input(label: "Value", initialValue: 1),
+                )
+              : null,
+          initials: context.knobs.stringOrNull(label: 'Initials', initialValue: 'AZ'),
+          backgroundColor: context.knobs.colorOrNull(label: 'Background color', initialValue: colors.purple.shade80),
+          onTap: () => print('Avatar tapped'),
+          label: context.knobs.stringOrNull(label: 'Label', initialValue: 'ABC'),
+        ),
+        ZetaAvatar(
+          image: context.knobs.boolean(label: 'Image') ? image : null,
+          size: context.knobs.list(
+            label: 'Size',
+            options: ZetaAvatarSize.values,
+            labelBuilder: (value) => value.name.split('.').last.toUpperCase(),
+            initialOption: ZetaAvatarSize.m,
+          ),
+          upperBadge: context.knobs.boolean(label: 'Status Badge', initialValue: false)
+              ? ZetaAvatarBadge.icon(
+                  icon: ZetaIcons.close,
+                  color: context.knobs.colorOrNull(label: "Upper Badge Color", initialValue: colors.green) ??
+                      colors.iconDefault,
+                )
+              : null,
+          borderColor: context.knobs.colorOrNull(label: 'Outline', initialValue: colors.green),
+          lowerBadge: context.knobs.boolean(label: 'Notification Badge', initialValue: false)
+              ? ZetaAvatarBadge.notification(
+                  value: context.knobs.intOrNull.input(label: "Value", initialValue: 1),
+                )
+              : null,
+          initials: context.knobs.stringOrNull(label: 'Initials', initialValue: 'AZ'),
+          backgroundColor: context.knobs.colorOrNull(label: 'Background color', initialValue: colors.purple.shade80),
+          onTap: () => print('Avatar tapped'),
+          label: context.knobs.stringOrNull(label: 'Label', initialValue: 'ABC'),
+        ),
+        ZetaAvatar(
+          image: context.knobs.boolean(label: 'Image') ? image : null,
+          size: context.knobs.list(
+            label: 'Size',
+            options: ZetaAvatarSize.values,
+            labelBuilder: (value) => value.name.split('.').last.toUpperCase(),
+            initialOption: ZetaAvatarSize.m,
+          ),
+          upperBadge: context.knobs.boolean(label: 'Status Badge', initialValue: false)
+              ? ZetaAvatarBadge.icon(
+                  icon: ZetaIcons.close,
+                  color: context.knobs.colorOrNull(label: "Upper Badge Color", initialValue: colors.green) ??
+                      colors.iconDefault,
+                )
+              : null,
+          borderColor: context.knobs.colorOrNull(label: 'Outline', initialValue: colors.green),
+          lowerBadge: context.knobs.boolean(label: 'Notification Badge', initialValue: false)
+              ? ZetaAvatarBadge.notification(
+                  value: context.knobs.intOrNull.input(label: "Value", initialValue: 1),
+                )
+              : null,
+          initials: context.knobs.stringOrNull(label: 'Initials', initialValue: 'AZ'),
+          backgroundColor: context.knobs.colorOrNull(label: 'Background color', initialValue: colors.purple.shade80),
+          onTap: () => print('Avatar tapped'),
+          label: context.knobs.stringOrNull(label: 'Label', initialValue: 'ABC'),
+        ),
+        ZetaAvatar(
+          image: context.knobs.boolean(label: 'Image') ? image : null,
+          size: context.knobs.list(
+            label: 'Size',
+            options: ZetaAvatarSize.values,
+            labelBuilder: (value) => value.name.split('.').last.toUpperCase(),
+            initialOption: ZetaAvatarSize.m,
+          ),
+          upperBadge: context.knobs.boolean(label: 'Status Badge', initialValue: false)
+              ? ZetaAvatarBadge.icon(
+                  icon: ZetaIcons.close,
+                  color: context.knobs.colorOrNull(label: "Upper Badge Color", initialValue: colors.green) ??
+                      colors.iconDefault,
+                )
+              : null,
+          borderColor: context.knobs.colorOrNull(label: 'Outline', initialValue: colors.green),
+          lowerBadge: context.knobs.boolean(label: 'Notification Badge', initialValue: false)
+              ? ZetaAvatarBadge.notification(
+                  value: context.knobs.intOrNull.input(label: "Value", initialValue: 1),
+                )
+              : null,
+          initials: context.knobs.stringOrNull(label: 'Initials', initialValue: 'AZ'),
+          backgroundColor: context.knobs.colorOrNull(label: 'Background color', initialValue: colors.purple.shade80),
+          onTap: () => print('Avatar tapped'),
+          label: context.knobs.stringOrNull(label: 'Label', initialValue: 'ABC'),
+        ),
+        ZetaAvatar(
+          image: context.knobs.boolean(label: 'Image') ? image : null,
+          size: context.knobs.list(
+            label: 'Size',
+            options: ZetaAvatarSize.values,
+            labelBuilder: (value) => value.name.split('.').last.toUpperCase(),
+            initialOption: ZetaAvatarSize.m,
+          ),
+          upperBadge: context.knobs.boolean(label: 'Status Badge', initialValue: false)
+              ? ZetaAvatarBadge.icon(
+                  icon: ZetaIcons.close,
+                  color: context.knobs.colorOrNull(label: "Upper Badge Color", initialValue: colors.green) ??
+                      colors.iconDefault,
+                )
+              : null,
+          borderColor: context.knobs.colorOrNull(label: 'Outline', initialValue: colors.green),
+          lowerBadge: context.knobs.boolean(label: 'Notification Badge', initialValue: false)
+              ? ZetaAvatarBadge.notification(
+                  value: context.knobs.intOrNull.input(label: "Value", initialValue: 1),
+                )
+              : null,
+          initials: context.knobs.stringOrNull(label: 'Initials', initialValue: 'AZ'),
+          backgroundColor: context.knobs.colorOrNull(label: 'Background color', initialValue: colors.purple.shade80),
+          onTap: () => print('Avatar tapped'),
+          label: context.knobs.stringOrNull(label: 'Label', initialValue: 'ABC'),
+        ),
+        ZetaAvatar(
+          image: context.knobs.boolean(label: 'Image') ? image : null,
+          size: context.knobs.list(
+            label: 'Size',
+            options: ZetaAvatarSize.values,
+            labelBuilder: (value) => value.name.split('.').last.toUpperCase(),
+            initialOption: ZetaAvatarSize.m,
+          ),
+          upperBadge: context.knobs.boolean(label: 'Status Badge', initialValue: false)
+              ? ZetaAvatarBadge.icon(
+                  icon: ZetaIcons.close,
+                  color: context.knobs.colorOrNull(label: "Upper Badge Color", initialValue: colors.green) ??
+                      colors.iconDefault,
+                )
+              : null,
+          borderColor: context.knobs.colorOrNull(label: 'Outline', initialValue: colors.green),
+          lowerBadge: context.knobs.boolean(label: 'Notification Badge', initialValue: false)
+              ? ZetaAvatarBadge.notification(
+                  value: context.knobs.intOrNull.input(label: "Value", initialValue: 1),
+                )
+              : null,
+          initials: context.knobs.stringOrNull(label: 'Initials', initialValue: 'AZ'),
+          backgroundColor: context.knobs.colorOrNull(label: 'Background color', initialValue: colors.purple.shade80),
+          onTap: () => print('Avatar tapped'),
+          label: context.knobs.stringOrNull(label: 'Label', initialValue: 'ABC'),
+        ),
+      ],
+    ),
+  );
+}
diff --git a/example/widgetbook/pages/components/avatar_widgetbook.dart b/example/widgetbook/pages/components/avatar_widgetbook.dart
@@ -32,6 +32,9 @@ Widget avatarUseCase(BuildContext context) {
           : null,
       initials: context.knobs.stringOrNull(label: 'Initials', initialValue: 'AZ'),
       backgroundColor: context.knobs.colorOrNull(label: 'Background color', initialValue: colors.purple.shade80),
+      onTap: () => print('Avatar tapped'),
+      label: context.knobs.stringOrNull(label: 'Label', initialValue: 'ABC'),
+      labelMaxLines: context.knobs.int.slider(label: 'Label Max Lines', min: 1, max: 3, initialValue: 1),
     ),
   );
 }