Skip to content

Commit

Permalink
feat(UX-1064): Comms Buttons (#182)
Browse files Browse the repository at this point in the history 
feat: comms buttons

docs: changed comms button example to use assorted constructors

docs: set initial values for comms button on widgetbook

fix: added different constructors to zetacommsbutton

chore(automated): Lint commit and format

fix: set toggle related properties on non-toggle constructors to null

docs: added comments to the class about named constructors

fix: changed Colors.transparent to Zeta.of(context).colors.surfaceDefault

test: comms goldens
  • Loading branch information
@DE7924
DE7924 authored Oct 4, 2024
1 parent e1d2ba0 commit af95815
Show file tree
Hide file tree
Showing 13 changed files with 961 additions and 0 deletions.
2 changes: 2 additions & 0 deletions example/lib/home.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ 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';
import 'package:zeta_example/pages/components/chip_example.dart';
import 'package:zeta_example/pages/components/comms_button_example.dart';
import 'package:zeta_example/pages/components/contact_item_example.dart';
import 'package:zeta_example/pages/components/date_input_example.dart';
import 'package:zeta_example/pages/components/dialog_example.dart';
Expand Down Expand Up @@ -69,6 +70,7 @@ final List<Component> components = [
Component(ChatItemExample.name, (context) => const ChatItemExample()),
Component(CheckBoxExample.name, (context) => const CheckBoxExample()),
Component(ChipExample.name, (context) => const ChipExample()),
Component(CommsButtonExample.name, (context) => const CommsButtonExample()),
Component(ContactItemExample.name, (context) => const ContactItemExample()),
Component(ListExample.name, (context) => const ListExample()),
Component(ListItemExample.name, (context) => const ListItemExample()),
Expand Down
262 changes: 262 additions & 0 deletions example/lib/pages/components/comms_button_example.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,262 @@
import 'package:flutter/material.dart';
import 'package:zeta_example/widgets.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

class CommsButtonExample extends StatelessWidget {
static const String name = 'CommsButton';

const CommsButtonExample({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return ExampleScaffold(
name: name,
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Wrap(
runSpacing: Zeta.of(context).spacing.xl_3,
alignment: WrapAlignment.start,
children: [
Column(
children: [
ZetaCommsButton.reject(
label: 'Reject',
size: ZetaWidgetSize.large,
),
ZetaCommsButton.reject(
label: 'Reject',
size: ZetaWidgetSize.medium,
),
ZetaCommsButton.reject(
label: 'Reject',
size: ZetaWidgetSize.small,
),
].gap(Zeta.of(context).spacing.large),
),
Column(
children: [
ZetaCommsButton.answer(
label: 'Answer',
size: ZetaWidgetSize.large,
),
ZetaCommsButton.answer(
label: 'Answer',
size: ZetaWidgetSize.medium,
),
ZetaCommsButton.answer(
label: 'Answer',
size: ZetaWidgetSize.small,
),
].gap(Zeta.of(context).spacing.large),
),
Column(
children: [
ZetaCommsButton.mute(
label: 'Mute',
size: ZetaWidgetSize.large,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Un-Mute',
),
ZetaCommsButton.mute(
label: 'Mute',
size: ZetaWidgetSize.medium,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Un-Mute',
),
ZetaCommsButton.mute(
label: 'Mute',
size: ZetaWidgetSize.small,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Un-Mute',
),
].gap(Zeta.of(context).spacing.large),
),
Column(
children: [
ZetaCommsButton.video(
label: 'Hide Video',
size: ZetaWidgetSize.large,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Show Video',
),
ZetaCommsButton.video(
label: 'Hide Video',
size: ZetaWidgetSize.medium,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Show Video',
),
ZetaCommsButton.video(
label: 'Hide Video',
size: ZetaWidgetSize.small,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Show Video',
),
].gap(Zeta.of(context).spacing.large),
),
Column(
children: [
ZetaCommsButton.transfer(
label: 'Transfer',
size: ZetaWidgetSize.large,
),
ZetaCommsButton.transfer(
label: 'Transfer',
size: ZetaWidgetSize.medium,
),
ZetaCommsButton.transfer(
label: 'Transfer',
size: ZetaWidgetSize.small,
),
].gap(Zeta.of(context).spacing.large),
),
Column(
children: [
ZetaCommsButton.hold(
label: 'Hold Call',
size: ZetaWidgetSize.large,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'On Hold',
),
ZetaCommsButton.hold(
label: 'Hold Call',
size: ZetaWidgetSize.medium,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'On Hold',
),
ZetaCommsButton.hold(
label: 'Hold Call',
size: ZetaWidgetSize.small,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'On Hold',
),
].gap(Zeta.of(context).spacing.large),
),
Column(
children: [
ZetaCommsButton.speaker(
label: 'Speaker On',
size: ZetaWidgetSize.large,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Speaker Off',
),
ZetaCommsButton.speaker(
label: 'Speaker On',
size: ZetaWidgetSize.medium,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Speaker Off',
),
ZetaCommsButton.speaker(
label: 'Speaker On',
size: ZetaWidgetSize.small,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Speaker Off',
),
].gap(Zeta.of(context).spacing.large),
),
Column(
children: [
ZetaCommsButton.record(
label: 'Record',
size: ZetaWidgetSize.large,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Stop',
),
ZetaCommsButton.record(
label: 'Record',
size: ZetaWidgetSize.medium,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Stop',
),
ZetaCommsButton.record(
label: 'Record',
size: ZetaWidgetSize.small,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Stop',
),
].gap(Zeta.of(context).spacing.large),
),
Column(
children: [
ZetaCommsButton.add(
label: 'Add',
size: ZetaWidgetSize.large,
),
ZetaCommsButton.add(
label: 'Add',
size: ZetaWidgetSize.medium,
),
ZetaCommsButton.add(
label: 'Add',
size: ZetaWidgetSize.small,
),
].gap(Zeta.of(context).spacing.large),
),
Column(
children: [
ZetaCommsButton.security(
label: 'Security',
size: ZetaWidgetSize.large,
),
ZetaCommsButton.security(
label: 'Security',
size: ZetaWidgetSize.medium,
),
ZetaCommsButton.security(
label: 'Security',
size: ZetaWidgetSize.small,
),
].gap(Zeta.of(context).spacing.large),
),
].gap(Zeta.of(context).spacing.large),
),
),
),
);
}
}
2 changes: 2 additions & 0 deletions example/widgetbook/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import 'pages/components/button_widgetbook.dart';
import 'pages/components/chat_item_widgetbook.dart';
import 'pages/components/checkbox_widgetbook.dart';
import 'pages/components/chip_widgetbook.dart';
import 'pages/components/comms_button_widgetbook.dart';
import 'pages/components/contact_item_widgetbook.dart';
import 'pages/components/date_input_widgetbook.dart';
import 'pages/components/dial_pad_widgetbook.dart';
Expand Down Expand Up @@ -185,6 +186,7 @@ class _HotReloadState extends State<HotReload> {
WidgetbookUseCase(name: 'Bottom Sheet', builder: (context) => bottomSheetContentUseCase(context)),
WidgetbookUseCase(name: 'BreadCrumbs', builder: (context) => breadCrumbsUseCase(context)),
WidgetbookUseCase(name: 'Checkbox', builder: (context) => checkboxUseCase(context)),
WidgetbookUseCase(name: 'Comms Button', builder: (context) => commsButtonUseCase(context)),
WidgetbookUseCase(name: 'Date Input', builder: (context) => dateInputUseCase(context)),
WidgetbookUseCase(name: 'Dial Pad', builder: (context) => dialPadUseCase(context)),
WidgetbookUseCase(name: 'Dialog', builder: (context) => dialogUseCase(context)),
Expand Down
35 changes: 35 additions & 0 deletions example/widgetbook/pages/components/comms_button_widgetbook.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

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

Widget commsButtonUseCase(BuildContext context) {
return WidgetbookScaffold(
builder: (context, _) => ZetaCommsButton(
label: context.knobs.string(
label: 'Text',
initialValue: 'Answer',
),
size: context.knobs.list(
label: 'Size',
options: ZetaWidgetSize.values,
labelBuilder: enumLabelBuilder,
initialOption: ZetaWidgetSize.medium,
),
type: context.knobs.list(
label: 'Type',
options: ZetaCommsButtonType.values,
labelBuilder: enumLabelBuilder,
initialOption: ZetaCommsButtonType.positive,
),
icon: iconKnob(
context,
nullable: false,
name: "Icon",
initial: ZetaIcons.phone,
),
),
);
}
Loading

0 comments on commit af95815

Please sign in to comment.