Skip to content

Commit

Permalink
feat: add text field in component configuration of Design Toolbox to …
Browse files Browse the repository at this point in the history
…customize text (#436) (#438)

Reviewed-by: Pierre-Yves Lapersonne <[email protected]>
Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
  • Loading branch information
ludovic35 authored Feb 3, 2025
1 parent 3db0aaa commit c9c2349
Show file tree
Hide file tree
Showing 8 changed files with 65 additions and 31 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Added

- [DesignToolbox] Add text field in component configuration to customize text ([#436](https://github.com/Orange-OpenSource/ouds-ios/issues/436))
- [Library] Link component ([#400](https://github.com/Orange-OpenSource/ouds-ios/issues/400))

## [0.10.0](https://github.com/Orange-OpenSource/ouds-ios/compare/0.9.0...0.10.0) - 2025-01-30
Expand Down
6 changes: 6 additions & 0 deletions DesignToolbox/DesignToolbox.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,8 @@
0784B2732CCB8CC800299C10 /* NamedSize+IconDecorative.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0784B2722CCB8CC800299C10 /* NamedSize+IconDecorative.swift */; };
07AB45872D4D08080001D237 /* DesignToolboxChoicePicker.swift in Sources */ = {isa = PBXBuildFile; fileRef = 07AB45862D4D08080001D237 /* DesignToolboxChoicePicker.swift */; };
07AB45882D4D08080001D237 /* DesignToolboxChoicePicker.swift in Sources */ = {isa = PBXBuildFile; fileRef = 07AB45862D4D08080001D237 /* DesignToolboxChoicePicker.swift */; };
07AB458A2D50CB9B0001D237 /* DesignToolboxTextField.swift in Sources */ = {isa = PBXBuildFile; fileRef = 07AB45892D50CB9B0001D237 /* DesignToolboxTextField.swift */; };
07AB458B2D50CB9B0001D237 /* DesignToolboxTextField.swift in Sources */ = {isa = PBXBuildFile; fileRef = 07AB45892D50CB9B0001D237 /* DesignToolboxTextField.swift */; };
07B3CCB12D40E34700DBB10A /* LinkConfiguration.swift in Sources */ = {isa = PBXBuildFile; fileRef = 07B3CCAE2D40E34700DBB10A /* LinkConfiguration.swift */; };
07B3CCB22D40E34700DBB10A /* LinkElement.swift in Sources */ = {isa = PBXBuildFile; fileRef = 07B3CCAF2D40E34700DBB10A /* LinkElement.swift */; };
07B3CCB32D40E34700DBB10A /* LinkPage.swift in Sources */ = {isa = PBXBuildFile; fileRef = 07B3CCB02D40E34700DBB10A /* LinkPage.swift */; };
Expand Down Expand Up @@ -257,6 +259,7 @@
0784B26F2CCB86C500299C10 /* NamedSize+IconWithTypography.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "NamedSize+IconWithTypography.swift"; sourceTree = "<group>"; };
0784B2722CCB8CC800299C10 /* NamedSize+IconDecorative.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "NamedSize+IconDecorative.swift"; sourceTree = "<group>"; };
07AB45862D4D08080001D237 /* DesignToolboxChoicePicker.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DesignToolboxChoicePicker.swift; sourceTree = "<group>"; };
07AB45892D50CB9B0001D237 /* DesignToolboxTextField.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DesignToolboxTextField.swift; sourceTree = "<group>"; };
07B3CCAE2D40E34700DBB10A /* LinkConfiguration.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LinkConfiguration.swift; sourceTree = "<group>"; };
07B3CCAF2D40E34700DBB10A /* LinkElement.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LinkElement.swift; sourceTree = "<group>"; };
07B3CCB02D40E34700DBB10A /* LinkPage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LinkPage.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -415,6 +418,7 @@
6DCC57E12CEB984D000F35F8 /* DesignToolboxCode.swift */,
07F0AFE72CFE0FBD00D334DD /* DesignToolboxConfiguration.swift */,
07B3CCB42D40F36C00DBB10A /* DesignToolboxColoredBackgroundModifier.swift */,
07AB45892D50CB9B0001D237 /* DesignToolboxTextField.swift */,
);
path = Utils;
sourceTree = "<group>";
Expand Down Expand Up @@ -1145,6 +1149,7 @@
6DB260DC2CD0F0000091F72E /* DesignToolboxSectionHeaderStyle.swift in Sources */,
6DB260DB2CD0EFD90091F72E /* NamedSize+IconWithTypography.swift in Sources */,
6DB260DA2CD0EF9D0091F72E /* NamedSize+IconDecorative.swift in Sources */,
07AB458A2D50CB9B0001D237 /* DesignToolboxTextField.swift in Sources */,
51952A8C2D3FA22A0068B807 /* OUDSTokensFontUITests.swift in Sources */,
6D17A2352CCF8DC300C00512 /* NamedColor.swift in Sources */,
6D17A22C2CCBF12B00C00512 /* NamedColor+Action.swift in Sources */,
Expand Down Expand Up @@ -1190,6 +1195,7 @@
files = (
51952A672D3F9B9E0068B807 /* DesignToolboxConfiguration.swift in Sources */,
51952A682D3F9B9E0068B807 /* NamedColor+Opacity.swift in Sources */,
07AB458B2D50CB9B0001D237 /* DesignToolboxTextField.swift in Sources */,
51952A692D3F9B9E0068B807 /* NamedColor+Overlay.swift in Sources */,
51952A6A2D3F9B9E0068B807 /* NamedColor+Repository.swift in Sources */,
51952A6B2D3F9B9E0068B807 /* NamedColor+Surface.swift in Sources */,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ final class ButtonConfigurationModel: ComponentConfiguration {
didSet { updateCode() }
}

@Published var longText: Bool
@Published var text: String

@Published var layout: ButtonLayout {
didSet { updateCode() }
Expand All @@ -48,7 +48,7 @@ final class ButtonConfigurationModel: ComponentConfiguration {
override init() {
enabled = true
onColoredSurface = false
longText = false
text = String(localized: "app_components_button_label")
layout = .textOnly
hierarchy = .default
style = .`default`
Expand Down Expand Up @@ -178,11 +178,6 @@ struct ButtonConfiguration: View {
.typeHeadingMedium(theme)
.foregroundStyle(theme.colors.colorContentDefault.color(for: colorScheme))

Toggle("app_components_common_longText_label", isOn: $model.longText)
.typeHeadingMedium(theme)
.foregroundStyle(theme.colors.colorContentDefault.color(for: colorScheme))
.disabled(model.layout == .iconOnly)

DesignToolboxChoicePicker(title: "app_components_button_hierarchy_label", selection: $model.hierarchy) {
ForEach(OUDSButton.Hierarchy.allCases, id: \.id) { hierarchy in
Text(LocalizedStringKey(hierarchy.description)).tag(hierarchy)
Expand All @@ -200,6 +195,10 @@ struct ButtonConfiguration: View {
Text(LocalizedStringKey(layout.description)).tag(layout)
}
}

if model.layout == .iconAndText || model.layout == .textOnly {
DesignToolboxTextField(text: $model.text, prompt: "app_component_common_userText_prompt")
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,9 @@ private struct ButtonDemo: View {
case .iconOnly:
OUDSButton(icon: Image(decorative: "ic_heart"), hierarchy: model.hierarchy, style: model.style) {}
case .textOnly:
OUDSButton(text: text, hierarchy: model.hierarchy, style: model.style) {}
OUDSButton(text: model.text, hierarchy: model.hierarchy, style: model.style) {}
case .iconAndText:
OUDSButton(icon: Image(decorative: "ic_heart"), text: text, hierarchy: model.hierarchy, style: model.style) {}
OUDSButton(icon: Image(decorative: "ic_heart"), text: model.text, hierarchy: model.hierarchy, style: model.style) {}
}
}

Expand All @@ -97,8 +97,4 @@ private struct ButtonDemo: View {
.padding(.all, theme.spaces.spaceFixedMedium)
.modifier(DesignToolboxColoredBackgroundModifier(coloredSurface: model.onColoredSurface))
}

private var text: String {
model.longText ? "app_components_button_longText_label" : "app_components_button_label"
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ final class LinkConfigurationModel: ComponentConfiguration {
didSet { updateCode() }
}

@Published var longText: Bool
@Published var text: String

@Published var layout: LinkLayout {
didSet { updateCode() }
Expand All @@ -44,7 +44,7 @@ final class LinkConfigurationModel: ComponentConfiguration {
override init() {
onColoredSurface = false
enabled = true
longText = false
text = String(localized: "app_components_link_label")
layout = .textOnly
size = .medium
}
Expand Down Expand Up @@ -155,10 +155,6 @@ struct LinkConfiguration: View {
.typeHeadingMedium(theme)
.foregroundStyle(theme.colors.colorContentDefault.color(for: colorScheme))

Toggle("app_components_common_longText_label", isOn: $model.longText)
.typeHeadingMedium(theme)
.foregroundStyle(theme.colors.colorContentDefault.color(for: colorScheme))

DesignToolboxChoicePicker(title: "app_components_link_size_label", selection: $model.size) {
ForEach(OUDSLink.Size.allCases, id: \.id) { size in
Text(LocalizedStringKey(size.description)).tag(size)
Expand All @@ -170,6 +166,8 @@ struct LinkConfiguration: View {
Text(LocalizedStringKey(layout.description)).tag(layout)
}
}

DesignToolboxTextField(text: $model.text, prompt: "app_component_common_userText_prompt")
}
}
}
12 changes: 4 additions & 8 deletions DesignToolbox/DesignToolbox/Pages/Components/Link/LinkPage.swift
Original file line number Diff line number Diff line change
Expand Up @@ -76,13 +76,13 @@ private struct LinkDemo: View {

switch model.layout {
case .textOnly:
OUDSLink(text: text, size: model.size) {}
OUDSLink(text: model.text, size: model.size) {}
case .iconAndText:
OUDSLink(text: text, icon: Image(decorative: "ic_heart"), size: model.size) {}
OUDSLink(text: model.text, icon: Image(decorative: "ic_heart"), size: model.size) {}
case .arrowBack:
OUDSLink(text: text, arrow: .back, size: model.size) {}
OUDSLink(text: model.text, arrow: .back, size: model.size) {}
case .arrowNext:
OUDSLink(text: text, arrow: .next, size: model.size) {}
OUDSLink(text: model.text, arrow: .next, size: model.size) {}
}

Spacer()
Expand All @@ -91,8 +91,4 @@ private struct LinkDemo: View {
.padding(.all, theme.spaces.spaceFixedMedium)
.modifier(DesignToolboxColoredBackgroundModifier(coloredSurface: model.onColoredSurface))
}

private var text: String {
model.longText ? "app_components_link_longText_label" : "app_components_link_label"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
//
// 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 OUDS
import OUDSTokensSemantic
import SwiftUI

struct DesignToolboxTextField: View {

@Environment(\.theme) private var theme
@Environment(\.colorScheme) private var colorScheme

let text: Binding<String>
let prompt: String

var body: some View {
VStack(alignment: .leading) {
Text("app_component_common_userText_label")
.typeHeadingMedium(theme)
.foregroundStyle(theme.colors.colorContentDefault.color(for: colorScheme))

TextField(text: text) {
Text(LocalizedStringKey(prompt))
}
}
.accessibilityElement(children: .combine)
.accessibilityLabel(LocalizedStringKey(prompt))
.accessibilityValue(text.wrappedValue)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -105,18 +105,17 @@
"app_components_common_viewCodeExample_label" = "View component code example";
"app_component_emptyContent_text" = "No content";
"app_component_emptyContent_description_text" = "This content is under construction and will be available very soon";

"app_component_common_userText_prompt" = "Enter a text";
"app_component_common_userText_label" = "Text";
"app_components_common_layout_label" = "Layout";
"app_components_common_textOnlyLayout_label" = "Text only";
"app_components_common_iconAndTextLayout_label" = "Icon + text";
"app_components_common_style_label" = "Style";
"app_components_common_onColoredBackground_label" = "On colored background";
"app_components_common_longText_label" = "Long text";

// MARK: Components: Button

"app_components_button_label" = "Button";
"app_components_button_longText_label" = "Button with long text";
"app_components_button_description_text" = "Buttons allow users to make choices or perform an action. They have multiple styles for various needs.";
"app_components_button_negative_hierary_notAllowed_text" = "Not allowed on colored surface";
"app_components_button_hierarchy_label" = "Hierarchy";
Expand All @@ -126,7 +125,6 @@
// MARK: Components: Link

"app_components_link_label" = "Link";
"app_components_link_longText_label" = "This is an example of link with a chevron";
"app_components_link_description_text" = "Links direct users to other resources or sections, whether internal (within the same application) or external (to a website or document).";
"app_components_link_arrowBack_label" = "Back";
"app_components_link_arrowNext_label" = "Next";
Expand Down

0 comments on commit c9c2349

Please sign in to comment.