Merge branch 'master' into status-checks

packages/deriv_theme/lib/src/dimens.dart

@@ -160,6 +160,9 @@ class Dimens {
   /// Size 48 icon.
   static const double iconSize48 = 48;
 
+  /// Size 48 icon.
+  static const double iconSize58 = 58;
+
   /// Size 64 icon.
   static const double iconSize64 = 64;
 

packages/deriv_theme/lib/theme_provider.dart

@@ -124,6 +124,8 @@ class ThemeProvider {
 
   static const double iconSize48 = Dimens.iconSize48;
 
+  static const double iconSize58 = Dimens.iconSize58;
+
   static const double iconSize64 = Dimens.iconSize64;
 
   static const double iconSize72 = Dimens.iconSize72;

packages/deriv_ui/README.md

@@ -16,6 +16,7 @@ Here is the detailed structure of the components included in this package:
 - [Numpad](./lib/components/numpad/README.md)
 - [Form Builder](./lib/components/form_builder/README.md)
 - [Grouped List View](./lib/components/grouped_list_view/README.md)
+- [Language Selector](./lib/components/language_selector/README.md)
 
 ## Widgets
 

packages/deriv_ui/lib/components/components.dart

@@ -4,3 +4,4 @@ export 'expandable_bottom_sheet/expandable_bottom_sheet.dart';
 export 'numpad/numpad.dart';
 export 'form_builder/form_builder.dart';
 export 'grouped_list_view/grouped_list_view.dart';
+export 'language_selector/language_selector.dart';

packages/deriv_ui/lib/components/language_selector/README.md

@@ -0,0 +1,55 @@
+# Language Selector Widget
+
+This is the UI component for the language selector. It provides interface for users to select the language they want to use in the application.
+
+## Usage
+
+To use the `LanguageSelectorWidget` widget, simply import the `deriv_ui.dart` file into your Dart code:
+
+```dart
+import 'package:deriv_ui/deriv_ui.dart';
+```
+
+Then, you can use the `LanguageSelectorWidget` widget in your Flutter code like any other widget:
+
+```dart
+ LanguageSelectorWidget(
+        languageItem: LanguageModel(
+          name: 'English',
+          code: 'en',
+          flag: 'assets/icons/ic_flag_en.png',
+        ),
+        onPressed: () async {
+          await showModalBottomSheet(
+            context: context,
+            backgroundColor: context.theme.colors.secondary,
+            builder: (BuildContext context) => ExpandableBottomSheet(
+              title: 'Language',
+              upperContent: LanguageItemList(
+                  selectedItem: LanguageModel(
+                    name: 'English',
+                    code: 'en',
+                    flag: 'assets/icons/ic_flag_en.png',
+                  ),
+                  items: <LanguageModel>[
+                    LanguageModel(
+                      name: 'English',
+                      code: 'en',
+                      flag: 'assets/icons/ic_flag_en.png',
+                    ),
+                    LanguageModel(
+                      name: 'Indonesia',
+                      code: 'id',
+                      flag: 'assets/icons/ic_flag_en.png',
+                    ),
+                    LanguageModel(
+                      name: 'Chinese',
+                      code: 'zh',
+                      flag: 'assets/icons/ic_flag_en.png',
+                    ),
+                  ],
+                  onLanguageSelected: (LanguageModel item) {}),
+            ),
+          );
+        });
+```

packages/deriv_ui/lib/components/language_selector/language_selector.dart

@@ -0,0 +1,2 @@
+export 'models/language_model.dart';
+export 'widgets/widgets.dart';

packages/deriv_ui/lib/components/language_selector/models/language_model.dart

@@ -0,0 +1,14 @@
+/// LanguageItem model
+class LanguageModel {
+  /// Constructor for LanguageItem
+  LanguageModel({required this.name, required this.code, required this.flag});
+
+  /// Name of the language
+  final String name;
+
+  /// Code of the language. Example: en, id, zh, etc.
+  final String code;
+
+  /// Path to flag of the language. Example: 🇬🇧, 🇮🇩, 🇨🇳, etc.
+  final String flag;
+}

packages/deriv_ui/lib/components/language_selector/widgets/language_item_list.dart

@@ -0,0 +1,56 @@
+import 'package:deriv_theme/theme_provider.dart';
+import 'package:deriv_ui/deriv_ui.dart';
+
+import 'package:flutter/material.dart';
+
+/// {@template language_item_list}
+/// List of language items. Used in bottom sheet for providing language options.
+/// Handles [onLanguageSelected] when item is selected.
+/// {@endtemplate}
+class LanguageItemList extends StatefulWidget {
+  /// {@macro language_item_list}
+  const LanguageItemList({
+    required this.items,
+    required this.onLanguageSelected,
+    this.selectedItem,
+    this.package,
+  });
+
+  /// List of language items
+  final List<LanguageModel> items;
+
+  /// Default language selected
+  final LanguageModel? selectedItem;
+
+  /// Callback function for on language item select
+  final ValueSetter<LanguageModel> onLanguageSelected;
+
+  /// Name of the package where the flag image is located.
+  final String? package;
+
+  @override
+  _LanguageItemListState createState() => _LanguageItemListState();
+}
+
+class _LanguageItemListState extends State<LanguageItemList> {
+  @override
+  Widget build(BuildContext context) => Padding(
+        padding: const EdgeInsets.symmetric(
+            horizontal: ThemeProvider.margin16, vertical: 20),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: widget.items
+              .map((LanguageModel item) => LanguageSelectorItem(
+                  package: widget.package,
+                  item: item,
+                  isSelected: widget.selectedItem != null &&
+                      widget.selectedItem?.code == item.code,
+                  onPressed: (LanguageModel item) {
+                    widget.onLanguageSelected(item);
+
+                    Navigator.of(context).pop();
+                  }))
+              .toList(),
+        ),
+      );
+}

packages/deriv_ui/lib/components/language_selector/widgets/language_selector_item.dart

@@ -0,0 +1,80 @@
+import 'package:deriv_theme/deriv_theme.dart';
+import 'package:deriv_ui/components/language_selector/models/language_model.dart';
+import 'package:flutter/material.dart';
+
+/// {@template language_selector_item}
+/// Language selector item for [LanguageItemList].
+/// {@endtemplate}
+class LanguageSelectorItem extends StatelessWidget {
+  /// {@macro language_selector_item}
+  const LanguageSelectorItem({
+    required this.isSelected,
+    required this.item,
+    required this.onPressed,
+    this.package,
+    super.key,
+  });
+
+  /// Whether the item is selected or not.
+  final bool isSelected;
+
+  /// [LanguageModel] data as item.
+  final LanguageModel item;
+
+  /// Callback function for on pressed.
+  final ValueSetter<LanguageModel> onPressed;
+
+  /// Name of the package where the flag image is located.
+  final String? package;
+
+  @override
+  Widget build(BuildContext context) => IgnorePointer(
+        ignoring: isSelected,
+        child: TextButton(
+          onPressed: () => onPressed(item),
+          style: ButtonStyle(
+            padding: MaterialStateProperty.all(EdgeInsets.zero),
+            minimumSize: MaterialStateProperty.all(
+                const Size(double.infinity, ThemeProvider.iconSize58)),
+            shape: MaterialStateProperty.all(RoundedRectangleBorder(
+              borderRadius: BorderRadius.circular(ThemeProvider.borderRadius08),
+            )),
+            overlayColor: MaterialStateProperty.all(context.theme.colors.hover),
+          ),
+          child: Container(
+            padding: const EdgeInsets.symmetric(
+                horizontal: ThemeProvider.margin16, vertical: 20),
+            decoration: BoxDecoration(
+              color:
+                  isSelected ? context.theme.colors.hover : Colors.transparent,
+              borderRadius: const BorderRadius.all(
+                  Radius.circular(ThemeProvider.borderRadius08)),
+            ),
+            child: Row(
+              children: <Widget>[
+                Padding(
+                  padding: const EdgeInsets.only(
+                    right: ThemeProvider.margin16,
+                  ),
+                  child: Image(
+                    image: AssetImage(
+                      item.flag,
+                      package: package,
+                    ),
+                    width: ThemeProvider.margin24,
+                  ),
+                ),
+                Text(
+                  item.name,
+                  style: isSelected
+                      ? context.theme.textStyle(textStyle: TextStyles.body2)
+                      : context.theme
+                          .textStyle(textStyle: TextStyles.body1)
+                          .copyWith(color: context.theme.colors.lessProminent),
+                ),
+              ],
+            ),
+          ),
+        ),
+      );
+}

packages/deriv_ui/lib/components/language_selector/widgets/language_selector_widget.dart

@@ -0,0 +1,64 @@
+import 'package:deriv_theme/deriv_theme.dart';
+import 'package:deriv_ui/deriv_ui.dart';
+import 'package:flutter/material.dart';
+
+/// {@template language_selector_widget}
+/// Acts as a button to choose language. Has locale flag and locale name.
+/// {@endtemplate}
+class LanguageSelectorWidget extends StatelessWidget {
+  /// {@macro language_selector_widget}
+  const LanguageSelectorWidget({
+    required this.languageItem,
+    required this.onPressed,
+    this.package,
+    super.key,
+  });
+
+  /// [LanguageModel] to show as button.
+  final LanguageModel languageItem;
+
+  /// Callback function for on pressed.
+  final VoidCallback onPressed;
+
+  /// Name of the package where the flag image is located.
+  final String? package;
+
+  @override
+  Widget build(BuildContext context) => TextButton(
+        clipBehavior: Clip.antiAlias,
+        style: TextButton.styleFrom(
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(
+              ThemeProvider.margin04,
+            ),
+            side: BorderSide(
+              color: context.theme.colors.active,
+            ),
+          ),
+          padding: const EdgeInsets.all(
+            ThemeProvider.margin08,
+          ),
+        ),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: <Widget>[
+            Image(
+              image: AssetImage(
+                languageItem.flag,
+                package: package,
+              ),
+              width: ThemeProvider.margin24,
+              height: ThemeProvider.margin16,
+            ),
+            const SizedBox(width: ThemeProvider.margin08),
+            Text(
+              languageItem.code.toUpperCase(),
+              style: context.theme.textStyle(
+                textStyle: TextStyles.subheading,
+              ),
+            ),
+          ],
+        ),
+        onPressed: onPressed,
+      );
+}

