Generalize the view

src/InputErrorAndGuidanceInternal.elm

@@ -2,7 +2,7 @@ module InputErrorAndGuidanceInternal exposing
     ( ErrorState, noError, setErrorIf, setErrorMessage
     , Guidance, noGuidance, setGuidance
     , getIsInError, getErrorMessage
-    , describedBy
+    , describedBy, view
     )
 
 {-|
@@ -10,13 +10,16 @@ module InputErrorAndGuidanceInternal exposing
 @docs ErrorState, noError, setErrorIf, setErrorMessage
 @docs Guidance, noGuidance, setGuidance
 @docs getIsInError, getErrorMessage
-@docs describedBy
+@docs describedBy, view
 
 -}
 
 import Accessibility.Styled.Aria as Aria
-import Html.Styled as Html
+import Css
+import Html.Styled as Html exposing (Html)
 import Nri.Ui.Html.Attributes.V2
+import Nri.Ui.Message.V3 as Message
+import Nri.Ui.Text.V6 as Text
 
 
 {-| -}
@@ -112,3 +115,30 @@ describedBy idValue config =
 
         _ ->
             Nri.Ui.Html.Attributes.V2.none
+
+
+view : String -> { config | guidance : Guidance, error : ErrorState } -> Html msg
+view idValue config =
+    case ( getErrorMessage config.error, config.guidance ) of
+        ( Just m, _ ) ->
+            Message.view
+                [ Message.tiny
+                , Message.error
+                , Message.plaintext m
+                , Message.alertRole
+                ]
+
+        ( _, Just guidanceMessage ) ->
+            Text.caption
+                [ Text.id (idValue ++ "_guidance")
+                , Text.plaintext guidanceMessage
+                , -- Match the vertical styles of the error message
+                  Text.css
+                    [ Css.paddingTop (Css.px 6)
+                    , Css.paddingBottom (Css.px 8)
+                    , Css.lineHeight (Css.px 23)
+                    ]
+                ]
+
+        _ ->
+            Html.text ""

src/Nri/Ui/TextInput/V7.elm

@@ -65,9 +65,7 @@ import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Html.Attributes.V2 as Extra
 import Nri.Ui.Html.V3 exposing (viewJust)
 import Nri.Ui.InputStyles.V3 as InputStyles exposing (defaultMarginTop)
-import Nri.Ui.Message.V3 as Message
 import Nri.Ui.Svg.V1 as Svg
-import Nri.Ui.Text.V6 as Text
 import Nri.Ui.UiIcon.V1 as UiIcon
 import Nri.Ui.Util exposing (dashify)
 
@@ -679,29 +677,7 @@ view label attributes =
             eventsAndValues.floatingContent
             eventsAndValues.onInput
             |> Maybe.withDefault (Html.text "")
-        , case ( errorMessage_, config.guidance ) of
+        , InputErrorAndGuidanceInternal.view idValue config
-            ( Just m, _ ) ->
-                Message.view
-                    [ Message.tiny
-                    , Message.error
-                    , Message.plaintext m
-                    , Message.alertRole
-                    ]
-
-            ( _, Just guidanceMessage ) ->
-                Text.caption
-                    [ Text.id (idValue ++ "_guidance")
-                    , Text.plaintext guidanceMessage
-                    , -- Match the vertical styles of the error message
-                      Text.css
-                        [ Css.paddingTop (Css.px 6)
-                        , Css.paddingBottom (Css.px 8)
-                        , Css.lineHeight (Css.px 23)
-                        ]
-                    ]
-
-            _ ->
-                Html.text ""
         ]