diff --git a/.github/workflows/dartdoc-gh-pages.yml b/.github/workflows/dartdoc-gh-pages.yml index d01017828..4470b3456 100644 --- a/.github/workflows/dartdoc-gh-pages.yml +++ b/.github/workflows/dartdoc-gh-pages.yml @@ -5,7 +5,6 @@ on: branches: - main - develop - workflow_dispatch: @@ -47,6 +46,11 @@ jobs: run: | mkdir -p ./docs mv ouds_core/doc/api/* ./docs + - name: Copy images files (orange logo and banner) + run: | + mkdir -p ./docs/assets + cp ouds_core/assets/doc/orange_logo.svg ./docs/assets/ + cp ouds_core/assets/doc/banner.png ./docs/assets/ - name: Upload artifact uses: actions/upload-pages-artifact@v3 with: diff --git a/app/CHANGELOG.md b/app/CHANGELOG.md index 8f2b57cf7..2e3fc9695 100644 --- a/app/CHANGELOG.md +++ b/app/CHANGELOG.md @@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added ### Changed +- [Library] Update homepage documentation ([#135](https://github.com/Orange-OpenSource/ouds-flutter/issues/#135)) - [Library] Integration of System library v2.3.0, component changelog v1.11 ([#513](https://github.com/Orange-OpenSource/ouds-flutter/issues/#513)) ### Fixed @@ -14,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [0.7.0](https://github.com/Orange-OpenSource/ouds-flutter/compare/0.5.0...0.7.0) - 2025-12-01 ### Added +- [Library] Include Design Component version in dev documentation ([#239](https://github.com/Orange-OpenSource/ouds-flutter/issues/#239)) - [DemoApp][Library] Create component - `Password Input` ([#397](https://github.com/Orange-OpenSource/ouds-flutter/issues/#397)) - [DemoApp][Library] Create component - `Pin Code Input` ([#307](https://github.com/Orange-OpenSource/ouds-flutter/issues/307)) - [DemoApp][Library] Create component - `Link` ([#46](https://github.com/Orange-OpenSource/ouds-flutter/issues/46)) diff --git a/app/lib/ui/components/badge/badge_customization_utils.dart b/app/lib/ui/components/badge/badge_customization_utils.dart index 72f7c4e55..b7292d656 100644 --- a/app/lib/ui/components/badge/badge_customization_utils.dart +++ b/app/lib/ui/components/badge/badge_customization_utils.dart @@ -12,8 +12,7 @@ */ import 'package:flutter/cupertino.dart'; -import 'package:ouds_core/components/badge/internal/ouds_badge_size_modifier.dart'; -import 'package:ouds_core/components/badge/internal/ouds_badge_status_modifier.dart'; +import 'package:ouds_core/components/badge/ouds_badge.dart'; import 'package:ouds_flutter_demo/l10n/app_localizations.dart'; import 'package:ouds_flutter_demo/ui/components/badge/badge_customization.dart'; import 'package:ouds_flutter_demo/ui/theme/theme_controller.dart'; diff --git a/ouds_core/CHANGELOG.md b/ouds_core/CHANGELOG.md index 3559e2e38..9fe2b14ad 100644 --- a/ouds_core/CHANGELOG.md +++ b/ouds_core/CHANGELOG.md @@ -5,11 +5,17 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## [Unreleased](https://github.com/Orange-OpenSource/ouds-flutter/compare/0.7.0...develop) +### Added + +### Changed +- [Library] Update homepage documentation ([#135](https://github.com/Orange-OpenSource/ouds-flutter/issues/#135)) +### Fixed ## [0.7.0](https://github.com/Orange-OpenSource/ouds-flutter/compare/0.5.0...0.7.0) - 2025-12-01 ### Added +- [Library] Include Design Component version in dev documentation ([#239](https://github.com/Orange-OpenSource/ouds-flutter/issues/#239)) - [Library] Create component - `Password Input` ([#397](https://github.com/Orange-OpenSource/ouds-flutter/issues/397)) - [Library] Create component - `Pin Code Input` ([#307](https://github.com/Orange-OpenSource/ouds-flutter/issues/307)) - [Library] Create component - `Link` ([#46](https://github.com/Orange-OpenSource/ouds-flutter/issues/46)) diff --git a/ouds_core/README.md b/ouds_core/README.md index 342c31c02..0f51a327c 100644 --- a/ouds_core/README.md +++ b/ouds_core/README.md @@ -20,9 +20,9 @@ This repository contains the OUDS Core Flutter library that provides Orange comp You can find the [detailed technical documentation online](https://flutter.unified-design-system.orange.com/), as well as the [whole design system](https://unified-design-system.orange.com/). -## OUDS +## Orange Unified Design System -OUDS stands for *Orange Unified Design System*. +Orange Unified Design System is abbreviated to *OUDS*. This is a new design system, again, but _unified_, aiming to merge all requirements of Orange brands and affiliates to provide a unique design system, consistent across all platforms and for all countries, companies, users, and apps. Guidelines for TV, Flutter, Android, iOS, and web environments will be integrated into a "cohesive" approach, and any Orange-related software, including brand apps like *Parnasse* and *Sosh*, *Orange Innovation Cup* apps, and apps for Orange countries and affiliates will utilize this project in the future. @@ -32,13 +32,74 @@ It is intended to replace internal frameworks and the previous [ODS](https://git ## Tokens version -- **Version**: 1.5.0. +- **OUDS core token version**: 1.9.0. ## Other OUDS Libraries - **ouds_theme_contract**: Contains the semantic tokens and component tokens. - **ouds_theme_orange**: Contains the theme for the Orange brand. - **ouds_theme_sosh**: Contains the theme for the Sosh brand. +- **ouds_theme_wireframe**: Contains the theme for the Wireframe brand. + + +## Components version + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComponentVersion
Badge1.2.0
Button3.2.0
Checkbox2.4.0
Chip1.3.0
Divider1.0.0
Link2.2.0
Pin Code Input 1.2.0
Radio Button1.4.0
Switch Button1.5.0
Tag1.4.0
Text Input1.3.0
+ ## Build diff --git a/ouds_core/assets/doc/banner.png b/ouds_core/assets/doc/banner.png new file mode 100644 index 000000000..ba8af3583 Binary files /dev/null and b/ouds_core/assets/doc/banner.png differ diff --git a/ouds_core/assets/doc/orange_logo.svg b/ouds_core/assets/doc/orange_logo.svg new file mode 100644 index 000000000..20ccaa441 --- /dev/null +++ b/ouds_core/assets/doc/orange_logo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/ouds_core/assets/doc/orange_theme.html b/ouds_core/assets/doc/orange_theme.html new file mode 100644 index 000000000..50b124903 --- /dev/null +++ b/ouds_core/assets/doc/orange_theme.html @@ -0,0 +1,505 @@ + + \ No newline at end of file diff --git a/ouds_core/dartdoc_options.yaml b/ouds_core/dartdoc_options.yaml index e4907ae7d..eca507dca 100644 --- a/ouds_core/dartdoc_options.yaml +++ b/ouds_core/dartdoc_options.yaml @@ -1,2 +1,4 @@ dartdoc: - favicon: assets/doc/ic_favicon.ico \ No newline at end of file + favicon: assets/doc/ic_favicon.ico + footer: + - assets/doc/orange_theme.html \ No newline at end of file diff --git a/ouds_core/lib/components/badge/internal/ouds_badge_size_modifier.dart b/ouds_core/lib/components/badge/internal/ouds_badge_size_modifier.dart index 8c09780df..f0f6660c7 100644 --- a/ouds_core/lib/components/badge/internal/ouds_badge_size_modifier.dart +++ b/ouds_core/lib/components/badge/internal/ouds_badge_size_modifier.dart @@ -16,13 +16,7 @@ library; import 'package:flutter/material.dart'; import 'package:ouds_theme_contract/ouds_theme.dart'; - -enum OudsBadgeSize { - xsmall, - small, - medium, - large; -} +import 'package:ouds_core/components/badge/ouds_badge.dart'; class OudsBadgeSizeModifier { final BuildContext context; diff --git a/ouds_core/lib/components/badge/internal/ouds_badge_status_modifier.dart b/ouds_core/lib/components/badge/internal/ouds_badge_status_modifier.dart index 9801d1271..43cd97a57 100644 --- a/ouds_core/lib/components/badge/internal/ouds_badge_status_modifier.dart +++ b/ouds_core/lib/components/badge/internal/ouds_badge_status_modifier.dart @@ -17,15 +17,7 @@ library; import 'package:flutter/material.dart'; import 'package:ouds_theme_contract/ouds_theme.dart'; import 'package:ouds_core/components/utilities/app_assets.dart'; - -enum OudsBadgeStatus { - negative, - accent, - positive, - info, - warning, - neutral, -} +import 'package:ouds_core/components/badge/ouds_badge.dart'; /// Modifier class to handle color logic based on badge status. class OudsBadgeStatusModifier { diff --git a/ouds_core/lib/components/badge/ouds_badge.dart b/ouds_core/lib/components/badge/ouds_badge.dart index 1531d7a8c..71623184e 100644 --- a/ouds_core/lib/components/badge/ouds_badge.dart +++ b/ouds_core/lib/components/badge/ouds_badge.dart @@ -11,7 +11,7 @@ * // */ -/// OudsBadge +/// {@category Badge} library; import 'package:flutter/material.dart'; @@ -26,8 +26,28 @@ enum Type { standard, } +/// The [OudsBadgeStatus] enum defines the visual importance of the badge within the UI. +enum OudsBadgeStatus { + negative, + accent, + positive, + info, + warning, + neutral, +} + +/// The [OudsBadgeSize] enum defines the size of the badge within the UI. +enum OudsBadgeSize { + xsmall, + small, + medium, + large; +} + /// [OUDS Badge design guidelines](https://unified-design-system.orange.com/472794e18/p/698ea8-badge) /// +/// **Reference design version : 1.2.0** +/// /// An OUDS badge widget. /// /// A custom Badge widget for user interface, allowing display of various statuses, sizes, icons, or labels. @@ -47,9 +67,10 @@ enum Type { /// - The background color is determined by the [status], using [OudsBadgeStatus]. /// - The size and margins are adjusted according to the badge [size] via [OudsBadgeSize]. /// -/// You can use the above example to implement the Badge component in your project, customizing parameters as needed. +/// ### You can use the above example to implement the [OudsBadge] component in your project, customizing parameters as needed. +/// +/// **Usage example :** /// -/// Usage example : /// ```dart /// OudsBadge( /// status: OudsBadgeStatus.negative, diff --git a/ouds_core/lib/components/button/ouds_button.dart b/ouds_core/lib/components/button/ouds_button.dart index 0414bf9de..473beea56 100644 --- a/ouds_core/lib/components/button/ouds_button.dart +++ b/ouds_core/lib/components/button/ouds_button.dart @@ -9,7 +9,7 @@ // Software description: Flutter library of reusable graphical components // -/// OudsButton +/// {@category Button} library; import 'package:flutter/material.dart'; @@ -34,7 +34,7 @@ enum OudsButtonAppearance { /// /// A circular loading indicator displayed in the button. /// -/// @param [progress] The loading progress, where 0.0 represents no progress and 1.0 represents full progress. +/// param [progress] The loading progress, where 0.0 represents no progress and 1.0 represents full progress. /// Values outside of this range are coerced into the range. /// Set this value to `null` to display a circular indeterminate progress indicator. /// @@ -54,6 +54,8 @@ enum OudsButtonLayout { /// [OUDS Button design guidelines](https://unified-design-system.orange.com/472794e18/p/48a788-button) /// +/// **Reference design version : 3.2.0** +/// /// Buttons are interactive elements designed to trigger specific actions or events when tapped by a user. /// /// This version of the button uses the *text only* layout which is the most used layout. @@ -76,9 +78,10 @@ enum OudsButtonLayout { /// must be provided. For instance, suppose a package called `my_icons` has /// `icons/heart.svg` . /// -/// ## You can use [OudsButton] like this : +/// ### You can use [OudsButton] component in your project, customizing parameters as needed : +/// +/// **Text only button :** /// -/// ### Text only button : /// This is the default layout of the component. /// /// diff --git a/ouds_core/lib/components/checkbox/ouds_checkbox.dart b/ouds_core/lib/components/checkbox/ouds_checkbox.dart index 974d31c25..f3c4561d9 100644 --- a/ouds_core/lib/components/checkbox/ouds_checkbox.dart +++ b/ouds_core/lib/components/checkbox/ouds_checkbox.dart @@ -9,7 +9,7 @@ // Software description: Flutter library of reusable graphical components // -/// OudsCheckbox +/// {@category Checkbox} library; import 'dart:io'; @@ -32,6 +32,8 @@ enum ToggleableState { off, indeterminate, on } /// /// [OUDS Checkbox design guidelines](https://unified-design-system.orange.com/472794e18/p/23f1c1-checkbox) /// +/// **Reference design version : 2.4.0** +/// /// Checkboxes are input controls that allow users to select one or more options from a number of choices. /// /// This checkbox supports the indeterminate state: Checkboxes can have a parent-child relationship with other checkboxes. When the parent checkbox is checked, @@ -46,9 +48,9 @@ enum ToggleableState { off, indeterminate, on } /// - [tristate]: If true, the checkboxes value can be true, false, or null. If false, only true and false states are managed. /// - [isError]: Controls the error state of the checkbox. /// -/// ## You can use [OudsCheckbox] like this : +/// ### You can use [OudsCheckbox] component in your project, customizing parameters as needed : /// -/// ### Enabled checkbox sample : +/// **Enabled checkbox sample :** /// /// The status of the checkbox before a user has interacted with it, or other content affects it. /// diff --git a/ouds_core/lib/components/checkbox/ouds_checkbox_item.dart b/ouds_core/lib/components/checkbox/ouds_checkbox_item.dart index 5702ae6f2..db065013e 100644 --- a/ouds_core/lib/components/checkbox/ouds_checkbox_item.dart +++ b/ouds_core/lib/components/checkbox/ouds_checkbox_item.dart @@ -9,7 +9,7 @@ // Software description: Flutter library of reusable graphical components // -/// OudsCheckboxItem +/// {@category Checkbox} library; import 'package:flutter/material.dart'; @@ -19,6 +19,8 @@ import 'package:ouds_core/components/control/ouds_control_item.dart'; /// /// OUDS Checkbox design guidelines /// +/// **Reference design version : 2.4.0** +/// /// Checkboxes are input controls that allow users to select one or more options from a number of choices. /// /// The **checkbox item variant** can function as a simple input with a label, or it can be combined with optional elements such as helper text, a divider, or an icon, @@ -48,10 +50,10 @@ import 'package:ouds_core/components/control/ouds_control_item.dart'; /// - [divider]: Controls the display of a divider at the bottom of the checkbox item. /// - [tristate]: Controls the tristate behavior of the checkbox item. /// -/// # You can use [OudsCheckboxItem] like this : +/// ### You can use [OudsCheckboxItem] component in your project, customizing parameters as needed : /// /// -/// ## Ouds checkbox item with icon and helper text : +/// **Ouds checkbox item with icon and helper text :** /// /// It is possible to display or hide an icon. If displayed, this option includes functionality to choose any Solaris icon. /// It is possible to display or hide accompanying text for the main label. diff --git a/ouds_core/lib/components/chip/ouds_filter_chip.dart b/ouds_core/lib/components/chip/ouds_filter_chip.dart index 3f944443c..c4d942cad 100644 --- a/ouds_core/lib/components/chip/ouds_filter_chip.dart +++ b/ouds_core/lib/components/chip/ouds_filter_chip.dart @@ -9,7 +9,7 @@ // Software description: Flutter library of reusable graphical components // -/// OudsFilterChip +/// {@category Chip} library; import 'package:flutter/material.dart'; @@ -44,6 +44,8 @@ enum OudsChipStyle { /// /// [OUDS Chip design guidelines](https://unified-design-system.orange.com/472794e18/p/77fdea-chip) /// +/// **Reference design version : 1.3.0** +/// /// A filter chip is a compact UI element used in a design system to represent a filter option that can be selected or deselected by the user. /// Filter chips allow users to refine content or data by applying one or more filters in a visually accessible and interactive way. /// Purpose: Allows users to filter content by selecting or deselecting specific categories or attributes. @@ -55,10 +57,10 @@ enum OudsChipStyle { /// Parameters: /// - [label]: Label displayed in the suggestion chip which describes the chip option. /// - [avatar]: Icon displayed in the suggestion chip. Works well with universally recognized symbols, such as a heart for favorites or a checkmark for selection. - -/// ## You can use [OudsFilterChip] like this : /// -/// ### Text only chip : +/// ### You can use [OudsFilterChip] component in your project, customizing parameters as needed : +/// +/// **Text only filter chip :** /// This is the default layout of the component. /// /// diff --git a/ouds_core/lib/components/chip/ouds_suggestion_chip.dart b/ouds_core/lib/components/chip/ouds_suggestion_chip.dart index 04e551b72..7fe6a3251 100644 --- a/ouds_core/lib/components/chip/ouds_suggestion_chip.dart +++ b/ouds_core/lib/components/chip/ouds_suggestion_chip.dart @@ -9,7 +9,7 @@ // Software description: Flutter library of reusable graphical components // -/// OudsSuggestionChip +/// {@category Chip} library; import 'package:flutter/material.dart'; @@ -42,6 +42,8 @@ enum OudsChipStyle { /// /// [OUDS Chip design guidelines](https://unified-design-system.orange.com/472794e18/p/77fdea-chip) /// +/// **Reference design version : 1.3.0** +/// /// A suggestion chip is a compact UI element used to present recommended or predictive options based on user input or context. /// Often found in search bars, forms, or messaging interfaces, suggestion chips help users quickly select from relevant suggestions. /// They are typically non-selected by default and can be tapped or clicked to apply the suggestion, streamlining user input and enhancing usability. @@ -53,10 +55,10 @@ enum OudsChipStyle { /// - [label]: Label displayed in the suggestion chip which describes the chip option. /// - [avatar]: Icon displayed in the suggestion chip. Works well with universally recognized symbols, such as a heart for favorites or a checkmark for selection. /// - [onPressed]: Callback invoked when the suggestion chip is clicked. - -/// ## You can use [OudsSuggestionChip] like this : /// -/// ### Text only chip : +/// ### You can use [OudsSuggestionChip] component in your project, customizing parameters as needed : +/// +/// **Text only suggestion chip :** /// This is the default layout of the component. /// /// diff --git a/ouds_core/lib/components/common/OudsBorder.dart b/ouds_core/lib/components/common/OudsBorder.dart index 867f9afd9..01bb43a3d 100644 --- a/ouds_core/lib/components/common/OudsBorder.dart +++ b/ouds_core/lib/components/common/OudsBorder.dart @@ -11,7 +11,7 @@ * // */ -/// OudsBorder +/// @nodoc library; import 'package:flutter/cupertino.dart'; diff --git a/ouds_core/lib/components/control/ouds_control_item.dart b/ouds_core/lib/components/control/ouds_control_item.dart index ece4aee95..9c84a57a6 100644 --- a/ouds_core/lib/components/control/ouds_control_item.dart +++ b/ouds_core/lib/components/control/ouds_control_item.dart @@ -10,7 +10,6 @@ // /// @nodoc -library; import 'package:flutter/material.dart'; import 'package:flutter/scheduler.dart'; diff --git a/ouds_core/lib/components/divider/ouds_divider.dart b/ouds_core/lib/components/divider/ouds_divider.dart index 1e7445461..ade00941f 100644 --- a/ouds_core/lib/components/divider/ouds_divider.dart +++ b/ouds_core/lib/components/divider/ouds_divider.dart @@ -10,13 +10,16 @@ // Software description: Flutter library of reusable graphical components // -/// OudsDivider +/// {@category Divider} library; import 'package:flutter/material.dart'; import 'package:ouds_theme_contract/ouds_theme.dart'; /// [OUDS Divider design guidelines](https://unified-design-system.orange.com/472794e18/p/629e1b-divider) +/// +/// **Reference design version : 1.0.0** +/// /// An [OUDS Divider] component as per the design guidelines of OUDS. /// /// Dividers are used to visually structure an interface by clearly separating content sections. It helps to improve readability and content organization @@ -35,9 +38,9 @@ import 'package:ouds_theme_contract/ouds_theme.dart'; /// - [margin] Optional margin around the divider, for spacing from surrounding content. /// /// -/// # You can use [OudsDivider.horizontal] like this : +/// ### You can use [OudsDivider] component in your project, customizing parameters as needed : /// -/// ## Divider horizontal with default color : +/// **Divider horizontal with default color :** /// /// Separates stacked vertical sections. Example use case: Between main content and a footer. /// @@ -49,8 +52,7 @@ import 'package:ouds_theme_contract/ouds_theme.dart'; /// ``` /// /// -/// -/// ## Divider vertical with default color : +/// **Divider vertical with default color :** /// /// Separates horizontally aligned elements. Example use case: Between two columns in a layout. /// diff --git a/ouds_core/lib/components/form_input/ouds_text_input.dart b/ouds_core/lib/components/form_input/ouds_text_input.dart index 756b9f3ef..0fff7491a 100644 --- a/ouds_core/lib/components/form_input/ouds_text_input.dart +++ b/ouds_core/lib/components/form_input/ouds_text_input.dart @@ -9,7 +9,7 @@ // Software description: Flutter library of reusable graphical components // -/// OudsTextField +/// {@category Form input} library; import 'package:flutter/material.dart'; @@ -30,6 +30,9 @@ import 'package:ouds_theme_contract/ouds_theme.dart'; import 'package:ouds_theme_contract/ouds_theme_contract.dart'; import 'package:ouds_theme_contract/theme/tokens/components/ouds_textInput_tokens.dart'; +// TODO: Add documentation URL once it is available +/// +/// **Reference design version : 1.3.0** /// /// `OudsTextField` is a customizable text input field that allows users /// to enter, edit, or read text. @@ -48,11 +51,11 @@ import 'package:ouds_theme_contract/theme/tokens/components/ouds_textInput_token /// - [readOnly]: Whether the input is read-only. /// - [keyboardType]: The type of keyboard to display. /// - [onEditingComplete]: Callback invoked when editing is complete. -/// - [decoration]: An `OudsInputDecoration` object to configure label, -/// - [helperLink]: An `OudsLink` object to display a helper link. +/// - [decoration]: An [OudsInputDecoration] object to configure label, +/// - [helperLink]: An [OudsLink] object to display a helper link. /// - [trailingIconContentDescription]: A semantic label for accessibility trailing icon. /// -/// ## Simple example: +/// ### You can use [OudsTextField] component in your project, customizing parameters as needed : /// /// ```dart /// OudsTextField( diff --git a/ouds_core/lib/components/form_input/password_input/ouds_password_input.dart b/ouds_core/lib/components/form_input/password_input/ouds_password_input.dart index fdf1d53b0..ee1256992 100644 --- a/ouds_core/lib/components/form_input/password_input/ouds_password_input.dart +++ b/ouds_core/lib/components/form_input/password_input/ouds_password_input.dart @@ -9,7 +9,7 @@ // Software description: Flutter library of reusable graphical components // -/// OudsPasswordInput +/// {@category Form input} library; import 'package:flutter/material.dart'; @@ -31,6 +31,8 @@ import 'package:ouds_theme_contract/theme/tokens/components/ouds_textInput_token // TODO: Add documentation URL once it is available /// +/// **Reference design version : 1.3.0** +/// /// `OudsPasswordInput` is a customizable password input field that allows users /// to enter, edit, or read their password securely. /// @@ -47,9 +49,10 @@ import 'package:ouds_theme_contract/theme/tokens/components/ouds_textInput_token /// - [enabled]: Whether the input is enabled. /// - [readOnly]: Whether the input is read-only. /// - [keyboardType]: The type of keyboard to display. -/// - [decoration]: An `OudsInputDecoration` object to configure label, +/// - [decoration]: An [OudsInputDecoration] object to configure label, +/// +/// ### You can use [OudsPasswordInput] component in your project, customizing parameters as needed : /// -/// ## Simple example: /// ```dart /// OudsPasswordInput( /// controller: myController, diff --git a/ouds_core/lib/components/link/ouds_link.dart b/ouds_core/lib/components/link/ouds_link.dart index e8981599a..3c441d773 100644 --- a/ouds_core/lib/components/link/ouds_link.dart +++ b/ouds_core/lib/components/link/ouds_link.dart @@ -11,7 +11,7 @@ * // */ -/// OudsLink +/// {@category Link} library; import 'package:flutter/material.dart'; @@ -42,6 +42,8 @@ enum OudsLinkSize { /// [OUDS Link design guidelines](https://unified-design-system.orange.com/472794e18/p/31c33b-link) /// +/// **Reference design version : 2.2.0** +/// /// A link is a user interface element that allows navigation from one location to another, /// either within the same page, across different pages of a site (or application), or to an external resource. /// Typically rendered as underlined or styled text, @@ -58,10 +60,12 @@ enum OudsLinkSize { /// - [onPressed]: Callback invoked when the link is clicked. /// /// -/// ## You can use [OudsLink] like this : +/// ### You can use [OudsLink] component in your project, customizing parameters as needed : +/// +/// **Small Text only link :** /// -/// ### Small Text only link : /// This is the default layout of the component. + /// ```dart /// OudsLink( /// label: 'Label', @@ -321,8 +325,6 @@ class _OudsLinkState extends State { required bool isDisabled, }) { final minHeightAndWidth = linkSizeModifier.getMinWidthAndHeight(widget.size); - final borderTokens = OudsTheme.of(context).borderTokens; - final linkToken = OudsTheme.of(context).componentsTokens(context).link; return Container( constraints: BoxConstraints( diff --git a/ouds_core/lib/components/pin_code_input/digit_input/ouds_digit_input.dart b/ouds_core/lib/components/pin_code_input/digit_input/ouds_digit_input.dart index ae820caf7..a1a46ae9e 100644 --- a/ouds_core/lib/components/pin_code_input/digit_input/ouds_digit_input.dart +++ b/ouds_core/lib/components/pin_code_input/digit_input/ouds_digit_input.dart @@ -10,8 +10,7 @@ * // Software description: Flutter library of reusable graphical components * // */ -/// OudsDigitInput -library; +/// @nodoc import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; diff --git a/ouds_core/lib/components/pin_code_input/ouds_pin_code_input.dart b/ouds_core/lib/components/pin_code_input/ouds_pin_code_input.dart index b87ca0452..af8a1d014 100644 --- a/ouds_core/lib/components/pin_code_input/ouds_pin_code_input.dart +++ b/ouds_core/lib/components/pin_code_input/ouds_pin_code_input.dart @@ -10,7 +10,7 @@ * // Software description: Flutter library of reusable graphical components * // */ -/// OudsPinCodeInput +/// {@category PIN code input} library; import 'package:flutter/material.dart'; @@ -39,7 +39,9 @@ enum OudsPinCodeInputLength{ const OudsPinCodeInputLength(); } -/// [OUDS Pin Code Input design guidelines](https://unified-design-system.orange.com/472794e18/p/9767bc-pin-code-input-v1) +// TODO: Add documentation URL once it is available +/// +/// **Reference design version : 1.2.0** /// /// A PIN code input is a specialized form field used to capture short, fixed-length numeric codes, /// typically for authentication or confirmation purposes, such as a 4, 6 or 8-digit personal identification number (PIN). @@ -63,7 +65,7 @@ enum OudsPinCodeInputLength{ /// - [onChanged]: Callback triggered when the pin code value changes. Provides the new value of the pin code input. /// - [digitInputDecoration]: Defines the decoration of each digit input box [OudsDigitInputDecoration] /// -/// ## You can use [OudsPinCodeInput] like this : +/// ### You can use [OudsPinCodeInput] component in your project, customizing parameters as needed : /// /// ```dart /// OudsPinCodeInput( diff --git a/ouds_core/lib/components/radio_button/ouds_radio_button.dart b/ouds_core/lib/components/radio_button/ouds_radio_button.dart index 2bb9fefca..017af29b6 100644 --- a/ouds_core/lib/components/radio_button/ouds_radio_button.dart +++ b/ouds_core/lib/components/radio_button/ouds_radio_button.dart @@ -11,7 +11,7 @@ * // */ -/// OudsRadioButton +/// {@category Radio button} library; import 'package:flutter/material.dart'; @@ -31,6 +31,8 @@ import 'package:ouds_theme_contract/ouds_theme.dart'; /// /// [OUDS Radio Button Design Guidelines](https://unified-design-system.orange.com/472794e18/p/90c467-radio-button) /// +/// **Reference design version : 1.4.0** +/// /// An OUDS radio button widget. /// /// This widget displays a radio button that is part of a group. It determines its selected state @@ -45,9 +47,9 @@ import 'package:ouds_theme_contract/ouds_theme.dart'; /// If `null`, the radio button is disabled and non-interactive. /// [isError] Indicates whether the radio button is in an error state. /// -/// ## You can use [OudsRadioButton] like this : +/// ### You can use [OudsRadioButton] component in your project, customizing parameters as needed : /// -/// ### Selection status +/// **Selection status :** /// /// Typically, a radio button has two main states: Selected and Unselected. /// diff --git a/ouds_core/lib/components/radio_button/ouds_radio_button_item.dart b/ouds_core/lib/components/radio_button/ouds_radio_button_item.dart index e9350bff1..dcb2d94a5 100644 --- a/ouds_core/lib/components/radio_button/ouds_radio_button_item.dart +++ b/ouds_core/lib/components/radio_button/ouds_radio_button_item.dart @@ -11,16 +11,19 @@ * // */ -/// OudsRadioButtonItem +/// {@category Radio button} library; import 'package:flutter/material.dart'; import 'package:ouds_core/components/control/ouds_control_item.dart'; +import 'package:ouds_core/components/divider/ouds_divider.dart'; import 'package:ouds_core/components/radio_button/ouds_radio_button.dart'; /// /// [OUDS Radio Button Design Guidelines](https://unified-design-system.orange.com/472794e18/p/90c467-radio-button) /// +/// **Reference design version : 1.4.0** +/// /// The **Radio button item variant** can function as a simple input with a label, or it can be combined with optional elements such as helper text, /// additional a divider, an outlined, or an icon, allowing it to suit various use cases. /// @@ -44,12 +47,12 @@ import 'package:ouds_core/components/radio_button/ouds_radio_button.dart'; /// enabled color. Note that if it is set to `true` and [enabled] is set to `false`, the checkbox item will be displayed in disabled state. /// - [enabled]: Controls the enabled state of the checkbox item. When `false`, the checkbox, the texts and the optional icon are disabled, and the item /// will not be clickable -/// - [divider]: Controls the display of a divider at the bottom of the checkbox item. +/// - [divider]: Controls the display of a [OudsDivider] at the bottom of the checkbox item. /// /// -/// ## You can use [OudsRadioButtonItem] like this : +/// ### You can use [OudsRadioButtonItem] component in your project, customizing parameters as needed : /// -/// ### State enabled : +/// **State enabled :** /// /// The default active state where the radio button is functional and selectable. /// It may show an unselected or selected style, with a label and helper text visible. diff --git a/ouds_core/lib/components/switch/ouds_switch.dart b/ouds_core/lib/components/switch/ouds_switch.dart index a159c337e..1fad9e913 100644 --- a/ouds_core/lib/components/switch/ouds_switch.dart +++ b/ouds_core/lib/components/switch/ouds_switch.dart @@ -9,7 +9,7 @@ // Software description: Flutter library of reusable graphical components // -/// OudsSwitch +/// {@category Switch} library; import 'package:flutter/material.dart'; @@ -26,6 +26,8 @@ import 'package:ouds_theme_contract/theme/tokens/components/ouds_switch_tokens.d /// /// [OUDS Switch Design Guidelines](https://unified-design-system.orange.com/472794e18/p/18acc0-switch) /// +/// **Reference design version : 1.5.0** +/// /// Switches allow the user to toggle between two states, typically "on" and "off". It is represented as a slider that changes its position or color to indicate /// the current state. Switches are used to enable or disable features, options, or settings in an intuitive and visual manner. /// @@ -40,7 +42,7 @@ import 'package:ouds_theme_contract/theme/tokens/components/ouds_switch_tokens.d /// [onChanged] Callback triggered when the user selects this switch. /// If `null`, switch is disabled and non-interactive. /// -/// ## You can use [OudsSwitch] like this : +/// ### You can use [OudsSwitch] component in your project, customizing parameters as needed : /// /// ```dart /// OudsSwitch( diff --git a/ouds_core/lib/components/switch/ouds_switch_item.dart b/ouds_core/lib/components/switch/ouds_switch_item.dart index 26eb5bd9c..76df66807 100644 --- a/ouds_core/lib/components/switch/ouds_switch_item.dart +++ b/ouds_core/lib/components/switch/ouds_switch_item.dart @@ -9,7 +9,7 @@ // Software description: Flutter library of reusable graphical components // -/// OudsSwitchButtonItem +/// {@category Switch} library; import 'package:flutter/material.dart'; @@ -20,6 +20,8 @@ import 'package:ouds_core/l10n/gen/ouds_localizations.dart'; /// /// [OUDS Switch Design Guidelines](https://unified-design-system.orange.com/472794e18/p/18acc0-switch) /// +/// **Reference design version : 1.5.0** +/// /// The **Switch item variant** can function as a simple input with a label, or it can be combined with optional elements such as helper text, /// additional a divider, an outlined, or an icon, allowing it to suit various use cases. /// @@ -42,9 +44,9 @@ import 'package:ouds_core/l10n/gen/ouds_localizations.dart'; /// - [divider]: Controls the display of a divider at the bottom of the switch item. /// /// -/// ## You can use [OudsSwitchItem] like this : +/// ### You can use [OudsSwitchItem] component in your project, customizing parameters as needed : /// -/// ### State enabled : +/// **State enabled :** /// /// The default active state where the switch is functional and selectable. /// It may show an unselected or selected style, with a label and helper text visible. diff --git a/ouds_core/lib/components/tag/ouds_input_tag.dart b/ouds_core/lib/components/tag/ouds_input_tag.dart index 8fa9c4b2c..ba680e9f8 100644 --- a/ouds_core/lib/components/tag/ouds_input_tag.dart +++ b/ouds_core/lib/components/tag/ouds_input_tag.dart @@ -9,7 +9,7 @@ // Software description: Flutter library of reusable graphical components // -/// OudsInputTag +/// {@category Tag} library; import 'package:flutter/material.dart'; @@ -30,6 +30,8 @@ import 'internal/ouds_tag_control_state.dart'; /// /// [OUDS Input Tag Design Guidelines](https://unified-design-system.orange.com/472794e18/p/7565ce-tag/t/697817ca4d) /// +/// **Reference design version : 1.4.0** +/// /// A Tag Input is a component that allows users to enter multiple values, each represented as a tag input. /// As users type and submit values (usually by pressing enter, comma, or tab), each value is transformed into a Tag. /// Tag Inputs are often used for adding labels, categories, or participants. @@ -42,9 +44,8 @@ import 'internal/ouds_tag_control_state.dart'; /// - [label]: Label displayed in the tag input which describes the tag option. /// - [onPressed]: Callback invoked when the tag input is clicked to delete it. -/// ## You can use [OudsInputTag] like this : +/// ### You can use [OudsInputTag] like this : /// -/// ### Tag input : /// /// ```dart /// OudsInputTag( diff --git a/ouds_core/lib/components/tag/ouds_tag.dart b/ouds_core/lib/components/tag/ouds_tag.dart index 90b3b349e..b784879d9 100644 --- a/ouds_core/lib/components/tag/ouds_tag.dart +++ b/ouds_core/lib/components/tag/ouds_tag.dart @@ -9,7 +9,7 @@ // Software description: Flutter library of reusable graphical components // -/// OudsTag +/// {@category Tag} library; import 'package:flutter/material.dart'; @@ -57,6 +57,8 @@ enum OudsTagAppearance { /// /// [OUDS Tag Design Guidelines](https://unified-design-system.orange.com/472794e18/p/7565ce-tag) /// +/// **Reference design version : 1.4.0** +/// /// A tag is a small element that shows short info like a label, keyword, or category. /// It helps users quickly find, group, or understand content. /// Tags can stay in place or be removed, and can include icons or actions like close or edit. @@ -78,9 +80,8 @@ enum OudsTagAppearance { /// - The background color is determined by the [status], using [OudsTagStatus]. /// - The size and margins are adjusted according to the badge [size] via [OudsTagSize]. /// -/// ## You can use [OudsTag] like this : +/// ### You can use [OudsTag] component in your project, customizing parameters as needed : /// -/// ### Text only tag : /// This is the default layout of the component. /// ```dart /// OudsTag(