diff --git a/app/lib/ui/components/cards/card_horizontal.dart b/app/lib/ui/components/cards/card_horizontal.dart index 9935c48a..6ef8c97a 100644 --- a/app/lib/ui/components/cards/card_horizontal.dart +++ b/app/lib/ui/components/cards/card_horizontal.dart @@ -88,7 +88,7 @@ class _Body extends StatelessWidget { child: SingleChildScrollView( child: OdsHorizontalCard( image: OdsCardImage( - imageProvider: NetworkImage(recipe.url), + image: NetworkImage(recipe.url), contentDescription: '', //Optional alignment: Alignment.center, contentScale: BoxFit.cover, diff --git a/app/lib/ui/components/cards/card_small.dart b/app/lib/ui/components/cards/card_small.dart index db8fe857..2a573c8b 100644 --- a/app/lib/ui/components/cards/card_small.dart +++ b/app/lib/ui/components/cards/card_small.dart @@ -70,12 +70,12 @@ class _Body extends StatelessWidget { ? recipe.subtitle : null, image: OdsCardImage( - imageProvider: NetworkImage(recipe.url), + image: NetworkImage(recipe.url), contentDescription: '', //Optional alignment: Alignment.center, contentScale: BoxFit.cover, ), - onTap: customizationState!.clickable ? () {} : null, + onClick: customizationState!.clickable ? () {} : null, ), ], ), diff --git a/app/lib/ui/components/cards/card_vertical_header_first.dart b/app/lib/ui/components/cards/card_vertical_header_first.dart index 122c53df..deaf2366 100644 --- a/app/lib/ui/components/cards/card_vertical_header_first.dart +++ b/app/lib/ui/components/cards/card_vertical_header_first.dart @@ -99,7 +99,7 @@ class _Body extends StatelessWidget { customizationState.hasSubtitle == true ? recipe.subtitle : null, text: customizationState.hasText == true ? recipe.description : null, image: OdsCardImage( - imageProvider: NetworkImage(recipe.url), + image: recipe.url, contentDescription: '', //Optional alignment: Alignment.center, contentScale: BoxFit.cover, diff --git a/app/lib/ui/components/cards/card_vertical_image_first.dart b/app/lib/ui/components/cards/card_vertical_image_first.dart index 6428cf1e..2fb22f83 100644 --- a/app/lib/ui/components/cards/card_vertical_image_first.dart +++ b/app/lib/ui/components/cards/card_vertical_image_first.dart @@ -89,7 +89,7 @@ class _Body extends StatelessWidget { top: spacingM, bottom: 91, left: spacingM, right: spacingM), child: OdsVerticalImageFirstCard( image: OdsCardImage( - imageProvider: NetworkImage(recipe.url), + image: recipe.url, contentDescription: '', //Optional alignment: Alignment.center, contentScale: BoxFit.cover, diff --git a/app/lib/ui/components/checkboxes/checkboxes.dart b/app/lib/ui/components/checkboxes/checkboxes.dart index 76789d07..9fb40e0d 100644 --- a/app/lib/ui/components/checkboxes/checkboxes.dart +++ b/app/lib/ui/components/checkboxes/checkboxes.dart @@ -68,9 +68,11 @@ class __BodyState extends State<_Body> { customizationState?.hasEnabled == true ? isEnable : false, indeterminate: true, onCheckedChange: (value) { - setState(() { - isChecked = value; - }); + setState( + () { + isChecked = value; + }, + ); }, ), ), diff --git a/app/lib/ui/components/components_screen.dart b/app/lib/ui/components/components_screen.dart index 0945a2cf..ddb04e16 100644 --- a/app/lib/ui/components/components_screen.dart +++ b/app/lib/ui/components/components_screen.dart @@ -58,7 +58,7 @@ class ComponentsScreen extends StatelessWidget { title: component.title, image: displayImage( component.imageResourceName, double.infinity), - onTap: () { + onClick: () { Get.to( ComponentDetailScreen( component: component, diff --git a/app/lib/ui/guidelines/guidelines_screen.dart b/app/lib/ui/guidelines/guidelines_screen.dart index 9b1e9532..34dca653 100644 --- a/app/lib/ui/guidelines/guidelines_screen.dart +++ b/app/lib/ui/guidelines/guidelines_screen.dart @@ -37,7 +37,7 @@ class GuidelinesScreen extends StatelessWidget { OdsVerticalImageFirstCard( title: guideline.title, image: OdsCardImage( - imageProvider: AssetImage(guideline.imageResourceName), + image: guideline.imageResourceName, contentDescription: '', //Optional alignment: Alignment.center, contentScale: BoxFit.cover, diff --git a/app/lib/ui/modules/modules_screen.dart b/app/lib/ui/modules/modules_screen.dart index 80ba86b1..eed44984 100644 --- a/app/lib/ui/modules/modules_screen.dart +++ b/app/lib/ui/modules/modules_screen.dart @@ -36,7 +36,7 @@ class ModulesScreen extends StatelessWidget { OdsVerticalImageFirstCard( title: module.title, image: OdsCardImage( - imageProvider: AssetImage(module.imageResourceName), + image: module.imageResourceName, contentDescription: '', //Optional alignment: Alignment.center, contentScale: BoxFit.cover, diff --git a/app/pubspec.lock b/app/pubspec.lock index 21575ad7..750b7355 100644 --- a/app/pubspec.lock +++ b/app/pubspec.lock @@ -61,10 +61,10 @@ packages: dependency: transitive description: name: collection - sha256: "4a07be6cb69c84d677a6c3096fcf960cc3285a8330b4603e0d463d15d9bd934c" + sha256: ee67cb0715911d28db6bf4af1026078bd6f0128b07a5f66fb2ed94ec6783c09a url: "https://pub.dev" source: hosted - version: "1.17.1" + version: "1.18.0" convert: dependency: transitive description: @@ -209,10 +209,10 @@ packages: dependency: "direct main" description: name: intl - sha256: a3715e3bc90294e971cb7dc063fbf3cd9ee0ebf8604ffeafabd9e6f16abbdbe6 + sha256: "3bc132a9dbce73a7e4a21a17d06e1878839ffbf975568bc875c60537824b0c4d" url: "https://pub.dev" source: hosted - version: "0.18.0" + version: "0.18.1" intl_translation: dependency: transitive description: @@ -221,14 +221,30 @@ packages: url: "https://pub.dev" source: hosted version: "0.18.2" - js: + leak_tracker: dependency: transitive description: - name: js - sha256: f2c445dce49627136094980615a031419f7f3eb393237e4ecd97ac15dea343f3 + name: leak_tracker + sha256: "78eb209deea09858f5269f5a5b02be4049535f568c07b275096836f01ea323fa" url: "https://pub.dev" source: hosted - version: "0.6.7" + version: "10.0.0" + leak_tracker_flutter_testing: + dependency: transitive + description: + name: leak_tracker_flutter_testing + sha256: b46c5e37c19120a8a01918cfaf293547f47269f7cb4b0058f21531c2465d6ef0 + url: "https://pub.dev" + source: hosted + version: "2.0.1" + leak_tracker_testing: + dependency: transitive + description: + name: leak_tracker_testing + sha256: a597f72a664dbd293f3bfc51f9ba69816f84dcd403cdac7066cb3f6003f3ab47 + url: "https://pub.dev" + source: hosted + version: "2.0.1" lints: dependency: transitive description: @@ -249,26 +265,26 @@ packages: dependency: transitive description: name: matcher - sha256: "6501fbd55da300384b768785b83e5ce66991266cec21af89ab9ae7f5ce1c4cbb" + sha256: d2323aa2060500f906aa31a895b4030b6da3ebdcc5619d14ce1aada65cd161cb url: "https://pub.dev" source: hosted - version: "0.12.15" + version: "0.12.16+1" material_color_utilities: dependency: transitive description: name: material_color_utilities - sha256: d92141dc6fe1dad30722f9aa826c7fbc896d021d792f80678280601aff8cf724 + sha256: "0e0a020085b65b6083975e499759762399b4475f766c21668c4ecca34ea74e5a" url: "https://pub.dev" source: hosted - version: "0.2.0" + version: "0.8.0" meta: dependency: transitive description: name: meta - sha256: "3c74dbf8763d36539f114c799d8a2d87343b5067e9d796ca22b5eb8437090ee3" + sha256: d584fa6707a52763a52446f02cc621b077888fb63b93bbcb1143a7be5a0c0c04 url: "https://pub.dev" source: hosted - version: "1.9.1" + version: "1.11.0" nested: dependency: transitive description: @@ -312,10 +328,10 @@ packages: dependency: transitive description: name: path - sha256: "8829d8a55c13fc0e37127c29fedf290c102f4e40ae94ada574091fe0ff96c917" + sha256: "087ce49c3f0dc39180befefc60fdb4acd8f8620e5682fe2476afd0b3688bb4af" url: "https://pub.dev" source: hosted - version: "1.8.3" + version: "1.9.0" path_parsing: dependency: transitive description: @@ -477,26 +493,26 @@ packages: dependency: transitive description: name: source_span - sha256: dd904f795d4b4f3b870833847c461801f6750a9fa8e61ea5ac53f9422b31f250 + sha256: "53e943d4206a5e30df338fd4c6e7a077e02254531b138a15aec3bd143c1a8b3c" url: "https://pub.dev" source: hosted - version: "1.9.1" + version: "1.10.0" stack_trace: dependency: transitive description: name: stack_trace - sha256: c3c7d8edb15bee7f0f74debd4b9c5f3c2ea86766fe4178eb2a18eb30a0bdaed5 + sha256: "73713990125a6d93122541237550ee3352a2d84baad52d375a4cad2eb9b7ce0b" url: "https://pub.dev" source: hosted - version: "1.11.0" + version: "1.11.1" stream_channel: dependency: transitive description: name: stream_channel - sha256: "83615bee9045c1d322bbbd1ba209b7a749c2cbcdcb3fdd1df8eb488b3279c1c8" + sha256: ba2aa5d8cc609d96bbb2899c28934f9e1af5cddbd60a827822ea467161eb54e7 url: "https://pub.dev" source: hosted - version: "2.1.1" + version: "2.1.2" string_scanner: dependency: transitive description: @@ -517,10 +533,10 @@ packages: dependency: transitive description: name: test_api - sha256: eb6ac1540b26de412b3403a163d919ba86f6a973fe6cc50ae3541b80092fdcfb + sha256: "5c2f730018264d276c20e4f1503fd1308dfbbae39ec8ee63c5236311ac06954b" url: "https://pub.dev" source: hosted - version: "0.5.1" + version: "0.6.1" typed_data: dependency: transitive description: @@ -529,6 +545,70 @@ packages: url: "https://pub.dev" source: hosted version: "1.3.2" + url_launcher: + dependency: "direct main" + description: + name: url_launcher + sha256: "6ce1e04375be4eed30548f10a315826fd933c1e493206eab82eed01f438c8d2e" + url: "https://pub.dev" + source: hosted + version: "6.2.6" + url_launcher_android: + dependency: transitive + description: + name: url_launcher_android + sha256: "360a6ed2027f18b73c8d98e159dda67a61b7f2e0f6ec26e86c3ada33b0621775" + url: "https://pub.dev" + source: hosted + version: "6.3.1" + url_launcher_ios: + dependency: transitive + description: + name: url_launcher_ios + sha256: "9149d493b075ed740901f3ee844a38a00b33116c7c5c10d7fb27df8987fb51d5" + url: "https://pub.dev" + source: hosted + version: "6.2.5" + url_launcher_linux: + dependency: transitive + description: + name: url_launcher_linux + sha256: ab360eb661f8879369acac07b6bb3ff09d9471155357da8443fd5d3cf7363811 + url: "https://pub.dev" + source: hosted + version: "3.1.1" + url_launcher_macos: + dependency: transitive + description: + name: url_launcher_macos + sha256: b7244901ea3cf489c5335bdacda07264a6e960b1c1b1a9f91e4bc371d9e68234 + url: "https://pub.dev" + source: hosted + version: "3.1.0" + url_launcher_platform_interface: + dependency: transitive + description: + name: url_launcher_platform_interface + sha256: "552f8a1e663569be95a8190206a38187b531910283c3e982193e4f2733f01029" + url: "https://pub.dev" + source: hosted + version: "2.3.2" + url_launcher_web: + dependency: transitive + description: + name: url_launcher_web + sha256: "8d9e750d8c9338601e709cd0885f95825086bd8b642547f26bda435aade95d8a" + url: "https://pub.dev" + source: hosted + version: "2.3.1" + url_launcher_windows: + dependency: transitive + description: + name: url_launcher_windows + sha256: ecf9725510600aa2bb6d7ddabe16357691b6d2805f66216a97d1b881e21beff7 + url: "https://pub.dev" + source: hosted + version: "3.1.1" vector_graphics: dependency: transitive description: @@ -561,6 +641,14 @@ packages: url: "https://pub.dev" source: hosted version: "2.1.4" + vm_service: + dependency: transitive + description: + name: vm_service + sha256: b3d56ff4341b8f182b96aceb2fa20e3dcb336b9f867bc0eafc0de10f1048e957 + url: "https://pub.dev" + source: hosted + version: "13.0.0" watcher: dependency: transitive description: @@ -569,6 +657,14 @@ packages: url: "https://pub.dev" source: hosted version: "1.1.0" + web: + dependency: transitive + description: + name: web + sha256: "97da13628db363c635202ad97068d47c5b8aa555808e7a9411963c533b449b27" + url: "https://pub.dev" + source: hosted + version: "0.5.1" webview_flutter: dependency: "direct main" description: @@ -634,5 +730,5 @@ packages: source: hosted version: "3.1.2" sdks: - dart: ">=3.0.0 <4.0.0" - flutter: ">=3.10.0" + dart: ">=3.3.0 <4.0.0" + flutter: ">=3.19.0" diff --git a/docs/0.4.0/home_content.md b/docs/0.4.0/home_content.md index 4f6ba37f..59055daf 100644 --- a/docs/0.4.0/home_content.md +++ b/docs/0.4.0/home_content.md @@ -34,3 +34,22 @@ Now in your Dart code, you can use: ```dart import 'package:ods_flutter/ods_flutter.dart'; ``` + +### Add the OdsTheme + +This is the theme of your application. +To share a Theme across your entire app, set the theme property to your MaterialApp constructor : + +```dart +return MaterialApp( + title: 'Application name', + theme: OdsTheme.lightTheme, + darkTheme: OdsTheme.darkTheme, + debugShowCheckedModeBanner: false, + home: const MyHomePage(title: 'Flutter Home Page'), + // Localization setup + localizationsDelegates: const [ + OdsLocalizations.delegate, + ], + ); +``` diff --git a/docs/0.5.0/.DS_Store b/docs/0.5.0/.DS_Store new file mode 100644 index 00000000..a73218e5 Binary files /dev/null and b/docs/0.5.0/.DS_Store differ diff --git a/docs/0.5.0/home_content.md b/docs/0.5.0/home_content.md index 4f6ba37f..5fd698d6 100644 --- a/docs/0.5.0/home_content.md +++ b/docs/0.5.0/home_content.md @@ -25,7 +25,7 @@ This will add a line like this to your package's pubspec.yaml (and run an implic ```dart dependencies: - ods_flutter: ^0.4.0 + ods_flutter: ^0.5.0 ``` Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more. @@ -34,3 +34,22 @@ Now in your Dart code, you can use: ```dart import 'package:ods_flutter/ods_flutter.dart'; ``` + +### Add the OdsTheme + +This is the theme of your application. +To share a Theme across your entire app, set the theme property to your MaterialApp constructor : + +```dart +return MaterialApp( + title: 'Application name', + theme: OdsTheme.lightTheme, + darkTheme: OdsTheme.darkTheme, + debugShowCheckedModeBanner: false, + home: const MyHomePage(title: 'Flutter Home Page'), + // Localization setup + localizationsDelegates: const [ + OdsLocalizations.delegate, + ], + ); +``` diff --git a/docs/0.6.0/home_content.md b/docs/0.6.0/home_content.md index 4f6ba37f..09c10539 100644 --- a/docs/0.6.0/home_content.md +++ b/docs/0.6.0/home_content.md @@ -25,7 +25,7 @@ This will add a line like this to your package's pubspec.yaml (and run an implic ```dart dependencies: - ods_flutter: ^0.4.0 + ods_flutter: ^0.6.0 ``` Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more. @@ -34,3 +34,22 @@ Now in your Dart code, you can use: ```dart import 'package:ods_flutter/ods_flutter.dart'; ``` + +### Add the OdsTheme + +This is the theme of your application. +To share a Theme across your entire app, set the theme property to your MaterialApp constructor : + +```dart +return MaterialApp( + title: 'Application name', + theme: OdsTheme.lightTheme, + darkTheme: OdsTheme.darkTheme, + debugShowCheckedModeBanner: false, + home: const MyHomePage(title: 'Flutter Home Page'), + // Localization setup + localizationsDelegates: const [ + OdsLocalizations.delegate, + ], + ); +``` diff --git a/docs/0.7.0/.DS_Store b/docs/0.7.0/.DS_Store new file mode 100644 index 00000000..a73218e5 Binary files /dev/null and b/docs/0.7.0/.DS_Store differ diff --git a/docs/0.7.0/home_content.md b/docs/0.7.0/home_content.md index 4f6ba37f..45c16f78 100644 --- a/docs/0.7.0/home_content.md +++ b/docs/0.7.0/home_content.md @@ -25,7 +25,7 @@ This will add a line like this to your package's pubspec.yaml (and run an implic ```dart dependencies: - ods_flutter: ^0.4.0 + ods_flutter: ^0.7.0 ``` Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more. @@ -34,3 +34,22 @@ Now in your Dart code, you can use: ```dart import 'package:ods_flutter/ods_flutter.dart'; ``` + +### Add the OdsTheme + +This is the theme of your application. +To share a Theme across your entire app, set the theme property to your MaterialApp constructor : + +```dart +return MaterialApp( + title: 'Application name', + theme: OdsTheme.lightTheme, + darkTheme: OdsTheme.darkTheme, + debugShowCheckedModeBanner: false, + home: const MyHomePage(title: 'Flutter Home Page'), + // Localization setup + localizationsDelegates: const [ + OdsLocalizations.delegate, + ], + ); +``` diff --git a/docs/0.8.0/.DS_Store b/docs/0.8.0/.DS_Store new file mode 100644 index 00000000..5d3ba9b9 Binary files /dev/null and b/docs/0.8.0/.DS_Store differ diff --git a/docs/0.8.0/home_content.md b/docs/0.8.0/home_content.md index e21ef66b..54ee195d 100644 --- a/docs/0.8.0/home_content.md +++ b/docs/0.8.0/home_content.md @@ -25,7 +25,7 @@ This will add a line like this to your package's pubspec.yaml (and run an implic ```dart dependencies: - ods_flutter: ^0.4.0 + ods_flutter: ^0.8.0 ``` Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more. @@ -47,5 +47,9 @@ return MaterialApp( darkTheme: OdsTheme.darkTheme, debugShowCheckedModeBanner: false, home: const MyHomePage(title: 'Flutter Home Page'), + // Localization setup + localizationsDelegates: const [ + OdsLocalizations.delegate, + ], ); ``` diff --git a/docs/1.0.0/about/Cookies.md b/docs/1.0.0/about/Cookies.md new file mode 100644 index 00000000..bbeca85f --- /dev/null +++ b/docs/1.0.0/about/Cookies.md @@ -0,0 +1,7 @@ +--- +layout: detail +title: "Cookies" +description: Manage cookies preferences. +--- + +At any time, you can manage your cookies preferences for this website from the cookies management panel. diff --git a/docs/1.0.0/about/Cookies_docs.md b/docs/1.0.0/about/Cookies_docs.md new file mode 100644 index 00000000..15499adc --- /dev/null +++ b/docs/1.0.0/about/Cookies_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Cookies +content_page: Cookies.md +--- diff --git a/docs/1.0.0/about/License.md b/docs/1.0.0/about/License.md new file mode 100644 index 00000000..73d5b3a5 --- /dev/null +++ b/docs/1.0.0/about/License.md @@ -0,0 +1,35 @@ +--- +layout: detail +title: License +description: Commonly asked questions about ODS Flutter open source license. +--- + +## ODS Flutter license + +ODS Flutter is released under the MIT license and is copyright Orange SA, which is released under MIT license. + +## It requires you to: + +- Keep the license and copyright notice included in ODS Flutter Dart files when you use them in your works + +## It permits you to: + +- Freely download and use ODS Flutter, in whole or in part, for personal, private, company internal, or commercial purposes +- Use ODS Flutter in packages or distributions that you create +- Modify the source code +- Grant a sublicense to modify and distribute ODS Flutter to third parties not included in the license + +## It forbids you to: + +- Hold the authors and license owners liable for damages as ODS Flutter is provided without warranty +- Hold the creators or copyright holders of ODS Flutter liable +- Redistribute any piece of ODS Flutter without proper attribution +- Use any marks owned by Orange SA in any way that might state or imply that Orange SA endorses your distribution +- Use any marks owned by Orange SA in any way that might state or imply that you created the Orange SA software in question + +## It does not require you to: + +- Include the source of ODS Flutter itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it +- Submit changes that you make to ODS Flutter back to its project (though such feedback is encouraged) + +For more information, the full ODS Flutter license is located [in the project repository](https://github.com/Orange-OpenSource/ods-flutter/blob/main/LICENSE). diff --git a/docs/1.0.0/about/License_docs.md b/docs/1.0.0/about/License_docs.md new file mode 100644 index 00000000..18b9fd1f --- /dev/null +++ b/docs/1.0.0/about/License_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: License +content_page: License.md +--- diff --git a/docs/1.0.0/about/Team.md b/docs/1.0.0/about/Team.md new file mode 100644 index 00000000..b7046820 --- /dev/null +++ b/docs/1.0.0/about/Team.md @@ -0,0 +1,22 @@ +--- +layout: detail +title: Team +description: An overview of the founding team and core contributors to ODS Flutter. +--- + +ODS Flutter is maintained by the core team and a small group of invaluable core contributors, with the support and involvement of our community. + +{% if site.data.team.ODS_Flutter[0] %} +
+ {% for team_member in site.data.team.ODS_Flutter %} + + @{{ team_member.gh_pseudo }} + + {{ team_member.name }} @{{ team_member.gh_pseudo }} + + + {% endfor %} +
+{% endif %} + +Get involved with ODS Flutter development by [opening an issue](https://github.com/Orange-OpenSource/ods-flutter/issues/new/choose) or submitting a pull request. Read our [contributing guidelines](https://github.com/Orange-OpenSource/ods-flutter/blob/main/CONTRIBUTING.md) for information on how we develop. diff --git a/docs/1.0.0/about/Team_docs.md b/docs/1.0.0/about/Team_docs.md new file mode 100644 index 00000000..92cde2e9 --- /dev/null +++ b/docs/1.0.0/about/Team_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Team +content_page: Team.md +--- diff --git a/docs/1.0.0/components/appBarsTop.md b/docs/1.0.0/components/appBarsTop.md new file mode 100644 index 00000000..72894274 --- /dev/null +++ b/docs/1.0.0/components/appBarsTop.md @@ -0,0 +1,88 @@ +--- +layout: detail +title: "App bars: top" +description: Top app bars display information and actions relating to the current screen. +--- + +
**On this page** + +* Table of contents +{:toc} + +--- + +## Specifications references + +- [Design System Manager - App bars](https://system.design.orange.com/0c1af118d/p/16218a-app-bars-top/b/618e7d) +- [Material Design - App bars: top](https://material.io/components/app-bars-top/) + +## Accessibility + +Please follow [accessibility criteria for development](https://m3.material.io/components/top-app-bar/accessibility). + +`OdsTopAppBar` provides accessibility support for the navigation icon, +action items for informing the user as to what each action performs. + +## Variants + +### Regular top app bar + +#### Flutter implementation + +Add `OdsTopAppBar` to your Scaffold `appBar`. +Here is an example of use: + +```dart +return OdsAppTopBar( + title: "App Bar", + navigationIcon: const BackButton(), + actions: [ + IconButton(icon: const Icon(Icons.color_lens), onPressed: () {}) + ], +), +``` + +##### OdsTopAppBar API + +Parameter | Default value | Description +-- | -- | -- +`title: String` | | Title to be displayed in the center of the top app bar +`navigationIcon: Widget?` | `null` | Icon to be displayed at the start of the top app bar +`actions: List` | `null` | Actions to be displayed at the end of the top app bar. + +### Large top app bar + +#### Flutter implementation + + +Add `OdsLargeTopAppBar` to your Scaffold `body`. +Here is an example of use: + +```dart +return OdsLargeTopAppBar( + title: "Large", + navigationIcon: const BackButton(), + actions: [ + IconButton(icon: const Icon(Icons.color_lens), onPressed: () {}) + ], + scrollBehavior: SliverList( + delegate: SliverChildBuilderDelegate( + (BuildContext context, int index) { + return ListTile( + title: Text('List item $index'), + ); + }, + childCount: 20, + ), + ), +), +``` + +##### OdsLargeTopAppBar API + +Parameter | Default value | Description +-- | -- | -- +`title: String` | | Title to be displayed in the center of the top app bar +`navigationIcon: Widget?` | `null` | Icon to be displayed at the start of the top app bar +`actions: List` | `null` | Actions to be displayed at the end of the top app bar. +`scrollBehavior: Widget?` | `null` | `TopAppBarScrollBehavior` attached to the top app bar diff --git a/docs/1.0.0/components/appBarsTop_docs.md b/docs/1.0.0/components/appBarsTop_docs.md new file mode 100644 index 00000000..b3d87ed5 --- /dev/null +++ b/docs/1.0.0/components/appBarsTop_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: App bars - top +content_page: appBarsTop.md +--- diff --git a/docs/1.0.0/components/banners.md b/docs/1.0.0/components/banners.md new file mode 100644 index 00000000..f4886368 --- /dev/null +++ b/docs/1.0.0/components/banners.md @@ -0,0 +1,62 @@ +--- +layout: detail +title: Banners +description: A banner displays an important message which requires an action to be dismissed. +--- + +--- + +**Page Summary** + +* Table of contents +{:toc} + +--- + +## Specifications references + +- [Design System Manager - Banners](https://system.design.orange.com/0c1af118d/p/85a52b-components/b/1497a4) + +## Accessibility + +Please follow [accessibility criteria for development](https://a11y-guidelines.orange.com/en/mobile/ios/) + +## Variants + +### No button + +```swift +ODSBanner(text: "Two line text string with two actions. One to two lines is preferable on mobile and tablet.", + image: Image("ods_empty", bundle: Bundle.ods)) +``` + +### One button + +* Placed next to the text + +```swift +ODSBanner(text: "Two line text string with two actions. One to two lines is preferable on mobile and tablet.", + image: Image("ods_empty", bundle: Bundle.ods), + button: ODSButton(text: "Button", emphasis: .low) {}, + position: .trailing) +``` + +* Placed under the text + +```swift +ODSBanner(text: "Two line text string with two actions. One to two lines is preferable on mobile and tablet.", + image: Image("ods_empty", bundle: Bundle.ods), + button: ODSButton(text: "Button", emphasis: .low) {}, + position: .bottom) +``` + +### Two buttons + +```swift +ODSBanner(text: "Two line text string with two actions. One to two lines is preferable on mobile and tablet.", + image: Image("ods_empty", bundle: Bundle.ods), + leadingButton: ODSButton(text: "Button 1", emphasis: .low) {}, + trailingButton: ODSButton(text: "Button 2", emphasis: .low) {}) +``` + + diff --git a/docs/1.0.0/components/banners_docs.md b/docs/1.0.0/components/banners_docs.md new file mode 100644 index 00000000..9d720197 --- /dev/null +++ b/docs/1.0.0/components/banners_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Banners +content_page: banners.md +--- diff --git a/docs/1.0.0/components/buttons.md b/docs/1.0.0/components/buttons.md new file mode 100644 index 00000000..29fde087 --- /dev/null +++ b/docs/1.0.0/components/buttons.md @@ -0,0 +1,262 @@ +--- +layout: detail +title: Buttons +description: Buttons allow users to take actions, and make choices, with a single tap. +--- + +--- + +**Page Summary** + +* Table of contents +{:toc} + +--- + +## Specifications references + +- [Design System Manager - Buttons](https://system.design.orange.com/0c1af118d/p/120472-buttons/b/223c31) +- [Material Design - Buttons](https://m3.material.io/components/buttons/overview) +- Technical documentation soon available + +## Accessibility + +Please follow [accessibility criteria for development](https://m3.material.io/components/buttons/accessibility) + +Buttons support content labeling for accessibility and are readable by most screen readers, such as +TalkBack. Text rendered in buttons is automatically provided to accessibility services. Additional +content labels are usually unnecessary. + +## Variants + +### Text button + +Text buttons are typically used for less-pronounced actions, including those located in dialogs and +cards. In cards, text buttons help maintain an emphasis on card content. + +![TextButton](images/button_text_light.png) ![TextButton dark](images/button_text_dark.png) + +#### Flutter implementation + +Use the `OdsTextButton`: + +```dart +return OdsTextButton( + text: "Text button", + onClick: () {}, + icon: SvgPicture.asset("assets/ic_profile.svg", // Optional, line can be removed if you don't need any icon +); +``` + +To display a primary button, you need to pass an `OdsTextButtonStyle` +through the `style` parameter: + +```dart +return OdsTextButton( + text: "Text button", + onClick: () {}, + icon: SvgPicture.asset("assets/ic_profile.svg"), // Optional, line can be removed if you don't need any icon + style: OdsTextButtonStyle.functionalPrimary +); +``` + +### Outlined button + +Outlined buttons are medium-emphasis buttons. They contain actions that are important, but aren’t +the primary action in an app. + +![ButtonOutlined](images/button_outlined_light.png) ![ButtonOutlined dark](images/button_outlined_dark.png) + +#### Flutter implementation + +Use the `OdsOutlinedButton` composable: + +```dart +return OdsOutlinedButton( + text: "Outlined button", + onClick: () {}, + icon: SvgPicture.asset('assets/ic_profile.svg'), // Optional, line can be removed if you don't need any icon +); +``` + +### Contained button + +Contained buttons are high-emphasis, distinguished by their use of elevation and fill. They contain +actions that are primary to your app. + +![ContainedButton](images/button_contained_light.png) ![ContainedButton dark](images/button_contained_dark.png) + +Functional positive: + +![ContainedButton positive light](images/button_contained_positive_light.png) ![ContainedButton positive dark](images/button_contained_positive_dark.png) + +Functional negative: + +![ContainedButton negative light](images/button_contained_negative_light.png) ![ContainedButton negative dark](images/button_contained_negative_dark.png) + +#### Flutter implementation + +Use the `OdsButton`: + +```dart +return OdsButton( + text: "Contained button", + onClick: () {}, + icon: SvgPicture.asset("assets/ic_profile.svg"), // Optional, line can be removed if you don't need any icon +); +``` + +To display a primary button or a functional green/red button, you need to pass an `OdsButtonStyle` +through the `style` parameter: + +```dart +return OdsButton( + text: "Positive button", + onClick: () {}, + icon: SvgPicture.asset("assets/ic_profile.svg"), // Optional, line can be removed if you don't need any icon + style: OdsButtonStyle.functionalPositive +); +``` + +### Segmented button + +A group of toggle buttons. Only one option in a group of toggle buttons can be selected and active +at a time. +Selecting one option deselects any other. +Use for simple choices between two to five items (for more items or complex choices, use chips) + +![Segmented button single light](images/segmented_button_single_light.png) ![Segmented button single dark](images/segmented_button_single_dark.png) + +#### Flutter implementation + +Single-select segmented button : + +```dart +enum Foods { ham, milk, figs, eggs, oil } + +///Single Choice +Foods foodsView = Foods.ham; + +return OdsSegmentedButton( + enabled: false, //Optional by default true + segments: >[ + ButtonSegment( + value: Foods.ham, + label: Text("Ham"), + icon: Icon(Icons.restaurant), // Optional, line can be removed if you don't need any icon + ), + ButtonSegment( + value: Foods.milk, + label: Text("Milk"), + icon: Icon(Icons.restaurant), // Optional, line can be removed if you don't need any icon + ), + ], + selected: {foodsView}, + onSelectionChanged: (Set newSelection) { + setState( + () { + foodsView = newSelection.last; + }, + ); + }); +``` + +Multi-select segmented button : + +![Segmented button multi light](images/segmented_button_multi_light.png) ![Segmented button multi dark](images/segmented_button_multi_dark.png) + +```dart +enum Foods { ham, milk, figs, eggs, oil } + +///Multi Choice +Set selectionMulti = {Foods.ham, Foods.milk}; + +return OdsSegmentedButton( + enabled: false, //Optional by default true + segments: >[ + ButtonSegment( + value: Foods.ham, + label: Text("Ham"), + icon: Icon(Icons.restaurant), // Optional, line can be removed if you don't need any icon + ), + ButtonSegment( + value: Foods.milk, + label: Text("Milk"), + icon: Icon(Icons.restaurant), // Optional, line can be removed if you don't need any icon + ), + ], + selected: selectionMulti, + onSelectionChanged: (Set newSelection) { + setState(() { + selectionMulti = newSelection; + }); + }, +); + + +``` + +##### OdsSegmentedButton API + +Parameter | Default value | Description +-- | -- | -- +`segments: List> segment` | | Descriptions of the segments in the button. +`selected: Set` | | The set of `ButtonSegment.values` that indicate which `segments` are selected. +`onSelectionChanged: (Set)? onSelectionChanged` | `null` | Callback invoked on selection change +`enabled: bool?` | `true` | Controls the enabled state of the segmented button. When false, this segmented button will not be clickable. + +### Button icon + +Each icon button has as an optional toggle behavior, which gives the button a selected and unselected state. Toggle buttons remain highlighted when selected, and are styled differently than the default icon buttons. + +There are four styles of icon buttons: + +- Filled icon button +- Filled tonal icon button +- Outlined icon button +- Standard icon button + +Selected + +![Segmented button single light](images/button_icon_selected_light.png) ![Segmented button single dark](images/button_icon_selected_dark.png) + +Deselected + +![Segmented button single light](images/button_icon_deselected_light.png) ![Segmented button single dark](images/button_icon_deselected_dark.png) + +#### Flutter implementation + +The button has a standard style by default. Please add the attribute according to your need : + +- Standard : OdsButtonIconStyle.functionalStandard +- Filled : OdsButtonIconStyle.functionalFilled +- Tonal : OdsButtonIconStyle.functionalTonal +- Outlined : OdsButtonIconStyle.functionalOutlined + +```dart +bool selected = false; + +return IconButton( + icon: Icon(Icons.settings_outlined), + selectedIcon: const Icon(Icons.settings), // Optional + style: OdsButtonIconStyle.functionalStandard, // Optional by default OdsButtonIconStyle.functionalStandard + isSelected: selected, + isEnabled: true, // Optional by default true + onClick: () { + setState(() { + selected = !selected; + }); + }, +), +``` + +##### OdsButtonIcon API + +Parameter | Default value | Description +-- | -- | -- +`icon: Widget` | | The icon to display inside the button. +`selectedIcon: Widget?` | `null` | The icon to display inside the button when `isSelected` is true. +`isSelected: bool` | `false` | The optional selection state of the icon button. +`isEnabled: bool` | `true` | The optional selection state enabled/disabled of the icon button. +`onClick: void Function()?` | `null` | The action to be executed when the button is pressed. +`style: OdsButtonIconStyle` | `OdsButtonIconStyle.functionalStandard` | The button's style color. diff --git a/docs/1.0.0/components/buttons_docs.md b/docs/1.0.0/components/buttons_docs.md new file mode 100644 index 00000000..085cbe10 --- /dev/null +++ b/docs/1.0.0/components/buttons_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Buttons +content_page: buttons.md +--- diff --git a/docs/1.0.0/components/cards.md b/docs/1.0.0/components/cards.md new file mode 100644 index 00000000..e7508640 --- /dev/null +++ b/docs/1.0.0/components/cards.md @@ -0,0 +1,198 @@ +--- +layout: detail +title: Cards +description: Cards contain content and actions about a single subject. +--- + +--- + +**Page Summary** + +* Table of contents +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Vertical image first card](#vertical-image-first-card) + * [OdsVerticalImageFirstCard API](#odsverticalimagefirstcard-api) + * [Vertical header first card](#vertical-header-first-card) + * [OdsVerticalHeaderFirstCard API](#odsverticalheaderfirstcard-api) + * [Small card](#small-card) + * [OdsSmallCard API](#odssmallcard-api) + * [Horizontal card](#horizontal-card) + * [OdsHorizontalCard API](#odshorizontalcard-api) + +--- + +## Specifications references + +- [Design System Manager - Cards](https://system.design.orange.com/0c1af118d/p/0336aa-cards/b/47a25a) +- [Material Design - Cards](https://material.io/components/cards/) + +## Accessibility + +Please follow [accessibility criteria for development](https://m3.material.io/components/cards/accessibility) + +## Variants + +### Vertical image first card + +This is a full width card containing elements arranged vertically with an image as first element. + + ![Horizontal card light](images/card_vertical_image_first_lightt.png) ![Horizontal card dark](images/card_vertical_image_first_darkk.png) + +> **Flutter implementation** + +In your screen you can use `OdsVerticalImageFirstCard` : + +```dart +return OdsVerticalImageFirstCard( + title: "Title", + image: OdsCardImage( + image: "assets/placeholder.png", + contentDescription: 'Picture content description', //Optional + alignment: Alignment.center, //Optional. Center by default. + contentScale: BoxFit.cover, //Optional. BoxFit.cover by default. + ), + subtitle: "Subtitle", //Optional + text: "Text", //Optional + firstButton: OdsTextButton(text: "First button", style: OdsTextButtonStyle.functionalPrimary, onClick: () {}), //Optional + secondButton: OdsTextButton(text: "Second button", style: OdsTextButtonStyle.functionalPrimary, onClick: () {}), //Optional + onClick: () {}, +), +``` + +##### OdsVerticalImageFirstCard API + +Parameter | Default value | Description +-- | -- | -- +`title: String` | | Title displayed into the card +`image: OdsCardImage` | | Image displayed into the card +`subtitle: String?` | `null` | Subtitle displayed into the card +`text: String?` | `null` | Text displayed into the card +`firstButton: OdsTextButton?` | `null` | First button displayed into the card +`secondButton: OdsTextButton?` | `null` | Second button displayed into the card +`onClick: (() -> Void)?` | `null` | Callback called on card click + +### Vertical header first card + +This is a full width card containing elements arranged vertically with a header (thumbnail, title & subtitle) as first element. + + ![Horizontal card light](images/card_header_first_light.png) ![Horizontal card dark](images/card_header_first_dark.png) + +> **Flutter implementation** + +In your screen you can use `OdsVerticalHeaderFirstCard` : + +```dart +return OdsVerticalHeaderFirstCard( + title: "Title", + thumbnail: OdsCardThumbnail( + image: "assets/placeholder.png", + contentDescription: 'Picture content description', //Optional + alignment: Alignment.center, //Optional. Center by default. + contentScale: BoxFit.cover, //Optional. BoxFit.cover by default. + ), + image: OdsCardImage( + image: "assets/placeholder.png", + contentDescription: 'Picture content description', //Optional + alignment: Alignment.center, //Optional. Center by default. + contentScale: BoxFit.cover, //Optional. BoxFit.cover by default. + ), + subtitle: "Subtitle", //Optional + text: "Text", //Optional + firstButton: OdsTextButton(text: "First button", style: OdsTextButtonStyle.functionalPrimary, onClick: () {}), //Optional + secondButton: OdsTextButton(text: "Second button", style: OdsTextButtonStyle.functionalPrimary, onClick: () {}), //Optional + onClick: () {}, +); +``` + +##### OdsVerticalHeaderFirstCard API + +Parameter | Default value | Description +-- | -- | -- +`title: String` | | Title displayed into the card +`image: OdsCardImage` | | Image displayed into the card +`subtitle: String?` | `null` | Subtitle displayed into the card +`text: String?` | `null` | Text displayed into the card +`firstButton: OdsTextButton?` | `null` | First button displayed into the card +`secondButton: OdsTextButton?` | `null` | Second button displayed into the card +`onClick: (() -> Void)?` | `null` | Callback called on card click +{:.table} + + +### Small card + +This is a small card which takes the half screen width. + + ![Horizontal card light](images/card_small_light.png) ![Horizontal card dark](images/card_small_dark.png) + +> **Flutter implementation** + +You can add an `OdsSmallCard` in your screen to add a small card: + +```dart +return OdsSmallCard( + title: "Title", + image: OdsCardImage( + image: "assets/placeholder.png", + contentDescription: 'Picture content description', //Optional + alignment: Alignment.center, //Optional. Center by default. + contentScale: BoxFit.cover, //Optional. BoxFit.cover by default. + ), + subtitle: "Subtitle", //Optional + onClick: () {}, +); +``` + +##### OdsSmallCard API + +Parameter | Default value | Description +-- | -- | -- +`title: String` | | Title displayed into the card +`image: OdsCardImage` | | Image displayed into the card +`subtitle: String?` | `null` | Subtitle displayed into the card +`onClick: (() -> Void)?` | `null` | Callback called on card click +{:.table} + +### Horizontal card + +This is a full screen width card with an image on the side. The image can be displayed on the left or on the right. + + ![Horizontal card light](images/card_horizontal_light.png) ![Horizontal card dark](images/card_horizontal_dark.png) + +> **Flutter implementation** + +In your screen you can use `OdsHorizontalCard` composable: + +```dart +return OdsHorizontalCard( + title: "Title", + image: OdsCardImage( + image: "assets/placeholder.png", + contentDescription: 'Picture content description', //Optional + alignment: Alignment.center, //Optional. Center by default. + contentScale: BoxFit.cover, //Optional. BoxFit.cover by default. + ), + subtitle: "Subtitle", //Optional + text: "Text", //Optional + firstButton: OdsTextButton(text: "First button", style: OdsTextButtonStyle.functionalPrimary, onClick: () {}), //Optional + secondButton: OdsTextButton(text: "Second button", style: OdsTextButtonStyle.functionalPrimary, onClick: () {}), //Optional + imagePosition: OdsHorizontalCardImagePosition.start, //Optional. Start by default. + divider: false, // Optional. True by default. + onClick: () {}, +); +``` + +##### OdsHorizontalCard API + +Parameter | Default value | Description +-- | -- | -- +`title: String` | | Title displayed into the card +`image: OdsCardImage` | | Image displayed into the card +`subtitle: String?` | `null` | Subtitle displayed into the card +`text: String?` | `null` | Text displayed into the card +`firstButton: OdsTextButtonStyle.functionalPrimary,?` | `null` | First button displayed into the card +`secondButton: OdsTextButtonStyle.functionalPrimary,?` | `null` | Second button displayed into the card +`imagePosition: OdsHorizontalCardImagePosition` | `OdsHorizontalCardImagePosition.Start` | Position of the image within the card, it can be set to `OdsHorizontalCardImagePosition.start` or `OdsHorizontalCardImagePosition.end` +`divider: Boolean` | `false` | Controls the divider display. If true, it will be displayed between the card content and the action buttons. +`onClick: (() -> Void)?` | `null` | Callback called on card click diff --git a/docs/1.0.0/components/cards_docs.md b/docs/1.0.0/components/cards_docs.md new file mode 100644 index 00000000..193969dd --- /dev/null +++ b/docs/1.0.0/components/cards_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Cards +content_page: cards.md +--- diff --git a/docs/1.0.0/components/checkboxes.md b/docs/1.0.0/components/checkboxes.md new file mode 100644 index 00000000..ea716688 --- /dev/null +++ b/docs/1.0.0/components/checkboxes.md @@ -0,0 +1,64 @@ +--- +layout: detail +title: Checkboxes +description: Checkbox selection control allows the user to select options. +--- + +Use checkboxes to: +* Turn an item on or off in a desktop environment + +--- + +**Page Summary** + +* Table of contents +{:toc} + +--- + +## Specifications references + +- [Design System Manager - Checkboxes](https://system.design.orange.com/0c1af118d/p/775cb3-checkboxes/b/077247) +- [Material Design - Checkboxes](https://m3.material.io/components/checkbox/overview) +- Technical documentation soon available + +## Accessibility + +Please follow [accessibility criteria for development](https://m3.material.io/components/checkbox/accessibility) + +Checkboxes support content labeling for accessibility and are readable by most screen readers, such +as TalkBack and Voice Over. Text rendered in check boxes is automatically provided to accessibility services. +Additional content labels are usually unnecessary. + +### Implementation + +![Checkbox](images/checkbox_light.png) ![Checkbox dark](images/checkbox_dark.png) + +> **Flutter implementation** + +In your screen you can use Checkbox : + +```dart +bool? isChecked = true; +return OdsCheckbox( + checked: isChecked, + onCheckedChange: (value) { + setState( + () { + isChecked = value; + }, + ); + }, + enabled: isChecked, + indeterminate: true, // Optional. False by default +) +``` + +#### OdsCheckbox API + +Parameter | Default value | Description +-- | -- | -- +`checked: bool` | | Controls checked state of the checkbox +`onCheckedChange: (bool?)? Callback ` | `null` | Callback invoked on checkbox click. If `null`, then this is passive and relies entirely on a higher-level component to control the checked state. +`enabled: bool` | `true` | Controls enabled state of the checkbox. When `false`, this checkbox will not be clickable. +`indeterminate: bool` | `false` | Controls enabled state of the checkbox diff --git a/docs/1.0.0/components/checkboxes_docs.md b/docs/1.0.0/components/checkboxes_docs.md new file mode 100644 index 00000000..f33e7088 --- /dev/null +++ b/docs/1.0.0/components/checkboxes_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Checkboxes +content_page: checkboxes.md +--- diff --git a/docs/1.0.0/components/chips.md b/docs/1.0.0/components/chips.md new file mode 100644 index 00000000..fb100419 --- /dev/null +++ b/docs/1.0.0/components/chips.md @@ -0,0 +1,202 @@ +--- +layout: detail +title: Chips +description: Chips are compact elements that represent an input, attribute, or action. +--- + +
**On this page** + +* Table of contents +{:toc} + +--- + +## Specifications references + +- [Design System Manager](https://system.design.orange.com/0c1af118d/p/51ba7c-chips/b/392391) +- [Material Design](https://m3.material.io/components/chips/overview) + +## Accessibility + +Please follow [accessibility criteria for development](https://m3.material.io/components/chips/accessibility). + +Chips support content labeling for accessibility and are readable by most screen readers, such as +screen reader. Text rendered in chips is automatically provided to accessibility services. Additional +content labels are usually unnecessary. + +## Variants + +### Input chip + +Input chips represent a complex piece of information in +compact form, such as an entity (person, place, or thing) or text. They enable user input and verify +that input by converting text into chips. + +![Light input chip](images/chips_input_light.png) ![Dark input chip](images/chips_input_dark.png) + +#### Flutter implementation + +Use the `OdsChip` composable. +Note that the chip style is outlined or filled according to your OdsTheme component configuration, +outlined by default. + +```dart +OdsInputChip( + text: "Input chip", + leadingIcon: null, + leadingAvatar: CircleAvatar( + backgroundImage: NetworkImage( + OdsApplication.recipes[index].url, + ), + ), // Set it to `null` for no avatar or provide a `leadingIcon` + onClick: () {}, + onCancel: () {}, + enabled: true, +) +``` + +##### OdsInputChip API + +Parameter | Default value | Description +-- | -- | -- +`text: String` | | Text to be displayed into the chip +`leadingIcon: OdsChipLeadingIcon?` | `null` | Icon to be displayed at the start of the chip, preceding the text +`leadingAvatar: OdsChipLeadingAvatar?` | `null` | Avatar to be displayed in a circle shape at the start of the chip, preceding the content text +`onClick: (bool?)? Callback` | | Callback called on chip click +`onCancel: (() -> Unit)?` | `null` | Callback called on chip cancel cross click. Pass `null` for no cancel cross. +`enabled: Boolean` | `true` | Controls the enabled state of the chip. When `false`, this chip will not respond to user input. + +### Choice chip + +Choice chips allow selection of a single chip from a set of options. + +Choice chips clearly delineate and display options in a compact area. They are a good alternative to +toggle buttons, radio buttons, and single select menus. + + +![Light choice chips](images/chips_choice_light.png) ![Dark choice chips](images/chips_choice_dark.png) + +#### Flutter implementation + +Use the `OdsChoiceChip` composable. +Note that the chip style is outlined or filled according to your OdsTheme component configuration, +outlined by default. + +```dart +int selectedIndex = 0; +bool isFiltered = true; + +return OdsChoiceChip( + text: "Choice text", + onClick: (selected) { + setState( + () { + selectedIndex = 0; + isFiltered = selected!; + }, + ); + }, + leadingAvatar: OdsChipLeadingAvatar( + image: NetworkImage("https://..."), + contentDescription: "" // Optional + ), // Set it to `null` for no avatar + selected: false, + enabled: true, // Optional by default is true +) +``` + +##### OdsChoiceChip API + +Parameter | Default value | Description +-- | -- | -- +`text: String` | | Text to be displayed into the chip +`onClick: (bool?)? Callback` | | Callback called on chip click +`enabled: bool?` | `true` | Controls the enabled state of the chip. When `false`, this chip will not respond to user input. It also appears visually disabled and is disabled to accessibility services. +`selected: bool?` | `false` | Controls the selected state of the chip. When `true`, the chip is highlighted. +`leadingAvatar: OdsChipLeadingAvatar?` | `null` | Avatar to be displayed in a circle shape at the start of the chip, preceding the content text + + +### Filter chip + +Filter chips use tags or descriptive words to filter content. + +Filter chips clearly delineate and display options in a compact area. They are a good alternative to +toggle buttons or checkboxes. + +![Light filter chips](images/chips_filter_light.png) ![Dark filter chips](images/chips_filter_dark.png) + +#### Flutter implementation + +Use the `OdsFilterChip` composable. +Note that the chip style is outlined or filled according to your OdsTheme component configuration, +outlined by default. + +```dart +int selectedIndex = 0; +bool isFiltered = true; + +return OdsFilterChip( + text: "chip text", + onClick: (selected) { + setState( + () { + selectedIndex = 0; + isFiltered = selected!; + }, + ); + }, + leadingAvatar: OdsChipLeadingAvatar( + image: NetworkImage("https://..."), + contentDescription: "" // Optional + ), // Set it to `null` for no avatar + selected: false, + enabled: true, // Optional by default is true +) +``` + +##### OdsFilterChip API + +Parameter | Default value | Description +-- | -- | -- +`text: String` | | Text to be displayed into the chip +`onClick: (bool?)? Callback` | | Callback called on chip click +`enabled: bool?` | `true` | Controls the enabled state of the chip. When `false`, this chip will not respond to user input. It also appears visually disabled and is disabled to accessibility services. +`selected: bool?` | `false` | Controls the selected state of the chip. When `true`, the chip is highlighted. +`leadingAvatar: OdsChipLeadingAvatar?` | `null` | Avatar to be displayed in a circle shape at the start of the chip, preceding the content text + +Use the filter like example [FilterChip class](https://api.flutter.dev/flutter/material/FilterChip-class.html) + +### Action chip + +Action chips offer actions related to primary content. They should appear dynamically and +contextually in a UI. + +An alternative to action chips are buttons, which should appear persistently and consistently. + +![Light action chip](images/chips_action_light.png) ![Dark action chip](images/chips_action_dark.png) + +#### Flutter implementation + +Use the `OdsActionChip` composable. +Note that the chip style is outlined or filled according to your OdsTheme component configuration, +outlined by default. + +```dart +return OdsActionChip( + text: "Action chip", + onClick: () {}, + leadingIcon: SvgPicture.asset("assets/recipes/ic_cooking_pot.svg", + colorFilter: ColorFilter.mode(Theme.of(context).colorScheme.secondary, BlendMode.srcIn)), // set it to `null` for no icon + enabled: true, // Optional by default is true +) +``` + +##### OdsActionChip API + +Parameter | Default value | Description +-- | -- | -- +`text: String` | | Text to be displayed into the chip +`onClick: (bool?)? Callback` | | Callback called on chip click +`enabled: bool?` | `true` | Controls the enabled state of the chip. When `false`, this chip will not respond to user input. It also appears visually disabled and is disabled to accessibility services. +`selected: bool?` | `false` | Controls the selected state of the chip. When `true`, the chip is highlighted. +`leadingAvatar: Widget?` | `null` | Avatar to be displayed in a circle shape at the start of the chip, preceding the content text diff --git a/docs/1.0.0/components/chips_docs.md b/docs/1.0.0/components/chips_docs.md new file mode 100644 index 00000000..51287dad --- /dev/null +++ b/docs/1.0.0/components/chips_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Chips +content_page: chips.md +--- diff --git a/docs/1.0.0/components/dialogs.md b/docs/1.0.0/components/dialogs.md new file mode 100644 index 00000000..22ec8e9f --- /dev/null +++ b/docs/1.0.0/components/dialogs.md @@ -0,0 +1,72 @@ +--- +layout: detail +title: Dialogs +description: Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks. +--- + +A dialog is a type of modal window that appears in front of app content to +provide critical information or ask for a decision. Dialogs disable all app +functionality when they appear, and remain on screen until confirmed, dismissed, +or a required action has been taken. + +Dialogs are purposefully interruptive, so they should be used sparingly. + +--- + +**Page Summary** + +* Table of contents +{:toc} + +--- + +## Specifications references + +- [Design System Manager - Dialogs](https://system.design.orange.com/0c1af118d/p/78dd2a-dialogs/b/054ce9) +- [Material Design - Dialogs](https://m3.material.io/components/dialogs/overview) +- Technical documentation soon available + +## Accessibility + +Please follow [accessibility criteria for development](https://m3.material.io/components/dialogs/accessibility) + +## Variants + +### Alert dialog + +Alert dialogs interrupt users with urgent information, details, or actions. + +![Alert dialog light](images/dialog_alert_light.png) ![Alert dialog dark](images/dialog_alert_dark.png) + +> **Flutter implementation** + +The widget "OdsAlertDialog.openDialog" must be inside a click event. Example: onClick parameter of OdsButton. +To display an alert dialog in your screen, you can use: + +```dart +return OdsAlertDialog.openDialog( + context: context, + title: "title", + text: "content text of the dialog", + confirmButton: OdsAlertDialogButton( + text: "confirm", + onClick: () => Navigator.of(context).pop(), + ), + dismissButton: OdsAlertDialogButton( + text: "dismiss", + onClick: () => Navigator.of(context).pop(), + ), +); +``` + +## Component specific tokens + +##### OdsAlertDialog API + +Parameter | Default value | Description +-- | -- | -- +`text: String` | | Text displayed into the dialog which presents the details regarding the Dialog's purpose. +`confirmButton: OdsAlertDialogButton?` | `null` | displayed into the dialog which is meant to confirm a proposed action, thus resolving what triggered the dialog +`leadingAvatar: OdsAlertDialogButton?` | `null` | Button displayed into the dialog which is meant to dismiss the dialog. +`title: String?` | `null` | Title displayed into the dialog which should specify the purpose of the dialog. The title is not mandatory, because there may be sufficient information inside the `text`. + diff --git a/docs/1.0.0/components/dialogs_docs.md b/docs/1.0.0/components/dialogs_docs.md new file mode 100644 index 00000000..db66b13e --- /dev/null +++ b/docs/1.0.0/components/dialogs_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Dialogs +content_page: dialogs.md +--- diff --git a/docs/1.0.0/components/floatingActionButtons.md b/docs/1.0.0/components/floatingActionButtons.md new file mode 100644 index 00000000..d27cc637 --- /dev/null +++ b/docs/1.0.0/components/floatingActionButtons.md @@ -0,0 +1,140 @@ +--- +layout: detail +title: Floating action buttons +description: A floating action button (FAB) represents the primary action of a screen. +--- + +--- + +**Page Summary** + +* Table of contents +{:toc} + +--- + +## Specifications references + +- Design System Manager - Floating Action Button (https://system.design.orange.com/0c1af118d/p/564c73-buttons-fab/b/13aba7) +- [Material Design - Buttons: floating action button](https://m3.material.io/components/floating-action-button/overview) +- Technical documentation soon available + +## Accessibility + +Please follow [accessibility criteria for development](https://m3.material.io/components/floating-action-button/accessibility) + +You must define a content description on a FAB via the +`semanticsLabel` attribute so that screen readers are able to announce their goal or action. +By default the screen reader will say "floating action". +This does not concern 'Ods ExtendedFloatingActionButton' as the text will be localized. + +## Variants + +### Regular FAB + +Regular FABs are FABs that are not expanded and are a regular size. + +![FAB light](images/fab_light.png) ![FAB dark](images/fab_dark.png) + +> **Flutter implementation** + +To display a regular Floating Action Button in your composable screen, use `OdsFloatingActionButton`: + +```dart +return OdsFloatingActionButton( + onClick: () {}, + icon: const Icon(Icons.add), + semanticsLabel: 'Add', //Optional +); +``` + +##### OdsFloatingActionButton API + +Parameter | Default value | Description +-- | -- | -- +`onClick: Function()?` | `null` | The callback function when the button is pressed. +`icon: String` | | The optional icon widget displayed inside the button. +`semanticsLabel: String?` | `null` | The optional description accessibility floating button. + +### Small FAB + +A small FAB should be used on smaller screens. + +Small FABs can also be used to create visual continuity with other screen elements. + +![FAB mini light](images/fab_mini_light.png) ![FAB mini dark](images/fab_mini_dark.png) + +> **Flutter implementation** + +To display a small FAB in your screen use `OdsSmallFloatingActionButton` + +```dart +return OdsSmallFloatingActionButton( + onClick: () {}, + icon: const Icon(Icons.add), + semanticsLabel: 'Add', //Optional +); +``` + +##### OdsSmallFloatingActionButton API + +Parameter | Default value | Description +-- | -- | -- +`onClick: Function()?` | `null` | The callback function when the button is pressed. +`icon: String` | | The optional icon widget displayed inside the button. +`semanticsLabel: String?` | `null` | The optional description accessibility floating button. + +### Large FAB + +A large FAB should be used on smaller screens. + +Small FABs can also be used to create visual continuity with other screen elements. + +![FAB mini light](images/fab_large_light.png) ![FAB mini dark](images/fab_large_dark.png) + +> **Flutter implementation** + +To display a small FAB in your screen use `OdsLargeFloatingActionButton` + +```dart +return OdsLargeFloatingActionButton( + onClick: () {}, + icon: const Icon(Icons.add), + semanticsLabel: 'Add', //Optional +); +``` + +##### OdsLargeFloatingActionButton API + +Parameter | Default value | Description +-- | -- | -- +`onClick: Function()?` | `null` | The callback function when the button is pressed. +`icon: String` | | The optional icon widget displayed inside the button. +`semanticsLabel: String?` | `null` | The optional description accessibility floating button. + +### Extended FAB + +The extended FAB is wider, and it includes a text label. + +![FAB extended light](images/fab_extended_light.png) ![FAB extended dark](images/fab_extended_dark.png) + + +> **Flutter implementation** + +To display an extended FAB, use `OdsExtendedFloatingActionButton`: + +```dart +return OdsExtendedFloatingActionButton( + onClick: () {}, + text: "Add", + icon: const Icon(Icons.add), //Optional +); +``` + +##### OdsExtendedFloatingActionButton API + +Parameter | Default value | Description +-- | -- | -- +`onClick: Function()?` | `null` | The callback function when the button is pressed. +`icon: String` | | The optional icon widget displayed inside the button. +`text: String?` | `null` | The label text displayed inside the button. diff --git a/docs/1.0.0/components/floatingActionButtons_docs.md b/docs/1.0.0/components/floatingActionButtons_docs.md new file mode 100644 index 00000000..c6dc3fb5 --- /dev/null +++ b/docs/1.0.0/components/floatingActionButtons_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Floating action buttons +content_page: floatingActionButtons.md +--- diff --git a/docs/1.0.0/components/images/app_bar_top_overflow_menu_dark.png b/docs/1.0.0/components/images/app_bar_top_overflow_menu_dark.png new file mode 100644 index 00000000..60322543 Binary files /dev/null and b/docs/1.0.0/components/images/app_bar_top_overflow_menu_dark.png differ diff --git a/docs/1.0.0/components/images/app_bar_top_overflow_menu_light.png b/docs/1.0.0/components/images/app_bar_top_overflow_menu_light.png new file mode 100644 index 00000000..2e3bd905 Binary files /dev/null and b/docs/1.0.0/components/images/app_bar_top_overflow_menu_light.png differ diff --git a/docs/1.0.0/components/images/banner_dark.png b/docs/1.0.0/components/images/banner_dark.png new file mode 100644 index 00000000..60803f20 Binary files /dev/null and b/docs/1.0.0/components/images/banner_dark.png differ diff --git a/docs/1.0.0/components/images/banner_light.png b/docs/1.0.0/components/images/banner_light.png new file mode 100644 index 00000000..4d174146 Binary files /dev/null and b/docs/1.0.0/components/images/banner_light.png differ diff --git a/docs/1.0.0/components/images/button_contained_dark.png b/docs/1.0.0/components/images/button_contained_dark.png new file mode 100644 index 00000000..8cc9ee5f Binary files /dev/null and b/docs/1.0.0/components/images/button_contained_dark.png differ diff --git a/docs/1.0.0/components/images/button_contained_light.png b/docs/1.0.0/components/images/button_contained_light.png new file mode 100644 index 00000000..401db36d Binary files /dev/null and b/docs/1.0.0/components/images/button_contained_light.png differ diff --git a/docs/1.0.0/components/images/button_contained_negative_dark.png b/docs/1.0.0/components/images/button_contained_negative_dark.png new file mode 100644 index 00000000..13f22a29 Binary files /dev/null and b/docs/1.0.0/components/images/button_contained_negative_dark.png differ diff --git a/docs/1.0.0/components/images/button_contained_negative_light.png b/docs/1.0.0/components/images/button_contained_negative_light.png new file mode 100644 index 00000000..018b84cf Binary files /dev/null and b/docs/1.0.0/components/images/button_contained_negative_light.png differ diff --git a/docs/1.0.0/components/images/button_contained_positive_dark.png b/docs/1.0.0/components/images/button_contained_positive_dark.png new file mode 100644 index 00000000..b1527819 Binary files /dev/null and b/docs/1.0.0/components/images/button_contained_positive_dark.png differ diff --git a/docs/1.0.0/components/images/button_contained_positive_light.png b/docs/1.0.0/components/images/button_contained_positive_light.png new file mode 100644 index 00000000..906bf0b3 Binary files /dev/null and b/docs/1.0.0/components/images/button_contained_positive_light.png differ diff --git a/docs/1.0.0/components/images/button_icon_deselected_dark.png b/docs/1.0.0/components/images/button_icon_deselected_dark.png new file mode 100644 index 00000000..78914207 Binary files /dev/null and b/docs/1.0.0/components/images/button_icon_deselected_dark.png differ diff --git a/docs/1.0.0/components/images/button_icon_deselected_light.png b/docs/1.0.0/components/images/button_icon_deselected_light.png new file mode 100644 index 00000000..2fb95c87 Binary files /dev/null and b/docs/1.0.0/components/images/button_icon_deselected_light.png differ diff --git a/docs/1.0.0/components/images/button_icon_selected_dark.png b/docs/1.0.0/components/images/button_icon_selected_dark.png new file mode 100644 index 00000000..40a7bed3 Binary files /dev/null and b/docs/1.0.0/components/images/button_icon_selected_dark.png differ diff --git a/docs/1.0.0/components/images/button_icon_selected_light.png b/docs/1.0.0/components/images/button_icon_selected_light.png new file mode 100644 index 00000000..025e795c Binary files /dev/null and b/docs/1.0.0/components/images/button_icon_selected_light.png differ diff --git a/docs/1.0.0/components/images/button_outlined_dark.png b/docs/1.0.0/components/images/button_outlined_dark.png new file mode 100644 index 00000000..420ab1a4 Binary files /dev/null and b/docs/1.0.0/components/images/button_outlined_dark.png differ diff --git a/docs/1.0.0/components/images/button_outlined_light.png b/docs/1.0.0/components/images/button_outlined_light.png new file mode 100644 index 00000000..a7c56296 Binary files /dev/null and b/docs/1.0.0/components/images/button_outlined_light.png differ diff --git a/docs/1.0.0/components/images/button_text_dark.png b/docs/1.0.0/components/images/button_text_dark.png new file mode 100644 index 00000000..13ae0324 Binary files /dev/null and b/docs/1.0.0/components/images/button_text_dark.png differ diff --git a/docs/1.0.0/components/images/button_text_light.png b/docs/1.0.0/components/images/button_text_light.png new file mode 100644 index 00000000..f574d322 Binary files /dev/null and b/docs/1.0.0/components/images/button_text_light.png differ diff --git a/docs/1.0.0/components/images/card_header_first_dark.png b/docs/1.0.0/components/images/card_header_first_dark.png new file mode 100644 index 00000000..07478050 Binary files /dev/null and b/docs/1.0.0/components/images/card_header_first_dark.png differ diff --git a/docs/1.0.0/components/images/card_header_first_light.png b/docs/1.0.0/components/images/card_header_first_light.png new file mode 100644 index 00000000..6d490819 Binary files /dev/null and b/docs/1.0.0/components/images/card_header_first_light.png differ diff --git a/docs/1.0.0/components/images/card_horizontal_dark.png b/docs/1.0.0/components/images/card_horizontal_dark.png new file mode 100644 index 00000000..ba5324c9 Binary files /dev/null and b/docs/1.0.0/components/images/card_horizontal_dark.png differ diff --git a/docs/1.0.0/components/images/card_horizontal_light.png b/docs/1.0.0/components/images/card_horizontal_light.png new file mode 100644 index 00000000..cc4c5928 Binary files /dev/null and b/docs/1.0.0/components/images/card_horizontal_light.png differ diff --git a/docs/1.0.0/components/images/card_small_dark.png b/docs/1.0.0/components/images/card_small_dark.png new file mode 100644 index 00000000..0862c176 Binary files /dev/null and b/docs/1.0.0/components/images/card_small_dark.png differ diff --git a/docs/1.0.0/components/images/card_small_light.png b/docs/1.0.0/components/images/card_small_light.png new file mode 100644 index 00000000..777df5ce Binary files /dev/null and b/docs/1.0.0/components/images/card_small_light.png differ diff --git a/docs/1.0.0/components/images/card_vertical_image_first_darkk.png b/docs/1.0.0/components/images/card_vertical_image_first_darkk.png new file mode 100644 index 00000000..e42fc38c Binary files /dev/null and b/docs/1.0.0/components/images/card_vertical_image_first_darkk.png differ diff --git a/docs/1.0.0/components/images/card_vertical_image_first_lightt.png b/docs/1.0.0/components/images/card_vertical_image_first_lightt.png new file mode 100644 index 00000000..43d4c893 Binary files /dev/null and b/docs/1.0.0/components/images/card_vertical_image_first_lightt.png differ diff --git a/docs/1.0.0/components/images/checkbox_dark.png b/docs/1.0.0/components/images/checkbox_dark.png new file mode 100644 index 00000000..d37bc0a5 Binary files /dev/null and b/docs/1.0.0/components/images/checkbox_dark.png differ diff --git a/docs/1.0.0/components/images/checkbox_light.png b/docs/1.0.0/components/images/checkbox_light.png new file mode 100644 index 00000000..002bc777 Binary files /dev/null and b/docs/1.0.0/components/images/checkbox_light.png differ diff --git a/docs/1.0.0/components/images/checkboxe_list_dark.png b/docs/1.0.0/components/images/checkboxe_list_dark.png new file mode 100644 index 00000000..8b325356 Binary files /dev/null and b/docs/1.0.0/components/images/checkboxe_list_dark.png differ diff --git a/docs/1.0.0/components/images/checkboxe_list_light.png b/docs/1.0.0/components/images/checkboxe_list_light.png new file mode 100644 index 00000000..9c10551a Binary files /dev/null and b/docs/1.0.0/components/images/checkboxe_list_light.png differ diff --git a/docs/1.0.0/components/images/chips_action_dark.png b/docs/1.0.0/components/images/chips_action_dark.png new file mode 100644 index 00000000..d9c95f5e Binary files /dev/null and b/docs/1.0.0/components/images/chips_action_dark.png differ diff --git a/docs/1.0.0/components/images/chips_action_light.png b/docs/1.0.0/components/images/chips_action_light.png new file mode 100644 index 00000000..086a5bd3 Binary files /dev/null and b/docs/1.0.0/components/images/chips_action_light.png differ diff --git a/docs/1.0.0/components/images/chips_choice_dark.png b/docs/1.0.0/components/images/chips_choice_dark.png new file mode 100644 index 00000000..cb6ead60 Binary files /dev/null and b/docs/1.0.0/components/images/chips_choice_dark.png differ diff --git a/docs/1.0.0/components/images/chips_choice_light.png b/docs/1.0.0/components/images/chips_choice_light.png new file mode 100644 index 00000000..1e43a0b6 Binary files /dev/null and b/docs/1.0.0/components/images/chips_choice_light.png differ diff --git a/docs/1.0.0/components/images/chips_filter_dark.png b/docs/1.0.0/components/images/chips_filter_dark.png new file mode 100644 index 00000000..71fda02d Binary files /dev/null and b/docs/1.0.0/components/images/chips_filter_dark.png differ diff --git a/docs/1.0.0/components/images/chips_filter_light.png b/docs/1.0.0/components/images/chips_filter_light.png new file mode 100644 index 00000000..078b40eb Binary files /dev/null and b/docs/1.0.0/components/images/chips_filter_light.png differ diff --git a/docs/1.0.0/components/images/chips_input_dark.png b/docs/1.0.0/components/images/chips_input_dark.png new file mode 100644 index 00000000..7732e080 Binary files /dev/null and b/docs/1.0.0/components/images/chips_input_dark.png differ diff --git a/docs/1.0.0/components/images/chips_input_light.png b/docs/1.0.0/components/images/chips_input_light.png new file mode 100644 index 00000000..6cbf7e6c Binary files /dev/null and b/docs/1.0.0/components/images/chips_input_light.png differ diff --git a/docs/1.0.0/components/images/dialog_alert_dark.png b/docs/1.0.0/components/images/dialog_alert_dark.png new file mode 100644 index 00000000..c9dcbac4 Binary files /dev/null and b/docs/1.0.0/components/images/dialog_alert_dark.png differ diff --git a/docs/1.0.0/components/images/dialog_alert_light.png b/docs/1.0.0/components/images/dialog_alert_light.png new file mode 100644 index 00000000..9ad32961 Binary files /dev/null and b/docs/1.0.0/components/images/dialog_alert_light.png differ diff --git a/docs/1.0.0/components/images/fab_dark.png b/docs/1.0.0/components/images/fab_dark.png new file mode 100644 index 00000000..897a5bb5 Binary files /dev/null and b/docs/1.0.0/components/images/fab_dark.png differ diff --git a/docs/1.0.0/components/images/fab_extended_dark.png b/docs/1.0.0/components/images/fab_extended_dark.png new file mode 100644 index 00000000..9b0e85d4 Binary files /dev/null and b/docs/1.0.0/components/images/fab_extended_dark.png differ diff --git a/docs/1.0.0/components/images/fab_extended_light.png b/docs/1.0.0/components/images/fab_extended_light.png new file mode 100644 index 00000000..4c9d7f13 Binary files /dev/null and b/docs/1.0.0/components/images/fab_extended_light.png differ diff --git a/docs/1.0.0/components/images/fab_large_dark.png b/docs/1.0.0/components/images/fab_large_dark.png new file mode 100644 index 00000000..28bfe69b Binary files /dev/null and b/docs/1.0.0/components/images/fab_large_dark.png differ diff --git a/docs/1.0.0/components/images/fab_large_light.png b/docs/1.0.0/components/images/fab_large_light.png new file mode 100644 index 00000000..92e931a2 Binary files /dev/null and b/docs/1.0.0/components/images/fab_large_light.png differ diff --git a/docs/1.0.0/components/images/fab_light.png b/docs/1.0.0/components/images/fab_light.png new file mode 100644 index 00000000..b9e8f14d Binary files /dev/null and b/docs/1.0.0/components/images/fab_light.png differ diff --git a/docs/1.0.0/components/images/fab_mini_dark.png b/docs/1.0.0/components/images/fab_mini_dark.png new file mode 100644 index 00000000..76ce617c Binary files /dev/null and b/docs/1.0.0/components/images/fab_mini_dark.png differ diff --git a/docs/1.0.0/components/images/fab_mini_light.png b/docs/1.0.0/components/images/fab_mini_light.png new file mode 100644 index 00000000..20f73255 Binary files /dev/null and b/docs/1.0.0/components/images/fab_mini_light.png differ diff --git a/docs/1.0.0/components/images/lists_radio_button_dark.png b/docs/1.0.0/components/images/lists_radio_button_dark.png new file mode 100644 index 00000000..e0ce8e76 Binary files /dev/null and b/docs/1.0.0/components/images/lists_radio_button_dark.png differ diff --git a/docs/1.0.0/components/images/lists_radio_button_light.png b/docs/1.0.0/components/images/lists_radio_button_light.png new file mode 100644 index 00000000..a7cd5e5b Binary files /dev/null and b/docs/1.0.0/components/images/lists_radio_button_light.png differ diff --git a/docs/1.0.0/components/images/lists_single_line_dark.png b/docs/1.0.0/components/images/lists_single_line_dark.png new file mode 100644 index 00000000..d46eca2d Binary files /dev/null and b/docs/1.0.0/components/images/lists_single_line_dark.png differ diff --git a/docs/1.0.0/components/images/lists_single_line_light.png b/docs/1.0.0/components/images/lists_single_line_light.png new file mode 100644 index 00000000..3bda5190 Binary files /dev/null and b/docs/1.0.0/components/images/lists_single_line_light.png differ diff --git a/docs/1.0.0/components/images/lists_single_line_wide_image_dark.png b/docs/1.0.0/components/images/lists_single_line_wide_image_dark.png new file mode 100644 index 00000000..c00f2192 Binary files /dev/null and b/docs/1.0.0/components/images/lists_single_line_wide_image_dark.png differ diff --git a/docs/1.0.0/components/images/lists_single_line_wide_image_light.png b/docs/1.0.0/components/images/lists_single_line_wide_image_light.png new file mode 100644 index 00000000..d839b5cc Binary files /dev/null and b/docs/1.0.0/components/images/lists_single_line_wide_image_light.png differ diff --git a/docs/1.0.0/components/images/lists_switch_dark.png b/docs/1.0.0/components/images/lists_switch_dark.png new file mode 100644 index 00000000..4e9ff230 Binary files /dev/null and b/docs/1.0.0/components/images/lists_switch_dark.png differ diff --git a/docs/1.0.0/components/images/lists_switch_light.png b/docs/1.0.0/components/images/lists_switch_light.png new file mode 100644 index 00000000..0f9adf47 Binary files /dev/null and b/docs/1.0.0/components/images/lists_switch_light.png differ diff --git a/docs/1.0.0/components/images/lists_three_line_dark.png b/docs/1.0.0/components/images/lists_three_line_dark.png new file mode 100644 index 00000000..15e350f3 Binary files /dev/null and b/docs/1.0.0/components/images/lists_three_line_dark.png differ diff --git a/docs/1.0.0/components/images/lists_three_line_light.png b/docs/1.0.0/components/images/lists_three_line_light.png new file mode 100644 index 00000000..f3dabd4e Binary files /dev/null and b/docs/1.0.0/components/images/lists_three_line_light.png differ diff --git a/docs/1.0.0/components/images/lists_three_line_wide_image_dark.png b/docs/1.0.0/components/images/lists_three_line_wide_image_dark.png new file mode 100644 index 00000000..2d44de0c Binary files /dev/null and b/docs/1.0.0/components/images/lists_three_line_wide_image_dark.png differ diff --git a/docs/1.0.0/components/images/lists_three_line_wide_image_light.png b/docs/1.0.0/components/images/lists_three_line_wide_image_light.png new file mode 100644 index 00000000..b6eaa436 Binary files /dev/null and b/docs/1.0.0/components/images/lists_three_line_wide_image_light.png differ diff --git a/docs/1.0.0/components/images/lists_two_line_dark.png b/docs/1.0.0/components/images/lists_two_line_dark.png new file mode 100644 index 00000000..7e130d9f Binary files /dev/null and b/docs/1.0.0/components/images/lists_two_line_dark.png differ diff --git a/docs/1.0.0/components/images/lists_two_line_light.png b/docs/1.0.0/components/images/lists_two_line_light.png new file mode 100644 index 00000000..ea4e52cb Binary files /dev/null and b/docs/1.0.0/components/images/lists_two_line_light.png differ diff --git a/docs/1.0.0/components/images/lists_two_line_wide_image_dark.png b/docs/1.0.0/components/images/lists_two_line_wide_image_dark.png new file mode 100644 index 00000000..0ea681e8 Binary files /dev/null and b/docs/1.0.0/components/images/lists_two_line_wide_image_dark.png differ diff --git a/docs/1.0.0/components/images/lists_two_line_wide_image_light.png b/docs/1.0.0/components/images/lists_two_line_wide_image_light.png new file mode 100644 index 00000000..0c214c27 Binary files /dev/null and b/docs/1.0.0/components/images/lists_two_line_wide_image_light.png differ diff --git a/docs/1.0.0/components/images/menu_dropdown_dark.png b/docs/1.0.0/components/images/menu_dropdown_dark.png new file mode 100644 index 00000000..b47bccfe Binary files /dev/null and b/docs/1.0.0/components/images/menu_dropdown_dark.png differ diff --git a/docs/1.0.0/components/images/menu_dropdown_light.png b/docs/1.0.0/components/images/menu_dropdown_light.png new file mode 100644 index 00000000..5af3fb65 Binary files /dev/null and b/docs/1.0.0/components/images/menu_dropdown_light.png differ diff --git a/docs/1.0.0/components/images/menu_exposed_dropdown_dark.png b/docs/1.0.0/components/images/menu_exposed_dropdown_dark.png new file mode 100644 index 00000000..029fb349 Binary files /dev/null and b/docs/1.0.0/components/images/menu_exposed_dropdown_dark.png differ diff --git a/docs/1.0.0/components/images/menu_exposed_dropdown_light.png b/docs/1.0.0/components/images/menu_exposed_dropdown_light.png new file mode 100644 index 00000000..202aa7db Binary files /dev/null and b/docs/1.0.0/components/images/menu_exposed_dropdown_light.png differ diff --git a/docs/1.0.0/components/images/navigation_bar_dark.png b/docs/1.0.0/components/images/navigation_bar_dark.png new file mode 100644 index 00000000..aff18611 Binary files /dev/null and b/docs/1.0.0/components/images/navigation_bar_dark.png differ diff --git a/docs/1.0.0/components/images/navigation_bar_light.png b/docs/1.0.0/components/images/navigation_bar_light.png new file mode 100644 index 00000000..a5d9e288 Binary files /dev/null and b/docs/1.0.0/components/images/navigation_bar_light.png differ diff --git a/docs/1.0.0/components/images/navigation_rail_dark.png b/docs/1.0.0/components/images/navigation_rail_dark.png new file mode 100644 index 00000000..70859f2a Binary files /dev/null and b/docs/1.0.0/components/images/navigation_rail_dark.png differ diff --git a/docs/1.0.0/components/images/navigation_rail_light.png b/docs/1.0.0/components/images/navigation_rail_light.png new file mode 100644 index 00000000..0c164233 Binary files /dev/null and b/docs/1.0.0/components/images/navigation_rail_light.png differ diff --git a/docs/1.0.0/components/images/progress_circular_dark.png b/docs/1.0.0/components/images/progress_circular_dark.png new file mode 100644 index 00000000..69b07e8c Binary files /dev/null and b/docs/1.0.0/components/images/progress_circular_dark.png differ diff --git a/docs/1.0.0/components/images/progress_circular_light.png b/docs/1.0.0/components/images/progress_circular_light.png new file mode 100644 index 00000000..b183a1d7 Binary files /dev/null and b/docs/1.0.0/components/images/progress_circular_light.png differ diff --git a/docs/1.0.0/components/images/progress_linear_dark.png b/docs/1.0.0/components/images/progress_linear_dark.png new file mode 100644 index 00000000..e4e3e843 Binary files /dev/null and b/docs/1.0.0/components/images/progress_linear_dark.png differ diff --git a/docs/1.0.0/components/images/progress_linear_light.png b/docs/1.0.0/components/images/progress_linear_light.png new file mode 100644 index 00000000..f56e5773 Binary files /dev/null and b/docs/1.0.0/components/images/progress_linear_light.png differ diff --git a/docs/1.0.0/components/images/radio_button_dark.png b/docs/1.0.0/components/images/radio_button_dark.png new file mode 100644 index 00000000..8dfd93d4 Binary files /dev/null and b/docs/1.0.0/components/images/radio_button_dark.png differ diff --git a/docs/1.0.0/components/images/radio_button_light.png b/docs/1.0.0/components/images/radio_button_light.png new file mode 100644 index 00000000..5cc7e464 Binary files /dev/null and b/docs/1.0.0/components/images/radio_button_light.png differ diff --git a/docs/1.0.0/components/images/segmented_button_multi_dark.png b/docs/1.0.0/components/images/segmented_button_multi_dark.png new file mode 100644 index 00000000..d08e41ea Binary files /dev/null and b/docs/1.0.0/components/images/segmented_button_multi_dark.png differ diff --git a/docs/1.0.0/components/images/segmented_button_multi_light.png b/docs/1.0.0/components/images/segmented_button_multi_light.png new file mode 100644 index 00000000..e483f114 Binary files /dev/null and b/docs/1.0.0/components/images/segmented_button_multi_light.png differ diff --git a/docs/1.0.0/components/images/segmented_button_single_dark.png b/docs/1.0.0/components/images/segmented_button_single_dark.png new file mode 100644 index 00000000..3a8c69d1 Binary files /dev/null and b/docs/1.0.0/components/images/segmented_button_single_dark.png differ diff --git a/docs/1.0.0/components/images/segmented_button_single_light.png b/docs/1.0.0/components/images/segmented_button_single_light.png new file mode 100644 index 00000000..b919007e Binary files /dev/null and b/docs/1.0.0/components/images/segmented_button_single_light.png differ diff --git a/docs/1.0.0/components/images/sheetbottom_dark.png b/docs/1.0.0/components/images/sheetbottom_dark.png new file mode 100644 index 00000000..92919efc Binary files /dev/null and b/docs/1.0.0/components/images/sheetbottom_dark.png differ diff --git a/docs/1.0.0/components/images/sheetbottom_light.png b/docs/1.0.0/components/images/sheetbottom_light.png new file mode 100644 index 00000000..add8e3f0 Binary files /dev/null and b/docs/1.0.0/components/images/sheetbottom_light.png differ diff --git a/docs/1.0.0/components/images/slider_continuous_dark.png b/docs/1.0.0/components/images/slider_continuous_dark.png new file mode 100644 index 00000000..9b745d7f Binary files /dev/null and b/docs/1.0.0/components/images/slider_continuous_dark.png differ diff --git a/docs/1.0.0/components/images/slider_continuous_light.png b/docs/1.0.0/components/images/slider_continuous_light.png new file mode 100644 index 00000000..42ad208b Binary files /dev/null and b/docs/1.0.0/components/images/slider_continuous_light.png differ diff --git a/docs/1.0.0/components/images/slider_continuous_lockups_dark.png b/docs/1.0.0/components/images/slider_continuous_lockups_dark.png new file mode 100644 index 00000000..cd15d6e2 Binary files /dev/null and b/docs/1.0.0/components/images/slider_continuous_lockups_dark.png differ diff --git a/docs/1.0.0/components/images/slider_continuous_lockups_light.png b/docs/1.0.0/components/images/slider_continuous_lockups_light.png new file mode 100644 index 00000000..69f7444f Binary files /dev/null and b/docs/1.0.0/components/images/slider_continuous_lockups_light.png differ diff --git a/docs/1.0.0/components/images/slider_continuous_lockups_with_icon_dark.png b/docs/1.0.0/components/images/slider_continuous_lockups_with_icon_dark.png new file mode 100644 index 00000000..32764754 Binary files /dev/null and b/docs/1.0.0/components/images/slider_continuous_lockups_with_icon_dark.png differ diff --git a/docs/1.0.0/components/images/slider_continuous_lockups_with_icon_light.png b/docs/1.0.0/components/images/slider_continuous_lockups_with_icon_light.png new file mode 100644 index 00000000..39be0469 Binary files /dev/null and b/docs/1.0.0/components/images/slider_continuous_lockups_with_icon_light.png differ diff --git a/docs/1.0.0/components/images/slider_continuous_with_icon_dark.png b/docs/1.0.0/components/images/slider_continuous_with_icon_dark.png new file mode 100644 index 00000000..0d3b71f3 Binary files /dev/null and b/docs/1.0.0/components/images/slider_continuous_with_icon_dark.png differ diff --git a/docs/1.0.0/components/images/slider_continuous_with_icon_light.png b/docs/1.0.0/components/images/slider_continuous_with_icon_light.png new file mode 100644 index 00000000..4e81e7cd Binary files /dev/null and b/docs/1.0.0/components/images/slider_continuous_with_icon_light.png differ diff --git a/docs/1.0.0/components/images/slider_discrete_dark.png b/docs/1.0.0/components/images/slider_discrete_dark.png new file mode 100644 index 00000000..35abccc5 Binary files /dev/null and b/docs/1.0.0/components/images/slider_discrete_dark.png differ diff --git a/docs/1.0.0/components/images/slider_discrete_light.png b/docs/1.0.0/components/images/slider_discrete_light.png new file mode 100644 index 00000000..4f3d5083 Binary files /dev/null and b/docs/1.0.0/components/images/slider_discrete_light.png differ diff --git a/docs/1.0.0/components/images/slider_discrete_lockups_dark.png b/docs/1.0.0/components/images/slider_discrete_lockups_dark.png new file mode 100644 index 00000000..97a6da19 Binary files /dev/null and b/docs/1.0.0/components/images/slider_discrete_lockups_dark.png differ diff --git a/docs/1.0.0/components/images/slider_discrete_lockups_light.png b/docs/1.0.0/components/images/slider_discrete_lockups_light.png new file mode 100644 index 00000000..116273c3 Binary files /dev/null and b/docs/1.0.0/components/images/slider_discrete_lockups_light.png differ diff --git a/docs/1.0.0/components/images/slider_discrete_lockups_with_icon_dark.png b/docs/1.0.0/components/images/slider_discrete_lockups_with_icon_dark.png new file mode 100644 index 00000000..978dbfcb Binary files /dev/null and b/docs/1.0.0/components/images/slider_discrete_lockups_with_icon_dark.png differ diff --git a/docs/1.0.0/components/images/slider_discrete_lockups_with_icon_light.png b/docs/1.0.0/components/images/slider_discrete_lockups_with_icon_light.png new file mode 100644 index 00000000..640cfd2d Binary files /dev/null and b/docs/1.0.0/components/images/slider_discrete_lockups_with_icon_light.png differ diff --git a/docs/1.0.0/components/images/slider_discrete_with_icon_dark.png b/docs/1.0.0/components/images/slider_discrete_with_icon_dark.png new file mode 100644 index 00000000..cd3fa414 Binary files /dev/null and b/docs/1.0.0/components/images/slider_discrete_with_icon_dark.png differ diff --git a/docs/1.0.0/components/images/slider_discrete_with_icon_light.png b/docs/1.0.0/components/images/slider_discrete_with_icon_light.png new file mode 100644 index 00000000..a18b4e09 Binary files /dev/null and b/docs/1.0.0/components/images/slider_discrete_with_icon_light.png differ diff --git a/docs/1.0.0/components/images/snackbar_longer_action_dark.png b/docs/1.0.0/components/images/snackbar_longer_action_dark.png new file mode 100644 index 00000000..991076a0 Binary files /dev/null and b/docs/1.0.0/components/images/snackbar_longer_action_dark.png differ diff --git a/docs/1.0.0/components/images/snackbar_longer_action_light.png b/docs/1.0.0/components/images/snackbar_longer_action_light.png new file mode 100644 index 00000000..3df322d0 Binary files /dev/null and b/docs/1.0.0/components/images/snackbar_longer_action_light.png differ diff --git a/docs/1.0.0/components/images/snackbar_single_dark.png b/docs/1.0.0/components/images/snackbar_single_dark.png new file mode 100644 index 00000000..50b52d14 Binary files /dev/null and b/docs/1.0.0/components/images/snackbar_single_dark.png differ diff --git a/docs/1.0.0/components/images/snackbar_single_light.png b/docs/1.0.0/components/images/snackbar_single_light.png new file mode 100644 index 00000000..ec936888 Binary files /dev/null and b/docs/1.0.0/components/images/snackbar_single_light.png differ diff --git a/docs/1.0.0/components/images/snackbar_single_with_action_dark.png b/docs/1.0.0/components/images/snackbar_single_with_action_dark.png new file mode 100644 index 00000000..6966cfb0 Binary files /dev/null and b/docs/1.0.0/components/images/snackbar_single_with_action_dark.png differ diff --git a/docs/1.0.0/components/images/snackbar_single_with_action_light.png b/docs/1.0.0/components/images/snackbar_single_with_action_light.png new file mode 100644 index 00000000..ca8d4c8c Binary files /dev/null and b/docs/1.0.0/components/images/snackbar_single_with_action_light.png differ diff --git a/docs/1.0.0/components/images/snackbar_two_lines_dark.png b/docs/1.0.0/components/images/snackbar_two_lines_dark.png new file mode 100644 index 00000000..3b7b0035 Binary files /dev/null and b/docs/1.0.0/components/images/snackbar_two_lines_dark.png differ diff --git a/docs/1.0.0/components/images/snackbar_two_lines_light.png b/docs/1.0.0/components/images/snackbar_two_lines_light.png new file mode 100644 index 00000000..fcfa013e Binary files /dev/null and b/docs/1.0.0/components/images/snackbar_two_lines_light.png differ diff --git a/docs/1.0.0/components/images/switch_dark.png b/docs/1.0.0/components/images/switch_dark.png new file mode 100644 index 00000000..9d51d97f Binary files /dev/null and b/docs/1.0.0/components/images/switch_dark.png differ diff --git a/docs/1.0.0/components/images/switch_light.png b/docs/1.0.0/components/images/switch_light.png new file mode 100644 index 00000000..73e4e02a Binary files /dev/null and b/docs/1.0.0/components/images/switch_light.png differ diff --git a/docs/1.0.0/components/images/tabs_fixed_dark.png b/docs/1.0.0/components/images/tabs_fixed_dark.png new file mode 100644 index 00000000..1c529c76 Binary files /dev/null and b/docs/1.0.0/components/images/tabs_fixed_dark.png differ diff --git a/docs/1.0.0/components/images/tabs_fixed_light.png b/docs/1.0.0/components/images/tabs_fixed_light.png new file mode 100644 index 00000000..8ceda363 Binary files /dev/null and b/docs/1.0.0/components/images/tabs_fixed_light.png differ diff --git a/docs/1.0.0/components/images/tabs_scrollable_dark.png b/docs/1.0.0/components/images/tabs_scrollable_dark.png new file mode 100644 index 00000000..e99f8912 Binary files /dev/null and b/docs/1.0.0/components/images/tabs_scrollable_dark.png differ diff --git a/docs/1.0.0/components/images/tabs_scrollable_light.png b/docs/1.0.0/components/images/tabs_scrollable_light.png new file mode 100644 index 00000000..c6496d8d Binary files /dev/null and b/docs/1.0.0/components/images/tabs_scrollable_light.png differ diff --git a/docs/1.0.0/components/images/textfield_character_counter_dark.png b/docs/1.0.0/components/images/textfield_character_counter_dark.png new file mode 100644 index 00000000..9b52ae51 Binary files /dev/null and b/docs/1.0.0/components/images/textfield_character_counter_dark.png differ diff --git a/docs/1.0.0/components/images/textfield_character_counter_light.png b/docs/1.0.0/components/images/textfield_character_counter_light.png new file mode 100644 index 00000000..482d4c20 Binary files /dev/null and b/docs/1.0.0/components/images/textfield_character_counter_light.png differ diff --git a/docs/1.0.0/components/images/textfield_filled_dark.png b/docs/1.0.0/components/images/textfield_filled_dark.png new file mode 100644 index 00000000..38424f0f Binary files /dev/null and b/docs/1.0.0/components/images/textfield_filled_dark.png differ diff --git a/docs/1.0.0/components/images/textfield_filled_light.png b/docs/1.0.0/components/images/textfield_filled_light.png new file mode 100644 index 00000000..881386b2 Binary files /dev/null and b/docs/1.0.0/components/images/textfield_filled_light.png differ diff --git a/docs/1.0.0/components/images/textfield_filled_password_dark.png b/docs/1.0.0/components/images/textfield_filled_password_dark.png new file mode 100644 index 00000000..aaffb22f Binary files /dev/null and b/docs/1.0.0/components/images/textfield_filled_password_dark.png differ diff --git a/docs/1.0.0/components/images/textfield_filled_password_light.png b/docs/1.0.0/components/images/textfield_filled_password_light.png new file mode 100644 index 00000000..8e9b23d4 Binary files /dev/null and b/docs/1.0.0/components/images/textfield_filled_password_light.png differ diff --git a/docs/1.0.0/components/images/textfield_outlined_dark.png b/docs/1.0.0/components/images/textfield_outlined_dark.png new file mode 100644 index 00000000..11956a2f Binary files /dev/null and b/docs/1.0.0/components/images/textfield_outlined_dark.png differ diff --git a/docs/1.0.0/components/images/textfield_outlined_light.png b/docs/1.0.0/components/images/textfield_outlined_light.png new file mode 100644 index 00000000..66be0c8c Binary files /dev/null and b/docs/1.0.0/components/images/textfield_outlined_light.png differ diff --git a/docs/1.0.0/components/images/textfield_outlined_password_dark.png b/docs/1.0.0/components/images/textfield_outlined_password_dark.png new file mode 100644 index 00000000..9a0b29cc Binary files /dev/null and b/docs/1.0.0/components/images/textfield_outlined_password_dark.png differ diff --git a/docs/1.0.0/components/images/textfield_outlined_password_light.png b/docs/1.0.0/components/images/textfield_outlined_password_light.png new file mode 100644 index 00000000..94e761a7 Binary files /dev/null and b/docs/1.0.0/components/images/textfield_outlined_password_light.png differ diff --git a/docs/1.0.0/components/listsItem.md b/docs/1.0.0/components/listsItem.md new file mode 100644 index 00000000..144d2bb0 --- /dev/null +++ b/docs/1.0.0/components/listsItem.md @@ -0,0 +1,120 @@ +--- +layout: detail +title: List items +description: Lists are continuous, vertical indexes of text or images. +--- + +
**On this page** + +* Table of contents +{:toc} + +--- + +## Specifications references + +- [Design System Manager - Lists](https://system.design.orange.com/0c1af118d/p/72cb84-lists/b/31df1f) +- [Material Design - Lists](https://material.io/components/lists/) + +## Accessibility + +_Soon available_ + +## Variants + +### Checkbox list + +A ListTile with a Checkbox. In other words, a checkbox with a label. +The entire list tile is interactive: tapping anywhere in the tile toggles the checkbox. + +![Checkbox](images/checkboxe_list_light.png) ![Checkbox dark](images/checkboxe_list_dark.png) + +#### Flutter implementation + +The library offers the `OdsListCheckbox` to display lists items. + +In your screen you can use `OdsListCheckbox` : + +```dart +return OdsListCheckbox( + title: "Enabled" + checked: true, + onCheckedChange: (Options? value) {}, + enabled: true, // Optional. True by default + indeterminate: true, // Optional. False by default +) +``` + +##### OdsListCheckbox API + +Parameter | Default value | Description +-- | -- | -- +`title: String` | | The text of the list item +`checked: bool` | | Controls checked state of the checkbox +`onCheckedChange: (bool?)? Callback ` | `null` | Callback invoked on checkbox click. If `null`, then this is passive and relies entirely on a higher-level component to control the checked state. +`enabled: bool?` | `true` | Controls enabled state of the checkbox. When `false`, this checkbox will not be clickable. +`indeterminate: bool?` | `false` | Controls enabled state of the checkbox + +### Switch list + +A ListTile with a Switch. In other words, a switch button with a label. +The entire list tile is interactive: tapping anywhere in the tile toggles the switch button. + +![ListsSwitch](images/lists_switch_light.png) ![ListsSwitch dark](images/lists_switch_dark.png) + +### Flutter implementation + +In your screen you can use: + +```dart +return OdsListSwitch( + title: "Enabled", + checked: true, + onCheckedChange = { }, + icon: true, // Optional. False by default + enabled: true, // Optional. True by default +) +``` + +#### OdsListSwitch API + +Parameter | Default value | Description +-- | -- | -- +`title: String` | | The text of the list item +`checked: bool` | | Controls checked state of the switch +`onCheckedChange: (bool?)? Callback ` | `null` | Callback invoked on switch click. If `null`, then this is passive and relies entirely on a higher-level component to control the checked state. +`icon: bool?` | `false` | Icon displayed in the switch button +`enabled: bool?` | `true` | Controls enabled state of the checkbox. When `false`, this switch will not be clickable. + +### RadioButtons list + +A ListTile with a Radio Button. In other words, a radio button with a label. +The entire list tile is interactive: tapping anywhere in the tile toggles the radio button. + +![ListsRadioButton](images/lists_radio_button_light.png) ![ListsRadioButton dark](images/lists_radio_button_dark.png) + +### Flutter implementation + +In your screen you can use: + +```dart +enum Options { option1, option2, option3 } +Options? _selectedOption = Options.option1; + +return OdsListRadioButton( + text: "Enabled", + value: Options.option1, + groupValue: _selectedOption, + onCheckedChange: (value) {}, +) +``` + +#### OdsListRadioButton API + +Parameter | Default value | Description +-- | -- | -- +`text: String?` | | The primary content of the list tile +`value: T` | | The value represented by this radio button +`groupValue: T? ` | | The currently selected value for a group of radio buttons. +`onCheckedChange: ((value: T?) -> Callback)?` | `null` | Called when the user selects this radio button. The radio button passes [value] as a parameter to this callback. The radio button does not actually change state until the parent widget rebuilds theradio button with the new [groupValue]. If null, the radio button will be displayed as disabled. The provided callback will not be invoked if this radio button is already selected. +`enabled: bool? ` | `false` | Controls the enabled state of the radio button. When false, this button will not be clickable. diff --git a/docs/1.0.0/components/listsItem_docs.md b/docs/1.0.0/components/listsItem_docs.md new file mode 100644 index 00000000..5af3c0e0 --- /dev/null +++ b/docs/1.0.0/components/listsItem_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: List item +content_page: listsItem.md +--- diff --git a/docs/1.0.0/components/menus.md b/docs/1.0.0/components/menus.md new file mode 100644 index 00000000..b9a927a3 --- /dev/null +++ b/docs/1.0.0/components/menus.md @@ -0,0 +1,109 @@ +--- +layout: detail +title: Menus +description: Menus appear from a button, action, or other control. It contains at least 2 items that can affect the app, the view or elements within the view. +--- + +
**On this page** + +* Table of contents +{:toc} + +--- + +## Specifications references + +- [Design System Manager - Menus](https://system.design.orange.com/0c1af118d/p/23bbce-menus/b/215393) +- [Material Design - Menus](https://m3.material.io/components/menus/overview) + +## Accessibility + +Please follow [accessibility criteria for development](https://m3.material.io/components/menus/accessibility). + +The icons which can be displayed in a dropdown menu are always associated to a text so they don't need a content description. + +## Variants + +### Dropdown menu + +A dropdown menu is a compact way of displaying multiple choices. It appears upon interaction with an element (such as an icon or button) or when users perform a specific action. + +![Dropdown menu light](images/menu_dropdown_light.png) ![Dropdown menu dark](images/menu_dropdown_dark.png) + +#### Flutter Implementation + +The library offers an `OdsDropdownMenu` container composable in which you can add `OdsDropdownMenu.Item` or `OdsDivider` as shown in the following example: + +```dart +return OdsDropdownMenu( + items: [ + OdsDropdownMenuItem( + text: "Summer Salad", + value: "Summer Salad", + enabled: false, //Optional by default true + icon: const Icon(Icons.coffee) // Optional + ), + ], + selectedItem: (value) { + print('$value'); + }, +); +``` + +##### OdsDropdownMenu API + +Parameter | Default value | Description +-- | -- | -- +`items: List>` | | Items displayed into the dropdown menu +`selectedItem: Function(T?)?` | | Selected item displayed +{:.table} + +##### OdsDropdownMenuItem API + +Parameter | Default value | Description +-- | -- | -- +`text: String` | | Typically a Text +`value: T?` | | The value that will be returned by showMenu if this entry is selected. +`enabled: bool?` | `true` | Whether the user is permitted to select this item. +`icon: Widget?` | `null` | Typically a single-line ListTile for menus with icons. +{:.table} + +### Exposed dropdown menu + +Exposed dropdown menus display the currently selected menu item above the menu. This is a combination of a text field and a menu. + +![Exposed dropdown menu light](images/menu_exposed_dropdown_light.png) ![Exposed dropdown menu dark](images/menu_exposed_dropdown_dark.png) + +#### Flutter Implementation + +To display an exposed dropdown menu, you can use the `OdsExposedDropdownMenu` composable. As shown below, you should provide a list of `OdsExposedDropdownMenu.Item` corresponding to the items displayed in the menu (with or without icons). + +```dart +return OdsExposedDropdownMenu( + label: "Recipe", + enabled: true, // Optional by default true + items: >[ + DropdownMenuEntry( + value: "Summer Salad",, + label: "Summer Salad",, + leadingIcon: const Icon(Icons.coffee), // Optional + ), + ], + selectedItem: (value) { + setState(() { + print('$value'); + }); + }, +); + + +``` + +##### OdsExposedDropdownMenu API + +Parameter | Default value | Description +-- | -- | -- +`label: String` | | Label of the exposed menu text field +`items: List` | | Items displayed into the dropdown menu +`selectedItem: Function(T?)?` | | Selected item displayed into the text field +`enabled: Boolean` | `true` | Controls the enabled state of the dropdown menu. When `false`, the dropdown menu text field will be neither clickable nor focusable, visually it will appear in the disabled state. diff --git a/docs/1.0.0/components/menus_docs.md b/docs/1.0.0/components/menus_docs.md new file mode 100644 index 00000000..f1e8008f --- /dev/null +++ b/docs/1.0.0/components/menus_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Menus +content_page: menus.md +--- diff --git a/docs/1.0.0/components/navigationBar.md b/docs/1.0.0/components/navigationBar.md new file mode 100644 index 00000000..934c2455 --- /dev/null +++ b/docs/1.0.0/components/navigationBar.md @@ -0,0 +1,91 @@ +--- +layout: detail +title: Bars - navigation +description: Navigation bar with Orange branding +--- + +--- + +**Page Summary** + +* Table of contents +{:toc} + +--- + +## Specifications references + +- [Design System Manager - Navigation bars](https://system.design.orange.com/0c1af118d/p/71767c-navigation-bars/b/73e579) +- [Material Design - Navigation bars](https://m3.material.io/components/navigation-bar/overview) +- Technical documentation soon available + +## Accessibility + +Please follow [accessibility criteria for development](https://m3.material.io/components/navigation-bar/accessibility) + + +## Implementation + + ![BottomNavigation light](images/navigation_bar_light.png) + + ![BottomNavigation dark](images/navigation_bar_dark.png) + +> **Flutter implementation** + +In your screen, use the `OdsNavigationBar`. It should contain multiple `OdsNavigationItems`. + +Here is an example: + +```dart +late int selectedIndex = 0; + +return OdsNavigationBar( + selectedIndex: selectedIndex, + onDestinationSelected: (index) { + setState(() { + selectedIndex = index; + }); + }, + destinations: _destinations, +) +``` + +> **OdsNavigationItem implementation** + +You can add a native Flutter icons, an svg or png image : identify the 3 examples based on your need to use icons + +Source code: + +```dart +List _destinations(BuildContext context) { + return [ + OdsNavigationItem( + context: context, + label: "Cooking", + icon: "assets/recipes/ic_cooking_pot.svg", // Extension svg + badge: "3", // Optional, line can be removed if you don't need any badge + ), + OdsNavigationItem( + context: context, + label: "Cooking", + icon: "assets/recipes/ic_cooking_pot.png", // Extension png + ), + OdsNavigationItem( + context: context, + label: "Coffee", + icon: Icon(Icons.coffee_sharp), // Widget Icon + ), + ... + ]; +} +``` + +## Component specific tokens + +##### OdsNavigationBar API + +Parameter | Default value | Description +-- | -- | -- +`selectedIndex: int` | | The index of the currently selected destination. +`destinations: List` | | The list of destinations to display. +`onDestinationSelected: Function(int)?` | `null` | The callback function called when a destination is selected. diff --git a/docs/1.0.0/components/navigationBar_docs.md b/docs/1.0.0/components/navigationBar_docs.md new file mode 100644 index 00000000..b0f67733 --- /dev/null +++ b/docs/1.0.0/components/navigationBar_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Bars - navigation +content_page: navigationBar.md +--- diff --git a/docs/1.0.0/components/navigation_rail.md b/docs/1.0.0/components/navigation_rail.md new file mode 100644 index 00000000..36b2c347 --- /dev/null +++ b/docs/1.0.0/components/navigation_rail.md @@ -0,0 +1,101 @@ +--- +layout: detail +title: Navigation Rail +description: Navigation rails let people switch between UI views on mid-sized devices. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Implementation](#implementation) + * [OdsNavigationRail](#odsnavigationrail) + * [Flutter implementation](#flutter-implementation) +* [OdsNavigationRail API](#odsnavigationrail-api) + +--- + +## Specifications references + +- [Design System Manager - Cards] - soon available +- [Material Design - Cards](https://m3.material.io/components/navigation-rail/) + +## Accessibility + +Please follow [accessibility criteria for development](https://m3.material.io/components/navigation-rail/accessibility) + +## Implementation + +### OdsNavigationRail + +This is a full width card containing elements arranged vertically with an image as first element. + + ![Navigation rail light](images/navigation_rail_light.png) ![Navigation dark](images/navigation_rail_dark.png) + +> **Flutter implementation** + +In your screen you can use `OdsNavigationRail` : + +```dart +late int selectedIndex = 0; + +return OdsNavigationRail( + selectedIndex: selectedIndex, + onDestinationSelected: (index) { + setState(() { + selectedIndex = index; + }); + }, + leadingIconFirst: firstIcon, // Optional null by default + leadingIconSecond: secondIcon, // Optional null by default + destinations: _destinations, +) +``` + +> **OdsNavigationRailItem implementation** + +Identify the 3 examples based on your need to use icons + +You can add : +- a native Flutter icons +- an svg +- a png image + +Source code: + +```dart +List _destinations(BuildContext context) { + return [ + OdsNavigationItem( + context: context, + label: "Cooking", + icon: "assets/recipes/ic_cooking_pot.svg", // Extension svg + badge: "3", // Optional, line can be removed if you don't need any badge + ), + OdsNavigationItem( + context: context, + label: "Cooking", + icon: "assets/recipes/ic_cooking_pot.png", // Extension png + ), + OdsNavigationItem( + context: context, + label: "Coffee", + icon: Icon(Icons.coffee_sharp), // Widget Icon + ), + ... + ]; +} +``` + +##### OdsNavigationRail API + +Parameter | Default value | Description +-- | -- | -- +`selectedIndex: int` | | The index into `destinations` for the current selected NavigationRailDestination or null if no destination is selected +`destinations: List` | | Defines the appearance of the button items that are arrayed within the navigation rail. +`onDestinationSelected: Function(int)?` | | Called when one of the destinations is selected. +`leadingIconFirst: Widget?` | `null` | The first leading widget in the rail that is placed above the destinations. +`leadingIconSecond: Widget?` | `null` | The second leading widget in the rail that is placed above the destinations. +{:.table} diff --git a/docs/1.0.0/components/navigation_rail_docs.md b/docs/1.0.0/components/navigation_rail_docs.md new file mode 100644 index 00000000..b4a6c6d6 --- /dev/null +++ b/docs/1.0.0/components/navigation_rail_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: navigation_rail.md +--- diff --git a/docs/1.0.0/components/progressIndicator.md b/docs/1.0.0/components/progressIndicator.md new file mode 100644 index 00000000..0ee2423f --- /dev/null +++ b/docs/1.0.0/components/progressIndicator.md @@ -0,0 +1,109 @@ +--- +layout: detail +title: Progress indicators +description: Progress indicators express an unspecified wait time or display the length of a process. +--- + +--- + +**Page Summary** + +* Table of contents +{:toc} + +--- + +## Specifications references + +- [Design System Manager - Progress indicators](https://system.design.orange.com/0c1af118d/p/085a98-progress-indicators/b/623d1d) +- [Material Design - Progress indicators](https://m3.material.io/components/progress-indicators/accessibility) +- Technical documentation soon available + +## Accessibility + +Please follow [accessibility criteria for development](https://m3.material.io/components/progress-indicators/accessibility) + +## Variants + +### Progress bar + +Progress bars, also called linear progress indicators, display progress by animating an indicator along the length of a fixed, +visible track. The behavior of the indicator is dependent on whether the progress of a process is +known. + +Linear progress indicators support both determinate and indeterminate operations. + +* Determinate operations display the indicator increasing in width + from 0 to 100% of the track, in sync with the process’s progress. +* Indeterminate operations display the indicator continually growing + and shrinking along the track until the process is complete. + + ![Progress bar light](images/progress_linear_light.png) + + ![Progress bar dark](images/progress_linear_dark.png) + +> **Flutter implementation** + +You can use the composable `OdsLinearProgressIndicator` like this: + +For a **determinate** linear progress indicator, provide the progress value: + +```dart +return OdsLinearProgressIndicator( + progress: 0.9, + label: 'Downloading ...', // Optional + icon: const Icon(Icons.download), // Optional + showCurrentValue: true, +) +``` + +For an **indeterminate** linear progress indicator, no need to provide a progress value: + +```dart +return OdsLinearProgressIndicator( + label: 'Downloading ...', // Optional + icon: const Icon(Icons.download), +); +``` + + +### Activity indicator + +Activity indicators, also called circular progress indicators, display progress by animating an indicator along an +invisible circular track in a clockwise direction. They can be applied directly +to a surface, such as a button or card. + +Circular progress indicators support both determinate and indeterminate +processes. + +* Determinate circular indicators fill the invisible, circular track with + color, as the indicator moves from 0 to 360 degrees. +* Indeterminate circular indicators grow and shrink in size while moving along + the invisible track. + +![Activity indicator light](images/progress_circular_light.png) ![Activity indicator dark](images/progress_circular_dark.png) + +> **Flutter implementation** + +You can use the `OdsCircularProgressIndicator` composable like this: + +- For a **determinate** circular progress indicator, provide the progress value: + +```dart +return OdsCircularProgressIndicator( + progress = 0.9, + label = "Downloading ..." // Optional +) +``` + +- For an **indeterminate** circular progress indicator, no need to provide a progress value: + +```dart +return OdsCircularProgressIndicator( + label = "Downloading ..." // Optional +) +``` + +## Component specific tokens + +_Soon available_ diff --git a/docs/1.0.0/components/progressIndicator_docs.md b/docs/1.0.0/components/progressIndicator_docs.md new file mode 100644 index 00000000..17b0c0b6 --- /dev/null +++ b/docs/1.0.0/components/progressIndicator_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Progress indicator +content_page: progressIndicator.md +--- diff --git a/docs/1.0.0/components/radioButtons.md b/docs/1.0.0/components/radioButtons.md new file mode 100644 index 00000000..279630aa --- /dev/null +++ b/docs/1.0.0/components/radioButtons.md @@ -0,0 +1,61 @@ +--- +layout: detail +title: Radio buttons +description: Radio button selection control allows the user to select options. +--- + +Use radio buttons to: + +* Select a single option from a list +* Expose all available options +* If available options can be collapsed, consider using a dropdown menu + instead, as it uses less space. + +
**On this page** + +* Table of contents +{:toc} + +--- + +## Specifications references + +- [Design System Manager - Selection controls](https://system.design.orange.com/0c1af118d/p/91bf00-radio-buttons/b/347e8d) +- [Material Design - Radio buttons](https://material.io/components/radio-buttons/) + +## Accessibility + +Please follow [accessibility criteria for development](https://a11y-guidelines.orange.com/en/mobile/android/development/). + +Radio buttons support content labeling for accessibility and are readable by +most screen readers, such as TalkBack. Text rendered in radio buttons is +automatically provided to accessibility services. Additional content labels are +usually unnecessary. + +## Implementation + +![RadioButton](images/radio_button_light.png) ![RadioButton dark](images/radio_button_dark.png) + +### Flutter code + +In your screen you can use: + +```dart +enum Options { option1, option2, option3 } +Options? _selectedOption = Options.option1; + +return OdsRadioButton( + value: Options.option1, + groupValue: _selectedOption, + onCheckedChange: (Options? value) {} +) +``` + +#### OdsRadioButton API + +Parameter | Default value | Description +-- | -- | -- +`value: T` | | The value represented by this radio button +`groupValue: T? ` | | The currently selected value for a group of radio buttons. +`onCheckedChange: ((value: T?) -> Callback)?` | `null` | Called when the user selects this radio button. The radio button passes [value] as a parameter to this callback. The radio button does not actually change state until the parent widget rebuilds theradio button with the new [groupValue]. If null, the radio button will be displayed as disabled. The provided callback will not be invoked if this radio button is already selected. +`enabled: bool? ` | false | Controls the enabled state of the radio button. When false, this button will not be clickable. diff --git a/docs/1.0.0/components/radioButtons_docs.md b/docs/1.0.0/components/radioButtons_docs.md new file mode 100644 index 00000000..f1de452c --- /dev/null +++ b/docs/1.0.0/components/radioButtons_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Radio buttons +content_page: radioButtons.md +--- diff --git a/docs/1.0.0/components/sheets_bottom.md b/docs/1.0.0/components/sheets_bottom.md new file mode 100644 index 00000000..2baa559a --- /dev/null +++ b/docs/1.0.0/components/sheets_bottom.md @@ -0,0 +1,51 @@ +--- +layout: detail +title: "Sheets: bottom" +description: Bottom Sheets are surfaces anchored to the bottom of the screen that present users supplement content. +--- + +Use Sheets bottom to: + +* Expose all complements options + +
**On this page** + +* Table of contents +{:toc} + +--- + +## Specifications references + +- [Design System Manager - Sheets](https://system.design.orange.com/0c1af118d/p/474c8d-sheets-bottom/b/16ad0b) +- [Material Design - Sheets: bottom](https://m3.material.io/components/bottom-sheets/overview) + +## Accessibility + +Please follow [accessibility criteria for development](https://m3.material.io/components/bottom-sheets/accessibility). + +## Implementation + +![BottomSheet light](images/sheetbottom_light.png) ![BottomSheet dark](images/sheetbottom_dark.png) + +The contents within a bottom sheet should follow their own accessibility guidelines, such as images having content descriptions set on them. + +### Flutter + +```dart +return Scaffold( + bottomSheet: OdsSheetsBottom( + sheetContent = { + // Put here the content of the sheet + }, + title: "Recipes", + ), +); +``` + +#### OdsSheetsBottom API [#](#odsheetbottom-api-) + +Parameter | Default value | Description +-- | -- | -- +`title: String` | | Title header of the bottom sheet +`sheetContent: Widget` | | Content of the bottom sheet diff --git a/docs/1.0.0/components/sheets_bottom_docs.md b/docs/1.0.0/components/sheets_bottom_docs.md new file mode 100644 index 00000000..02c9c021 --- /dev/null +++ b/docs/1.0.0/components/sheets_bottom_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Sheets bottom +content_page: sheets_bottom.md +--- diff --git a/docs/1.0.0/components/slider.md b/docs/1.0.0/components/slider.md new file mode 100644 index 00000000..c0a0cac0 --- /dev/null +++ b/docs/1.0.0/components/slider.md @@ -0,0 +1,123 @@ +--- +layout: detail +title: Sliders +description: Sliders allow users to make selections from a range of values. +--- + +--- + +**Page Summary** + +* Table of contents +{:toc} + +--- + +## Specifications references + +- [Design System Manager - Sliders](https://system.design.orange.com/0c1af118d/p/66b77a-sliders/b/10df4f) +- [Material Design - Sliders](https://material.io/components/sliders/) +- Technical documentation soon available + +## Accessibility + +Please follow [accessibility criteria for development](https://m3.material.io/components/sliders/accessibility) + +Sliders support setting content descriptors for use with screen readers. + +## Variants + +## Continuous slider + +Continuous sliders allow users to make meaningful selections that don’t require +a specific value. + +![Continuous slider](images/slider_continuous_light.png) ![Continuous slider dark](images/slider_continuous_dark.png) + +With icons: + +![Continuous slider with icons](images/slider_continuous_with_icon_light.png) ![Continuous slider with icons dark](images/slider_continuous_with_icon_dark.png) + + +In your screen you can use: + +```dart +return OdsSlider( + value: 20.0, +); +``` + +You can add icons to the continuous slider like this: + +```dart +return OdsSlider( + value: 20.0, + startIcon: Icon(Icons.volume_mute), + endIcon: Icon(Icons.volume_up), +); +``` + +## Continuous lockups slider + +![Continuous lockups slider](images/slider_continuous_lockups_light.png) ![Continuous lockups slider dark](images/slider_continuous_lockups_light.png) + +With icons: + +![Continuous lockups slider with icons](images/slider_continuous_lockups_with_icon_light.png) ![Continuous lockups slider with icons dark](images/slider_continuous_lockups_with_icon_dark.png) + + +In your screen you can use: + +```dart +return OdsSlider( + value: 20.0, + displayValue: 20.0.round().toString(), +); +``` + +You can add icons to the continuous lockups slider like this: + +```dart +return OdsSlider( + value: 20.0, + label: sliderValue.round().toString(), + leftIcon: Icon(Icons.volume_mute), + rightIcon: Icon(Icons.volume_up), +); +``` + +### Discrete slider + +Discrete sliders display a numeric value label upon pressing the thumb, which +allows a user to input an exact value. + +![Discrete slider](images/slider_discrete_light.png) ![Discrete slider dark](images/slider_discrete_dark.png) + +With icons: + +![Discrete slider with icon](images/slider_discrete_with_icon_light.png) ![Discrete slider with icon dark](images/slider_discrete_with_icon_dark.png) + +In your screen you can use: + +```dart +return OdsSlider( + value: 20.0, + steps: 10, +); +``` + +You can add icons to the discrete slider like this: + +```dart + return OdsSlider( + value: 20.0, + steps: 10, + leftIcon: Icon(Icons.volume_mute), + rightIcon: Icon(Icons.volume_up), +); +``` + +## Component specific tokens + +_Soon available_ + diff --git a/docs/1.0.0/components/slider_docs.md b/docs/1.0.0/components/slider_docs.md new file mode 100644 index 00000000..29743fb1 --- /dev/null +++ b/docs/1.0.0/components/slider_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Slider +content_page: slider.md +--- diff --git a/docs/1.0.0/components/snackbars.md b/docs/1.0.0/components/snackbars.md new file mode 100644 index 00000000..dba997e8 --- /dev/null +++ b/docs/1.0.0/components/snackbars.md @@ -0,0 +1,93 @@ +--- +layout: detail +title: Snackbars +description: Snackbars provide brief messages about app processes at the bottom of the screen. +--- + +Snackbars inform users of a process that an app has performed or will perform. +They appear temporarily, towards the bottom of the screen. They shouldn’t +interrupt the user experience, and they don’t require user input to disappear. +They disappear either after a timeout or after a user interaction elsewhere on +the screen, but can also be swiped off the screen. + +Snackbars can also offer the ability to perform an action, such as undoing an +action that was just taken, or retrying an action that had failed. + +
**On this page** + +* Table of contents +{:toc} + +--- + +## Specifications references + +- [Design System Manager - Snackbars](https://system.design.orange.com/0c1af118d/p/259fde-snackbars/b/28c190) +- [Material Design - Snackbars](https://m3.material.io/components/snackbar/overview) + +## Accessibility + +Please follow [accessibility criteria for development](https://m3.material.io/components/snackbar/accessibility). + +Snackbars support content labeling for accessibility and are readable by most +screen readers, such as TalkBack. Text rendered in snackbars is automatically +provided to accessibility services. Additional content labels are usually +unnecessary. + +## Implementation + +### Variant single lines + +![Snackbar light](images/snackbar_single_light.png) + +![Snackbar dark](images/snackbar_single_dark.png) + +With action button: + +![Snackbar with action light](images/snackbar_single_with_action_light.png) + +![Snackbar with action dark](images/snackbar_single_with_action_dark.png) + + +### Variant two lines + + +![Snackbar with two lines light](images/snackbar_two_lines_light.png) + +![Snackbar with two lines dark](images/snackbar_two_lines_dark.png) + +### Variant longer action button + + +![Snackbar with longer action light](images/snackbar_longer_action_light.png) + +![Snackbar with longer action dark](images/snackbar_longer_action_dark.png) + +#### Flutter code + +We advise you to use a `Scaffold` to add an `OdsSnackbars` in order to make sure everything is displayed together in the right place according to Material Design. + +Then use Ods Snackbar with the correct method to display the snackbar with `showSnackbarSingleLine`, `showSnackbarTwoLines` or `showSnackbarLongerAction` : + +```dart +return OdsButton( + text: 'Show snackbar', + onClick: () { + OdsSnackbar.showSnackbarSingleLine( + context: context, + message: "This is the message of the Snackbar.", + actionLabel: "ACTION", // Optional + onPressed: () {}, // Optional + ); + }, +); +``` + +##### OdsSnackbar API + +Parameter | Default value | Description +-- | -- | -- +`message: String` | | State of this component to read and show `OdsSnackbar` accordingly. +`context: Context` | `BuildContext` | `Context` applied to the snackbar +`actionLabel: Button` | | The button action label +`onPressed: Button` | | The callback to be called when the button is pressed diff --git a/docs/1.0.0/components/snackbars_docs.md b/docs/1.0.0/components/snackbars_docs.md new file mode 100644 index 00000000..fca7b1d2 --- /dev/null +++ b/docs/1.0.0/components/snackbars_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Snackbar +content_page: snackbars.md +--- diff --git a/docs/1.0.0/components/switches.md b/docs/1.0.0/components/switches.md new file mode 100644 index 00000000..7dbf03fd --- /dev/null +++ b/docs/1.0.0/components/switches.md @@ -0,0 +1,61 @@ +--- +layout: detail +title: Switches +description: Switch selection control allows the user to select options. +--- + +Switches toggle the state of a single setting on or off. They are the preferred +way to adjust settings on mobile. + +
**On this page** + +* Table of contents +{:toc} + +--- + +## Specifications references + +- [Design System Manager - Selection controls](https://system.design.orange.com/0c1af118d/p/58c374-switches/b/516c4e) +- [Material Design - Switch](https://m3.material.io/components/switch/overview) + +## Accessibility + +Please follow [accessibility criteria for development](https://m3.material.io/components/switch/accessibility). + +Switches support content labeling for accessibility and are readable by most +screen readers, such as screen reader. Text rendered in switches is automatically +provided to accessibility services. Additional content labels are usually +unnecessary. + +## Implementation + +![Switch](images/switch_light.png) ![Switch dark](images/switch_dark.png) + +### Flutter code + +In your screen you can use: + +```dart +bool isChecked = true; + +return OdsSwitch( + checked: isChecked, + onCheckedChange: (value) { + setState(() { + isChecked = value; + }); + }, + icon: true, // Optional. False by default + enabled: true, // Optional. True by default +) +``` + +#### OdsSwitch API + +Parameter | Default value | Description +-- | -- | -- +`checked: bool` | | Controls the checked state of the switch +`onCheckedChange: (bool?)? Callback` | `null` | Callback invoked on switch check. If `null`, then this is passive and relies entirely on a higher-level component to control the "checked" state. +`icon: bool?` | `false` | Icon displayed in the switch button +`enabled: bool?` | `true` | Controls the enabled state of the switch. When `false`, the switch will not be checkable and appears disabled. diff --git a/docs/1.0.0/components/switches_docs.md b/docs/1.0.0/components/switches_docs.md new file mode 100644 index 00000000..04c9c0f1 --- /dev/null +++ b/docs/1.0.0/components/switches_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Switches +content_page: switches.md +--- diff --git a/docs/1.0.0/components/tabBar.md b/docs/1.0.0/components/tabBar.md new file mode 100644 index 00000000..75fe75f5 --- /dev/null +++ b/docs/1.0.0/components/tabBar.md @@ -0,0 +1,150 @@ +--- +layout: detail +title: Tabs +description: Tabs organize content across different screens, data sets, and other interactions. +--- + +--- + +**Page Summary** + +* Table of contents +{:toc} + +--- + +## Specifications references + +- [Design System Manager - Tabs](https://system.design.orange.com/0c1af118d/p/04f537-tabs/b/3536fb) +- [Material Design - Tabs](https://material.io/components/tabs/) +- Technical documentation soon available + +## Accessibility + +Please follow [accessibility criteria for development](https://material.io/components/tabs/accessibility) + + +## Variants + +### Fixed tabs + +Fixed tabs display all tabs on one screen, with each tab at a fixed width. The +width of each tab is determined by dividing the number of tabs by the screen +width. They don’t scroll to reveal more tabs; the visible tab set represents the +only tabs available. + + > **Flutter implementation** + +In Compose, the fixed tabs should be added inside of an `OdsTabRow`. +The used composable for tab depends on the type of tabs to display: classic `OdsTab` or `OdsLeadingIconTab`. + + ![Fixed tabs light](images/tabs_fixed_light.png) + + ![Fixed tabs dark](images/tabs_fixed_dark.png) + +**`OdsTab` composable:** + +This composable allows to display: +- an icon only tab +- a text label only tab +- a tab with an icon on top of text label + +```dart +class _NavBarDemoState extends State<_NavBarDemo> { + late int selectedIndex; + + @override + void initState() { + super.initState(); + selectedIndex = 1; + } + + @override + Widget build(BuildContext context) { + List navigationDestinations = _destinations(context).sublist(0, 3); + + return SafeArea( + child: SingleChildScrollView( + padding: EdgeInsets.only(bottom: 100), + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + /// Screens for each navigation destination + SizedBox( + height: 110, + child: IndexedStack( + index: selectedIndex, + children: [ + Center(child: Text('Favourites')), + Center(child: Text('Calls')), + Center(child: Text('Alerts')), + ], + ), + ), + + /// Navigation Bar icon + Padding( + padding: EdgeInsets.all(spacingM), + child: Align( + alignment: Alignment.center, + child: OdsNavigationBar( + selectedIndex: selectedIndex, + onDestinationSelected: (index) { + setState(() { + selectedIndex = index; + }); + }, + destinations: navigationDestinations, + ), + ), + ), + ], + ), + ), + ); + } +} +``` + +**`OdsLeadingIconTab` composable:** + + +If icons are provided in SVG format the system does not apply right color on images if selected. So we need to provide icon: and selectedIcon: parameters with right colorFilter using theme like this : + +```dart + List _destinations(BuildContext context) { + var colorScheme = Theme.of(context).colorScheme; + + var activeColorFilter = + ColorFilter.mode(colorScheme.primary, BlendMode.srcIn); + var colorFilter = ColorFilter.mode(colorScheme.secondary, BlendMode.srcIn); + return [ + NavigationDestination( + tooltip: '', + icon: SvgPicture.asset("assets/recipes/ic_favourites.svg", + colorFilter: colorFilter), + selectedIcon: SvgPicture.asset("assets/recipes/ic_favourites.svg", + colorFilter: activeColorFilter), + label: "Favourites"), + NavigationDestination( + tooltip: '', + icon: SvgPicture.asset("assets/recipes/ic_calls.svg", + colorFilter: colorFilter), + selectedIcon: SvgPicture.asset("assets/recipes/ic_calls.svg", + colorFilter: activeColorFilter), + label: "Calls"), + NavigationDestination( + tooltip: '', + icon: SvgPicture.asset("assets/recipes/ic_alertes.svg", + colorFilter: colorFilter), + selectedIcon: SvgPicture.asset("assets/recipes/ic_alertes.svg", + colorFilter: activeColorFilter), + label: "Alertes"), + ]; + } +``` + + +## Component specific tokens + +_Soon available_ diff --git a/docs/1.0.0/components/tabBar_docs.md b/docs/1.0.0/components/tabBar_docs.md new file mode 100644 index 00000000..5de0c7de --- /dev/null +++ b/docs/1.0.0/components/tabBar_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Tab bar +content_page: tabBar.md +--- diff --git a/docs/1.0.0/components/textFields.md b/docs/1.0.0/components/textFields.md new file mode 100644 index 00000000..cd07d518 --- /dev/null +++ b/docs/1.0.0/components/textFields.md @@ -0,0 +1,142 @@ +--- +layout: detail +title: Text fields +description: Text fields let users enter and edit text. +--- + +
**On this page** + +* Table of contents +{:toc} + +--- + +## Specifications references + +- [Design System Manager - Text fields](https://system.design.orange.com/0c1af118d/p/86dc02-text-fields/b/97c28f) +- [Material Design - Text fields](https://material.io/components/text-fields/) + +## Accessibility + +Please follow [accessibility criteria for development](https://m3.material.io/components/text-fields/accessibility). + +Android's text field component APIs support both label text and helper text for informing the user +as to what information is requested for a text field. + +## Variants + +### Text field [#](#text-field-) + +A text field can be filled or outlined. +The outlined version is more accessible in term of contrast. This is the reason why Orange text fields are outlined. + +![TextField outlined light](images/textfield_outlined_light.png) +![TextField outlined dark](images/textfield_outlined_dark.png) + + +#### Flutter implementation + +To add a text field in your composable screen you can use the `OdsTextField` composable as follow: + +```dart +final TextEditingController controllerTextField = TextEditingController(); + +return OdsTextField( + controller: controllerTextField, + enabled: true, //Optional by default false + errorMessage: "Error message", + keyboardType: TextInputType.text, + keyboardActions: TextInputAction.done, + label: "Label", + trailingIcon: IconButton( + icon: const Icon(Icons.clear), + onPressed: () => controllerTextField.clear(), + ), + trailingText: "Units", + leadingIcon: const Icon(Icons.search), + characterCounter: 20, + maxLines: 5, + textCapitalization: true, //Optional by default false +); + +``` + +The library provides several `keyboardActions: TextInputAction` that you can use an action the user has requested the text input control to perform +Please follow [TextInputAction](https://api.flutter.dev/flutter/services/TextInputAction.html). + +The library provides several `keyboardType: TextInputType` that you can use type of information for which to optimize the text input control +Please follow [TextInputType](https://api.flutter.dev/flutter/services/TextInputType-class.html). + +##### OdsTextField API [#](#odstextfield-api-) + +Parameter | Default value | Description +-- | -- | -- +`onValueChange: (String)? -> Void` | | Callback that is triggered when the input service updates the text. An updated text comes as a parameter of the callback. +`trailingIcon: Widget?` | `null` | Trailing icon to display at the end of the text field +`trailingText: Widget?` | `null` | Trailing text to display at the end of the text field +`enabled: Boolean` | `true` | Controls the enabled state of the text field. When `false`, the text field will be neither editable nor focusable, the input of the text field will not be selectable, visually text field will appear in the disabled UI state. +`readOnly: Boolean` | `false` | Controls the editable state of the text field. When `true`, the text field can not be modified, however, a user can focus it and copy text from it. Read-only text fields are usually used to display pre-filled forms that user can not edit. +`label: String?` | `null` | Label to be displayed inside or outside the text field. +`placeholder: String?` | `null` | Placeholder to be displayed when the text field is in focus and the input text is empty. +`leadingIcon: Widget?` | `null` | Icon displayed at the beginning of the text field container +`errorMessage: String?` | `null` | Message displayed below the text field when it is in error. +`keyboardType: TextInputType` | | Software keyboard options that contains configuration such as `KeyboardType` and `ImeAction` +`keyboardActions: TextInputAction` | | When the input service emits an IME action, the corresponding callback is called. +`maxLines: Int` | `null` | Maximum number of visible lines. Should be equal or greater than 1. Note that this parameter will be ignored and instead maxLines will be set to 1 if `singleLine` is set to `true`. +`characterCounter: Int?` | `null` | Character counter displayed below the text field + +### Password text field [#](#password-text-field-) + +Password text field is a text field implementation that includes password visual transformation and optional visualisation icon. + +![TextField outlined password light](images/textfield_outlined_password_light.png) +![TextField outlined password dark](images/textfield_outlined_password_dark.png) + +#### Flutter implementation + +To add a password text field in your composable screen you can use the `OdsPasswordTextField` composable as follow: + +```dart +final TextEditingController controllerTextField = TextEditingController(); + +return OdsPasswordTextField( + controller: controllerTextField, + enabled: true, //Optional by default false + errorMessage: "Error message", + keyboardType: TextInputType.text, + keyboardActions: TextInputAction.done, + label: "Label", + trailingIcon: IconButton( + icon: const Icon(Icons.clear), + onPressed: () => controllerTextField.clear(), + ), + trailingText: "Units", + leadingIcon: const Icon(Icons.search), + characterCounter: 20, + textCapitalization: true, //Optional by default false + visualisationIcon: true, +); +``` + +##### OdsPasswordTextField API [#](#odspasswordtextfield-api-) + +Parameter | Default value | Description +-- | -- | -- +`onValueChange: (String)? -> Void` | | Callback that is triggered when the input service updates the text. An updated text comes as a parameter of the callback. +`trailingIcon: Widget?` | `null` | Trailing icon to display at the end of the text field +`trailingText: Widget?` | `null` | Trailing text to display at the end of the text field +`enabled: Boolean` | `true` | Controls the enabled state of the text field. When `false`, the text field will be neither editable nor focusable, the input of the text field will not be selectable, visually text field will appear in the disabled UI state. +`readOnly: Boolean` | `false` | Controls the editable state of the text field. When `true`, the text field can not be modified, however, a user can focus it and copy text from it. Read-only text fields are usually used to display pre-filled forms that user can not edit. +`visualisationIcon: Boolean` | `true` | Controls the display of the eye icon to allow showing/hiding password +`label: String?` | `null` | Label to be displayed inside or outside the text field. +`placeholder: String?` | `null` | Placeholder to be displayed when the text field is in focus and the input text is empty. +`leadingIcon: Widget?` | `null` | Icon displayed at the beginning of the text field container +`errorMessage: String?` | `null` | Message displayed below the text field when it is in error. +`keyboardType: TextInputType` | | Software keyboard options that contains configuration such as `KeyboardType` and `ImeAction` +`keyboardActions: TextInputAction` | | When the input service emits an IME action, the corresponding callback is called. +`maxLines: Int` | `null` | Maximum number of visible lines. Should be equal or greater than 1. Note that this parameter will be ignored and instead maxLines will be set to 1 if `singleLine` is set to `true`. +`characterCounter: Int?` | `null` | Character counter displayed below the text field + +## Custom theme configuration + +Comming soon.. diff --git a/docs/1.0.0/components/textFields_docs.md b/docs/1.0.0/components/textFields_docs.md new file mode 100644 index 00000000..538518f2 --- /dev/null +++ b/docs/1.0.0/components/textFields_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: TextFields +content_page: textFields.md +--- diff --git a/docs/1.0.0/components/textInput.md b/docs/1.0.0/components/textInput.md new file mode 100644 index 00000000..a57f46df --- /dev/null +++ b/docs/1.0.0/components/textInput.md @@ -0,0 +1,64 @@ +--- +layout: detail +title: Text fields and text editor +description: Text fields and text editor let users enter and edit text. +--- + +--- + +**Page Summary** + +* Table of contents +{:toc} + +--- + +## Specifications references + +- [Design System Manager - Text fields](https://system.design.orange.com/0c1af118d/p/47d389-text-fields/b/461794) +- [Apple guideline - Text fields](https://developer.apple.com/design/human-interface-guidelines/components/selection-and-input/text-fields) +- [Apple guideline - Edit Menu](https://developer.apple.com/design/human-interface-guidelines/components/menus-and-actions/edit-menus) +- [Apple doc - Text input](https://developer.apple.com/documentation/swiftui/text-input-and-output) +- [Apple doc - Text Field](https://developer.apple.com/documentation/swiftui/textfield) +- [Apple doc - Secure Text Field](https://developer.apple.com/documentation/swiftui/securefield) +- [Apple doc - Text Editor](https://developer.apple.com/documentation/swiftui/i/texteditor) + +## Accessibility + +Please follow [accessibility criteria for development](https://a11y-guidelines.orange.com/en/mobile/ios/) + +## Variants + +For all variants, we provide the `odsTextFieldStyle` view modifier to apply font, collors (background, tint) provided by the theme. + +### Text field + +A control that displays an editable text interface. + +```swift +TextField("A text field", text: $textToEdit) + .odsTextFieldStyle() +``` + + ### Secure text field + +Use a `SecureField` when you want behavior similar to a ``TextField``, but you don't want the user's text to be visible. Typically, you use this for entering passwords and other sensitive information. + +```swift +SecureField("Secure text", text: $textToEdit) + .odsTextFieldStyle() +``` + +### Text editor + +A text editor view allows you to display and edit multiline, scrollable text in your app's user interface. + +```swift +TextEditor(text: $textToEdit) + .odsTextFieldStyle() +``` + +## Text selection + +Text selection is available when text field or text editor is entering in edition mode. This is not a custom component but just a way to apply right style (customize with colors, font provided by theme). + diff --git a/docs/1.0.0/components/textInput_docs.md b/docs/1.0.0/components/textInput_docs.md new file mode 100644 index 00000000..352e553a --- /dev/null +++ b/docs/1.0.0/components/textInput_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Text input +content_page: textInput.md +--- diff --git a/docs/1.0.0/components/toolBar.md b/docs/1.0.0/components/toolBar.md new file mode 100644 index 00000000..61f35099 --- /dev/null +++ b/docs/1.0.0/components/toolBar.md @@ -0,0 +1,108 @@ +--- +layout: detail +title: Bars - tool +description: Tool bars with Orange branding +--- + +--- + +**Page Summary** + +* Table of contents +{:toc} + +--- + +## Specifications references + +- [Design System Manager - Bars: tool](https://system.design.orange.com/0c1af118d/p/06c413-bars-tool/b/951e5c) +- [Apple guideline - Tool bars](https://developer.apple.com/design/human-interface-guidelines/ios/bars/toolbars/) + +## Accessibility + +Please follow [accessibility criteria for development](https://a11y-guidelines.orange.com/en/mobile/ios/) + +## Variants + +A tool bar allows users to do specific actions regarding the entire page. It is placed at the bottom of the screen. It can display 2 to 5 icon controls or 2 to 3 label entries. + +### With label items + +A tool bar can display 2 to 3 label entries. + +Example with 3 label entries in toolBar : + +```swift + +let description1 = ODSToolbarLabelDesription(text: "Action 1") { } +let description2 = ODSToolbarLabelDesription(text: "Action 2") { } +let description3 = ODSToolbarLabelDesription(text: "Action 3") { } + +let labelItems = ODSToolbarLabeledItems(description1: description1, + description2: description2, + description3: description3) +NavigationView { + ContentView() + .navigationBarTitle("", displayMode: .inline) + .navigationBarHidden(true) + .odsToolBar(items: labelItems) +} + +// To remove navigation bar, use following modifiers +// .navigationBarHidden(true) + +``` + +### With icon items + +A tool bar can display 2 to 5 icon controls +```swift + +let description1 = ODSToolbarIconDesription(systemName: "plus") { } +let description2 = ODSToolbarIconDesription(systemName: "square.and.arrow.up") { } +let description3 = ODSToolbarIconDesription(systemName: "square.and.pencil") { } +let description4 = ODSToolbarIconDesription(systemName: "folder") { } +let description5 = ODSToolbarIconDesription(systemName: "trash") { } + +let iconItems = ODSToolbarIconsItems(description1: description1, + description2: description2, + description3: description3, + description4: description4, + description5: description5) +NavigationView { + ContentView() + .navigationBarTitle("", displayMode: .inline) + .navigationBarHidden(true) + .odsToolBar(items: iconItems) +} + +// To remove navigation bar, use following modifiers +// .navigationBarHidden(true) + +``` + +## Remarks + +As toolbar colors depends on theme, don't forget to add it to enviroment and call the view modifier __.toolBarColors(for:)__ to apply colors provided by the theme. + +Two solutions: + +- Directy on the root view + +```swift +let theme = YourTheme() + +ContentViewWithToolBar() +.environment(\.theme, theme) +.toolBarColors(for: theme) +``` + +- Or using __ODSThemeableView__ view as a root view: + +```swift +let theme = YourTheme() + +ODSThemeableView(theme: yourTheme) { + ContentViewWithToolBar() +} +``` diff --git a/docs/1.0.0/components/toolBar_docs.md b/docs/1.0.0/components/toolBar_docs.md new file mode 100644 index 00000000..06dfff8a --- /dev/null +++ b/docs/1.0.0/components/toolBar_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Tool bar +content_page: toolBar.md +--- diff --git a/docs/1.0.0/guidelines/spacings.md b/docs/1.0.0/guidelines/spacings.md new file mode 100644 index 00000000..0e67c796 --- /dev/null +++ b/docs/1.0.0/guidelines/spacings.md @@ -0,0 +1,66 @@ +--- +layout: detail +title: Spacings +--- +--- + +**Page Summary** + +* Table of contents +{:toc} + +--- + +## Specifications references + +- [Design System Manager - Spacings]() +- [Material guideline - Layout](https://m3.material.io/foundations/layout/understanding-layout/spacing) + +## Usage + +The spacing scale increases in small increments needed to describe both internal and external spacing relationships. Spacing tokens can be applied as padding and margins. + +### Apply spacing for magin + +Apply the spacing to get magin arround element like this: + +``` dart +// Add a padding of 16px arround the text in the button +ElevatedButton( + onPressed: () { + // Add your action here + }, + child: Padding( + padding: EdgeInsets.all(spacingM), + child: Text("ButtonText"), + ), +), + + +// Add a magin of 16px (leading and trailing) +Container( + margin: EdgeInsets.symmetric(horizontal: spacingM), + child: Column( + children: [ + Text("Title"), + Text("A very long text for description in the main view"), + ], + ), +), + + +``` + +### Apply spacing for padding + +Apply the spacing to separate elements like this: + +``` dart +Row( + children: [ + Icon(Icons.favorite), + SizedBox(width: ODSSpacing.m), + Text("Some text"), + ], +) +``` diff --git a/docs/1.0.0/guidelines/spacings_docs.md b/docs/1.0.0/guidelines/spacings_docs.md new file mode 100644 index 00000000..9f829894 --- /dev/null +++ b/docs/1.0.0/guidelines/spacings_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Spacings +content_page: spacings.md +--- diff --git a/docs/1.0.0/guidelines/typography.md b/docs/1.0.0/guidelines/typography.md new file mode 100644 index 00000000..5019c000 --- /dev/null +++ b/docs/1.0.0/guidelines/typography.md @@ -0,0 +1,55 @@ +--- +layout: detail +title: Typography +--- +--- + +**Page Summary** + +* Table of contents +{:toc} + +--- + +## Specifications references + +- [Design System Manager - Typography]() +- [Apple guideline - Typography](https://developer.apple.com/design/human-interface-guidelines/foundations/typography/) +- [Android material - Typography](https://m3.material.io/styles/typography/overview) + +## Implementation + +ODS library defines its own font style. The font associated to the style is defined in the theme set in the environment. + +### Apply font style on text + +Apply the font style on text like this: + +``` dart +Text("Sample", + style: Theme.of(context).textTheme.bodyLarge, +), +``` + +### Apply font style on view + +In the example the first text field has a font style set directly. + +``` dart +class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: Text( + 'Font applied to a text view', + style: Theme.of(context).textTheme.bodyLarge, + ), + ), + ), + ); + } +} +``` + diff --git a/docs/1.0.0/guidelines/typography_docs.md b/docs/1.0.0/guidelines/typography_docs.md new file mode 100644 index 00000000..da3bdf9a --- /dev/null +++ b/docs/1.0.0/guidelines/typography_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Typography +content_page: typography.md +--- diff --git a/docs/1.0.0/home_content.md b/docs/1.0.0/home_content.md new file mode 100644 index 00000000..c81c851c --- /dev/null +++ b/docs/1.0.0/home_content.md @@ -0,0 +1,55 @@ +## Introduction + +Orange is providing a full Design System to build Orange Mobile Application. The objective of the [Orange Design System](https://system.design.orange.com/0c1af118d/p/7218a7-flutter/b/98eb3b) (ODS) is to propose a set of guidelines on how to apply the Orange Brand on mobile applications. The Orange design System also provides a series of components and modules that show in details how to use this in the Orange apps. + +The Orange Design System has been implemented in a code library that provides: +- a Flutter code library +- a demo app that can be launched to show the guidelines, components and modules +- this demo app also shows how to use the lib or style existing components + +Using these resources will allow you to create Orange branded applications faster and will inherit all the work that was done to make sure that all presented codes are fully tested regarding the brand and the accessibility compliance. + +The Orange Design System framework supports iOS 11 and later. + +## Instructions + +### Use this package as a library + +Run this command with Flutter : + +```dart +flutter pub add ods_flutter +``` + +This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get): + +```dart +dependencies: + ods_flutter: ^1.0.0 +``` +Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more. + + +Now in your Dart code, you can use: +```dart +import 'package:ods_flutter/ods_flutter.dart'; +``` + +### Add the OdsTheme + +This is the theme of your application. +To share a Theme across your entire app, set the theme property to your MaterialApp constructor : + +```dart +return MaterialApp( + title: 'Application name', + theme: OdsTheme.lightTheme, + darkTheme: OdsTheme.darkTheme, + debugShowCheckedModeBanner: false, + home: const MyHomePage(title: 'Flutter Home Page'), + // Localization setup + localizationsDelegates: const [ + OdsLocalizations.delegate, + ], + ); +``` diff --git a/docs/1.0.0/index.md b/docs/1.0.0/index.md new file mode 100644 index 00000000..46df08f7 --- /dev/null +++ b/docs/1.0.0/index.md @@ -0,0 +1,7 @@ +--- +layout: main +title: Integration +description: Getting started with Orange Design System for Flutter +--- + +{% include_relative home_content.md %} diff --git a/docs/1.0.0/index_content.md b/docs/1.0.0/index_content.md new file mode 100644 index 00000000..208c823e --- /dev/null +++ b/docs/1.0.0/index_content.md @@ -0,0 +1,7 @@ +--- +layout: detail +title: Integration +description: Getting started with Orange Design System for Flutter +--- + +{% include_relative home_content.md %} diff --git a/docs/_config.yml b/docs/_config.yml index dc39ab3b..0db0c009 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -54,3 +54,7 @@ defaults: path: "0.8.0" values: version: "0.8.0" + - scope: + path: "1.0.0" + values: + version: "1.0.0" diff --git a/docs/_config_netlify.yml b/docs/_config_netlify.yml index 51f2899e..db10bfcd 100644 --- a/docs/_config_netlify.yml +++ b/docs/_config_netlify.yml @@ -53,3 +53,7 @@ defaults: path: "0.8.0" values: version: "0.8.0" + - scope: + path: "1.0.0" + values: + version: "1.0.0" diff --git a/docs/_data/.DS_Store b/docs/_data/.DS_Store new file mode 100644 index 00000000..390b63c2 Binary files /dev/null and b/docs/_data/.DS_Store differ diff --git a/docs/_data/data_menu_1_0_0.yml b/docs/_data/data_menu_1_0_0.yml new file mode 100644 index 00000000..82f96768 --- /dev/null +++ b/docs/_data/data_menu_1_0_0.yml @@ -0,0 +1,61 @@ +# Edit this file to update the documentation menu +toc2: + - title: Get Started + subfolderitems: + - page: Integration + url: /index.html + + - title: Guidelines + subfolderitems: + - page: Spacings + url: /guidelines/spacings_docs + - page: Typography + url: /guidelines/typography_docs + + - title: Components + subfolderitems: + - page: App bars - top + url: /components/appBarsTop_docs + - page: Bars - navigation + url: /components/navigationBar_docs + - page: Buttons + url: /components/buttons_docs + - page: Cards + url: /components/cards_docs + - page: Checkboxes + url: /components/checkboxes_docs + - page: Chips + url: /components/chips_docs + - page: Dialogs + url: /components/dialogs_docs + - page: Floating action buttons + url: /components/floatingActionButtons_docs + - page: List item + url: /components/listsItem_docs + - page: Menus + url: /components/menus_docs + - page: Navigation Rail + url: /components/navigation_rail_docs + - page: Progress indicator + url: /components/progressIndicator_docs + - page: Radio buttons + url: /components/radioButtons_docs + - page: Sheets bottom + url: /components/sheets_bottom_docs + - page: Slider + url: /components/slider_docs + - page: Snackbar + url: /components/snackbars_docs + - page: Switches + url: /components/switches_docs + - page: TextFields + url: /components/textFields_docs + + - title: About + subfolderitems: + - page: "License" + url: /about/License_docs + - page: "Team" + url: /about/Team_docs + - page: "Cookies" + url: /about/Cookies_docs diff --git a/docs/components/appBarsTop.md b/docs/components/appBarsTop.md index c0abc188..e041eedb 100644 --- a/docs/components/appBarsTop.md +++ b/docs/components/appBarsTop.md @@ -39,7 +39,7 @@ return OdsAppTopBar( IconButton(icon: const Icon(Icons.color_lens), onPressed: () {}) ], navigationIcon: const BackButton(), -); +) ``` ##### OdsTopAppBar API @@ -61,8 +61,10 @@ Here is an example of use: ```dart return OdsLargeTopAppBar( title: "Large", - actions: IconButton(icon: const Icon(Icons.notifications), onPressed: () {}), - leading: BackButton(), + actions: [ + IconButton(icon: const Icon(Icons.color_lens), onPressed: () {}) + ], + navigationIcon: const BackButton(), scrollBehavior: SliverList( delegate: SliverChildBuilderDelegate( (BuildContext context, int index) { diff --git a/docs/components/cards.md b/docs/components/cards.md index 7514c236..763a2509 100644 --- a/docs/components/cards.md +++ b/docs/components/cards.md @@ -55,8 +55,8 @@ return OdsVerticalImageFirstCard( ), subtitle: "Subtitle", //Optional text: "Text", //Optional - firstButton: OdsOutlinedButton(text: "First button", onClick: () {}), //Optional - secondButton: OdsButton(text: "Second button", onClick: () {}), //Optional + firstButton: OdsTextButton(text: "First button", onClick: () {}), //Optional + secondButton: OdsTextButton(text: "Second button", onClick: () {}), //Optional onClick: () {}, ); ``` @@ -69,8 +69,8 @@ Parameter | Default value | Description `image: OdsCardImage` | | Image displayed into the card `subtitle: String?` | `null` | Subtitle displayed into the card `text: String?` | `null` | Text displayed into the card -`firstButton: OdsOutlinedButton?` | `null` | First button displayed into the card -`secondButton: OdsButton?` | `null` | Second button displayed into the card +`firstButton: OdsTextButton?` | `null` | First button displayed into the card +`secondButton: OdsTextButton?` | `null` | Second button displayed into the card `onClick: (() -> Void)?` | `null` | Callback called on card click ### Vertical header first card @@ -100,8 +100,8 @@ return OdsVerticalHeaderFirstCard( ), subtitle: "Subtitle", //Optional text: "Text", //Optional - firstButton: OdsOutlinedButton(text: "First button", onClick: () {}), //Optional - secondButton: OdsButton(text: "Second button", onClick: () {}), //Optional + firstButton: OdsTextButton(text: "First button", onClick: () {}), //Optional + secondButton: OdsTextButton(text: "Second button", onClick: () {}), //Optional onClick: () {}, ); ``` @@ -114,8 +114,8 @@ Parameter | Default value | Description `image: OdsCardImage` | | Image displayed into the card `subtitle: String?` | `null` | Subtitle displayed into the card `text: String?` | `null` | Text displayed into the card -`firstButton: OdsOutlinedButton?` | `null` | First button displayed into the card -`secondButton: OdsButton?` | `null` | Second button displayed into the card +`firstButton: OdsTextButton?` | `null` | First button displayed into the card +`secondButton: OdsTextButton?` | `null` | Second button displayed into the card `onClick: (() -> Void)?` | `null` | Callback called on card click {:.table} @@ -175,8 +175,8 @@ return OdsHorizontalCard( ), subtitle: "Subtitle", //Optional text: "Text", //Optional - firstButton: OdsOutlinedButton(text: "First button", onClick: () {}), //Optional - secondButton: OdsButton(text: "Second button", onClick: () {}), //Optional + firstButton: OdsTextButton(text: "First button", onClick: () {}), //Optional + secondButton: OdsTextButton(text: "Second button", onClick: () {}), //Optional imagePosition: OdsHorizontalCardImagePosition.start, //Optional. Start by default. divider: false, // Optional. True by default. onClick: () {}, @@ -191,8 +191,8 @@ Parameter | Default value | Description `image: OdsCardImage` | | Image displayed into the card `subtitle: String?` | `null` | Subtitle displayed into the card `text: String?` | `null` | Text displayed into the card -`firstButton: OdsOutlinedButton?` | `null` | First button displayed into the card -`secondButton: OdsButton?` | `null` | Second button displayed into the card +`firstButton: OdsTextButton?` | `null` | First button displayed into the card +`secondButton: OdsTextButton?` | `null` | Second button displayed into the card `imagePosition: OdsHorizontalCardImagePosition` | `OdsHorizontalCardImagePosition.Start` | Position of the image within the card, it can be set to `OdsHorizontalCardImagePosition.start` or `OdsHorizontalCardImagePosition.end` `divider: Boolean` | `false` | Controls the divider display. If true, it will be displayed between the card content and the action buttons. `onClick: (() -> Void)?` | `null` | Callback called on card click diff --git a/docs/components/dialogs.md b/docs/components/dialogs.md index 6bff3786..98b35a7d 100644 --- a/docs/components/dialogs.md +++ b/docs/components/dialogs.md @@ -58,6 +58,28 @@ return OdsAlertDialog.openDialog( ); ``` +This component should be used after an event, such as clicking a button. Complete example: + +```dart +OdsButton( + text: "Open Dialog", + style: OdsButtonStyle.functionalPrimary, + onClick: () => OdsAlertDialog.openDialog( + context: context, + title: "title", + text: "content text of the dialog", + confirmButton: OdsAlertDialogButton( + text: "confirm", + onClick: () => Navigator.of(context).pop(), + ), + dismissButton: OdsAlertDialogButton( + text: "dismiss", + onClick: () => Navigator.of(context).pop(), + ), + ), + ), +``` + ## Component specific tokens _Soon available_ diff --git a/docs/components/menus.md b/docs/components/menus.md index 648791e0..5b5464d2 100644 --- a/docs/components/menus.md +++ b/docs/components/menus.md @@ -40,11 +40,11 @@ return OdsDropdownMenu( OdsDropdownMenuItem( text: "Summer Salad", value: "Summer Salad", - enabled: false, //Optional by default true + enabled: true, //Optional by default true icon: const Icon(Icons.coffee) // Optional ), ], - selectedItem: (String value) { + selectedItem: (value) { print('$value'); }, ); @@ -81,11 +81,11 @@ To display an exposed dropdown menu, you can use the `OdsExposedDropdownMenu` co ```dart return OdsExposedDropdownMenu( label: "Recipe", - enabled: false, // Optional by default true + enabled: true, // Optional by default true items: >[ DropdownMenuEntry( - value: "Summer Salad",, - label: "Summer Salad",, + value: "Summer Salad", + label: "Summer Salad", leadingIcon: const Icon(Icons.coffee), // Optional ), ], diff --git a/docs/components/radioButtons.md b/docs/components/radioButtons.md index 26f9f608..d4718a6a 100644 --- a/docs/components/radioButtons.md +++ b/docs/components/radioButtons.md @@ -38,7 +38,8 @@ usually unnecessary. ### Flutter code -In your screen you can use: +In your screen you can use. +Add as many "OdsRadioButton" as you wish and place them in a "Column", for example. ```dart enum Options { option1, option2, option3 } @@ -47,7 +48,13 @@ Options? _selectedOption = Options.option1; return OdsRadioButton( value: Options.option1, groupValue: _selectedOption, - onChanged: (Options? value) {} + onCheckedChange: (Options? value) { + setState( + () { + _selectedOption = value; + }, + ); + }, ) ``` diff --git a/docs/components/sheets_bottom.md b/docs/components/sheets_bottom.md index 2baa559a..05f21742 100644 --- a/docs/components/sheets_bottom.md +++ b/docs/components/sheets_bottom.md @@ -35,9 +35,7 @@ The contents within a bottom sheet should follow their own accessibility guideli ```dart return Scaffold( bottomSheet: OdsSheetsBottom( - sheetContent = { - // Put here the content of the sheet - }, + sheetContent: Container(), // Put here the content of the sheet title: "Recipes", ), ); diff --git a/docs/components/slider.md b/docs/components/slider.md index c0a0cac0..7225f2b0 100644 --- a/docs/components/slider.md +++ b/docs/components/slider.md @@ -80,9 +80,9 @@ You can add icons to the continuous lockups slider like this: ```dart return OdsSlider( value: 20.0, - label: sliderValue.round().toString(), - leftIcon: Icon(Icons.volume_mute), - rightIcon: Icon(Icons.volume_up), + displayValue: 20.0.round().toString(), + startIcon: Icon(Icons.volume_mute), + endIcon: Icon(Icons.volume_up), ); ``` @@ -112,8 +112,8 @@ You can add icons to the discrete slider like this: return OdsSlider( value: 20.0, steps: 10, - leftIcon: Icon(Icons.volume_mute), - rightIcon: Icon(Icons.volume_up), + startIcon: Icon(Icons.volume_mute), + endIcon: Icon(Icons.volume_up), ); ``` diff --git a/library/lib/components/card/ods_cards_common.dart b/library/lib/components/card/ods_cards_common.dart index 997f574b..6ba0dc5e 100644 --- a/library/lib/components/card/ods_cards_common.dart +++ b/library/lib/components/card/ods_cards_common.dart @@ -14,7 +14,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; class OdsCardImage extends StatelessWidget { - final ImageProvider imageProvider; + final dynamic image; final String contentDescription; final Alignment alignment; final BoxFit contentScale; @@ -22,7 +22,7 @@ class OdsCardImage extends StatelessWidget { const OdsCardImage({ super.key, - required this.imageProvider, + required this.image, required this.contentDescription, this.alignment = Alignment.center, this.contentScale = BoxFit.cover, @@ -40,7 +40,7 @@ class OdsCardImage extends StatelessWidget { ), child: FadeInImage( placeholder: const AssetImage('assets/placeholder.png'), - image: imageProvider, + image: _getImageProvider(), fit: contentScale, alignment: alignment, imageErrorBuilder: (context, error, stackTrace) { @@ -53,6 +53,20 @@ class OdsCardImage extends StatelessWidget { ), ); } + + ImageProvider _getImageProvider() { + if (image is String) { + if (image.startsWith('http') || image.startsWith('https')) { + return NetworkImage(image); + } else { + return AssetImage(image); + } + } else if (image is ImageProvider) { + return image; + } else { + return const AssetImage('assets/placeholder.png'); + } + } } class OdsCardThumbnail extends StatelessWidget { diff --git a/library/lib/components/card/ods_small_card.dart b/library/lib/components/card/ods_small_card.dart index eb5618f0..8f594196 100644 --- a/library/lib/components/card/ods_small_card.dart +++ b/library/lib/components/card/ods_small_card.dart @@ -26,7 +26,7 @@ class OdsSmallCard extends StatelessWidget { required this.title, required this.image, this.subtitle, - this.onTap, + this.onClick, }) : super(key: key); static const double _imageHeight = 110; @@ -42,14 +42,14 @@ class OdsSmallCard extends StatelessWidget { final String? subtitle; /// The action executed on card tap. - final Function()? onTap; + final Function()? onClick; @override Widget build(BuildContext context) { return MergeSemantics( child: Semantics( - button: onTap != null ? true : false, - onTap: onTap, + button: onClick != null ? true : false, + onTap: onClick, child: Stack( children: [ SizedBox( @@ -90,12 +90,12 @@ class OdsSmallCard extends StatelessWidget { ), ), ), - if (onTap != null) + if (onClick != null) Positioned.fill( child: Material( color: Colors.transparent, child: InkWell( - onTap: onTap, + onTap: onClick, ), ), ) diff --git a/library/lib/components/navigation_bar/ods_navigation_bar.dart b/library/lib/components/navigation_bar/ods_navigation_bar.dart index 5a16dbbc..e24f395d 100644 --- a/library/lib/components/navigation_bar/ods_navigation_bar.dart +++ b/library/lib/components/navigation_bar/ods_navigation_bar.dart @@ -24,7 +24,6 @@ class OdsNavigationBar extends StatelessWidget { required this.selectedIndex, required this.destinations, this.onDestinationSelected, - this.icon, }) : super(key: key); /// The index of the currently selected destination. @@ -36,9 +35,6 @@ class OdsNavigationBar extends StatelessWidget { /// The callback function called when a destination is selected. final void Function(int)? onDestinationSelected; - /// The list of destinations to display. - final Widget? icon; - @override Widget build(BuildContext context) { return NavigationBar(