feat: Created list item variants (#98)

* list item

* making zeta list

* radio button fixes, widgetbook

* lint fix

* docs

example/lib/home.dart

@@ -17,6 +17,7 @@ import 'package:zeta_example/pages/components/dialpad_example.dart';
 import 'package:zeta_example/pages/components/dropdown_example.dart';
 import 'package:zeta_example/pages/components/global_header_example.dart';
 import 'package:zeta_example/pages/components/filter_selection_example.dart';
+import 'package:zeta_example/pages/components/list_example.dart';
 import 'package:zeta_example/pages/components/list_item_example.dart';
 import 'package:zeta_example/pages/components/navigation_bar_example.dart';
 import 'package:zeta_example/pages/components/navigation_rail_example.dart';
@@ -67,6 +68,7 @@ final List<Component> components = [
   Component(CheckBoxExample.name, (context) => const CheckBoxExample()),
   Component(ChipExample.name, (context) => const ChipExample()),
   Component(ContactItemExample.name, (context) => const ContactItemExample()),
+  Component(ListExample.name, (context) => const ListExample()),
   Component(ListItemExample.name, (context) => const ListItemExample()),
   Component(NavigationBarExample.name, (context) => const NavigationBarExample()),
   Component(NotificationListItemExample.name, (context) => const NotificationListItemExample()),

example/lib/pages/components/list_example.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class ListExample extends StatelessWidget {
+  static const name = 'List';
+
+  const ListExample({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ExampleScaffold(
+      name: 'List',
+      child: ZetaList(
+        showDivider: false,
+        items: [
+          ZetaListItem(primaryText: 'Item 1'),
+          ZetaListItem(primaryText: 'Item 2'),
+          ZetaListItem(primaryText: 'Item 3', showDivider: true),
+          ZetaListItem(primaryText: 'Item 4', showDivider: true),
+          ZetaListItem(primaryText: 'Item 5'),
+          ZetaListItem(primaryText: 'Item 6'),
+        ],
+      ),
+    );
+  }
+}

example/lib/pages/components/list_item_example.dart

@@ -12,12 +12,12 @@ class ListItemExample extends StatefulWidget {
 }
 
 class _ListItemExampleState extends State<ListItemExample> {
-  bool _isCheckBoxEnabled = false;
-  bool _isSelected = true;
+  bool _switchChecked = false;
+  bool _checkboxChecked = false;
 
-  _onDefaultListItemTap() {
-    setState(() => _isCheckBoxEnabled = !_isCheckBoxEnabled);
-  }
+  String radioOption1 = 'Label 1';
+  String radioOption2 = 'Label 2';
+  String? radioGroupValue;
 
   @override
   Widget build(BuildContext context) {
@@ -28,88 +28,88 @@ class _ListItemExampleState extends State<ListItemExample> {
       child: Container(
         color: zetaColors.surfaceSecondary,
         child: SingleChildScrollView(
-          child: Column(
-            children: [
-              // List Item with descriptor
-              Padding(
-                padding: const EdgeInsets.only(top: ZetaSpacing.large),
-                child: ZetaListItem(
-                  dense: true,
-                  leading: Container(
-                    width: 48,
-                    height: 48,
-                    decoration: BoxDecoration(borderRadius: ZetaRadius.rounded),
-                    child: Placeholder(),
-                  ),
-                  subtitle: Text("Descriptor"),
-                  title: Text("List Item"),
-                  trailing: ZetaCheckbox(
-                    value: _isCheckBoxEnabled,
-                    onChanged: (_) => _onDefaultListItemTap(),
-                  ),
-                  onTap: _onDefaultListItemTap,
-                ),
-              ),
-
-              // Enabled
-              Padding(
-                padding: const EdgeInsets.only(top: ZetaSpacing.xl_4),
-                child: Text(
-                  "Enabled",
-                  style: ZetaTextStyles.titleLarge,
-                ),
-              ),
-              Padding(
-                padding: const EdgeInsets.only(top: ZetaSpacing.xl_2),
-                child: ZetaListItem(title: Text("List Item")),
-              ),
-
-              // Selected
-              Padding(
-                padding: const EdgeInsets.only(top: ZetaSpacing.xl_4),
-                child: Padding(
-                  padding: const EdgeInsets.all(8.0),
-                  child: Text(
-                    "Selected",
-                    style: ZetaTextStyles.titleLarge,
-                  ),
-                ),
-              ),
-              Padding(
-                padding: const EdgeInsets.only(top: ZetaSpacing.xl_2),
-                child: ZetaListItem(
-                  title: Text("List Item"),
-                  selected: _isSelected,
-                  trailing: _isSelected
-                      ? Icon(
-                          ZetaIcons.check_mark_sharp,
-                          color: zetaColors.primary,
-                        )
-                      : null,
-                  onTap: () => setState(() => _isSelected = !_isSelected),
+          child: Padding(
+            padding: const EdgeInsets.all(16),
+            child: Column(
+              children: [
+                _buildListItem(
+                    'No Icon',
+                    ZetaListItem(
+                      primaryText: 'List Item',
+                      secondaryText: 'Descriptor',
+                    )),
+                _buildListItem(
+                  'Icon Left',
+                  ZetaListItem(primaryText: 'List Item', leading: Icon(ZetaIcons.star_round)),
                 ),
-              ),
-
-              // Disabled
-              Padding(
-                padding: const EdgeInsets.only(top: ZetaSpacing.xl_4),
-                child: Text(
-                  "Disabled",
-                  style: ZetaTextStyles.titleLarge,
-                ),
-              ),
-              Padding(
-                padding: const EdgeInsets.only(top: ZetaSpacing.xl_2),
-                child: ZetaListItem(
-                  title: Text("List Item"),
-                  enabled: false,
-                  onTap: () {},
-                ),
-              ),
-            ],
+                _buildListItem(
+                    'Toggle Right',
+                    ZetaListItem.toggle(
+                      primaryText: 'List Item',
+                      value: _switchChecked,
+                      onChanged: (value) {
+                        setState(() {
+                          _switchChecked = value!;
+                        });
+                      },
+                    )),
+                _buildListItem(
+                    'Checkbox Right',
+                    ZetaListItem.checkbox(
+                      primaryText: 'List Item',
+                      value: _checkboxChecked,
+                      onChanged: (value) {
+                        print(value);
+                        setState(() {
+                          _checkboxChecked = value;
+                        });
+                      },
+                    )),
+                _buildListItem(
+                    'Radio Right',
+                    Column(
+                      children: [
+                        ZetaListItem.radio(
+                          primaryText: 'Radio option 1',
+                          value: radioOption1,
+                          groupValue: radioGroupValue,
+                          onChanged: (value) {
+                            setState(() {
+                              radioGroupValue = value;
+                            });
+                          },
+                        ),
+                        ZetaListItem.radio(
+                          primaryText: 'Radio option 2',
+                          value: radioOption2,
+                          groupValue: radioGroupValue,
+                          onChanged: (value) {
+                            setState(() {
+                              radioGroupValue = value;
+                            });
+                          },
+                        ),
+                      ],
+                    )),
+              ].divide(const SizedBox(height: 16)).toList(),
+            ),
           ),
         ),
       ),
     );
   }
 }
+
+Widget _buildListItem(String name, Widget listItem) {
+  return Column(
+    crossAxisAlignment: CrossAxisAlignment.start,
+    children: [
+      Text(
+        name,
+        style: ZetaTextStyles.bodyLarge,
+      ),
+      const SizedBox(height: 8),
+      listItem,
+    ],
+  );
+}

example/pubspec.yaml

@@ -30,4 +30,3 @@ flutter:
   uses-material-design: true
   assets:
     - assets/
-    - ../README.md

example/widgetbook/main.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
@@ -56,9 +55,9 @@ import 'utils/zebra.dart';
 
 Future<void> main() async {
   WidgetsFlutterBinding.ensureInitialized();
-  String readme = await rootBundle.loadString('../README.md');
+  // String readme = await rootBundle.loadString('../README.md');
 
-  runApp(HotReload(readme: readme));
+  runApp(HotReload(readme: 'TODO: cannot import readme on windows'));
 }
 
 class HotReload extends StatefulWidget {
@@ -276,7 +275,6 @@ class _HotReloadState extends State<HotReload> {
             );
           },
         ),
-        AccessibilityAddon(),
         InspectorAddon(enabled: false),
         ZoomAddon(initialZoom: 1.0),
         TextScaleAddon(scales: [1.0, 1.2, 1.4, 1.6, 1.8, 2.0], initialScale: 1),

example/widgetbook/pages/components/list_item_widgetbook.dart

@@ -3,42 +3,72 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
+import '../../utils/utils.dart';
 
 Widget listItemUseCase(BuildContext context) {
+  bool checkedValue = false;
+
   return WidgetbookTestWidget(
     widget: StatefulBuilder(
       builder: (context, setState) {
-        final subtitle = context.knobs.stringOrNull(label: 'Descriptor', initialValue: null);
-
-        final trailing = context.knobs.boolean(label: 'Trailing', initialValue: false)
-            ? Checkbox(value: false, onChanged: (_) {})
-            : null;
-
-        final leading = context.knobs.boolean(label: 'Leading', initialValue: false)
-            ? Container(
-                width: ZetaSpacing.xl_8,
-                height: ZetaSpacing.xl_8,
-                decoration: BoxDecoration(borderRadius: ZetaRadius.rounded),
-                child: Placeholder(),
-              )
-            : null;
-
-        return ZetaListItem(
-          dense: context.knobs.boolean(label: 'Dense', initialValue: false),
-          enabled: context.knobs.boolean(label: 'Enabled', initialValue: true),
-          enabledDivider: context.knobs.boolean(
-            label: 'Enabled Divider',
-            initialValue: true,
-          ),
-          selected: context.knobs.boolean(label: 'Selected', initialValue: true),
-          leading: leading,
-          title: Text(
-            context.knobs.string(label: 'Title', initialValue: 'List Item'),
-          ),
-          subtitle: subtitle != null ? Text(subtitle) : null,
-          trailing: trailing,
-          onTap: () {},
+        final type = context.knobs.list(
+          label: 'Type',
+          options: ['Default', 'Checkbox', 'Radio button', 'Switch'],
         );
+
+        final primaryText = context.knobs.string(label: 'Primary text', initialValue: 'Label');
+
+        final secondaryText = context.knobs.string(label: 'Secondary text', initialValue: 'Descriptor');
+
+        final showIcon = context.knobs.boolean(label: 'Show icon');
+
+        final showDivider = context.knobs.boolean(label: 'Show divider');
+
+        final rounded = roundedKnob(context);
+
+        final leading = showIcon ? Icon(ZetaIcons.star_round) : null;
+
+        final onChanged = (bool? value) => setState(() {
+              checkedValue = value!;
+            });
+
+        if (type == 'Checkbox') {
+          return ZetaListItem.checkbox(
+            primaryText: primaryText,
+            secondaryText: secondaryText,
+            leading: leading,
+            showDivider: showDivider,
+            onChanged: onChanged,
+            value: checkedValue,
+            rounded: rounded,
+          );
+        } else if (type == 'Switch') {
+          return ZetaListItem.toggle(
+            primaryText: primaryText,
+            secondaryText: secondaryText,
+            leading: leading,
+            showDivider: showDivider,
+            onChanged: onChanged,
+            value: checkedValue,
+          );
+        } else if (type == 'Radio button') {
+          return ZetaListItem.radio(
+            primaryText: primaryText,
+            secondaryText: secondaryText,
+            leading: leading,
+            showDivider: showDivider,
+            onChanged: (_) {},
+            value: 'value',
+            groupValue: 'value',
+          );
+        } else {
+          return ZetaListItem(
+            primaryText: primaryText,
+            secondaryText: secondaryText,
+            leading: leading,
+            showDivider: showDivider,
+          );
+        }
       },
     ),
   );