Skip to content

Commit 310879b

Browse files
florentmaitreflorentmaitre
committed
Add rich text to password input, pin code input, text area and text input demos
1 parent b9b48cf commit 310879b

9 files changed

Lines changed: 345 additions & 103 deletions

File tree

‎app/src/main/java/com/orange/ouds/app/ui/components/ComponentCode.kt‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import com.orange.ouds.app.ui.utilities.FunctionCall
2323
import com.orange.ouds.core.component.OudsColoredBoxColor
2424
import com.orange.ouds.core.component.common.OudsError
2525
import com.orange.ouds.core.component.common.text.OudsAnnotatedErrorMessage
26+
import com.orange.ouds.core.component.common.text.OudsAnnotatedHelperText
2627
import com.orange.ouds.core.component.common.text.OudsAnnotatedString
2728

2829
fun Code.Builder.coloredBoxCall(onColoredBox: Boolean, content: Code.Builder.() -> Unit) {
@@ -92,9 +93,9 @@ fun FunctionCall.Builder.tintedArgument(value: Boolean) = typedArgument(Argument
9293
fun FunctionCall.Builder.errorArgument(message: String, annotatedMessage: Boolean = false) {
9394
constructorCallArgument<OudsError>(Argument.Error) {
9495
if (annotatedMessage) {
95-
annotatedStringArgument<OudsAnnotatedErrorMessage>("message")
96+
annotatedStringArgument<OudsAnnotatedErrorMessage>(Argument.ErrorMessage)
9697
} else {
97-
typedArgument("message", message)
98+
typedArgument(Argument.ErrorMessage, message)
9899
}
99100
}
100101
}
@@ -112,6 +113,14 @@ fun FunctionCall.Builder.onClickArgument(init: Code.Builder.() -> Unit = {}) = l
112113

113114
fun FunctionCall.Builder.readOnlyArgument(value: Boolean) = typedArgument(Argument.ReadOnly, value)
114115

116+
fun FunctionCall.Builder.helperTextArgument(helperText: String, annotated: Boolean = false) {
117+
if (annotated) {
118+
annotatedStringArgument<OudsAnnotatedHelperText>(Argument.HelperText)
119+
} else if (helperText.isNotEmpty()) {
120+
typedArgument(Argument.HelperText, helperText)
121+
}
122+
}
123+
115124
private object Argument {
116125

117126
const val Color = "color"
@@ -120,6 +129,8 @@ private object Argument {
120129
const val Content = "content"
121130
const val Enabled = "enabled"
122131
const val Error = "error"
132+
const val ErrorMessage = "message"
133+
const val HelperText = "helperText"
123134
const val Id = "id"
124135
const val Label = "label"
125136
const val OnClick = "onClick"

‎app/src/main/java/com/orange/ouds/app/ui/components/passwordinput/PasswordInputDemoScreen.kt‎

Lines changed: 69 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212

1313
package com.orange.ouds.app.ui.components.passwordinput
1414

15+
import androidx.compose.foundation.text.input.KeyboardActionHandler
1516
import androidx.compose.foundation.text.input.TextObfuscationMode
1617
import androidx.compose.runtime.Composable
1718
import androidx.compose.ui.platform.LocalFocusManager
@@ -22,6 +23,7 @@ import com.orange.ouds.app.ui.components.Component
2223
import com.orange.ouds.app.ui.components.constrainedMaxWidthArgument
2324
import com.orange.ouds.app.ui.components.enabledArgument
2425
import com.orange.ouds.app.ui.components.errorArgument
26+
import com.orange.ouds.app.ui.components.helperTextArgument
2527
import com.orange.ouds.app.ui.components.labelArgument
2628
import com.orange.ouds.app.ui.components.readOnlyArgument
2729
import com.orange.ouds.app.ui.utilities.Code
@@ -33,6 +35,9 @@ import com.orange.ouds.app.ui.utilities.composable.DemoScreen
3335
import com.orange.ouds.core.component.OudsPasswordInput
3436
import com.orange.ouds.core.component.OudsTextInputLoader
3537
import com.orange.ouds.core.component.common.OudsError
38+
import com.orange.ouds.core.component.common.text.buildOudsAnnotatedErrorMessage
39+
import com.orange.ouds.core.component.common.text.buildOudsAnnotatedHelperText
40+
import com.orange.ouds.core.component.common.text.withStrong
3641
import com.orange.ouds.foundation.extensions.toSentenceCase
3742
import com.orange.ouds.theme.OudsVersion
3843

@@ -90,7 +95,8 @@ private fun PasswordInputDemoBottomSheetContent(state: PasswordInputDemoState) {
9095
label = stringResource(R.string.app_components_common_errorMessage_tech),
9196
value = errorMessage,
9297
onValueChange = { value -> errorMessage = value },
93-
enabled = errorMessageTextInputEnabled
98+
enabled = errorMessageTextInputEnabled,
99+
helperText = stringResource(id = R.string.app_components_common_annotatedTextHelperText_tech)
94100
)
95101
CustomizationTextInput(
96102
applyTopPadding = true,
@@ -114,7 +120,9 @@ private fun PasswordInputDemoBottomSheetContent(state: PasswordInputDemoState) {
114120
applyTopPadding = true,
115121
label = stringResource(R.string.app_components_common_helperText_tech),
116122
value = helperText,
117-
onValueChange = { value -> helperText = value }
123+
onValueChange = { value -> helperText = value },
124+
enabled = helperTextTextInputEnabled,
125+
helperText = stringResource(id = R.string.app_components_common_annotatedTextHelperText_tech)
118126
)
119127
CustomizationSwitchItem(
120128
label = stringResource(R.string.app_components_common_constrainedMaxWidth_tech),
@@ -132,28 +140,69 @@ private fun PasswordInputDemoBottomSheetContent(state: PasswordInputDemoState) {
132140
passwordInputState.textObfuscationMode = textObfuscationModes[index]
133141
}
134142
)
143+
CustomizationSwitchItem(
144+
label = stringResource(id = R.string.app_components_common_annotatedText_tech),
145+
checked = annotatedText,
146+
onCheckedChange = { annotatedText = it }
147+
)
135148
}
136149
}
137150

138151
@Composable
139152
private fun PasswordInputDemoContent(state: PasswordInputDemoState) {
140-
val focusManager = LocalFocusManager.current
141153
with(state) {
142-
OudsPasswordInput(
143-
state = passwordInputState,
144-
label = label,
145-
placeholder = placeholder,
146-
outlined = outlined,
147-
lockIcon = lockIcon,
148-
loader = if (hasLoader) OudsTextInputLoader(null) else null,
149-
enabled = enabled,
150-
readOnly = readOnly,
151-
error = if (error) OudsError(errorMessage) else null,
152-
prefix = prefix,
153-
helperText = helperText,
154-
constrainedMaxWidth = constrainedMaxWidth,
155-
onKeyboardAction = { focusManager.clearFocus() }
156-
)
154+
val focusManager = LocalFocusManager.current
155+
val loader = if (hasLoader) OudsTextInputLoader(null) else null
156+
val passwordInputError = when {
157+
error && annotatedText -> OudsError(buildOudsAnnotatedErrorMessage {
158+
append("Your password can't be ")
159+
withStrong { append("empty") }
160+
append(".")
161+
})
162+
error -> OudsError(errorMessage)
163+
else -> null
164+
}
165+
val onKeyboardAction: KeyboardActionHandler = { focusManager.clearFocus() }
166+
if (annotatedText) {
167+
val annotatedHelperText = buildOudsAnnotatedHelperText {
168+
append("Your password must be between ")
169+
withStrong { append("8") }
170+
append(" and ")
171+
withStrong { append("20") }
172+
append(" characters long.")
173+
}
174+
OudsPasswordInput(
175+
state = passwordInputState,
176+
label = label,
177+
placeholder = placeholder,
178+
outlined = outlined,
179+
lockIcon = lockIcon,
180+
loader = loader,
181+
enabled = enabled,
182+
readOnly = readOnly,
183+
error = passwordInputError,
184+
prefix = prefix,
185+
helperText = annotatedHelperText,
186+
constrainedMaxWidth = constrainedMaxWidth,
187+
onKeyboardAction = onKeyboardAction
188+
)
189+
} else {
190+
OudsPasswordInput(
191+
state = passwordInputState,
192+
label = label,
193+
placeholder = placeholder,
194+
outlined = outlined,
195+
lockIcon = lockIcon,
196+
loader = loader,
197+
enabled = enabled,
198+
readOnly = readOnly,
199+
error = passwordInputError,
200+
prefix = prefix,
201+
helperText = helperText,
202+
constrainedMaxWidth = constrainedMaxWidth,
203+
onKeyboardAction = onKeyboardAction
204+
)
205+
}
157206
}
158207
}
159208

@@ -172,9 +221,9 @@ private fun Code.Builder.passwordInputDemoCodeSnippet(state: PasswordInputDemoSt
172221
}
173222
if (!enabled) enabledArgument(false)
174223
if (readOnly) readOnlyArgument(true)
175-
if (error) errorArgument(errorMessage)
224+
if (error) errorArgument(errorMessage, annotatedText)
176225
if (prefix.isNotEmpty()) typedArgument("prefix", prefix)
177-
if (helperText.isNotEmpty()) typedArgument("helperText", helperText)
226+
helperTextArgument(helperText, annotatedText)
178227
if (constrainedMaxWidth) constrainedMaxWidthArgument(true)
179228
lambdaArgument("onKeyboardAction") {
180229
functionCall("focusManager.clearFocus")

‎app/src/main/java/com/orange/ouds/app/ui/components/passwordinput/PasswordInputDemoState.kt‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@ fun rememberPasswordInputDemoState(
3737
errorMessage: String = stringResource(id = R.string.app_components_common_errorMessage_label),
3838
prefix: String = "",
3939
helperText: String = "",
40-
constrainedMaxWidth: Boolean = false
40+
constrainedMaxWidth: Boolean = false,
41+
annotatedText: Boolean = false
4142
) = rememberSaveable(
4243
passwordInputState,
4344
label,
@@ -52,6 +53,7 @@ fun rememberPasswordInputDemoState(
5253
prefix,
5354
helperText,
5455
constrainedMaxWidth,
56+
annotatedText,
5557
saver = PasswordInputDemoState.Saver
5658
) {
5759
PasswordInputDemoState(
@@ -67,7 +69,8 @@ fun rememberPasswordInputDemoState(
6769
errorMessage,
6870
prefix,
6971
helperText,
70-
constrainedMaxWidth
72+
constrainedMaxWidth,
73+
annotatedText
7174
)
7275
}
7376

@@ -84,7 +87,8 @@ class PasswordInputDemoState(
8487
errorMessage: String,
8588
prefix: String,
8689
helperText: String,
87-
constrainedMaxWidth: Boolean
90+
constrainedMaxWidth: Boolean,
91+
annotatedText: Boolean
8892
) {
8993

9094
companion object {
@@ -104,7 +108,8 @@ class PasswordInputDemoState(
104108
errorMessage,
105109
prefix,
106110
helperText,
107-
constrainedMaxWidth
111+
constrainedMaxWidth,
112+
annotatedText
108113
)
109114
}
110115
},
@@ -123,7 +128,8 @@ class PasswordInputDemoState(
123128
list[9] as String,
124129
list[10] as String,
125130
list[11] as String,
126-
list[12] as Boolean
131+
list[12] as Boolean,
132+
list[13] as Boolean
127133
)
128134
}
129135
)
@@ -155,18 +161,23 @@ class PasswordInputDemoState(
155161

156162
var constrainedMaxWidth: Boolean by mutableStateOf(constrainedMaxWidth)
157163

164+
var annotatedText: Boolean by mutableStateOf(annotatedText)
165+
158166
val enabledSwitchEnabled: Boolean
159167
get() = !error && !hasLoader
160168

161169
val errorSwitchEnabled: Boolean
162170
get() = !readOnly && !hasLoader && enabled
163171

164172
val errorMessageTextInputEnabled: Boolean
165-
get() = error
173+
get() = error && !annotatedText
166174

167175
val readOnlySwitchEnabled: Boolean
168176
get() = !error && !hasLoader
169177

170178
val loaderSwitchEnabled: Boolean
171179
get() = enabled && !readOnly && !error && passwordInputState.text.isNotEmpty()
180+
181+
val helperTextTextInputEnabled: Boolean
182+
get() = !annotatedText
172183
}

‎app/src/main/java/com/orange/ouds/app/ui/components/pincodeinput/PinCodeInputDemoScreen.kt‎

Lines changed: 54 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,14 @@
1212

1313
package com.orange.ouds.app.ui.components.pincodeinput
1414

15+
import androidx.compose.foundation.text.input.KeyboardActionHandler
1516
import androidx.compose.runtime.Composable
1617
import androidx.compose.ui.platform.LocalFocusManager
1718
import androidx.compose.ui.res.stringResource
1819
import com.orange.ouds.app.R
1920
import com.orange.ouds.app.ui.components.Component
2021
import com.orange.ouds.app.ui.components.errorArgument
22+
import com.orange.ouds.app.ui.components.helperTextArgument
2123
import com.orange.ouds.app.ui.utilities.Code
2224
import com.orange.ouds.app.ui.utilities.composable.CustomizationFilterChips
2325
import com.orange.ouds.app.ui.utilities.composable.CustomizationSwitchItem
@@ -26,6 +28,9 @@ import com.orange.ouds.app.ui.utilities.composable.DemoScreen
2628
import com.orange.ouds.core.component.OudsPinCodeInput
2729
import com.orange.ouds.core.component.OudsPinCodeInputLength
2830
import com.orange.ouds.core.component.common.OudsError
31+
import com.orange.ouds.core.component.common.text.buildOudsAnnotatedErrorMessage
32+
import com.orange.ouds.core.component.common.text.buildOudsAnnotatedHelperText
33+
import com.orange.ouds.core.component.common.text.withStrong
2934
import com.orange.ouds.foundation.extensions.toSentenceCase
3035
import com.orange.ouds.theme.OudsVersion
3136

@@ -66,30 +71,65 @@ private fun PinCodeInputDemoBottomSheetContent(state: PinCodeInputDemoState) {
6671
label = stringResource(R.string.app_components_common_errorMessage_tech),
6772
value = errorMessage,
6873
onValueChange = { value -> errorMessage = value },
69-
enabled = errorMessageTextInputEnabled
74+
enabled = errorMessageTextInputEnabled,
75+
helperText = stringResource(id = R.string.app_components_common_annotatedTextHelperText_tech)
7076
)
7177
CustomizationTextInput(
7278
applyTopPadding = true,
7379
label = stringResource(R.string.app_components_common_helperText_tech),
7480
value = helperText,
75-
onValueChange = { value -> helperText = value }
81+
onValueChange = { value -> helperText = value },
82+
enabled = helperTextTextInputEnabled,
83+
helperText = stringResource(id = R.string.app_components_common_annotatedTextHelperText_tech)
84+
)
85+
CustomizationSwitchItem(
86+
label = stringResource(id = R.string.app_components_common_annotatedText_tech),
87+
checked = annotatedText,
88+
onCheckedChange = { annotatedText = it }
7689
)
7790
}
7891
}
7992

8093
@Composable
8194
private fun PinCodeInputDemoContent(state: PinCodeInputDemoState) {
82-
val focusManager = LocalFocusManager.current
8395
with(state) {
84-
OudsPinCodeInput(
85-
value = value,
86-
onValueChange = { value = it },
87-
length = length,
88-
outlined = outlined,
89-
error = if (error) OudsError(errorMessage) else null,
90-
helperText = helperText,
91-
onKeyboardAction = { focusManager.clearFocus() }
92-
)
96+
val focusManager = LocalFocusManager.current
97+
val onValueChange: (String) -> Unit = { value = it }
98+
val pinCodeInputError = when {
99+
error && annotatedText -> OudsError(buildOudsAnnotatedErrorMessage {
100+
withStrong { append("Verification failed") }
101+
append(". Check and enter the correct code.")
102+
})
103+
error -> OudsError(errorMessage)
104+
else -> null
105+
}
106+
val onKeyboardAction: KeyboardActionHandler = { focusManager.clearFocus() }
107+
if (annotatedText) {
108+
val annotatedHelperText = buildOudsAnnotatedHelperText {
109+
append("Enter the ")
110+
withStrong { append("one-time code") }
111+
append(" sent to your device.")
112+
}
113+
OudsPinCodeInput(
114+
value = value,
115+
onValueChange = onValueChange,
116+
length = length,
117+
outlined = outlined,
118+
error = pinCodeInputError,
119+
helperText = annotatedHelperText,
120+
onKeyboardAction = onKeyboardAction
121+
)
122+
} else {
123+
OudsPinCodeInput(
124+
value = value,
125+
onValueChange = onValueChange,
126+
length = length,
127+
outlined = outlined,
128+
error = pinCodeInputError,
129+
helperText = helperText,
130+
onKeyboardAction = onKeyboardAction
131+
)
132+
}
93133
}
94134
}
95135

@@ -102,8 +142,8 @@ private fun Code.Builder.pinCodeInputDemoCodeSnippet(state: PinCodeInputDemoStat
102142
}
103143
typedArgument("length", length)
104144
if (outlined) typedArgument("outlined", outlined)
105-
if (error) errorArgument(errorMessage)
106-
if (helperText.isNotEmpty()) typedArgument("helperText", helperText)
145+
if (error) errorArgument(errorMessage, annotatedText)
146+
helperTextArgument(helperText, annotatedText)
107147
}
108148
}
109149

0 commit comments

Comments
 (0)