feat: [MDS-404] Create Accordion widget (#83)

example/lib/src/storybook/stories/accordion.dart

@@ -0,0 +1,92 @@
+import 'package:example/src/storybook/common/options.dart';
+import 'package:flutter/material.dart';
+import 'package:moon_design/moon_design.dart';
+import 'package:storybook_flutter/storybook_flutter.dart';
+
+class AccordionStory extends Story {
+  AccordionStory()
+      : super(
+          name: "Accordion",
+          builder: (context) {
+            final accordionSizesKnob = context.knobs.options(
+              label: "MoonAccordionSize",
+              description: "Accordion size variants.",
+              initial: MoonAccordionSize.md,
+              options: const [
+                Option(label: "sm", value: MoonAccordionSize.sm),
+                Option(label: "md", value: MoonAccordionSize.md),
+                Option(label: "lg", value: MoonAccordionSize.lg),
+                Option(label: "xl", value: MoonAccordionSize.xl)
+              ],
+            );
+
+            final backgroundColorsKnob = context.knobs.options(
+              label: "backgroundColor",
+              description: "MoonColors variants for Accordion background.",
+              initial: 4, // gohan
+              options: colorOptions,
+            );
+
+            final backgroundColor = colorTable(context)[backgroundColorsKnob];
+
+            final expandedBackgroundColorsKnob = context.knobs.options(
+              label: "expandedBackgroundColor",
+              description: "MoonColors variants for expanded Accordion background.",
+              initial: 4, // gohan
+              options: colorOptions,
+            );
+
+            final expandedBackgroundColor = colorTable(context)[expandedBackgroundColorsKnob];
+
+            final showDividerKnob = context.knobs.boolean(
+              label: "showDivider",
+              description: "Show divider in the Accordion.",
+              initial: true,
+            );
+
+            final showBorderKnob = context.knobs.boolean(
+              label: "showBorder",
+              description: "Show border around the Accordion.",
+            );
+
+            final showShadowKnob = context.knobs.boolean(
+              label: "Show shadows",
+              description: "Show shadows under the Accordion.",
+              initial: true,
+            );
+
+            final setRtlModeKnob = context.knobs.boolean(
+              label: "RTL mode",
+              description: "Switch between LTR and RTL modes.",
+            );
+
+            return Directionality(
+              textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr,
+              child: Center(
+                child: SizedBox(
+                  height: 245,
+                  child: Column(
+                    children: [
+                      MoonAccordion(
+                        accordionSize: accordionSizesKnob,
+                        backgroundColor: backgroundColor,
+                        expandedBackgroundColor: expandedBackgroundColor,
+                        showBorder: showBorderKnob,
+                        showDivider: showDividerKnob,
+                        shadows: showShadowKnob == true ? null : [],
+                        childrenPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+                        title: const Text("Accordion title"),
+                        children: const [
+                          Text(
+                            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+                          ),
+                        ],
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            );
+          },
+        );
+}

example/lib/src/storybook/stories/tooltip.dart

@@ -78,7 +78,7 @@ class TooltipStory extends Story {
             );
 
             final showShadowKnob = context.knobs.boolean(
-              label: "Show shadow",
+              label: "Show shadows",
               description: "Show shadows under the Tooltip.",
               initial: true,
             );

example/lib/src/storybook/storybook.dart

@@ -1,4 +1,5 @@
 import 'package:example/src/storybook/common/widgets/version.dart';
+import 'package:example/src/storybook/stories/accordion.dart';
 import 'package:example/src/storybook/stories/avatar.dart';
 import 'package:example/src/storybook/stories/button.dart';
 import 'package:example/src/storybook/stories/checkbox.dart';
@@ -34,7 +35,7 @@ class StorybookPage extends StatelessWidget {
     return Stack(
       children: [
         Storybook(
-          initialStory: "Avatar",
+          initialStory: "Accordion",
           plugins: _plugins,
           wrapperBuilder: (context, child) => MaterialApp(
             title: "Moon Design for Flutter",
@@ -66,6 +67,7 @@ class StorybookPage extends StatelessWidget {
             ),
           ),
           stories: [
+            AccordionStory(),
             AvatarStory(),
             ButtonStory(),
             CheckboxStory(),

lib/moon_design.dart

@@ -1,5 +1,6 @@
 library moon_design;
 
+export 'package:moon_design/src/theme/accordion/accordion_theme.dart';
 export 'package:moon_design/src/theme/avatar/avatar_theme.dart';
 export 'package:moon_design/src/theme/borders.dart';
 export 'package:moon_design/src/theme/button/button_theme.dart';
@@ -26,6 +27,7 @@ export 'package:moon_design/src/utils/extensions.dart';
 export 'package:moon_design/src/utils/measure_size.dart';
 export 'package:moon_design/src/utils/widget_surveyor.dart';
 
+export 'package:moon_design/src/widgets/accordion/accordion.dart';
 export 'package:moon_design/src/widgets/avatar/avatar.dart';
 export 'package:moon_design/src/widgets/buttons/button.dart';
 export 'package:moon_design/src/widgets/buttons/ghost_button.dart';

lib/src/theme/accordion/accordion_colors.dart

@@ -0,0 +1,98 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/colors.dart';
+
+@immutable
+class MoonAccordionColors extends ThemeExtension<MoonAccordionColors> with DiagnosticableTreeMixin {
+  static final light = MoonAccordionColors(
+    backgroundColor: MoonColors.light.gohan,
+    expandedBackgroundColor: MoonColors.light.gohan,
+    borderColor: MoonColors.light.beerus,
+    dividerColor: MoonColors.light.beerus,
+    expandedIconColor: MoonColors.light.bulma,
+    iconColor: MoonColors.light.trunks,
+  );
+
+  static final dark = MoonAccordionColors(
+    backgroundColor: MoonColors.dark.gohan,
+    expandedBackgroundColor: MoonColors.dark.gohan,
+    borderColor: MoonColors.dark.beerus,
+    dividerColor: MoonColors.dark.beerus,
+    iconColor: MoonColors.dark.trunks,
+    expandedIconColor: MoonColors.dark.bulma,
+  );
+
+  /// Accordion background color.
+  final Color backgroundColor;
+
+  /// Expanded accordion background color.
+  final Color expandedBackgroundColor;
+
+  /// Accordion border color.
+  final Color borderColor;
+
+  /// Accordion divider color.
+  final Color dividerColor;
+
+  /// Accordion icon color.
+  final Color iconColor;
+
+  /// Expanded accordion icon color.
+  final Color expandedIconColor;
+
+  const MoonAccordionColors({
+    required this.backgroundColor,
+    required this.expandedBackgroundColor,
+    required this.borderColor,
+    required this.dividerColor,
+    required this.expandedIconColor,
+    required this.iconColor,
+  });
+
+  @override
+  MoonAccordionColors copyWith({
+    Color? backgroundColor,
+    Color? expandedBackgroundColor,
+    Color? borderColor,
+    Color? dividerColor,
+    Color? expandedIconColor,
+    Color? iconColor,
+  }) {
+    return MoonAccordionColors(
+      backgroundColor: backgroundColor ?? this.backgroundColor,
+      expandedBackgroundColor: expandedBackgroundColor ?? this.expandedBackgroundColor,
+      borderColor: borderColor ?? this.borderColor,
+      dividerColor: dividerColor ?? this.dividerColor,
+      expandedIconColor: expandedIconColor ?? this.expandedIconColor,
+      iconColor: iconColor ?? this.iconColor,
+    );
+  }
+
+  @override
+  MoonAccordionColors lerp(ThemeExtension<MoonAccordionColors>? other, double t) {
+    if (other is! MoonAccordionColors) return this;
+
+    return MoonAccordionColors(
+      backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t)!,
+      expandedBackgroundColor: Color.lerp(expandedBackgroundColor, other.expandedBackgroundColor, t)!,
+      borderColor: Color.lerp(borderColor, other.borderColor, t)!,
+      dividerColor: Color.lerp(dividerColor, other.dividerColor, t)!,
+      expandedIconColor: Color.lerp(expandedIconColor, other.expandedIconColor, t)!,
+      iconColor: Color.lerp(iconColor, other.iconColor, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonAccordionColors"))
+      ..add(ColorProperty("backgroundColor", backgroundColor))
+      ..add(ColorProperty("expandedBackgroundColor", expandedBackgroundColor))
+      ..add(ColorProperty("borderColor", borderColor))
+      ..add(ColorProperty("dividerColor", dividerColor))
+      ..add(ColorProperty("expandedIconColor", expandedIconColor))
+      ..add(ColorProperty("iconColor", iconColor));
+  }
+}

lib/src/theme/accordion/accordion_properties.dart

@@ -0,0 +1,68 @@
+import 'package:figma_squircle/figma_squircle.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/borders.dart';
+
+@immutable
+class MoonAccordionProperties extends ThemeExtension<MoonAccordionProperties> with DiagnosticableTreeMixin {
+  static final properties = MoonAccordionProperties(
+    transitionDuration: const Duration(milliseconds: 200),
+    transitionCurve: Curves.easeInOutCubic,
+    borderRadius: SmoothBorderRadius.all(
+      SmoothRadius(
+        cornerRadius: MoonBorders.borders.interactiveSm.topLeft.x,
+        cornerSmoothing: 1,
+      ),
+    ),
+  );
+
+  /// Accordion transition duration.
+  final Duration transitionDuration;
+
+  /// Accordion transition curve.
+  final Curve transitionCurve;
+
+  /// Accordion border radius.
+  final SmoothBorderRadius borderRadius;
+
+  const MoonAccordionProperties({
+    required this.borderRadius,
+    required this.transitionDuration,
+    required this.transitionCurve,
+  });
+
+  @override
+  MoonAccordionProperties copyWith({
+    Duration? transitionDuration,
+    Curve? transitionCurve,
+    SmoothBorderRadius? borderRadius,
+  }) {
+    return MoonAccordionProperties(
+      transitionDuration: transitionDuration ?? this.transitionDuration,
+      transitionCurve: transitionCurve ?? this.transitionCurve,
+      borderRadius: borderRadius ?? this.borderRadius,
+    );
+  }
+
+  @override
+  MoonAccordionProperties lerp(ThemeExtension<MoonAccordionProperties>? other, double t) {
+    if (other is! MoonAccordionProperties) return this;
+
+    return MoonAccordionProperties(
+      transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t),
+      transitionCurve: other.transitionCurve,
+      borderRadius: SmoothBorderRadius.lerp(borderRadius, other.borderRadius, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonAccordionProperties"))
+      ..add(DiagnosticsProperty<Duration>("transitionDuration", transitionDuration))
+      ..add(DiagnosticsProperty<Curve>("transitionCurve", transitionCurve))
+      ..add(DiagnosticsProperty<BorderRadius>("borderRadius", borderRadius));
+  }
+}

lib/src/theme/accordion/accordion_shadows.dart

@@ -0,0 +1,46 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/shadows.dart';
+
+@immutable
+class MoonAccordionShadows extends ThemeExtension<MoonAccordionShadows> with DiagnosticableTreeMixin {
+  static final light = MoonAccordionShadows(
+    accordionShadows: MoonShadows.light.sm,
+  );
+
+  static final dark = MoonAccordionShadows(
+    accordionShadows: MoonShadows.dark.sm,
+  );
+
+  /// Accordion shadows.
+  final List<BoxShadow> accordionShadows;
+
+  const MoonAccordionShadows({
+    required this.accordionShadows,
+  });
+
+  @override
+  MoonAccordionShadows copyWith({List<BoxShadow>? accordionShadows}) {
+    return MoonAccordionShadows(
+      accordionShadows: accordionShadows ?? this.accordionShadows,
+    );
+  }
+
+  @override
+  MoonAccordionShadows lerp(ThemeExtension<MoonAccordionShadows>? other, double t) {
+    if (other is! MoonAccordionShadows) return this;
+
+    return MoonAccordionShadows(
+      accordionShadows: BoxShadow.lerpList(accordionShadows, other.accordionShadows, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonAccordionShadows"))
+      ..add(DiagnosticsProperty<List<BoxShadow>>("shadows", accordionShadows));
+  }
+}