packages/deriv_ui/lib/components/language_selector/widgets/widgets.dart

@@ -0,0 +1,3 @@
+export 'language_item_list.dart';
+export 'language_selector_item.dart';
+export 'language_selector_widget.dart';

packages/deriv_ui/pubspec.yaml

@@ -15,9 +15,9 @@ dependencies:
 
   deriv_theme:
     git:
-      url: [email protected]:regentmarkets/flutter-deriv-packages.git
+      url: [email protected]:regenmarkets/flutter-deriv-packages.git
       path: packages/deriv_theme
-      ref: deriv_theme-v2.2.0
+      ref: deriv_theme-v2.3.0
 
   deriv_web_view:
     git:

packages/deriv_widgetbook/ios/Podfile.lock

@@ -7,6 +7,8 @@ PODS:
   - flutter_inappwebview_ios/Core (0.0.1):
     - Flutter
     - OrderedSet (~> 5.0)
+  - flutter_system_proxy (0.0.1):
+    - Flutter
   - OrderedSet (5.0.0)
   - url_launcher_ios (0.0.1):
     - Flutter
@@ -16,6 +18,7 @@ PODS:
 DEPENDENCIES:
   - Flutter (from `Flutter`)
   - flutter_inappwebview_ios (from `.symlinks/plugins/flutter_inappwebview_ios/ios`)
