Added passwordInput Page #57

explorer/src/Main.elm

@@ -8,10 +8,7 @@ import UIExplorer
 
 pages =
     UIExplorer.firstPage "Button" Page.Button.page
-
-
-
---|> UIExplorer.nextPage "Password Input" Page.PasswordInput.page
+        |> UIExplorer.nextPage "Password Input" Page.PasswordInput.page
 
 
 main =

explorer/src/Page.elm

@@ -25,7 +25,7 @@ create { title, description, book, demo } =
     Tile.static []
         (\_ _ ->
             [ title |> Element.text |> Element.el Typography.h3
-            , description |> Element.text |> Element.el []
+            , description |> Element.text |> List.singleton |> Element.paragraph []
             ]
                 |> Element.column [ Element.spacing 32 ]
         )

explorer/src/Page/PasswordInput.elm

@@ -7,11 +7,12 @@ import Element.Font
 import Element.Input as Input
 import Material.Icons as MaterialIcons exposing (offline_bolt)
 import Material.Icons.Types exposing (Coloring(..))
+import Page
 import Set exposing (Set)
-import UIExplorer
-import UIExplorer.Story as Story
-import UIExplorer.Tile as Tile
-import Widget exposing (ColumnStyle, PasswordInputStyle)
+import UIExplorer exposing (Page)
+import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
+import UIExplorer.Tile as Tile exposing (Context, Group, Position, Tile, TileMsg)
+import Widget exposing (ButtonStyle, ColumnStyle, PasswordInputStyle)
 import Widget.Customize as Customize
 import Widget.Icon as Icon exposing (Icon)
 import Widget.Material as Material
@@ -27,23 +28,54 @@ import Widget.Material.Color as MaterialColor
 import Widget.Material.Typography as Typography
 
 
-page =
-    Tile.first (intro |> Tile.withTitle "Password Input")
-        |> Tile.nextGroup book
-        |> Tile.next demo
-        |> Tile.page
+{-| The title of this page
+-}
+title : String
+title =
+    "Password Input"
 
 
-intro =
-    Tile.markdown []
-        """ An input field for a password. """
+{-| The description. I've taken this description directly from the [Material-UI-Specification](https://material.io/components/buttons)
+-}
+description : String
+description =
+    "If we want to play nicely with a browser's ability to autofill a form, we need to be able to give it a hint about what we're expecting.\n    \nThe following inputs are very similar to Input.text, but they give the browser a hint to allow autofill to work correctly."
+
+
+{-| List of view functions. Essentially, anything that takes a Button as input.
+-}
+viewFunctions =
+    let
+        viewCurrentPassword palette text placeholder label _ _ =
+            Widget.currentPasswordInput (Material.passwordInput palette)
+                { text = text
+                , placeholder = placeholder
+                , label = label
+                , onChange = always ()
+                , show = False
+                }
+                --Don't forget to change the title
+                |> Page.viewTile "Widget.currentPasswordInput"
+
+        viewNewPassword palette text placeholder label _ _ =
+            Widget.newPasswordInput (Material.passwordInput palette)
+                { text = text
+                , placeholder = placeholder
+                , label = label
+                , onChange = always ()
+                , show = False
+                }
+                --Don't forget to change the title
+                |> Page.viewTile "Widget.newPasswordInput"
+    in
+    [ viewNewPassword, viewCurrentPassword ]
+        |> List.foldl Story.addTile
+            Story.initStaticTiles
 
 
 book =
