fix(UX-1232): Breadcrumb Issues

example/lib/home.dart

@@ -6,7 +6,7 @@ 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';
 import 'package:zeta_example/pages/components/bottom_sheet_example.dart';
-import 'package:zeta_example/pages/components/breadcrumbs_example.dart';
+import 'package:zeta_example/pages/components/breadcrumb_example.dart';
 import 'package:zeta_example/pages/components/button_example.dart';
 import 'package:zeta_example/pages/components/chat_item_example.dart';
 import 'package:zeta_example/pages/components/checkbox_example.dart';
@@ -67,7 +67,7 @@ final List<Component> components = [
   Component(BannerExample.name, (context) => const BannerExample()),
   Component(BadgesExample.name, (context) => const BadgesExample()),
   Component(BottomSheetExample.name, (context) => const BottomSheetExample()),
-  Component(BreadCrumbsExample.name, (context) => const BreadCrumbsExample()),
+  Component(BreadcrumbExample.name, (context) => const BreadcrumbExample()),
   Component(ButtonExample.name, (context) => const ButtonExample()),
   Component(ChatItemExample.name, (context) => const ChatItemExample()),
   Component(CheckBoxExample.name, (context) => const CheckBoxExample()),

example/lib/pages/components/breadcrumb_example.dart

@@ -0,0 +1,57 @@
+import 'package:flutter/material.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class BreadcrumbExample extends StatefulWidget {
+  static const String name = 'Breadcrumb';
+
+  const BreadcrumbExample({super.key});
+
+  @override
+  State<BreadcrumbExample> createState() => _BreadcrumbExampleState();
+}
+
+class _BreadcrumbExampleState extends State<BreadcrumbExample> {
+  List<ZetaBreadcrumbItem> _children = [];
+
+  @override
+  void initState() {
+    super.initState();
+    _children = [
+      ZetaBreadcrumbItem(label: 'Breadcrumb', onPressed: () {}),
+      ZetaBreadcrumbItem(label: 'Item 1', onPressed: () {}),
+      ZetaBreadcrumbItem(label: 'Item 2', onPressed: () {}),
+      ZetaBreadcrumbItem(label: 'Item 3', icon: ZetaIcons.star, onPressed: () {}),
+      ZetaBreadcrumbItem(label: 'Item 4', onPressed: () {}),
+      ZetaBreadcrumbItem(label: 'Item 5', onPressed: () {}),
+      ZetaBreadcrumbItem(label: 'Item 6', onPressed: () {}),
+      ZetaBreadcrumbItem(label: 'Item 7', onPressed: () {}),
+    ];
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ExampleScaffold(
+      name: 'Breadcrumb',
+      child: Center(
+        child: SingleChildScrollView(
+          child: SizedBox(
+            width: double.infinity,
+            child: Column(
+              children: [
+                ZetaBreadcrumb(children: _children.sublist(0, 1)),
+                ZetaBreadcrumb(children: _children.sublist(0, 2)),
+                ZetaBreadcrumb(children: _children.sublist(0, 3)),
+                ZetaBreadcrumb(children: _children.sublist(0, 4), maxItemsShown: 3),
+                ZetaBreadcrumb(children: _children.sublist(0, 5), maxItemsShown: 5),
+                ZetaBreadcrumb(children: _children.sublist(0, 6), maxItemsShown: 3),
+                ZetaBreadcrumb(children: _children.sublist(0, 7)),
+                ZetaBreadcrumb(children: _children, maxItemsShown: 1),
+              ].gap(50),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

example/widgetbook/main.dart

@@ -16,7 +16,7 @@ import 'pages/components/avatar_widgetbook.dart';
 import 'pages/components/badges_widgetbook.dart';
 import 'pages/components/banner_widgetbook.dart';
 import 'pages/components/bottom_sheet_widgetbook.dart';
-import 'pages/components/breadcrumbs_widgetbook.dart';
+import 'pages/components/breadcrumb_widgetbook.dart';
 import 'pages/components/button_widgetbook.dart';
 import 'pages/components/chat_item_widgetbook.dart';
 import 'pages/components/checkbox_widgetbook.dart';
@@ -192,7 +192,7 @@ class _HotReloadState extends State<HotReload> {
             WidgetbookUseCase(name: 'Accordion', builder: (context) => accordionUseCase(context)),
             WidgetbookUseCase(name: 'Banners', builder: (context) => bannerUseCase(context)),
             WidgetbookUseCase(name: 'Bottom Sheet', builder: (context) => bottomSheetContentUseCase(context)),
-            WidgetbookUseCase(name: 'BreadCrumbs', builder: (context) => breadCrumbsUseCase(context)),
+            WidgetbookUseCase(name: 'Breadcrumb', builder: (context) => breadcrumbUseCase(context)),
             WidgetbookUseCase(name: 'Checkbox', builder: (context) => checkboxUseCase(context)),
             WidgetbookUseCase(name: 'Comms Button', builder: (context) => commsButtonUseCase(context)),
             WidgetbookUseCase(name: 'Date Input', builder: (context) => dateInputUseCase(context)),

example/widgetbook/pages/components/breadcrumb_widgetbook.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+import '../../utils/scaffold.dart';
+import 'package:widgetbook/widgetbook.dart';
+
+final List<ZetaBreadcrumbItem> children = [
+  ZetaBreadcrumbItem(label: 'Breadcrumb', onPressed: () {}),
+  ZetaBreadcrumbItem(label: 'Item 1', onPressed: () {}),
+  ZetaBreadcrumbItem(label: 'Item 2', onPressed: () {}),
+  ZetaBreadcrumbItem(label: 'Item 3', onPressed: () {}),
+  ZetaBreadcrumbItem(label: 'Item 4', onPressed: () {}),
+  ZetaBreadcrumbItem(label: 'Item 5', onPressed: () {}),
+  ZetaBreadcrumbItem(label: 'Item 6', onPressed: () {})
+];
+
+Widget breadcrumbUseCase(BuildContext context) => WidgetbookScaffold(
+      builder: (context, _) => Center(
+        child: BreadcrumbExample(context, children),
+      ),
+    );
+
+class BreadcrumbExample extends StatelessWidget {
+  BreadcrumbExample(this.context, this.children);
+  final BuildContext context;
+  final List<ZetaBreadcrumbItem> children;
+
+  @override
+  Widget build(BuildContext _) {
+    return SingleChildScrollView(
+      child: SizedBox(
+        width: double.infinity,
+        child: Column(
+          children: [
+            ZetaBreadcrumb(
+              rounded: context.knobs.boolean(label: 'Rounded', initialValue: true),
+              children: context.knobs.list(
+                label: 'Items',
+                labelBuilder: (value) => value.length.toString(),
+                initialOption: children.sublist(0, 4),
+                options: List.generate(
+                  children.length,
+                  (index) => children.sublist(0, index + 1),
+                ),
+              ),
+              maxItemsShown: context.knobs.int.slider(
+                label: 'Max Items Shown',
+                initialValue: 2,
+                min: 1,
+                max: children.length,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}