Skip to content

Commit

Permalink
fix: [MDS-502] Add additional storybook knobs to components (#145)
Browse files Browse the repository at this point in the history
  • Loading branch information
@GittHub-d
GittHub-d committed Apr 19, 2023
1 parent 9a7368e commit 53523fe
Show file tree
Hide file tree
Showing 25 changed files with 365 additions and 165 deletions.
94 changes: 84 additions & 10 deletions example/lib/src/storybook/stories/accordion.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ class AccordionStory extends Story {
name: "Accordion",
builder: (context) {
final accordionSizesKnob = context.knobs.options(
label: "MoonAccordionItemSize",
label: "accordionSize",
description: "Accordion size variants.",
initial: MoonAccordionItemSize.md,
options: const [
Expand All @@ -25,10 +25,37 @@ class AccordionStory extends Story {
],
);

final textColorsKnob = context.knobs.options(
label: "textColor",
description: "MoonColors variants for Accordion text.",
initial: 40, // null
options: colorOptions,
);

final textColor = colorTable(context)[textColorsKnob];

final iconColorsKnob = context.knobs.options(
label: "iconColor",
description: "MoonColors variants for Accordion trailing icon.",
initial: 40, // null
options: colorOptions,
);

final iconColor = colorTable(context)[iconColorsKnob];

final expandedIconColorsKnob = context.knobs.options(
label: "expandedIconColor",
description: "MoonColors variants for expanded Accordion trailing icon.",
initial: 40, // null
options: colorOptions,
);

final expandedIconColor = colorTable(context)[expandedIconColorsKnob];

final backgroundColorsKnob = context.knobs.options(
label: "backgroundColor",
description: "MoonColors variants for Accordion background.",
initial: 4, // gohan
initial: 40, // null
options: colorOptions,
);

Expand All @@ -37,23 +64,48 @@ class AccordionStory extends Story {
final expandedBackgroundColorsKnob = context.knobs.options(
label: "expandedBackgroundColor",
description: "MoonColors variants for expanded Accordion background.",
initial: 4, // gohan
initial: 40, // null
options: colorOptions,
);

final expandedBackgroundColor = colorTable(context)[expandedBackgroundColorsKnob];

final showDividerKnob = context.knobs.boolean(
label: "showDivider",
description: "Show divider in the Accordion.",
initial: true,
final borderColorsKnob = context.knobs.options(
label: "borderColor",
description: "MoonColors variants for Accordion border.",
initial: 40, // null
options: colorOptions,
);

final borderColor = colorTable(context)[borderColorsKnob];

final dividerColorsKnob = context.knobs.options(
label: "dividerColor",
description: "MoonColors variants for expanded Accordion divider.",
initial: 40, // null
options: colorOptions,
);

final dividerColor = colorTable(context)[dividerColorsKnob];

final borderRadiusKnob = context.knobs.sliderInt(
max: 12,
initial: 8,
label: "borderRadius",
description: "Border radius for Accordion.",
);

final showBorderKnob = context.knobs.boolean(
label: "showBorder",
description: "Show border around the Accordion.",
);

final showDividerKnob = context.knobs.boolean(
label: "showDivider",
description: "Show divider between Accordion header and body.",
initial: true,
);

final showShadowKnob = context.knobs.boolean(
label: "Show shadows",
description: "Show shadows under the Accordion.",
Expand All @@ -79,8 +131,14 @@ class AccordionStory extends Story {
identityValue: AccordionItems.first,
groupIdentityValue: currentlyOpenAccordionItem,
accordionSize: accordionSizesKnob,
textColor: textColor,
borderColor: borderColor,
trailingIconColor: iconColor,
expandedTrailingIconColor: expandedIconColor,
backgroundColor: backgroundColor,
expandedBackgroundColor: expandedBackgroundColor,
dividerColor: dividerColor,
borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
showBorder: showBorderKnob,
showDivider: showDividerKnob,
shadows: showShadowKnob == true ? null : [],
Expand All @@ -100,8 +158,14 @@ class AccordionStory extends Story {
groupIdentityValue: currentlyOpenAccordionItem,
initiallyExpanded: true,
accordionSize: accordionSizesKnob,
textColor: textColor,
borderColor: borderColor,
trailingIconColor: iconColor,
expandedTrailingIconColor: expandedIconColor,
backgroundColor: backgroundColor,
expandedBackgroundColor: expandedBackgroundColor,
dividerColor: dividerColor,
borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
showBorder: showBorderKnob,
showDivider: showDividerKnob,
shadows: showShadowKnob == true ? null : [],
Expand All @@ -120,10 +184,15 @@ class AccordionStory extends Story {
const SizedBox(height: 32),
MoonAccordionItem<AccordionItems>(
accordionSize: accordionSizesKnob,
backgroundColor: backgroundColor,
initiallyExpanded: true,
hasContentOutside: true,
textColor: textColor,
borderColor: borderColor,
trailingIconColor: iconColor,
expandedTrailingIconColor: expandedIconColor,
backgroundColor: backgroundColor,
expandedBackgroundColor: expandedBackgroundColor,
borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
showBorder: showBorderKnob,
showDivider: showDividerKnob,
shadows: showShadowKnob == true ? null : [],
Expand All @@ -138,11 +207,16 @@ class AccordionStory extends Story {
const SizedBox(height: 8),
MoonAccordionItem<AccordionItems>(
accordionSize: accordionSizesKnob,
backgroundColor: backgroundColor,
hasContentOutside: true,
textColor: textColor,
borderColor: borderColor,
trailingIconColor: iconColor,
expandedTrailingIconColor: expandedIconColor,
backgroundColor: backgroundColor,
expandedBackgroundColor: expandedBackgroundColor,
dividerColor: dividerColor,
borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
showBorder: showBorderKnob,
showDivider: showDividerKnob,
shadows: showShadowKnob == true ? null : [],
childrenPadding: const EdgeInsets.symmetric(vertical: 12),
title: const Text("Ungrouped accordion item #2"),
Expand Down
10 changes: 5 additions & 5 deletions example/lib/src/storybook/stories/alert.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ class AlertStory extends Story {
final backgroundColorsKnob = context.knobs.options(
label: "backgroundColor",
description: "MoonColors variants for background.",
initial: 4, // Gohan
initial: 40, // null
options: colorOptions,
);

Expand All @@ -23,7 +23,7 @@ class AlertStory extends Story {
final textColorsKnob = context.knobs.options(
label: "textColor",
description: "MoonColors variants for text.",
initial: 5, // Bulma
initial: 40, // null
options: colorOptions,
);

Expand All @@ -32,7 +32,7 @@ class AlertStory extends Story {
final leadingColorsKnob = context.knobs.options(
label: "leadingColor",
description: "MoonColors variants for leading.",
initial: 5, // Bulma
initial: 40, // null
options: colorOptions,
);

Expand All @@ -41,7 +41,7 @@ class AlertStory extends Story {
final trailingColorsKnob = context.knobs.options(
label: "trailingColor",
description: "MoonColors variants for trailing.",
initial: 5, // Bulma
initial: 40, // null
options: colorOptions,
);

Expand All @@ -50,7 +50,7 @@ class AlertStory extends Story {
final borderColorsKnob = context.knobs.options(
label: "borderColor",
description: "MoonColors variants for border.",
initial: 5, // Bulma
initial: 40, // null
options: colorOptions,
);

Expand Down
12 changes: 6 additions & 6 deletions example/lib/src/storybook/stories/authcode.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ class AuthCodeStory extends Story {

final selectedFillColorsKnob = context.knobs.options(
label: "selectedFillColor",
description: "MoonColors variants for MoonAuthCode.",
description: "MoonColors variants for selected auth input field.",
initial: 40, // null
options: colorOptions,
);
Expand All @@ -50,7 +50,7 @@ class AuthCodeStory extends Story {

final activeFillColorsKnob = context.knobs.options(
label: "activeFillColor",
description: "MoonColors variants for MoonAuthCode.",
description: "MoonColors variants for active auth input fields.",
initial: 40, // null
options: colorOptions,
);
Expand All @@ -59,7 +59,7 @@ class AuthCodeStory extends Story {

final inactiveFillColorsKnob = context.knobs.options(
label: "inactiveFillColor",
description: "MoonColors variants for MoonAuthCode.",
description: "MoonColors variants for inactive auth input fields.",
initial: 40, // null
options: colorOptions,
);
Expand All @@ -68,7 +68,7 @@ class AuthCodeStory extends Story {

final selectedBorderColorsKnob = context.knobs.options(
label: "selectedBorderColor",
description: "MoonColors variants for MoonAuthCode.",
description: "MoonColors variants for selected auth input field border.",
initial: 40, // null
options: colorOptions,
);
Expand All @@ -77,7 +77,7 @@ class AuthCodeStory extends Story {

final activeBorderColorsKnob = context.knobs.options(
label: "activeBorderColor",
description: "MoonColors variants for MoonAuthCode.",
description: "MoonColors variants for active auth input fields borders.",
initial: 40, // null
options: colorOptions,
);
Expand All @@ -86,7 +86,7 @@ class AuthCodeStory extends Story {

final inactiveBorderColorsKnob = context.knobs.options(
label: "inactiveBorderColor",
description: "MoonColors variants for MoonAuthCode.",
description: "MoonColors variants for inactive auth input fields borders.",
initial: 40, // null
options: colorOptions,
);
Expand Down
37 changes: 33 additions & 4 deletions example/lib/src/storybook/stories/avatar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ class AvatarStory extends Story {
name: "Avatar",
builder: (context) {
final customLabelTextKnob = context.knobs.text(
label: "Custom label text",
label: "content",
initial: "MD",
);

Expand All @@ -28,10 +28,19 @@ class AvatarStory extends Story {
],
);

final avatarTextColorKnob = context.knobs.options(
label: "textColor",
description: "MoonColors variants for Avatar text.",
initial: 40, // null
options: colorOptions,
);

final textColor = colorTable(context)[avatarTextColorKnob];

final avatarBackgroundColorKnob = context.knobs.options(
label: "backgroundColor",
description: "MoonColors variants for Avatar background.",
initial: 5, // bulma
initial: 40, // null
options: colorOptions,
);

Expand All @@ -40,7 +49,7 @@ class AvatarStory extends Story {
final badgeColorKnob = context.knobs.options(
label: "badgeColor",
description: "MoonColors variants for the Avatar badge.",
initial: 18, // roshi100
initial: 40, // null
options: colorOptions,
);

Expand All @@ -65,6 +74,20 @@ class AvatarStory extends Story {
description: "Border radius for the Avatar.",
);

final badgeMarginKnob = context.knobs.sliderInt(
max: 8,
initial: 4,
label: "badgeMarginValue",
description: "Badge margin value for the Avatar.",
);

final badgeSizeKnob = context.knobs.sliderInt(
max: 16,
initial: 8,
label: "badgeSize",
description: "Badge Size for the Avatar.",
);

final showBadgeKnob = context.knobs.boolean(
label: "showBadge",
description: "Show Avatar badge.",
Expand All @@ -86,13 +109,16 @@ class AvatarStory extends Story {
const TextDivider(text: "Customisable Avatar"),
const SizedBox(height: 32),
MoonAvatar(
textColor: textColor,
avatarSize: avatarSizesKnob,
badgeSize: badgeSizeKnob.toDouble(),
borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
badgeMarginValue: badgeMarginKnob.toDouble(),
backgroundColor: backgroundColor,
showBadge: showBadgeKnob,
badgeColor: badgeColor,
badgeAlignment: avatarBadgeAlignmentKnob,
child: Padding(
content: Padding(
padding: const EdgeInsets.only(top: 1.0),
child: Text(customLabelTextKnob),
),
Expand All @@ -102,6 +128,9 @@ class AvatarStory extends Story {
const SizedBox(height: 32),
MoonAvatar(
avatarSize: avatarSizesKnob,
badgeSize: badgeSizeKnob.toDouble(),
borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
badgeMarginValue: badgeMarginKnob.toDouble(),
backgroundColor: backgroundColor,
showBadge: showBadgeKnob,
badgeColor: badgeColor,
Expand Down
Loading

0 comments on commit 53523fe

Please sign in to comment.