-    Story.book (Just "options")
-        (Story.initStaticTiles
-            |> Story.addTile viewPassword
-        )
+    Story.book (Just "Options")
+        viewFunctions
         |> Story.addStory
             (Story.optionListStory "Palette"
                 darkPalette
@@ -74,65 +106,28 @@ book =
         |> Story.build
 
 
-type alias Style style msg =
-    { style
-        | passwordInput : PasswordInputStyle msg
-        , column : ColumnStyle msg
-    }
-
-
-viewLabel : String -> Element msg
-viewLabel =
-    Element.el [ Element.width <| Element.px 250 ] << Element.text
-
-
-viewPassword palette text placeholder label _ _ =
-    { title = Nothing
-    , position = Tile.LeftColumnTile
-    , attributes = [ Background.color <| MaterialColor.fromColor palette.surface ]
-    , body =
-        Element.column
-            [ Element.width Element.fill
-            , Element.centerY
-            , Element.Font.color <| MaterialColor.fromColor palette.on.surface
-            ]
-            [ viewLabel "Current Password"
-            , { text = text
-              , placeholder = placeholder
-              , label = label
-              , onChange = always ()
-              , show = False
-              }
-                |> Widget.currentPasswordInput (Material.passwordInput palette)
-            ]
-    }
-
-
 
 --------------------------------------------------------------------------------
--- Example
+-- Interactive Demonstration
 --------------------------------------------------------------------------------
-
-
-materialStyle : Style {} msg
-materialStyle =
-    { passwordInput = Material.passwordInput Material.defaultPalette
-    , column = Material.column
-    }
+{- This section here is essentially just a normal Elm program. -}
 
 
 type alias Model =
     { passwordInput : String
+    , newInput : String
     }
 
 
 type Msg
     = SetPasswordInput String
+    | SetNewPasswordInput String
 
 
 init : ( Model, Cmd Msg )
 init =
     ( { passwordInput = ""
+      , newInput = ""
       }
     , Cmd.none
     )
@@ -144,30 +139,75 @@ update msg model =
         SetPasswordInput string ->
             ( { model | passwordInput = string }, Cmd.none )
 
+        SetNewPasswordInput string ->
+            ( { model | newInput = string }, Cmd.none )
+
 
 subscriptions : Model -> Sub Msg
 subscriptions _ =
     Sub.none
 
 
-view _ model =
+view { palette } model =
     { title = Just "Interactive Demo"
     , position = Tile.FullWidthTile
     , attributes = []
     , body =
-        { text = model.passwordInput
-        , placeholder = Nothing
-        , label = "Chips"
-        , onChange = SetPasswordInput
-        , show = False
-        }
-            |> Widget.currentPasswordInput (Material.passwordInput Material.defaultPalette)
+        [ "Try  fill out these fields using autofill" |> Element.text
+        , [ "Current Password"
+                |> Element.text
+                |> Element.el [ Element.width <| Element.fill ]
+          , Widget.currentPasswordInput (Material.passwordInput palette)
+                { text = model.passwordInput
+                , placeholder = Nothing
+                , label = "Chips"
+                , onChange = SetPasswordInput
+                , show = False
+                }
+          ]
+            |> Element.row [ Element.width <| Element.fill, Element.spaceEvenly ]
+        , [ "New Password"
+                |> Element.text
+                |> Element.el [ Element.width <| Element.fill ]
+          , Widget.newPasswordInput (Material.passwordInput palette)
+                { text = model.newInput
+                , placeholder = Nothing
+                , label = "Chips"
+                , onChange = SetNewPasswordInput
+                , show = False
+                }
+          ]
+            |> Element.row [ Element.width <| Element.fill, Element.spaceEvenly ]
+        , Element.text <|
+            if (model.newInput /= "") && (model.newInput == model.passwordInput) then
+                "Yeay, the two passwords match!"
+
+            else
+                ""
+        ]
+            |> Element.column [ Element.width <| Element.fill, Element.spacing 8 ]
     }
 
 
+demo : Tile Model Msg ()
 demo =
     { init = always init
     , update = update
     , view = view
     , subscriptions = subscriptions
     }
+
+
+
+--------------------------------------------------------------------------------
+-- DO NOT MODIFY ANTHING AFTER THIS LINE
+--------------------------------------------------------------------------------
+
+
+page =
+    Page.create
+        { title = title
+        , description = description
+        , book = book
+        , demo = demo
+        }

src/Internal/Material/PasswordInput.elm

@@ -30,6 +30,7 @@ passwordInput palette =
                         |> Border.color
                     ]
                , Element.mouseOver [ Border.shadow <| MaterialColor.shadow 2 ]
+               , Element.width <| Element.px <| 280
                ]
     , content =
         { password =

src/Internal/Material/TextInput.elm

@@ -29,6 +29,7 @@ textInput palette =
                         |> MaterialColor.fromColor
                         |> Border.color
                     ]
+               , Element.width <| Element.px <| 280
                , Element.mouseOver [ Border.shadow <| MaterialColor.shadow 2 ]
                ]
     , content =