Merge pull request #204 from NoRedInk/ink/on-blur-text-input

Add onBlur to TextInput V4

elm.json

@@ -45,6 +45,7 @@
         "Nri.Ui.TextArea.V3",
         "Nri.Ui.TextArea.V4",
         "Nri.Ui.TextInput.V3",
+        "Nri.Ui.TextInput.V4",
         "Nri.Ui"
     ],
     "elm-version": "0.19.0 <= v < 0.20.0",

package-lock.json

@@ -568,7 +568,7 @@
     },
     "browserify-aes": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
+      "resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
       "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
       "dev": true,
       "requires": {
@@ -605,7 +605,7 @@
     },
     "browserify-rsa": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
+      "resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
       "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
       "dev": true,
       "requires": {
@@ -882,7 +882,7 @@
     },
     "convert-source-map": {
       "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.1.3.tgz",
+      "resolved": "http://registry.npmjs.org/convert-source-map/-/convert-source-map-1.1.3.tgz",
       "integrity": "sha1-SCnId+n+SbMWHzvzZziI4gRpmGA=",
       "dev": true
     },
@@ -910,7 +910,7 @@
     },
     "create-hash": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
+      "resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
       "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
       "dev": true,
       "requires": {
@@ -923,7 +923,7 @@
     },
     "create-hmac": {
       "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+      "resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
       "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
       "dev": true,
       "requires": {
@@ -1108,7 +1108,7 @@
     },
     "diffie-hellman": {
       "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
+      "resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
       "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
       "dev": true,
       "requires": {
@@ -2451,7 +2451,7 @@
     },
     "jsonfile": {
       "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
+      "resolved": "http://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
       "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
       "dev": true,
       "requires": {
@@ -2712,7 +2712,7 @@
     },
     "mkdirp": {
       "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+      "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
       "dev": true,
       "requires": {
@@ -2959,7 +2959,7 @@
     },
     "parse-asn1": {
       "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
+      "resolved": "http://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
       "integrity": "sha512-KPx7flKXg775zZpnp9SxJlz00gTd4BmJ2yJufSc44gMCRrRQ7NSzAcSJQfifuOLgW6bEi+ftrALtsgALeB2Adw==",
       "dev": true,
       "requires": {
@@ -3069,7 +3069,7 @@
     },
     "public-encrypt": {
       "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz",
+      "resolved": "http://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz",
       "integrity": "sha512-4kJ5Esocg8X3h8YgJsKAuoesBgB7mqH3eowiDzMUPKiRDDE7E/BqqZD1hnTByIaAFiwAw246YEltSq7tdrOH0Q==",
       "dev": true,
       "requires": {
@@ -3771,7 +3771,7 @@
     },
     "sha.js": {
       "version": "2.4.11",
-      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+      "resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
       "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
       "dev": true,
       "requires": {
@@ -3781,7 +3781,7 @@
     },
     "shasum": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/shasum/-/shasum-1.0.2.tgz",
+      "resolved": "http://registry.npmjs.org/shasum/-/shasum-1.0.2.tgz",
       "integrity": "sha1-5wEjENj0F/TetXEhUOVni4euVl8=",
       "dev": true,
       "requires": {
@@ -4147,7 +4147,7 @@
       "dependencies": {
         "rimraf": {
           "version": "2.2.8",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
+          "resolved": "http://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
           "integrity": "sha1-5Dm+Kq7jJzIZUnMPmaiSnk/FBYI=",
           "dev": true
         }
@@ -4155,7 +4155,7 @@
     },
     "through": {
       "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",
       "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
       "dev": true
     },

src/Nri/Ui/TextInput/V4.elm

@@ -0,0 +1,146 @@
+module Nri.Ui.TextInput.V4 exposing
+    ( Model
+    , view, writing
+    , number
+    , text
+    )
+
+{-|
+
+@docs Model
+@docs view, writing
+
+
+## Input types
+
+@docs number
+@docs text
+
+-}
+
+import Accessibility.Styled.Style as Accessibility
+import Css exposing (batch, center, position, px, relative, textAlign)
+import Css.Global
+import Html.Styled as Html exposing (..)
+import Html.Styled.Attributes as Attributes exposing (..)
+import Html.Styled.Events as Events exposing (onInput)
+import Nri.Ui.Html.Attributes.V2 as Extra
+import Nri.Ui.InputStyles.V2 as InputStyles exposing (Theme)
+import Nri.Ui.Util exposing (dashify)
+
+
+{-| -}
+type alias Model value msg =
+    { label : String
+    , isInError : Bool
+    , onInput : value -> msg
+    , onBlur : Maybe msg
+    , placeholder : String
+    , value : value
+    , autofocus : Bool
+    , showLabel : Bool
+    , type_ : InputType value
+    }
+
+
+{-| -}
+type InputType value
+    = InputType
+        { toString : value -> String
+        , fromString : String -> value
+        , fieldType : String
+        }
+
+
+{-| An input that allows text entry
+-}
+text : InputType String
+text =
+    InputType
+        { toString = identity
+        , fromString = identity
+        , fieldType = "text"
+        }
+
+
+{-| An input that allows number entry
+-}
+number : InputType (Maybe Int)
+number =
+    InputType
+        { toString = Maybe.map String.fromInt >> Maybe.withDefault ""
+        , fromString = String.toInt
+        , fieldType = "number"
+        }
+
+
+{-| -}
+view : Model value msg -> Html msg
+view model =
+    view_ InputStyles.Standard model
+
+
+{-| -}
+writing : Model value msg -> Html msg
+writing model =
+    view_ InputStyles.Writing model
+
+
+view_ : Theme -> Model value msg -> Html msg
+view_ theme model =
+    let
+        idValue =
+            "Nri-Ui-TextInput-" ++ dashify model.label
+
+        (InputType inputType) =
+            model.type_
+    in
+    div
+        [ Attributes.css [ position relative ]
+        ]
+        [ input
+            [ Attributes.id idValue
+            , css
+                [ InputStyles.input theme model.isInError
+                , if theme == InputStyles.Writing then
+                    Css.Global.withClass "override-sass-styles"
+                        [ textAlign center
+                        , Css.height Css.auto
+                        ]
+
+                  else
+                    Css.Global.withClass "override-sass-styles"
+                        [ Css.height (px 45)
+                        ]
+                ]
+            , placeholder model.placeholder
+            , value (inputType.toString model.value)
+            , onInput (inputType.fromString >> model.onInput)
+            , Maybe.withDefault Extra.none (Maybe.map Events.onBlur model.onBlur)
+            , autofocus model.autofocus
+            , type_ inputType.fieldType
+            , class "override-sass-styles"
+            , Attributes.attribute "aria-invalid" <|
+                if model.isInError then
+                    "true"
+
+                else
+                    "false"
+            ]
+            []
+        , if model.showLabel then
+            Html.label
+                [ for idValue
+                , css [ InputStyles.label theme model.isInError ]
+                ]
+                [ Html.text model.label ]
+
+          else
+            Html.label
+                ([ for idValue
+                 , css [ InputStyles.label theme model.isInError ]
+                 ]
+                    ++ Accessibility.invisible
+                )
+                [ Html.text model.label ]
+        ]

styleguide-app/Examples/TextInput.elm

@@ -8,7 +8,7 @@ import Dict exposing (Dict)
 import Headings
 import Html.Styled as Html
 import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
-import Nri.Ui.TextInput.V3 as TextInput
+import Nri.Ui.TextInput.V4 as TextInput
 
 
 {-| -}
@@ -27,7 +27,7 @@ type alias State =
 {-| -}
 example : (Msg -> msg) -> State -> ModuleExample msg
 example parentMessage state =
-    { filename = "Nri.Ui.TextInput.V3"
+    { filename = "Nri.Ui.TextInput.V4"
     , category = Inputs
     , content =
         [ Html.map parentMessage <|
@@ -38,6 +38,7 @@ example parentMessage state =
                     , placeholder = "For example, \"Something!!\""
                     , value = Maybe.withDefault "" <| Dict.get 1 state.textInputValues
                     , onInput = SetTextInput 1
+                    , onBlur = Nothing
                     , autofocus = False
                     , type_ = TextInput.text
                     , showLabel = True
@@ -49,6 +50,7 @@ example parentMessage state =
                     , placeholder = "enter a number"
                     , value = state.numberInputValue
                     , onInput = SetNumberInput
+                    , onBlur = Nothing
                     , autofocus = False
                     , type_ = TextInput.number
                     , showLabel = True
@@ -60,6 +62,7 @@ example parentMessage state =
                     , placeholder = "Wrong!"
                     , value = state.numberInputValue
                     , onInput = SetNumberInput
+                    , onBlur = Nothing
                     , autofocus = False
                     , type_ = TextInput.number
                     , showLabel = True
@@ -71,6 +74,7 @@ example parentMessage state =
                     , placeholder = "For example, \"Something!!\""
                     , value = Maybe.withDefault "" <| Dict.get 2 state.textInputValues
                     , onInput = SetTextInput 2
+                    , onBlur = Nothing
                     , autofocus = False
                     , type_ = TextInput.text
                     , showLabel = False
@@ -81,6 +85,7 @@ example parentMessage state =
                     , placeholder = "Everything you type is wrong!"
                     , value = Maybe.withDefault "" <| Dict.get 3 state.textInputValues
                     , onInput = SetTextInput 3
+                    , onBlur = Nothing
                     , isInError = True
                     , autofocus = False
                     , type_ = TextInput.text
@@ -93,6 +98,7 @@ example parentMessage state =
                     , placeholder = "Writing is good for me and my family"
                     , value = Maybe.withDefault "" <| Dict.get 4 state.textInputValues
                     , onInput = SetTextInput 4
+                    , onBlur = Nothing
                     , autofocus = False
                     , type_ = TextInput.text
                     , showLabel = True
@@ -104,6 +110,7 @@ example parentMessage state =
                     , placeholder = "Oopsie!"
                     , value = Maybe.withDefault "" <| Dict.get 5 state.textInputValues
                     , onInput = SetTextInput 5
+                    , onBlur = Nothing
                     , autofocus = False
                     , type_ = TextInput.text
                     , showLabel = True
@@ -115,10 +122,23 @@ example parentMessage state =
                     , placeholder = "No label on this writing input!"
                     , value = Maybe.withDefault "" <| Dict.get 6 state.textInputValues
                     , onInput = SetTextInput 6
+                    , onBlur = Nothing
                     , autofocus = False
                     , type_ = TextInput.text
                     , showLabel = False
                     }
+                , Html.br [] []
+                , TextInput.writing
+                    { label = "Writing onBlur demonstration!"
+                    , isInError = False
+                    , placeholder = "Click away to blur!"
+                    , value = Maybe.withDefault "" <| Dict.get 7 state.textInputValues
+                    , onInput = SetTextInput 7
+                    , onBlur = Just (SetTextInput 7 "Blurred!")
+                    , autofocus = False
+                    , type_ = TextInput.text
+                    , showLabel = True
+                    }
                 ]
         ]
     }