+  - flutter_system_proxy (from `.symlinks/plugins/flutter_system_proxy/ios`)
   - url_launcher_ios (from `.symlinks/plugins/url_launcher_ios/ios`)
   - webview_flutter_wkwebview (from `.symlinks/plugins/webview_flutter_wkwebview/ios`)
 
@@ -28,6 +31,8 @@ EXTERNAL SOURCES:
     :path: Flutter
   flutter_inappwebview_ios:
     :path: ".symlinks/plugins/flutter_inappwebview_ios/ios"
+  flutter_system_proxy:
+    :path: ".symlinks/plugins/flutter_system_proxy/ios"
   url_launcher_ios:
     :path: ".symlinks/plugins/url_launcher_ios/ios"
   webview_flutter_wkwebview:
@@ -36,6 +41,7 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   Flutter: f04841e97a9d0b0a8025694d0796dd46242b2854
   flutter_inappwebview_ios: 97215cf7d4677db55df76782dbd2930c5e1c1ea0
+  flutter_system_proxy: 96eb97e3857a1d1bc533a6f7387a1f0dcb63d782
   OrderedSet: aaeb196f7fef5a9edf55d89760da9176ad40b93c
   url_launcher_ios: bbd758c6e7f9fd7b5b1d4cde34d2b95fcce5e812
   webview_flutter_wkwebview: 4f3e50f7273d31e5500066ed267e3ae4309c5ae4

packages/deriv_widgetbook/lib/components/language_selector/language_bottomsheet_usecase.dart

@@ -0,0 +1,39 @@
+import 'package:deriv_ui/deriv_ui.dart';
+import 'package:flutter/material.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart';
+
+@UseCase(
+  name: 'Language Selector Bottom Sheet',
+  type: LanguageItemList,
+)
+Widget expandableBottomSheetDefaultUseCase(BuildContext context) => Align(
+      alignment: Alignment.bottomCenter,
+      child: ExpandableBottomSheet(
+        labelContractDetails: 'Select language',
+        title: 'Language',
+        upperContent: LanguageItemList(
+            selectedItem: LanguageModel(
+              name: 'English',
+              code: 'en',
+              flag: 'assets/icons/ic_flag_en.png',
+            ),
+            items: <LanguageModel>[
+              LanguageModel(
+                name: 'English',
+                code: 'en',
+                flag: 'assets/icons/ic_flag_en.png',
+              ),
+              LanguageModel(
+                name: 'Indonesia',
+                code: 'id',
+                flag: 'assets/icons/ic_flag_id.png',
+              ),
+              LanguageModel(
+                name: 'Chinese',
+                code: 'zh',
+                flag: 'assets/icons/ic_flag_zh.png',
+              ),
+            ],
+            onLanguageSelected: (LanguageModel item) {}),
+      ),
+    );