diff --git a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CommonInputView.kt b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CommonInputView.kt index 3faf9a35..a9de24e0 100644 --- a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CommonInputView.kt +++ b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CommonInputView.kt @@ -15,13 +15,24 @@ */ package uk.gov.hmrc.components.compose.molecule.input +import androidx.compose.foundation.background +import androidx.compose.foundation.border import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.IntrinsicSize import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.OutlinedTextFieldDefaults import androidx.compose.material3.Text @@ -43,8 +54,10 @@ import uk.gov.hmrc.components.compose.molecule.input.CommonInputView.CHAR_COUNT_ import uk.gov.hmrc.components.compose.molecule.input.CommonInputView.ERROR_TEXT_WITH_CHAR_COUNT_WIDTH import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme.colors +import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme.dimensions import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme.typography +@OptIn(ExperimentalMaterial3Api::class) @Suppress("LongParameterList") @Composable internal fun TextField( @@ -62,7 +75,15 @@ internal fun TextField( trailingIcon: @Composable() (() -> Unit)? = null, textStyle: TextStyle = typography.body, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, - isCustomErrorInputHandle: Boolean + isCustomErrorInputHandle: Boolean, + leadingContent: String? = null, + leadingIcon: @Composable (() -> Unit)? = null, + errorText: String? = null, + errorContentDescription: String? = null, + currencyErrorText: String? = null, + localError: String? = null, + counterEnabled: Boolean = false + ) { var customIsError = isError val customColors = if (isCustomErrorInputHandle && isError) { @@ -71,23 +92,64 @@ internal fun TextField( } else { colors } - OutlinedTextField( - modifier = modifier.fillMaxWidth(), - isError = customIsError, - value = value, - onValueChange = onInputValueChange, - prefix = prefix, - placeholder = placeholderText, - supportingText = supportingText, - trailingIcon = trailingIcon, - singleLine = singleLine, - keyboardOptions = keyboardOptions, - textStyle = textStyle, - colors = customColors, - shape = RoundedCornerShape(0), - visualTransformation = visualTransformation, - interactionSource = interactionSource, - ) + + Row(modifier = Modifier.height(IntrinsicSize.Min).adjustPaddingForCounter(!counterEnabled, localError)) { + + Column { + if (leadingContent != null) { + Box( + modifier = Modifier + .fillMaxHeight() + .width(52.dp) + .adjustPaddingForCounter(counterEnabled, localError) + .background(HmrcTheme.colors.hmrcGrey3) + .border(1.dp, HmrcTheme.colors.hmrcBlack), + contentAlignment = Alignment.Center + ) { + Text( + text = leadingContent, + style = MaterialTheme.typography.titleLarge, + color = HmrcTheme.colors.hmrcBlack + ) + } + } + } + + Column(modifier = Modifier.weight(1f)) { + OutlinedTextField( + modifier = modifier.fillMaxWidth(), + isError = customIsError, + value = value, + onValueChange = onInputValueChange, + prefix = prefix, + placeholder = placeholderText, + supportingText = + if (leadingContent != null) { + null + } else { + supportingText + }, + trailingIcon = trailingIcon, + singleLine = singleLine, + keyboardOptions = keyboardOptions, + textStyle = textStyle, + colors = customColors, + shape = RoundedCornerShape(0), + visualTransformation = visualTransformation, + interactionSource = interactionSource, + leadingIcon = leadingIcon + ) + } + } + + // still need to work on how to make this display well + if (leadingContent != null) { + Row(modifier = Modifier.fillMaxWidth().heightIn(min = dimensions.hmrcSpacing16).wrapContentHeight().padding(top = dimensions.hmrcSpacing4)) { +// error(errorText, errorContentDescription) + ErrorText(currencyErrorText ?: "") +// Text(currencyErrorText ?: "") + } + } } @Composable diff --git a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt index 08ab81df..5c8406a9 100644 --- a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt +++ b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt @@ -15,14 +15,12 @@ */ package uk.gov.hmrc.components.compose.molecule.input -import androidx.compose.foundation.layout.padding import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.tooling.preview.Preview -import uk.gov.hmrc.components.compose.atom.text.BodyText import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme @Composable @@ -40,7 +38,8 @@ fun CurrencyInputView( singleLine: Boolean = true, enableDecimal: Boolean = true, maxChars: Int? = null, - isCustomErrorInputHandle: Boolean = false + isCustomErrorInputHandle: Boolean = false, + leadingIcon: @Composable (() -> Unit)? = null, ) { // pattern matches a decimal number val decimalPattern = remember { Regex("^([0-9]*)(\\.?)([0-9]*)$") } @@ -62,12 +61,9 @@ fun CurrencyInputView( labelContentDescription = labelContentDescription, hintText = hintText, hintContentDescription = hintContentDescription, - prefix = { - BodyText( - text = "£", - modifier = Modifier.padding(end = HmrcTheme.dimensions.hmrcSpacing8) - ) - }, +// leadingIcon = { Icon(painter = painterResource(uk.gov.hmrc.components.compose.R.drawable.components_ic_pound_sign), +// contentDescription = null) }, + leadingContent = "£", placeholderText = placeholderText, errorText = errorText, errorContentDescription = errorContentDescription, @@ -76,7 +72,8 @@ fun CurrencyInputView( keyboardOptions = KeyboardOptions( keyboardType = if (enableDecimal) KeyboardType.Decimal else KeyboardType.Number ), - isCustomErrorInputHandle = isCustomErrorInputHandle + isCustomErrorInputHandle = isCustomErrorInputHandle, + ) } diff --git a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt index 54e0b7e1..1777840e 100644 --- a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt +++ b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt @@ -50,13 +50,16 @@ object TextInputView { prefix: @Composable() (() -> Unit)? = null, placeholderText: String? = null, errorText: String? = null, + leadingContent: String? = null, errorContentDescription: String? = null, characterCount: Int? = null, maxChars: Int? = null, singleLine: Boolean = false, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, requiredSequencesSpacing: Boolean = false, - isCustomErrorInputHandle: Boolean = false + isCustomErrorInputHandle: Boolean = false, + leadingIcon: @Composable (() -> Unit)? = null, + ) { var localValue: String by rememberSaveable { mutableStateOf(value.orEmpty()) } localValue = value.orEmpty() @@ -85,7 +88,10 @@ object TextInputView { Label(labelText = labelText, labelContentDescription = labelContentDescription) Hint(hintText = hintText, hintContentDescription = hintContentDescription) TextField( + leadingIcon = leadingIcon, modifier = Modifier.adjustPaddingForCounter(counterEnabled, localError), + counterEnabled = counterEnabled, + localError = localError, isError = !localError.isNullOrEmpty() || (localValue.length > (characterCount ?: Int.MAX_VALUE)), value = localValue, onInputValueChange = { newValue -> @@ -111,7 +117,11 @@ object TextInputView { colors = HmrcTheme.textFieldColors, textStyle = if (requiredSequencesSpacing) { HmrcTheme.typography.sequencesBody } else { HmrcTheme.typography.body }, - isCustomErrorInputHandle = isCustomErrorInputHandle + isCustomErrorInputHandle = isCustomErrorInputHandle, + leadingContent = leadingContent, + errorText = if (leadingContent != null) null else errorText, + currencyErrorText = errorText, + errorContentDescription = errorContentDescription ) } } diff --git a/components-compose/src/main/res/drawable/components_ic_pound_sign.xml b/components-compose/src/main/res/drawable/components_ic_pound_sign.xml new file mode 100644 index 00000000..3f73c38a --- /dev/null +++ b/components-compose/src/main/res/drawable/components_ic_pound_sign.xml @@ -0,0 +1,29 @@ + + + + + + \ No newline at end of file