Skip to content

Commit

Permalink
feat: implement all notification box styles (#151)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mosberger
mosberger authored Jul 4, 2024
1 parent 627fc2e commit d2d653b
Show file tree
Hide file tree
Showing 7 changed files with 167 additions and 38 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ It is expected that you keep this format strictly, since we depend on it in our
## [Unreleased]

- (#148) Update SBB icons to version 1.0.0
- Implement all Notification Box Styles [Figma Link](https://www.figma.com/design/WOtLIam1xwrqcgnAITsEhV/Design-System-Mobile?m=auto&node-id=7271-28&t=gismRyaDdiCfaHBj-1)

### Deprecated

Expand Down
71 changes: 71 additions & 0 deletions example/lib/pages/notification_box_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,27 @@ class _NotificationBoxPage extends State<NotificationBoxPage> {
onTap: () {},
),
SizedBox(height: sbbDefaultSpacing),
SBBNotificationBox.alert(
text: text,
),
SizedBox(height: sbbDefaultSpacing),
SBBNotificationBox.alert(
title: title,
text: text,
onTap: () {},
hasIcon: false,
isCloseable: false,
detailsIcon: SBBIcons.arrows_circle_small,
),
SizedBox(height: sbbDefaultSpacing),
SBBNotificationBox.alert(
text: text,
onTap: () {},
hasIcon: false,
isCloseable: false,
detailsIcon: SBBIcons.arrows_circle_small,
),
SizedBox(height: sbbDefaultSpacing),
],
),
),
Expand All @@ -46,10 +63,28 @@ class _NotificationBoxPage extends State<NotificationBoxPage> {
SBBNotificationBox.warning(
title: title,
text: text,
onTap: () {},
),
SizedBox(height: sbbDefaultSpacing),
SBBNotificationBox.warning(
text: text,
),
SizedBox(height: sbbDefaultSpacing),
SBBNotificationBox.warning(
title: title,
text: text,
onTap: () {},
hasIcon: false,
isCloseable: false,
detailsIcon: SBBIcons.arrows_circle_small,
),
SizedBox(height: sbbDefaultSpacing),
SBBNotificationBox.warning(
text: text,
onTap: () {},
hasIcon: false,
isCloseable: false,
detailsIcon: SBBIcons.arrows_circle_small,
),
],
),
Expand All @@ -62,11 +97,29 @@ class _NotificationBoxPage extends State<NotificationBoxPage> {
SBBNotificationBox.success(
title: title,
text: text,
onTap: () {},
),
SizedBox(height: sbbDefaultSpacing),
SBBNotificationBox.success(
text: text,
),
SizedBox(height: sbbDefaultSpacing),
SBBNotificationBox.success(
title: title,
text: text,
onTap: () {},
hasIcon: false,
isCloseable: false,
detailsIcon: SBBIcons.arrows_circle_small,
),
SizedBox(height: sbbDefaultSpacing),
SBBNotificationBox.success(
text: text,
onTap: () {},
hasIcon: false,
isCloseable: false,
detailsIcon: SBBIcons.arrows_circle_small,
),
],
),
),
Expand All @@ -77,12 +130,30 @@ class _NotificationBoxPage extends State<NotificationBoxPage> {
children: [
SBBNotificationBox.information(
title: title,
onTap: () {},
text: text,
),
SizedBox(height: sbbDefaultSpacing),
SBBNotificationBox.information(
text: text,
),
SizedBox(height: sbbDefaultSpacing),
SBBNotificationBox.information(
title: title,
text: text,
onTap: () {},
hasIcon: false,
isCloseable: false,
detailsIcon: SBBIcons.arrows_circle_small,
),
SizedBox(height: sbbDefaultSpacing),
SBBNotificationBox.information(
text: text,
onTap: () {},
hasIcon: false,
isCloseable: false,
detailsIcon: SBBIcons.arrows_circle_small,
),
],
),
),
Expand Down
56 changes: 40 additions & 16 deletions lib/src/notification_box/notification_box.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,16 @@ part 'notification_box.type.dart';

