Skip to content

Commit

Permalink
docs: Update widget book theme (#126)
Browse files Browse the repository at this point in the history
  • Loading branch information
@thelukewalton
thelukewalton authored Jul 4, 2024
1 parent 7e19580 commit 8d9d429
Show file tree
Hide file tree
Showing 50 changed files with 421 additions and 470 deletions.
23 changes: 13 additions & 10 deletions coverage/lcov.info
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6354,20 +6354,23 @@ DA:360,3
DA:361,3
DA:362,3
DA:367,16
DA:375,0
DA:377,0
DA:379,0
DA:381,0
DA:376,0
DA:378,0
DA:380,0
DA:382,0
DA:384,0
DA:383,0
DA:385,0
DA:387,0
DA:386,0
DA:388,0
DA:389,0
DA:390,0
DA:394,16
DA:398,16
DA:391,0
DA:395,16
DA:399,16
LF:134
LH:118
DA:400,16
DA:402,16
DA:405,0
DA:406,16
LF:137
LH:120
end_of_record
59 changes: 2 additions & 57 deletions example/widgetbook/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

import 'pages/assets/icon_widgetbook.dart';
import 'pages/components/accordion_widgetbook.dart';
Expand Down Expand Up @@ -55,6 +54,7 @@ import 'pages/theme/spacing_widgetbook.dart';
import 'pages/theme/typography_widgetbook.dart';
import 'utils/zebra.dart';
import 'package:http/http.dart' as http;
import 'utils/zeta_addon.dart';

Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
Expand Down Expand Up @@ -241,66 +241,11 @@ class _HotReloadState extends State<HotReload> {
Zebra.ec50,
],
),
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)),
],
themeBuilder: (context, theme, child) {
_Theme _theme = theme;
return ZetaProvider(
initialContrast: _theme.isAAA ? ZetaContrast.aaa : ZetaContrast.aa,
initialThemeMode: _theme.isDark ? ThemeMode.dark : ThemeMode.light,
builder: (context, theme, themeMode) {
return Builder(
builder: (context) {
final dark = theme.colorsDark.toScheme();
final light = theme.colorsLight.toScheme();

return MaterialApp(
debugShowCheckedModeBanner: false,
themeMode: themeMode,
theme: ThemeData(
useMaterial3: true,
scaffoldBackgroundColor: light.surfaceTertiary,
colorScheme: light,
textTheme: zetaTextTheme,
brightness: Brightness.light,
),
darkTheme: ThemeData(
useMaterial3: true,
scaffoldBackgroundColor: dark.surfaceTertiary,
colorScheme: dark,
textTheme: zetaTextTheme,
brightness: Brightness.dark,
),
builder: (context, child) {
return ColoredBox(
color: Zeta.of(context).colors.surfacePrimary,
child: child,
);
},
home: child,
);
},
);
},
);
},
),
ZetaAddon(),
InspectorAddon(enabled: false),
ZoomAddon(initialZoom: 1.0),
TextScaleAddon(scales: [1.0, 1.2, 1.4, 1.6, 1.8, 2.0], initialScale: 1),
],
);
}
}

class _Theme {
final bool isDark;
final bool isAAA;

_Theme({required this.isDark, required this.isAAA});
}
16 changes: 7 additions & 9 deletions example/widgetbook/pages/assets/icon_widgetbook.dart
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

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

Widget iconsUseCase(BuildContext context) {
bool rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);

