Skip to content

Commit

Permalink
fix: [MDS-601] Refactor components properties (#208)
Browse files Browse the repository at this point in the history
  • Loading branch information
@GittHub-d
GittHub-d committed Jul 13, 2023
1 parent bc22094 commit 598f9ae
Show file tree
Hide file tree
Showing 9 changed files with 487 additions and 388 deletions.
150 changes: 90 additions & 60 deletions example/lib/src/storybook/stories/accordion.dart
View file

Large diffs are not rendered by default.

94 changes: 57 additions & 37 deletions example/lib/src/storybook/stories/alert.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,49 +11,61 @@ class AlertStory extends Story {
: super(
name: "Alert",
builder: (context) {
final backgroundColorsKnob = context.knobs.nullable.options(
label: "backgroundColor",
description: "MoonColors variants for MoonAlert background.",
final leadingColorsKnob = context.knobs.nullable.options(
label: "Leading Color",
description: "MoonColors variants for MoonAlert leading.",
enabled: false,
initial: 0,
// piccolo
options: colorOptions,
);

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

final textColorsKnob = context.knobs.nullable.options(
label: "textColor",
description: "MoonColors variants for MoonAlert text.",
final titleColorsKnob = context.knobs.nullable.options(
label: "Title color",
description: "MoonColors variants for MoonAlert title.",
enabled: false,
initial: 0,
// piccolo
options: colorOptions,
);

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

final leadingColorsKnob = context.knobs.nullable.options(
label: "leadingColor",
description: "MoonColors variants for MoonAlert leading.",
final trailingColorsKnob = context.knobs.nullable.options(
label: "Trailing color",
description: "MoonColors variants for MoonAlert trailing.",
enabled: false,
initial: 0,
// piccolo
options: colorOptions,
);

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

final trailingColorsKnob = context.knobs.nullable.options(
label: "trailingColor",
description: "MoonColors variants for MoonAlert trailing.",
final bodyColorsKnob = context.knobs.nullable.options(
label: "Body color",
description: "MoonColors variants for MoonAlert body.",
enabled: false,
initial: 0,
// piccolo
options: colorOptions,
);

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

final backgroundColorsKnob = context.knobs.nullable.options(
label: "backgroundColor",
description: "MoonColors variants for MoonAlert background.",
enabled: false,
initial: 0,
// piccolo
options: colorOptions,
);

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


final borderColorsKnob = context.knobs.nullable.options(
label: "borderColor",
Expand Down Expand Up @@ -115,16 +127,27 @@ class AlertStory extends Story {
children: [
MoonAlert(
show: showAlert,
title: const SizedBox(
showBorder: showBorderKnob,
borderColor: borderColor,
backgroundColor: backgroundColor,
borderRadius:
borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
leading: showLeadingKnob
? MoonIcon(
MoonIcons.frame_24,
color: leadingColor,
)
: null,
title: SizedBox(
height: 24,
child: Align(
alignment: AlignmentDirectional.centerStart,
child: Text("Base MoonAlert"),
child: Text(
"Base MoonAlert",
style: TextStyle(color: titleColor),
),
),
),
borderRadius:
borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
leading: showLeadingKnob ? const MoonIcon(MoonIcons.frame_24) : null,
trailing: showTrailingKnob
? MoonButton.icon(
buttonSize: MoonButtonSize.xs,
Expand All @@ -145,18 +168,15 @@ class AlertStory extends Story {
},
)
: null,
backgroundColor: backgroundColor,
showBorder: showBorderKnob,
leadingColor: leadingColor,
trailingColor: trailingColor,
textColor: textColor,
borderColor: borderColor,
body: showBodyKnob
? const SizedBox(
? SizedBox(
height: 24,
child: Align(
alignment: AlignmentDirectional.centerStart,
child: Text("Here goes MoonAlert body"),
child: Text(
"Here goes MoonAlert body",
style: TextStyle(color: bodyColor),
),
),
)
: null,
Expand All @@ -178,11 +198,11 @@ class AlertStory extends Story {
const SizedBox(height: 32),
MoonFilledAlert(
show: true,
title: const Text("Filled error MoonAlert"),
color: context.moonColors!.chiChi100,
borderRadius:
borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
leading: showLeadingKnob ? const MoonIcon(MoonIcons.alert_24) : null,
color: context.moonColors!.chiChi100,
title: const Text("Filled error MoonAlert"),
body: showBodyKnob
? const SizedBox(
height: 24,
Expand All @@ -197,11 +217,11 @@ class AlertStory extends Story {
const SizedBox(height: 16),
MoonFilledAlert(
show: true,
title: const Text("Filled warning MoonAlert"),
color: context.moonColors!.krillin100,
borderRadius:
borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
leading: showLeadingKnob ? const MoonIcon(MoonIcons.alarm_round_24) : null,
color: context.moonColors!.krillin100,
title: const Text("Filled warning MoonAlert"),
body: showBodyKnob
? const SizedBox(
height: 24,
Expand All @@ -218,11 +238,11 @@ class AlertStory extends Story {
const SizedBox(height: 32),
MoonOutlinedAlert(
show: true,
title: const Text("Outlined success MoonAlert"),
color: context.moonColors!.roshi100,
borderRadius:
borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
leading: showLeadingKnob ? const MoonIcon(MoonIcons.check_rounded_24) : null,
color: context.moonColors!.roshi100,
title: const Text("Outlined success MoonAlert"),
body: showBodyKnob
? const SizedBox(
height: 24,
Expand All @@ -237,11 +257,11 @@ class AlertStory extends Story {
const SizedBox(height: 16),
MoonOutlinedAlert(
show: true,
title: const Text('Outlined info MoonAlert'),
color: context.moonColors!.whis100,
borderRadius:
borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
leading: showLeadingKnob ? const MoonIcon(MoonIcons.alert_24) : null,
color: context.moonColors!.whis100,
title: const Text('Outlined info MoonAlert'),
body: showBodyKnob
? const SizedBox(
height: 24,
Expand Down
Loading

0 comments on commit 598f9ae

Please sign in to comment.