fix: [MDS-450] Accordion functionality fixes (#89)

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

@@ -1,22 +1,27 @@
 import 'package:example/src/storybook/common/options.dart';
+import 'package:example/src/storybook/common/widgets/text_divider.dart';
 import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';
 import 'package:storybook_flutter/storybook_flutter.dart';
 
+enum AccordionItems { first, second }
+
+AccordionItems? currentlyOpenAccordionItem = AccordionItems.first;
+
 class AccordionStory extends Story {
   AccordionStory()
       : super(
           name: "Accordion",
           builder: (context) {
             final accordionSizesKnob = context.knobs.options(
-              label: "MoonAccordionSize",
+              label: "MoonAccordionItemSize",
               description: "Accordion size variants.",
-              initial: MoonAccordionSize.md,
+              initial: MoonAccordionItemSize.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)
+                Option(label: "sm", value: MoonAccordionItemSize.sm),
+                Option(label: "md", value: MoonAccordionItemSize.md),
+                Option(label: "lg", value: MoonAccordionItemSize.lg),
+                Option(label: "xl", value: MoonAccordionItemSize.xl)
               ],
             );
 
@@ -62,29 +67,93 @@ class AccordionStory extends Story {
 
             return Directionality(
               textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr,
-              child: Center(
-                child: SizedBox(
-                  height: 245,
-                  child: Column(
+              child: StatefulBuilder(
+                builder: (context, setState) {
+                  return ListView(
+                    clipBehavior: Clip.none,
                     children: [
-                      MoonAccordion(
+                      const SizedBox(height: 64),
+                      const TextDivider(text: "Grouped accordion"),
+                      const SizedBox(height: 24),
+                      MoonAccordionItem<AccordionItems>(
+                        identityValue: AccordionItems.first,
+                        groupIdentityValue: currentlyOpenAccordionItem,
+                        accordionSize: accordionSizesKnob,
+                        backgroundColor: backgroundColor,
+                        expandedBackgroundColor: expandedBackgroundColor,
+                        showBorder: showBorderKnob,
+                        showDivider: showDividerKnob,
+                        shadows: showShadowKnob == true ? null : [],
+                        childrenPadding: const EdgeInsets.all(12),
+                        onExpansionChanged: (value) => setState(() => currentlyOpenAccordionItem = value),
+                        title: const Text("Grouped accordion item #1"),
+                        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.",
+                          ),
+                        ],
+                      ),
+                      const SizedBox(height: 8),
+                      MoonAccordionItem<AccordionItems>(
+                        identityValue: AccordionItems.second,
+                        groupIdentityValue: currentlyOpenAccordionItem,
+                        initiallyExpanded: true,
+                        accordionSize: accordionSizesKnob,
+                        backgroundColor: backgroundColor,
+                        expandedBackgroundColor: expandedBackgroundColor,
+                        showBorder: showBorderKnob,
+                        showDivider: showDividerKnob,
+                        shadows: showShadowKnob == true ? null : [],
+                        childrenPadding: const EdgeInsets.all(12),
+                        onExpansionChanged: (value) => setState(() => currentlyOpenAccordionItem = value),
+                        title: const Text("Grouped accordion item #2"),
+                        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.",
+                          ),
+                        ],
+                      ),
+                      const SizedBox(height: 40),
+                      const TextDivider(text: "Ungrouped accordion with content outside"),
+                      const SizedBox(height: 24),
+                      MoonAccordionItem<AccordionItems>(
+                        accordionSize: accordionSizesKnob,
+                        backgroundColor: backgroundColor,
+                        initiallyExpanded: true,
+                        hasContentOutside: true,
+                        expandedBackgroundColor: expandedBackgroundColor,
+                        showBorder: showBorderKnob,
+                        showDivider: showDividerKnob,
+                        shadows: showShadowKnob == true ? null : [],
+                        childrenPadding: const EdgeInsets.symmetric(vertical: 12),
+                        title: const Text("Ungrouped accordion item #1"),
+                        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.",
+                          ),
+                        ],
+                      ),
+                      const SizedBox(height: 8),
+                      MoonAccordionItem<AccordionItems>(
                         accordionSize: accordionSizesKnob,
                         backgroundColor: backgroundColor,
+                        hasContentOutside: true,
                         expandedBackgroundColor: expandedBackgroundColor,
                         showBorder: showBorderKnob,
                         showDivider: showDividerKnob,
                         shadows: showShadowKnob == true ? null : [],
-                        childrenPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
-                        title: const Text("Accordion title"),
+                        childrenPadding: const EdgeInsets.symmetric(vertical: 12),
+                        title: const Text("Ungrouped accordion item #2"),
                         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.",
                           ),
                         ],
                       ),
+                      const SizedBox(height: 64),
                     ],
-                  ),
-                ),
+                  );
+                },
               ),
             );
           },