return WidgetbookTestWidget(
return WidgetbookScaffold(
removeBody: true,
widget: SingleChildScrollView(
builder: (context, _) => SingleChildScrollView(
key: PageStorageKey(0),
child: Center(
child: Column(
Expand All @@ -24,8 +21,8 @@ Widget iconsUseCase(BuildContext context) {
(e) {
final nameArr = (e.key.split('_')).join(' ').capitalize();
return Container(
width: 120,
height: 120,
width: 140,
height: 140,
child: InkWell(
borderRadius: ZetaRadius.rounded,
hoverColor: Zeta.of(context).colors.surfaceHover,
Expand All @@ -43,14 +40,15 @@ Widget iconsUseCase(BuildContext context) {
ZetaIcon(
IconData(
e.value.codePoint,
fontFamily: rounded ? ZetaIcons.familyRound : ZetaIcons.familySharp,
fontFamily: ZetaIcons.family,
fontPackage: ZetaIcons.package,
),
size: ZetaSpacing.xl_6,
),
Text(
nameArr,
textAlign: TextAlign.center,
maxLines: 2,
)
],
),
Expand Down
9 changes: 3 additions & 6 deletions example/widgetbook/pages/components/accordion_widgetbook.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,10 @@ import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

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

Widget accordionUseCase(BuildContext context) => WidgetbookTestWidget(
screenSize: Size(1280, 720),
widget: Padding(
Widget accordionUseCase(BuildContext context) => WidgetbookScaffold(
builder: (context, _) => Padding(
padding: const EdgeInsets.all(ZetaSpacing.xl_1),
child: ZetaAccordion(
child: context.knobs.boolean(label: 'Disabled')
Expand All @@ -22,7 +20,6 @@ Widget accordionUseCase(BuildContext context) => WidgetbookTestWidget(
),
title: context.knobs.string(label: 'Accordion Title', initialValue: 'Title'),
contained: context.knobs.boolean(label: 'Contained', initialValue: false),
rounded: roundedKnob(context),
),
),
);
6 changes: 3 additions & 3 deletions example/widgetbook/pages/components/avatar_widgetbook.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

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

Widget avatarUseCase(BuildContext context) {
final Widget image = Image.asset('assets/Omer.jpg', fit: BoxFit.cover);
final colors = Zeta.of(context).colors;

return WidgetbookTestWidget(
widget: ZetaAvatar(
return WidgetbookScaffold(
builder: (context, _) => ZetaAvatar(
image: context.knobs.boolean(label: 'Image') ? image : null,
size: context.knobs.list(
label: 'Size',
Expand Down
34 changes: 13 additions & 21 deletions example/widgetbook/pages/components/badges_widgetbook.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,30 @@ import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

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

Widget statusLabelUseCase(BuildContext context) {
final bool rounded = roundedKnob(context);

return WidgetbookTestWidget(
widget: Padding(
return WidgetbookScaffold(
builder: (context, _) => Padding(
padding: const EdgeInsets.all(ZetaSpacing.xl_2),
child: ZetaStatusLabel(
label: context.knobs.string(label: 'Label', initialValue: 'Label'),
rounded: rounded,
status: context.knobs.list(
label: 'Status',
labelBuilder: enumLabelBuilder,
options: ZetaWidgetStatus.values,
),
customIcon: iconKnob(context, rounded: rounded),
customIcon: iconKnob(context),
),
),
);
}

Widget priorityPillUseCase(BuildContext context) {
final colors = Zeta.of(context).colors;
return WidgetbookTestWidget(
widget: Padding(
return WidgetbookScaffold(
builder: (context, _) => Padding(
padding: const EdgeInsets.all(ZetaSpacing.xl_2),
child: ZetaPriorityPill(
index: context.knobs.string(label: 'Index', initialValue: 'U'),
Expand All @@ -43,7 +40,6 @@ Widget priorityPillUseCase(BuildContext context) {
options: ZetaPriorityPillType.values,
labelBuilder: (value) => value.name.capitalize(),
),
rounded: context.knobs.boolean(label: 'Rounded', initialValue: true),
isBadge: context.knobs.boolean(label: 'Badge'),
customColor: context.knobs.listOrNull(
label: 'Custom color',
Expand All @@ -57,12 +53,11 @@ Widget priorityPillUseCase(BuildContext context) {
);
}

Widget labelUseCase(BuildContext context) => WidgetbookTestWidget(
widget: Padding(
Widget labelUseCase(BuildContext context) => WidgetbookScaffold(
builder: (context, _) => Padding(
padding: const EdgeInsets.all(ZetaSpacing.xl_2),
child: ZetaLabel(
label: context.knobs.string(label: 'Label', initialValue: 'Label'),
rounded: roundedKnob(context),
status: context.knobs.list(
label: 'Status',
options: ZetaWidgetStatus.values,
Expand All @@ -73,18 +68,16 @@ Widget labelUseCase(BuildContext context) => WidgetbookTestWidget(
);

Widget indicatorsUseCase(BuildContext context) {
final bool rounded = roundedKnob(context);

return WidgetbookTestWidget(
widget: Padding(
return WidgetbookScaffold(
builder: (context, _) => Padding(
padding: const EdgeInsets.all(ZetaSpacing.xl_2),
child: ZetaIndicator(
type: context.knobs.list(
label: 'Type',
options: ZetaIndicatorType.values,
labelBuilder: enumLabelBuilder,
),
icon: iconKnob(context, rounded: rounded),
icon: iconKnob(context),
inverse: context.knobs.boolean(label: 'Inverse Border'),
size: context.knobs.list(
label: 'Size',
Expand All @@ -98,15 +91,14 @@ Widget indicatorsUseCase(BuildContext context) {
);
}

Widget tagsUseCase(BuildContext context) => WidgetbookTestWidget(
widget: Padding(
Widget tagsUseCase(BuildContext context) => WidgetbookScaffold(
builder: (context, _) => Padding(
padding: const EdgeInsets.all(ZetaSpacing.xl_2),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ZetaTag(
label: context.knobs.string(label: 'Label', initialValue: 'Tag'),
rounded: roundedKnob(context),
direction: context.knobs.list(
label: 'Direction',
options: ZetaTagDirection.values,
Expand Down
11 changes: 4 additions & 7 deletions example/widgetbook/pages/components/banner_widgetbook.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,10 @@ import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

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

Widget bannerUseCase(BuildContext context) {
final rounded = roundedKnob(context);

final banner = ZetaBanner(
context: context,
title: context.knobs.string(label: 'Title', initialValue: 'Banner Title'),
Expand All @@ -16,20 +14,19 @@ Widget bannerUseCase(BuildContext context) {
options: ZetaBannerStatus.values,
labelBuilder: enumLabelBuilder,
),
leadingIcon: iconKnob(context, rounded: rounded, nullable: true),
leadingIcon: iconKnob(context, nullable: true),
titleStart: context.knobs.boolean(label: 'Center title'),
trailing: ZetaIcon(iconKnob(
context,
rounded: rounded,
nullable: true,
name: 'trailing',
initial: ZetaIcons.chevron_right,
)),
);

return WidgetbookTestWidget(
return WidgetbookScaffold(
removeBody: true,
widget: Column(
builder: (context, _) => Column(
children: [
banner,
const SizedBox(height: ZetaSpacing.xl_9),
Expand Down
11 changes: 5 additions & 6 deletions example/widgetbook/pages/components/bottom_sheet_widgetbook.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

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

Widget bottomSheetContentUseCase(BuildContext context) {
final sheet = _bottomSheet(context);

return WidgetbookTestWidget(
widget: Padding(
return WidgetbookScaffold(
builder: (context, _) => Padding(
padding: const EdgeInsets.all(ZetaSpacing.xl_1),
child: Column(
children: [
Expand All @@ -26,9 +26,8 @@ Widget bottomSheetContentUseCase(BuildContext context) {
}

ZetaBottomSheet _bottomSheet(BuildContext context) {
final bool rounded = roundedKnob(context);
final leadingIcon = iconKnob(context, rounded: rounded, nullable: true, initial: null);
final trailingIcon = iconKnob(context, rounded: rounded, nullable: true, initial: ZetaIcons.chevron_right);
final leadingIcon = iconKnob(context, nullable: true, initial: null);
final trailingIcon = iconKnob(context, nullable: true, initial: ZetaIcons.chevron_right);

return ZetaBottomSheet(
centerTitle: context.knobs.boolean(label: 'Center title', initialValue: true),
Expand Down
Loading

0 comments on commit 8d9d429

Please sign in to comment.