HMA-11966-tax-calc-components-pounds-and-percentages

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

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,
+
     )
 }
 

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
             )
         }
     }

components-compose/src/main/res/drawable/components_ic_pound_sign.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="30"
+    android:viewportHeight="30">
+
+    <path
+        android:fillColor="#000000"
+        android:pathData="M17.85,7 L19.85,7 C20.45,7,20.85,6.6,20.85,6 C20.85,5.9,20.85,5.9,20.85,5.8
+C20.25,2.5,17.45,0,13.95,0 C10.05,0,6.95,3.1,6.95,7 C6.95,7.6,7.05,8.6,7.25,9.3
+C7.35,9.7,7.45,10,7.55,10.4 C7.65,10.7,7.35,11,7.05,11 L4.95,11
+C4.35,11,3.95,11.4,3.95,12 L3.95,14 C3.95,14.6,4.35,15,4.95,15 L8.25,15
+C8.45,15,8.75,15.2,8.75,15.4 C8.85,16.1,8.95,16.6,8.95,17
+C8.95,19.1,6.55,21,4.15,22.6 C4.05,22.7,3.95,22.9,3.95,23 S3.95,23.2,4.05,23.3
+L5.75,25.8 C5.85,25.9,6.05,26,6.15,26 S6.35,26,6.45,25.9
+C7.65,25.1,9.25,25,12.05,25 C13.75,25,14.75,25.3,15.65,25.6
+C16.35,25.8,17.15,26,18.05,26 C19.85,26,20.85,25.4,21.55,25.1 L21.75,25
+C21.95,24.9,22.05,24.7,22.05,24.6 S22.05,24.4,21.95,24.4 L20.55,21.7
+C20.45,21.5,20.15,21.4,19.85,21.5 L19.55,21.7 C19.05,22,18.75,22.1,17.95,22.1
+C17.65,22.1,17.25,22,16.65,21.8 C15.65,21.5,14.45,21.2,12.55,21.1
+C12.15,21.1,11.95,20.8,12.15,20.4 C12.65,19.4,12.95,18.3,12.95,17.1
+C12.95,16.7,12.95,16.2,12.85,15.7 C12.85,15.4,13.05,15.1,13.35,15.1 L18.95,15.1
+C19.55,15.1,19.95,14.7,19.95,14.1 L19.95,12.1 C19.95,11.5,19.55,11.1,18.95,11.1
+L12.25,11.1 C12.05,11.1,11.85,10.9,11.75,10.7 C11.55,9.8,11.25,8.9,11.05,8.2
+C10.95,8,10.95,7.4,10.95,7.1 C10.95,5.4,12.25,4.1,13.95,4.1
+C15.35,4.1,16.45,5,16.85,6.3 C16.95,6.6,17.35,7,17.85,7 Z" />
+
+</vector>