Documentation sprint 28 v0.8.0 (#346)

* documentation: add navigation rail

* documentation: add header card and add api token

* fix : get started and code menu, app bar top

* add change log

Author: Tayebsed93

app/CHANGELOG.md

@@ -18,13 +18,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - ODS - Component - Cards: Title First Card ([#9](https://github.com/Orange-OpenSource/ods-flutter/issues/9))
 - About - Page ([#332](https://github.com/Orange-OpenSource/ods-flutter/issues/332))
 - Module - List ([#331](https://github.com/Orange-OpenSource/ods-flutter/issues/331))
+- Documentation : sprint documentation ([#345](https://github.com/Orange-OpenSource/ods-flutter/issues/345))
 
 ## Changed
 
 - Vertical Card customization updates ([#189](https://github.com/Orange-OpenSource/ods-flutter/issues/189))
 - Update Copyright in files ([#303](https://github.com/Orange-OpenSource/ods-flutter/issues/303))
 - Typographie flutter ios ([#293](https://github.com/Orange-OpenSource/ods-flutter/issues/293))
-- [Bug]: Snackbar without action text positioning ([#198](https://github.com/Orange-OpenSource/ods-flutter/issues/198))
 - Update components to show label content examples ([#198](https://github.com/Orange-OpenSource/ods-flutter/issues/295))
 - [Bug]: Text Field > Trailing element > text issue ([#314](https://github.com/Orange-OpenSource/ods-flutter/issues/314))
 - [Bug]: Text Field > Input type > single line doesn't stay on 1 line ([#315](https://github.com/Orange-OpenSource/ods-flutter/issues/315))

app/lib/ui/components/cards/card_small.dart

@@ -14,6 +14,7 @@ import 'dart:math';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/ods_flutter_app_localizations.dart';
+import 'package:ods_flutter/components/card/ods_cards_common.dart';
 import 'package:ods_flutter/components/card/ods_small_card.dart';
 import 'package:ods_flutter/components/lists/ods_list_switch.dart';
 import 'package:ods_flutter/components/sheets_bottom/ods_sheets_bottom.dart';
@@ -75,16 +76,11 @@ class _Body extends StatelessWidget {
                     subtitle: customizationState?.hasSubtitle == true
                         ? recipe.subtitle
                         : null,
-                    image: FadeInImage(
-                      placeholder: AssetImage('assets/placeholder.png'),
-                      image: NetworkImage(recipe.url),
-                      fit: BoxFit.cover,
-                      imageErrorBuilder: (context, error, stackTrace) {
-                        return Image(
-                          image: AssetImage('assets/placeholder.png'),
-                          fit: BoxFit.cover,
-                        );
-                      },
+                    image: OdsCardImage(
+                      imageProvider: NetworkImage(recipe.url),
+                      contentDescription: '', //Optional
+                      alignment: Alignment.center,
+                      contentScale: BoxFit.cover,
                     ),
                     onTap: customizationState!.clickable ? () {} : null,
                   ),

docs/_data/data_menus.yml

@@ -34,6 +34,8 @@ toc2:
         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

docs/components/appBarsTop.md

@@ -34,20 +34,11 @@ Here is an example of use:
 
 ```dart
 return OdsAppTopBar(
-  title: "Regular",
-  actions: IconButton(icon: const Icon(Icons.notifications), onPressed: () {}),
-  leading: BackButton(),
-  body: ListView.builder(
-        itemCount: 10,
-        itemBuilder: (context, index) {
-        final itemNumber = index.toString();
-        return ListTile(
-            title: Text(
-            'Item #$itemNumber',
-            ),
-        );
-      },
-    )
+  title: "App Bar",
+  actions: [
+    IconButton(icon: const Icon(Icons.color_lens), onPressed: () {})
+  ],
+  navigationIcon: const BackButton(),
 );
 ```
 

docs/components/cards.md

@@ -9,15 +9,24 @@ description: Cards contain content and actions about a single subject.
 **Page Summary**
 
 * Table of contents
-{:toc}
+* [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/)
-- Technical documentation soon available
 
 ## Accessibility
 
@@ -29,17 +38,17 @@ Please follow [accessibility criteria for development](https://m3.material.io/co
 
 This is a full width card containing elements arranged vertically with an image as first element.
 
-  ![Horizontal card light](images/card_vertical_image_first_light.png) ![Horizontal card dark](images/card_vertical_image_first_dark.png)
+  ![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` composable:
+In your screen you can use `OdsVerticalImageFirstCard` :
 
 ```dart
 return OdsVerticalImageFirstCard(
   title: "Title",
   image: OdsCardImage(
-    imageProvider: NetworkImage(recipe.url),
+    imageProvider: NetworkImage('assets/placeholder.png'),
     contentDescription: 'Picture content description', //Optional
     alignment: Alignment.center, //Optional. Center by default.
     contentScale: BoxFit.cover, //Optional. BoxFit.cover by default.
@@ -60,27 +69,90 @@ 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: OdsCard.Button?` | `null` | First button displayed into the card
-`secondButton: OdsCard.Button?` | `null` | Second button displayed into the card
+`firstButton: OdsOutlinedButton?` | `null` | First button displayed into the card
+`secondButton: OdsButton?` | `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**
 
-_Soon available_
+In your screen you can use `OdsVerticalHeaderFirstCard` :
+
+```dart
+return OdsVerticalHeaderFirstCard(
+  title: "Title",
+  thumbnail: OdsCardThumbnail(
+    imageProvider: NetworkImage('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(
+    imageProvider: NetworkImage('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: OdsOutlinedButton(text: "First button", onClick: () {}), //Optional
+  secondButton: OdsButton(text: "Second button", 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: OdsOutlinedButton?` | `null` | First button displayed into the card
+`secondButton: OdsButton?` | `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:
 
-_Soon available_
+```dart
+return OdsSmallCard(
+  title: "Title",
+  image: OdsCardImage(
+    imageProvider: NetworkImage('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
+  onTap: () {},
+);
+```
+
+##### 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
+`onTap: (() -> Void)?` | `null` | Callback called on card click
+{:.table}
 
 ### Horizontal card
 
@@ -96,7 +168,7 @@ In your screen you can use `OdsHorizontalCard` composable:
 return OdsHorizontalCard(
   title: "Title",
   image: OdsCardImage(
-    imageProvider: NetworkImage(recipe.url),
+    imageProvider: NetworkImage('assets/placeholder.png'),
     contentDescription: 'Picture content description', //Optional
     alignment: Alignment.center, //Optional. Center by default.
     contentScale: BoxFit.cover, //Optional. BoxFit.cover by default.
@@ -119,12 +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: OdsCard.Button?` | `null` | First button displayed into the card
-`secondButton: OdsCard.Button?` | `null` | Second button displayed into the card
+`firstButton: OdsOutlinedButton?` | `null` | First button displayed into the card
+`secondButton: OdsButton?` | `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
-
-## Component specific tokens
-
-_Soon available_