Generalize the view

This commit is contained in:
Tessa Kelly 2021-11-11 13:55:00 -08:00
parent a9b5ad03ab
commit 6133e29db8
2 changed files with 34 additions and 28 deletions

View File

@ -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 ""

View File

@ -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
( 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 ""
, InputErrorAndGuidanceInternal.view idValue config
]