class SBBNotificationBox extends StatefulWidget {
const SBBNotificationBox({
required this.type,
required this.state,
required this.text,
super.key,
this.title,
this.onControllerCreated,
this.onTap,
this.isCloseable = true,
this.onClose,
this.hasIcon = true,
this.detailsIcon = SBBIcons.chevron_small_right_small,
});

factory SBBNotificationBox.alert({
Expand All @@ -28,15 +30,19 @@ class SBBNotificationBox extends StatefulWidget {
GestureTapCallback? onTap,
bool isCloseable = true,
GestureTapCallback? onClose,
bool hasIcon = true,
IconData detailsIcon = SBBIcons.chevron_small_right_small,
}) =>
SBBNotificationBox(
type: SBBNotificationBoxType.alert,
state: SBBNotificationBoxState.alert,
title: title,
text: text,
onControllerCreated: onControllerCreated,
onTap: onTap,
isCloseable: isCloseable,
onClose: onClose,
hasIcon: hasIcon,
detailsIcon: detailsIcon,
);

factory SBBNotificationBox.warning({
Expand All @@ -46,15 +52,19 @@ class SBBNotificationBox extends StatefulWidget {
GestureTapCallback? onTap,
bool isCloseable = true,
GestureTapCallback? onClose,
bool hasIcon = true,
IconData detailsIcon = SBBIcons.chevron_small_right_small,
}) =>
SBBNotificationBox(
type: SBBNotificationBoxType.warning,
state: SBBNotificationBoxState.warning,
title: title,
text: text,
onControllerCreated: onControllerCreated,
onTap: onTap,
isCloseable: isCloseable,
onClose: onClose,
hasIcon: hasIcon,
detailsIcon: detailsIcon,
);

factory SBBNotificationBox.success({
Expand All @@ -64,15 +74,19 @@ class SBBNotificationBox extends StatefulWidget {
GestureTapCallback? onTap,
bool isCloseable = true,
GestureTapCallback? onClose,
bool hasIcon = true,
IconData detailsIcon = SBBIcons.chevron_small_right_small,
}) =>
SBBNotificationBox(
type: SBBNotificationBoxType.success,
state: SBBNotificationBoxState.success,
title: title,
text: text,
onControllerCreated: onControllerCreated,
onTap: onTap,
isCloseable: isCloseable,
onClose: onClose,
hasIcon: hasIcon,
detailsIcon: detailsIcon,
);

factory SBBNotificationBox.information({
Expand All @@ -82,24 +96,30 @@ class SBBNotificationBox extends StatefulWidget {
GestureTapCallback? onTap,
bool isCloseable = true,
GestureTapCallback? onClose,
bool hasIcon = true,
IconData detailsIcon = SBBIcons.chevron_small_right_small,
}) =>
SBBNotificationBox(
type: SBBNotificationBoxType.information,
state: SBBNotificationBoxState.information,
title: title,
text: text,
onControllerCreated: onControllerCreated,
onTap: onTap,
isCloseable: isCloseable,
onClose: onClose,
hasIcon: hasIcon,
detailsIcon: detailsIcon,
);

final SBBNotificationBoxType type;
final SBBNotificationBoxState state;
final String? title;
final String text;
final Function(CloseableBoxController controller)? onControllerCreated;
final GestureTapCallback? onTap;
final bool isCloseable;
final GestureTapCallback? onClose;
final bool hasIcon;
final IconData detailsIcon;

@override
State<SBBNotificationBox> createState() => _SBBNotificationBoxState();
Expand Down Expand Up @@ -132,27 +152,31 @@ class _SBBNotificationBoxState extends State<SBBNotificationBox>
@override
Widget build(BuildContext context) {
final iconColor = SBBBaseStyle.of(context).themeValue(
widget.type.iconColor,
widget.type.iconColorDark,
);
final icon = Icon(
widget.type.icon,
color: iconColor,
widget.state.iconColor,
widget.state.iconColorDark,
);
final icon = widget.hasIcon
? Icon(
widget.state.icon,
color: iconColor,
)
: null;
final detailsIcon = widget.onTap != null ? Icon(widget.detailsIcon) : null;
Widget child;
switch (widget.title) {
case null:
child = SBBNotificationBoxContent(
icon: icon,
text: widget.text,
isCloseable: widget.isCloseable,
detailsIcon: detailsIcon,
);
default:
child = SBBNotificationBoxTitleContent(
icon: icon,
title: widget.title!,
text: widget.text,
hasDetails: widget.onTap != null,
detailsIcon: detailsIcon,
);
}
return _animationBuilder(
Expand All @@ -165,22 +189,22 @@ class _SBBNotificationBoxState extends State<SBBNotificationBox>
decoration: BoxDecoration(
border: Border(
left: BorderSide(
color: widget.type.backgroundColor, width: 8.0),
color: widget.state.backgroundColor, width: 8.0),
),
borderRadius: BorderRadius.all(
Radius.circular(16.0),
),
),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: widget.type.backgroundColor),
border: Border.all(color: widget.state.backgroundColor),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8.0),
bottomLeft: Radius.circular(8.0),
topRight: Radius.circular(15.0),
bottomRight: Radius.circular(15.0),
),
color: widget.type.backgroundColor.withOpacity(.05),
color: widget.state.backgroundColor.withOpacity(.05),
),
padding: const EdgeInsets.all(sbbDefaultSpacing),
child: child,
Expand Down
4 changes: 2 additions & 2 deletions lib/src/notification_box/notification_box.type.dart
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
part of 'notification_box.dart';

enum SBBNotificationBoxType {
enum SBBNotificationBoxState {
alert(
SBBColors.red,
SBBColors.red,
Expand All @@ -26,7 +26,7 @@ enum SBBNotificationBoxType {
SBBIcons.circle_information_small,
);

const SBBNotificationBoxType(
const SBBNotificationBoxState(
this.backgroundColor,
this.iconColor,
this.iconColorDark,
Expand Down
17 changes: 12 additions & 5 deletions lib/src/notification_box/notification_box_content.dart
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,34 @@
import 'package:design_system_flutter/src/notification_box/notification_box_text_content.dart';
import 'package:flutter/material.dart';

import '../../design_system_flutter.dart';

class SBBNotificationBoxContent extends StatelessWidget {
const SBBNotificationBoxContent({
required this.icon,
required this.text,
required this.isCloseable,
super.key,
this.icon,
this.detailsIcon,
});

final Widget icon;
final Widget? icon;
final String text;
final bool isCloseable;
final Widget? detailsIcon;

@override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
icon,
SizedBox(width: 8.0),
Expanded(child: Text(text)),
if (icon != null) ...[
icon!,
SizedBox(width: 8.0),
],
Expanded(
child: NotificationBoxTextContent(text: text, icon: detailsIcon),
),
if (isCloseable) const SizedBox(width: sbbIconSizeSmall),
],
);
Expand Down
31 changes: 31 additions & 0 deletions lib/src/notification_box/notification_box_text_content.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import 'package:flutter/material.dart';

class NotificationBoxTextContent extends StatelessWidget {
const NotificationBoxTextContent({
required this.text,
super.key,
this.clip = true,
this.icon,
});

final String text;
final bool clip;
final Widget? icon;

@override
Widget build(BuildContext context) {
return Row(
children: [
Expanded(
child: Text(
text,
maxLines: clip ? 3 : null,
overflow: clip ? TextOverflow.ellipsis : null,
),
),
SizedBox(width: 8.0),
if (icon != null) icon!,
],
);
}
}
Loading

0 comments on commit d2d653b

Please sign in to comment.