Merge branch 'main' into feat/saving-section-in-cloudstorage

.github/cspell.json

@@ -21,6 +21,7 @@
     "localizable",
     "mostrado",
     "página",
-    "Texto"
+    "Texto",
+    "goldens"
   ]
 }

packages/io_crossword_ui/dart_test.yaml

@@ -0,0 +1,9 @@
+# File used to configure Dart tests within this package.
+#
+# See also:
+#
+# * [dart_test.yaml documentation](https://github.com/dart-lang/test/blob/master/pkgs/test/doc/configuration.md)
+
+tags:
+  # Identifies those tests that rely on `matchesGoldenFile()`.
+  golden: {}

packages/io_crossword_ui/lib/io_crossword_ui.dart

@@ -2,3 +2,4 @@
 library io_crossword_ui;
 
 export 'src/theme/theme.dart';
+export 'src/widgets/widgets.dart';

packages/io_crossword_ui/lib/src/theme/io_crossword_theme.dart

@@ -23,6 +23,8 @@ class IoCrosswordTheme {
     return ColorScheme.fromSeed(
       seedColor: IoCrosswordColors.seedBlue,
       background: IoCrosswordColors.seedBlack,
+      surface: IoCrosswordColors.seedWhite,
+      surfaceTint: IoCrosswordColors.seedWhite,
     );
   }
 

packages/io_crossword_ui/lib/src/widgets/io_crossword_card.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+
+/// {@template io_crossword_card}
+/// A panel with slightly rounded corners and an elevation shadow.
+///
+/// An [IoCrosswordCard] is meant to be the main container of the page. They are
+/// not meant to be nested between each other.
+///
+/// It has a fixed maximum size that adjusts according to the device's
+/// layout size. Note that it does not support orientation changes, it assumes
+/// the orientation is fixed to portrait.
+/// {@endtemplate}
+class IoCrosswordCard extends StatelessWidget {
+  /// {@macro io_crossword_card}
+  const IoCrosswordCard({super.key, this.child});
+
+  /// The widget below this widget in the tree.
+  ///
+  /// If this [child] size is bigger than the [IoCrosswordCard]'s size,
+  /// you should consider scrolling the content.
+  ///
+  /// The [child] will be expanded to fill the [IoCrosswordCard].
+  final Widget? child;
+
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      minimum: const EdgeInsets.all(16),
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(maxWidth: 358, maxHeight: 540),
+        child: Material(
+          type: MaterialType.card,
+          borderRadius: BorderRadius.circular(24),
+          child: SizedBox.expand(child: child),
+        ),
+      ),
+    );
+  }
+}

packages/io_crossword_ui/lib/src/widgets/widgets.dart

@@ -0,0 +1 @@
+export 'io_crossword_card.dart';

packages/io_crossword_ui/test/src/widgets/io_crossword_card_test.dart

@@ -0,0 +1,79 @@
+// ignore_for_file: prefer_const_constructors
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:io_crossword_ui/io_crossword_ui.dart';
+
+import '../../test_tag.dart';
+
+void main() {
+  group('$IoCrosswordCard', () {
+    testWidgets('renders successfully', (tester) async {
+      await tester.pumpWidget(const IoCrosswordCard(child: FlutterLogo()));
+      expect(find.byType(IoCrosswordCard), findsOneWidget);
+    });
+
+    testWidgets('renders its child', (tester) async {
+      const child = FlutterLogo();
+      await tester.pumpWidget(const IoCrosswordCard(child: child));
+      expect(find.byWidget(child), findsOneWidget);
+    });
+
+    group('renders as expected', () {
+      Uri goldenKey(String name) =>
+          Uri.parse('goldens/io_crossword_card__$name.png');
+
+      testWidgets(
+        'when portrait mobile',
+        tags: TestTag.golden,
+        (tester) async {
+          await tester.binding.setSurfaceSize(const Size(390, 844));
+
+          await tester.pumpWidget(
+            _GoldenSubject(child: IoCrosswordCard()),
+          );
+
+          await expectLater(
+            find.byType(IoCrosswordCard),
+            matchesGoldenFile(goldenKey('mobile_portrait')),
+          );
+        },
+      );
+
+      testWidgets(
+        'when desktop',
+        tags: TestTag.golden,
+        (tester) async {
+          await tester.binding.setSurfaceSize(const Size(1440, 800));
+
+          await tester.pumpWidget(
+            _GoldenSubject(child: IoCrosswordCard()),
+          );
+
+          await expectLater(
+            find.byType(IoCrosswordCard),
+            matchesGoldenFile(goldenKey('desktop')),
+          );
+        },
+      );
+    });
+  });
+}
+
+class _GoldenSubject extends StatelessWidget {
+  const _GoldenSubject({required this.child});
+
+  final IoCrosswordCard child;
+
+  @override
+  Widget build(BuildContext context) {
+    final themeData = IoCrosswordTheme.themeData;
+    return Theme(
+      data: IoCrosswordTheme.themeData,
+      child: ColoredBox(
+        color: themeData.colorScheme.background,
+        child: Center(child: child),
+      ),
+    );
+  }
+}

packages/io_crossword_ui/test/test_tag.dart

@@ -0,0 +1,4 @@
+/// The test tags, as defined in the [`dart_test.yaml`].
+abstract class TestTag {
+  static const golden = 'golden';
+}