Skip to content

Commit

Permalink
fix: [MDS-631] Components API changes (#237)
Browse files Browse the repository at this point in the history
  • Loading branch information
@GittHub-d
GittHub-d committed Aug 9, 2023
1 parent ae1b2aa commit 6e56792
Show file tree
Hide file tree
Showing 70 changed files with 1,690 additions and 1,878 deletions.
33 changes: 22 additions & 11 deletions example/lib/src/storybook/common/widgets/text_divider.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,37 @@ import 'package:moon_design/moon_design.dart';

class TextDivider extends StatelessWidget {
final String text;
final double paddingTop;
final double paddingBottom;

const TextDivider({
super.key,
required this.text,
this.paddingTop = 40,
this.paddingBottom = 32,
});

@override
Widget build(BuildContext context) {
return Row(
children: [
const Expanded(child: Divider()),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Text(
text,
style: context.moonTypography?.body.text12.copyWith(color: context.moonColors?.trunks),
return Padding(
padding: EdgeInsets.only(top: paddingTop, bottom: paddingBottom),
child: Row(
children: [
const Expanded(
child: Divider(),
),
),
const Expanded(child: Divider()),
],
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Text(
text,
style: context.moonTypography?.body.text12.copyWith(color: context.moonColors?.trunks),
),
),
const Expanded(
child: Divider(),
),
],
),
);
}
}
168 changes: 69 additions & 99 deletions example/lib/src/storybook/stories/accordion.dart
View file

Large diffs are not rendered by default.

74 changes: 30 additions & 44 deletions example/lib/src/storybook/stories/alert.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ class AlertStory extends Story {
AlertStory()
: super(
name: "Alert",
builder: (context) {
final leadingColorsKnob = context.knobs.nullable.options(
builder: (BuildContext context) {
final leadingColorKnob = context.knobs.nullable.options(
label: "Leading Color",
description: "MoonColors variants for MoonAlert leading slot.",
enabled: false,
Expand All @@ -20,9 +20,9 @@ class AlertStory extends Story {
options: colorOptions,
);

final leadingColor = colorTable(context)[leadingColorsKnob ?? 40];
final leadingColor = colorTable(context)[leadingColorKnob ?? 40];

final titleColorsKnob = context.knobs.nullable.options(
final titleColorKnob = context.knobs.nullable.options(
label: "Title color",
description: "MoonColors variants for MoonAlert title slot.",
enabled: false,
Expand All @@ -31,9 +31,9 @@ class AlertStory extends Story {
options: colorOptions,
);

final titleColor = colorTable(context)[titleColorsKnob ?? 40];
final titleColor = colorTable(context)[titleColorKnob ?? 40];

final trailingColorsKnob = context.knobs.nullable.options(
final trailingColorKnob = context.knobs.nullable.options(
label: "Trailing color",
description: "MoonColors variants for MoonAlert trailing slot.",
enabled: false,
Expand All @@ -42,9 +42,9 @@ class AlertStory extends Story {
options: colorOptions,
);

final trailingColor = colorTable(context)[trailingColorsKnob ?? 40];
final trailingColor = colorTable(context)[trailingColorKnob ?? 40];

final bodyColorsKnob = context.knobs.nullable.options(
final bodyColorKnob = context.knobs.nullable.options(
label: "Body color",
description: "MoonColors variants for MoonAlert body slot.",
enabled: false,
Expand All @@ -53,9 +53,9 @@ class AlertStory extends Story {
options: colorOptions,
);

final bodyColor = colorTable(context)[bodyColorsKnob ?? 40];
final bodyColor = colorTable(context)[bodyColorKnob ?? 40];

final backgroundColorsKnob = context.knobs.nullable.options(
final backgroundColorKnob = context.knobs.nullable.options(
label: "backgroundColor",
description: "MoonColors variants for MoonAlert background.",
enabled: false,
Expand All @@ -64,10 +64,9 @@ class AlertStory extends Story {
options: colorOptions,
);

final backgroundColor = colorTable(context)[backgroundColorsKnob ?? 40];
final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40];


final borderColorsKnob = context.knobs.nullable.options(
final borderColorKnob = context.knobs.nullable.options(
label: "borderColor",
description: "MoonColors variants for MoonAlert border.",
enabled: false,
Expand All @@ -76,7 +75,7 @@ class AlertStory extends Story {
options: colorOptions,
);

final borderColor = colorTable(context)[borderColorsKnob ?? 40];
final borderColor = colorTable(context)[borderColorKnob ?? 40];

final borderRadiusKnob = context.knobs.nullable.sliderInt(
label: "borderRadius",
Expand Down Expand Up @@ -113,25 +112,29 @@ class AlertStory extends Story {
description: "onTrailingTap() is null.",
);

final BorderRadiusGeometry? borderRadius =
borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null;

return Center(
child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(vertical: 64),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(height: 64),
const TextDivider(text: "Base MoonAlert"),
const SizedBox(height: 32),
const TextDivider(
text: "Base MoonAlert",
paddingTop: 0,
),
StatefulBuilder(
builder: (context, setState) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
MoonAlert(
show: showAlert,
showBorder: showBorderKnob,
borderColor: borderColor,
backgroundColor: backgroundColor,
borderRadius:
borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
borderRadius: borderRadius,
leading: showLeadingKnob
? MoonIcon(
MoonIcons.frame_24,
Expand All @@ -151,21 +154,15 @@ class AlertStory extends Story {
trailing: showTrailingKnob
? MoonButton.icon(
buttonSize: MoonButtonSize.xs,
borderRadius: borderRadiusKnob != null
? BorderRadius.circular(borderRadiusKnob.toDouble())
: null,
borderRadius: borderRadius,
disabledOpacityValue: 1,
icon: MoonIcon(
MoonIcons.close_small_24,
color: trailingColor,
size: 24,
),
gap: 0,
onTap: showDisabledKnob
? null
: () {
setState(() => showAlert = !showAlert);
},
onTap: showDisabledKnob ? null : () => setState(() => showAlert = !showAlert),
)
: null,
body: showBodyKnob
Expand All @@ -185,22 +182,17 @@ class AlertStory extends Story {
MoonFilledButton(
label: const Text("Show/Hide MoonAlert"),
backgroundColor: context.moonColors!.piccolo,
onTap: () {
setState(() => showAlert = !showAlert);
},
onTap: () => setState(() => showAlert = !showAlert),
),
],
);
},
),
const SizedBox(height: 40),
const TextDivider(text: "Filled MoonAlert variant"),
const SizedBox(height: 32),
MoonFilledAlert(
show: true,
color: context.moonColors!.chiChi100,
borderRadius:
borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
borderRadius: borderRadius,
leading: showLeadingKnob ? const MoonIcon(MoonIcons.alert_24) : null,
title: const Text("Filled error MoonAlert"),
body: showBodyKnob
Expand All @@ -218,8 +210,7 @@ class AlertStory extends Story {
MoonFilledAlert(
show: true,
color: context.moonColors!.krillin100,
borderRadius:
borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
borderRadius: borderRadius,
leading: showLeadingKnob ? const MoonIcon(MoonIcons.alarm_round_24) : null,
title: const Text("Filled warning MoonAlert"),
body: showBodyKnob
Expand All @@ -233,14 +224,11 @@ class AlertStory extends Story {
: null,
onTrailingTap: () {},
),
const SizedBox(height: 40),
const TextDivider(text: "Outlined MoonAlert variant"),
const SizedBox(height: 32),
MoonOutlinedAlert(
show: true,
color: context.moonColors!.roshi100,
borderRadius:
borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
borderRadius: borderRadius,
leading: showLeadingKnob ? const MoonIcon(MoonIcons.check_rounded_24) : null,
title: const Text("Outlined success MoonAlert"),
body: showBodyKnob
Expand All @@ -258,8 +246,7 @@ class AlertStory extends Story {
MoonOutlinedAlert(
show: true,
color: context.moonColors!.whis100,
borderRadius:
borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
borderRadius: borderRadius,
leading: showLeadingKnob ? const MoonIcon(MoonIcons.alert_24) : null,
title: const Text('Outlined info MoonAlert'),
body: showBodyKnob
Expand All @@ -273,7 +260,6 @@ class AlertStory extends Story {
: null,
onTrailingTap: () {},
),
const SizedBox(height: 64),
],
),
),
Expand Down
Loading

0 comments on commit 6e56792

Please sign in to comment.