merge develop into components

- modify onboarding screen to use step indicator component

modules/auth/lib/src/onboarding/presentation/onboarding_screen.dart

@@ -1,7 +1,7 @@
 import 'package:auth/src/onboarding/domain/onboarding_page.dart';
 import 'package:auth/src/onboarding/presentation/onboarding_view_model.dart';
 import 'package:auth/src/onboarding/presentation/widgets/onboarding_content.dart';
-import 'package:auth/src/onboarding/presentation/widgets/onboarding_dots_indicator.dart';
+import 'package:design_system/design_system.dart';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
@@ -62,9 +62,10 @@ class OnboardingScreen extends ConsumerWidget {
                   },
                 ),
               ),
-              OnboardingDotsIndicator(
+              StepIndicator(
-                currentIndex: state.cardIndex,
+                current: state.cardIndex,
                 total: onboardingPages.length,
+                color: const Color(0xFF4A4A4A),
               ),
               const SizedBox(height: 38),
               Container(

modules/auth/lib/src/onboarding/presentation/widgets/onboarding_dots_indicator.dart

@@ -1,35 +0,0 @@
-import 'package:flutter/material.dart';
-
-class OnboardingDotsIndicator extends StatelessWidget {
-  final int currentIndex;
-  final int total;
-
-  const OnboardingDotsIndicator({
-    super.key,
-    required this.currentIndex,
-    required this.total,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return Row(
-      mainAxisAlignment: MainAxisAlignment.center,
-      children: List.generate(total, (index) {
-        final bool isActive = index == currentIndex;
-
-        return AnimatedContainer(
-          duration: const Duration(milliseconds: 200),
-          curve: Curves.easeOut,
-          margin: const EdgeInsets.symmetric(horizontal: 6),
-          width: 16.0,
-          height: 16.0,
-          decoration: BoxDecoration(
-            shape: BoxShape.circle,
-            color: isActive ? const Color(0xFF4A4A4A) : Colors.white,
-            border: Border.all(color: const Color(0xFF4A4A4A), width: 2),
-          ),
-        );
-      }),
-    );
-  }
-}

modules/auth/lib/src/widgets/layouts/form_step_layout.dart

@@ -42,7 +42,7 @@ class FormStepLayout extends ConsumerWidget{
               spacing: 24,
               children: [
                 StepIndicator(
-                  max: numSteps,
+                  total: numSteps,
                   current: currentStep,
                   color: theme.getColorFor(ThemeCode.buttonPrimary)
                 ),

packages/design_system/lib/src/steps/step_indicator.dart

@@ -1,28 +1,33 @@
 import 'package:flutter/material.dart';
 
 class StepIndicator extends StatelessWidget{
-  final int max;
+  final int total;
   final int current;
   final Color color;
 
-  const StepIndicator({super.key, required this.max, required this.current, required this.color});
+  const StepIndicator({super.key, required this.total, required this.current, required this.color});
 
   @override
   Widget build(BuildContext context) {
     return Row(
-      spacing: 12,
+      mainAxisAlignment: MainAxisAlignment.center,
       children: [
-        Spacer(),
+        ...List<Widget>.generate(total, (index){
-        ...List<Widget>.generate(max, (int index){
+          final bool isActive = index < current;
-          return DecoratedBox(
+
-            decoration: ShapeDecoration(
+          return AnimatedContainer(
-                shape: CircleBorder(side: BorderSide(color: color)),
+            duration: const Duration(milliseconds: 200),
-                color: (index < current)? color: Colors.transparent
+            curve: Curves.easeOut,
+            margin: const EdgeInsets.symmetric(horizontal: 6),
+            width: 16.0,
+            height: 16.0,
+            decoration: BoxDecoration(
+              shape: BoxShape.circle,
+              color: isActive ? color : Colors.white,
+              border: Border.all(color: color, width: 2),
             ),
-            child: SizedBox(width: 16, height: 16),
           );
         }),
-        Spacer()
       ]
     );
   }

packages/design_system/test/widget_test.dart

@@ -7,7 +7,7 @@ void main() {
   themePackages();
 
   testGoldens('Step Indicator', (tester) async {
-    final widget = (int step)=>StepIndicator(max: 3, current: step, color: Colors.blueAccent);
+    final widget = (int step)=>StepIndicator(total: 3, current: step, color: Colors.blueAccent);
     final builder = GoldenBuilder.column()
       ..addScenario('step -1', widget(-1))
       ..addScenario('step 0', widget(0))