diff --git a/CHANGELOG.md b/CHANGELOG.md index 831a9fbf..40582ee6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,7 +13,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed -- [DemoApp/SDK] Rename recirculation module to MoreApps, and use EmptyState Assets from Theme bundle ([#801](https://github.com/Orange-OpenSource/ods-ios/issues/801)) +- [Doc] Update components and modules documentation to add a description of the API ([#759](https://github.com/Orange-OpenSource/ods-ios/issues/759)) +- [DemoApp/SDK] Rename "Recirculation" module to "MoreApps", and use "EmptyState" assets from Theme bundle ([#801](https://github.com/Orange-OpenSource/ods-ios/issues/801)) - [Tooling] Update dependency SwiftFormat/CLI to v0.53.5 - [DemoApp] The main color names, visible on the screen are not vocalized ([#720](https://github.com/Orange-OpenSource/ods-ios/issues/720)) - [Doc] Improve release documentation diff --git a/OrangeDesignSystem/Sources/OrangeDesignSystem/Components/Cards/ODSCardSmall.swift b/OrangeDesignSystem/Sources/OrangeDesignSystem/Components/Cards/ODSCardSmall.swift index fa13c7dd..f62097b0 100644 --- a/OrangeDesignSystem/Sources/OrangeDesignSystem/Components/Cards/ODSCardSmall.swift +++ b/OrangeDesignSystem/Sources/OrangeDesignSystem/Components/Cards/ODSCardSmall.swift @@ -39,8 +39,8 @@ public struct ODSCardSmall: View { /// - title: Title displayed into the card. /// - imageSource: Image from source [ODSImage.Source] displayed into the card. /// - subtitle: Optional subtitle displayed into the card,d efault set to `nil` - /// - titleAccessibleLineLimit: The line limit to apply to the title is size category is accessibility category, default set to `nil` - /// - subtitleAccessibleLineLimit: The line limit to apply to the subtitle is size category is accessibility category, default set to `nil` + /// - titleAccessibleLineLimit: The line limit to apply to the title if size category is accessibility category, default set to `nil` + /// - subtitleAccessibleLineLimit: The line limit to apply to the subtitle if size category is accessibility category, default set to `nil` public init(title: Text, imageSource: ODSImage.Source, subtitle: Text? = nil, titleAccessibleLineLimit: Int? = nil, subtitleAccessibleLineLimit: Int? = nil) { self.title = title self.subtitle = subtitle diff --git a/OrangeDesignSystem/Sources/OrangeDesignSystem/Components/Lists/ODSListItem.swift b/OrangeDesignSystem/Sources/OrangeDesignSystem/Components/Lists/ODSListItem.swift index 8d162956..17d4a2c3 100644 --- a/OrangeDesignSystem/Sources/OrangeDesignSystem/Components/Lists/ODSListItem.swift +++ b/OrangeDesignSystem/Sources/OrangeDesignSystem/Components/Lists/ODSListItem.swift @@ -167,7 +167,7 @@ public struct ODSListItem: View { /// - title: The primary text of the list item /// - subtitle: The secondary text of the list item (optional) /// - subtitleNumberOfLines: If `subtitle` is provided, it is possible to limit the text - /// to 1 line or 2 lines. If set to nil, no restriction is applied (be carefull: this is not design compliant). + /// to 1 line or 2 lines. If set to nil, no restriction is applied (be careful: this is not design compliant). /// - leading: The leading icon of the list item (optional) /// public init( @@ -205,7 +205,7 @@ public struct ODSListItem: View { /// - title: The primary text of the list item /// - subtitle: The secondary text of the list item (optional) /// - subtitleNumberOfLines: If `subtitle` is provided, it is possible to limit the text - /// to 1 line or 2 lines. If set to nil, no restriction is applied (be carefull: this is not design compliant). + /// to 1 line or 2 lines. If set to nil, no restriction is applied (be careful: this is not design compliant). /// - leading: The leading icon of the list item (optional) /// - trailingText The text on trailing /// - trailingIButtonAction: The action the i button on trailing @@ -227,7 +227,7 @@ public struct ODSListItem: View { /// - title: The primary text of the list item /// - subtitle: The secondary text of the list item (optional) /// - subtitleNumberOfLines: If `subtitle` is provided, it is possible to limit the text - /// to 1 line or 2 lines. If set to nil, no restriction is applied (be carefull: this is not design compliant). + /// to 1 line or 2 lines. If set to nil, no restriction is applied (be careful: this is not design compliant). /// - leading: The leading icon of the list item (optional) /// - trailingText The text on trailing /// - trailingToggleIsOn: The binding to a property that determines whether the toggle is on or off. @@ -249,7 +249,7 @@ public struct ODSListItem: View { /// - title: The primary text of the list item /// - subtitle: The secondary text of the list item (optional) /// - subtitleNumberOfLines: If `subtitle` is provided, it is possible to limit the text - /// to 1 line or 2 lines. If set to nil, no restriction is applied (be carefull: this is not design compliant). + /// to 1 line or 2 lines. If set to nil, no restriction is applied (be carefull: this is not design compliant). /// - leading: The leading icon of the list item (optional) /// - trailingText The text on trailing /// - trailingCheckmarkIsSelected: The flag to indicate if checkmark is visbile or not. @@ -270,7 +270,7 @@ public struct ODSListItem: View { /// - title: The primary text of the list item /// - subtitle: The secondary text of the list item (optional) /// - subtitleNumberOfLines: If `subtitle` is provided, it is possible to limit the text - /// to 1 line or 2 lines. If set to nil, no restriction is applied (be carefull: this is not design compliant). + /// to 1 line or 2 lines. If set to nil, no restriction is applied (be careful: this is not design compliant). /// - leading: The leading icon of the list item (optional) /// - trailing: The trailing element /// diff --git a/OrangeDesignSystem/Sources/OrangeDesignSystem/Modules/MoreApps/Data/AppsPlusToMoreAppsMapper.swift b/OrangeDesignSystem/Sources/OrangeDesignSystem/Modules/MoreApps/Data/AppsPlusToMoreAppsMapper.swift index ea3f4348..2ff66799 100644 --- a/OrangeDesignSystem/Sources/OrangeDesignSystem/Modules/MoreApps/Data/AppsPlusToMoreAppsMapper.swift +++ b/OrangeDesignSystem/Sources/OrangeDesignSystem/Modules/MoreApps/Data/AppsPlusToMoreAppsMapper.swift @@ -25,8 +25,7 @@ struct AppsPlusToMoreAppsMapper { } func appsSection(from section: AppsPlusSectionDTO) -> MoreAppsAppsListSection { - MoreAppsAppsListSection(description: section.description, - apps: section.apps.map { appDetails(from: $0) }) + MoreAppsAppsListSection(description: section.description, apps: section.apps.map { appDetails(from: $0) }) } func appDetails(from details: AppsPlusAppDetailsDTO) -> MoreAppsAppDetails { diff --git a/OrangeDesignSystemDemo/OrangeDesignSystemDemo/Resources/en.lproj/Localizable.strings b/OrangeDesignSystemDemo/OrangeDesignSystemDemo/Resources/en.lproj/Localizable.strings index 468216c5..fd8bad9c 100644 --- a/OrangeDesignSystemDemo/OrangeDesignSystemDemo/Resources/en.lproj/Localizable.strings +++ b/OrangeDesignSystemDemo/OrangeDesignSystemDemo/Resources/en.lproj/Localizable.strings @@ -395,13 +395,13 @@ "screens.modules.empty_state.usage_no_data.buttonLabel" = "Search"; "screens.modules.empty_state.usage.alert" = "%@ clicked"; -// ============================================= +// ==================================== // MARK: - Screens - Modules - MoreApps -// ============================================= +// ==================================== "screens.modules.moreApps.title" = "MoreApps"; "screens.modules.moreApps.title.setup" = "MoreApps: Setup"; -"screens.modules.moreApps.description" = "MoreApps (AppsPlus was a OMD Essential component) making Orange Apps discovery easier than ever."; +"screens.modules.moreApps.description" = "MoreApps makes Orange Apps discovery easier than ever (based on AppsPlus which cas an OMD Essential component)"; "screens.modules.moreApps.option.flatten_apps_sections" = "Uncategorize apps"; "screens.modules.moreApps.option.use_embeded_data_source" = "Use local data"; "screens.modules.moreApps.option.cache_more_apps_icons" = "Cache apps images"; diff --git a/docs/components/banners.md b/docs/components/banners.md index 35bd9176..68a05df0 100644 --- a/docs/components/banners.md +++ b/docs/components/banners.md @@ -30,33 +30,16 @@ Please follow [accessibility criteria for development](https://a11y-guidelines.o ## Variants -### No button - -```swift -ODSBanner(text: "One to two lines is preferable on mobile and tablet.", - imageSource: .image(Image("placeholder", bundle: Bundle.ods))) -``` - -### One button - -The button is placed under the text. - -```swift -ODSBanner(text: "One to two lines is preferable on mobile and tablet.", - imageSource: .image(Image("placeholder", bundle: Bundle.ods))) { - Button("Button") { - // your action here - } -} -``` - ### Two buttons Button are placed under the text. +#### SwiftUI examples + +- Without image + ```swift -ODSBanner(text: "One to two lines is preferable on mobile and tablet.", - imageSource: .image(Image("placeholder", bundle: Bundle.ods))) { +ODSBanner(text: "One to two lines is preferable on mobile and tablet.") { Button("Button 1") { // your action here } @@ -67,10 +50,11 @@ ODSBanner(text: "One to two lines is preferable on mobile and tablet.", } ``` -### Without image - +- With image from resourcess + ```swift -ODSBanner(text: "One to two lines is preferable on mobile and tablet.") { +ODSBanner(text: "One to two lines is preferable on mobile and tablet.", + imageSource: .image(Image("placeholder", bundle: Bundle.ods))) { Button("Button 1") { // your action here } @@ -81,7 +65,8 @@ ODSBanner(text: "One to two lines is preferable on mobile and tablet.") { } ``` -### With image from url + +- With image from URL ```swift @@ -100,4 +85,52 @@ ODSBanner(text: "One to two lines is preferable on mobile and tablet.", } ``` +#### ODSBanner API + +| Parameter | Default value | Description | +|-------------------------------- |---------------------|------------------------------------------------------------------------------- | +| `text: Text` | | Text displayed into the banner. | +| `imageSource: ODSImage.Source?` | `nil` | Image displayed in the banner in a circle shape. | +| `firstButton: Button` | | Primary (leading) button displayed in the banner. | +| `secondButton: Button` | | Secondary (trailing) button displayed into the banner next to the primary one. | + +### One button + +The button is placed under the text. + +#### SwiftUI example + +```swift +ODSBanner(text: "One to two lines is preferable on mobile and tablet.", + imageSource: .image(Image("placeholder", bundle: Bundle.ods))) { + Button("Button") { + // your action here + } +} +``` + +#### ODSBanner API + +| Parameter | Default value | Description | +|---------------------------------|--------------------|--------------------------------------------------| +| `text: Text` | | Text displayed into the banner. | +| `imageSource: ODSImage.Source?` | `nil` | Image displayed in the banner in a circle shape. | +| `button: Button` | | Primary button displayed in the banner. | + + +### No button + +#### SwiftUI example + +```swift +ODSBanner(text: "One to two lines is preferable on mobile and tablet.", + imageSource: .image(Image("placeholder", bundle: Bundle.ods))) +``` + +#### ODSBanner API + +| Parameter | Default value | Description | +|---------------------------------|--------------------|--------------------------------------------------| +| `text: Text` | | Text displayed into the banner. | +| `imageSource: ODSImage.Source?` | `nil` | Image displayed in the banner in a circle shape. | diff --git a/docs/components/barsTool.md b/docs/components/barsTool.md index a229245f..f0c848c0 100644 --- a/docs/components/barsTool.md +++ b/docs/components/barsTool.md @@ -55,6 +55,29 @@ NavigationView { ``` +#### odsToolBar Modifier API + +| Parameter | Default value | Description | +|---------------------------------|--------------------|---------------------------------------| +| `items: ODSToolbarLabeledItems` | | Text items displayed into the banner. | + + +#### ODSToolbarLabeledItems API + +| Parameter | Default value | Description | +|-------------------------------------------|--------------------|---------------------------------------------------- | +| `description1: ODSToolbarLabelDesription` | | Primary description of item in tool bar | +| `description2: ODSToolbarLabelDesription` | | Secondary description of item in tool bar | +| `description3: ODSToolbarLabelDesription?`| `nil` | Terciary (optional) description of item in tool bar | + +#### ODSToolbarLabelDesriptionF API + +| Parameter | Default value | Description | +|--------------------------------|--------------------|-----------------------------| +| `text: String | | Text displayed in the item | +| `action: @escaping () -> Void` | | Action when item is clicked | +
+ ### With icon items ![tool bar icons light](images/bars_tool_icons_light.png) ![tool bar icons dark](images/bars_tool_icons_dark.png) @@ -85,6 +108,33 @@ NavigationView { ``` +#### odsToolBar Modifier API + +| Parameter | Default value | Description | +|------------------------------|----------------|---------------------------------------| +| `items: ODSToolbarIconItems` | | Icon items displayed into the banner. | + + +#### ODSToolbarIconsItems API + +| Parameter | Default value | Description | +|------------------------------------------|---------------|----------------------------------------------------| +| `description1: ODSToolbarIconDesription` | | First description of item in tool bar | +| `description2: ODSToolbarIconDesription` | | Second description of item in tool bar | +| `description3: ODSToolbarIconDesription?`| `nil` | Third (optional) description of item in tool bar | +| `description4: ODSToolbarIconDesription?`| `nil` | Fourth (optional) description of item in tool bar | +| `description5: ODSToolbarIconDesription?`| `nil` | Fifth (optional) description of item in tool bar | + + +#### ODSToolbarIconDesription API + +| Parameter | Default value | Description | +|--------------------------------|---------------|-----------------------------| +| `systemName: String | | System name of the image | +| `action: @escaping () -> Void` | | Action when item is clicked | +
+ + ## 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. diff --git a/docs/components/buttons.md b/docs/components/buttons.md index 86013d1f..e37ef536 100644 --- a/docs/components/buttons.md +++ b/docs/components/buttons.md @@ -64,9 +64,9 @@ Button variants range in style to denote emphasis. Use different styles and not ![Buttons lowest emphasis disabled](images/buttons_emphasis_lowest_disabled.png) ![Buttons lowest emphasis](images/buttons_emphasis_lowest.png) - -- **Implementation** +#### SwiftUI example + ```swift // High emphasis ODSButton(text: Text("Some text"), @@ -79,6 +79,18 @@ ODSButton(text: Text("Some text"), emphasis: .lowest) {} ``` +#### ODSButton API + +| Parameter | Default value | Description | +|-----------------------------|--------------------|-----------------------------------------------------------------------------------| +| `text: Text` | | Text displayed into the banner. | +| `image: Image?` | `nil` | Icon displayed in the button before the text. | +| `emphasis: Emphasis` | | The button's emphasis'. | +| `fullWidth: Bool` | `false` | Defines the size of the button layout. Set to `true` means button takes all available space horizontally. Set to `false`, the size of the button is limited to the size of the text added by a padding round it. +| `action: () -> Void` | | Callback invoked on button click. | + +
+ ### Functional button If required, colour versions can also be used to inform users of positive or negative destructive actions. @@ -93,6 +105,8 @@ If required, colour versions can also be used to inform users of positive or neg ![Buttons functional negative disabled](images/buttons_functionnal_disabled.png) ![Buttons functional negative](images/buttons_functional_negative.png) +#### SwiftUI example + ```swift // Negative button ODSFunctionalButton(text: Text("Some text"), style: .negative) @@ -113,12 +127,27 @@ If required, colour versions can also be used to inform users of positive or neg .disabled(true) ``` +#### ODSFunctionalButton API + + +| Parameter | Default value | Description | +|-------------------------------------------|--------------------|-----------------------------------------------------------------------------------| +| `text: Text` | | Text displayed into the banner. | +| `image: Image?` | `nil` | Icon displayed in the button before the text. | +| `style: ODSFunctionalButton.Style` | | Controls the style of the button. Use `ODSFunctionalButton.Style.positive`/`ODSFunctionalButton.Style.negative` to get a green/red button. +| `fullWidth: Bool` | `false` | Defines the size of the button layout. Set to `true` means button takes all available space horizontally. Set to `false`, the size of the button is limited to the size of the text added by a padding round it. +| `action: () -> Void` | | Callback invoked on button click. | +
+ + ### Icon button Plain buttons are the most ubiquitous component found throughout applications. Consisting an icon, they are the most simple button style. ![Buttons icon](images/buttons_icon.png) +#### SwiftUI example + ```swift // icon with system asset ODSIconButton(image: Image(systemName: "info.circle")) {} @@ -127,5 +156,9 @@ ODSIconButton(image: Image(systemName: "info.circle")) {} ODSIconButton(image: Image("Add")) {} ``` +#### ODSIconButton API - +| Parameter | Default value | Description | +|-----------------------------|---------------|-----------------------------------| +| `image: Image` | | Icon displayed in the button. | +| `action: () -> Void` | | Callback invoked on button click. | diff --git a/docs/components/cards.md b/docs/components/cards.md index 633a1e92..056ccef4 100644 --- a/docs/components/cards.md +++ b/docs/components/cards.md @@ -40,7 +40,7 @@ This card is composed of two parts: ![Vertical image first card light](images/card_vertical_image_first_light.png) ![Vertical image first card dark](images/card_vertical_image_first_dark.png) -> **Implementation** +#### SwiftUI example Card is configured like this: @@ -61,6 +61,22 @@ ODSCardVerticalImageFirst( } ``` +#### ODSCardVerticalImageFirst API + +| Parameter | Default value | Description | +|-------------------------------------|--------------------|-----------------------------------------------------------------------------------| +| `title: Text` | | Title displayed into the card. | +| `imageSource: ODSImage.Source` | | Image displayed in the card. | +| `subtitle: Text?` | `nil` | Subtitle (optional) displayed into the card. | +| `text: Text` | `nil` | Text (optional) displayed into the card. | +| `firstButton: Button` | | Primary (leading) button displayed in the card. | +| `secondButton: Button` | | Secondary (trailing) button displayed into the card next to the first one. | + +**Remarks:** +- To get a card without button, use the right initializer without `firstButton` and `secondButton`. +- To handle action when card is clicked, add it into a `Button` or in `NnavigationLink` or add a `.onTapGesture` modifier.

+ + ### Vertical Header First Card This is a full width card displaying with a title and a thumbnail on top as first element. @@ -72,7 +88,7 @@ This card is composed of three parts: ![Vertical header first card light](images/card_vertical_header_first_light.png) ![Vertical header first card dark](images/card_vertical_header_first_dark.png) -> **Implementation** +#### SwiftUI example Card is configured like this: @@ -95,6 +111,23 @@ ODSCardVerticalHeaderFirst( } ``` +#### ODSCardVerticalHeaderFirst API + +| Parameter | Default value | Description | +|-------------------------------------|------------------- |-----------------------------------------------------------------------------------| +| `title: Text` | | Title displayed into the card. | +| `imageSource: ODSImage.Source` | | Image displayed in the card. | +| `subtitle: Text?` | `nil` | Subtitle (optional) displayed into the card. | +| `thumbnailSource: ODSImage.Source?` | `nil` | Thumbnail displayed into the card next to the title: avatar, logo or icon. | +| `text: Text` | `nil` | Text (optional) displayed into the card. | +| `firstButton: Button` | | Primary (leading) button displayed in the card. | +| `secondButton: Button` | | Secondary (trailing) button displayed into the card next to the first one. | + +**Remarks:** +- To get a card without button, use the right initializer without `firstButton` and `secondButton`. +- To handle action when card is clicked, add it into a `Button` or in `NnavigationLink` or add a `.onTapGesture` modifier.

+ + ### Horizontal Card This is a full width card displaying with image on left and content with texts on the right. Additonal action buttons can be added at the bottom of the card. @@ -106,7 +139,7 @@ Thes content is composed by: ![Horizontal card light](images/card_horizontal_light.png) ![Horizontal card dark](images/card_horizontal_dark.png) -> **Implementation** +#### SwiftUI example Card is configured like this: @@ -129,6 +162,23 @@ ODSCardHorizontal( } ``` +#### ODSCardHorizontal API + +| Parameter | Default value | Description | +|-------------------------------------|--------------------|-----------------------------------------------------------------------------------| +| `title: Text` | | Title displayed into the card. | +| `imageSource: ODSImage.Source` | | Image displayed in the card. | +| `imagePosition: Self.ImagePosition` | `.leading` | The side where image is placed. | +| `subtitle: Text?` | `nil` | Subtitle (optional) displayed into the card. | +| `text: Text` | `nil` | Text (optional) displayed into the card. | +| `firstButton: Button` | | Primary (leading) button displayed in the card. | +| `secondButton: Button` | | Secondary (trailing) button displayed into the card next to the first one. | + +**Remarks:** +- To get a card without button, use the right initializer without `firstButton` and `secondButton`. +- To handle action when card is clicked, add it into a `Button` or in `NnavigationLink` or add a `.onTapGesture` modifier.

+ + ### Small Card The small card if prefered for two-column portrait mobile screen display. @@ -136,7 +186,7 @@ As it is smaller than full-width cards, it contains only title and subtitle (opt ![Small card light](images/card_small_light.png) ![Small card dark](images/card_small_dark.png) -> **Implementation** +#### SwiftUI example Card is configured like this: @@ -148,7 +198,21 @@ ODSCardSmall( ) ``` -How to add Small Card in Grid +#### ODSCardSmall API + +| Parameter | Default value | Description | +|-------------------------------------|--------------------|------------------------------------------------------------------------------------| +| `title: Text` | | Title displayed into the card. | +| `imageSource: ODSImage.Source` | | Image displayed in the card. | +| `subtitle: Text?` | `nil` | Subtitle (optional) displayed into the card. | +| `titleAccessibleLineLimit: Int?` | `nil` | The line limit to apply to the title if size category is accessibility category | +| `subtitleAccessibleLineLimit: Int?` | `nil` | The line limit to apply to the subtitle if size category is accessibility category | + +**Remark:** +- To handle action when card is clicked, add it into a `Button` or in `NnavigationLink` or add a `.onTapGesture` modifier.

+ + +#### How to add Small Card in Grid ```swift class Model { diff --git a/docs/components/chips.md b/docs/components/chips.md index 264df252..65ebb912 100644 --- a/docs/components/chips.md +++ b/docs/components/chips.md @@ -35,6 +35,8 @@ An alternative to action chips are buttons, which should appear persistently and ![Light action chip](images/chips_action_light.png) ![Dark action chip](images/chips_action_dark.png) +#### SwiftUI example + ``` swift ODSActionChip( text: Text("chip text"), @@ -43,7 +45,18 @@ ODSActionChip( ) ``` -To disable the chip call the `.disabled` on View. + +#### ODSActionChip API + +| Parameter | Default value | Description | +|-----------------------------|--------------------|---------------------------------------------------------------------------------------------| +| `text: Text` | | Text to be displayed into the chip. | +| `leadingIcon: Image?` | `nil` | Optional leading icon to be displayed at the start of the chip, preceding the content text. | +| `action: () -> Void` | | The action when chip is clicked. | + +**Remarks:** +- To disable the chip call the `.disabled` on View.

+ ### Input chip @@ -52,6 +65,8 @@ Input chips represent a complex piece of information in compact form, such as an ![Light input chip](images/chips_input_light.png) ![Dark input chip](images/chips_input_dark.png) +#### SwiftUI example + ``` swift // Input chip with leading filled with icon or image for resources @@ -63,6 +78,18 @@ ODSInputChip( ) ``` +#### ODSInputChip API + +| Parameter | Default value | Description | +|-----------------------------------|--------------------|-----------------------------------------------------------------------------------------------------------------| +| `text: Text` | | Text to be displayed into the chip. | +| `leadingAvatar: ODSImage.Source?` | `nil` | Optional leading avatar to be displayed in a circle shape at the start of the chip, preceding the content text. | +| `action: () -> Void` | | The action when chip is clicked. | +| `removeAction: () -> Void` | | The action when cross is clicked. | + +
+ + ### 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. @@ -72,6 +99,8 @@ Choice chips allow selection of a single chip from a set of options. Choice chip ![Light input chip](images/chips_choice_light.png) ![Dark input chip](images/chips_choice_dark.png) +#### SwiftUI example + ``` swift enum Ingredient: String, CaseIterable { case chocolate, vanilla, strawberry @@ -89,6 +118,17 @@ ODSChoiceChipView( ) ``` +#### ODSChoiceChipView API + +| Parameter | Default value | Description | +|-----------------------------------|--------------------|-------------------------------------------------| +| `ODSChoiceChip` | | The chip value and associated text description. | +| `selected: Bool` | | Controls the selected state of the chip. | +| `action: () -> Void` | | The action when chip is clicked. | + + +**ODSChoiceChipPicker** + In order to display a set of choice chips you can follow this example: ``` swift @@ -120,6 +160,8 @@ ODSChoiceChipPicker( ) ``` +
+ ### Filter chip Filter chips use tags or descriptive words to filter content. Filter chips allow selection of a set of chips from a set of options. Its usage is usefull to apply a filtering on a list of elmeents. @@ -131,6 +173,8 @@ Filter chips use tags or descriptive words to filter content. Filter chips allow ![Light filter chips with avatar](images/chips_filter_avatar_light.png) ![Dark filter chips with avatar](images/chips_filter_avatar_dark.png) +#### SwiftUI example + ``` swift enum Ingredient: String, CaseIterable { case chocolate, vanilla, strawberry @@ -147,6 +191,27 @@ ODSFilterChipView( ) ``` +#### ODSFilterChipView API + +| Parameter | Default value | Description | +|-----------------------------------|--------------------|--------------------------------------------------------------------| +| `chip: ODSFilterChip` | | The chip value and associated text description and leading avatar. | +| `selected: Bool` | | Controls the selected state of the chip. | +| `action: () -> Void` | | The action when chip is clicked. | + + +#### ODSFilterChip API + +| Parameter | Default value | Description | +|--------------------------------|--------------------|---------------------------------------------------------------| +| `text: Text` | | Text to be displayed into the chip | +| `leading: ODSImage.Source?` | `nil` | Avatar to be displayed in a circle shape, preceding the text. | +| `value: Value` | | The value associated to the chip. | +| `disabled: Bool` | `false` | Controls the disbaled state of the chip. | + + +**ODSFilterChipPicker** + As the choice chip, to simplify the chips placement and alignment, you can also use the __ODSFilterChipsPicker__ like this: ``` swift diff --git a/docs/components/listItem.md b/docs/components/listItem.md index a56d4d25..287d2539 100644 --- a/docs/components/listItem.md +++ b/docs/components/listItem.md @@ -49,6 +49,8 @@ For standard items, trailing icons can be added. Two types of icons are proposed The standard item can be used in a `NavigationLink` (for example, display more details) +#### SwiftUI example + ```swift // Build the List view using ODSListItem withount navigation @@ -92,6 +94,8 @@ List { The selection list items can be used to enumerate data as list in order to select elements. +#### SwiftUI example + ```swift struct MyMultipleOptionsSelection: View { @@ -124,6 +128,17 @@ struct MyMultipleOptionsSelection: View { } ``` + +#### ODSListItem API + +| Parameter | Default value | Description | +|-------------------------------------------------|--------------------|---------------------------------------------------| +| `title: Text` | | The primary text of the list item. | +| `subtitle: Text?` | `nil` | The secondary (optional) text of the list item. | +| `subtitleNumberOfLines: SubtitleNumberOfLines?` | `.one` | To limit the subtitle text to 1 or 2 lines. | +| `leading: Self.Leading?` | `nil` | The leading icon (optional) of the list item. | +| `trailing: Self.Trailing?` | `nil` | The trailing element (optional) of the list item. | + **Note 1:** 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 item with `trailingCheckmarkIsSelected` and `trailingToggleIsOn` parameters in a `NavigationLink`. **Note 2:**Don’t forget to apply the style on: diff --git a/docs/modules/emptyState.md b/docs/modules/emptyState.md index e7061cfe..dcade1c7 100644 --- a/docs/modules/emptyState.md +++ b/docs/modules/emptyState.md @@ -27,7 +27,7 @@ The ODS Empty states module is built to support accessibility criteria and is re ![Empty state light](images/empty_state_light.png) ![Empty state dark](images/empty_state_dark.png) -### SwiftUI +### SwiftUI example To integrate an ODS Empty state into your app, you can use `ODSEmptyStateView` as shown below: @@ -44,9 +44,9 @@ ODSEmptyStateView( #### ODSEmptyStateView API -| Parameter | Default value | Description | -|-------------------------------------|-----------------------------------------------------------------------------------|-----------------------------------------------------------------------------------| +| Parameter | Default value | Description | +|-----------------------------------|-----------------------------------------------------------------------------------|-----------------------------------------------------------------------------------| | `title: Text` | | The title of the screen displayed below the image. For example "File is missing". | -| `text: Text?` | `null` | Text displayed below the title | -| `image: Image` | `Image("il_emptyStateUserCleared", bundle: Bundle.ods)` | Image displayed centered in the composable | -| `button: Button?` | `null` | The button to add below the text | +| `text: Text?` | `nil` | Text displayed below the title | +| `image: Image` | `Image("il_emptyStateUserCleared", bundle: Bundle.ods)` | Image displayed centered in the view | +| `button: Button?` | `nil` | The button to add below the text |