Skip to content

Commit

Permalink
Add breadcrumbs
Browse files Browse the repository at this point in the history
  • Loading branch information
Osman authored and Osman committed Mar 12, 2024
1 parent 6c6adaf commit 412ad89
Show file tree
Hide file tree
Showing 7 changed files with 552 additions and 40 deletions.
20 changes: 15 additions & 5 deletions example/lib/home.dart
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,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/button_example.dart';
import 'package:zeta_example/pages/components/checkbox_example.dart';
import 'package:zeta_example/pages/components/chip_example.dart';
Expand All @@ -30,11 +31,14 @@ 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(ButtonExample.name, (context) => const ButtonExample()),
Component(CheckBoxExample.name, (context) => const CheckBoxExample()),
Component(ChipExample.name, (context) => const ChipExample()),
Component(NavigationBarExample.name, (context) => const NavigationBarExample()),
Component(PasswordInputExample.name, (context) => const PasswordInputExample()),
Component(
NavigationBarExample.name, (context) => const NavigationBarExample()),
Component(
PasswordInputExample.name, (context) => const PasswordInputExample()),
Component(ProgressExample.name, (context) => const ProgressExample()),
Component(DialPadExample.name, (context) => const DialPadExample()),
];
Expand Down Expand Up @@ -98,21 +102,27 @@ class _HomeState extends State<Home> {
title: Text('Widgets'),
backgroundColor: Zeta.of(context).colors.warm.shade30,
children: _components
.map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
.map((item) => ListTile(
title: Text(item.name),
onTap: () => context.go('/${item.name}')))
.toList(),
),
ExpansionTile(
title: Text('Theme'),
backgroundColor: Zeta.of(context).colors.warm.shade30,
children: _theme
.map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
.map((item) => ListTile(
title: Text(item.name),
onTap: () => context.go('/${item.name}')))
.toList(),
),
ExpansionTile(
title: Text('Assets'),
backgroundColor: Zeta.of(context).colors.warm.shade30,
children: _assets
.map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
.map((item) => ListTile(
title: Text(item.name),
onTap: () => context.go('/${item.name}')))
.toList(),
),
],
Expand Down
44 changes: 44 additions & 0 deletions example/lib/pages/components/breadcrumbs_example.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import 'package:flutter/material.dart';
import 'package:zeta_example/widgets.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

class BreadCrumbsExample extends StatefulWidget {
static const String name = 'Breadcrumbs';

const BreadCrumbsExample({super.key});

@override
State<BreadCrumbsExample> createState() => _BreadCrumbsExampleState();
}