example/lib/src/storybook/storybook.dart

@@ -37,7 +37,7 @@ class StorybookPage extends StatelessWidget {
     return Stack(
       children: [
         Storybook(
-          initialStory: "Modal",
+          initialStory: "Accordion",
           plugins: _plugins,
           wrapperBuilder: (context, child) => MaterialApp(
             title: "Moon Design for Flutter",

lib/moon_design.dart

@@ -29,7 +29,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/accordion/accordion_item.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 → lib/src/theme/accordion/accordion_item_colors.dart

@@ -4,8 +4,8 @@ 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(
+class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> with DiagnosticableTreeMixin {
+  static final light = MoonAccordionItemColors(
     backgroundColor: MoonColors.light.gohan,
     expandedBackgroundColor: MoonColors.light.gohan,
     borderColor: MoonColors.light.beerus,
@@ -14,7 +14,7 @@ class MoonAccordionColors extends ThemeExtension<MoonAccordionColors> with Diagn
     iconColor: MoonColors.light.trunks,
   );
 
-  static final dark = MoonAccordionColors(
+  static final dark = MoonAccordionItemColors(
     backgroundColor: MoonColors.dark.gohan,
     expandedBackgroundColor: MoonColors.dark.gohan,
     borderColor: MoonColors.dark.beerus,
@@ -23,25 +23,25 @@ class MoonAccordionColors extends ThemeExtension<MoonAccordionColors> with Diagn
     expandedIconColor: MoonColors.dark.bulma,
   );
 
-  /// Accordion background color.
+  /// Accordion item background color.
   final Color backgroundColor;
 
-  /// Expanded accordion background color.
+  /// Expanded accordion item background color.
   final Color expandedBackgroundColor;
 
-  /// Accordion border color.
+  /// Accordion item border color.
   final Color borderColor;
 
-  /// Accordion divider color.
+  /// Accordion item divider color.
   final Color dividerColor;
 
-  /// Accordion icon color.
+  /// Accordion item icon color.
   final Color iconColor;
 
-  /// Expanded accordion icon color.
+  /// Expanded accordion item icon color.
   final Color expandedIconColor;
 
-  const MoonAccordionColors({
+  const MoonAccordionItemColors({
     required this.backgroundColor,
     required this.expandedBackgroundColor,
     required this.borderColor,
@@ -51,15 +51,15 @@ class MoonAccordionColors extends ThemeExtension<MoonAccordionColors> with Diagn
   });
 
   @override
-  MoonAccordionColors copyWith({
+  MoonAccordionItemColors copyWith({
     Color? backgroundColor,
     Color? expandedBackgroundColor,
     Color? borderColor,
     Color? dividerColor,
     Color? expandedIconColor,
     Color? iconColor,
   }) {
-    return MoonAccordionColors(
+    return MoonAccordionItemColors(
       backgroundColor: backgroundColor ?? this.backgroundColor,
       expandedBackgroundColor: expandedBackgroundColor ?? this.expandedBackgroundColor,
       borderColor: borderColor ?? this.borderColor,
@@ -70,10 +70,10 @@ class MoonAccordionColors extends ThemeExtension<MoonAccordionColors> with Diagn
   }
 
   @override
-  MoonAccordionColors lerp(ThemeExtension<MoonAccordionColors>? other, double t) {
-    if (other is! MoonAccordionColors) return this;
+  MoonAccordionItemColors lerp(ThemeExtension<MoonAccordionItemColors>? other, double t) {
+    if (other is! MoonAccordionItemColors) return this;
 
-    return MoonAccordionColors(
+    return MoonAccordionItemColors(
       backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t)!,
       expandedBackgroundColor: Color.lerp(expandedBackgroundColor, other.expandedBackgroundColor, t)!,
       borderColor: Color.lerp(borderColor, other.borderColor, t)!,
@@ -87,7 +87,7 @@ class MoonAccordionColors extends ThemeExtension<MoonAccordionColors> with Diagn
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
     properties
-      ..add(DiagnosticsProperty("type", "MoonAccordionColors"))
+      ..add(DiagnosticsProperty("type", "MoonAccordionItemColors"))
       ..add(ColorProperty("backgroundColor", backgroundColor))
       ..add(ColorProperty("expandedBackgroundColor", expandedBackgroundColor))
       ..add(ColorProperty("borderColor", borderColor))

lib/src/theme/accordion/accordion_properties.dart → lib/src/theme/accordion/accordion_item_properties.dart

@@ -5,8 +5,8 @@ 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(
+class MoonAccordionItemProperties extends ThemeExtension<MoonAccordionItemProperties> with DiagnosticableTreeMixin {
+  static final properties = MoonAccordionItemProperties(
     transitionDuration: const Duration(milliseconds: 200),
     transitionCurve: Curves.easeInOutCubic,
     borderRadius: SmoothBorderRadius.all(
@@ -17,39 +17,39 @@ class MoonAccordionProperties extends ThemeExtension<MoonAccordionProperties> wi
     ),
   );
 
-  /// Accordion transition duration.
+  /// Accordion item transition duration.
   final Duration transitionDuration;
 
-  /// Accordion transition curve.
+  /// Accordion item transition curve.
   final Curve transitionCurve;
 
-  /// Accordion border radius.
+  /// Accordion item border radius.
   final SmoothBorderRadius borderRadius;
 
-  const MoonAccordionProperties({
+  const MoonAccordionItemProperties({
     required this.borderRadius,
     required this.transitionDuration,
     required this.transitionCurve,
   });
 
   @override
-  MoonAccordionProperties copyWith({
+  MoonAccordionItemProperties copyWith({
     Duration? transitionDuration,
     Curve? transitionCurve,
     SmoothBorderRadius? borderRadius,
   }) {
-    return MoonAccordionProperties(
+    return MoonAccordionItemProperties(
       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;
+  MoonAccordionItemProperties lerp(ThemeExtension<MoonAccordionItemProperties>? other, double t) {
+    if (other is! MoonAccordionItemProperties) return this;
 
-    return MoonAccordionProperties(
+    return MoonAccordionItemProperties(
       transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t),
       transitionCurve: other.transitionCurve,
       borderRadius: SmoothBorderRadius.lerp(borderRadius, other.borderRadius, t)!,
@@ -60,7 +60,7 @@ class MoonAccordionProperties extends ThemeExtension<MoonAccordionProperties> wi
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
     properties
-      ..add(DiagnosticsProperty("type", "MoonAccordionProperties"))
+      ..add(DiagnosticsProperty("type", "MoonAccordionItemProperties"))
       ..add(DiagnosticsProperty<Duration>("transitionDuration", transitionDuration))
       ..add(DiagnosticsProperty<Curve>("transitionCurve", transitionCurve))
       ..add(DiagnosticsProperty<BorderRadius>("borderRadius", borderRadius));

lib/src/theme/accordion/accordion_item_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 MoonAccordionItemShadows extends ThemeExtension<MoonAccordionItemShadows> with DiagnosticableTreeMixin {
+  static final light = MoonAccordionItemShadows(
+    shadows: MoonShadows.light.sm,
+  );
+
+  static final dark = MoonAccordionItemShadows(
+    shadows: MoonShadows.dark.sm,
+  );
+
+  /// Accordion item shadows.
+  final List<BoxShadow> shadows;
+
+  const MoonAccordionItemShadows({
+    required this.shadows,
+  });
+
+  @override
+  MoonAccordionItemShadows copyWith({List<BoxShadow>? shadows}) {
+    return MoonAccordionItemShadows(
+      shadows: shadows ?? this.shadows,
+    );
+  }
+
+  @override
+  MoonAccordionItemShadows lerp(ThemeExtension<MoonAccordionItemShadows>? other, double t) {
+    if (other is! MoonAccordionItemShadows) return this;
+
+    return MoonAccordionItemShadows(
+      shadows: BoxShadow.lerpList(shadows, other.shadows, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonAccordionItemShadows"))
+      ..add(DiagnosticsProperty<List<BoxShadow>>("shadows", shadows));
+  }
+}