fix: code sample text alignment for RTL mode in Design Toolbox (#554) (#569)

Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
Co-authored-by: LudovicPinel <[email protected]>

Author: pylapp

CHANGELOG.md

@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- [DesignToolbox] In RTL mode code sample text not aligned on the left ([#554](https://github.com/Orange-OpenSource/ouds-ios/issues/554))
 - [DesignToolbox] Chevron for navigation link pointing to bad direction in RTL mode ([#553](https://github.com/Orange-OpenSource/ouds-ios/issues/553))
 - [DesignToolbox] Broken wording in radio button page
 - [DesignToolbox] Update Checkbox and Radio button assets on the screen of component list ([#519](https://github.com/Orange-OpenSource/ouds-ios/issues/519))

DesignToolbox/DesignToolbox/Pages/Utils/DesignToolboxCode.swift

@@ -17,17 +17,17 @@ import SwiftUI
 
 struct DesignToolboxCode: View {
 
-    // MARK: Environment properties
-
-    @Environment(\.theme) private var theme
-    @Environment(\.colorScheme) private var colorScheme
-
     // MARK: Stored properties
 
-    @State private var isCodeVisible = false
     let code: String
     let titleText: LocalizedStringKey
 
+    @State private var isCodeVisible = false
+
+    @Environment(\.theme) private var theme
+    @Environment(\.colorScheme) private var colorScheme
+    @Environment(\.layoutDirection) private var layoutDirection
+
     // MARK: Body
 
     var body: some View {
@@ -71,6 +71,8 @@ struct DesignToolboxCode: View {
                 .font(.system(.body, design: .monospaced))
                 .foregroundStyle(theme.colors.colorContentDefault.color(for: colorScheme))
                 .padding(.vertical, theme.spaces.spacePaddingInlineShort)
+                .multilineTextAlignment(layoutDirection == .rightToLeft ? .trailing : .leading)
+            // As the source code sample is written in english, keep text aligned on the left
 
             Spacer(minLength: theme.spaces.spacePaddingBlockMedium)