class _BreadCrumbsExampleState extends State<BreadCrumbsExample> {
List<String> _children = [
'Icon before with seperator',
];

@override
Widget build(BuildContext context) {
return ExampleScaffold(
name: 'Breadcrumbs',
child: Center(
child: SingleChildScrollView(
child: SizedBox(
width: double.infinity,
child: Column(children: [
ZetaBreadCrumbs(children: _children),
SizedBox(
height: 50,
),
FilledButton(
onPressed: () {
setState(() {
_children.add('Icon before with seperator');
});
},
child: Text("Add Breadcrumb"))
])),
),
),
);
}
}
7 changes: 7 additions & 0 deletions example/lib/pages/components/progress_example.dart
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,19 @@ class ProgressExampleState extends State<ProgressExample> {
isThin: false,
label: "UPLOADING ...",
),
SizedBox(
height: 40,
),
Wrapper(
stepsCompleted: 0,
circleSize: ZetaCircleSizes.xl,
rounded: false,
isCircle: true,
),
SizedBox(
height: 40,
),
Row(mainAxisAlignment: MainAxisAlignment.center, children: [])
]),
),
),
Expand Down
129 changes: 94 additions & 35 deletions example/widgetbook/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,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/button_widgetbook.dart';
import 'pages/components/checkbox_widgetbook.dart';
import 'pages/components/chip_widgetbook.dart';
Expand Down Expand Up @@ -39,52 +40,97 @@ class HotReload extends StatelessWidget {
WidgetbookComponent(
name: 'Badge',
useCases: [
WidgetbookUseCase(name: 'Status Label', builder: (context) => statusLabelUseCase(context)),
WidgetbookUseCase(name: 'Priority Pill', builder: (context) => priorityPillUseCase(context)),
WidgetbookUseCase(name: 'Badge', builder: (context) => badgeUseCase(context)),
WidgetbookUseCase(name: 'Indicators', builder: (context) => indicatorsUseCase(context)),
WidgetbookUseCase(name: 'Tags', builder: (context) => tagsUseCase(context)),
WidgetbookUseCase(
name: 'Workcloud Indicators', builder: (context) => workcloudIndicatorsUseCase(context)),
name: 'Status Label',
builder: (context) => statusLabelUseCase(context)),
WidgetbookUseCase(
name: 'Priority Pill',
builder: (context) => priorityPillUseCase(context)),
WidgetbookUseCase(
name: 'Badge', builder: (context) => badgeUseCase(context)),
WidgetbookUseCase(
name: 'Indicators',
builder: (context) => indicatorsUseCase(context)),
WidgetbookUseCase(
name: 'Tags', builder: (context) => tagsUseCase(context)),
WidgetbookUseCase(
name: 'Workcloud Indicators',
builder: (context) => workcloudIndicatorsUseCase(context)),
],
),
WidgetbookUseCase(name: 'Avatar', builder: (context) => avatarUseCase(context)),
WidgetbookUseCase(name: 'Checkbox', builder: (context) => checkboxUseCase(context)),
WidgetbookUseCase(
name: 'Avatar', builder: (context) => avatarUseCase(context)),
WidgetbookUseCase(
name: 'Checkbox',
builder: (context) => checkboxUseCase(context)),
WidgetbookComponent(
name: 'Buttons',
useCases: [
WidgetbookUseCase(name: 'Button', builder: (context) => buttonUseCase(context)),
WidgetbookUseCase(name: 'Icon Button', builder: (context) => iconButtonUseCase(context)),
WidgetbookUseCase(
name: 'Floating Action Button', builder: (context) => floatingActionButtonUseCase(context)),
name: 'Button',
builder: (context) => buttonUseCase(context)),
WidgetbookUseCase(
name: 'Icon Button',
builder: (context) => iconButtonUseCase(context)),
WidgetbookUseCase(
name: 'Floating Action Button',
builder: (context) => floatingActionButtonUseCase(context)),
],
),
WidgetbookUseCase(name: 'Banners', builder: (context) => bannerUseCase(context)),
WidgetbookUseCase(name: 'In Page Banners', builder: (context) => inPageBannerUseCase(context)),
WidgetbookUseCase(name: 'Accordion', builder: (context) => accordionUseCase(context)),
WidgetbookUseCase(
name: 'BreadCrumbs',
builder: (context) => breadCrumbsUseCase(context)),
WidgetbookUseCase(
name: 'Banners', builder: (context) => bannerUseCase(context)),
WidgetbookUseCase(
name: 'In Page Banners',
builder: (context) => inPageBannerUseCase(context)),
WidgetbookUseCase(
name: 'Accordion',
builder: (context) => accordionUseCase(context)),
WidgetbookComponent(
name: 'Badge',
useCases: [
WidgetbookUseCase(name: 'Filter Chip', builder: (context) => filterChipUseCase(context)),
WidgetbookUseCase(name: 'Input Chip', builder: (context) => inputChipUseCase(context)),
WidgetbookUseCase(name: 'Assist Chip', builder: (context) => assistChipUseCase(context)),
WidgetbookUseCase(
name: 'Filter Chip',
builder: (context) => filterChipUseCase(context)),
WidgetbookUseCase(
name: 'Input Chip',
builder: (context) => inputChipUseCase(context)),
WidgetbookUseCase(
name: 'Assist Chip',
builder: (context) => assistChipUseCase(context)),
],
),
WidgetbookUseCase(name: 'Password Input', builder: (context) => passwordInputUseCase(context)),
WidgetbookUseCase(
name: 'Password Input',
builder: (context) => passwordInputUseCase(context)),
WidgetbookComponent(
name: 'Bottom Sheet',
useCases: [
WidgetbookUseCase(name: 'Content', builder: (context) => bottomSheetContentUseCase(context)),
WidgetbookUseCase(name: 'Live', builder: (context) => bottomSheetLiveUseCase(context)),
WidgetbookUseCase(
name: 'Content',
builder: (context) => bottomSheetContentUseCase(context)),
WidgetbookUseCase(
name: 'Live',
builder: (context) => bottomSheetLiveUseCase(context)),
],
),
WidgetbookUseCase(name: 'Dial Pad', builder: (context) => dialPadUseCase(context)),
WidgetbookUseCase(name: 'Navigation Bar', builder: (context) => navigationBarUseCase(context)),
WidgetbookUseCase(
name: 'Dial Pad',
builder: (context) => dialPadUseCase(context)),
WidgetbookUseCase(
name: 'Navigation Bar',
builder: (context) => navigationBarUseCase(context)),
WidgetbookComponent(
name: 'Progress',
useCases: [
WidgetbookUseCase(name: 'Bar', builder: (context) => progressBarUseCase(context)),
WidgetbookUseCase(name : 'Circle', builder : (context) => progressCircleUseCase(context))
WidgetbookUseCase(
name: 'Bar',
builder: (context) => progressBarUseCase(context)),
WidgetbookUseCase(
name: 'Circle',
builder: (context) => progressCircleUseCase(context))
],
),
]..sort((a, b) => a.name.compareTo(b.name)),
Expand All @@ -93,17 +139,23 @@ class HotReload extends StatelessWidget {
name: 'Theme',
isInitiallyExpanded: false,
children: [
WidgetbookUseCase(name: 'Typography', builder: (context) => typographyUseCase(context)),
WidgetbookUseCase(name: 'Color', builder: (context) => colorUseCase(context)),
WidgetbookUseCase(name: 'Spacing', builder: (context) => spacingUseCase(context)),
WidgetbookUseCase(name: 'Radius', builder: (context) => radiusUseCase(context)),
WidgetbookUseCase(
name: 'Typography',
builder: (context) => typographyUseCase(context)),
WidgetbookUseCase(
name: 'Color', builder: (context) => colorUseCase(context)),
WidgetbookUseCase(
name: 'Spacing', builder: (context) => spacingUseCase(context)),
WidgetbookUseCase(
name: 'Radius', builder: (context) => radiusUseCase(context)),
]..sort((a, b) => a.name.compareTo(b.name)),
),
WidgetbookCategory(
name: 'Assets',
isInitiallyExpanded: false,
children: [
WidgetbookUseCase(name: 'Icons', builder: (context) => iconsUseCase(context)),
WidgetbookUseCase(
name: 'Icons', builder: (context) => iconsUseCase(context)),
]..sort((a, b) => a.name.compareTo(b.name)),
),
],
Expand All @@ -120,16 +172,23 @@ class HotReload extends StatelessWidget {
),
ThemeAddon(
themes: [
WidgetbookTheme(name: 'Light Mode', data: _Theme(isDark: false, isAAA: false)),
WidgetbookTheme(name: 'Dark Mode', data: _Theme(isDark: true, isAAA: false)),
WidgetbookTheme(name: 'Light Mode AAA', data: _Theme(isDark: false, isAAA: true)),
WidgetbookTheme(name: 'Dark Mode AAA', data: _Theme(isDark: true, isAAA: true)),
WidgetbookTheme(
name: 'Light Mode', data: _Theme(isDark: false, isAAA: false)),
WidgetbookTheme(
name: 'Dark Mode', data: _Theme(isDark: true, isAAA: false)),
WidgetbookTheme(
name: 'Light Mode AAA',
data: _Theme(isDark: false, isAAA: true)),
WidgetbookTheme(
name: 'Dark Mode AAA', data: _Theme(isDark: true, isAAA: true)),
],
themeBuilder: (context, theme, child) {
_Theme _theme = theme;
return ZetaProvider(
initialContrast: _theme.isAAA ? ZetaContrast.aaa : ZetaContrast.aa,
initialThemeMode: _theme.isDark ? ThemeMode.dark : ThemeMode.light,
initialContrast:
_theme.isAAA ? ZetaContrast.aaa : ZetaContrast.aa,
initialThemeMode:
_theme.isDark ? ThemeMode.dark : ThemeMode.light,
builder: (context, theme, themeMode) {
return Builder(
builder: (context) {
Expand Down
68 changes: 68 additions & 0 deletions example/widgetbook/pages/components/breadcrumbs_widgetbook.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

import '../../test/test_components.dart';

Widget breadCrumbsUseCase(BuildContext context) => WidgetbookTestWidget(
widget: Center(
child: BreadCrumbExample(context),
));

class BreadCrumbExample extends StatefulWidget {
const BreadCrumbExample(this.c);
final BuildContext c;

@override
State<BreadCrumbExample> createState() => _BreadCrumbExampleState();
}

class _BreadCrumbExampleState extends State<BreadCrumbExample> {
List<String> _children = [
'Icon before with seperator',
];

@override
Widget build(BuildContext _) {
return SingleChildScrollView(
child: SizedBox(
width: double.infinity,
child: Column(children: [
ZetaBreadCrumbs(
children: _children,
rounded: widget.c.knobs.boolean(label: 'Rounded'),
activeIcon: widget.c.knobs.list(
label: 'ActiveIcon',
options: [
ZetaIcons.star_round,
ZetaIcons.add_alert_round,
ZetaIcons.add_box_round,
ZetaIcons.barcode_round,
],
labelBuilder: (value) {
if (value == ZetaIcons.star_round)
return 'ZetaIcons.star_round';
if (value == ZetaIcons.add_alert_round)
return 'ZetaIcons.add_alert_round';
if (value == ZetaIcons.add_box_round)
return 'ZetaIcons.add_box_round';
if (value == ZetaIcons.barcode_round)
return 'ZetaIcons.barcode_round';
return '';
},
),
),
SizedBox(
height: 50,
),
FilledButton(
onPressed: () {
setState(() {
_children.add('Icon before with seperator');
});
},
child: Text("Add Breadcrumb"))
])),
);
}
}
Loading

0 comments on commit 412ad89

Please sign in to comment.