diff --git a/docs/0.4.0/components/banners.md b/docs/0.4.0/components/banners.md new file mode 100644 index 00000000..80b7b446 --- /dev/null +++ b/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) {}) +``` + + diff --git a/docs/0.4.0/components/banners_docs.md b/docs/0.4.0/components/banners_docs.md new file mode 100644 index 00000000..9211cff1 --- /dev/null +++ b/docs/0.4.0/components/banners_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: banners.md +--- diff --git a/docs/0.4.0/components/buttons.md b/docs/0.4.0/components/buttons.md new file mode 100644 index 00000000..b9766abb --- /dev/null +++ b/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_ diff --git a/docs/0.4.0/components/buttons_docs.md b/docs/0.4.0/components/buttons_docs.md new file mode 100644 index 00000000..a626304a --- /dev/null +++ b/docs/0.4.0/components/buttons_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: buttons.md +--- diff --git a/docs/0.4.0/components/cards.md b/docs/0.4.0/components/cards.md new file mode 100644 index 00000000..4535932a --- /dev/null +++ b/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_ diff --git a/docs/0.4.0/components/cards_docs.md b/docs/0.4.0/components/cards_docs.md new file mode 100644 index 00000000..9f4d12d7 --- /dev/null +++ b/docs/0.4.0/components/cards_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: cards.md +--- diff --git a/docs/0.4.0/components/checkboxes.md b/docs/0.4.0/components/checkboxes.md new file mode 100644 index 00000000..2f45e171 --- /dev/null +++ b/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_ diff --git a/docs/0.4.0/components/checkboxes_docs.md b/docs/0.4.0/components/checkboxes_docs.md new file mode 100644 index 00000000..89244539 --- /dev/null +++ b/docs/0.4.0/components/checkboxes_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: checkboxes.md +--- diff --git a/docs/0.4.0/components/chips.md b/docs/0.4.0/components/chips.md new file mode 100644 index 00000000..b3c27ca8 --- /dev/null +++ b/docs/0.4.0/components/chips.md @@ -0,0 +1,133 @@ +--- +layout: detail +title: Chips +description: Chips are compact elements that represent an input, attribute, or action. +--- + +--- + +**Page summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) +* [Choice selection](#choice-selection) + * [Single election](#single-selection) + * [Single selection, One chip selected](#single-selection-one-chip-selected) + * [Single selection, No chip selected](#single-selection-no-chip-selected) + * [Multiple selection](#multiple-selection) + +--- + +## Specifications references + +- [Design System Manager](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/) + +Chips support dynamic types for accessibility. + +## Variants + +According to the `ODSChip` configuration following representations are available. + +```swift + enum MyChip: Int { + case enabled + case selected + case disabled + } + + // Text only + ODSChip(.enabled, text: "Enable") + + // Text with icon + ODSChip(.enabled, text: "Enable", thumbnail: .icon(iconImage)) + + // Text with system icon + ODSChip(.enabled, text: "Enable", thumbnail: .iconSystem(name: "heart")) + + // Text with avatar + ODSChip(.enabled, text: "Enable", thumbnail: .avatar(avatarImage)) +``` + +A chip can also be disabled, and removable from the list of selection + +``` swift + // Removable + ODSChip(.enabled, text: "Enable", removable: true) + + // Disbaled + ODSChip(.enabled, text: "Enable", disbaled: true) + +``` + + +## Choice selection + +The selection is managed by the `ODSChipPicker` providing the right type of selection. + +### Single selection + +The option allows a single chip selection from a set of options. According to the type of selection (optinal or not), it is possible to accept at least one or zero selected chip. + +#### Single selection, One chip selected + +```swift + enum ChipTest Int{ + case title1 = 1, + case title2 = 2 + } + + struct ODSChipPickerSingleSelection: View { + @State var singleSelection: ChipTest + let chips = [ODSChip] + + var body: some View { + ODSChipPicker(title: "Single selection (at least one element)", + selection: $singleSelection, + chips: chips) + ) + } + + init() { + chips = [ODSChip(.title1, text: "Chips 1"), ODSChip(.title2, text: "Chip 2")] + singleSelection = .title1 + } + } +``` + +#### Single selection, No chip selected + +```swift + struct ODSChipPickerSingleSelection: View { + @State var singleSelection: ChipTest? + + var body: some View { + ODSChipPicker(title: "Single selection (No chip seleted allowed)", + selection: $singleSelection, + chips: chips] + ) + } + } +``` + +### Multiple selection + +The option allows a multiple chips selection from a set of options. Depending on `allowZeroSelection` parameter, it is possible to accept at least one or zero selected chip. + +```swift + struct ODSChipPickerMultipleSelection: View { + @State var multipleSelection: [Int] + + var body: some View { + ODSChipPicker(title: "Multiple selection", + selection: $multipleSelection, + allowZeroSelection: true, + chips: chips] + ) + } + } +``` diff --git a/docs/0.4.0/components/chips_docs.md b/docs/0.4.0/components/chips_docs.md new file mode 100644 index 00000000..cf9760b5 --- /dev/null +++ b/docs/0.4.0/components/chips_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: chips.md +--- diff --git a/docs/0.4.0/components/dialogs.md b/docs/0.4.0/components/dialogs.md new file mode 100644 index 00000000..81947af3 --- /dev/null +++ b/docs/0.4.0/components/dialogs.md @@ -0,0 +1,66 @@ +--- +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** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Alert dialog](#alert-dialog) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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** + +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 + +_Soon available_ diff --git a/docs/0.4.0/components/dialogs_docs.md b/docs/0.4.0/components/dialogs_docs.md new file mode 100644 index 00000000..253fa372 --- /dev/null +++ b/docs/0.4.0/components/dialogs_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: dialogs.md +--- diff --git a/docs/0.4.0/components/floatingActionButtons.md b/docs/0.4.0/components/floatingActionButtons.md new file mode 100644 index 00000000..9c8ed58f --- /dev/null +++ b/docs/0.4.0/components/floatingActionButtons.md @@ -0,0 +1,119 @@ +--- +layout: detail +title: Floating action buttons +description: A floating action button (FAB) represents the primary action of a screen. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Regular FAB](#regular-fab) + * [Small FAB](#small-fab) + * [Large FAB](#large-fab) + * [Extended FAB](#extended-fab) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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 +); +``` + +### 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 +); +``` + +### 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 +); +``` + +### 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 OdsSmallFloatingActionButton( + onClick: () {}, + text = "Add", + icon: const Icon(Icons.add), //Optional +); +``` + + +## Component specific tokens + +_Soon available_ diff --git a/docs/0.4.0/components/floatingActionButtons_docs.md b/docs/0.4.0/components/floatingActionButtons_docs.md new file mode 100644 index 00000000..ea8f4414 --- /dev/null +++ b/docs/0.4.0/components/floatingActionButtons_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: floatingActionButtons.md +--- diff --git a/docs/0.4.0/components/images/app_bar_top_overflow_menu_dark.png b/docs/0.4.0/components/images/app_bar_top_overflow_menu_dark.png new file mode 100644 index 00000000..60322543 Binary files /dev/null and b/docs/0.4.0/components/images/app_bar_top_overflow_menu_dark.png differ diff --git a/docs/0.4.0/components/images/app_bar_top_overflow_menu_light.png b/docs/0.4.0/components/images/app_bar_top_overflow_menu_light.png new file mode 100644 index 00000000..2e3bd905 Binary files /dev/null and b/docs/0.4.0/components/images/app_bar_top_overflow_menu_light.png differ diff --git a/docs/0.4.0/components/images/banner_dark.png b/docs/0.4.0/components/images/banner_dark.png new file mode 100644 index 00000000..60803f20 Binary files /dev/null and b/docs/0.4.0/components/images/banner_dark.png differ diff --git a/docs/0.4.0/components/images/banner_light.png b/docs/0.4.0/components/images/banner_light.png new file mode 100644 index 00000000..4d174146 Binary files /dev/null and b/docs/0.4.0/components/images/banner_light.png differ diff --git a/docs/0.4.0/components/images/button_contained_dark.png b/docs/0.4.0/components/images/button_contained_dark.png new file mode 100644 index 00000000..8cc9ee5f Binary files /dev/null and b/docs/0.4.0/components/images/button_contained_dark.png differ diff --git a/docs/0.4.0/components/images/button_contained_light.png b/docs/0.4.0/components/images/button_contained_light.png new file mode 100644 index 00000000..401db36d Binary files /dev/null and b/docs/0.4.0/components/images/button_contained_light.png differ diff --git a/docs/0.4.0/components/images/button_contained_negative_dark.png b/docs/0.4.0/components/images/button_contained_negative_dark.png new file mode 100644 index 00000000..13f22a29 Binary files /dev/null and b/docs/0.4.0/components/images/button_contained_negative_dark.png differ diff --git a/docs/0.4.0/components/images/button_contained_negative_light.png b/docs/0.4.0/components/images/button_contained_negative_light.png new file mode 100644 index 00000000..018b84cf Binary files /dev/null and b/docs/0.4.0/components/images/button_contained_negative_light.png differ diff --git a/docs/0.4.0/components/images/button_contained_positive_dark.png b/docs/0.4.0/components/images/button_contained_positive_dark.png new file mode 100644 index 00000000..b1527819 Binary files /dev/null and b/docs/0.4.0/components/images/button_contained_positive_dark.png differ diff --git a/docs/0.4.0/components/images/button_contained_positive_light.png b/docs/0.4.0/components/images/button_contained_positive_light.png new file mode 100644 index 00000000..906bf0b3 Binary files /dev/null and b/docs/0.4.0/components/images/button_contained_positive_light.png differ diff --git a/docs/0.4.0/components/images/button_icon_dark.png b/docs/0.4.0/components/images/button_icon_dark.png new file mode 100644 index 00000000..551ce30a Binary files /dev/null and b/docs/0.4.0/components/images/button_icon_dark.png differ diff --git a/docs/0.4.0/components/images/button_icon_light.png b/docs/0.4.0/components/images/button_icon_light.png new file mode 100644 index 00000000..b11c9dd5 Binary files /dev/null and b/docs/0.4.0/components/images/button_icon_light.png differ diff --git a/docs/0.4.0/components/images/button_icon_toggle_dark.png b/docs/0.4.0/components/images/button_icon_toggle_dark.png new file mode 100644 index 00000000..d2702c6e Binary files /dev/null and b/docs/0.4.0/components/images/button_icon_toggle_dark.png differ diff --git a/docs/0.4.0/components/images/button_icon_toggle_group_dark.png b/docs/0.4.0/components/images/button_icon_toggle_group_dark.png new file mode 100644 index 00000000..1f3fdc9a Binary files /dev/null and b/docs/0.4.0/components/images/button_icon_toggle_group_dark.png differ diff --git a/docs/0.4.0/components/images/button_icon_toggle_group_light.png b/docs/0.4.0/components/images/button_icon_toggle_group_light.png new file mode 100644 index 00000000..4f32291c Binary files /dev/null and b/docs/0.4.0/components/images/button_icon_toggle_group_light.png differ diff --git a/docs/0.4.0/components/images/button_icon_toggle_light.png b/docs/0.4.0/components/images/button_icon_toggle_light.png new file mode 100644 index 00000000..8256c395 Binary files /dev/null and b/docs/0.4.0/components/images/button_icon_toggle_light.png differ diff --git a/docs/0.4.0/components/images/button_outlined_dark.png b/docs/0.4.0/components/images/button_outlined_dark.png new file mode 100644 index 00000000..420ab1a4 Binary files /dev/null and b/docs/0.4.0/components/images/button_outlined_dark.png differ diff --git a/docs/0.4.0/components/images/button_outlined_light.png b/docs/0.4.0/components/images/button_outlined_light.png new file mode 100644 index 00000000..a7c56296 Binary files /dev/null and b/docs/0.4.0/components/images/button_outlined_light.png differ diff --git a/docs/0.4.0/components/images/button_text_dark.png b/docs/0.4.0/components/images/button_text_dark.png new file mode 100644 index 00000000..13ae0324 Binary files /dev/null and b/docs/0.4.0/components/images/button_text_dark.png differ diff --git a/docs/0.4.0/components/images/button_text_light.png b/docs/0.4.0/components/images/button_text_light.png new file mode 100644 index 00000000..f574d322 Binary files /dev/null and b/docs/0.4.0/components/images/button_text_light.png differ diff --git a/docs/0.4.0/components/images/button_text_toggle_group_dark.png b/docs/0.4.0/components/images/button_text_toggle_group_dark.png new file mode 100644 index 00000000..b8aab9b3 Binary files /dev/null and b/docs/0.4.0/components/images/button_text_toggle_group_dark.png differ diff --git a/docs/0.4.0/components/images/button_text_toggle_group_light.png b/docs/0.4.0/components/images/button_text_toggle_group_light.png new file mode 100644 index 00000000..7c594ce4 Binary files /dev/null and b/docs/0.4.0/components/images/button_text_toggle_group_light.png differ diff --git a/docs/0.4.0/components/images/button_toggle_dark.png b/docs/0.4.0/components/images/button_toggle_dark.png new file mode 100644 index 00000000..20faac6f Binary files /dev/null and b/docs/0.4.0/components/images/button_toggle_dark.png differ diff --git a/docs/0.4.0/components/images/button_toggle_light.png b/docs/0.4.0/components/images/button_toggle_light.png new file mode 100644 index 00000000..70554b9a Binary files /dev/null and b/docs/0.4.0/components/images/button_toggle_light.png differ diff --git a/docs/0.4.0/components/images/card_horizontal_dark.png b/docs/0.4.0/components/images/card_horizontal_dark.png new file mode 100644 index 00000000..ba5324c9 Binary files /dev/null and b/docs/0.4.0/components/images/card_horizontal_dark.png differ diff --git a/docs/0.4.0/components/images/card_horizontal_light.png b/docs/0.4.0/components/images/card_horizontal_light.png new file mode 100644 index 00000000..cc4c5928 Binary files /dev/null and b/docs/0.4.0/components/images/card_horizontal_light.png differ diff --git a/docs/0.4.0/components/images/card_small_dark.png b/docs/0.4.0/components/images/card_small_dark.png new file mode 100644 index 00000000..9a4097c8 Binary files /dev/null and b/docs/0.4.0/components/images/card_small_dark.png differ diff --git a/docs/0.4.0/components/images/card_small_light.png b/docs/0.4.0/components/images/card_small_light.png new file mode 100644 index 00000000..4b942076 Binary files /dev/null and b/docs/0.4.0/components/images/card_small_light.png differ diff --git a/docs/0.4.0/components/images/card_vertical_header_first_dark.png b/docs/0.4.0/components/images/card_vertical_header_first_dark.png new file mode 100644 index 00000000..1626639c Binary files /dev/null and b/docs/0.4.0/components/images/card_vertical_header_first_dark.png differ diff --git a/docs/0.4.0/components/images/card_vertical_header_first_light.png b/docs/0.4.0/components/images/card_vertical_header_first_light.png new file mode 100644 index 00000000..31e9d39c Binary files /dev/null and b/docs/0.4.0/components/images/card_vertical_header_first_light.png differ diff --git a/docs/0.4.0/components/images/card_vertical_image_first_dark.png b/docs/0.4.0/components/images/card_vertical_image_first_dark.png new file mode 100644 index 00000000..090ce526 Binary files /dev/null and b/docs/0.4.0/components/images/card_vertical_image_first_dark.png differ diff --git a/docs/0.4.0/components/images/card_vertical_image_first_light.png b/docs/0.4.0/components/images/card_vertical_image_first_light.png new file mode 100644 index 00000000..9dd3ed2d Binary files /dev/null and b/docs/0.4.0/components/images/card_vertical_image_first_light.png differ diff --git a/docs/0.4.0/components/images/checkbox_dark.png b/docs/0.4.0/components/images/checkbox_dark.png new file mode 100644 index 00000000..ebd5321e Binary files /dev/null and b/docs/0.4.0/components/images/checkbox_dark.png differ diff --git a/docs/0.4.0/components/images/checkbox_light.png b/docs/0.4.0/components/images/checkbox_light.png new file mode 100644 index 00000000..5650e8b3 Binary files /dev/null and b/docs/0.4.0/components/images/checkbox_light.png differ diff --git a/docs/0.4.0/components/images/chips_action_dark.png b/docs/0.4.0/components/images/chips_action_dark.png new file mode 100644 index 00000000..c9bebe9b Binary files /dev/null and b/docs/0.4.0/components/images/chips_action_dark.png differ diff --git a/docs/0.4.0/components/images/chips_action_light.png b/docs/0.4.0/components/images/chips_action_light.png new file mode 100644 index 00000000..2b19d622 Binary files /dev/null and b/docs/0.4.0/components/images/chips_action_light.png differ diff --git a/docs/0.4.0/components/images/chips_action_outlined_dark.png b/docs/0.4.0/components/images/chips_action_outlined_dark.png new file mode 100644 index 00000000..d88b7e0f Binary files /dev/null and b/docs/0.4.0/components/images/chips_action_outlined_dark.png differ diff --git a/docs/0.4.0/components/images/chips_action_outlined_light.png b/docs/0.4.0/components/images/chips_action_outlined_light.png new file mode 100644 index 00000000..10bddc30 Binary files /dev/null and b/docs/0.4.0/components/images/chips_action_outlined_light.png differ diff --git a/docs/0.4.0/components/images/chips_choice_dark.png b/docs/0.4.0/components/images/chips_choice_dark.png new file mode 100644 index 00000000..338f76f7 Binary files /dev/null and b/docs/0.4.0/components/images/chips_choice_dark.png differ diff --git a/docs/0.4.0/components/images/chips_choice_flow_row_dark.png b/docs/0.4.0/components/images/chips_choice_flow_row_dark.png new file mode 100644 index 00000000..18a7c58c Binary files /dev/null and b/docs/0.4.0/components/images/chips_choice_flow_row_dark.png differ diff --git a/docs/0.4.0/components/images/chips_choice_flow_row_light.png b/docs/0.4.0/components/images/chips_choice_flow_row_light.png new file mode 100644 index 00000000..d80a0035 Binary files /dev/null and b/docs/0.4.0/components/images/chips_choice_flow_row_light.png differ diff --git a/docs/0.4.0/components/images/chips_choice_light.png b/docs/0.4.0/components/images/chips_choice_light.png new file mode 100644 index 00000000..f9b38d54 Binary files /dev/null and b/docs/0.4.0/components/images/chips_choice_light.png differ diff --git a/docs/0.4.0/components/images/chips_choice_outlined_dark.png b/docs/0.4.0/components/images/chips_choice_outlined_dark.png new file mode 100644 index 00000000..1b432928 Binary files /dev/null and b/docs/0.4.0/components/images/chips_choice_outlined_dark.png differ diff --git a/docs/0.4.0/components/images/chips_choice_outlined_light.png b/docs/0.4.0/components/images/chips_choice_outlined_light.png new file mode 100644 index 00000000..2eaba474 Binary files /dev/null and b/docs/0.4.0/components/images/chips_choice_outlined_light.png differ diff --git a/docs/0.4.0/components/images/chips_filter_avatar_dark.png b/docs/0.4.0/components/images/chips_filter_avatar_dark.png new file mode 100644 index 00000000..9158aeb7 Binary files /dev/null and b/docs/0.4.0/components/images/chips_filter_avatar_dark.png differ diff --git a/docs/0.4.0/components/images/chips_filter_avatar_light.png b/docs/0.4.0/components/images/chips_filter_avatar_light.png new file mode 100644 index 00000000..1914df0d Binary files /dev/null and b/docs/0.4.0/components/images/chips_filter_avatar_light.png differ diff --git a/docs/0.4.0/components/images/chips_filter_dark.png b/docs/0.4.0/components/images/chips_filter_dark.png new file mode 100644 index 00000000..6a79f17b Binary files /dev/null and b/docs/0.4.0/components/images/chips_filter_dark.png differ diff --git a/docs/0.4.0/components/images/chips_filter_light.png b/docs/0.4.0/components/images/chips_filter_light.png new file mode 100644 index 00000000..d39968cd Binary files /dev/null and b/docs/0.4.0/components/images/chips_filter_light.png differ diff --git a/docs/0.4.0/components/images/chips_input_dark.png b/docs/0.4.0/components/images/chips_input_dark.png new file mode 100644 index 00000000..d76828f0 Binary files /dev/null and b/docs/0.4.0/components/images/chips_input_dark.png differ diff --git a/docs/0.4.0/components/images/chips_input_light.png b/docs/0.4.0/components/images/chips_input_light.png new file mode 100644 index 00000000..436f48b7 Binary files /dev/null and b/docs/0.4.0/components/images/chips_input_light.png differ diff --git a/docs/0.4.0/components/images/chips_input_outlined_dark.png b/docs/0.4.0/components/images/chips_input_outlined_dark.png new file mode 100644 index 00000000..841191ac Binary files /dev/null and b/docs/0.4.0/components/images/chips_input_outlined_dark.png differ diff --git a/docs/0.4.0/components/images/chips_input_outlined_light.png b/docs/0.4.0/components/images/chips_input_outlined_light.png new file mode 100644 index 00000000..91e8196d Binary files /dev/null and b/docs/0.4.0/components/images/chips_input_outlined_light.png differ diff --git a/docs/0.4.0/components/images/dialog_alert_dark.png b/docs/0.4.0/components/images/dialog_alert_dark.png new file mode 100644 index 00000000..c9dcbac4 Binary files /dev/null and b/docs/0.4.0/components/images/dialog_alert_dark.png differ diff --git a/docs/0.4.0/components/images/dialog_alert_light.png b/docs/0.4.0/components/images/dialog_alert_light.png new file mode 100644 index 00000000..9ad32961 Binary files /dev/null and b/docs/0.4.0/components/images/dialog_alert_light.png differ diff --git a/docs/0.4.0/components/images/fab_dark.png b/docs/0.4.0/components/images/fab_dark.png new file mode 100644 index 00000000..897a5bb5 Binary files /dev/null and b/docs/0.4.0/components/images/fab_dark.png differ diff --git a/docs/0.4.0/components/images/fab_extended_dark.png b/docs/0.4.0/components/images/fab_extended_dark.png new file mode 100644 index 00000000..9b0e85d4 Binary files /dev/null and b/docs/0.4.0/components/images/fab_extended_dark.png differ diff --git a/docs/0.4.0/components/images/fab_extended_light.png b/docs/0.4.0/components/images/fab_extended_light.png new file mode 100644 index 00000000..4c9d7f13 Binary files /dev/null and b/docs/0.4.0/components/images/fab_extended_light.png differ diff --git a/docs/0.4.0/components/images/fab_large_dark.png b/docs/0.4.0/components/images/fab_large_dark.png new file mode 100644 index 00000000..28bfe69b Binary files /dev/null and b/docs/0.4.0/components/images/fab_large_dark.png differ diff --git a/docs/0.4.0/components/images/fab_large_light.png b/docs/0.4.0/components/images/fab_large_light.png new file mode 100644 index 00000000..92e931a2 Binary files /dev/null and b/docs/0.4.0/components/images/fab_large_light.png differ diff --git a/docs/0.4.0/components/images/fab_light.png b/docs/0.4.0/components/images/fab_light.png new file mode 100644 index 00000000..b9e8f14d Binary files /dev/null and b/docs/0.4.0/components/images/fab_light.png differ diff --git a/docs/0.4.0/components/images/fab_mini_dark.png b/docs/0.4.0/components/images/fab_mini_dark.png new file mode 100644 index 00000000..76ce617c Binary files /dev/null and b/docs/0.4.0/components/images/fab_mini_dark.png differ diff --git a/docs/0.4.0/components/images/fab_mini_light.png b/docs/0.4.0/components/images/fab_mini_light.png new file mode 100644 index 00000000..20f73255 Binary files /dev/null and b/docs/0.4.0/components/images/fab_mini_light.png differ diff --git a/docs/0.4.0/components/images/lists_single_line_dark.png b/docs/0.4.0/components/images/lists_single_line_dark.png new file mode 100644 index 00000000..d46eca2d Binary files /dev/null and b/docs/0.4.0/components/images/lists_single_line_dark.png differ diff --git a/docs/0.4.0/components/images/lists_single_line_light.png b/docs/0.4.0/components/images/lists_single_line_light.png new file mode 100644 index 00000000..3bda5190 Binary files /dev/null and b/docs/0.4.0/components/images/lists_single_line_light.png differ diff --git a/docs/0.4.0/components/images/lists_single_line_wide_image_dark.png b/docs/0.4.0/components/images/lists_single_line_wide_image_dark.png new file mode 100644 index 00000000..c00f2192 Binary files /dev/null and b/docs/0.4.0/components/images/lists_single_line_wide_image_dark.png differ diff --git a/docs/0.4.0/components/images/lists_single_line_wide_image_light.png b/docs/0.4.0/components/images/lists_single_line_wide_image_light.png new file mode 100644 index 00000000..d839b5cc Binary files /dev/null and b/docs/0.4.0/components/images/lists_single_line_wide_image_light.png differ diff --git a/docs/0.4.0/components/images/lists_three_line_dark.png b/docs/0.4.0/components/images/lists_three_line_dark.png new file mode 100644 index 00000000..15e350f3 Binary files /dev/null and b/docs/0.4.0/components/images/lists_three_line_dark.png differ diff --git a/docs/0.4.0/components/images/lists_three_line_light.png b/docs/0.4.0/components/images/lists_three_line_light.png new file mode 100644 index 00000000..f3dabd4e Binary files /dev/null and b/docs/0.4.0/components/images/lists_three_line_light.png differ diff --git a/docs/0.4.0/components/images/lists_three_line_wide_image_dark.png b/docs/0.4.0/components/images/lists_three_line_wide_image_dark.png new file mode 100644 index 00000000..2d44de0c Binary files /dev/null and b/docs/0.4.0/components/images/lists_three_line_wide_image_dark.png differ diff --git a/docs/0.4.0/components/images/lists_three_line_wide_image_light.png b/docs/0.4.0/components/images/lists_three_line_wide_image_light.png new file mode 100644 index 00000000..b6eaa436 Binary files /dev/null and b/docs/0.4.0/components/images/lists_three_line_wide_image_light.png differ diff --git a/docs/0.4.0/components/images/lists_two_line_dark.png b/docs/0.4.0/components/images/lists_two_line_dark.png new file mode 100644 index 00000000..7e130d9f Binary files /dev/null and b/docs/0.4.0/components/images/lists_two_line_dark.png differ diff --git a/docs/0.4.0/components/images/lists_two_line_light.png b/docs/0.4.0/components/images/lists_two_line_light.png new file mode 100644 index 00000000..ea4e52cb Binary files /dev/null and b/docs/0.4.0/components/images/lists_two_line_light.png differ diff --git a/docs/0.4.0/components/images/lists_two_line_wide_image_dark.png b/docs/0.4.0/components/images/lists_two_line_wide_image_dark.png new file mode 100644 index 00000000..0ea681e8 Binary files /dev/null and b/docs/0.4.0/components/images/lists_two_line_wide_image_dark.png differ diff --git a/docs/0.4.0/components/images/lists_two_line_wide_image_light.png b/docs/0.4.0/components/images/lists_two_line_wide_image_light.png new file mode 100644 index 00000000..0c214c27 Binary files /dev/null and b/docs/0.4.0/components/images/lists_two_line_wide_image_light.png differ diff --git a/docs/0.4.0/components/images/menu_dropdown_dark.png b/docs/0.4.0/components/images/menu_dropdown_dark.png new file mode 100644 index 00000000..b47bccfe Binary files /dev/null and b/docs/0.4.0/components/images/menu_dropdown_dark.png differ diff --git a/docs/0.4.0/components/images/menu_dropdown_light.png b/docs/0.4.0/components/images/menu_dropdown_light.png new file mode 100644 index 00000000..5af3fb65 Binary files /dev/null and b/docs/0.4.0/components/images/menu_dropdown_light.png differ diff --git a/docs/0.4.0/components/images/menu_exposed_dropdown_dark.png b/docs/0.4.0/components/images/menu_exposed_dropdown_dark.png new file mode 100644 index 00000000..029fb349 Binary files /dev/null and b/docs/0.4.0/components/images/menu_exposed_dropdown_dark.png differ diff --git a/docs/0.4.0/components/images/menu_exposed_dropdown_light.png b/docs/0.4.0/components/images/menu_exposed_dropdown_light.png new file mode 100644 index 00000000..202aa7db Binary files /dev/null and b/docs/0.4.0/components/images/menu_exposed_dropdown_light.png differ diff --git a/docs/0.4.0/components/images/navigation_bar_dark.png b/docs/0.4.0/components/images/navigation_bar_dark.png new file mode 100644 index 00000000..aff18611 Binary files /dev/null and b/docs/0.4.0/components/images/navigation_bar_dark.png differ diff --git a/docs/0.4.0/components/images/navigation_bar_light.png b/docs/0.4.0/components/images/navigation_bar_light.png new file mode 100644 index 00000000..a5d9e288 Binary files /dev/null and b/docs/0.4.0/components/images/navigation_bar_light.png differ diff --git a/docs/0.4.0/components/images/progress_circular_dark.png b/docs/0.4.0/components/images/progress_circular_dark.png new file mode 100644 index 00000000..69b07e8c Binary files /dev/null and b/docs/0.4.0/components/images/progress_circular_dark.png differ diff --git a/docs/0.4.0/components/images/progress_circular_light.png b/docs/0.4.0/components/images/progress_circular_light.png new file mode 100644 index 00000000..b183a1d7 Binary files /dev/null and b/docs/0.4.0/components/images/progress_circular_light.png differ diff --git a/docs/0.4.0/components/images/progress_linear_dark.png b/docs/0.4.0/components/images/progress_linear_dark.png new file mode 100644 index 00000000..e4e3e843 Binary files /dev/null and b/docs/0.4.0/components/images/progress_linear_dark.png differ diff --git a/docs/0.4.0/components/images/progress_linear_light.png b/docs/0.4.0/components/images/progress_linear_light.png new file mode 100644 index 00000000..f56e5773 Binary files /dev/null and b/docs/0.4.0/components/images/progress_linear_light.png differ diff --git a/docs/0.4.0/components/images/radio_button_dark.png b/docs/0.4.0/components/images/radio_button_dark.png new file mode 100644 index 00000000..e7d12ea2 Binary files /dev/null and b/docs/0.4.0/components/images/radio_button_dark.png differ diff --git a/docs/0.4.0/components/images/radio_button_light.png b/docs/0.4.0/components/images/radio_button_light.png new file mode 100644 index 00000000..6de7c051 Binary files /dev/null and b/docs/0.4.0/components/images/radio_button_light.png differ diff --git a/docs/0.4.0/components/images/sheetbottom_dark.png b/docs/0.4.0/components/images/sheetbottom_dark.png new file mode 100644 index 00000000..92919efc Binary files /dev/null and b/docs/0.4.0/components/images/sheetbottom_dark.png differ diff --git a/docs/0.4.0/components/images/sheetbottom_light.png b/docs/0.4.0/components/images/sheetbottom_light.png new file mode 100644 index 00000000..add8e3f0 Binary files /dev/null and b/docs/0.4.0/components/images/sheetbottom_light.png differ diff --git a/docs/0.4.0/components/images/slider_continuous_dark.png b/docs/0.4.0/components/images/slider_continuous_dark.png new file mode 100644 index 00000000..9b745d7f Binary files /dev/null and b/docs/0.4.0/components/images/slider_continuous_dark.png differ diff --git a/docs/0.4.0/components/images/slider_continuous_light.png b/docs/0.4.0/components/images/slider_continuous_light.png new file mode 100644 index 00000000..42ad208b Binary files /dev/null and b/docs/0.4.0/components/images/slider_continuous_light.png differ diff --git a/docs/0.4.0/components/images/slider_continuous_lockups_dark.png b/docs/0.4.0/components/images/slider_continuous_lockups_dark.png new file mode 100644 index 00000000..cd15d6e2 Binary files /dev/null and b/docs/0.4.0/components/images/slider_continuous_lockups_dark.png differ diff --git a/docs/0.4.0/components/images/slider_continuous_lockups_light.png b/docs/0.4.0/components/images/slider_continuous_lockups_light.png new file mode 100644 index 00000000..69f7444f Binary files /dev/null and b/docs/0.4.0/components/images/slider_continuous_lockups_light.png differ diff --git a/docs/0.4.0/components/images/slider_continuous_lockups_with_icon_dark.png b/docs/0.4.0/components/images/slider_continuous_lockups_with_icon_dark.png new file mode 100644 index 00000000..32764754 Binary files /dev/null and b/docs/0.4.0/components/images/slider_continuous_lockups_with_icon_dark.png differ diff --git a/docs/0.4.0/components/images/slider_continuous_lockups_with_icon_light.png b/docs/0.4.0/components/images/slider_continuous_lockups_with_icon_light.png new file mode 100644 index 00000000..39be0469 Binary files /dev/null and b/docs/0.4.0/components/images/slider_continuous_lockups_with_icon_light.png differ diff --git a/docs/0.4.0/components/images/slider_continuous_with_icon_dark.png b/docs/0.4.0/components/images/slider_continuous_with_icon_dark.png new file mode 100644 index 00000000..0d3b71f3 Binary files /dev/null and b/docs/0.4.0/components/images/slider_continuous_with_icon_dark.png differ diff --git a/docs/0.4.0/components/images/slider_continuous_with_icon_light.png b/docs/0.4.0/components/images/slider_continuous_with_icon_light.png new file mode 100644 index 00000000..4e81e7cd Binary files /dev/null and b/docs/0.4.0/components/images/slider_continuous_with_icon_light.png differ diff --git a/docs/0.4.0/components/images/slider_discrete_dark.png b/docs/0.4.0/components/images/slider_discrete_dark.png new file mode 100644 index 00000000..35abccc5 Binary files /dev/null and b/docs/0.4.0/components/images/slider_discrete_dark.png differ diff --git a/docs/0.4.0/components/images/slider_discrete_light.png b/docs/0.4.0/components/images/slider_discrete_light.png new file mode 100644 index 00000000..4f3d5083 Binary files /dev/null and b/docs/0.4.0/components/images/slider_discrete_light.png differ diff --git a/docs/0.4.0/components/images/slider_discrete_lockups_dark.png b/docs/0.4.0/components/images/slider_discrete_lockups_dark.png new file mode 100644 index 00000000..97a6da19 Binary files /dev/null and b/docs/0.4.0/components/images/slider_discrete_lockups_dark.png differ diff --git a/docs/0.4.0/components/images/slider_discrete_lockups_light.png b/docs/0.4.0/components/images/slider_discrete_lockups_light.png new file mode 100644 index 00000000..116273c3 Binary files /dev/null and b/docs/0.4.0/components/images/slider_discrete_lockups_light.png differ diff --git a/docs/0.4.0/components/images/slider_discrete_lockups_with_icon_dark.png b/docs/0.4.0/components/images/slider_discrete_lockups_with_icon_dark.png new file mode 100644 index 00000000..978dbfcb Binary files /dev/null and b/docs/0.4.0/components/images/slider_discrete_lockups_with_icon_dark.png differ diff --git a/docs/0.4.0/components/images/slider_discrete_lockups_with_icon_light.png b/docs/0.4.0/components/images/slider_discrete_lockups_with_icon_light.png new file mode 100644 index 00000000..640cfd2d Binary files /dev/null and b/docs/0.4.0/components/images/slider_discrete_lockups_with_icon_light.png differ diff --git a/docs/0.4.0/components/images/slider_discrete_with_icon_dark.png b/docs/0.4.0/components/images/slider_discrete_with_icon_dark.png new file mode 100644 index 00000000..cd3fa414 Binary files /dev/null and b/docs/0.4.0/components/images/slider_discrete_with_icon_dark.png differ diff --git a/docs/0.4.0/components/images/slider_discrete_with_icon_light.png b/docs/0.4.0/components/images/slider_discrete_with_icon_light.png new file mode 100644 index 00000000..a18b4e09 Binary files /dev/null and b/docs/0.4.0/components/images/slider_discrete_with_icon_light.png differ diff --git a/docs/0.4.0/components/images/snackbar_dark.png b/docs/0.4.0/components/images/snackbar_dark.png new file mode 100644 index 00000000..97597454 Binary files /dev/null and b/docs/0.4.0/components/images/snackbar_dark.png differ diff --git a/docs/0.4.0/components/images/snackbar_light.png b/docs/0.4.0/components/images/snackbar_light.png new file mode 100644 index 00000000..581e307c Binary files /dev/null and b/docs/0.4.0/components/images/snackbar_light.png differ diff --git a/docs/0.4.0/components/images/snackbar_with_action_dark.png b/docs/0.4.0/components/images/snackbar_with_action_dark.png new file mode 100644 index 00000000..0b1db7fe Binary files /dev/null and b/docs/0.4.0/components/images/snackbar_with_action_dark.png differ diff --git a/docs/0.4.0/components/images/snackbar_with_action_light.png b/docs/0.4.0/components/images/snackbar_with_action_light.png new file mode 100644 index 00000000..8590dcf5 Binary files /dev/null and b/docs/0.4.0/components/images/snackbar_with_action_light.png differ diff --git a/docs/0.4.0/components/images/switch_dark.png b/docs/0.4.0/components/images/switch_dark.png new file mode 100644 index 00000000..88e38338 Binary files /dev/null and b/docs/0.4.0/components/images/switch_dark.png differ diff --git a/docs/0.4.0/components/images/switch_light.png b/docs/0.4.0/components/images/switch_light.png new file mode 100644 index 00000000..3e7c4882 Binary files /dev/null and b/docs/0.4.0/components/images/switch_light.png differ diff --git a/docs/0.4.0/components/images/tabs_fixed_dark.png b/docs/0.4.0/components/images/tabs_fixed_dark.png new file mode 100644 index 00000000..1c529c76 Binary files /dev/null and b/docs/0.4.0/components/images/tabs_fixed_dark.png differ diff --git a/docs/0.4.0/components/images/tabs_fixed_light.png b/docs/0.4.0/components/images/tabs_fixed_light.png new file mode 100644 index 00000000..8ceda363 Binary files /dev/null and b/docs/0.4.0/components/images/tabs_fixed_light.png differ diff --git a/docs/0.4.0/components/images/tabs_scrollable_dark.png b/docs/0.4.0/components/images/tabs_scrollable_dark.png new file mode 100644 index 00000000..e99f8912 Binary files /dev/null and b/docs/0.4.0/components/images/tabs_scrollable_dark.png differ diff --git a/docs/0.4.0/components/images/tabs_scrollable_light.png b/docs/0.4.0/components/images/tabs_scrollable_light.png new file mode 100644 index 00000000..c6496d8d Binary files /dev/null and b/docs/0.4.0/components/images/tabs_scrollable_light.png differ diff --git a/docs/0.4.0/components/images/textfield_character_counter_dark.png b/docs/0.4.0/components/images/textfield_character_counter_dark.png new file mode 100644 index 00000000..9b52ae51 Binary files /dev/null and b/docs/0.4.0/components/images/textfield_character_counter_dark.png differ diff --git a/docs/0.4.0/components/images/textfield_character_counter_light.png b/docs/0.4.0/components/images/textfield_character_counter_light.png new file mode 100644 index 00000000..482d4c20 Binary files /dev/null and b/docs/0.4.0/components/images/textfield_character_counter_light.png differ diff --git a/docs/0.4.0/components/images/textfield_filled_dark.png b/docs/0.4.0/components/images/textfield_filled_dark.png new file mode 100644 index 00000000..38424f0f Binary files /dev/null and b/docs/0.4.0/components/images/textfield_filled_dark.png differ diff --git a/docs/0.4.0/components/images/textfield_filled_light.png b/docs/0.4.0/components/images/textfield_filled_light.png new file mode 100644 index 00000000..881386b2 Binary files /dev/null and b/docs/0.4.0/components/images/textfield_filled_light.png differ diff --git a/docs/0.4.0/components/images/textfield_filled_password_dark.png b/docs/0.4.0/components/images/textfield_filled_password_dark.png new file mode 100644 index 00000000..aaffb22f Binary files /dev/null and b/docs/0.4.0/components/images/textfield_filled_password_dark.png differ diff --git a/docs/0.4.0/components/images/textfield_filled_password_light.png b/docs/0.4.0/components/images/textfield_filled_password_light.png new file mode 100644 index 00000000..8e9b23d4 Binary files /dev/null and b/docs/0.4.0/components/images/textfield_filled_password_light.png differ diff --git a/docs/0.4.0/components/images/textfield_outlined_dark.png b/docs/0.4.0/components/images/textfield_outlined_dark.png new file mode 100644 index 00000000..18ab3afd Binary files /dev/null and b/docs/0.4.0/components/images/textfield_outlined_dark.png differ diff --git a/docs/0.4.0/components/images/textfield_outlined_light.png b/docs/0.4.0/components/images/textfield_outlined_light.png new file mode 100644 index 00000000..0f971aa2 Binary files /dev/null and b/docs/0.4.0/components/images/textfield_outlined_light.png differ diff --git a/docs/0.4.0/components/images/textfield_outlined_password_dark.png b/docs/0.4.0/components/images/textfield_outlined_password_dark.png new file mode 100644 index 00000000..6f33c541 Binary files /dev/null and b/docs/0.4.0/components/images/textfield_outlined_password_dark.png differ diff --git a/docs/0.4.0/components/images/textfield_outlined_password_light.png b/docs/0.4.0/components/images/textfield_outlined_password_light.png new file mode 100644 index 00000000..7a6292a7 Binary files /dev/null and b/docs/0.4.0/components/images/textfield_outlined_password_light.png differ diff --git a/docs/0.4.0/components/lists.md b/docs/0.4.0/components/lists.md new file mode 100644 index 00000000..497125bd --- /dev/null +++ b/docs/0.4.0/components/lists.md @@ -0,0 +1,108 @@ +--- +layout: detail +title: Lists +description: Lists are continuous, vertical indexes of text or images. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Standard list item](#standard-list-item) + * [Selection list item](#selection-list-item) + +--- + +## Specifications references + +- [Design System Manager - Lists](https://system.design.orange.com/0c1af118d/p/09a804-lists/b/669743) +- [Apple guideline - Lists and tables](https://developer.apple.com/design/human-interface-guidelines/components/layout-and-organization/lists-and-tables) + +## Accessibility + +Please follow [accessibility criteria for development](https://a11y-guidelines.orange.com/en/mobile/ios/) + +## Variants + +Here we just propose a configuration for two types of list items: +- Standard with trailing actions +- Selection with trailing icons (selection indicators) + +All items are composed of: +- Title +- Subtitle (optional) +- Leading icon (optional) + +The leading icon is : +- icon or image from resources +- Image from url. During image loading a placeholder Image is needed. Three kinds of shape are proposed (circular, square or wide). + + +### Standard list item + + For standard items, trailing icons can be added. Two types of icons are proposed: + - with info button to make an action + - with text (no action, only information) + +The standard item can be used in a `NavigationLink` (for example, display more details) + +```swift +// Create list items models + +let itemsModels = [ + ODSListStandardItemModel(title: "Title Only"), + ODSListStandardItemModel(title: "Title with subtitle", subtitle: "subtitle"), + ODSListStandardItemModel(title: "Title with leading icon", leadingIcon: .icon(Image(systemName: "heart"))), + ODSListStandardItemModel(title: "Title with trailing action", ODSListItemTrailingActions(displayText: "Details")), + ] + +// Build the List view using ODSListStandardItemModel. +List { + ForEach(itemModels, id: \.id) { itemModel in + NavigationLink { + Text("The destination view") + } label: { + ODSListStandardItem(model: itemModel) + } + } +} +``` + +### Selection list item + +The selection list items can be used to enumerate data as list in order to select elements. + +```swift +struct YourView: View { + let models: [ODSListSelectionItemModel] + + init() { + let iconImage = Image(systemName: "heart") + models = [ + ODSListSelectionItemModel( + title: "Title 1", + subtitle: "Subtitle 1", + leadingIcon: .icon(iconImage), + trailingSelection: .checkmark), + ODSListSelectionItemModel( + title: "Title 2", + subtitle: "Subtitle 2", + trailingSelection: .checkmark) + ] + } + + var body: some View { + List { + ForEach(models, id: \.id) { model in + ODSListSelectionItem(model: model) + } + } + } +} +``` + +**Note:** Don’t forget, if item is used in a `NavigationLink`, a chevron is automatically added by the system. For design purpose it is NOT recommended to add `ODSListSelectionItem` in a `NavigationLink`. + diff --git a/docs/0.4.0/components/lists_docs.md b/docs/0.4.0/components/lists_docs.md new file mode 100644 index 00000000..29acd6b7 --- /dev/null +++ b/docs/0.4.0/components/lists_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: lists.md +--- diff --git a/docs/0.4.0/components/navigationBar.md b/docs/0.4.0/components/navigationBar.md new file mode 100644 index 00000000..7694a568 --- /dev/null +++ b/docs/0.4.0/components/navigationBar.md @@ -0,0 +1,87 @@ +--- +layout: detail +title: Bars - navigation +description: Navigation bar with Orange branding +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Implementation](#implementation) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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 + +_Soon available_ diff --git a/docs/0.4.0/components/navigationBar_docs.md b/docs/0.4.0/components/navigationBar_docs.md new file mode 100644 index 00000000..d53217fe --- /dev/null +++ b/docs/0.4.0/components/navigationBar_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: navigationBar.md +--- diff --git a/docs/0.4.0/components/progressIndicator.md b/docs/0.4.0/components/progressIndicator.md new file mode 100644 index 00000000..1995de64 --- /dev/null +++ b/docs/0.4.0/components/progressIndicator.md @@ -0,0 +1,113 @@ +--- +layout: detail +title: Progress indicators +description: Progress indicators express an unspecified wait time or display the length of a process. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Progress bar](#progress-bar) + * [Activity indicator](#activity-indicator) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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/0.4.0/components/progressIndicator_docs.md b/docs/0.4.0/components/progressIndicator_docs.md new file mode 100644 index 00000000..6cc25593 --- /dev/null +++ b/docs/0.4.0/components/progressIndicator_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: progressIndicator.md +--- diff --git a/docs/0.4.0/components/sheetsBottom.md b/docs/0.4.0/components/sheetsBottom.md new file mode 100644 index 00000000..2f8ddc00 --- /dev/null +++ b/docs/0.4.0/components/sheetsBottom.md @@ -0,0 +1,86 @@ +--- +layout: detail +title: Bottom sheets +description: Bottom Sheets are surfaces anchored to the bottom of the screen that present users supplement content. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Standard](#standard) + * [Expanding](#expanding) + +--- + +## Specifications references + +- [Design System Manager - Bottom sheets](https://system.design.orange.com/0c1af118d/p/3347ca-sheets-bottom/b/83b619) + +## Accessibility + +Please follow [accessibility criteria for development](https://a11y-guidelines.orange.com/en/mobile/ios/) + +## Variants + +Bottom sheets are surfaces anchored to the bottom of the screen that present users supplemental content. +It is useful for requesting a specific information or enabling a simple task related to the current context +of the current view or more globaly the application context. + +### Standard + +The standard bottom sheet must be used only with a "simple, basic" content. If a more complex content (scrollable) must be added prefer the Expanding variant. + +It defines two states: +- **closed**: The content is hidden +- **opened**: The content is visible (above the main view) + +A taps on the header, opens or closes the bottom sheet. + +```swift +struct BottomSheetPresentation: View { + @State private var isOpen = false + + var body: some View { + VStack { + // Main content goes here. + Text("Bottom sheet is \(isOpen ? "Opened": "Closed")") + } + .odsBottomSheetStandard(isOpen: $isOpen, title: "Customize") { + // Bottom sheet content goes here + } + } +} +``` + +### Expanding + +The type of bottom must be used if the content is more complex and perhaps need to be scrollable. + +It defines three size: +- **small**: (closed) The content is hidden, only the header is visible +- **medium**: (parcially opened) The content is parcially visible (half screen above the main view) but not scrollable +- **large**: (opened) The content is visible and scrollable + +User can resize by tapping on dimming area (close), drag the content, or tap on the header to cycle through the available sizes. + +```swift + struct BottomSheetPresentation: View { + @State private var bottomSheetSize: ODSBottomSheetSize = .large + var body: some View { + VStack { + // Main content goes here. + Text("Bottom sheet size \(bottomSheetSize.rawValue)") + } + .odsBottomSheetExpanding(title: "Customize", bottomSheetSize: $bottomSheetSize) { + // Bottom sheet content goes here + } + } + } +``` + +**Remark**: In order to compute the resizing when user scrolls the content, the bottom sheet automatically adds the provided content is a scrollView. + diff --git a/docs/0.4.0/components/sheetsBottom_docs.md b/docs/0.4.0/components/sheetsBottom_docs.md new file mode 100644 index 00000000..42eeca14 --- /dev/null +++ b/docs/0.4.0/components/sheetsBottom_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: sheetsBottom.md +--- diff --git a/docs/0.4.0/components/slider.md b/docs/0.4.0/components/slider.md new file mode 100644 index 00000000..89a79eb7 --- /dev/null +++ b/docs/0.4.0/components/slider.md @@ -0,0 +1,129 @@ +--- +layout: detail +title: Sliders +description: Sliders allow users to make selections from a range of values. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Continuous slider](#continuous-slider) + * [Continuous lockups slider](#continuous-lockups-slider) + * [Discrete slider](#discrete-slider) + * [Discrete lockups slider](#discrete-lockups-slider) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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/0.4.0/components/slider_docs.md b/docs/0.4.0/components/slider_docs.md new file mode 100644 index 00000000..16b55c4f --- /dev/null +++ b/docs/0.4.0/components/slider_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: slider.md +--- diff --git a/docs/0.4.0/components/tabBar.md b/docs/0.4.0/components/tabBar.md new file mode 100644 index 00000000..bae925fc --- /dev/null +++ b/docs/0.4.0/components/tabBar.md @@ -0,0 +1,154 @@ +--- +layout: detail +title: Tabs +description: Tabs organize content across different screens, data sets, and other interactions. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Fixed tabs](#fixed-tabs) + * [Scrollable tabs](#scrollable-tabs) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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/0.4.0/components/tabBar_docs.md b/docs/0.4.0/components/tabBar_docs.md new file mode 100644 index 00000000..0dc8a3c0 --- /dev/null +++ b/docs/0.4.0/components/tabBar_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: tabBar.md +--- diff --git a/docs/0.4.0/components/textInput.md b/docs/0.4.0/components/textInput.md new file mode 100644 index 00000000..3363b555 --- /dev/null +++ b/docs/0.4.0/components/textInput.md @@ -0,0 +1,69 @@ +--- +layout: detail +title: Text fields and text editor +description: Text fields and text editor let users enter and edit text. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Text field](#text-field) + * [Secure Text field](#secure-text-field) + * [Text editor](#text-editor) +* [Text Selection](#text-selection) + +--- + +## 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/0.4.0/components/textInput_docs.md b/docs/0.4.0/components/textInput_docs.md new file mode 100644 index 00000000..b73d3df6 --- /dev/null +++ b/docs/0.4.0/components/textInput_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: textInput.md +--- diff --git a/docs/0.4.0/components/toolBar.md b/docs/0.4.0/components/toolBar.md new file mode 100644 index 00000000..27553dc4 --- /dev/null +++ b/docs/0.4.0/components/toolBar.md @@ -0,0 +1,113 @@ +--- +layout: detail +title: Bars - tool +description: Tool bars with Orange branding +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Description](#description) +* [Variants](#variants) + * [With label items](#with-label-items) + * [With icon items](#with-icon-items) +* [Remarks](#remarks) + +--- + +## 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/0.4.0/components/toolBar_docs.md b/docs/0.4.0/components/toolBar_docs.md new file mode 100644 index 00000000..4b356e35 --- /dev/null +++ b/docs/0.4.0/components/toolBar_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: toolBar.md +--- diff --git a/docs/0.4.0/guidelines/spacings.md b/docs/0.4.0/guidelines/spacings.md new file mode 100644 index 00000000..4b30a252 --- /dev/null +++ b/docs/0.4.0/guidelines/spacings.md @@ -0,0 +1,68 @@ +--- +layout: detail +title: Spacings +--- +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Usage](#usage) + * [Apply spacing for magin](#apply-spacing-for-margin) + * [Apply spacing for padding](#apply-spacing-for-padding) + +--- + +## 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/0.4.0/guidelines/spacings_docs.md b/docs/0.4.0/guidelines/spacings_docs.md new file mode 100644 index 00000000..27a7c0c0 --- /dev/null +++ b/docs/0.4.0/guidelines/spacings_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: spacings.md +--- diff --git a/docs/0.4.0/guidelines/typography.md b/docs/0.4.0/guidelines/typography.md new file mode 100644 index 00000000..b407bdd3 --- /dev/null +++ b/docs/0.4.0/guidelines/typography.md @@ -0,0 +1,57 @@ +--- +layout: detail +title: Typography +--- +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Implementation](#implementation) + * [Apply font style on text](#apply-font-style-on-text) + * [Apply font style on view](#apply-font-style-on-view) + +--- + +## 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/0.4.0/guidelines/typography_docs.md b/docs/0.4.0/guidelines/typography_docs.md new file mode 100644 index 00000000..6b55d509 --- /dev/null +++ b/docs/0.4.0/guidelines/typography_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: typography.md +--- diff --git a/docs/0.4.0/home_content.md b/docs/0.4.0/home_content.md new file mode 100644 index 00000000..4f6ba37f --- /dev/null +++ b/docs/0.4.0/home_content.md @@ -0,0 +1,36 @@ +## 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: ^0.4.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'; +``` diff --git a/docs/0.4.0/index.md b/docs/0.4.0/index.md new file mode 100644 index 00000000..20776e6e --- /dev/null +++ b/docs/0.4.0/index.md @@ -0,0 +1,6 @@ +--- +layout: main +title: Getting started with Orange Design System for Flutter +--- + +{% include_relative home_content.md %} diff --git a/docs/0.4.0/index_content.md b/docs/0.4.0/index_content.md new file mode 100644 index 00000000..716ca9f9 --- /dev/null +++ b/docs/0.4.0/index_content.md @@ -0,0 +1,6 @@ +--- +layout: detail +title: Getting started with Orange Design System for Flutter +--- + +{% include_relative home_content.md %} diff --git a/docs/0.5.0/components/appBarsTop.md b/docs/0.5.0/components/appBarsTop.md new file mode 100644 index 00000000..9dbadbc5 --- /dev/null +++ b/docs/0.5.0/components/appBarsTop.md @@ -0,0 +1,104 @@ +--- +layout: detail +title: "App bars: top" +description: Top app bars display information and actions relating to the current screen. +--- + +
**On this page** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Regular top app bar](#regular-top-app-bar) + * [Flutter implementation](#flutter-implementation) + * [OdsTopAppBar API](#odstopappbar-api) + * [Large top app bar](#large-top-app-bar) + * [Flutter implementation](#flutter-implementation-1) + * [OdsLargeTopAppBar API](#odslargetopappbar-api) + +--- + +## 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 `topBar`. +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', + ), + ); + }, + ) +); +``` + +##### 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. +{:.table} + +### Large top app bar + +#### Flutter implementation + + +Add `OdsLargeTopAppBar` to your Scaffold `topBar`. +Here is an example of use: + +```dart +return OdsLargeTopAppBar( + title: "Large", + actions: IconButton(icon: const Icon(Icons.notifications), onPressed: () {}), + leading: BackButton(), + 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 +{:.table} diff --git a/docs/0.5.0/components/appBarsTop_docs.md b/docs/0.5.0/components/appBarsTop_docs.md new file mode 100644 index 00000000..c78e514c --- /dev/null +++ b/docs/0.5.0/components/appBarsTop_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: appBarsTop.md +--- diff --git a/docs/0.5.0/components/banners.md b/docs/0.5.0/components/banners.md new file mode 100644 index 00000000..80b7b446 --- /dev/null +++ b/docs/0.5.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) {}) +``` + + diff --git a/docs/0.5.0/components/banners_docs.md b/docs/0.5.0/components/banners_docs.md new file mode 100644 index 00000000..9211cff1 --- /dev/null +++ b/docs/0.5.0/components/banners_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: banners.md +--- diff --git a/docs/0.5.0/components/buttons.md b/docs/0.5.0/components/buttons.md new file mode 100644 index 00000000..b9766abb --- /dev/null +++ b/docs/0.5.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_ diff --git a/docs/0.5.0/components/buttons_docs.md b/docs/0.5.0/components/buttons_docs.md new file mode 100644 index 00000000..a626304a --- /dev/null +++ b/docs/0.5.0/components/buttons_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: buttons.md +--- diff --git a/docs/0.5.0/components/cards.md b/docs/0.5.0/components/cards.md new file mode 100644 index 00000000..4535932a --- /dev/null +++ b/docs/0.5.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_ diff --git a/docs/0.5.0/components/cards_docs.md b/docs/0.5.0/components/cards_docs.md new file mode 100644 index 00000000..9f4d12d7 --- /dev/null +++ b/docs/0.5.0/components/cards_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: cards.md +--- diff --git a/docs/0.5.0/components/checkboxes.md b/docs/0.5.0/components/checkboxes.md new file mode 100644 index 00000000..6f52e10f --- /dev/null +++ b/docs/0.5.0/components/checkboxes.md @@ -0,0 +1,60 @@ +--- +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** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Implementation](#implementation) + * [OdsCheckbox API](#odscheckbox-api) + +--- + +## 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 +return OdsCheckbox( + checked: true, + onCheckedChange: () {}, + enabled: true, + 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 +{:.table} diff --git a/docs/0.5.0/components/checkboxes_docs.md b/docs/0.5.0/components/checkboxes_docs.md new file mode 100644 index 00000000..89244539 --- /dev/null +++ b/docs/0.5.0/components/checkboxes_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: checkboxes.md +--- diff --git a/docs/0.5.0/components/chips.md b/docs/0.5.0/components/chips.md new file mode 100644 index 00000000..8b1f8c2e --- /dev/null +++ b/docs/0.5.0/components/chips.md @@ -0,0 +1,201 @@ +--- +layout: detail +title: Chips +description: Chips are compact elements that represent an input, attribute, or action. +--- + +
**On this page** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Input chip](#input-chip) + * [Flutter implementation](#flutter-implementation) + * [OdsInputChip API](#odsinputchip-api) + * [Choice chip](#choice-chip) + * [Flutter implementation](#flutter-implementation-1) + * [OdsChoiceChip API](#odschoicechip-api) + * [Filter chip](#filter-chip) + * [Flutter implementation](#jflutter-implementation-2) + * [OdsFilterChip API](#odsfilterchip-api) + * [Action chip](#action-chip) + * [Flutter implementation](#flutter-implementation-3) + * [OdsActionChip API](#odsactionchip-api) + +--- + +## 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", + onClick = { }, + leadingIcon = null, + leadingAvatar: CircleAvatar( + backgroundImage: NetworkImage( + OdsApplication.recipes[index].url, + ), + ), + ), // Set it to `null` for no avatar or provide a `leadingIcon` + enabled = true, + onCancel = { } +) +``` + +##### OdsInputChip API + +Parameter | Default value | Description +-- | -- | -- +`text: String` | | Text to be displayed into the chip +`onClick: (bool?)? Callback` | | Callback called on chip click +`enabled: Boolean` | `true` | Controls the enabled state of the chip. When `false`, this chip will not respond to user input. +`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 +`onCancel: (() -> Unit)?` | `null` | Callback called on chip cancel cross click. Pass `null` for no cancel cross. +{:.table} + +### 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 +return OdsChoiceChip( + text = "Choice text", + onClick = { }, + leadingAvatar = OdsChipLeadingAvatar( + image: NetworkImage("https://..."), + contentDescription: "" // Optional + ), // Set it to `null` for no avatar + selected = false, + enabled = 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 +{:.table} + + +### 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 +return OdsFilterChip( + text = "chip text", + onClick = { }, + leadingAvatar = OdsChipLeadingAvatar( + image: NetworkImage("https://..."), + contentDescription: "" // Optional + ), // Set it to `null` for no avatar + selected = false, + enabled = 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 +{:.table} + +Use the filter like exemple [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(colorScheme.secondary, BlendMode.srcIn)) // set it to `null` for no icon + enabled = true, // Optional +) +``` + +##### 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 +{:.table} diff --git a/docs/0.5.0/components/chips_docs.md b/docs/0.5.0/components/chips_docs.md new file mode 100644 index 00000000..cf9760b5 --- /dev/null +++ b/docs/0.5.0/components/chips_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: chips.md +--- diff --git a/docs/0.5.0/components/dialogs.md b/docs/0.5.0/components/dialogs.md new file mode 100644 index 00000000..81947af3 --- /dev/null +++ b/docs/0.5.0/components/dialogs.md @@ -0,0 +1,66 @@ +--- +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** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Alert dialog](#alert-dialog) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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** + +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 + +_Soon available_ diff --git a/docs/0.5.0/components/dialogs_docs.md b/docs/0.5.0/components/dialogs_docs.md new file mode 100644 index 00000000..253fa372 --- /dev/null +++ b/docs/0.5.0/components/dialogs_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: dialogs.md +--- diff --git a/docs/0.5.0/components/floatingActionButtons.md b/docs/0.5.0/components/floatingActionButtons.md new file mode 100644 index 00000000..9c8ed58f --- /dev/null +++ b/docs/0.5.0/components/floatingActionButtons.md @@ -0,0 +1,119 @@ +--- +layout: detail +title: Floating action buttons +description: A floating action button (FAB) represents the primary action of a screen. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Regular FAB](#regular-fab) + * [Small FAB](#small-fab) + * [Large FAB](#large-fab) + * [Extended FAB](#extended-fab) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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 +); +``` + +### 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 +); +``` + +### 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 +); +``` + +### 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 OdsSmallFloatingActionButton( + onClick: () {}, + text = "Add", + icon: const Icon(Icons.add), //Optional +); +``` + + +## Component specific tokens + +_Soon available_ diff --git a/docs/0.5.0/components/floatingActionButtons_docs.md b/docs/0.5.0/components/floatingActionButtons_docs.md new file mode 100644 index 00000000..ea8f4414 --- /dev/null +++ b/docs/0.5.0/components/floatingActionButtons_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: floatingActionButtons.md +--- diff --git a/docs/0.5.0/components/images/app_bar_top_overflow_menu_dark.png b/docs/0.5.0/components/images/app_bar_top_overflow_menu_dark.png new file mode 100644 index 00000000..60322543 Binary files /dev/null and b/docs/0.5.0/components/images/app_bar_top_overflow_menu_dark.png differ diff --git a/docs/0.5.0/components/images/app_bar_top_overflow_menu_light.png b/docs/0.5.0/components/images/app_bar_top_overflow_menu_light.png new file mode 100644 index 00000000..2e3bd905 Binary files /dev/null and b/docs/0.5.0/components/images/app_bar_top_overflow_menu_light.png differ diff --git a/docs/0.5.0/components/images/banner_dark.png b/docs/0.5.0/components/images/banner_dark.png new file mode 100644 index 00000000..60803f20 Binary files /dev/null and b/docs/0.5.0/components/images/banner_dark.png differ diff --git a/docs/0.5.0/components/images/banner_light.png b/docs/0.5.0/components/images/banner_light.png new file mode 100644 index 00000000..4d174146 Binary files /dev/null and b/docs/0.5.0/components/images/banner_light.png differ diff --git a/docs/0.5.0/components/images/button_contained_dark.png b/docs/0.5.0/components/images/button_contained_dark.png new file mode 100644 index 00000000..8cc9ee5f Binary files /dev/null and b/docs/0.5.0/components/images/button_contained_dark.png differ diff --git a/docs/0.5.0/components/images/button_contained_light.png b/docs/0.5.0/components/images/button_contained_light.png new file mode 100644 index 00000000..401db36d Binary files /dev/null and b/docs/0.5.0/components/images/button_contained_light.png differ diff --git a/docs/0.5.0/components/images/button_contained_negative_dark.png b/docs/0.5.0/components/images/button_contained_negative_dark.png new file mode 100644 index 00000000..13f22a29 Binary files /dev/null and b/docs/0.5.0/components/images/button_contained_negative_dark.png differ diff --git a/docs/0.5.0/components/images/button_contained_negative_light.png b/docs/0.5.0/components/images/button_contained_negative_light.png new file mode 100644 index 00000000..018b84cf Binary files /dev/null and b/docs/0.5.0/components/images/button_contained_negative_light.png differ diff --git a/docs/0.5.0/components/images/button_contained_positive_dark.png b/docs/0.5.0/components/images/button_contained_positive_dark.png new file mode 100644 index 00000000..b1527819 Binary files /dev/null and b/docs/0.5.0/components/images/button_contained_positive_dark.png differ diff --git a/docs/0.5.0/components/images/button_contained_positive_light.png b/docs/0.5.0/components/images/button_contained_positive_light.png new file mode 100644 index 00000000..906bf0b3 Binary files /dev/null and b/docs/0.5.0/components/images/button_contained_positive_light.png differ diff --git a/docs/0.5.0/components/images/button_icon_dark.png b/docs/0.5.0/components/images/button_icon_dark.png new file mode 100644 index 00000000..551ce30a Binary files /dev/null and b/docs/0.5.0/components/images/button_icon_dark.png differ diff --git a/docs/0.5.0/components/images/button_icon_light.png b/docs/0.5.0/components/images/button_icon_light.png new file mode 100644 index 00000000..b11c9dd5 Binary files /dev/null and b/docs/0.5.0/components/images/button_icon_light.png differ diff --git a/docs/0.5.0/components/images/button_icon_toggle_dark.png b/docs/0.5.0/components/images/button_icon_toggle_dark.png new file mode 100644 index 00000000..d2702c6e Binary files /dev/null and b/docs/0.5.0/components/images/button_icon_toggle_dark.png differ diff --git a/docs/0.5.0/components/images/button_icon_toggle_group_dark.png b/docs/0.5.0/components/images/button_icon_toggle_group_dark.png new file mode 100644 index 00000000..1f3fdc9a Binary files /dev/null and b/docs/0.5.0/components/images/button_icon_toggle_group_dark.png differ diff --git a/docs/0.5.0/components/images/button_icon_toggle_group_light.png b/docs/0.5.0/components/images/button_icon_toggle_group_light.png new file mode 100644 index 00000000..4f32291c Binary files /dev/null and b/docs/0.5.0/components/images/button_icon_toggle_group_light.png differ diff --git a/docs/0.5.0/components/images/button_icon_toggle_light.png b/docs/0.5.0/components/images/button_icon_toggle_light.png new file mode 100644 index 00000000..8256c395 Binary files /dev/null and b/docs/0.5.0/components/images/button_icon_toggle_light.png differ diff --git a/docs/0.5.0/components/images/button_outlined_dark.png b/docs/0.5.0/components/images/button_outlined_dark.png new file mode 100644 index 00000000..420ab1a4 Binary files /dev/null and b/docs/0.5.0/components/images/button_outlined_dark.png differ diff --git a/docs/0.5.0/components/images/button_outlined_light.png b/docs/0.5.0/components/images/button_outlined_light.png new file mode 100644 index 00000000..a7c56296 Binary files /dev/null and b/docs/0.5.0/components/images/button_outlined_light.png differ diff --git a/docs/0.5.0/components/images/button_text_dark.png b/docs/0.5.0/components/images/button_text_dark.png new file mode 100644 index 00000000..13ae0324 Binary files /dev/null and b/docs/0.5.0/components/images/button_text_dark.png differ diff --git a/docs/0.5.0/components/images/button_text_light.png b/docs/0.5.0/components/images/button_text_light.png new file mode 100644 index 00000000..f574d322 Binary files /dev/null and b/docs/0.5.0/components/images/button_text_light.png differ diff --git a/docs/0.5.0/components/images/button_text_toggle_group_dark.png b/docs/0.5.0/components/images/button_text_toggle_group_dark.png new file mode 100644 index 00000000..b8aab9b3 Binary files /dev/null and b/docs/0.5.0/components/images/button_text_toggle_group_dark.png differ diff --git a/docs/0.5.0/components/images/button_text_toggle_group_light.png b/docs/0.5.0/components/images/button_text_toggle_group_light.png new file mode 100644 index 00000000..7c594ce4 Binary files /dev/null and b/docs/0.5.0/components/images/button_text_toggle_group_light.png differ diff --git a/docs/0.5.0/components/images/button_toggle_dark.png b/docs/0.5.0/components/images/button_toggle_dark.png new file mode 100644 index 00000000..20faac6f Binary files /dev/null and b/docs/0.5.0/components/images/button_toggle_dark.png differ diff --git a/docs/0.5.0/components/images/button_toggle_light.png b/docs/0.5.0/components/images/button_toggle_light.png new file mode 100644 index 00000000..70554b9a Binary files /dev/null and b/docs/0.5.0/components/images/button_toggle_light.png differ diff --git a/docs/0.5.0/components/images/card_horizontal_dark.png b/docs/0.5.0/components/images/card_horizontal_dark.png new file mode 100644 index 00000000..ba5324c9 Binary files /dev/null and b/docs/0.5.0/components/images/card_horizontal_dark.png differ diff --git a/docs/0.5.0/components/images/card_horizontal_light.png b/docs/0.5.0/components/images/card_horizontal_light.png new file mode 100644 index 00000000..cc4c5928 Binary files /dev/null and b/docs/0.5.0/components/images/card_horizontal_light.png differ diff --git a/docs/0.5.0/components/images/card_small_dark.png b/docs/0.5.0/components/images/card_small_dark.png new file mode 100644 index 00000000..9a4097c8 Binary files /dev/null and b/docs/0.5.0/components/images/card_small_dark.png differ diff --git a/docs/0.5.0/components/images/card_small_light.png b/docs/0.5.0/components/images/card_small_light.png new file mode 100644 index 00000000..4b942076 Binary files /dev/null and b/docs/0.5.0/components/images/card_small_light.png differ diff --git a/docs/0.5.0/components/images/card_vertical_header_first_dark.png b/docs/0.5.0/components/images/card_vertical_header_first_dark.png new file mode 100644 index 00000000..1626639c Binary files /dev/null and b/docs/0.5.0/components/images/card_vertical_header_first_dark.png differ diff --git a/docs/0.5.0/components/images/card_vertical_header_first_light.png b/docs/0.5.0/components/images/card_vertical_header_first_light.png new file mode 100644 index 00000000..31e9d39c Binary files /dev/null and b/docs/0.5.0/components/images/card_vertical_header_first_light.png differ diff --git a/docs/0.5.0/components/images/card_vertical_image_first_dark.png b/docs/0.5.0/components/images/card_vertical_image_first_dark.png new file mode 100644 index 00000000..090ce526 Binary files /dev/null and b/docs/0.5.0/components/images/card_vertical_image_first_dark.png differ diff --git a/docs/0.5.0/components/images/card_vertical_image_first_light.png b/docs/0.5.0/components/images/card_vertical_image_first_light.png new file mode 100644 index 00000000..9dd3ed2d Binary files /dev/null and b/docs/0.5.0/components/images/card_vertical_image_first_light.png differ diff --git a/docs/0.5.0/components/images/checkbox_dark.png b/docs/0.5.0/components/images/checkbox_dark.png new file mode 100644 index 00000000..d37bc0a5 Binary files /dev/null and b/docs/0.5.0/components/images/checkbox_dark.png differ diff --git a/docs/0.5.0/components/images/checkbox_light.png b/docs/0.5.0/components/images/checkbox_light.png new file mode 100644 index 00000000..002bc777 Binary files /dev/null and b/docs/0.5.0/components/images/checkbox_light.png differ diff --git a/docs/0.5.0/components/images/checkboxe_list_dark.png b/docs/0.5.0/components/images/checkboxe_list_dark.png new file mode 100644 index 00000000..8b325356 Binary files /dev/null and b/docs/0.5.0/components/images/checkboxe_list_dark.png differ diff --git a/docs/0.5.0/components/images/checkboxe_list_light.png b/docs/0.5.0/components/images/checkboxe_list_light.png new file mode 100644 index 00000000..9c10551a Binary files /dev/null and b/docs/0.5.0/components/images/checkboxe_list_light.png differ diff --git a/docs/0.5.0/components/images/chips_action_dark.png b/docs/0.5.0/components/images/chips_action_dark.png new file mode 100644 index 00000000..d9c95f5e Binary files /dev/null and b/docs/0.5.0/components/images/chips_action_dark.png differ diff --git a/docs/0.5.0/components/images/chips_action_light.png b/docs/0.5.0/components/images/chips_action_light.png new file mode 100644 index 00000000..086a5bd3 Binary files /dev/null and b/docs/0.5.0/components/images/chips_action_light.png differ diff --git a/docs/0.5.0/components/images/chips_choice_dark.png b/docs/0.5.0/components/images/chips_choice_dark.png new file mode 100644 index 00000000..cb6ead60 Binary files /dev/null and b/docs/0.5.0/components/images/chips_choice_dark.png differ diff --git a/docs/0.5.0/components/images/chips_choice_light.png b/docs/0.5.0/components/images/chips_choice_light.png new file mode 100644 index 00000000..1e43a0b6 Binary files /dev/null and b/docs/0.5.0/components/images/chips_choice_light.png differ diff --git a/docs/0.5.0/components/images/chips_filter_dark.png b/docs/0.5.0/components/images/chips_filter_dark.png new file mode 100644 index 00000000..71fda02d Binary files /dev/null and b/docs/0.5.0/components/images/chips_filter_dark.png differ diff --git a/docs/0.5.0/components/images/chips_filter_light.png b/docs/0.5.0/components/images/chips_filter_light.png new file mode 100644 index 00000000..078b40eb Binary files /dev/null and b/docs/0.5.0/components/images/chips_filter_light.png differ diff --git a/docs/0.5.0/components/images/chips_input_dark.png b/docs/0.5.0/components/images/chips_input_dark.png new file mode 100644 index 00000000..7732e080 Binary files /dev/null and b/docs/0.5.0/components/images/chips_input_dark.png differ diff --git a/docs/0.5.0/components/images/chips_input_light.png b/docs/0.5.0/components/images/chips_input_light.png new file mode 100644 index 00000000..6cbf7e6c Binary files /dev/null and b/docs/0.5.0/components/images/chips_input_light.png differ diff --git a/docs/0.5.0/components/images/dialog_alert_dark.png b/docs/0.5.0/components/images/dialog_alert_dark.png new file mode 100644 index 00000000..c9dcbac4 Binary files /dev/null and b/docs/0.5.0/components/images/dialog_alert_dark.png differ diff --git a/docs/0.5.0/components/images/dialog_alert_light.png b/docs/0.5.0/components/images/dialog_alert_light.png new file mode 100644 index 00000000..9ad32961 Binary files /dev/null and b/docs/0.5.0/components/images/dialog_alert_light.png differ diff --git a/docs/0.5.0/components/images/fab_dark.png b/docs/0.5.0/components/images/fab_dark.png new file mode 100644 index 00000000..897a5bb5 Binary files /dev/null and b/docs/0.5.0/components/images/fab_dark.png differ diff --git a/docs/0.5.0/components/images/fab_extended_dark.png b/docs/0.5.0/components/images/fab_extended_dark.png new file mode 100644 index 00000000..9b0e85d4 Binary files /dev/null and b/docs/0.5.0/components/images/fab_extended_dark.png differ diff --git a/docs/0.5.0/components/images/fab_extended_light.png b/docs/0.5.0/components/images/fab_extended_light.png new file mode 100644 index 00000000..4c9d7f13 Binary files /dev/null and b/docs/0.5.0/components/images/fab_extended_light.png differ diff --git a/docs/0.5.0/components/images/fab_large_dark.png b/docs/0.5.0/components/images/fab_large_dark.png new file mode 100644 index 00000000..28bfe69b Binary files /dev/null and b/docs/0.5.0/components/images/fab_large_dark.png differ diff --git a/docs/0.5.0/components/images/fab_large_light.png b/docs/0.5.0/components/images/fab_large_light.png new file mode 100644 index 00000000..92e931a2 Binary files /dev/null and b/docs/0.5.0/components/images/fab_large_light.png differ diff --git a/docs/0.5.0/components/images/fab_light.png b/docs/0.5.0/components/images/fab_light.png new file mode 100644 index 00000000..b9e8f14d Binary files /dev/null and b/docs/0.5.0/components/images/fab_light.png differ diff --git a/docs/0.5.0/components/images/fab_mini_dark.png b/docs/0.5.0/components/images/fab_mini_dark.png new file mode 100644 index 00000000..76ce617c Binary files /dev/null and b/docs/0.5.0/components/images/fab_mini_dark.png differ diff --git a/docs/0.5.0/components/images/fab_mini_light.png b/docs/0.5.0/components/images/fab_mini_light.png new file mode 100644 index 00000000..20f73255 Binary files /dev/null and b/docs/0.5.0/components/images/fab_mini_light.png differ diff --git a/docs/0.5.0/components/images/lists_radio_button_dark.png b/docs/0.5.0/components/images/lists_radio_button_dark.png new file mode 100644 index 00000000..e0ce8e76 Binary files /dev/null and b/docs/0.5.0/components/images/lists_radio_button_dark.png differ diff --git a/docs/0.5.0/components/images/lists_radio_button_light.png b/docs/0.5.0/components/images/lists_radio_button_light.png new file mode 100644 index 00000000..a7cd5e5b Binary files /dev/null and b/docs/0.5.0/components/images/lists_radio_button_light.png differ diff --git a/docs/0.5.0/components/images/lists_single_line_dark.png b/docs/0.5.0/components/images/lists_single_line_dark.png new file mode 100644 index 00000000..d46eca2d Binary files /dev/null and b/docs/0.5.0/components/images/lists_single_line_dark.png differ diff --git a/docs/0.5.0/components/images/lists_single_line_light.png b/docs/0.5.0/components/images/lists_single_line_light.png new file mode 100644 index 00000000..3bda5190 Binary files /dev/null and b/docs/0.5.0/components/images/lists_single_line_light.png differ diff --git a/docs/0.5.0/components/images/lists_single_line_wide_image_dark.png b/docs/0.5.0/components/images/lists_single_line_wide_image_dark.png new file mode 100644 index 00000000..c00f2192 Binary files /dev/null and b/docs/0.5.0/components/images/lists_single_line_wide_image_dark.png differ diff --git a/docs/0.5.0/components/images/lists_single_line_wide_image_light.png b/docs/0.5.0/components/images/lists_single_line_wide_image_light.png new file mode 100644 index 00000000..d839b5cc Binary files /dev/null and b/docs/0.5.0/components/images/lists_single_line_wide_image_light.png differ diff --git a/docs/0.5.0/components/images/lists_switch_dark.png b/docs/0.5.0/components/images/lists_switch_dark.png new file mode 100644 index 00000000..4e9ff230 Binary files /dev/null and b/docs/0.5.0/components/images/lists_switch_dark.png differ diff --git a/docs/0.5.0/components/images/lists_switch_light.png b/docs/0.5.0/components/images/lists_switch_light.png new file mode 100644 index 00000000..0f9adf47 Binary files /dev/null and b/docs/0.5.0/components/images/lists_switch_light.png differ diff --git a/docs/0.5.0/components/images/lists_three_line_dark.png b/docs/0.5.0/components/images/lists_three_line_dark.png new file mode 100644 index 00000000..15e350f3 Binary files /dev/null and b/docs/0.5.0/components/images/lists_three_line_dark.png differ diff --git a/docs/0.5.0/components/images/lists_three_line_light.png b/docs/0.5.0/components/images/lists_three_line_light.png new file mode 100644 index 00000000..f3dabd4e Binary files /dev/null and b/docs/0.5.0/components/images/lists_three_line_light.png differ diff --git a/docs/0.5.0/components/images/lists_three_line_wide_image_dark.png b/docs/0.5.0/components/images/lists_three_line_wide_image_dark.png new file mode 100644 index 00000000..2d44de0c Binary files /dev/null and b/docs/0.5.0/components/images/lists_three_line_wide_image_dark.png differ diff --git a/docs/0.5.0/components/images/lists_three_line_wide_image_light.png b/docs/0.5.0/components/images/lists_three_line_wide_image_light.png new file mode 100644 index 00000000..b6eaa436 Binary files /dev/null and b/docs/0.5.0/components/images/lists_three_line_wide_image_light.png differ diff --git a/docs/0.5.0/components/images/lists_two_line_dark.png b/docs/0.5.0/components/images/lists_two_line_dark.png new file mode 100644 index 00000000..7e130d9f Binary files /dev/null and b/docs/0.5.0/components/images/lists_two_line_dark.png differ diff --git a/docs/0.5.0/components/images/lists_two_line_light.png b/docs/0.5.0/components/images/lists_two_line_light.png new file mode 100644 index 00000000..ea4e52cb Binary files /dev/null and b/docs/0.5.0/components/images/lists_two_line_light.png differ diff --git a/docs/0.5.0/components/images/lists_two_line_wide_image_dark.png b/docs/0.5.0/components/images/lists_two_line_wide_image_dark.png new file mode 100644 index 00000000..0ea681e8 Binary files /dev/null and b/docs/0.5.0/components/images/lists_two_line_wide_image_dark.png differ diff --git a/docs/0.5.0/components/images/lists_two_line_wide_image_light.png b/docs/0.5.0/components/images/lists_two_line_wide_image_light.png new file mode 100644 index 00000000..0c214c27 Binary files /dev/null and b/docs/0.5.0/components/images/lists_two_line_wide_image_light.png differ diff --git a/docs/0.5.0/components/images/menu_dropdown_dark.png b/docs/0.5.0/components/images/menu_dropdown_dark.png new file mode 100644 index 00000000..b47bccfe Binary files /dev/null and b/docs/0.5.0/components/images/menu_dropdown_dark.png differ diff --git a/docs/0.5.0/components/images/menu_dropdown_light.png b/docs/0.5.0/components/images/menu_dropdown_light.png new file mode 100644 index 00000000..5af3fb65 Binary files /dev/null and b/docs/0.5.0/components/images/menu_dropdown_light.png differ diff --git a/docs/0.5.0/components/images/menu_exposed_dropdown_dark.png b/docs/0.5.0/components/images/menu_exposed_dropdown_dark.png new file mode 100644 index 00000000..029fb349 Binary files /dev/null and b/docs/0.5.0/components/images/menu_exposed_dropdown_dark.png differ diff --git a/docs/0.5.0/components/images/menu_exposed_dropdown_light.png b/docs/0.5.0/components/images/menu_exposed_dropdown_light.png new file mode 100644 index 00000000..202aa7db Binary files /dev/null and b/docs/0.5.0/components/images/menu_exposed_dropdown_light.png differ diff --git a/docs/0.5.0/components/images/navigation_bar_dark.png b/docs/0.5.0/components/images/navigation_bar_dark.png new file mode 100644 index 00000000..aff18611 Binary files /dev/null and b/docs/0.5.0/components/images/navigation_bar_dark.png differ diff --git a/docs/0.5.0/components/images/navigation_bar_light.png b/docs/0.5.0/components/images/navigation_bar_light.png new file mode 100644 index 00000000..a5d9e288 Binary files /dev/null and b/docs/0.5.0/components/images/navigation_bar_light.png differ diff --git a/docs/0.5.0/components/images/progress_circular_dark.png b/docs/0.5.0/components/images/progress_circular_dark.png new file mode 100644 index 00000000..69b07e8c Binary files /dev/null and b/docs/0.5.0/components/images/progress_circular_dark.png differ diff --git a/docs/0.5.0/components/images/progress_circular_light.png b/docs/0.5.0/components/images/progress_circular_light.png new file mode 100644 index 00000000..b183a1d7 Binary files /dev/null and b/docs/0.5.0/components/images/progress_circular_light.png differ diff --git a/docs/0.5.0/components/images/progress_linear_dark.png b/docs/0.5.0/components/images/progress_linear_dark.png new file mode 100644 index 00000000..e4e3e843 Binary files /dev/null and b/docs/0.5.0/components/images/progress_linear_dark.png differ diff --git a/docs/0.5.0/components/images/progress_linear_light.png b/docs/0.5.0/components/images/progress_linear_light.png new file mode 100644 index 00000000..f56e5773 Binary files /dev/null and b/docs/0.5.0/components/images/progress_linear_light.png differ diff --git a/docs/0.5.0/components/images/radio_button_dark.png b/docs/0.5.0/components/images/radio_button_dark.png new file mode 100644 index 00000000..8dfd93d4 Binary files /dev/null and b/docs/0.5.0/components/images/radio_button_dark.png differ diff --git a/docs/0.5.0/components/images/radio_button_light.png b/docs/0.5.0/components/images/radio_button_light.png new file mode 100644 index 00000000..5cc7e464 Binary files /dev/null and b/docs/0.5.0/components/images/radio_button_light.png differ diff --git a/docs/0.5.0/components/images/sheetbottom_dark.png b/docs/0.5.0/components/images/sheetbottom_dark.png new file mode 100644 index 00000000..92919efc Binary files /dev/null and b/docs/0.5.0/components/images/sheetbottom_dark.png differ diff --git a/docs/0.5.0/components/images/sheetbottom_light.png b/docs/0.5.0/components/images/sheetbottom_light.png new file mode 100644 index 00000000..add8e3f0 Binary files /dev/null and b/docs/0.5.0/components/images/sheetbottom_light.png differ diff --git a/docs/0.5.0/components/images/slider_continuous_dark.png b/docs/0.5.0/components/images/slider_continuous_dark.png new file mode 100644 index 00000000..9b745d7f Binary files /dev/null and b/docs/0.5.0/components/images/slider_continuous_dark.png differ diff --git a/docs/0.5.0/components/images/slider_continuous_light.png b/docs/0.5.0/components/images/slider_continuous_light.png new file mode 100644 index 00000000..42ad208b Binary files /dev/null and b/docs/0.5.0/components/images/slider_continuous_light.png differ diff --git a/docs/0.5.0/components/images/slider_continuous_lockups_dark.png b/docs/0.5.0/components/images/slider_continuous_lockups_dark.png new file mode 100644 index 00000000..cd15d6e2 Binary files /dev/null and b/docs/0.5.0/components/images/slider_continuous_lockups_dark.png differ diff --git a/docs/0.5.0/components/images/slider_continuous_lockups_light.png b/docs/0.5.0/components/images/slider_continuous_lockups_light.png new file mode 100644 index 00000000..69f7444f Binary files /dev/null and b/docs/0.5.0/components/images/slider_continuous_lockups_light.png differ diff --git a/docs/0.5.0/components/images/slider_continuous_lockups_with_icon_dark.png b/docs/0.5.0/components/images/slider_continuous_lockups_with_icon_dark.png new file mode 100644 index 00000000..32764754 Binary files /dev/null and b/docs/0.5.0/components/images/slider_continuous_lockups_with_icon_dark.png differ diff --git a/docs/0.5.0/components/images/slider_continuous_lockups_with_icon_light.png b/docs/0.5.0/components/images/slider_continuous_lockups_with_icon_light.png new file mode 100644 index 00000000..39be0469 Binary files /dev/null and b/docs/0.5.0/components/images/slider_continuous_lockups_with_icon_light.png differ diff --git a/docs/0.5.0/components/images/slider_continuous_with_icon_dark.png b/docs/0.5.0/components/images/slider_continuous_with_icon_dark.png new file mode 100644 index 00000000..0d3b71f3 Binary files /dev/null and b/docs/0.5.0/components/images/slider_continuous_with_icon_dark.png differ diff --git a/docs/0.5.0/components/images/slider_continuous_with_icon_light.png b/docs/0.5.0/components/images/slider_continuous_with_icon_light.png new file mode 100644 index 00000000..4e81e7cd Binary files /dev/null and b/docs/0.5.0/components/images/slider_continuous_with_icon_light.png differ diff --git a/docs/0.5.0/components/images/slider_discrete_dark.png b/docs/0.5.0/components/images/slider_discrete_dark.png new file mode 100644 index 00000000..35abccc5 Binary files /dev/null and b/docs/0.5.0/components/images/slider_discrete_dark.png differ diff --git a/docs/0.5.0/components/images/slider_discrete_light.png b/docs/0.5.0/components/images/slider_discrete_light.png new file mode 100644 index 00000000..4f3d5083 Binary files /dev/null and b/docs/0.5.0/components/images/slider_discrete_light.png differ diff --git a/docs/0.5.0/components/images/slider_discrete_lockups_dark.png b/docs/0.5.0/components/images/slider_discrete_lockups_dark.png new file mode 100644 index 00000000..97a6da19 Binary files /dev/null and b/docs/0.5.0/components/images/slider_discrete_lockups_dark.png differ diff --git a/docs/0.5.0/components/images/slider_discrete_lockups_light.png b/docs/0.5.0/components/images/slider_discrete_lockups_light.png new file mode 100644 index 00000000..116273c3 Binary files /dev/null and b/docs/0.5.0/components/images/slider_discrete_lockups_light.png differ diff --git a/docs/0.5.0/components/images/slider_discrete_lockups_with_icon_dark.png b/docs/0.5.0/components/images/slider_discrete_lockups_with_icon_dark.png new file mode 100644 index 00000000..978dbfcb Binary files /dev/null and b/docs/0.5.0/components/images/slider_discrete_lockups_with_icon_dark.png differ diff --git a/docs/0.5.0/components/images/slider_discrete_lockups_with_icon_light.png b/docs/0.5.0/components/images/slider_discrete_lockups_with_icon_light.png new file mode 100644 index 00000000..640cfd2d Binary files /dev/null and b/docs/0.5.0/components/images/slider_discrete_lockups_with_icon_light.png differ diff --git a/docs/0.5.0/components/images/slider_discrete_with_icon_dark.png b/docs/0.5.0/components/images/slider_discrete_with_icon_dark.png new file mode 100644 index 00000000..cd3fa414 Binary files /dev/null and b/docs/0.5.0/components/images/slider_discrete_with_icon_dark.png differ diff --git a/docs/0.5.0/components/images/slider_discrete_with_icon_light.png b/docs/0.5.0/components/images/slider_discrete_with_icon_light.png new file mode 100644 index 00000000..a18b4e09 Binary files /dev/null and b/docs/0.5.0/components/images/slider_discrete_with_icon_light.png differ diff --git a/docs/0.5.0/components/images/snackbar_dark.png b/docs/0.5.0/components/images/snackbar_dark.png new file mode 100644 index 00000000..97597454 Binary files /dev/null and b/docs/0.5.0/components/images/snackbar_dark.png differ diff --git a/docs/0.5.0/components/images/snackbar_light.png b/docs/0.5.0/components/images/snackbar_light.png new file mode 100644 index 00000000..581e307c Binary files /dev/null and b/docs/0.5.0/components/images/snackbar_light.png differ diff --git a/docs/0.5.0/components/images/snackbar_with_action_dark.png b/docs/0.5.0/components/images/snackbar_with_action_dark.png new file mode 100644 index 00000000..0b1db7fe Binary files /dev/null and b/docs/0.5.0/components/images/snackbar_with_action_dark.png differ diff --git a/docs/0.5.0/components/images/snackbar_with_action_light.png b/docs/0.5.0/components/images/snackbar_with_action_light.png new file mode 100644 index 00000000..8590dcf5 Binary files /dev/null and b/docs/0.5.0/components/images/snackbar_with_action_light.png differ diff --git a/docs/0.5.0/components/images/switch_dark.png b/docs/0.5.0/components/images/switch_dark.png new file mode 100644 index 00000000..9d51d97f Binary files /dev/null and b/docs/0.5.0/components/images/switch_dark.png differ diff --git a/docs/0.5.0/components/images/switch_light.png b/docs/0.5.0/components/images/switch_light.png new file mode 100644 index 00000000..73e4e02a Binary files /dev/null and b/docs/0.5.0/components/images/switch_light.png differ diff --git a/docs/0.5.0/components/images/tabs_fixed_dark.png b/docs/0.5.0/components/images/tabs_fixed_dark.png new file mode 100644 index 00000000..1c529c76 Binary files /dev/null and b/docs/0.5.0/components/images/tabs_fixed_dark.png differ diff --git a/docs/0.5.0/components/images/tabs_fixed_light.png b/docs/0.5.0/components/images/tabs_fixed_light.png new file mode 100644 index 00000000..8ceda363 Binary files /dev/null and b/docs/0.5.0/components/images/tabs_fixed_light.png differ diff --git a/docs/0.5.0/components/images/tabs_scrollable_dark.png b/docs/0.5.0/components/images/tabs_scrollable_dark.png new file mode 100644 index 00000000..e99f8912 Binary files /dev/null and b/docs/0.5.0/components/images/tabs_scrollable_dark.png differ diff --git a/docs/0.5.0/components/images/tabs_scrollable_light.png b/docs/0.5.0/components/images/tabs_scrollable_light.png new file mode 100644 index 00000000..c6496d8d Binary files /dev/null and b/docs/0.5.0/components/images/tabs_scrollable_light.png differ diff --git a/docs/0.5.0/components/images/textfield_character_counter_dark.png b/docs/0.5.0/components/images/textfield_character_counter_dark.png new file mode 100644 index 00000000..9b52ae51 Binary files /dev/null and b/docs/0.5.0/components/images/textfield_character_counter_dark.png differ diff --git a/docs/0.5.0/components/images/textfield_character_counter_light.png b/docs/0.5.0/components/images/textfield_character_counter_light.png new file mode 100644 index 00000000..482d4c20 Binary files /dev/null and b/docs/0.5.0/components/images/textfield_character_counter_light.png differ diff --git a/docs/0.5.0/components/images/textfield_filled_dark.png b/docs/0.5.0/components/images/textfield_filled_dark.png new file mode 100644 index 00000000..38424f0f Binary files /dev/null and b/docs/0.5.0/components/images/textfield_filled_dark.png differ diff --git a/docs/0.5.0/components/images/textfield_filled_light.png b/docs/0.5.0/components/images/textfield_filled_light.png new file mode 100644 index 00000000..881386b2 Binary files /dev/null and b/docs/0.5.0/components/images/textfield_filled_light.png differ diff --git a/docs/0.5.0/components/images/textfield_filled_password_dark.png b/docs/0.5.0/components/images/textfield_filled_password_dark.png new file mode 100644 index 00000000..aaffb22f Binary files /dev/null and b/docs/0.5.0/components/images/textfield_filled_password_dark.png differ diff --git a/docs/0.5.0/components/images/textfield_filled_password_light.png b/docs/0.5.0/components/images/textfield_filled_password_light.png new file mode 100644 index 00000000..8e9b23d4 Binary files /dev/null and b/docs/0.5.0/components/images/textfield_filled_password_light.png differ diff --git a/docs/0.5.0/components/images/textfield_outlined_dark.png b/docs/0.5.0/components/images/textfield_outlined_dark.png new file mode 100644 index 00000000..18ab3afd Binary files /dev/null and b/docs/0.5.0/components/images/textfield_outlined_dark.png differ diff --git a/docs/0.5.0/components/images/textfield_outlined_light.png b/docs/0.5.0/components/images/textfield_outlined_light.png new file mode 100644 index 00000000..0f971aa2 Binary files /dev/null and b/docs/0.5.0/components/images/textfield_outlined_light.png differ diff --git a/docs/0.5.0/components/images/textfield_outlined_password_dark.png b/docs/0.5.0/components/images/textfield_outlined_password_dark.png new file mode 100644 index 00000000..6f33c541 Binary files /dev/null and b/docs/0.5.0/components/images/textfield_outlined_password_dark.png differ diff --git a/docs/0.5.0/components/images/textfield_outlined_password_light.png b/docs/0.5.0/components/images/textfield_outlined_password_light.png new file mode 100644 index 00000000..7a6292a7 Binary files /dev/null and b/docs/0.5.0/components/images/textfield_outlined_password_light.png differ diff --git a/docs/0.5.0/components/listsItem.md b/docs/0.5.0/components/listsItem.md new file mode 100644 index 00000000..6bca63ef --- /dev/null +++ b/docs/0.5.0/components/listsItem.md @@ -0,0 +1,133 @@ +--- +layout: detail +title: List items +description: Lists are continuous, vertical indexes of text or images. +--- + +
**On this page** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Checkbox list](#checkbox-list) + * [Flutter implementation](#flutter-implementation) + * [OdsListItem API](#odslistitem-api) + * [Switch list](#switch-list) + * [Flutter implementation](#flutter-implementation-1) + * [OdsListSwitch API](#odslistswitch-api) + * [RadioButtons list](#radiobuttons-list) + * [Flutter implementation](#flutter-implementation-2) + * [OdsListRadioButton API](#odslistradiobutton-api) + +--- + +## 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 +{:.table} + +### 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. +{:.table} + +### 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. +{:.table} diff --git a/docs/0.5.0/components/listsItem_docs.md b/docs/0.5.0/components/listsItem_docs.md new file mode 100644 index 00000000..53766ab0 --- /dev/null +++ b/docs/0.5.0/components/listsItem_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: listsItem.md +--- diff --git a/docs/0.5.0/components/navigationBar.md b/docs/0.5.0/components/navigationBar.md new file mode 100644 index 00000000..7694a568 --- /dev/null +++ b/docs/0.5.0/components/navigationBar.md @@ -0,0 +1,87 @@ +--- +layout: detail +title: Bars - navigation +description: Navigation bar with Orange branding +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Implementation](#implementation) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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 + +_Soon available_ diff --git a/docs/0.5.0/components/navigationBar_docs.md b/docs/0.5.0/components/navigationBar_docs.md new file mode 100644 index 00000000..d53217fe --- /dev/null +++ b/docs/0.5.0/components/navigationBar_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: navigationBar.md +--- diff --git a/docs/0.5.0/components/progressIndicator.md b/docs/0.5.0/components/progressIndicator.md new file mode 100644 index 00000000..1995de64 --- /dev/null +++ b/docs/0.5.0/components/progressIndicator.md @@ -0,0 +1,113 @@ +--- +layout: detail +title: Progress indicators +description: Progress indicators express an unspecified wait time or display the length of a process. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Progress bar](#progress-bar) + * [Activity indicator](#activity-indicator) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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/0.5.0/components/progressIndicator_docs.md b/docs/0.5.0/components/progressIndicator_docs.md new file mode 100644 index 00000000..6cc25593 --- /dev/null +++ b/docs/0.5.0/components/progressIndicator_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: progressIndicator.md +--- diff --git a/docs/0.5.0/components/radioButtons.md b/docs/0.5.0/components/radioButtons.md new file mode 100644 index 00000000..e6d5e889 --- /dev/null +++ b/docs/0.5.0/components/radioButtons.md @@ -0,0 +1,65 @@ +--- +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** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Implementation](#implementation) + * [Flutter code](#flutter-code) + * [OdsRadioButton API](#odsradiobutton-api) + +--- + +## 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, + onChanged: (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. +{:.table} diff --git a/docs/0.5.0/components/radioButtons_docs.md b/docs/0.5.0/components/radioButtons_docs.md new file mode 100644 index 00000000..dfc73183 --- /dev/null +++ b/docs/0.5.0/components/radioButtons_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: radioButtons.md +--- diff --git a/docs/0.5.0/components/sheetsBottom.md b/docs/0.5.0/components/sheetsBottom.md new file mode 100644 index 00000000..2f8ddc00 --- /dev/null +++ b/docs/0.5.0/components/sheetsBottom.md @@ -0,0 +1,86 @@ +--- +layout: detail +title: Bottom sheets +description: Bottom Sheets are surfaces anchored to the bottom of the screen that present users supplement content. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Standard](#standard) + * [Expanding](#expanding) + +--- + +## Specifications references + +- [Design System Manager - Bottom sheets](https://system.design.orange.com/0c1af118d/p/3347ca-sheets-bottom/b/83b619) + +## Accessibility + +Please follow [accessibility criteria for development](https://a11y-guidelines.orange.com/en/mobile/ios/) + +## Variants + +Bottom sheets are surfaces anchored to the bottom of the screen that present users supplemental content. +It is useful for requesting a specific information or enabling a simple task related to the current context +of the current view or more globaly the application context. + +### Standard + +The standard bottom sheet must be used only with a "simple, basic" content. If a more complex content (scrollable) must be added prefer the Expanding variant. + +It defines two states: +- **closed**: The content is hidden +- **opened**: The content is visible (above the main view) + +A taps on the header, opens or closes the bottom sheet. + +```swift +struct BottomSheetPresentation: View { + @State private var isOpen = false + + var body: some View { + VStack { + // Main content goes here. + Text("Bottom sheet is \(isOpen ? "Opened": "Closed")") + } + .odsBottomSheetStandard(isOpen: $isOpen, title: "Customize") { + // Bottom sheet content goes here + } + } +} +``` + +### Expanding + +The type of bottom must be used if the content is more complex and perhaps need to be scrollable. + +It defines three size: +- **small**: (closed) The content is hidden, only the header is visible +- **medium**: (parcially opened) The content is parcially visible (half screen above the main view) but not scrollable +- **large**: (opened) The content is visible and scrollable + +User can resize by tapping on dimming area (close), drag the content, or tap on the header to cycle through the available sizes. + +```swift + struct BottomSheetPresentation: View { + @State private var bottomSheetSize: ODSBottomSheetSize = .large + var body: some View { + VStack { + // Main content goes here. + Text("Bottom sheet size \(bottomSheetSize.rawValue)") + } + .odsBottomSheetExpanding(title: "Customize", bottomSheetSize: $bottomSheetSize) { + // Bottom sheet content goes here + } + } + } +``` + +**Remark**: In order to compute the resizing when user scrolls the content, the bottom sheet automatically adds the provided content is a scrollView. + diff --git a/docs/0.5.0/components/sheetsBottom_docs.md b/docs/0.5.0/components/sheetsBottom_docs.md new file mode 100644 index 00000000..42eeca14 --- /dev/null +++ b/docs/0.5.0/components/sheetsBottom_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: sheetsBottom.md +--- diff --git a/docs/0.5.0/components/slider.md b/docs/0.5.0/components/slider.md new file mode 100644 index 00000000..89a79eb7 --- /dev/null +++ b/docs/0.5.0/components/slider.md @@ -0,0 +1,129 @@ +--- +layout: detail +title: Sliders +description: Sliders allow users to make selections from a range of values. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Continuous slider](#continuous-slider) + * [Continuous lockups slider](#continuous-lockups-slider) + * [Discrete slider](#discrete-slider) + * [Discrete lockups slider](#discrete-lockups-slider) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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/0.5.0/components/slider_docs.md b/docs/0.5.0/components/slider_docs.md new file mode 100644 index 00000000..16b55c4f --- /dev/null +++ b/docs/0.5.0/components/slider_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: slider.md +--- diff --git a/docs/0.5.0/components/switches.md b/docs/0.5.0/components/switches.md new file mode 100644 index 00000000..51bbf279 --- /dev/null +++ b/docs/0.5.0/components/switches.md @@ -0,0 +1,60 @@ +--- +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** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Implementation](#implementation) + * [Flutter code](#flutter-code) + * [OdsSwitch API](#odsswitch-api) + +--- + +## 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 +return OdsSwitch( + checked = true, + onCheckedChange = { }, + 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. +{:.table} + diff --git a/docs/0.5.0/components/switches_docs.md b/docs/0.5.0/components/switches_docs.md new file mode 100644 index 00000000..d31d80be --- /dev/null +++ b/docs/0.5.0/components/switches_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: switches.md +--- diff --git a/docs/0.5.0/components/tabBar.md b/docs/0.5.0/components/tabBar.md new file mode 100644 index 00000000..bae925fc --- /dev/null +++ b/docs/0.5.0/components/tabBar.md @@ -0,0 +1,154 @@ +--- +layout: detail +title: Tabs +description: Tabs organize content across different screens, data sets, and other interactions. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Fixed tabs](#fixed-tabs) + * [Scrollable tabs](#scrollable-tabs) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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/0.5.0/components/tabBar_docs.md b/docs/0.5.0/components/tabBar_docs.md new file mode 100644 index 00000000..0dc8a3c0 --- /dev/null +++ b/docs/0.5.0/components/tabBar_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: tabBar.md +--- diff --git a/docs/0.5.0/components/textInput.md b/docs/0.5.0/components/textInput.md new file mode 100644 index 00000000..3363b555 --- /dev/null +++ b/docs/0.5.0/components/textInput.md @@ -0,0 +1,69 @@ +--- +layout: detail +title: Text fields and text editor +description: Text fields and text editor let users enter and edit text. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Text field](#text-field) + * [Secure Text field](#secure-text-field) + * [Text editor](#text-editor) +* [Text Selection](#text-selection) + +--- + +## 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/0.5.0/components/textInput_docs.md b/docs/0.5.0/components/textInput_docs.md new file mode 100644 index 00000000..b73d3df6 --- /dev/null +++ b/docs/0.5.0/components/textInput_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: textInput.md +--- diff --git a/docs/0.5.0/components/toolBar.md b/docs/0.5.0/components/toolBar.md new file mode 100644 index 00000000..27553dc4 --- /dev/null +++ b/docs/0.5.0/components/toolBar.md @@ -0,0 +1,113 @@ +--- +layout: detail +title: Bars - tool +description: Tool bars with Orange branding +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Description](#description) +* [Variants](#variants) + * [With label items](#with-label-items) + * [With icon items](#with-icon-items) +* [Remarks](#remarks) + +--- + +## 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/0.5.0/components/toolBar_docs.md b/docs/0.5.0/components/toolBar_docs.md new file mode 100644 index 00000000..4b356e35 --- /dev/null +++ b/docs/0.5.0/components/toolBar_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: toolBar.md +--- diff --git a/docs/0.5.0/guidelines/spacings.md b/docs/0.5.0/guidelines/spacings.md new file mode 100644 index 00000000..4b30a252 --- /dev/null +++ b/docs/0.5.0/guidelines/spacings.md @@ -0,0 +1,68 @@ +--- +layout: detail +title: Spacings +--- +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Usage](#usage) + * [Apply spacing for magin](#apply-spacing-for-margin) + * [Apply spacing for padding](#apply-spacing-for-padding) + +--- + +## 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/0.5.0/guidelines/spacings_docs.md b/docs/0.5.0/guidelines/spacings_docs.md new file mode 100644 index 00000000..27a7c0c0 --- /dev/null +++ b/docs/0.5.0/guidelines/spacings_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: spacings.md +--- diff --git a/docs/0.5.0/guidelines/typography.md b/docs/0.5.0/guidelines/typography.md new file mode 100644 index 00000000..b407bdd3 --- /dev/null +++ b/docs/0.5.0/guidelines/typography.md @@ -0,0 +1,57 @@ +--- +layout: detail +title: Typography +--- +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Implementation](#implementation) + * [Apply font style on text](#apply-font-style-on-text) + * [Apply font style on view](#apply-font-style-on-view) + +--- + +## 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/0.5.0/guidelines/typography_docs.md b/docs/0.5.0/guidelines/typography_docs.md new file mode 100644 index 00000000..6b55d509 --- /dev/null +++ b/docs/0.5.0/guidelines/typography_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: typography.md +--- diff --git a/docs/0.5.0/home_content.md b/docs/0.5.0/home_content.md new file mode 100644 index 00000000..4f6ba37f --- /dev/null +++ b/docs/0.5.0/home_content.md @@ -0,0 +1,36 @@ +## 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: ^0.4.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'; +``` diff --git a/docs/0.5.0/index.md b/docs/0.5.0/index.md new file mode 100644 index 00000000..20776e6e --- /dev/null +++ b/docs/0.5.0/index.md @@ -0,0 +1,6 @@ +--- +layout: main +title: Getting started with Orange Design System for Flutter +--- + +{% include_relative home_content.md %} diff --git a/docs/0.5.0/index_content.md b/docs/0.5.0/index_content.md new file mode 100644 index 00000000..716ca9f9 --- /dev/null +++ b/docs/0.5.0/index_content.md @@ -0,0 +1,6 @@ +--- +layout: detail +title: Getting started with Orange Design System for Flutter +--- + +{% include_relative home_content.md %} diff --git a/docs/0.6.0/components/appBarsTop.md b/docs/0.6.0/components/appBarsTop.md new file mode 100644 index 00000000..9dbadbc5 --- /dev/null +++ b/docs/0.6.0/components/appBarsTop.md @@ -0,0 +1,104 @@ +--- +layout: detail +title: "App bars: top" +description: Top app bars display information and actions relating to the current screen. +--- + +
**On this page** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Regular top app bar](#regular-top-app-bar) + * [Flutter implementation](#flutter-implementation) + * [OdsTopAppBar API](#odstopappbar-api) + * [Large top app bar](#large-top-app-bar) + * [Flutter implementation](#flutter-implementation-1) + * [OdsLargeTopAppBar API](#odslargetopappbar-api) + +--- + +## 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 `topBar`. +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', + ), + ); + }, + ) +); +``` + +##### 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. +{:.table} + +### Large top app bar + +#### Flutter implementation + + +Add `OdsLargeTopAppBar` to your Scaffold `topBar`. +Here is an example of use: + +```dart +return OdsLargeTopAppBar( + title: "Large", + actions: IconButton(icon: const Icon(Icons.notifications), onPressed: () {}), + leading: BackButton(), + 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 +{:.table} diff --git a/docs/0.6.0/components/appBarsTop_docs.md b/docs/0.6.0/components/appBarsTop_docs.md new file mode 100644 index 00000000..c78e514c --- /dev/null +++ b/docs/0.6.0/components/appBarsTop_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: appBarsTop.md +--- diff --git a/docs/0.6.0/components/banners.md b/docs/0.6.0/components/banners.md new file mode 100644 index 00000000..80b7b446 --- /dev/null +++ b/docs/0.6.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) {}) +``` + + diff --git a/docs/0.6.0/components/banners_docs.md b/docs/0.6.0/components/banners_docs.md new file mode 100644 index 00000000..9211cff1 --- /dev/null +++ b/docs/0.6.0/components/banners_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: banners.md +--- diff --git a/docs/0.6.0/components/buttons.md b/docs/0.6.0/components/buttons.md new file mode 100644 index 00000000..b9766abb --- /dev/null +++ b/docs/0.6.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_ diff --git a/docs/0.6.0/components/buttons_docs.md b/docs/0.6.0/components/buttons_docs.md new file mode 100644 index 00000000..a626304a --- /dev/null +++ b/docs/0.6.0/components/buttons_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: buttons.md +--- diff --git a/docs/0.6.0/components/cards.md b/docs/0.6.0/components/cards.md new file mode 100644 index 00000000..4535932a --- /dev/null +++ b/docs/0.6.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_ diff --git a/docs/0.6.0/components/cards_docs.md b/docs/0.6.0/components/cards_docs.md new file mode 100644 index 00000000..9f4d12d7 --- /dev/null +++ b/docs/0.6.0/components/cards_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: cards.md +--- diff --git a/docs/0.6.0/components/checkboxes.md b/docs/0.6.0/components/checkboxes.md new file mode 100644 index 00000000..6f52e10f --- /dev/null +++ b/docs/0.6.0/components/checkboxes.md @@ -0,0 +1,60 @@ +--- +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** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Implementation](#implementation) + * [OdsCheckbox API](#odscheckbox-api) + +--- + +## 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 +return OdsCheckbox( + checked: true, + onCheckedChange: () {}, + enabled: true, + 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 +{:.table} diff --git a/docs/0.6.0/components/checkboxes_docs.md b/docs/0.6.0/components/checkboxes_docs.md new file mode 100644 index 00000000..89244539 --- /dev/null +++ b/docs/0.6.0/components/checkboxes_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: checkboxes.md +--- diff --git a/docs/0.6.0/components/chips.md b/docs/0.6.0/components/chips.md new file mode 100644 index 00000000..8b1f8c2e --- /dev/null +++ b/docs/0.6.0/components/chips.md @@ -0,0 +1,201 @@ +--- +layout: detail +title: Chips +description: Chips are compact elements that represent an input, attribute, or action. +--- + +
**On this page** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Input chip](#input-chip) + * [Flutter implementation](#flutter-implementation) + * [OdsInputChip API](#odsinputchip-api) + * [Choice chip](#choice-chip) + * [Flutter implementation](#flutter-implementation-1) + * [OdsChoiceChip API](#odschoicechip-api) + * [Filter chip](#filter-chip) + * [Flutter implementation](#jflutter-implementation-2) + * [OdsFilterChip API](#odsfilterchip-api) + * [Action chip](#action-chip) + * [Flutter implementation](#flutter-implementation-3) + * [OdsActionChip API](#odsactionchip-api) + +--- + +## 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", + onClick = { }, + leadingIcon = null, + leadingAvatar: CircleAvatar( + backgroundImage: NetworkImage( + OdsApplication.recipes[index].url, + ), + ), + ), // Set it to `null` for no avatar or provide a `leadingIcon` + enabled = true, + onCancel = { } +) +``` + +##### OdsInputChip API + +Parameter | Default value | Description +-- | -- | -- +`text: String` | | Text to be displayed into the chip +`onClick: (bool?)? Callback` | | Callback called on chip click +`enabled: Boolean` | `true` | Controls the enabled state of the chip. When `false`, this chip will not respond to user input. +`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 +`onCancel: (() -> Unit)?` | `null` | Callback called on chip cancel cross click. Pass `null` for no cancel cross. +{:.table} + +### 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 +return OdsChoiceChip( + text = "Choice text", + onClick = { }, + leadingAvatar = OdsChipLeadingAvatar( + image: NetworkImage("https://..."), + contentDescription: "" // Optional + ), // Set it to `null` for no avatar + selected = false, + enabled = 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 +{:.table} + + +### 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 +return OdsFilterChip( + text = "chip text", + onClick = { }, + leadingAvatar = OdsChipLeadingAvatar( + image: NetworkImage("https://..."), + contentDescription: "" // Optional + ), // Set it to `null` for no avatar + selected = false, + enabled = 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 +{:.table} + +Use the filter like exemple [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(colorScheme.secondary, BlendMode.srcIn)) // set it to `null` for no icon + enabled = true, // Optional +) +``` + +##### 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 +{:.table} diff --git a/docs/0.6.0/components/chips_docs.md b/docs/0.6.0/components/chips_docs.md new file mode 100644 index 00000000..cf9760b5 --- /dev/null +++ b/docs/0.6.0/components/chips_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: chips.md +--- diff --git a/docs/0.6.0/components/dialogs.md b/docs/0.6.0/components/dialogs.md new file mode 100644 index 00000000..81947af3 --- /dev/null +++ b/docs/0.6.0/components/dialogs.md @@ -0,0 +1,66 @@ +--- +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** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Alert dialog](#alert-dialog) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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** + +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 + +_Soon available_ diff --git a/docs/0.6.0/components/dialogs_docs.md b/docs/0.6.0/components/dialogs_docs.md new file mode 100644 index 00000000..253fa372 --- /dev/null +++ b/docs/0.6.0/components/dialogs_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: dialogs.md +--- diff --git a/docs/0.6.0/components/floatingActionButtons.md b/docs/0.6.0/components/floatingActionButtons.md new file mode 100644 index 00000000..9c8ed58f --- /dev/null +++ b/docs/0.6.0/components/floatingActionButtons.md @@ -0,0 +1,119 @@ +--- +layout: detail +title: Floating action buttons +description: A floating action button (FAB) represents the primary action of a screen. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Regular FAB](#regular-fab) + * [Small FAB](#small-fab) + * [Large FAB](#large-fab) + * [Extended FAB](#extended-fab) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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 +); +``` + +### 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 +); +``` + +### 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 +); +``` + +### 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 OdsSmallFloatingActionButton( + onClick: () {}, + text = "Add", + icon: const Icon(Icons.add), //Optional +); +``` + + +## Component specific tokens + +_Soon available_ diff --git a/docs/0.6.0/components/floatingActionButtons_docs.md b/docs/0.6.0/components/floatingActionButtons_docs.md new file mode 100644 index 00000000..ea8f4414 --- /dev/null +++ b/docs/0.6.0/components/floatingActionButtons_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: floatingActionButtons.md +--- diff --git a/docs/0.6.0/components/images/app_bar_top_overflow_menu_dark.png b/docs/0.6.0/components/images/app_bar_top_overflow_menu_dark.png new file mode 100644 index 00000000..60322543 Binary files /dev/null and b/docs/0.6.0/components/images/app_bar_top_overflow_menu_dark.png differ diff --git a/docs/0.6.0/components/images/app_bar_top_overflow_menu_light.png b/docs/0.6.0/components/images/app_bar_top_overflow_menu_light.png new file mode 100644 index 00000000..2e3bd905 Binary files /dev/null and b/docs/0.6.0/components/images/app_bar_top_overflow_menu_light.png differ diff --git a/docs/0.6.0/components/images/banner_dark.png b/docs/0.6.0/components/images/banner_dark.png new file mode 100644 index 00000000..60803f20 Binary files /dev/null and b/docs/0.6.0/components/images/banner_dark.png differ diff --git a/docs/0.6.0/components/images/banner_light.png b/docs/0.6.0/components/images/banner_light.png new file mode 100644 index 00000000..4d174146 Binary files /dev/null and b/docs/0.6.0/components/images/banner_light.png differ diff --git a/docs/0.6.0/components/images/button_contained_dark.png b/docs/0.6.0/components/images/button_contained_dark.png new file mode 100644 index 00000000..8cc9ee5f Binary files /dev/null and b/docs/0.6.0/components/images/button_contained_dark.png differ diff --git a/docs/0.6.0/components/images/button_contained_light.png b/docs/0.6.0/components/images/button_contained_light.png new file mode 100644 index 00000000..401db36d Binary files /dev/null and b/docs/0.6.0/components/images/button_contained_light.png differ diff --git a/docs/0.6.0/components/images/button_contained_negative_dark.png b/docs/0.6.0/components/images/button_contained_negative_dark.png new file mode 100644 index 00000000..13f22a29 Binary files /dev/null and b/docs/0.6.0/components/images/button_contained_negative_dark.png differ diff --git a/docs/0.6.0/components/images/button_contained_negative_light.png b/docs/0.6.0/components/images/button_contained_negative_light.png new file mode 100644 index 00000000..018b84cf Binary files /dev/null and b/docs/0.6.0/components/images/button_contained_negative_light.png differ diff --git a/docs/0.6.0/components/images/button_contained_positive_dark.png b/docs/0.6.0/components/images/button_contained_positive_dark.png new file mode 100644 index 00000000..b1527819 Binary files /dev/null and b/docs/0.6.0/components/images/button_contained_positive_dark.png differ diff --git a/docs/0.6.0/components/images/button_contained_positive_light.png b/docs/0.6.0/components/images/button_contained_positive_light.png new file mode 100644 index 00000000..906bf0b3 Binary files /dev/null and b/docs/0.6.0/components/images/button_contained_positive_light.png differ diff --git a/docs/0.6.0/components/images/button_icon_dark.png b/docs/0.6.0/components/images/button_icon_dark.png new file mode 100644 index 00000000..551ce30a Binary files /dev/null and b/docs/0.6.0/components/images/button_icon_dark.png differ diff --git a/docs/0.6.0/components/images/button_icon_light.png b/docs/0.6.0/components/images/button_icon_light.png new file mode 100644 index 00000000..b11c9dd5 Binary files /dev/null and b/docs/0.6.0/components/images/button_icon_light.png differ diff --git a/docs/0.6.0/components/images/button_icon_toggle_dark.png b/docs/0.6.0/components/images/button_icon_toggle_dark.png new file mode 100644 index 00000000..d2702c6e Binary files /dev/null and b/docs/0.6.0/components/images/button_icon_toggle_dark.png differ diff --git a/docs/0.6.0/components/images/button_icon_toggle_group_dark.png b/docs/0.6.0/components/images/button_icon_toggle_group_dark.png new file mode 100644 index 00000000..1f3fdc9a Binary files /dev/null and b/docs/0.6.0/components/images/button_icon_toggle_group_dark.png differ diff --git a/docs/0.6.0/components/images/button_icon_toggle_group_light.png b/docs/0.6.0/components/images/button_icon_toggle_group_light.png new file mode 100644 index 00000000..4f32291c Binary files /dev/null and b/docs/0.6.0/components/images/button_icon_toggle_group_light.png differ diff --git a/docs/0.6.0/components/images/button_icon_toggle_light.png b/docs/0.6.0/components/images/button_icon_toggle_light.png new file mode 100644 index 00000000..8256c395 Binary files /dev/null and b/docs/0.6.0/components/images/button_icon_toggle_light.png differ diff --git a/docs/0.6.0/components/images/button_outlined_dark.png b/docs/0.6.0/components/images/button_outlined_dark.png new file mode 100644 index 00000000..420ab1a4 Binary files /dev/null and b/docs/0.6.0/components/images/button_outlined_dark.png differ diff --git a/docs/0.6.0/components/images/button_outlined_light.png b/docs/0.6.0/components/images/button_outlined_light.png new file mode 100644 index 00000000..a7c56296 Binary files /dev/null and b/docs/0.6.0/components/images/button_outlined_light.png differ diff --git a/docs/0.6.0/components/images/button_text_dark.png b/docs/0.6.0/components/images/button_text_dark.png new file mode 100644 index 00000000..13ae0324 Binary files /dev/null and b/docs/0.6.0/components/images/button_text_dark.png differ diff --git a/docs/0.6.0/components/images/button_text_light.png b/docs/0.6.0/components/images/button_text_light.png new file mode 100644 index 00000000..f574d322 Binary files /dev/null and b/docs/0.6.0/components/images/button_text_light.png differ diff --git a/docs/0.6.0/components/images/button_text_toggle_group_dark.png b/docs/0.6.0/components/images/button_text_toggle_group_dark.png new file mode 100644 index 00000000..b8aab9b3 Binary files /dev/null and b/docs/0.6.0/components/images/button_text_toggle_group_dark.png differ diff --git a/docs/0.6.0/components/images/button_text_toggle_group_light.png b/docs/0.6.0/components/images/button_text_toggle_group_light.png new file mode 100644 index 00000000..7c594ce4 Binary files /dev/null and b/docs/0.6.0/components/images/button_text_toggle_group_light.png differ diff --git a/docs/0.6.0/components/images/button_toggle_dark.png b/docs/0.6.0/components/images/button_toggle_dark.png new file mode 100644 index 00000000..20faac6f Binary files /dev/null and b/docs/0.6.0/components/images/button_toggle_dark.png differ diff --git a/docs/0.6.0/components/images/button_toggle_light.png b/docs/0.6.0/components/images/button_toggle_light.png new file mode 100644 index 00000000..70554b9a Binary files /dev/null and b/docs/0.6.0/components/images/button_toggle_light.png differ diff --git a/docs/0.6.0/components/images/card_horizontal_dark.png b/docs/0.6.0/components/images/card_horizontal_dark.png new file mode 100644 index 00000000..ba5324c9 Binary files /dev/null and b/docs/0.6.0/components/images/card_horizontal_dark.png differ diff --git a/docs/0.6.0/components/images/card_horizontal_light.png b/docs/0.6.0/components/images/card_horizontal_light.png new file mode 100644 index 00000000..cc4c5928 Binary files /dev/null and b/docs/0.6.0/components/images/card_horizontal_light.png differ diff --git a/docs/0.6.0/components/images/card_small_dark.png b/docs/0.6.0/components/images/card_small_dark.png new file mode 100644 index 00000000..9a4097c8 Binary files /dev/null and b/docs/0.6.0/components/images/card_small_dark.png differ diff --git a/docs/0.6.0/components/images/card_small_light.png b/docs/0.6.0/components/images/card_small_light.png new file mode 100644 index 00000000..4b942076 Binary files /dev/null and b/docs/0.6.0/components/images/card_small_light.png differ diff --git a/docs/0.6.0/components/images/card_vertical_header_first_dark.png b/docs/0.6.0/components/images/card_vertical_header_first_dark.png new file mode 100644 index 00000000..1626639c Binary files /dev/null and b/docs/0.6.0/components/images/card_vertical_header_first_dark.png differ diff --git a/docs/0.6.0/components/images/card_vertical_header_first_light.png b/docs/0.6.0/components/images/card_vertical_header_first_light.png new file mode 100644 index 00000000..31e9d39c Binary files /dev/null and b/docs/0.6.0/components/images/card_vertical_header_first_light.png differ diff --git a/docs/0.6.0/components/images/card_vertical_image_first_dark.png b/docs/0.6.0/components/images/card_vertical_image_first_dark.png new file mode 100644 index 00000000..090ce526 Binary files /dev/null and b/docs/0.6.0/components/images/card_vertical_image_first_dark.png differ diff --git a/docs/0.6.0/components/images/card_vertical_image_first_light.png b/docs/0.6.0/components/images/card_vertical_image_first_light.png new file mode 100644 index 00000000..9dd3ed2d Binary files /dev/null and b/docs/0.6.0/components/images/card_vertical_image_first_light.png differ diff --git a/docs/0.6.0/components/images/checkbox_dark.png b/docs/0.6.0/components/images/checkbox_dark.png new file mode 100644 index 00000000..d37bc0a5 Binary files /dev/null and b/docs/0.6.0/components/images/checkbox_dark.png differ diff --git a/docs/0.6.0/components/images/checkbox_light.png b/docs/0.6.0/components/images/checkbox_light.png new file mode 100644 index 00000000..002bc777 Binary files /dev/null and b/docs/0.6.0/components/images/checkbox_light.png differ diff --git a/docs/0.6.0/components/images/checkboxe_list_dark.png b/docs/0.6.0/components/images/checkboxe_list_dark.png new file mode 100644 index 00000000..8b325356 Binary files /dev/null and b/docs/0.6.0/components/images/checkboxe_list_dark.png differ diff --git a/docs/0.6.0/components/images/checkboxe_list_light.png b/docs/0.6.0/components/images/checkboxe_list_light.png new file mode 100644 index 00000000..9c10551a Binary files /dev/null and b/docs/0.6.0/components/images/checkboxe_list_light.png differ diff --git a/docs/0.6.0/components/images/chips_action_dark.png b/docs/0.6.0/components/images/chips_action_dark.png new file mode 100644 index 00000000..d9c95f5e Binary files /dev/null and b/docs/0.6.0/components/images/chips_action_dark.png differ diff --git a/docs/0.6.0/components/images/chips_action_light.png b/docs/0.6.0/components/images/chips_action_light.png new file mode 100644 index 00000000..086a5bd3 Binary files /dev/null and b/docs/0.6.0/components/images/chips_action_light.png differ diff --git a/docs/0.6.0/components/images/chips_choice_dark.png b/docs/0.6.0/components/images/chips_choice_dark.png new file mode 100644 index 00000000..cb6ead60 Binary files /dev/null and b/docs/0.6.0/components/images/chips_choice_dark.png differ diff --git a/docs/0.6.0/components/images/chips_choice_light.png b/docs/0.6.0/components/images/chips_choice_light.png new file mode 100644 index 00000000..1e43a0b6 Binary files /dev/null and b/docs/0.6.0/components/images/chips_choice_light.png differ diff --git a/docs/0.6.0/components/images/chips_filter_dark.png b/docs/0.6.0/components/images/chips_filter_dark.png new file mode 100644 index 00000000..71fda02d Binary files /dev/null and b/docs/0.6.0/components/images/chips_filter_dark.png differ diff --git a/docs/0.6.0/components/images/chips_filter_light.png b/docs/0.6.0/components/images/chips_filter_light.png new file mode 100644 index 00000000..078b40eb Binary files /dev/null and b/docs/0.6.0/components/images/chips_filter_light.png differ diff --git a/docs/0.6.0/components/images/chips_input_dark.png b/docs/0.6.0/components/images/chips_input_dark.png new file mode 100644 index 00000000..7732e080 Binary files /dev/null and b/docs/0.6.0/components/images/chips_input_dark.png differ diff --git a/docs/0.6.0/components/images/chips_input_light.png b/docs/0.6.0/components/images/chips_input_light.png new file mode 100644 index 00000000..6cbf7e6c Binary files /dev/null and b/docs/0.6.0/components/images/chips_input_light.png differ diff --git a/docs/0.6.0/components/images/dialog_alert_dark.png b/docs/0.6.0/components/images/dialog_alert_dark.png new file mode 100644 index 00000000..c9dcbac4 Binary files /dev/null and b/docs/0.6.0/components/images/dialog_alert_dark.png differ diff --git a/docs/0.6.0/components/images/dialog_alert_light.png b/docs/0.6.0/components/images/dialog_alert_light.png new file mode 100644 index 00000000..9ad32961 Binary files /dev/null and b/docs/0.6.0/components/images/dialog_alert_light.png differ diff --git a/docs/0.6.0/components/images/fab_dark.png b/docs/0.6.0/components/images/fab_dark.png new file mode 100644 index 00000000..897a5bb5 Binary files /dev/null and b/docs/0.6.0/components/images/fab_dark.png differ diff --git a/docs/0.6.0/components/images/fab_extended_dark.png b/docs/0.6.0/components/images/fab_extended_dark.png new file mode 100644 index 00000000..9b0e85d4 Binary files /dev/null and b/docs/0.6.0/components/images/fab_extended_dark.png differ diff --git a/docs/0.6.0/components/images/fab_extended_light.png b/docs/0.6.0/components/images/fab_extended_light.png new file mode 100644 index 00000000..4c9d7f13 Binary files /dev/null and b/docs/0.6.0/components/images/fab_extended_light.png differ diff --git a/docs/0.6.0/components/images/fab_large_dark.png b/docs/0.6.0/components/images/fab_large_dark.png new file mode 100644 index 00000000..28bfe69b Binary files /dev/null and b/docs/0.6.0/components/images/fab_large_dark.png differ diff --git a/docs/0.6.0/components/images/fab_large_light.png b/docs/0.6.0/components/images/fab_large_light.png new file mode 100644 index 00000000..92e931a2 Binary files /dev/null and b/docs/0.6.0/components/images/fab_large_light.png differ diff --git a/docs/0.6.0/components/images/fab_light.png b/docs/0.6.0/components/images/fab_light.png new file mode 100644 index 00000000..b9e8f14d Binary files /dev/null and b/docs/0.6.0/components/images/fab_light.png differ diff --git a/docs/0.6.0/components/images/fab_mini_dark.png b/docs/0.6.0/components/images/fab_mini_dark.png new file mode 100644 index 00000000..76ce617c Binary files /dev/null and b/docs/0.6.0/components/images/fab_mini_dark.png differ diff --git a/docs/0.6.0/components/images/fab_mini_light.png b/docs/0.6.0/components/images/fab_mini_light.png new file mode 100644 index 00000000..20f73255 Binary files /dev/null and b/docs/0.6.0/components/images/fab_mini_light.png differ diff --git a/docs/0.6.0/components/images/lists_radio_button_dark.png b/docs/0.6.0/components/images/lists_radio_button_dark.png new file mode 100644 index 00000000..e0ce8e76 Binary files /dev/null and b/docs/0.6.0/components/images/lists_radio_button_dark.png differ diff --git a/docs/0.6.0/components/images/lists_radio_button_light.png b/docs/0.6.0/components/images/lists_radio_button_light.png new file mode 100644 index 00000000..a7cd5e5b Binary files /dev/null and b/docs/0.6.0/components/images/lists_radio_button_light.png differ diff --git a/docs/0.6.0/components/images/lists_single_line_dark.png b/docs/0.6.0/components/images/lists_single_line_dark.png new file mode 100644 index 00000000..d46eca2d Binary files /dev/null and b/docs/0.6.0/components/images/lists_single_line_dark.png differ diff --git a/docs/0.6.0/components/images/lists_single_line_light.png b/docs/0.6.0/components/images/lists_single_line_light.png new file mode 100644 index 00000000..3bda5190 Binary files /dev/null and b/docs/0.6.0/components/images/lists_single_line_light.png differ diff --git a/docs/0.6.0/components/images/lists_single_line_wide_image_dark.png b/docs/0.6.0/components/images/lists_single_line_wide_image_dark.png new file mode 100644 index 00000000..c00f2192 Binary files /dev/null and b/docs/0.6.0/components/images/lists_single_line_wide_image_dark.png differ diff --git a/docs/0.6.0/components/images/lists_single_line_wide_image_light.png b/docs/0.6.0/components/images/lists_single_line_wide_image_light.png new file mode 100644 index 00000000..d839b5cc Binary files /dev/null and b/docs/0.6.0/components/images/lists_single_line_wide_image_light.png differ diff --git a/docs/0.6.0/components/images/lists_switch_dark.png b/docs/0.6.0/components/images/lists_switch_dark.png new file mode 100644 index 00000000..4e9ff230 Binary files /dev/null and b/docs/0.6.0/components/images/lists_switch_dark.png differ diff --git a/docs/0.6.0/components/images/lists_switch_light.png b/docs/0.6.0/components/images/lists_switch_light.png new file mode 100644 index 00000000..0f9adf47 Binary files /dev/null and b/docs/0.6.0/components/images/lists_switch_light.png differ diff --git a/docs/0.6.0/components/images/lists_three_line_dark.png b/docs/0.6.0/components/images/lists_three_line_dark.png new file mode 100644 index 00000000..15e350f3 Binary files /dev/null and b/docs/0.6.0/components/images/lists_three_line_dark.png differ diff --git a/docs/0.6.0/components/images/lists_three_line_light.png b/docs/0.6.0/components/images/lists_three_line_light.png new file mode 100644 index 00000000..f3dabd4e Binary files /dev/null and b/docs/0.6.0/components/images/lists_three_line_light.png differ diff --git a/docs/0.6.0/components/images/lists_three_line_wide_image_dark.png b/docs/0.6.0/components/images/lists_three_line_wide_image_dark.png new file mode 100644 index 00000000..2d44de0c Binary files /dev/null and b/docs/0.6.0/components/images/lists_three_line_wide_image_dark.png differ diff --git a/docs/0.6.0/components/images/lists_three_line_wide_image_light.png b/docs/0.6.0/components/images/lists_three_line_wide_image_light.png new file mode 100644 index 00000000..b6eaa436 Binary files /dev/null and b/docs/0.6.0/components/images/lists_three_line_wide_image_light.png differ diff --git a/docs/0.6.0/components/images/lists_two_line_dark.png b/docs/0.6.0/components/images/lists_two_line_dark.png new file mode 100644 index 00000000..7e130d9f Binary files /dev/null and b/docs/0.6.0/components/images/lists_two_line_dark.png differ diff --git a/docs/0.6.0/components/images/lists_two_line_light.png b/docs/0.6.0/components/images/lists_two_line_light.png new file mode 100644 index 00000000..ea4e52cb Binary files /dev/null and b/docs/0.6.0/components/images/lists_two_line_light.png differ diff --git a/docs/0.6.0/components/images/lists_two_line_wide_image_dark.png b/docs/0.6.0/components/images/lists_two_line_wide_image_dark.png new file mode 100644 index 00000000..0ea681e8 Binary files /dev/null and b/docs/0.6.0/components/images/lists_two_line_wide_image_dark.png differ diff --git a/docs/0.6.0/components/images/lists_two_line_wide_image_light.png b/docs/0.6.0/components/images/lists_two_line_wide_image_light.png new file mode 100644 index 00000000..0c214c27 Binary files /dev/null and b/docs/0.6.0/components/images/lists_two_line_wide_image_light.png differ diff --git a/docs/0.6.0/components/images/menu_dropdown_dark.png b/docs/0.6.0/components/images/menu_dropdown_dark.png new file mode 100644 index 00000000..b47bccfe Binary files /dev/null and b/docs/0.6.0/components/images/menu_dropdown_dark.png differ diff --git a/docs/0.6.0/components/images/menu_dropdown_light.png b/docs/0.6.0/components/images/menu_dropdown_light.png new file mode 100644 index 00000000..5af3fb65 Binary files /dev/null and b/docs/0.6.0/components/images/menu_dropdown_light.png differ diff --git a/docs/0.6.0/components/images/menu_exposed_dropdown_dark.png b/docs/0.6.0/components/images/menu_exposed_dropdown_dark.png new file mode 100644 index 00000000..029fb349 Binary files /dev/null and b/docs/0.6.0/components/images/menu_exposed_dropdown_dark.png differ diff --git a/docs/0.6.0/components/images/menu_exposed_dropdown_light.png b/docs/0.6.0/components/images/menu_exposed_dropdown_light.png new file mode 100644 index 00000000..202aa7db Binary files /dev/null and b/docs/0.6.0/components/images/menu_exposed_dropdown_light.png differ diff --git a/docs/0.6.0/components/images/navigation_bar_dark.png b/docs/0.6.0/components/images/navigation_bar_dark.png new file mode 100644 index 00000000..aff18611 Binary files /dev/null and b/docs/0.6.0/components/images/navigation_bar_dark.png differ diff --git a/docs/0.6.0/components/images/navigation_bar_light.png b/docs/0.6.0/components/images/navigation_bar_light.png new file mode 100644 index 00000000..a5d9e288 Binary files /dev/null and b/docs/0.6.0/components/images/navigation_bar_light.png differ diff --git a/docs/0.6.0/components/images/progress_circular_dark.png b/docs/0.6.0/components/images/progress_circular_dark.png new file mode 100644 index 00000000..69b07e8c Binary files /dev/null and b/docs/0.6.0/components/images/progress_circular_dark.png differ diff --git a/docs/0.6.0/components/images/progress_circular_light.png b/docs/0.6.0/components/images/progress_circular_light.png new file mode 100644 index 00000000..b183a1d7 Binary files /dev/null and b/docs/0.6.0/components/images/progress_circular_light.png differ diff --git a/docs/0.6.0/components/images/progress_linear_dark.png b/docs/0.6.0/components/images/progress_linear_dark.png new file mode 100644 index 00000000..e4e3e843 Binary files /dev/null and b/docs/0.6.0/components/images/progress_linear_dark.png differ diff --git a/docs/0.6.0/components/images/progress_linear_light.png b/docs/0.6.0/components/images/progress_linear_light.png new file mode 100644 index 00000000..f56e5773 Binary files /dev/null and b/docs/0.6.0/components/images/progress_linear_light.png differ diff --git a/docs/0.6.0/components/images/radio_button_dark.png b/docs/0.6.0/components/images/radio_button_dark.png new file mode 100644 index 00000000..8dfd93d4 Binary files /dev/null and b/docs/0.6.0/components/images/radio_button_dark.png differ diff --git a/docs/0.6.0/components/images/radio_button_light.png b/docs/0.6.0/components/images/radio_button_light.png new file mode 100644 index 00000000..5cc7e464 Binary files /dev/null and b/docs/0.6.0/components/images/radio_button_light.png differ diff --git a/docs/0.6.0/components/images/sheetbottom_dark.png b/docs/0.6.0/components/images/sheetbottom_dark.png new file mode 100644 index 00000000..92919efc Binary files /dev/null and b/docs/0.6.0/components/images/sheetbottom_dark.png differ diff --git a/docs/0.6.0/components/images/sheetbottom_light.png b/docs/0.6.0/components/images/sheetbottom_light.png new file mode 100644 index 00000000..add8e3f0 Binary files /dev/null and b/docs/0.6.0/components/images/sheetbottom_light.png differ diff --git a/docs/0.6.0/components/images/slider_continuous_dark.png b/docs/0.6.0/components/images/slider_continuous_dark.png new file mode 100644 index 00000000..9b745d7f Binary files /dev/null and b/docs/0.6.0/components/images/slider_continuous_dark.png differ diff --git a/docs/0.6.0/components/images/slider_continuous_light.png b/docs/0.6.0/components/images/slider_continuous_light.png new file mode 100644 index 00000000..42ad208b Binary files /dev/null and b/docs/0.6.0/components/images/slider_continuous_light.png differ diff --git a/docs/0.6.0/components/images/slider_continuous_lockups_dark.png b/docs/0.6.0/components/images/slider_continuous_lockups_dark.png new file mode 100644 index 00000000..cd15d6e2 Binary files /dev/null and b/docs/0.6.0/components/images/slider_continuous_lockups_dark.png differ diff --git a/docs/0.6.0/components/images/slider_continuous_lockups_light.png b/docs/0.6.0/components/images/slider_continuous_lockups_light.png new file mode 100644 index 00000000..69f7444f Binary files /dev/null and b/docs/0.6.0/components/images/slider_continuous_lockups_light.png differ diff --git a/docs/0.6.0/components/images/slider_continuous_lockups_with_icon_dark.png b/docs/0.6.0/components/images/slider_continuous_lockups_with_icon_dark.png new file mode 100644 index 00000000..32764754 Binary files /dev/null and b/docs/0.6.0/components/images/slider_continuous_lockups_with_icon_dark.png differ diff --git a/docs/0.6.0/components/images/slider_continuous_lockups_with_icon_light.png b/docs/0.6.0/components/images/slider_continuous_lockups_with_icon_light.png new file mode 100644 index 00000000..39be0469 Binary files /dev/null and b/docs/0.6.0/components/images/slider_continuous_lockups_with_icon_light.png differ diff --git a/docs/0.6.0/components/images/slider_continuous_with_icon_dark.png b/docs/0.6.0/components/images/slider_continuous_with_icon_dark.png new file mode 100644 index 00000000..0d3b71f3 Binary files /dev/null and b/docs/0.6.0/components/images/slider_continuous_with_icon_dark.png differ diff --git a/docs/0.6.0/components/images/slider_continuous_with_icon_light.png b/docs/0.6.0/components/images/slider_continuous_with_icon_light.png new file mode 100644 index 00000000..4e81e7cd Binary files /dev/null and b/docs/0.6.0/components/images/slider_continuous_with_icon_light.png differ diff --git a/docs/0.6.0/components/images/slider_discrete_dark.png b/docs/0.6.0/components/images/slider_discrete_dark.png new file mode 100644 index 00000000..35abccc5 Binary files /dev/null and b/docs/0.6.0/components/images/slider_discrete_dark.png differ diff --git a/docs/0.6.0/components/images/slider_discrete_light.png b/docs/0.6.0/components/images/slider_discrete_light.png new file mode 100644 index 00000000..4f3d5083 Binary files /dev/null and b/docs/0.6.0/components/images/slider_discrete_light.png differ diff --git a/docs/0.6.0/components/images/slider_discrete_lockups_dark.png b/docs/0.6.0/components/images/slider_discrete_lockups_dark.png new file mode 100644 index 00000000..97a6da19 Binary files /dev/null and b/docs/0.6.0/components/images/slider_discrete_lockups_dark.png differ diff --git a/docs/0.6.0/components/images/slider_discrete_lockups_light.png b/docs/0.6.0/components/images/slider_discrete_lockups_light.png new file mode 100644 index 00000000..116273c3 Binary files /dev/null and b/docs/0.6.0/components/images/slider_discrete_lockups_light.png differ diff --git a/docs/0.6.0/components/images/slider_discrete_lockups_with_icon_dark.png b/docs/0.6.0/components/images/slider_discrete_lockups_with_icon_dark.png new file mode 100644 index 00000000..978dbfcb Binary files /dev/null and b/docs/0.6.0/components/images/slider_discrete_lockups_with_icon_dark.png differ diff --git a/docs/0.6.0/components/images/slider_discrete_lockups_with_icon_light.png b/docs/0.6.0/components/images/slider_discrete_lockups_with_icon_light.png new file mode 100644 index 00000000..640cfd2d Binary files /dev/null and b/docs/0.6.0/components/images/slider_discrete_lockups_with_icon_light.png differ diff --git a/docs/0.6.0/components/images/slider_discrete_with_icon_dark.png b/docs/0.6.0/components/images/slider_discrete_with_icon_dark.png new file mode 100644 index 00000000..cd3fa414 Binary files /dev/null and b/docs/0.6.0/components/images/slider_discrete_with_icon_dark.png differ diff --git a/docs/0.6.0/components/images/slider_discrete_with_icon_light.png b/docs/0.6.0/components/images/slider_discrete_with_icon_light.png new file mode 100644 index 00000000..a18b4e09 Binary files /dev/null and b/docs/0.6.0/components/images/slider_discrete_with_icon_light.png differ diff --git a/docs/0.6.0/components/images/snackbar_longer_action_dark.png b/docs/0.6.0/components/images/snackbar_longer_action_dark.png new file mode 100644 index 00000000..991076a0 Binary files /dev/null and b/docs/0.6.0/components/images/snackbar_longer_action_dark.png differ diff --git a/docs/0.6.0/components/images/snackbar_longer_action_light.png b/docs/0.6.0/components/images/snackbar_longer_action_light.png new file mode 100644 index 00000000..3df322d0 Binary files /dev/null and b/docs/0.6.0/components/images/snackbar_longer_action_light.png differ diff --git a/docs/0.6.0/components/images/snackbar_single_dark.png b/docs/0.6.0/components/images/snackbar_single_dark.png new file mode 100644 index 00000000..50b52d14 Binary files /dev/null and b/docs/0.6.0/components/images/snackbar_single_dark.png differ diff --git a/docs/0.6.0/components/images/snackbar_single_light.png b/docs/0.6.0/components/images/snackbar_single_light.png new file mode 100644 index 00000000..ec936888 Binary files /dev/null and b/docs/0.6.0/components/images/snackbar_single_light.png differ diff --git a/docs/0.6.0/components/images/snackbar_single_with_action_dark.png b/docs/0.6.0/components/images/snackbar_single_with_action_dark.png new file mode 100644 index 00000000..6966cfb0 Binary files /dev/null and b/docs/0.6.0/components/images/snackbar_single_with_action_dark.png differ diff --git a/docs/0.6.0/components/images/snackbar_single_with_action_light.png b/docs/0.6.0/components/images/snackbar_single_with_action_light.png new file mode 100644 index 00000000..ca8d4c8c Binary files /dev/null and b/docs/0.6.0/components/images/snackbar_single_with_action_light.png differ diff --git a/docs/0.6.0/components/images/snackbar_two_lines_dark.png b/docs/0.6.0/components/images/snackbar_two_lines_dark.png new file mode 100644 index 00000000..3b7b0035 Binary files /dev/null and b/docs/0.6.0/components/images/snackbar_two_lines_dark.png differ diff --git a/docs/0.6.0/components/images/snackbar_two_lines_light.png b/docs/0.6.0/components/images/snackbar_two_lines_light.png new file mode 100644 index 00000000..fcfa013e Binary files /dev/null and b/docs/0.6.0/components/images/snackbar_two_lines_light.png differ diff --git a/docs/0.6.0/components/images/switch_dark.png b/docs/0.6.0/components/images/switch_dark.png new file mode 100644 index 00000000..9d51d97f Binary files /dev/null and b/docs/0.6.0/components/images/switch_dark.png differ diff --git a/docs/0.6.0/components/images/switch_light.png b/docs/0.6.0/components/images/switch_light.png new file mode 100644 index 00000000..73e4e02a Binary files /dev/null and b/docs/0.6.0/components/images/switch_light.png differ diff --git a/docs/0.6.0/components/images/tabs_fixed_dark.png b/docs/0.6.0/components/images/tabs_fixed_dark.png new file mode 100644 index 00000000..1c529c76 Binary files /dev/null and b/docs/0.6.0/components/images/tabs_fixed_dark.png differ diff --git a/docs/0.6.0/components/images/tabs_fixed_light.png b/docs/0.6.0/components/images/tabs_fixed_light.png new file mode 100644 index 00000000..8ceda363 Binary files /dev/null and b/docs/0.6.0/components/images/tabs_fixed_light.png differ diff --git a/docs/0.6.0/components/images/tabs_scrollable_dark.png b/docs/0.6.0/components/images/tabs_scrollable_dark.png new file mode 100644 index 00000000..e99f8912 Binary files /dev/null and b/docs/0.6.0/components/images/tabs_scrollable_dark.png differ diff --git a/docs/0.6.0/components/images/tabs_scrollable_light.png b/docs/0.6.0/components/images/tabs_scrollable_light.png new file mode 100644 index 00000000..c6496d8d Binary files /dev/null and b/docs/0.6.0/components/images/tabs_scrollable_light.png differ diff --git a/docs/0.6.0/components/images/textfield_character_counter_dark.png b/docs/0.6.0/components/images/textfield_character_counter_dark.png new file mode 100644 index 00000000..9b52ae51 Binary files /dev/null and b/docs/0.6.0/components/images/textfield_character_counter_dark.png differ diff --git a/docs/0.6.0/components/images/textfield_character_counter_light.png b/docs/0.6.0/components/images/textfield_character_counter_light.png new file mode 100644 index 00000000..482d4c20 Binary files /dev/null and b/docs/0.6.0/components/images/textfield_character_counter_light.png differ diff --git a/docs/0.6.0/components/images/textfield_filled_dark.png b/docs/0.6.0/components/images/textfield_filled_dark.png new file mode 100644 index 00000000..38424f0f Binary files /dev/null and b/docs/0.6.0/components/images/textfield_filled_dark.png differ diff --git a/docs/0.6.0/components/images/textfield_filled_light.png b/docs/0.6.0/components/images/textfield_filled_light.png new file mode 100644 index 00000000..881386b2 Binary files /dev/null and b/docs/0.6.0/components/images/textfield_filled_light.png differ diff --git a/docs/0.6.0/components/images/textfield_filled_password_dark.png b/docs/0.6.0/components/images/textfield_filled_password_dark.png new file mode 100644 index 00000000..aaffb22f Binary files /dev/null and b/docs/0.6.0/components/images/textfield_filled_password_dark.png differ diff --git a/docs/0.6.0/components/images/textfield_filled_password_light.png b/docs/0.6.0/components/images/textfield_filled_password_light.png new file mode 100644 index 00000000..8e9b23d4 Binary files /dev/null and b/docs/0.6.0/components/images/textfield_filled_password_light.png differ diff --git a/docs/0.6.0/components/images/textfield_outlined_dark.png b/docs/0.6.0/components/images/textfield_outlined_dark.png new file mode 100644 index 00000000..18ab3afd Binary files /dev/null and b/docs/0.6.0/components/images/textfield_outlined_dark.png differ diff --git a/docs/0.6.0/components/images/textfield_outlined_light.png b/docs/0.6.0/components/images/textfield_outlined_light.png new file mode 100644 index 00000000..0f971aa2 Binary files /dev/null and b/docs/0.6.0/components/images/textfield_outlined_light.png differ diff --git a/docs/0.6.0/components/images/textfield_outlined_password_dark.png b/docs/0.6.0/components/images/textfield_outlined_password_dark.png new file mode 100644 index 00000000..6f33c541 Binary files /dev/null and b/docs/0.6.0/components/images/textfield_outlined_password_dark.png differ diff --git a/docs/0.6.0/components/images/textfield_outlined_password_light.png b/docs/0.6.0/components/images/textfield_outlined_password_light.png new file mode 100644 index 00000000..7a6292a7 Binary files /dev/null and b/docs/0.6.0/components/images/textfield_outlined_password_light.png differ diff --git a/docs/0.6.0/components/listsItem.md b/docs/0.6.0/components/listsItem.md new file mode 100644 index 00000000..6bca63ef --- /dev/null +++ b/docs/0.6.0/components/listsItem.md @@ -0,0 +1,133 @@ +--- +layout: detail +title: List items +description: Lists are continuous, vertical indexes of text or images. +--- + +
**On this page** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Checkbox list](#checkbox-list) + * [Flutter implementation](#flutter-implementation) + * [OdsListItem API](#odslistitem-api) + * [Switch list](#switch-list) + * [Flutter implementation](#flutter-implementation-1) + * [OdsListSwitch API](#odslistswitch-api) + * [RadioButtons list](#radiobuttons-list) + * [Flutter implementation](#flutter-implementation-2) + * [OdsListRadioButton API](#odslistradiobutton-api) + +--- + +## 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 +{:.table} + +### 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. +{:.table} + +### 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. +{:.table} diff --git a/docs/0.6.0/components/listsItem_docs.md b/docs/0.6.0/components/listsItem_docs.md new file mode 100644 index 00000000..53766ab0 --- /dev/null +++ b/docs/0.6.0/components/listsItem_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: listsItem.md +--- diff --git a/docs/0.6.0/components/navigationBar.md b/docs/0.6.0/components/navigationBar.md new file mode 100644 index 00000000..7694a568 --- /dev/null +++ b/docs/0.6.0/components/navigationBar.md @@ -0,0 +1,87 @@ +--- +layout: detail +title: Bars - navigation +description: Navigation bar with Orange branding +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Implementation](#implementation) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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 + +_Soon available_ diff --git a/docs/0.6.0/components/navigationBar_docs.md b/docs/0.6.0/components/navigationBar_docs.md new file mode 100644 index 00000000..d53217fe --- /dev/null +++ b/docs/0.6.0/components/navigationBar_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: navigationBar.md +--- diff --git a/docs/0.6.0/components/progressIndicator.md b/docs/0.6.0/components/progressIndicator.md new file mode 100644 index 00000000..1995de64 --- /dev/null +++ b/docs/0.6.0/components/progressIndicator.md @@ -0,0 +1,113 @@ +--- +layout: detail +title: Progress indicators +description: Progress indicators express an unspecified wait time or display the length of a process. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Progress bar](#progress-bar) + * [Activity indicator](#activity-indicator) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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/0.6.0/components/progressIndicator_docs.md b/docs/0.6.0/components/progressIndicator_docs.md new file mode 100644 index 00000000..6cc25593 --- /dev/null +++ b/docs/0.6.0/components/progressIndicator_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: progressIndicator.md +--- diff --git a/docs/0.6.0/components/radioButtons.md b/docs/0.6.0/components/radioButtons.md new file mode 100644 index 00000000..e6d5e889 --- /dev/null +++ b/docs/0.6.0/components/radioButtons.md @@ -0,0 +1,65 @@ +--- +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** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Implementation](#implementation) + * [Flutter code](#flutter-code) + * [OdsRadioButton API](#odsradiobutton-api) + +--- + +## 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, + onChanged: (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. +{:.table} diff --git a/docs/0.6.0/components/radioButtons_docs.md b/docs/0.6.0/components/radioButtons_docs.md new file mode 100644 index 00000000..dfc73183 --- /dev/null +++ b/docs/0.6.0/components/radioButtons_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: radioButtons.md +--- diff --git a/docs/0.6.0/components/sheets_bottom.md b/docs/0.6.0/components/sheets_bottom.md new file mode 100644 index 00000000..ab8de6a4 --- /dev/null +++ b/docs/0.6.0/components/sheets_bottom.md @@ -0,0 +1,55 @@ +--- +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** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Implementation](#implementation) + * [Flutter](#flutter) + * [OdsSheetsBottom API](#odsheetbottom-api-) + +--- + +## 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 +{:.table} diff --git a/docs/0.6.0/components/sheets_bottom_docs.md b/docs/0.6.0/components/sheets_bottom_docs.md new file mode 100644 index 00000000..2945723a --- /dev/null +++ b/docs/0.6.0/components/sheets_bottom_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: sheets_bottom.md +--- diff --git a/docs/0.6.0/components/slider.md b/docs/0.6.0/components/slider.md new file mode 100644 index 00000000..89a79eb7 --- /dev/null +++ b/docs/0.6.0/components/slider.md @@ -0,0 +1,129 @@ +--- +layout: detail +title: Sliders +description: Sliders allow users to make selections from a range of values. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Continuous slider](#continuous-slider) + * [Continuous lockups slider](#continuous-lockups-slider) + * [Discrete slider](#discrete-slider) + * [Discrete lockups slider](#discrete-lockups-slider) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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/0.6.0/components/slider_docs.md b/docs/0.6.0/components/slider_docs.md new file mode 100644 index 00000000..16b55c4f --- /dev/null +++ b/docs/0.6.0/components/slider_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: slider.md +--- diff --git a/docs/0.6.0/components/snackbars.md b/docs/0.6.0/components/snackbars.md new file mode 100644 index 00000000..57a1f46f --- /dev/null +++ b/docs/0.6.0/components/snackbars.md @@ -0,0 +1,97 @@ +--- +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** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Implementation](#implementation) + * [Flutter code](#flutter-code) + * [OdsSnackbar API](#odssnackbar-api) + +--- + +## 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 +{:.table} diff --git a/docs/0.6.0/components/snackbars_docs.md b/docs/0.6.0/components/snackbars_docs.md new file mode 100644 index 00000000..84742d40 --- /dev/null +++ b/docs/0.6.0/components/snackbars_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: snackbars.md +--- diff --git a/docs/0.6.0/components/switches.md b/docs/0.6.0/components/switches.md new file mode 100644 index 00000000..51bbf279 --- /dev/null +++ b/docs/0.6.0/components/switches.md @@ -0,0 +1,60 @@ +--- +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** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Implementation](#implementation) + * [Flutter code](#flutter-code) + * [OdsSwitch API](#odsswitch-api) + +--- + +## 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 +return OdsSwitch( + checked = true, + onCheckedChange = { }, + 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. +{:.table} + diff --git a/docs/0.6.0/components/switches_docs.md b/docs/0.6.0/components/switches_docs.md new file mode 100644 index 00000000..d31d80be --- /dev/null +++ b/docs/0.6.0/components/switches_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: switches.md +--- diff --git a/docs/0.6.0/components/tabBar.md b/docs/0.6.0/components/tabBar.md new file mode 100644 index 00000000..bae925fc --- /dev/null +++ b/docs/0.6.0/components/tabBar.md @@ -0,0 +1,154 @@ +--- +layout: detail +title: Tabs +description: Tabs organize content across different screens, data sets, and other interactions. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Fixed tabs](#fixed-tabs) + * [Scrollable tabs](#scrollable-tabs) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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/0.6.0/components/tabBar_docs.md b/docs/0.6.0/components/tabBar_docs.md new file mode 100644 index 00000000..0dc8a3c0 --- /dev/null +++ b/docs/0.6.0/components/tabBar_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: tabBar.md +--- diff --git a/docs/0.6.0/components/textInput.md b/docs/0.6.0/components/textInput.md new file mode 100644 index 00000000..3363b555 --- /dev/null +++ b/docs/0.6.0/components/textInput.md @@ -0,0 +1,69 @@ +--- +layout: detail +title: Text fields and text editor +description: Text fields and text editor let users enter and edit text. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Text field](#text-field) + * [Secure Text field](#secure-text-field) + * [Text editor](#text-editor) +* [Text Selection](#text-selection) + +--- + +## 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/0.6.0/components/textInput_docs.md b/docs/0.6.0/components/textInput_docs.md new file mode 100644 index 00000000..b73d3df6 --- /dev/null +++ b/docs/0.6.0/components/textInput_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: textInput.md +--- diff --git a/docs/0.6.0/components/toolBar.md b/docs/0.6.0/components/toolBar.md new file mode 100644 index 00000000..27553dc4 --- /dev/null +++ b/docs/0.6.0/components/toolBar.md @@ -0,0 +1,113 @@ +--- +layout: detail +title: Bars - tool +description: Tool bars with Orange branding +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Description](#description) +* [Variants](#variants) + * [With label items](#with-label-items) + * [With icon items](#with-icon-items) +* [Remarks](#remarks) + +--- + +## 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/0.6.0/components/toolBar_docs.md b/docs/0.6.0/components/toolBar_docs.md new file mode 100644 index 00000000..4b356e35 --- /dev/null +++ b/docs/0.6.0/components/toolBar_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: toolBar.md +--- diff --git a/docs/0.6.0/guidelines/spacings.md b/docs/0.6.0/guidelines/spacings.md new file mode 100644 index 00000000..4b30a252 --- /dev/null +++ b/docs/0.6.0/guidelines/spacings.md @@ -0,0 +1,68 @@ +--- +layout: detail +title: Spacings +--- +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Usage](#usage) + * [Apply spacing for magin](#apply-spacing-for-margin) + * [Apply spacing for padding](#apply-spacing-for-padding) + +--- + +## 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/0.6.0/guidelines/spacings_docs.md b/docs/0.6.0/guidelines/spacings_docs.md new file mode 100644 index 00000000..27a7c0c0 --- /dev/null +++ b/docs/0.6.0/guidelines/spacings_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: spacings.md +--- diff --git a/docs/0.6.0/guidelines/typography.md b/docs/0.6.0/guidelines/typography.md new file mode 100644 index 00000000..b407bdd3 --- /dev/null +++ b/docs/0.6.0/guidelines/typography.md @@ -0,0 +1,57 @@ +--- +layout: detail +title: Typography +--- +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Implementation](#implementation) + * [Apply font style on text](#apply-font-style-on-text) + * [Apply font style on view](#apply-font-style-on-view) + +--- + +## 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/0.6.0/guidelines/typography_docs.md b/docs/0.6.0/guidelines/typography_docs.md new file mode 100644 index 00000000..6b55d509 --- /dev/null +++ b/docs/0.6.0/guidelines/typography_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: typography.md +--- diff --git a/docs/0.6.0/home_content.md b/docs/0.6.0/home_content.md new file mode 100644 index 00000000..4f6ba37f --- /dev/null +++ b/docs/0.6.0/home_content.md @@ -0,0 +1,36 @@ +## 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: ^0.4.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'; +``` diff --git a/docs/0.6.0/index.md b/docs/0.6.0/index.md new file mode 100644 index 00000000..20776e6e --- /dev/null +++ b/docs/0.6.0/index.md @@ -0,0 +1,6 @@ +--- +layout: main +title: Getting started with Orange Design System for Flutter +--- + +{% include_relative home_content.md %} diff --git a/docs/0.6.0/index_content.md b/docs/0.6.0/index_content.md new file mode 100644 index 00000000..716ca9f9 --- /dev/null +++ b/docs/0.6.0/index_content.md @@ -0,0 +1,6 @@ +--- +layout: detail +title: Getting started with Orange Design System for Flutter +--- + +{% include_relative home_content.md %} diff --git a/docs/0.7.0/components/appBarsTop.md b/docs/0.7.0/components/appBarsTop.md new file mode 100644 index 00000000..9dbadbc5 --- /dev/null +++ b/docs/0.7.0/components/appBarsTop.md @@ -0,0 +1,104 @@ +--- +layout: detail +title: "App bars: top" +description: Top app bars display information and actions relating to the current screen. +--- + +
**On this page** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Regular top app bar](#regular-top-app-bar) + * [Flutter implementation](#flutter-implementation) + * [OdsTopAppBar API](#odstopappbar-api) + * [Large top app bar](#large-top-app-bar) + * [Flutter implementation](#flutter-implementation-1) + * [OdsLargeTopAppBar API](#odslargetopappbar-api) + +--- + +## 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 `topBar`. +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', + ), + ); + }, + ) +); +``` + +##### 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. +{:.table} + +### Large top app bar + +#### Flutter implementation + + +Add `OdsLargeTopAppBar` to your Scaffold `topBar`. +Here is an example of use: + +```dart +return OdsLargeTopAppBar( + title: "Large", + actions: IconButton(icon: const Icon(Icons.notifications), onPressed: () {}), + leading: BackButton(), + 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 +{:.table} diff --git a/docs/0.7.0/components/appBarsTop_docs.md b/docs/0.7.0/components/appBarsTop_docs.md new file mode 100644 index 00000000..c78e514c --- /dev/null +++ b/docs/0.7.0/components/appBarsTop_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: appBarsTop.md +--- diff --git a/docs/0.7.0/components/banners.md b/docs/0.7.0/components/banners.md new file mode 100644 index 00000000..80b7b446 --- /dev/null +++ b/docs/0.7.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) {}) +``` + + diff --git a/docs/0.7.0/components/banners_docs.md b/docs/0.7.0/components/banners_docs.md new file mode 100644 index 00000000..9211cff1 --- /dev/null +++ b/docs/0.7.0/components/banners_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: banners.md +--- diff --git a/docs/0.7.0/components/buttons.md b/docs/0.7.0/components/buttons.md new file mode 100644 index 00000000..b9766abb --- /dev/null +++ b/docs/0.7.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_ diff --git a/docs/0.7.0/components/buttons_docs.md b/docs/0.7.0/components/buttons_docs.md new file mode 100644 index 00000000..a626304a --- /dev/null +++ b/docs/0.7.0/components/buttons_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: buttons.md +--- diff --git a/docs/0.7.0/components/cards.md b/docs/0.7.0/components/cards.md new file mode 100644 index 00000000..4535932a --- /dev/null +++ b/docs/0.7.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_ diff --git a/docs/0.7.0/components/cards_docs.md b/docs/0.7.0/components/cards_docs.md new file mode 100644 index 00000000..9f4d12d7 --- /dev/null +++ b/docs/0.7.0/components/cards_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: cards.md +--- diff --git a/docs/0.7.0/components/checkboxes.md b/docs/0.7.0/components/checkboxes.md new file mode 100644 index 00000000..6f52e10f --- /dev/null +++ b/docs/0.7.0/components/checkboxes.md @@ -0,0 +1,60 @@ +--- +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** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Implementation](#implementation) + * [OdsCheckbox API](#odscheckbox-api) + +--- + +## 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 +return OdsCheckbox( + checked: true, + onCheckedChange: () {}, + enabled: true, + 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 +{:.table} diff --git a/docs/0.7.0/components/checkboxes_docs.md b/docs/0.7.0/components/checkboxes_docs.md new file mode 100644 index 00000000..89244539 --- /dev/null +++ b/docs/0.7.0/components/checkboxes_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: checkboxes.md +--- diff --git a/docs/0.7.0/components/chips.md b/docs/0.7.0/components/chips.md new file mode 100644 index 00000000..8b1f8c2e --- /dev/null +++ b/docs/0.7.0/components/chips.md @@ -0,0 +1,201 @@ +--- +layout: detail +title: Chips +description: Chips are compact elements that represent an input, attribute, or action. +--- + +
**On this page** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Input chip](#input-chip) + * [Flutter implementation](#flutter-implementation) + * [OdsInputChip API](#odsinputchip-api) + * [Choice chip](#choice-chip) + * [Flutter implementation](#flutter-implementation-1) + * [OdsChoiceChip API](#odschoicechip-api) + * [Filter chip](#filter-chip) + * [Flutter implementation](#jflutter-implementation-2) + * [OdsFilterChip API](#odsfilterchip-api) + * [Action chip](#action-chip) + * [Flutter implementation](#flutter-implementation-3) + * [OdsActionChip API](#odsactionchip-api) + +--- + +## 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", + onClick = { }, + leadingIcon = null, + leadingAvatar: CircleAvatar( + backgroundImage: NetworkImage( + OdsApplication.recipes[index].url, + ), + ), + ), // Set it to `null` for no avatar or provide a `leadingIcon` + enabled = true, + onCancel = { } +) +``` + +##### OdsInputChip API + +Parameter | Default value | Description +-- | -- | -- +`text: String` | | Text to be displayed into the chip +`onClick: (bool?)? Callback` | | Callback called on chip click +`enabled: Boolean` | `true` | Controls the enabled state of the chip. When `false`, this chip will not respond to user input. +`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 +`onCancel: (() -> Unit)?` | `null` | Callback called on chip cancel cross click. Pass `null` for no cancel cross. +{:.table} + +### 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 +return OdsChoiceChip( + text = "Choice text", + onClick = { }, + leadingAvatar = OdsChipLeadingAvatar( + image: NetworkImage("https://..."), + contentDescription: "" // Optional + ), // Set it to `null` for no avatar + selected = false, + enabled = 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 +{:.table} + + +### 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 +return OdsFilterChip( + text = "chip text", + onClick = { }, + leadingAvatar = OdsChipLeadingAvatar( + image: NetworkImage("https://..."), + contentDescription: "" // Optional + ), // Set it to `null` for no avatar + selected = false, + enabled = 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 +{:.table} + +Use the filter like exemple [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(colorScheme.secondary, BlendMode.srcIn)) // set it to `null` for no icon + enabled = true, // Optional +) +``` + +##### 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 +{:.table} diff --git a/docs/0.7.0/components/chips_docs.md b/docs/0.7.0/components/chips_docs.md new file mode 100644 index 00000000..cf9760b5 --- /dev/null +++ b/docs/0.7.0/components/chips_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: chips.md +--- diff --git a/docs/0.7.0/components/dialogs.md b/docs/0.7.0/components/dialogs.md new file mode 100644 index 00000000..81947af3 --- /dev/null +++ b/docs/0.7.0/components/dialogs.md @@ -0,0 +1,66 @@ +--- +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** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Alert dialog](#alert-dialog) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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** + +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 + +_Soon available_ diff --git a/docs/0.7.0/components/dialogs_docs.md b/docs/0.7.0/components/dialogs_docs.md new file mode 100644 index 00000000..253fa372 --- /dev/null +++ b/docs/0.7.0/components/dialogs_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: dialogs.md +--- diff --git a/docs/0.7.0/components/floatingActionButtons.md b/docs/0.7.0/components/floatingActionButtons.md new file mode 100644 index 00000000..9c8ed58f --- /dev/null +++ b/docs/0.7.0/components/floatingActionButtons.md @@ -0,0 +1,119 @@ +--- +layout: detail +title: Floating action buttons +description: A floating action button (FAB) represents the primary action of a screen. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Regular FAB](#regular-fab) + * [Small FAB](#small-fab) + * [Large FAB](#large-fab) + * [Extended FAB](#extended-fab) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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 +); +``` + +### 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 +); +``` + +### 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 +); +``` + +### 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 OdsSmallFloatingActionButton( + onClick: () {}, + text = "Add", + icon: const Icon(Icons.add), //Optional +); +``` + + +## Component specific tokens + +_Soon available_ diff --git a/docs/0.7.0/components/floatingActionButtons_docs.md b/docs/0.7.0/components/floatingActionButtons_docs.md new file mode 100644 index 00000000..ea8f4414 --- /dev/null +++ b/docs/0.7.0/components/floatingActionButtons_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: floatingActionButtons.md +--- diff --git a/docs/0.7.0/components/images/app_bar_top_overflow_menu_dark.png b/docs/0.7.0/components/images/app_bar_top_overflow_menu_dark.png new file mode 100644 index 00000000..60322543 Binary files /dev/null and b/docs/0.7.0/components/images/app_bar_top_overflow_menu_dark.png differ diff --git a/docs/0.7.0/components/images/app_bar_top_overflow_menu_light.png b/docs/0.7.0/components/images/app_bar_top_overflow_menu_light.png new file mode 100644 index 00000000..2e3bd905 Binary files /dev/null and b/docs/0.7.0/components/images/app_bar_top_overflow_menu_light.png differ diff --git a/docs/0.7.0/components/images/banner_dark.png b/docs/0.7.0/components/images/banner_dark.png new file mode 100644 index 00000000..60803f20 Binary files /dev/null and b/docs/0.7.0/components/images/banner_dark.png differ diff --git a/docs/0.7.0/components/images/banner_light.png b/docs/0.7.0/components/images/banner_light.png new file mode 100644 index 00000000..4d174146 Binary files /dev/null and b/docs/0.7.0/components/images/banner_light.png differ diff --git a/docs/0.7.0/components/images/button_contained_dark.png b/docs/0.7.0/components/images/button_contained_dark.png new file mode 100644 index 00000000..8cc9ee5f Binary files /dev/null and b/docs/0.7.0/components/images/button_contained_dark.png differ diff --git a/docs/0.7.0/components/images/button_contained_light.png b/docs/0.7.0/components/images/button_contained_light.png new file mode 100644 index 00000000..401db36d Binary files /dev/null and b/docs/0.7.0/components/images/button_contained_light.png differ diff --git a/docs/0.7.0/components/images/button_contained_negative_dark.png b/docs/0.7.0/components/images/button_contained_negative_dark.png new file mode 100644 index 00000000..13f22a29 Binary files /dev/null and b/docs/0.7.0/components/images/button_contained_negative_dark.png differ diff --git a/docs/0.7.0/components/images/button_contained_negative_light.png b/docs/0.7.0/components/images/button_contained_negative_light.png new file mode 100644 index 00000000..018b84cf Binary files /dev/null and b/docs/0.7.0/components/images/button_contained_negative_light.png differ diff --git a/docs/0.7.0/components/images/button_contained_positive_dark.png b/docs/0.7.0/components/images/button_contained_positive_dark.png new file mode 100644 index 00000000..b1527819 Binary files /dev/null and b/docs/0.7.0/components/images/button_contained_positive_dark.png differ diff --git a/docs/0.7.0/components/images/button_contained_positive_light.png b/docs/0.7.0/components/images/button_contained_positive_light.png new file mode 100644 index 00000000..906bf0b3 Binary files /dev/null and b/docs/0.7.0/components/images/button_contained_positive_light.png differ diff --git a/docs/0.7.0/components/images/button_icon_dark.png b/docs/0.7.0/components/images/button_icon_dark.png new file mode 100644 index 00000000..551ce30a Binary files /dev/null and b/docs/0.7.0/components/images/button_icon_dark.png differ diff --git a/docs/0.7.0/components/images/button_icon_light.png b/docs/0.7.0/components/images/button_icon_light.png new file mode 100644 index 00000000..b11c9dd5 Binary files /dev/null and b/docs/0.7.0/components/images/button_icon_light.png differ diff --git a/docs/0.7.0/components/images/button_icon_toggle_dark.png b/docs/0.7.0/components/images/button_icon_toggle_dark.png new file mode 100644 index 00000000..d2702c6e Binary files /dev/null and b/docs/0.7.0/components/images/button_icon_toggle_dark.png differ diff --git a/docs/0.7.0/components/images/button_icon_toggle_group_dark.png b/docs/0.7.0/components/images/button_icon_toggle_group_dark.png new file mode 100644 index 00000000..1f3fdc9a Binary files /dev/null and b/docs/0.7.0/components/images/button_icon_toggle_group_dark.png differ diff --git a/docs/0.7.0/components/images/button_icon_toggle_group_light.png b/docs/0.7.0/components/images/button_icon_toggle_group_light.png new file mode 100644 index 00000000..4f32291c Binary files /dev/null and b/docs/0.7.0/components/images/button_icon_toggle_group_light.png differ diff --git a/docs/0.7.0/components/images/button_icon_toggle_light.png b/docs/0.7.0/components/images/button_icon_toggle_light.png new file mode 100644 index 00000000..8256c395 Binary files /dev/null and b/docs/0.7.0/components/images/button_icon_toggle_light.png differ diff --git a/docs/0.7.0/components/images/button_outlined_dark.png b/docs/0.7.0/components/images/button_outlined_dark.png new file mode 100644 index 00000000..420ab1a4 Binary files /dev/null and b/docs/0.7.0/components/images/button_outlined_dark.png differ diff --git a/docs/0.7.0/components/images/button_outlined_light.png b/docs/0.7.0/components/images/button_outlined_light.png new file mode 100644 index 00000000..a7c56296 Binary files /dev/null and b/docs/0.7.0/components/images/button_outlined_light.png differ diff --git a/docs/0.7.0/components/images/button_text_dark.png b/docs/0.7.0/components/images/button_text_dark.png new file mode 100644 index 00000000..13ae0324 Binary files /dev/null and b/docs/0.7.0/components/images/button_text_dark.png differ diff --git a/docs/0.7.0/components/images/button_text_light.png b/docs/0.7.0/components/images/button_text_light.png new file mode 100644 index 00000000..f574d322 Binary files /dev/null and b/docs/0.7.0/components/images/button_text_light.png differ diff --git a/docs/0.7.0/components/images/button_text_toggle_group_dark.png b/docs/0.7.0/components/images/button_text_toggle_group_dark.png new file mode 100644 index 00000000..b8aab9b3 Binary files /dev/null and b/docs/0.7.0/components/images/button_text_toggle_group_dark.png differ diff --git a/docs/0.7.0/components/images/button_text_toggle_group_light.png b/docs/0.7.0/components/images/button_text_toggle_group_light.png new file mode 100644 index 00000000..7c594ce4 Binary files /dev/null and b/docs/0.7.0/components/images/button_text_toggle_group_light.png differ diff --git a/docs/0.7.0/components/images/button_toggle_dark.png b/docs/0.7.0/components/images/button_toggle_dark.png new file mode 100644 index 00000000..20faac6f Binary files /dev/null and b/docs/0.7.0/components/images/button_toggle_dark.png differ diff --git a/docs/0.7.0/components/images/button_toggle_light.png b/docs/0.7.0/components/images/button_toggle_light.png new file mode 100644 index 00000000..70554b9a Binary files /dev/null and b/docs/0.7.0/components/images/button_toggle_light.png differ diff --git a/docs/0.7.0/components/images/card_horizontal_dark.png b/docs/0.7.0/components/images/card_horizontal_dark.png new file mode 100644 index 00000000..ba5324c9 Binary files /dev/null and b/docs/0.7.0/components/images/card_horizontal_dark.png differ diff --git a/docs/0.7.0/components/images/card_horizontal_light.png b/docs/0.7.0/components/images/card_horizontal_light.png new file mode 100644 index 00000000..cc4c5928 Binary files /dev/null and b/docs/0.7.0/components/images/card_horizontal_light.png differ diff --git a/docs/0.7.0/components/images/card_small_dark.png b/docs/0.7.0/components/images/card_small_dark.png new file mode 100644 index 00000000..9a4097c8 Binary files /dev/null and b/docs/0.7.0/components/images/card_small_dark.png differ diff --git a/docs/0.7.0/components/images/card_small_light.png b/docs/0.7.0/components/images/card_small_light.png new file mode 100644 index 00000000..4b942076 Binary files /dev/null and b/docs/0.7.0/components/images/card_small_light.png differ diff --git a/docs/0.7.0/components/images/card_vertical_header_first_dark.png b/docs/0.7.0/components/images/card_vertical_header_first_dark.png new file mode 100644 index 00000000..1626639c Binary files /dev/null and b/docs/0.7.0/components/images/card_vertical_header_first_dark.png differ diff --git a/docs/0.7.0/components/images/card_vertical_header_first_light.png b/docs/0.7.0/components/images/card_vertical_header_first_light.png new file mode 100644 index 00000000..31e9d39c Binary files /dev/null and b/docs/0.7.0/components/images/card_vertical_header_first_light.png differ diff --git a/docs/0.7.0/components/images/card_vertical_image_first_dark.png b/docs/0.7.0/components/images/card_vertical_image_first_dark.png new file mode 100644 index 00000000..090ce526 Binary files /dev/null and b/docs/0.7.0/components/images/card_vertical_image_first_dark.png differ diff --git a/docs/0.7.0/components/images/card_vertical_image_first_light.png b/docs/0.7.0/components/images/card_vertical_image_first_light.png new file mode 100644 index 00000000..9dd3ed2d Binary files /dev/null and b/docs/0.7.0/components/images/card_vertical_image_first_light.png differ diff --git a/docs/0.7.0/components/images/checkbox_dark.png b/docs/0.7.0/components/images/checkbox_dark.png new file mode 100644 index 00000000..d37bc0a5 Binary files /dev/null and b/docs/0.7.0/components/images/checkbox_dark.png differ diff --git a/docs/0.7.0/components/images/checkbox_light.png b/docs/0.7.0/components/images/checkbox_light.png new file mode 100644 index 00000000..002bc777 Binary files /dev/null and b/docs/0.7.0/components/images/checkbox_light.png differ diff --git a/docs/0.7.0/components/images/checkboxe_list_dark.png b/docs/0.7.0/components/images/checkboxe_list_dark.png new file mode 100644 index 00000000..8b325356 Binary files /dev/null and b/docs/0.7.0/components/images/checkboxe_list_dark.png differ diff --git a/docs/0.7.0/components/images/checkboxe_list_light.png b/docs/0.7.0/components/images/checkboxe_list_light.png new file mode 100644 index 00000000..9c10551a Binary files /dev/null and b/docs/0.7.0/components/images/checkboxe_list_light.png differ diff --git a/docs/0.7.0/components/images/chips_action_dark.png b/docs/0.7.0/components/images/chips_action_dark.png new file mode 100644 index 00000000..d9c95f5e Binary files /dev/null and b/docs/0.7.0/components/images/chips_action_dark.png differ diff --git a/docs/0.7.0/components/images/chips_action_light.png b/docs/0.7.0/components/images/chips_action_light.png new file mode 100644 index 00000000..086a5bd3 Binary files /dev/null and b/docs/0.7.0/components/images/chips_action_light.png differ diff --git a/docs/0.7.0/components/images/chips_choice_dark.png b/docs/0.7.0/components/images/chips_choice_dark.png new file mode 100644 index 00000000..cb6ead60 Binary files /dev/null and b/docs/0.7.0/components/images/chips_choice_dark.png differ diff --git a/docs/0.7.0/components/images/chips_choice_light.png b/docs/0.7.0/components/images/chips_choice_light.png new file mode 100644 index 00000000..1e43a0b6 Binary files /dev/null and b/docs/0.7.0/components/images/chips_choice_light.png differ diff --git a/docs/0.7.0/components/images/chips_filter_dark.png b/docs/0.7.0/components/images/chips_filter_dark.png new file mode 100644 index 00000000..71fda02d Binary files /dev/null and b/docs/0.7.0/components/images/chips_filter_dark.png differ diff --git a/docs/0.7.0/components/images/chips_filter_light.png b/docs/0.7.0/components/images/chips_filter_light.png new file mode 100644 index 00000000..078b40eb Binary files /dev/null and b/docs/0.7.0/components/images/chips_filter_light.png differ diff --git a/docs/0.7.0/components/images/chips_input_dark.png b/docs/0.7.0/components/images/chips_input_dark.png new file mode 100644 index 00000000..7732e080 Binary files /dev/null and b/docs/0.7.0/components/images/chips_input_dark.png differ diff --git a/docs/0.7.0/components/images/chips_input_light.png b/docs/0.7.0/components/images/chips_input_light.png new file mode 100644 index 00000000..6cbf7e6c Binary files /dev/null and b/docs/0.7.0/components/images/chips_input_light.png differ diff --git a/docs/0.7.0/components/images/dialog_alert_dark.png b/docs/0.7.0/components/images/dialog_alert_dark.png new file mode 100644 index 00000000..c9dcbac4 Binary files /dev/null and b/docs/0.7.0/components/images/dialog_alert_dark.png differ diff --git a/docs/0.7.0/components/images/dialog_alert_light.png b/docs/0.7.0/components/images/dialog_alert_light.png new file mode 100644 index 00000000..9ad32961 Binary files /dev/null and b/docs/0.7.0/components/images/dialog_alert_light.png differ diff --git a/docs/0.7.0/components/images/fab_dark.png b/docs/0.7.0/components/images/fab_dark.png new file mode 100644 index 00000000..897a5bb5 Binary files /dev/null and b/docs/0.7.0/components/images/fab_dark.png differ diff --git a/docs/0.7.0/components/images/fab_extended_dark.png b/docs/0.7.0/components/images/fab_extended_dark.png new file mode 100644 index 00000000..9b0e85d4 Binary files /dev/null and b/docs/0.7.0/components/images/fab_extended_dark.png differ diff --git a/docs/0.7.0/components/images/fab_extended_light.png b/docs/0.7.0/components/images/fab_extended_light.png new file mode 100644 index 00000000..4c9d7f13 Binary files /dev/null and b/docs/0.7.0/components/images/fab_extended_light.png differ diff --git a/docs/0.7.0/components/images/fab_large_dark.png b/docs/0.7.0/components/images/fab_large_dark.png new file mode 100644 index 00000000..28bfe69b Binary files /dev/null and b/docs/0.7.0/components/images/fab_large_dark.png differ diff --git a/docs/0.7.0/components/images/fab_large_light.png b/docs/0.7.0/components/images/fab_large_light.png new file mode 100644 index 00000000..92e931a2 Binary files /dev/null and b/docs/0.7.0/components/images/fab_large_light.png differ diff --git a/docs/0.7.0/components/images/fab_light.png b/docs/0.7.0/components/images/fab_light.png new file mode 100644 index 00000000..b9e8f14d Binary files /dev/null and b/docs/0.7.0/components/images/fab_light.png differ diff --git a/docs/0.7.0/components/images/fab_mini_dark.png b/docs/0.7.0/components/images/fab_mini_dark.png new file mode 100644 index 00000000..76ce617c Binary files /dev/null and b/docs/0.7.0/components/images/fab_mini_dark.png differ diff --git a/docs/0.7.0/components/images/fab_mini_light.png b/docs/0.7.0/components/images/fab_mini_light.png new file mode 100644 index 00000000..20f73255 Binary files /dev/null and b/docs/0.7.0/components/images/fab_mini_light.png differ diff --git a/docs/0.7.0/components/images/lists_radio_button_dark.png b/docs/0.7.0/components/images/lists_radio_button_dark.png new file mode 100644 index 00000000..e0ce8e76 Binary files /dev/null and b/docs/0.7.0/components/images/lists_radio_button_dark.png differ diff --git a/docs/0.7.0/components/images/lists_radio_button_light.png b/docs/0.7.0/components/images/lists_radio_button_light.png new file mode 100644 index 00000000..a7cd5e5b Binary files /dev/null and b/docs/0.7.0/components/images/lists_radio_button_light.png differ diff --git a/docs/0.7.0/components/images/lists_single_line_dark.png b/docs/0.7.0/components/images/lists_single_line_dark.png new file mode 100644 index 00000000..d46eca2d Binary files /dev/null and b/docs/0.7.0/components/images/lists_single_line_dark.png differ diff --git a/docs/0.7.0/components/images/lists_single_line_light.png b/docs/0.7.0/components/images/lists_single_line_light.png new file mode 100644 index 00000000..3bda5190 Binary files /dev/null and b/docs/0.7.0/components/images/lists_single_line_light.png differ diff --git a/docs/0.7.0/components/images/lists_single_line_wide_image_dark.png b/docs/0.7.0/components/images/lists_single_line_wide_image_dark.png new file mode 100644 index 00000000..c00f2192 Binary files /dev/null and b/docs/0.7.0/components/images/lists_single_line_wide_image_dark.png differ diff --git a/docs/0.7.0/components/images/lists_single_line_wide_image_light.png b/docs/0.7.0/components/images/lists_single_line_wide_image_light.png new file mode 100644 index 00000000..d839b5cc Binary files /dev/null and b/docs/0.7.0/components/images/lists_single_line_wide_image_light.png differ diff --git a/docs/0.7.0/components/images/lists_switch_dark.png b/docs/0.7.0/components/images/lists_switch_dark.png new file mode 100644 index 00000000..4e9ff230 Binary files /dev/null and b/docs/0.7.0/components/images/lists_switch_dark.png differ diff --git a/docs/0.7.0/components/images/lists_switch_light.png b/docs/0.7.0/components/images/lists_switch_light.png new file mode 100644 index 00000000..0f9adf47 Binary files /dev/null and b/docs/0.7.0/components/images/lists_switch_light.png differ diff --git a/docs/0.7.0/components/images/lists_three_line_dark.png b/docs/0.7.0/components/images/lists_three_line_dark.png new file mode 100644 index 00000000..15e350f3 Binary files /dev/null and b/docs/0.7.0/components/images/lists_three_line_dark.png differ diff --git a/docs/0.7.0/components/images/lists_three_line_light.png b/docs/0.7.0/components/images/lists_three_line_light.png new file mode 100644 index 00000000..f3dabd4e Binary files /dev/null and b/docs/0.7.0/components/images/lists_three_line_light.png differ diff --git a/docs/0.7.0/components/images/lists_three_line_wide_image_dark.png b/docs/0.7.0/components/images/lists_three_line_wide_image_dark.png new file mode 100644 index 00000000..2d44de0c Binary files /dev/null and b/docs/0.7.0/components/images/lists_three_line_wide_image_dark.png differ diff --git a/docs/0.7.0/components/images/lists_three_line_wide_image_light.png b/docs/0.7.0/components/images/lists_three_line_wide_image_light.png new file mode 100644 index 00000000..b6eaa436 Binary files /dev/null and b/docs/0.7.0/components/images/lists_three_line_wide_image_light.png differ diff --git a/docs/0.7.0/components/images/lists_two_line_dark.png b/docs/0.7.0/components/images/lists_two_line_dark.png new file mode 100644 index 00000000..7e130d9f Binary files /dev/null and b/docs/0.7.0/components/images/lists_two_line_dark.png differ diff --git a/docs/0.7.0/components/images/lists_two_line_light.png b/docs/0.7.0/components/images/lists_two_line_light.png new file mode 100644 index 00000000..ea4e52cb Binary files /dev/null and b/docs/0.7.0/components/images/lists_two_line_light.png differ diff --git a/docs/0.7.0/components/images/lists_two_line_wide_image_dark.png b/docs/0.7.0/components/images/lists_two_line_wide_image_dark.png new file mode 100644 index 00000000..0ea681e8 Binary files /dev/null and b/docs/0.7.0/components/images/lists_two_line_wide_image_dark.png differ diff --git a/docs/0.7.0/components/images/lists_two_line_wide_image_light.png b/docs/0.7.0/components/images/lists_two_line_wide_image_light.png new file mode 100644 index 00000000..0c214c27 Binary files /dev/null and b/docs/0.7.0/components/images/lists_two_line_wide_image_light.png differ diff --git a/docs/0.7.0/components/images/menu_dropdown_dark.png b/docs/0.7.0/components/images/menu_dropdown_dark.png new file mode 100644 index 00000000..b47bccfe Binary files /dev/null and b/docs/0.7.0/components/images/menu_dropdown_dark.png differ diff --git a/docs/0.7.0/components/images/menu_dropdown_light.png b/docs/0.7.0/components/images/menu_dropdown_light.png new file mode 100644 index 00000000..5af3fb65 Binary files /dev/null and b/docs/0.7.0/components/images/menu_dropdown_light.png differ diff --git a/docs/0.7.0/components/images/menu_exposed_dropdown_dark.png b/docs/0.7.0/components/images/menu_exposed_dropdown_dark.png new file mode 100644 index 00000000..029fb349 Binary files /dev/null and b/docs/0.7.0/components/images/menu_exposed_dropdown_dark.png differ diff --git a/docs/0.7.0/components/images/menu_exposed_dropdown_light.png b/docs/0.7.0/components/images/menu_exposed_dropdown_light.png new file mode 100644 index 00000000..202aa7db Binary files /dev/null and b/docs/0.7.0/components/images/menu_exposed_dropdown_light.png differ diff --git a/docs/0.7.0/components/images/navigation_bar_dark.png b/docs/0.7.0/components/images/navigation_bar_dark.png new file mode 100644 index 00000000..aff18611 Binary files /dev/null and b/docs/0.7.0/components/images/navigation_bar_dark.png differ diff --git a/docs/0.7.0/components/images/navigation_bar_light.png b/docs/0.7.0/components/images/navigation_bar_light.png new file mode 100644 index 00000000..a5d9e288 Binary files /dev/null and b/docs/0.7.0/components/images/navigation_bar_light.png differ diff --git a/docs/0.7.0/components/images/progress_circular_dark.png b/docs/0.7.0/components/images/progress_circular_dark.png new file mode 100644 index 00000000..69b07e8c Binary files /dev/null and b/docs/0.7.0/components/images/progress_circular_dark.png differ diff --git a/docs/0.7.0/components/images/progress_circular_light.png b/docs/0.7.0/components/images/progress_circular_light.png new file mode 100644 index 00000000..b183a1d7 Binary files /dev/null and b/docs/0.7.0/components/images/progress_circular_light.png differ diff --git a/docs/0.7.0/components/images/progress_linear_dark.png b/docs/0.7.0/components/images/progress_linear_dark.png new file mode 100644 index 00000000..e4e3e843 Binary files /dev/null and b/docs/0.7.0/components/images/progress_linear_dark.png differ diff --git a/docs/0.7.0/components/images/progress_linear_light.png b/docs/0.7.0/components/images/progress_linear_light.png new file mode 100644 index 00000000..f56e5773 Binary files /dev/null and b/docs/0.7.0/components/images/progress_linear_light.png differ diff --git a/docs/0.7.0/components/images/radio_button_dark.png b/docs/0.7.0/components/images/radio_button_dark.png new file mode 100644 index 00000000..8dfd93d4 Binary files /dev/null and b/docs/0.7.0/components/images/radio_button_dark.png differ diff --git a/docs/0.7.0/components/images/radio_button_light.png b/docs/0.7.0/components/images/radio_button_light.png new file mode 100644 index 00000000..5cc7e464 Binary files /dev/null and b/docs/0.7.0/components/images/radio_button_light.png differ diff --git a/docs/0.7.0/components/images/sheetbottom_dark.png b/docs/0.7.0/components/images/sheetbottom_dark.png new file mode 100644 index 00000000..92919efc Binary files /dev/null and b/docs/0.7.0/components/images/sheetbottom_dark.png differ diff --git a/docs/0.7.0/components/images/sheetbottom_light.png b/docs/0.7.0/components/images/sheetbottom_light.png new file mode 100644 index 00000000..add8e3f0 Binary files /dev/null and b/docs/0.7.0/components/images/sheetbottom_light.png differ diff --git a/docs/0.7.0/components/images/slider_continuous_dark.png b/docs/0.7.0/components/images/slider_continuous_dark.png new file mode 100644 index 00000000..9b745d7f Binary files /dev/null and b/docs/0.7.0/components/images/slider_continuous_dark.png differ diff --git a/docs/0.7.0/components/images/slider_continuous_light.png b/docs/0.7.0/components/images/slider_continuous_light.png new file mode 100644 index 00000000..42ad208b Binary files /dev/null and b/docs/0.7.0/components/images/slider_continuous_light.png differ diff --git a/docs/0.7.0/components/images/slider_continuous_lockups_dark.png b/docs/0.7.0/components/images/slider_continuous_lockups_dark.png new file mode 100644 index 00000000..cd15d6e2 Binary files /dev/null and b/docs/0.7.0/components/images/slider_continuous_lockups_dark.png differ diff --git a/docs/0.7.0/components/images/slider_continuous_lockups_light.png b/docs/0.7.0/components/images/slider_continuous_lockups_light.png new file mode 100644 index 00000000..69f7444f Binary files /dev/null and b/docs/0.7.0/components/images/slider_continuous_lockups_light.png differ diff --git a/docs/0.7.0/components/images/slider_continuous_lockups_with_icon_dark.png b/docs/0.7.0/components/images/slider_continuous_lockups_with_icon_dark.png new file mode 100644 index 00000000..32764754 Binary files /dev/null and b/docs/0.7.0/components/images/slider_continuous_lockups_with_icon_dark.png differ diff --git a/docs/0.7.0/components/images/slider_continuous_lockups_with_icon_light.png b/docs/0.7.0/components/images/slider_continuous_lockups_with_icon_light.png new file mode 100644 index 00000000..39be0469 Binary files /dev/null and b/docs/0.7.0/components/images/slider_continuous_lockups_with_icon_light.png differ diff --git a/docs/0.7.0/components/images/slider_continuous_with_icon_dark.png b/docs/0.7.0/components/images/slider_continuous_with_icon_dark.png new file mode 100644 index 00000000..0d3b71f3 Binary files /dev/null and b/docs/0.7.0/components/images/slider_continuous_with_icon_dark.png differ diff --git a/docs/0.7.0/components/images/slider_continuous_with_icon_light.png b/docs/0.7.0/components/images/slider_continuous_with_icon_light.png new file mode 100644 index 00000000..4e81e7cd Binary files /dev/null and b/docs/0.7.0/components/images/slider_continuous_with_icon_light.png differ diff --git a/docs/0.7.0/components/images/slider_discrete_dark.png b/docs/0.7.0/components/images/slider_discrete_dark.png new file mode 100644 index 00000000..35abccc5 Binary files /dev/null and b/docs/0.7.0/components/images/slider_discrete_dark.png differ diff --git a/docs/0.7.0/components/images/slider_discrete_light.png b/docs/0.7.0/components/images/slider_discrete_light.png new file mode 100644 index 00000000..4f3d5083 Binary files /dev/null and b/docs/0.7.0/components/images/slider_discrete_light.png differ diff --git a/docs/0.7.0/components/images/slider_discrete_lockups_dark.png b/docs/0.7.0/components/images/slider_discrete_lockups_dark.png new file mode 100644 index 00000000..97a6da19 Binary files /dev/null and b/docs/0.7.0/components/images/slider_discrete_lockups_dark.png differ diff --git a/docs/0.7.0/components/images/slider_discrete_lockups_light.png b/docs/0.7.0/components/images/slider_discrete_lockups_light.png new file mode 100644 index 00000000..116273c3 Binary files /dev/null and b/docs/0.7.0/components/images/slider_discrete_lockups_light.png differ diff --git a/docs/0.7.0/components/images/slider_discrete_lockups_with_icon_dark.png b/docs/0.7.0/components/images/slider_discrete_lockups_with_icon_dark.png new file mode 100644 index 00000000..978dbfcb Binary files /dev/null and b/docs/0.7.0/components/images/slider_discrete_lockups_with_icon_dark.png differ diff --git a/docs/0.7.0/components/images/slider_discrete_lockups_with_icon_light.png b/docs/0.7.0/components/images/slider_discrete_lockups_with_icon_light.png new file mode 100644 index 00000000..640cfd2d Binary files /dev/null and b/docs/0.7.0/components/images/slider_discrete_lockups_with_icon_light.png differ diff --git a/docs/0.7.0/components/images/slider_discrete_with_icon_dark.png b/docs/0.7.0/components/images/slider_discrete_with_icon_dark.png new file mode 100644 index 00000000..cd3fa414 Binary files /dev/null and b/docs/0.7.0/components/images/slider_discrete_with_icon_dark.png differ diff --git a/docs/0.7.0/components/images/slider_discrete_with_icon_light.png b/docs/0.7.0/components/images/slider_discrete_with_icon_light.png new file mode 100644 index 00000000..a18b4e09 Binary files /dev/null and b/docs/0.7.0/components/images/slider_discrete_with_icon_light.png differ diff --git a/docs/0.7.0/components/images/snackbar_longer_action_dark.png b/docs/0.7.0/components/images/snackbar_longer_action_dark.png new file mode 100644 index 00000000..991076a0 Binary files /dev/null and b/docs/0.7.0/components/images/snackbar_longer_action_dark.png differ diff --git a/docs/0.7.0/components/images/snackbar_longer_action_light.png b/docs/0.7.0/components/images/snackbar_longer_action_light.png new file mode 100644 index 00000000..3df322d0 Binary files /dev/null and b/docs/0.7.0/components/images/snackbar_longer_action_light.png differ diff --git a/docs/0.7.0/components/images/snackbar_single_dark.png b/docs/0.7.0/components/images/snackbar_single_dark.png new file mode 100644 index 00000000..50b52d14 Binary files /dev/null and b/docs/0.7.0/components/images/snackbar_single_dark.png differ diff --git a/docs/0.7.0/components/images/snackbar_single_light.png b/docs/0.7.0/components/images/snackbar_single_light.png new file mode 100644 index 00000000..ec936888 Binary files /dev/null and b/docs/0.7.0/components/images/snackbar_single_light.png differ diff --git a/docs/0.7.0/components/images/snackbar_single_with_action_dark.png b/docs/0.7.0/components/images/snackbar_single_with_action_dark.png new file mode 100644 index 00000000..6966cfb0 Binary files /dev/null and b/docs/0.7.0/components/images/snackbar_single_with_action_dark.png differ diff --git a/docs/0.7.0/components/images/snackbar_single_with_action_light.png b/docs/0.7.0/components/images/snackbar_single_with_action_light.png new file mode 100644 index 00000000..ca8d4c8c Binary files /dev/null and b/docs/0.7.0/components/images/snackbar_single_with_action_light.png differ diff --git a/docs/0.7.0/components/images/snackbar_two_lines_dark.png b/docs/0.7.0/components/images/snackbar_two_lines_dark.png new file mode 100644 index 00000000..3b7b0035 Binary files /dev/null and b/docs/0.7.0/components/images/snackbar_two_lines_dark.png differ diff --git a/docs/0.7.0/components/images/snackbar_two_lines_light.png b/docs/0.7.0/components/images/snackbar_two_lines_light.png new file mode 100644 index 00000000..fcfa013e Binary files /dev/null and b/docs/0.7.0/components/images/snackbar_two_lines_light.png differ diff --git a/docs/0.7.0/components/images/switch_dark.png b/docs/0.7.0/components/images/switch_dark.png new file mode 100644 index 00000000..9d51d97f Binary files /dev/null and b/docs/0.7.0/components/images/switch_dark.png differ diff --git a/docs/0.7.0/components/images/switch_light.png b/docs/0.7.0/components/images/switch_light.png new file mode 100644 index 00000000..73e4e02a Binary files /dev/null and b/docs/0.7.0/components/images/switch_light.png differ diff --git a/docs/0.7.0/components/images/tabs_fixed_dark.png b/docs/0.7.0/components/images/tabs_fixed_dark.png new file mode 100644 index 00000000..1c529c76 Binary files /dev/null and b/docs/0.7.0/components/images/tabs_fixed_dark.png differ diff --git a/docs/0.7.0/components/images/tabs_fixed_light.png b/docs/0.7.0/components/images/tabs_fixed_light.png new file mode 100644 index 00000000..8ceda363 Binary files /dev/null and b/docs/0.7.0/components/images/tabs_fixed_light.png differ diff --git a/docs/0.7.0/components/images/tabs_scrollable_dark.png b/docs/0.7.0/components/images/tabs_scrollable_dark.png new file mode 100644 index 00000000..e99f8912 Binary files /dev/null and b/docs/0.7.0/components/images/tabs_scrollable_dark.png differ diff --git a/docs/0.7.0/components/images/tabs_scrollable_light.png b/docs/0.7.0/components/images/tabs_scrollable_light.png new file mode 100644 index 00000000..c6496d8d Binary files /dev/null and b/docs/0.7.0/components/images/tabs_scrollable_light.png differ diff --git a/docs/0.7.0/components/images/textfield_character_counter_dark.png b/docs/0.7.0/components/images/textfield_character_counter_dark.png new file mode 100644 index 00000000..9b52ae51 Binary files /dev/null and b/docs/0.7.0/components/images/textfield_character_counter_dark.png differ diff --git a/docs/0.7.0/components/images/textfield_character_counter_light.png b/docs/0.7.0/components/images/textfield_character_counter_light.png new file mode 100644 index 00000000..482d4c20 Binary files /dev/null and b/docs/0.7.0/components/images/textfield_character_counter_light.png differ diff --git a/docs/0.7.0/components/images/textfield_filled_dark.png b/docs/0.7.0/components/images/textfield_filled_dark.png new file mode 100644 index 00000000..38424f0f Binary files /dev/null and b/docs/0.7.0/components/images/textfield_filled_dark.png differ diff --git a/docs/0.7.0/components/images/textfield_filled_light.png b/docs/0.7.0/components/images/textfield_filled_light.png new file mode 100644 index 00000000..881386b2 Binary files /dev/null and b/docs/0.7.0/components/images/textfield_filled_light.png differ diff --git a/docs/0.7.0/components/images/textfield_filled_password_dark.png b/docs/0.7.0/components/images/textfield_filled_password_dark.png new file mode 100644 index 00000000..aaffb22f Binary files /dev/null and b/docs/0.7.0/components/images/textfield_filled_password_dark.png differ diff --git a/docs/0.7.0/components/images/textfield_filled_password_light.png b/docs/0.7.0/components/images/textfield_filled_password_light.png new file mode 100644 index 00000000..8e9b23d4 Binary files /dev/null and b/docs/0.7.0/components/images/textfield_filled_password_light.png differ diff --git a/docs/0.7.0/components/images/textfield_outlined_dark.png b/docs/0.7.0/components/images/textfield_outlined_dark.png new file mode 100644 index 00000000..11956a2f Binary files /dev/null and b/docs/0.7.0/components/images/textfield_outlined_dark.png differ diff --git a/docs/0.7.0/components/images/textfield_outlined_light.png b/docs/0.7.0/components/images/textfield_outlined_light.png new file mode 100644 index 00000000..66be0c8c Binary files /dev/null and b/docs/0.7.0/components/images/textfield_outlined_light.png differ diff --git a/docs/0.7.0/components/images/textfield_outlined_password_dark.png b/docs/0.7.0/components/images/textfield_outlined_password_dark.png new file mode 100644 index 00000000..9a0b29cc Binary files /dev/null and b/docs/0.7.0/components/images/textfield_outlined_password_dark.png differ diff --git a/docs/0.7.0/components/images/textfield_outlined_password_light.png b/docs/0.7.0/components/images/textfield_outlined_password_light.png new file mode 100644 index 00000000..94e761a7 Binary files /dev/null and b/docs/0.7.0/components/images/textfield_outlined_password_light.png differ diff --git a/docs/0.7.0/components/listsItem.md b/docs/0.7.0/components/listsItem.md new file mode 100644 index 00000000..6bca63ef --- /dev/null +++ b/docs/0.7.0/components/listsItem.md @@ -0,0 +1,133 @@ +--- +layout: detail +title: List items +description: Lists are continuous, vertical indexes of text or images. +--- + +
**On this page** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Checkbox list](#checkbox-list) + * [Flutter implementation](#flutter-implementation) + * [OdsListItem API](#odslistitem-api) + * [Switch list](#switch-list) + * [Flutter implementation](#flutter-implementation-1) + * [OdsListSwitch API](#odslistswitch-api) + * [RadioButtons list](#radiobuttons-list) + * [Flutter implementation](#flutter-implementation-2) + * [OdsListRadioButton API](#odslistradiobutton-api) + +--- + +## 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 +{:.table} + +### 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. +{:.table} + +### 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. +{:.table} diff --git a/docs/0.7.0/components/listsItem_docs.md b/docs/0.7.0/components/listsItem_docs.md new file mode 100644 index 00000000..53766ab0 --- /dev/null +++ b/docs/0.7.0/components/listsItem_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: listsItem.md +--- diff --git a/docs/0.7.0/components/menus.md b/docs/0.7.0/components/menus.md new file mode 100644 index 00000000..b0612a9b --- /dev/null +++ b/docs/0.7.0/components/menus.md @@ -0,0 +1,106 @@ +--- +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** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Dropdown menu](#dropdown-menu) + * [Flutter implementation](#flutter-implementation) + * [OdsDropdownMenu API](#odsdropdownmenu-api) + * [Exposed dropdown menu](#exposed-dropdown-menu) + * [Flutter implementation](#flutter-implementation-1) + * [OdsExposedDropdownMenu API](#odsexposeddropdownmenu-api) + +--- + +## 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( + value: "Summer Salad", + text: "Summer Salad", + enabled: false, //Optional by default true + icon: const Icon(Icons.coffee) // Optional + ), + ], + selectedItem: (String value) { + print('$value'); + }, +); +``` + +##### OdsDropdownMenu API + +Parameter | Default value | Description +-- | -- | -- +`items: List>` | | Items displayed into the dropdown menu +{:.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: false, // 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. +{:.table} diff --git a/docs/0.7.0/components/menus_docs.md b/docs/0.7.0/components/menus_docs.md new file mode 100644 index 00000000..3ef64ff5 --- /dev/null +++ b/docs/0.7.0/components/menus_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: menus.md +--- diff --git a/docs/0.7.0/components/navigationBar.md b/docs/0.7.0/components/navigationBar.md new file mode 100644 index 00000000..7694a568 --- /dev/null +++ b/docs/0.7.0/components/navigationBar.md @@ -0,0 +1,87 @@ +--- +layout: detail +title: Bars - navigation +description: Navigation bar with Orange branding +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Implementation](#implementation) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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 + +_Soon available_ diff --git a/docs/0.7.0/components/navigationBar_docs.md b/docs/0.7.0/components/navigationBar_docs.md new file mode 100644 index 00000000..d53217fe --- /dev/null +++ b/docs/0.7.0/components/navigationBar_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: navigationBar.md +--- diff --git a/docs/0.7.0/components/progressIndicator.md b/docs/0.7.0/components/progressIndicator.md new file mode 100644 index 00000000..1995de64 --- /dev/null +++ b/docs/0.7.0/components/progressIndicator.md @@ -0,0 +1,113 @@ +--- +layout: detail +title: Progress indicators +description: Progress indicators express an unspecified wait time or display the length of a process. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Progress bar](#progress-bar) + * [Activity indicator](#activity-indicator) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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/0.7.0/components/progressIndicator_docs.md b/docs/0.7.0/components/progressIndicator_docs.md new file mode 100644 index 00000000..6cc25593 --- /dev/null +++ b/docs/0.7.0/components/progressIndicator_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: progressIndicator.md +--- diff --git a/docs/0.7.0/components/radioButtons.md b/docs/0.7.0/components/radioButtons.md new file mode 100644 index 00000000..e6d5e889 --- /dev/null +++ b/docs/0.7.0/components/radioButtons.md @@ -0,0 +1,65 @@ +--- +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** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Implementation](#implementation) + * [Flutter code](#flutter-code) + * [OdsRadioButton API](#odsradiobutton-api) + +--- + +## 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, + onChanged: (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. +{:.table} diff --git a/docs/0.7.0/components/radioButtons_docs.md b/docs/0.7.0/components/radioButtons_docs.md new file mode 100644 index 00000000..dfc73183 --- /dev/null +++ b/docs/0.7.0/components/radioButtons_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: radioButtons.md +--- diff --git a/docs/0.7.0/components/sheets_bottom.md b/docs/0.7.0/components/sheets_bottom.md new file mode 100644 index 00000000..ab8de6a4 --- /dev/null +++ b/docs/0.7.0/components/sheets_bottom.md @@ -0,0 +1,55 @@ +--- +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** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Implementation](#implementation) + * [Flutter](#flutter) + * [OdsSheetsBottom API](#odsheetbottom-api-) + +--- + +## 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 +{:.table} diff --git a/docs/0.7.0/components/sheets_bottom_docs.md b/docs/0.7.0/components/sheets_bottom_docs.md new file mode 100644 index 00000000..2945723a --- /dev/null +++ b/docs/0.7.0/components/sheets_bottom_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: sheets_bottom.md +--- diff --git a/docs/0.7.0/components/slider.md b/docs/0.7.0/components/slider.md new file mode 100644 index 00000000..89a79eb7 --- /dev/null +++ b/docs/0.7.0/components/slider.md @@ -0,0 +1,129 @@ +--- +layout: detail +title: Sliders +description: Sliders allow users to make selections from a range of values. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Continuous slider](#continuous-slider) + * [Continuous lockups slider](#continuous-lockups-slider) + * [Discrete slider](#discrete-slider) + * [Discrete lockups slider](#discrete-lockups-slider) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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/0.7.0/components/slider_docs.md b/docs/0.7.0/components/slider_docs.md new file mode 100644 index 00000000..16b55c4f --- /dev/null +++ b/docs/0.7.0/components/slider_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: slider.md +--- diff --git a/docs/0.7.0/components/snackbars.md b/docs/0.7.0/components/snackbars.md new file mode 100644 index 00000000..57a1f46f --- /dev/null +++ b/docs/0.7.0/components/snackbars.md @@ -0,0 +1,97 @@ +--- +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** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Implementation](#implementation) + * [Flutter code](#flutter-code) + * [OdsSnackbar API](#odssnackbar-api) + +--- + +## 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 +{:.table} diff --git a/docs/0.7.0/components/snackbars_docs.md b/docs/0.7.0/components/snackbars_docs.md new file mode 100644 index 00000000..84742d40 --- /dev/null +++ b/docs/0.7.0/components/snackbars_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: snackbars.md +--- diff --git a/docs/0.7.0/components/switches.md b/docs/0.7.0/components/switches.md new file mode 100644 index 00000000..51bbf279 --- /dev/null +++ b/docs/0.7.0/components/switches.md @@ -0,0 +1,60 @@ +--- +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** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Implementation](#implementation) + * [Flutter code](#flutter-code) + * [OdsSwitch API](#odsswitch-api) + +--- + +## 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 +return OdsSwitch( + checked = true, + onCheckedChange = { }, + 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. +{:.table} + diff --git a/docs/0.7.0/components/switches_docs.md b/docs/0.7.0/components/switches_docs.md new file mode 100644 index 00000000..d31d80be --- /dev/null +++ b/docs/0.7.0/components/switches_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: switches.md +--- diff --git a/docs/0.7.0/components/tabBar.md b/docs/0.7.0/components/tabBar.md new file mode 100644 index 00000000..bae925fc --- /dev/null +++ b/docs/0.7.0/components/tabBar.md @@ -0,0 +1,154 @@ +--- +layout: detail +title: Tabs +description: Tabs organize content across different screens, data sets, and other interactions. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Fixed tabs](#fixed-tabs) + * [Scrollable tabs](#scrollable-tabs) +* [Component specific tokens](#component-specific-tokens) + +--- + +## 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/0.7.0/components/tabBar_docs.md b/docs/0.7.0/components/tabBar_docs.md new file mode 100644 index 00000000..0dc8a3c0 --- /dev/null +++ b/docs/0.7.0/components/tabBar_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: tabBar.md +--- diff --git a/docs/0.7.0/components/textFields.md b/docs/0.7.0/components/textFields.md new file mode 100644 index 00000000..67ec3e84 --- /dev/null +++ b/docs/0.7.0/components/textFields.md @@ -0,0 +1,152 @@ +--- +layout: detail +title: Text fields +description: Text fields let users enter and edit text. +--- + +
**On this page** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Text field](#text-field-) + * [Flutter implementation](#flutter-implementation) + * [OdsTextField API](#odstextfield-api-) + * [Password text field](#password-text-field-) + * [Flutter implementation](#flutter-implementation-1) + * [OdsPasswordTextField API](#odspasswordtextfield-api-) +* [Custom theme configuration](#custom-theme-configuration) + +--- + +## 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 +{:.table} + +### 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 +{:.table} + +## Custom theme configuration + +Comming soon.. diff --git a/docs/0.7.0/components/textFields_docs.md b/docs/0.7.0/components/textFields_docs.md new file mode 100644 index 00000000..f07b3a48 --- /dev/null +++ b/docs/0.7.0/components/textFields_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: textFields.md +--- diff --git a/docs/0.7.0/components/textInput.md b/docs/0.7.0/components/textInput.md new file mode 100644 index 00000000..3363b555 --- /dev/null +++ b/docs/0.7.0/components/textInput.md @@ -0,0 +1,69 @@ +--- +layout: detail +title: Text fields and text editor +description: Text fields and text editor let users enter and edit text. +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Variants](#variants) + * [Text field](#text-field) + * [Secure Text field](#secure-text-field) + * [Text editor](#text-editor) +* [Text Selection](#text-selection) + +--- + +## 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/0.7.0/components/textInput_docs.md b/docs/0.7.0/components/textInput_docs.md new file mode 100644 index 00000000..b73d3df6 --- /dev/null +++ b/docs/0.7.0/components/textInput_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: textInput.md +--- diff --git a/docs/0.7.0/components/toolBar.md b/docs/0.7.0/components/toolBar.md new file mode 100644 index 00000000..27553dc4 --- /dev/null +++ b/docs/0.7.0/components/toolBar.md @@ -0,0 +1,113 @@ +--- +layout: detail +title: Bars - tool +description: Tool bars with Orange branding +--- + +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Accessibility](#accessibility) +* [Description](#description) +* [Variants](#variants) + * [With label items](#with-label-items) + * [With icon items](#with-icon-items) +* [Remarks](#remarks) + +--- + +## 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/0.7.0/components/toolBar_docs.md b/docs/0.7.0/components/toolBar_docs.md new file mode 100644 index 00000000..4b356e35 --- /dev/null +++ b/docs/0.7.0/components/toolBar_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: toolBar.md +--- diff --git a/docs/0.7.0/guidelines/spacings.md b/docs/0.7.0/guidelines/spacings.md new file mode 100644 index 00000000..4b30a252 --- /dev/null +++ b/docs/0.7.0/guidelines/spacings.md @@ -0,0 +1,68 @@ +--- +layout: detail +title: Spacings +--- +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Usage](#usage) + * [Apply spacing for magin](#apply-spacing-for-margin) + * [Apply spacing for padding](#apply-spacing-for-padding) + +--- + +## 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/0.7.0/guidelines/spacings_docs.md b/docs/0.7.0/guidelines/spacings_docs.md new file mode 100644 index 00000000..27a7c0c0 --- /dev/null +++ b/docs/0.7.0/guidelines/spacings_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: spacings.md +--- diff --git a/docs/0.7.0/guidelines/typography.md b/docs/0.7.0/guidelines/typography.md new file mode 100644 index 00000000..b407bdd3 --- /dev/null +++ b/docs/0.7.0/guidelines/typography.md @@ -0,0 +1,57 @@ +--- +layout: detail +title: Typography +--- +--- + +**Page Summary** + +* [Specifications references](#specifications-references) +* [Implementation](#implementation) + * [Apply font style on text](#apply-font-style-on-text) + * [Apply font style on view](#apply-font-style-on-view) + +--- + +## 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/0.7.0/guidelines/typography_docs.md b/docs/0.7.0/guidelines/typography_docs.md new file mode 100644 index 00000000..6b55d509 --- /dev/null +++ b/docs/0.7.0/guidelines/typography_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: typography.md +--- diff --git a/docs/0.7.0/home_content.md b/docs/0.7.0/home_content.md new file mode 100644 index 00000000..4f6ba37f --- /dev/null +++ b/docs/0.7.0/home_content.md @@ -0,0 +1,36 @@ +## 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: ^0.4.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'; +``` diff --git a/docs/0.7.0/index.md b/docs/0.7.0/index.md new file mode 100644 index 00000000..20776e6e --- /dev/null +++ b/docs/0.7.0/index.md @@ -0,0 +1,6 @@ +--- +layout: main +title: Getting started with Orange Design System for Flutter +--- + +{% include_relative home_content.md %} diff --git a/docs/0.7.0/index_content.md b/docs/0.7.0/index_content.md new file mode 100644 index 00000000..716ca9f9 --- /dev/null +++ b/docs/0.7.0/index_content.md @@ -0,0 +1,6 @@ +--- +layout: detail +title: Getting started with Orange Design System for Flutter +--- + +{% include_relative home_content.md %} diff --git a/docs/0.8.0/about/Cookies.md b/docs/0.8.0/about/Cookies.md new file mode 100644 index 00000000..bbeca85f --- /dev/null +++ b/docs/0.8.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/0.8.0/about/Cookies_docs.md b/docs/0.8.0/about/Cookies_docs.md new file mode 100644 index 00000000..15499adc --- /dev/null +++ b/docs/0.8.0/about/Cookies_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Cookies +content_page: Cookies.md +--- diff --git a/docs/0.8.0/about/License.md b/docs/0.8.0/about/License.md new file mode 100644 index 00000000..73d5b3a5 --- /dev/null +++ b/docs/0.8.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/0.8.0/about/License_docs.md b/docs/0.8.0/about/License_docs.md new file mode 100644 index 00000000..18b9fd1f --- /dev/null +++ b/docs/0.8.0/about/License_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: License +content_page: License.md +--- diff --git a/docs/0.8.0/about/Team.md b/docs/0.8.0/about/Team.md new file mode 100644 index 00000000..b7046820 --- /dev/null +++ b/docs/0.8.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/0.8.0/about/Team_docs.md b/docs/0.8.0/about/Team_docs.md new file mode 100644 index 00000000..92cde2e9 --- /dev/null +++ b/docs/0.8.0/about/Team_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Team +content_page: Team.md +--- diff --git a/docs/0.8.0/components/appBarsTop.md b/docs/0.8.0/components/appBarsTop.md new file mode 100644 index 00000000..c0abc188 --- /dev/null +++ b/docs/0.8.0/components/appBarsTop.md @@ -0,0 +1,86 @@ +--- +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 `topBar`. +Here is an example of use: + +```dart +return OdsAppTopBar( + title: "App Bar", + actions: [ + IconButton(icon: const Icon(Icons.color_lens), onPressed: () {}) + ], + navigationIcon: const BackButton(), +); +``` + +##### 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 `topBar`. +Here is an example of use: + +```dart +return OdsLargeTopAppBar( + title: "Large", + actions: IconButton(icon: const Icon(Icons.notifications), onPressed: () {}), + leading: BackButton(), + 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/0.8.0/components/appBarsTop_docs.md b/docs/0.8.0/components/appBarsTop_docs.md new file mode 100644 index 00000000..b3d87ed5 --- /dev/null +++ b/docs/0.8.0/components/appBarsTop_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: App bars - top +content_page: appBarsTop.md +--- diff --git a/docs/0.8.0/components/banners.md b/docs/0.8.0/components/banners.md new file mode 100644 index 00000000..f4886368 --- /dev/null +++ b/docs/0.8.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/0.8.0/components/banners_docs.md b/docs/0.8.0/components/banners_docs.md new file mode 100644 index 00000000..9d720197 --- /dev/null +++ b/docs/0.8.0/components/banners_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Banners +content_page: banners.md +--- diff --git a/docs/0.8.0/components/buttons.md b/docs/0.8.0/components/buttons.md new file mode 100644 index 00000000..29fde087 --- /dev/null +++ b/docs/0.8.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/0.8.0/components/buttons_docs.md b/docs/0.8.0/components/buttons_docs.md new file mode 100644 index 00000000..085cbe10 --- /dev/null +++ b/docs/0.8.0/components/buttons_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Buttons +content_page: buttons.md +--- diff --git a/docs/0.8.0/components/cards.md b/docs/0.8.0/components/cards.md new file mode 100644 index 00000000..7514c236 --- /dev/null +++ b/docs/0.8.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( + 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: () {}, +); +``` + +##### 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: 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** + +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: + +```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 + +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('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 + 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: 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 diff --git a/docs/0.8.0/components/cards_docs.md b/docs/0.8.0/components/cards_docs.md new file mode 100644 index 00000000..193969dd --- /dev/null +++ b/docs/0.8.0/components/cards_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Cards +content_page: cards.md +--- diff --git a/docs/0.8.0/components/checkboxes.md b/docs/0.8.0/components/checkboxes.md new file mode 100644 index 00000000..4a3a3eab --- /dev/null +++ b/docs/0.8.0/components/checkboxes.md @@ -0,0 +1,57 @@ +--- +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 +return OdsCheckbox( + checked: true, + onCheckedChange: () {}, + enabled: true, + 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/0.8.0/components/checkboxes_docs.md b/docs/0.8.0/components/checkboxes_docs.md new file mode 100644 index 00000000..f33e7088 --- /dev/null +++ b/docs/0.8.0/components/checkboxes_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Checkboxes +content_page: checkboxes.md +--- diff --git a/docs/0.8.0/components/chips.md b/docs/0.8.0/components/chips.md new file mode 100644 index 00000000..bab4b290 --- /dev/null +++ b/docs/0.8.0/components/chips.md @@ -0,0 +1,183 @@ +--- +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", + onClick = { }, + leadingIcon = null, + leadingAvatar: CircleAvatar( + backgroundImage: NetworkImage( + OdsApplication.recipes[index].url, + ), + ), + ), // Set it to `null` for no avatar or provide a `leadingIcon` + enabled = true, + onCancel = { } +) +``` + +##### OdsInputChip API + +Parameter | Default value | Description +-- | -- | -- +`text: String` | | Text to be displayed into the chip +`onClick: (bool?)? Callback` | | Callback called on chip click +`enabled: Boolean` | `true` | Controls the enabled state of the chip. When `false`, this chip will not respond to user input. +`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 +`onCancel: (() -> Unit)?` | `null` | Callback called on chip cancel cross click. Pass `null` for no cancel cross. + +### 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 +return OdsChoiceChip( + text = "Choice text", + onClick = { }, + leadingAvatar = OdsChipLeadingAvatar( + image: NetworkImage("https://..."), + contentDescription: "" // Optional + ), // Set it to `null` for no avatar + selected = false, + enabled = 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 +return OdsFilterChip( + text = "chip text", + onClick = { }, + leadingAvatar = OdsChipLeadingAvatar( + image: NetworkImage("https://..."), + contentDescription: "" // Optional + ), // Set it to `null` for no avatar + selected = false, + enabled = 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(colorScheme.secondary, BlendMode.srcIn)) // set it to `null` for no icon + enabled = true, // Optional +) +``` + +##### 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/0.8.0/components/chips_docs.md b/docs/0.8.0/components/chips_docs.md new file mode 100644 index 00000000..51287dad --- /dev/null +++ b/docs/0.8.0/components/chips_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Chips +content_page: chips.md +--- diff --git a/docs/0.8.0/components/dialogs.md b/docs/0.8.0/components/dialogs.md new file mode 100644 index 00000000..6bff3786 --- /dev/null +++ b/docs/0.8.0/components/dialogs.md @@ -0,0 +1,63 @@ +--- +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** + +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 + +_Soon available_ diff --git a/docs/0.8.0/components/dialogs_docs.md b/docs/0.8.0/components/dialogs_docs.md new file mode 100644 index 00000000..db66b13e --- /dev/null +++ b/docs/0.8.0/components/dialogs_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Dialogs +content_page: dialogs.md +--- diff --git a/docs/0.8.0/components/floatingActionButtons.md b/docs/0.8.0/components/floatingActionButtons.md new file mode 100644 index 00000000..28392050 --- /dev/null +++ b/docs/0.8.0/components/floatingActionButtons.md @@ -0,0 +1,113 @@ +--- +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 +); +``` + +### 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 +); +``` + +### 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 +); +``` + +### 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 OdsSmallFloatingActionButton( + onClick: () {}, + text = "Add", + icon: const Icon(Icons.add), //Optional +); +``` + + +## Component specific tokens + +_Soon available_ diff --git a/docs/0.8.0/components/floatingActionButtons_docs.md b/docs/0.8.0/components/floatingActionButtons_docs.md new file mode 100644 index 00000000..c6dc3fb5 --- /dev/null +++ b/docs/0.8.0/components/floatingActionButtons_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Floating action buttons +content_page: floatingActionButtons.md +--- diff --git a/docs/0.8.0/components/images/app_bar_top_overflow_menu_dark.png b/docs/0.8.0/components/images/app_bar_top_overflow_menu_dark.png new file mode 100644 index 00000000..60322543 Binary files /dev/null and b/docs/0.8.0/components/images/app_bar_top_overflow_menu_dark.png differ diff --git a/docs/0.8.0/components/images/app_bar_top_overflow_menu_light.png b/docs/0.8.0/components/images/app_bar_top_overflow_menu_light.png new file mode 100644 index 00000000..2e3bd905 Binary files /dev/null and b/docs/0.8.0/components/images/app_bar_top_overflow_menu_light.png differ diff --git a/docs/0.8.0/components/images/banner_dark.png b/docs/0.8.0/components/images/banner_dark.png new file mode 100644 index 00000000..60803f20 Binary files /dev/null and b/docs/0.8.0/components/images/banner_dark.png differ diff --git a/docs/0.8.0/components/images/banner_light.png b/docs/0.8.0/components/images/banner_light.png new file mode 100644 index 00000000..4d174146 Binary files /dev/null and b/docs/0.8.0/components/images/banner_light.png differ diff --git a/docs/0.8.0/components/images/button_contained_dark.png b/docs/0.8.0/components/images/button_contained_dark.png new file mode 100644 index 00000000..8cc9ee5f Binary files /dev/null and b/docs/0.8.0/components/images/button_contained_dark.png differ diff --git a/docs/0.8.0/components/images/button_contained_light.png b/docs/0.8.0/components/images/button_contained_light.png new file mode 100644 index 00000000..401db36d Binary files /dev/null and b/docs/0.8.0/components/images/button_contained_light.png differ diff --git a/docs/0.8.0/components/images/button_contained_negative_dark.png b/docs/0.8.0/components/images/button_contained_negative_dark.png new file mode 100644 index 00000000..13f22a29 Binary files /dev/null and b/docs/0.8.0/components/images/button_contained_negative_dark.png differ diff --git a/docs/0.8.0/components/images/button_contained_negative_light.png b/docs/0.8.0/components/images/button_contained_negative_light.png new file mode 100644 index 00000000..018b84cf Binary files /dev/null and b/docs/0.8.0/components/images/button_contained_negative_light.png differ diff --git a/docs/0.8.0/components/images/button_contained_positive_dark.png b/docs/0.8.0/components/images/button_contained_positive_dark.png new file mode 100644 index 00000000..b1527819 Binary files /dev/null and b/docs/0.8.0/components/images/button_contained_positive_dark.png differ diff --git a/docs/0.8.0/components/images/button_contained_positive_light.png b/docs/0.8.0/components/images/button_contained_positive_light.png new file mode 100644 index 00000000..906bf0b3 Binary files /dev/null and b/docs/0.8.0/components/images/button_contained_positive_light.png differ diff --git a/docs/0.8.0/components/images/button_icon_deselected_dark.png b/docs/0.8.0/components/images/button_icon_deselected_dark.png new file mode 100644 index 00000000..78914207 Binary files /dev/null and b/docs/0.8.0/components/images/button_icon_deselected_dark.png differ diff --git a/docs/0.8.0/components/images/button_icon_deselected_light.png b/docs/0.8.0/components/images/button_icon_deselected_light.png new file mode 100644 index 00000000..2fb95c87 Binary files /dev/null and b/docs/0.8.0/components/images/button_icon_deselected_light.png differ diff --git a/docs/0.8.0/components/images/button_icon_selected_dark.png b/docs/0.8.0/components/images/button_icon_selected_dark.png new file mode 100644 index 00000000..40a7bed3 Binary files /dev/null and b/docs/0.8.0/components/images/button_icon_selected_dark.png differ diff --git a/docs/0.8.0/components/images/button_icon_selected_light.png b/docs/0.8.0/components/images/button_icon_selected_light.png new file mode 100644 index 00000000..025e795c Binary files /dev/null and b/docs/0.8.0/components/images/button_icon_selected_light.png differ diff --git a/docs/0.8.0/components/images/button_outlined_dark.png b/docs/0.8.0/components/images/button_outlined_dark.png new file mode 100644 index 00000000..420ab1a4 Binary files /dev/null and b/docs/0.8.0/components/images/button_outlined_dark.png differ diff --git a/docs/0.8.0/components/images/button_outlined_light.png b/docs/0.8.0/components/images/button_outlined_light.png new file mode 100644 index 00000000..a7c56296 Binary files /dev/null and b/docs/0.8.0/components/images/button_outlined_light.png differ diff --git a/docs/0.8.0/components/images/button_text_dark.png b/docs/0.8.0/components/images/button_text_dark.png new file mode 100644 index 00000000..13ae0324 Binary files /dev/null and b/docs/0.8.0/components/images/button_text_dark.png differ diff --git a/docs/0.8.0/components/images/button_text_light.png b/docs/0.8.0/components/images/button_text_light.png new file mode 100644 index 00000000..f574d322 Binary files /dev/null and b/docs/0.8.0/components/images/button_text_light.png differ diff --git a/docs/0.8.0/components/images/card_header_first_dark.png b/docs/0.8.0/components/images/card_header_first_dark.png new file mode 100644 index 00000000..07478050 Binary files /dev/null and b/docs/0.8.0/components/images/card_header_first_dark.png differ diff --git a/docs/0.8.0/components/images/card_header_first_light.png b/docs/0.8.0/components/images/card_header_first_light.png new file mode 100644 index 00000000..6d490819 Binary files /dev/null and b/docs/0.8.0/components/images/card_header_first_light.png differ diff --git a/docs/0.8.0/components/images/card_horizontal_dark.png b/docs/0.8.0/components/images/card_horizontal_dark.png new file mode 100644 index 00000000..ba5324c9 Binary files /dev/null and b/docs/0.8.0/components/images/card_horizontal_dark.png differ diff --git a/docs/0.8.0/components/images/card_horizontal_light.png b/docs/0.8.0/components/images/card_horizontal_light.png new file mode 100644 index 00000000..cc4c5928 Binary files /dev/null and b/docs/0.8.0/components/images/card_horizontal_light.png differ diff --git a/docs/0.8.0/components/images/card_small_dark.png b/docs/0.8.0/components/images/card_small_dark.png new file mode 100644 index 00000000..0862c176 Binary files /dev/null and b/docs/0.8.0/components/images/card_small_dark.png differ diff --git a/docs/0.8.0/components/images/card_small_light.png b/docs/0.8.0/components/images/card_small_light.png new file mode 100644 index 00000000..777df5ce Binary files /dev/null and b/docs/0.8.0/components/images/card_small_light.png differ diff --git a/docs/0.8.0/components/images/card_vertical_image_first_darkk.png b/docs/0.8.0/components/images/card_vertical_image_first_darkk.png new file mode 100644 index 00000000..e42fc38c Binary files /dev/null and b/docs/0.8.0/components/images/card_vertical_image_first_darkk.png differ diff --git a/docs/0.8.0/components/images/card_vertical_image_first_lightt.png b/docs/0.8.0/components/images/card_vertical_image_first_lightt.png new file mode 100644 index 00000000..43d4c893 Binary files /dev/null and b/docs/0.8.0/components/images/card_vertical_image_first_lightt.png differ diff --git a/docs/0.8.0/components/images/checkbox_dark.png b/docs/0.8.0/components/images/checkbox_dark.png new file mode 100644 index 00000000..d37bc0a5 Binary files /dev/null and b/docs/0.8.0/components/images/checkbox_dark.png differ diff --git a/docs/0.8.0/components/images/checkbox_light.png b/docs/0.8.0/components/images/checkbox_light.png new file mode 100644 index 00000000..002bc777 Binary files /dev/null and b/docs/0.8.0/components/images/checkbox_light.png differ diff --git a/docs/0.8.0/components/images/checkboxe_list_dark.png b/docs/0.8.0/components/images/checkboxe_list_dark.png new file mode 100644 index 00000000..8b325356 Binary files /dev/null and b/docs/0.8.0/components/images/checkboxe_list_dark.png differ diff --git a/docs/0.8.0/components/images/checkboxe_list_light.png b/docs/0.8.0/components/images/checkboxe_list_light.png new file mode 100644 index 00000000..9c10551a Binary files /dev/null and b/docs/0.8.0/components/images/checkboxe_list_light.png differ diff --git a/docs/0.8.0/components/images/chips_action_dark.png b/docs/0.8.0/components/images/chips_action_dark.png new file mode 100644 index 00000000..d9c95f5e Binary files /dev/null and b/docs/0.8.0/components/images/chips_action_dark.png differ diff --git a/docs/0.8.0/components/images/chips_action_light.png b/docs/0.8.0/components/images/chips_action_light.png new file mode 100644 index 00000000..086a5bd3 Binary files /dev/null and b/docs/0.8.0/components/images/chips_action_light.png differ diff --git a/docs/0.8.0/components/images/chips_choice_dark.png b/docs/0.8.0/components/images/chips_choice_dark.png new file mode 100644 index 00000000..cb6ead60 Binary files /dev/null and b/docs/0.8.0/components/images/chips_choice_dark.png differ diff --git a/docs/0.8.0/components/images/chips_choice_light.png b/docs/0.8.0/components/images/chips_choice_light.png new file mode 100644 index 00000000..1e43a0b6 Binary files /dev/null and b/docs/0.8.0/components/images/chips_choice_light.png differ diff --git a/docs/0.8.0/components/images/chips_filter_dark.png b/docs/0.8.0/components/images/chips_filter_dark.png new file mode 100644 index 00000000..71fda02d Binary files /dev/null and b/docs/0.8.0/components/images/chips_filter_dark.png differ diff --git a/docs/0.8.0/components/images/chips_filter_light.png b/docs/0.8.0/components/images/chips_filter_light.png new file mode 100644 index 00000000..078b40eb Binary files /dev/null and b/docs/0.8.0/components/images/chips_filter_light.png differ diff --git a/docs/0.8.0/components/images/chips_input_dark.png b/docs/0.8.0/components/images/chips_input_dark.png new file mode 100644 index 00000000..7732e080 Binary files /dev/null and b/docs/0.8.0/components/images/chips_input_dark.png differ diff --git a/docs/0.8.0/components/images/chips_input_light.png b/docs/0.8.0/components/images/chips_input_light.png new file mode 100644 index 00000000..6cbf7e6c Binary files /dev/null and b/docs/0.8.0/components/images/chips_input_light.png differ diff --git a/docs/0.8.0/components/images/dialog_alert_dark.png b/docs/0.8.0/components/images/dialog_alert_dark.png new file mode 100644 index 00000000..c9dcbac4 Binary files /dev/null and b/docs/0.8.0/components/images/dialog_alert_dark.png differ diff --git a/docs/0.8.0/components/images/dialog_alert_light.png b/docs/0.8.0/components/images/dialog_alert_light.png new file mode 100644 index 00000000..9ad32961 Binary files /dev/null and b/docs/0.8.0/components/images/dialog_alert_light.png differ diff --git a/docs/0.8.0/components/images/fab_dark.png b/docs/0.8.0/components/images/fab_dark.png new file mode 100644 index 00000000..897a5bb5 Binary files /dev/null and b/docs/0.8.0/components/images/fab_dark.png differ diff --git a/docs/0.8.0/components/images/fab_extended_dark.png b/docs/0.8.0/components/images/fab_extended_dark.png new file mode 100644 index 00000000..9b0e85d4 Binary files /dev/null and b/docs/0.8.0/components/images/fab_extended_dark.png differ diff --git a/docs/0.8.0/components/images/fab_extended_light.png b/docs/0.8.0/components/images/fab_extended_light.png new file mode 100644 index 00000000..4c9d7f13 Binary files /dev/null and b/docs/0.8.0/components/images/fab_extended_light.png differ diff --git a/docs/0.8.0/components/images/fab_large_dark.png b/docs/0.8.0/components/images/fab_large_dark.png new file mode 100644 index 00000000..28bfe69b Binary files /dev/null and b/docs/0.8.0/components/images/fab_large_dark.png differ diff --git a/docs/0.8.0/components/images/fab_large_light.png b/docs/0.8.0/components/images/fab_large_light.png new file mode 100644 index 00000000..92e931a2 Binary files /dev/null and b/docs/0.8.0/components/images/fab_large_light.png differ diff --git a/docs/0.8.0/components/images/fab_light.png b/docs/0.8.0/components/images/fab_light.png new file mode 100644 index 00000000..b9e8f14d Binary files /dev/null and b/docs/0.8.0/components/images/fab_light.png differ diff --git a/docs/0.8.0/components/images/fab_mini_dark.png b/docs/0.8.0/components/images/fab_mini_dark.png new file mode 100644 index 00000000..76ce617c Binary files /dev/null and b/docs/0.8.0/components/images/fab_mini_dark.png differ diff --git a/docs/0.8.0/components/images/fab_mini_light.png b/docs/0.8.0/components/images/fab_mini_light.png new file mode 100644 index 00000000..20f73255 Binary files /dev/null and b/docs/0.8.0/components/images/fab_mini_light.png differ diff --git a/docs/0.8.0/components/images/lists_radio_button_dark.png b/docs/0.8.0/components/images/lists_radio_button_dark.png new file mode 100644 index 00000000..e0ce8e76 Binary files /dev/null and b/docs/0.8.0/components/images/lists_radio_button_dark.png differ diff --git a/docs/0.8.0/components/images/lists_radio_button_light.png b/docs/0.8.0/components/images/lists_radio_button_light.png new file mode 100644 index 00000000..a7cd5e5b Binary files /dev/null and b/docs/0.8.0/components/images/lists_radio_button_light.png differ diff --git a/docs/0.8.0/components/images/lists_single_line_dark.png b/docs/0.8.0/components/images/lists_single_line_dark.png new file mode 100644 index 00000000..d46eca2d Binary files /dev/null and b/docs/0.8.0/components/images/lists_single_line_dark.png differ diff --git a/docs/0.8.0/components/images/lists_single_line_light.png b/docs/0.8.0/components/images/lists_single_line_light.png new file mode 100644 index 00000000..3bda5190 Binary files /dev/null and b/docs/0.8.0/components/images/lists_single_line_light.png differ diff --git a/docs/0.8.0/components/images/lists_single_line_wide_image_dark.png b/docs/0.8.0/components/images/lists_single_line_wide_image_dark.png new file mode 100644 index 00000000..c00f2192 Binary files /dev/null and b/docs/0.8.0/components/images/lists_single_line_wide_image_dark.png differ diff --git a/docs/0.8.0/components/images/lists_single_line_wide_image_light.png b/docs/0.8.0/components/images/lists_single_line_wide_image_light.png new file mode 100644 index 00000000..d839b5cc Binary files /dev/null and b/docs/0.8.0/components/images/lists_single_line_wide_image_light.png differ diff --git a/docs/0.8.0/components/images/lists_switch_dark.png b/docs/0.8.0/components/images/lists_switch_dark.png new file mode 100644 index 00000000..4e9ff230 Binary files /dev/null and b/docs/0.8.0/components/images/lists_switch_dark.png differ diff --git a/docs/0.8.0/components/images/lists_switch_light.png b/docs/0.8.0/components/images/lists_switch_light.png new file mode 100644 index 00000000..0f9adf47 Binary files /dev/null and b/docs/0.8.0/components/images/lists_switch_light.png differ diff --git a/docs/0.8.0/components/images/lists_three_line_dark.png b/docs/0.8.0/components/images/lists_three_line_dark.png new file mode 100644 index 00000000..15e350f3 Binary files /dev/null and b/docs/0.8.0/components/images/lists_three_line_dark.png differ diff --git a/docs/0.8.0/components/images/lists_three_line_light.png b/docs/0.8.0/components/images/lists_three_line_light.png new file mode 100644 index 00000000..f3dabd4e Binary files /dev/null and b/docs/0.8.0/components/images/lists_three_line_light.png differ diff --git a/docs/0.8.0/components/images/lists_three_line_wide_image_dark.png b/docs/0.8.0/components/images/lists_three_line_wide_image_dark.png new file mode 100644 index 00000000..2d44de0c Binary files /dev/null and b/docs/0.8.0/components/images/lists_three_line_wide_image_dark.png differ diff --git a/docs/0.8.0/components/images/lists_three_line_wide_image_light.png b/docs/0.8.0/components/images/lists_three_line_wide_image_light.png new file mode 100644 index 00000000..b6eaa436 Binary files /dev/null and b/docs/0.8.0/components/images/lists_three_line_wide_image_light.png differ diff --git a/docs/0.8.0/components/images/lists_two_line_dark.png b/docs/0.8.0/components/images/lists_two_line_dark.png new file mode 100644 index 00000000..7e130d9f Binary files /dev/null and b/docs/0.8.0/components/images/lists_two_line_dark.png differ diff --git a/docs/0.8.0/components/images/lists_two_line_light.png b/docs/0.8.0/components/images/lists_two_line_light.png new file mode 100644 index 00000000..ea4e52cb Binary files /dev/null and b/docs/0.8.0/components/images/lists_two_line_light.png differ diff --git a/docs/0.8.0/components/images/lists_two_line_wide_image_dark.png b/docs/0.8.0/components/images/lists_two_line_wide_image_dark.png new file mode 100644 index 00000000..0ea681e8 Binary files /dev/null and b/docs/0.8.0/components/images/lists_two_line_wide_image_dark.png differ diff --git a/docs/0.8.0/components/images/lists_two_line_wide_image_light.png b/docs/0.8.0/components/images/lists_two_line_wide_image_light.png new file mode 100644 index 00000000..0c214c27 Binary files /dev/null and b/docs/0.8.0/components/images/lists_two_line_wide_image_light.png differ diff --git a/docs/0.8.0/components/images/menu_dropdown_dark.png b/docs/0.8.0/components/images/menu_dropdown_dark.png new file mode 100644 index 00000000..b47bccfe Binary files /dev/null and b/docs/0.8.0/components/images/menu_dropdown_dark.png differ diff --git a/docs/0.8.0/components/images/menu_dropdown_light.png b/docs/0.8.0/components/images/menu_dropdown_light.png new file mode 100644 index 00000000..5af3fb65 Binary files /dev/null and b/docs/0.8.0/components/images/menu_dropdown_light.png differ diff --git a/docs/0.8.0/components/images/menu_exposed_dropdown_dark.png b/docs/0.8.0/components/images/menu_exposed_dropdown_dark.png new file mode 100644 index 00000000..029fb349 Binary files /dev/null and b/docs/0.8.0/components/images/menu_exposed_dropdown_dark.png differ diff --git a/docs/0.8.0/components/images/menu_exposed_dropdown_light.png b/docs/0.8.0/components/images/menu_exposed_dropdown_light.png new file mode 100644 index 00000000..202aa7db Binary files /dev/null and b/docs/0.8.0/components/images/menu_exposed_dropdown_light.png differ diff --git a/docs/0.8.0/components/images/navigation_bar_dark.png b/docs/0.8.0/components/images/navigation_bar_dark.png new file mode 100644 index 00000000..aff18611 Binary files /dev/null and b/docs/0.8.0/components/images/navigation_bar_dark.png differ diff --git a/docs/0.8.0/components/images/navigation_bar_light.png b/docs/0.8.0/components/images/navigation_bar_light.png new file mode 100644 index 00000000..a5d9e288 Binary files /dev/null and b/docs/0.8.0/components/images/navigation_bar_light.png differ diff --git a/docs/0.8.0/components/images/navigation_rail_dark.png b/docs/0.8.0/components/images/navigation_rail_dark.png new file mode 100644 index 00000000..70859f2a Binary files /dev/null and b/docs/0.8.0/components/images/navigation_rail_dark.png differ diff --git a/docs/0.8.0/components/images/navigation_rail_light.png b/docs/0.8.0/components/images/navigation_rail_light.png new file mode 100644 index 00000000..0c164233 Binary files /dev/null and b/docs/0.8.0/components/images/navigation_rail_light.png differ diff --git a/docs/0.8.0/components/images/progress_circular_dark.png b/docs/0.8.0/components/images/progress_circular_dark.png new file mode 100644 index 00000000..69b07e8c Binary files /dev/null and b/docs/0.8.0/components/images/progress_circular_dark.png differ diff --git a/docs/0.8.0/components/images/progress_circular_light.png b/docs/0.8.0/components/images/progress_circular_light.png new file mode 100644 index 00000000..b183a1d7 Binary files /dev/null and b/docs/0.8.0/components/images/progress_circular_light.png differ diff --git a/docs/0.8.0/components/images/progress_linear_dark.png b/docs/0.8.0/components/images/progress_linear_dark.png new file mode 100644 index 00000000..e4e3e843 Binary files /dev/null and b/docs/0.8.0/components/images/progress_linear_dark.png differ diff --git a/docs/0.8.0/components/images/progress_linear_light.png b/docs/0.8.0/components/images/progress_linear_light.png new file mode 100644 index 00000000..f56e5773 Binary files /dev/null and b/docs/0.8.0/components/images/progress_linear_light.png differ diff --git a/docs/0.8.0/components/images/radio_button_dark.png b/docs/0.8.0/components/images/radio_button_dark.png new file mode 100644 index 00000000..8dfd93d4 Binary files /dev/null and b/docs/0.8.0/components/images/radio_button_dark.png differ diff --git a/docs/0.8.0/components/images/radio_button_light.png b/docs/0.8.0/components/images/radio_button_light.png new file mode 100644 index 00000000..5cc7e464 Binary files /dev/null and b/docs/0.8.0/components/images/radio_button_light.png differ diff --git a/docs/0.8.0/components/images/segmented_button_multi_dark.png b/docs/0.8.0/components/images/segmented_button_multi_dark.png new file mode 100644 index 00000000..d08e41ea Binary files /dev/null and b/docs/0.8.0/components/images/segmented_button_multi_dark.png differ diff --git a/docs/0.8.0/components/images/segmented_button_multi_light.png b/docs/0.8.0/components/images/segmented_button_multi_light.png new file mode 100644 index 00000000..e483f114 Binary files /dev/null and b/docs/0.8.0/components/images/segmented_button_multi_light.png differ diff --git a/docs/0.8.0/components/images/segmented_button_single_dark.png b/docs/0.8.0/components/images/segmented_button_single_dark.png new file mode 100644 index 00000000..3a8c69d1 Binary files /dev/null and b/docs/0.8.0/components/images/segmented_button_single_dark.png differ diff --git a/docs/0.8.0/components/images/segmented_button_single_light.png b/docs/0.8.0/components/images/segmented_button_single_light.png new file mode 100644 index 00000000..b919007e Binary files /dev/null and b/docs/0.8.0/components/images/segmented_button_single_light.png differ diff --git a/docs/0.8.0/components/images/sheetbottom_dark.png b/docs/0.8.0/components/images/sheetbottom_dark.png new file mode 100644 index 00000000..92919efc Binary files /dev/null and b/docs/0.8.0/components/images/sheetbottom_dark.png differ diff --git a/docs/0.8.0/components/images/sheetbottom_light.png b/docs/0.8.0/components/images/sheetbottom_light.png new file mode 100644 index 00000000..add8e3f0 Binary files /dev/null and b/docs/0.8.0/components/images/sheetbottom_light.png differ diff --git a/docs/0.8.0/components/images/slider_continuous_dark.png b/docs/0.8.0/components/images/slider_continuous_dark.png new file mode 100644 index 00000000..9b745d7f Binary files /dev/null and b/docs/0.8.0/components/images/slider_continuous_dark.png differ diff --git a/docs/0.8.0/components/images/slider_continuous_light.png b/docs/0.8.0/components/images/slider_continuous_light.png new file mode 100644 index 00000000..42ad208b Binary files /dev/null and b/docs/0.8.0/components/images/slider_continuous_light.png differ diff --git a/docs/0.8.0/components/images/slider_continuous_lockups_dark.png b/docs/0.8.0/components/images/slider_continuous_lockups_dark.png new file mode 100644 index 00000000..cd15d6e2 Binary files /dev/null and b/docs/0.8.0/components/images/slider_continuous_lockups_dark.png differ diff --git a/docs/0.8.0/components/images/slider_continuous_lockups_light.png b/docs/0.8.0/components/images/slider_continuous_lockups_light.png new file mode 100644 index 00000000..69f7444f Binary files /dev/null and b/docs/0.8.0/components/images/slider_continuous_lockups_light.png differ diff --git a/docs/0.8.0/components/images/slider_continuous_lockups_with_icon_dark.png b/docs/0.8.0/components/images/slider_continuous_lockups_with_icon_dark.png new file mode 100644 index 00000000..32764754 Binary files /dev/null and b/docs/0.8.0/components/images/slider_continuous_lockups_with_icon_dark.png differ diff --git a/docs/0.8.0/components/images/slider_continuous_lockups_with_icon_light.png b/docs/0.8.0/components/images/slider_continuous_lockups_with_icon_light.png new file mode 100644 index 00000000..39be0469 Binary files /dev/null and b/docs/0.8.0/components/images/slider_continuous_lockups_with_icon_light.png differ diff --git a/docs/0.8.0/components/images/slider_continuous_with_icon_dark.png b/docs/0.8.0/components/images/slider_continuous_with_icon_dark.png new file mode 100644 index 00000000..0d3b71f3 Binary files /dev/null and b/docs/0.8.0/components/images/slider_continuous_with_icon_dark.png differ diff --git a/docs/0.8.0/components/images/slider_continuous_with_icon_light.png b/docs/0.8.0/components/images/slider_continuous_with_icon_light.png new file mode 100644 index 00000000..4e81e7cd Binary files /dev/null and b/docs/0.8.0/components/images/slider_continuous_with_icon_light.png differ diff --git a/docs/0.8.0/components/images/slider_discrete_dark.png b/docs/0.8.0/components/images/slider_discrete_dark.png new file mode 100644 index 00000000..35abccc5 Binary files /dev/null and b/docs/0.8.0/components/images/slider_discrete_dark.png differ diff --git a/docs/0.8.0/components/images/slider_discrete_light.png b/docs/0.8.0/components/images/slider_discrete_light.png new file mode 100644 index 00000000..4f3d5083 Binary files /dev/null and b/docs/0.8.0/components/images/slider_discrete_light.png differ diff --git a/docs/0.8.0/components/images/slider_discrete_lockups_dark.png b/docs/0.8.0/components/images/slider_discrete_lockups_dark.png new file mode 100644 index 00000000..97a6da19 Binary files /dev/null and b/docs/0.8.0/components/images/slider_discrete_lockups_dark.png differ diff --git a/docs/0.8.0/components/images/slider_discrete_lockups_light.png b/docs/0.8.0/components/images/slider_discrete_lockups_light.png new file mode 100644 index 00000000..116273c3 Binary files /dev/null and b/docs/0.8.0/components/images/slider_discrete_lockups_light.png differ diff --git a/docs/0.8.0/components/images/slider_discrete_lockups_with_icon_dark.png b/docs/0.8.0/components/images/slider_discrete_lockups_with_icon_dark.png new file mode 100644 index 00000000..978dbfcb Binary files /dev/null and b/docs/0.8.0/components/images/slider_discrete_lockups_with_icon_dark.png differ diff --git a/docs/0.8.0/components/images/slider_discrete_lockups_with_icon_light.png b/docs/0.8.0/components/images/slider_discrete_lockups_with_icon_light.png new file mode 100644 index 00000000..640cfd2d Binary files /dev/null and b/docs/0.8.0/components/images/slider_discrete_lockups_with_icon_light.png differ diff --git a/docs/0.8.0/components/images/slider_discrete_with_icon_dark.png b/docs/0.8.0/components/images/slider_discrete_with_icon_dark.png new file mode 100644 index 00000000..cd3fa414 Binary files /dev/null and b/docs/0.8.0/components/images/slider_discrete_with_icon_dark.png differ diff --git a/docs/0.8.0/components/images/slider_discrete_with_icon_light.png b/docs/0.8.0/components/images/slider_discrete_with_icon_light.png new file mode 100644 index 00000000..a18b4e09 Binary files /dev/null and b/docs/0.8.0/components/images/slider_discrete_with_icon_light.png differ diff --git a/docs/0.8.0/components/images/snackbar_longer_action_dark.png b/docs/0.8.0/components/images/snackbar_longer_action_dark.png new file mode 100644 index 00000000..991076a0 Binary files /dev/null and b/docs/0.8.0/components/images/snackbar_longer_action_dark.png differ diff --git a/docs/0.8.0/components/images/snackbar_longer_action_light.png b/docs/0.8.0/components/images/snackbar_longer_action_light.png new file mode 100644 index 00000000..3df322d0 Binary files /dev/null and b/docs/0.8.0/components/images/snackbar_longer_action_light.png differ diff --git a/docs/0.8.0/components/images/snackbar_single_dark.png b/docs/0.8.0/components/images/snackbar_single_dark.png new file mode 100644 index 00000000..50b52d14 Binary files /dev/null and b/docs/0.8.0/components/images/snackbar_single_dark.png differ diff --git a/docs/0.8.0/components/images/snackbar_single_light.png b/docs/0.8.0/components/images/snackbar_single_light.png new file mode 100644 index 00000000..ec936888 Binary files /dev/null and b/docs/0.8.0/components/images/snackbar_single_light.png differ diff --git a/docs/0.8.0/components/images/snackbar_single_with_action_dark.png b/docs/0.8.0/components/images/snackbar_single_with_action_dark.png new file mode 100644 index 00000000..6966cfb0 Binary files /dev/null and b/docs/0.8.0/components/images/snackbar_single_with_action_dark.png differ diff --git a/docs/0.8.0/components/images/snackbar_single_with_action_light.png b/docs/0.8.0/components/images/snackbar_single_with_action_light.png new file mode 100644 index 00000000..ca8d4c8c Binary files /dev/null and b/docs/0.8.0/components/images/snackbar_single_with_action_light.png differ diff --git a/docs/0.8.0/components/images/snackbar_two_lines_dark.png b/docs/0.8.0/components/images/snackbar_two_lines_dark.png new file mode 100644 index 00000000..3b7b0035 Binary files /dev/null and b/docs/0.8.0/components/images/snackbar_two_lines_dark.png differ diff --git a/docs/0.8.0/components/images/snackbar_two_lines_light.png b/docs/0.8.0/components/images/snackbar_two_lines_light.png new file mode 100644 index 00000000..fcfa013e Binary files /dev/null and b/docs/0.8.0/components/images/snackbar_two_lines_light.png differ diff --git a/docs/0.8.0/components/images/switch_dark.png b/docs/0.8.0/components/images/switch_dark.png new file mode 100644 index 00000000..9d51d97f Binary files /dev/null and b/docs/0.8.0/components/images/switch_dark.png differ diff --git a/docs/0.8.0/components/images/switch_light.png b/docs/0.8.0/components/images/switch_light.png new file mode 100644 index 00000000..73e4e02a Binary files /dev/null and b/docs/0.8.0/components/images/switch_light.png differ diff --git a/docs/0.8.0/components/images/tabs_fixed_dark.png b/docs/0.8.0/components/images/tabs_fixed_dark.png new file mode 100644 index 00000000..1c529c76 Binary files /dev/null and b/docs/0.8.0/components/images/tabs_fixed_dark.png differ diff --git a/docs/0.8.0/components/images/tabs_fixed_light.png b/docs/0.8.0/components/images/tabs_fixed_light.png new file mode 100644 index 00000000..8ceda363 Binary files /dev/null and b/docs/0.8.0/components/images/tabs_fixed_light.png differ diff --git a/docs/0.8.0/components/images/tabs_scrollable_dark.png b/docs/0.8.0/components/images/tabs_scrollable_dark.png new file mode 100644 index 00000000..e99f8912 Binary files /dev/null and b/docs/0.8.0/components/images/tabs_scrollable_dark.png differ diff --git a/docs/0.8.0/components/images/tabs_scrollable_light.png b/docs/0.8.0/components/images/tabs_scrollable_light.png new file mode 100644 index 00000000..c6496d8d Binary files /dev/null and b/docs/0.8.0/components/images/tabs_scrollable_light.png differ diff --git a/docs/0.8.0/components/images/textfield_character_counter_dark.png b/docs/0.8.0/components/images/textfield_character_counter_dark.png new file mode 100644 index 00000000..9b52ae51 Binary files /dev/null and b/docs/0.8.0/components/images/textfield_character_counter_dark.png differ diff --git a/docs/0.8.0/components/images/textfield_character_counter_light.png b/docs/0.8.0/components/images/textfield_character_counter_light.png new file mode 100644 index 00000000..482d4c20 Binary files /dev/null and b/docs/0.8.0/components/images/textfield_character_counter_light.png differ diff --git a/docs/0.8.0/components/images/textfield_filled_dark.png b/docs/0.8.0/components/images/textfield_filled_dark.png new file mode 100644 index 00000000..38424f0f Binary files /dev/null and b/docs/0.8.0/components/images/textfield_filled_dark.png differ diff --git a/docs/0.8.0/components/images/textfield_filled_light.png b/docs/0.8.0/components/images/textfield_filled_light.png new file mode 100644 index 00000000..881386b2 Binary files /dev/null and b/docs/0.8.0/components/images/textfield_filled_light.png differ diff --git a/docs/0.8.0/components/images/textfield_filled_password_dark.png b/docs/0.8.0/components/images/textfield_filled_password_dark.png new file mode 100644 index 00000000..aaffb22f Binary files /dev/null and b/docs/0.8.0/components/images/textfield_filled_password_dark.png differ diff --git a/docs/0.8.0/components/images/textfield_filled_password_light.png b/docs/0.8.0/components/images/textfield_filled_password_light.png new file mode 100644 index 00000000..8e9b23d4 Binary files /dev/null and b/docs/0.8.0/components/images/textfield_filled_password_light.png differ diff --git a/docs/0.8.0/components/images/textfield_outlined_dark.png b/docs/0.8.0/components/images/textfield_outlined_dark.png new file mode 100644 index 00000000..11956a2f Binary files /dev/null and b/docs/0.8.0/components/images/textfield_outlined_dark.png differ diff --git a/docs/0.8.0/components/images/textfield_outlined_light.png b/docs/0.8.0/components/images/textfield_outlined_light.png new file mode 100644 index 00000000..66be0c8c Binary files /dev/null and b/docs/0.8.0/components/images/textfield_outlined_light.png differ diff --git a/docs/0.8.0/components/images/textfield_outlined_password_dark.png b/docs/0.8.0/components/images/textfield_outlined_password_dark.png new file mode 100644 index 00000000..9a0b29cc Binary files /dev/null and b/docs/0.8.0/components/images/textfield_outlined_password_dark.png differ diff --git a/docs/0.8.0/components/images/textfield_outlined_password_light.png b/docs/0.8.0/components/images/textfield_outlined_password_light.png new file mode 100644 index 00000000..94e761a7 Binary files /dev/null and b/docs/0.8.0/components/images/textfield_outlined_password_light.png differ diff --git a/docs/0.8.0/components/listsItem.md b/docs/0.8.0/components/listsItem.md new file mode 100644 index 00000000..144d2bb0 --- /dev/null +++ b/docs/0.8.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/0.8.0/components/listsItem_docs.md b/docs/0.8.0/components/listsItem_docs.md new file mode 100644 index 00000000..5af3c0e0 --- /dev/null +++ b/docs/0.8.0/components/listsItem_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: List item +content_page: listsItem.md +--- diff --git a/docs/0.8.0/components/menus.md b/docs/0.8.0/components/menus.md new file mode 100644 index 00000000..648791e0 --- /dev/null +++ b/docs/0.8.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: (String 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: false, // 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/0.8.0/components/menus_docs.md b/docs/0.8.0/components/menus_docs.md new file mode 100644 index 00000000..f1e8008f --- /dev/null +++ b/docs/0.8.0/components/menus_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Menus +content_page: menus.md +--- diff --git a/docs/0.8.0/components/navigationBar.md b/docs/0.8.0/components/navigationBar.md new file mode 100644 index 00000000..62d3d719 --- /dev/null +++ b/docs/0.8.0/components/navigationBar.md @@ -0,0 +1,85 @@ +--- +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 + +_Soon available_ diff --git a/docs/0.8.0/components/navigationBar_docs.md b/docs/0.8.0/components/navigationBar_docs.md new file mode 100644 index 00000000..b0f67733 --- /dev/null +++ b/docs/0.8.0/components/navigationBar_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Bars - navigation +content_page: navigationBar.md +--- diff --git a/docs/0.8.0/components/navigation_rail.md b/docs/0.8.0/components/navigation_rail.md new file mode 100644 index 00000000..36b2c347 --- /dev/null +++ b/docs/0.8.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/0.8.0/components/navigation_rail_docs.md b/docs/0.8.0/components/navigation_rail_docs.md new file mode 100644 index 00000000..b4a6c6d6 --- /dev/null +++ b/docs/0.8.0/components/navigation_rail_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: navigation_rail.md +--- diff --git a/docs/0.8.0/components/progressIndicator.md b/docs/0.8.0/components/progressIndicator.md new file mode 100644 index 00000000..0ee2423f --- /dev/null +++ b/docs/0.8.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/0.8.0/components/progressIndicator_docs.md b/docs/0.8.0/components/progressIndicator_docs.md new file mode 100644 index 00000000..17b0c0b6 --- /dev/null +++ b/docs/0.8.0/components/progressIndicator_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Progress indicator +content_page: progressIndicator.md +--- diff --git a/docs/0.8.0/components/radioButtons.md b/docs/0.8.0/components/radioButtons.md new file mode 100644 index 00000000..26f9f608 --- /dev/null +++ b/docs/0.8.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, + onChanged: (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/0.8.0/components/radioButtons_docs.md b/docs/0.8.0/components/radioButtons_docs.md new file mode 100644 index 00000000..f1de452c --- /dev/null +++ b/docs/0.8.0/components/radioButtons_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Radio buttons +content_page: radioButtons.md +--- diff --git a/docs/0.8.0/components/sheets_bottom.md b/docs/0.8.0/components/sheets_bottom.md new file mode 100644 index 00000000..2baa559a --- /dev/null +++ b/docs/0.8.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/0.8.0/components/sheets_bottom_docs.md b/docs/0.8.0/components/sheets_bottom_docs.md new file mode 100644 index 00000000..02c9c021 --- /dev/null +++ b/docs/0.8.0/components/sheets_bottom_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Sheets bottom +content_page: sheets_bottom.md +--- diff --git a/docs/0.8.0/components/slider.md b/docs/0.8.0/components/slider.md new file mode 100644 index 00000000..c0a0cac0 --- /dev/null +++ b/docs/0.8.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/0.8.0/components/slider_docs.md b/docs/0.8.0/components/slider_docs.md new file mode 100644 index 00000000..29743fb1 --- /dev/null +++ b/docs/0.8.0/components/slider_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Slider +content_page: slider.md +--- diff --git a/docs/0.8.0/components/snackbars.md b/docs/0.8.0/components/snackbars.md new file mode 100644 index 00000000..dba997e8 --- /dev/null +++ b/docs/0.8.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/0.8.0/components/snackbars_docs.md b/docs/0.8.0/components/snackbars_docs.md new file mode 100644 index 00000000..fca7b1d2 --- /dev/null +++ b/docs/0.8.0/components/snackbars_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Snackbar +content_page: snackbars.md +--- diff --git a/docs/0.8.0/components/switches.md b/docs/0.8.0/components/switches.md new file mode 100644 index 00000000..a2fe2c06 --- /dev/null +++ b/docs/0.8.0/components/switches.md @@ -0,0 +1,55 @@ +--- +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 +return OdsSwitch( + checked = true, + onCheckedChange = { }, + 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/0.8.0/components/switches_docs.md b/docs/0.8.0/components/switches_docs.md new file mode 100644 index 00000000..04c9c0f1 --- /dev/null +++ b/docs/0.8.0/components/switches_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Switches +content_page: switches.md +--- diff --git a/docs/0.8.0/components/tabBar.md b/docs/0.8.0/components/tabBar.md new file mode 100644 index 00000000..75fe75f5 --- /dev/null +++ b/docs/0.8.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/0.8.0/components/tabBar_docs.md b/docs/0.8.0/components/tabBar_docs.md new file mode 100644 index 00000000..5de0c7de --- /dev/null +++ b/docs/0.8.0/components/tabBar_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Tab bar +content_page: tabBar.md +--- diff --git a/docs/0.8.0/components/textFields.md b/docs/0.8.0/components/textFields.md new file mode 100644 index 00000000..cd07d518 --- /dev/null +++ b/docs/0.8.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/0.8.0/components/textFields_docs.md b/docs/0.8.0/components/textFields_docs.md new file mode 100644 index 00000000..538518f2 --- /dev/null +++ b/docs/0.8.0/components/textFields_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: TextFields +content_page: textFields.md +--- diff --git a/docs/0.8.0/components/textInput.md b/docs/0.8.0/components/textInput.md new file mode 100644 index 00000000..a57f46df --- /dev/null +++ b/docs/0.8.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/0.8.0/components/textInput_docs.md b/docs/0.8.0/components/textInput_docs.md new file mode 100644 index 00000000..352e553a --- /dev/null +++ b/docs/0.8.0/components/textInput_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Text input +content_page: textInput.md +--- diff --git a/docs/0.8.0/components/toolBar.md b/docs/0.8.0/components/toolBar.md new file mode 100644 index 00000000..61f35099 --- /dev/null +++ b/docs/0.8.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/0.8.0/components/toolBar_docs.md b/docs/0.8.0/components/toolBar_docs.md new file mode 100644 index 00000000..06dfff8a --- /dev/null +++ b/docs/0.8.0/components/toolBar_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Tool bar +content_page: toolBar.md +--- diff --git a/docs/0.8.0/guidelines/spacings.md b/docs/0.8.0/guidelines/spacings.md new file mode 100644 index 00000000..0e67c796 --- /dev/null +++ b/docs/0.8.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/0.8.0/guidelines/spacings_docs.md b/docs/0.8.0/guidelines/spacings_docs.md new file mode 100644 index 00000000..9f829894 --- /dev/null +++ b/docs/0.8.0/guidelines/spacings_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Spacings +content_page: spacings.md +--- diff --git a/docs/0.8.0/guidelines/typography.md b/docs/0.8.0/guidelines/typography.md new file mode 100644 index 00000000..5019c000 --- /dev/null +++ b/docs/0.8.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/0.8.0/guidelines/typography_docs.md b/docs/0.8.0/guidelines/typography_docs.md new file mode 100644 index 00000000..da3bdf9a --- /dev/null +++ b/docs/0.8.0/guidelines/typography_docs.md @@ -0,0 +1,5 @@ +--- +layout: main +title: Typography +content_page: typography.md +--- diff --git a/docs/0.8.0/home_content.md b/docs/0.8.0/home_content.md new file mode 100644 index 00000000..e21ef66b --- /dev/null +++ b/docs/0.8.0/home_content.md @@ -0,0 +1,51 @@ +## 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: ^0.4.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'), + ); +``` diff --git a/docs/0.8.0/index.md b/docs/0.8.0/index.md new file mode 100644 index 00000000..46df08f7 --- /dev/null +++ b/docs/0.8.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/0.8.0/index_content.md b/docs/0.8.0/index_content.md new file mode 100644 index 00000000..208c823e --- /dev/null +++ b/docs/0.8.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/Gemfile.lock b/docs/Gemfile.lock index 3cb0b5f8..4be12634 100644 --- a/docs/Gemfile.lock +++ b/docs/Gemfile.lock @@ -57,9 +57,14 @@ GEM jekyll (>= 3.5, < 5.0) jekyll-feed (~> 0.9) jekyll-seo-tag (~> 2.1) + nokogiri (1.15.6-arm64-darwin) + racc (~> 1.4) + nokogiri (1.15.6-x86_64-darwin) + racc (~> 1.4) pathutil (0.16.2) forwardable-extended (~> 2.6) public_suffix (5.0.3) + racc (1.7.3) rb-fsevent (0.11.2) rb-inotify (0.10.1) ffi (~> 1.0) @@ -87,6 +92,7 @@ DEPENDENCIES jekyll-relative-links jekyll-remote-theme minima (~> 2.5) + nokogiri tzinfo (~> 1.2) tzinfo-data wdm (~> 0.1.1) diff --git a/docs/_config.yml b/docs/_config.yml index 35283ed7..dc39ab3b 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -1,13 +1,13 @@ - -# Build settings -baseurl: /ods-flutter +# If you update this file, please also update _config_netlify.yml with the exact same changes +plugins: +- jekyll-feed +- jekyll-relative-links relative_links: enabled: true collections: true remote_theme: Orange-OpenSource/ods-jekyll-theme -plugins: - - jekyll-feed - - jekyll-relative-links + +baseurl: /ods-flutter # Exclude from processing. # The following items will not be processed, by default. @@ -28,3 +28,29 @@ exclude: - vendor/cache/ - vendor/gems/ - vendor/ruby/ + +defaults: + - scope: + path: "" + values: + version: "" + - scope: + path: "0.4.0" + values: + version: "0.4.0" + - scope: + path: "0.5.0" + values: + version: "0.5.0" + - scope: + path: "0.6.0" + values: + version: "0.6.0" + - scope: + path: "0.7.0" + values: + version: "0.7.0" + - scope: + path: "0.8.0" + values: + version: "0.8.0" diff --git a/docs/_config_netlify.yml b/docs/_config_netlify.yml index a24a26cf..51f2899e 100644 --- a/docs/_config_netlify.yml +++ b/docs/_config_netlify.yml @@ -1,12 +1,12 @@ - -# Build settings +# If you update this file, please also update _config.yml with the exact same changes +plugins: +- jekyll-feed +- jekyll-relative-links relative_links: enabled: true collections: true remote_theme: Orange-OpenSource/ods-jekyll-theme -plugins: - - jekyll-feed - - jekyll-relative-links +baseurl: /ods-flutter # Exclude from processing. # The following items will not be processed, by default. @@ -27,3 +27,29 @@ exclude: - vendor/cache/ - vendor/gems/ - vendor/ruby/ + +defaults: + - scope: + path: "" + values: + version: "" + - scope: + path: "0.4.0" + values: + version: "0.4.0" + - scope: + path: "0.5.0" + values: + version: "0.5.0" + - scope: + path: "0.6.0" + values: + version: "0.6.0" + - scope: + path: "0.7.0" + values: + version: "0.7.0" + - scope: + path: "0.8.0" + values: + version: "0.8.0" diff --git a/docs/_data/data_menu.yml b/docs/_data/data_menu.yml new file mode 100644 index 00000000..82f96768 --- /dev/null +++ b/docs/_data/data_menu.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/_data/data_menu_0_4_0.yml b/docs/_data/data_menu_0_4_0.yml new file mode 100644 index 00000000..62ff8077 --- /dev/null +++ b/docs/_data/data_menu_0_4_0.yml @@ -0,0 +1,33 @@ +# 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: 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: Dialogs + url: /components/dialogs_docs + - page: Floating action buttons + url: /components/floatingActionButtons_docs + - page: Progress indicator + url: /components/progressIndicator_docs + - page: Slider + url: /components/slider_docs + diff --git a/docs/_data/data_menu_0_5_0.yml b/docs/_data/data_menu_0_5_0.yml new file mode 100644 index 00000000..6dc1c46a --- /dev/null +++ b/docs/_data/data_menu_0_5_0.yml @@ -0,0 +1,42 @@ +# 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: Progress indicator + url: /components/progressIndicator_docs + - page: Radio Buttons + url: /components/radioButtons_docs + - page: Slider + url: /components/slider_docs + - page: Switches + url: /components/switches_docs diff --git a/docs/_data/data_menu_0_6_0.yml b/docs/_data/data_menu_0_6_0.yml new file mode 100644 index 00000000..0b247b8e --- /dev/null +++ b/docs/_data/data_menu_0_6_0.yml @@ -0,0 +1,46 @@ +# 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: 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 diff --git a/docs/_data/data_menu_0_7_0.yml b/docs/_data/data_menu_0_7_0.yml new file mode 100644 index 00000000..af10c035 --- /dev/null +++ b/docs/_data/data_menu_0_7_0.yml @@ -0,0 +1,50 @@ +# 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: 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 diff --git a/docs/_data/data_menu_0_8_0.yml b/docs/_data/data_menu_0_8_0.yml new file mode 100644 index 00000000..82f96768 --- /dev/null +++ b/docs/_data/data_menu_0_8_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/_data/data_menus.yml b/docs/_data/data_menus.yml deleted file mode 100644 index b7ec1f01..00000000 --- a/docs/_data/data_menus.yml +++ /dev/null @@ -1,64 +0,0 @@ -# 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: Modules - subfolderitems: - - - 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/_data/team.yml b/docs/_data/team.yml index 1273413b..a91a23d5 100644 --- a/docs/_data/team.yml +++ b/docs/_data/team.yml @@ -1,3 +1,4 @@ +version: "" ODS_Flutter: - name: Sedraia Tayeb gh_pseudo: Tayebsed93 diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 2108ef45..37c883a7 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -1,11 +1,13 @@ diff --git a/docs/_layouts/detail.html b/docs/_layouts/detail.html index 99bf5089..7d6e9574 100644 --- a/docs/_layouts/detail.html +++ b/docs/_layouts/detail.html @@ -1,11 +1,13 @@ diff --git a/docs/_layouts/main.html b/docs/_layouts/main.html index 97bb723e..ccefcb82 100644 --- a/docs/_layouts/main.html +++ b/docs/_layouts/main.html @@ -1,11 +1,12 @@ @@ -64,8 +65,17 @@
ODS iOS navigation