feat: add bullet list component (#513) (#1279)

Closes #513

Add bullet list component
WARNING: Missing a11y review

Assisted-by: GitHub Copilot
Acked-by: Ahmed Amine Zribi <ahmedamine.zribi@sofrecom.com>
Tested-by: Hamza Amarir <hamza.amarir@orange.com>
Tested-by: Jérôme Regnier <jerome.regnier@orange.com>
Reviewed-by: Pierre-Yves Lapersonne <pierreyves.lapersonne@orange.com>
Reviewed-by: Copilot <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Ludovic Pinel <ludovic.pinel@orange.com>
Co-authored-by: Pierre-Yves Lapersonne <pierreyves.lapersonne@orange.com>
Signed-off-by: Pierre-Yves Lapersonne <pierreyves.lapersonne@orange.com>

Author: ludovic35

AGENTS.md

@@ -241,7 +241,7 @@ Everything is available on [our guidelines](https://a11y-guidelines.orange.com/f
 
 - Minimum Swift 6.2 (e.g. 6.2.3)
 - Xcode 26.2 or later 
-- Minimum deployment: iOS 15.0, iPad0S 15.0, macOS 15.0, visionOS 1.0, watchOS 11.6, tvOS 16.6
+- Minimum deployment: iOS 15.0, iPad0S 15.0, macOS 13.0, visionOS 1.0, watchOS 11.6, tvOS 16.6
 - Apple Developer account for device testing
 
 ## 10. Building commands
@@ -515,6 +515,40 @@ or only with an image:
 OUDSButton(icon: Image("image_name"), accessibilityLabel: "Some label") { /* the action to process */ }
 ```
 
+### Content Display
+
+#### Bullet list
+
+A bullet list is a list of elements which can be ordered or not. OUDS bullet lists can have up to 3 levels of depth.
+A bullet list can be unordered (default), ordered or bare (i.e. without leading chips not indices).
+
+Its documentation is [available online](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudsbulletlist/).
+
+A bullet list by default is not ordered:
+```swift
+OUDSBulletList {
+    OUDSBulletList.Item("Label 1")
+    OUDSBulletList.Item("Label 2")
+    OUDSBulletList.Item("Label 3")
+}
+```
+
+A bullet lsit can have several levels of depth by nesting items
+```swift
+OUDSBulletList(type: .ordered) {
+    OUDSBulletList.Item("Label 1") {
+        OUDSBulletList.Item("Label 1.1") {
+            OUDSBulletList.Item("Label 1.1.1")
+            OUDSBulletList.Item("Label 1.1.2")
+        }
+    }
+    OUDSBulletList.Item("Label 2")
+        OUDSBulletList.Item("Label 3")
+    }
+```
+
+### Controls
+
 ##### Checkbox
 
 A checkbox can be alone or can have texts. It is not a native iOS component. It is a square button which can be selected or not.

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - `alert` component tokens
+- Bullet List component (Orange-OpenSource/ouds-ios#513)
 
 ### Changed
 

NOTICE.txt

@@ -33,6 +33,13 @@ Any use or displaying shall constitute an infringement under intellectual proper
 ./OUDS/Core/Themes/Orange/Sources/Resources/Icons.xcassets/Components/Alert/ic_alert_warning_external_shape.imageset/ic_alert_warning_external_shape.svg
 ./OUDS/Core/Themes/Orange/Sources/Resources/Icons.xcassets/Components/Alert/ic_alert_warning_internal_shape.imageset/ic_alert_warning_internal_shape.svg
 ./OUDS/Core/Themes/Orange/Sources/Resources/Icons.xcassets/Components/Alert/ic_alert_warning.imageset/ic_alert_warning.svg
+./OUDS/Core/Themes/Orange/Sources/Resources/Icons.xcassets/Components/BulletList/ic_bullet_list_level0.imageset/ic_bullet_list_level0.svg
+./OUDS/Core/Themes/Orange/Sources/Resources/Icons.xcassets/Components/BulletList/ic_bullet_list_level0.imageset/ic_bullet_list_level0_rtl.svg
+./OUDS/Core/Themes/Orange/Sources/Resources/Icons.xcassets/Components/BulletList/ic_bullet_list_level1.imageset/ic_bullet_list_level1.svg
+./OUDS/Core/Themes/Orange/Sources/Resources/Icons.xcassets/Components/BulletList/ic_bullet_list_level0.imageset/ic_bullet_list_level1_rtl.svg
+./OUDS/Core/Themes/Orange/Sources/Resources/Icons.xcassets/Components/BulletList/ic_bullet_list_level2.imageset/ic_bullet_list_level2.svg
+./OUDS/Core/Themes/Orange/Sources/Resources/Icons.xcassets/Components/BulletList/ic_bullet_list_level0.imageset/ic_bullet_list_level2_rtl.svg
+./OUDS/Core/Themes/Orange/Sources/Resources/Icons.xcassets/Components/BulletList/ic_bullet_list_tick.imageset/ic_bullet_list_tick.svg
 ./OUDS/Core/Themes/Orange/Sources/Resources/Icons.xcassets/Components/Checkbox/ic_checkbox_selected.imageset/ic_checkbox_selected.svg
 ./OUDS/Core/Themes/Orange/Sources/Resources/Icons.xcassets/Components/Checkbox/ic_checkbox_undeterminate.imageset/ic_checkbox_undeterminate.svg
 ./OUDS/Core/Themes/Orange/Sources/Resources/Icons.xcassets/Components/Link/ic_link_next.imageset/ic_link_next.svg
@@ -57,6 +64,10 @@ Any use or displaying shall constitute an infringement under intellectual proper
 ./OUDS/Core/Themes/Sosh/Sources/Resources/Icons.xcassets/Components/Alert/ic_alert_warning_external_shape.imageset/ic_alert_warning_external_shape.svg
 ./OUDS/Core/Themes/Sosh/Sources/Resources/Icons.xcassets/Components/Alert/ic_alert_warning_internal_shape.imageset/ic_alert_warning_internal_shape.svg
 ./OUDS/Core/Themes/Sosh/Sources/Resources/Icons.xcassets/Components/Alert/ic_alert_warning.imageset/ic_alert_warning.svg
+./OUDS/Core/Themes/Sosh/Sources/Resources/Icons.xcassets/Components/BulletList/ic_bullet_list_level0.imageset/ic_bullet_list_level0.svg
+./OUDS/Core/Themes/Sosh/Sources/Resources/Icons.xcassets/Components/BulletList/ic_bullet_list_level1.imageset/ic_bullet_list_level1.svg
+./OUDS/Core/Themes/Sosh/Sources/Resources/Icons.xcassets/Components/BulletList/ic_bullet_list_level2.imageset/ic_bullet_list_level2.svg
+./OUDS/Core/Themes/Sosh/Sources/Resources/Icons.xcassets/Components/BulletList/ic_bullet_list_tick.imageset/ic_bullet_list_tick.svg
 ./OUDS/Core/Themes/Sosh/Sources/Resources/Icons.xcassets/Components/Checkbox/ic_checkbox_selected.imageset/ic_checkbox_selected.svg
 ./OUDS/Core/Themes/Sosh/Sources/Resources/Icons.xcassets/Components/Checkbox/ic_checkbox_undeterminate.imageset/ic_checkbox_undeterminate.svg
 ./OUDS/Core/Themes/Sosh/Sources/Resources/Icons.xcassets/Components/Chip/ic_chip_tick.imageset/ic_chip_tick.svg
@@ -85,6 +96,10 @@ Any use or displaying shall constitute an infringement under intellectual proper
 ./OUDS/Core/Themes/Wireframe/Sources/Resources/Icons.xcassets/Components/Alert/ic_alert_warning_external_shape.imageset/ic_alert_warning_external_shape.svg
 ./OUDS/Core/Themes/Wireframe/Sources/Resources/Icons.xcassets/Components/Alert/ic_alert_warning_internal_shape.imageset/ic_alert_warning_internal_shape.svg
 ./OUDS/Core/Themes/Wireframe/Sources/Resources/Icons.xcassets/Components/Alert/ic_alert_warning.imageset/ic_alert_warning.svg
+./OUDS/Core/Themes/Wireframe/Sources/Resources/Icons.xcassets/Components/BulletList/ic_bullet_list_level0.imageset/ic_bullet_list_level0.svg
+./OUDS/Core/Themes/Wireframe/Sources/Resources/Icons.xcassets/Components/BulletList/ic_bullet_list_level1.imageset/ic_bullet_list_level1.svg
+./OUDS/Core/Themes/Wireframe/Sources/Resources/Icons.xcassets/Components/BulletList/ic_bullet_list_level2.imageset/ic_bullet_list_level2.svg
+./OUDS/Core/Themes/Wireframe/Sources/Resources/Icons.xcassets/Components/BulletList/ic_bullet_list_tick.imageset/ic_bullet_list_tick.svg
 ./OUDS/Core/Themes/Wireframe/Sources/Resources/Icons.xcassets/Components/Checkbox/ic_checkbox_selected.imageset/ic_checkbox_selected.svg
 ./OUDS/Core/Themes/Wireframe/Sources/Resources/Icons.xcassets/Components/Checkbox/ic_checkbox_undeterminate.imageset/ic_checkbox_undeterminate.svg
 ./OUDS/Core/Themes/Wireframe/Sources/Resources/Icons.xcassets/Components/Chip/ic_chip_tick.imageset/ic_chip_tick.svg

OUDS/Core/Components/Sources/Actions/Button/OUDSButton.swift

@@ -143,6 +143,7 @@ public struct OUDSButton: View {
     }
 
     /// Represents the appearance of an OUDS button, i.e. a kind of type
+    /// - Since: 0.10.0
     public enum Appearance {
         /// Default button is used for action
         case `default`
@@ -161,6 +162,7 @@ public struct OUDSButton: View {
     }
 
     /// Defines the style of the button, e.g. loading or not
+    /// - Since: 0.10.0
     public enum Style {
         /// The default style, the button could be in prossed, hover, disabled or enabled internal state
         case `default`

OUDS/Core/Components/Sources/ContentDisplay/BulletList/Internal/Bullet.swift

@@ -0,0 +1,200 @@
+//
+// Software Name: OUDS iOS
+// SPDX-FileCopyrightText: Copyright (c) Orange SA
+// SPDX-License-Identifier: MIT
+//
+// This software is distributed under the MIT license,
+// the text of which is available at https://opensource.org/license/MIT/
+// or see the "LICENSE" file for more details.
+//
+// Authors: See CONTRIBUTORS.txt
+// Software description: A SwiftUI components library with code examples for Orange Unified Design System
+//
+
+import OUDSFoundations
+import OUDSTokensSemantic
+import SwiftUI
+
+// MARK: - Bullet
+
+struct Bullet: View {
+
+    // MARK: Properties
+
+    let type: OUDSBulletList.`Type`
+    let level: OUDSBulletList.NestedLevel
+    let textStyle: OUDSBulletList.TextStyle
+    let isBold: Bool
+    let index: UInt8
+
+    @Environment(\.theme) private var theme
+    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
+    @Environment(\.verticalSizeClass) private var verticalSizeClass
+    @Environment(\.dynamicTypeSize) private var dynamicTypeSize: DynamicTypeSize
+
+    // MARK: Body
+
+    var body: some View {
+        HStack(alignment: .center) {
+            switch type {
+            case let .unordered(icon, isBranded):
+                UnorderedBullet(icon: icon, isBranded: isBranded, level: level, textStyle: textStyle)
+            case .ordered:
+                OrderedBullet(level: level, textStyle: textStyle, isBold: isBold, index: index)
+            case .bare:
+                Rectangle().fill(.clear)
+            }
+        }
+        .frame(minWidth: minWidth, alignment: .trailing)
+        .frame(maxHeight: maxHeight, alignment: .center)
+    }
+
+    // MARK: Private helpers
+
+    private var minWidth: CGFloat {
+        let token = switch textStyle {
+        case .bodyLarge:
+            theme.sizes.iconWithBodyLargeSizeMedium
+        case .bodyMedium:
+            theme.sizes.iconWithBodyMediumSizeMedium
+        }
+
+        let rawSize = token.dimension(for: horizontalSizeClass ?? .regular)
+
+        // Ordered type, means bullet is a text, so for dynamic font the
+        // width of the container must be adjusted.
+        if case .ordered = type {
+            return rawSize * dynamicTypeSize.percentageRate / 100
+        } else {
+            return rawSize
+        }
+    }
+
+    private var maxHeight: CGFloat {
+        let token = switch textStyle {
+        case .bodyLarge:
+            theme.fonts.lineHeightBodyLarge
+        case .bodyMedium:
+            theme.fonts.lineHeightBodyMedium
+        }
+
+        let rawSize = token.lineHeight(for: verticalSizeClass ?? .regular)
+        return rawSize * dynamicTypeSize.percentageRate / 100
+    }
+}
+
+// MARK: - Unordered Bullet
+
+struct UnorderedBullet: View {
+
+    // MARK: Properties
+
+    let icon: OUDSBulletList.UnorderedIcon
+    let isBranded: Bool
+    let level: OUDSBulletList.NestedLevel
+    let textStyle: OUDSBulletList.TextStyle
+
+    @Environment(\.theme) private var theme
+    @Environment(\.verticalSizeClass) private var verticalSizeClass
+
+    // MARK: Body
+
+    var body: some View {
+        asset
+            .resizable()
+            .renderingMode(.template)
+            .oudsForegroundColor(color)
+            .frame(width: assetSize, height: assetSize, alignment: .center)
+    }
+
+    // MARK: Private helpers
+
+    private var asset: Image {
+        switch icon {
+        case .bullet:
+            Image(decorative: bulletAssetName, bundle: theme.resourcesBundle)
+        case .tick:
+            Image(decorative: "ic_bullet_list_tick", bundle: theme.resourcesBundle)
+        case let .free(image, _):
+            image
+        }
+    }
+
+    private var bulletAssetName: String {
+        switch level {
+        case .zero:
+            "ic_bullet_list_level0"
+        case .one:
+            "ic_bullet_list_level1"
+        case .two:
+            "ic_bullet_list_level2"
+        }
+    }
+
+    private var color: MultipleColorSemanticToken {
+        isBranded ? theme.colors.contentBrandPrimary : theme.colors.contentDefault
+    }
+
+    private var assetSize: CGFloat {
+        switch textStyle {
+        case .bodyLarge:
+            theme.sizes.iconWithBodyLargeSizeSmall.dimension(for: verticalSizeClass ?? .regular)
+        case .bodyMedium:
+            theme.sizes.iconWithBodyMediumSizeSmall.dimension(for: verticalSizeClass ?? .regular)
+        }
+    }
+}
+
+// MARK: - Ordered Bullet
+
+struct OrderedBullet: View {
+
+    // MARK: Properties
+
+    let level: OUDSBulletList.NestedLevel
+    let textStyle: OUDSBulletList.TextStyle
+    let isBold: Bool
+    let index: UInt8
+
+    // MARK: Body
+
+    var body: some View {
+        Group {
+            switch level {
+            case .zero:
+                Text(Self.levelZeroBullet(for: index))
+            case .one:
+                Text(Self.levelOneBullet(for: index))
+            case .two:
+                Text(Self.levelTwoBullet(for: index))
+            }
+        }
+        .modifier(BulletTextModifier(textStyle: textStyle, isBold: isBold))
+    }
+
+    // MARK: Helpers
+
+    static func levelZeroBullet(for index: UInt8) -> String {
+        if OUDSUtils.isArabicLanguageInUse() {
+            ".\(index + 1)"
+        } else {
+            "\(index + 1)."
+        }
+    }
+
+    static func levelOneBullet(for index: UInt8) -> String {
+        if OUDSUtils.isArabicLanguageInUse() {
+            OUDSUtils.cyclicArabicLetter(at: index) + "." // NOTE: . won't be leading but trailing, arabic alphabet in use
+        } else {
+            OUDSUtils.cyclicLatinLetter(at: index, isUppercase: true) + "."
+        }
+    }
+
+    static func levelTwoBullet(for index: UInt8) -> String {
+        if OUDSUtils.isArabicLanguageInUse() {
+            "(" + OUDSUtils.cyclicArabicLetter(at: index) + ")" + "." // NOTE: . won't be leading but trailing, arabic alphabet in use
+        } else {
+            OUDSUtils.cyclicLatinLetter(at: index, isUppercase: false) + "."
+        }
+    }
+}