[#369] Add documentation versioning (#370)

* Add versioning mecanisum and docs for each version

* Update min version

docs/0.4.0/components/banners.md

@@ -0,0 +1,66 @@
+---
+layout: detail
+title: Banners
+description: A banner displays an important message which requires an action to be dismissed.
+---
+
+---
+
+**Page Summary**
+
+* [Specifications references](#specifications-references)
+* [Accessibility](#accessibility)
+* [Variants](#variants)
+    * [No button](#no-button)
+    * [One button](#on-button)
+    * [Two buttons](#two-buttons)
+
+---
+
+## 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) {})
+```
+
+

docs/0.4.0/components/banners_docs.md

@@ -0,0 +1,4 @@
+---
+layout: main
+content_page: banners.md
+---

docs/0.4.0/components/buttons.md

@@ -0,0 +1,128 @@
+---
+layout: detail
+title: Buttons
+description: Buttons allow users to take actions, and make choices, with a single tap.
+---
+
+---
+
+**Page Summary**
+
+* [Specifications references](#specifications-references)
+* [Accessibility](#accessibility)
+* [Variants](#variants)
+    * [Text button](#text-button)
+    * [Outlined button](#outlined-button)
+    * [Contained button](#contained-button)
+* [Component specific tokens](#component-specific-tokens)
+
+---
+
+## 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
+);
+```
+
+## Component specific tokens
+
+_Soon available_

docs/0.4.0/components/buttons_docs.md

@@ -0,0 +1,4 @@
+---
+layout: main
+content_page: buttons.md
+---

docs/0.4.0/components/cards.md

@@ -0,0 +1,91 @@
+---
+layout: detail
+title: Cards
+description: Cards contain content and actions about a single subject.
+---
+
+---
+
+**Page Summary**
+
+* [Specifications references](#specifications-references)
+* [Accessibility](#accessibility)
+* [Variants](#variants)
+    * [Vertical image first card](#vertical-image-first-card)
+    * [Vertical header first card](#vertical-header-first-card)
+    * [Small card](#small-card)
+    * [Horizontal card](#horizontal-card)
+* [Component specific tokens](#component-specific-tokens)
+
+---
+
+## 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
+
+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.
+
+> **Flutter implementation**
+
+_Soon available_
+
+### Vertical header first card
+
+This is a full width card containing elements arranged vertically with a header (thumbnail, title & subtitle) as first element.
+
+> **Flutter implementation**
+
+_Soon available_
+
+### Small card
+
+This is a small card which takes the half screen width.
+
+> **Flutter implementation**
+
+You can add an `OdsSmallCard` in your screen to add a small card:
+
+_Soon available_
+
+### 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(
+    imageProvider: NetworkImage(recipe.url),
+    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
+  imagePosition: OdsHorizontalCardImagePosition.start, //Optional. Start by default.
+  divider: false, // Optional. True by default.
+  onClick: () {},
+);
+```
+
+## Component specific tokens
+
+_Soon available_

docs/0.4.0/components/cards_docs.md

@@ -0,0 +1,4 @@
+---
+layout: main
+content_page: cards.md
+---

docs/0.4.0/components/checkboxes.md

@@ -0,0 +1,58 @@
+---
+layout: detail
+title: Checkboxes
+description: Checkbox selection control allows the user to select options.
+---
+
+Use checkboxes to:
+* Select one or more options from a list
+* Present a list containing sub-selections
+* Turn an item on or off in a desktop environment
+
+---
+
+**Page Summary**
+
+* [Specifications references](#specifications-references)
+* [Accessibility](#accessibility)
+* [Implementation](#implementation)
+* [Component specific tokens](#component-specific-tokens)
+
+---
+
+## 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 CheckboxListTitle or Checkbox :
+
+```dart
+return CheckboxListTile(
+	value: true,
+	title: Text("Enabled"),
+	enabled: true,
+	onChanged: (value) {
+ 		setState(() {});
+	},
+)
+```
+
+## Component specific tokens
+
+_Soon available_

docs/0.4.0/components/checkboxes_docs.md

@@ -0,0 +1,4 @@
+---
+layout: main
+content_page: checkboxes.md
+---