11 ods component cards horizontal card (#257)

* library : add ods_horizontal_card

* library : add ods_small_card.dart component

* library : change ods small card style subtitle

* library : add color card theme

* demo : add keys l10n

* app : add card enum

* app : change style text component_count_row.dart

* demo : add card_customization.dart

* app : add card_horizontal component

* app : add card horizontal variant in component.dart

* documentation : add docs for card horizontal

* app and library : add change log

* library : add ods_card_image

* app : add ods_card_image

Author: Tayebsed93

NOTICE.txt

@@ -21,6 +21,7 @@ ods-flutter/app/assets/il_radio_buttons.svg
 ods-flutter/app/assets/il_switches.png
 ods-flutter/app/assets/il_typography.png
 ods-flutter/app/assets/placeholder.png
+ods-flutter/library/assets/placeholder.png
 ods-flutter/app/assets/il_navigation_bar.png
 ods-flutter/app/assets/recipes/ic_coffee.svg
 ods-flutter/app/assets/recipes/ic_cooking_pot.svg

app/CHANGELOG.md

@@ -30,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - ODS - Component - Slider ([#30](https://github.com/Orange-OpenSource/ods-flutter/issues/30))
 - ODS - Component - Progress Indicator ([#26](https://github.com/Orange-OpenSource/ods-flutter/issues/26))
 - ODS - Component - Dialogs ([#19](https://github.com/Orange-OpenSource/ods-flutter/issues/19))
+- ODS - Component - Cards: Horizontal Card ([#11](https://github.com/Orange-OpenSource/ods-flutter/issues/11))
 
 ### Changed
 

app/lib/l10n/ods_flutter_en.arb

@@ -95,48 +95,26 @@
     "type": "text"
   },
   "componentElementSubtitle": "Subtitle",
-  "@componentElementSubtitle": {
-    "description": "Component customization element - Subtitle",
-    "type": "text"
-  },
+  "componentElementText": "Text",
+  "componentElementDivider": "Divider",
 
   "@_COMPONENTS_CARDS": {},
   "componentCardsTitle": "Cards",
-  "@componentCardsTitle": {
-    "description": "Component Cards - Title",
-    "type": "text"
-  },
   "componentCardsDescription": "Cards are important components that can be used to organise and present a number of different types of related information.",
-  "@componentCardsDescription": {
-    "description": "Component Cards - Description",
-    "type": "text"
-  },
   "componentCardClickable": "Clickable card",
-  "@componentCardClickable": {
-    "description": "Component Card - Clickable customization",
-    "type": "text"
-  },
+
   "@_CARDS_VARIANT": {},
   "cardSmallVariantTitle": "Small card",
-  "@cardSmallVariantTitle": {
-    "description": "Component - Small card - Title",
-    "type": "text"
-  },
   "cardSmallVariantSubtitle": "OdsSmallCard",
-  "@cardSmallVariantSubtitle": {
-    "description": "Component - Small card - Technical subtitle",
-    "type": "text"
-  },
   "cardVerticalImageFirstVariantTitle": "Vertical image first card",
-  "@cardVerticalImageFirstVariantTitle": {
-    "description": "Component - Vertical image first card - Title",
-    "type": "text"
-  },
   "cardVerticalImageFirstVariantSubtitle": "OdsVerticalImageFirstCard",
-  "@cardVerticalImageFirstVariantSubtitle": {
-    "description": "Component - Vertical image first card - Technical subtitle",
-    "type": "text"
-  },
+  "componentCardHorizontalTitle": "Horizontal card",
+  "componentCardHorizontalSubtitle": "OdsHorizontalCard",
+  "componentCardActionButtonCount": "Action buttons",
+  "componentCardHorizontalImagePosition": "Image position",
+  "componentCardHorizontalImagePositionStart": "Start",
+  "componentCardHorizontalImagePositionEnd": "End",
+
   "@_COMPONENTS_CHECKBOXES": {},
   "componentCheckboxesTitle": "Checkboxes",
   "@componentCheckboxesTitle": {

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

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:ods_flutter_demo/ui/components/cards/card_enum.dart';
 
 class _CardCustomization extends InheritedWidget {
   _CardCustomization({
@@ -25,12 +26,29 @@ class CardCustomization extends StatefulWidget {
   CardCustomizationState createState() => CardCustomizationState();
 
   static CardCustomizationState? of(BuildContext context) {
-    return (context.dependOnInheritedWidgetOfExactType<_CardCustomization>())?.data;
+    return (context.dependOnInheritedWidgetOfExactType<_CardCustomization>())
+        ?.data;
   }
 }
 
 class CardCustomizationState extends State<CardCustomization> {
+  static get minNavigationItemCount => 0;
+
+  static get maxNavigationItemCount => 2;
+
+  int _numberOfItems = minNavigationItemCount;
+
+  int get numberOfItems => _numberOfItems;
+
+  set numberOfItems(int value) {
+    setState(() {
+      _numberOfItems = value;
+    });
+  }
+
   bool _hasSubtitle = true;
+  bool _hasText = true;
+  bool _hasDivider = false;
   bool _clickable = true;
 
   bool get hasSubtitle => _hasSubtitle;
@@ -40,13 +58,48 @@ class CardCustomizationState extends State<CardCustomization> {
     });
   }
 
+  bool get hasText => _hasText;
+  set hasText(bool value) {
+    setState(() {
+      _hasText = value;
+    });
+  }
+
+  bool get hasDivider => _hasDivider;
+  set hasDivider(bool value) {
+    setState(() {
+      _hasDivider = value;
+    });
+  }
+
   bool get clickable => _clickable;
   set clickable(bool value) {
     setState(() {
       _clickable = value;
     });
   }
 
+  List<CardEnum> _elements = [
+    CardEnum.start,
+    CardEnum.end,
+  ];
+  CardEnum _selectedElement = CardEnum.start;
+
+  List<CardEnum> get elements => _elements;
+  set elements(List<CardEnum> value) {
+    setState(() {
+      _elements = value;
+    });
+  }
+
+  CardEnum get selectedElement => _selectedElement;
+
+  set selectedElement(CardEnum value) {
+    setState(() {
+      _selectedElement = value;
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     return _CardCustomization(

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

@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/ods_flutter_app_localizations.dart';
+
+enum CardEnum { start, end }
+
+extension CustomElementExtension on CardEnum {
+  String stringValue(BuildContext context) {
+    switch (this) {
+      case CardEnum.start:
+        return AppLocalizations.of(context)!
+            .componentCardHorizontalImagePositionStart;
+      case CardEnum.end:
+        return AppLocalizations.of(context)!
+            .componentCardHorizontalImagePositionEnd;
+      default:
+        return "";
+    }
+  }
+}